From dfbc5824389ba7551ebe557ff576048bf2f41577 Mon Sep 17 00:00:00 2001 From: Prem Kumar <60751338+prem-k-r@users.noreply.github.com> Date: Mon, 11 Nov 2024 01:17:17 +0530 Subject: [PATCH 1/4] Update index.html --- index.html | 19 ++++++++++++++++--- 1 file changed, 16 insertions(+), 3 deletions(-) diff --git a/index.html b/index.html index ad45e7f0..304c2ae7 100644 --- a/index.html +++ b/index.html @@ -142,8 +142,21 @@ - - +
+ + +
+ +
+ + + +
+ + +
+

@@ -725,4 +738,4 @@

Material You NewTab

- \ No newline at end of file + From cbe3bb6d353452e97c906785a919ab98d568e52c Mon Sep 17 00:00:00 2001 From: Prem Kumar <60751338+prem-k-r@users.noreply.github.com> Date: Mon, 11 Nov 2024 01:20:13 +0530 Subject: [PATCH 2/4] Update script.js --- script.js | 48 ++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 48 insertions(+) diff --git a/script.js b/script.js index e035a6c0..076fff33 100644 --- a/script.js +++ b/script.js @@ -642,6 +642,54 @@ document.addEventListener("DOMContentLoaded", () => { }); +// -----------Voice Search------------ +const micIcon = document.getElementById("micIcon"); +const searchInput = document.getElementById("searchQ"); +const resultBox = document.getElementById("resultBox"); +const currentLanguage = getLanguageStatus('selectedLanguage') || 'en'; + +// Check if the browser supports SpeechRecognition API +const isSpeechRecognitionAvailable = 'webkitSpeechRecognition' in window || 'SpeechRecognition' in window; + +if (isSpeechRecognitionAvailable) { + // Initialize SpeechRecognition (cross-browser compatibility) + const recognition = new (window.SpeechRecognition || window.webkitSpeechRecognition)(); + recognition.continuous = false; // Stop recognition after first result + recognition.interimResults = false; // Do not return intermediate results + recognition.lang = currentLanguage; // Set the language dynamically based on selected language + + // When speech recognition starts + recognition.onstart = () => { + micIcon.style.color = 'var(--darkerColor-blue)'; // Change mic color when listening + micIcon.style.transform = 'scale(1.1)'; + }; + + // When speech recognition results are available + recognition.onresult = (event) => { + const transcript = event.results[0][0].transcript; // Get the text from the speech input + searchInput.value = transcript; // Set the value of search input to the transcript + resultBox.style.display = 'none'; // Hide result box after input + }; + + // When an error occurs during speech recognition + recognition.onerror = (event) => { + console.error('Speech recognition error: ', event.error); + }; + + // When speech recognition ends (either by user or automatically) + recognition.onend = () => { + micIcon.style.color = 'var(--darkColor-blue)'; // Reset mic color + micIcon.style.transform = 'scale(1)'; // Reset scaling + }; + + // Start speech recognition when mic icon is clicked + micIcon.addEventListener('click', () => { + recognition.start(); // Start speech recognition when mic icon is clicked + }); +} else { + console.warn('Speech Recognition API not supported in this browser.'); +} +// -----------End of Voice Search------------ // Function to apply the selected theme From 7cbb8f7a42ddb5a9eb438d52eac00ffbb43d83d4 Mon Sep 17 00:00:00 2001 From: Prem Kumar <60751338+prem-k-r@users.noreply.github.com> Date: Mon, 11 Nov 2024 01:22:55 +0530 Subject: [PATCH 3/4] Update style.css --- style.css | 39 ++++++++++++++++++++++++++++++++------- 1 file changed, 32 insertions(+), 7 deletions(-) diff --git a/style.css b/style.css index f53c466b..0ffa0dee 100644 --- a/style.css +++ b/style.css @@ -581,7 +581,7 @@ body { display: block; position: absolute; height: 80%; - width: calc(100% - 120px); + width: calc(100% - 165px); top: 0; bottom: 0; margin: auto auto auto 20px; @@ -593,12 +593,37 @@ body { font-size: 1rem; } -#enterBtn { +.searchControls { position: absolute; - right: 10px; - top: 0; - bottom: 0; - margin: auto; + right: 10px; + display: flex; + align-items: center; + height: 100%; +} + +.micIcon { + width: 36px; + height: 36px; + margin-right: 10px; + display: flex; + align-items: center; + justify-content: center; + position: relative; + color: var(--darkColor-blue); + cursor: pointer; + border-radius: 50%; + padding: 3px; + box-sizing: content-box; + background-color: white; + transition: color 0.3s, transform 0.2s; +} + +.micIcon:hover { + color: var(--darkerColor-blue); + transform: scale(1.1); +} + + #enterBtn { height: 40px; border-radius: 100px; padding: 0 26px; @@ -607,7 +632,7 @@ body { background-color: var(--darkColor-blue); color: white; transition: all 0.3s; -} + } #enterBtn:hover { background-color: var(--darkColor-blue); From 9db77cf115e49503ff7c5603e151cc0a76f4e8d9 Mon Sep 17 00:00:00 2001 From: Prem Kumar <60751338+prem-k-r@users.noreply.github.com> Date: Mon, 11 Nov 2024 03:32:13 +0530 Subject: [PATCH 4/4] Update script.js Forgot to delete, duplicate variable declaration --- script.js | 1 - 1 file changed, 1 deletion(-) diff --git a/script.js b/script.js index 076fff33..8d698279 100644 --- a/script.js +++ b/script.js @@ -1009,7 +1009,6 @@ document.getElementById("0NIHK").onclick = () => { } // ------------search suggestions --------------- -const resultBox = document.querySelector('.resultBox'); // Show the result box function showResultBox() {