Update index.html

index.html

@@ -9,24 +9,25 @@
 
         :root {
             --app-font: 'Vazirmatn', sans-serif;
-            --bg-color: #0d0f21;
-            --panel-bg: rgba(26, 30, 56, 0.5);
-            --panel-border: rgba(255, 255, 255, 0.15);
-            --text-primary: #f0f4f9;
-            --text-secondary: #a8b2d1;
-            --accent-glow: #a77dfd;
-            --accent-glow-rgb: 167, 125, 253;
-            --button-bg: linear-gradient(135deg, rgba(167, 125, 253, 0.8) 0%, rgba(89, 97, 240, 0.8) 100%);
-            --button-hover-bg: linear-gradient(135deg, rgba(167, 125, 253, 1) 0%, rgba(89, 97, 240, 1) 100%);
+            --bg-color-start: #111827;
+            --bg-color-end: #1f2937;
+            --glass-bg: rgba(31, 41, 55, 0.5);
+            --glass-border: rgba(255, 255, 255, 0.1);
+            --text-primary: #f9fafb;
+            --text-secondary: #9ca3af;
+            --accent-color: #2dd4bf;
+            --accent-color-hover: #5eead4;
+            --accent-glow: rgba(45, 212, 191, 0.3);
             --radius-card: 24px;
             --radius-input: 12px;
+            --shadow-card: 0 10px 30px -5px rgba(0,0,0,0.2);
         }
 
-        /* --- پس‌زمینه متحرک و زیبا --- */
         body {
             font-family: var(--app-font);
             direction: rtl;
-            background-color: var(--bg-color);
+            background-color: var(--bg-color-start);
+            background-image: radial-gradient(circle at top, var(--bg-color-end), var(--bg-color-start));
             color: var(--text-primary);
             font-size: 16px;
             line-height: 1.7;
@@ -35,218 +36,202 @@
             min-height: 100vh;
             -webkit-font-smoothing: antialiased;
             -moz-osx-font-smoothing: grayscale;
-            overflow: hidden;
-            position: relative;
-        }
-        
-        body::before {
-            content: '';
-            position: absolute;
-            top: 0;
-            left: 0;
-            width: 100%;
-            height: 100%;
-            background: 
-                radial-gradient(circle at 15% 25%, rgba(var(--accent-glow-rgb), 0.2), transparent 40%),
-                radial-gradient(circle at 85% 75%, rgba(89, 97, 240, 0.2), transparent 40%);
-            animation: move-glow 20s infinite alternate;
-            z-index: -1;
+            overflow-x: hidden;
         }
 
