Skip to content

Commit

Permalink
Adding Feature/search engine selection (#257)
Browse files Browse the repository at this point in the history 
* final search shortcut push

* update styles

* update margin

* update dropdown

* update dropdown

* update  radios

* rearrange menu

* Resolve issues

* update margin

* fix issue in search
  • Loading branch information
@princevora
princevora authored Dec 5, 2024
1 parent ef8d575 commit e9dafcd
Show file tree
Hide file tree
Showing 3 changed files with 379 additions and 3 deletions.
108 changes: 107 additions & 1 deletion index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -537,6 +537,99 @@
fill-rule="evenodd" />
</svg>
</div>
<div class="searchIcon">
<!-- Dropdown Button -->
<div class="dropdown search-dropdown">
<button id="default-dropdown-item" style="cursor: pointer;" role="button" class="dropdown-btn">
<div id="google-dropdown" data-default data-engine-name="google" data-engine="1" class="dropdown-item">
<!-- Default Google Icon -->
<svg fill="none" height="30" viewBox="0 0 28 28" width="30"
xmlns="http://www.w3.org/2000/svg">
<rect class="accentColor" fill="#FF000F" height="28" rx="14" width="28" />
<path class="darkIconForDarkTheme"
d="M24.805 12.0177C24.9359 12.756 25.0011 13.504 25 14.2534C25 17.6 23.7796 20.4297 21.6559 22.345H21.6587C19.8016 24.0265 17.2487 25 14.2216 25C11.2455 25 8.3912 23.8411 6.28674 21.7783C4.18227 19.7154 3 16.9176 3 14.0004C3 11.0831 4.18227 8.28528 6.28674 6.22244C8.3912 4.15961 11.2455 3.00073 14.2216 3.00073C17.0073 2.96875 19.6976 3.99459 21.7289 5.86338L18.5251 9.00378C17.367 7.92165 15.8214 7.32907 14.2216 7.35383C11.2942 7.35383 8.80719 9.28977 7.92068 11.8967C7.45064 13.2627 7.45064 14.7421 7.92068 16.1082H7.92489C8.8156 18.711 11.2984 20.6469 14.2258 20.6469C15.7379 20.6469 17.0368 20.2674 18.044 19.5964H18.0398C18.6246 19.2167 19.1248 18.7247 19.5103 18.1502C19.8958 17.5758 20.1585 16.9307 20.2827 16.2539H14.2216V12.0191L24.805 12.0177Z"
fill="white" transform="scale(0.8) translate(2.8, 2.8)" />
</svg>
<span class="engine-name">
Google
</span>
</div>
</button>
<div class="dropdown-content">
<!-- Duck -->
<div data-engine="2" data-engine-name="duck" id="duck-dropdown" class="dropdown-item">
<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" />
<path class="darkIconForDarkTheme"
d="M10.5 7C10.1022 7 9.72064 7.15804 9.43934 7.43934C9.15804 7.72064 9 8.10218 9 8.5C9 8.89782 9.15804 9.27936 9.43934 9.56066C9.72064 9.84196 10.1022 10 10.5 10C10.8978 10 11.2794 9.84196 11.5607 9.56066C11.842 9.27936 12 8.89782 12 8.5C12 8.10218 11.842 7.72064 11.5607 7.43934C11.2794 7.15804 10.8978 7 10.5 7ZM12 4C13.3261 4 14.5979 4.52678 15.5355 5.46447C16.4732 6.40215 17 7.67392 17 9C17 10.7 16.15 12.2 14.86 13.1C16.44 13.25 18.22 13.61 20 14.5C23 16 24 14 24 14C24 14 23 23 17 23H11C11 23 6 23 6 18C6 15 9 14 8 12C4 12 4 8.5 4 8.5C5 9 6.24 9 7 8.65C7.09333 7.3872 7.66043 6.20632 8.58766 5.34399C9.5149 4.48166 10.7338 4.0016 12 4Z"
fill="white" transform="scale(0.8) translate(2.4, 2.4)" />
</svg>
<span class="engine-name">
Duck
</span>
</div>
<!-- Bing -->
<div data-engine="3" data-engine-name="bing" id="bing-dropdown" class="dropdown-item">
<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>
<span class="engine-name">
Bing
</span>
</div>
<div data-engine="4" data-engine-name="brave" id="brave-dropdown" class="dropdown-item">
<svg version="1.0" xmlns="http://www.w3.org/2000/svg" width="30" height="30"
viewBox="0 0 300.000000 300.000000" preserveAspectRatio="xMidYMid meet">
<g class="accentColor"
transform="translate(-75.000000,380.000000) scale(0.150000,-0.150000)"
fill="#FF000F" stroke="none">
<rect class="accentColor" fill="#FF000F" height="28" rx="14" width="28" />
<path class="darkIconForDarkTheme" d="M1238 2301 c-1 -5 -31 -40 -65 -78 l-62 -69 -59 4 c-73 5 -99 -7
-174 -84 l-56 -57 19 -44 19 -45 -26 -73 c-22 -62 -24 -79 -15 -107 6 -18 46
-171 91 -340 44 -170 89 -328 101 -353 12 -25 42 -64 68 -86 70 -62 397 -279
420 -279 22 0 349 215 419 275 58 50 83 105 127 275 20 80 47 183 60 230 12
47 37 137 54 201 l31 116 -26 68 -25 69 19 46 19 46 -42 45 c-89 94 -100 100
-178 98 l-71 -2 -70 77 -71 76 -252 0 c-143 0 -253 -4 -255 -9z m357 -252 c61
-21 84 -22 216 -3 l46 6 70 -94 c88 -116 117 -170 108 -199 -4 -12 -52 -69
-107 -128 -95 -101 -99 -107 -94 -141 22 -128 21 -134 -21 -178 -29 -31 -48
-42 -69 -42 -47 0 -162 73 -217 137 -27 31 -12 49 82 108 51 31 81 56 81 67 0
10 -16 49 -36 88 -24 47 -33 77 -29 91 7 22 84 62 185 95 53 18 54 19 25 25
-55 12 -131 9 -186 -7 -82 -24 -82 -23 -58 -144 11 -58 19 -118 17 -135 -3
-27 -8 -31 -53 -43 -40 -10 -62 -10 -108 -1 -33 7 -61 18 -64 26 -3 8 5 67 17
133 12 66 20 125 17 133 -3 7 -38 21 -79 32 -60 15 -87 16 -139 9 l-64 -9 55
-19 c104 -34 177 -72 183 -95 3 -13 -8 -47 -29 -90 -19 -38 -34 -78 -34 -88 0
-11 23 -32 63 -57 79 -50 107 -75 107 -96 0 -23 -76 -93 -141 -129 -86 -48
-134 -39 -178 33 -25 40 -26 72 -5 126 11 27 14 47 8 59 -5 10 -53 65 -106
122 -109 114 -115 132 -76 198 48 82 162 222 175 217 8 -3 53 -11 101 -17 79
-10 92 -9 142 9 72 27 122 27 195 1z m-59 -754 c72 -28 184 -90 184 -101 0
-15 -205 -174 -224 -174 -9 0 -53 30 -98 66 -125 100 -129 104 -123 115 7 11
132 75 185 95 19 7 36 13 36 13 1 1 19 -6 40 -14z" fill="white" />
</g>
</svg>
<span class="engine-name">
Brave
</span>
</div>
<div data-engine="5" data-engine-name="youtube" id="youtube-dropdown" class="dropdown-item">
<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="M12 17L17.19 14L12 11V17ZM23.56 9.17C23.69 9.64 23.78 10.27 23.84 11.07C23.91 11.87 23.94 12.56 23.94 13.16L24 14C24 16.19 23.84 17.8 23.56 18.83C23.31 19.73 22.73 20.31 21.83 20.56C21.36 20.69 20.5 20.78 19.18 20.84C17.88 20.91 16.69 20.94 15.59 20.94L14 21C9.81 21 7.2 20.84 6.17 20.56C5.27 20.31 4.69 19.73 4.44 18.83C4.31 18.36 4.22 17.73 4.16 16.93C4.09 16.13 4.06 15.44 4.06 14.84L4 14C4 11.81 4.16 10.2 4.44 9.17C4.69 8.27 5.27 7.69 6.17 7.44C6.64 7.31 7.5 7.22 8.82 7.16C10.12 7.09 11.31 7.06 12.41 7.06L14 7C18.19 7 20.8 7.16 21.83 7.44C22.73 7.69 23.31 8.27 23.56 9.17Z"
fill="white" />
</svg>
<span class="engine-name">
YouTube
</span>
</div>
</div>
</div>
</div>

<div class="searchbar-content">
<input id="searchQ" placeholder="Type here..." type="text" autocomplete="off">
Expand All @@ -558,7 +651,7 @@
<!-- ----------end of searchbar-------------- -->

<!-- ----------search with------------------- -->
<div class="searchWithCont">
<div class="searchWithCont" style="visibility: hidden;" id="search-with-container">

<div class="hint bgLightTint" id="searchWithHint">Search With</div>

Expand Down Expand Up @@ -948,6 +1041,19 @@ <h1>Material You NewTab</h1>
<span class="toggle"></span>
</label>
</div>

<div class="ttcont">
<div class="texts">
<div class="bigText" id="shortcut_switch">Shortcut Search Switch</div>
<div class="infoText" id="shortcut_switch">Enable Shortcut for search engines switch
</div>
</div>
<label class="switch">
<input id="shortcut_switchcheckbox" type="checkbox">
<span class="toggle"></span>
</label>
</div>

<!-- ---🟡--- -->
<div class="ttcont">
<div class="texts">
Expand Down
Loading

0 comments on commit e9dafcd

Please sign in to comment.