aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--homepage/utils.py4
-rw-r--r--homepage/views.py3
-rw-r--r--static/css/main.css96
-rw-r--r--templates/home/index.html206
4 files changed, 298 insertions, 11 deletions
diff --git a/homepage/utils.py b/homepage/utils.py
index 9466afe..2c238bb 100644
--- a/homepage/utils.py
+++ b/homepage/utils.py
@@ -43,9 +43,9 @@ def get_next_season_year():
current_season = get_current_season()
current_year = get_current_year()
if current_season == "WINTER":
- return current_year
- else:
return current_year + 1
+ else:
+ return current_year
def get_trending_anime(page=1, per_page=34):
diff --git a/homepage/views.py b/homepage/views.py
index eb782fc..8a0812d 100644
--- a/homepage/views.py
+++ b/homepage/views.py
@@ -5,6 +5,7 @@ from homepage.utils import (
get_top_anime,
get_top_airing_anime,
get_upcoming_anime,
+ get_next_season,
)
@@ -14,6 +15,7 @@ def index(request):
top_anime = get_top_anime()
top_airing_anime = get_top_airing_anime()
upcoming_anime = get_upcoming_anime()
+ next_season = get_next_season()
context = {
"trending_anime": trending_anime["results"],
@@ -21,6 +23,7 @@ def index(request):
"top_anime": top_anime["results"],
"top_airing_anime": top_airing_anime["results"],
"upcoming_anime": upcoming_anime["results"],
+ "next_season": next_season
}
return render(request, "home/index.html", context)
diff --git a/static/css/main.css b/static/css/main.css
index 84d3eed..0b5b74c 100644
--- a/static/css/main.css
+++ b/static/css/main.css
@@ -683,10 +683,26 @@ video {
height: 1rem;
}
+.h-24 {
+ height: 6rem;
+}
+
+.h-56 {
+ height: 14rem;
+}
+
+.h-40 {
+ height: 10rem;
+}
+
.max-h-24 {
max-height: 6rem;
}
+.max-h-12 {
+ max-height: 3rem;
+}
+
.w-6 {
width: 1.5rem;
}
@@ -728,6 +744,28 @@ video {
width: 1rem;
}
+.w-56 {
+ width: 14rem;
+}
+
+.w-20 {
+ width: 5rem;
+}
+
+.w-32 {
+ width: 8rem;
+}
+
+.max-w-fit {
+ max-width: -moz-fit-content;
+ max-width: fit-content;
+}
+
+.max-w-max {
+ max-width: -moz-max-content;
+ max-width: max-content;
+}
+
.-translate-x-1\/2 {
--tw-translate-x: -50%;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
@@ -812,6 +850,32 @@ video {
overflow: auto;
}
+.overflow-hidden {
+ overflow: hidden;
+}
+
+.overflow-clip {
+ overflow: clip;
+}
+
+.truncate {
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+}
+
+.text-ellipsis {
+ text-overflow: ellipsis;
+}
+
+.whitespace-normal {
+ white-space: normal;
+}
+
+.whitespace-nowrap {
+ white-space: nowrap;
+}
+
.rounded {
border-radius: 0.25rem;
}
@@ -828,6 +892,10 @@ video {
border-radius: 0.75rem;
}
+.rounded-sm {
+ border-radius: 0.125rem;
+}
+
.border {
border-width: 1px;
}
@@ -1047,10 +1115,19 @@ video {
line-height: 1rem;
}
+.text-2xl {
+ font-size: 1.5rem;
+ line-height: 2rem;
+}
+
.font-bold {
font-weight: 700;
}
+.uppercase {
+ text-transform: uppercase;
+}
+
.text-purple-400 {
--tw-text-opacity: 1;
color: rgb(192 132 252 / var(--tw-text-opacity));
@@ -1130,6 +1207,21 @@ video {
color: rgb(234 179 8 / var(--tw-text-opacity));
}
+.text-gray-400 {
+ --tw-text-opacity: 1;
+ color: rgb(156 163 175 / var(--tw-text-opacity));
+}
+
+.text-gray-300 {
+ --tw-text-opacity: 1;
+ color: rgb(209 213 219 / var(--tw-text-opacity));
+}
+
+.text-gray-200 {
+ --tw-text-opacity: 1;
+ color: rgb(229 231 235 / var(--tw-text-opacity));
+}
+
.outline-none {
outline: 2px solid transparent;
outline-offset: 2px;
@@ -1177,6 +1269,10 @@ main {
/* Light gray for inactive bullets */
}
+.hover\:bg-opacity-20:hover {
+ --tw-bg-opacity: 0.2;
+}
+
.hover\:text-white:hover {
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity));
diff --git a/templates/home/index.html b/templates/home/index.html
index d3c878b..b37f887 100644
--- a/templates/home/index.html
+++ b/templates/home/index.html
@@ -95,22 +95,22 @@
<!-- Split: Anime List: Sidebar -->
<section class="flex flex-col lg:flex-row mt-4 gap-4">
- <section class="w-full lg:w-3/4 flex flex-col items-center">
+ <section class="w-full lg:w-3/4 flex flex-col items-center p-2">
<!-- Top Bar: Trending, Popular, Top Rated: Purple Text: Active Tab -->
<section class="inline-flex w-max flex-row gap-4 rounded-full bg-white bg-opacity-10 mx-auto">
- <button class="flex flex-row items-center gap-2 text-sm font-bold py-2 px-4 rounded-full bg-purple-600 category-switch active-category" data-target="trending">
+ <button class="flex flex-row items-center focus:outline-none gap-2 text-sm font-bold py-2 px-4 rounded-full bg-purple-600 category-switch active-category" data-target="trending">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-4">
<path fill-rule="evenodd" d="M12.963 2.286a.75.75 0 0 0-1.071-.136 9.742 9.742 0 0 0-3.539 6.176 7.547 7.547 0 0 1-1.705-1.715.75.75 0 0 0-1.152-.082A9 9 0 1 0 15.68 4.534a7.46 7.46 0 0 1-2.717-2.248ZM15.75 14.25a3.75 3.75 0 1 1-7.313-1.172c.628.465 1.35.81 2.133 1a5.99 5.99 0 0 1 1.925-3.546 3.75 3.75 0 0 1 3.255 3.718Z" clip-rule="evenodd" />
</svg>
<span>Trending</span>
</button>
- <button class="flex flex-row items-center gap-2 text-sm font-bold py-2 px-4 rounded-full category-switch" data-target="popular">
+ <button class="flex flex-row items-center focus:outline-none gap-2 text-sm font-bold py-2 px-4 rounded-full category-switch" data-target="popular">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-4">
<path fill-rule="evenodd" d="M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.006 5.404.434c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.434 2.082-5.005Z" clip-rule="evenodd" />
</svg>
<span>Popular</span>
</button>
- <button class="flex flex-row items-center gap-2 text-sm font-bold py-2 px-4 rounded-full category-switch" data-target="top_rated">
+ <button class="flex flex-row items-center focus:outline-none gap-2 text-sm font-bold py-2 px-4 rounded-full category-switch" data-target="top_rated">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-4">
<path d="M18.375 2.25c-1.035 0-1.875.84-1.875 1.875v15.75c0 1.035.84 1.875 1.875 1.875h.75c1.035 0 1.875-.84 1.875-1.875V4.125c0-1.036-.84-1.875-1.875-1.875h-.75ZM9.75 8.625c0-1.036.84-1.875 1.875-1.875h.75c1.036 0 1.875.84 1.875 1.875v11.25c0 1.035-.84 1.875-1.875 1.875h-.75a1.875 1.875 0 0 1-1.875-1.875V8.625ZM3 13.125c0-1.036.84-1.875 1.875-1.875h.75c1.036 0 1.875.84 1.875 1.875v6.75c0 1.035-.84 1.875-1.875 1.875h-.75A1.875 1.875 0 0 1 3 19.875v-6.75Z" />
</svg>
@@ -121,8 +121,30 @@
<section id="trending" class="flex flex-wrap justify-center mt-4 animate__animated animate__slideInUp">
{% for anime in trending_anime %}
{% if anime.title.english %}
- <a href="#" class="w-1/2 lg:w-1/6 px-4 pb-4 text-gray-500 hover:text-white flex flex-col gap-2">
+ <a href="#" class="w-1/2 lg: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 h-72 w-auto object-cover"/>
+ <div class="inline-flex gap-2 flex-wrap">
+ <span class="text-xs font-bold bg-white bg-opacity-10 text-white px-2 py-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 text-white px-2 py-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>
+ <span class="text-xs font-bold bg-white bg-opacity-10 text-white px-2 py-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>
+ </div>
<span class="text-sm font-bold flex gap-1 flex-row items-start">
{% if anime.status == "Ongoing" %}
<span class="text-green-500 pt-1">
@@ -155,8 +177,30 @@
<section id="popular" class="flex-wrap justify-center mt-4 hidden animate__animated animate__slideInUp">
{% for anime in popular_anime %}
{% if anime.title.english %}
- <a href="#" class="w-1/2 lg:w-1/6 px-4 pb-4 text-gray-500 hover:text-white flex flex-col gap-2">
+ <a href="#" class="w-1/2 lg: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 h-72 w-auto object-cover"/>
+ <div class="inline-flex gap-2 flex-wrap">
+ <span class="text-xs font-bold bg-white bg-opacity-10 text-white px-2 py-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 text-white px-2 py-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>
+ <span class="text-xs font-bold bg-white bg-opacity-10 text-white px-2 py-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>
+ </div>
<span class="text-sm font-bold flex gap-1 flex-row items-start">
{% if anime.status == "Ongoing" %}
<span class="text-green-500 pt-1">
@@ -189,8 +233,30 @@
<section id="top_rated" class="flex-wrap justify-center mt-4 hidden animate__animated animate__slideInUp">
{% for anime in top_anime %}
{% if anime.title.english %}
- <a href="#" class="w-1/2 lg:w-1/6 px-4 pb-4 text-gray-500 hover:text-white flex flex-col gap-2">
+ <a href="#" class="w-1/2 lg: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 h-72 w-auto object-cover"/>
+ <div class="inline-flex gap-2 flex-wrap">
+ <span class="text-xs font-bold bg-white bg-opacity-10 text-white px-2 py-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 text-white px-2 py-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>
+ <span class="text-xs font-bold bg-white bg-opacity-10 text-white px-2 py-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>
+ </div>
<span class="text-sm font-bold flex gap-1 flex-row items-start">
{% if anime.status == "Ongoing" %}
<span class="text-green-500 pt-1">
@@ -220,8 +286,130 @@
{% endfor %}
</section>
</section>
- <section class="w-full lg:w-1/4">
- <!-- Other content -->
+ <section class="w-full lg:w-1/4 px-4 py-2">
+ <h2 class="text-2xl font-bold text-white uppercase">Top Airing</h2>
+ <!-- Wide Cards: Upcoming -->
+ <section class="flex flex-col gap-4 mt-4 animate__animated animate__slideInUp">
+ {% for anime in top_airing_anime %}
+ {% if anime.title.english %}
+ <a href="#" class="flex flex-row gap-4 bg-white bg-opacity-10 p-2 rounded hover:bg-opacity-20">
+ <img src="{{ anime.image }}" alt="{{ anime.title.english }}" class="rounded-lg h-40 w-32 object-cover"/>
+ <div class="flex flex-col gap-2">
+ <span class="text-sm font-bold flex gap-1 flex-row items-start">
+ {% if anime.status == "Ongoing" %}
+ <span class="text-green-500 pt-1">
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-3">
+ <circle cx="12" cy="12" r="12" />
+ </svg>
+ </span>
+ {% elif anime.status == "Not yet aired" %}
+ <span class="text-yellow-500 pt-1">
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-3">
+ <circle cx="12" cy="12" r="12" />
+ </svg>
+ </span>
+ {% else %}
+ <span class="text-blue-500 pt-1">
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-3">
+ <circle cx="12" cy="12" r="12" />
+ </svg>
+ </span>
+ {% endif %}
+ <span>
+ {{ anime.title.english }}
+ </span>
+ </span>
+ <div class="text-sm text-gray-400 w-full overflow-hidden text-ellipsis max-h-24 max-w-max mb-2">
+ {{ anime.description|safe }}
+ </div>
+ <div class="inline-flex gap-2">
+ <span class="text-xs font-bold bg-white bg-opacity-10 text-white px-2 py-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 text-white px-2 py-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>
+ <span class="text-xs font-bold bg-white bg-opacity-10 text-white px-2 py-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>
+ <span class="text-xs font-bold bg-white bg-opacity-10 text-white px-2 py-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.currentEpisode }} / {{ anime.totalEpisodes }}
+ </span>
+ </div>
+ </div>
+ </a>
+ {% endif %}
+ {% endfor %}
+ </section>
+ <h2 class="text-2xl font-bold text-white uppercase mt-4">Upcoming {{ next_season }}</h2>
+ <!-- Wide Cards: Upcoming -->
+ <section class="flex flex-col gap-4 mt-4 animate__animated animate__slideInUp">
+ {% for anime in upcoming_anime %}
+ {% if anime.title.english %}
+ <a href="#" class="flex flex-row gap-4 bg-white bg-opacity-10 p-2 rounded hover:bg-opacity-20">
+ <img src="{{ anime.image }}" alt="{{ anime.title.english }}" class="rounded-lg h-40 w-32 object-cover"/>
+ <div class="flex flex-col gap-2">
+ <span class="text-sm font-bold flex gap-1 flex-row items-start">
+ {% if anime.status == "Ongoing" %}
+ <span class="text-green-500 pt-1">
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-3">
+ <circle cx="12" cy="12" r="12" />
+ </svg>
+ </span>
+ {% elif anime.status == "Not yet aired" %}
+ <span class="text-yellow-500 pt-1">
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-3">
+ <circle cx="12" cy="12" r="12" />
+ </svg>
+ </span>
+ {% else %}
+ <span class="text-blue-500 pt-1">
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-3">
+ <circle cx="12" cy="12" r="12" />
+ </svg>
+ </span>
+ {% endif %}
+ <span>
+ {{ anime.title.english }}
+ </span>
+ </span>
+ <div class="text-sm text-gray-400 w-full overflow-hidden text-ellipsis max-h-24 max-w-max mb-2">
+ {{ anime.description|safe }}
+ </div>
+ <div class="inline-flex gap-2">
+ <span class="text-xs font-bold bg-white bg-opacity-10 text-white px-2 py-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 text-white px-2 py-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>
+ </div>
+ </div>
+ </a>
+ {% endif %}
+ {% endfor %}
</section>
</section>
generated by cgit v1.2.3 (git 2.25.1) at 2026-06-06 02:06:09 +0000