133 lines
7.8 KiB
Plaintext
133 lines
7.8 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>
|
|
|
|
<div hx-get="/api/catalog/top-pick" hx-trigger="load" hx-swap="outerHTML">
|
|
{{template "top_pick_for_you_skeleton"}}
|
|
</div>
|
|
{{end}}
|
|
|
|
<section class="w-full">
|
|
<div class="mb-4 flex items-end justify-between">
|
|
<h2 class="text-base 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-base 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>
|
|
|
|
{{end}}
|
|
|
|
{{define "top_pick_for_you_section"}}
|
|
{{if gt (len .Animes) 0}}
|
|
<section id="top-pick-for-you-section" class="w-full" data-top-pick-carousel>
|
|
<div class="mb-4 flex items-end justify-between gap-3">
|
|
<h2 class="min-w-0 text-base font-normal text-foreground">Top Pick for You</h2>
|
|
<a href="/discover" class="group flex items-center gap-1 text-sm text-foreground-muted transition-colors hover:text-foreground">
|
|
Explore more
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="size-4 transition-transform group-hover:translate-x-0.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m9 18 6-6-6-6"/></svg>
|
|
</a>
|
|
</div>
|
|
<div class="relative overflow-hidden">
|
|
<div data-top-pick-track tabindex="0" class="grid min-w-0 grid-flow-col auto-cols-[calc((100%_-_0.75rem)/2.18)] gap-3 overflow-x-auto scroll-smooth pb-1 [-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden md:auto-cols-[calc((100%_-_2rem)/3.35)] md:gap-4 lg:auto-cols-[calc((100%_-_3rem)/4.35)] xl:auto-cols-[calc((100%_-_4rem)/5.35)] 2xl:auto-cols-[calc((100%_-_5rem)/6.35)]">
|
|
{{range .Animes}}
|
|
<div data-top-pick-item>
|
|
{{template "anime_card" dict "Anime" . "WithActions" true "IsWatchlist" (index $.WatchlistMap .MalID)}}
|
|
</div>
|
|
{{end}}
|
|
</div>
|
|
<div data-top-pick-prev-fade class="pointer-events-none absolute inset-y-0 left-0 z-[70] hidden w-20 bg-linear-to-r from-background via-background/80 to-transparent" aria-hidden="true"></div>
|
|
<div data-top-pick-next-fade class="pointer-events-none absolute inset-y-0 right-0 z-[70] w-20 bg-linear-to-l from-background via-background/80 to-transparent" aria-hidden="true"></div>
|
|
<button type="button" data-unstyled-button data-top-pick-prev class="pointer-events-auto absolute left-0 top-[42%] z-[80] hidden h-16 w-14 -translate-y-1/2 cursor-pointer items-center justify-center text-foreground-muted transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-accent" aria-label="Scroll top picks left" aria-hidden="true">
|
|
<svg class="pointer-events-auto size-10 drop-shadow-[0_1px_2px_rgba(0,0,0,0.45)]" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="15 18 9 12 15 6"></polyline></svg>
|
|
</button>
|
|
<button type="button" data-unstyled-button data-top-pick-next class="pointer-events-auto absolute right-0 top-[42%] z-[80] inline-flex h-16 w-14 -translate-y-1/2 cursor-pointer items-center justify-center text-foreground-muted transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-accent" aria-label="Scroll top picks right" aria-hidden="false">
|
|
<svg class="pointer-events-auto size-10 drop-shadow-[0_1px_2px_rgba(0,0,0,0.45)]" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="9 18 15 12 9 6"></polyline></svg>
|
|
</button>
|
|
</div>
|
|
</section>
|
|
{{end}}
|
|
{{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"></div>
|
|
<div class="skeleton h-4 w-3/4"></div>
|
|
</div>
|
|
{{end}}
|
|
</div>
|
|
{{end}}
|
|
|
|
{{define "top_pick_for_you_skeleton"}}
|
|
<section id="top-pick-for-you-section" class="w-full">
|
|
<div class="mb-4 flex items-end justify-between gap-3">
|
|
<div class="skeleton h-5 w-36"></div>
|
|
<div class="skeleton skeleton-subtle h-4 w-24"></div>
|
|
</div>
|
|
<div class="relative overflow-hidden">
|
|
<div class="grid min-w-0 grid-flow-col auto-cols-[calc((100%_-_0.75rem)/2.18)] gap-3 overflow-hidden pb-1 md:auto-cols-[calc((100%_-_2rem)/3.35)] md:gap-4 lg:auto-cols-[calc((100%_-_3rem)/4.35)] xl:auto-cols-[calc((100%_-_4rem)/5.35)] 2xl:auto-cols-[calc((100%_-_5rem)/6.35)]">
|
|
{{range (seq 6)}}
|
|
<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>
|
|
</div>
|
|
</section>
|
|
{{end}}
|
|
|
|
{{define "continue_watching_skeleton"}}
|
|
<section id="continue-watching-section" class="w-full">
|
|
<h2 class="mb-3 text-base font-normal text-foreground">Continue Watching</h2>
|
|
<div class="flex snap-x snap-mandatory gap-2 overflow-x-auto pb-4 [-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden lg:[-ms-overflow-style:auto] lg:[scrollbar-width:thin] lg:[scrollbar-color:var(--scrollbar-thumb)_var(--scrollbar-track)] lg:[&::-webkit-scrollbar]:block lg:[&::-webkit-scrollbar]:h-2 lg:[&::-webkit-scrollbar-track]:bg-[var(--scrollbar-track)] lg:[&::-webkit-scrollbar-track]:rounded-none lg:[&::-webkit-scrollbar-thumb]:bg-[var(--scrollbar-thumb)] lg:[&::-webkit-scrollbar-thumb]:rounded-none lg:[&::-webkit-scrollbar-thumb:hover]:bg-[var(--scrollbar-thumb-hover)]">
|
|
{{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"></div>
|
|
<div class="skeleton h-5 w-2/3"></div>
|
|
<div class="skeleton skeleton-subtle h-4 w-1/2"></div>
|
|
</div>
|
|
{{end}}
|
|
</div>
|
|
</section>
|
|
{{end}}
|