-        @keyframes move-glow {
-            from { transform: translate(0, 0) scale(1); }
-            to { transform: translate(50px, -50px) scale(1.2); }
+        .container { max-width: 1200px; width: 95%; margin: 0 auto; }
+        .app-header { text-align: center; margin-bottom: 4rem; }
+        .app-header h1 { font-size: 3.5em; font-weight: 800; margin:0; color: var(--text-primary); text-shadow: 0 0 15px var(--accent-glow), 0 0 30px var(--accent-glow); }
+        .app-header p { font-size: 1.25em; color: var(--text-secondary); margin-top: 0.5rem; }
+
+        .main-grid {
+            display: grid;
+            grid-template-columns: 1.2fr 1fr;
+            gap: 2.5rem;
         }
 
-        .container { max-width: 800px; width: 95%; margin: 0 auto; z-index: 1; position: relative; }
-        
-        /* --- پنل اصلی با افکت شیشه‌ای --- */
-        .main-panel {
-            background: var(--panel-bg);
-            border: 1px solid var(--panel-border);
-            border-radius: var(--radius-card);
+        /* --- پنل شیشه‌ای --- */
+        .main-content-glass {
+            background: var(--glass-bg);
             backdrop-filter: blur(20px);
             -webkit-backdrop-filter: blur(20px);
-            padding: 2rem 2.5rem;
-            box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3);
+            border: 1px solid var(--glass-border);
+            border-radius: var(--radius-card);
+            padding: 2.5rem;
+            box-shadow: var(--shadow-card);
         }
-
-        .app-header { text-align: center; margin-bottom: 3rem; }
-        .app-header h1 { font-size: 3em; font-weight: 800; margin:0; text-shadow: 0 0 20px rgba(var(--accent-glow-rgb), 0.5); }
-        .app-header p { font-size: 1.25em; color: var(--text-secondary); margin-top:0.5rem; }
         
-        .form-group { margin-bottom: 2.5rem; }
-        label { display: block; font-weight: 700; color: var(--text-primary); font-size: 1.1em; margin-bottom: 1rem; }
+        .form-group { margin-bottom: 2rem; }
+        label { display: block; font-weight: 600; color: var(--text-secondary); font-size: 1em; margin-bottom: 0.8rem; }
         textarea, input[type="text"] {
             width: 100%;
             padding: 1rem;
             border-radius: var(--radius-input);
-            border: 1px solid var(--panel-border);
-            background-color: rgba(0,0,0,0.2);
+            border: 1px solid var(--glass-border);
+            background-color: rgba(17, 24, 39, 0.8);
             box-shadow: none;
             font-family: var(--app-font);
             font-size: 1rem;
             box-sizing: border-box;
             color: var(--text-primary);
-            transition: all 0.25s ease-in-out;
+            transition: all 0.3s ease;
         }
         textarea:focus, input[type="text"]:focus {
             outline: none;
-            border-color: var(--accent-glow);
-            box-shadow: 0 0 15px rgba(var(--accent-glow-rgb), 0.3);
-            background-color: rgba(0,0,0,0.3);
+            border-color: var(--accent-color);
+            background-color: rgba(31, 41, 55, 0.9);
+            box-shadow: 0 0 15px var(--accent-glow);
         }
 
-        /* --- نمایش گوینده منتخب --- */
-        #selected-speaker-display { text-align: center; }
-        #selected-speaker-card { display: inline-flex; align-items: center; background: rgba(0,0,0,0.2); border-radius: 99px; padding: 10px; border: 1px solid var(--panel-border); }
-        #selected-speaker-card img { width: 70px; height: 70px; border-radius: 50%; object-fit: cover; margin-left: 15px; border: 3px solid rgba(255,255,255,0.5); }
-        #selected-speaker-info h3 { margin: 0; font-size: 1.4em; font-weight: 700; }
-        #selected-speaker-info p { margin: 5px 0 0; color: var(--text-secondary); font-size: 0.9em; }
-        #change-speaker-btn { display: block; margin: 1.2rem auto 0; padding: 10px 24px; border-radius: var(--radius-input); background-color: rgba(255,255,255,0.1); border: 1px solid var(--panel-border); cursor: pointer; font-family: var(--app-font); font-weight: 500; color: var(--text-primary); transition: all 0.2s ease; }
-        #change-speaker-btn:hover { background-color: rgba(255,255,255,0.2); border-color: rgba(255,255,255,0.3); transform: translateY(-2px); }
+        /* --- گوینده منتخب --- */
+        #selected-speaker-card {
+            display: flex;
+            align-items: center;
+            background: rgba(17, 24, 39, 0.7);
+            border-radius: var(--radius-input);
+            padding: 1rem;
+            border: 1px solid var(--glass-border);
+            cursor: pointer;
+            transition: all 0.3s ease;
+        }
+        #selected-speaker-card:hover { border-color: var(--accent-color); background: rgba(31, 41, 55, 0.8); }
+        #selected-speaker-card img { width: 60px; height: 60px; border-radius: 50%; object-fit: cover; margin-left: 15px; border: 2px solid var(--glass-border); }
+        #selected-speaker-info h3 { margin: 0; font-size: 1.3em; font-weight: 700; color: var(--text-primary); }
+        #selected-speaker-info p { margin: 2px 0 0; color: var(--text-secondary); font-size: 0.9em; }
 
-        /* --- مودال گالری گویندگان --- */
-        #speaker-modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(13, 15, 33, 0.7); backdrop-filter: blur(10px); display: none; align-items: center; justify-content: center; z-index: 1000; opacity: 0; transition: opacity 0.3s ease; }
+        /* --- مودال --- */
+        #speaker-modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(17, 24, 39, 0.7); backdrop-filter: blur(10px); display: none; align-items: center; justify-content: center; z-index: 1000; opacity: 0; transition: opacity 0.3s ease; }
         #speaker-modal.visible { display: flex; opacity: 1; }
