melosh/mal
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: normalize heading font weights and replace hardcoded colors with css variables

Browse Source
This commit is contained in:
mkelvers
2026-05-08 12:26:37 +02:00
parent b6ccef7743
commit 620ebc0b6c
14 changed files with 94 additions and 94 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
templates/base.gohtml
View File

@@ -34,10 +34,10 @@
</style>
<script type="module" src="/dist/static/theme.js" defer></script>
<template id="toast-template">
<div class="toast bg-white/10 border border-white/20 flex items-center gap-3 px-4 py-3 shadow-lg transform transition-all duration-300 translate-y-2 opacity-0">
<span class="toast-message text-sm text-neutral-200"></span>
<div class="toast bg-foreground/10 border border-border flex items-center gap-3 px-4 py-3 shadow-lg transform transition-all duration-300 translate-y-2 opacity-0">
<span class="toast-message text-sm text-foreground"></span>
<button class="toast-close ml-2 opacity-50 hover:opacity-100" aria-label="Close">
<svg class="size-4 text-neutral-400" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<svg class="size-4 text-foreground-muted" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M18 6L6 18M6 6l12 12"/>
</svg>
</button>

2
templates/browse.gohtml
View File

@@ -3,7 +3,7 @@
{{if .WatchlistIDs}}<script>initWatchlist({{.WatchlistIDs}})</script>{{end}}
<div class="flex flex-col gap-6">
<div class="flex items-end justify-between">
<h1 class="text-xl font-semibold text-foreground">Browse</h1>
<h1 class="text-xl font-normal text-foreground">Browse</h1>
</div>
{{template "filter_bar" .}}

2
templates/components/anime_card.gohtml
View File

@@ -67,7 +67,7 @@
{{end}}
</a>
{{if and $withActions (not $hideTitle)}}
<h3 class="line-clamp-2 text-sm font-medium text-foreground">
<h3 class="line-clamp-2 text-sm font-normal text-foreground">
{{$displayTitle}}
</h3>
{{end}}

4
templates/components/footer.gohtml
View File

@@ -8,7 +8,7 @@
<div class="flex items-center gap-6">
<button
id="footer-theme-toggle"
class="text-neutral-500 transition-colors hover:text-foreground focus:outline-none"
class="text-foreground-muted transition-colors hover:text-foreground focus:outline-none"
aria-label="Toggle theme"
>
<svg class="theme-icon-dark size-5" viewBox="0 0 24 24" stroke="currentColor" fill="none" stroke-width="2">
@@ -19,7 +19,7 @@
<path d="M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42"/>
</svg>
</button>
<a href="https://github.com/mkelvers/mal" target="_blank" rel="noopener" class="group flex items-center gap-2.5 text-neutral-500 transition-colors hover:text-foreground">
<a href="https://github.com/mkelvers/mal" target="_blank" rel="noopener" class="group flex items-center gap-2.5 text-foreground-muted transition-colors hover:text-foreground">
<svg class="h-5 w-5 transition-transform group-hover:scale-110" viewBox="0 0 24 24" fill="currentColor"><path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/></svg>
<span class="text-sm font-medium">Source</span>
</a>

14
templates/components/header.gohtml
View File

