کاری کن دکمه اسکرول بیاد وسط صفحه سمت راست منظورم وسط صفحه html سمت راست است وقتی سایت باز میشه الان سط سایت سمت راست قرار داره من می‌خوام وسط صفحه اچ تی ام ال قرار بگیره که وسط موبایل سمت راست دیده بشه <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-container {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            background-color: white;
            padding: 10px 20px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            z-index: 3000; /* بالاتر از iframe و overlays */
            box-sizing: border-box;
        }

        /* تنظیمات پایه برای فرآیند دانلود */
        .input-container {
            display: flex;
            flex-direction: column;
            align-items: center;
            max-width: 1000px;
            margin: 0 auto;
        }

        .input-box {
            width: 100%;
            padding: 8px;
            border: 1px solid #ccc;
            border-radius: 4px;
            font-size: 14px;
            resize: none;
            box-sizing: border-box;
        }

        .input-box::placeholder {
            color: #999;
            font-size: 14px;
        }

        .message {
            margin-top: 5px;
            font-size: 12px;
            color: #4CAF50;
            text-align: center;
        }

        .download-link {
            display: none;
            margin-top: 10px;
            padding: 8px 12px;
            background-color: #4CAF50;
            color: white;
            text-decoration: none;
            border-radius: 4px;
            font-size: 14px;
            text-align: center;
        }

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

        .instructions {
            display: none;
            margin-top: 10px;
            font-size: 12px;
            color: #666;
            text-align: center;
        }

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

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

        /* Overlay برای مخفی کردن بخش بالایی صفحه */
        .overlay-top {
            position: fixed;
            top: 100px; /* بالا به اندازه کانتینر دانلود */
            left: 0;
            width: 100%;
            height: 416px; /* ارتفاع ۱۱ سانتیمتر */
            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; /* ارتفاع ۱ سانتیمتر */
            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-container {
                padding: 10px;
            }
            .overlay-bottom {
                height: 38px; /* حفظ ارتفاع برای موبایل */
            }
            .overlay-top {
                height: 416px; /* حفظ ارتفاع برای موبایل */
            }
        }

        .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;
        }

        /* تنظیمات دکمه اسکرول */
        .scroll-handle {
            position: fixed;
            right: 15px;
            top: 50%;
            transform: translateY(-50%);
            z-index: 9999; /* بالاتر از سایر عناصر */
            width: 45px;
            height: 45px;
            border-radius: 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);
        }

        .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: translateY(-50%) scale(1); }
            50% { transform: translateY(-50%) scale(1.1); }
            100% { transform: translateY(-50%) scale(1); }
        }

        .scroll-handle:hover {
            animation: pulse 1s infinite;
        }
    </style>
