Update index.html

index.html

@@ -55,19 +55,22 @@
             background: rgba(40, 167, 69, 0.2);
             animation: pulse 2s infinite;
         }
-        
-        /* New recording indicator styles */
-        .recording-indicator {
+        /* Modified inner shape styles */
+        .inner-shape {
             width: 40%;
             height: 40%;
             background: #28a745;
-            border-radius: 0; /* Square by default */
-            display: none; /* Hidden by default */
             transition: all 0.3s ease;
+            box-shadow: 0 5px 15px rgba(40, 167, 69, 0.2);
         }
-        
-        .record-button.recording .recording-indicator {
-            display: block; /* Show when recording */
+        /* Circle state (default) */
+        .inner-shape {
+            border-radius: 50%;
+        }
+        /* Square state (recording) */
+        .record-button.recording .inner-shape {
+            border-radius: 15%;
+            transform: scale(0.8);
         }
         
         .wave-container {
@@ -189,7 +192,7 @@
         
         <div class="record-button-container">
             <button class="record-button" id="recordButton">
-                <div class="recording-indicator"></div>
+                <div class="inner-shape"></div>
             </button>
             <div class="wave-container">
                 <div class="wave"></div>