<p>&nbsp;</p>
<style>
        /* تنظیمات پایه برای body و html */
        html, body {
            margin: 0;
            padding: 0;
            height: 100%;
            overflow: hidden; /* مخفی کردن اسکرول‌های اضافی */
            background-color: #f0f0f0; /* رنگ پس‌زمینه */
            font-family: Arial, sans-serif;
        }

        /* متغیر CSS برای ارتفاع نمایشگر */
        :root {
            --vh: 100%;
        }

        /* دکمه دانلود */
        .download-button {
            position: fixed;
            top: 10px; /* فاصله از بالای صفحه */
            right: 10px; /* فاصله از راست صفحه */
            padding: 10px 20px;
            background-color: #4CAF50;
            color: white;
            text-decoration: none;
            border-radius: 5px;
            font-size: 16px;
            z-index: 4000; /* بالاتر از iframe و سایر المان‌ها */
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
            transition: background-color 0.3s;
            cursor: pointer;
        }

        .download-button:hover {
            background-color: #45a049;
        }

        /* کانتینر iframe */
        .iframe-container {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: calc(var(--vh) * 100); /* استفاده از متغیر --vh */
            overflow: auto; /* فعال کردن اسکرول */
            z-index: 1; /* ترتیب نمایش */
        }

        /* تنظیمات iframe */
        .iframe-container iframe {
            position: absolute;
            top: 0; /* حذف پنهان‌سازی بالای iframe */
            left: 0;
            width: 100%;
            height: 100%; /* تنظیم ارتفاع به 100% بدون اضافه کردن پیکسل */
            border: none;
            display: none; /* مخفی کردن iframe تا بارگذاری موفق */
        }

        /* لودینگ */
        .loading {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%); /* مرکزیت عمودی و افقی */
            background-color: white;
            padding: 20px;
            border-radius: 5px;
            box-shadow: 0 0 10px rgba(0,0,0,0.1);
            z-index: 2000; /* بالاتر از iframe-container و overlays */
            display: flex;
            flex-direction: column;
            align-items: center;
            max-width: 90%; /* اطمینان از نمایش در دستگاه‌های کوچک */
            box-sizing: border-box;
        }

        /* بخش نمایش لینک‌های دانلود */
        .download-links {
            position: fixed;
            top: 60px; /* فاصله از دکمه دانلود */
            right: 10px;
            left: 10px;
            max-height: 40%;
            overflow-y: auto;
            background-color: rgba(255, 255, 255, 0.95);
            border: 1px solid #ccc;
            border-radius: 5px;
            padding: 10px;
            z-index: 5000;
            display: none; /* مخفی بودن پیش‌فرض */
        }

        .download-links h2 {
            margin-top: 0;
            font-size: 18px;
            text-align: center;
        }

        .download-links ul {
            list-style: none;
            padding: 0;
            margin: 0;
        }

        .download-links li {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 10px;
            word-break: break-all;
        }

        .download-links a {
            color: #0066cc;
            text-decoration: none;
            flex: 1;
            margin-right: 10px;
        }

        .download-links button {
            padding: 5px 10px;
            background-color: #4caf50;
            color: white;
            border: none;
            border-radius: 3px;
            cursor: pointer;
            transition: background-color 0.3s;
        }

        .download-links button:hover {
            background-color: #45a049;
        }

        /* Media Query برای موبایل */
        @media screen and (max-width: 768px) {
            .loading {
                width: 80%;
            }
            .download-button {
                padding: 8px 16px;
                font-size: 14px;
            }
            .download-links {
                top: 70px;
            }
        }

        .loading-message {
            margin-bottom: 10px;
            font-size: 18px;
            text-align: center;
        }

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

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

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

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

        #retryButton:hover {
            background-color: #45a049;
        }
    </style>
