<style>
    /* تنظیمات پایه برای حذف فضای سفید اضافی */
    html, body {
        margin: 0;
        padding: 0;
        height: 100%;
        width: 100%;
        overflow-x: hidden;
    }

    body {
        font-family: 'Courier New', monospace;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: #1e1e1e;
        color: #ffffff;
    }

    .container {
        text-align: center;
    }

    .animated-text {
        font-size: 18px;
        color: #339966;
        text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5), 0 0 25px rgba(51, 153, 102, 0.7);
        animation: sway 3s ease-in-out infinite;
        display: inline-block;
    }

    @keyframes sway {
        0% { transform: translate(0, 0) scale(1); }
        25% { transform: translate(-5px, 0) scale(1.05); }
        50% { transform: translate(5px, 0) scale(1); }
        75% { transform: translate(-5px, 0) scale(1.05); }
        100% { transform: translate(0, 0) scale(1); }
    }

    .copy-text {
        cursor: pointer;
        display: inline-block;
        font-size: 22px;
        margin: 20px;
        padding: 10px 30px;
        background-color: #007BFF;
        color: white;
        border-radius: 8px;
        border: none;
        transition: background-color 0.3s, transform 0.2s;
        font-family: 'Courier New', monospace;
    }

    .copy-text:hover {
        background-color: #0056b3;
        transform: scale(1.05);
    }

    .spinner {
        width: 50px;
        height: 50px;
        border: 5px solid rgba(0, 0, 0, 0.1);
        border-top: 5px solid #3498db;
        border-radius: 50%;
        animation: spin 1.5s linear infinite;
        margin: 20px auto;
        display: none;
    }

    .code-output {
        font-family: 'Courier New', monospace;
        font-size: 16px;
        background-color: #000000;
        color: #00FF00;
        padding: 10px;
        margin: 10px auto;
        width: 300px;
        height: 50px;
        text-align: left;
        border-radius: 8px;
        display: none;
    }

    .message {
        font-size: 18px;
        color: #28a745;
        margin-top: 20px;
        display: none;
    }

    .message .small-text {
        font-size: 14px;
        margin-top: 10px;
        display: block;
    }

    #change-voice-btn {
        display: none;
        margin-top: 20px;
        text-align: center;
    }

    #change-voice-btn button {
        margin: 0 auto;
        display: block;
    }

    #extra-message {
        display: none;
        margin-top: 20px;
        text-align: center;
    }

    @keyframes spin {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
    }

    /* استایل‌های انیمیشن چرخش دور تصویر */
    .image-container {
        position: relative;
        width: 150px;
        height: 150px;
        margin: 0 auto;
    }

    .image-container img {
        width: 100%;
        height: 100%;
        border-radius: 50%;
        position: relative;
        z-index: 2;
        padding: 10px;
        box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 8px;
    }

    .image-container::after {
        content: '';
        position: absolute;
        top: -5px;
        left: -5px;
        width: calc(100% + 10px);
        height: calc(100% + 10px);
        border-radius: 50%;
        border: 5px solid #339966;
        animation: pulse 2s infinite;
        z-index: 1;
    }

    @keyframes pulse {
        0% { transform: scale(1); opacity: 1; }
        50% { transform: scale(1.1); opacity: 0.7; }
        100% { transform: scale(1); opacity: 1; }
    }

    .orbit {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        border-radius: 50%;
        border: 1px solid transparent;
        border-top: 1px solid #339966;
        z-index: 0;
    }

    .orbit::before {
        content: '';
        position: absolute;
        top: -5px;
        left: 50%;
        width: 10px;
        height: 10px;
        background-color: #339966;
        border-radius: 50%;
        transform: translateX(-50%);
    }

    /* اندازه و انیمیشن مدارها */
    .orbit1 {
        width: 160px;
        height: 160px;
        animation: rotate-orbit 6s linear infinite;
    }

    .orbit2 {
        width: 180px;
        height: 180px;
        animation: rotate-orbit-reverse 8s linear infinite;
    }

    .orbit3 {
        width: 200px;
        height: 200px;
        animation: rotate-orbit 10s linear infinite;
    }

    @keyframes rotate-orbit {
        from { transform: translate(-50%, -50%) rotate(0deg); }
        to { transform: translate(-50%, -50%) rotate(360deg); }
    }

    @keyframes rotate-orbit-reverse {
        from { transform: translate(-50%, -50%) rotate(360deg); }
        to { transform: translate(-50%, -50%) rotate(0deg); }
    }

    /* توقف انیمیشن‌ها با اضافه کردن کلاس 'no-animation' */
    .image-container.no-animation::after,
    .image-container.no-animation .orbit {
        animation: none;
    }

    /* اعمال استایل‌های قبلی به تصویر هنگام توقف انیمیشن */
    .image-container.no-animation::after {
        border: 5px solid #546e7a;
    }

    .image-container.no-animation img {
        padding: 10px;
        box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 8px;
    }
