redesing styles of buttons and mic

dcervantes · Jun 16, 2024 · c6db18a · c6db18a
1 parent b5f7f9c
commit c6db18a
Show file tree

Hide file tree

Showing 4 changed files with 98 additions and 14 deletions.
diff --git a/css/styles.css b/css/styles.css
@@ -70,6 +70,14 @@ h1 {
 .flashcard.incorrect {
     border: 3px solid red;
 }
+
+.button-section {
+    display: flex;
+    justify-content: space-between;
+    margin-top: 20px;
+    width: 100%;
+}
+
 .buttons, .input-section {
     display: flex;
     justify-content: center;
@@ -86,10 +94,37 @@ button {
     border: none;
     cursor: pointer;
     transition: background-color 0.3s;
+    border-radius: 12px;
+}
+
+.primary {
+    background-color: #0eb42a;
+    width: 100%;
+}
+
+.primary-outline {
+    background-color: #00000000;
+    border: 2px solid #007bff;
+    width: 100%;
 }
+
+.secondary {
+    background-color: #6c757d;
+}
+
 button:hover {
     background-color: #0056b3;
 }
+
+.secondary:hover {
+    background-color:#aaa
+}
+
+.primary:hover {
+    background-color: #0c7f24;
+
+}
+
 input {
     border: 2px solid #444;
     width: 60%;
@@ -110,9 +145,15 @@ input {
     background-color: #218838;
 }
 
-#start-rec-btn.recording {
+#start-rec-btn.recording, #recording-mic1.recording, #recording-mic2.recording {
     background-color: rgba(255, 0, 0, 0.514);
     transition: background-color 0.3s;
+    fill:#ffffff;
+}
+
+#recording-mic-pad.recording {
+    fill: rgba(255, 0, 0, 0.514);
+    transition: background-color 0.3s;
 }
 
 #recognized-text {

diff --git a/index.html b/index.html
@@ -54,8 +54,15 @@ <h2>Levels:</h2>
             <input type="range" id="level-slider" min="1" max="6" value="6" oninput="updateLevels(this.value)">
         </div>
         <div class="button-section">
-            <button onclick="goToStep1()">🔙</button>
-            <button onclick="goToStep2()">▶</button>
+            <button class="secondary" onclick="goToStep1()">
+                <svg width="24px" heigth="24px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="#ffffff">
+                    <g>
+                        <path fill="none" d="M0 0h24v24H0z"></path>
+                        <path d="M8 7v4L2 6l6-5v4h5a8 8 0 1 1 0 16H4v-2h9a6 6 0 1 0 0-12H8z"></path>
+                    </g>
+                </svg>
+            </button>
+            <button class="primary" onclick="goToStep2()">▶</button>
         </div>
     </div>
 
@@ -72,7 +79,27 @@ <h2>Levels:</h2>
         </div>
         <div id="recognized-text"></div>
         <div class="input-section">
-            <span id="start-rec-btn">🎙️</span>
+            <span id="start-rec-btn">
+                <svg version="1.0" id="Layer_1" xmlns="http://www.w3.org/2000/svg"
+                    xmlns:xlink="http://www.w3.org/1999/xlink" width="64px" height="64px" viewBox="-16 -16 96.00 96.00"
+                    enable-background="new 0 0 32 32" xml:space="preserve" fill="#ffffff">
+                    <g stroke-width="0" transform="translate(0,0), scale(1)">
+                        <rect id="recording-mic-pad" x="-16" y="-16" width="96.00" height="96.00" rx="48" fill="#c0bfbc"
+                            strokewidth="0">
+                        </rect>
+                    </g>
+                    <g id="SVGRepo_iconCarrier" fill="#ffffff">
+                        <g>
+                            <path id="recording-mic1" fill="#231F20"
+                                d="M32,44c6.629,0,12-5.371,12-12V12c0-6.629-5.371-12-12-12S20,5.371,20,12v20C20,38.629,25.371,44,32,44z">
+                            </path>
+                            <path id="recording-mic2" fill="#231F20"
+                                d="M52,28c-2.211,0-4,1.789-4,4c0,8.836-7.164,16-16,16s-16-7.164-16-16c0-2.211-1.789-4-4-4s-4,1.789-4,4 c0,11.887,8.656,21.73,20,23.641V60c0,2.211,1.789,4,4,4s4-1.789,4-4v-4.359C47.344,53.73,56,43.887,56,32 C56,29.789,54.211,28,52,28z">
+                            </path>
+                        </g>
+                    </g>
+                </svg>
+            </span>
         </div>
         <div id="stats">
             ✅ <span id="correct-count">0</span> | ❌ <span id="error-count">0</span>
@@ -84,9 +111,26 @@ <h2>Levels:</h2>
         <h1>🏁</h1>
         <p>✅ <span id="final-correct-count"></span></p>
         <p>❌ <span id="final-error-count"></span></p>
-        <button onclick="retry()">🎲</button>
-        <button onclick="regeneratePhrases()">🔄</button>
-        <button onclick="restart()">🆕</button>
+        <div class="button-section">
+            <button class="primary-outline" style="font-size: large;" onclick="retry()">🎲</button>
+            <button class="primary-outline" onclick="regeneratePhrases()">
+                <svg fill="#ffffff" width="32px" height="32px" viewBox="0 0 14.00 14.00" role="img" focusable="false"
+                    stroke="#ffffff" stroke-width="0.00014">
+                    <g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round" stroke="#0a0000"
+                        stroke-width="0.6719999999999999">
+                        <path
+                            d="M 5.459789,4.64957 Q 5.058009,5.26564 4.542379,6.4777 4.395059,6.17636 4.294609,5.9922 4.194169,5.80805 4.023409,5.56698 3.852649,5.32591 3.681889,5.18863 3.511129,5.05136 3.260009,4.95426 3.008899,4.85716 2.714259,4.85716 H 1.214255 q -0.09375,0 -0.154018,-0.0603 Q 0.999969,4.73666 0.999969,4.64287 V 3.35716 q 0,-0.0937 0.06027,-0.15402 0.06027,-0.0603 0.154018,-0.0603 h 1.500004 q 1.6741,0 2.74553,1.5067 z m 7.54018,5.35045 q 0,0.0937 -0.0603,0.15402 l -2.14285,2.14285 q -0.0603,0.0603 -0.15402,0.0603 -0.0871,0 -0.15067,-0.0636 -0.0636,-0.0636 -0.0636,-0.15067 v -1.28571 q -0.21428,0 -0.5692,0.003 -0.35491,0.003 -0.54241,0.007 -0.1875,0.003 -0.48884,-0.007 -0.30133,-0.0101 -0.47544,-0.0335 -0.17411,-0.0234 -0.42857,-0.0703 -0.25447,-0.0469 -0.42188,-0.12388 -0.16741,-0.077 -0.38839,-0.19085 -0.22098,-0.11384 -0.39509,-0.26786 -0.17411,-0.15401 -0.3683,-0.35825 -0.1942,-0.20425 -0.375,-0.46541 0.39509,-0.62276 0.91071,-1.82812 0.14732,0.30134 0.24777,0.48549 0.10044,0.18415 0.2712,0.42522 0.17076,0.24107 0.34152,0.37835 0.17076,0.13728 0.42188,0.23438 0.25111,0.0971 0.54576,0.0971 h 1.71428 V 7.85687 q 0,-0.0937 0.0603,-0.15402 0.0603,-0.0603 0.15402,-0.0603 0.0803,0 0.16071,0.067 l 2.13616,2.13616 q 0.0603,0.0603 0.0603,0.15402 z m 0,-6 q 0,0.0937 -0.0603,0.15401 l -2.14285,2.14286 q -0.0603,0.0603 -0.15402,0.0603 -0.0871,0 -0.15067,-0.0636 -0.0636,-0.0636 -0.0636,-0.15067 V 4.85721 h -1.71428 q -0.32143,0 -0.58259,0.10045 -0.26116,0.10044 -0.46206,0.30134 -0.20089,0.20089 -0.34152,0.41183 -0.14062,0.21093 -0.30133,0.51897 -0.21429,0.41518 -0.52233,1.14509 -0.19419,0.44196 -0.33147,0.7433 -0.13728,0.30134 -0.36161,0.70313 -0.22433,0.40178 -0.42857,0.66964 -0.20424,0.26786 -0.49553,0.5558 -0.2913,0.28795 -0.60268,0.45871 -0.31139,0.17076 -0.71317,0.28125 -0.40179,0.11049 -0.85714,0.11049 H 1.214245 q -0.09375,0 -0.154018,-0.0603 -0.060258,-0.0603 -0.060258,-0.15404 V 9.35716 q 0,-0.0937 0.06027,-0.15402 0.06027,-0.0603 0.154018,-0.0603 h 1.500004 q 0.32142,0 0.58258,-0.10044 0.26117,-0.10045 0.46206,-0.30134 0.20089,-0.20089 0.34152,-0.41183 0.14062,-0.21094 0.30134,-0.51898 0.21428,-0.41517 0.52232,-1.14508 0.19419,-0.44197 0.33147,-0.74331 0.13728,-0.30134 0.36161,-0.70312 0.22433,-0.40179 0.42857,-0.66965 0.20424,-0.26785 0.49553,-0.5558 0.2913,-0.28795 0.60268,-0.45871 0.31139,-0.17075 0.71317,-0.28124 0.40179,-0.1105 0.85715,-0.1105 h 1.71428 V 1.85713 q 0,-0.0937 0.0603,-0.15402 0.0603,-0.0603 0.15402,-0.0603 0.0803,0 0.16071,0.067 l 2.13616,2.13616 q 0.0603,0.0603 0.0603,0.15402 z">
+                        </path>
+                    </g>
+                    <g id="SVGRepo_iconCarrier">
+                        <path
+                            d="M 5.459789,4.64957 Q 5.058009,5.26564 4.542379,6.4777 4.395059,6.17636 4.294609,5.9922 4.194169,5.80805 4.023409,5.56698 3.852649,5.32591 3.681889,5.18863 3.511129,5.05136 3.260009,4.95426 3.008899,4.85716 2.714259,4.85716 H 1.214255 q -0.09375,0 -0.154018,-0.0603 Q 0.999969,4.73666 0.999969,4.64287 V 3.35716 q 0,-0.0937 0.06027,-0.15402 0.06027,-0.0603 0.154018,-0.0603 h 1.500004 q 1.6741,0 2.74553,1.5067 z m 7.54018,5.35045 q 0,0.0937 -0.0603,0.15402 l -2.14285,2.14285 q -0.0603,0.0603 -0.15402,0.0603 -0.0871,0 -0.15067,-0.0636 -0.0636,-0.0636 -0.0636,-0.15067 v -1.28571 q -0.21428,0 -0.5692,0.003 -0.35491,0.003 -0.54241,0.007 -0.1875,0.003 -0.48884,-0.007 -0.30133,-0.0101 -0.47544,-0.0335 -0.17411,-0.0234 -0.42857,-0.0703 -0.25447,-0.0469 -0.42188,-0.12388 -0.16741,-0.077 -0.38839,-0.19085 -0.22098,-0.11384 -0.39509,-0.26786 -0.17411,-0.15401 -0.3683,-0.35825 -0.1942,-0.20425 -0.375,-0.46541 0.39509,-0.62276 0.91071,-1.82812 0.14732,0.30134 0.24777,0.48549 0.10044,0.18415 0.2712,0.42522 0.17076,0.24107 0.34152,0.37835 0.17076,0.13728 0.42188,0.23438 0.25111,0.0971 0.54576,0.0971 h 1.71428 V 7.85687 q 0,-0.0937 0.0603,-0.15402 0.0603,-0.0603 0.15402,-0.0603 0.0803,0 0.16071,0.067 l 2.13616,2.13616 q 0.0603,0.0603 0.0603,0.15402 z m 0,-6 q 0,0.0937 -0.0603,0.15401 l -2.14285,2.14286 q -0.0603,0.0603 -0.15402,0.0603 -0.0871,0 -0.15067,-0.0636 -0.0636,-0.0636 -0.0636,-0.15067 V 4.85721 h -1.71428 q -0.32143,0 -0.58259,0.10045 -0.26116,0.10044 -0.46206,0.30134 -0.20089,0.20089 -0.34152,0.41183 -0.14062,0.21093 -0.30133,0.51897 -0.21429,0.41518 -0.52233,1.14509 -0.19419,0.44196 -0.33147,0.7433 -0.13728,0.30134 -0.36161,0.70313 -0.22433,0.40178 -0.42857,0.66964 -0.20424,0.26786 -0.49553,0.5558 -0.2913,0.28795 -0.60268,0.45871 -0.31139,0.17076 -0.71317,0.28125 -0.40179,0.11049 -0.85714,0.11049 H 1.214245 q -0.09375,0 -0.154018,-0.0603 -0.060258,-0.0603 -0.060258,-0.15404 V 9.35716 q 0,-0.0937 0.06027,-0.15402 0.06027,-0.0603 0.154018,-0.0603 h 1.500004 q 0.32142,0 0.58258,-0.10044 0.26117,-0.10045 0.46206,-0.30134 0.20089,-0.20089 0.34152,-0.41183 0.14062,-0.21094 0.30134,-0.51898 0.21428,-0.41517 0.52232,-1.14508 0.19419,-0.44197 0.33147,-0.74331 0.13728,-0.30134 0.36161,-0.70312 0.22433,-0.40179 0.42857,-0.66965 0.20424,-0.26785 0.49553,-0.5558 0.2913,-0.28795 0.60268,-0.45871 0.31139,-0.17075 0.71317,-0.28124 0.40179,-0.1105 0.85715,-0.1105 h 1.71428 V 1.85713 q 0,-0.0937 0.0603,-0.15402 0.0603,-0.0603 0.15402,-0.0603 0.0803,0 0.16071,0.067 l 2.13616,2.13616 q 0.0603,0.0603 0.0603,0.15402 z">
+                        </path>
+                    </g>
+                </svg>
+            </button>
+            <button class="primary-outline" onclick="restart()">🆕</button>
+        </div>
     </div>
 
     <div id="upload-popup" class="popup" style="display: none;">

diff --git a/js/main.js b/js/main.js
@@ -86,10 +86,7 @@ function goToStep1() {
 function processWorkbook(workbook) {
     const firstSheetName = workbook.SheetNames[0];
     const worksheet = workbook.Sheets[firstSheetName];
-
     const jsonSheet = XLSX.utils.sheet_to_json(worksheet, { header: 1 });
-
-    // Ignora la primera fila
     allPhrases = jsonSheet.slice(1).map(row => ({ level: row[0], phrase: row[1] })).filter(item => item.phrase);
 }
 
@@ -255,10 +252,6 @@ function showResults() {
     }
     document.getElementById('final-correct-count').textContent = correctCount;
     document.getElementById('final-error-count').textContent = errorCount;
-    const elapsedTime = Date.now() - startTime;
-    const minutes = Math.floor(elapsedTime / 60000);
-    const seconds = Math.floor((elapsedTime % 60000) / 1000);
-    document.getElementById('final-time').textContent = `${minutes}:${seconds < 10 ? '0' : ''}${seconds}`;
     const resultsStep = document.getElementById('step-3');
     resultsStep.style.display = 'flex';
     setTimeout(() => resultsStep.classList.add('active'), 50);

diff --git a/js/recognition.js b/js/recognition.js
@@ -26,6 +26,9 @@ if (!('webkitSpeechRecognition' in window)) {
     recognition.onstart = function () {
         recognizing = true;
         document.getElementById('start-rec-btn').classList.add('recording');
+        document.getElementById('recording-mic1').classList.add('recording');
+        document.getElementById('recording-mic2').classList.add('recording');
+        document.getElementById('recording-mic-pad').classList.add('recording');
     };
 
     recognition.onerror = function (event) {
@@ -35,6 +38,9 @@ if (!('webkitSpeechRecognition' in window)) {
     recognition.onend = function () {
         recognizing = false;
         document.getElementById('start-rec-btn').classList.remove('recording');
+        document.getElementById('recording-mic1').classList.remove('recording');
+        document.getElementById('recording-mic2').classList.remove('recording');
+        document.getElementById('recording-mic-pad').classList.remove('recording');
 
         if (currentIndex < phrases.length - 1) {
             setTimeout(() => playPhrase(), 500);