<!DOCTYPE html>
<html lang="fa">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Iframe با مخفی کردن متون مشکی و تنظیم مخفی‌سازی پایین صفحه</title>
    <style>
        /* تنظیمات پایه برای body و html */
        html, body {
            margin: 0;
            padding: 0;
            height: 100%;
            overflow: hidden; /* مخفی کردن اسکرول‌های اضافی */
            background-color: #f0f0f0; /* رنگ پس‌زمینه */
        }

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

        /* کانتینر 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: -226.77px; /* پنهان کردن ۶ سانتیمتر بالای صفحه (226.77px) */
            left: 0;
            width: 100%;
            height: calc((var(--vh) * 100) + 226.77px + 38px); /* افزایش ارتفاع iframe به اندازه ۶ سانتیمتر بالا و ۱ سانتیمتر پایین */
            border: none;
            display: none; /* مخفی کردن iframe تا بارگذاری موفق */
        }

        /* Overlay برای مخفی کردن بخش بالایی صفحه */
        .overlay-top {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 226.77px; /* ارتفاع ۶ سانتیمتر (226.77px) */
            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%;
            }
        }

        .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>
    <!-- لودینگ -->
    <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://jbilcke-hf-FacePoke.hf.space/" 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() {
            // محاسبه ارتفاع نمایشگر و تنظیم متغیر --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');
        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;

            // اگر Same-Origin است، CSS را برای مخفی کردن متون مشکی اضافه کنید
            try {
                const iframeDoc = iframe.contentDocument || iframe.contentWindow.document;

                // تابعی برای مخفی کردن تنها متون مشکی
                function hideBlackTextElements(doc) {
                    const elements = doc.body.getElementsByTagName('*');
                    for (let i = 0; i < elements.length; i++) {
                        const elem = elements[i];
                        const computedStyle = iframe.contentWindow.getComputedStyle(elem);
                        const color = computedStyle.getPropertyValue('color');
                        
                        // بررسی اگر رنگ دقیقاً مشکی است (RGB(0, 0, 0)، #000000 یا black)
                        if (
                            color === 'rgb(0, 0, 0)' ||
                            color === '#000000' ||
                            color.toLowerCase() === 'black'
                        ) {
                            elem.style.color = 'transparent'; // مخفی کردن متن فقط
                        }
                    }
                }

                // اجرای تابع پس از بارگذاری کامل محتوا
                setTimeout(() => {
                    hideBlackTextElements(iframeDoc);
                }, 1000); // تاخیر ۱ ثانیه‌ای
            } catch (e) {
                console.warn('دسترسی به محتوای iframe محدود شده است:', e);
            }
        }

        // تابع خطا در بارگذاری 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();
    </script>
</body>
</html> می‌تونی کاری کنی که متن‌های مشکی داخل این سایت رو دیده نشه و مخفی بشه در واقع اصلاً کاری کن تو این سایت که هرچی متن مشکی نمایش داده میشه دیده نشه متن‌های سفید دیده بشه فقط متن مشکی که هست دیده نشه کد کامل یکجا درست کن بفرست