experimenting with main page redesign

static/css/style.css

@@ -67,13 +67,10 @@
     /* Support for all WebKit browsers. */
     -webkit-font-feature-settings: 'liga';
     -webkit-font-smoothing: antialiased;
-
     /* Support for Safari and Chrome. */
     text-rendering: optimizeLegibility;
-
     /* Support for Firefox. */
     -moz-osx-font-smoothing: grayscale;
-
     /* Support for IE. */
     font-feature-settings: 'liga';
 }
@@ -549,8 +546,9 @@ hr {
     margin: 0 auto;
     background: var(--search-bg-input);
     border-radius: 22px;
-    position: absolute;
+    position: relative;
-    width: 520px;
+    width: 100%;
+    max-width: 600px;
     overflow: hidden;
     margin-left: auto;
     margin-right: auto;
@@ -1891,6 +1889,99 @@ body, h1, p, a, input, button {
         color: var(--link) !important;
     }
 }
+
+/* Center the entire search page content */
+.search-page-content {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+/* Center the logo */
+.search-page-content h1 {
+    text-align: center;
+    margin-bottom: 20px;
+}
+
+/* Style for the search input */
+#search-input {
+    width: 100%;
+    padding: 12px;
+    font-size: 16px;
+}
+
+/* Style for the search button inside the search bar */
+#search-wrapper-ico {
+    position: absolute;
+    right: 10px;
+    top: 50%;
+    transform: translateY(-50%);
+    font-size: 24px;
+    background: none;
+    border: none;
+    cursor: pointer;
+}
+
+/* Styles for the search type icons */
+.search-type-icons {
+    display: flex;
+    justify-content: center;
+    flex-wrap: wrap;
+    gap: 30px;
+    margin-top: 30px;
+}
+
+/* Style for each icon button */
+.icon-button {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    background: none;
+    border: none;
+    cursor: pointer;
+    text-align: center;
+}
+
+/* Style for the icons */
+.icon-button .material-icons-round {
+    font-size: 48px; /* Adjust the size of the icons */
+    color: var(--sub-search-wrapper-ico);
+}
+
+/* Style for the labels under icons */
+.icon-button p {
+    margin-top: 8px;
+    font-size: 14px;
+    color: var(--sub-search-wrapper-ico);
+}
+
+/* Hover effects */
+.icon-button:hover .material-icons-round {
+    color: var(--blue);
+}
+
+.icon-button:hover p {
+    color: var(--blue);
+}
+
+/* Remove button default focus outline */
+.icon-button button:focus {
+    outline: none;
+}
+
+.material-icons-round {
+    font-family: 'Material Icons Round';
+    font-weight: normal;
+    font-style: normal;
+    line-height: 1;
+    letter-spacing: normal;
+    text-transform: none;
+    display: inline-block;
+    white-space: nowrap;
+    word-wrap: normal;
+    direction: ltr;
+}
+
 /* 
 :root {
     --background-color: #ffffff;

static/js/autocomplete.js

@@ -170,11 +170,11 @@ document.addEventListener('click', (event) => {
   }
 });
 
-// Update visual feedback for selected type on page load
+// // Update visual feedback for selected type on page load
-document.addEventListener("DOMContentLoaded", () => {
+// document.addEventListener("DOMContentLoaded", () => {
-  const activeButton = document.querySelector(`[name="t"][value="${selectedType}"]`);
+//   const activeButton = document.querySelector(`[name="t"][value="${selectedType}"]`);
-  if (activeButton) {
+//   if (activeButton) {
-    typeButtons.forEach(btn => btn.classList.remove('search-active'));
+//     typeButtons.forEach(btn => btn.classList.remove('search-active'));
-    activeButton.classList.add('search-active');
+//     activeButton.classList.add('search-active');
-  }
+//   }
-});
+// });

templates/search.html

@@ -83,20 +83,48 @@
         </div>
     </div>
     <form action="/search" class="search-container" method="post" autocomplete="off">
+        <div class="search-page-content">
             <h1>Ocásek</h1>
             <div class="wrapper">
-            <input type="text" name="q" autofocus id="search-input" placeholder="Type to search..." />
+                <input type="text" name="q" autofocus id="search-input"/> <!-- placeholder="Type to search..." --> 
-            <button id="search-wrapper-ico" class="material-icons-round" name="t" value="text" type="submit">search</button>
+                <button id="search-wrapper-ico" class="material-icons-round" name="t" value="web" type="submit">search</button>
                 <div class="autocomplete">
-                <ul>
+                    <ul></ul>
-            </ul>
                 </div>
-            <!-- <a id="clearSearch" class="material-icons-round">close</a> -->
             </div>
-        <div class="search-button-wrapper">
+            <div class="search-type-icons">
                 <input type="hidden" name="p" value="1">
-            <button name="t" value="text" type="submit">Search Text</button>
+
-            <button name="t" value="image" type="submit">Search Images</button>
+                <div class="icon-button">
+                    <button id="sub-search-wrapper-ico" class="material-icons-round clickable" name="t" value="text">search</button>
+                    <p>Web</p>
+                </div>
+
+                <div class="icon-button">
+                    <button id="sub-search-wrapper-ico" class="material-icons-round clickable" name="t" value="image">image</button>
+                    <p>Images</p>
+                </div>
+
+                <div class="icon-button">
+                    <button id="sub-search-wrapper-ico" class="material-icons-round clickable" name="t" value="video">movie</button>
+                    <p>Videos</p>
+                </div>
+
+                <div class="icon-button">
+                    <button id="sub-search-wrapper-ico" class="material-icons-round clickable" name="t" value="forum">forum</button>
+                    <p>Forums</p>
+                </div>
+
+                <div class="icon-button">
+                    <button id="sub-search-wrapper-ico" class="material-icons-round clickable" name="t" value="map">map</button>
+                    <p>Maps</p>
+                </div>
+
+                <div class="icon-button">
+                    <button id="sub-search-wrapper-ico" class="material-icons-round clickable" name="t" value="file">share</button>
+                    <p>Files</p>
+                </div>
+            </div>
         </div>
     </form>
 </body>