Update index.html

index.html

@@ -9,21 +9,27 @@
 
         :root {
             --app-font: 'Vazirmatn', sans-serif;
-            --app-header-grad-start: #1e3a8a;
-            --app-header-grad-end: #3b82f6;
-            --app-panel-bg: #FFFFFF;
-            --app-input-bg: #f7f8fc;
-            --app-button-bg: #6D28D9;
-            --app-button-hover-bg: #5B21B6;
-            --app-main-bg: #f0f4f9;
-            --app-text-primary: #1f2937;
-            --app-text-secondary: #6b7280;
-            --app-border-color: #e5e7eb;
+            --app-header-grad-start: #667eea;
+            --app-header-grad-end: #764ba2;
+            --app-panel-bg: rgba(255, 255, 255, 0.95);
+            --app-input-bg: rgba(248, 249, 250, 0.8);
+            --app-button-bg: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            --app-button-hover-bg: linear-gradient(135deg, #5a6fd8 0%, #654396 100%);
+            --app-main-bg: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            --app-text-primary: #2c3e50;
+            --app-text-secondary: #6c757d;
+            --app-border-color: rgba(224, 224, 224, 0.5);
             --radius-card: 24px;
-            --radius-input: 12px;
-            --shadow-card: 0 10px 30px -5px rgba(30, 58, 138, 0.1);
-            --shadow-button: 0 4px 15px -2px rgba(109, 40, 217, 0.4);
-            --speaker-selected-glow: 0 0 20px rgba(109, 40, 217, 0.4);
+            --radius-input: 16px;
+            --shadow-card: 0 20px 40px -10px rgba(0,0,0,0.15);
+            --shadow-button: 0 8px 25px -5px rgba(102, 126, 234, 0.4);
+            --speaker-selected-glow: 0 0 20px rgba(102, 126, 234, 0.6);
+            --animation-primary: #667eea;
+            --animation-secondary: #764ba2;
+        }
+
+        * {
+            box-sizing: border-box;
         }
 
         body {
@@ -32,101 +38,653 @@
             background: var(--app-main-bg);
             color: var(--app-text-primary);
             font-size: 16px;
-            line-height: 1.7;
+            line-height: 1.65;
             margin: 0;
             padding: 0;
             min-height: 100vh;
             -webkit-font-smoothing: antialiased;
             -moz-osx-font-smoothing: grayscale;
+            overflow-x: hidden;
+        }
+
+        /* Animated Background */
+        body::before {
+            content: '';
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            z-index: -2;
+        }
+
+        body::after {
+            content: '';
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background-image: 
+                radial-gradient(circle at 20% 50%, rgba(255, 255, 255, 0.1) 0%, transparent 50%),
+                radial-gradient(circle at 80% 20%, rgba(255, 255, 255, 0.1) 0%, transparent 50%),
+                radial-gradient(circle at 40% 80%, rgba(255, 255, 255, 0.1) 0%, transparent 50%);
+            animation: float 20s ease-in-out infinite;
+            z-index: -1;
+        }
+
+        @keyframes float {
+            0%, 100% { transform: translateY(0px) rotate(0deg); }
+            50% { transform: translateY(-20px) rotate(10deg); }
+        }
+
+        .container { 
+            max-width: 900px; 
+            width: 95%; 
+            margin: 0 auto; 
+            padding-bottom: 40px; 
+        }
+
+        .app-header { 
+            padding: 4rem 2rem 6rem 2rem; 
+            text-align: center; 
+            color: white; 
+            position: relative;
+            overflow: hidden;
+        }
+
+        .app-header::before {
+            content: '';
+            position: absolute;
+            top: -50%;
+            left: -50%;
+            width: 200%;
+            height: 200%;
+            background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
+            animation: rotate 30s linear infinite;
+        }
+
+        @keyframes rotate {
+            from { transform: rotate(0deg); }
+            to { transform: rotate(360deg); }
+        }
+
+        .app-header h1 { 
+            font-size: 3.5em; 
+            font-weight: 800; 
+            margin: 0 0 1rem 0; 
+            text-shadow: 0 4px 8px rgba(0,0,0,0.3);
+            position: relative;
+            z-index: 1;
+            background: linear-gradient(45deg, #fff, #f8f9ff);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+        }
+
+        .app-header p { 
+            font-size: 1.4em; 
+            color: rgba(255,255,255,0.95); 
+            margin-top: 0; 
+            position: relative;
+            z-index: 1;
+            text-shadow: 0 2px 4px rgba(0,0,0,0.2);
+        }
+
+        .main-content { 
+            padding: 3rem; 
+            margin: -4rem auto 2rem auto; 
+            background: var(--app-panel-bg);
+            backdrop-filter: blur(20px);
+            border-radius: var(--radius-card); 
+            box-shadow: var(--shadow-card);
+            border: 1px solid rgba(255, 255, 255, 0.2);
+            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.8), transparent);
+        }
+
+        .form-group { 
+            margin-bottom: 3rem; 
+            position: relative;
+        }
+
+        label { 
+            display: block; 
+            font-weight: 700; 
+            color: var(--app-text-primary); 
+            font-size: 1.2em; 
+            margin-bottom: 1rem;
+            position: relative;
+            padding-right: 2rem;
+        }
+
+        label::before {
+            content: attr(data-icon);
+            position: absolute;
+            right: 0;
+            top: 0;
+            font-size: 1.2em;
+        }
+
+        textarea, input[type="text"] { 
+            width: 100%; 
+            padding: 1.5rem; 
+            border-radius: var(--radius-input); 
+            border: 2px solid var(--app-border-color); 
+            background: var(--app-input-bg);
+            backdrop-filter: blur(10px);
+            box-shadow: inset 0 2px 4px rgba(0,0,0,0.1);
+            font-family: var(--app-font); 
+            font-size: 1.1rem; 
+            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+            resize: vertical;
+        }
+
+        textarea:focus, input[type="text"]:focus { 
+            outline: none; 
+            border-color: var(--animation-primary);
+            box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.2);
+            background: rgba(255, 255, 255, 0.9);
+            transform: translateY(-2px);
+        }
+
+        /* Speaker Selection Styles */
+        #selected-speaker-display { 
+            text-align: center; 
+        }
+
+        #selected-speaker-card { 
+            display: inline-flex; 
+            align-items: center; 
+            background: rgba(255, 255, 255, 0.9);
+            backdrop-filter: blur(20px);
+            border-radius: 50px; 
+            padding: 15px; 
+            box-shadow: 0 10px 30px rgba(0,0,0,0.15);
+            border: 2px solid rgba(255, 255, 255, 0.3);
+            transition: all 0.3s ease;
+        }
+
+        #selected-speaker-card:hover {
+            transform: translateY(-3px);
+            box-shadow: 0 15px 40px rgba(0,0,0,0.2);
+        }
+
+        #selected-speaker-card img { 
+            width: 90px; 
+            height: 90px; 
+            border-radius: 50%; 
+            object-fit: cover; 
+            margin-left: 20px; 
+            border: 3px solid rgba(255, 255, 255, 0.8);
+            box-shadow: 0 4px 15px rgba(0,0,0,0.2);
+        }
+
+        #selected-speaker-info h3 { 
+            margin: 0; 
+            font-size: 1.5em; 
+            font-weight: 700;
+        }
+
+        #selected-speaker-info p { 
+            margin: 8px 0 0; 
+            color: var(--app-text-secondary); 
+            font-size: 1rem; 
+        }
+
+        #change-speaker-btn { 
+            display: block; 
+            margin: 1.5rem auto 0; 
+            padding: 12px 30px; 
+            border-radius: 25px; 
+            background: linear-gradient(135deg, rgba(102, 126, 234, 0.1), rgba(118, 75, 162, 0.1));
+            border: 2px solid rgba(102, 126, 234, 0.3);
+            cursor: pointer; 
+            font-family: var(--app-font); 
+            font-weight: 600;
+            font-size: 1rem;
+            transition: all 0.3s ease;
+            backdrop-filter: blur(10px);
+        }
+
+        #change-speaker-btn:hover { 
+            background: linear-gradient(135deg, rgba(102, 126, 234, 0.2), rgba(118, 75, 162, 0.2));
+            border-color: var(--animation-primary);
+            transform: translateY(-2px);
+        }
+
+        /* Modal Styles */
+        #speaker-modal { 
+            position: fixed; 
+            top: 0; 
+            left: 0; 
+            width: 100%; 
+            height: 100%; 
+            background: rgba(0,0,0,0.7);
+            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 { 
+            display: flex; 
+            opacity: 1; 
+        }
+
+        .modal-content { 
+            background: rgba(255, 255, 255, 0.95);
+            backdrop-filter: blur(20px);
+            padding: 2.5rem; 
+            border-radius: var(--radius-card); 
+            width: 90%; 
+            max-width: 800px; 
+            max-height: 85vh; 
+            overflow-y: auto; 
+            transform: scale(0.9);
+            transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+            border: 1px solid rgba(255, 255, 255, 0.3);
+        }
+
+        #speaker-modal.visible .modal-content { 
+            transform: scale(1); 
+        }
+
+        .modal-header { 
+            display: flex; 
+            justify-content: space-between; 
+            align-items: center; 
+            margin-bottom: 2rem;
+            padding-bottom: 1rem;
+            border-bottom: 2px solid rgba(102, 126, 234, 0.2);
+        }
+
+        .modal-header h2 { 
+            margin: 0; 
+            font-size: 1.8em;
+            font-weight: 700;
+            color: var(--animation-primary);
+        }
+
+        .close-modal-btn { 
+            background: none; 
+            border: none; 
+            font-size: 2.5rem; 
+            cursor: pointer; 
+            color: #999;
+            transition: all 0.3s ease;
+            width: 50px;
+            height: 50px;
+            border-radius: 50%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
+
+        .close-modal-btn:hover { 
+            color: #333;
+            background: rgba(255, 0, 0, 0.1);
+            transform: rotate(90deg);
+        }
+        
+        #speaker-grid { 
+            display: grid; 
+            grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); 
+            gap: 1.5rem; 
+        }
+
+        @media (min-width: 576px) { 
+            #speaker-grid { 
+                grid-template-columns: repeat(4, 1fr); 
+            } 
+        }
+
+        .speaker-card { 
+            cursor: pointer; 
+            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+        }
+
+        .speaker-card .speaker-visual { 
+            border: 3px solid transparent; 
+            border-radius: var(--radius-card); 
+            overflow: hidden; 
+            text-align: center; 
+            box-shadow: 0 8px 25px rgba(0,0,0,0.15);
+            position: relative; 
+            background: rgba(255, 255, 255, 0.9);
+            backdrop-filter: blur(10px);
+        }
+
+        .speaker-card:hover .speaker-visual { 
+            transform: translateY(-8px) scale(1.02);
+            box-shadow: 0 15px 40px rgba(0,0,0,0.25);
+        }
+
+        .speaker-card input[type="radio"] { 
+            display: none; 
+        }
+
+        .speaker-card img { 
+            width: 100%; 
+            height: 140px; 
+            object-fit: cover; 
+            display: block;
+            transition: all 0.3s ease;
+        }
+
+        .speaker-card:hover img {
+            transform: scale(1.1);
+        }
+
+        .speaker-card .speaker-name { 
+            padding: 1rem 0.8rem; 
+            font-weight: 600; 
+            font-size: 1rem;
+            background: rgba(255, 255, 255, 0.9);
+        }
+
+        .speaker-card input[type="radio"]:checked + .speaker-visual { 
+            border-color: var(--animation-primary);
+            box-shadow: var(--speaker-selected-glow);
+            transform: scale(1.05);
+        }
+
+        /* Slider Styles */
+        .slider-container { 
+            display: flex; 
+            align-items: center; 
+            gap: 1.5rem;
+            background: rgba(255, 255, 255, 0.5);
+            padding: 1rem;
+            border-radius: var(--radius-input);
+            backdrop-filter: blur(10px);
+        }
+
+        input[type="range"] { 
+            flex-grow: 1; 
+            cursor: pointer;
+            height: 8px;
+            border-radius: 4px;
+            background: linear-gradient(90deg, var(--animation-primary), var(--animation-secondary));
+            outline: none;
+            -webkit-appearance: none;
+        }
+
+        input[type="range"]::-webkit-slider-thumb {
+            -webkit-appearance: none;
+            width: 24px;
+            height: 24px;
+            border-radius: 50%;
+            background: white;
+            box-shadow: 0 4px 12px rgba(0,0,0,0.3);
+            cursor: pointer;
+            border: 3px solid var(--animation-primary);
+            transition: all 0.3s ease;
+        }
+
+        input[type="range"]::-webkit-slider-thumb:hover {
+            transform: scale(1.2);
+        }
+
+        #temperature-value { 
+            font-weight: 700; 
+            background: rgba(255, 255, 255, 0.8);
+            padding: 0.5rem 1rem; 
+            border-radius: 12px; 
+            border: 2px solid rgba(102, 126, 234, 0.3);
+            min-width: 60px; 
+            text-align: center;
+            font-size: 1.1rem;
+            color: var(--animation-primary);
+        }
+
+        /* Button Styles */
+        #generate-btn { 
+            width: 100%; 
+            padding: 1.5rem 2rem; 
+            font-size: 1.3em; 
+            font-weight: 700; 
+            font-family: var(--app-font); 
+            background: var(--app-button-bg);
+            color: white; 
+            border: none; 
+            border-radius: var(--radius-input); 
+            cursor: pointer; 
+            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+            box-shadow: var(--shadow-button);
+            position: relative;
+            overflow: hidden;
+        }
+
+        #generate-btn::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: -100%;
+            width: 100%;
+            height: 100%;
+            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
+            transition: left 0.5s;
+        }
+
+        #generate-btn:hover::before {
+            left: 100%;
+        }
+
+        #generate-btn:hover:not(:disabled) { 
+            background: var(--app-button-hover-bg);
+            transform: translateY(-3px);
+            box-shadow: 0 12px 35px -5px rgba(102, 126, 234, 0.6);
         }
 