-        .modal-content { background: var(--panel-bg); border: 1px solid var(--panel-border); padding: 2rem; border-radius: var(--radius-card); width: 90%; max-width: 700px; max-height: 85vh; overflow-y: auto; transform: scale(0.95); transition: transform 0.3s ease; }
+        .modal-content { background: var(--glass-bg); border: 1px solid var(--glass-border); padding: 2rem; border-radius: var(--radius-card); width: 90%; max-width: 700px; max-height: 85vh; overflow-y: auto; transform: scale(0.95); transition: transform 0.3s ease; box-shadow: 0 20px 50px rgba(0,0,0,0.3); }
         #speaker-modal.visible .modal-content { transform: scale(1); }
-        .modal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; padding-bottom: 1rem; border-bottom: 1px solid var(--panel-border); }
-        .modal-header h2 { margin: 0; }
-        .close-modal-btn { background: none; border: none; font-size: 2.2rem; cursor: pointer; color: var(--text-secondary); transition: color 0.2s ease, transform 0.2s ease; line-height: 1; }
-        .close-modal-btn:hover { color: var(--text-primary); transform: rotate(90deg); }
+        .modal-header h2 { color: var(--text-primary); }
+        .close-modal-btn { color: var(--text-secondary); }
         #speaker-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 1.5rem; }
-        .speaker-card { cursor: pointer; text-align: center; }
-        .speaker-card .speaker-visual { border: 3px solid transparent; border-radius: var(--radius-input); overflow: hidden; position: relative; background-color: rgba(0,0,0,0.2); transition: all 0.3s ease; }
-        .speaker-card:hover .speaker-visual { transform: translateY(-5px); box-shadow: 0 8px 25px rgba(0,0,0,0.3); }
-        .speaker-card input[type="radio"] { display: none; }
-        .speaker-card img { width: 100%; height: 120px; object-fit: cover; display: block; filter: saturate(0.8); transition: filter 0.3s; }
-        .speaker-card:hover img { filter: saturate(1); }
-        .speaker-card .speaker-name { padding: 0.8rem 0.5rem; font-weight: 500; font-size: 0.95em; color: var(--text-secondary); transition: color 0.2s; }
-        .speaker-card input[type="radio"]:checked + .speaker-visual { border-color: var(--accent-glow); box-shadow: 0 0 20px rgba(var(--accent-glow-rgb), 0.4); }
-        .speaker-card input[type="radio"]:checked + .speaker-visual .speaker-name { color: var(--accent-glow); font-weight: 700; }
-        
-        /* --- Slider & Button & Output --- */
-        .slider-container { display: flex; align-items: center; gap: 1.5rem; }
-        input[type="range"] { flex-grow: 1; -webkit-appearance: none; appearance: none; width: 100%; height: 6px; background: rgba(0,0,0,0.3); border-radius: 5px; outline: none; }
-        input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 22px; height: 22px; background: var(--accent-glow); border-radius: 50%; cursor: pointer; box-shadow: 0 0 10px rgba(var(--accent-glow-rgb), 0.7); }
-        input[type="range"]::-moz-range-thumb { width: 22px; height: 22px; background: var(--accent-glow); border-radius: 50%; cursor: pointer; box-shadow: 0 0 10px rgba(var(--accent-glow-rgb), 0.7); }
-        #temperature-value { font-weight: 700; background-color: rgba(0,0,0,0.3); padding: 0.4rem 1rem; border-radius: 8px; border: 1px solid var(--panel-border); min-width: 45px; text-align: center; }
-        #generate-btn { width: 100%; padding: 1rem 1.5rem; font-size: 1.25em; font-weight: 700; font-family: var(--app-font); background: var(--button-bg); color: white; border: none; border-radius: var(--radius-input); cursor: pointer; transition: all 0.3s ease; box-shadow: 0 5px 20px rgba(var(--accent-glow-rgb), 0.2); }
-        #generate-btn:hover:not(:disabled) { background: var(--button-hover-bg); transform: translateY(-3px); box-shadow: 0 8px 25px rgba(var(--accent-glow-rgb), 0.4); }
-        #generate-btn:disabled { background: rgba(107, 114, 128, 0.5); cursor: not-allowed; box-shadow: none; transform: none; }
-        #output-section { margin-top: 2.5rem; padding: 2rem; min-height: 180px; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 1rem; border-radius: var(--radius-input); background: rgba(0,0,0,0.2); border: 1px solid var(--panel-border); }
-        #status-message { font-weight: 500; color: var(--text-secondary); text-align: center; }
-        #audio-player { width: 100%; margin-top: 1rem; display: none; }
-        audio::-webkit-media-controls-panel { background-color: rgba(40, 45, 80, 0.8); }
-        audio::-webkit-media-controls-play-button { color: var(--accent-glow); }
-        audio::-webkit-media-controls-current-time-display, audio::-webkit-media-controls-time-remaining-display { color: var(--text-primary); }
+        .speaker-card .speaker-visual { border: 3px solid transparent; border-radius: var(--radius-card); transition: all 0.3s ease; background: rgba(17, 24, 39, 0.8); }
+        .speaker-card:hover .speaker-visual { transform: translateY(-5px); box-shadow: 0 8px 25px rgba(0,0,0,0.3); border-color: var(--accent-color); }
+        .speaker-card input[type="radio"]:checked + .speaker-visual { border-color: var(--accent-color); box-shadow: 0 0 20px var(--accent-glow); }
+        .speaker-card .speaker-name { color: var(--text-secondary); }
+        .speaker-card:hover .speaker-name, .speaker-card input[type="radio"]:checked + .speaker-visual .speaker-name { color: var(--text-primary); }
 
