<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% + 7.5cm);
            border: none;
            display: none;
            position: relative;
            top: -7.5cm;
        }

        .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;
        }

        .code-area {
            width: 100%;
            height: 300px;
            margin: 10px 0;
            padding: 10px;
            font-family: monospace;
            direction: ltr;
            text-align: left;
            resize: vertical;
        }

        .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="کد HTML اینجا نمایش داده می&zwnj;شود..."></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;

        // Modal elements
        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');

        // Buttons
        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();
                });
        }

        // Event Listeners for modals
        descriptionButtonTop.addEventListener('click', (e) => {
            e.preventDefault();
            descriptionModal.style.display = 'block';
        });

        codePreviewButtonTop.addEventListener('click', (e) => {
            e.preventDefault();
            // Here you would normally get the generated HTML code
            // For demonstration, we're using placeholder code
            codeArea.value = `<!DOCTYPE html>
<html>
<head>
    <title>Generated Page</title>
</head>
<body>
    <!-- Generated code will appear here -->
    <div class="container">
        <h1>Generated Content</h1>
    </div>
</body>
</html>`;
            codeModal.style.display = 'block';
        });

        previewButton.addEventListener('click', () => {
            previewArea.innerHTML = codeArea.value;
            codeModal.style.display = 'none';
            previewModal.style.display = 'block';
        });

        // Close buttons
        closeDescriptionBtn.addEventListener('click', () => {
            descriptionModal.style.display = 'none';
        });

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

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

        // Click outside modal to close
        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();
        });

        // Initial load
        loadIframe();
        startProgress();
    </script>
</p> داخل این کد وقتی روی نمایشگر کلیک میکنم یک کد است که اول باید هیچ حدی داخل اش نباشه <!DOCTYPE html>
<html>
<head>
    <title>Generated Page</title>
</head>
<body>
    <!-- Generated code will appear here -->
    <div class="container">
        <h1>Generated Content</h1>
    </div>
</body>
</html> این کد داخل اش است ببین بجای این اول یک  متن قرار بده که نوشته باشه کد تولید شده رو برای نمایش اینجا جایگزاری کن! کد کامل یکجا درست کن بفرست