feat: configurable search-engine

druxorey · Aug 7, 2024 · dd36b48 · dd36b48
1 parent 5867170
commit dd36b48
Show file tree

Hide file tree

Showing 9 changed files with 175 additions and 10 deletions.
diff --git a/index.html b/index.html
@@ -3,17 +3,39 @@
 
 <head>
 	<title>~/startpage</title>
-	<link rel="icon" href="static/images/ico.webp" type="image/x-icon" />
+	<link rel="icon" href="static/images/icon.svg" type="image/x-icon" />
 	<link rel="stylesheet" href="static/styles/style.css">
 </head>
 
 <body>
+
+    <header id="settings-content">
+
+        <div class="settings-box">
+            <div class="settings-options">
+                <h1>Search Engine</h1>
+            </div>
+
+            <div class="settings-options">
+            <select id="search-engine-selector" onchange="changeSearchEngine()">
+                <option value="https://search.brave.com/search">Brave</option>
+                <option value="https://www.google.com/search">Google</option>
+                <option value="https://duckduckgo.com/">DuckDuckGo</option>
+            </select>
+            </div>
+        </div>
+
+        <button onclick="hideSettings()" class="settings-hide"></button>
+    </header>
+
+    <button onclick="showSettings()" class="settings-display"></button>
+
     <nav class="navigation-content">
         <h1 class="title-display">Welcome back!</h1>
         <h2 id="date-display"></h2>
 
-        <form id="search-form" action="https://duckduckgo.com/" method="get">
-            <input type="text" id="search-input" placeholder="Search with DuckDuckGo" name="q" autofocus/>
+        <form id="search-form" method="get">
+            <input type="text" id="search-input" placeholder="Search" name="q" autofocus/>
         </form>
 
         <ul>
@@ -54,6 +76,7 @@ <h2 id="date-display"></h2>
     </div>
 
     <script type="text/javascript" src="scripts/get_date.js"></script>
+    <script type="text/javascript" src="scripts/get_search_engine.js"></script>
 
 </body>
 

diff --git a/scripts/get_search_engine.js b/scripts/get_search_engine.js
@@ -0,0 +1,33 @@
+function hideSettings() {document.getElementById("settings-content").style.display = 'none';}
+function showSettings() {document.getElementById("settings-content").style.display = 'flex';}
+
+function changeSearchEngine() {
+    var form = document.getElementById('search-form');
+    var input = document.getElementById('search-input');
+    var searchEngine = document.getElementById("search-engine-selector");
+
+    form.action = searchEngine.value;
+    input.placeholder = "Search with " + searchEngine.options[searchEngine.selectedIndex].text;
+
+    localStorage.setItem('selectedSearchEngine', searchEngine.value);
+}
+
+function loadSavedSearchEngine() {
+    var savedSearchEngine = localStorage.getItem('selectedSearchEngine');
+
+    if (savedSearchEngine) {
+        var searchEngine = document.getElementById('search-engine-selector');
+        searchEngine.value = savedSearchEngine;
+        changeSearchEngine();
+    }
+}
+
+document.addEventListener('keydown', function(event) {
+    if (event.key === 'Escape') {
+        hideSettings();
+    } else if (event.key === ' ') {
+        document.getElementById('search-input').focus();
+    }
+});
+
+loadSavedSearchEngine();
diff --git a/static/images/ico.webp b/static/images/ico.webp
diff --git a/static/images/icon.svg b/static/images/icon.svg
diff --git a/static/images/settings-close-1.svg b/static/images/settings-close-1.svg
diff --git a/static/images/settings-close-2.svg b/static/images/settings-close-2.svg
diff --git a/static/images/settings-open-1.svg b/static/images/settings-open-1.svg
diff --git a/static/images/settings-open-2.svg b/static/images/settings-open-2.svg
diff --git a/static/styles/style.css b/static/styles/style.css
@@ -6,7 +6,8 @@
     --color-background-2: #282A36;
     --color-background-3: #1f1f28;
 
-    --color-accent: #BD93F9;
+    --color-accent-1: #BD93F9;
+    --color-accent-2: #BD93F933;
 
     --color-shadow-1: #01010170;
     --color-shadow-2: #585B6E;
