54 lines
1.9 KiB
Cheetah
54 lines
1.9 KiB
Cheetah
{{define "gallery.tmpl"}}
|
|
<!doctype html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>See Our Work - Decor By Hannahs</title>
|
|
<link rel="stylesheet" href="/static/css/styles.css">
|
|
<script>
|
|
(function() {
|
|
const savedTheme = localStorage.getItem('theme') || 'light';
|
|
document.documentElement.setAttribute('data-theme', savedTheme);
|
|
})();
|
|
</script>
|
|
<script src="/static/js/alpine.js" defer></script>
|
|
<script src="/static/htmx/htmx.min.js" defer></script>
|
|
<script src="/static/js/drawer.js" defer></script>
|
|
</head>
|
|
|
|
<body>
|
|
{{template "header" .}}
|
|
|
|
<main>
|
|
<div style="margin-bottom: 2rem; position: relative;">
|
|
<img src="/assets/party-icons/happy-sun-wearing-party-hat.png" alt="Happy sun" style="position: absolute; top: -15px; left: 260px; width: 80px; height: 80px; opacity: 0.9;">
|
|
<img src="/assets/party-icons/jester-hat.png" alt="Jester hat" style="position: absolute; top: -10px; right: 30px; width: 65px; height: 65px; transform: rotate(25deg); opacity: 0.85;">
|
|
<h1 style="font-size: 2.5rem; font-weight: 700; margin-bottom: 0.5rem;">See Our Work</h1>
|
|
<p style="color: hsl(var(--muted-foreground)); font-size: 1.125rem;">Browse our recent decoration projects</p>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-3">
|
|
{{ range .Photos }}
|
|
<div class="card">
|
|
<img src="{{ .URL }}" alt="{{ if .Caption }}{{ .Caption }}{{ else }}Gallery photo{{ end }}" style="width: 100%; height: 250px; object-fit: cover; border-radius: var(--radius);">
|
|
{{ if .Caption }}
|
|
<div class="card-content">
|
|
<p>{{ .Caption }}</p>
|
|
</div>
|
|
{{ end }}
|
|
</div>
|
|
{{ else }}
|
|
<div class="card" style="grid-column: 1 / -1; text-align: center; padding: 3rem;">
|
|
<p style="color: hsl(var(--muted-foreground)); font-size: 1.125rem;">No photos available yet. Check back soon!</p>
|
|
</div>
|
|
{{ end }}
|
|
</div>
|
|
</main>
|
|
|
|
{{template "footer"}}
|
|
{{template "theme-script"}}
|
|
</body>
|
|
</html>
|
|
{{end}}
|