Search mode categorization

.gitignore

@@ -0,0 +1,5 @@
+# Ignore macOS system files
+.DS_Store
+
+# Ignore VSCode workspace settings
+.vscode/

index.html

@@ -755,10 +755,10 @@ <h3 id="bookmarkViewAs">View as</h3>
             <!-- ----------search with------------------- -->
             <div class="searchWithCont" style="visibility: hidden;" id="search-with-container">
 
-                <div class="hint bgLightTint" id="searchWithHint">Search With</div>
+                <div class="hint bgLightTint" id="searchWithHint"></div>
 
                 <div class="searchEnginesContainer">
-                    <div class="search-engine bgLightTint">
+                    <div class="search-engine bgLightTint" data-category="search-with">
                         <!-- <img src="./svgs/google.svg" alt="G" class="logo"> -->
                         <svg fill="none" height="28" viewBox="0 0 28 28" width="28" xmlns="http://www.w3.org/2000/svg">
                             <rect class="accentColor" fill="#FF000F" height="28" rx="14" width="28" />
@@ -770,7 +770,7 @@ <h3 id="bookmarkViewAs">View as</h3>
                         <input checked class="radio-button" name="search-engine" type="radio" value="engine1">
                     </div>
 
-                    <div class="search-engine bgLightTint">
+                    <div class="search-engine bgLightTint" data-category="search-with">
                         <!-- <img src="./svgs/duck.svg" alt="D" class="logo"> -->
                         <svg fill="none" height="28" viewBox="0 0 28 28" width="28" xmlns="http://www.w3.org/2000/svg">
                             <rect class="accentColor" fill="#FF00ff" height="28" rx="14" width="28" />
@@ -782,19 +782,19 @@ <h3 id="bookmarkViewAs">View as</h3>
                         <input class="radio-button" name="search-engine" type="radio" value="engine2">
                     </div>
 
-                    <div class="search-engine bgLightTint">
+                    <div class="search-engine bgLightTint" data-category="search-with">
                         <!-- <img src="./svgs/bing.svg" alt="B" class="logo"> -->
                         <svg fill="none" height="28" viewBox="0 0 28 28" width="28" xmlns="http://www.w3.org/2000/svg">
                             <rect class="accentColor" fill="#FF000F" height="28" rx="14" width="28" />
                             <path class="darkIconForDarkTheme"
                                 d="M22.9991 13.1645C22.9954 13.0734 22.9651 12.9855 22.9119 12.9118C22.8588 12.8382 22.7853 12.7822 22.7007 12.751L13.8694 9.98251C13.7046 9.93107 13.6294 10.0197 13.7018 10.1788L15.3442 13.8304C15.4167 13.9904 15.604 14.18 15.7602 14.2524L18.0135 15.2966C18.1697 15.369 18.1735 15.4957 18.021 15.5776L8.40754 20.7525C8.25601 20.8345 8.23624 20.8059 8.36425 20.6887L12.0575 17.3219C12.197 17.1796 12.28 16.9905 12.291 16.7904L12.2947 6.58526C12.291 6.49394 12.2606 6.40578 12.2073 6.33199C12.154 6.25821 12.0803 6.20212 11.9954 6.17084L8.2993 5.01334C8.13459 4.9619 8 5.06383 8 5.24008V20.7211C8 20.8974 8.11483 21.1241 8.25601 21.2251L12.0114 23.9183C12.1526 24.0193 12.3879 24.0279 12.5357 23.9373L22.7308 17.723C22.8093 17.6688 22.8744 17.597 22.921 17.5133C22.9677 17.4295 22.9947 17.336 23 17.24V13.1645H22.9991Z"
                                 fill="white" />
                         </svg>
-                        <label class="engine-name" id="bingEngine">Bing</label>
+                        <label class="engine-name" id="bingEngine" data-category="search-with">Bing</label>
                         <input class="radio-button" name="search-engine" type="radio" value="engine3">
                     </div>
 
-                    <div class="search-engine bgLightTint">
+                    <div class="search-engine bgLightTint" data-category="search-with">
                         <!-- <img src="./svgs/brave.svg" alt="B" class="logo"> -->
                         <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 -0.5 24 24">
                             <rect class="accentColor" fill="#FF000F" height="28" rx="14" width="28" />
@@ -806,7 +806,7 @@ <h3 id="bookmarkViewAs">View as</h3>
                         <input class="radio-button" name="search-engine" type="radio" value="engine4">
                     </div>
 
-                    <div class="search-engine bgLightTint">
+                    <div class="search-engine bgLightTint" data-category="search-on">
                         <!-- <img src="./svgs/youtube.svg" alt="Y" class="logo"> -->
                         <svg fill="none" height="28" viewBox="0 0 28 28" width="28" xmlns="http://www.w3.org/2000/svg">
                             <rect class="accentColor" fill="#FF000F" height="28" rx="14" width="28" />