<!-- دکمه دانلود -->
<p><a href="#" class="download-button" id="downloadButton">دانلود</a></p>
<!-- لودینگ -->
<div class="loading" id="loading">
<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>
<!-- بخش نمایش لینک‌های دانلود -->
<div class="download-links" id="downloadLinks">
<h2>لیست تصاویر قابل دانلود</h2>
<ul id="linksList"></ul>
</div>
<!-- کانتینر iframe -->
<div class="iframe-container"><iframe id="myIframe" src="https://modelscope-old-photo-restoration.hf.space/" scrolling="yes"></iframe></div>
<script>
        // متغیر برای بررسی تکمیل بارگذاری اولیه
        let initialLoadCompleted = false;

        // تنظیم متغیر CSS --vh به ارتفاع نمایشگر
        function setVh() {
            let vh = window.innerHeight * 0.01;
            document.documentElement.style.setProperty('--vh', `${vh}px`);
        }

        // فراخوانی تابع برای تنظیم متغیر vh
        setVh();

        // به‌روزرسانی متغیر vh در تغییر اندازه صفحه
        window.addEventListener('resize', setVh);

        // عناصر DOM
        let progress = 0;
        const progressBar = document.getElementById('progressBar');
        const retryButton = document.getElementById('retryButton');
        const errorMessage = document.getElementById('errorMessage');
        const loading = document.getElementById('loading');
        const iframe = document.getElementById('myIframe');
        const downloadButton = document.getElementById('downloadButton');
        const downloadLinksDiv = document.getElementById('downloadLinks');
        const linksList = document.getElementById('linksList');
        let progressInterval;
        let errorTimeout;

        // تابع شروع پیشرفت نوار لودینگ
        function startProgress() {
            if (initialLoadCompleted) return; // جلوگیری از اجرای مجدد
            progressInterval = setInterval(() => {
                if (progress < 100) {
                    progress += 20; // افزایش ۲۰٪ در هر ثانیه
                    if (progress > 100) progress = 100;
                    progressBar.style.width = progress + '%';
                }
                if (progress >= 100) {
                    clearInterval(progressInterval);
                    if (!initialLoadCompleted) {
                        showError();
                    }
                }
            }, 1000);

            // تایم‌اوت برای نمایش پیام خطا بعد از ۵ ثانیه
            errorTimeout = setTimeout(() => {
                if (!initialLoadCompleted) {
                    showError();
                }
            }, 5000);
        }

        // تابع بارگذاری موفق iframe
        function iframeLoaded() {
            if (initialLoadCompleted) return;
            initialLoadCompleted = true;
            clearInterval(progressInterval);
            clearTimeout(errorTimeout);
            loading.style.display = 'none';
            iframe.style.display = 'block';

            // پاک کردن تایم‌اوت‌ها و اینتروال‌ها
            progressInterval = null;
            errorTimeout = null;
        }

        // تابع خطا در بارگذاری iframe
        function iframeError() {
            if (initialLoadCompleted) return;
            clearInterval(progressInterval);
            clearTimeout(errorTimeout);
            showError();
        }

        // نمایش خطا
        function showError() {
            errorMessage.style.display = 'block';
            retryButton.style.display = 'block';
        }

        // بازنشانی لودینگ
        function resetLoading() {
            progress = 0;
            progressBar.style.width = '0%';
            initialLoadCompleted = false;
            loading.style.display = 'flex';
            errorMessage.style.display = 'none';
            retryButton.style.display = 'none';
            iframe.style.display = 'none';
            clearInterval(progressInterval);
            clearTimeout(errorTimeout);

            // اضافه کردن دوباره رویدادها با once: true
            iframe.addEventListener('load', iframeLoaded, { once: true });
            iframe.addEventListener('error', iframeError, { once: true });
        }

        // بارگذاری مجدد iframe
        function loadIframe() {
            iframe.src = iframe.src;
        }

        // رویداد کلیک بر روی دکمه بارگذاری مجدد
        retryButton.addEventListener('click', () => {
            resetLoading();
            loadIframe();
            startProgress();
        });

        // افزودن رویداد بارگذاری iframe با once: true
        iframe.addEventListener('load', iframeLoaded, { once: true });
        iframe.addEventListener('error', iframeError, { once: true });

        // شروع بارگذاری و لودینگ
        startProgress();

        // عملکرد دکمه دانلود
        downloadButton.addEventListener('click', async function(e) {
            e.preventDefault();

            // اطمینان از اینکه iframe بارگذاری شده است
            if (!initialLoadCompleted) {
                alert("لطفاً ابتدا صبر کنید تا محتوای صفحه بارگذاری شود.");
                return;
            }

            try {
                // دسترسی به سند داخل iframe
                const iframeDocument = iframe.contentDocument || iframe.contentWindow.document;

                // پیدا کردن تمام عناصر img
                const images = iframeDocument.querySelectorAll('img');

                if (images.length === 0) {
                    alert("هیچ تصویری برای دانلود یافت نشد.");
                    return;
                }

                // خالی کردن لیست قبلی
                linksList.innerHTML = '';

                // لیست برای ذخیره لینک‌های دانلود
                const downloadLinks = [];

                images.forEach((img) => {
                    let src = img.src;

                    // بررسی اینکه آیا آدرس تصویر آدرس مطلق است یا نسبی
                    if (!src.startsWith('http')) {
                        // ساخت آدرس مطلق
                        const base = iframe.contentWindow.location.origin;
                        src = new URL(src, base).href;
                    }

                    downloadLinks.push(src);
                });

                // ایجاد لیست لینک‌ها با دکمه دانلود
                downloadLinks.forEach((linkSrc, index) => {
                    const listItem = document.createElement('li');

                    // ایجاد لینک
                    const link = document.createElement('a');
                    link.href = linkSrc;
                    link.textContent = `تصویر ${index + 1}`;
                    link.target = '_blank'; // باز شدن در تب جدید

                    // ایجاد دکمه دانلود
                    const downloadBtn = document.createElement('button');
                    downloadBtn.textContent = 'دانلود';
                    downloadBtn.addEventListener('click', () => {
                        // ایجاد عنصر a برای دانلود
                        const a = document.createElement('a');
                        a.href = linkSrc;
                        a.download = linkSrc.split('/').pop().split('?')[0];
                        document.body.appendChild(a);
                        a.click();
                        document.body.removeChild(a);
                    });

                    // اضافه کردن لینک و دکمه به لیست آیتم
                    listItem.appendChild(link);
                    listItem.appendChild(downloadBtn);

                    // اضافه کردن آیتم به لیست کلی
                    linksList.appendChild(listItem);
                });

                // نمایش بخش لینک‌های دانلود
                downloadLinksDiv.style.display = 'block';

                // اسکرول به بخش لینک‌ها
                downloadLinksDiv.scrollIntoView({ behavior: 'smooth' });

                alert(`تعداد ${downloadLinks.length} تصویر پیدا شد. لینک‌ها و دکمه‌های دانلود برای شما نمایش داده شدند.`);
            } catch (error) {
                console.error("خطا در دانلود تصاویر:", error);
                alert("در دانلود تصاویر مشکلی پیش آمد. لطفاً مطمئن شوید که محتوای iframe هم‌منبع (same-origin) است.");
            }
        });
    </script> این کد من یه مشکلی داره من یه دکمه دانلود درست کردم تا تصاویر اخل صفحه وب رو شناسایی کنه لینک‌های دانلود رو نمایش بده و دکمه دانلود داشته باشه لینک‌ها هر کدوم تا وقتی روی دکمه دانلود کلیک می‌کنیم به مرورگر هدایت بشه لینک دانلود چون این کد کمند درست کردم تو یک موبایل برنامه موبایل قرار میدم الان مشکل اینه قتی روی دکمه دانلود کلیک می‌کنیم لینک‌های دانلود رو نمایش نمیده ینک‌های دانلود تصاویری که شناسایی کرده از صفحه وب کاری کن به خوبی لینک‌های تصاویر را شناسایی کنه و یک دکمه داشته باشه که هدایت بشه به مرورگر تا از مرورگر تصویر در واقع دانلود بشه و اینکه ممکنه توی صفحه وب از یک تصویر هم حتی بیشتر باشه ۵ تا باشه ۶ تا باشه یا هرچی کد کامل یکجا درست کن بفرست