You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
72 lines
3.3 KiB
72 lines
3.3 KiB
{{define "base"}}
|
|
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>{{.Title}}</title>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
</head>
|
|
<body class="min-h-screen bg-slate-900 text-slate-100">
|
|
<div class="flex min-h-screen">
|
|
<aside class="hidden w-56 shrink-0 border-r border-slate-800 bg-slate-950 md:block">
|
|
<div class="px-4 py-4">
|
|
<a href="/" class="text-base font-semibold text-slate-100">CamMonitor</a>
|
|
</div>
|
|
<nav class="px-3 pb-6">
|
|
{{range .Months}}
|
|
<div class="mt-5 first:mt-0">
|
|
<div class="px-2 text-xs font-semibold uppercase tracking-wide text-slate-500">{{.Label}}</div>
|
|
<div class="mt-2 space-y-1">
|
|
{{range .Days}}
|
|
<a href="/day/{{.}}" class="block rounded-md px-2 py-2 text-sm text-slate-300 hover:bg-slate-800 hover:text-white">{{.}}</a>
|
|
{{end}}
|
|
</div>
|
|
</div>
|
|
{{end}}
|
|
</nav>
|
|
</aside>
|
|
|
|
<main class="flex min-h-screen flex-1 flex-col pb-16 md:pb-0">
|
|
<header class="sticky top-0 z-10 border-b border-slate-800 bg-slate-900/95">
|
|
<div class="flex h-14 items-center justify-between px-4 md:px-6">
|
|
<div class="flex items-center gap-3">
|
|
<details data-mobile-drawer class="relative md:hidden">
|
|
<summary class="flex h-9 w-9 cursor-pointer list-none items-center justify-center rounded-md border border-slate-700 text-slate-100">☰</summary>
|
|
<div class="absolute left-0 top-11 z-30 w-72 border border-slate-800 bg-slate-950 p-4 shadow-xl">
|
|
{{range .Months}}
|
|
<div class="mt-5 first:mt-0">
|
|
<div class="text-xs font-semibold uppercase tracking-wide text-slate-500">{{.Label}}</div>
|
|
<div class="mt-2 space-y-1">
|
|
{{range .Days}}
|
|
<a href="/day/{{.}}" class="block rounded-md px-2 py-2 text-sm text-slate-300 hover:bg-slate-800 hover:text-white">{{.}}</a>
|
|
{{end}}
|
|
</div>
|
|
</div>
|
|
{{end}}
|
|
</div>
|
|
</details>
|
|
<a href="/" class="text-base font-semibold text-slate-100 md:hidden">CamMonitor</a>
|
|
</div>
|
|
<div class="flex items-center gap-3 text-sm text-slate-300">
|
|
{{with .User}}<span>{{.Username}}</span>{{end}}
|
|
<form method="post" action="/logout">
|
|
<button type="submit" class="rounded-md border border-slate-700 px-3 py-1.5 text-sm text-slate-100 hover:bg-slate-800">Logout</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<section class="flex-1 px-4 py-6 md:px-8">
|
|
{{template "content" .}}
|
|
</section>
|
|
</main>
|
|
</div>
|
|
|
|
<nav class="fixed inset-x-0 bottom-0 z-20 grid grid-cols-2 border-t border-slate-800 bg-slate-950/95 md:hidden">
|
|
<a href="{{if .CurrentDate}}/day/{{.CurrentDate}}/images{{else}}/{{end}}" class="px-4 py-3 text-center text-sm font-medium text-slate-200">Images</a>
|
|
<a href="{{if .CurrentDate}}/day/{{.CurrentDate}}/videos{{else}}/{{end}}" class="px-4 py-3 text-center text-sm font-medium text-slate-200">Videos</a>
|
|
</nav>
|
|
</body>
|
|
</html>
|
|
{{end}}
|
|
|