Update index.html

index.html

@@ -8,384 +8,701 @@
         @import url('https://fonts.googleapis.com/css2?family=Vazirmatn:wght@300;400;500;600;700;800&display=swap');
 
         :root {
-            --app-font: 'Vazirmatn', sans-serif;
-            --app-bg: #F0F7FA; /* Very light cool gray/blue */
-            --panel-bg: #FFFFFF;
-            --panel-border: #E0E8EF;
-            --text-primary: #1A202C; /* Dark Gray */
-            --text-secondary: #4A5568; /* Medium Gray */
-            --accent-primary: #2563EB; /* Vibrant Blue */
-            --accent-primary-hover: #1D4ED8;
-            --accent-secondary: #0D9488; /* Teal */
-            --accent-secondary-hover: #0F766E;
-            --input-bg: #F7FAFC;
-            --input-border-focus: var(--accent-primary);
-            
-            --radius-card: 20px;
-            --radius-input: 12px;
-            --shadow-subtle: 0 4px 12px -2px rgba(26, 32, 44, 0.06);
-            --shadow-medium: 0 8px 20px -4px rgba(26, 32, 44, 0.1);
-            --shadow-strong: 0 12px 30px -6px rgba(26, 32, 44, 0.15);
+            --primary-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            --secondary-gradient: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
+            --accent-gradient: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
+            --success-gradient: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
+            --glass-bg: rgba(255, 255, 255, 0.15);
+            --glass-border: rgba(255, 255, 255, 0.2);
+            --text-primary: #1a1a2e;
+            --text-secondary: #6c7293;
+            --text-light: #ffffff;
+            --shadow-glow: 0 20px 40px rgba(102, 126, 234, 0.3);
+            --shadow-card: 0 15px 35px rgba(50, 50, 93, 0.1);
+            --transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+        }
+
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
         }
 
         body {
-            font-family: var(--app-font);
+            font-family: 'Vazirmatn', sans-serif;
             direction: rtl;
-            background-color: var(--app-bg);
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
+            background-size: 400% 400%;
+            animation: gradientShift 15s ease infinite;
             color: var(--text-primary);
-            font-size: 16px;
-            line-height: 1.7;
-            margin: 0;
-            padding: 2rem 0;
             min-height: 100vh;
-            -webkit-font-smoothing: antialiased;
-            -moz-osx-font-smoothing: grayscale;
-            display: flex;
-            justify-content: center;
-            align-items: flex-start;
+            overflow-x: hidden;
+            position: relative;
+        }
+
+        body::before {
+            content: '';
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="25" cy="25" r="1" fill="rgba(255,255,255,0.1)"/><circle cx="75" cy="75" r="1" fill="rgba(255,255,255,0.05)"/><circle cx="50" cy="10" r="0.5" fill="rgba(255,255,255,0.08)"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>');
+            pointer-events: none;
+            z-index: -1;
         }
 
