<!DOCTYPE html>
<html lang="fa">
<head>
    <meta charset="UTF-8">
    <title>ربات هوشمند هوش مصنوعی</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            overflow: hidden;
            height: calc(var(--vh, 1vh) * 100);
            background-color: #f0f0f0;
            font-family: Arial, sans-serif;
            text-align: center; /* مرکزیت متن */
        }

        .iframe-container {
            position: relative;
            width: 100%;
            height: calc(var(--vh, 1vh) * 100);
            overflow: hidden;
        }

        iframe {
            width: 100%;
            height: calc(100% + 1244px);
            border: none;
            display: none;
            position: relative;
            top: -529.13px;
        }

        .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;
            transition: background-color 0.3s;
        }

        #retryButton:hover {
            background-color: #45a049;
        }

        /* دکمه‌ها */
        .button-container {
            position: fixed;
            top: 10px;
            left: 10px;
            display: flex;
            gap: 10px;
            z-index: 10001;
        }

        .download-button {
            position: fixed;
            top: 10px;
            right: 10px;
            color: white;
            text-align: center;
            border-radius: 5px;
            cursor: pointer;
            transition: background-color 0.3s;
            text-decoration: none;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 6px 10px; /* کاهش پدینگ برای کوچکتر شدن */
            font-size: 11px; /* کاهش اندازه فونت */
            background-color: #4CAF50;
            width: 130px; /* تنظیم عرض مشابه دکمه توضیحات */
        }

        .description-button, .prompt-button {
            color: white;
            text-align: center;
            border-radius: 5px;
            cursor: pointer;
            transition: background-color 0.3s;
            text-decoration: none;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 6px 10px;
            font-size: 11px;
            background-color: rgb(84, 110, 122);
        }

        .description-button {
            width: 130px; /* تنظیم عرض */
        }

        .prompt-button {
            width: 30px; /* کاهش عرض به 30px */
            font-size: 14px; /* کاهش اندازه فونت */
            padding: 4px; /* کاهش پدینگ برای کوچک‌تر شدن دکمه */
        }

        .download-button:hover, .description-button:hover, .prompt-button:hover {
            filter: brightness(0.9);
        }

        /* مدال‌ها */
        .modal {
            display: none;
            position: fixed;
            z-index: 10002;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            overflow-y: auto;
            background-color: rgba(0, 0, 0, 0.5);
        }

        .modal-content {
            background-color: #fefefe;
            margin: 50px auto;
            padding: 20px;
            border: 1px solid #888;
            width: 90%;
            max-width: 800px; /* حفظ حداکثر عرض اصلی */
            text-align: center;
            border-radius: 10px;
            box-shadow: 0 5px 15px rgba(0,0,0,0.3);
        }

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

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

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

        /* استایل‌های دسته‌بندی پرامپت‌ها */
        .prompt-category {
            background: #ffffff;
            padding: 8px 12px;
            margin: 10px auto;
            border-radius: 8px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
            cursor: pointer;
            transition: background-color 0.3s, transform 0.2s;
            width: 80%;
            max-width: 300px; /* کاهش عرض برای کوچک‌تر شدن */
            border: 1px solid #e0e0e0;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 14px; /* کاهش اندازه فونت */
            position: relative;
        }

        .prompt-category:hover {
            background-color: #f9f9f9;
            transform: translateY(-2px);
        }

        .prompt-category .icon {
            margin-left: 8px;
            font-size: 20px; /* کاهش اندازه آیکون */
            color: #3498db;
        }

        /* مودال لیست پرامپت‌ها */
        .prompt-list {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 10px;
        }

        .prompt-item {
            background-color: #fff;
            padding: 8px 12px;
            margin: 5px 0;
            border-radius: 8px;
            transition: background-color 0.3s, box-shadow 0.3s;
            text-align: left;
            font-weight: bold;
            font-size: 14px;
            width: 100%;
            max-width: 400px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            border: 1px solid #e0e0e0;
            position: relative;
        }

        .prompt-item:hover {
            background-color: #f0f0f0;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        }

        .prompt-text {
            cursor: pointer;
            flex-grow: 1;
            margin-right: 10px;
            text-align: center;
        }

        .copy-icon {
            cursor: pointer;
            font-size: 16px;
            color: #555;
            transition: color 0.3s;
        }

        .copy-icon:hover {
            color: #000;
        }

        .persian-translation {
            font-size: 0.8em; /* کاهش اندازه فونت ترجمه */
            color: #555;
            text-align: center;
            margin-top: 5px;
            width: 100%;
        }

        /* تنظیم عرض مودال‌ها برای نمایش بهتر در صفحات کوچک */
        @media (max-width: 600px) {
            .modal-content {
                width: 95%;
            }

            .prompt-category {
                width: 95%;
            }

            .prompt-item {
                width: 95%;
            }

            .prompt-text {
                font-size: 14px;
            }

            .download-button {
                width: 100px; /* تنظیم عرض برای صفحات کوچک */
                font-size: 11px;
                padding: 6px 10px;
            }

            .description-button {
                width: 100px;
            }
        }
    </style>
</head>
<body>
    <!-- دکمه‌ها -->
    <div class="button-container">
        <a href="#" class="description-button" id="descriptionButton">توضیحات</a>
        <a href="#" class="prompt-button" id="promptButton">P</a>
    </div>
    <a href="#" class="download-button" id="downloadButton">دانلود تصویر 📥</a>

    <!-- پنجره مودال برای تصاویر -->
    <div id="myModal" class="modal">
        <div class="modal-content">
            <p>تصاویر شناسایی شده</p>
            <div class="image-container" id="imageContainer"></div>
            <button class="modal-button cancel-btn" id="closeBtn">بستن</button>
        </div>
    </div>

    <!-- پنجره مودال برای توضیحات -->
    <div id="myDescriptionModal" class="modal">
        <div class="modal-content">
            <p>ربات هوشمند برنامه <span style="color: #008080;">هوش مصنوعی</span></p>
            <p>با قابلیت ساخت تصاویر در لحظه</p>
            <p>و گفتگو پیشرفته</p>
            <p>ساخت تصاویر این ربات از متن فارسی پشتیبانی می‌کند و شما می‌توانید به فارسی هر تصویری که خواستید را تولید کنید.</p>
            <p>برای ساخت تصاویر روی سه نقطه داخل صفحه بزنید و گزینه دوم را انتخاب کنید.</p>
            <p>در بعضی مواقع اگر تصاویر پشت سر هم تولید نشد یک بار دکمه Clear را کلیک کنید یا از صفحه خارج شوید دوباره وارد شوید.</p>
            <button class="modal-button cancel-btn" id="closeDescriptionBtn">بستن</button>
        </div>
    </div>

    <!-- پنجره مودال برای پرامپت‌ها -->
    <div id="myPromptModal" class="modal">
        <div class="modal-content">
            <p>دسته‌بندی پرامپت‌ها</p>
            <!-- دسته‌بندی‌های پرامپت -->
            <div class="prompt-category" data-category="lighting">
                پرامپت‌های نورپردازی
                <span class="icon">💡</span>
            </div>
            <div class="prompt-category" data-category="special_lighting">
                پرامپت‌های خاص نورپردازی
                <span class="icon">✨</span>
            </div>
            <div class="prompt-category" data-category="details_quality">
                پرامپت‌های جزئیات و کیفیت
                <span class="icon">🔍</span>
            </div>
            <div class="prompt-category" data-category="punk">
                پرامپت‌های Punk
                <span class="icon">🎸</span>
            </div>
            <div class="prompt-category" data-category="landscape">
                پرامپت‌های منظره
                <span class="icon">🌄</span>
            </div>
            <div class="prompt-category" data-category="colors">
                پرامپت‌های رنگ
                <span class="icon">🎨</span>
            </div>
            <div class="prompt-category" data-category="artist_style">
                پرامپت‌های استایل هنرمندان
                <span class="icon">🖌️</span>
            </div>
            <div class="prompt-category" data-category="iranian_art_identity">
                پرامپت‌های هویت هنری ایرانی
                <span class="icon">🏺</span>
            </div>
            <div class="prompt-category" data-category="iranian_set_design">
                پرامپت‌های فضاسازی ایرانی
                <span class="icon">🏙️</span>
            </div>
            <button class="modal-button cancel-btn" id="closePromptBtn">بستن</button>
        </div>
    </div>

    <!-- پنجره مودال برای لیست پرامپت‌ها -->
    <div id="promptListModal" class="modal">
        <div class="modal-content">
            <p id="promptListTitle">پرامپت‌ها</p>
            <div class="prompt-list" id="promptList">
                <!-- پرامپت‌ها به صورت داینامیک اضافه می‌شوند -->
            </div>
            <button class="modal-button cancel-btn" id="closePromptListBtn">بستن</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"></iframe>
    </div>

    <script>
        function setVhVariable() {
            let vh = window.innerHeight * 0.01;
            document.documentElement.style.setProperty('--vh', vh + 'px');
        }
        setVhVariable();
        window.addEventListener('resize', setVhVariable);

        const siteURL = 'https://cohereforai-aya-expanse.hf.space/';
        const excludeUrls = [
            'https://yanze-pulid.hf.space/--replicas/3t64n/file=/tmp/gradio/7567beceda2541f726af7beb4c9aa857b4a96b77/liuyifei.png',
            'https://yanze-pulid.hf.space/--replicas/3t64n/file=/tmp/gradio/7567beceda2541f726af7beb4c9aa857b4a96b77/liuyifei.png'
        ];

        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() {
            fetch(siteURL, { method: 'HEAD', mode: 'no-cors' })
                .then(() => {
                    const iframe = document.getElementById('myIframe');
                    iframe.src = siteURL;
                    iframe.onload = iframeLoaded;
                    iframe.onerror = iframeError;
                })
                .catch(() => {
                    iframeError();
                });
        }

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

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

                let webpImages = [];
                images.forEach((img) => {
                    if (img.src.endsWith('.webp') && !excludeUrls.includes(img.src)) {
                        webpImages.push(img.src);
                    }
                });

                webpImages = webpImages.slice(0, 4);

                if (webpImages.length === 0) {
                    alert("هیچ تصویر ساخته شده‌ای یافت نشد.");
                    return;
                }

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

                webpImages.forEach((imageUrl, index) => {
                    const imageItem = document.createElement('div');
                    imageItem.classList.add('image-item');
                    imageItem.style.marginBottom = '10px';
                    imageItem.innerHTML = `
                        <img src="${imageUrl}" alt="Image ${index + 1}" style="max-width: 100%; border-radius: 5px;">
                        <button onclick="downloadImage('${imageUrl}')" style="margin-top: 5px; padding: 5px 10px; border: none; border-radius: 5px; background-color: #4CAF50; color: white; cursor: pointer;">دانلود</button>
                    `;
                    imageContainer.appendChild(imageItem);
                });

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

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

        function downloadImage(imageUrl) {
            if (confirm("برای دانلود تصویر روی تایید کلیک کنید و بعد از باز شدن مرورگر روی تصویر محکم نگهدارید و بارگیری تصویر را کلیک کنید.")) {
                window.open(imageUrl, '_blank');
            }
        }

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

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

        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 == promptModal) {
                promptModal.style.display = 'none';
            }
            if (event.target == promptListModal) {
                promptListModal.style.display = 'none';
            }
        });

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

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

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

        // برای مودال پرامپت‌ها
        const promptModal = document.getElementById('myPromptModal');
        const promptButton = document.getElementById('promptButton');
        const closePromptBtn = document.getElementById('closePromptBtn');

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

        closePromptBtn.addEventListener('click', function() {
            promptModal.style.display = 'none';
        });

        // پنجره لیست پرامپت‌ها
        const promptListModal = document.getElementById('promptListModal');
        const promptList = document.getElementById('promptList');
        const promptListTitle = document.getElementById('promptListTitle');
        const closePromptListBtn = document.getElementById('closePromptListBtn');

        const promptsData = {
            "lighting": [
                { "text": "Cinematic lighting", "translation": "نورپردازی سینمایی" },
                { "text": "Soft lighting", "translation": "نورپردازی نرم" },
                { "text": "Softbox lighting", "translation": "نورپردازی با سافت‌باکس" },
                { "text": "Bright lighting", "translation": "نورپردازی روشن" },
                { "text": "Ambient lighting", "translation": "نورپردازی محیطی" },
                { "text": "Silhouetted", "translation": "سایه‌دار" },
                { "text": "Flat lighting", "translation": "نورپردازی تخت" },
                { "text": "Backlit Volumetric lighting", "translation": "نورپردازی حجمی پس‌زمینه" }
            ],
            "special_lighting": [
                { "text": "Neon", "translation": "نئون" },
                { "text": "Holographic", "translation": "هولوگرافیک" },
                { "text": "Glow", "translation": "تابان" },
                { "text": "Bioluminescent", "translation": "زیست‌تاب" },
                { "text": "Rimlight", "translation": "نور حاشیه‌ای" },
                { "text": "Silhouetted", "translation": "سایه‌دار" }
            ],
            "details_quality": [
                { "text": "Ultra photoreal", "translation": "فوق‌العاده واقع‌گرایانه" },
                { "text": "Intricate details", "translation": "جزئیات پیچیده" },
                { "text": "Photorealistic", "translation": "فوتورئالیستی" },
                { "text": "Hyper detailed", "translation": "بسیار جزئیات‌دار" },
                { "text": "Ultra detailed", "translation": "فوق‌العاده جزئیات‌دار" },
                { "text": "Extremely detailed", "translation": "بسیار پرجزئیات" },
                { "text": "4K", "translation": "4K" },
                { "text": "8K", "translation": "8K" },
                { "text": "Super resolution", "translation": "وضوح فوق‌العاده" },
                { "text": "High resolution", "translation": "وضوح بالا" }
            ],
            "punk": [
                { "text": "Steampunk", "translation": "استیم‌پانک" },
                { "text": "Cloudpunk", "translation": "کلودپانک" },
                { "text": "Cyberpunk", "translation": "سایبرپانک" },
                { "text": "Forestpunk", "translation": "فورست‌پانک" },
                { "text": "Decopunk", "translation": "دکوپانک" },
                { "text": "Atompunk", "translation": "اتم‌پانک" },
                { "text": "Dieselpunk", "translation": "دیزل‌پانک" },
                { "text": "Biopunk", "translation": "بیوپانک" },
                { "text": "Dinopunk", "translation": "دینوپانک" },
                { "text": "Cassettepunk", "translation": "کاست‌پانک" },
                { "text": "Dollupunk", "translation": "دالاپانک" },
                { "text": "Catholicpunk", "translation": "کاتولیک‌پانک" },
                { "text": "Clockpunk", "translation": "کلاک‌پانک" }
            ],
            "landscape": [
                { "text": "Surreal landscape", "translation": "منظره سورئال" },
                { "text": "Unreal landscape", "translation": "منظره غیرواقعی" },
                { "text": "Fantasy landscape", "translation": "منظره فانتزی" },
                { "text": "Sci-fi landscape", "translation": "منظره علمی-تخیلی" },
                { "text": "Desert landscape", "translation": "منظره بیابانی" },
                { "text": "Tropical paradise", "translation": "بهشت گرمسیری" },
                { "text": "Rainforest scenery", "translation": "منظره جنگل بارانی" },
                { "text": "Expansive mountain range", "translation": "زنجیره کوهستانی گسترده" }
            ],
            "colors": [
                { "text": "Retro colors", "translation": "رنگ‌های رترو" },
                { "text": "Vivid colors", "translation": "رنگ‌های زنده" },
                { "text": "Pastel colors", "translation": "رنگ‌های پاستلی" },
                { "text": "Neon colors", "translation": "رنگ‌های نئونی" },
                { "text": "Earthy tones", "translation": "رنگ‌های خاکی" },
                { "text": "Primary colors", "translation": "رنگ‌های اصلی" },
                { "text": "Monochromatic colors", "translation": "رنگ‌های تک‌رنگ" },
                { "text": "Jewel tones", "translation": "رنگ‌های جواهری" }
            ],
            "artist_style": [
                { "text": "Leonardo da Vinci", "translation": "لئوناردو داوینچی" },
                { "text": "Michelangelo", "translation": "میکل‌آنجلو" },
                { "text": "Rembrandt", "translation": "رمبراندت" },
                { "text": "Vermeer", "translation": "ورمیر" },
                { "text": "Jean-Antoine Watteau", "translation": "ژان-آنتوان واتو" },
                { "text": "Eugene Delacroix", "translation": "اوژن دلاکروا" },
                { "text": "Claude Monet", "translation": "کلود مونه" },
                { "text": "Georges Seurat", "translation": "ژرژ سورا" },
                { "text": "Vincent van Gogh", "translation": "ونسان ون گوگ" },
                { "text": "Edvard Munch", "translation": "ادوارد مونک" },
                { "text": "Gustav Klimt", "translation": "گوستاو کلیمت" },
                { "text": "Pablo Picasso", "translation": "پابلو پیکاسو" },
                { "text": "Henri Matisse", "translation": "هانری ماتیس" },
                { "text": "Rene Magritte", "translation": "رنه ماگریت" },
                { "text": "Georgia O'Keeffe", "translation": "جورجیا اوکیف" },
                { "text": "Salvador Dalí", "translation": "سالوادور دالی" },
                { "text": "Edward Hopper", "translation": "ادوارد هاپر" },
                { "text": "Frida Kahlo", "translation": "فریدا کالو" },
                { "text": "Jackson Pollock", "translation": "جکسون پولاک" },
                { "text": "Andy Warhol", "translation": "اندی وارهول" }
            ],
            "iranian_art_identity": [
                { "text": "Persian Carpet Weaving", "translation": "قالی‌بافی ایرانی" },
                { "text": "Persian Tilework", "translation": "کاشی‌کاری ایرانی" },
                { "text": "Persian Miniature Painting", "translation": "نگارگری ایرانی" },
                { "text": "Persian Calligraphy", "translation": "خوشنویسی ایرانی" },
                { "text": "Traditional Textiles", "translation": "منسوجات سنتی" },
                { "text": "Woodcarving", "translation": "منبت‌کاری" },
                { "text": "Persian Embroidery", "translation": "گلدوزی ایرانی" },
                { "text": "Persian Mirrorwork", "translation": "آینه‌کاری ایرانی" },
                { "text": "Termeh Weaving", "translation": "بافت ترمه" },
                { "text": "Persian Jewelry", "translation": "جواهرسازی ایرانی" }
            ],
            "iranian_set_design": [
                { "text": "Tehran clothe", "translation": "لباس تهرانی" },
                { "text": "Tehran woman", "translation": "زن تهرانی" },
                { "text": "Tehran man", "translation": "مرد تهرانی" },
                { "text": "Modern Persian vibe", "translation": "حس و حال مدرن پارسی" },
                { "text": "Persian art", "translation": "هنر پارسی" },
                { "text": "Tehran atmosphere", "translation": "فضای تهران" },
                { "text": "Esfahan vibe", "translation": "حس و حال اصفهان" },
                { "text": "Qajar art", "translation": "هنر قاجار" },
                { "text": "Princess Qajar", "translation": "شاهزاده قاجار" },
                { "text": "Persian empire", "translation": "امپراتوری پارس" }
            ]
        };

        // باز کردن لیست پرامپت بر اساس دسته‌بندی
        document.querySelectorAll('.prompt-category').forEach(category => {
            category.addEventListener('click', function() {
                const categoryName = this.getAttribute('data-category');
                const prompts = promptsData[categoryName];
                if (prompts) {
                    promptList.innerHTML = '';
                    prompts.forEach(prompt => {
                        const promptElement = document.createElement('div');
                        promptElement.classList.add('prompt-item');
                        promptElement.innerHTML = `
                            <div class="prompt-text">${prompt.text}</div>
                            <div class="copy-icon" title="کپی">
                                <svg xmlns="http://www.w3.org/2000/svg" height="16" width="16" viewBox="0 0 24 24" fill="#555">
                                    <path d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2z"/>
                                    <path d="M10 12h4v4h-4z"/>
                                </svg>
                            </div>
                            <div class="persian-translation">${prompt.translation}</div>
                        `;
                        // اضافه کردن قابلیت کپی کردن با کلیک بر روی متن
                        promptElement.querySelector('.prompt-text').addEventListener('click', function() {
                            copyText(prompt.text);
                        });
                        // اضافه کردن قابلیت کپی کردن با کلیک بر روی آیکون
                        promptElement.querySelector('.copy-icon').addEventListener('click', function() {
                            copyText(prompt.text);
                        });
                        promptList.appendChild(promptElement);
                    });
                    promptListTitle.innerText = this.innerText;
                    promptModal.style.display = 'none';
                    promptListModal.style.display = 'block';
                }
            });
        });

        // بستن مودال لیست پرامپت‌ها
        closePromptListBtn.addEventListener('click', function() {
            promptListModal.style.display = 'none';
        });

        function copyText(text) {
            navigator.clipboard.writeText(text).then(() => {
                alert("متن با موفقیت کپی شد: " + text);
            }).catch(err => {
                console.error("خطا در کپی کردن متن: ", err);
                alert("خطایی در کپی کردن متن رخ داد.");
            });
        }

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