From a45b33a87a886da5a402964123b9c5d3b21c70ee Mon Sep 17 00:00:00 2001 From: Stephen Groundwater Date: Sun, 4 Oct 2026 11:41:57 -0400 Subject: [PATCH] Initial commit: Project Blindspot landing page Gray/black/red automotive hacker platform landing page. Apache vhost + Let's Encrypt SSL configured. Co-Authored-By: Claude Sonnet 4.6 --- .gitignore | 4 + index.html | 147 +++++++++++++++++ style.css | 470 +++++++++++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 621 insertions(+) create mode 100644 .gitignore create mode 100644 index.html create mode 100644 style.css diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..c5e2967 --- /dev/null +++ b/.gitignore @@ -0,0 +1,4 @@ +.DS_Store +*.log +.env +.env.local diff --git a/index.html b/index.html new file mode 100644 index 0000000..3ca4f57 --- /dev/null +++ b/index.html @@ -0,0 +1,147 @@ + + + + + + Project Blindspot — OBS Cockpit & Crowdsourced Media for Sports Car Enthusiasts + + + + + + + + +
+
+
+ PROJECT + BLINDSPOT +
+ +
+
+ +
+
+
AUTOMOTIVE HACKER PLATFORM
+

+ Your car.
+ Your data.
+ Your broadcast. +

+

+ Project Blindspot is an OBS cockpit and crowdsourced media platform for sports car + enthusiasts. Stream your drives, overlay real-time telemetry, and connect with a + community of drivers who build their own experience. +

+ Request Early Access +
+ +
+ +
+
+
What it is
+
+
+
⬡
+

OBS Cockpit

+

A purpose-built OBS integration that pulls live vehicle data — speed, RPM, g-force, GPS — directly into your stream as overlays. No external hardware required.

+
+
+
⬡
+

Crowdsourced Media

+

Driver-generated footage, routes, and telemetry shared across the community. Discover canyon runs, track days, and backroads from enthusiasts worldwide.

+
+
+
⬡
+

Hacker-Friendly

+

Open architecture. Connect OBD-II adapters, GoPro feeds, external sensors. Build your own overlays with a documented plugin API. The cockpit is yours to configure.

+
+
+
+
+ +
+
+
+
The Platform
+

OBD-II meets the streaming stack.

+

+ Blindspot bridges the gap between your car's data bus and a professional + broadcast pipeline. OBD-II telemetry feeds into a local cockpit app that + talks directly to OBS via WebSocket — overlays update in real time as you drive. +

+

+ Clips, routes, and data get posted to a community feed where drivers can + compare telemetry, annotate footage, and build on each other's setups. +

+
    +
  • OBD-II / ELM327 adapter support
    • +
  • OBS WebSocket plugin integration
    • +
  • GPS track overlay & route replay
    • +
  • Community clip feed with telemetry
    • +
  • Open plugin API
    • +
+
+ +
+
+ +
+
+
Early Access
+

Built by enthusiasts, for enthusiasts.

+

Project Blindspot is in active development. Drop your email to get notified when early access opens and to shape what gets built.

+
+ + +
+

No spam. No pitch deck. Just updates when there's something real to show.

