Add search engine selector to search bar UI

Introduced a search engine selector dropdown in the search bar, allowing users to choose between Google, Bing, and DuckDuckGo. Updated the search logic to use the selected engine and added corresponding SVG icons. Adjusted CSS and HTML structure to accommodate the new selector.
2025-07-26 11:04:25 +12:00
parent f04968c854
commit ee7defb78a
6 changed files with 154 additions and 10 deletions
@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:xodm="http://www.corel.com/coreldraw/odm/2003" viewBox="0 0 396 537">
+  <!-- Generator: Adobe Illustrator 29.6.1, SVG Export Plug-In . SVG Version: 2.1.1 Build 9)  -->
+  <defs>
+    <style>
+      .st0 {
+        fill: url(#linear-gradient);
+        fill-rule: evenodd;
+      }
+    </style>
+    <linearGradient id="linear-gradient" x1="33174.52" y1="-10318.51" x2="32748.82" y2="-30894.15" gradientTransform="translate(-738.46 -250.12) scale(.03 -.03)" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#26b8f4"/>
+      <stop offset="1" stop-color="#1b48ef"/>
+    </linearGradient>
+  </defs>
+  <g id="Camada_x5F_1">
+    <polygon class="st0" points="18.24 7.68 121.67 44.11 122.02 406.95 266.22 322.9 195.86 289.99 150.71 177.85 379.62 258.02 379.43 375.52 121.65 524 18.58 466.65 18.24 7.68"/>
+  </g>
+</svg>
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 122.88 122.88"><defs><style>.a{fill:#d53;}.b{fill:#fff;}.c{fill:#ddd;}.d{fill:#fc0;}.e{fill:#6b5;}.f{fill:#4a4;}.g{fill:#148;}</style></defs><title>duckduckgo</title><path class="a" d="M122.88,61.44a61.44,61.44,0,1,0-61.44,61.44,61.44,61.44,0,0,0,61.44-61.44Z"/><path class="b" d="M114.37,61.44a52.92,52.92,0,1,0-15.5,37.43,52.76,52.76,0,0,0,15.5-37.43Zm-13.12-39.8A56.29,56.29,0,1,1,61.44,5.15a56.12,56.12,0,0,1,39.81,16.49Z"/><path class="c" d="M43.24,30.15C26.17,34.13,32.43,58,32.43,58l10.81,52.9,4,1.71-4-82.49Zm-4-10.24H34.7L41,22.19s-6.26,0-6.26,4C48.36,25.6,54.61,29,54.61,29l-15.36-9.1Zm0,0Z"/><path class="b" d="M75.66,115.48S62,93.87,62,79.64c0-26.73,17.63-4,17.63-25S62,28.44,62,28.44c-8.53-10.8-25-8.53-25-8.53l4,2.28s-4,1.13-5.12,2.27,10.81-1.7,15.93,2.85C30.72,29,34.13,46.08,34.13,46.08l11.95,68.27,29.58,1.13Zm0,0Z"/><path class="d" d="M75.66,60.87l21.62-5.69C116.62,58,80.78,68.84,78.51,68.27c-17.07-2.85-12,11.37,8.53,6.82s5.12,11.38-13.65,5.12c-26.74-7.39-12.52-20.48,2.27-19.34Z"/><path class="e" d="M70,105.81l1.14-1.7c12.52,4.55,13.09,6.25,12.52-5.12s0-11.38-13.09-1.71c0-2.84-7.39-1.71-8.53,0-11.95-5.12-13.09-6.83-12.52,1.14,1.14,16.5.57,13.65,11.95,8l8.53-.57Zm0,0Z"/><path class="f" d="M60.87,99.56v6.82c.57,1.14,9.67,1.14,9.67-1.14s-4.55,1.71-7.39.57S62,98.42,62,98.42l-1.14,1.14Zm0,0Z"/><path class="g" d="M48.36,43.24c-2.85-3.42-10.24-.57-8.54,4,.57-2.28,4.55-5.69,8.54-4Zm18.2,0c.57-3.42,6.26-4,8-.57a8,8,0,0,0-8,.57Zm-18.77,9.1a1.14,1.14,0,1,1,0,.57v-.57Zm-4.55,2.27a4,4,0,1,0,0-.57v.57Zm29.58-4a1.14,1.14,0,1,1,0,.57v-.57ZM69.4,52.91a3.42,3.42,0,1,0,0-.57v.57Zm0,0Z"/></svg>
@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="-3 0 262 262" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid"><path d="M255.878 133.451c0-10.734-.871-18.567-2.756-26.69H130.55v48.448h71.947c-1.45 12.04-9.283 30.172-26.69 42.356l-.244 1.622 38.755 30.023 2.685.268c24.659-22.774 38.875-56.282 38.875-96.027" fill="#4285F4"/><path d="M130.55 261.1c35.248 0 64.839-11.605 86.453-31.622l-41.196-31.913c-11.024 7.688-25.82 13.055-45.257 13.055-34.523 0-63.824-22.773-74.269-54.25l-1.531.13-40.298 31.187-.527 1.465C35.393 231.798 79.49 261.1 130.55 261.1" fill="#34A853"/><path d="M56.281 156.37c-2.756-8.123-4.351-16.827-4.351-25.82 0-8.994 1.595-17.697 4.206-25.82l-.073-1.73L15.26 71.312l-1.335.635C5.077 89.644 0 109.517 0 130.55s5.077 40.905 13.925 58.602l42.356-32.782" fill="#FBBC05"/><path d="M130.55 50.479c24.514 0 41.05 10.589 50.479 19.438l36.844-35.974C195.245 12.91 165.798 0 130.55 0 79.49 0 35.393 29.301 13.925 71.947l42.211 32.783c10.59-31.477 39.891-54.251 74.414-54.251" fill="#EB4335"/></svg>
@@ -59,18 +59,26 @@ body, html {
  font-weight: bold;
 }

+/* Search bar container */
+.search-container {
+  display: flex;
+  align-items: center;
+  margin-bottom: 2rem;
+  width: 550px; /* Increased width for the new button */
+  max-width: 95vw;
+}
+
 /* Search bar */
 .search-bar {
  display: flex;
+  flex: 1; /* Allow search bar to take remaining space */
  align-items: center;
  background: #ffffff;
-  border-radius: 70px;
+  border-radius: 0 70px 70px 0; /* Curve right side */
  box-shadow: 0 4px 20px rgba(0,0,0,0.2);
  padding: 0.25rem;
-  margin-bottom: 2rem;
-  width: 500px;
-  max-width: 90vw;
  overflow: hidden;
+  height: 54px; /* Match button height */
 }

 .search-bar input.search-input {
@@ -110,6 +118,64 @@ body, html {
  box-shadow: none;
 }

+/* Search Engine Selector */
+.search-engine-selector {
+  position: relative;
+}
+
+.search-engine-btn {
+  background: #ffffff;
+  border: none;
+  border-radius: 70px 0 0 70px; /* Curve left side */
+  padding: 0.25rem 0.5rem 0.25rem 1rem;
+  cursor: pointer;
+  height: 54px;
+  display: flex;
+  align-items: center;
+  box-shadow: 0 4px 20px rgba(0,0,0,0.2);
+}
+
+.search-engine-btn img {
+  width: 24px;
+  height: 24px;
+}
+
+.search-engine-dropdown {
+  position: absolute;
+  top: 110%;
+  left: 0;
+  background: #ffffff;
+  border-radius: 8px;
+  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
+  z-index: 100;
+  padding: 0.5rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.search-engine-dropdown.hidden {
+  display: none;
+}
+
+.search-engine-option {
+  cursor: pointer;
+  padding: 0.5rem;
+  border-radius: 4px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.search-engine-option:hover {
+  background-color: #f0f0f0;
+}
+
+.search-engine-option img {
+  width: 24px;
+  height: 24px;
+}
+
 /* Bookmark grid */
 .bookmarks {
  display: flex;
@@ -15,11 +15,29 @@
      <div class="logo-text">Nebula Browser</div>
    </div>

-    <div class="search-bar">
-      <input type="text" id="searchInput" class="search-input" placeholder="Search">
-      <button id="searchBtn" class="search-btn">
-        <span class="material-symbols-outlined">search</span>
-      </button>
+    <div class="search-container">
+      <div class="search-engine-selector">
+        <button id="searchEngineBtn" class="search-engine-btn">
+          <img id="searchEngineLogo" src="../assets/images/icons/google.svg" alt="Search Engine">
+        </button>
+        <div id="searchEngineDropdown" class="search-engine-dropdown hidden">
+          <div class="search-engine-option" data-engine="google">
+            <img src="../assets/images/icons/google.svg" alt="Google">
+          </div>
+          <div class="search-engine-option" data-engine="bing">
+            <img src="../assets/images/icons/bing.svg" alt="Bing">
+          </div>
+          <div class="search-engine-option" data-engine="duckduckgo">
+            <img src="../assets/images/icons/duckduckgo.svg" alt="DuckDuckGo">
+          </div>
+        </div>
+      </div>
+      <div class="search-bar">
+        <input type="text" id="searchInput" class="search-input" placeholder="Search">
+        <button id="searchBtn" class="search-btn">
+          <span class="material-symbols-outlined">search</span>
+        </button>
+      </div>
    </div>

    <div class="bookmarks" id="bookmarkList">
@@ -58,4 +76,8 @@
  <!-- make this a module so we can import icons -->
  <script type="module" src="home.js"></script>
 </body>
+</html>
+  <!-- make this a module so we can import icons -->
+  <script type="module" src="home.js"></script>
+</body>
 </html>
@@ -10,12 +10,22 @@ const cancelBtn         = document.getElementById('cancelBtn');
 const addPopup          = document.getElementById('addPopup');
 const searchBtn         = document.getElementById('searchBtn');
 const searchInput       = document.getElementById('searchInput');
+const searchEngineBtn   = document.getElementById('searchEngineBtn');
+const searchEngineDropdown = document.getElementById('searchEngineDropdown');
+const searchEngineLogo  = document.getElementById('searchEngineLogo');
 const iconFilter       = document.getElementById('iconFilter');
 const iconGrid         = document.getElementById('iconGrid');
 const selectedIconInput= document.getElementById('selectedIcon');
 let selectedIcon       = initialIcons[0];
 let availableIcons     = initialIcons;

+const searchEngines = {
+  google: 'https://www.google.com/search?q=',
+  bing: 'https://www.bing.com/search?q=',
+  duckduckgo: 'https://duckduckgo.com/?q='
+};
+let selectedSearchEngine = 'google';
+
 let bookmarks = JSON.parse(localStorage.getItem(BOOKMARKS_KEY)) || [];

 function saveBookmarks() {
@@ -130,6 +140,29 @@ cancelBtn.onclick = () => {
  addPopup.classList.add('hidden');
 };

+// --- Search Engine Dropdown Logic ---
+searchEngineBtn.addEventListener('click', (e) => {
+  e.stopPropagation();
+  searchEngineDropdown.classList.toggle('hidden');
+});
+
+document.addEventListener('click', () => {
+  if (!searchEngineDropdown.classList.contains('hidden')) {
+    searchEngineDropdown.classList.add('hidden');
+  }
+});
+
+searchEngineDropdown.addEventListener('click', (e) => {
+  const option = e.target.closest('.search-engine-option');
+  if (option) {
+    selectedSearchEngine = option.dataset.engine;
+    const newLogoSrc = option.querySelector('img').src;
+    searchEngineLogo.src = newLogoSrc;
+    searchEngineDropdown.classList.add('hidden');
+  }
+});
+// --- End Search Engine Dropdown Logic ---
+
 searchBtn.addEventListener('click', () => {
  const input = searchInput.value.trim();
  const hasProtocol = /^https?:\/\//i.test(input);
@@ -138,7 +171,8 @@ searchBtn.addEventListener('click', () => {
  if (looksLikeUrl) {
    target = hasProtocol ? input : `https://${input}`;
  } else {
-    target = `https://www.google.com/search?q=${encodeURIComponent(input)}`;
+    const searchEngineUrl = searchEngines[selectedSearchEngine];
+    target = `${searchEngineUrl}${encodeURIComponent(input)}`;
  }
  window.location.href = target;
 });
				`@@ -0,0 +1 @@`
				<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 122.88 122.88"><defs><style>.a{fill:#d53;}.b{fill:#fff;}.c{fill:#ddd;}.d{fill:#fc0;}.e{fill:#6b5;}.f{fill:#4a4;}.g{fill:#148;}</style></defs><title>duckduckgo</title><path class="a" d="M122.88,61.44a61.44,61.44,0,1,0-61.44,61.44,61.44,61.44,0,0,0,61.44-61.44Z"/><path class="b" d="M114.37,61.44a52.92,52.92,0,1,0-15.5,37.43,52.76,52.76,0,0,0,15.5-37.43Zm-13.12-39.8A56.29,56.29,0,1,1,61.44,5.15a56.12,56.12,0,0,1,39.81,16.49Z"/><path class="c" d="M43.24,30.15C26.17,34.13,32.43,58,32.43,58l10.81,52.9,4,1.71-4-82.49Zm-4-10.24H34.7L41,22.19s-6.26,0-6.26,4C48.36,25.6,54.61,29,54.61,29l-15.36-9.1Zm0,0Z"/><path class="b" d="M75.66,115.48S62,93.87,62,79.64c0-26.73,17.63-4,17.63-25S62,28.44,62,28.44c-8.53-10.8-25-8.53-25-8.53l4,2.28s-4,1.13-5.12,2.27,10.81-1.7,15.93,2.85C30.72,29,34.13,46.08,34.13,46.08l11.95,68.27,29.58,1.13Zm0,0Z"/><path class="d" d="M75.66,60.87l21.62-5.69C116.62,58,80.78,68.84,78.51,68.27c-17.07-2.85-12,11.37,8.53,6.82s5.12,11.38-13.65,5.12c-26.74-7.39-12.52-20.48,2.27-19.34Z"/><path class="e" d="M70,105.81l1.14-1.7c12.52,4.55,13.09,6.25,12.52-5.12s0-11.38-13.09-1.71c0-2.84-7.39-1.71-8.53,0-11.95-5.12-13.09-6.83-12.52,1.14,1.14,16.5.57,13.65,11.95,8l8.53-.57Zm0,0Z"/><path class="f" d="M60.87,99.56v6.82c.57,1.14,9.67,1.14,9.67-1.14s-4.55,1.71-7.39.57S62,98.42,62,98.42l-1.14,1.14Zm0,0Z"/><path class="g" d="M48.36,43.24c-2.85-3.42-10.24-.57-8.54,4,.57-2.28,4.55-5.69,8.54-4Zm18.2,0c.57-3.42,6.26-4,8-.57a8,8,0,0,0-8,.57Zm-18.77,9.1a1.14,1.14,0,1,1,0,.57v-.57Zm-4.55,2.27a4,4,0,1,0,0-.57v.57Zm29.58-4a1.14,1.14,0,1,1,0,.57v-.57ZM69.4,52.91a3.42,3.42,0,1,0,0-.57v.57Zm0,0Z"/></svg>