<!DOCTYPE html>
<html lang="fa">
<head>
    <meta charset="UTF-8">
    <title>وب‌سایت سریع</title>
    <style>
        /* مخفی کردن تمامی لینک‌ها */
        a {
          display: none !important;
        }

        body, html {
          margin: 0;
          padding: 0;
          height: 100%;
          overflow: hidden; /* جلوگیری از اسکرول در زمان نمایش نوار پیشرفت */
          background-color: #f4f4f9;
          font-family: Arial, sans-serif;
        }

        #loader {
          width: 100%;
          text-align: center;
          position: absolute;
          height: 100%;
          display: flex;
          justify-content: center;
          align-items: center;
          flex-direction: column;
          z-index: 1;
          background-color: #f4f4f9;
        }

        #progress {
          width: 80%;
          background-color: #eee;
        }

        #bar {
          width: 0;
          height: 30px;
          background-color: #76c7c0;
          text-align: center;
          line-height: 30px;
          color: white;
        }

        .container {
          display: none; /* ابتدا مخفی است تا وقتی برنامه Gradio آماده شود */
          position: relative;
          overflow: hidden;
          height: 100vh;
          width: 100%;
        }

        gradio-app {
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          width: 100%;
          height: 100%;
        }

        /* استایل دکمه دانلود تصویر */
        #downloadButton {
          display: none; /* مخفی اولیه */
          position: absolute;
          top: 20px;
          right: 20px;
          background-color: #4CAF50;
          color: white;
          border: none;
          padding: 10px 20px;
          cursor: pointer;
          border-radius: 5px;
          z-index: 2;
        }

        #downloadButton:hover {
          background-color: #45a049;
        }

        /* استایل مودال */
        .modal {
          display: none; /* مخفی است */
          position: fixed;
          z-index: 3;
          left: 0;
          top: 0;
          width: 100%;
          height: 100%;
          overflow: auto;
          background-color: rgba(0,0,0,0.4); /* پس‌زمینه نیمه‌شفاف */
        }

        .modal-content {
          background-color: #fefefe;
          margin: 10% auto;
          padding: 20px;
          border: 1px solid #888;
          width: 80%;
          max-width: 600px;
          border-radius: 10px;
          position: relative;
          text-align: center; /* مرکز کردن محتوا */
        }

        .close {
          color: #aaa;
          position: absolute;
          top: 10px;
          right: 20px;
          font-size: 28px;
          font-weight: bold;
          cursor: pointer;
        }

        .close:hover,
        .close:focus {
          color: black;
          text-decoration: none;
        }

        #modalImageList img {
          max-width: 100%;
          height: auto;
          margin-bottom: 10px;
        }

        #downloadImages {
          background-color: #008CBA;
          color: white;
          border: none;
          padding: 10px 15px;
          cursor: pointer;
          border-radius: 5px;
          margin-top: 20px; /* فاصله بیشتر از دکمه */
        }

        #downloadImages:hover {
          background-color: #007B9E;
        }

        #instructions {
          margin-top: 15px;
          font-size: 14px;
          color: #555;
        }
    </style>