@@ -2,10 +2,10 @@
<header class="bg-background-header flex flex-col border-b border-border relative z-50">
<div class="flex h-16 items-center justify-between px-4 md:px-6">
<div class="flex items-center gap-4">
<button onclick="toggleMobileMenu()" class="block text-neutral-400 transition-colors hover:text-foreground focus:outline-none md:hidden">
<button onclick="toggleMobileMenu()" class="block text-foreground-muted transition-colors hover:text-foreground focus:outline-none md:hidden">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="4" x2="20" y1="12" y2="12"/><line x1="4" x2="20" y1="6" y2="6"/><line x1="4" x2="20" y1="18" y2="18"/></svg>
</button>
<button onclick="toggleSidebar()" class="hidden text-neutral-400 transition-colors hover:text-foreground focus:outline-none lg:block">
<button onclick="toggleSidebar()" class="hidden text-foreground-muted transition-colors hover:text-foreground focus:outline-none lg:block">
<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="3" x2="21" y1="12" y2="12"/><line x1="3" x2="21" y1="6" y2="6"/><line x1="3" x2="21" y1="18" y2="18"/></svg>
</button>
<a href="/" class="group flex items-center gap-2.5 focus:outline-none">
@@ -17,7 +17,7 @@
<div class="hidden max-w-2xl flex-1 items-center justify-center px-4 md:flex">
<form action="/browse" method="GET" class="w-full max-w-lg">
<div class="focus-within:border-accent bg-background-surface flex h-10 w-full items-center overflow-hidden border border-border transition-colors">
<div class="pr-2 pl-4 text-neutral-400">
<div class="pr-2 pl-4 text-foreground-muted">
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></svg>
</div>
<input type="text" name="q" placeholder="Search..." class="h-full w-full bg-transparent px-1 text-sm text-foreground focus:outline-none" />
@@ -28,7 +28,7 @@
<div class="flex items-center gap-2 relative justify-end">
<button
id="theme-toggle"
class="rounded-full p-1.5 text-neutral-400 transition-colors hover:bg-surface-hover hover:text-foreground focus:outline-none"
class="rounded-full p-1.5 text-foreground-muted transition-colors hover:bg-surface-hover hover:text-foreground focus:outline-none"
>
<svg class="theme-icon-dark size-5" viewBox="0 0 24 24" stroke="currentColor" fill="none" stroke-width="2">
<path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/>
@@ -48,11 +48,11 @@
class="h-8 w-8 rounded-full object-cover"
/>
{{else}}
<div class="bg-accent flex h-8 w-8 items-center justify-center rounded-full text-sm font-semibold text-white">
<div class="bg-accent flex h-8 w-8 items-center justify-center rounded-full text-sm font-semibold text-on-accent">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
</div>
{{end}}
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-neutral-400"><path d="m6 9 6 6 6-6"/></svg>
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-foreground-muted"><path d="m6 9 6 6 6-6"/></svg>
</button>
</div>
@@ -80,7 +80,7 @@
<div class="flex border-t border-border p-3 md:hidden">
<form action="/browse" method="GET" class="w-full">
<div class="focus-within:border-accent bg-background-surface flex h-10 w-full items-center overflow-hidden border border-border transition-colors">
<div class="pr-2 pl-4 text-neutral-400">
<div class="pr-2 pl-4 text-foreground-muted">
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></svg>
</div>
<input type="text" name="q" placeholder="Search..." class="h-full w-full bg-transparent px-1 text-sm text-foreground focus:outline-none" />

2
templates/components/watch_order.gohtml
View File

@@ -6,7 +6,7 @@
<div class="group relative">
{{template "anime_card" dict "Anime" .Anime "WithActions" true "Compact" true "HasTopBadge" true "IsWatchlist" (index $.WatchlistMap .Anime.MalID)}}
{{if eq .Anime.MalID $.AnimeID}}
<div class="bg-accent absolute -top-2 -right-2 z-20 px-2 py-0.5 text-[10px] font-bold text-white shadow-md">
<div class="bg-accent absolute -top-2 -right-2 z-20 px-2 py-0.5 text-[10px] font-bold text-on-accent shadow-md">
CURRENT
</div>
{{end}}

4
templates/components/watchlist_actions.gohtml
View File

@@ -17,7 +17,7 @@
Add to Watchlist
{{end}}
</span>
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-neutral-400"><path d="m6 9 6 6 6-6"/></svg>
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-foreground-muted"><path d="m6 9 6 6 6-6"/></svg>
</button>
</div>
@@ -37,7 +37,7 @@
</button>
<div id="remove-watchlist-container-{{$anime.MalID}}" class="{{if not $status}}hidden{{end}}">
<div class="my-1 h-px bg-white/10"></div>
<div class="my-1 h-px bg-border"></div>
<button class="flex w-full items-center px-5 py-2.5 transition-colors focus:outline-none hover:bg-red-500/10 focus:bg-red-500/10" onclick="removeWatchlist({{$anime.MalID}})">
<span class="font-medium text-sm text-red-500 text-left whitespace-nowrap">Remove from Watchlist</span>
</button>

8
templates/discover.gohtml
View File

@@ -30,7 +30,7 @@
<section class="relative flex flex-col items-center justify-center overflow-hidden rounded-2xl bg-background-surface px-6 py-24 text-center ring-1 ring-border">
<div class="from-accent/10 absolute inset-0 bg-linear-to-b to-transparent opacity-50"></div>
<div class="relative z-10 flex max-w-2xl flex-col items-center gap-6">
<h1 class="text-4xl font-bold tracking-tight text-foreground sm:text-5xl">
<h1 class="text-4xl font-normal tracking-tight text-foreground sm:text-5xl">
Don't know what to watch?
</h1>
<p class="text-lg text-foreground-muted">
@@ -53,7 +53,7 @@
{{/* Trending Section */}}
<section class="flex flex-col gap-4">
<div class="flex items-center justify-between">
<h2 class="text-xl font-semibold text-foreground">Trending This Season</h2>
<h2 class="text-xl font-normal text-foreground">Trending This Season</h2>
<a href="/browse?order_by=popularity&sort=desc" class="text-accent text-sm hover:underline">View all</a>
</div>
<div hx-get="/api/discover/trending" hx-trigger="load" hx-swap="outerHTML">
@@ -64,7 +64,7 @@
{{/* Upcoming Section */}}
<section class="flex flex-col gap-4">
<div class="flex items-center justify-between">
<h2 class="text-xl font-semibold text-foreground">Highly Anticipated</h2>
<h2 class="text-xl font-normal text-foreground">Highly Anticipated</h2>
<a href="/browse?status=upcoming&order_by=members&sort=desc" class="text-accent text-sm hover:underline">View all</a>
</div>
<div hx-get="/api/discover/upcoming" hx-trigger="load" hx-swap="outerHTML">
@@ -75,7 +75,7 @@
{{/* Top Section */}}
<section class="flex flex-col gap-4">
<div class="flex items-center justify-between">
<h2 class="text-xl font-semibold text-foreground">All-Time Greats</h2>
<h2 class="text-xl font-normal text-foreground">All-Time Greats</h2>
<a href="/browse?order_by=score&sort=desc" class="text-accent text-sm hover:underline">View all</a>
</div>
<div hx-get="/api/discover/top" hx-trigger="load" hx-swap="outerHTML">