@@ -52,7 +53,7 @@ a {
 a:hover {
     font-weight: bold;
     text-shadow: var(--color-shadow-2) 0rem 0rem 0.5rem;
-    color: var(--color-accent);
+    color: var(--color-accent-1);
     transition: var(--transition-speed) ease;
 }
 
@@ -64,7 +65,7 @@ ul {
 }
 
 li {
-    color: var(--color-accent);
+    color: var(--color-accent-1);
     line-height: 1.5rem;
 }
 
@@ -78,7 +79,7 @@ li:first-child {
 }
 
 #date-display {
-    color: var(--color-accent);
+    color: var(--color-accent-1);
     text-align: center;
     font-size: 1.25rem;
     font-weight: 600;
@@ -126,17 +127,111 @@ li:first-child {
 
 #search-input:focus {
     background-color: var(--color-background-3);
-    border-color: var(--color-accent);
+    border-color: var(--color-accent-1);
     border-width: 0.22rem;
     border-radius: var(--border-radius);
     border-style: solid;
     outline: none;
 }
 
+#settings-content {
+    display: none;
+    position: fixed;
+    width: 100%;
+    height: 100%;
+    justify-content: center;
+    flex-direction: column;
+    backdrop-filter: blur(16px);
+    align-items: center;
+    background-color: var(--color-accent-2);
+}
+
+#search-engine-selector {
+    background-color: var(--color-background-2);
+    color: var(--color-foreground-1);
+    border: none;
+    border-radius: var(--border-radius);
+    appearance: none;
+    padding: 1rem;
+    cursor: pointer;
+}
+
+#search-engine-selector:hover {
+    background-color: var(--color-background-1);
+    transition: var(--transition-speed) ease-in-out;
+}
+
+#search-engine-selector option {
+    height: 3rem;
+    background-color: var(--color-background-2);
+}
+
+#search-engine-selector:focus {
+    outline: none;
+}
+
+.settings-display {
+    height: 1.5rem;
+    width: 1.5rem;
+    background: none;
+    background-image: url("../images/settings-open-1.svg");
+    background-size: cover;
+    border: none;
+    cursor: pointer;
+    position: absolute;
+    top: 2vh;
+    right: 2vw;
+    transition: var(--transition-speed) ease-in-out;
+}
+
+.settings-display:hover {
+    background-image: url("../images/settings-open-2.svg");
+    transition: var(--transition-speed) ease-in-out;
+}
+
+.settings-hide {
+    margin-top: 2rem;
+    height: 1.5rem;
+    width: 1.5rem;
+    border: none;
+    background: none;
+    background-image: url("../images/settings-close-1.svg");
+    background-size: cover;
+    transition: var(--transition-speed) ease-in-out;
+}
+
+.settings-hide:hover {
+    height: 2rem;
+    width: 2rem;
+    cursor: pointer;
+    border: none;
+    background: none;
+    background-image: url("../images/settings-close-2.svg");
+    background-size: cover;
+    transition: var(--transition-speed) ease-in-out;
+}
+
+.settings-box {
+    display: flex;
+    background: var(--color-background-3);
+    box-shadow: var(--color-shadow-1) 0rem 0rem 2.75rem;
+    border-radius: var(--border-radius);
+    padding: 3rem;
+    gap: 3rem;
+    flex-direction: row;
+    align-items: center;
+}
+
+.settings-options {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+}
+
 .image-display {
     height: 35rem;
     border-radius: var(--border-radius);
-    box-shadow: var(--color-shadow-1) 0rem 2rem 2.75rem;
+    box-shadow: var(--color-shadow-1) 0rem 0rem 2.75rem;
     transition: var(--transition-speed) ease-in-out;
 }
 
@@ -149,7 +244,7 @@ li:first-child {
 .navigation-content {
     background: var(--color-background-3);
     border-radius: var(--border-radius);
-    box-shadow: var(--color-shadow-1) 0rem 2rem 2.75rem;
+    box-shadow: var(--color-shadow-1) 0rem 0rem 2.75rem;
     display: grid;
     padding: 3rem;
     grid-row-gap: 1rem;
@@ -169,6 +264,15 @@ li:first-child {
     margin-bottom: 0;
 }
 
+.contenedor {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background: var(--color-background-1);
+    padding: 2rem;
+    position: relative;
+}
+
 @media (max-width: 1200px) {
     body {
         gap: 0px;