-        .container { max-width: 800px; width: 95%; margin: 0 auto; padding-bottom: 40px; }
-        .app-header { padding: 3rem 1.5rem 6rem 1.5rem; text-align: center; background-image: linear-gradient(135deg, var(--app-header-grad-start) 0%, var(--app-header-grad-end) 100%); color: white; border-bottom-left-radius: var(--radius-card); border-bottom-right-radius: var(--radius-card); box-shadow: 0 6px 20px -5px rgba(30, 58, 138, 0.25); }
-        .app-header h1 { font-size: 3em; font-weight: 800; margin:0 0 0.5rem 0; text-shadow: 0 2px 5px rgba(0,0,0,0.2); }
-        .app-header p { font-size: 1.25em; color: rgba(255,255,255,0.9); margin-top:0; opacity: 0.95; }
-        .main-content { padding: 2.5rem; margin: -4.5rem auto 2rem auto; background-color: var(--app-panel-bg); border-radius: var(--radius-card); box-shadow: var(--shadow-card); }
-        .form-group { margin-bottom: 2.5rem; }
-        label { display: block; font-weight: 700; color: var(--app-text-primary); font-size: 1.1em; margin-bottom: 1rem; }
-        textarea, input[type="text"] { width: 100%; padding: 1rem; border-radius: var(--radius-input); border: 2px solid var(--app-border-color); background-color: var(--app-input-bg); box-shadow: none; 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(--app-button-bg); box-shadow: 0 0 0 4px rgba(109, 40, 217, 0.15); background-color: #fff; }
-
-        /* --- نمایش گوینده منتخب --- */
-        #selected-speaker-display { text-align: center; }
-        #selected-speaker-card { display: inline-flex; align-items: center; background: linear-gradient(145deg, #ffffff, #f7f8fc); border-radius: 99px; padding: 10px; box-shadow: 0 5px 20px rgba(0,0,0,0.07); border: 1px solid var(--app-border-color); }
-        #selected-speaker-card img { width: 80px; height: 80px; border-radius: 50%; object-fit: cover; margin-left: 20px; border: 3px solid #fff; box-shadow: 0 2px 8px rgba(0,0,0,0.1); background-color: #eee; }
-        #selected-speaker-info h3 { margin: 0; font-size: 1.5em; font-weight: 700; }
-        #selected-speaker-info p { margin: 5px 0 0; color: var(--app-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: var(--app-input-bg); border: 1px solid var(--app-border-color); cursor: pointer; font-family: var(--app-font); font-weight: 500; transition: all 0.2s ease; }
-        #change-speaker-btn:hover { background-color: #e9ecef; border-color: #ced4da; transform: translateY(-1px); }
-
-        /* --- مودال گالری گویندگان --- */
-        #speaker-modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(17, 24, 39, 0.6); backdrop-filter: blur(8px); 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: #fff; 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; }
-        #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(--app-border-color); }
-        .modal-header h2 { margin: 0; }
-        .close-modal-btn { background: none; border: none; font-size: 2.2rem; cursor: pointer; color: #9ca3af; transition: color 0.2s ease, transform 0.2s ease; line-height: 1; }
-        .close-modal-btn:hover { color: var(--app-text-primary); transform: rotate(90deg); }
-        #speaker-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 1.5rem; }
-        @media (min-width: 576px) { #speaker-grid { grid-template-columns: repeat(4, 1fr); } }
-        .speaker-card { cursor: pointer; transition: all 0.3s ease; text-align: center; }
-        .speaker-card .speaker-visual { border: 4px solid transparent; border-radius: var(--radius-card); overflow: hidden; box-shadow: 0 4px 10px rgba(0,0,0,0.05); position: relative; background-color: #fff; transition: all 0.3s ease; }
-        .speaker-card:hover .speaker-visual { transform: translateY(-5px); box-shadow: 0 8px 20px rgba(0,0,0,0.1); }
-        .speaker-card input[type="radio"] { display: none; }
-        .speaker-card img { width: 100%; height: 120px; object-fit: cover; display: block; background-color: #eee; }
-        .speaker-card .speaker-name { padding: 0.8rem 0.5rem; font-weight: 500; font-size: 0.95em; color: var(--app-text-secondary); transition: color 0.2s; }
-        .speaker-card:hover .speaker-name { color: var(--app-text-primary); }
-        .speaker-card input[type="radio"]:checked + .speaker-visual { border-color: var(--app-button-bg); box-shadow: var(--speaker-selected-glow); }
-        .speaker-card input[type="radio"]:checked + .speaker-visual .speaker-name { color: var(--app-button-bg); 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: 8px; background: #e5e7eb; border-radius: 5px; outline: none; transition: background 0.2s; }
-        input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 24px; height: 24px; background: var(--app-button-bg); border-radius: 50%; cursor: pointer; border: 4px solid #fff; box-shadow: 0 0 5px rgba(0,0,0,0.2); }
-        input[type="range"]::-moz-range-thumb { width: 24px; height: 24px; background: var(--app-button-bg); border-radius: 50%; cursor: pointer; border: 4px solid #fff; box-shadow: 0 0 5px rgba(0,0,0,0.2); }
-        #temperature-value { font-weight: 700; background-color: var(--app-input-bg); padding: 0.4rem 1rem; border-radius: 8px; border: 1px solid var(--app-border-color); 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(--app-button-bg); color: white; border: none; border-radius: var(--radius-input); cursor: pointer; transition: all 0.3s ease; box-shadow: var(--shadow-button); }
-        #generate-btn:hover:not(:disabled) { background-color: var(--app-button-hover-bg); transform: translateY(-3px); box-shadow: 0 6px 20px -3px rgba(109, 40, 217, 0.5); }
-        #generate-btn:disabled { background-color: #9ca3af; cursor: not-allowed; box-shadow: none; transform: none; }
-        #output-section { margin-top: 2.5rem; padding: 2rem; background-color: #fff; border-radius: var(--radius-card); min-height: 150px; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 1rem; border: 1px dashed var(--app-border-color); transition: all 0.3s ease; }
-        #status-message { font-weight: 500; color: var(--app-text-secondary); text-align: center; }
-        #audio-player { width: 100%; margin-top: 1rem; display: none; }
-
-        /* --- انیمیشن پردازش --- */
-        #loading-animation { display: none; flex-direction: column; align-items: center; justify-content: center; gap: 1.5rem; }
-        .sound-wave-svg { width: 100px; height: 100px; }
-        .sound-wave-svg path { stroke: var(--app-button-bg); stroke-width: 3; fill: none; stroke-linecap: round; }
-        .wave-1 { animation: pulse 2s infinite cubic-bezier(0.55, 0.055, 0.675, 0.19); }
-        .wave-2 { animation: pulse 2s infinite cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-delay: 0.2s; }
-        .wave-3 { animation: pulse 2s infinite cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-delay: 0.4s; }
-        #loading-text { font-size: 1.1em; font-weight: 500; color: var(--app-text-primary); }
+        #generate-btn:disabled { 
+            background: linear-gradient(135deg, #999, #777);
+            cursor: not-allowed; 
+            box-shadow: none;
+            transform: none;
+        }
+
+        /* Output Section */
+        #output-section { 
+            margin-top: 3rem; 
+            padding: 2rem; 
+            background: rgba(255, 255, 255, 0.9);
+            backdrop-filter: blur(20px);
+            border-radius: var(--radius-card); 
+            min-height: 120px; 
+            display: flex; 
+            align-items: center; 
+            justify-content: center; 
+            flex-direction: column; 
+            gap: 1.5rem; 
+            border: 2px solid rgba(102, 126, 234, 0.2);
+            position: relative;
+            overflow: hidden;
+        }
+
+        #status-message { 
+            font-weight: 600; 
+            color: var(--app-text-secondary);
+            font-size: 1.1rem;
+            text-align: center;
+        }
+
+        #audio-player { 
+            width: 100%; 
+            margin-top: 1rem; 
+            display: none;
+            border-radius: 12px;
+            overflow: hidden;
+        }
+
+        /* Loading Animation */
+        .loading-overlay {
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background: rgba(102, 126, 234, 0.95);
+            backdrop-filter: blur(10px);
+            display: none;
+            align-items: center;
+            justify-content: center;
+            z-index: 2000;
+            opacity: 0;
+            transition: opacity 0.5s ease;
+        }
+
+        .loading-overlay.visible {
+            display: flex;
+            opacity: 1;
+        }
+
+        .loading-content {
+            text-align: center;
+            color: white;
+        }
+
+        .loading-animation {
+            width: 200px;
+            height: 200px;
+            margin: 0 auto 2rem;
+            position: relative;
+        }
+
+        .sound-wave {
+            position: absolute;
+            width: 100%;
+            height: 100%;
+            border-radius: 50%;
+            border: 3px solid rgba(255, 255, 255, 0.3);
+            animation: pulse 2s ease-in-out infinite;
+        }
+
+        .sound-wave:nth-child(1) { animation-delay: 0s; }
+        .sound-wave:nth-child(2) { animation-delay: 0.4s; }
+        .sound-wave:nth-child(3) { animation-delay: 0.8s; }
+
         @keyframes pulse {
-            0% { transform: scale(0.5); opacity: 0; }
+            0% {
+                transform: scale(0.8);
+                opacity: 1;
+            }
+            100% {
+                transform: scale(1.2);
+                opacity: 0;
+            }
+        }
+
+        .ai-icon {
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            font-size: 4rem;
+            animation: rotate 3s linear infinite;
+        }
+
+        .loading-text {
+            font-size: 1.8rem;
+            font-weight: 700;
+            margin-bottom: 1rem;
+            text-shadow: 0 2px 4px rgba(0,0,0,0.3);
+        }
+
+        .loading-subtext {
+            font-size: 1.2rem;
+            opacity: 0.9;
+            animation: fadeInOut 2s ease-in-out infinite;
+        }
+
+        @keyframes fadeInOut {
+            0%, 100% { opacity: 0.6; }
             50% { opacity: 1; }
-            100% { transform: scale(1.2); opacity: 0; }
+        }
+
+        /* Responsive Design */
+        @media (max-width: 768px) {
+            .app-header {
+                padding: 3rem 1rem 4rem 1rem;
+            }
+            
+            .app-header h1 {
+                font-size: 2.5em;
+            }
+            
+            .main-content {
+                padding: 2rem;
+                margin: -3rem auto 1rem auto;
+            }
+            
+            .form-group {
+                margin-bottom: 2rem;
+            }
+            
+            label {
+                font-size: 1.1em;
+            }
+            
+            #speaker-grid {
+                grid-template-columns: repeat(2, 1fr);
+                gap: 1rem;
+            }
+        }
+
+        @media (max-width: 480px) {
+            .app-header h1 {
+                font-size: 2em;
+            }
+            
+            .app-header p {
+                font-size: 1.1em;
+            }
+            
+            .main-content {
+                padding: 1.5rem;
+            }
+            
+            #speaker-grid {
+                grid-template-columns: 1fr;
+            }
         }
     </style>
 </head>
 <body>
     <div class="container">
         <header class="app-header">
-            <h1>آلفا TTS</h1>
-            <p>جادوی تبدیل متن به صدا، به سبک شما</p>
+            <h1>🎤 آلفا TTS</h1>
+            <p>✨ جادوی تبدیل متن به صدا، به سبک شما ✨</p>
         </header>
 
         <main class="main-content">
             <form id="tts-form">
                 <div class="form-group">
-                    <label for="text-input">📝 متن برای تبدیل</label>
+                    <label for="text-input" data-icon="📝">متن برای تبدیل</label>
                     <textarea id="text-input" rows="5" placeholder="اینجا متن خود را به فارسی وارد کنید...">این یک آزمایش برای بررسی کیفیت صدای تولید شده توسط هوش مصنوعی آلفا است.</textarea>
                 </div>
+                
                 <div class="form-group">
-                    <label for="prompt-input">🗣️ سبک و لحن گفتار (اختیاری)</label>
+                    <label for="prompt-input" data-icon="🗣️">سبک و لحن گفتار (اختیاری)</label>
                     <input type="text" id="prompt-input" value="با صدایی طبیعی و روان." placeholder="مثال: با لحنی شاد و پرانرژی">
                 </div>
+
                 <div class="form-group">
-                    <label>🎤 گوینده منتخب</label>
+                    <label data-icon="🎤">گوینده منتخب</label>
                     <div id="selected-speaker-display">
                         <div id="selected-speaker-card">
                             <img id="selected-speaker-img" src="" alt="عکس گوینده">
@@ -135,45 +693,53 @@
                                 <p>برای ��غییر، روی دکمه زیر کلیک کنید</p>
                             </div>
                         </div>
-                        <button type="button" id="change-speaker-btn">تغییر گوینده</button>
+                        <button type="button" id="change-speaker-btn">🔄 تغییر گوینده</button>
                     </div>
                 </div>
+                
                 <div class="form-group">
-                    <label for="temperature-slider">🌡️ میزان خلاقیت صدا (0.1 تا 1.5)</label>
+                    <label for="temperature-slider" data-icon="🌡️">میزان خلاقیت صدا (0.1 تا 1.5)</label>
                     <div class="slider-container">
                         <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>
             </form>
 
             <div id="output-section">
-                <div id="status-message">خروجی صدا در اینجا نمایش داده می‌شود</div>
-                <!-- انیمیشن لودینگ در اینجا قرار می‌گیرد -->
-                <div id="loading-animation">
-                     <svg class="sound-wave-svg" viewBox="0 0 100 100">
-                        <path class="wave-1" d="M 20 50 Q 35 20 50 50 T 80 50"></path>
-                        <path class="wave-2" d="M 20 50 Q 35 20 50 50 T 80 50"></path>
-                        <path class="wave-3" d="M 20 50 Q 35 20 50 50 T 80 50"></path>
-                    </svg>
-                    <p id="loading-text">در حال تبدیل متن به صدا با هوش مصنوعی آلفا...</p>
-                </div>
+                <div id="status-message">✨ خروجی صدا در اینجا نمایش داده می‌شود</div>
                 <audio id="audio-player" controls></audio>
             </div>
         </main>
     </div>
 
+    <!-- Loading Animation Overlay -->
+    <div class="loading-overlay" id="loading-overlay">
+        <div class="loading-content">
+            <div class="loading-animation">
+                <div class="sound-wave"></div>
+                <div class="sound-wave"></div>
+                <div class="sound-wave"></div>
+                <div class="ai-icon">🤖</div>
+            </div>
+            <div class="loading-text">در حال تبدیل متن به صدا</div>
+            <div class="loading-subtext">با هوش مصنوعی آلفا</div>
+        </div>
+    </div>
+
+    <!-- Speaker Selection Modal -->
     <div id="speaker-modal">
         <div class="modal-content">
             <div class="modal-header">
-                <h2>انتخاب گوینده</h2>
+                <h2>🎭 انتخاب گوینده</h2>
                 <button type="button" class="close-modal-btn">×</button>
             </div>
             <div id="speaker-grid"></div>
         </div>
     </div>
-    
+
     <input type="hidden" id="selected_speaker_id_storage" value="Charon">
 
     <script>
@@ -194,11 +760,9 @@
             const tempSlider = document.getElementById('temperature-slider');
             const tempValueSpan = document.getElementById('temperature-value');
             const generateBtn = document.getElementById('generate-btn');
-            
-            // Output section elements
             const statusMessage = document.getElementById('status-message');
             const audioPlayer = document.getElementById('audio-player');
-            const loadingAnimation = document.getElementById('loading-animation');
+            const loadingOverlay = document.getElementById('loading-overlay');
             
             const selectedSpeakerIdStorage = document.getElementById('selected_speaker_id_storage');
             const speakerModal = document.getElementById('speaker-modal');
@@ -215,14 +779,14 @@
             function getImageUrl(speaker, index) {
                 const gender = speaker.name.includes('(مرد)') ? 'men' : (speaker.name.includes('(زن)') ? 'women' : 'lego');
                 const imageIndex = (index * 7 + 13) % 100;
-                return `https://randomuser.me/api/portraits/thumb/${gender}/${imageIndex}.jpg`;
+                return `https://randomuser.me/api/portraits/${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).replace('thumb/', ''); // Get larger image
+                    selectedSpeakerImgDisplay.src = getImageUrl(speaker, speakerIndex);
                     selectedSpeakerNameDisplay.textContent = speaker.name;
                     selectedSpeakerIdStorage.value = speaker.id;
                 }
@@ -234,6 +798,7 @@
                     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 = `
@@ -253,58 +818,60 @@
                 });
             }
             
