diff --git a/docs/index.html b/docs/index.html index ec3a92f..b935ff8 100644 --- a/docs/index.html +++ b/docs/index.html @@ -16,6 +16,9 @@ --cta-color: #aaa; --cta-hover: #f0f0f0; --cta-border: #444; --cta-border-hover: #777; --link-color: #888; --link-hover: #ccc; --link-border: #444; --link-border-hover: #777; --dl-color: #4e7fff; --ul-color: #34c759; + --screenshot-border: #1a1a1a; --img-shadow: none; + --node-color: rgba(255,255,255,0.35); --edge-color: rgba(255,255,255,0.06); + --pulse-dl: rgba(78,127,255,0.7); --pulse-ul: rgba(52,199,89,0.7); color-scheme: dark; } @@ -27,6 +30,9 @@ --scanline: rgba(0,0,0,0.006); --note-num: #e8e6e0; --cta-color: #555; --cta-hover: #111; --cta-border: #bbb; --cta-border-hover: #666; --link-color: #666; --link-hover: #222; --link-border: #bbb; --link-border-hover: #666; + --screenshot-border: #ddd; --img-shadow: 0 2px 16px rgba(0,0,0,0.08); + --node-color: rgba(0,0,0,0.25); --edge-color: rgba(0,0,0,0.05); + --pulse-dl: rgba(78,127,255,0.6); --pulse-ul: rgba(52,199,89,0.6); color-scheme: light; } @@ -39,6 +45,9 @@ --scanline: rgba(0,0,0,0.006); --note-num: #e8e6e0; --cta-color: #555; --cta-hover: #111; --cta-border: #bbb; --cta-border-hover: #666; --link-color: #666; --link-hover: #222; --link-border: #bbb; --link-border-hover: #666; + --screenshot-border: #ddd; --img-shadow: 0 2px 16px rgba(0,0,0,0.08); + --node-color: rgba(0,0,0,0.25); --edge-color: rgba(0,0,0,0.05); + --pulse-dl: rgba(78,127,255,0.6); --pulse-ul: rgba(52,199,89,0.6); color-scheme: light; } } @@ -87,7 +96,9 @@ .divider { border: none; border-top: 1px solid var(--border); margin: 0; transition: border-color 0.3s; } /* HERO */ - .hero { padding-top: 100px; padding-bottom: 80px; } + .hero { + padding-top: 100px; padding-bottom: 80px; + } .hero-overline { font-size: 14px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-faint); margin-bottom: 20px; } .hero h1 { font-family: Georgia, 'Times New Roman', serif; font-size: clamp(52px, 9vw, 112px); @@ -96,15 +107,11 @@ .hero h1 em { font-weight: 400; font-style: italic; color: var(--text-muted); } .hero-desc { font-size: 20px; color: var(--text-muted); max-width: 520px; line-height: 1.6; margin-bottom: 44px; } - /* Menu bar mock */ - .menubar-mock { - display: inline-flex; align-items: center; gap: 12px; - padding: 8px 16px; background: rgba(20,20,20,0.8); border: 1px solid rgba(255,255,255,0.07); - border-radius: 12px; backdrop-filter: blur(20px); font-family: 'SF Mono', Menlo, monospace; - font-size: 14px; color: var(--text-secondary); transition: background 0.3s, border-color 0.3s; + /* Network topology */ + #topology-canvas { + width: 100%; height: 320px; + display: block; } - .mock-dl { color: var(--dl-color); } - .mock-ul { color: var(--ul-color); } /* TRACKLIST */ .tracklist { padding: 72px 0; } @@ -116,6 +123,41 @@ .track-desc { font-size: 17px; color: var(--text-muted); line-height: 1.55; } .track-duration { margin-left: auto; font-size: 16px; color: var(--text-ghost); font-variant-numeric: tabular-nums; flex-shrink: 0; padding-left: 16px; } + /* SCREENSHOTS */ + .screenshots { padding: 72px 0; } + .screenshots-header { font-size: 14px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-faint); margin-bottom: 36px; } + .screenshots-grid { + display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 24px; align-items: start; + } + .screenshot { position: relative; cursor: pointer; transition: transform 0.2s, box-shadow 0.2s; } + .screenshot:hover { transform: translateY(-2px); } + .screenshot:hover img { box-shadow: 0 4px 20px rgba(0,0,0,0.15); } + .screenshot img { + width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: top; + border-radius: 8px; border: 1px solid var(--screenshot-border); + box-shadow: var(--img-shadow); display: block; transition: box-shadow 0.2s; + } + .screenshot-caption { + display: block; margin-top: 10px; font-size: 14px; color: var(--text-faint); + } + + /* LIGHTBOX */ + .lightbox { + position: fixed; inset: 0; z-index: 2000; + display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 16px; + background: rgba(0, 0, 0, 0.85); + opacity: 0; visibility: hidden; transition: opacity 0.25s, visibility 0.25s; + cursor: pointer; + } + .lightbox.open { opacity: 1; visibility: visible; } + .lightbox img { + max-width: 80vw; max-height: 80vh; border-radius: 10px; + box-shadow: 0 8px 40px rgba(0, 0, 0, 0.5); + transform: scale(0.95); transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1); + } + .lightbox.open img { transform: scale(1); } + .lightbox-caption { font-size: 16px; color: var(--text-secondary); text-align: center; } + /* LINER NOTES */ .liner-notes { padding: 72px 0; } .liner-notes-header { font-size: 14px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-faint); margin-bottom: 36px; } @@ -157,6 +199,11 @@ max-width: 960px; margin: 0 auto; transition: border-color 0.3s; } .footer-name { font-size: 14px; font-weight: 600; color: var(--text-faint); } + .footer-name a { + color: var(--link-color); text-decoration: none; border-bottom: 1px solid var(--link-border); + padding-bottom: 1px; transition: all 0.2s; + } + .footer-name a:hover { color: var(--link-hover); border-color: var(--link-border-hover); } .footer-right { font-size: 14px; color: var(--text-ghost); display: flex; gap: 16px; } .footer-right a { color: var(--text-faint); text-decoration: none; transition: color 0.2s; } .footer-right a:hover { color: var(--text-secondary); } @@ -175,11 +222,8 @@ .track { flex-wrap: wrap; gap: 4px 16px; } .track-title { min-width: unset; } .track-duration { margin-left: 48px; } + .screenshots-grid { grid-template-columns: 1fr 1fr; gap: 16px; } } - .screenshot-showcase { padding: 0 0 60px; text-align: center; } - .screenshot-img { max-width: 600px; width: 100%; border-radius: 12px; border: 1px solid var(--border); box-shadow: 0 8px 32px rgba(0,0,0,0.3); } - .feature-screenshot { max-width: 400px; width: 100%; border-radius: 8px; border: 1px solid var(--border); margin-top: 16px; box-shadow: 0 4px 16px rgba(0,0,0,0.2); } - @media (max-width: 768px) { .screenshot-img { max-width: 100%; } .feature-screenshot { max-width: 100%; } } @media (max-width: 480px) { .hero h1 { font-size: 44px; } .track-title { font-size: 19px; } @@ -206,32 +250,94 @@
macOS Network Monitor — Open Source

