Add button to clear search input on mobile

This was unfortunately a bit more complex than just adding an HTML reset
button, since reset buttons only "reset" input content to its original
value rather than clearing it. This doesn't work for Whoogle's needs,
since inputs on search result pages are auto populated with the search
content as their default value.

A reset button was introduced anyways, but is controlled by a few lines
of javascript to allow completely clearing the search input. The button
will only appear on mobile searches.

At the moment, it isn't particularly pretty, but is functional. It uses
just a plain "x" character and is always visible on mobile search result
pages. This leaves plenty of room for improvement moving forward.

Fixes #291

app/static/css/input.css

@@ -0,0 +1,14 @@
+#search-bar {
+    background: transparent !important;
+    padding-right: 50px;
+}
+
+#search-reset {
+    all: unset;
+    margin-left: -50px;
+    text-align: center;
+    background-color: transparent !important;
+    cursor: pointer;
+    height: 40px;
+    width: 50px;
+}

app/static/js/utils.js

@@ -57,4 +57,12 @@ const checkForTracking = () => {
 
 document.addEventListener("DOMContentLoaded", function() {
     checkForTracking();
+
+    // Clear input if reset button tapped
+    const search = document.getElementById("search-bar");
+    const resetBtn = document.getElementById("search-reset");
+    resetBtn.addEventListener("click", event => {
+        event.preventDefault();
+        search.value = "";
+    });
 });

app/templates/display.html

@@ -5,6 +5,7 @@
         <link rel="search" href="opensearch.xml" type="application/opensearchdescription+xml" title="Whoogle Search">
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
         <meta name="referrer" content="no-referrer">
+        <link rel="stylesheet" href="static/css/input.css">
         <link rel="stylesheet" href="static/css/search.css">
         <link rel="stylesheet" href="static/css/variables.css">
         <link rel="stylesheet" href="static/css/header.css">

app/templates/header.html

@@ -20,10 +20,11 @@
                             class="noHIxc" 
                             name="q"
                             style="background-color: {{ 'var(--whoogle-dark-result-bg)' if config.dark else 'var(--whoogle-result-bg)' }} !important;
-                                       color: {{ 'var(--whoogle-dark-text)' if config.dark else 'var(--whoogle-text)' }};
-                                       border: {{ '2px solid var(--whoogle-dark-element-bg)' if config.dark else '' }}; border-radius: 8px;"
+                                   color: {{ 'var(--whoogle-dark-text)' if config.dark else 'var(--whoogle-text)' }};
+                                   border: {{ '2px solid var(--whoogle-dark-element-bg)' if config.dark else '' }}; border-radius: 8px;"
                             type="text" 
                             value="{{ query }}">
+                        <input style="color: {{ 'var(--whoogle-dark-text)' if config.dark else 'var(--whoogle-text)' }}" id="search-reset" type="reset" value="x">
                         <input name="tbm" value="{{ search_type }}" style="display: none">
                         <input type="submit" style="display: none;">
                         <div class="sc"></div>
@@ -56,8 +57,8 @@
                             type="text"
                             value="{{ query }}"
                             style="background-color: {{ 'var(--whoogle-dark-result-bg)' if config.dark else 'var(--whoogle-result-bg)' }} !important;
-                                       color: {{ 'var(--whoogle-dark-text)' if config.dark else 'var(--whoogle-text)' }};
-                                       border: {{ '2px solid var(--whoogle-dark-element-bg)' if config.dark else '' }}; border-radius: 8px;">
+                                   color: {{ 'var(--whoogle-dark-text)' if config.dark else 'var(--whoogle-text)' }};
+                                   border: {{ '2px solid var(--whoogle-dark-element-bg)' if config.dark else '0px' }}; border-radius: 8px;">
                         <input name="tbm" value="{{ search_type }}" style="display: none">
                         <input type="submit" style="display: none;">
                         <div class="sc"></div>