multiple data card styles

13 files changed, 372 insertions, 200 deletions

diff --git a/authentication/migrations/0001_initial.py b/authentication/migrations/0001_initial.py
index 1de3d73..ed9c14e 100644
--- a/authentication/migrations/0001_initial.py
+++ b/authentication/migrations/0001_initial.py
@@ -1,4 +1,4 @@
-# Generated by Django 5.1 on 2024-08-26 04:46
+# Generated by Django 5.1 on 2024-08-31 04:01
 
 import django.contrib.auth.models
 import django.contrib.auth.validators
diff --git a/homepage/views.py b/homepage/views.py
index edc6ef3..fb00ade 100644
--- a/homepage/views.py
+++ b/homepage/views.py
@@ -54,6 +54,8 @@ def index(request):
         "next_season": next_season
     }
 
+    print(trending_anime)
+
     return render(request, "home/index.html", context)
 
 def search_json(request):
diff --git a/static/css/main.css b/static/css/main.css
index 1ff34f7..3e094b5 100644
--- a/static/css/main.css
+++ b/static/css/main.css
@@ -737,14 +737,6 @@ video {
   margin-top: 2rem;
 }
 
-.mb-1 {
-  margin-bottom: 0.25rem;
-}
-
-.box-border {
-  box-sizing: border-box;
-}
-
 .block {
   display: block;
 }
@@ -761,10 +753,6 @@ video {
   display: inline-flex;
 }
 
-.grid {
-  display: grid;
-}
-
 .hidden {
   display: none;
 }
@@ -773,8 +761,9 @@ video {
   aspect-ratio: 16 / 9;
 }
 