</style>
<div class="container"><!-- تصویر با انیمیشن چرخش -->
<div class="image-container"><img src="https://app.puzzley.net/uploads/user/Jydo/تغیر صدا با هوش مصنوعی/1000188203.jpg" alt="مدل صدای شادمهر عقیلی" />
<div class="orbit orbit1"></div>
<div class="orbit orbit2"></div>
<div class="orbit orbit3"></div>
</div>
<p style="text-align: center;">&nbsp;</p>
<p style="text-align: center;"><span class="animated-text"><strong>مدل صدای شادمهر عقیلی</strong></span></p>
<p style="text-align: center;">&nbsp;</p>
<p style="text-align: center;"><audio controls="controls" controlslist="nodownload">
            <source src="https://app.puzzley.net/uploads/user/Jydo/تغیر صدا با هوش مصنوعی/شادمهر.mp3" type="audio/mpeg" />
        </audio></p>
<p><span style="color: #333333;">صداتو (<span style="font-size: 8pt;">هر صدایی رو</span>) به صدای شادمهر عقیلی تغییر بده</span></p>
<p><span style="color: #008000;">و یا متن بنویس تا شادمهر عقیلی صحبت کنه.</span></p>
<p>&nbsp;</p>
<button class="copy-text" id="copy-text">تولید مدل صدا (<span style="font-size: 8pt;"><b>شادمهر عقیلی</b></span>)</button>
<div class="spinner" id="spinner"></div>
<div class="code-output" id="code-output"></div>
<p class="message" id="success-message">مدل با موفقیت ساخته شد!✅ <span class="small-text">حالا میتونی با پروژه پایین تغییر صدا انجام بدی.</span></p>
<div id="change-voice-btn" style="text-align: center;"><a href="#/nav/widget/page-builder/getIndex/eyJpdiI6IitmckhCTTRXcWtCcWhCWk5TMTBiaGc9PSIsInZhbHVlIjoiYWRlTnpXM2lIeHlMYThvY2FHdVI4c3FucDhOK1ozREpienloNFJVSWFJM0M2dWwxWjluU1RlWVI3WXpJYXFXUiIsIm1hYyI6IjQzZTJkMzQ3YjQ1YjE5ZTM2ODkxM2MzNDE2M2E2MWU2NjIwMDM2MDU2YTkwN2IyMjIyYmJlY2RkY2NlMzMzMjgiLCJ0YWciOiIifQ%3D%3D/1589906"> <button style="background-color: #1976d2; padding: 16px 32px; border-radius: 8px;"> <span style="color: #ffffff;">شروع تغییر صدا🤖</span> </button> </a></div>
<div id="extra-message" style="display: none;">
<p>&nbsp;</p>
<p><span style="color: #339966;"><strong>آموزش ویدیویی تغییر صدا ⬇️</strong></span></p>
<p><a href="#/nav/online/news/getSingle/1149635/eyJpdiI6Iks5MWpxSUJuVVdzSDZYQmxTZzQxK0E9PSIsInZhbHVlIjoiSTJ1bU0zcDlrTHVJck9oMVRDcHJPZVlLb0dxK1BJMGdGMC9NODE3aVpXMUk0dmF2OENqeUpCVkJIMHBnZ2k5WSIsIm1hYyI6Ijg2NDVlZWI1OTQwNTFjMWIyYjIwZWQ2MGEyNmNkMTJmNDhkNDliNjk5ZWUwOGI3Y2NjMjc4NDdhMmI3OTU3ZDIiLCJ0YWciOiIifQ==/17363717">اینجا <span style="font-size: 14pt;"><strong>کلیک</strong></span> کنید</a></p>
</div>
</div>
<p>
<script>
    document.getElementById('copy-text').addEventListener('click', function (e) {
        e.preventDefault(); // جلوگیری از رفتار پیش‌فرض

        var spinner = document.getElementById('spinner');
        var codeOutput = document.getElementById('code-output');
        var message = document.getElementById('success-message');
        var changeVoiceBtn = document.getElementById('change-voice-btn');
        var extraMessage = document.getElementById('extra-message');
        var imageContainer = document.querySelector('.image-container');

        spinner.style.display = 'block';
        codeOutput.style.display = 'block';
        message.style.display = 'none';
        changeVoiceBtn.style.display = 'none';
        extraMessage.style.display = 'none';

        // اضافه کردن کلاس 'no-animation' برای توقف انیمیشن‌ها
        imageContainer.classList.add('no-animation');

        var textToCopy = "https://huggingface.co/datasets/Hamed744/Ezmary/resolve/main/Shadmehr.zip?download=true";
        navigator.clipboard.writeText(textToCopy).then(function() {
            // موفقیت در کپی کردن
        }, function(err) {
            // خطا در کپی کردن
            console.error('Error in copying text: ', err);
        });

        var initialMessages = [
            "در حال ساخت مدل با هوش مصنوعی...",
            "مدل: AI_Model-شادمهر عقیلی"
        ];

        var processMessages = [
            "بارگذاری...",
            "پردازش...",
            "نهایی‌سازی..."
        ];

        function typeMessage(messageText, callback) {
            let index = 0;
            codeOutput.textContent = '';
            codeOutput.style.display = 'block';
            function type() {
                if (index < messageText.length) {
                    codeOutput.textContent += messageText.charAt(index);
                    index++;
                    setTimeout(type, 100);
                } else if (callback) {
                    callback();
                }
            }

            type();
        }

        let currentLine = 0;
        let totalLines = initialMessages.length;

        function typeInitialMessages() {
            if (currentLine < totalLines) {
                typeMessage(initialMessages[currentLine], function() {
                    currentLine++;
                    setTimeout(typeInitialMessages, 1000);
                });
            } else {
                currentLine = 0;
                setTimeout(typeProcessMessages, 1000);
            }
        }

        function typeProcessMessages() {
            if (currentLine < processMessages.length) {
                typeMessage(processMessages[currentLine], function() {
                    currentLine++;
                    setTimeout(typeProcessMessages, 1000);
                });
            } else {
                setTimeout(function () {
                    spinner.style.display = 'none';
                    codeOutput.style.display = 'none';
                    message.style.display = 'block';
                    changeVoiceBtn.style.display = 'block';
                    extraMessage.style.display = 'block';

                    // حذف کلاس 'no-animation' برای شروع مجدد انیمیشن‌ها
                    imageContainer.classList.remove('no-animation');
                }, 1000);
            }
        }

        typeInitialMessages();
    });
