<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% + 189px);
        border: none;
        display: none;
        position: relative;
        top: -113.4px;
    }

    .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;
        color: white;
        text-align: center;
        padding: 6px;
        border-radius: 5px;
        cursor: pointer;
        font-size: 11px;
        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;
    }

    .download-button-bottom {
        position: fixed;
        bottom: 10px;
        left: 50%;
        transform: translateX(-50%);
        background-color: #4CAF50;
        padding: 10px;
        border-radius: 5px;
        color: white;
        text-align: center;
        font-size: 14px;
        text-decoration: none;
        z-index: 10001;
        cursor: pointer;
    }

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

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

    .close-btn {
        background-color: #f44336;
        color: white;
    }
</style>
<!-- دکمه‌های دانلود و توضیحات -->
<p><a href="#" class="download-button" id="downloadButton">دانلود صدا📥</a></p>
<p><a href="#" class="description-button" id="descriptionButton">توضیحات</a></p>
<!-- پنجره سفارشی (modal) -->
<div id="myModal" class="modal">
<div class="modal-content">
<p>نسخه پیشرفته تبدیل متن به صدا برنامه <span style="color: #00ffff;">هوش مصنوعی</span></p>
<p>برای نمایش زبان فارسی قسمت زبان ها در کادر جستجو بنویسید pers</p>
<p>برای استفاده از صدا های طبیعی</p>
<p>بعد از دریافت فایل صوتی میتونید برید قسمت تغییر صدا با استفاده از مدل های تغییر صدا فایل صوتی رو به صدا های طبیعی و صدای مورد نظر (صدای افراد مشهور) تبدیل کنید.</p>
<button class="modal-button close-btn" id="closeBtn">بستن</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;

    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');
        iframe.src = 'https://nick088-edge-tts.hf.space';
    }

    document.getElementById('downloadButton').addEventListener('click', function(event) {
        event.preventDefault();
        downloadAudio();
    });

    document.getElementById('downloadButtonBottom').addEventListener('click', function(event) {
        event.preventDefault();
        downloadAudio();
    });

    function downloadAudio() {
        const iframe = document.getElementById('myIframe');
        const iframeDocument = iframe.contentDocument || iframe.contentWindow.document;

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

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

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

            const numFiles = wavFiles.length;

            if (confirm(`${numFiles} فایل صوتی ساخته شده پیدا شد.\nبرای دانلود روی 'تأیید' کلیک کنید. بعد از باز شدن مرورگر روی فایل محکم نگه دارید و 'بارگیری صدا' را انتخاب کنید.`)) {
                wavFiles.forEach((audioUrl) => {
                    window.open(audioUrl, '_blank');
                });
            }

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

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

    // نمایش پنجره توضیحات
    descriptionButton.addEventListener('click', function(event) {
        event.preventDefault();
        modal.style.display = 'block';
    });

    // دکمه بستن داخل پنجره
    closeBtn.addEventListener('click', function() {
        modal.style.display = 'none';
    });

    // بستن پنجره در صورت کلیک خارج از آن
    window.onclick = function(event) {
        if (event.target == modal) {
            modal.style.display = 'none';
        }
    }

    loadIframe();
    startProgress();
</script>
</p> این کد من تمام صفحه نیست عنی از سایت در حالت تمام صفحه باز نمی‌شه من می‌خوام سایت که باز میشه کل صفحه html رو بگیره به صورت کامل ایت تو برنامه موبایل باز میشه می‌خوام کل صفحه وقتی سایت باز میشه میخواستم کل صفحه موبایل را در بر بگیره همه جا رو از پایین تا بالا از راست و چپ همه جا سایت نمایش بده کد کامل یکجا درست کن بفرست