24103394ae
Server picks variant from Lisbon-local date (rain/petals/jacaranda/motes/leaves) and renders behind content via a canvas particle layer. Each variant has a hand-drawn silhouette so shapes are recognizable. /weather demo route exposes variant + intensity + phase pickers, locking the time-of-day phase override.
58 lines
3.2 KiB
HTML
58 lines
3.2 KiB
HTML
{{define "title"}}Weather demo · {{.SiteTitle}}{{end}}
|
|
|
|
{{define "main"}}
|
|
<div class="space-y-8">
|
|
<section class="rounded-3xl bg-[color:var(--card)] p-6 shadow-pete border-2 border-[color:var(--ink)]/10">
|
|
<h1 class="font-display text-3xl font-bold mb-1">Weather demo</h1>
|
|
<p class="text-sm text-[color:var(--ink)]/60 mb-5">Pick a variant, intensity, and phase. The canvas reloads on each click.</p>
|
|
|
|
<div class="space-y-3 text-sm">
|
|
<div class="flex flex-wrap items-center gap-2">
|
|
<span class="w-20 shrink-0 font-semibold uppercase tracking-wider text-[color:var(--ink)]/60">Variant</span>
|
|
{{range $v := .Variants}}
|
|
<a href="?variant={{$v}}&intensity={{$.Intensity}}&phase={{$.PhaseSel}}"
|
|
class="rounded-full px-3 py-1 transition border-2 border-[color:var(--ink)]/10
|
|
{{if eq $.Variant $v}}bg-[color:var(--accent)] text-white font-semibold{{else}}hover:bg-[color:var(--ink)]/5{{end}}">{{$v}}</a>
|
|
{{end}}
|
|
</div>
|
|
<div class="flex flex-wrap items-center gap-2">
|
|
<span class="w-20 shrink-0 font-semibold uppercase tracking-wider text-[color:var(--ink)]/60">Intensity</span>
|
|
{{range $i := .Intensities}}
|
|
<a href="?variant={{$.Variant}}&intensity={{$i}}&phase={{$.PhaseSel}}"
|
|
class="rounded-full px-3 py-1 transition border-2 border-[color:var(--ink)]/10
|
|
{{if eq $.Intensity $i}}bg-[color:var(--accent)] text-white font-semibold{{else}}hover:bg-[color:var(--ink)]/5{{end}}">{{$i}}</a>
|
|
{{end}}
|
|
</div>
|
|
<div class="flex flex-wrap items-center gap-2">
|
|
<span class="w-20 shrink-0 font-semibold uppercase tracking-wider text-[color:var(--ink)]/60">Phase</span>
|
|
{{range $p := .Phases}}
|
|
<a href="?variant={{$.Variant}}&intensity={{$.Intensity}}&phase={{$p}}"
|
|
class="rounded-full px-3 py-1 transition border-2 border-[color:var(--ink)]/10
|
|
{{if eq $.PhaseSel $p}}bg-[color:var(--accent)] text-white font-semibold{{else}}hover:bg-[color:var(--ink)]/5{{end}}">{{$p}}</a>
|
|
{{end}}
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mt-5 text-xs text-[color:var(--ink)]/50">
|
|
Current: <code class="font-semibold">{{.Weather.Season}} / {{.Variant}} / {{.Intensity}} / {{.PhaseSel}}</code>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="rounded-3xl bg-[color:var(--card)] p-10 shadow-pete border-2 border-[color:var(--ink)]/10 text-center">
|
|
<p class="font-display text-lg">Sample card</p>
|
|
<p class="mt-2 text-sm text-[color:var(--ink)]/60">Particles should drift in the margins around this block, not over the top of it.</p>
|
|
</section>
|
|
|
|
<section class="grid gap-4 sm:grid-cols-2">
|
|
<div class="rounded-3xl bg-[color:var(--card)] p-6 shadow-pete border-2 border-[color:var(--ink)]/10">
|
|
<p class="font-display">Card A</p>
|
|
<p class="text-sm text-[color:var(--ink)]/60 mt-1">Two cards with a gap so you can see the canvas between them.</p>
|
|
</div>
|
|
<div class="rounded-3xl bg-[color:var(--card)] p-6 shadow-pete border-2 border-[color:var(--ink)]/10">
|
|
<p class="font-display">Card B</p>
|
|
<p class="text-sm text-[color:var(--ink)]/60 mt-1">Move your window taller to give the particles more room.</p>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
{{end}}
|