+
+
+ + + + + diff --git a/style.css b/style.css new file mode 100644 index 0000000..4d09aa3 --- /dev/null +++ b/style.css @@ -0,0 +1,470 @@ +/* ============================================================ + Project Blindspot — blindspot.fail + Color system: near-black bg / dark gray surfaces / red accent + ============================================================ */ + +:root { + --black: #0a0a0a; + --bg: #111113; + --surface: #1a1a1e; + --surface-hi: #222228; + --border: #2e2e36; + --gray-dim: #555566; + --gray-mid: #888899; + --gray-hi: #b0b0c0; + --white: #e8e8f0; + --red: #d42b2b; + --red-bright: #e83535; + --red-dim: #8a1a1a; + --red-glow: rgba(212, 43, 43, 0.18); +} + +/* ---- Reset ---- */ +*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } +html { scroll-behavior: smooth; } + +body { + font-family: 'Inter', sans-serif; + background: var(--bg); + color: var(--gray-hi); + line-height: 1.6; + font-size: 16px; + -webkit-font-smoothing: antialiased; +} + +/* ---- Layout ---- */ +.container { + max-width: 1080px; + margin: 0 auto; + padding: 0 24px; +} + +/* ---- Typography ---- */ +h1, h2, h3 { + font-family: 'Rajdhani', sans-serif; + font-weight: 700; + color: var(--white); + line-height: 1.15; + letter-spacing: 0.02em; +} + +.accent { color: var(--red-bright); } + +.section-label { + font-family: 'Rajdhani', sans-serif; + font-weight: 600; + font-size: 0.75rem; + letter-spacing: 0.2em; + text-transform: uppercase; + color: var(--red); + margin-bottom: 12px; +} + +/* ---- Header ---- */ +.site-header { + position: sticky; + top: 0; + z-index: 100; + background: rgba(10, 10, 10, 0.92); + backdrop-filter: blur(10px); + border-bottom: 1px solid var(--border); +} + +.site-header .container { + display: flex; + align-items: center; + justify-content: space-between; + height: 60px; +} + +.wordmark { + display: flex; + align-items: baseline; + gap: 6px; + text-decoration: none; +} + +.wordmark-project { + font-family: 'Rajdhani', sans-serif; + font-weight: 400; + font-size: 0.75rem; + letter-spacing: 0.2em; + color: var(--gray-mid); +} + +.wordmark-name { + font-family: 'Rajdhani', sans-serif; + font-weight: 700; + font-size: 1.15rem; + letter-spacing: 0.12em; + color: var(--white); +} + +.wordmark-sm .wordmark-name { font-size: 0.95rem; } +.wordmark-sm .wordmark-project { font-size: 0.65rem; } + +.nav { + display: flex; + align-items: center; + gap: 28px; +} + +.nav a { + font-family: 'Rajdhani', sans-serif; + font-weight: 600; + font-size: 0.85rem; + letter-spacing: 0.1em; + text-transform: uppercase; + color: var(--gray-mid); + text-decoration: none; + transition: color 0.15s; +} + +.nav a:hover { color: var(--white); } + +.nav-cta { + color: var(--red) !important; + border: 1px solid var(--red-dim); + padding: 6px 16px; + border-radius: 3px; + transition: background 0.15s, color 0.15s !important; +} + +.nav-cta:hover { + background: var(--red-glow); + color: var(--red-bright) !important; +} + +/* ---- Hero ---- */ +.hero { + position: relative; + padding: 100px 0 90px; + overflow: hidden; +} + +.hero-grid { + position: absolute; + inset: 0; + background-image: + linear-gradient(var(--border) 1px, transparent 1px), + linear-gradient(90deg, var(--border) 1px, transparent 1px); + background-size: 48px 48px; + opacity: 0.35; + pointer-events: none; + mask-image: radial-gradient(ellipse 80% 100% at 50% 0%, black 40%, transparent 100%); +} + +.hero-tag { + font-family: 'Rajdhani', sans-serif; + font-weight: 600; + font-size: 0.7rem; + letter-spacing: 0.25em; + text-transform: uppercase; + color: var(--red); + margin-bottom: 20px; + display: inline-flex; + align-items: center; + gap: 8px; +} + +.hero-tag::before { + content: ''; + display: block; + width: 24px; + height: 1px; + background: var(--red); +} + +.hero-title { + font-size: clamp(2.6rem, 6vw, 4.4rem); + line-height: 1.1; + max-width: 640px; + margin-bottom: 24px; + color: var(--white); +} + +.hero-sub { + font-size: 1.05rem; + color: var(--gray-mid); + max-width: 520px; + margin-bottom: 36px; + line-height: 1.7; +} + +.btn-primary { + display: inline-block; + font-family: 'Rajdhani', sans-serif; + font-weight: 700; + font-size: 0.9rem; + letter-spacing: 0.14em; + text-transform: uppercase; + color: var(--white); + background: var(--red); + border: none; + padding: 13px 32px; + border-radius: 3px; + text-decoration: none; + cursor: pointer; + transition: background 0.15s, transform 0.1s; +} + +.btn-primary:hover { + background: var(--red-bright); + transform: translateY(-1px); +} + +.btn-primary:active { transform: translateY(0); } + +/* ---- Features ---- */ +.features { + padding: 90px 0; + border-top: 1px solid var(--border); +} + +.feature-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); + gap: 24px; + margin-top: 16px; +} + +.feature-card { + background: var(--surface); + border: 1px solid var(--border); + border-top: 2px solid var(--red-dim); + padding: 28px 24px; + border-radius: 4px; + transition: border-color 0.15s, background 0.15s; +} + +.feature-card:hover { + border-top-color: var(--red); + background: var(--surface-hi); +} + +.feature-icon { + color: var(--red); + font-size: 1.2rem; + margin-bottom: 14px; + opacity: 0.8; +} + +.feature-card h3 { + font-size: 1.15rem; + letter-spacing: 0.06em; + margin-bottom: 10px; + color: var(--white); +} + +.feature-card p { + font-size: 0.9rem; + color: var(--gray-mid); + line-height: 1.65; +} + +/* ---- Platform Section ---- */ +.platform-section { + padding: 90px 0; + border-top: 1px solid var(--border); + background: linear-gradient(180deg, var(--bg) 0%, var(--surface) 100%); +} + +.platform-inner { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 64px; + align-items: center; +} + +.platform-text h2 { + font-size: clamp(1.6rem, 3vw, 2.2rem); + margin-bottom: 20px; +} + +.platform-text p { + font-size: 0.95rem; + color: var(--gray-mid); + line-height: 1.75; + margin-bottom: 16px; +} + +.platform-list { + list-style: none; + margin-top: 24px; + display: flex; + flex-direction: column; + gap: 10px; +} + +.platform-list li { + font-family: 'Rajdhani', sans-serif; + font-weight: 600; + font-size: 0.9rem; + letter-spacing: 0.05em; + color: var(--gray-hi); + display: flex; + align-items: center; + gap: 10px; +} + +.platform-list li::before { + content: ''; + display: block; + width: 6px; + height: 6px; + background: var(--red); + border-radius: 50%; + flex-shrink: 0; +} + +/* ---- Dashboard Mock ---- */ +.dash-mock { + background: var(--black); + border: 1px solid var(--border); + border-radius: 6px; + padding: 28px; + font-family: 'Rajdhani', sans-serif; + font-weight: 600; + box-shadow: 0 0 40px rgba(212, 43, 43, 0.08); +} + +.dash-row { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 16px; + margin-bottom: 16px; +} + +.dash-gauge { + background: var(--surface); + border: 1px solid var(--border); + border-radius: 4px; + padding: 14px 16px; +} + +.dash-label { + font-size: 0.65rem; + letter-spacing: 0.2em; + color: var(--gray-dim); + margin-bottom: 6px; + text-transform: uppercase; +} + +.dash-value { + font-size: 1.5rem; + font-weight: 700; + color: var(--gray-hi); + letter-spacing: 0.05em; +} + +.dash-value.accent { color: var(--red-bright); } + +.dash-bar { + height: 4px; + background: var(--surface-hi); + border-radius: 2px; + margin-bottom: 16px; + overflow: hidden; +} + +.dash-bar-fill { + height: 100%; + width: 42%; + background: linear-gradient(90deg, var(--red-dim), var(--red-bright)); + border-radius: 2px; +} + +.dash-obs { + font-size: 0.7rem; + letter-spacing: 0.15em; + color: var(--red); + text-align: right; + display: flex; + align-items: center; + justify-content: flex-end; + gap: 4px; +} + +/* ---- Join Section ---- */ +.join-section { + padding: 100px 0; + border-top: 1px solid var(--border); + text-align: center; +} + +.join-section h2 { + font-size: clamp(1.6rem, 3vw, 2.4rem); + margin-bottom: 16px; +} + +.join-section p { + font-size: 0.95rem; + color: var(--gray-mid); + max-width: 500px; + margin: 0 auto 32px; +} + +.join-form { + display: flex; + gap: 12px; + justify-content: center; + flex-wrap: wrap; + margin-bottom: 16px; +} + +.join-form input[type="email"] { + font-family: 'Inter', sans-serif; + font-size: 0.95rem; + background: var(--surface); + border: 1px solid var(--border); + color: var(--white); + padding: 12px 20px; + border-radius: 3px; + width: 300px; + outline: none; + transition: border-color 0.15s; +} + +.join-form input[type="email"]::placeholder { color: var(--gray-dim); } +.join-form input[type="email"]:focus { border-color: var(--red-dim); } + +.join-note { + font-size: 0.8rem !important; + color: var(--gray-dim) !important; + margin-bottom: 0 !important; +} + +/* ---- Footer ---- */ +.site-footer { + border-top: 1px solid var(--border); + padding: 28px 0; +} + +.footer-inner { + display: flex; + align-items: center; + justify-content: space-between; +} + +.footer-copy { + font-size: 0.78rem; + color: var(--gray-dim); +} + +/* ---- Responsive ---- */ +@media (max-width: 760px) { + .platform-inner { + grid-template-columns: 1fr; + gap: 40px; + } + + .nav a:not(.nav-cta) { display: none; } + + .footer-inner { + flex-direction: column; + gap: 12px; + text-align: center; + } + + .join-form input[type="email"] { width: 100%; } +}