Files
mal/templates/base.gohtml

69 lines
3.4 KiB
Plaintext

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MyAnimeList: {{template "title" .}}</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<script>
const preferredTheme = window.matchMedia?.("(prefers-color-scheme: dark)").matches ? "dark" : "light";
document.documentElement.dataset.theme = preferredTheme;
document.documentElement.style.colorScheme = preferredTheme;
</script>
<link rel="manifest" href="/static/assets/manifest.json">
<link rel="icon" type="image/png" href="/static/assets/favicon.png">
<link rel="apple-touch-icon" href="/static/assets/apple-touch-icon.png">
<link rel="apple-touch-icon" sizes="120x120" href="/static/assets/apple-touch-icon-120x120.png">
<link rel="preload" href="https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600;9..40,700&display=swap" as="style" onload="this.onload=null;this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600;9..40,700&display=swap"></noscript>
<link rel="preload" href="https://fonts.googleapis.com/css2?family=Newsreader:opsz,wght@6..72,400;6..72,600&display=swap" as="style" onload="this.onload=null;this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Newsreader:opsz,wght@6..72,400;6..72,600&display=swap"></noscript>
<link rel="stylesheet" href="{{assetURL "/dist/tailwind.css"}}">
<style>
[data-htmx-loading="true"] {
opacity: 0.65;
pointer-events: none;
}
</style>
<script type="module" src="{{assetURL "/dist/static/app.js"}}" defer></script>
<template id="toast-template">
<div class="toast pointer-events-auto w-88 max-w-[calc(100vw-2rem)] bg-background shadow-(--shadow-card) ring-1 ring-black/5 flex items-start gap-3 px-4 py-3 transform transition-all duration-300 translate-y-2 opacity-0">
<div class="min-w-0 flex-1">
<div class="toast-message text-sm font-medium text-foreground leading-snug"></div>
</div>
<button class="toast-close -mr-1 -mt-1 rounded-md p-1.5 opacity-70 hover:opacity-100 hover:bg-foreground/10 focus:outline-none focus:ring-2 focus:ring-ring" aria-label="Close">
<svg class="size-4 text-foreground-muted" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M18 6L6 18M6 6l12 12"/>
</svg>
</button>
</div>
</template>
<script src="{{assetURL "/dist/static/htmx-lib.js"}}"></script>
{{block "scripts" .}}{{end}}
</head>
<body class="bg-background text-foreground">
<div class="flex min-h-screen flex-col">
{{if .User}}
{{template "header_navigation" dict "CurrentPath" .CurrentPath}}
<div class="flex flex-1 overflow-hidden pt-16">
<main class="scrollbar-hidden w-full flex-1 flex flex-col h-[calc(100dvh-4rem)] overflow-y-auto">
<div class="flex-1 p-4 md:p-8">
{{block "page_container" .}}
{{template "content" .}}
{{end}}
</div>
</main>
</div>
{{else}}
<main class="w-full flex-1 flex flex-col">
<div class="flex-1">
{{template "content" .}}
</div>
</main>
{{end}}
</div>
</body>
</html>