<!-- کانتینر دانلود تصویر -->
<div class="download-container">
<div class="input-container"><input type="text" class="input-box" placeholder="برای دانلود تصویر دکمه دانلود را محکم بگیر اینجا بکش" />
<div class="message"></div>
<a href="#" class="download-link" target="_blank">دانلود تصویر</a>
<div class="instructions"></div>
</div>
</div>
<!-- لودینگ -->
<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://finegrain-finegrain-object-eraser.hf.space" scrolling="yes"></iframe></div>
<!-- Overlay برای مخفی کردن بخش بالایی صفحه -->
<div class="overlay-top" id="overlayTop"></div>
<!-- Overlay برای مخفی کردن بخش پایینی صفحه -->
<div class="overlay-bottom" id="overlayBottom"></div>
<!-- دکمه اسکرول -->
<p><button class="scroll-handle" title="برای اسکرول بکشید" role="button" aria-label="دکمه اسکرول">👆</button></p>
<script>
        // متغیر برای بررسی تکمیل بارگذاری اولیه
        let initialLoadCompleted = false;

        // تابع تنظیم متغیر CSS --vh به ارتفاع نمایشگر
        function setVh() {
            // محاسبه ارتفاع نمایشگر و تنظیم متغیر --vh
            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 scrollHandle = document.querySelector('.scroll-handle');
        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;

            // تنظیم اسکرول Handle پس از بارگذاری موفقیت‌آمیز iframe
            setupScrollHandle();
        }

        // تابع خطا در بارگذاری 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 = 'https://finegrain-finegrain-object-eraser.hf.space';
        }

        // رویداد کلیک بر روی دکمه بارگذاری مجدد
        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);
            try {
                iframe.contentWindow.scrollTo(0, scrollPosition);
            } catch (error) {
                console.error('Cannot scroll iframe:', error);
            }
        });

        // اسکرول کردن 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);
            try {
                iframe.contentWindow.scrollTo(0, scrollPosition);
            } catch (error) {
                console.error('Cannot scroll iframe:', error);
            }
        });

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

        // شروع بارگذاری و لودینگ
        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 = '';
            }
        }

        // افزودن رویدادهای لازم به کادر ورودی
        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();
        });

        downloadLink.addEventListener('click', function() {
            // بازنشانی کامل فرم به حالت اولیه بدون نمایش هیچ پیامی
            setTimeout(() => {
                inputBox.value = '';
                message.textContent = '';
                downloadLink.style.display = 'none';
                instructions.style.display = 'none';
                instructions.textContent = '';
            }, 100);
        });

        // تابع تنظیم مقیاس iframe
        function adjustIframeScale() {
            const iframe = document.getElementById('myIframe');
            const container = document.querySelector('.iframe-container');
            const desiredWidth = 1024;

            let scale = window.innerWidth / desiredWidth;
            if (scale > 1) scale = 1;

            let topShiftAmount = 11; // 11 cm مخفی شده بالا
            let bottomShiftAmount = 1; // 1 cm مخفی شده پایین

            let pixelsPerCm = 37.8;
            let topShiftPixels = topShiftAmount * pixelsPerCm;
            let bottomShiftPixels = bottomShiftAmount * pixelsPerCm;

            // محاسبه تغییرات با توجه به مقیاس
            let scaledTopShift = topShiftPixels / scale;
            let scaledBottomShift = bottomShiftPixels / scale;

            iframe.style.transform = 'scale(' + scale + ')';
            iframe.style.transformOrigin = '0 0';
            iframe.style.width = desiredWidth + 'px';
            iframe.style.top = -topShiftPixels + 'px';
            iframe.style.height = (window.innerHeight / scale) + topShiftPixels + bottomShiftPixels + 'px';

            container.style.width = window.innerWidth + 'px';
            container.style.height = window.innerHeight + 'px';
        }

        // تنظیم مقیاس iframe هنگام بارگذاری اولیه و تغییر اندازه صفحه
        window.addEventListener('load', adjustIframeScale);
        window.addEventListener('resize', adjustIframeScale);

        // تنظیمات اسکرول Handle
        function setupScrollHandle() {
            let isDragging = false;
            let startY, startScrollY;

            scrollHandle.addEventListener('mousedown', startDragging);
            scrollHandle.addEventListener('touchstart', startDragging);

            document.addEventListener('mousemove', drag);
            document.addEventListener('touchmove', drag);

            document.addEventListener('mouseup', stopDragging);
            document.addEventListener('touchend', stopDragging);

            function startDragging(e) {
                e.preventDefault();
                isDragging = true;
                startY = e.clientY || (e.touches && e.touches[0].clientY);
                try {
                    startScrollY = iframe.contentWindow.pageYOffset;
                } catch (error) {
                    console.error('Cannot access iframe content:', error);
                    isDragging = false;
                }
                scrollHandle.style.cursor = 'grabbing';
            }

            function drag(e) {
                if (!isDragging) return;
                e.preventDefault();
                const currentY = e.clientY || (e.touches && e.touches[0].clientY);
                const walk = (currentY - startY) * 2; // سرعت اسکرول
                try {
                    iframe.contentWindow.scrollTo(0, startScrollY - walk);
                } catch (error) {
                    console.error('Cannot scroll iframe:', error);
                    isDragging = false;
                }
            }

            function stopDragging() {
                isDragging = false;
                scrollHandle.style.cursor = 'grab';
            }
        }

        // تنظیمات اسکرول Handle پس از بارگذاری iframe
        function initializeScrollHandle() {
            if (initialLoadCompleted) {
                setupScrollHandle();
            } else {
                // منتظر شدن تا بارگذاری iframe
                const checkIframeLoaded = setInterval(() => {
                    if (initialLoadCompleted) {
                        setupScrollHandle();
                        clearInterval(checkIframeLoaded);
                    }
                }, 100);
            }
        }

        // فراخوانی تابع تنظیم اسکرول Handle پس از بارگذاری iframe
        iframe.addEventListener('load', function() {
            iframeLoaded();
            initializeScrollHandle();
        });
    </script> کد کامل یکجا درست کن بفرست