-        /* --- انیمیشن پردازش فوق العاده زیبا --- */
-        #premium-loader { display: none; flex-direction: column; align-items: center; justify-content: center; gap: 2rem; }
-        .loader-container { position: relative; width: 150px; height: 150px; }
-        .loader-orb {
-            position: absolute;
-            top: 50%; left: 50%;
-            width: 80px; height: 80px;
-            background: radial-gradient(circle, var(--accent-glow) 0%, transparent 70%);
-            border-radius: 50%;
-            transform: translate(-50%, -50%);
-            animation: orb-pulse 2.5s infinite ease-in-out;
+        /* --- Slider & Button --- */
+        input[type="range"] { flex-grow: 1; -webkit-appearance: none; appearance: none; width: 100%; height: 6px; background: rgba(17, 24, 39, 0.8); border-radius: 5px; outline: none; border: 1px solid var(--glass-border); }
+        input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 24px; height: 24px; background: var(--accent-color); border-radius: 50%; cursor: pointer; transition: all 0.2s; box-shadow: 0 0 10px var(--accent-glow); }
+        input[type="range"]::-webkit-slider-thumb:hover { background: var(--accent-color-hover); box-shadow: 0 0 20px var(--accent-glow); }
+        #temperature-value { font-weight: 700; color: var(--accent-color); min-width: 45px; text-align: center; }
+        #generate-btn {
+            width: 100%; padding: 1rem; font-size: 1.25em; font-weight: 700; font-family: var(--app-font);
+            background: var(--accent-color); color: var(--bg-color-start); border: none;
+            border-radius: var(--radius-input); cursor: pointer; transition: all 0.3s ease;
+            box-shadow: 0 0 20px var(--accent-glow);
         }
