nebula-project/NebulaBrowser
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

Add search engine selector to search bar UI

Browse Source 
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.
This commit is contained in:
Andrew Zambazos
2025-07-26 11:04:25 +12:00
parent f04968c854
commit ee7defb78a
6 changed files with 154 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files
renderer/home.html
+27 -5
View File
@@ -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>