From ee7defb78afcf21042004494667546936aa77ed1 Mon Sep 17 00:00:00 2001 From: Andrew Zambazos Date: Sat, 26 Jul 2025 11:04:25 +1200 Subject: [PATCH] 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. --- assets/images/icons/Bing.svg | 19 ++++++++ assets/images/icons/duckduckgo.svg | 1 + assets/images/icons/google.svg | 2 + renderer/home.css | 74 ++++++++++++++++++++++++++++-- renderer/home.html | 32 +++++++++++-- renderer/home.js | 36 ++++++++++++++- 6 files changed, 154 insertions(+), 10 deletions(-) create mode 100644 assets/images/icons/Bing.svg create mode 100644 assets/images/icons/duckduckgo.svg create mode 100644 assets/images/icons/google.svg diff --git a/assets/images/icons/Bing.svg b/assets/images/icons/Bing.svg new file mode 100644 index 0000000..460382b --- /dev/null +++ b/assets/images/icons/Bing.svg @@ -0,0 +1,19 @@ + + + + + + + + + + + + + + \ No newline at end of file diff --git a/assets/images/icons/duckduckgo.svg b/assets/images/icons/duckduckgo.svg new file mode 100644 index 0000000..8215a91 --- /dev/null +++ b/assets/images/icons/duckduckgo.svg @@ -0,0 +1 @@ +duckduckgo \ No newline at end of file diff --git a/assets/images/icons/google.svg b/assets/images/icons/google.svg new file mode 100644 index 0000000..3ffa2aa --- /dev/null +++ b/assets/images/icons/google.svg @@ -0,0 +1,2 @@ + + \ No newline at end of file diff --git a/renderer/home.css b/renderer/home.css index 3ecbf75..7da1636 100644 --- a/renderer/home.css +++ b/renderer/home.css @@ -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; diff --git a/renderer/home.html b/renderer/home.html index eb111d5..f7f887d 100644 --- a/renderer/home.html +++ b/renderer/home.html @@ -15,11 +15,29 @@
Nebula Browser
-
- - +
+
+ + +
+
+ + +
@@ -58,4 +76,8 @@ + + + + diff --git a/renderer/home.js b/renderer/home.js index dc89d9a..308424d 100644 --- a/renderer/home.js +++ b/renderer/home.js @@ -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; });