-        .loader-particle {
-            position: absolute;
-            top: 50%; left: 50%;
-            width: 5px; height: 5px;
-            background: var(--accent-glow);
-            border-radius: 50%;
-            box-shadow: 0 0 10px var(--accent-glow), 0 0 20px var(--accent-glow);
-            animation: orbit 4s infinite linear;
-        }
-        .loader-particle:nth-child(2) { animation-delay: -0.5s; width: 4px; height: 4px; }
-        .loader-particle:nth-child(3) { animation-delay: -1s; width: 6px; height: 6px; }
-        .loader-particle:nth-child(4) { animation-delay: -1.5s; }
-        .loader-particle:nth-child(5) { animation-delay: -2s; width: 3px; height: 3px; }
-        .loader-particle:nth-child(6) { animation-delay: -2.5s; }
-        .loader-particle:nth-child(7) { animation-delay: -3s; width: 4px; height: 4px; }
-        .loader-particle:nth-child(8) { animation-delay: -3.5s; }
-        #loading-text { font-size: 1.1em; font-weight: 500; color: var(--text-primary); text-shadow: 0 0 10px rgba(var(--accent-glow-rgb), 0.3); }
+        #generate-btn:hover:not(:disabled) { background: var(--accent-color-hover); transform: translateY(-3px) scale(1.02); box-shadow: 0 0 30px var(--accent-glow); }
+        #generate-btn:disabled { background: #4b5563; color: #9ca3af; cursor: not-allowed; box-shadow: none; transform: none; }
+
+        /* --- پنل خروجی و انیمیشن --- */
+        #output-panel { height: 100%; display: flex; align-items: center; justify-content: center; flex-direction: column; position: relative; min-height: 400px; }
+        #output-initial-state { text-align: center; color: var(--text-secondary); }
+        #output-initial-state .icon { font-size: 4rem; margin-bottom: 1rem; display: block; opacity: 0.5; }
+        #audio-player { width: 100%; display: none; margin-top: 1rem; color-scheme: dark; }
 
-        @keyframes orb-pulse {
-            0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.8; }
-            50% { transform: translate(-50%, -50%) scale(1.2); opacity: 1; }
+        /* --- انیمیشن هسته هوش مصنوعی --- */
+        #loading-animation { display: none; width: 100%; height: 100%; position: absolute; top: 0; left: 0; align-items: center; justify-content: center; flex-direction: column; gap: 2rem; }
+        .ai-core-container { position: relative; width: 200px; height: 200px; display: flex; align-items: center; justify-content: center; }
+        .ai-core {
+            width: 80px; height: 80px; background: radial-gradient(circle, var(--accent-color-hover), var(--accent-color) 70%);
+            border-radius: 50%; box-shadow: 0 0 30px var(--accent-color), 0 0 60px var(--accent-glow), inset 0 0 15px rgba(255,255,255,0.5);
+            animation: core-breath 4s infinite ease-in-out;
+        }
+        .energy-ring {
+            position: absolute; border-radius: 50%; border: 2px solid;
+            animation: rotate-ring 10s linear infinite;
+        }
+        .ring-1 { width: 150px; height: 150px; border-color: var(--accent-color) transparent transparent transparent; animation-duration: 8s; }
+        .ring-2 { width: 180px; height: 180px; border-color: transparent var(--accent-color) transparent transparent; animation-duration: 6s; animation-direction: reverse; }
+        .ring-3 { width: 210px; height: 210px; border-color: transparent transparent var(--accent-color) transparent; animation-duration: 12s; }
+        #loading-text { font-size: 1.1em; font-weight: 500; color: var(--text-secondary); text-shadow: 0 0 5px rgba(0,0,0,0.5); }
+        @keyframes core-breath {
+            0%, 100% { transform: scale(1); box-shadow: 0 0 30px var(--accent-color), 0 0 60px var(--accent-glow); }
+            50% { transform: scale(1.1); box-shadow: 0 0 45px var(--accent-color-hover), 0 0 90px var(--accent-glow); }
         }