@@ -1036,7 +1036,8 @@ <h1>Material You NewTab</h1>
                         <div class="ttcont" id="adaptiveIconField">
                             <div class="texts">
                                 <div class="bigText" id="adaptiveIconText">Adaptive Icons</div>
-                                <div class="infoText" id="adaptiveIconInfoText">Shortcut icons will match the theme color and appear smaller
+                                <div class="infoText" id="adaptiveIconInfoText">Shortcut icons will match the theme
+                                    color and appear smaller
                                 </div>
                             </div>
                             <label class="switch">
@@ -1432,4 +1433,4 @@ <h1>Material You NewTab</h1>
 
 </body>
 
-</html>
+</html>

locales/en.js

@@ -92,6 +92,7 @@ const en = {
     "searchPlaceholder": "Type here...",
     "listenPlaceholder": "Listening...",
     "searchWithHint": "Search With",
+    "searchOnHint": "Search On",
     "userText": "Click here to edit",
 
     // Greeting

scripts/script.js

@@ -1207,6 +1207,46 @@ document.addEventListener("click", function (event) {
     }
 });
 
+// Search mode function
+const searchWith = document.getElementById('searchWithHint');
+const searchEngines = document.querySelectorAll('.searchEnginesContainer .search-engine');
+const searchEnginesContainer = document.querySelector('.searchEnginesContainer');
+let activeSearchMode = localStorage.getItem("activeSearchMode") || "search-with";
+
+searchWith.addEventListener('click', function () {
+    if (activeSearchMode === 'search-with') {
+        activeSearchMode = 'search-on';
+        searchEnginesContainer.classList.toggle('show');
+        toggleSearchEngines('search-on');
+    } else {
+        activeSearchMode = 'search-with'
+        searchEnginesContainer.classList.toggle('show');
+        toggleSearchEngines('search-with');
+    }
+    setTimeout(() => {
+        searchEnginesContainer.classList.remove('show');
+    }, 300);
+});
+
+function toggleSearchEngines(category) {
+    const defaultItems = {
+        'search-with' : "engine1",
+        'search-on' : "engine5",
+    }
+    const checkeditem = localStorage.getItem(`selectedSearchEngine-${category}`) || defaultItems[category];
+    const namee = category.split("-").map((elem,index)=>{return ((index==0) ? elem[0] : elem[0].toUpperCase())+elem.substring(1)}).join("")+"Hint";
+    document.getElementById('searchWithHint').innerText = translations[currentLanguage][namee] || translations["en"][namee]
+
+    searchEngines.forEach(engine => {
+        if (engine.getAttribute('data-category') === category) {
+            engine.style.display = 'flex';
+        } else {
+            engine.style.display = 'none';
+        }
+        if (engine.lastElementChild.value === checkeditem){ engine.lastElementChild.click() }
+    });
+}
+
 // Search function
 document.addEventListener("DOMContentLoaded", () => {
     const dropdown = document.querySelector(".dropdown-content");
@@ -1266,7 +1306,8 @@ document.addEventListener("DOMContentLoaded", () => {
             swapDropdown(selector);
             sortDropdown()
 
-            localStorage.setItem("selectedSearchEngine", radioButton.value);
+            localStorage.setItem(`selectedSearchEngine-${radioButton.parentElement.dataset.category}`, radioButton.value);
+            localStorage.setItem(`activeSearchMode`, radioButton.parentElement.dataset.category);
         });
     });
 
@@ -1285,7 +1326,8 @@ document.addEventListener("DOMContentLoaded", () => {
             swapDropdown(selector);
             sortDropdown()
 
-            localStorage.setItem("selectedSearchEngine", radioButton.value);
+            localStorage.setItem(`selectedSearchEngine-${radioButton.parentElement.dataset.category}`, radioButton.value);
+            localStorage.setItem(`activeSearchMode`, radioButton.parentElement.dataset.category);
         });
     });
 
@@ -1337,7 +1379,18 @@ document.addEventListener("DOMContentLoaded", () => {
     });
 
     // Set selected search engine from local storage