4
templates/index.gohtml
View File

@@ -7,7 +7,7 @@
<section class="w-full">
<div class="mb-4 flex items-end justify-between">
<h2 class="text-lg font-semibold text-foreground">Currently Airing</h2>
<h2 class="text-lg font-normal text-foreground">Currently Airing</h2>
<a href="/browse?status=airing&order_by=popularity&sort=desc" class="group flex items-center gap-1 text-sm text-foreground-muted transition-colors hover:text-foreground">
See more
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="transition-transform group-hover:translate-x-0.5"><path d="m9 18 6-6-6-6"/></svg>
@@ -20,7 +20,7 @@
<section class="w-full">
<div class="mb-4 flex items-end justify-between">
<h2 class="text-lg font-semibold text-foreground">Most Popular</h2>
<h2 class="text-lg font-normal text-foreground">Most Popular</h2>
<a href="/browse?order_by=popularity&sort=desc" class="group flex items-center gap-1 text-sm text-foreground-muted transition-colors hover:text-foreground">
See more
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="transition-transform group-hover:translate-x-0.5"><path d="m9 18 6-6-6-6"/></svg>

14
templates/login.gohtml
View File

@@ -2,38 +2,38 @@
{{define "content"}}
<div class="flex min-h-screen items-center justify-center p-4">
<div class="w-full max-w-md">
<h1 class="mb-2 text-3xl font-medium text-white">Sign in</h1>
<p class="text-neutral-400 mb-8">Enter your credentials to continue.</p>
<h1 class="mb-2 text-3xl font-normal text-foreground">Sign in</h1>
<p class="text-foreground-muted mb-8">Enter your credentials to continue.</p>
<form method="POST" action="/login" class="flex flex-col gap-6">
<label class="flex flex-col gap-2">
<span class="text-white text-sm">Username</span>
<span class="text-foreground text-sm">Username</span>
<input
type="text"
name="username"
value="{{.Username}}"
required
placeholder="username"
class="bg-background-surface text-white placeholder-neutral-500 border-none px-4 py-3 focus:outline-none focus-within:ring-2 focus-within:ring-accent rounded-sm"
class="bg-background-surface text-foreground placeholder-foreground-muted border-none px-4 py-3 focus:outline-none focus-within:ring-2 focus-within:ring-accent rounded-sm"
/>
</label>
<label class="flex flex-col gap-2">
<span class="text-white text-sm">Password</span>
<span class="text-foreground text-sm">Password</span>
<div class="relative group focus-within:ring-2 focus-within:ring-accent rounded-sm">
<input
type="password"
name="password"
required
placeholder="Password"
class="bg-background-surface text-white placeholder-neutral-500 w-full border-none px-4 py-3 focus:outline-none rounded-sm"
class="bg-background-surface text-foreground placeholder-foreground-muted w-full border-none px-4 py-3 focus:outline-none rounded-sm"
/>
</div>
</label>
<button
type="submit"
class="hover:bg-gray-200 mt-2 bg-white px-4 py-3 font-medium text-black transition-colors rounded-sm"
class="mt-2 bg-accent px-4 py-3 font-normal text-on-accent transition-colors rounded-sm hover:opacity-90"
>
Sign in
</button>

4
templates/not_found.gohtml
View File

@@ -1,7 +1,7 @@
{{define "title"}}Not Found{{end}}
{{define "content"}}
<div class="text-center py-20">
<h2 class="text-4xl font-bold mb-4">404</h2>
<p class="text-xl text-gray-400">Page not found</p>
<h2 class="text-4xl font-normal mb-4">404</h2>
<p class="text-xl text-foreground-muted">Page not found</p>
</div>
{{end}}

74
templates/watch.gohtml
View File

