88 lines
3.5 KiB
Plaintext
88 lines
3.5 KiB
Plaintext
{{define "title"}}Discover{{end}}
|
|
{{define "content"}}
|
|
<div class="flex flex-col gap-12 pb-12">
|
|
<section class="flex flex-col items-center justify-center bg-background-surface px-6 py-16 text-center">
|
|
<div class="flex max-w-2xl flex-col items-center gap-5">
|
|
<h1 class="leading-[1.15] text-3xl font-normal tracking-[-0.02em] text-foreground sm:text-4xl">
|
|
Don't know what to watch?
|
|
</h1>
|
|
<p class="text-base text-foreground-muted">
|
|
Let us pick something for you from our vast collection of anime.
|
|
</p>
|
|
<button
|
|
id="surprise-btn"
|
|
data-surprise-me
|
|
class="group relative inline-flex h-11 items-center justify-center gap-2 bg-background-button px-5 text-base font-normal text-foreground transition-colors hover:bg-background-button-hover active:bg-background-button-hover disabled:opacity-70 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-accent sm:h-12"
|
|
>
|
|
<span id="surprise-spinner" class="hidden h-5 w-5 animate-spin rounded-full border-2 border-background border-t-transparent"></span>
|
|
<svg id="surprise-icon" class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
|
|
<path d="M12 2v20M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6" />
|
|
</svg>
|
|
<span id="surprise-text">Surprise Me</span>
|
|
</button>
|
|
</div>
|
|
</section>
|
|
|
|
{{/* Trending Section */}}
|
|
<section class="flex flex-col gap-4">
|
|
<div class="flex items-center justify-between">
|
|
<h2 class="text-base font-normal text-foreground">Trending This Season</h2>
|
|
<a href="/browse?order_by=popularity&sort=desc" class="text-sm text-foreground-muted transition-colors hover:text-foreground">View all</a>
|
|
</div>
|
|
<div hx-get="/api/discover/trending" hx-trigger="load" hx-swap="outerHTML">
|
|
{{template "discover_skeleton"}}
|
|
</div>
|
|
</section>
|
|
|
|
{{/* Upcoming Section */}}
|
|
<section class="flex flex-col gap-4">
|
|
<div class="flex items-center justify-between">
|
|
<h2 class="text-base font-normal text-foreground">Highly Anticipated</h2>
|
|
<a href="/browse?status=upcoming&order_by=members&sort=desc" class="text-sm text-foreground-muted transition-colors hover:text-foreground">View all</a>
|
|
</div>
|
|
<div hx-get="/api/discover/upcoming" hx-trigger="load" hx-swap="outerHTML">
|
|
{{template "discover_skeleton"}}
|
|
</div>
|
|
</section>
|
|
|
|
{{/* Top Section */}}
|
|
<section class="flex flex-col gap-4">
|
|
<div class="flex items-center justify-between">
|
|
<h2 class="text-base font-normal text-foreground">All-Time Greats</h2>
|
|
<a href="/browse?order_by=score&sort=desc" class="text-sm text-foreground-muted transition-colors hover:text-foreground">View all</a>
|
|
</div>
|
|
<div hx-get="/api/discover/top" hx-trigger="load" hx-swap="outerHTML">
|
|
{{template "discover_skeleton"}}
|
|
</div>
|
|
</section>
|
|
</div>
|
|
|
|
<style>
|
|
.discover-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
|
|
gap: 1rem;
|
|
}
|
|
</style>
|
|
{{end}}
|
|
|
|
{{define "discover_section"}}
|
|
<div class="discover-grid">
|
|
{{range .Animes}}
|
|
{{template "anime_card" dict "Anime" . "WithActions" true "IsWatchlist" (index $.WatchlistMap .MalID)}}
|
|
{{end}}
|
|
</div>
|
|
{{end}}
|
|
|
|
{{define "discover_skeleton"}}
|
|
<div class="discover-grid">
|
|
{{range (seq 8)}}
|
|
<div class="flex flex-col gap-2">
|
|
<div class="skeleton aspect-2/3 w-full"></div>
|
|
<div class="skeleton h-4 w-3/4"></div>
|
|
<div class="skeleton skeleton-subtle h-3 w-1/2"></div>
|
|
</div>
|
|
{{end}}
|
|
</div>
|
|
{{end}}
|