site: marketing-grade redesign with --explain showcase + animated hero

Full rewrite of docs/index.html + style.css + new app.js + OG card.

Hero
  - Animated gradient mesh background (3 drifting blurred blobs;
    respects prefers-reduced-motion).
  - Space Grotesk display wordmark with subtle white→gray gradient.
  - Eyebrow chip with pulsing dot showing current release.
  - Type-on-load install command with blinking cursor in a faux-terminal
    chrome (traffic-light dots, title bar, copy button).
  - Stats row that counts up from 0 on first paint: 31 modules, 10 KEV,
    119 detection rules, 88 tests.
  - Primary CTA + secondary 'See --explain in action' + GitHub link.

Trust strip
  - 'Grounded in authoritative sources' row: CISA KEV, NVD CVE API,
    MITRE ATT&CK, kernel.org stable tree, Debian Security Tracker,
    NIST CWE. Establishes the federal-data-source provenance.

--explain showcase (flagship section)
  - Big terminal mockup that types out a real --explain nf_tables run
    line-by-line on scroll-into-view (45-95ms per line, easing).
  - Four annotation cards explaining each part: triage metadata,
    host fingerprint, detect() trace, OPSEC footprint.

Bento grid (8 feature cards in a varied 3-col layout)
  - Auto-pick safest exploit (large card with code sample)
  - 119 detection rules (with animated per-format coverage bars)
  - CISA KEV prioritized (red-accented)
  - OPSEC notes per exploit
  - One host fingerprint, every module (large card with struct excerpt)
  - JSON for pipelines
  - No SaaS, no telemetry
  - Verifier ready (Vagrant + Parallels)

Module corpus
  - Same green/yellow split as before, but every KEV-listed module pill
    now carries a ★ prefix + red-tinted border so 'actively exploited
    in the wild' is visible at a glance.

Audience
  - 4 colored cards (red/blue/gray/purple) — pentesters, SOC, sysadmins,
    researchers — each with a deep link to the right doc.

Verified-vs-claimed honesty callout
  - Featured gradient-bordered card restating the no-fabricated-offsets
    bar. ✓ icon, project's defining trust claim.

Quickstart
  - Tabbed: install / scan / explain / auto / detect-rules. Each tab is
    a short, copy-ready snippet with inline comments.

Roadmap timeline
  - Three columns: shipped / in flight / next. Shipped lists every
    feature from the last several sessions (--explain, OPSEC, CWE/
    ATT&CK/KEV pipeline, 119 rules, host refactor, 88 tests, drift
    detector, VM scaffold). Next lists arm64 musl, mass-fleet
    aggregator, SIEM query templates, CI hardening.

Footer
  - Four-column gradient footer (Brand / Project / Docs / Ethics) +
    bottom bar with credits to original PoC authors + license + repo
    link.

Tech
  - Typography: Inter (UI) + JetBrains Mono (code) + Space Grotesk
    (display wordmark), all via Google Fonts with display=swap.
  - Palette: deep purple-tinted dark (#07070d) + emerald accent
    (#10b981) + cyan secondary (#06b6d4) + KEV-red (#ef4444) +
    violet (#a855f7) for threat-intel framing.
  - CSS: ~28KB unminified, custom-properties driven; gracefully
    degrades to single-column on every grid section at narrow widths.
  - JS: ~8KB vanilla, no frameworks. Respects prefers-reduced-motion
    everywhere. IntersectionObserver-driven scroll reveal and
    stat-count-up.
  - OG image: hand-authored SVG → rsvg-convert → 1200x630 PNG
    (121KB). Renders cleanly when shared on Twitter/LinkedIn/Slack.
  - 4 new files: app.js, og.svg, og.png; rewrites: index.html, style.css.

Refreshed content:
  - v0.5.0 → v0.6.0 throughout.
  - '28 verified modules' → 31.
  - Adds KEV cross-ref, --explain, OPSEC, ATT&CK/CWE callouts that
    didn't exist in the previous version.

HTML structure validated balanced (Python html.parser smoke test).

This commit is contained in:

KaraZajac

2026-05-23 11:42:56 -04:00

parent 554a58757e

commit 5071ad4ba9

5 changed files with 1707 additions and 380 deletions

docs/style.css

+908 -190

View File

File diff suppressed because it is too large Load Diff