design updates

6 files changed, 176 insertions, 9 deletions

diff --git a/static/css/main.css b/static/css/main.css
index ddf9f3e..dbafe65 100644
--- a/static/css/main.css
+++ b/static/css/main.css
@@ -653,6 +653,14 @@ video {
   top: 0px;
 }
 
+.left-0 {
+  left: 0px;
+}
+
+.top-full {
+  top: 100%;
+}
+
 .z-10 {
   z-index: 10;
 }
@@ -796,6 +804,10 @@ video {
   height: 100%;
 }
 
+.h-80 {
+  height: 20rem;
+}
+
 .max-h-24 {
   max-height: 6rem;
 }
@@ -849,6 +861,14 @@ video {
   width: max-content;
 }
 
+.w-auto {
+  width: auto;
+}
+
+.w-48 {
+  width: 12rem;
+}
+
 .max-w-7xl {
   max-width: 80rem;
 }
@@ -1020,6 +1040,11 @@ video {
   border-color: rgb(255 255 255 / var(--tw-border-opacity));
 }
 
+.border-neutral-700 {
+  --tw-border-opacity: 1;
+  border-color: rgb(64 64 64 / var(--tw-border-opacity));
+}
+
 .border-opacity-10 {
   --tw-border-opacity: 0.1;
 }
@@ -1104,6 +1129,11 @@ video {
   background-color: rgb(254 249 195 / var(--tw-bg-opacity));
 }
 
+.bg-neutral-800 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(38 38 38 / var(--tw-bg-opacity));
+}
+
 .bg-opacity-10 {
   --tw-bg-opacity: 0.1;
 }
@@ -1491,6 +1521,16 @@ main {
   transition: transform 0.1s ease-in-out;
 }
 
+.hover\:rounded-b-lg:hover {
+  border-bottom-right-radius: 0.5rem;
+  border-bottom-left-radius: 0.5rem;
+}
+
+.hover\:rounded-t-lg:hover {
+  border-top-left-radius: 0.5rem;
+  border-top-right-radius: 0.5rem;
+}
+
 .hover\:bg-blue-700:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(29 78 216 / var(--tw-bg-opacity));
@@ -1506,6 +1546,11 @@ main {
   background-color: rgb(126 34 206 / var(--tw-bg-opacity));
 }
 
+.hover\:bg-neutral-700:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(64 64 64 / var(--tw-bg-opacity));
+}
+
 .hover\:bg-opacity-30:hover {
   --tw-bg-opacity: 0.3;
 }
@@ -1550,12 +1595,32 @@ main {
     width: 16rem;
   }
 
+  .md\:w-1\/4 {
+    width: 25%;
+  }
+
+  .md\:w-3\/4 {
+    width: 75%;
+  }
+
   .md\:grid-cols-3 {
     grid-template-columns: repeat(3, minmax(0, 1fr));
   }
