<!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> در این کد میخواستم یک تغییر ایجاد کنم اینکه وقتی روی دکمه دانلود تصویر داخل اعلان دانلود تصویر یک دکمه دیگه به اسم دانلود تصویر است وقتی رو اون دکمه دانلود تصویر داخل اعلان کلیک میکنم بجای باز شدن لینک همونجا تصویر رو وقتی کلیک میکنیم در حالت تمام صفحه نمایش بده و لینک باز نکنه تا کاربر عکس بگیره چون امکان ذخیره تصویر در برنامه ما وجود ندارد همونجا که تصویر در حالت تمام صفحه نشون داد بالای تصویر اپل صفحه یک علامت ضربدر هم باشه تا بعد از گرفتن اسکرین شات کاربر صفحه رو ببندهکد کامل یکجا درست کن بفرست