leviathan/OVERWATCH
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add screenshots gallery to the OVERWATCH showcase page

Browse Source 
New "Screens" section (3-up phone gallery: threat ring, source
drill-down, settings) with captions, plus 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:09:10 -04:00
parent 98b6769256
commit 7d85dec970
2 changed files with 64 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/index.html
+32
View File
@@ -41,6 +41,7 @@
<a href="#detect">How it works</a>
<a href="#sources">Sources</a>
<a href="#tiers">Tiers</a>
<a href="#screens">Screens</a>
<a href="#download">Download</a>
<a class="nav-github" href="https://github.com/KaraZajac/OVERWATCH" aria-label="GitHub">
<svg height="18" viewBox="0 0 16 16" width="18" fill="currentColor" aria-hidden="true">
@@ -293,6 +294,37 @@
</div>
</section>
<!-- ──────────────── SCREENSHOTS ──────────────── -->
<section id="screens" class="section reveal">
<div class="container">
<div class="section-head">
<span class="section-tag">screenshots</span>
<h2>The whole app, top to bottom.</h2>
<p class="lead">No account, no onboarding, no cloud dashboard to
configure — open it, hit START, and drill into any source. Three taps
deep is as complex as it gets.</p>
</div>
<div class="shots">
<figure class="shot">
<img class="phone" src="img/overwatch-main.png" width="1096" height="2560"
alt="OVERWATCH main screen: a live map inside a green all-clear threat ring, centered on you with a crosshair, and a STOP button." loading="lazy">
<figcaption><strong>The threat ring</strong>A live map centered on you, wrapped in the current tier's color. Green reads &ldquo;all clear&rdquo; at a glance.</figcaption>
</figure>
<figure class="shot">
<img class="phone" src="img/overwatch-sources.png" width="856" height="2000"
alt="Detection-sources drill-down: BLE, WiFi, DeFlock, Citizen, Waze and Commercial rows, each with a color tier dot and the observations that fired it." loading="lazy">
<figcaption><strong>Source drill-down</strong>Tap the ring for every source, its live tier, and the exact observation that fired it.</figcaption>
</figure>
<figure class="shot">
<img class="phone" src="img/overwatch-settings.png" width="856" height="2000"
alt="Settings screen: per-source toggles, proximity distance sliders, and the encrypted Waze proxy token field." loading="lazy">
<figcaption><strong>Settings</strong>Toggle each source, tune proximity distances, and paste an encrypted Waze proxy token.</figcaption>
</figure>
</div>
</div>
</section>
<!-- ──────────────── CAPABILITIES ──────────────── -->
<section class="section section-bento reveal">
<div class="container">
docs/style.css
+32
View File
@@ -1089,3 +1089,35 @@ pre.code .prompt { color: var(--accent-hot); user-select: none; }
/* radar logo mark in nav/footer (replaces the ◉ glyph) */
.nav-logo { display: inline-block; vertical-align: middle; border-radius: 7px; }
.nav-brand .nav-logo { margin-right: 3px; }
/* ============================================================
SCREENSHOTS GALLERY
============================================================ */
.shots {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 2.6rem;
margin-top: 2.8rem;
align-items: start;
}
.shots .shot { margin: 0; display: flex; flex-direction: column; align-items: center; }
.shots .phone { width: 260px; max-width: 100%; }
.shots figcaption {
margin-top: 1.4rem;
max-width: 260px;
color: var(--text-muted);
font-size: 0.9rem;
line-height: 1.55;
text-align: center;
}
.shots figcaption strong {
display: block;
color: var(--text);
font-family: var(--display);
font-size: 1rem;
margin-bottom: 0.3rem;
}
@media (max-width: 820px) {
.shots { grid-template-columns: 1fr; gap: 3rem; }
.shots .phone { width: 256px; }
}