Update index.html

index.html

@@ -8,7 +8,7 @@
         body {
             font-family: Arial, sans-serif;
             margin: 0;
-            padding: 20px;
+            padding: 0;
             background: #f0f2f5;
             min-height: 100vh;
             display: flex;
@@ -16,24 +16,26 @@
             align-items: center;
         }
         .container {
-            max-width: 600px;
             width: 100%;
-            background: white;
-            padding: 20px;
-            border-radius: 15px;
-            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
+            min-height: 100vh;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            position: relative;
         }
         .record-button-container {
+            width: 100%;
+            height: 100vh;
             display: flex;
             justify-content: center;
             align-items: center;
-            margin: 20px 0;
+            background: linear-gradient(135deg, #6e8efb, #4a6cf7);
         }
         .record-button {
-            width: 150px;
-            height: 150px;
+            width: 80vmin;
+            height: 80vmin;
             border-radius: 50%;
-            background: #f0f2f5;
+            background: rgba(255, 255, 255, 0.1);
             border: none;
             cursor: pointer;
             display: flex;
@@ -41,66 +43,121 @@
             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 {
-            background: #e4e6e9;
+            transform: scale(1.02);
+            box-shadow: 0 15px 40px rgba(0,0,0,0.3);
         }
         .record-button.recording {
-            background: #ff4444;
+            background: rgba(255, 68, 68, 0.2);
+            animation: pulse 2s infinite;
         }
         .record-button.recording .inner-circle {
-            background: white;
-            width: 50px;
-            height: 50px;
-            border-radius: 5px;
+            background: #ff4444;
+            transform: scale(0.8);
         }
         .inner-circle {
-            width: 60px;
-            height: 60px;
-            background: #ff4444;
+            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);
         }
         .status-text {
+            position: absolute;
+            bottom: 10%;
             text-align: center;
-            margin: 10px 0;
-            color: #666;
-            font-size: 14px;
+            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: #f8f9fa;
+            background: rgba(255, 255, 255, 0.1);
             padding: 15px;
-            border-radius: 10px;
-            margin: 10px 0;
+            border-radius: 15px;
+            margin: 10px;
+            backdrop-filter: blur(5px);
+            color: white;
+            width: 90%;
+            max-width: 600px;
         }
         .message-label {
             font-weight: bold;
-            color: #666;
             margin-bottom: 8px;
         }
         .message-content {
             padding: 10px;
-            background: white;
+            background: rgba(255, 255, 255, 0.05);
             border-radius: 8px;
             min-height: 40px;
         }
         .voice-settings {
-            margin-top: 20px;
+            position: fixed;
+            bottom: 20px;
+            width: 90%;
+            max-width: 600px;
             padding: 15px;
-            background: #f8f9fa;
-            border-radius: 10px;
+            background: rgba(255, 255, 255, 0.1);
+            border-radius: 15px;
+            backdrop-filter: blur(5px);
         }
         select {
             width: 100%;
-            padding: 8px;
-            margin: 5px 0;
-            border-radius: 5px;
-            border: 1px solid #ddd;
+            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>
 <body>
     <div class="container">
+        <button class="toggle-code-button" id="toggleCode">عرض النص</button>
+        
         <div class="record-button-container">
             <button class="record-button" id="recordButton">
                 <div class="inner-circle"></div>
@@ -108,20 +165,22 @@
         </div>
         <div class="status-text" id="statusText">انقر للبدء في التسجيل</div>
         
-        <div class="voice-settings">
-            <select id="voiceSelect">
-                <option value="">اختر صوت رجل عربي فصحى</option>
-            </select>
-        </div>
-
-        <div class="message-container">
-            <div class="message-label">ما قلته:</div>
-            <div class="message-content" id="spokenText"></div>
-        </div>
-        
-        <div class="message-container">
-            <div class="message-label">رد النموذج:</div>
-            <div class="message-content" id="modelResponse"></div>
+        <div class="code-section" id="codeSection">
+            <div class="message-container">
+                <div class="message-label">ما قلته:</div>
+                <div class="message-content" id="spokenText"></div>
+            </div>
+            
+            <div class="message-container">
+                <div class="message-label">رد النموذج:</div>
+                <div class="message-content" id="modelResponse"></div>
+            </div>
+            
+            <div class="voice-settings">
+                <select id="voiceSelect">
+                    <option value="">اختر صوت رجل عربي فصحى</option>
+                </select>
+            </div>
         </div>
     </div>
 
@@ -132,16 +191,21 @@
         const spokenText = document.getElementById('spokenText');
         const modelResponse = document.getElementById('modelResponse');
         const voiceSelect = document.getElementById('voiceSelect');
+        const toggleCodeButton = document.getElementById('toggleCode');
+        const codeSection = document.getElementById('codeSection');
         
         let isRecording = false;
+
+        toggleCodeButton.onclick = () => {
+            codeSection.classList.toggle('visible');
+            toggleCodeButton.textContent = codeSection.classList.contains('visible') ? 'إخفاء النص' : 'عرض النص';
+        };
         
-        // إعداد التعرف على الكلام
         const recognition = new (window.SpeechRecognition || window.webkitSpeechRecognition)();
         recognition.lang = 'ar-SA';
         recognition.continuous = false;
         recognition.interimResults = false;
 
-        // تحميل الأصوات العربية
         function loadVoices() {
             const voices = speechSynthesis.getVoices();
             voiceSelect.innerHTML = '<option value="">اختر صوت رجل عربي فصحى</option>';
@@ -176,7 +240,6 @@
                 const botReply = data.response;
                 modelResponse.textContent = botReply;
 
-                // تحويل الرد إلى صوت
                 const utterance = new SpeechSynthesisUtterance(botReply);
                 const voices = speechSynthesis.getVoices();
                 const selectedVoice = voices[voiceSelect.value || 0];