@@ -10,13 +10,13 @@
<div id="watch-layout" class="flex flex-col gap-6 pb-12 lg:flex-row lg:gap-6">
<div class="flex-1 min-w-0">
<div class="flex items-center justify-between mb-4">
<a href="/anime/{{$anime.MalID}}" class="inline-flex items-center gap-2 text-sm text-neutral-400 hover:text-white transition-colors">
<a href="/anime/{{$anime.MalID}}" class="inline-flex items-center gap-2 text-sm text-foreground-muted hover:text-foreground transition-colors">
<svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18" /></svg>
Back
</a>
<ui-dropdown class="relative block" data-align="right" data-width="min-w-[160px]">
<div data-trigger class="cursor-pointer">
<button type="button" class="bg-accent/20 hover:bg-accent/30 flex items-center justify-between gap-2 px-4 py-2 text-sm text-accent font-medium transition-colors">
<button type="button" class="bg-accent/20 hover:bg-accent/30 flex items-center justify-between gap-2 px-4 py-2 text-sm text-accent font-normal transition-colors">
<span id="watchlist-status-display-{{$anime.MalID}}">
{{if .WatchlistStatus}}{{if eq .WatchlistStatus "watching"}}Watching{{else if eq .WatchlistStatus "completed"}}Completed{{else if eq .WatchlistStatus "plan_to_watch"}}Plan to Watch{{else if eq .WatchlistStatus "dropped"}}Dropped{{end}}{{else}}Add to Watchlist{{end}}
</span>
@@ -26,36 +26,36 @@
<div data-content class="hidden absolute z-50 min-w-40 bg-background-button shadow-2xl right-0 top-full mt-2">
{{if .WatchlistStatus}}
<div class="flex flex-col py-1">
<button class="flex w-full items-center px-5 py-2.5 transition-colors focus:outline-none hover:bg-white/10" onclick="updateWatchlist({{$anime.MalID}}, 'watching', 'Watching', this)">
<span class="text-sm text-white">Watching</span>
<button class="flex w-full items-center px-5 py-2.5 transition-colors focus:outline-none hover:bg-surface-hover" onclick="updateWatchlist({{$anime.MalID}}, 'watching', 'Watching', this)">
<span class="text-sm text-foreground">Watching</span>
</button>
<button class="flex w-full items-center px-5 py-2.5 transition-colors focus:outline-none hover:bg-white/10" onclick="updateWatchlist({{$anime.MalID}}, 'completed', 'Completed', this)">
<span class="text-sm text-white">Completed</span>
<button class="flex w-full items-center px-5 py-2.5 transition-colors focus:outline-none hover:bg-surface-hover" onclick="updateWatchlist({{$anime.MalID}}, 'completed', 'Completed', this)">
<span class="text-sm text-foreground">Completed</span>
</button>
<button class="flex w-full items-center px-5 py-2.5 transition-colors focus:outline-none hover:bg-white/10" onclick="updateWatchlist({{$anime.MalID}}, 'plan_to_watch', 'Plan to Watch', this)">
<span class="text-sm text-white">Plan to Watch</span>
<button class="flex w-full items-center px-5 py-2.5 transition-colors focus:outline-none hover:bg-surface-hover" onclick="updateWatchlist({{$anime.MalID}}, 'plan_to_watch', 'Plan to Watch', this)">
<span class="text-sm text-foreground">Plan to Watch</span>
</button>
<button class="flex w-full items-center px-5 py-2.5 transition-colors focus:outline-none hover:bg-white/10" onclick="updateWatchlist({{$anime.MalID}}, 'dropped', 'Dropped', this)">
<span class="text-sm text-white">Dropped</span>
<button class="flex w-full items-center px-5 py-2.5 transition-colors focus:outline-none hover:bg-surface-hover" onclick="updateWatchlist({{$anime.MalID}}, 'dropped', 'Dropped', this)">
<span class="text-sm text-foreground">Dropped</span>
</button>
<div class="border-t border-white/10 my-1"></div>
<div class="border-t border-border my-1"></div>
<button class="flex w-full items-center px-5 py-2.5 transition-colors focus:outline-none hover:bg-red-500/10" onclick="removeWatchlist({{$anime.MalID}}, this)">
<span class="text-sm text-red-400">Remove from Watchlist</span>
</button>
</div>
{{else}}
<div class="flex flex-col py-1">
<button class="flex w-full items-center px-5 py-2.5 transition-colors focus:outline-none hover:bg-white/10" onclick="updateWatchlist({{$anime.MalID}}, 'watching', 'Watching', this)">
<span class="text-sm text-white">Watching</span>
<button class="flex w-full items-center px-5 py-2.5 transition-colors focus:outline-none hover:bg-surface-hover" onclick="updateWatchlist({{$anime.MalID}}, 'watching', 'Watching', this)">
<span class="text-sm text-foreground">Watching</span>
</button>
<button class="flex w-full items-center px-5 py-2.5 transition-colors focus:outline-none hover:bg-white/10" onclick="updateWatchlist({{$anime.MalID}}, 'completed', 'Completed', this)">
<span class="text-sm text-white">Completed</span>
<button class="flex w-full items-center px-5 py-2.5 transition-colors focus:outline-none hover:bg-surface-hover" onclick="updateWatchlist({{$anime.MalID}}, 'completed', 'Completed', this)">
<span class="text-sm text-foreground">Completed</span>
</button>
<button class="flex w-full items-center px-5 py-2.5 transition-colors focus:outline-none hover:bg-white/10" onclick="updateWatchlist({{$anime.MalID}}, 'plan_to_watch', 'Plan to Watch', this)">
<span class="text-sm text-white">Plan to Watch</span>
<button class="flex w-full items-center px-5 py-2.5 transition-colors focus:outline-none hover:bg-surface-hover" onclick="updateWatchlist({{$anime.MalID}}, 'plan_to_watch', 'Plan to Watch', this)">
<span class="text-sm text-foreground">Plan to Watch</span>
</button>
<button class="flex w-full items-center px-5 py-2.5 transition-colors focus:outline-none hover:bg-white/10" onclick="updateWatchlist({{$anime.MalID}}, 'dropped', 'Dropped', this)">
<span class="text-sm text-white">Dropped</span>
<button class="flex w-full items-center px-5 py-2.5 transition-colors focus:outline-none hover:bg-surface-hover" onclick="updateWatchlist({{$anime.MalID}}, 'dropped', 'Dropped', this)">
<span class="text-sm text-foreground">Dropped</span>
</button>
</div>
{{end}}
@@ -70,14 +70,14 @@
<div class="flex gap-2">
{{$prevEp := sub (int $currentEpID) 1}}
{{if ge $prevEp 1}}
<a href="/anime/{{$anime.MalID}}/watch?ep={{$prevEp}}" class="flex items-center gap-2 px-4 py-2 bg-white/5 hover:bg-white/10 text-sm text-neutral-300 transition-colors">
<a href="/anime/{{$anime.MalID}}/watch?ep={{$prevEp}}" class="flex items-center gap-2 px-4 py-2 bg-background-surface hover:bg-surface-hover text-sm text-foreground-muted transition-colors">
<svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" /></svg>
Prev
</a>
{{end}}
{{$nextEp := add (int $currentEpID) 1}}
{{if le $nextEp $anime.Episodes}}
<a href="/anime/{{$anime.MalID}}/watch?ep={{$nextEp}}" class="flex items-center gap-2 px-4 py-2 bg-white/5 hover:bg-white/10 text-sm text-neutral-300 transition-colors">
<a href="/anime/{{$anime.MalID}}/watch?ep={{$nextEp}}" class="flex items-center gap-2 px-4 py-2 bg-background-surface hover:bg-surface-hover text-sm text-foreground-muted transition-colors">
Next
<svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" /></svg>
</a>
@@ -94,19 +94,19 @@
{{end}}
<ui-dropdown class="relative block mb-4" data-align="left" data-width="w-full">
<div data-trigger>
<button class="w-full flex items-center justify-between px-3 py-2 bg-white/5 border border-white/10 rounded text-sm text-neutral-300 hover:bg-white/10 transition-colors">
<button class="w-full flex items-center justify-between px-3 py-2 bg-background-surface border border-border rounded text-sm text-foreground-muted hover:bg-surface-hover transition-colors">
<span class="truncate">
{{if $currentSeason.Prefix}}<span class="font-bold text-white mr-1">{{$currentSeason.Prefix}}:</span>{{end}}
{{if $currentSeason.Prefix}}<span class="font-bold text-foreground mr-1">{{$currentSeason.Prefix}}:</span>{{end}}
{{$currentSeason.Title}}
</span>
<svg class="w-4 h-4 text-neutral-500 shrink-0 ml-2" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" /></svg>
<svg class="w-4 h-4 text-foreground-muted shrink-0 ml-2" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" /></svg>
</button>
</div>
<div data-content class="hidden absolute z-50 top-full mt-1 left-0 w-full bg-background-button rounded shadow-2xl border border-white/10 max-h-64 overflow-y-auto scrollbar-hide">
<div data-content class="hidden absolute z-50 top-full mt-1 left-0 w-full bg-background-button rounded shadow-2xl border border-border max-h-64 overflow-y-auto scrollbar-hide">
<div class="flex flex-col py-1">
{{range .Seasons}}
<a href="/anime/{{.MalID}}/watch" class="px-4 py-2 text-left text-sm {{if .IsCurrent}}text-accent bg-accent/10{{else}}text-neutral-300 hover:bg-white/10{{end}} transition-colors">
<span class="font-bold text-white mr-1">{{.Prefix}}:</span>
<a href="/anime/{{.MalID}}/watch" class="px-4 py-2 text-left text-sm {{if .IsCurrent}}text-accent bg-accent/10{{else}}text-foreground-muted hover:bg-surface-hover{{end}} transition-colors">
<span class="font-bold text-foreground mr-1">{{.Prefix}}:</span>
{{.Title}}
</a>
{{end}}
@@ -116,25 +116,25 @@
{{end}}
{{if eq $totalEpisodes 0}}
<div class="flex flex-col items-center justify-center gap-2 py-12 text-neutral-400">
<div class="flex flex-col items-center justify-center gap-2 py-12 text-foreground-muted">
<svg class="h-10 w-10 opacity-30" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M15 10l4.553-2.276A1 1 0 0121 8.618v6.764a1 1 0 01-1.447.894L15 14M5 18h8a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z" /></svg>
<p class="text-sm">No episodes found</p>
</div>
{{else}}
<div class="flex flex-col gap-2">
<div class="flex items-center justify-between">
<span class="text-sm font-medium text-neutral-400">Episodes</span>
<span class="text-sm font-normal text-foreground-muted">Episodes</span>
{{if gt $totalEpisodes 100}}
<input type="text" placeholder="Find" data-episode-search class="w-24 bg-white/5 text-sm px-3 py-1.5 rounded border border-white/10 text-neutral-200 placeholder-neutral-500 focus:outline-none focus:border-accent" />
<input type="text" placeholder="Find" data-episode-search class="w-24 bg-background-surface text-sm px-3 py-1.5 rounded border border-border text-foreground placeholder-foreground-muted focus:outline-none focus:border-accent" />
{{end}}
</div>
{{if gt $totalEpisodes 100}}
<ui-dropdown class="relative block" data-align="left" data-width="min-w-[200px]" data-episode-dropdown>
<div data-trigger>
<button class="w-full flex items-center justify-between px-3 py-2 bg-white/5 border border-white/10 rounded text-sm text-neutral-300 hover:bg-white/10">
<button class="w-full flex items-center justify-between px-3 py-2 bg-background-surface border border-border rounded text-sm text-foreground-muted hover:bg-surface-hover">
<span data-dropdown-label>01-100</span>
<svg class="w-4 h-4 text-neutral-500" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" /></svg>
<svg class="w-4 h-4 text-foreground-muted" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" /></svg>
</button>
</div>
<div data-content class="hidden absolute z-50 top-full mt-1 left-0 min-w-50 bg-background-button rounded shadow-2xl">
@@ -143,7 +143,7 @@
{{range $i := seq $ranges}}
{{$start := imul $i 100}}
{{$end := min (add $start 100) $totalEpisodes}}
<button class="episode-range-btn px-4 py-2 text-left text-sm text-neutral-300 hover:bg-white/10" data-range-index="{{$i}}" data-range-start="{{add $start 1}}" data-range-end="{{$end}}">
<button class="episode-range-btn px-4 py-2 text-left text-sm text-foreground-muted hover:bg-surface-hover" data-range-index="{{$i}}" data-range-start="{{add $start 1}}" data-range-end="{{$end}}">
{{printf "%02d" (add $start 1)}}-{{printf "%02d" $end}}
</button>
{{end}}
@@ -159,7 +159,7 @@
{{$isCurrent := eq (printf "%v" .MalID) $currentEpID}}
{{$isFiller := .Filler}}
{{$isRecap := .Recap}}
<a href="/anime/{{$anime.MalID}}/watch?ep={{.MalID}}" class="flex items-center justify-center py-2 text-xs transition-colors {{if $isFiller}}bg-yellow-500/20 text-yellow-400{{else if $isRecap}}bg-blue-500/20 text-blue-400{{else}}text-neutral-400 hover:bg-white/5{{end}} {{if $isCurrent}}bg-accent/20 text-accent ring-1 ring-accent{{end}}" data-episode-id="{{.MalID}}" data-episode-index="{{.MalID}}" data-episode-title="{{.Title}}">
<a href="/anime/{{$anime.MalID}}/watch?ep={{.MalID}}" class="flex items-center justify-center py-2 text-xs transition-colors {{if $isFiller}}bg-yellow-500/20 text-yellow-400{{else if $isRecap}}bg-blue-500/20 text-blue-400{{else}}text-foreground-muted hover:bg-foreground/5{{end}} {{if $isCurrent}}bg-accent/20 text-accent ring-1 ring-accent{{end}}" data-episode-id="{{.MalID}}" data-episode-index="{{.MalID}}" data-episode-title="{{.Title}}">
{{.MalID}}
</a>
{{end}}
@@ -170,9 +170,9 @@
{{$isCurrent := eq (printf "%v" .MalID) $currentEpID}}
{{$isFiller := .Filler}}
{{$isRecap := .Recap}}
<a href="/anime/{{$anime.MalID}}/watch?ep={{.MalID}}" class="flex items-center gap-3 px-3 py-2 transition-colors hover:bg-white/5 text-left {{if $isFiller}}border-l-2 border-l-yellow-500{{else if $isRecap}}border-l-2 border-l-blue-500{{end}} {{if $isCurrent}}bg-accent/20{{end}}" data-episode-id="{{.MalID}}" data-episode-title="{{.Title}}">
<span class="w-10 shrink-0 text-xs font-medium text-neutral-500 tabular-nums">EP{{.MalID}}</span>
<span class="truncate text-sm {{if $isFiller}}text-yellow-400{{else if $isRecap}}text-blue-400{{else}}text-neutral-300{{end}}" data-episode-title>{{.Title}}</span>
<a href="/anime/{{$anime.MalID}}/watch?ep={{.MalID}}" class="flex items-center gap-3 px-3 py-2 transition-colors hover:bg-foreground/5 text-left {{if $isFiller}}border-l-2 border-l-yellow-500{{else if $isRecap}}border-l-2 border-l-blue-500{{end}} {{if $isCurrent}}bg-accent/20{{end}}" data-episode-id="{{.MalID}}" data-episode-title="{{.Title}}">
<span class="w-10 shrink-0 text-xs font-normal text-foreground-muted tabular-nums">EP{{.MalID}}</span>
<span class="truncate text-sm {{if $isFiller}}text-yellow-400{{else if $isRecap}}text-blue-400{{else}}text-foreground-muted{{end}}" data-episode-title>{{.Title}}</span>
</a>
{{end}}
</div>