-        .container { 
-            max-width: 720px; 
-            width: 90%; 
+        @keyframes gradientShift {
+            0% { background-position: 0% 50%; }
+            50% { background-position: 100% 50%; }
+            100% { background-position: 0% 50%; }
+        }
+
+        .floating-shapes {
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            pointer-events: none;
+            z-index: -1;
+        }
+
+        .shape {
+            position: absolute;
+            background: rgba(255, 255, 255, 0.1);
+            border-radius: 50%;
+            animation: float 20s infinite linear;
+        }
+
+        .shape:nth-child(1) {
+            width: 80px;
+            height: 80px;
+            top: 20%;
+            left: 10%;
+            animation-delay: 0s;
+        }
+
+        .shape:nth-child(2) {
+            width: 120px;
+            height: 120px;
+            top: 60%;
+            left: 80%;
+            animation-delay: -5s;
+        }
+
+        .shape:nth-child(3) {
+            width: 60px;
+            height: 60px;
+            top: 80%;
+            left: 20%;
+            animation-delay: -10s;
+        }
+
+        @keyframes float {
+            0% { transform: translateY(0px) rotate(0deg); opacity: 0.7; }
+            33% { transform: translateY(-20px) rotate(120deg); opacity: 0.4; }
+            66% { transform: translateY(10px) rotate(240deg); opacity: 0.7; }
+            100% { transform: translateY(0px) rotate(360deg); opacity: 0.4; }
+        }
+
+        .container {
+            max-width: 900px;
             margin: 0 auto;
+            padding: 2rem;
+            position: relative;
+            z-index: 1;
         }
 
-        .app-header { 
-            padding: 0.5rem 0 2.5rem 0; 
-            text-align: center; 
-            margin-bottom: 1.5rem;
-        }
-        .app-header h1 { 
-            font-size: 2.8em; 
-            font-weight: 800; 
-            margin:0 0 0.5rem 0; 
-            color: var(--accent-primary);
-        }
-        .app-header p { 
-            font-size: 1.15em; 
-            color: var(--text-secondary); 
-            margin-top:0; 
-            opacity: 0.9; 
-        }
-
-        .main-content { 
-            padding: 2.5rem; 
-            background-color: var(--panel-bg); 
-            border-radius: var(--radius-card); 
-            box-shadow: var(--shadow-medium);
-            border: 1px solid var(--panel-border);
-        }
-
-        .form-group { margin-bottom: 2.2rem; }
-        label { 
-            display: block; 
-            font-weight: 600; 
-            color: var(--text-primary); 
-            font-size: 1.05em; 
-            margin-bottom: 0.75rem; 
-        }
-        textarea, input[type="text"] { 
-            width: 100%; 
-            padding: 0.9rem 1.1rem; 
-            border-radius: var(--radius-input); 
-            border: 1px solid var(--panel-border); 
-            background-color: var(--input-bg);
-            color: var(--text-primary);
-            box-shadow: var(--shadow-subtle); 
-            font-family: var(--app-font); 
-            font-size: 1rem; 
-            box-sizing: border-box; 
-            transition: all 0.25s ease-in-out; 
-        }
-        textarea:focus, input[type="text"]:focus { 
-            outline: none; 
-            border-color: var(--input-border-focus); 
-            box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.2), var(--shadow-subtle);
-            background-color: #fff;
-        }
-        textarea { min-height: 110px; }
-
-        /* --- نمایش گوینده منتخب --- */
-        #selected-speaker-display { text-align: center; margin-top: 1rem; }
-        #selected-speaker-card { 
-            display: inline-flex; 
-            align-items: center; 
-            background: linear-gradient(145deg, var(--input-bg), #fff);
-            border-radius: 99px; 
-            padding: 10px 12px 10px 20px; /* R L T B */
-            box-shadow: var(--shadow-medium); 
-            border: 1px solid var(--panel-border);
-            transition: all 0.3s ease;
+        .app-header {
+            text-align: center;
+            margin-bottom: 3rem;
+            animation: slideInUp 1s ease-out;
+        }
+
+        .app-header h1 {
+            font-size: 3.5rem;
+            font-weight: 800;
+            background: linear-gradient(135deg, #fff 0%, #f0f8ff 100%);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            margin-bottom: 1rem;
+            text-shadow: 0 0 30px rgba(255, 255, 255, 0.5);
+            animation: glow 3s ease-in-out infinite alternate;
+        }
+
+        @keyframes glow {
+            from { text-shadow: 0 0 20px rgba(255, 255, 255, 0.5); }
+            to { text-shadow: 0 0 40px rgba(255, 255, 255, 0.8); }
+        }
+
+        .app-header p {
+            font-size: 1.3rem;
+            color: rgba(255, 255, 255, 0.9);
+            font-weight: 300;
+            letter-spacing: 0.5px;
+        }
+
+        @keyframes slideInUp {
+            from {
+                opacity: 0;
+                transform: translateY(30px);
+            }
+            to {
+                opacity: 1;
+                transform: translateY(0);
+            }
+        }
+
+        .main-content {
+            background: var(--glass-bg);
+            backdrop-filter: blur(20px);
+            border: 1px solid var(--glass-border);
+            border-radius: 25px;
+            padding: 3rem;
+            box-shadow: var(--shadow-card);
+            animation: slideInUp 1s ease-out 0.2s both;
+            position: relative;
+            overflow: hidden;
+        }
+
+        .main-content::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            height: 1px;
+            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.6), transparent);
+        }
+
+        .form-group {
+            margin-bottom: 2.5rem;
+            animation: slideInUp 0.6s ease-out both;
+        }
+
+        .form-group:nth-child(1) { animation-delay: 0.1s; }
+        .form-group:nth-child(2) { animation-delay: 0.2s; }
+        .form-group:nth-child(3) { animation-delay: 0.3s; }
+        .form-group:nth-child(4) { animation-delay: 0.4s; }
+
+        label {
+            display: block;
+            font-weight: 600;
+            color: var(--text-light);
+            font-size: 1.1rem;
+            margin-bottom: 1rem;
+            text-shadow: 0 2px 4px rgba(0,0,0,0.3);
+        }
+
+        textarea, input[type="text"] {
+            width: 100%;
+            padding: 1.2rem 1.5rem;
+            border: 2px solid rgba(255, 255, 255, 0.2);
+            border-radius: 15px;
+            background: rgba(255, 255, 255, 0.1);
+            backdrop-filter: blur(10px);
+            color: var(--text-light);
+            font-family: 'Vazirmatn', sans-serif;
+            font-size: 1rem;
+            transition: var(--transition);
+            resize: vertical;
+        }
+
+        textarea::placeholder, input[type="text"]::placeholder {
+            color: rgba(255, 255, 255, 0.6);
+        }
+
+        textarea:focus, input[type="text"]:focus {
+            outline: none;
+            border-color: rgba(255, 255, 255, 0.6);
+            background: rgba(255, 255, 255, 0.15);
+            box-shadow: 0 0 25px rgba(255, 255, 255, 0.2);
+            transform: translateY(-2px);
+        }
+
+        textarea {
+            min-height: 120px;
+        }
+
+        /* Speaker Selection Styles */
+        #selected-speaker-display {
+            text-align: center;
+            margin-top: 1rem;
+        }
+
+        #selected-speaker-card {
+            display: inline-flex;
+            align-items: center;
+            background: rgba(255, 255, 255, 0.1);
+            backdrop-filter: blur(15px);
+            border: 2px solid rgba(255, 255, 255, 0.2);
+            border-radius: 20px;
+            padding: 1rem 1.5rem;
+            transition: var(--transition);
             cursor: pointer;
+            position: relative;
+            overflow: hidden;
         }
+
+        #selected-speaker-card::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: -100%;
+            width: 100%;
+            height: 100%;
+            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
+            transition: left 0.6s;
+        }
+
+        #selected-speaker-card:hover::before {
+            left: 100%;
+        }
+
         #selected-speaker-card:hover {