-    const storedSearchEngine = localStorage.getItem("selectedSearchEngine");
+    let activeSearchMode = localStorage.getItem("activeSearchMode") || "search-with";
+    const storedSearchEngine = localStorage.getItem(`selectedSearchEngine-${activeSearchMode}`);
+
+    if (activeSearchMode) {
+        if (activeSearchMode !== 'search-with') {
+            searchWith.innerText = translations[currentLanguage].searchOnHint || translations['en'].searchOnHint;
+            toggleSearchEngines('search-on');
+        } else {
+            searchWith.innerText = translations[currentLanguage].searchWithHint || translations['en'].searchWithHint;
+            toggleSearchEngines('search-with');
+        }
+    }
 
     if (storedSearchEngine) {
         // Find Serial Number - SN with the help of charAt.
@@ -1412,8 +1465,9 @@ document.addEventListener("DOMContentLoaded", () => {
     // Event listener for search engine radio buttons
     searchEngineRadio.forEach((radio) => {
         radio.addEventListener("change", () => {
-            const selectedOption = document.querySelector('input[name="search-engine"]:checked').value;
-            localStorage.setItem("selectedSearchEngine", selectedOption);
+            const selectedOption = document.querySelector('input[name="search-engine"]:checked');
+            localStorage.setItem(`selectedSearchEngine-${selectedOption.parentElement.dataset.category}`, selectedOption.value);
+            localStorage.setItem(`activeSearchMode`, selectedOption.parentElement.dataset.category);
         });
     });
     // -----Theme stay changed even if user reload the page---

style.css

@@ -1584,24 +1584,29 @@ body #bookmarkButton.bookmark-button.rotate {
 /* ________________End of Searchbar______________________ */
 
 .searchWithCont {
-	margin-top: var(--gap);
-	border-radius: var(--round);
-	position: relative;
-	display: flex;
-	font-size: 1rem;
+    margin-top: var(--gap);
+    border-radius: var(--round);
+    position: relative;
+    display: flex;
+    font-size: 1rem;
+    z-index: 2; /* Ensures it's above the engines container */
+    overflow: hidden; /* Prevents child elements from overflowing outside */
+	max-width: 100%;
 }
 
 .searchWithCont .hint {
-	/* background-color: var(--accentLightTint-blue); */
-	width: 200px;
+	flex: 0 0 auto; /* Prevents it from growing */
+	width: 150px; /* Fixed width */
 	height: 100px;
+	white-space: nowrap; /* Prevents text from wrapping when search modes are changed*/
 	display: flex;
 	align-items: center;
 	justify-content: center;
 	padding: 10px;
 	position: relative;
 	margin-right: 16px;
 	border-radius: var(--round);
+	transition: transform 0.4s ease;
 }
 
 .searchWithCont .hint::after {
@@ -1614,24 +1619,85 @@ body #bookmarkButton.bookmark-button.rotate {
 	right: -20px;
 }
 
+.searchWithCont .hint::before {
+	content: "";
+	position: absolute;
+	height: auto;
+	width: 100%;
+	aspect-ratio: 1;
+	background-color: var(--accentLightTint-blue);
+	border-radius: 50%;  /* Changed from 300px to 50% for perfect circle */
+	left: 50%;
+	top: 50%;
+	transform: translate(-50%, -50%);
+	z-index: 1;
+	transform-origin: center;  /* Changed to center for better scaling */
+	opacity: 0;
+	pointer-events: none;  /* Ensures the ripple doesn't interfere with clicks */
+}
+
+.searchWithCont .hint:active::before {
+	animation: ripple_effect 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
+	/* Using cubic-bezier for smoother easing */
+}
+
+@keyframes ripple_effect {
+    0% {
+        transform: translate(-50%, -50%) scale(0);
+        opacity: 0.40;  /* Reduced initial opacity */
+    }
+    50% {
+        opacity: 0.20;  /* Mid-point opacity for smoother fade */
+    }
+    100% {
+        transform: translate(-50%, -50%) scale(2);  /* Increased scale for bigger effect */
+        opacity: 0;
+    }
+}
+
+.searchWithCont .hint:hover {
+    background-color: var(--darkColor-blue);
+    color: #fff;
+}
+
 .searchEnginesContainer {
-	display: flex;
-	flex-wrap: wrap;
-	gap: 20px;
-	padding-left: 20px;
+    position: relative; 
+    z-index: 1; 
+    display: flex;
+    flex-wrap: wrap;
+    gap: 20px;
+    padding-left: 20px;
+    opacity: 1; 
+	transform: translateX(0);
+}
+.searchEnginesContainer.show{
+	animation: slideIn 0.3s ease-in-out forwards;
+}
+
+@keyframes slideIn {
+	from {
+		transform: translateX(100%);
+		opacity: 0.2;
+	}
+	to {
+		transform: translateX(0);
+		opacity: 1;
+	}
 }
 
 .searchEnginesContainer .search-engine {
-	/* background-color: var(--accentLightTint-blue); */
-	border-radius: 20px;
-	height: 40px;
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	position: relative;
-	cursor: pointer;
+    border-radius: 20px;
+    height: 40px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+    cursor: pointer;
+    opacity: 1;
+    transition: opacity 0.3s ease-in-out;
 }
 
+
 .searchEnginesContainer .search-engine svg{
 	width: 30px;
 	height: 30px;