92 lines
3.5 KiB
Plaintext
92 lines
3.5 KiB
Plaintext
{{define "title"}}Home{{end}}
|
|
{{define "content"}}
|
|
<div class="flex flex-col gap-10">
|
|
{{if .User}}
|
|
<div hx-get="/api/catalog/continue" hx-trigger="load" hx-swap="outerHTML">
|
|
{{template "continue_watching_skeleton"}}
|
|
</div>
|
|
{{end}}
|
|
|
|
<section class="w-full">
|
|
<div class="mb-4 flex items-end justify-between">
|
|
<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>
|
|
</a>
|
|
</div>
|
|
<div hx-get="/api/catalog/airing" hx-trigger="load" hx-swap="outerHTML">
|
|
{{template "catalog_skeleton"}}
|
|
</div>
|
|
</section>
|
|
|
|
<section class="w-full">
|
|
<div class="mb-4 flex items-end justify-between">
|
|
<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>
|
|
</a>
|
|
</div>
|
|
<div hx-get="/api/catalog/popular" hx-trigger="load" hx-swap="outerHTML">
|
|
{{template "catalog_skeleton"}}
|
|
</div>
|
|
</section>
|
|
</div>
|
|
|
|
<style>
|
|
.skeleton {
|
|
background: light-dark(
|
|
linear-gradient(90deg, #f3f4f6 25%, #e5e7eb 50%, #f3f4f6 75%),
|
|
linear-gradient(90deg, #1f1f1f 25%, #2a2a2a 50%, #1f1f1f 75%)
|
|
);
|
|
background-size: 200% 100%;
|
|
animation: skeleton-loading 1.5s infinite;
|
|
}
|
|
@keyframes skeleton-loading {
|
|
0% { background-position: 200% 0; }
|
|
100% { background-position: -200% 0; }
|
|
}
|
|
</style>
|
|
{{end}}
|
|
|
|
{{define "catalog_section"}}
|
|
{{if eq .Section "Continue"}}
|
|
{{if .ContinueWatching}}
|
|
{{template "continue_watching" .ContinueWatching}}
|
|
{{end}}
|
|
{{else}}
|
|
<div class="grid grid-cols-2 gap-4 md:grid-cols-3 lg:grid-cols-4 2xl:grid-cols-6">
|
|
{{range .Animes}}
|
|
{{template "anime_card" dict "Anime" . "WithActions" true "IsWatchlist" (index $.WatchlistMap .MalID)}}
|
|
{{end}}
|
|
</div>
|
|
{{end}}
|
|
{{end}}
|
|
|
|
{{define "catalog_skeleton"}}
|
|
<div class="grid grid-cols-2 gap-4 md:grid-cols-3 lg:grid-cols-4 2xl:grid-cols-6">
|
|
{{range (seq 6)}}
|
|
<div class="flex flex-col gap-2">
|
|
<div class="skeleton aspect-2/3 w-full rounded-xl"></div>
|
|
<div class="skeleton h-4 w-3/4 rounded"></div>
|
|
</div>
|
|
{{end}}
|
|
</div>
|
|
{{end}}
|
|
|
|
{{define "continue_watching_skeleton"}}
|
|
<section id="continue-watching-section" class="w-full">
|
|
<h2 class="mb-3 text-lg font-normal text-foreground">Continue Watching</h2>
|
|
<div class="scrollbar-hide flex snap-x snap-mandatory gap-2 overflow-x-auto pb-4">
|
|
{{range (seq 3)}}
|
|
<div class="flex w-70 shrink-0 snap-start flex-col gap-2 2xl:w-lg">
|
|
<div class="skeleton aspect-video w-full overflow-hidden rounded-xl"></div>
|
|
<div class="skeleton h-5 w-2/3 rounded"></div>
|
|
<div class="skeleton h-4 w-1/2 rounded opacity-70"></div>
|
|
</div>
|
|
{{end}}
|
|
</div>
|
|
</section>
|
|
{{end}}
|