386 lines
19 KiB
Plaintext
386 lines
19 KiB
Plaintext
{{define "anime_characters"}}
|
|
<div class="mt-12 w-full">
|
|
<h2 class="mb-6 text-lg font-normal text-foreground">Characters & Cast</h2>
|
|
<div class="grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5">
|
|
{{range (slice .Items 0 (min (len .Items) 10))}}
|
|
<div class="flex gap-3 bg-background-surface p-3">
|
|
<div class="h-16 w-12 shrink-0 overflow-hidden bg-background-surface">
|
|
<img src="{{.Character.Images.Jpg.ImageURL}}" alt="{{.Character.Name}}" class="h-full w-full object-cover" loading="lazy" />
|
|
</div>
|
|
<div class="flex flex-col justify-center overflow-hidden">
|
|
<span class="truncate text-sm font-medium text-foreground">{{.Character.Name}}</span>
|
|
<span class="truncate text-xs text-foreground-muted">{{.Role}}</span>
|
|
{{if .VoiceActors}}
|
|
<span class="mt-1 truncate text-[11px] text-foreground-muted">{{(index .VoiceActors 0).Person.Name}}</span>
|
|
{{end}}
|
|
</div>
|
|
</div>
|
|
{{end}}
|
|
</div>
|
|
</div>
|
|
{{end}}
|
|
|
|
{{define "anime_recommendations"}}
|
|
{{if .Items}}
|
|
<div class="w-full">
|
|
<h2 class="mb-6 text-lg font-normal text-foreground">Recommendations</h2>
|
|
<div class="grid grid-cols-2 gap-4 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 xl:grid-cols-8">
|
|
{{range (slice .Items 0 (min (len .Items) 8))}}
|
|
<a href="/anime/{{.Entry.MalID}}" class="group flex flex-col gap-2">
|
|
<div class="aspect-2/3 overflow-hidden bg-background-surface shadow-md">
|
|
<img src="{{.Entry.Images.Webp.LargeImageURL}}" alt="{{.Entry.Title}}" class="h-full w-full object-cover transition-transform duration-500 group-hover:scale-105" loading="lazy" />
|
|
</div>
|
|
<span class="truncate text-xs font-medium text-foreground-muted transition-colors group-hover:text-foreground">{{.Entry.Title}}</span>
|
|
</a>
|
|
{{end}}
|
|
</div>
|
|
</div>
|
|
{{end}}
|
|
{{end}}
|
|
|
|
{{define "anime_recommendations_loading"}}
|
|
<div
|
|
hx-get="/anime/{{.AnimeID}}?section=recommendations"
|
|
hx-trigger="load delay:1500ms"
|
|
hx-swap="outerHTML"
|
|
>
|
|
<div class="w-full">
|
|
<h2 class="mb-6 text-lg font-normal text-foreground">Recommendations</h2>
|
|
<div class="grid grid-cols-2 gap-4 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 xl:grid-cols-8">
|
|
{{range (seq 8)}}
|
|
<div class="flex flex-col gap-2">
|
|
<div class="skeleton aspect-2/3"></div>
|
|
<div class="skeleton h-3 w-full"></div>
|
|
</div>
|
|
{{end}}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{{end}}
|
|
|
|
{{define "anime_statistics"}}
|
|
{{if .Items}}
|
|
<div class="flex flex-col gap-1.5 pt-2">
|
|
<div class="flex items-center justify-between text-xs">
|
|
<span class="text-foreground-muted">Watching</span>
|
|
<span class="text-foreground">{{.Items.Watching}}</span>
|
|
</div>
|
|
<div class="flex items-center justify-between text-xs">
|
|
<span class="text-foreground-muted">Completed</span>
|
|
<span class="text-foreground">{{.Items.Completed}}</span>
|
|
</div>
|
|
<div class="flex items-center justify-between text-xs">
|
|
<span class="text-foreground-muted">On Hold</span>
|
|
<span class="text-foreground">{{.Items.OnHold}}</span>
|
|
</div>
|
|
<div class="flex items-center justify-between text-xs">
|
|
<span class="text-foreground-muted">Dropped</span>
|
|
<span class="text-foreground">{{.Items.Dropped}}</span>
|
|
</div>
|
|
<div class="flex items-center justify-between text-xs">
|
|
<span class="text-foreground-muted">Plan to Watch</span>
|
|
<span class="text-foreground">{{.Items.PlanToWatch}}</span>
|
|
</div>
|
|
</div>
|
|
{{end}}
|
|
{{end}}
|
|
|
|
{{define "anime_themes"}}
|
|
{{if or .Items.Openings .Items.Endings}}
|
|
<div class="grid grid-cols-2 gap-6 p-6">
|
|
<div>
|
|
<h3 class="mb-4 text-sm font-medium text-foreground">Openings</h3>
|
|
<div class="flex flex-col gap-3">
|
|
{{range .Items.Openings}}
|
|
<div class="text-sm leading-relaxed text-foreground-muted">{{.}}</div>
|
|
{{end}}
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<h3 class="mb-4 text-sm font-medium text-foreground">Endings</h3>
|
|
<div class="flex flex-col gap-3">
|
|
{{range .Items.Endings}}
|
|
<div class="text-sm leading-relaxed text-foreground-muted">{{.}}</div>
|
|
{{end}}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{{else}}
|
|
<div class="p-6 text-sm text-foreground-muted">No theme songs available.</div>
|
|
{{end}}
|
|
{{end}}
|
|
|
|
{{define "title"}}{{.Anime.DisplayTitle}}{{end}}
|
|
{{define "scripts"}}{{end}}
|
|
{{define "content"}}
|
|
{{if .WatchlistIDs}}<script type="application/json" id="watchlist-ids-json">{{.WatchlistIDs}}</script>{{end}}
|
|
{{$anime := .Anime}}
|
|
|
|
<div class="flex w-full flex-col gap-10 lg:pr-80">
|
|
<div class="flex flex-col gap-8 md:flex-row lg:gap-12">
|
|
<div class="flex w-64 shrink-0 flex-col items-center gap-6 md:w-80 md:items-start lg:w-96">
|
|
<div class="aspect-2/3 w-full overflow-hidden bg-background-surface shadow-(--shadow-card) ring-1 ring-black/10">
|
|
{{$imageUrl := posterURL $anime.Images.Webp.LargeImageURL $anime.Images.Jpg.LargeImageURL 400 600}}
|
|
<img src="{{$imageUrl}}" alt="{{$anime.Title}}" class="h-full w-full object-cover" />
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex grow flex-col">
|
|
<div class="mb-4">
|
|
<h1 class="text-2xl font-normal tracking-[-0.02em] leading-[1.15] text-foreground md:text-4xl">
|
|
{{$anime.DisplayTitle}}
|
|
</h1>
|
|
{{if and $anime.TitleEnglish (ne $anime.Title $anime.TitleEnglish)}}
|
|
<h2 class="mt-1 text-sm text-foreground-muted">{{$anime.Title}}</h2>
|
|
{{end}}
|
|
</div>
|
|
|
|
<div class="mb-6 flex flex-wrap items-center gap-x-2.5 gap-y-2 text-sm text-foreground-muted">
|
|
{{if $anime.Score}}
|
|
<div class="flex min-w-0 items-center gap-1.5 before:mr-1 before:block before:size-0.75 before:shrink-0 before:rounded-full before:bg-current before:opacity-65 first:before:hidden font-medium text-foreground">
|
|
<svg class="h-3.5 w-3.5 fill-current text-accent" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
|
|
{{$anime.Score}}
|
|
</div>
|
|
{{end}}
|
|
{{if $anime.Type}}<span class="flex min-w-0 items-center gap-1.5 before:mr-1 before:block before:size-0.75 before:shrink-0 before:rounded-full before:bg-current before:opacity-65 first:before:hidden">{{$anime.Type}}</span>{{end}}
|
|
{{if and $anime.Airing .EpisodesCount}}
|
|
<span class="flex min-w-0 items-center gap-1.5 before:mr-1 before:block before:size-0.75 before:shrink-0 before:rounded-full before:bg-current before:opacity-65 first:before:hidden">{{.EpisodesCount}}{{if $anime.Episodes}}/{{$anime.Episodes}}{{end}} episodes</span>
|
|
{{else if $anime.Episodes}}
|
|
<span class="flex min-w-0 items-center gap-1.5 before:mr-1 before:block before:size-0.75 before:shrink-0 before:rounded-full before:bg-current before:opacity-65 first:before:hidden">{{$anime.Episodes}} episodes</span>
|
|
{{end}}
|
|
{{if $anime.Status}}<span class="flex min-w-0 items-center gap-1.5 before:mr-1 before:block before:size-0.75 before:shrink-0 before:rounded-full before:bg-current before:opacity-65 first:before:hidden">{{$anime.Status}}</span>{{end}}
|
|
{{if $anime.Season}}<span class="flex min-w-0 items-center gap-1.5 before:mr-1 before:block before:size-0.75 before:shrink-0 before:rounded-full before:bg-current before:opacity-65 first:before:hidden">{{$anime.Premiered}}</span>{{end}}
|
|
{{if $anime.ShortRating}}<span class="flex min-w-0 items-center gap-1.5 before:mr-1 before:block before:size-0.75 before:shrink-0 before:rounded-full before:bg-current before:opacity-65 first:before:hidden">{{$anime.ShortRating}}</span>{{end}}
|
|
{{if .AudioAvailability}}
|
|
<span class="flex min-w-0 items-center gap-1.5 before:mr-1 before:block before:size-0.75 before:shrink-0 before:rounded-full before:bg-current before:opacity-65 first:before:hidden">
|
|
<svg class="size-3.5 shrink-0 text-accent" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
|
|
<path d="M3 14a9 9 0 0 1 18 0"></path>
|
|
<path d="M21 14v3a2 2 0 0 1-2 2h-1v-7h1a2 2 0 0 1 2 2Z"></path>
|
|
<path d="M3 14v3a2 2 0 0 0 2 2h1v-7H5a2 2 0 0 0-2 2Z"></path>
|
|
</svg>
|
|
{{.AudioAvailability}}
|
|
</span>
|
|
{{end}}
|
|
</div>
|
|
|
|
<div class="mb-8">
|
|
{{template "watchlist_actions" dict "Anime" $anime "User" .User "Status" .Status "ContinueWatchingEp" .ContinueWatchingEp "ContinueWatchingTime" .ContinueWatchingTime}}
|
|
</div>
|
|
|
|
<div class="flex flex-col gap-12 lg:flex-row">
|
|
<div class="grow lg:max-w-4xl">
|
|
<section>
|
|
<h2 class="mb-4 mt-2 text-base font-normal text-foreground">Synopsis</h2>
|
|
<p id="synopsis-container" data-synopsis-container class="text-foreground-muted text-base leading-relaxed line-clamp-6 md:line-clamp-none whitespace-pre-line">{{if $anime.Synopsis}}{{$anime.Synopsis}}{{else}}No synopsis available.{{end}}</p>
|
|
{{if and $anime.Synopsis (gt (len $anime.Synopsis) 400)}}
|
|
<button id="synopsis-toggle" data-synopsis-toggle class="mt-2 text-sm font-normal text-foreground-muted transition-colors hover:text-foreground md:hidden">
|
|
Read more
|
|
</button>
|
|
{{end}}
|
|
</section>
|
|
</div>
|
|
<aside class="fixed right-0 top-0 hidden h-screen w-80 shrink-0 flex-col overflow-y-auto border-l border-(--border-light) bg-background-sidebar p-8 lg:flex">
|
|
<div class="flex flex-col gap-8">
|
|
<section>
|
|
<h3 class="mb-6 text-base font-normal text-foreground">Information</h3>
|
|
<dl class="flex flex-col gap-6 text-sm">
|
|
{{if $anime.Studios}}
|
|
<div>
|
|
<dt class="mb-1 text-xs font-normal text-foreground-muted">Studios</dt>
|
|
<dd class="text-foreground">
|
|
{{range $i, $s := $anime.Studios}}{{if $i}}, {{end}}<a href="/browse?studio={{$s.MalID}}" class="underline underline-offset-2 decoration-foreground-muted/60 text-foreground-muted transition-colors hover:text-foreground hover:decoration-foreground/70">{{$s.Name}}</a>{{end}}
|
|
</dd>
|
|
</div>
|
|
{{end}}
|
|
{{if $anime.Producers}}
|
|
<div>
|
|
<dt class="mb-1 text-xs font-normal text-foreground-muted">Producers</dt>
|
|
<dd class="text-foreground text-xs leading-relaxed">{{range $i, $p := $anime.Producers}}{{if $i}}, {{end}}{{$p.Name}}{{end}}</dd>
|
|
</div>
|
|
{{end}}
|
|
{{if $anime.Licensors}}
|
|
<div>
|
|
<dt class="mb-1 text-xs font-normal text-foreground-muted">Licensors</dt>
|
|
<dd class="text-foreground text-xs leading-relaxed">{{range $i, $l := $anime.Licensors}}{{if $i}}, {{end}}{{$l.Name}}{{end}}</dd>
|
|
</div>
|
|
{{end}}
|
|
{{if $anime.Genres}}
|
|
<div>
|
|
<dt class="mb-1 text-xs font-normal text-foreground-muted">Genres</dt>
|
|
<dd class="flex flex-wrap gap-2 pt-1">
|
|
{{range $anime.Genres}}
|
|
<a href="/browse?genres={{.MalID}}" class="bg-background-surface px-2.5 py-1 text-[11px] font-normal text-foreground-muted transition-colors hover:bg-background-button-hover hover:text-foreground">{{.Name}}</a>
|
|
{{end}}
|
|
</dd>
|
|
</div>
|
|
{{end}}
|
|
{{if $anime.Themes}}
|
|
<div>
|
|
<dt class="mb-1 text-xs font-normal text-foreground-muted">Themes</dt>
|
|
<dd class="flex flex-wrap gap-2 pt-1">
|
|
{{range $anime.Themes}}
|
|
<a href="/browse?genres={{.MalID}}" class="bg-background-surface px-2.5 py-1 text-[11px] font-normal text-foreground-muted transition-colors hover:bg-background-button-hover hover:text-foreground">{{.Name}}</a>
|
|
{{end}}
|
|
</dd>
|
|
</div>
|
|
{{end}}
|
|
{{if $anime.Demographics}}
|
|
<div>
|
|
<dt class="mb-1 text-xs font-normal text-foreground-muted">Demographics</dt>
|
|
<dd class="flex flex-wrap gap-2 pt-1">
|
|
{{range $anime.Demographics}}
|
|
<a href="/browse?genres={{.MalID}}" class="bg-background-surface px-2.5 py-1 text-[11px] font-normal text-foreground-muted transition-colors hover:bg-background-button-hover hover:text-foreground">{{.Name}}</a>
|
|
{{end}}
|
|
</dd>
|
|
</div>
|
|
{{end}}
|
|
<div class="grid grid-cols-2 gap-4">
|
|
{{if $anime.Source}}
|
|
<div>
|
|
<dt class="mb-1 text-xs font-normal text-foreground-muted">Source</dt>
|
|
<dd class="text-foreground">{{$anime.Source}}</dd>
|
|
</div>
|
|
{{end}}
|
|
{{if $anime.Duration}}
|
|
<div>
|
|
<dt class="mb-1 text-xs font-normal text-foreground-muted">Duration</dt>
|
|
<dd class="text-foreground">{{$anime.Duration}}</dd>
|
|
</div>
|
|
{{end}}
|
|
</div>
|
|
<div class="grid grid-cols-2 gap-4">
|
|
{{if $anime.Rank}}
|
|
<div>
|
|
<dt class="mb-1 text-xs font-normal text-foreground-muted">Rank</dt>
|
|
<dd class="text-foreground">#{{$anime.Rank}}</dd>
|
|
</div>
|
|
{{end}}
|
|
{{if $anime.Popularity}}
|
|
<div>
|
|
<dt class="mb-1 text-xs font-normal text-foreground-muted">Popularity</dt>
|
|
<dd class="text-foreground">#{{$anime.Popularity}}</dd>
|
|
</div>
|
|
{{end}}
|
|
</div>
|
|
<div class="grid grid-cols-2 gap-4">
|
|
{{if $anime.MembersFormatted}}
|
|
<div>
|
|
<dt class="mb-1 text-xs font-normal text-foreground-muted">Members</dt>
|
|
<dd class="text-foreground">{{$anime.MembersFormatted}}</dd>
|
|
</div>
|
|
{{end}}
|
|
{{if $anime.FavoritesFormatted}}
|
|
<div>
|
|
<dt class="mb-1 text-xs font-normal text-foreground-muted">Favorites</dt>
|
|
<dd class="text-foreground">{{$anime.FavoritesFormatted}}</dd>
|
|
</div>
|
|
{{end}}
|
|
</div>
|
|
{{if $anime.ScoredByFormatted}}
|
|
<div>
|
|
<dt class="mb-1 text-xs font-normal text-foreground-muted">Scored By</dt>
|
|
<dd class="text-foreground">{{$anime.ScoredByFormatted}} users</dd>
|
|
</div>
|
|
{{end}}
|
|
</dl>
|
|
</section>
|
|
|
|
<section>
|
|
<h3 class="mb-4 text-base font-normal text-foreground">Statistics</h3>
|
|
<div hx-get="/anime/{{$anime.MalID}}?section=statistics" hx-trigger="load" hx-swap="innerHTML">
|
|
<div class="flex flex-col gap-3 pt-1">
|
|
{{range (seq 5)}}
|
|
<div class="skeleton h-4"></div>
|
|
{{end}}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section>
|
|
<h3 class="mb-4 text-base font-normal text-foreground">More</h3>
|
|
<div class="flex flex-col gap-3">
|
|
{{if $anime.External}}
|
|
<div>
|
|
<div class="flex flex-wrap gap-2">
|
|
{{range $anime.External}}
|
|
<a href="{{.URL}}" target="_blank" title="{{.Name}}">
|
|
<img src="https://www.google.com/s2/favicons?domain={{.URL}}" alt="{{.Name}}" class="h-4 w-4 shrink-0 opacity-70 transition-opacity hover:opacity-100" loading="lazy" />
|
|
</a>
|
|
{{end}}
|
|
</div>
|
|
</div>
|
|
{{end}}
|
|
<button type="button" data-unstyled-button data-themes-open class="text-left text-sm text-foreground-muted transition-colors hover:text-foreground">
|
|
Theme Songs
|
|
</button>
|
|
<a href="/anime/{{$anime.MalID}}/reviews" class="text-sm text-foreground-muted transition-colors hover:text-foreground">Reviews</a>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</aside>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div hx-get="/anime/{{$anime.MalID}}?section=characters" hx-trigger="load" hx-swap="outerHTML">
|
|
<div class="mt-12 w-full">
|
|
<h2 class="mb-6 text-lg font-normal text-foreground">Characters & Cast</h2>
|
|
<div class="grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5">
|
|
{{range (seq 5)}}
|
|
<div class="flex h-20 gap-3 bg-background-surface p-3">
|
|
<div class="skeleton h-16 w-12 shrink-0"></div>
|
|
<div class="flex flex-col justify-center gap-2 grow">
|
|
<div class="skeleton h-3 w-2/3"></div>
|
|
<div class="skeleton skeleton-subtle h-2 w-1/2"></div>
|
|
</div>
|
|
</div>
|
|
{{end}}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="w-full">
|
|
<div
|
|
hx-get="/api/watch-order?animeId={{$anime.MalID}}"
|
|
hx-trigger="load"
|
|
>
|
|
<div class="mt-8 flex items-center gap-3 text-foreground-muted">
|
|
<div class="size-5 animate-spin rounded-full border-2 border-t-transparent border-accent"></div>
|
|
<span class="text-sm">Loading watch order sequence...</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div
|
|
hx-get="/anime/{{$anime.MalID}}?section=recommendations"
|
|
hx-trigger="load"
|
|
hx-swap="outerHTML"
|
|
>
|
|
<div class="w-full">
|
|
<h2 class="mb-6 text-lg font-normal text-foreground">Recommendations</h2>
|
|
<div class="grid grid-cols-2 gap-4 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 xl:grid-cols-8">
|
|
{{range (seq 8)}}
|
|
<div class="flex flex-col gap-2">
|
|
<div class="skeleton aspect-2/3"></div>
|
|
<div class="skeleton h-3 w-full"></div>
|
|
</div>
|
|
{{end}}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="fixed inset-0 z-50 hidden items-start justify-center bg-black/50 px-4 pt-[12vh]" data-themes-dialog aria-hidden="true">
|
|
<div class="w-full max-w-2xl overflow-hidden bg-background-button shadow-(--shadow-card)" role="dialog" aria-modal="true" aria-label="Theme Songs">
|
|
<div class="flex items-center justify-between px-6 py-4">
|
|
<h2 class="text-base font-normal text-foreground">Theme Songs</h2>
|
|
<button type="button" data-themes-close class="px-2 py-1 text-xs text-foreground-muted transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-accent">Close</button>
|
|
</div>
|
|
<div data-themes-content class="max-h-[60vh] overflow-y-auto"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div data-themes-loader hx-get="/anime/{{$anime.MalID}}?section=themes" hx-trigger="theme-songs:load from:body" hx-target="[data-themes-content]" hx-swap="innerHTML"></div>
|
|
|
|
{{end}}
|