</head>
<body>
    <!-- دکمه دانلود تصویر -->
    <button id="downloadButton">دانلود تصویر</button>
    
    <div id="loader">
        <div id="progress">
            <div id="bar">0%</div>
        </div>
        <div>لطفاً صبر کنید...</div>
    </div>
    
    <!-- بازیابی تصاویر داخل صفحه از طریق مدل Gradio امکان‌پذیر نیست، بنابراین این بخش تنها برای نمایش نمونه است --><div class="container">
        <gradio-app src="https://stabilityai-stable-diffusion-3-5-large.hf.space"></gradio-app>
    </div>
    
    <!-- مودال اعلان -->
    <div id="imageModal" class="modal">
        <div class="modal-content">
            <span class="close">&times;</span>
            <h2>لیست تصاویر موجود</h2>
            <div id="modalImageList"><!-- تصاویر شناسایی شده نمایش داده می‌شوند --></div>
            <button id="downloadImages">دانلود تصاویر</button>
            <div id="instructions">برای ذخیره تصاویر روی دکمه دانلود کلیک کنید. بعد از باز شدن تصاویر، از صفحه عکس بگیرید و بعدا برش دهید.</div>
        </div>
    </div>
    
    <!-- بارگذاری اسکریپت Gradio با async برای بهبود سرعت بارگذاری -->
    <script async type="module" src="https://gradio.s3-us-west-2.amazonaws.com/5.3.0/gradio.js"></script>
    
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            function showContent() {
                document.getElementById('loader').style.display = 'none';
                document.querySelector('.container').style.display = 'block';
                document.body.style.overflow = 'auto'; // بازکردن اسکرول بعد از بارگذاری
                document.getElementById('downloadButton').style.display = 'block'; // نمایش دکمه دانلود پس از بارگذاری
            }
        
            function simulateProgress(callback) {
                let progressElement = document.getElementById('bar');
                let progress = 0;
                function updateProgress() {
                    progress += 1;
                    if (progress > 100) progress = 100;
                    progressElement.style.width = progress + '%';
                    progressElement.textContent = progress + '%';
                    if (progress < 100) {
                        setTimeout(updateProgress, 150); // بروزرسانی هر 150 میلی‌ثانیه
                    } else {
                        callback();
                    }
                }
                updateProgress();
            }
        
            window.onload = function() {
                simulateProgress(showContent);
        
                const gradioApp = document.querySelector('gradio-app');
        
                function checkIfLoaded() {
                    if (gradioApp && gradioApp.shadowRoot && gradioApp.shadowRoot.querySelector('some-element-inside-gradio')) { // تغییر با عنصر مناسب
                        document.getElementById('bar').style.width = '100%';
                        document.getElementById('bar').textContent = '100%';
                        showContent();
                    } else {
                        setTimeout(checkIfLoaded, 100); // بررسی هر 100 میلی‌ثانیه
                    }
                }
        
                checkIfLoaded();
            }
        
            // عملکرد دکمه دانلود تصویر
            var downloadButton = document.getElementById('downloadButton');
            if (downloadButton) {
                downloadButton.addEventListener('click', function() {
                    // شناسایی تصاویر داخل .container و خارج از مودال
                    const images = document.querySelectorAll('.container img');
                    if (images.length === 0) {
                        alert('هیچ تصویری در صفحه یافت نشد.');
                        return;
                    }
            
                    // نمایش مودال
                    const modal = document.getElementById('imageModal');
                    const modalImageList = document.getElementById('modalImageList');
                    modalImageList.innerHTML = ''; // پاکسازی قبل از اضافه کردن تصاویر جدید
            
                    images.forEach((img, index) => {
                        const imgWrapper = document.createElement('div');imgWrapper.style.marginBottom = '10px';
            
                        const image = document.createElement('img');
                        image.src = img.src;
                        image.alt = تصویر ${index + 1}; // استفاده از Template Literal صحیح
                        image.style.maxWidth = '100%';
                        image.style.height = 'auto';
            
                        imgWrapper.appendChild(image);
                        modalImageList.appendChild(imgWrapper);
                    });
            
                    modal.style.display = 'block';
                });
            }
        
            // بسته شدن مودال
            var closeModal = document.querySelector('.close');
            if (closeModal) {
                closeModal.addEventListener('click', function() {
                    document.getElementById('imageModal').style.display = 'none';
                });
            }
        
            // کلیک بیرون از مودال برای بستن آن
            window.addEventListener('click', function(event) {
                const modal = document.getElementById('imageModal');
                if (event.target == modal) {
                    modal.style.display = 'none';
                }
            });
        
            // عملکرد دکمه دانلود تصاویر در مودال
            var downloadImagesButton = document.getElementById('downloadImages');
            if (downloadImagesButton) {
                downloadImagesButton.addEventListener('click', function() {
                    const images = document.querySelectorAll('#modalImageList img');
                    if (images.length === 0) {
                        alert('هیچ تصویری برای دانلود موجود نیست.');
                        return;
                    }
            
                    images.forEach((img, index) => {
                        const link = document.createElement('a');
                        link.href = img.src;
                        link.download = image_${index + 1}.png; // نام فایل قابل دانلود با Template Literal صحیح
                        document.body.appendChild(link);
                        link.click();
                        document.body.removeChild(link);
                    });
            
                    alert('بعد از باز شدن تصویر در صفحه جدید برای ذخیره از صفحه اسکرین شات بگیرید.');
                    document.getElementById('imageModal').style.display = 'none';
                });
            }
        });
    </script>
</body>
</html> کاری کن وقتی روی دکمه دانلود تصویر داخل اعلان کلیک میکنم بجای اینکه تصویر در یک صفحه جدید باز کنه تا دانلود بشه کاری کن تصویر رو در حالت تمام صفحه فول صفحه رو در بر بگیره نمایش بده تا کاربر اسکرین شات بگیره و و یک دکمه بستن اول صفحه هم بزار تا اسکرین شات گرفت بتونه صفحه رو ببنده کد کامل یکجا درست کن بفرست.صفحه که قراره عکس در حالت تمام صفحه نشون بده فقط موقعی بیاد که روی دکمه دانلود داخل اعلان کلیک میکنیم نواز پیشرفت رو نیز حذف نکنی