+            function showLoadingAnimation() {
+                loadingOverlay.classList.add('visible');
+                document.body.style.overflow = 'hidden';
+            }
+            
+            function hideLoadingAnimation() {
+                loadingOverlay.classList.remove('visible');
+                document.body.style.overflow = 'auto';
+            }
+            
+            // Event Listeners
             changeSpeakerBtn.addEventListener('click', () => {
                 createSpeakerCardsInModal();
                 speakerModal.classList.add('visible');
             });
+            
             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 = '';
-                loadingAnimation.style.display = 'flex';
-                generateBtn.disabled = true;
-                generateBtn.textContent = 'کمی صبر کنید...';
-            }
-
-            function showResultState(isSuccess, message = '') {
-                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';
-                }
-                generateBtn.disabled = false;
-                generateBtn.textContent = '🚀 تولید و پخش صدا';
-            }
+            tempSlider.addEventListener('input', () => { 
+                tempValueSpan.textContent = tempSlider.value; 
+            });
 
             async function generateAudio(event) {
                 event.preventDefault();
-                showLoadingState();
+                
+                // Show loading animation
+                showLoadingAnimation();
+                
+                generateBtn.disabled = true;
+                generateBtn.textContent = '⏳ در حال پردازش...';
+                statusMessage.textContent = '🔄 در حال ارسال درخواست به سرور...';
+                audioPlayer.style.display = 'none';
+                audioPlayer.src = '';
 
                 const text = textInput.value;
-                if (!text.trim()) {
-                    showResultState(false, 'خطا: متن ورودی نمی‌تواند خالی باشد.');
-                    return;
-                }
-                
                 const prompt = promptInput.value;
                 const temperature = parseFloat(tempSlider.value);
                 const selectedSpeaker = selectedSpeakerIdStorage.value;
                 const sessionHash = Math.random().toString(36).substring(2);
 
+                if (!text.trim()) {
+                    statusMessage.textContent = '❌ خطا: متن ورودی نمی‌تواند خالی باشد.';
+                    generateBtn.disabled = false;
+                    generateBtn.textContent = '🚀 تولید و پخش صدا';
+                    hideLoadingAnimation();
+                    return;
+                }
+                
                 const payload = {
                     fn_index: FN_INDEX,
                     data: [false, null, text, prompt, selectedSpeaker, temperature],
@@ -324,6 +891,8 @@
                          throw new Error(`خطا در اتصال به صف (${joinQueueResponse.status}): ${errorBody}`);
                     }
                     
+                    statusMessage.textContent = '⏰ در انتظار نتیجه از سرور...';
+                    
                     const dataResponse = await fetch(`${GET_DATA_URL_BASE}?session_hash=${sessionHash}`);
                     const reader = dataResponse.body.getReader();
                     const decoder = new TextDecoder();
@@ -333,17 +902,25 @@
                     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_generating') {
+                                    statusMessage.textContent = '🎵 سرور در حال تولید فایل صوتی است...';
+                                }
                                 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); }
