<p>&nbsp;</p>
<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% + 0.01cm); /* اضافه کردن 0.01 سانتی‌متر به پایین */
            border: none;
            display: none;
            position: relative;
            top: -0.01cm; /* مخفی کردن 0.01 سانتی‌متر از بالا */
        }

        .loading {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            display: flex;
            flex-direction: column;
            align-items: center;
            z-index: 10000;
        }

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

        /* کاهش اندازه دکمه‌های دانلود و توضیحات */
        .download-button, .description-button {
            display: block;
            width: 90px; /* کاهش عرض از 120px به 90px */
            color: white;
            text-align: center;
            padding: 6px; /* کاهش padding از 8px به 6px */
            border-radius: 5px;
            cursor: pointer;
            font-size: 12px; /* کاهش اندازه فونت از 14px به 12px */
            transition: background-color 0.3s;
            position: fixed;
            top: 10px;
            z-index: 10001;
            text-decoration: none;
        }

        .download-button {
            background-color: #4CAF50;
            right: 10px;
        }

        .description-button {
            background-color: rgb(84, 110, 122);
            left: 10px;
        }

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

        /* استایل پنجره سفارشی (modal) */
        .modal {
            display: none;
            position: fixed;
            z-index: 10002;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
        }

        .modal-content {
            background-color: #fefefe;
            margin: 15% auto;
            padding: 20px;
            border: 1px solid #888;
            width: 90%;
            max-width: 500px;
            text-align: center;
            border-radius: 5px;
        }

        /* پنجره تأیید دانلود */
        .confirm-modal-content {
            background-color: #fefefe;
            margin: 15% auto;
            padding: 20px;
            border: 1px solid #888;
            width: 80%;
            max-width: 400px;
            text-align: center;
            border-radius: 5px;
        }

        .modal-button {
            margin-top: 20px;
            padding: 10px 20px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            font-size: 14px;
        }

        .cancel-btn {
            background-color: #f44336;
            color: white;
        }

        .translate-btn {
            background-color: #4CAF50;
            color: white;
        }

        .translate-btn:hover {
            background-color: #45a049;
        }

        .confirm-btn {
            background-color: #4CAF50;
            color: white;
        }

        .confirm-btn:hover {
            background-color: #45a049;
        }

        .canceled-btn {
            background-color: #f44336;
            color: white;
        }

        .canceled-btn:hover {
            background-color: #d32f2f;
        }

        .audio-container {
            display: flex;
            flex-direction: column;
            align-items: center;
            margin-top: 15px;
        }

        .audio-item {
            margin: 20px 0;
            width: 100%;
            text-align: center;
        }

        .audio-player {
            width: 80%;
            margin-bottom: 10px;
        }

        .download-audio-button {
            background-color: #4CAF50;
            color: white;
            padding: 8px 16px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            font-size: 14px;
        }

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

        .audio-label {
            font-weight: bold;
            margin-bottom: 5px;
            font-size: 16px;
        }

        .download-button-bottom {
            position: fixed;
            bottom: 10px;
            left: 50%;
            transform: translateX(-50%);
            background-color: #4CAF50;
            padding: 12px; /* افزایش padding برای پهنای بیشتر */
            width: 250px; /* تعیین عرض بیشتر */
            border-radius: 5px;
            color: white;
            text-align: center;
            font-size: 16px;
            text-decoration: none;
            z-index: 10001;
            cursor: pointer;
        }

        .download-button-bottom:hover {
            background-color: #45a049;
        }
    </style>
