adjusment for mobile

Author: luarmr

index.html

@@ -12,8 +12,8 @@ <h1 class="title">Audio Echo</h1>
         <div id="status-message" class="status-message" aria-live="polite">Ready</div>
 
         <div class="slider-container">
-            <label for="threshold-slider">Threshold: <span id="threshold-value">5%</span></label>
-            <input type="range" id="threshold-slider" min="0" max="1" step="0.01" value="0.05" class="slider" aria-valuetext="5%">
+            <label for="threshold-slider">Threshold: <span id="threshold-value">7%</span></label>
+            <input type="range" id="threshold-slider" min="0" max="1" step="0.01" value="0.07" class="slider" aria-valuetext="7%">
         </div>
 
         <div class="slider-container">

script.js

@@ -8,7 +8,7 @@ document.addEventListener("DOMContentLoaded", async () => {
     const pauseButton = document.getElementById("pause-button");
 
     let silenceThreshold = 1000;
-    let vadThreshold = 0.05;
+    let vadThreshold = 0.07;
     let isRecording = false;
     let isPaused = false;
     let isPlayingBack = false;

styles.css

@@ -1,21 +1,19 @@
 :root {
-    
-    --color-primary: #6b9080; /* Primary color */
-    --color-background: #eaf4f4; /* Background color */
-    --color-accent: #a4c3b2; /* Accent color */
-
+    --color-primary: #6b9080;
+    --color-background: #eaf4f4;
+    --color-accent: #a4c3b2;
 }
 
 body {
     font-family: 'Arial', sans-serif;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    height: 100vh;
     background-color: var(--color-background);
     margin: 0;
     padding: 0;
     color: #333;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
 }
 
 .app-container {
@@ -31,6 +29,7 @@ body {
 .title {
     color: var(--color-primary);
     margin-bottom: 20px;
+    font-size: 1.5em;
 }
 
 .status-message {
@@ -61,16 +60,16 @@ label {
 .slider::-webkit-slider-thumb {
     -webkit-appearance: none;
     appearance: none;
-    width: 20px;
-    height: 20px;
+    width: 30px;
+    height: 30px;
     border-radius: 50%;
     background: var(--color-primary);
     cursor: pointer;
 }
 
 .slider::-moz-range-thumb {
-    width: 20px;
-    height: 20px;
+    width: 30px;
+    height: 30px;
     border-radius: 50%;
     background: var(--color-primary);
     cursor: pointer;
@@ -88,25 +87,47 @@ label {
     background-color: #007bff;
     height: 100%;
     width: 0%;
-    transition: width 0.01s ease-out;
-}
-
-.smooth-transition {
     transition: width 0.5s ease-out;
 }
 
 .control-button {
-    padding: 10px 20px;
+    padding: 15px 30px;
     background-color: var(--color-primary);
     color: white;
     border: none;
     border-radius: 5px;
     cursor: pointer;
-    font-size: 1em;
+    font-size: 1.2em;
     margin-top: 20px;
     transition: background-color 0.3s;
 }
 
 .control-button:hover {
     background-color: var(--color-accent);
-}
+}
+
+@media (max-width: 600px) {
+    .app-container {
+        width: 100%; 
+        padding: 10px;
+        border-radius: 5px;
+        box-shadow: none; 
+    }
+
+    .title {
+        font-size: 1.8em;
+    }
+
+    .status-message {
+        font-size: 1.4em;
+    }
+
+    .slider-container, .progress-container {
+        padding: 0 10px;
+    }
+
+    .control-button {
+        width: 80%;
+        margin: 10px auto;
+    }
+}