-            transform: translateY(-3px) scale(1.02);
-            box-shadow: var(--shadow-strong);
-        }
-        #selected-speaker-card img { 
-            width: 75px; height: 75px; 
-            border-radius: 50%; 
-            object-fit: cover; 
-            margin-left: 18px; 
-            border: 3px solid var(--accent-secondary); 
-            box-shadow: 0 0 12px -2px rgba(13, 148, 136, 0.5);
-            background-color: #e0e0e0; 
-        }
-        #selected-speaker-info h3 { margin: 0; font-size: 1.35em; font-weight: 700; color: var(--text-primary); }
-        #selected-speaker-info p { margin: 4px 0 0; color: var(--text-secondary); font-size: 0.88em; }
-        
-        #change-speaker-btn { 
-            display: block; margin: 1.2rem auto 0; 
-            padding: 10px 24px; 
-            border-radius: var(--radius-input); 
-            background-color: transparent; 
-            border: 2px solid var(--accent-primary);
-            color: var(--accent-primary);
-            cursor: pointer; 
-            font-family: var(--app-font); font-weight: 600; 
-            transition: all 0.2s ease; 
-        }
-        #change-speaker-btn:hover { 
-            background-color: var(--accent-primary); 
-            color: #fff;
-            transform: translateY(-2px);
-            box-shadow: 0 4px 10px -2px rgba(37, 99, 235, 0.3);
-        }
-
-        /* --- مودال گالری گویندگان --- */
-        #speaker-modal { 
-            position: fixed; top: 0; left: 0; width: 100%; height: 100%; 
-            background-color: rgba(26, 32, 44, 0.5); 
-            backdrop-filter: blur(8px) saturate(150%); 
-            display: none; align-items: center; justify-content: center; 
-            z-index: 1000; opacity: 0; 
-            transition: opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1); 
-        }
-        #speaker-modal.visible { display: flex; opacity: 1; }
-        .modal-content { 
-            background: var(--panel-bg); 
-            padding: 2rem; 
-            border-radius: var(--radius-card); 
-            width: 90%; max-width: 680px; 
-            max-height: 85vh; overflow-y: auto; 
-            transform: scale(0.92) translateY(20px); 
-            transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.35s; 
-            border: 1px solid var(--panel-border);
-            box-shadow: var(--shadow-strong);
+            transform: translateY(-5px) scale(1.02);
+            box-shadow: 0 15px 35px rgba(255, 255, 255, 0.2);
+            border-color: rgba(255, 255, 255, 0.4);
+        }
+
+        #selected-speaker-card img {
+            width: 80px;
+            height: 80px;
+            border-radius: 50%;
+            object-fit: cover;
+            margin-left: 1.5rem;
+            border: 3px solid rgba(255, 255, 255, 0.5);
+            box-shadow: 0 0 20px rgba(255, 255, 255, 0.3);
+            transition: var(--transition);
+        }
+
+        #selected-speaker-card:hover img {
+            transform: scale(1.1);
+            box-shadow: 0 0 30px rgba(255, 255, 255, 0.5);
+        }
+
+        #selected-speaker-info h3 {
+            margin: 0;
+            font-size: 1.4rem;
+            font-weight: 700;
+            color: var(--text-light);
+        }
+
+        #selected-speaker-info p {
+            margin: 0.5rem 0 0;
+            color: rgba(255, 255, 255, 0.8);
+            font-size: 0.9rem;
+        }
+
+        #change-speaker-btn {
+            display: block;
+            margin: 1.5rem auto 0;
+            padding: 0.8rem 2rem;
+            border: 2px solid rgba(255, 255, 255, 0.5);
+            border-radius: 25px;
+            background: transparent;
+            color: var(--text-light);
+            cursor: pointer;
+            font-family: 'Vazirmatn', sans-serif;
+            font-weight: 600;
+            transition: var(--transition);
+            position: relative;
+            overflow: hidden;
+        }
+
+        #change-speaker-btn::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 0;
+            height: 100%;
+            background: rgba(255, 255, 255, 0.2);
+            transition: width 0.3s ease;
+        }
+
+        #change-speaker-btn:hover::before {
+            width: 100%;
+        }
+
+        #change-speaker-btn:hover {
+            transform: translateY(-3px);
+            box-shadow: 0 10px 25px rgba(255, 255, 255, 0.2);
+            border-color: rgba(255, 255, 255, 0.8);
+        }
+
+        /* Modal Styles */
+        #speaker-modal {
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background: rgba(0, 0, 0, 0.8);
+            backdrop-filter: blur(10px);
+            display: none;
+            align-items: center;
+            justify-content: center;
+            z-index: 1000;
             opacity: 0;
+            transition: opacity 0.4s ease;
         }
-        #speaker-modal.visible .modal-content { transform: scale(1) translateY(0); opacity: 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; font-size: 1.6em; color: var(--accent-primary);}
-        .close-modal-btn { background: none; border: none; font-size: 2.4rem; cursor: pointer; color: var(--text-secondary); transition: all 0.2s ease; line-height: 1; }
-        .close-modal-btn:hover { color: var(--accent-primary); transform: rotate(90deg) scale(1.05); }
-        
-        #speaker-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(115px, 1fr)); gap: 1.3rem; }
-        @media (min-width: 576px) { #speaker-grid { grid-template-columns: repeat(4, 1fr); } }
-        .speaker-card { cursor: pointer; transition: all 0.25s ease-out; text-align: center; position: relative;}
-        .speaker-card .speaker-visual { 
-            border: 3px solid transparent; 
-            border-radius: var(--radius-card); 
-            overflow: hidden; 
-            box-shadow: var(--shadow-subtle); 
-            position: relative; 
-            background-color: #fff; 
-            transition: all 0.25s ease-out; 
-        }
-        .speaker-card:hover .speaker-visual { 
-            transform: translateY(-5px) scale(1.03); 
-            box-shadow: var(--shadow-medium); 
-        }
-        .speaker-card input[type="radio"] { display: none; }
-        .speaker-card img { 
-            width: 100%; height: 115px; 
-            object-fit: cover; display: block; 
-            background-color: #e9e9e9; 
-            transition: transform 0.3s ease;
+
+        #speaker-modal.visible {
+            display: flex;
+            opacity: 1;
+        }
+
+        .modal-content {
+            background: rgba(255, 255, 255, 0.15);
+            backdrop-filter: blur(25px);
+            border: 1px solid rgba(255, 255, 255, 0.2);
+            border-radius: 25px;
+            padding: 2.5rem;
+            width: 90%;
+            max-width: 800px;
+            max-height: 85vh;
+            overflow-y: auto;
+            transform: scale(0.9) translateY(50px);
+            transition: transform 0.4s ease, opacity 0.4s ease;
+            opacity: 0;
+        }
+
+        #speaker-modal.visible .modal-content {
+            transform: scale(1) translateY(0);
+            opacity: 1;
         }
