← back to Bounce Studio
Build Bounce landing — six-skills productized web-studio funnel + local waitlist capture
3f82b4b7d8f85af1dea9990e1430436ae29f74e9 · 2026-07-13 15:23:26 -0700 · Steve
Files touched
M .gitignoreM BRIEF.mdM public/index.htmlM server.js
Diff
commit 3f82b4b7d8f85af1dea9990e1430436ae29f74e9
Author: Steve <steve@designerwallcoverings.com>
Date: Mon Jul 13 15:23:26 2026 -0700
Build Bounce landing — six-skills productized web-studio funnel + local waitlist capture
---
.gitignore | 1 +
BRIEF.md | 44 +++++++-
public/index.html | 324 +++++++++++++++++++++++++++++++++++++++++++++++++++++-
server.js | 74 +++++++++++--
4 files changed, 429 insertions(+), 14 deletions(-)
diff --git a/.gitignore b/.gitignore
index 1924158..8955433 100644
--- a/.gitignore
+++ b/.gitignore
@@ -6,3 +6,4 @@ tmp/
dist/
build/
.next/
+data/
diff --git a/BRIEF.md b/BRIEF.md
index 487e269..163991e 100644
--- a/BRIEF.md
+++ b/BRIEF.md
@@ -1,5 +1,39 @@
-# bounce-studio — brief
-- Client:
-- Outcome / "high value":
-- Constraints (brand, domain, deadline):
-- Reference / competitor URLs:
+# Bounce — brief
+
+**Seed:** [@bounceidc tweet, 2026-07-12](https://x.com/bounceidc/status/2076312794279125005)
+> "HE STARTED BILLING $15K A SITE THE MOMENT SIX SKILLS SAT IN HIS CLAUDE — same
+> claude everyone opens, but before he types a single word of a brief there are
+> six specialized skills already running in context, each one owning a piece of
+> the site, so the model never has to guess." (blue-verified, 61s video)
+
+- **Client / brand:** Bounce (@bounceidc) — personal brand selling a productized
+ web-dev *method*, not a SaaS. The pitch: premium websites built fast because
+ six specialized Claude skills are pre-loaded before the brief is even written.
+- **Outcome / "high value":** a conversion landing / funnel for a **$15K-a-site**
+ offer. Job of the page: make a skeptical founder believe the "six skills →
+ no-guessing → premium site" method is real, and book a call. Lead-gen for a
+ high-ticket service is the value.
+- **What we build:** a single-page marketing site — hero hook, the six-skills
+ system explained (each skill owns a piece of the build), the offer ($15K,
+ fixed, fast), how-it-works, a "proof it works before you see it" verify angle,
+ and a CTA (book / waitlist). Email capture posts to a local endpoint; no send.
+- **The six skills (mapped to the real ACCELERATOR.md pipeline, truthful):**
+ 1. **Brief** — turns a link into a scoped one-paragraph spec (Intake)
+ 2. **Direction** — picks the look from real references, not blind (Design)
+ 3. **Scaffold** — stands the gitified project up with house rules baked in
+ 4. **Build** — implements the brief through senior engineering
+ 5. **Verify** — six-way self-healing proof before anyone sees it
+ 6. **Launch** — one-switch-from-live, gated handoff
+- **Constraints:** brand = confident, terminal/AI-native, premium-but-plain
+ (the tweet's own voice: lowercase, direct, no fluff). No real domain yet.
+ Nothing deployed / public until Steve's go.
+- **House-rule note:** this is a marketing landing, not a product grid or admin
+ surface, so the sort+density-slider and admin-created-date rules don't apply
+ (they govern catalogs/admin cards). Standard rails still apply: gitified,
+ `.gitignore`, atomic commits, `$0 (local)` cost, deploy/DNS gated.
+
+## Status
+- [x] Intake + brief (this file)
+- [ ] Design direction + build landing
+- [ ] Local viewer + /5x verify
+- [ ] Stop for Steve's go before any deploy/DNS/publish
diff --git a/public/index.html b/public/index.html
index 2b90670..6ba4e78 100644
--- a/public/index.html
+++ b/public/index.html
@@ -1 +1,323 @@
-<!doctype html><meta charset=utf-8><title>bounce-studio</title><h1>bounce-studio — scaffolded</h1><p>Wire the grid (sort + density) and content here.</p>
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>Bounce — premium sites, before you write the brief</title>
+<meta name="description" content="Six specialized skills sit in the model before your brief is written — each one owns a piece of the site, so it never has to guess. Premium sites, $15k, fast.">
+<meta property="og:title" content="Bounce — six skills, one site, no guessing">
+<meta property="og:description" content="Same Claude everyone opens. But six specialized skills are already running in context before a word of the brief. $15k a site.">
+<meta name="theme-color" content="#0a0a0a">
+<style>
+ :root{
+ --bg:#0a0a0b; --bg2:#111114; --ink:#f2f2ee; --mut:#8a8a86; --line:#22222a;
+ --acc:#c6ff3a; --acc2:#7cf1c0; --warn:#ff9d5c;
+ --mono:"SFMono-Regular",ui-monospace,"JetBrains Mono",Menlo,Consolas,monospace;
+ --sans:-apple-system,BlinkMacSystemFont,"Inter","Segoe UI",Helvetica,Arial,sans-serif;
+ --max:1120px;
+ }
+ *{box-sizing:border-box}
+ html{scroll-behavior:smooth}
+ body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);
+ -webkit-font-smoothing:antialiased;line-height:1.55;letter-spacing:-.01em}
+ a{color:inherit}
+ .wrap{max-width:var(--max);margin:0 auto;padding:0 24px}
+ .mono{font-family:var(--mono);letter-spacing:0}
+ .acc{color:var(--acc)}
+ .mut{color:var(--mut)}
+ section{padding:96px 0;border-top:1px solid var(--line)}
+ h1,h2,h3{letter-spacing:-.03em;line-height:1.04;font-weight:640;margin:0}
+ .eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--acc);margin-bottom:18px;display:flex;gap:10px}
+
+ /* nav */
+ nav{position:sticky;top:0;z-index:40;background:rgba(10,10,11,.72);
+ backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
+ .navrow{display:flex;align-items:center;justify-content:space-between;height:60px}
+ .brand{display:flex;align-items:center;gap:10px;font-weight:700;font-size:17px}
+ .dot{width:11px;height:11px;border-radius:50%;background:var(--acc);
+ box-shadow:0 0 0 0 rgba(198,255,58,.55);animation:pulse 2.4s infinite}
+ @keyframes pulse{0%{box-shadow:0 0 0 0 rgba(198,255,58,.5)}70%{box-shadow:0 0 0 9px rgba(198,255,58,0)}100%{box-shadow:0 0 0 0 rgba(198,255,58,0)}}
+ .navlinks{display:flex;gap:26px;align-items:center;font-size:14px}
+ .navlinks a{color:var(--mut);text-decoration:none}
+ .navlinks a:hover{color:var(--ink)}
+ .btn{display:inline-flex;align-items:center;gap:8px;background:var(--acc);color:#0a0a0b;
+ font-weight:650;font-size:14px;padding:11px 18px;border-radius:10px;text-decoration:none;
+ border:1px solid var(--acc);transition:transform .12s ease,box-shadow .2s ease;cursor:pointer}
+ .btn:hover{transform:translateY(-1px);box-shadow:0 8px 30px -10px rgba(198,255,58,.6)}
+ .btn.ghost{background:transparent;color:var(--ink);border-color:var(--line)}
+ .btn.ghost:hover{border-color:var(--acc);box-shadow:none}
+ @media(max-width:720px){.navlinks a:not(.btn){display:none}}
+
+ /* hero */
+ .hero{padding:110px 0 72px;position:relative;overflow:hidden}
+ .hero::before{content:"";position:absolute;inset:0;
+ background:radial-gradient(60% 55% at 72% 8%,rgba(198,255,58,.10),transparent 60%),
+ radial-gradient(50% 50% at 8% 95%,rgba(124,241,192,.07),transparent 60%);
+ pointer-events:none}
+ .hgrid{display:grid;grid-template-columns:1.04fr .96fr;gap:52px;align-items:center;position:relative}
+ @media(max-width:900px){.hgrid{grid-template-columns:1fr;gap:34px}}
+ h1{font-size:clamp(38px,6.2vw,68px)}
+ .lede{color:var(--mut);font-size:clamp(17px,2vw,20px);max-width:34ch;margin:24px 0 30px}
+ .lede b{color:var(--ink);font-weight:600}
+ .cta-row{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
+ .trust{display:flex;gap:22px;margin-top:34px;flex-wrap:wrap;font-size:13px;color:var(--mut)}
+ .trust b{color:var(--ink);font-weight:640;font-family:var(--mono)}
+
+ /* terminal card */
+ .term{background:linear-gradient(180deg,#0e0e11,#0b0b0d);border:1px solid var(--line);
+ border-radius:16px;box-shadow:0 40px 90px -50px rgba(0,0,0,.9);overflow:hidden}
+ .term-bar{display:flex;align-items:center;gap:8px;padding:12px 14px;border-bottom:1px solid var(--line);
+ font-family:var(--mono);font-size:12px;color:var(--mut)}
+ .tl{width:11px;height:11px;border-radius:50%;background:#2a2a30}
+ .term-body{padding:18px 18px 20px;font-family:var(--mono);font-size:13px;line-height:1.9;overflow-x:auto}
+ .ln{white-space:pre-wrap}
+ .skill{color:var(--acc)}
+ .ok{color:var(--acc2)}
+ .cur{display:inline-block;width:8px;height:15px;background:var(--acc);vertical-align:-2px;
+ animation:blink 1.05s steps(1) infinite;margin-left:2px}
+ @keyframes blink{50%{opacity:0}}
+
+ /* skills grid */
+ .grid6{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:44px}
+ @media(max-width:860px){.grid6{grid-template-columns:repeat(2,1fr)}}
+ @media(max-width:560px){.grid6{grid-template-columns:1fr}}
+ .card{background:var(--bg2);border:1px solid var(--line);border-radius:14px;padding:22px;
+ position:relative;transition:border-color .2s ease,transform .2s ease}
+ .card:hover{border-color:#33333c;transform:translateY(-2px)}
+ .card .no{font-family:var(--mono);font-size:12px;color:var(--acc);letter-spacing:.05em}
+ .card h3{font-size:19px;margin:12px 0 8px}
+ .card p{margin:0;color:var(--mut);font-size:14.5px}
+ .owns{margin-top:14px;font-family:var(--mono);font-size:11.5px;color:var(--acc2);
+ border-top:1px dashed var(--line);padding-top:12px}
+
+ /* offer */
+ .offer{display:grid;grid-template-columns:1fr .9fr;gap:40px;align-items:center}
+ @media(max-width:860px){.offer{grid-template-columns:1fr}}
+ .price{font-family:var(--mono);font-size:clamp(52px,9vw,88px);font-weight:600;line-height:1;letter-spacing:-.04em}
+ .price small{font-size:20px;color:var(--mut);font-weight:400}
+ .ticks{list-style:none;padding:0;margin:26px 0 0;display:grid;gap:12px}
+ .ticks li{display:flex;gap:12px;align-items:flex-start;font-size:15.5px;color:#d9d9d4}
+ .ticks li::before{content:"→";color:var(--acc);font-family:var(--mono);flex:0 0 auto}
+ .panel{background:var(--bg2);border:1px solid var(--line);border-radius:16px;padding:28px}
+ .panel h3{font-size:18px;margin-bottom:6px}
+ .compare{display:grid;gap:0;margin-top:14px;font-size:14px}
+ .compare .row{display:grid;grid-template-columns:1fr auto;gap:14px;padding:11px 0;border-top:1px solid var(--line)}
+ .compare .row span:last-child{font-family:var(--mono)}
+ .bad{color:var(--warn)} .good{color:var(--acc2)}
+
+ /* steps */
+ .steps{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:40px;counter-reset:s}
+ @media(max-width:860px){.steps{grid-template-columns:repeat(2,1fr)}}
+ @media(max-width:480px){.steps{grid-template-columns:1fr}}
+ .step{border-left:2px solid var(--line);padding:4px 0 18px 18px;position:relative}
+ .step::before{counter-increment:s;content:counter(s,decimal-leading-zero);
+ font-family:var(--mono);font-size:12px;color:var(--acc);position:absolute;left:-1px;top:-2px;
+ background:var(--bg);padding:0 8px 0 2px}
+ .step h4{margin:22px 0 6px;font-size:16px}
+ .step p{margin:0;color:var(--mut);font-size:14px}
+
+ /* faq */
+ details{border-top:1px solid var(--line);padding:18px 0}
+ details summary{cursor:pointer;font-weight:600;font-size:17px;list-style:none;display:flex;justify-content:space-between;gap:16px}
+ details summary::-webkit-details-marker{display:none}
+ details summary::after{content:"+";color:var(--acc);font-family:var(--mono);font-size:22px;line-height:1}
+ details[open] summary::after{content:"–"}
+ details p{color:var(--mut);margin:14px 0 0;max-width:70ch}
+
+ /* cta / form */
+ .final{background:
+ radial-gradient(70% 120% at 50% 0%,rgba(198,255,58,.09),transparent 60%);
+ text-align:center}
+ .form{max-width:520px;margin:30px auto 0;display:grid;gap:12px;text-align:left}
+ .frow{display:flex;gap:10px;flex-wrap:wrap}
+ input,select,textarea{width:100%;background:var(--bg2);border:1px solid var(--line);color:var(--ink);
+ font-family:var(--sans);font-size:15px;padding:13px 15px;border-radius:10px;outline:none}
+ input:focus,select:focus,textarea:focus{border-color:var(--acc)}
+ .frow input{flex:1;min-width:200px}
+ .frow .btn{white-space:nowrap}
+ .msg{font-family:var(--mono);font-size:13px;min-height:18px;margin-top:6px;text-align:center}
+ .msg.ok{color:var(--acc2)} .msg.err{color:var(--warn)}
+ .fineprint{color:var(--mut);font-size:12px;margin-top:14px;text-align:center}
+
+ footer{border-top:1px solid var(--line);padding:40px 0;color:var(--mut);font-size:13px}
+ .frow2{display:flex;justify-content:space-between;flex-wrap:wrap;gap:16px;align-items:center}
+ .reveal{opacity:0;transform:translateY(14px);transition:opacity .6s ease,transform .6s ease}
+ .reveal.in{opacity:1;transform:none}
+ @media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}.dot,.cur{animation:none}}
+</style>
+</head>
+<body>
+
+<nav>
+ <div class="wrap navrow">
+ <div class="brand"><span class="dot"></span>bounce<span class="mut mono" style="font-size:13px;font-weight:500">/idc</span></div>
+ <div class="navlinks">
+ <a href="#system">the system</a>
+ <a href="#offer">offer</a>
+ <a href="#how">how</a>
+ <a href="#faq">faq</a>
+ <a class="btn" href="#start">start a build</a>
+ </div>
+ </div>
+</nav>
+
+<header class="hero">
+ <div class="wrap hgrid">
+ <div>
+ <div class="eyebrow">six skills · one site · zero guessing</div>
+ <h1>premium sites,<br>before you write<br>the <span class="acc">brief</span>.</h1>
+ <p class="lede">same claude everyone opens. but <b>six specialized skills are already running in context</b> before a single word of the brief — each one owns a piece of the site, so the model never has to guess.</p>
+ <div class="cta-row">
+ <a class="btn" href="#start">book a $15k build →</a>
+ <a class="btn ghost" href="#system">see the six skills</a>
+ </div>
+ <div class="trust">
+ <span><b>~5 days</b> brief → launch-ready</span>
+ <span><b>6</b> skills pre-loaded</span>
+ <span><b>$15k</b> flat, per site</span>
+ </div>
+ </div>
+
+ <div class="term reveal" aria-hidden="true">
+ <div class="term-bar"><span class="tl"></span><span class="tl"></span><span class="tl"></span>
+ <span style="margin-left:8px">claude — context loaded</span></div>
+ <div class="term-body">
+<div class="ln mut"># before you type anything:</div>
+<div class="ln"><span class="ok">✓</span> <span class="skill">brief</span> <span class="mut">scopes the link → one-paragraph spec</span></div>
+<div class="ln"><span class="ok">✓</span> <span class="skill">direction</span> <span class="mut">picks the look from real refs</span></div>
+<div class="ln"><span class="ok">✓</span> <span class="skill">scaffold</span> <span class="mut">gitified project, house rules baked in</span></div>
+<div class="ln"><span class="ok">✓</span> <span class="skill">build</span> <span class="mut">implements the spec, senior-grade</span></div>
+<div class="ln"><span class="ok">✓</span> <span class="skill">verify</span> <span class="mut">six-way proof, self-heals</span></div>
+<div class="ln"><span class="ok">✓</span> <span class="skill">launch</span> <span class="mut">one switch from live</span></div>
+<div class="ln mut" style="margin-top:6px">context: <span class="acc">6/6 skills active</span></div>
+<div class="ln">brief> <span class="cur"></span></div>
+ </div>
+ </div>
+ </div>
+</header>
+
+<section id="system">
+ <div class="wrap">
+ <div class="eyebrow">the system</div>
+ <h2 style="font-size:clamp(28px,4vw,42px);max-width:20ch">the model doesn't guess. six skills each own a piece.</h2>
+ <p class="mut" style="max-width:58ch;margin-top:18px">everyone has the same model. the difference is what's <em>in the room</em> before the work starts. bounce pre-loads a specialist for every stage of the site — so nothing is improvised and nothing is left to a lucky prompt.</p>
+
+ <div class="grid6">
+ <div class="card reveal"><div class="no">SKILL 01</div><h3>brief</h3><p>turns a link, a screenshot, or two sentences into a scoped one-paragraph spec — the outcome, the constraints, the "high value." no build starts without it.</p><div class="owns">owns → what we're building</div></div>
+ <div class="card reveal"><div class="no">SKILL 02</div><h3>direction</h3><p>pulls real reference sites, not a blind guess. picks a look, a type system, a hero treatment — then locks it before a line of layout is written.</p><div class="owns">owns → how it looks</div></div>
+ <div class="card reveal"><div class="no">SKILL 03</div><h3>scaffold</h3><p>stands the project up in seconds — gitified, versioned, house rules baked in, a real server, the content shape already correct.</p><div class="owns">owns → the foundation</div></div>
+ <div class="card reveal"><div class="no">SKILL 04</div><h3>build</h3><p>implements the spec at senior grade — components, state, responsiveness, accessibility — reusing what already works instead of reinventing it.</p><div class="owns">owns → the actual code</div></div>
+ <div class="card reveal"><div class="no">SKILL 05</div><h3>verify</h3><p>proves it works before you ever see it: request, render, interact, and three real browsers — fixing what breaks on every sweep until it's clean.</p><div class="owns">owns → does it actually work</div></div>
+ <div class="card reveal"><div class="no">SKILL 06</div><h3>launch</h3><p>ships everything one switch from live. deploy, dns, and go-live stay in your hands — nothing goes public without your explicit say-so.</p><div class="owns">owns → the handoff</div></div>
+ </div>
+ </div>
+</section>
+
+<section id="offer">
+ <div class="wrap offer">
+ <div>
+ <div class="eyebrow">the offer</div>
+ <div class="price">$15k<small> / site · flat</small></div>
+ <ul class="ticks">
+ <li>a real, launch-ready site — not a mockup, not a template you finish yourself</li>
+ <li>brief to launch-ready in about a week, because the six skills don't stall</li>
+ <li>fixed price. you know the number before we start and it doesn't move</li>
+ <li>proven working across three real browsers before it ever reaches you</li>
+ <li>you own the code and you hold the deploy switch — full handoff</li>
+ </ul>
+ </div>
+ <div class="panel reveal">
+ <h3>why it's fast <span class="mut">(and still premium)</span></h3>
+ <p class="mut" style="margin:0;font-size:14px">the cost of a great site is usually the back-and-forth — guessing, redoing, re-explaining. bounce removes the guessing.</p>
+ <div class="compare">
+ <div class="row"><span>the usual agency</span><span class="bad">6–10 wks</span></div>
+ <div class="row"><span>a freelancer + your nights</span><span class="bad">who knows</span></div>
+ <div class="row"><span>a template you finish</span><span class="bad">still yours</span></div>
+ <div class="row"><span>bounce · six skills loaded</span><span class="good">~5 days</span></div>
+ </div>
+ </div>
+ </div>
+</section>
+
+<section id="how">
+ <div class="wrap">
+ <div class="eyebrow">how a build runs</div>
+ <h2 style="font-size:clamp(26px,3.6vw,38px)">you send a link. the room is already set.</h2>
+ <div class="steps">
+ <div class="step reveal"><h4>you drop a reference</h4><p>a site you like, your current one, or two sentences. that's the whole intake.</p></div>
+ <div class="step reveal"><h4>brief + direction lock</h4><p>the spec and the look are pinned before layout — so there's nothing to redo later.</p></div>
+ <div class="step reveal"><h4>scaffold → build → verify</h4><p>it's stood up, built, and proven across real browsers, fixing itself as it goes.</p></div>
+ <div class="step reveal"><h4>you get the switch</h4><p>a launch-ready site, the code, and the go-live in your hands. nothing public till you say.</p></div>
+ </div>
+ </div>
+</section>
+
+<section id="faq">
+ <div class="wrap" style="max-width:820px">
+ <div class="eyebrow">questions</div>
+ <h2 style="font-size:clamp(26px,3.6vw,38px);margin-bottom:22px">the honest answers</h2>
+ <details open><summary>is this just "chatgpt made my website"?</summary><p>no. the difference is the six skills that sit in context before the brief — a specialist owning each stage. the model isn't guessing its way through one giant prompt; it's running a pipeline that's been tuned on real sites. same model, completely different room.</p></details>
+ <details><summary>why $15k if a model does the work?</summary><p>you're paying for the system and the judgment around it, not keystrokes. the result is a launch-ready, browser-proven site in about a week, fixed-price, with no back-and-forth tax. that's the value — a great site, fast, at a number that doesn't move.</p></details>
+ <details><summary>what do you need from me?</summary><p>a reference and the outcome you want. that's the intake. the brief skill turns it into a spec; you approve the direction; the rest runs.</p></details>
+ <details><summary>who holds the keys?</summary><p>you do. deploy, domain, and go-live are never automatic — the build ships one switch from live and you flip it. you own the code outright.</p></details>
+ </div>
+</section>
+
+<section id="start" class="final">
+ <div class="wrap">
+ <div class="eyebrow" style="justify-content:center">start a build</div>
+ <h2 style="font-size:clamp(30px,5vw,52px)">send a link. get a site.</h2>
+ <p class="mut" style="max-width:46ch;margin:16px auto 0">tell us where to reach you and roughly what you're building. we'll come back with a scoped brief and a start date.</p>
+
+ <form class="form" id="wl" novalidate>
+ <div class="frow">
+ <input type="email" id="email" name="email" placeholder="you@company.com" autocomplete="email" required>
+ <button class="btn" type="submit">request a build →</button>
+ </div>
+ <select id="budget" name="budget" aria-label="what are you building">
+ <option value="">what are you building? (optional)</option>
+ <option>a new marketing site / landing</option>
+ <option>a rebuild of my current site</option>
+ <option>a product / app front-end</option>
+ <option>something else</option>
+ </select>
+ <textarea id="note" name="note" rows="2" placeholder="drop a reference link or a sentence (optional)"></textarea>
+ <div class="msg" id="msg" role="status" aria-live="polite"></div>
+ <div class="fineprint">no spam, no list. this goes straight to the build queue.</div>
+ </form>
+ </div>
+</section>
+
+<footer>
+ <div class="wrap frow2">
+ <div class="brand"><span class="dot"></span>bounce<span class="mut mono" style="font-size:12px;font-weight:500">/idc</span></div>
+ <div>six skills · one site · no guessing — built with the claude web-dev accelerator</div>
+ </div>
+</footer>
+
+<script>
+ // reveal-on-scroll
+ const io = new IntersectionObserver((es)=>es.forEach(e=>{if(e.isIntersecting){e.target.classList.add('in');io.unobserve(e.target)}}),{threshold:.12});
+ document.querySelectorAll('.reveal').forEach(el=>io.observe(el));
+
+ // waitlist -> local endpoint (no send)
+ const form = document.getElementById('wl');
+ const msg = document.getElementById('msg');
+ form.addEventListener('submit', async (ev)=>{
+ ev.preventDefault();
+ const email = document.getElementById('email').value.trim();
+ const budget = document.getElementById('budget').value;
+ const note = document.getElementById('note').value.trim();
+ msg.className='msg'; msg.textContent='';
+ if(!/^[^@\s]+@[^@\s]+\.[^@\s]+$/.test(email)){ msg.className='msg err'; msg.textContent='that email looks off — check it?'; return; }
+ msg.textContent='sending…';
+ try{
+ const r = await fetch('/api/waitlist',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({email,budget,note})});
+ const j = await r.json();
+ if(j.ok){ msg.className='msg ok'; msg.textContent="you're in the queue. we'll be in touch with a scoped brief."; form.reset(); }
+ else { msg.className='msg err'; msg.textContent = j.error || 'something went wrong — try again.'; }
+ }catch(_){ msg.className='msg err'; msg.textContent='network hiccup — try again.'; }
+ });
+</script>
+</body>
+</html>
diff --git a/server.js b/server.js
index 0040814..2a39fef 100644
--- a/server.js
+++ b/server.js
@@ -1,8 +1,66 @@
-// minimal static server; PORT=0 picks a free port. Replace with the real build.
-const http=require('http'),fs=require('fs'),path=require('path');
-const PORT=parseInt(process.env.PORT||'0',10);
-http.createServer((req,res)=>{const f=req.url==='/'?'index.html':req.url.split('?')[0].replace(/^\//,'');
- const fp=path.join(__dirname,'public',path.basename(f));
- if(fs.existsSync(fp)){res.writeHead(200,{'Content-Type':f.endsWith('.html')?'text/html':'text/plain'});return res.end(fs.readFileSync(fp));}
- res.writeHead(404);res.end('not found');
-}).listen(PORT,function(){console.log('['+require('path').basename(__dirname)+'] http://localhost:'+this.address().port);});
+// Bounce — productized web-studio landing.
+// Static server + local waitlist capture. NO outbound email/send (gated).
+// PORT=0 lets the OS pick a free port.
+const http = require('http');
+const fs = require('fs');
+const path = require('path');
+
+const PORT = parseInt(process.env.PORT || '0', 10);
+const PUB = path.join(__dirname, 'public');
+const DATA = path.join(__dirname, 'data');
+if (!fs.existsSync(DATA)) fs.mkdirSync(DATA, { recursive: true });
+
+const TYPES = {
+ '.html': 'text/html; charset=utf-8',
+ '.css': 'text/css; charset=utf-8',
+ '.js': 'application/javascript; charset=utf-8',
+ '.svg': 'image/svg+xml',
+ '.png': 'image/png',
+ '.jpg': 'image/jpeg',
+ '.webp': 'image/webp',
+ '.ico': 'image/x-icon',
+ '.json': 'application/json; charset=utf-8',
+ '.woff2': 'font/woff2',
+};
+
+function serveStatic(req, res) {
+ const clean = req.url.split('?')[0];
+ let rel = clean === '/' ? 'index.html' : clean.replace(/^\/+/, '');
+ // prevent path traversal, keep nested public/ assets working
+ const fp = path.normalize(path.join(PUB, rel));
+ if (!fp.startsWith(PUB)) { res.writeHead(403); return res.end('forbidden'); }
+ if (fs.existsSync(fp) && fs.statSync(fp).isFile()) {
+ res.writeHead(200, { 'Content-Type': TYPES[path.extname(fp)] || 'application/octet-stream' });
+ return res.end(fs.readFileSync(fp));
+ }
+ res.writeHead(404, { 'Content-Type': 'text/plain' });
+ res.end('not found');
+}
+
+const server = http.createServer((req, res) => {
+ // Local-only waitlist capture. Appends to data/waitlist.jsonl. No email is sent.
+ if (req.method === 'POST' && req.url === '/api/waitlist') {
+ let body = '';
+ req.on('data', (c) => { body += c; if (body.length > 1e4) req.destroy(); });
+ req.on('end', () => {
+ let email = '', note = '', budget = '';
+ try { const j = JSON.parse(body || '{}'); email = (j.email || '').trim(); note = (j.note || '').toString().slice(0, 500); budget = (j.budget || '').toString().slice(0, 40); } catch (_) {}
+ const ok = /^[^@\s]+@[^@\s]+\.[^@\s]+$/.test(email);
+ if (!ok) { res.writeHead(400, { 'Content-Type': 'application/json' }); return res.end(JSON.stringify({ ok: false, error: 'invalid email' })); }
+ const rec = { ts: new Date().toISOString(), email, budget, note, ua: (req.headers['user-agent'] || '').slice(0, 200) };
+ fs.appendFileSync(path.join(DATA, 'waitlist.jsonl'), JSON.stringify(rec) + '\n');
+ res.writeHead(200, { 'Content-Type': 'application/json' });
+ res.end(JSON.stringify({ ok: true }));
+ });
+ return;
+ }
+ if (req.method === 'GET' && req.url === '/healthz') {
+ res.writeHead(200, { 'Content-Type': 'application/json' });
+ return res.end(JSON.stringify({ ok: true, service: 'bounce-studio' }));
+ }
+ serveStatic(req, res);
+});
+
+server.listen(PORT, function () {
+ console.log('[bounce-studio] http://localhost:' + this.address().port);
+});
← b951d83 initial scaffold (bounce-studio) via web-dev accelerator
·
back to Bounce Studio
·
Sharpen six-skill copy to the real @bounceidc stack (from vi 5d77269 →