<p>&nbsp;</p>
<style>
body {
    margin: 0;
    padding: 0;
    /* overflow: hidden; */ /* این خط حذف شد */
    /* height: 100vh; */    /* این خط حذف شد */
    background-color: #f0f0f0;
    font-family: Arial, sans-serif;
}

.iframe-container {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
}

iframe {
    width: 100%;
    height: calc(100% + 8cm); /* افزایش ارتفاع به اندازه ۸ سانتیمتر */
    border: none;
    display: none;
    position: relative;
    top: -8cm; /* مخفی کردن ۸ سانتیمتر از بالای آی‌فریم */
}

.loading {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 10000;
}

.loading-message {
    margin-bottom: 20px;
    font-size: 18px;
}

.progress {
    width: 80%;
    max-width: 400px;
    height: 20px;
    background-color: #ddd;
    border-radius: 5px;
    overflow: hidden;
}

.progress-bar {
    height: 100%;
    width: 0;
    background-color: #4caf50;
    transition: width 1s;
}

.error-message {
    display: none;
    color: red;
    margin-top: 20px;
    font-size: 16px;
    text-align: center;
}

#retryButton {
    display: none;
    margin-top: 10px;
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
    background-color: #4caf50;
    color: white;
    border: none;
    border-radius: 5px;
}

.description-button-top, .code-preview-button-top {
    display: block;
    width: 150px;
    color: white;
    text-align: center;
    padding: 10px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 14px;
    transition: background-color 0.3s;
    position: fixed;
    top: 10px;
    z-index: 10001;
    text-decoration: none;
}

.description-button-top {
    background-color: #546e7a;
    left: 10px;
}

.code-preview-button-top {
    background-color: #4CAF50;
    right: 10px;
}

.modal {
    display: none;
    position: fixed;
    z-index: 10002;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    overflow: auto;
}

.modal-content {
    background-color: #fefefe;
    margin: 5% auto;
    padding: 20px;
    border: 1px solid #888;
    width: 90%;
    max-width: 900px;
    text-align: center;
    border-radius: 5px;
    position: relative;
}

.modal-content h2 {
    margin-top: 0;
}

.code-area {
    width: 100%;
    height: 300px;
    margin: 10px 0;
    padding: 10px;
    font-family: 'Courier New', Courier, monospace;
    direction: ltr;
    text-align: left;
    resize: vertical;
    font-size: 14px;
    background-color: #2d2d2d;
    color: #f8f8f2;
    border: 1px solid #444;
    border-radius: 5px;
    position: relative;
}

/* افزودن آیکون به کادر کد */
.code-area::before {
    content: '💻';
    position: absolute;
    top: 10px;
    left: 10px;
    font-size: 20px;
}

.code-area::placeholder {
    color: #bbb;
    padding-left: 30px; /* فاصله برای آیکون */
}

.preview-area {
    width: 100%;
    height: 400px;
    margin: 10px 0;
    border: 1px solid #ccc;
    overflow: auto;
    background: white;
}

.modal-button {
    margin: 5px;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 14px;
    color: white;
}

.preview-btn {
    background-color: #2196F3;
}

.close-btn {
    background-color: #f44336;
}

@media (max-width: 768px) {
    .description-button-top, .code-preview-button-top {
        width: 120px;
        padding: 8px;
        font-size: 12px;
    }

    .modal-content {
        width: 95%;
        margin: 10% auto;
    }
}
</style>
<p><a href="#" class="description-button-top" id="descriptionButtonTop">توضیحات</a> <a href="#" class="code-preview-button-top" id="codePreviewButtonTop">نمایشگر کد</a></p>
<!-- مدال توضیحات -->
<div id="descriptionModal" class="modal">
<div class="modal-content">
<h2>تبدیل تصویر به کد HTML با هوش مصنوعی</h2>
<p>با این ابزار می&zwnj;توانید تصاویر را به کد HTML تبدیل کنید.</p>
<button class="modal-button close-btn" id="closeDescriptionBtn">بستن</button></div>
</div>
<!-- مدال نمایش کد -->
<div id="codeModal" class="modal">
<div class="modal-content">
<h2>کد HTML تولید شده</h2>
<textarea id="codeArea" class="code-area" placeholder="کد تولید شده را برای نمایش اینجا قرار دهید"></textarea> <button class="modal-button preview-btn" id="previewButton">نمایش صفحه</button> <button class="modal-button close-btn" id="closeCodeBtn">بستن</button></div>
</div>
<!-- مدال پیش‌نمایش -->
<div id="previewModal" class="modal">
<div class="modal-content">
<h2>پیش&zwnj;نمایش صفحه</h2>
<div id="previewArea" class="preview-area"></div>
<button class="modal-button close-btn" id="closePreviewBtn">بستن</button></div>
</div>
<!-- کانتینر آی‌فریم و لودینگ -->
<div class="iframe-container">
<div class="loading" id="loadingContainer">
<div class="loading-message">لطفاً صبر کنید...</div>
<div class="progress">
<div class="progress-bar" id="progressBar"></div>
</div>
<div class="error-message" id="errorMessage">بارگیری زیاد طول کشید.<br />در صورت عدم بارگذاری، فیلترشکن خود را روشن کنید.</div>
<button id="retryButton">بارگذاری مجدد</button></div>
<iframe id="myIframe"></iframe></div>
<p>
<script>
const siteURL = 'https://l-ai-gemini-ui-generator.hf.space';
let progress = 0;
const progressBar = document.getElementById('progressBar');
const retryButton = document.getElementById('retryButton');
const errorMessage = document.getElementById('errorMessage');
const loadingContainer = document.getElementById('loadingContainer');
let interval;
let iframeLoadedFlag = false;