-        .speaker-card:hover img { transform: scale(1.05); }
-        .speaker-card .speaker-name { padding: 0.8rem 0.5rem; font-weight: 500; font-size: 0.92em; color: var(--text-secondary); }
-        .speaker-card input[type="radio"]:checked + .speaker-visual { 
-            border-color: var(--accent-secondary); 
-            box-shadow: 0 0 15px -3px rgba(13, 148, 136, 0.6); 
+
+        .modal-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 2rem;
+            padding-bottom: 1rem;
+            border-bottom: 1px solid rgba(255, 255, 255, 0.2);
         }
-        .speaker-card input[type="radio"]:checked + .speaker-visual .speaker-name { 
-            color: var(--accent-secondary); 
-            font-weight: 700; 
+
+        .modal-header h2 {
+            margin: 0;
+            font-size: 1.8rem;
+            color: var(--text-light);
+            font-weight: 700;
         }
 
-        /* --- Slider & Button & Output --- */
-        .slider-container { display: flex; align-items: center; gap: 1.2rem; }
-        input[type="range"] { 
-            flex-grow: 1; -webkit-appearance: none; appearance: none; 
-            width: 100%; height: 8px; 
-            background: #E2E8F0;
-            border-radius: 4px; outline: none; 
+        .close-modal-btn {
+            background: none;
+            border: none;
+            font-size: 2rem;
             cursor: pointer;
-            transition: background 0.2s;
+            color: rgba(255, 255, 255, 0.8);
+            transition: var(--transition);
+            width: 40px;
+            height: 40px;
+            border-radius: 50%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
         }
-        input[type="range"]::-webkit-slider-runnable-track {
-            background: linear-gradient(to right, var(--accent-secondary) 0%, var(--accent-primary) 100%);
-            height: 8px;
-            border-radius: 4px;
-        }
-        input[type="range"]::-webkit-slider-thumb { 
-            -webkit-appearance: none; appearance: none; 
-            width: 22px; height: 22px; 
-            background: #fff; 
-            border-radius: 50%; cursor: pointer; 
-            border: 3px solid var(--accent-primary); 
-            box-shadow: 0 2px 6px rgba(0,0,0,0.15);
-            margin-top: -7px; /* Center thumb on track */
-            transition: transform 0.2s ease, box-shadow 0.2s ease;
-        }
-         input[type="range"]::-webkit-slider-thumb:hover {
+
+        .close-modal-btn:hover {
+            color: var(--text-light);
+            background: rgba(255, 255, 255, 0.1);
+            transform: rotate(90deg);
+        }
+
+        #speaker-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
+            gap: 1.5rem;
+        }
+
+        .speaker-card {
+            cursor: pointer;
+            transition: var(--transition);
+            text-align: center;
+            position: relative;
+        }
+
+        .speaker-card .speaker-visual {
+            border: 3px solid transparent;
+            border-radius: 20px;
+            overflow: hidden;
+            background: rgba(255, 255, 255, 0.1);
+            backdrop-filter: blur(10px);
+            transition: var(--transition);
+            position: relative;
+        }
+
+        .speaker-card:hover .speaker-visual {
+            transform: translateY(-8px) scale(1.05);
+            box-shadow: 0 15px 35px rgba(255, 255, 255, 0.2);
+            border-color: rgba(255, 255, 255, 0.4);
+        }
+
+        .speaker-card input[type="radio"] {
+            display: none;
+        }
+
+        .speaker-card img {
+            width: 100%;
+            height: 140px;
+            object-fit: cover;
+            display: block;
+            transition: transform 0.3s ease;
+        }
+
+        .speaker-card:hover img {
             transform: scale(1.1);
-            box-shadow: 0 3px 8px rgba(37, 99, 235, 0.3);
-        }
-        input[type="range"]::-moz-range-thumb { 
-            width: 22px; height: 22px; 
-            background: #fff; 
-            border-radius: 50%; cursor: pointer; 
-            border: 3px solid var(--accent-primary); 
-            box-shadow: 0 2px 6px rgba(0,0,0,0.15);
-        }
-        /* For Firefox, style the track directly */
-        input[type="range"]::-moz-range-track {
-            background: linear-gradient(to right, var(--accent-secondary) 0%, var(--accent-primary) 100%);
+        }
+
+        .speaker-card .speaker-name {
+            padding: 1rem;
+            font-weight: 600;
+            font-size: 0.95rem;
+            color: var(--text-light);
+        }
+
+        .speaker-card input[type="radio"]:checked + .speaker-visual {
+            border-color: #4facfe;
+            box-shadow: 0 0 25px rgba(79, 172, 254, 0.5);
+            background: rgba(79, 172, 254, 0.2);
+        }
+
+        /* Slider Styles */
+        .slider-container {
+            display: flex;
+            align-items: center;
+            gap: 1.5rem;
+        }
+
+        input[type="range"] {
+            flex-grow: 1;
+            -webkit-appearance: none;
+            width: 100%;
             height: 8px;
-            border-radius: 4px;
-            border: none;
+            background: rgba(255, 255, 255, 0.2);
+            border-radius: 10px;
+            outline: none;
+            cursor: pointer;
+            transition: background 0.3s;
         }
-        #temperature-value { 
-            font-weight: 600; background-color: var(--input-bg); 
-            padding: 0.4rem 1rem; 
-            border-radius: 8px; 
-            border: 1px solid var(--panel-border); 
-            min-width: 45px; text-align: center;
-            color: var(--text-primary);
+
+        input[type="range"]::-webkit-slider-track {
+            background: linear-gradient(90deg, #4facfe 0%, #00f2fe 100%);
+            height: 8px;
+            border-radius: 10px;
+        }
+
+        input[type="range"]::-webkit-slider-thumb {
+            -webkit-appearance: none;
+            width: 24px;
+            height: 24px;
+            background: #fff;
+            border-radius: 50%;
+            cursor: pointer;
+            box-shadow: 0 0 15px rgba(79, 172, 254, 0.5);
+            transition: transform 0.2s ease;
+        }
+
+        input[type="range"]::-webkit-slider-thumb:hover {
+            transform: scale(1.2);
+            box-shadow: 0 0 25px rgba(79, 172, 254, 0.8);
         }
-        
-        #generate-btn { 
-            width: 100%; padding: 1.05rem 1.5rem; 
-            font-size: 1.25em; font-weight: 700; 
-            font-family: var(--app-font); 
-            background: linear-gradient(95deg, var(--accent-secondary) 0%, var(--accent-primary) 100%); 
-            color: #fff; 
-            border: none; 
-            border-radius: var(--radius-input); 
-            cursor: pointer; 
-            transition: all 0.3s ease; 
-            box-shadow: 0 5px 15px -4px rgba(37, 99, 235, 0.4), 0 5px 15px -4px rgba(13, 148, 136, 0.3);
+
+        #temperature-value {
+            font-weight: 600;
+            background: rgba(255, 255, 255, 0.2);
+            color: var(--text-light);
+            padding: 0.5rem 1rem;
+            border-radius: 15px;
+            border: 1px solid rgba(255, 255, 255, 0.3);
+            min-width: 60px;
+            text-align: center;
+            backdrop-filter: blur(10px);
+        }
+
+        /* Generate Button */
+        #generate-btn {
+            width: 100%;
+            padding: 1.5rem 2rem;
+            font-size: 1.3rem;
+            font-weight: 700;
+            font-family: 'Vazirmatn', sans-serif;
+            background: var(--accent-gradient);
+            color: var(--text-light);
+            border: none;
+            border-radius: 20px;
+            cursor: pointer;
+            transition: var(--transition);
             position: relative;
             overflow: hidden;
+            box-shadow: 0 10px 30px rgba(79, 172, 254, 0.4);
+            margin-top: 1rem;
         }
-        #generate-btn::before { /* Shine effect */
-            content: ''; position: absolute;
-            top: 0; left: -150%; width: 70%; height: 100%;
-            background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.4) 50%, rgba(255,255,255,0) 100%);
-            transform: skewX(-25deg);
-            transition: left 0.6s cubic-bezier(0.23, 1, 0.32, 1);
-        }
-        #generate-btn:hover::before { left: 150%; }
-        #generate-btn:hover:not(:disabled) { 
-            transform: translateY(-3px); 
-            box-shadow: 0 8px 20px -4px rgba(37, 99, 235, 0.5), 0 8px 20px -4px rgba(13, 148, 136, 0.4);
-        }
-        #generate-btn:disabled { 
-            background: #A0AEC0; /* Lighter gray for disabled */
-            cursor: not-allowed; box-shadow: none; color: #E2E8F0;
+
+        #generate-btn::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: -100%;
+            width: 100%;
+            height: 100%;
+            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
+            transition: left 0.8s;
+        }
+
+        #generate-btn:hover::before {
+            left: 100%;
+        }
+
+        #generate-btn:hover:not(:disabled) {
+            transform: translateY(-5px);
+            box-shadow: 0 20px 40px rgba(79, 172, 254, 0.6);
+        }
+
+        #generate-btn:disabled {
+            background: rgba(255, 255, 255, 0.2);
+            cursor: not-allowed;
             transform: none;
