From b9cbdc7392a4ab2ff4d38d198a4a2aace133c06f Mon Sep 17 00:00:00 2001
From: Fockskraft <johannes.d.vos@web.de>
Date: Mon, 4 May 2026 18:24:01 +0200
Subject: [PATCH] Search Button in Searchbar

---
 src/index.html          |  9 ++++++---
 src/static/css/main.css | 43 ++++++++++++++++++++++++++++-------------
 2 files changed, 36 insertions(+), 16 deletions(-)

diff --git a/src/index.html b/src/index.html
index 5aa3579..37b871f 100644
--- a/src/index.html
+++ b/src/index.html
@@ -39,10 +39,13 @@ limitations under the License.
             </p>
         </header>
 
-        <form>
-            <input type="search" name="search" placeholder="Search..." required />
-            <button type="submit">Search</button>
+        <form id="search-form">
+            <div class="search-wrapper">
+                <input type="search" name="search" placeholder="Search..." required />
+                <button type="submit">Search</button>
+            </div>
         </form>
+        
         <footer>
             <p>&copy; 2026 seekra.</p>
         </footer>
diff --git a/src/static/css/main.css b/src/static/css/main.css
index 1b33ac0..a0d57df 100644
--- a/src/static/css/main.css
+++ b/src/static/css/main.css
@@ -23,27 +23,44 @@ header p {
 
 form {
     display: flex;
-    flex-direction: column;
-    align-items: center;
+    justify-content: center;
     margin-top: 20px;
     width: 100%;
-    gap: 10px;
 }
 
-form button{
-    margin-left: 0;
-    border-radius: 999px;
-    border: 1.5px solid #ccc;
-    padding: 10px 15px;
-}
-
-form input{
+.search-wrapper {
+    display: flex;
+    align-items: center;
     width: 80%;
-    border-radius: 999px;
     border: 1.5px solid #ccc;
-    padding: 10px 15px;
+    border-radius: 999px;
+    padding: 4px 4px 4px 16px;
 }
 
+.search-wrapper input {
+    border: none;
+    outline: none;
+    width: 100%;
+    font-size: 1rem;
+    background: transparent;
+}
+
+.search-wrapper button {
+    border-radius: 999px;
+    border: none;
+    padding: 8px 20px;
+    background: #4562BE;
+    color: white;
+    cursor: pointer;
+    white-space: nowrap;
+}
+
+.search-wrapper button:hover {
+    background: #374FA5;
+}
+
+
+
 footer{
     text-align: center;
     margin-top: 20px;