+
+  .md\:flex-row {
+    flex-direction: row;
+  }
 }
 
 @media (min-width: 1024px) {
+  .lg\:block {
+    display: block;
+  }
+
+  .lg\:hidden {
+    display: none;
+  }
+
   .lg\:w-1\/2 {
     width: 50%;
   }
@@ -1564,6 +1629,22 @@ main {
     width: 25%;
   }
 
+  .lg\:w-3\/4 {
+    width: 75%;
+  }
+
+  .lg\:w-72 {
+    width: 18rem;
+  }
+
+  .lg\:w-64 {
+    width: 16rem;
+  }
+
+  .lg\:w-60 {
+    width: 15rem;
+  }
+
   .lg\:flex-row {
     flex-direction: row;
   }
@@ -1612,6 +1693,14 @@ main {
     width: 75%;
   }
 
+  .xl\:w-96 {
+    width: 24rem;
+  }
+
+  .xl\:w-1\/5 {
+    width: 20%;
+  }
+
   .xl\:flex-row {
     flex-direction: row;
   }
diff --git a/templates/partials/datacard_render.html b/templates/partials/datacard_render.html
index 6a198b4..595dbf6 100644
--- a/templates/partials/datacard_render.html
+++ b/templates/partials/datacard_render.html
@@ -1,6 +1,6 @@
 {% for anime in data %}
 <a href="{% url "watch:watch" anime.id %}" class="w-1/2 lg:w-1/4 xl:w-1/6 text-gray-500 px-1 mb-4 hover:text-white flex flex-col gap-2">
-    <img src="{{ anime.image }}" alt="{{ anime.title.english }}" class="rounded-lg w-56 h-72 mx-auto object-cover"/>
+    <img src="{{ anime.image }}" alt="{{ anime.title.english }}" class="rounded-lg w-56 h-80 mx-auto object-cover"/>
     <div class="inline-flex gap-2 flex-wrap">
         <span class="text-xs font-bold bg-white bg-opacity-10 p-1 rounded flex items-center gap-1">
             <svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg" class="mr-1">
diff --git a/templates/partials/navbar.html b/templates/partials/navbar.html
index 1d5d380..26fa2a1 100644
--- a/templates/partials/navbar.html
+++ b/templates/partials/navbar.html
@@ -1,7 +1,7 @@
 {% load static %}
 <nav class="bg-neutral-950 px-4 py-3 border-b border-neutral-800 sticky top-0 z-50 shadow-lg">
   <!-- Mobile UI: Icons (Top) Search (Botton)-->
-  <div class="xl:hidden flex flex-col gap-4">
+  <div class="lg:hidden flex flex-col gap-4">
     <!-- Icons (Top) with Hidden Logo -->
     <div class="flex flex-row items-center justify-around gap-8">
       <a href="{% url 'home:index' %}" class="flex flex-col gap-2 items-center">
@@ -180,14 +180,24 @@
     <div class="w-full">
       <input
         type="text"
+        id="mobile-search"
         placeholder="Search Anime"
         class="bg-neutral-900 text-white text-sm w-full outline-none focus:outline-none border border-neutral-800 rounded-lg pl-4 py-3 pr-12"
+        onfocus="toggleDropdown(true, 'mobile')"
+        onblur="toggleDropdown(false, 'mobile')"
       />
     </div>
+    <!-- Mobile Full-Width Dropdown -->
+    <div id="mobile-dropdown" class="absolute top-full left-0 rounded-lg w-full bg-neutral-800 border border-neutral-700 hidden">
+      <!-- Sample anime list -->
+      {% comment %} <a href="#" class="block px-4 py-2 text-white hover:bg-neutral-700">Anime 1</a>
+      <a href="#" class="block px-4 py-2 text-white hover:bg-neutral-700">Anime 2</a> {% endcomment %}
+      <!-- Add more anime items here -->
+    </div>
   </div>
 
   <!-- Desktop UI: Icons (Left) Search (Center) Profile (Right)-->
-  <div class="hidden xl:block">
+  <div class="hidden lg:block">
     <div class="relative justify-between items-center flex">
       <!-- Logo and Search on the Left -->
       <div class="flex items-center">
@@ -199,11 +209,14 @@
           />
           <span class="text-base">Yugen</span>
         </a>
-        <div class="ml-4">
+        <div class="relative ml-4">
           <input
+            id="desktop-search"
             type="text"
             placeholder="Search Anime"
-            class="bg-neutral-900 text-white text-sm w-96 outline-none focus:outline-none border border-neutral-800 rounded-lg pl-4 py-3 pr-12"
+            class="bg-neutral-900 text-white text-sm lg:w-60 xl:w-96 outline-none focus:outline-none border border-neutral-800 rounded-lg pl-4 py-3 pr-12"
+            onfocus="toggleDropdown(true, 'desktop')"
+            onblur="toggleDropdown(false, 'desktop')"
           />
           <svg
             xmlns="http://www.w3.org/2000/svg"
@@ -219,6 +232,13 @@
               d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z"
             />
           </svg>
+          <!-- Desktop Dropdown -->
+          <div id="desktop-dropdown" class="absolute top-full left-0 mt-1 rounded-lg w-96 bg-neutral-800 border border-neutral-700 hidden">
+            <!-- Sample anime list -->
+            {% comment %} <a href="#" class="block px-4 py-2 text-white hover:bg-neutral-700">Anime 1</a>
+            <a href="#" class="block px-4 py-2 text-white hover:bg-neutral-700">Anime 2</a> {% endcomment %}
+            <!-- Add more anime items here -->
+          </div>
         </div>
       </div>
 
@@ -408,3 +428,55 @@
     </div>
   </div>
 </nav>
+<script>
+  // Example function to populate the dropdown with API data
+  function populateDropdown(items, platform) {
+    const dropdown = document.getElementById(platform);
+    dropdown.innerHTML = ''; // Clear existing items
+
+    items.forEach((item, index) => {
+      const link = document.createElement('a');
+      link.href = '#';
+      link.className = 'block px-4 py-2 text-white hover:bg-neutral-700';
+      link.textContent = item.name; // Assuming 'name' is the property you want to display
+
+      // Add specific rounding based on the item's position
+      if (index === 0) {
+        link.classList.add('hover:rounded-t-lg');
+      } else if (index === items.length - 1) {
+        link.classList.add('hover:rounded-b-lg');
+      }
+
+      dropdown.appendChild(link);
+    });
+  }
+
+  // Example usage
+  const sampleItems = [
+    { name: 'Anime 1' },
+    { name: 'Anime 2' },
+    { name: 'Anime 3' },
+    // Add more items here...
+  ];
+
+  function toggleDropdown(show, platform) {
+    switch (platform) {
+      case 'mobile':
+        // Populate the dropdown with sample items
+        if (show) {
+          populateDropdown(sampleItems, 'mobile-dropdown');
+        }
+        document.getElementById('mobile-dropdown').classList.toggle('hidden', !show);
+        break;
+      case 'desktop':
+        // Populate the dropdown with sample items
+        if (show) {
+          populateDropdown(sampleItems, 'desktop-dropdown');
+        }
+        document.getElementById('desktop-dropdown').classList.toggle('hidden', !show);
+        break;
+      default:
+        break;
+    }
+  }
+</script>
\ No newline at end of file
diff --git a/templates/user_profile/single_anime_update.html b/templates/user_profile/single_anime_update.html
index 981303f..28ad388 100644
--- a/templates/user_profile/single_anime_update.html
+++ b/templates/user_profile/single_anime_update.html
@@ -1,5 +1,8 @@
-<section class="flex flex-col xl:flex-row mt-8 gap-4">
-    <section class="xl:w-1/4">
+{% block css %}
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>
+{% endblock css %}
+<section class="flex flex-col lg:flex-row mt-8 gap-4">
+    <section class="lg:w-1/4">
         <img class="w-full h-auto object-cover object-center rounded-lg" src="{{ mal_data.main_picture.large }}" alt="{{ mal_data.title }}">
         <h1 class="font-bold mt-4 border-b border-white border-opacity-10">Alternative Titles</h1>
         <ul class="list-inside text-sm">
@@ -111,7 +114,7 @@
             </li>
         </ul>
     </section>
-    <section class="xl:w-3/4 flex flex-col">
+    <section class="lg:w-3/4 flex flex-col">
         <h1 class="font-bold text-4xl pb-4 border-b border-white border-opacity-10">
             {% if user.preferences.title_language == "english" and mal_data.alternative_titles and mal_data.alternative_titles.en %}
             {{ mal_data.alternative_titles.en }}
diff --git a/templates/user_profile/user_preferences.html b/templates/user_profile/user_preferences.html
index 8f57fba..f4a1b2d 100644
--- a/templates/user_profile/user_preferences.html
+++ b/templates/user_profile/user_preferences.html
@@ -1,3 +1,6 @@
+{% block css %}
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>
+{% endblock css %}
 <h2 class="text-2xl font-bold text-center mt-8 flex gap-2 items-center">
     <svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" aria-hidden="true" class="text-purple-500" height="1.4rem" width="1.4rem" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" d="M7 21a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4zm0 0h12a2 2 0 002-2v-4a2 2 0 00-2-2h-2.343M11 7.343l1.657-1.657a2 2 0 012.828 0l2.829 2.829a2 2 0 010 2.828l-8.486 8.485M7 17h.01"></path></svg>
     <span>Appearance</span>
diff --git a/templates/user_profile/user_profile.html b/templates/user_profile/user_profile.html
index b7105e7..2a159b1 100644
--- a/templates/user_profile/user_profile.html
+++ b/templates/user_profile/user_profile.html
@@ -1,6 +1,6 @@
 {% extends "partials/base.html" %}
 {% block content %}
-<div class="bg-white bg-opacity-10 rounded-lg bg-center bg-cover h-96 relative mt-4" {% if request.user.discord_banner %} style="background-image: url('https://cdn.discordapp.com/banners/{{ request.user.discord_id }}/{{ request.user.discord_banner }}?size=1024')" {% endif %}>
+<div class="bg-white bg-opacity-10 rounded-lg bg-center bg-cover h-96 relative mt-4" {% if request.user.discord_banner %} style="background-image: url('https://cdn.discordapp.com/banners/{{ request.user.discord_id }}/{{ request.user.discord_banner }}?size=1024')" {% else %} style="background-image: url('https://giffiles.alphacoders.com/132/13250.gif')" {% endif %}>
     <div class="absolute inset-0" style="background: linear-gradient(45deg, rgb(8, 8, 8) 15%, transparent 60%), linear-gradient(0deg, rgb(8, 8, 8) 0%, transparent 60%);"></div>
     <div class="flex flex-col items-center gap-2 absolute bottom-0 left-10">
         <img src="https://cdn.discordapp.com/avatars/{{ request.user.discord_id }}/{{ request.user.discord_avatar }}?size=256" alt="avatar" class="rounded-full w-24 h-24">