<!-- دکمه‌های دانلود و توضیحات -->
<p><a href="#" class="download-button" id="downloadButton">دانلود صدا 📥</a> <a href="#" class="description-button" id="descriptionButton">توضیحات</a></p>
<!-- پنجره سفارشی (modal) برای نمایش صداهای دانلود شده -->
<div id="myModal" class="modal">
<div class="modal-content">
<p style="text-align: center;">صداهای شناسایی شده</p>
<div class="audio-container" id="audioContainer"><!-- پلیرهای صدا در اینجا قرار خواهند گرفت --></div>
<button class="modal-button cancel-btn" id="closeBtn">بستن</button></div>
</div>
<!-- پنجره تأیید دانلود -->
<div id="confirmModal" class="modal">
<div class="confirm-modal-content">
<p>برای دانلود فایل صوتی روی تایید کلیک کنید و بعد از باز شدن مرورگر سمت راست فایل کلیک کنید و بارگیری فایل را انتخاب کنید.</p>
<button class="modal-button confirm-btn" id="confirmDownloadBtn">تایید</button> <button class="modal-button canceled-btn" id="cancelDownloadBtn">لغو</button></div>
</div>
<!-- پنجره سفارشی (modal) برای نمایش توضیحات -->
<div id="myDescriptionModal" class="modal">
<div class="modal-content"><hr />
<p><span style="color: #0000ff;">مبدل صوت با هوش مصنوعی</span>&nbsp;</p>
<p>اولین مجموعه تبدیل صوت در <span style="color: #33cccc;">برنامه هوش مصنوعی&nbsp;</span></p>
<p>تبدیل صداها به مدل&zwnj;های دلخواه.</p>
<p>صدای خود را در کادر اول اضافه کنید&nbsp;</p>
<p>و در قسمت پرامپت به چیزی که می&zwnj;خواهید تبدیل بشه توضیحات رو به انگلیسی بنویسید.</p>
<p>چهار جایگاه برای اضافه کردن صدا است که می&zwnj;توانید چند صدای از خودتون قرار بدید تا بهتر شناسایی شوند.</p>
<button class="modal-button translate-btn" id="translateBtn">مترجم</button> <button class="modal-button cancel-btn" id="closeDescriptionBtn">بستن</button></div>
</div>
<!-- لودینگ و iframe -->
<div class="iframe-container">
<div class="loading" id="loadingContainer">
<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 id="myIframe" onload="iframeLoaded()" onerror="iframeError()"></iframe></div>
<!-- دکمه دانلود صدا در پایین صفحه -->
<p><a href="#" class="download-button-bottom" id="downloadButtonBottom">دانلود صدا 📥</a></p>
<p>
<script>
        let progress = 0;
        const progressBar = document.getElementById('progressBar');
        const retryButton = document.getElementById('retryButton');
        const errorMessage = document.getElementById('errorMessage');
        const loadingContainer = document.getElementById('loadingContainer');
        let interval;
        let iframeLoadedFlag = false;

        // متغیر برای ذخیره‌ی لینک فایل صوتی انتخاب شده
        let selectedAudioUrl = '';

        function startProgress() {
            loadingContainer.style.display = 'flex';
            progressBar.style.width = '0%';
            progress = 0;

            interval = setInterval(() => {
                if (progress < 100) {
                    progress += 10;
                    progressBar.style.width = progress + '%';
                }
                if (progress === 100) {
                    clearInterval(interval);
                    if (!iframeLoadedFlag) {
                        retryButton.style.display = 'block';
                        errorMessage.style.display = 'block';
                    }
                }
            }, 1000);
        }

        function iframeLoaded() {
            iframeLoadedFlag = true;
            clearInterval(interval);
            loadingContainer.style.display = 'none';
            document.getElementById('myIframe').style.display = 'block';
        }

        function iframeError() {
            clearInterval(interval);
            loadingContainer.style.display = 'flex';
            retryButton.style.display = 'block';
            errorMessage.style.display = 'block';
        }

        retryButton.addEventListener('click', function() {
            progress = 0;
            progressBar.style.width = '0%';
            iframeLoadedFlag = false;
            retryButton.style.display = 'none';
            errorMessage.style.display = 'none';
            loadingContainer.style.display = 'flex';
            document.getElementById('myIframe').style.display = 'none';
            loadIframe();
            startProgress();
        });

        function loadIframe() {
            const iframe = document.getElementById('myIframe');
            const urlParts = ['https:', '', 'resembleai-resemble-enhance.hf.space', ''];
            iframe.src = urlParts.join('/');
        }

        function handleDownload(event) {
            event.preventDefault();
            const iframe = document.getElementById('myIframe');
            let iframeDocument;

            try {
                iframeDocument = iframe.contentDocument || iframe.contentWindow.document;
            } catch (error) {
                console.error("دسترسی به محتوای iframe به دلیل محدودیت‌های امنیتی امکان‌پذیر نیست.", error);
                alert("دسترسی به محتوای iframe به دلیل محدودیت‌های امنیتی امکان‌پذیر نیست.");
                return;
            }

            try {
                const links = iframeDocument.querySelectorAll('a');
                if (links.length === 0) {
                    alert("هیچ لینک صوتی برای دانلود یافت نشد.");
                    return;
                }

                let wavFiles = [];
                links.forEach((link) => {
                    const href = link.href;
                    if (href && href.toLowerCase().endsWith('.wav')) {
                        wavFiles.push(href);
                    }
                });

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

                // محدود به دو فایل
                wavFiles = wavFiles.slice(0, 2);

                const audioContainer = document.getElementById('audioContainer');
                audioContainer.innerHTML = '';

                wavFiles.forEach((audioUrl, index) => {
                    const audioItem = document.createElement('div');
                    audioItem.classList.add('audio-item');

                    // تعیین برچسب بر اساس شماره پلیر
                    let labelText = '';
                    if (index === 0) {
                        labelText = 'خروجی صدای بدون نویز';
                    } else if (index === 1) {
                        labelText = 'خروجی صدای پیشرفته';
                    }

                    audioItem.innerHTML = `
                        <p class="audio-label">${labelText}</p>
                        <audio controls class="audio-player">
                            <source src="${audioUrl}" type="audio/wav">
                            مرورگر شما از پخش این فایل صوتی پشتیبانی نمی‌کند.
                        </audio>
                        <button class="download-audio-button" onclick="downloadAudio('${audioUrl}')">دانلود صدا</button>
                    `;
                    audioContainer.appendChild(audioItem);
                });

                document.getElementById('myModal').style.display = 'block';

            } catch (error) {
                console.error("خطا در شناسایی صداها: ", error);
                alert("خطایی در شناسایی صداها رخ داد.");
            }
        }

        function downloadAudio(audioUrl) {
            // ذخیره لینک فایل صوتی انتخاب شده
            selectedAudioUrl = audioUrl;
            // نمایش پنجره تأیید
            document.getElementById('confirmModal').style.display = 'block';
        }

        // Event listener برای دکمه تایید دانلود
        document.getElementById('confirmDownloadBtn').addEventListener('click', function() {
            if (selectedAudioUrl) {
                window.open(selectedAudioUrl, '_blank'); // باز کردن لینک در تب جدید
                // بسته شدن پنجره تأیید
                document.getElementById('confirmModal').style.display = 'none';
                // پاک کردن متغیر بعد از استفاده
                selectedAudioUrl = '';
            }
        });

        // Event listener برای دکمه لغو دانلود
        document.getElementById('cancelDownloadBtn').addEventListener('click', function() {
            // بسته شدن پنجره تأیید
            document.getElementById('confirmModal').style.display = 'none';
            // پاک کردن متغیر
            selectedAudioUrl = '';
        });

        document.getElementById('downloadButton').addEventListener('click', handleDownload);
        document.getElementById('downloadButtonBottom').addEventListener('click', handleDownload);

        const modal = document.getElementById('myModal');
        const closeBtn = document.getElementById('closeBtn');
        const confirmModal = document.getElementById('confirmModal');

        closeBtn.addEventListener('click', function() {
            modal.style.display = 'none';
        });

        window.addEventListener('click', function(event) {
            if (event.target == modal) {
                modal.style.display = 'none';
            }
            if (event.target == descriptionModal) {
                descriptionModal.style.display = 'none';
            }
            if (event.target == confirmModal) {
                confirmModal.style.display = 'none';
                selectedAudioUrl = '';
            }
        });

        const descriptionModal = document.getElementById('myDescriptionModal');
        const descriptionButton = document.getElementById('descriptionButton');
        const closeDescriptionBtn = document.getElementById('closeDescriptionBtn');
        const translateBtn = document.getElementById('translateBtn');

        descriptionButton.addEventListener('click', function(event) {
            event.preventDefault();
            descriptionModal.style.display = 'block';
        });

        closeDescriptionBtn.addEventListener('click', function() {
            descriptionModal.style.display = 'none';
        });

        translateBtn.addEventListener('click', function() {
            window.open('https://translate.google.com/?hl=fa&sl=fa&tl=en&op=translate', '_blank');
        });

        loadIframe();
        startProgress();
    </script>
</p> من می‌خوام کد بالا رو جوری درست کنی که سایت در حالت تمام صفحه باز بشه یعنی کل صفحه موبایل رو در بر بگیره برای اینکه متوجه بشی این کار چه جوری انجام بشه که کد بالا رو برای من درست کنی از کد پایین الهام بگیر<p>&nbsp;</p>
<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>
<!-- لودینگ -->
<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://yuntian-deng-o1mini.hf.space" scrolling="yes"></iframe></div>
<!-- Overlay برای مخفی کردن بخش بالایی صفحه -->
<div class="overlay-top" id="overlayTop"></div>
<!-- Overlay برای مخفی کردن بخش پایینی صفحه -->
<div class="overlay-bottom" id="overlayBottom"></div>
<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');
        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();
    </script>
</p> مثلاً در این کد وقتی سایت باز میشه حالت تمام صفحه باز میشه تو کاری کن کد بالای من هم مثل این کد حالت تمام صفحه باز بشه کد کامل یکجا درست کن بفرست