aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--static/css/main.css4
-rw-r--r--templates/home/index.html94
-rw-r--r--templates/partials/datacard_render.html2
-rw-r--r--templates/partials/datacardcompact_render.html2
-rw-r--r--templates/partials/datacardwide_render.html2
-rw-r--r--templates/partials/sidebarwidecard_render.html2
6 files changed, 80 insertions, 26 deletions
diff --git a/static/css/main.css b/static/css/main.css
index 33882fe..3ce35aa 100644
--- a/static/css/main.css
+++ b/static/css/main.css
@@ -2039,6 +2039,10 @@ video {
transition-timing-function: linear;
}
+.ease-out {
+ transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
+}
+
/* Hide scrollbar for Chrome, Safari and Opera */
.no-scrollbar::-webkit-scrollbar {
diff --git a/templates/home/index.html b/templates/home/index.html
index 275a36b..d5b29fd 100644
--- a/templates/home/index.html
+++ b/templates/home/index.html
@@ -3,6 +3,26 @@
{% block css %}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>
+<style>
+ @keyframes fadeInUp {
+ from {
+ opacity: 0;
+ transform: translate3d(0, 20px, 0);
+ }
+ to {
+ opacity: 1;
+ transform: translate3d(0, 0, 0);
+ }
+ }
+
+ .anime-item {
+ opacity: 0;
+ }
+
+ .anime-item.fade-in {
+ animation: fadeInUp 0.5s ease-out forwards;
+ }
+</style>
{% endblock css %}
{% block content %}
<!-- Swiper: Trending Anime -->
@@ -158,7 +178,7 @@
</button>
</section>
<!-- Data Cards: Trending Anime -->
- <section id="trending" class="flex flex-wrap justify-center mt-4 animate__animated animate__slideInUp max-w-full">
+ <section id="trending" class="flex flex-wrap justify-center mt-4 max-w-full">
{% if user.preferences.card_layout == 'classic' %}
{% include "partials/datacard_render.html" with data=trending_anime %}
{% elif user.preferences.card_layout == 'wide' %}
@@ -168,7 +188,7 @@
{% endif %}
</section>
<!-- Data Cards: Popular Anime -->
- <section id="popular" class="flex-wrap justify-center mt-4 hidden animate__animated animate__slideInUp max-w-full">
+ <section id="popular" class="flex-wrap justify-center mt-4 hidden 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 %}
@@ -179,7 +199,7 @@
{% 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">
+ <section id="top_rated" class="flex-wrap justify-center mt-4 hidden 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 %}
@@ -193,12 +213,12 @@
<section class="w-full xl: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">
+ <section class="flex flex-col gap-4 mt-4">
{% include "partials/sidebarwidecard_render.html" with data=top_airing_anime %}
</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">
+ <section class="flex flex-col gap-4 mt-4">
{% include "partials/sidebarwidecard_render.html" with data=upcoming_anime %}
</section>
</section>
@@ -237,24 +257,54 @@
});
</script>
<script>
- const categorySwitch = document.querySelectorAll(".category-switch");
- categorySwitch.forEach((button) => {
- button.addEventListener("click", () => {
- categorySwitch.forEach((button) => {
- button.classList.remove("active-category");
- button.classList.remove("bg-{{ user.preferences.accent_colour }}-600");
- });
- button.classList.add("active-category");
- button.classList.add("bg-{{ user.preferences.accent_colour }}-600");
+ document.addEventListener('DOMContentLoaded', function() {
+ const categorySwitch = document.querySelectorAll(".category-switch");
+ const sections = ["trending", "popular", "top_rated"];
+
+ function applyFadeInEffect(sectionId) {
+ const animeItems = document.querySelectorAll(`#${sectionId} .anime-item`);
+ animeItems.forEach((item, index) => {
+ item.classList.remove('fade-in');
+ item.style.animationDelay = `${index * 0.1}s`;
+ // Use setTimeout to trigger a reflow and apply the animation
+ setTimeout(() => {
+ item.classList.add('fade-in');
+ }, 10);
+ });
+ }
- const target = button.getAttribute("data-target");
- const sections = [document.getElementById("trending"), document.getElementById("popular"), document.getElementById("top_rated")];
- sections.forEach((section) => {
- section.classList.add("hidden");
- section.classList.remove("flex");
- });
- document.getElementById(target).classList.remove("hidden");
- document.getElementById(target).classList.add("flex");
+ function switchCategory(category) {
+ sections.forEach((sectionId) => {
+ const section = document.getElementById(sectionId);
+ if (sectionId === category) {
+ section.classList.remove("hidden");
+ section.classList.add("flex");
+ applyFadeInEffect(sectionId);
+ } else {
+ section.classList.add("hidden");
+ section.classList.remove("flex");
+ }
+ });
+
+ categorySwitch.forEach((button) => {
+ button.classList.remove("active-category", "bg-{{ user.preferences.accent_colour }}-600");
+ if (button.getAttribute("data-target") === category) {
+ button.classList.add("active-category", "bg-{{ user.preferences.accent_colour }}-600");
+ }
+ });
+
+ localStorage.setItem("activeCategory", category);
+ }
+
+ // Initial setup
+ const activeCategory = localStorage.getItem("activeCategory") || "trending";
+ switchCategory(activeCategory);
+
+ categorySwitch.forEach((button) => {
+ button.addEventListener("click", () => {
+ const target = button.getAttribute("data-target");
+ switchCategory(target);
+ });
});
});
</script>
diff --git a/templates/partials/datacard_render.html b/templates/partials/datacard_render.html
index 00fae91..81a5d34 100644
--- a/templates/partials/datacard_render.html
+++ b/templates/partials/datacard_render.html
@@ -1,6 +1,6 @@
{% for anime in data %}
{% if not anime.status == "Not yet aired"%}
-<a href="{% url "watch:watch" anime.id %}" class="w-1/2 md:w-1/3 lg:w-1/4 xl:w-1/5 2xl:w-1/6 text-gray-500 p-1 sm:p-2 mb-4 hover:text-white flex flex-col">
+<a href="{% url "watch:watch" anime.id %}" class="w-1/2 md:w-1/3 lg:w-1/4 xl:w-1/5 2xl:w-1/6 text-gray-500 p-1 sm:p-2 mb-4 hover:text-white flex flex-col anime-item opacity-0">
<div class="relative pt-[140%]">
<img src="{{ anime.image }}" alt="{{ anime.title.english }}" class="absolute top-0 left-0 w-full h-full rounded-lg object-cover"/>
</div>
diff --git a/templates/partials/datacardcompact_render.html b/templates/partials/datacardcompact_render.html
index 4aecc1c..3a2e297 100644
--- a/templates/partials/datacardcompact_render.html
+++ b/templates/partials/datacardcompact_render.html
@@ -1,6 +1,6 @@
{% for anime in data %}
{% if not anime.status == "Not yet aired"%}
-<div class="w-full max-w-full px-2 mb-2">
+<div class="w-full max-w-full px-2 mb-2 anime-item">
<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"/>
diff --git a/templates/partials/datacardwide_render.html b/templates/partials/datacardwide_render.html
index 827270b..7b022cf 100644
--- a/templates/partials/datacardwide_render.html
+++ b/templates/partials/datacardwide_render.html
@@ -1,7 +1,7 @@
{% load custom_filters %}
{% for anime in data %}
{% if not anime.status == "Not yet aired"%}
-<div class="w-full lg:w-1/2 px-2 mb-2">
+<div class="w-full lg:w-1/2 px-2 mb-2 anime-item">
<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>
diff --git a/templates/partials/sidebarwidecard_render.html b/templates/partials/sidebarwidecard_render.html
index 385b75e..7d7f8f9 100644
--- a/templates/partials/sidebarwidecard_render.html
+++ b/templates/partials/sidebarwidecard_render.html
@@ -1,5 +1,5 @@
{% for anime in data %}
-<a href="{% url "watch:watch" anime.id %}" class="flex flex-row w-full gap-4 bg-white bg-opacity-10 p-2 rounded hover:bg-{{ user.preferences.accent_colour }}-600 hover:bg-opacity-30">
+<a href="{% url "watch:watch" anime.id %}" class="flex flex-row w-full gap-4 bg-white bg-opacity-10 p-2 rounded hover:bg-{{ user.preferences.accent_colour }}-600 hover:bg-opacity-30 animate__animated animate__fadeInUp">
<img src="{{ anime.image }}" alt="{{ anime.title.english }}" class="rounded-lg w-32 h-auto object-cover"/>
<div class="flex flex-col gap-2">
<span class="text-sm font-bold flex gap-1 flex-row items-start">
generated by cgit v1.2.3 (git 2.25.1) at 2026-06-06 04:11:51 +0000