Strip to the bone — mystery first, no backstory
Remove all explainer sections. Hero is coordinates + 3 lines. Dash mock moves into hero as right-column visual. Transmissions are the whole story. Let it breathe. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
81
index.html
81
index.html
@ -3,8 +3,8 @@
|
|||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<title>Project Blindspot — Something is running the streets of Philadelphia</title>
|
<title>Project Blindspot — Philadelphia</title>
|
||||||
<meta name="description" content="An unregistered vehicle has been documented across Philadelphia since early 2024. It broadcasts live telemetry from inside the car. The footage doesn't explain itself.">
|
<meta name="description" content="Something is running the streets of Philadelphia. We have the footage.">
|
||||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||||
<link href="https://fonts.googleapis.com/css2?family=Rajdhani:wght@400;600;700&family=Inter:wght@300;400;500&family=Space+Mono:ital,wght@0,400;0,700;1,400&display=swap" rel="stylesheet">
|
<link href="https://fonts.googleapis.com/css2?family=Rajdhani:wght@400;600;700&family=Inter:wght@300;400;500&family=Space+Mono:ital,wght@0,400;0,700;1,400&display=swap" rel="stylesheet">
|
||||||
@ -47,81 +47,24 @@
|
|||||||
<span class="wordmark-name">BLINDSPOT</span>
|
<span class="wordmark-name">BLINDSPOT</span>
|
||||||
</div>
|
</div>
|
||||||
<nav class="nav">
|
<nav class="nav">
|
||||||
<a href="#about">Sightings</a>
|
|
||||||
<a href="#archive">The Broadcasts</a>
|
|
||||||
<a href="#transmissions">Transmissions</a>
|
<a href="#transmissions">Transmissions</a>
|
||||||
<a href="#tune-in" class="nav-cta">Report</a>
|
<a href="#tune-in" class="nav-cta">Tune In</a>
|
||||||
</nav>
|
</nav>
|
||||||
</div>
|
</div>
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
<section class="hero">
|
<section class="hero">
|
||||||
<div class="container">
|
<div class="container hero-inner">
|
||||||
<div class="hero-tag">PHILADELPHIA · ONGOING · UNVERIFIED</div>
|
<div class="hero-text">
|
||||||
|
<div class="hero-tag">39.9526° N · 75.1652° W · 03:14</div>
|
||||||
<h1 class="hero-title">
|
<h1 class="hero-title">
|
||||||
Something is<br>
|
Something is<br>
|
||||||
running the streets.<br>
|
running the streets.<br>
|
||||||
<span class="accent">The footage doesn't lie.</span>
|
<span class="accent">We have the footage.</span>
|
||||||
</h1>
|
</h1>
|
||||||
<p class="hero-sub">
|
<a href="#transmissions" class="btn-primary">See the Transmissions</a>
|
||||||
An unregistered vehicle has been documented across Philadelphia since early 2024.
|
|
||||||
It appears without warning. It disappears the same way. Whoever is inside that
|
|
||||||
car built a broadcast rig — live telemetry, four cameras, signal going out in
|
|
||||||
real time. We don't know who. We don't know why.
|
|
||||||
</p>
|
|
||||||
<a href="#transmissions" class="btn-primary">See the Evidence</a>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="hero-grid" aria-hidden="true"></div>
|
<div class="hero-dash" aria-hidden="true">
|
||||||
</section>
|
|
||||||
|
|
||||||
<section class="features" id="about">
|
|
||||||
<div class="container">
|
|
||||||
<div class="section-label">DOCUMENTED SIGHTINGS — WHAT WE KNOW</div>
|
|
||||||
<div class="feature-grid">
|
|
||||||
<div class="feature-card">
|
|
||||||
<div class="feature-icon">⬡</div>
|
|
||||||
<h3>The Vehicle</h3>
|
|
||||||
<p>A modified sports car. No consistent registration. No plates that check out. First picked up on a dashcam on Girard Avenue, February 2024, at 3am. It's been seen from Kensington to the Navy Yard. Surveillance cameras lose it within four seconds. We don't know why.</p>
|
|
||||||
</div>
|
|
||||||
<div class="feature-card">
|
|
||||||
<div class="feature-icon">⬡</div>
|
|
||||||
<h3>The Signal</h3>
|
|
||||||
<p>Whoever is in that car built something sophisticated. An OBS broadcast rig reading live OBD-II telemetry — speed, RPM, lateral g-force, heading — overlaid on four dashcam angles. The streams go out without notice. They end without explanation. We've been archiving them.</p>
|
|
||||||
</div>
|
|
||||||
<div class="feature-card">
|
|
||||||
<div class="feature-icon">⬡</div>
|
|
||||||
<h3>The Community</h3>
|
|
||||||
<p>There are people in this archive. Some have seen it in person. Some have footage they can't explain. Some found us through the transmissions. None of us fully agree on what we're looking at. We post everything anyway.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<section class="platform-section" id="archive">
|
|
||||||
<div class="container platform-inner">
|
|
||||||
<div class="platform-text">
|
|
||||||
<div class="section-label">THE BROADCASTS — TECHNICAL NOTES</div>
|
|
||||||
<h2>It's broadcasting.<br>From inside the car.</h2>
|
|
||||||
<p>
|
|
||||||
We've reverse-engineered enough of the setup to understand what we're seeing.
|
|
||||||
The rig runs OBS with a live WebSocket connection to the car's OBD-II data bus.
|
|
||||||
Speed, RPM, lateral g-force, heading — rendered in real time over four dashcam
|
|
||||||
feeds. The broadcast goes out whenever the car moves.
|
|
||||||
</p>
|
|
||||||
<p>
|
|
||||||
Whoever built this knew what they were doing. The overlay system is clean,
|
|
||||||
the telemetry is accurate, and the camera composite is deliberate. This is
|
|
||||||
not a dashcam. This is a cockpit. Someone designed it to be watched.
|
|
||||||
</p>
|
|
||||||
<ul class="platform-list">
|
|
||||||
<li>OBD-II / ELM327 live telemetry confirmed</li>
|
|
||||||
<li>OBS WebSocket overlay — custom build</li>
|
|
||||||
<li>Four-angle dashcam composite</li>
|
|
||||||
<li>Streams archived on first detection</li>
|
|
||||||
<li>Plugin architecture — unknown purpose</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
<div class="platform-visual" aria-hidden="true">
|
|
||||||
<div class="dash-mock">
|
<div class="dash-mock">
|
||||||
<div class="dash-header">
|
<div class="dash-header">
|
||||||
<span class="dash-title">BLINDSPOT / COCKPIT v0.9</span>
|
<span class="dash-title">BLINDSPOT / COCKPIT v0.9</span>
|
||||||
@ -156,13 +99,12 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="hero-grid" aria-hidden="true"></div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section class="transmissions-section" id="transmissions">
|
<section class="transmissions-section" id="transmissions">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<div class="section-label">TRANSMISSIONS — ONGOING</div>
|
<div class="section-label">TRANSMISSIONS — ONGOING</div>
|
||||||
<h2>The archive is open.</h2>
|
|
||||||
<p class="transmissions-intro">The car runs. The signal goes out. These are the excerpts we've been able to document. Timestamps are approximate. We can't verify all of them. We're posting them anyway.</p>
|
|
||||||
|
|
||||||
<div class="transmission-log">
|
<div class="transmission-log">
|
||||||
|
|
||||||
@ -233,9 +175,8 @@
|
|||||||
|
|
||||||
<section class="join-section" id="tune-in">
|
<section class="join-section" id="tune-in">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<div class="section-label">TUNE IN — FIND THE FREQUENCY</div>
|
<div class="section-label">TUNE IN</div>
|
||||||
<h2>New transmissions land<br>when the car runs.</h2>
|
<h2>New transmissions land<br>when the car runs.</h2>
|
||||||
<p>If you've seen it — footage, a sighting, an encounter you can't explain — post it to the archive. Or drop your frequency and we'll reach you when the signal goes out.</p>
|
|
||||||
<form class="join-form" action="#" method="post">
|
<form class="join-form" action="#" method="post">
|
||||||
<input type="email" name="email" placeholder="your frequency // email" required autocomplete="email">
|
<input type="email" name="email" placeholder="your frequency // email" required autocomplete="email">
|
||||||
<button type="submit" class="btn-primary">Tune In</button>
|
<button type="submit" class="btn-primary">Tune In</button>
|
||||||
|
|||||||
44
style.css
44
style.css
@ -179,10 +179,24 @@ h1, h2, h3 {
|
|||||||
/* ---- Hero ---- */
|
/* ---- Hero ---- */
|
||||||
.hero {
|
.hero {
|
||||||
position: relative;
|
position: relative;
|
||||||
padding: 100px 0 90px;
|
padding: 90px 0 80px;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.hero-inner {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1fr 1fr;
|
||||||
|
gap: 64px;
|
||||||
|
align-items: center;
|
||||||
|
position: relative;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-dash {
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-end;
|
||||||
|
}
|
||||||
|
|
||||||
.hero-grid {
|
.hero-grid {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
inset: 0;
|
inset: 0;
|
||||||
@ -223,12 +237,10 @@ h1, h2, h3 {
|
|||||||
color: var(--white);
|
color: var(--white);
|
||||||
}
|
}
|
||||||
|
|
||||||
.hero-sub {
|
.hero-text {
|
||||||
font-size: 1.05rem;
|
display: flex;
|
||||||
color: var(--gray-mid);
|
flex-direction: column;
|
||||||
max-width: 520px;
|
align-items: flex-start;
|
||||||
margin-bottom: 36px;
|
|
||||||
line-height: 1.75;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-primary {
|
.btn-primary {
|
||||||
@ -472,20 +484,6 @@ h1, h2, h3 {
|
|||||||
border-top: 1px solid var(--border);
|
border-top: 1px solid var(--border);
|
||||||
}
|
}
|
||||||
|
|
||||||
.transmissions-section h2 {
|
|
||||||
font-size: clamp(1.8rem, 3.5vw, 2.6rem);
|
|
||||||
margin-bottom: 12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.transmissions-intro {
|
|
||||||
font-size: 0.92rem;
|
|
||||||
color: var(--gray-mid);
|
|
||||||
max-width: 540px;
|
|
||||||
line-height: 1.75;
|
|
||||||
margin-bottom: 48px;
|
|
||||||
font-style: italic;
|
|
||||||
}
|
|
||||||
|
|
||||||
.transmission-log {
|
.transmission-log {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
@ -671,11 +669,13 @@ h1, h2, h3 {
|
|||||||
|
|
||||||
/* ---- Responsive ---- */
|
/* ---- Responsive ---- */
|
||||||
@media (max-width: 760px) {
|
@media (max-width: 760px) {
|
||||||
.platform-inner {
|
.hero-inner {
|
||||||
grid-template-columns: 1fr;
|
grid-template-columns: 1fr;
|
||||||
gap: 40px;
|
gap: 40px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.hero-dash { justify-content: flex-start; }
|
||||||
|
|
||||||
.nav a:not(.nav-cta) { display: none; }
|
.nav a:not(.nav-cta) { display: none; }
|
||||||
|
|
||||||
.join-form input[type="email"] { width: 100%; }
|
.join-form input[type="email"] { width: 100%; }
|
||||||
|
|||||||
Reference in New Issue
Block a user