49 lines
2.1 KiB
HTML
49 lines
2.1 KiB
HTML
{{define "base"}}
|
|
<!doctype html>
|
|
<html lang="en" class="h-full">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<link rel="icon" href="/static/favicon.svg" type="image/svg+xml">
|
|
<title>{{.Title}} · Where Woof !</title>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<script src="https://unpkg.com/htmx.org@1.9.12"></script>
|
|
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
|
|
<style>
|
|
/* HTMX swap/settle animations */
|
|
.htmx-swapping { opacity: 0; transition: opacity 150ms ease-out; }
|
|
.htmx-settling { opacity: 0; transition: opacity 200ms ease-in; }
|
|
.htmx-settling.show { opacity: 1; }
|
|
.fade-row { transition: opacity 200ms ease-out; }
|
|
.htmx-request .htmx-indicator, .htmx-request.htmx-indicator { opacity: 1; }
|
|
.htmx-indicator { opacity: 0; transition: opacity 150ms ease-in; }
|
|
</style>
|
|
</head>
|
|
<body class="min-h-full bg-stone-100 text-stone-900 antialiased">
|
|
<nav class="bg-stone-900 text-white">
|
|
<div class="mx-auto flex max-w-4xl items-center justify-between px-4 py-3">
|
|
<a href="/" class="text-lg font-bold tracking-tight">🐕 Where Woof</a>
|
|
<div class="flex items-center gap-4 text-sm">
|
|
{{if .CurrentUser}}
|
|
<div class="text-right leading-tight">
|
|
<span class="text-stone-300">Hi, {{.CurrentUser.Name}}</span>
|
|
<span class="block text-xs text-stone-500" title="Your username / email">{{.CurrentUser.Email}}</span>
|
|
</div>
|
|
<a href="/account" class="hover:underline">My Tags</a>
|
|
<form method="post" action="/logout" class="inline">
|
|
<button class="hover:underline">Log out</button>
|
|
</form>
|
|
{{else}}
|
|
<a href="/login" class="hover:underline">Log in</a>
|
|
<a href="/register" class="rounded bg-amber-500 px-3 py-1 font-semibold text-stone-900 hover:bg-amber-400">Register</a>
|
|
{{end}}
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
<main class="mx-auto max-w-4xl px-4 py-8">
|
|
{{template "content" .}}
|
|
</main>
|
|
</body>
|
|
</html>
|
|
{{end}}
|