4
templates/watchlist.gohtml
View File

@@ -2,7 +2,7 @@
{{define "content"}}
{{if .WatchlistIDs}}<script>initWatchlist({{.WatchlistIDs}})</script>{{end}}
<div id="watchlist-content" class="flex w-full flex-col gap-6 mt-6">
<h1 class="text-xl font-semibold text-foreground">Watchlist</h1>
<h1 class="text-xl font-normal text-foreground">Watchlist</h1>
<div class="flex flex-wrap items-center justify-between gap-4">
<div class="flex flex-wrap items-center gap-6">
@@ -52,7 +52,7 @@
</div>
</div>
<a href="/anime/{{.AnimeID}}" class="group/title">
<h3 class="line-clamp-2 text-sm font-medium text-foreground group-hover/title:text-foreground-muted transition-colors">
<h3 class="line-clamp-2 text-sm font-normal text-foreground group-hover/title:text-foreground-muted transition-colors">
{{.DisplayTitle}}
</h3>
</a>

46
templates/watchlist_partial.gohtml
View File

@@ -1,34 +1,34 @@
{{define "title"}}Watchlist{{end}}
{{define "content"}}
<div id="watchlist-content" class="flex w-full flex-col gap-6">
<h1 class="text-lg font-normal text-neutral-300">Watchlist</h1>
<h1 class="text-lg font-normal text-foreground">Watchlist</h1>
<div class="flex flex-wrap items-center justify-between gap-4">
<div class="flex flex-wrap items-center gap-6">
<button class="text-sm transition-colors text-white" onclick="filterWatchlist('all', this)">All</button>
<button class="text-sm transition-colors text-neutral-400 hover:text-white" onclick="filterWatchlist('watching', this)">Watching</button>
<button class="text-sm transition-colors text-neutral-400 hover:text-white" onclick="filterWatchlist('plan_to_watch', this)">Plan to Watch</button>
<button class="text-sm transition-colors text-neutral-400 hover:text-white" onclick="filterWatchlist('completed', this)">Completed</button>
<button class="text-sm transition-colors text-neutral-400 hover:text-white" onclick="filterWatchlist('dropped', this)">Dropped</button>
<button class="text-sm transition-colors text-foreground" onclick="filterWatchlist('all', this)">All</button>
<button class="text-sm transition-colors text-foreground-muted hover:text-foreground" onclick="filterWatchlist('watching', this)">Watching</button>
<button class="text-sm transition-colors text-foreground-muted hover:text-foreground" onclick="filterWatchlist('plan_to_watch', this)">Plan to Watch</button>
<button class="text-sm transition-colors text-foreground-muted hover:text-foreground" onclick="filterWatchlist('completed', this)">Completed</button>
<button class="text-sm transition-colors text-foreground-muted hover:text-foreground" onclick="filterWatchlist('dropped', this)">Dropped</button>
</div>
<div class="flex items-center gap-4">
<ui-dropdown class="relative block" data-align="right" data-width="min-w-[150px]">
<div data-trigger>
<button type="button" class="flex items-center gap-2 text-sm text-neutral-400 transition-colors hover:text-white">
<button type="button" class="flex items-center gap-2 text-sm text-foreground-muted transition-colors hover:text-foreground">
<span>Sort by: <span id="sort-by-display">Date Added</span></span>
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M2 5h20"></path><path d="M6 12h12"></path><path d="M9 19h6"></path></svg>
</button>
</div>
<div data-content class="hidden absolute z-50 min-w-[150px] bg-background-button rounded-none shadow-2xl right-0 top-full mt-2">
<div class="flex flex-col py-1">
<button class="flex w-full items-center px-4 py-2 text-sm text-white transition-colors hover:bg-white/10" onclick="setSortBy('date', this)">Date Added</button>
<button class="flex w-full items-center px-4 py-2 text-sm text-neutral-400 transition-colors hover:bg-white/10 hover:text-white" onclick="setSortBy('title', this)">Title</button>
<button class="flex w-full items-center px-4 py-2 text-sm text-foreground transition-colors hover:bg-surface-hover" onclick="setSortBy('date', this)">Date Added</button>
<button class="flex w-full items-center px-4 py-2 text-sm text-foreground-muted transition-colors hover:bg-surface-hover hover:text-foreground" onclick="setSortBy('title', this)">Title</button>
</div>
</div>
</ui-dropdown>
<button type="button" id="sort-order-btn" class="text-neutral-400 transition-colors hover:text-white" onclick="toggleSortOrder(this)">
<button type="button" id="sort-order-btn" class="text-foreground-muted transition-colors hover:text-foreground" onclick="toggleSortOrder(this)">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="transition-transform duration-200 rotate-0"><path d="m21 16-4 4-4-4"></path><path d="M17 20V4"></path><path d="m3 8 4-4 4 4"></path><path d="M7 4v16"></path></svg>
</button>
</div>
@@ -42,7 +42,7 @@
<div class="grid grid-cols-2 gap-4 md:grid-cols-3 lg:grid-cols-4 2xl:grid-cols-6 mt-6">
{{range $entries}}
<div class="watchlist-item flex w-full flex-col gap-2" data-status="{{.Status}}" data-updated-at="{{.UpdatedAt.Unix}}" data-episode="{{.CurrentEpisode.Int64}}" data-time="{{.CurrentTimeSeconds}}" data-title="{{.DisplayTitle}}">
<div class="group relative flex aspect-2/3 w-full flex-col overflow-hidden bg-white/5 after:absolute after:inset-0 after:bg-black/80 after:opacity-0 hover:after:opacity-100 after:transition-opacity">
<div class="group relative flex aspect-2/3 w-full flex-col overflow-hidden bg-background-surface after:absolute after:inset-0 after:bg-black/80 after:opacity-0 hover:after:opacity-100 after:transition-opacity">
<a href="/anime/{{.AnimeID}}" class="absolute inset-0"></a>
<img src="{{.ImageUrl}}" alt="{{.DisplayTitle}}" class="h-full w-full object-cover" loading="lazy" />
@@ -54,7 +54,7 @@
</div>
</div>
</div>
<h3 class="line-clamp-2 text-sm font-medium text-white">
<h3 class="line-clamp-2 text-sm font-normal text-foreground">
{{.DisplayTitle}}
</h3>
</div>
@@ -65,9 +65,9 @@
{{end}}
{{if eq (len $.AllEntries) 0}}
<div class="flex flex-col items-center justify-center gap-2 py-24 text-neutral-400">
<svg class="h-12 w-12 opacity-30" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10" /></svg>
<p class="text-lg">Your watchlist is empty.</p>
<div class="flex flex-col items-center justify-center gap-2 py-24 text-foreground-muted">
<svg class="h-12 w-12 opacity-30 text-foreground-muted" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10" /></svg>
<p class="text-lg text-foreground">Your watchlist is empty.</p>
<a href="/" class="text-accent hover:text-accent/80 transition-colors">Browse anime</a>
</div>
{{end}}
@@ -82,11 +82,11 @@
// Update active tab styling
const parent = btn.parentElement
parent.querySelectorAll('button').forEach(function(b) {
b.classList.remove('text-white')
b.classList.add('text-neutral-400')
b.classList.remove('text-foreground')
b.classList.add('text-foreground-muted')
})
btn.classList.remove('text-neutral-400')
btn.classList.add('text-white')
btn.classList.remove('text-foreground-muted')
btn.classList.add('text-foreground')
// Show/hide sections
document.querySelectorAll('.watchlist-section').forEach(function(section) {
@@ -108,11 +108,11 @@
// Update button colors in dropdown
const dropdown = btn.closest('[data-content]')
dropdown.querySelectorAll('button').forEach(function(b) {
b.classList.remove('text-white')
b.classList.add('text-neutral-400')
b.classList.remove('text-foreground')
b.classList.add('text-foreground-muted')
})
btn.classList.remove('text-neutral-400')
btn.classList.add('text-white')
btn.classList.remove('text-foreground-muted')
btn.classList.add('text-foreground')
sortItems()