+                                    } else {
+                                        console.error("ساختار پیام موفقیت مورد انتظار نبود:", data);
+                                    }
                                     break; 
                                 }
                             } catch (e) { /* نادیده گرفتن خطاهای پارس */ }
@@ -352,21 +929,57 @@
                     }
                     
                     if (finalFilePath) {
+                        statusMessage.textContent = '✅ فایل صوتی با موفقیت تولید شد!';
                         const audioUrl = `${FILE_URL_BASE}${finalFilePath}`;
                         audioPlayer.src = audioUrl;
-                        showResultState(true);
+                        audioPlayer.style.display = 'block';
+                        
+                        // Hide loading animation before playing audio
+                        hideLoadingAnimation();
+                        
+                        // Add a small delay then play
+                        setTimeout(() => {
+                            audioPlayer.play().catch(e => {
+                                console.log('Auto-play prevented by browser policy');
+                            });
+                        }, 500);
                     } else {
-                        throw new Error('فایل صوتی از سرور دریافت نشد.');
+                        throw new Error('فایل صوتی از سرور دریافت نشد. کنسول را برای اطلاعات بیشتر بررسی کنید.');
                     }
 
                 } catch (error) {
                     console.error('یک خطا در فرآیند رخ داد:', error);
-                    showResultState(false, `یک خطا رخ داد: ${error.message}`);
+                    statusMessage.textContent = `❌ یک خطا رخ داد: ${error.message}`;
+                    hideLoadingAnimation();
+                } finally {
+                    generateBtn.disabled = false;
+                    generateBtn.textContent = '🚀 تولید و پخش صدا';
                 }
             }
             
+            // Initialize
             updateSelectedSpeakerDisplay(selectedSpeakerIdStorage.value);
             form.addEventListener('submit', generateAudio);
+            
+            // Add some interactive effects
+            document.querySelectorAll('input, textarea').forEach(element => {
+                element.addEventListener('focus', function() {
+                    this.parentElement.style.transform = 'translateY(-2px)';
+                });
+                
+                element.addEventListener('blur', function() {
+                    this.parentElement.style.transform = 'translateY(0)';
+                });
+            });
+            
+            // Add parallax effect to header
+            window.addEventListener('scroll', () => {
+                const scrolled = window.pageYOffset;
+                const header = document.querySelector('.app-header');
+                if (header) {
+                    header.style.transform = `translateY(${scrolled * 0.5}px)`;
+                }
+            });
         });
     </script>
 </body>