Update index.html

index.html

@@ -5,152 +5,40 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>محادثة صوتية</title>
     <style>
-        body {
-            font-family: Arial, sans-serif;
-            margin: 0;
-            padding: 0;
-            background: #f0f2f5;
-            min-height: 100vh;
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-        }
-        .container {
-            width: 100%;
-            min-height: 100vh;
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-            position: relative;
-        }
-        .record-button-container {
+        /* ... Previous CSS styles ... */
+        .wave-container {
+            position: fixed;
+            bottom: 100px;
             width: 100%;
-            height: 100vh;
+            height: 100px;
             display: flex;
             justify-content: center;
             align-items: center;
-            background: linear-gradient(135deg, #6e8efb, #4a6cf7);
-        }
-        .record-button {
-            width: 80vmin;
-            height: 80vmin;
-            border-radius: 50%;
-            background: rgba(255, 255, 255, 0.1);
-            border: none;
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            position: relative;
-            transition: all 0.3s ease;
-            box-shadow: 0 10px 30px rgba(0,0,0,0.2);
-            backdrop-filter: blur(5px);
-        }
-        .record-button:hover {
-            transform: scale(1.02);
-            box-shadow: 0 15px 40px rgba(0,0,0,0.3);
+            gap: 8px;
+            opacity: 0;
+            transition: opacity 0.3s ease;
         }
-        .record-button.recording {
-            background: rgba(255, 68, 68, 0.2);
-            animation: pulse 2s infinite;
-        }
-        .record-button.recording .inner-circle {
-            background: #ff4444;
-            transform: scale(0.8);
+        
+        .wave-container.active {
+            opacity: 1;
         }
-        .inner-circle {
-            width: 40%;
-            height: 40%;
+        
+        .wave {
+            width: 8px;
+            height: 40px;
             background: #ffffff;
-            border-radius: 50%;
-            transition: all 0.3s ease;
-            box-shadow: 0 5px 15px rgba(0,0,0,0.2);
-        }
-        .status-text {
-            position: absolute;
-            bottom: 10%;
-            text-align: center;
-            color: white;
-            font-size: 1.5rem;
-            font-weight: bold;
-            text-shadow: 0 2px 4px rgba(0,0,0,0.2);
-        }
-        .toggle-code-button {
-            position: fixed;
-            top: 20px;
-            right: 20px;
-            padding: 10px 20px;
-            background: rgba(255, 255, 255, 0.2);
-            border: none;
-            border-radius: 25px;
-            color: white;
-            cursor: pointer;
-            backdrop-filter: blur(5px);
-            transition: all 0.3s ease;
-            z-index: 1000;
-        }
-        .toggle-code-button:hover {
-            background: rgba(255, 255, 255, 0.3);
+            border-radius: 4px;
+            animation: wave 1s ease-in-out infinite;
         }
-        .code-section {
-            display: none;
-            position: fixed;
-            top: 0;
-            left: 0;
-            width: 100%;
-            height: 100%;
-            background: rgba(0, 0, 0, 0.95);
-            z-index: 999;
-            overflow-y: auto;
-            padding: 20px;
-            box-sizing: border-box;
-        }
-        .code-section.visible {
-            display: block;
-        }
-        .message-container {
-            background: rgba(255, 255, 255, 0.1);
-            padding: 15px;
-            border-radius: 15px;
-            margin: 10px;
-            backdrop-filter: blur(5px);
-            color: white;
-            width: 90%;
-            max-width: 600px;
-        }
-        .message-label {
-            font-weight: bold;
-            margin-bottom: 8px;
-        }
-        .message-content {
-            padding: 10px;
-            background: rgba(255, 255, 255, 0.05);
-            border-radius: 8px;
-            min-height: 40px;
-        }
-        .voice-settings {
-            position: fixed;
-            bottom: 20px;
-            width: 90%;
-            max-width: 600px;
-            padding: 15px;
-            background: rgba(255, 255, 255, 0.1);
-            border-radius: 15px;
-            backdrop-filter: blur(5px);
-        }
-        select {
-            width: 100%;
-            padding: 12px;
-            border-radius: 10px;
-            border: 1px solid rgba(255, 255, 255, 0.2);
-            background: rgba(255, 255, 255, 0.1);
-            color: white;
-            font-size: 16px;
-        }
-        @keyframes pulse {
-            0% { transform: scale(1); }
-            50% { transform: scale(1.05); }
-            100% { transform: scale(1); }
+        
+        .wave:nth-child(2) { animation-delay: 0.1s; }
+        .wave:nth-child(3) { animation-delay: 0.2s; }
+        .wave:nth-child(4) { animation-delay: 0.3s; }
+        .wave:nth-child(5) { animation-delay: 0.4s; }
+        
+        @keyframes wave {
+            0%, 100% { transform: scaleY(0.3); }
+            50% { transform: scaleY(1); }
         }
     </style>
 </head>
@@ -165,6 +53,15 @@
         </div>
         <div class="status-text" id="statusText">انقر للبدء في التسجيل</div>
         
+        <!-- إضافة حاوية الموجات الصوتية -->
+        <div class="wave-container" id="waveContainer">
+            <div class="wave"></div>
+            <div class="wave"></div>
+            <div class="wave"></div>
+            <div class="wave"></div>
+            <div class="wave"></div>
+        </div>
+        
         <div class="code-section" id="codeSection">
             <div class="message-container">
                 <div class="message-label">ما قلته:</div>
@@ -193,6 +90,7 @@
         const voiceSelect = document.getElementById('voiceSelect');
         const toggleCodeButton = document.getElementById('toggleCode');
         const codeSection = document.getElementById('codeSection');
+        const waveContainer = document.getElementById('waveContainer');
         
         let isRecording = false;
 
@@ -210,14 +108,30 @@
             const voices = speechSynthesis.getVoices();
             voiceSelect.innerHTML = '<option value="">اختر صوت رجل عربي فصحى</option>';
             
+            // تحسين اختيار الأصوات العربية للرجال
             voices.forEach((voice, index) => {
-                if (voice.lang.includes('ar') && voice.name.includes('Male')) {
+                if (voice.lang.includes('ar') && (voice.name.includes('Male') || voice.name.includes('رجل'))) {
                     const option = document.createElement('option');
                     option.value = index;
                     option.textContent = voice.name;
+                    if (voice.default) {
+                        option.selected = true;
+                    }
                     voiceSelect.appendChild(option);
                 }
             });
+
+            // إذا لم يتم العثور على أصوات عربية، اختر أول صوت رجل متاح
+            if (voiceSelect.options.length === 1) {
+                voices.forEach((voice, index) => {
+                    if (voice.name.includes('Male')) {
+                        const option = document.createElement('option');
+                        option.value = index;
+                        option.textContent = voice.name;
+                        voiceSelect.appendChild(option);
+                    }
+                });
+            }
         }
 
         speechSynthesis.onvoiceschanged = loadVoices;
@@ -247,6 +161,15 @@
                 utterance.lang = 'ar-SA';
                 utterance.rate = 1;
                 utterance.pitch = 1;
+
+                // إظهار الموجات الصوتية عند بدء الكلام
+                waveContainer.classList.add('active');
+                
+                utterance.onend = () => {
+                    // إخفاء الموجات الصوتية عند انتهاء الكلام
+                    waveContainer.classList.remove('active');
+                };
+
                 speechSynthesis.speak(utterance);
             } catch (error) {
                 modelResponse.textContent = 'حدث خطأ في الاتصال بالنموذج';
@@ -275,6 +198,7 @@
                 statusText.textContent = 'جارٍ التسجيل... انقر للإيقاف';
                 spokenText.textContent = '';
                 modelResponse.textContent = '';
+                waveContainer.classList.remove('active');
             } else {
                 recognition.stop();
                 isRecording = false;