-        @keyframes orbit {
-            from { transform: rotate(0deg) translateX(70px) rotate(0deg); }
-            to   { transform: rotate(360deg) translateX(70px) rotate(-360deg); }
+        @keyframes rotate-ring {
+            from { transform: rotate(0deg); }
+            to { transform: rotate(360deg); }
         }
 
+        /* --- Responsive --- */
+        @media (max-width: 992px) {
+            .main-grid { grid-template-columns: 1fr; }
+            #output-panel { margin-top: 2rem; }
+        }
     </style>
 </head>
 <body>
     <div class="container">
-        <div class="main-panel">
-            <header class="app-header">
-                <h1>آلفا TTS</h1>
-                <p>صدای آینده، خلق شده توسط هوش مصنوعی</p>
-            </header>
+        <header class="app-header">
+            <h1>Alpha TTS ᴾᴿᴱᴹᴵᵁ���</h1>
+            <p>کیفیت بی‌نظیر صدا، در یک تجربه‌ی استثنایی</p>
+        </header>
 
-            <main>
+        <div class="main-grid">
+            <div id="controls-panel" class="main-content-glass">
                 <form id="tts-form">
                     <div class="form-group">
-                        <label for="text-input">📝 متن برای تبدیل</label>
-                        <textarea id="text-input" rows="5" placeholder="اینجا متن خود را به فارسی وارد کنید...">این یک آزمایش برای بررسی کیفیت صدای تولید شده توسط هوش مصنوعی آلفا است.</textarea>
+                        <label for="text-input">متن شما</label>
+                        <textarea id="text-input" rows="6" placeholder="متن مورد نظر برای تبدیل به صدا را اینجا وارد کنید...">این یک آزمایش برای بررسی کیفیت صدای تولید شده توسط هوش مصنوعی آلفا است.</textarea>
                     </div>
                     <div class="form-group">
-                        <label for="prompt-input">🗣️ سبک و لحن گفتار (اختیاری)</label>
-                        <input type="text" id="prompt-input" value="با صدایی طبیعی و روان." placeholder="مثال: با لحنی شاد و پرانرژی">
+                        <label for="prompt-input">فرمان لحن (اختیاری)</label>
+                        <input type="text" id="prompt-input" value="با صدایی طبیعی و روان." placeholder="مثال: با لحنی حماسی و قدرتمند">
                     </div>
                     <div class="form-group">
-                        <label>🎤 گوینده منتخب</label>
-                        <div id="selected-speaker-display">
-                            <div id="selected-speaker-card">
-                                <img id="selected-speaker-img" src="" alt="عکس گوینده">
-                                <div id="selected-speaker-info">
-                                    <h3 id="selected-speaker-name"></h3>
-                                    <p>برای تغییر کلیک کنید</p>
-                                </div>
+                        <label>انتخاب گوینده</label>
+                        <div id="selected-speaker-card" role="button" tabindex="0" aria-label="تغییر گوینده">
+                            <img id="selected-speaker-img" src="" alt="عکس گوینده">
+                            <div id="selected-speaker-info">
+                                <h3 id="selected-speaker-name"></h3>
+                                <p>برای تغییر کلیک کنید</p>
                             </div>
-                            <button type="button" id="change-speaker-btn">تغییر گوینده</button>
                         </div>
                     </div>
                     <div class="form-group">
-                        <label for="temperature-slider">🌡️ میزان خلاقیت صدا (0.1 تا 1.5)</label>
-                        <div class="slider-container">
+                        <label for="temperature-slider">میزان خلاقیت</label>
+                        <div class="slider-container" style="display: flex; align-items: center; gap: 1.5rem;">
                             <input type="range" id="temperature-slider" min="0.1" max="1.5" step="0.05" value="0.9">
                             <span id="temperature-value">0.9</span>
                         </div>
                     </div>
-                    <button type="submit" id="generate-btn">🚀 تولید و پخش صدا</button>
+                    <button type="submit" id="generate-btn">ساخت صدا</button>
                 </form>
-
-                <div id="output-section">
-                    <div id="status-message">خروجی صدا در اینجا نمایش داده می‌شود</div>
-                    <!-- انیمیشن لودینگ پرمیوم -->
-                    <div id="premium-loader">
-                        <div class="loader-container">
-                            <div class="loader-orb"></div>
-                            <span class="loader-particle"></span><span class="loader-particle"></span><span class="loader-particle"></span>
-                            <span class="loader-particle"></span><span class="loader-particle"></span><span class="loader-particle"></span>
-                            <span class="loader-particle"></span><span class="loader-particle"></span>
-                        </div>
-                        <p id="loading-text">در حال تبدیل متن به صدا با هوش مصنوعی آلفا...</p>
-                    </div>
-                    <audio id="audio-player" controls></audio>
+            </div>
+            
+            <div id="output-panel" class="main-content-glass">
+                <div id="output-initial-state">
+                    <span class="icon">♪</span>
+                    <p>خروجی صدا در اینجا ظاهر می‌شود</p>
+                </div>
+                
+                <div id="loading-animation">
+                     <div class="ai-core-container">
+                        <div class="energy-ring ring-1"></div>
+                        <div class="energy-ring ring-2"></div>
+                        <div class="energy-ring ring-3"></div>
+                        <div class="ai-core"></div>
+                     </div>
+                    <p id="loading-text">در حال ساخت... هسته هوش مصنوعی فعال شد</p>
                 </div>
-            </main>
+                
+                <div id="status-message" style="display: none;"></div>
+                <audio id="audio-player" controls></audio>
+            </div>
         </div>
     </div>
 
+    <!-- Modal remains the same structurally, but will be styled by the new CSS -->
     <div id="speaker-modal">
         <div class="modal-content">
-            <div class="modal-header">
+            <div class="modal-header" style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; padding-bottom: 1rem; border-bottom: 1px solid var(--glass-border);">
                 <h2>انتخاب گوینده</h2>
-                <button type="button" class="close-modal-btn">×</button>
+                <button type="button" class="close-modal-btn" style="background: none; border: none; font-size: 2.2rem; cursor: pointer; transition: color 0.2s ease, transform 0.2s ease; line-height: 1;">×</button>
             </div>
             <div id="speaker-grid"></div>
         </div>
@@ -255,6 +240,8 @@
     <input type="hidden" id="selected_speaker_id_storage" value="Charon">
 
     <script>
+        // جاوا اسکریپت بدون تغییر باقی می‌ماند، چون منطق اصلی یکسان است
+        // اما برای هماهنگی با عناصر جدید، تغییراتی در نمایش وضعیت اعمال می‌کنیم
         document.addEventListener('DOMContentLoaded', () => {
             const HF_SPACE_URL = "https://hamed744-ttspro.hf.space";
             const JOIN_QUEUE_URL = `${HF_SPACE_URL}/gradio_api/queue/join`;
@@ -273,24 +260,28 @@
             const tempValueSpan = document.getElementById('temperature-value');
             const generateBtn = document.getElementById('generate-btn');
             
+            // Output section elements
+            const outputInitialState = document.getElementById('output-initial-state');
             const statusMessage = document.getElementById('status-message');
             const audioPlayer = document.getElementById('audio-player');
-            const premiumLoader = document.getElementById('premium-loader');
+            const loadingAnimation = document.getElementById('loading-animation');
             
             const selectedSpeakerIdStorage = document.getElementById('selected_speaker_id_storage');
             const speakerModal = document.getElementById('speaker-modal');
-            const changeSpeakerBtn = document.getElementById('change-speaker-btn');
+            const changeSpeakerBtn = document.getElementById('selected-speaker-card'); // Changed to the whole card
             const closeModalBtn = document.querySelector('.close-modal-btn');
             const speakerGridInModal = document.getElementById('speaker-grid');
             const selectedSpeakerImgDisplay = document.getElementById('selected-speaker-img');
             const selectedSpeakerNameDisplay = document.getElementById('selected-speaker-name');
             
-            function getSpeakerById(id) { return speakers.find(s => s.id === id); }
+            function getSpeakerById(id) {
+                return speakers.find(s => s.id === id);
+            }
             
             function getImageUrl(speaker, index) {
-                const gender = speaker.name.includes('(مرد)') ? 'men' : (speaker.name.includes('(زن)') ? 'women' : 'lego');
-                const imageIndex = (index * 11 + 7) % 100;
-                return `https://randomuser.me/api/portraits/${gender}/${imageIndex}.jpg`;
+                const gender = speaker.name.includes('(مرد)') ? 'men' : 'women';
+                const imageIndex = (index * 7 + 13) % 100;
+                return `https://randomuser.me/api/portraits/women/${imageIndex}.jpg`;
             }
 
             function updateSelectedSpeakerDisplay(speakerId) {
@@ -310,20 +301,17 @@
                     card.className = 'speaker-card';
                     card.setAttribute('for', `modal-speaker-${speaker.id}`);
                     const isChecked = speaker.id === selectedSpeakerIdStorage.value ? 'checked' : '';
-                    
                     card.innerHTML = `
-                        <input type="radio" name="modal_speaker_selection" value="${speaker.id}" id="modal-speaker-${speaker.id}" ${isChecked}>
+                        <input type="radio" name="modal_speaker_selection" value="${speaker.id}" id="modal-speaker-${speaker.id}" ${isChecked} style="display:none;">
                         <div class="speaker-visual">
-                            <img src="${getImageUrl(speaker, index)}" alt="عکس گوینده ${speaker.name}" loading="lazy">
-                            <div class="speaker-name">${speaker.name}</div>
+                            <img src="${getImageUrl(speaker, index)}" alt="${speaker.name}" loading="lazy" style="width: 100%; height: 120px; object-fit: cover; display: block;">
+                            <div class="speaker-name" style="padding: 0.8rem 0.5rem; font-weight: 500;">${speaker.name}</div>
                         </div>
                     `;
-                    
                     card.addEventListener('click', () => {
                         updateSelectedSpeakerDisplay(speaker.id);
                         setTimeout(() => speakerModal.classList.remove('visible'), 200);
                     });
-                    
                     speakerGridInModal.appendChild(card);
                 });
             }
@@ -340,27 +328,27 @@
             tempSlider.addEventListener('input', () => { tempValueSpan.textContent = tempSlider.value; });
 
             function showLoadingState() {
+                outputInitialState.style.display = 'none';
                 statusMessage.style.display = 'none';
                 audioPlayer.style.display = 'none';
                 audioPlayer.src = '';
-                premiumLoader.style.display = 'flex';
+                loadingAnimation.style.display = 'flex';
                 generateBtn.disabled = true;
-                generateBtn.textContent = 'در حال خلق صدا...';
+                generateBtn.textContent = 'در حال پردازش...';
             }
 
             function showResultState(isSuccess, message = '') {
-                premiumLoader.style.display = 'none';
+                loadingAnimation.style.display = 'none';
                 if (isSuccess) {
-                    statusMessage.style.display = 'none';
                     audioPlayer.style.display = 'block';
                     audioPlayer.play();
                 } else {
                     statusMessage.textContent = message || 'یک خطای ناشناخته رخ داد.';
                     statusMessage.style.display = 'block';
-                    audioPlayer.style.display = 'none';
+                    statusMessage.style.color = '#f87171';
                 }
                 generateBtn.disabled = false;
-                generateBtn.textContent = '🚀 تولید و پخش صدا';
+                generateBtn.textContent = 'ساخت صدا';
             }
 
             async function generateAudio(event) {
@@ -377,11 +365,19 @@
                 const temperature = parseFloat(tempSlider.value);
                 const selectedSpeaker = selectedSpeakerIdStorage.value;
                 const sessionHash = Math.random().toString(36).substring(2);
-                const payload = { fn_index: FN_INDEX, data: [false, null, text, prompt, selectedSpeaker, temperature], event_data: null, session_hash: sessionHash };
+
+                const payload = {
+                    fn_index: FN_INDEX,
+                    data: [false, null, text, prompt, selectedSpeaker, temperature],
+                    event_data: null,
+                    session_hash: sessionHash
+                };
 
                 try {
-                    const joinQueueResponse = await fetch(JOIN_QUEUE_URL, { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify(payload) });
-                    if (!joinQueueResponse.ok) { throw new Error(`خطا در اتصال به صف (${joinQueueResponse.status})`); }
+                    const joinQueueResponse = await fetch(JOIN_QUEUE_URL, {
+                        method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify(payload)
+                    });
+                    if (!joinQueueResponse.ok) throw new Error(`خطا در اتصال به صف (${joinQueueResponse.status})`);
                     
                     const dataResponse = await fetch(`${GET_DATA_URL_BASE}?session_hash=${sessionHash}`);
                     const reader = dataResponse.body.getReader();
@@ -405,14 +401,13 @@
                                     }
                                     break; 
                                 }
-                            } catch (e) { /* ignore parse errors */ }
+                            } catch (e) {}
                         }
                         if (finalFilePath) break; 
                     }
                     
                     if (finalFilePath) {
-                        const audioUrl = `${FILE_URL_BASE}${finalFilePath}`;
-                        audioPlayer.src = audioUrl;
+                        audioPlayer.src = `${FILE_URL_BASE}${finalFilePath}`;
                         showResultState(true);
                     } else {
                         throw new Error('فایل صوتی از سرور دریافت نشد.');