+            box-shadow: none;
         }
-        #generate-btn:disabled::before { display: none; }
-
-        #output-section { 
-            margin-top: 3rem; 
-            padding: 2.5rem; 
-            background-color: #fff; 
-            border-radius: var(--radius-card); 
-            min-height: 200px; 
-            display: flex; align-items: center; justify-content: center; 
-            flex-direction: column; gap: 1.5rem; 
-            border: 1px dashed var(--panel-border); 
-            transition: all 0.3s ease; 
-            position: relative;
-            box-shadow: var(--shadow-subtle);
+
+        /* Output Section */
+        #output-section {
+            margin-top: 3rem;
+            padding: 3rem;
+            background: rgba(255, 255, 255, 0.1);
+            backdrop-filter: blur(15px);
+            border-radius: 25px;
+            min-height: 250px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            flex-direction: column;
+            gap: 2rem;
+            border: 2px dashed rgba(255, 255, 255, 0.3);
+            transition: var(--transition);
+            animation: slideInUp 1s ease-out 0.6s both;
         }
-        #status-message { font-weight: 500; color: var(--text-secondary); text-align: center; font-size: 1.1em; }
-        #audio-player { width: 100%; margin-top: 1rem; display: none; }
-        #audio-player::-webkit-media-controls-panel { background-color: #f9fafb; border-radius: 8px; }
-        #audio-player::-webkit-media-controls-play-button { color: var(--accent-primary); }
-        #audio-player::-webkit-media-controls-current-time-display, 
-        #audio-player::-webkit-media-controls-time-remaining-display { color: var(--text-secondary); }
 
+        #status-message {
+            font-weight: 500;
+            color: rgba(255, 255, 255, 0.9);
+            text-align: center;
+            font-size: 1.2rem;
+        }
+
+        #audio-player {
+            width: 100%;
+            margin-top: 1rem;
+            display: none;
+            border-radius: 15px;
+            background: rgba(255, 255, 255, 0.1);
+        }
 
-        /* --- انیمیشن پردازش جدید: ذرات هوشمند --- */
+        /* Enhanced Loading Animation */
         #loading-animation-wrapper {
