137 lines
5.4 KiB
Plaintext
137 lines
5.4 KiB
Plaintext
package layout
|
|
|
|
import (
|
|
"mal/web/components/icons"
|
|
"time"
|
|
)
|
|
|
|
templ Layout(title string, showHeader bool) {
|
|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8"/>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
|
<title>{ title }</title>
|
|
<link rel="icon" type="image/svg+xml" href="/static/favicon.svg"/>
|
|
<link rel="stylesheet" href="/dist/tailwind.css"/>
|
|
<script src="https://unpkg.com/htmx.org@1.9.11" integrity="sha384-0gxUXCCR8yv9FM2b+U3FDbsKthCI66oH5IA9fHppQq9DDMHuMauqq1ZHBpJxQ0J0" crossorigin="anonymous"></script>
|
|
<script>
|
|
var t = localStorage.getItem('theme');
|
|
if (t === 'light' || t === 'dark') document.documentElement.setAttribute('data-theme', t);
|
|
</script>
|
|
<script src="/dist/static/theme.js" defer></script>
|
|
<script src="/dist/static/discover.js" defer></script>
|
|
<script src="/dist/static/anime.js" defer></script>
|
|
<script src="/dist/static/timezone.js" defer></script>
|
|
<script src="/dist/static/player.js" defer></script>
|
|
</head>
|
|
<body
|
|
class="min-h-screen bg-(--bg) text-(--text) font-(--font) text-sm leading-normal flex flex-col"
|
|
>
|
|
if showHeader {
|
|
<header class="sticky top-0 z-100 bg-(--header)">
|
|
<div
|
|
class="mx-auto flex w-full max-w-(--breakpoint-2xl) items-center gap-4 px-4 py-3 max-lg:flex-wrap max-lg:gap-3"
|
|
>
|
|
<div
|
|
class="flex min-w-0 items-center gap-5 max-lg:w-full max-lg:flex-wrap max-lg:gap-3"
|
|
data-search-root
|
|
>
|
|
<a
|
|
href="/"
|
|
class="inline-flex items-center text-(--accent)"
|
|
aria-label="mal logo"
|
|
>
|
|
@icons.LogoIcon("h-7 w-7")
|
|
</a>
|
|
<div class="flex flex-wrap gap-3 text-sm max-lg:w-full max-lg:gap-2">
|
|
<a
|
|
class="text-(--text-muted) no-underline hover:text-(--text) hover:no-underline"
|
|
href="/discover"
|
|
>
|
|
Discover
|
|
</a>
|
|
<a
|
|
class="text-(--text-muted) no-underline hover:text-(--text) hover:no-underline"
|
|
href="/continue-watching"
|
|
>
|
|
Continue watching
|
|
</a>
|
|
<a
|
|
class="text-(--text-muted) no-underline hover:text-(--text) hover:no-underline"
|
|
href="/watchlist"
|
|
>
|
|
Watchlist
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="relative ml-auto min-w-60 w-full max-w-md max-lg:ml-0"
|
|
data-search-root
|
|
>
|
|
<form action="/search" method="GET" class="w-full" id="search-form">
|
|
<input
|
|
type="text"
|
|
id="search-input"
|
|
name="q"
|
|
class="h-9 w-full border border-transparent bg-(--surface-search) px-3 text-(--text) transition-colors duration-120 placeholder:text-(--text-faint) focus:border-(--surface-search-focus-border) focus:outline-none"
|
|
placeholder="Search anime..."
|
|
autocomplete="off"
|
|
/>
|
|
<div
|
|
id="search-dropdown"
|
|
class="absolute inset-x-0 top-full mt-0.5 z-50 max-h-screen overflow-y-auto bg-(--panel)"
|
|
data-search-results-container
|
|
></div>
|
|
</form>
|
|
</div>
|
|
<button
|
|
id="theme-toggle"
|
|
type="button"
|
|
class="inline-flex h-9 w-9 shrink-0 cursor-pointer items-center justify-center border-0 bg-transparent text-(--text-muted) hover:text-(--text)"
|
|
aria-label="Toggle theme"
|
|
title="Toggle theme"
|
|
>
|
|
<svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
<path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</header>
|
|
}
|
|
<main class={
|
|
"mx-auto w-full max-w-(--breakpoint-2xl) px-4 pt-5 pb-8 max-lg:px-3 max-lg:pb-6 flex-1",
|
|
templ.KV("flex min-h-screen items-center justify-center px-4 py-0", !showHeader),
|
|
}>
|
|
{ children... }
|
|
</main>
|
|
<footer class="border-t border-(--panel-soft) bg-(--panel) text-(--text-muted) text-center py-6 mt-auto">
|
|
<div class="mx-auto max-w-(--breakpoint-2xl) px-4 flex flex-col items-center gap-4">
|
|
<div class="flex gap-4">
|
|
<a href="https://github.com/mkelvers/mal" target="_blank" rel="noopener noreferrer" class="text-(--text-muted) hover:text-(--text) hover:no-underline">
|
|
<svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
<path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"/>
|
|
</svg>
|
|
</a>
|
|
<button
|
|
id="footer-theme-toggle"
|
|
type="button"
|
|
class="inline-flex h-9 w-9 shrink-0 cursor-pointer items-center justify-center border-0 bg-transparent text-(--text-muted) hover:text-(--text)"
|
|
aria-label="Toggle theme"
|
|
title="Toggle theme"
|
|
>
|
|
<svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
<path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
<p class="text-sm">
|
|
© {time.Now().Year()} mal. Open source anime tracking.
|
|
</p>
|
|
</div>
|
|
</footer>
|
|
<script src="/dist/static/search.js" defer></script>
|
|
</body>
|
|
</html>
|
|
}
|