-.aspect-\[9\/13\] {
-  aspect-ratio: 9/13;
+.size-2 {
+  width: 0.5rem;
+  height: 0.5rem;
 }
 
 .size-3 {
@@ -792,11 +781,6 @@ video {
   height: 1.5rem;
 }
 
-.size-2 {
-  width: 0.5rem;
-  height: 0.5rem;
-}
-
 .h-24 {
   height: 6rem;
 }
@@ -805,6 +789,10 @@ video {
   height: 1rem;
 }
 
+.h-48 {
+  height: 12rem;
+}
+
 .h-5 {
   height: 1.25rem;
 }
@@ -821,10 +809,6 @@ video {
   height: 2rem;
 }
 
-.h-80 {
-  height: 20rem;
-}
-
 .h-96 {
   height: 24rem;
 }
@@ -837,30 +821,18 @@ video {
   height: 100%;
 }
 
-.h-3 {
-  height: 0.75rem;
-}
-
-.h-\[42vw\] {
-  height: 42vw;
-}
-
-.h-screen {
-  height: 100vh;
-}
-
 .max-h-24 {
   max-height: 6rem;
 }
 
-.max-h-\[806px\] {
-  max-height: 806px;
-}
-
 .max-h-screen {
   max-height: 100vh;
 }
 
+.max-h-96 {
+  max-height: 24rem;
+}
+
 .w-1\/2 {
   width: 50%;
 }
@@ -869,6 +841,10 @@ video {
   width: 2.5rem;
 }
 
+.w-16 {
+  width: 4rem;
+}
+
 .w-24 {
   width: 6rem;
 }
@@ -910,18 +886,30 @@ video {
   width: max-content;
 }
 
-.w-1\/3 {
-  width: 33.333333%;
+.min-w-32 {
+  min-width: 8rem;
 }
 
-.w-3 {
-  width: 0.75rem;
+.min-w-96 {
+  min-width: 24rem;
+}
+
+.min-w-80 {
+  min-width: 20rem;
+}
+
+.min-w-72 {
+  min-width: 18rem;
 }
 
 .max-w-7xl {
   max-width: 80rem;
 }
 
+.max-w-\[calc\(100\%-6rem\)\] {
+  max-width: calc(100% - 6rem);
+}
+
 .max-w-full {
   max-width: 100%;
 }
@@ -931,6 +919,10 @@ video {
   max-width: max-content;
 }
 
+.max-w-\[calc\(100\%-10rem\)\] {
+  max-width: calc(100% - 10rem);
+}
+
 .origin-left {
   transform-origin: left;
 }
@@ -987,10 +979,6 @@ video {
   list-style-position: inside;
 }
 
-.grid-cols-2 {
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-}
-
 .flex-row {
   flex-direction: row;
 }
@@ -1057,12 +1045,6 @@ video {
   margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
 }
 
-.space-y-1 > :not([hidden]) ~ :not([hidden]) {
-  --tw-space-y-reverse: 0;
-  margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse)));
-  margin-bottom: calc(0.25rem * var(--tw-space-y-reverse));
-}
-
 .overflow-auto {
   overflow: auto;
 }
@@ -1113,11 +1095,6 @@ video {
   border-radius: 0.75rem;
 }
 
-.rounded-b-lg {
-  border-bottom-right-radius: 0.5rem;
-  border-bottom-left-radius: 0.5rem;
-}
-
 .border {
   border-width: 1px;
 }
@@ -1417,10 +1394,6 @@ video {
   --tw-bg-opacity: 0.4;
 }
 
-.bg-opacity-50 {
-  --tw-bg-opacity: 0.5;
-}
-
 .bg-cover {
   background-size: cover;
 }
@@ -1529,10 +1502,6 @@ video {
   padding-top: 140%;
 }
 
-.pb-\[140\%\] {
-  padding-bottom: 140%;
-}
-
 .text-center {
   text-align: center;
 }
@@ -1547,6 +1516,10 @@ video {
   line-height: 2.5rem;
 }
 
+.text-\[10px\] {
+  font-size: 10px;
+}
+
 .text-base {
   font-size: 1rem;
   line-height: 1.5rem;
@@ -1572,18 +1545,10 @@ video {
   line-height: 1rem;
 }
 
-.text-\[10px\] {
-  font-size: 10px;
-}
-
 .font-bold {
   font-weight: 700;
 }
 
-.font-semibold {
-  font-weight: 600;
-}
-
 .uppercase {
   text-transform: uppercase;
 }
@@ -2259,10 +2224,6 @@ main {
 }
 
 @media (min-width: 640px) {
-  .sm\:block {
-    display: block;
-  }
-
   .sm\:size-3 {
     width: 0.75rem;
     height: 0.75rem;
@@ -2273,16 +2234,8 @@ main {
     height: 1rem;
   }
 
-  .sm\:w-1\/2 {
-    width: 50%;
-  }
-
-  .sm\:w-1\/3 {
-    width: 33.333333%;
-  }
-
-  .sm\:grid-cols-3 {
-    grid-template-columns: repeat(3, minmax(0, 1fr));
+  .sm\:flex-wrap {
+    flex-wrap: wrap;
   }
 
   .sm\:gap-2 {
@@ -2317,14 +2270,6 @@ main {
   .md\:w-64 {
     width: 16rem;
   }
-
-  .md\:w-1\/4 {
-    width: 25%;
-  }
-
-  .md\:grid-cols-4 {
-    grid-template-columns: repeat(4, minmax(0, 1fr));
-  }
 }
 
 @media (min-width: 1024px) {
@@ -2336,14 +2281,26 @@ main {
     display: none;
   }
 
+  .lg\:h-16 {
+    height: 4rem;
+  }
+
   .lg\:h-\[42vw\] {
     height: 42vw;
   }
 
+  .lg\:h-\[39vw\] {
+    height: 39vw;
+  }
+
   .lg\:max-h-\[806px\] {
     max-height: 806px;
   }
 
+  .lg\:max-h-\[761px\] {
+    max-height: 761px;
+  }
+
   .lg\:w-1\/2 {
     width: 50%;
   }
@@ -2352,6 +2309,10 @@ main {
     width: 25%;
   }
 
+  .lg\:w-12 {
+    width: 3rem;
+  }
+
   .lg\:w-3\/4 {
     width: 75%;
   }
@@ -2360,22 +2321,38 @@ main {
     width: 15rem;
   }
 
-  .lg\:w-1\/5 {
-    width: 20%;
-  }
-
-  .lg\:grid-cols-5 {
-    grid-template-columns: repeat(5, minmax(0, 1fr));
+  .lg\:w-1\/3 {
+    width: 33.333333%;
   }
 
   .lg\:flex-row {
     flex-direction: row;
   }
 
+  .lg\:flex-nowrap {
+    flex-wrap: nowrap;
+  }
+
+  .lg\:items-center {
+    align-items: center;
+  }
+
   .lg\:justify-end {
     justify-content: flex-end;
   }
 
+  .lg\:justify-between {
+    justify-content: space-between;
+  }
+
+  .lg\:justify-around {
+    justify-content: space-around;
+  }
+
+  .lg\:justify-evenly {
+    justify-content: space-evenly;
+  }
+
   .lg\:bg-white {
     --tw-bg-opacity: 1;
     background-color: rgb(255 255 255 / var(--tw-bg-opacity));
@@ -2421,10 +2398,6 @@ main {
     width: 24rem;
   }
 
-  .xl\:grid-cols-6 {
-    grid-template-columns: repeat(6, minmax(0, 1fr));
-  }
-
   .xl\:flex-row {
     flex-direction: row;
   }
diff --git a/templates/home/index.html b/templates/home/index.html
index b7f9f88..423441e 100644
--- a/templates/home/index.html
+++ b/templates/home/index.html
@@ -128,15 +128,35 @@
     </section>
     <!-- Data Cards: Trending Anime -->
     <section id="trending" class="flex flex-wrap justify-center mt-4 animate__animated animate__slideInUp max-w-full">
+      {% if user.preferences.card_layout == 'classic' %}
       {% include "partials/datacard_render.html" with data=trending_anime %}
+      {% elif user.preferences.card_layout == 'wide' %}
+      {% include "partials/datacardwide_render.html" with data=trending_anime %}
+      {% elif user.preferences.card_layout == 'compact' %}
+      {% include "partials/datacardcompact_render.html" with data=trending_anime %}
+      {% endif %}
     </section>
     <!-- Data Cards: Popular Anime -->
     <section id="popular" class="flex-wrap justify-center mt-4 hidden animate__animated animate__slideInUp max-w-full">
+      {% comment %} {% include "partials/datacard_render.html" with data=popular_anime %} {% endcomment %}
+      {% if user.preferences.card_layout == 'classic' %}
       {% include "partials/datacard_render.html" with data=popular_anime %}
+      {% elif user.preferences.card_layout == 'wide' %}
+      {% include "partials/datacardwide_render.html" with data=popular_anime %}
+      {% elif user.preferences.card_layout == 'compact' %}
+      {% include "partials/datacardcompact_render.html" with data=popular_anime %}
+      {% endif %}
     </section>
     <!-- Data Cards: Top Rated Anime -->
     <section id="top_rated" class="flex-wrap justify-center mt-4 hidden animate__animated animate__slideInUp max-w-full">
+      {% comment %} {% include "partials/datacard_render.html" with data=top_anime %} {% endcomment %}
+      {% if user.preferences.card_layout == 'classic' %}
       {% include "partials/datacard_render.html" with data=top_anime %}
+      {% elif user.preferences.card_layout == 'wide' %}
+      {% include "partials/datacardwide_render.html" with data=top_anime %}
+      {% elif user.preferences.card_layout == 'compact' %}
+      {% include "partials/datacardcompact_render.html" with data=top_anime %}
+      {% endif %}
     </section>
   </section>
   <section class="w-full xl:w-1/4 px-4 py-2">
diff --git a/templates/partials/datacardcompact_render.html b/templates/partials/datacardcompact_render.html
new file mode 100644
index 0000000..461c450
--- /dev/null
+++ b/templates/partials/datacardcompact_render.html
@@ -0,0 +1,125 @@
+{% for anime in data %}
+<div class="w-full max-w-full px-2 mb-2">
+    <a href="{% url 'watch:watch' anime.id %}">
+    <div class="flex flex-row bg-neutral-950 rounded hover:bg-{{ user.preferences.accent_colour }}-600 hover:bg-opacity-30 p-2 gap-4 items-center">
+        <img src="{{ anime.image }}" alt="{{ anime.title.english }}" class="rounded-lg w-16 lg:w-12 h-24 lg:h-16 object-cover"/>
+        <div class="flex flex-col lg:flex-row gap-2 max-w-[calc(100%-6rem)] lg:items-center">
+            <h2 class="max-w-full text-xl font-bold text-transparent bg-clip-text truncate overflow-hidden text-ellipsis whitespace-nowrap" style="background: linear-gradient(-45deg, {% if anime.color %}{{ anime.color }}{% else %}white{% endif %}, white); -webkit-background-clip: text; background-clip: text;">
+                {% if user.preferences.title_language == "english" and anime.title.english %}
+                {{ anime.title.english }}
+                {% elif user.preferences.title_language == "native" and anime.title.native %}
+                {{ anime.title.native }}
+                {% else %}
+                {{ anime.title.romaji }}
+                {% endif %}
+            </h2>
+            <div class="flex flex-row gap-2 flex-wrap lg:flex-nowrap">
+                {% if anime.status == "Ongoing" %}
+                <span class="text-xs font-bold bg-white bg-opacity-10 p-1 rounded flex items-center gap-1">
+                    <span class="text-green-500 pt-1">
+                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-2 sm:size-3">
+                            <circle cx="12" cy="12" r="12" />
+                        </svg>                
+                    </span>
+                    Ongoing
+                </span>
+                {% elif anime.status == "Not yet aired" %}
+                <span class="text-xs font-bold bg-white bg-opacity-10 p-1 rounded flex items-center gap-1">
+                    <span class="text-yellow-500 pt-1">
+                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-2 sm:size-3">
+                            <circle cx="12" cy="12" r="12" />
+                        </svg>
+                    </span>
+                    Not yet aired
+                </span>
+                {% else %}
+                <span class="text-xs font-bold bg-white bg-opacity-10 p-1 rounded flex items-center gap-1">
+                    <span class="text-blue-500 pt-1">
+                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-2 sm:size-3">
+                            <circle cx="12" cy="12" r="12" />
+                        </svg>
+                    </span>
+                    Finished
+                </span>
+                {% endif %}
+                <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">
+                        <path d="M3.604 7.197l7.138 -3.109a.96 .96 0 0 1 1.27 .527l4.924 11.902a1 1 0 0 1 -.514 1.304l-7.137 3.109a.96 .96 0 0 1 -1.271 -.527l-4.924 -11.903a1 1 0 0 1 .514 -1.304z"></path>
+                        <path d="M15 4h1a1 1 0 0 1 1 1v3.5"></path>
+                        <path d="M20 6c.264 .112 .52 .217 .768 .315a1 1 0 0 1 .53 1.311l-2.298 5.374"></path>
+                    </svg>
+                    {{ anime.type }}
+                </span>
+                <span class="text-xs font-bold bg-white bg-opacity-10 p-1 rounded flex items-center gap-1">
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-4">
+                        <path fill-rule="evenodd" d="M6.75 2.25A.75.75 0 0 1 7.5 3v1.5h9V3A.75.75 0 0 1 18 3v1.5h.75a3 3 0 0 1 3 3v11.25a3 3 0 0 1-3 3H5.25a3 3 0 0 1-3-3V7.5a3 3 0 0 1 3-3H6V3a.75.75 0 0 1 .75-.75Zm13.5 9a1.5 1.5 0 0 0-1.5-1.5H5.25a1.5 1.5 0 0 0-1.5 1.5v7.5a1.5 1.5 0 0 0 1.5 1.5h13.5a1.5 1.5 0 0 0 1.5-1.5v-7.5Z" clip-rule="evenodd" />
+                    </svg>              
+                    {{ anime.releaseDate }}
+                </span>
+                {% if anime.rating %}
+                <span class="text-xs font-bold bg-white bg-opacity-10 p-1 rounded flex items-center gap-1">
+                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-4">
+                        <path stroke-linecap="round" stroke-linejoin="round" d="M11.48 3.499a.562.562 0 0 1 1.04 0l2.125 5.111a.563.563 0 0 0 .475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 0 0-.182.557l1.285 5.385a.562.562 0 0 1-.84.61l-4.725-2.885a.562.562 0 0 0-.586 0L6.982 20.54a.562.562 0 0 1-.84-.61l1.285-5.386a.562.562 0 0 0-.182-.557l-4.204-3.602a.562.562 0 0 1 .321-.988l5.518-.442a.563.563 0 0 0 .475-.345L11.48 3.5Z"/>
+                    </svg>
+                    {{ anime.rating }}
+                    </span>
+                {% endif %}
+                {% if anime.totalEpisodes %}
+                <span class="text-xs font-bold bg-white bg-opacity-10 p-1 rounded flex items-center gap-1">
+                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-4">
+                        <path stroke-linecap="round" stroke-linejoin="round" d="M5.25 8.25h15m-16.5 7.5h15m-1.8-13.5-3.9 19.5m-2.1-19.5-3.9 19.5"/>
+                        </svg>
+                        {{ anime.totalEpisodes }}
+                </span>
+                {% endif %}
+            </div>
+            <div class="flex flex-row gap-2 flex-wrap lg:flex-nowrap">
+                {% for genre in anime.genres %}
+                {% if genre == "Action" %}
+                <span class="text-xs font-bold bg-green-100 bg-opacity-10 text-green-300 py-1 px-2 rounded-full">
+                {% elif genre == "Adventure" %}
+                <span class="text-xs font-bold bg-pink-100 bg-opacity-10 text-pink-300 py-1 px-2 rounded-full">
+                {% elif genre == "Cars" %}
+                <span class="text-xs font-bold bg-orange-100 bg-opacity-10 text-orange-300 py-1 px-2 rounded-full">
+                {% elif genre == "Comedy" %}
+                <span class="text-xs font-bold bg-purple-100 bg-opacity-10 text-purple-300 py-1 px-2 rounded-full">
+                {% elif genre == "Drama" %}
+                <span class="text-xs font-bold bg-blue-100 bg-opacity-10 text-blue-300 py-1 px-2 rounded-full">
+                {% elif genre == "Fantasy" %}
+                <span class="text-xs font-bold bg-yellow-100 bg-opacity-10 text-yellow-300 py-1 px-2 rounded-full">
+                {% elif genre == "Horror" %}
+                <span class="text-xs font-bold bg-red-100 bg-opacity-10 text-red-300 py-1 px-2 rounded-full">
+                {% elif genre == "Mahou Shoujo" %}
+                <span class="text-xs font-bold bg-teal-100 bg-opacity-10 text-teal-300 py-1 px-2 rounded-full">
+                {% elif genre == "Mecha" %}
+                <span class="text-xs font-bold bg-indigo-100 bg-opacity-10 text-indigo-300 py-1 px-2 rounded-full">
+                {% elif genre == "Music" %}
+                <span class="text-xs font-bold bg-pink-100 bg-opacity-10 text-pink-300 py-1 px-2 rounded-full">
+                {% elif genre == "Mystery" %}
+                <span class="text-xs font-bold bg-purple-100 bg-opacity-10 text-purple-300 py-1 px-2 rounded-full">
+                {% elif genre == "Psychological" %}
+                <span class="text-xs font-bold bg-blue-100 bg-opacity-10 text-blue-300 py-1 px-2 rounded-full">
+                {% elif genre == "Romance" %}
+                <span class="text-xs font-bold bg-yellow-100 bg-opacity-10 text-yellow-300 py-1 px-2 rounded-full">
+                {% elif genre == "Sci-Fi" %}
+                <span class="text-xs font-bold bg-red-100 bg-opacity-10 text-red-300 py-1 px-2 rounded-full">
+                {% elif genre == "Slice of Life" %}
+                <span class="text-xs font-bold bg-teal-100 bg-opacity-10 text-teal-300 py-1 px-2 rounded-full">
+                {% elif genre == "Sports" %}
+                <span class="text-xs font-bold bg-indigo-100 bg-opacity-10 text-indigo-300 py-1 px-2 rounded-full">
+                {% elif genre == "Supernatural" %}
+                <span class="text-xs font-bold bg-green-100 bg-opacity-10 text-green-300 py-1 px-2 rounded-full">
+                {% elif genre == "Thriller" %}
+                <span class="text-xs font-bold bg-orange-100 bg-opacity-10 text-orange-300 py-1 px-2 rounded-full">
+                {% else %}
+                <span class="text-xs font-bold bg-white bg-opacity-10 text-white py-1 px-2 rounded-full">
+                {% endif %}
+                    {{ genre }}
+                </span>
+                {% endfor %}
+            </div>
+        </div>
+    </div>
+</a>
+</div>
+{% endfor %}
\ No newline at end of file
diff --git a/templates/partials/datacardwide_render.html b/templates/partials/datacardwide_render.html
new file mode 100644
index 0000000..3e26558
--- /dev/null
+++ b/templates/partials/datacardwide_render.html
@@ -0,0 +1,137 @@
+{% load custom_filters %}
+{% for anime in data %}
+<div class="w-full lg:w-1/2 px-2 mb-2">
+    <div class="flex flex-row w-full bg-neutral-950 rounded hover:bg-{{ user.preferences.accent_colour }}-600 hover:bg-opacity-30 p-2 gap-4">
+        <div class="flex flex-col gap-2 min-w-32">
+            <a href="{% url 'watch:watch' anime.id %}"><img src="{{ anime.image }}" alt="{{ anime.title.english }}" class="rounded-lg w-32 h-48 object-cover"/></a>
+            <div class="flex flex-row gap-2">
+                <a href="https://anilist.co/anime/{{ anime.id }}" target="_blank" class="text-xs font-bold bg-white bg-opacity-10 hover:bg-{{ user.preferences.accent_colour }}-600 hover:bg-opacity-30 rounded px-2 py-1">
+                    <svg stroke="currentColor" fill="currentColor" stroke-width="0" role="img" viewBox="0 0 24 24" height="1.5rem" width="1.5rem" xmlns="http://www.w3.org/2000/svg"><path d="M24 17.53v2.421c0 .71-.391 1.101-1.1 1.101h-5l-.057-.165L11.84 3.736c.106-.502.46-.788 1.053-.788h2.422c.71 0 1.1.391 1.1 1.1v12.38H22.9c.71 0 1.1.392 1.1 1.101zM11.034 2.947l6.337 18.104h-4.918l-1.052-3.131H6.019l-1.077 3.131H0L6.361 2.948h4.673zm-.66 10.96-1.69-5.014-1.541 5.015h3.23z"></path></svg>
+                </a>
+                <a href="https://myanimelist.net/anime/{{ anime.malId }}" target="_blank" class="ext-xs font-bold bg-white bg-opacity-10 hover:bg-{{ user.preferences.accent_colour }}-600 hover:bg-opacity-30 rounded px-2 py-1">
+                    <svg stroke="currentColor" fill="currentColor" stroke-width="0" role="img" viewBox="0 0 24 24" height="1.5rem" width="1.5rem" xmlns="http://www.w3.org/2000/svg"><path d="M8.273 7.247v8.423l-2.103-.003v-5.216l-2.03 2.404-1.989-2.458-.02 5.285H.001L0 7.247h2.203l1.865 2.545 2.015-2.546 2.19.001zm8.628 2.069l.025 6.335h-2.365l-.008-2.871h-2.8c.07.499.21 1.266.417 1.779.155.381.298.751.583 1.128l-1.705 1.125c-.349-.636-.622-1.337-.878-2.082a9.296 9.296 0 0 1-.507-2.179c-.085-.75-.097-1.471.107-2.212a3.908 3.908 0 0 1 1.161-1.866c.313-.293.749-.5 1.1-.687.351-.187.743-.264 1.107-.359a7.405 7.405 0 0 1 1.191-.183c.398-.034 1.107-.066 2.39-.028l.545 1.749H14.51c-.593.008-.878.001-1.341.209a2.236 2.236 0 0 0-1.278 1.92l2.663.033.038-1.81h2.309zm3.992-2.099v6.627l3.107.032-.43 1.775h-4.807V7.187l2.13.03z"></path></svg>
+                </a>
+            </div>
+        </div>
+        <a href="{% url 'watch:watch' anime.id %}" class="flex flex-col gap-2 w-full justify-around max-w-[calc(100%-10rem)]">
+            <h2 class="text-xl font-bold text-transparent bg-clip-text block w-full" style="background: linear-gradient(-45deg, {% if anime.color %}{{ anime.color }}{% else %}white{% endif %}, white); -webkit-background-clip: text; background-clip: text;">
+                {% if user.preferences.title_language == "english" and anime.title.english %}
+                {{ anime.title.english }}
+                {% elif user.preferences.title_language == "native" and anime.title.native %}
+                {{ anime.title.native }}
+                {% else %}
+                {{ anime.title.romaji }}
+                {% endif %}
+            </h2>
+            <p class="max-h-24 overflow-auto text-sm text-white mb-4 no-scrollbar">
+                {{ anime.description|strip_html }}
+            </p>
+            <span class="text-xs sm:text-sm font-bold flex gap-2 flex-row flex-wrap items-center">
+                {% if anime.status == "Ongoing" %}
+                <span class="text-xs font-bold bg-white bg-opacity-10 p-1 rounded flex items-center gap-1">
+                    <span class="text-green-500 pt-1">
+                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-2 sm:size-3">
+                            <circle cx="12" cy="12" r="12" />
+                        </svg>                
+                    </span>
+                    Ongoing
+                </span>
+                {% elif anime.status == "Not yet aired" %}
+                <span class="text-xs font-bold bg-white bg-opacity-10 p-1 rounded flex items-center gap-1">
+                    <span class="text-yellow-500 pt-1">
+                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-2 sm:size-3">
+                            <circle cx="12" cy="12" r="12" />
+                        </svg>
+                    </span>
+                    Not yet aired
+                </span>
+                {% else %}
+                <span class="text-xs font-bold bg-white bg-opacity-10 p-1 rounded flex items-center gap-1">
+                    <span class="text-blue-500 pt-1">
+                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-2 sm:size-3">
+                            <circle cx="12" cy="12" r="12" />
+                        </svg>
+                    </span>
+                    Finished
+                </span>
+                {% endif %}
+                <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">
+                        <path d="M3.604 7.197l7.138 -3.109a.96 .96 0 0 1 1.27 .527l4.924 11.902a1 1 0 0 1 -.514 1.304l-7.137 3.109a.96 .96 0 0 1 -1.271 -.527l-4.924 -11.903a1 1 0 0 1 .514 -1.304z"></path>
+                        <path d="M15 4h1a1 1 0 0 1 1 1v3.5"></path>
+                        <path d="M20 6c.264 .112 .52 .217 .768 .315a1 1 0 0 1 .53 1.311l-2.298 5.374"></path>
+                    </svg>
+                    {{ anime.type }}
+                </span>
+                <span class="text-xs font-bold bg-white bg-opacity-10 p-1 rounded flex items-center gap-1">
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-4">
+                        <path fill-rule="evenodd" d="M6.75 2.25A.75.75 0 0 1 7.5 3v1.5h9V3A.75.75 0 0 1 18 3v1.5h.75a3 3 0 0 1 3 3v11.25a3 3 0 0 1-3 3H5.25a3 3 0 0 1-3-3V7.5a3 3 0 0 1 3-3H6V3a.75.75 0 0 1 .75-.75Zm13.5 9a1.5 1.5 0 0 0-1.5-1.5H5.25a1.5 1.5 0 0 0-1.5 1.5v7.5a1.5 1.5 0 0 0 1.5 1.5h13.5a1.5 1.5 0 0 0 1.5-1.5v-7.5Z" clip-rule="evenodd" />
+                    </svg>              
+                    {{ anime.releaseDate }}
+                </span>
+                {% if anime.rating %}
+                <span class="text-xs font-bold bg-white bg-opacity-10 p-1 rounded flex items-center gap-1">
+                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-4">
+                        <path stroke-linecap="round" stroke-linejoin="round" d="M11.48 3.499a.562.562 0 0 1 1.04 0l2.125 5.111a.563.563 0 0 0 .475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 0 0-.182.557l1.285 5.385a.562.562 0 0 1-.84.61l-4.725-2.885a.562.562 0 0 0-.586 0L6.982 20.54a.562.562 0 0 1-.84-.61l1.285-5.386a.562.562 0 0 0-.182-.557l-4.204-3.602a.562.562 0 0 1 .321-.988l5.518-.442a.563.563 0 0 0 .475-.345L11.48 3.5Z"/>
+                    </svg>
+                    {{ anime.rating }}
+                    </span>
+                {% endif %}
+                {% if anime.totalEpisodes %}
+                <span class="text-xs font-bold bg-white bg-opacity-10 p-1 rounded flex items-center gap-1">
+                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-4">
+                        <path stroke-linecap="round" stroke-linejoin="round" d="M5.25 8.25h15m-16.5 7.5h15m-1.8-13.5-3.9 19.5m-2.1-19.5-3.9 19.5"/>
+                      </svg>
+                      {{ anime.totalEpisodes }}
+                </span>
+                {% endif %}
+            </span>
+            <span class="text-xs sm:text-sm font-bold flex gap-2 flex-row flex-wrap items-center">
+                {% for genre in anime.genres %}
+                {% if genre == "Action" %}
+                <span class="text-xs font-bold bg-green-100 bg-opacity-10 text-green-300 py-1 px-2 rounded-full">
+                {% elif genre == "Adventure" %}
+                <span class="text-xs font-bold bg-pink-100 bg-opacity-10 text-pink-300 py-1 px-2 rounded-full">
+                {% elif genre == "Cars" %}
+                <span class="text-xs font-bold bg-orange-100 bg-opacity-10 text-orange-300 py-1 px-2 rounded-full">
+                {% elif genre == "Comedy" %}
+                <span class="text-xs font-bold bg-purple-100 bg-opacity-10 text-purple-300 py-1 px-2 rounded-full">
+                {% elif genre == "Drama" %}
+                <span class="text-xs font-bold bg-blue-100 bg-opacity-10 text-blue-300 py-1 px-2 rounded-full">
+                {% elif genre == "Fantasy" %}
+                <span class="text-xs font-bold bg-yellow-100 bg-opacity-10 text-yellow-300 py-1 px-2 rounded-full">
+                {% elif genre == "Horror" %}
+                <span class="text-xs font-bold bg-red-100 bg-opacity-10 text-red-300 py-1 px-2 rounded-full">
+                {% elif genre == "Mahou Shoujo" %}
+                <span class="text-xs font-bold bg-teal-100 bg-opacity-10 text-teal-300 py-1 px-2 rounded-full">
+                {% elif genre == "Mecha" %}
+                <span class="text-xs font-bold bg-indigo-100 bg-opacity-10 text-indigo-300 py-1 px-2 rounded-full">
+                {% elif genre == "Music" %}
+                <span class="text-xs font-bold bg-pink-100 bg-opacity-10 text-pink-300 py-1 px-2 rounded-full">
+                {% elif genre == "Mystery" %}
+                <span class="text-xs font-bold bg-purple-100 bg-opacity-10 text-purple-300 py-1 px-2 rounded-full">
+                {% elif genre == "Psychological" %}
+                <span class="text-xs font-bold bg-blue-100 bg-opacity-10 text-blue-300 py-1 px-2 rounded-full">
+                {% elif genre == "Romance" %}
+                <span class="text-xs font-bold bg-yellow-100 bg-opacity-10 text-yellow-300 py-1 px-2 rounded-full">
+                {% elif genre == "Sci-Fi" %}
+                <span class="text-xs font-bold bg-red-100 bg-opacity-10 text-red-300 py-1 px-2 rounded-full">
+                {% elif genre == "Slice of Life" %}
+                <span class="text-xs font-bold bg-teal-100 bg-opacity-10 text-teal-300 py-1 px-2 rounded-full">
+                {% elif genre == "Sports" %}
+                <span class="text-xs font-bold bg-indigo-100 bg-opacity-10 text-indigo-300 py-1 px-2 rounded-full">
+                {% elif genre == "Supernatural" %}
+                <span class="text-xs font-bold bg-green-100 bg-opacity-10 text-green-300 py-1 px-2 rounded-full">
+                {% elif genre == "Thriller" %}
+                <span class="text-xs font-bold bg-orange-100 bg-opacity-10 text-orange-300 py-1 px-2 rounded-full">
+                {% else %}
+                <span class="text-xs font-bold bg-white bg-opacity-10 text-white py-1 px-2 rounded-full">
+                {% endif %}
+                    {{ genre }}
+                </span>
+                {% endfor %}
+            </span>
+        </a>
+    </div>
+</div>
+{% endfor %}
\ No newline at end of file
diff --git a/templates/watch/watch.html b/templates/watch/watch.html
index adc9b81..cc5a773 100644
--- a/templates/watch/watch.html
+++ b/templates/watch/watch.html
@@ -20,9 +20,9 @@
         </div>
     </div>
 
-    <div class="w-full lg:w-1/4 flex flex-col overflow-y-auto px-2 lg:px-0 h-full max-h-screen lg:h-[42vw] lg:max-h-[806px]">
+    <div class="w-full lg:w-1/4 flex flex-col px-2 lg:px-0">
         <h2 class="text-white text-xl font-bold mb-4">Episodes</h2>
-        <div class="flex flex-col gap-2">
+        <div class="flex flex-col gap-2 h-full max-h-96 lg:h-[39vw] lg:max-h-[761px] overflow-y-auto">
             {% for episode in anime_episodes.episodes %}
             {% if episode.number == current_episode %}
             <a id="selected-episode" href="{% url "watch:watch_episode" anime_id episode.number %}" class="flex flex-row justify-between items-center w-full gap-4 bg-{{ user.preferences.accent_colour }}-600 p-2 rounded hover:bg-{{ user.preferences.accent_colour }}-600 hover:bg-opacity-30">
diff --git a/user_profile/migrations/0001_initial.py b/user_profile/migrations/0001_initial.py
index bfb624f..ffe438e 100644
--- a/user_profile/migrations/0001_initial.py
+++ b/user_profile/migrations/0001_initial.py
@@ -1,4 +1,4 @@
-# Generated by Django 5.1 on 2024-08-26 04:46
+# Generated by Django 5.1 on 2024-08-31 04:01
 
 import django.db.models.deletion
 from django.conf import settings
@@ -57,7 +57,8 @@ class Migration(migrations.Migration):
                 ),
                 ("anime_id", models.IntegerField()),
                 ("episode", models.IntegerField()),
-                ("timestamp", models.DateTimeField(auto_now=True)),
+                ("time_watched", models.IntegerField(default=0)),
+                ("last_watched", models.BooleanField(default=False)),
                 (
                     "user",
                     models.ForeignKey(
@@ -82,6 +83,7 @@ class Migration(migrations.Migration):
                         verbose_name="ID",
                     ),
                 ),
+                ("accent_colour", models.CharField(default="purple", max_length=16)),
                 ("card_layout", models.CharField(default="classic", max_length=16)),
                 ("title_language", models.CharField(default="english", max_length=16)),
                 (
@@ -102,6 +104,8 @@ class Migration(migrations.Migration):
                     "display_guild_name_instead_of_username",
                     models.BooleanField(default=True),
                 ),
+                ("smart_mal_sync", models.BooleanField(default=False)),
+                ("ingrain_sub_subtitles_in_dub", models.BooleanField(default=False)),
                 (
                     "user",
                     models.ForeignKey(
diff --git a/user_profile/migrations/0002_userpreferences_smart_mal_sync.py b/user_profile/migrations/0002_userpreferences_smart_mal_sync.py
deleted file mode 100644
index 11bcf2c..0000000
--- a/user_profile/migrations/0002_userpreferences_smart_mal_sync.py
+++ /dev/null
@@ -1,17 +0,0 @@
-# Generated by Django 5.1 on 2024-08-26 05:20
-
-from django.db import migrations, models
-
-
-class Migration(migrations.Migration):
-    dependencies = [
-        ("user_profile", "0001_initial"),
-    ]
-
-    operations = [
-        migrations.AddField(
-            model_name="userpreferences",
-            name="smart_mal_sync",
-            field=models.BooleanField(default=False),
-        ),
-    ]
diff --git a/user_profile/migrations/0003_userpreferences_accent_colour.py b/user_profile/migrations/0003_userpreferences_accent_colour.py
deleted file mode 100644
index 9d1f3aa..0000000
--- a/user_profile/migrations/0003_userpreferences_accent_colour.py
+++ /dev/null
@@ -1,17 +0,0 @@
-# Generated by Django 5.1 on 2024-08-27 06:08
-
-from django.db import migrations, models
-
-
-class Migration(migrations.Migration):
-    dependencies = [
-        ("user_profile", "0002_userpreferences_smart_mal_sync"),
-    ]
-
-    operations = [
-        migrations.AddField(
-            model_name="userpreferences",
-            name="accent_colour",
-            field=models.CharField(default="purple", max_length=16),
-        ),
-    ]
diff --git a/user_profile/migrations/0004_remove_userhistory_timestamp_and_more.py b/user_profile/migrations/0004_remove_userhistory_timestamp_and_more.py
deleted file mode 100644
index e5455be..0000000
--- a/user_profile/migrations/0004_remove_userhistory_timestamp_and_more.py
+++ /dev/null
@@ -1,21 +0,0 @@
-# Generated by Django 5.1 on 2024-08-30 23:43
-
-from django.db import migrations, models
-
-
-class Migration(migrations.Migration):
-    dependencies = [
-        ("user_profile", "0003_userpreferences_accent_colour"),
-    ]
-
-    operations = [
-        migrations.RemoveField(
-            model_name="userhistory",
-            name="timestamp",
-        ),
-        migrations.AddField(
-            model_name="userhistory",
-            name="time_watched",
-            field=models.IntegerField(default=0),
-        ),
-    ]
diff --git a/user_profile/migrations/0005_userhistory_last_watched.py b/user_profile/migrations/0005_userhistory_last_watched.py
deleted file mode 100644
index 2e769f5..0000000
--- a/user_profile/migrations/0005_userhistory_last_watched.py
+++ /dev/null
@@ -1,17 +0,0 @@
-# Generated by Django 5.1 on 2024-08-31 01:35
-
-from django.db import migrations, models
-
-
-class Migration(migrations.Migration):
-    dependencies = [
-        ("user_profile", "0004_remove_userhistory_timestamp_and_more"),
-    ]
-
-    operations = [
-        migrations.AddField(
-            model_name="userhistory",
-            name="last_watched",
-            field=models.BooleanField(default=False),
-        ),
-    ]
diff --git a/user_profile/migrations/0006_userpreferences_ingrain_sub_subtitles_in_dub.py b/user_profile/migrations/0006_userpreferences_ingrain_sub_subtitles_in_dub.py
deleted file mode 100644
index 5c867a7..0000000
--- a/user_profile/migrations/0006_userpreferences_ingrain_sub_subtitles_in_dub.py
+++ /dev/null
@@ -1,17 +0,0 @@
-# Generated by Django 5.1 on 2024-08-31 02:16
-
-from django.db import migrations, models
-
-
-class Migration(migrations.Migration):
-    dependencies = [
-        ("user_profile", "0005_userhistory_last_watched"),
-    ]
-
-    operations = [
-        migrations.AddField(
-            model_name="userpreferences",
-            name="ingrain_sub_subtitles_in_dub",
-            field=models.BooleanField(default=False),
-        ),
-    ]