From 6b78b90ee7c657d822f1505fa9257a4eec4a14f5 Mon Sep 17 00:00:00 2001
From: Kamil <abcde@fghijk.lmno>
Date: Tue, 3 Dec 2024 12:35:23 +0000
Subject: [PATCH] feature: add possibility to directly add a playlist from the
 / page

---
 static/css/styles.css | 45 ++++++++++++++++++++++++++++++++++++++++++-
 templates/index.html  | 31 +++++++++++++++++++++++++++++
 2 files changed, 75 insertions(+), 1 deletion(-)

diff --git a/static/css/styles.css b/static/css/styles.css
index faedd5a..3c1e918 100644
--- a/static/css/styles.css
+++ b/static/css/styles.css
@@ -57,4 +57,47 @@ body {
     .modal-dialog {
       max-width: 90%; /* New width for default modal */
     }
-}
\ No newline at end of file
+}
+.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;
+    }
\ No newline at end of file
diff --git a/templates/index.html b/templates/index.html
index a6a944c..db894fe 100644
--- a/templates/index.html
+++ b/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 %}