Update index.html (#4)

- Update index.html (a5513ad1e3f43712eeb4c39d0a9f0030cd5c4296)


Co-authored-by: 水野航 <[email protected]>

index.html

@@ -15,22 +15,43 @@
             background-color: #121212;
             color: white;
         }
+
         .chart {
             width: 300px;
             height: 300px;
             margin-bottom: 20px;
         }
+
         .record-button {
             position: fixed;
             bottom: 30px;
             width: 80px;
             height: 80px;
-            background-color: #d32f2f;
+            background-color: transparent;
             border-radius: 50%;
-            border: none;
+            border: 4px solid white;
+            display: flex;
+            justify-content: center;
+            align-items: center;
             cursor: pointer;
             box-shadow: 0 4px 6px rgba(0, 0, 0, 0.4);
+            transition: all 0.2s ease;
         }
+
+        .record-icon {
+            width: 60px;
+            height: 60px;
+            background-color: #d32f2f;
+            border-radius: 50%;
+            transition: all 0.2s ease;
+        }
+
+        .recording .record-icon {
+            width: 40px;
+            height: 40px;
+            border-radius: 10%;
+        }
+
         .result-button {
             margin-top: 20px;
             padding: 10px 20px;
@@ -41,6 +62,7 @@
             cursor: pointer;
             box-shadow: 0 4px 6px rgba(0, 0, 0, 0.4);
         }
+
         .result-button:hover {
             background-color: #388e3c;
         }
@@ -51,16 +73,22 @@
     <div class="chart">
         <canvas id="speechChart"></canvas>
     </div>
-    <button class="record-button" onclick="toggleRecording()"></button>
+    <button class="record-button" id="recordButton" onclick="toggleRecording()">
+        <div class="record-icon" id="recordIcon"></div>
+    </button>
     <button class="result-button" onclick="showResults()">結果を表示</button>
     <script>
         let isRecording = false;
+
         function toggleRecording() {
+            const recordButton = document.getElementById('recordButton');
+            const recordIcon = document.getElementById('recordIcon');
             isRecording = !isRecording;
+
             if (isRecording) {
-                alert('Recording started');
+                recordButton.classList.add('recording');
             } else {
-                alert('Recording stopped');
+                recordButton.classList.remove('recording');
             }
         }