From 0f8f94f48d8059b958b76f61d67d9a5445c9977f Mon Sep 17 00:00:00 2001
From: Raul Martin <luarmr@gmail.com>
Date: Sun, 12 Nov 2023 21:43:22 -0800
Subject: [PATCH] adjusment for mobile

---
 index.html |  4 ++--
 script.js  |  2 +-
 styles.css | 61 ++++++++++++++++++++++++++++++++++++------------------
 3 files changed, 44 insertions(+), 23 deletions(-)

diff --git a/index.html b/index.html
index bfb6cbd..933857d 100644
--- a/index.html
+++ b/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">
diff --git a/script.js b/script.js
index 9597eb0..b088531 100644
--- a/script.js
+++ b/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;
diff --git a/styles.css b/styles.css
index 2716103..210c4a4 100644
--- a/styles.css
+++ b/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);
-}
\ No newline at end of file
+}
+
+@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;
+    }
+}