Kara Zajac
84b1de016b
Static landing page (index.html + style.css + app.js + og) reusing the SKELETONKEY project-page design system, tailored to the Android app: hero + threat-circle screenshot, six detection-source cards, the green/yellow/orange/red tier model, passive-only ethics, and a sideload guide. Canonical = overwatch.netslum.io. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
36 lines
2.5 KiB
HTML
36 lines
2.5 KiB
HTML
<!doctype html><html lang="en"><head><meta charset="utf-8">
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@500;700&family=Space+Grotesk:wght@700&display=swap" rel="stylesheet">
|
|
<style>
|
|
* { margin: 0; padding: 0; box-sizing: border-box; }
|
|
body {
|
|
width: 1200px; height: 630px; overflow: hidden; position: relative;
|
|
background: radial-gradient(130% 130% at 12% 8%, #101b2e 0%, #07070d 52%, #0b0712 100%);
|
|
color: #ecedf7; font-family: "Inter", sans-serif;
|
|
}
|
|
.wrap { padding: 74px 82px; height: 100%; display: flex; flex-direction: column; justify-content: center; }
|
|
.brand { display: flex; align-items: center; gap: 20px; margin-bottom: 26px; }
|
|
.mark { color: #10b981; font-size: 46px; filter: drop-shadow(0 0 18px rgba(16,185,129,.8)); }
|
|
.name { font-family: "Space Grotesk", sans-serif; font-weight: 700; font-size: 84px; letter-spacing: .01em; }
|
|
.tag { font-size: 31px; line-height: 1.38; color: #c5c5d3; font-weight: 500; max-width: 960px; }
|
|
.tag b { color: #ecedf7; font-weight: 700; }
|
|
.tiers { display: flex; gap: 22px; margin: 36px 0 26px; }
|
|
.tdot { display: flex; align-items: center; gap: 9px; font-family: "JetBrains Mono", monospace; font-size: 17px; color: #9a9aad; }
|
|
.tdot i { width: 15px; height: 15px; border-radius: 50%; }
|
|
.sources { font-family: "JetBrains Mono", monospace; font-size: 20px; color: #8a8a9d; }
|
|
.sources b { color: #34d399; }
|
|
.url { position: absolute; bottom: 48px; right: 82px; font-family: "JetBrains Mono", monospace; font-size: 21px; color: #5b5b75; }
|
|
</style></head><body>
|
|
<div class="wrap">
|
|
<div class="brand"><span class="mark">◉</span><span class="name">OVERWATCH</span></div>
|
|
<div class="tag">Passive surveillance detection for Android. Flag nearby <b>Flock ALPRs</b>, <b>Axon body cams</b> & <b>police</b> — <b>it only listens.</b></div>
|
|
<div class="tiers">
|
|
<span class="tdot"><i style="background:#22c55e;box-shadow:0 0 12px #22c55e"></i>GREEN</span>
|
|
<span class="tdot"><i style="background:#eab308;box-shadow:0 0 12px #eab308"></i>YELLOW</span>
|
|
<span class="tdot"><i style="background:#f97316;box-shadow:0 0 12px #f97316"></i>ORANGE</span>
|
|
<span class="tdot"><i style="background:#ef4444;box-shadow:0 0 12px #ef4444"></i>RED</span>
|
|
</div>
|
|
<div class="sources">BLE · WiFi · <b>DeFlock</b> · Citizen · Waze — six sensors, fused</div>
|
|
</div>
|
|
<div class="url">overwatch.netslum.io</div>
|
|
</body></html>
|