Update index.html

index.html

@@ -5,40 +5,187 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>محادثة صوتية</title>
     <style>
-        /* ... Previous CSS styles ... */
-        .wave-container {
-            position: fixed;
-            bottom: 100px;
+        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 {
             width: 100%;
-            height: 100px;
+            height: 100vh;
             display: flex;
+            flex-direction: column;
             justify-content: center;
             align-items: center;
-            gap: 8px;
-            opacity: 0;
-            transition: opacity 0.3s ease;
+            background: linear-gradient(135deg, #6e8efb, #4a6cf7);
+        }
+        .record-button {
+            width: 60vmin; /* تصغير حجم الزر */
+            height: 60vmin; /* تصغير حجم الزر */
+            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);
+        }
+        .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);
+        }
+        .inner-circle {
+            width: 40%;
+            height: 40%;
+            background: #ffffff;
+            border-radius: 50%;
+            transition: all 0.3s ease;
+            box-shadow: 0 5px 15px rgba(0,0,0,0.2);
         }
         
-        .wave-container.active {
-            opacity: 1;
+        /* موجات صوتية تحت الزر */
+        .wave-container {
+            margin-top: 30px;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            gap: 5px;
+            height: 50px;
         }
         
         .wave {
-            width: 8px;
-            height: 40px;
-            background: #ffffff;
-            border-radius: 4px;
-            animation: wave 1s ease-in-out infinite;
+            width: 4px;
+            height: 20px;
+            background: rgba(255, 255, 255, 0.6);
+            border-radius: 2px;
+            animation: waveAnimation 1s ease-in-out infinite;
         }
         
         .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; }
+        .wave:nth-child(6) { animation-delay: 0.5s; }
+        .wave:nth-child(7) { animation-delay: 0.6s; }
+        .wave:nth-child(8) { animation-delay: 0.7s; }
         
-        @keyframes wave {
-            0%, 100% { transform: scaleY(0.3); }
-            50% { transform: scaleY(1); }
+        @keyframes waveAnimation {
+            0%, 100% { transform: scaleY(0.5); }
+            50% { transform: scaleY(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);
+        }
+        .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); }
         }
     </style>
 </head>
@@ -50,18 +197,20 @@
             <button class="record-button" id="recordButton">
                 <div class="inner-circle"></div>
             </button>
+            <!-- إضافة الموجات الصوتية تحت الزر -->
+            <div class="wave-container">
+                <div class="wave"></div>
+                <div class="wave"></div>
+                <div class="wave"></div>
+                <div class="wave"></div>
+                <div class="wave"></div>
+                <div class="wave"></div>
+                <div class="wave"></div>
+                <div class="wave"></div>
+            </div>
         </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>
@@ -90,7 +239,7 @@
         const voiceSelect = document.getElementById('voiceSelect');
         const toggleCodeButton = document.getElementById('toggleCode');
         const codeSection = document.getElementById('codeSection');
-        const waveContainer = document.getElementById('waveContainer');
+        const waveContainer = document.querySelector('.wave-container');
         
         let isRecording = false;
 
@@ -108,7 +257,6 @@
             const voices = speechSynthesis.getVoices();
             voiceSelect.innerHTML = '<option value="">اختر صوت رجل عربي فصحى</option>';
             
-            // تحسين اختيار الأصوات العربية للرجال
             voices.forEach((voice, index) => {
                 if (voice.lang.includes('ar') && (voice.name.includes('Male') || voice.name.includes('رجل'))) {
                     const option = document.createElement('option');
@@ -121,7 +269,6 @@
                 }
             });
 
-            // إذا لم يتم العثور على أصوات عربية، اختر أول صوت رجل متاح
             if (voiceSelect.options.length === 1) {
                 voices.forEach((voice, index) => {
                     if (voice.name.includes('Male')) {
@@ -161,15 +308,7 @@
                 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 = 'حدث خطأ في الاتصال بالنموذج';
@@ -198,7 +337,6 @@
                 statusText.textContent = 'جارٍ التسجيل... انقر للإيقاف';
                 spokenText.textContent = '';
                 modelResponse.textContent = '';
-                waveContainer.classList.remove('active');
             } else {
                 recognition.stop();
                 isRecording = false;