Update index.html

index.html

@@ -9,7 +9,7 @@
             font-family: Arial, sans-serif;
             margin: 0;
             padding: 0;
-            background: #f0f2f5;
+            background: #ffffff;
             min-height: 100vh;
             display: flex;
             flex-direction: column;
@@ -30,13 +30,13 @@
             flex-direction: column;
             justify-content: center;
             align-items: center;
-            background: linear-gradient(135deg, #6e8efb, #4a6cf7);
+            background: #ffffff;
         }
         .record-button {
-            width: 60vmin; /* تصغير حجم الزر */
-            height: 60vmin; /* تصغير حجم الزر */
+            width: 60vmin;
+            height: 60vmin;
             border-radius: 50%;
-            background: rgba(255, 255, 255, 0.1);
+            background: rgba(40, 167, 69, 0.1);
             border: none;
             cursor: pointer;
             display: flex;
@@ -44,31 +44,29 @@
             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);
+            box-shadow: 0 10px 30px rgba(40, 167, 69, 0.2);
         }
         .record-button:hover {
             transform: scale(1.02);
-            box-shadow: 0 15px 40px rgba(0,0,0,0.3);
+            box-shadow: 0 15px 40px rgba(40, 167, 69, 0.3);
         }
         .record-button.recording {
-            background: rgba(255, 68, 68, 0.2);
+            background: rgba(40, 167, 69, 0.2);
             animation: pulse 2s infinite;
         }
         .record-button.recording .inner-circle {
-            background: #ff4444;
+            background: #28a745;
             transform: scale(0.8);
         }
         .inner-circle {
             width: 40%;
             height: 40%;
-            background: #ffffff;
+            background: #28a745;
             border-radius: 50%;
             transition: all 0.3s ease;
-            box-shadow: 0 5px 15px rgba(0,0,0,0.2);
+            box-shadow: 0 5px 15px rgba(40, 167, 69, 0.2);
         }
         
-        /* موجات صوتية تحت الزر */
         .wave-container {
             margin-top: 30px;
             display: flex;
@@ -81,7 +79,7 @@
         .wave {
             width: 4px;
             height: 20px;
-            background: rgba(255, 255, 255, 0.6);
+            background: rgba(40, 167, 69, 0.6);
             border-radius: 2px;
             animation: waveAnimation 1s ease-in-out infinite;
         }
@@ -100,32 +98,28 @@
         }
 
         .status-text {
-            position: absolute;
-            bottom: 10%;
             text-align: center;
-            color: white;
+            color: #28a745;
             font-size: 1.5rem;
             font-weight: bold;
-            text-shadow: 0 2px 4px rgba(0,0,0,0.2);
+            margin-top: 20px;
         }
 
-        /* باقي الأنماط الأصلية */
         .toggle-code-button {
             position: fixed;
             top: 20px;
             right: 20px;
             padding: 10px 20px;
-            background: rgba(255, 255, 255, 0.2);
+            background: #28a745;
             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);
+            background: #218838;
         }
         .code-section {
             display: none;
@@ -134,7 +128,7 @@
             left: 0;
             width: 100%;
             height: 100%;
-            background: rgba(0, 0, 0, 0.95);
+            background: rgba(255, 255, 255, 0.95);
             z-index: 999;
             overflow-y: auto;
             padding: 20px;
@@ -144,22 +138,22 @@
             display: block;
         }
         .message-container {
-            background: rgba(255, 255, 255, 0.1);
+            background: rgba(40, 167, 69, 0.1);
             padding: 15px;
             border-radius: 15px;
             margin: 10px;
-            backdrop-filter: blur(5px);
-            color: white;
+            color: #333;
             width: 90%;
             max-width: 600px;
         }
         .message-label {
             font-weight: bold;
             margin-bottom: 8px;
+            color: #28a745;
         }
         .message-content {
             padding: 10px;
-            background: rgba(255, 255, 255, 0.05);
+            background: rgba(40, 167, 69, 0.05);
             border-radius: 8px;
             min-height: 40px;
         }
@@ -169,17 +163,16 @@
             width: 90%;
             max-width: 600px;
             padding: 15px;
-            background: rgba(255, 255, 255, 0.1);
+            background: rgba(40, 167, 69, 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;
+            border: 1px solid #28a745;
+            background: white;
+            color: #28a745;
             font-size: 16px;
         }
         @keyframes pulse {
@@ -190,6 +183,7 @@
     </style>
 </head>
 <body>
+    <!-- باقي الكود كما هو بدون تغيير -->
     <div class="container">
         <button class="toggle-code-button" id="toggleCode">عرض النص</button>
         
@@ -197,7 +191,6 @@
             <button class="record-button" id="recordButton">
                 <div class="inner-circle"></div>
             </button>
-            <!-- إضافة الموجات الصوتية تحت الزر -->
             <div class="wave-container">
                 <div class="wave"></div>
                 <div class="wave"></div>
@@ -231,6 +224,7 @@
     </div>
 
     <script>
+        // نفس الكود JavaScript السابق بدون تغيير
         const API_URL = 'https://8o1mzdgh9f40t4-7777.proxy.runpod.net/proxy/8000/chat';
         const recordButton = document.getElementById('recordButton');
         const statusText = document.getElementById('statusText');