</script>
</p> این کد من یک مشکلی داره من توضیح میدم ببین چه راه حلی هست برای رفعش وقتی داخل صفحه روی تولید مدل صدا شادمهر لیک می‌کنیم یک لینک کپی میشه به کلیپ برد و بعداً یک فرایندی انجام می‌شه اما مشکل اینجاست که ثل شادمهر مدل‌های دیگری هم دارم وقتی میرم روی اون مدل کلیک می‌کنم وی تولید مدل صدا می‌زنم تا زمانی که توی برنامه هستم قط بار اول متن کپی می‌شه در حالی که من می‌خوام هر وقت و هر زمان به محض اینکه روی تولید مدل صدا کلیک کنم اون لینک به کلیپ برد کپی بشه یعنی وقتی داخل صفحه هستم ک بار که کلیک می‌کنم روی تولید مدل صدا لینک کپی میشه اما تا زمانی که از برنامه بیرون نشدم وباره روی تولید مدل صدا می‌زنم لینک کپی نمی‌شه مشکل به یک جورایی رفع میشه برنامه رو ببندم دوباره باز کنم روی تولید مدل صدا کلیک کنم لینک کپی میشه اما وقتی تا زمانی توی برنامه باشم روی تولید مدل صدا کلیک کنم بار دوم کپی نمی‌شه  حالی که من می‌خوام همیشه به محض اینکه کلیک می‌کنم متن کپی بشه کد درست کن کامل یکجا بفرست