// عناصر مدال
const descriptionModal = document.getElementById('descriptionModal');
const codeModal = document.getElementById('codeModal');
const previewModal = document.getElementById('previewModal');
const codeArea = document.getElementById('codeArea');
const previewArea = document.getElementById('previewArea');

// دکمه‌ها
const descriptionButtonTop = document.getElementById('descriptionButtonTop');
const codePreviewButtonTop = document.getElementById('codePreviewButtonTop');
const closeDescriptionBtn = document.getElementById('closeDescriptionBtn');
const closeCodeBtn = document.getElementById('closeCodeBtn');
const closePreviewBtn = document.getElementById('closePreviewBtn');
const previewButton = document.getElementById('previewButton');

function startProgress() {
    loadingContainer.style.display = 'flex';
    progressBar.style.width = '0%';
    progress = 0;

    interval = setInterval(() => {
        if (progress < 100) {
            progress += 10;
            progressBar.style.width = progress + '%';
        }
        if (progress === 100) {
            clearInterval(interval);
            if (!iframeLoadedFlag) {
                retryButton.style.display = 'block';
                errorMessage.style.display = 'block';
            }
        }
    }, 1000);
}

function iframeLoaded() {
    iframeLoadedFlag = true;
    clearInterval(interval);
    loadingContainer.style.display = 'none';
    document.getElementById('myIframe').style.display = 'block';
}

function iframeError() {
    clearInterval(interval);
    loadingContainer.style.display = 'flex';
    retryButton.style.display = 'block';
    errorMessage.style.display = 'block';
}

function loadIframe() {
    fetch(siteURL, { method: 'HEAD', mode: 'no-cors' })
    .then(() => {
        const iframe = document.getElementById('myIframe');
        iframe.src = siteURL;
        iframe.onload = iframeLoaded;
        iframe.onerror = iframeError;
    })
    .catch(() => {
        iframeError();
    });
}

// لیسنرهای مدال‌ها
descriptionButtonTop.addEventListener('click', (e) => {
    e.preventDefault();
    descriptionModal.style.display = 'block';
});

codePreviewButtonTop.addEventListener('click', (e) => {
    e.preventDefault();
    codeArea.value = '';
    codeModal.style.display = 'block';
});

previewButton.addEventListener('click', () => {
    const code = codeArea.value.trim();
    if (code) {
        previewArea.innerHTML = code;
        codeModal.style.display = 'none';
        previewModal.style.display = 'block';
    } else {
        alert('لطفاً کد HTML را وارد کنید.');
    }
});

// دکمه‌های بستن مدال‌ها
closeDescriptionBtn.addEventListener('click', () => {
    descriptionModal.style.display = 'none';
});

closeCodeBtn.addEventListener('click', () => {
    codeModal.style.display = 'none';
});

closePreviewBtn.addEventListener('click', () => {
    previewModal.style.display = 'none';
});

// بستن مدال با کلیک خارج از آن‌ها
window.addEventListener('click', (event) => {
    if (event.target === descriptionModal) {
        descriptionModal.style.display = 'none';
    }
    if (event.target === codeModal) {
        codeModal.style.display = 'none';
    }
    if (event.target === previewModal) {
        previewModal.style.display = 'none';
    }
});

// دکمه بارگذاری مجدد
retryButton.addEventListener('click', function() {
    progress = 0;
    progressBar.style.width = '0%';
    iframeLoadedFlag = false;
    retryButton.style.display = 'none';
    errorMessage.style.display = 'none';
    loadingContainer.style.display = 'flex';
    document.getElementById('myIframe').style.display = 'none';
    loadIframe();
    startProgress();
});

// بارگذاری اولیه
loadIframe();
startProgress();
</script>
</p> دکمه توضیحات رو کلا حذف کن و رنگ دکمه نمایشگر تصویر رو هم یکم بهتر کن و یک شکلک هم کنار متنش بزار بهش بخوره یا انیمیشن چیزی بهارش کن کد کامل یکجا درست کن بفرست