feature: add possibility to directly add a playlist from the / page

static/css/styles.css

@@ -58,3 +58,46 @@ body {
       max-width: 90%; /* New width for default modal */
     }
 }
+.searchbar{
+    margin-bottom: auto;
+    margin-top: auto;
+    height: 60px;
+    background-color: #353b48;
+    border-radius: 30px;
+    padding: 10px;
+    }
+
+    .search_input{
+    color: white;
+    border: 0;
+    outline: 0;
+    background: none;
+    width: 450px;
+    caret-color:transparent;
+    line-height: 40px;
+    transition: width 0.4s linear;
+    }
+
+     .searchbar:hover > .search_input{
+    /* padding: 0 10px; */
+    width: 450px;
+    caret-color:red;
+    /* transition: width 0.4s linear; */
+    } 
+
+    .searchbar:hover > .search_icon{
+    background: white;
+    color: #e74c3c;
+    }
+
+    .search_icon{
+    height: 40px;
+    width: 40px;
+    float: right;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border-radius: 50%;
+    color:white;
+    text-decoration:none;
+    }

templates/index.html

@@ -2,5 +2,36 @@
 
 {% block content %}
 
+<div class="container h-100">
+    <div class="d-flex justify-content-center h-100">
+      <div class="searchbar">
+        <!-- Form element with HTMX attributes -->
+        <form method="GET" action="/playlist/open" >
+          <input 
+            class="search_input" 
+            type="text" 
+            name="playlist" 
+            placeholder="Paste a Playlist ID or a complete link to a playlist"
+            required
+          >
+          <button type="submit" class="search_icon">
+            <i class="fas fa-search"></i>
+          </button>
+        </form>
+        {% if error_message %}
+  <div class="alert alert-danger mt-5" role="alert">
+      <h4 class="alert-heading">🚨Cant fetch playlist🚨</h4>
+      <p>{{ error_message }}</p>
+      <hr>
+      <p>Additional Information:</p>
+      <p>{{error_data}}</p>
+      
+  </div>
+{% endif %}
+      </div>
+    </div>
+    
+</div>
+
 
 {% endblock %}