<!DOCTYPE html>
<html lang="fa">
<head>
    <meta charset="UTF-8">
    <title>صفحه با iframe و دکمه دانلود</title>
    <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;
        }

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

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

        /* تنظیمات iframe */
        .iframe-container iframe {
            position: absolute;
            top: -189px; /* پنهان کردن ۵ سانتیمتر بالای صفحه (189px) */
            left: 0;
            width: 100%;
            height: calc((var(--vh) * 100) + 189px + 38px); /* افزایش ارتفاع iframe به اندازه ۵ سانتیمتر بالا و ۱ سانتیمتر پایین */
            border: none;
            display: none; /* مخفی کردن iframe تا بارگذاری موفق */
        }

        /* Overlay برای مخفی کردن بخش بالایی صفحه */
        .overlay-top {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 189px; /* ارتفاع ۵ سانتیمتر (189px) */
            background-color: transparent; /* رنگ پس‌زمینه شفاف */
            z-index: 900; /* زیر iframe-container */
            pointer-events: none; /* اجازه دادن به اسکرول از طریق iframe */
        }

        /* Overlay برای مخفی کردن بخش پایینی صفحه */
        .overlay-bottom {
            position: fixed;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 38px; /* ارتفاع ۱ سانتیمتر (38px) */
            background-color: transparent; /* رنگ پس‌زمینه شفاف */
            z-index: 900; /* زیر iframe-container */
            pointer-events: 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;
        }

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

        .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>
</head>
<body>
    <!-- دکمه دانلود -->
    <a href="#" class="download-button" id="downloadButton">دانلود</a>

    <!-- لودینگ -->
    <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>
    
    <!-- کانتینر iframe -->
    <div class="iframe-container">
        <iframe id="myIframe" src="https://fffiloni-pasd.hf.space/--replicas/aieqz/" scrolling="yes"></iframe>
    </div>
    
    <!-- Overlay برای مخفی کردن بخش بالایی صفحه -->
    <div class="overlay-top" id="overlayTop"></div>
    
    <!-- Overlay برای مخفی کردن بخش پایینی صفحه -->
    <div class="overlay-bottom" id="overlayBottom"></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 overlayTop = document.getElementById('overlayTop');
        const overlayBottom = document.getElementById('overlayBottom');
        const downloadButton = document.getElementById('downloadButton');
        let progressInterval;
        let errorTimeout;
        let scrollPosition = 0;
        const scrollStep = 100; // میزان اسکرول با هر کلیک

        // تابع شروع پیشرفت نوار لودینگ
        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 با کلیک بر روی Overlay بالایی
        overlayTop.addEventListener('click', function(e) {
            const clickY = e.clientY;
            const overlayHeight = overlayTop.clientHeight;
            const direction = clickY > overlayHeight / 2 ? 1 : -1;
            scrollPosition += direction * scrollStep;
            scrollPosition = Math.max(0, scrollPosition);
            iframe.contentWindow.scrollTo(0, scrollPosition);
        });

        // اسکرول کردن iframe با کلیک بر روی Overlay پایینی
        overlayBottom.addEventListener('click', function(e) {
            const clickY = e.clientY;
            const overlayHeight = overlayBottom.clientHeight;
            const direction = clickY > overlayHeight / 2 ? 1 : -1;
            scrollPosition += direction * scrollStep;
            scrollPosition = Math.max(0, scrollPosition);
            iframe.contentWindow.scrollTo(0, scrollPosition);
        });

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

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

        // عملکرد دکمه دانلود
        downloadButton.addEventListener('click', function(e) {
            e.preventDefault();
            const downloadUrl = prompt("لطفاً لینک دانلود را وارد کنید:");
            if (downloadUrl) {
                // بررسی معتبر بودن URL
                try {
                    new URL(downloadUrl);
                    window.open(downloadUrl, '_blank');
                } catch (_) {
                    alert("لطفاً یک URL معتبر وارد کنید.");
                }
            }
        });
    </script>
</body>
</html>
توضیحات تغییرات اعمال شده:
اضافه کردن دکمه دانلود:
HTML:

<a href="#" class="download-button" id="downloadButton">دانلود</a>
این المان لینک به صورت یک دکمه با کلاس .download-button در بالای صفحه اضافه شده است.
CSS:

/* دکمه دانلود */
.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;
}

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

/* Media Query برای موبایل */
@media screen and (max-width: 768px) {
    .download-button {
        padding: 8px 16px;
        font-size: 14px;
    }
}
استایل‌های مرتبط با دکمه دانلود اضافه شده‌اند تا آن را در موقعیت ثابت در بالای سمت راست صفحه نمایش دهند و با طراحی گوشه‌دار و تاثیرات هدایتی ظاهر شوند.
افزودن عملکرد دکمه دانلود با استفاده از JavaScript:
JavaScript:

// عملکرد دکمه دانلود
downloadButton.addEventListener('click', function(e) {
    e.preventDefault();
    const downloadUrl = prompt("لطفاً لینک دانلود را وارد کنید:");
    if (downloadUrl) {
        // بررسی معتبر بودن URL
        try {
            new URL(downloadUrl);
            window.open(downloadUrl, '_blank');
        } catch (_) {
            alert("لطفاً یک URL معتبر وارد کنید.");
        }
    }
});
وقتی روی دکمه دانلود کلیک می‌کنیم صفحه بالا نیاد که url اضافه کنیم قتی روی دکمه دانلود کلیک می‌کنیم توی صفحه در واقع دکمه دانلود تصاویر داخل اون صفحه یا سایت رو شناسایی کنه به لینک‌های دانلود رو بگیره و با مرورگر باز کنه و تا از مرورگر دانلود کنه در واقع اون دکمه دانلود عملکردش این باشه که تصاویر داخل سایت رو شناسایی کنه  لینک‌هاشونو بگیره کد کامل یکجا درست کن بفرست