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; });