Spook

See what's talking on your Mac. Real-time traffic monitoring from your menu bar. Per-app breakdown, connection details, and history graphs.

-
- ↓ 1.2 MB/s - ↑ 340 KB/s -
- - -
- Spook app panel showing speed stats, traffic history, and per-app list +
+
Features
-
A1Menu Bar TrafficLive ↓/↑ speeds updating every second right in your menu bar.
Menu bar status item showing speeds1s
-
A2Per-App BreakdownSee exactly which apps are using your network and how much.
Per-app traffic breakdown listAll
-
B1Connection DetailsRemote IPs, ports, protocols, and reverse DNS hostnames for every connection.DNS
-
B2Traffic GraphsVisualize network usage over 1 hour, 24 hours, or 7 days with dynamic time labels.
Traffic history graph7d
-
C1Direction FilterToggle to focus on download-only or upload-only traffic.↓↑
-
C2Search & FreezeFind apps instantly with live search, freeze the list while inspecting rapidly changing entries.⚡
-
C3Pin ModeKeep the detail window visible while you work. Appears in Cmd+Tab when pinned.📌
+
+ A1 + Menu Bar Traffic + Live ↓/↑ speeds updating every second right in your menu bar. + 1s +
+ +
+ A2 + Per-App Breakdown + See exactly which apps are using your network and how much. + All +
+ +
+ B1 + Connection Details + Remote IPs, ports, protocols, and reverse DNS hostnames for every connection. + DNS +
+ +
+ B2 + Traffic Graphs + Visualize network usage over 1 hour, 24 hours, or 7 days with dynamic time labels. + 7d +
+ +
+ C1 + Direction Filter + Toggle to focus on download-only or upload-only traffic. + ↓↑ +
+ +
+ C2 + Search & Freeze + Find apps instantly with live search, freeze the list while inspecting rapidly changing entries. + ⚡ +
+ +
+ C3 + Pin Mode + Keep the detail window visible while you work. Appears in Cmd+Tab when pinned. + 📌 +
+ +
+
The App
+ +
+
+ Spook app panel showing speed stats, traffic history, and per-app list + Overview panel +
+
+ Speed overview showing download and upload rates + Speed readout +
+
+ Per-app traffic breakdown list + App breakdown +
+
+ Traffic history graph + Traffic history +
+
+
+ +
+ +
How It Works
@@ -290,15 +396,47 @@

Requirements

+ + +