-            display: none; /* Hidden by default */
+            display: none;
             flex-direction: column;
             align-items: center;
             justify-content: center;
             gap: 2rem;
             width: 100%;
-            min-height: 150px;
-            perspective: 800px; /* For 3D effect on particles if desired */
+            min-height: 200px;
         }
 
-        .smart-particles-loader {
-            width: 100px;
-            height: 100px;
+        .neural-network-loader {
+            width: 120px;
+            height: 120px;
             position: relative;
-            animation: rotate-loader 10s linear infinite;
+            animation: rotate-network 8s linear infinite;
         }
-        
-        .particle {
+
+        .neural-node {
             position: absolute;
-            width: 10px;
-            height: 10px;
+            width: 12px;
+            height: 12px;
             border-radius: 50%;
-            background-color: var(--accent-primary);
-            box-shadow: 0 0 8px var(--accent-primary), 0 0 12px var(--accent-secondary);
-            opacity: 0;
-            animation: particle-orbit 2.5s ease-in-out infinite, 
-                       particle-fade 2.5s ease-in-out infinite;
+            background: #4facfe;
+            box-shadow: 0 0 15px #4facfe, 0 0 30px #00f2fe;
+            animation: node-pulse 2s ease-in-out infinite;
         }
 
-        .particle:nth-child(1) { top: 0; left: 50%; transform: translateX(-50%); animation-delay: 0s; }
-        .particle:nth-child(2) { top: 15%; left: 85%; transform: translate(-50%, -50%); animation-delay: -0.3s; background-color: var(--accent-secondary);}
-        .particle:nth-child(3) { top: 50%; left: 100%; transform: translateY(-50%); animation-delay: -0.6s; }
-        .particle:nth-child(4) { top: 85%; left: 85%; transform: translate(-50%, -50%); animation-delay: -0.9s; background-color: var(--accent-secondary);}
-        .particle:nth-child(5) { top: 100%; left: 50%; transform: translateX(-50%); animation-delay: -1.2s; }
-        .particle:nth-child(6) { top: 85%; left: 15%; transform: translate(-50%, -50%); animation-delay: -1.5s; background-color: var(--accent-secondary);}
-        .particle:nth-child(7) { top: 50%; left: 0; transform: translateY(-50%); animation-delay: -1.8s; }
-        .particle:nth-child(8) { top: 15%; left: 15%; transform: translate(-50%, -50%); animation-delay: -2.1s; background-color: var(--accent-secondary);}
+        .neural-node:nth-child(1) { top: 0; left: 50%; transform: translateX(-50%); animation-delay: 0s; }
+        .neural-node:nth-child(2) { top: 15%; right: 15%; animation-delay: -0.25s; background: #00f2fe; }
+        .neural-node:nth-child(3) { top: 50%; right: 0; transform: translateY(-50%); animation-delay: -0.5s; }
+        .neural-node:nth-child(4) { bottom: 15%; right: 15%; animation-delay: -0.75s; background: #00f2fe; }
+        .neural-node:nth-child(5) { bottom: 0; left: 50%; transform: translateX(-50%); animation-delay: -1s; }
+        .neural-node:nth-child(6) { bottom: 15%; left: 15%; animation-delay: -1.25s; background: #00f2fe; }
+        .neural-node:nth-child(7) { top: 50%; left: 0; transform: translateY(-50%); animation-delay: -1.5s; }
+        .neural-node:nth-child(8) { top: 15%; left: 15%; animation-delay: -1.75s; background: #00f2fe; }
 
+        .neural-connection {
+            position: absolute;
+            height: 1px;
+            background: linear-gradient(90deg, transparent, #4facfe, transparent);
+            transform-origin: left center;
+            animation: connection-flow 3s ease-in-out infinite;
+        }
 
-        @keyframes rotate-loader {
+        @keyframes rotate-network {
             from { transform: rotate(0deg); }
             to { transform: rotate(360deg); }
         }
 
-        @keyframes particle-orbit {
-            0%, 100% { transform: scale(0.5); }
-            50% { transform: scale(1.2); }
+        @keyframes node-pulse {
+            0%, 100% { transform: scale(0.8); opacity: 0.6; }
+            50% { transform: scale(1.4); opacity: 1; }
         }
-        @keyframes particle-fade {
+
+        @keyframes connection-flow {
             0%, 100% { opacity: 0; }
-            20%, 80% { opacity: 1; }
+            50% { opacity: 0.8; }
         }
 
-        #loading-text { 
-            font-size: 1.2em; 
-            font-weight: 600; 
-            color: var(--text-primary); 
+        #loading-text {
+            font-size: 1.3rem;
+            font-weight: 600;
+            color: var(--text-light);
             text-align: center;
+            animation: text-glow 2s ease-in-out infinite alternate;
+        }
+
+        @keyframes text-glow {
+            from { text-shadow: 0 0 10px rgba(255, 255, 255, 0.5); }
+            to { text-shadow: 0 0 20px rgba(255, 255, 255, 0.8); }
         }
 
+        /* Responsive Design */
+        @media (max-width: 768px) {
+            .container {
+                padding: 1rem;
+            }
+
+            .app-header h1 {
+                font-size: 2.5rem;
+            }
+
+            .main-content {
+                padding: 2rem;
+            }
+
+            #speaker-grid {
+                grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
+                gap: 1rem;
+            }
+        }
     </style>
 </head>
 <body>
+    <div class="floating-shapes">
+        <div class="shape"></div>
+        <div class="shape"></div>
+        <div class="shape"></div>
+    </div>
+
     <div class="container">
         <header class="app-header">
             <h1>آلفا TTS Nova</h1>
@@ -398,6 +715,7 @@
                     <label for="text-input">📝 متن مورد نظر شما</label>
                     <textarea id="text-input" rows="4" placeholder="متن خود را اینجا وارد کنید...">سلام دنیا! این یک نمونه متن برای آزمایش نسل جدید تبدیل متن به صدا آلفا نوا است. امیدوارم از کیفیت آن لذت ببرید.</textarea>
                 </div>
+                
                 <div class="form-group">
                     <label for="prompt-input">🗣️ سبک و لحن گفتار (اختیاری)</label>
                     <input type="text" id="prompt-input" value="با صدایی شفاف، دوستانه و پرانرژی." placeholder="مثال: با لحنی رسمی و موقر، یا شاد و کودکانه">
@@ -431,11 +749,15 @@
             <div id="output-section">
                 <div id="status-message">صدای تولید شده در اینجا نمایش داده خواهد شد.</div>
                 <div id="loading-animation-wrapper">
-                    <div class="smart-particles-loader">
-                        <div class="particle"></div> <div class="particle"></div>
-                        <div class="particle"></div> <div class="particle"></div>
-                        <div class="particle"></div> <div class="particle"></div>
-                        <div class="particle"></div> <div class="particle"></div>
+                    <div class="neural-network-loader">
+                        <div class="neural-node"></div>
+                        <div class="neural-node"></div>
+                        <div class="neural-node"></div>
+                        <div class="neural-node"></div>
+                        <div class="neural-node"></div>
+                        <div class="neural-node"></div>
+                        <div class="neural-node"></div>
+                        <div class="neural-node"></div>
                     </div>
                     <p id="loading-text">در حال پردازش هوشمند و تولید صدا...</p>
                 </div>
@@ -459,209 +781,4 @@
     <script>
         document.addEventListener('DOMContentLoaded', () => {
             const HF_SPACE_URL = "https://hamed744-ttspro.hf.space";
-            const JOIN_QUEUE_URL = `${HF_SPACE_URL}/gradio_api/queue/join`;
-            const GET_DATA_URL_BASE = `${HF_SPACE_URL}/gradio_api/queue/data`;
-            const FILE_URL_BASE = `${HF_SPACE_URL}/gradio_api/file=`;
-            const FN_INDEX = 1;
-
-            const speakers = [
-                { id: "Charon", name: "شهاب (مرد)" }, { id: "Zephyr", name: "آوا (زن)" }, { id: "Achird", name: "نوید (مرد)" }, { id: "Zubenelgenubi", name: "رویا (زن)" }, { id: "Vindemiatrix", name: "کیان (مرد)" }, { id: "Sadachbia", name: "پریسا (زن)" }, { id: "Sadaltager", name: "آرش (مرد)" }, { id: "Sulafat", name: "شبنم (زن)" }, { id: "Laomedeia", name: "سهیل (مرد)" }, { id: "Achernar", name: "مریم (زن)" }, { id: "Alnilam", name: "بهرام (مرد)" }, { id: "Schedar", name: "نگار (زن)" }, { id: "Gacrux", name: "فرید (مرد)" }, { id: "Pulcherrima", name: "سارا (زن)" }, { id: "Umbriel", name: "مانی (مرد)" }, { id: "Algieba", name: "آناهیتا (زن)" }, { id: "Despina", name: "دلنواز (زن)" }, { id: "Erinome", name: "رسا (مرد)" }, { id: "Algenib", name: "امید (مرد)" }, { id: "Rasalthgeti", name: "الهه (زن)" }, { id: "Orus", name: "بردیا (مرد)" }, { id: "Aoede", name: "ترانه (زن)" }, { id: "Callirrhoe", name: "نیما (مرد)" }, { id: "Autonoe", name: "هستی (زن)" }, { id: "Enceladus", name: "کامیار (مرد)" }, { id: "Iapetus", name: "ستاره (زن)" }, { id: "Puck", name: "پویا (مرد)" }, { id: "Kore", name: "مهتاب (زن)" }, { id: "Fenrir", name: "سام (مرد)" }, { id: "Leda", name: "لیدا (زن)" }
-            ];
-            
-            const form = document.getElementById('tts-form');
-            const textInput = document.getElementById('text-input');
-            const promptInput = document.getElementById('prompt-input');
-            const tempSlider = document.getElementById('temperature-slider');
-            const tempValueSpan = document.getElementById('temperature-value');
-            const generateBtn = document.getElementById('generate-btn');
-            
-            const statusMessage = document.getElementById('status-message');
-            const audioPlayer = document.getElementById('audio-player');
-            const loadingAnimationWrapper = document.getElementById('loading-animation-wrapper');
-            
-            const selectedSpeakerIdStorage = document.getElementById('selected_speaker_id_storage');
-            const speakerModal = document.getElementById('speaker-modal');
-            const changeSpeakerBtn = document.getElementById('change-speaker-btn');
-            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');
-            const selectedSpeakerCard = document.getElementById('selected-speaker-card');
-            const selectedSpeakerInfoP = selectedSpeakerCard.querySelector('#selected-speaker-info p');
-
-            function getSpeakerById(id) {
-                return speakers.find(s => s.id === id);
-            }
-            
-            function getImageUrl(speaker, index, size = 'medium') {
-                const gender = speaker.name.includes('(مرد)') ? 'men' : (speaker.name.includes('(زن)') ? 'women' : 'lego');
-                const imageIndex = (index * 13 + 7) % 100; 
-                let portraitSizePath = 'thumb/'; 
-                if (size === 'large') portraitSizePath = ''; 
-                
-                return `https://randomuser.me/api/portraits/${portraitSizePath}${gender}/${imageIndex}.jpg`;
-            }
-
-            function updateSelectedSpeakerDisplay(speakerId) {
-                const speaker = getSpeakerById(speakerId);
-                if (speaker) {
-                    const speakerIndex = speakers.findIndex(s => s.id === speakerId);
-                    selectedSpeakerImgDisplay.src = getImageUrl(speaker, speakerIndex, 'large');
-                    selectedSpeakerImgDisplay.alt = `عکس گوینده ${speaker.name}`;
-                    selectedSpeakerNameDisplay.textContent = speaker.name;
-                    selectedSpeakerInfoP.textContent = "گوینده منتخب شما";
-                    selectedSpeakerIdStorage.value = speaker.id;
-                }
-            }
-
-            function createSpeakerCardsInModal() {
-                speakerGridInModal.innerHTML = '';
-                speakers.forEach((speaker, index) => {
-                    const card = document.createElement('label');
-                    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}>
-                        <div class="speaker-visual">
-                            <img src="${getImageUrl(speaker, index, 'thumb')}" alt="${speaker.name}" loading="lazy">
-                            <div class="speaker-name">${speaker.name}</div>
-                        </div>
-                    `;
-                    
-                    card.addEventListener('click', () => {
-                        updateSelectedSpeakerDisplay(speaker.id);
-                        setTimeout(() => speakerModal.classList.remove('visible'), 250);
-                    });
-                    
-                    speakerGridInModal.appendChild(card);
-                });
-            }
-            
-            function openSpeakerModal() {
-                createSpeakerCardsInModal();
-                speakerModal.classList.add('visible');
-            }
-
-            changeSpeakerBtn.addEventListener('click', openSpeakerModal);
-            selectedSpeakerCard.addEventListener('click', openSpeakerModal); // Allow clicking on card too
-
-            closeModalBtn.addEventListener('click', () => speakerModal.classList.remove('visible'));
-            speakerModal.addEventListener('click', (e) => {
-                if (e.target === speakerModal) { 
-                    speakerModal.classList.remove('visible');
-                }
-            });
-
-            tempSlider.addEventListener('input', () => { tempValueSpan.textContent = tempSlider.value; });
-
-            function showLoadingState() {
-                statusMessage.style.display = 'none';
-                audioPlayer.style.display = 'none';
-                audioPlayer.src = '';
-                loadingAnimationWrapper.style.display = 'flex';
-                generateBtn.disabled = true;
-                generateBtn.textContent = 'در حال پردازش...';
-            }
-
-            function showResultState(isSuccess, message = '') {
-                loadingAnimationWrapper.style.display = 'none';
-                if (isSuccess) {
-                    statusMessage.style.display = 'none';
-                    audioPlayer.style.display = 'block';
-                    // Consider if autoplay is desired: audioPlayer.play();
-                } else {
-                    statusMessage.textContent = message || 'خطایی رخ داد. لطفاً دوباره تلاش کنید.';
-                    statusMessage.style.display = 'block';
-                    audioPlayer.style.display = 'none';
-                }
-                generateBtn.disabled = false;
-                generateBtn.textContent = '🚀 تولید صدا با آلفا نوا';
-            }
-
-            async function generateAudio(event) {
-                event.preventDefault();
-                showLoadingState();
-
-                const text = textInput.value;
-                if (!text.trim()) {
-                    showResultState(false, 'خطا: متن ورودی نمی‌تواند خالی باشد.');
-                    return;
-                }
-                
-                const promptVal = promptInput.value;
-                const temperatureVal = parseFloat(tempSlider.value);
-                const selectedSpeakerVal = selectedSpeakerIdStorage.value;
-                const sessionHash = Math.random().toString(36).substring(2);
-
-                const payload = {
-                    fn_index: FN_INDEX,
-                    data: [false, null, text, promptVal, selectedSpeakerVal, temperatureVal],
-                    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) {
-                         const errorBody = await joinQueueResponse.text();
-                         throw new Error(`خطا در ارتباط با سرویس آلفا (${joinQueueResponse.status}).`);
-                    }
-                    
-                    const dataResponse = await fetch(`${GET_DATA_URL_BASE}?session_hash=${sessionHash}`);
-                    const reader = dataResponse.body.getReader();
-                    const decoder = new TextDecoder();
-                    let finalFilePath = null;
-                    let buffer = '';
-
-                    while (true) {
-                        const { value, done } = await reader.read();
-                        if (done) break;
-                        buffer += decoder.decode(value, { stream: true });
-                        const lines = buffer.split('\n');
-                        buffer = lines.pop(); 
-                        for (const line of lines) {
-                            if (!line.startsWith('data:')) continue;
-                            try {
-                                const data = JSON.parse(line.substring(5));
-                                if (data.msg === 'process_completed') {
-                                    if (data.success && data.output.data && data.output.data[0] && (data.output.data[0].name || data.output.data[0].path)) {
-                                        finalFilePath = data.output.data[0].name || data.output.data[0].path;
-                                    } else { console.error("ساختار داده پاسخ سرور معتبر نیست:", data); }
-                                    break; 
-                                }
-                            } catch (e) { /* Ignore JSON parse errors */ }
-                        }
-                        if (finalFilePath) break; 
-                    }
-                    
-                    if (finalFilePath) {
-                        const audioUrl = `${FILE_URL_BASE}${finalFilePath}`;
-                        audioPlayer.src = audioUrl;
-                        showResultState(true);
-                    } else {
-                        throw new Error('فایل صوتی از سرور دریافت نشد. پردازش ممکن است ناموفق بوده باشد.');
-                    }
-
-                } catch (error) {
-                    console.error('خطا در فرآیند تولید صدا:', error);
-                    showResultState(false, `خطا: ${error.message}`);
-                }
-            }
-            
-            updateSelectedSpeakerDisplay(selectedSpeakerIdStorage.value);
-            form.addEventListener('submit', generateAudio);
-
-            statusMessage.style.display = 'block';
-            loadingAnimationWrapper.style.display = 'none';
-            audioPlayer.style.display = 'none';
-        });
-    </script>
-</body>
-</html>
+            const JOIN_QUEUE_