sabisan/web/templates/base.html

156 lines
8.9 KiB
HTML
Raw Normal View History

2026-05-16 19:30:20 +00:00
{{define "head"}}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>{{if .Title}}{{.Title}} | {{end}}Archi Folio</title>
2026-05-17 12:55:41 +00:00
<script>
(function () {
try {
var theme = localStorage.getItem("archi-theme");
if (theme === "dark" || theme === "light") {
document.documentElement.setAttribute("data-theme", theme);
}
} catch (_) {}
})();
</script>
2026-05-17 12:36:50 +00:00
<link href="https://cdn.jsdelivr.net/npm/daisyui@5" rel="stylesheet" type="text/css">
2026-05-16 19:30:20 +00:00
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://unpkg.com/htmx.org@2.0.4"></script>
<link rel="stylesheet" href="/static/styles.css">
<script defer src="/static/app.js"></script>
</head>
<body class="bg-neutral-50 text-neutral-950 antialiased">
{{end}}
2026-05-17 12:55:41 +00:00
{{define "public_shell_start"}}
2026-05-17 12:36:50 +00:00
{{template "head" .}}
<div class="drawer drawer-end">
<input id="site-drawer" type="checkbox" class="drawer-toggle">
<div class="drawer-content min-h-screen bg-neutral-50 text-neutral-950">
{{template "site_header" .}}
{{end}}
2026-05-16 19:30:20 +00:00
{{define "site_header"}}
2026-05-17 12:55:41 +00:00
<header id="site-header" data-site-header class="fixed inset-x-0 top-0 z-40 transition-all duration-300 {{if eq .Active "home"}}py-7 text-white{{else}}bg-neutral-50/95 py-4 shadow-sm backdrop-blur text-neutral-950{{end}}">
{{template "site_header_inner" .}}
</header>
{{end}}
{{define "site_header_oob"}}
<header id="site-header" data-site-header class="fixed inset-x-0 top-0 z-40 transition-all duration-300 {{if eq .Active "home"}}py-7 text-white{{else}}bg-neutral-50/95 py-4 shadow-sm backdrop-blur text-neutral-950{{end}}" hx-swap-oob="true">
{{template "site_header_inner" .}}
</header>
{{end}}
{{define "site_header_inner"}}
2026-05-16 19:30:20 +00:00
<div class="mx-auto flex max-w-7xl items-center justify-between px-5 md:px-8">
2026-05-17 12:55:41 +00:00
<a href="/" class="text-xl font-semibold tracking-normal md:text-3xl" data-header-brand hx-boost="true" hx-target="#main-content" hx-swap="outerHTML transition:true" hx-push-url="true">Archi Folio</a>
<div class="hidden items-center gap-6 md:flex">
{{template "site_desktop_nav" .}}
{{template "theme_toggle" .}}
</div>
2026-05-17 12:36:50 +00:00
<label for="site-drawer" class="grid h-11 w-11 cursor-pointer place-items-center border border-current/30 md:hidden" aria-label="Open menu">
<span class="grid gap-1.5">
<span class="block h-px w-5 bg-current"></span>
<span class="block h-px w-5 bg-current"></span>
<span class="block h-px w-5 bg-current"></span>
</span>
</label>
2026-05-16 19:30:20 +00:00
</div>
2026-05-17 12:55:41 +00:00
{{end}}
{{define "site_desktop_nav"}}
<nav id="site-desktop-nav" class="hidden items-center gap-4 text-sm uppercase tracking-[0.18em] md:flex md:gap-8" hx-boost="true" hx-target="#main-content" hx-swap="outerHTML transition:true" hx-push-url="true">
<a class="hover:opacity-60 {{if eq .Active "projects"}}font-semibold{{end}}" href="/projects">Projects</a>
<a class="hover:opacity-60 {{if eq .Active "about"}}font-semibold{{end}}" href="/about">Studio</a>
<a class="hover:opacity-60 {{if eq .Active "services"}}font-semibold{{end}}" href="/services">Services</a>
<a class="hover:opacity-60 {{if eq .Active "contact"}}font-semibold{{end}}" href="/contact">Contact</a>
</nav>
{{end}}
{{define "site_desktop_nav_oob"}}
<nav id="site-desktop-nav" class="hidden items-center gap-4 text-sm uppercase tracking-[0.18em] md:flex md:gap-8" hx-boost="true" hx-target="#main-content" hx-swap="outerHTML transition:true" hx-push-url="true" hx-swap-oob="true">
<a class="hover:opacity-60 {{if eq .Active "projects"}}font-semibold{{end}}" href="/projects">Projects</a>
<a class="hover:opacity-60 {{if eq .Active "about"}}font-semibold{{end}}" href="/about">Studio</a>
<a class="hover:opacity-60 {{if eq .Active "services"}}font-semibold{{end}}" href="/services">Services</a>
<a class="hover:opacity-60 {{if eq .Active "contact"}}font-semibold{{end}}" href="/contact">Contact</a>
</nav>
2026-05-16 19:30:20 +00:00
{{end}}
{{define "footer"}}
<footer class="border-t border-neutral-200 px-5 py-10 text-sm text-neutral-500 md:px-8">
<div class="mx-auto flex max-w-7xl flex-col gap-4 md:flex-row md:items-center md:justify-between">
<p>&copy; 2026 Archi Folio</p>
<p>{{.Content.Email}} · {{.Content.Location}}</p>
</div>
</footer>
{{end}}
2026-05-17 12:36:50 +00:00
2026-05-17 12:55:41 +00:00
{{define "theme_toggle"}}
<label class="swap swap-rotate grid h-10 w-10 cursor-pointer place-items-center text-current" aria-label="Toggle dark theme">
<input type="checkbox" value="dark" class="theme-controller" data-theme-toggle>
<svg class="swap-off h-6 w-6 fill-current" aria-label="sun" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path d="M5.64,17l-.71.71a1,1,0,0,0,0,1.41,1,1,0,0,0,1.41,0l.71-.71A1,1,0,0,0,5.64,17ZM5,12a1,1,0,0,0-1-1H3a1,1,0,0,0,0,2H4A1,1,0,0,0,5,12Zm7-7a1,1,0,0,0,1-1V3a1,1,0,0,0-2,0V4A1,1,0,0,0,12,5ZM5.64,7.05a1,1,0,0,0,.7.29,1,1,0,0,0,.71-.29,1,1,0,0,0,0-1.41l-.71-.71A1,1,0,0,0,4.93,6.34Zm12,.29a1,1,0,0,0,.7-.29l.71-.71a1,1,0,1,0-1.41-1.41L17,5.64a1,1,0,0,0,0,1.41A1,1,0,0,0,17.66,7.34ZM21,11H20a1,1,0,0,0,0,2h1a1,1,0,0,0,0-2Zm-9,8a1,1,0,0,0-1,1v1a1,1,0,0,0,2,0V20A1,1,0,0,0,12,19ZM18.36,17A1,1,0,0,0,17,18.36l.71.71a1,1,0,0,0,1.41,0,1,1,0,0,0,0-1.41ZM12,6.5A5.5,5.5,0,1,0,17.5,12,5.51,5.51,0,0,0,12,6.5Zm0,9A3.5,3.5,0,1,1,15.5,12,3.5,3.5,0,0,1,12,15.5Z"></path>
</svg>
<svg class="swap-on h-6 w-6 fill-current" aria-label="moon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path d="M21.64,13a1,1,0,0,0-1.05-.14,8.05,8.05,0,0,1-3.37.73A8.15,8.15,0,0,1,9.08,5.49a8.59,8.59,0,0,1,.25-2A1,1,0,0,0,8,2.36,10.14,10.14,0,1,0,22,14.05,1,1,0,0,0,21.64,13Zm-9.5,6.69A8.14,8.14,0,0,1,7.08,5.22v.27A10.15,10.15,0,0,0,17.22,15.63a9.79,9.79,0,0,0,2.1-.22A8.11,8.11,0,0,1,12.14,19.73Z"></path>
</svg>
</label>
{{end}}
{{define "public_nav_oob"}}
{{template "site_header_oob" .}}
{{template "site_drawer_nav_oob" .}}
{{end}}
{{define "public_shell_end"}}
2026-05-17 12:36:50 +00:00
{{template "footer" .}}
<div id="overlay-root"></div>
</div>
<div class="drawer-side z-50 md:hidden">
<label for="site-drawer" aria-label="Close menu" class="drawer-overlay bg-neutral-950/45"></label>
<aside class="flex min-h-full w-[min(22rem,86vw)] flex-col bg-neutral-950/45 text-white shadow-2xl backdrop-blur-xl">
<div class="flex items-center justify-between border-b border-white/15 px-5 py-4">
2026-05-17 12:55:41 +00:00
<a href="/" class="text-xl font-semibold text-white" hx-boost="true" hx-target="#main-content" hx-swap="outerHTML transition:true" hx-push-url="true" data-drawer-link>Archi Folio</a>
<div class="flex items-center gap-3">
{{template "theme_toggle" .}}
<label for="site-drawer" class="grid h-10 w-10 cursor-pointer place-items-center border border-white/25 text-white" aria-label="Close menu">
<span class="relative block h-5 w-5">
<span class="absolute left-0 top-1/2 block h-px w-5 rotate-45 bg-current"></span>
<span class="absolute left-0 top-1/2 block h-px w-5 -rotate-45 bg-current"></span>
</span>
</label>
</div>
2026-05-17 12:36:50 +00:00
</div>
2026-05-17 12:55:41 +00:00
{{template "site_drawer_nav" .}}
2026-05-17 12:36:50 +00:00
<div class="mt-auto px-5 pb-6 text-sm leading-relaxed text-white">
<p>{{.Content.Email}}</p>
<p>{{.Content.Location}}</p>
</div>
</aside>
</div>
</div>
</body>
</html>
{{end}}
2026-05-17 12:55:41 +00:00
{{define "site_drawer_nav"}}
<nav id="site-drawer-nav" class="grid px-5 py-6 text-2xl font-medium text-white" hx-boost="true" hx-target="#main-content" hx-swap="outerHTML transition:true" hx-push-url="true">
<a class="border-b border-white/15 py-4 text-white {{if eq .Active "projects"}}underline underline-offset-8{{end}}" href="/projects" data-drawer-link>Projects</a>
<a class="border-b border-white/15 py-4 text-white {{if eq .Active "about"}}underline underline-offset-8{{end}}" href="/about" data-drawer-link>Studio</a>
<a class="border-b border-white/15 py-4 text-white {{if eq .Active "services"}}underline underline-offset-8{{end}}" href="/services" data-drawer-link>Services</a>
<a class="border-b border-white/15 py-4 text-white {{if eq .Active "contact"}}underline underline-offset-8{{end}}" href="/contact" data-drawer-link>Contact</a>
</nav>
{{end}}
{{define "site_drawer_nav_oob"}}
<nav id="site-drawer-nav" class="grid px-5 py-6 text-2xl font-medium text-white" hx-boost="true" hx-target="#main-content" hx-swap="outerHTML transition:true" hx-push-url="true" hx-swap-oob="true">
<a class="border-b border-white/15 py-4 text-white {{if eq .Active "projects"}}underline underline-offset-8{{end}}" href="/projects" data-drawer-link>Projects</a>
<a class="border-b border-white/15 py-4 text-white {{if eq .Active "about"}}underline underline-offset-8{{end}}" href="/about" data-drawer-link>Studio</a>
<a class="border-b border-white/15 py-4 text-white {{if eq .Active "services"}}underline underline-offset-8{{end}}" href="/services" data-drawer-link>Services</a>
<a class="border-b border-white/15 py-4 text-white {{if eq .Active "contact"}}underline underline-offset-8{{end}}" href="/contact" data-drawer-link>Contact</a>
</nav>
{{end}}