<!DOCTYPE html>
<html lang="fa">
<head>
    <meta charset="UTF-8">
    <title>صفحه با یک دکمه اسکرول وسط راست</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            overflow: hidden;
            height: 100vh;
            background-color: #f0f0f0;
        }
        .iframe-container {
            position: relative;
            width: 100%;
            height: 100vh;
            overflow: hidden;
        }
        iframe {
            width: 100%;
            height: calc(100% + 16.5cm);
            border: none;
            display: none;
            position: relative;
            top: -12cm;
        }
        @media screen and (min-width: 768px) {
            iframe {
                top: calc(-200px - 0.7cm);
                height: calc(100% + 16.5cm);
            }
        }
        .loading {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            display: flex;
            flex-direction: column;
            align-items: center;
            z-index: 10000;
            background-color: white;
            padding: 20px;
            border-radius: 5px;
            box-shadow: 0 0 10px rgba(0,0,0,0.1);
        }
        .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;
        }
        #retryButton:hover {
            background-color: #45a049;
        }

        /* دکمه اسکرول بالا */
        .scroll-handle {
            position: fixed;
            right: 15px;
            top: 50%;
            transform: translateY(-50%);
            background-color: rgba(0, 0, 0, 0.4);
            color: white;
            border: none;
            cursor: grab;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 24px;
            transition: all 0.3s;
            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
            z-index: 9999;
            width: 50px;
            height: 50px;
            border-radius: 25px;
        }

        .scroll-handle:active {
            cursor: grabbing;
            background-color: rgba(0, 0, 0, 0.6);
            box-shadow: 0 3px 8px rgba(0,0,0,0.3);
        }

        @media (max-width: 768px) {
            .scroll-handle {
                right: 10px;
                width: 40px;
                height: 40px;
                font-size: 22px;
            }
        }

        @keyframes pulse {
            0% { transform: scale(1); }
            50% { transform: scale(1.1); }
            100% { transform: scale(1); }
        }

        .scroll-handle:hover {
            animation: pulse 1s infinite;
        }
    </style>
</head>
<body>
    <!-- لودینگ -->
    <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" onload="iframeLoaded()" onerror="iframeError()"></iframe>
    </div>
    <!-- دکمه اسکرول بالا -->
    <button class="scroll-handle" id="scrollHandle" title="اسکرول به بالا" role="button" aria-label="دکمه اسکرول بالا">👆</button>

    <script>
        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 scrollHandle = document.getElementById('scrollHandle');
        let progressInterval;
        let iframeLoadedFlag = false;
        const scrollStep = 100; // میزان اسکرول با هر کلیک

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

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

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

        // تابع خطا در بارگذاری iframe
        function iframeError() {
            clearInterval(progressInterval);
            loading.style.display = 'none';
            errorMessage.style.display = 'block';
            retryButton.style.display = 'block';
        }

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

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

        // بارگذاری مجدد iframe
        function loadIframe() {
            const iframe = document.getElementById('myIframe');
            const urlParts = ['https:', '', 'finegrain-finegrain-object-eraser.hf.space', ''];
            iframe.src = urlParts.join('/');
        }

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

        // تابع اسکرول به بالا
        function scrollUp() {
            window.scrollBy(0, -scrollStep);
        }

        // افزودن رویداد کلیک به دکمه اسکرول بالا
        scrollHandle.addEventListener('click', scrollUp);

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

        // عناصر DOM برای دانلود تصویر (در صورت وجود)
        const inputBox = document.querySelector('.input-box');
        const message = document.querySelector('.message');
        const downloadLink = document.querySelector('.download-link');
        const instructions = document.querySelector('.instructions');

        // تابع بررسی معتبر بودن URL
        function isValidUrl(string) {
            try {
                new URL(string);
                return true;
            } catch (_) {
                return false;
            }
        }

        // تابع مدیریت ورودی کاربر
        function handleInput() {
            const link = inputBox.value.trim();
            if (isValidUrl(link)) {
                message.textContent = 'لینک دانلود را گرفتم';
                downloadLink.style.display = 'block';
                downloadLink.href = link;
                instructions.style.display = 'block';
                instructions.innerHTML = 'برای دانلود تصویر:<br>' +
                    '1. روی دکمه "دانلود تصویر" کلیک کنید.<br>' +
                    '2. بعد از باز شدن مرورگر، روی تصویر محکم نگه دارید و "بارگیری تصویر" را انتخاب کنید.<br>' +
                    '3. تصویر داخل گوشی ذخیره می‌شود.';
            } else {
                message.textContent = '';
                downloadLink.style.display = 'none';
                instructions.style.display = 'none';
                instructions.textContent = '';
            }
        }

        // افزودن رویدادهای لازم به کادر ورودی
        if (inputBox) {
            inputBox.addEventListener('input', handleInput);
            inputBox.addEventListener('paste', handleInput);

            inputBox.addEventListener('dragover', function(e) {
                e.preventDefault();
            });

            inputBox.addEventListener('drop', function(e) {
                e.preventDefault();
                const link = e.dataTransfer.getData('text');
                this.value = link;
                handleInput();
            });
        }

        if (downloadLink) {
            downloadLink.addEventListener('click', function() {
                // بازنشانی کامل فرم به حالت اولیه بدون نمایش هیچ پیامی
                setTimeout(() => {
                    if (inputBox) {
                        inputBox.value = '';
                    }
                    if (message) {
                        message.textContent = '';
                    }
                    downloadLink.style.display = 'none';
                    if (instructions) {
                        instructions.style.display = 'none';
                        instructions.textContent = '';
                    }
                }, 100);
            });
        }
    </script>
</body>
</html> بالای این صفحه یکم فضای خالی قرار داره فضای خالی رو حذف کن بالای دکمه دانلود وقتی سایت باز میشه من می‌خوام دکمه دانلود اول اول سایت قرار بگیره بدون فضا خالی کد کامل یکجا درست کن بفرست