Add screenshots gallery to the VIGIL showcase page

New "Screens" section (3-up phone gallery: active tracker list with
"It's mine" triage, locate-mode searching, and homing at -52 dBm /
ring), plus three optimized app screenshots, a nav anchor, and .shots CSS.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_0173RhsXkdMViDR8DMNAG3ms
This commit is contained in:
Kara Zajac
2026-07-15 19:12:21 -04:00
parent b72faea8ce
commit a71a83891a
5 changed files with 64 additions and 0 deletions
+32
View File
@@ -40,6 +40,7 @@
<div class="nav-links">
<a href="#detects">What it detects</a>
<a href="#decides">How it decides</a>
<a href="#screens">Screens</a>
<a href="#clones">Clones</a>
<a href="#download">Download</a>
<a class="nav-github" href="https://github.com/KaraZajac/VIGIL" aria-label="GitHub">
@@ -223,6 +224,37 @@
</div>
</section>
<!-- ──────────────── SCREENSHOTS ──────────────── -->
<section id="screens" class="section reveal">
<div class="container">
<div class="section-head">
<span class="section-tag">screenshots</span>
<h2>Spot it, then walk it down.</h2>
<p class="lead">No account, no map tiles, no cloud — it all runs on the
phone. See what's moving with you, wave off your own gear, and when
something's left over, home in on it.</p>
</div>
<div class="shots">
<figure class="shot">
<img class="phone" src="img/vigil-active.png" width="1096" height="2560"
alt="VIGIL active list: an ACTIVE (6) list of nearby Apple Find My and Google Find My Device trackers, each showing places seen, signal in dBm, time since last seen, and an It's-mine button." loading="lazy">
<figcaption><strong>The active list</strong>Every tracker seen moving with you — signal, places, and how long ago. Tap &ldquo;It's mine&rdquo; and your own gear drops out.</figcaption>
</figure>
<figure class="shot">
<img class="phone" src="img/vigil-locate.png" width="1096" height="2560"
alt="VIGIL locate screen for an Apple Find My tracker: a large pulsing radar icon reading Searching… walk around, no signal yet, with a Make-it-ring button." loading="lazy">
<figcaption><strong>Locate mode</strong>Pick a suspect and walk — the ripple strengthens as you close in. No signal yet? Keep moving.</figcaption>
</figure>
<figure class="shot">
<img class="phone" src="img/vigil-signal.png" width="1096" height="2560"
alt="VIGIL locate screen for a Google Find My Device tracker reading Close, minus 52 dBm, with a Make-it-ring button and a Ringing… listen for the tracker toast." loading="lazy">
<figcaption><strong>Getting warmer</strong>Live signal strength as you approach — &minus;52 dBm is close. &ldquo;Make it ring&rdquo; forces a silent tracker to give itself up.</figcaption>
</figure>
</div>
</div>
</section>
<!-- ──────────────── CLONES ──────────────── -->
<section id="clones" class="section section-feature reveal">
<div class="container">