← back to Malden House
[overnight] pre-debate baseline
632d7062055faef2444fdc8d0b6ce79753d5ea2b · 2026-05-04 05:18:47 -0700 · SteveStudio2
Files touched
A CHANGES.mdA CHANGES2.mdA browse.cssA browse.htmlA browse.jsA dashboard.cssA dashboard.htmlA dashboard.jsA index.htmlA landing.cssA neighborhoods.jsA network.htmlA network.jsA rental.htmlA rental.jsA schedule.cssA schedule.htmlA schedule.jsA signup.jsA style.cssA test-e2e.jsA theme.js
Diff
commit 632d7062055faef2444fdc8d0b6ce79753d5ea2b
Author: SteveStudio2 <stevestudio2@SteveStacStudio.lan>
Date: Mon May 4 05:18:47 2026 -0700
[overnight] pre-debate baseline
---
CHANGES.md | 26 ++
CHANGES2.md | 19 ++
browse.css | 36 +++
browse.html | 64 ++++
browse.js | 74 +++++
dashboard.css | 133 +++++++++
dashboard.html | 107 +++++++
dashboard.js | 272 +++++++++++++++++
index.html | 256 ++++++++++++++++
landing.css | 225 ++++++++++++++
neighborhoods.js | 198 +++++++++++++
network.html | 319 ++++++++++++++++++++
network.js | 203 +++++++++++++
rental.html | 549 ++++++++++++++++++++++++++++++++++
rental.js | 800 ++++++++++++++++++++++++++++++++++++++++++++++++++
schedule.css | 77 +++++
schedule.html | 69 +++++
schedule.js | 131 +++++++++
signup.js | 436 +++++++++++++++++++++++++++
style.css | 874 +++++++++++++++++++++++++++++++++++++++++++++++++++++++
test-e2e.js | 79 +++++
theme.js | 59 ++++
22 files changed, 5006 insertions(+)
diff --git a/CHANGES.md b/CHANGES.md
new file mode 100644
index 0000000..d84b9c5
--- /dev/null
+++ b/CHANGES.md
@@ -0,0 +1,26 @@
+## Applied
+
+- `dashboard.js:17` — added a tiny HTML/attribute escaping helper — needed before using template `innerHTML` with stored records.
+- `dashboard.js:39` — escaped rental card fields, image attributes, slugs, chips, address text, and host names — prevents malicious `localStorage` records from injecting markup.
+- `dashboard.js:149` — escaped inquiry inbox names, email text, dates, events, street labels, and data attributes — prevents stored inquiry fields from rendering as HTML.
+- `dashboard.js:193` — escaped photo picker labels/values and photo `src` attributes — keeps stored rental/photo metadata inside attributes/text.
+- `browse.js:7` — added the same escaping helper — needed for the browse card renderer.
+- `browse.js:44` — escaped browse card image attributes, chip text, address/city fields, and host names; encoded the map query — prevents stored rental data injection.
+- `rental.js:35` — added HTML/attribute escaping helpers — needed for dynamic rental templates.
+- `rental.js:89` — escaped trailer and cover fields from stored address, host, and venue data — prevents injected markup during trailer playback.
+- `rental.js:329` — escaped the property card subline while preserving its `<br>` layout — prevents address/county markup injection.
+- `rental.js:383` — escaped nearest-venue headline, name, sports, drive minutes, and date chip fields — prevents venue string injection in the event grid.
+- `rental.js:503` — escaped drive-meta minutes, contact heading host name, footer host name, countdown banner text, closest-event text, and inquiry thank-you fields — closes remaining touched `innerHTML` paths fed by stored/user data.
+
+## Deferred (needs Steve)
+
+- P0 — `signup.js:217` — email verification is hardcoded as `verified: true` — requires backend accounts, signed email tokens, and ownership rules.
+- P0 — `rental.js:735` — guest inquiries save only to visitor `localStorage` — needs backend/email delivery and failure UX.
+- P0 — `network.js:33` — network viewer exposes IPs, hostnames, service names, and ports — removal/gating needs a deploy/access decision.
+- P0 — `signup.js:263` — demo seed contains Steve's real-looking contact/address fixture — content/PII cleanup needs Steve.
+- P1 — `signup.js:219` — slug collisions overwrite rentals — durable handling belongs with server-side claim rules.
+- P1 — `signup.js:9`, `rental.js:3` — schema mismatch wipes stored data — migration/backup behavior touches user data.
+- P1 — `dashboard.js:220` — photo uploads can exceed `localStorage` quota — storage migration is larger than a surgical safe fix.
+- P1 — `schedule.js:5` — venue data is duplicated — shared-data refactor is outside the safe list.
+- P1 — `test-e2e.js:12` — smoke test depends on live Nominatim and sleeps — test changes were out of scope.
+- P1 — `network.js:28` — `no-cors` polling can show false green health — needs a same-origin proxy or removal decision.
diff --git a/CHANGES2.md b/CHANGES2.md
new file mode 100644
index 0000000..ec7794b
--- /dev/null
+++ b/CHANGES2.md
@@ -0,0 +1,19 @@
+## Round 2 Applied
+
+- `dashboard.js:17` — changed `escapeHtml` to preserve numeric `0`, and added `formatMoney()` — fixes rereview concern that `String(s || "")` collapses zero values.
+- `dashboard.js:62` — escaped stored `r.price.mid` before card `innerHTML` insertion — fixes rereview missed call-site `dashboard.js:59`.
+- `browse.js:7` — changed `escapeHtml` to preserve numeric `0`, and added `formatMoney()` — fixes rereview concern that `String(s || "")` collapses zero values.
+- `browse.js:66` — escaped stored `r.price.mid` before browse card `innerHTML` insertion — fixes rereview missed call-site `browse.js:63`.
+- `rental.js:35` — changed `escapeHtml` to preserve numeric `0`, and added `formatMoney()` — fixes rereview concern/new issue around numeric display.
+- `rental.js:142` — escaped stored `price.mid` in trailer outro pricing — fixes rereview missed call-site `rental.js:139`.
+- `rental.js:424` — passed escaped `address.city` into dynamic guide heading templates while preserving intended `<br>` markup — fixes rereview missed call-site `rental.js:422`.
+- `rental.js:459` — passed escaped `address.city` into dynamic history heading templates while preserving intended `<br>` markup — fixes rereview missed call-site `rental.js:459`.
+- `rental.js:622` — escaped stored `price.mid`, `price.low`, `price.high`, and `baseline.base` in the price card — fixes rereview missed call-site `rental.js:619`.
+- `signup.js:147` — added HTML/attribute escaping helpers for signup dynamic HTML — supports the rereview signup and autocomplete findings.
+- `signup.js:240` — escaped submitted/geocoded signup status fields before `setStatus(...innerHTML...)` — fixes rereview missed call-site `signup.js:226`.
+- `signup.js:328` — escaped Nominatim autocomplete `data-val`, line 1, and line 2 fields before `innerHTML` insertion — fixes rereview missed call-site `signup.js:312`.
+
+## Still Deferred
+
+- No database schema, migrations, infrastructure, package, public copy/CSS, or real-secret changes were touched.
+- Broader XSS cleanup outside the specific rereview P0/BROKEN/concern list remains for Steve if desired.
diff --git a/browse.css b/browse.css
new file mode 100644
index 0000000..838a4c0
--- /dev/null
+++ b/browse.css
@@ -0,0 +1,36 @@
+/* browse.css — Victory Stays rental directory */
+.browse .l-nav-links a.active { color: var(--fg); font-weight: 700; }
+
+.br-hero { padding: 48px 56px 32px; display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; border-bottom: 1px solid var(--soft); }
+.br-hero h1 { font-family: var(--display); font-weight: 900; font-size: 64px; line-height: 1; letter-spacing: -0.03em; margin: 10px 0 12px; }
+.br-sub { font-family: var(--serif); font-size: 17px; line-height: 1.45; color: var(--muted); max-width: 56ch; margin: 0; }
+.br-sub b { color: var(--fg); }
+.br-filters { display: flex; flex-direction: column; gap: 14px; min-width: 340px; }
+.br-filters label { display: flex; flex-direction: column; gap: 6px; font-family: var(--body); font-size: 10px; letter-spacing: 0.22em; color: var(--muted); }
+.br-filters select { padding: 10px 14px; background: var(--bg); border: 1px solid var(--soft); font-family: var(--body); font-size: 14px; }
+.br-filters input[type=range] { width: 100%; }
+.br-filters b { font-family: var(--display); font-weight: 900; font-size: 18px; color: var(--fg); align-self: flex-end; }
+
+.br-grid-wrap { padding: 32px 56px 56px; }
+.br-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
+.br-card { display: flex; flex-direction: column; border: 1px solid var(--soft); background: var(--bg); transition: transform .12s ease, box-shadow .15s ease; color: inherit; }
+.br-card:hover { transform: translateY(-2px); box-shadow: 0 14px 40px rgba(0,0,0,.08); }
+.br-img { position: relative; height: 200px; overflow: hidden; background: #1a1a1a; }
+.br-img img, .br-img iframe { width: 100%; height: 100%; object-fit: cover; border: 0; display: block; }
+.br-chip { position: absolute; left: 12px; bottom: 12px; padding: 5px 10px; background: rgba(0,0,0,.7); color: #F4F1EC; backdrop-filter: blur(8px); font-family: var(--body); font-weight: 800; font-size: 10px; letter-spacing: 0.16em; }
+.br-body { padding: 16px 18px; display: flex; flex-direction: column; gap: 6px; }
+.br-addr { font-family: var(--display); font-weight: 900; font-size: 20px; letter-spacing: -0.01em; }
+.br-city { font-family: var(--serif); font-size: 14px; color: var(--muted); }
+.br-row { display: flex; justify-content: space-between; align-items: baseline; padding-top: 8px; border-top: 1px solid var(--soft); margin-top: 4px; }
+.br-row b { font-family: var(--display); font-weight: 900; font-size: 20px; }
+.br-row em { font-style: normal; font-size: 11px; letter-spacing: 0.1em; color: var(--muted); margin-left: 4px; }
+.br-host { font-family: var(--serif); font-style: italic; font-size: 13px; color: var(--muted); }
+.br-empty { padding: 60px; text-align: center; color: var(--muted); font-family: var(--serif); font-style: italic; font-size: 16px; }
+
+@media (max-width: 900px) {
+ .br-hero, .br-grid-wrap { padding-left: 24px; padding-right: 24px; }
+ .br-hero { flex-direction: column; align-items: stretch; }
+ .br-filters { min-width: 0; }
+ .br-grid { grid-template-columns: 1fr; }
+ .br-hero h1 { font-size: 44px; }
+}
diff --git a/browse.html b/browse.html
new file mode 100644
index 0000000..2d6401c
--- /dev/null
+++ b/browse.html
@@ -0,0 +1,64 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <title>Browse Rentals — Victory Stays</title>
+ <link rel="preconnect" href="https://fonts.googleapis.com">
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+ <link href="https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;700;800;900&family=EB+Garamond:ital,wght@0,400;1,400&family=Inter:wght@400;500;600;700;800;900&display=swap" rel="stylesheet">
+ <link rel="stylesheet" href="landing.css?v=10">
+ <link rel="stylesheet" href="browse.css?v=10">
+</head>
+<body class="browse">
+
+<nav class="l-nav">
+ <div class="l-brand">
+ <span class="l-dot"></span>
+ <span class="l-mark">VICTORY STAYS</span>
+ <span class="l-sub">Browse rentals · summer 2028</span>
+ </div>
+ <div class="l-nav-links">
+ <a href="index.html">Landing</a>
+ <a href="schedule.html">Schedule</a>
+ <a href="browse.html" class="active">Browse</a>
+ <a href="dashboard.html">Dashboard</a>
+ </div>
+ <a class="l-nav-cta" href="index.html#signup">List your home →</a>
+</nav>
+
+<header class="br-hero">
+ <div>
+ <div class="l-eyebrow accent">§ Every rental near the Games</div>
+ <h1>Find a home<br>for the Games.</h1>
+ <p class="br-sub">Hosts across Los Angeles open their doors from <b>July 14 to July 30, 2028</b>. Filter by the nearest venue, your budget, and your travel dates.</p>
+ </div>
+ <div class="br-filters">
+ <label>
+ <span>NEAREST VENUE</span>
+ <select id="br-venue"><option value="">All venues</option></select>
+ </label>
+ <label>
+ <span>NIGHTLY BUDGET (MAX)</span>
+ <input type="range" id="br-budget" min="200" max="5000" step="50" value="5000">
+ <b id="br-bv">$5,000</b>
+ </label>
+ </div>
+</header>
+
+<section class="br-grid-wrap">
+ <div class="br-grid" id="br-grid"></div>
+ <div class="br-empty" id="br-empty" hidden>
+ <p>No rentals match — try a broader budget or different venue.</p>
+ </div>
+</section>
+
+<footer class="l-footer">
+ <div class="l-foot-brand"><span class="l-dot"></span>VICTORY STAYS · NOT AFFILIATED WITH LA 2028</div>
+ <div class="l-foot-mid">All listings are private — guests contact hosts directly</div>
+ <div class="l-foot-credit">© 2028 · hello@victorystays.com</div>
+</footer>
+
+<script src="browse.js?v=10"></script>
+</body>
+</html>
diff --git a/browse.js b/browse.js
new file mode 100644
index 0000000..c77cdcb
--- /dev/null
+++ b/browse.js
@@ -0,0 +1,74 @@
+// browse.js — public rental directory, card grid from localStorage
+(function () {
+ function load() {
+ try { return JSON.parse(localStorage.getItem("htg.rentals") || "{}"); }
+ catch (e) { return {}; }
+ }
+ function escapeHtml(s) {
+ return String(s ?? "")
+ .replace(/&/g, "&")
+ .replace(/</g, "<")
+ .replace(/>/g, ">")
+ .replace(/"/g, """)
+ .replace(/'/g, "'");
+ }
+ const escapeAttr = escapeHtml;
+ function formatMoney(v) {
+ return v === null || v === undefined || v === "" ? "—" : escapeHtml(v.toLocaleString());
+ }
+ const all = Object.values(load());
+ const venues = [...new Set(all.flatMap(r => (r.nearest || []).slice(0,1).map(v => v.name)))].sort();
+ const sel = document.getElementById("br-venue");
+ venues.forEach(v => {
+ const o = document.createElement("option");
+ o.value = v; o.textContent = v.replace(/· .*$/, "").trim();
+ sel.appendChild(o);
+ });
+
+ const budget = document.getElementById("br-budget");
+ const bv = document.getElementById("br-bv");
+ budget.addEventListener("input", () => { bv.textContent = "$" + (+budget.value).toLocaleString(); render(); });
+ sel.addEventListener("change", render);
+
+ function render() {
+ const maxP = +budget.value;
+ const venueFilter = sel.value;
+ const rows = all.filter(r => {
+ const n0 = (r.nearest || [])[0];
+ if (!n0) return false;
+ if (r.price && r.price.mid > maxP) return false;
+ if (venueFilter && n0.name !== venueFilter) return false;
+ return true;
+ });
+ const grid = document.getElementById("br-grid");
+ const empty = document.getElementById("br-empty");
+ if (!rows.length) { grid.innerHTML = ""; empty.hidden = false; return; }
+ empty.hidden = true;
+ grid.innerHTML = rows.map(r => {
+ const n0 = r.nearest[0];
+ const photo = (r.photos && r.photos[0]) || null;
+ const street = r.address.street || "";
+ const cityLine = [r.address.city, r.address.state].filter(Boolean).join(", ");
+ const chip = `${n0.mi.toFixed(1)} mi · ${n0.headline || (n0.sports || "").split("·")[0]}`;
+ const sat = `https://maps.google.com/maps?q=${encodeURIComponent(`${r.address.lat},${r.address.lng}`)}&t=k&z=18&output=embed`;
+ return `
+ <a class="br-card" href="rental.html?id=${encodeURIComponent(r.slug)}">
+ <div class="br-img">
+ ${photo
+ ? `<img src="${escapeAttr(photo)}" alt="${escapeAttr(street)}">`
+ : `<iframe src="${escapeAttr(sat)}" loading="lazy"></iframe>`}
+ <span class="br-chip">${escapeHtml(chip)}</span>
+ </div>
+ <div class="br-body">
+ <div class="br-addr">${escapeHtml(street)}</div>
+ <div class="br-city">${escapeHtml(cityLine)}</div>
+ <div class="br-row">
+ <span><b>$${formatMoney(r.price && r.price.mid)}</b><em>/ night</em></span>
+ <span class="br-host">by ${escapeHtml(r.host)}</span>
+ </div>
+ </div>
+ </a>`;
+ }).join("");
+ }
+ render();
+})();
diff --git a/dashboard.css b/dashboard.css
new file mode 100644
index 0000000..0b0a768
--- /dev/null
+++ b/dashboard.css
@@ -0,0 +1,133 @@
+/* dashboard.css — host control panel */
+.dash .l-nav-links a.active { color: var(--fg); font-weight: 700; }
+
+.dash-hero {
+ padding: 48px 56px 32px;
+ display: flex; justify-content: space-between; align-items: flex-end; gap: 40px;
+ border-bottom: 1px solid var(--soft);
+}
+.dash-hero h1 {
+ font-family: var(--display); font-weight: 900; font-size: 72px; line-height: 1;
+ letter-spacing: -0.03em; margin: 10px 0 8px;
+}
+.dash-sub { font-family: var(--serif); font-size: 18px; color: var(--muted); margin: 0; }
+.dash-stats { display: flex; gap: 32px; }
+.dash-stats > div { display: flex; flex-direction: column; gap: 2px; text-align: right; }
+.dash-stats b { font-family: var(--display); font-weight: 900; font-size: 36px; line-height: 1; letter-spacing: -0.02em; }
+.dash-stats span { font-size: 11px; letter-spacing: 0.16em; color: var(--muted); }
+
+.dash-section {
+ padding: 56px 56px 16px;
+ display: flex; flex-direction: column; gap: 22px;
+ border-bottom: 1px solid var(--soft);
+}
+.dash-section header { display: flex; align-items: baseline; gap: 18px; }
+.dash-section h2 {
+ font-family: var(--display); font-weight: 900; font-size: 32px; line-height: 1;
+ letter-spacing: -0.02em; margin: 0;
+}
+.dash-hint { font-family: var(--serif); font-style: italic; font-size: 14px; color: var(--muted); }
+
+/* Rental cards */
+.dash-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
+.dash-card {
+ background: var(--bg); border: 1px solid var(--soft); display: flex; flex-direction: column;
+ transition: transform .12s ease, box-shadow .15s ease;
+}
+.dash-card:hover { transform: translateY(-2px); box-shadow: 0 14px 40px rgba(0,0,0,.08); }
+.dash-card-img { position: relative; height: 180px; overflow: hidden; background: #1a1a1a; }
+.dash-card-img img, .dash-card-img iframe { width: 100%; height: 100%; object-fit: cover; border: 0; display: block; }
+.dash-chip {
+ position: absolute; left: 12px; bottom: 12px;
+ padding: 5px 10px; background: rgba(0,0,0,.7); color: #F4F1EC; backdrop-filter: blur(8px);
+ font-family: var(--body); font-weight: 700; font-size: 10px; letter-spacing: 0.14em;
+}
+.dash-card-body { padding: 18px; display: flex; flex-direction: column; gap: 8px; }
+.dash-card-addr { font-family: var(--display); font-weight: 900; font-size: 22px; letter-spacing: -0.01em; line-height: 1.1; }
+.dash-card-city { font-family: var(--serif); font-size: 14px; color: var(--muted); }
+.dash-card-row { display: flex; gap: 20px; padding: 10px 0; border-top: 1px solid var(--soft); border-bottom: 1px solid var(--soft); font-family: var(--body); }
+.dash-card-row b { font-family: var(--display); font-weight: 900; font-size: 18px; letter-spacing: -0.01em; }
+.dash-card-row em { font-style: normal; font-size: 11px; color: var(--muted); margin-left: 4px; letter-spacing: 0.1em; }
+.dash-card-actions { display: flex; justify-content: space-between; padding-top: 4px; }
+.dash-card-actions a {
+ padding: 8px 12px; background: var(--fg); color: var(--bg);
+ font-family: var(--display); font-weight: 800; font-size: 11px; letter-spacing: 0.14em;
+}
+.dash-card-actions button {
+ padding: 8px 12px; background: transparent; color: var(--fg); border: 1px solid var(--fg);
+ font-family: var(--display); font-weight: 800; font-size: 11px; letter-spacing: 0.14em; cursor: pointer;
+}
+.dash-card-host { font-family: var(--serif); font-style: italic; font-size: 13px; color: var(--muted); }
+
+.dash-empty { padding: 56px; text-align: center; color: var(--muted); }
+.dash-empty .dash-cta { display: inline-block; margin-top: 10px; padding: 12px 20px; background: var(--accent); color: #fff; font-family: var(--display); font-weight: 800; font-size: 12px; letter-spacing: 0.16em; }
+
+/* Inquiry inbox */
+.dash-inbox { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
+.dash-inbox li { border: 1px solid var(--soft); padding: 18px 20px; display: flex; flex-direction: column; gap: 8px; background: var(--bg); }
+.inq-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; }
+.inq-name { font-family: var(--display); font-weight: 900; font-size: 16px; letter-spacing: -0.01em; }
+.inq-email { font-family: var(--serif); font-size: 13px; color: var(--muted); margin-left: 6px; }
+.inq-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; font-size: 12px; color: var(--muted); }
+.inq-at { letter-spacing: 0.12em; }
+.inq-for a { color: var(--accent); font-weight: 700; }
+.inq-dates { font-family: var(--serif); font-size: 14px; color: var(--fg); }
+.inq-msg { font-family: var(--serif); font-size: 15px; line-height: 1.55; color: var(--fg); margin: 6px 0 0; padding: 10px 12px; background: var(--soft); border-left: 3px solid var(--accent); }
+.inq-actions { display: flex; justify-content: flex-end; gap: 10px; padding-top: 4px; }
+.inq-actions a, .inq-actions button {
+ padding: 6px 12px; font-family: var(--display); font-weight: 800; font-size: 11px; letter-spacing: 0.14em; cursor: pointer;
+ border: 1px solid var(--fg); background: transparent; color: var(--fg);
+}
+.inq-actions a { background: var(--accent); color: #fff; border-color: var(--accent); }
+
+/* Photo library */
+.photo-picker { display: flex; align-items: center; gap: 14px; }
+.photo-picker label { font-size: 10px; letter-spacing: 0.24em; color: var(--muted); }
+.photo-picker select { padding: 10px 14px; background: var(--bg); border: 1px solid var(--soft); font-family: var(--body); font-size: 14px; }
+.photo-upload { display: flex; align-items: center; gap: 14px; }
+.photo-upload button {
+ padding: 14px 18px; background: var(--fg); color: var(--bg);
+ font-family: var(--display); font-weight: 800; font-size: 12px; letter-spacing: 0.16em; cursor: pointer; border: 0;
+}
+.photo-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
+.photo-cell { margin: 0; position: relative; background: var(--soft); aspect-ratio: 4 / 3; overflow: hidden; }
+.photo-cell img { width: 100%; height: 100%; object-fit: cover; display: block; }
+.photo-cell figcaption {
+ position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: space-between; align-items: center;
+ padding: 6px 8px; background: rgba(0,0,0,.6); color: #F4F1EC;
+ font-family: var(--body); font-weight: 700; font-size: 10px; letter-spacing: 0.14em;
+}
+.photo-del { background: rgba(226,48,42,.9); color: #F4F1EC; border: 0; width: 22px; height: 22px; line-height: 1; font-size: 14px; font-weight: 800; cursor: pointer; }
+
+/* Modal */
+.dash-modal {
+ position: fixed; inset: 0; background: rgba(0,0,0,.6); backdrop-filter: blur(4px);
+ display: flex; align-items: center; justify-content: center; z-index: 100;
+}
+.dash-modal[hidden] { display: none; }
+.dash-modal-card {
+ position: relative; width: min(480px, 92vw); background: var(--bg); color: var(--fg);
+ padding: 36px 32px 28px; display: flex; flex-direction: column; gap: 18px;
+}
+.dash-modal-card h3 { font-family: var(--display); font-weight: 900; font-size: 28px; margin: 0; letter-spacing: -0.02em; }
+.dash-modal-card form { display: flex; flex-direction: column; gap: 14px; }
+.dash-modal-card label { display: flex; flex-direction: column; gap: 6px; }
+.dash-modal-card label span { font-size: 10px; letter-spacing: 0.24em; color: var(--muted); }
+.dash-modal-card input { padding: 12px 0; border: 0; border-bottom: 1px solid var(--soft); font-family: var(--serif); font-size: 18px; outline: none; }
+.dash-modal-card input:focus { border-color: var(--accent); }
+.dash-close { position: absolute; top: 12px; right: 12px; background: transparent; border: 0; font-size: 24px; cursor: pointer; color: var(--muted); }
+.edit-actions { display: flex; justify-content: space-between; padding-top: 8px; }
+.edit-actions button {
+ padding: 12px 18px; font-family: var(--display); font-weight: 800; font-size: 12px; letter-spacing: 0.16em; cursor: pointer; border: 0;
+}
+.edit-actions button.primary { background: var(--accent); color: #fff; }
+.edit-actions button.danger { background: transparent; color: #B3311F; border: 1px solid #B3311F; }
+
+@media (max-width: 960px) {
+ .dash-hero, .dash-section { padding-left: 24px; padding-right: 24px; }
+ .dash-hero { flex-direction: column; align-items: flex-start; gap: 20px; }
+ .dash-stats { gap: 20px; }
+ .dash-grid { grid-template-columns: 1fr; }
+ .photo-grid { grid-template-columns: 1fr 1fr; }
+ .dash-hero h1 { font-size: 44px; }
+}
diff --git a/dashboard.html b/dashboard.html
new file mode 100644
index 0000000..6df382e
--- /dev/null
+++ b/dashboard.html
@@ -0,0 +1,107 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <title>Dashboard — Victory Stays</title>
+ <link rel="preconnect" href="https://fonts.googleapis.com">
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+ <link href="https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;700;800;900&family=EB+Garamond:ital,wght@0,400;1,400&family=Inter:wght@400;500;600;700;800;900&display=swap" rel="stylesheet">
+ <link rel="stylesheet" href="landing.css?v=10">
+ <link rel="stylesheet" href="dashboard.css?v=10">
+</head>
+<body class="dash">
+
+<nav class="l-nav">
+ <div class="l-brand">
+ <span class="l-dot"></span>
+ <span class="l-mark">VICTORY STAYS</span>
+ <span class="l-sub">Host dashboard</span>
+ </div>
+ <div class="l-nav-links">
+ <a href="index.html">Landing</a>
+ <a href="schedule.html">Schedule</a>
+ <a href="browse.html">Browse</a>
+ <a href="#rentals" class="active">Rentals</a>
+ <a href="#inquiries">Inquiries</a>
+ <a href="#photos">Photos</a>
+ </div>
+ <a class="l-nav-cta" href="index.html#signup">+ Add address</a>
+</nav>
+
+<header class="dash-hero">
+ <div>
+ <div class="l-eyebrow accent">§ Your rentals</div>
+ <h1 id="dash-hello">Welcome back.</h1>
+ <p id="dash-summary" class="dash-sub"></p>
+ </div>
+ <div class="dash-stats" id="dash-stats"></div>
+</header>
+
+<section id="rentals" class="dash-section">
+ <header>
+ <h2>Rental microsites</h2>
+ <span class="dash-hint">Click any card to edit, or open the live page in a new tab.</span>
+ </header>
+ <div class="dash-grid" id="dash-grid"></div>
+ <div class="dash-empty" id="dash-empty" hidden>
+ <p>No rentals yet.</p>
+ <a href="index.html#signup" class="dash-cta">Create your first →</a>
+ </div>
+</section>
+
+<section id="inquiries" class="dash-section">
+ <header>
+ <h2>Guest inquiries</h2>
+ <span class="dash-hint">Every message from your rental pages lands here.</span>
+ </header>
+ <ul class="dash-inbox" id="dash-inbox"></ul>
+ <div class="dash-empty" id="dash-inbox-empty" hidden>
+ <p>No inquiries yet. When a guest uses the contact form on your rental page, it'll appear here.</p>
+ </div>
+</section>
+
+<section id="photos" class="dash-section">
+ <header>
+ <h2>Photo library</h2>
+ <span class="dash-hint">Upload up to 10 photos. They replace the stock thumbnails in your trailer, hero, and field guide — everywhere at once.</span>
+ </header>
+ <div class="photo-picker">
+ <label for="photo-rental">FOR RENTAL</label>
+ <select id="photo-rental"></select>
+ </div>
+ <div class="photo-upload" id="photo-upload">
+ <input type="file" id="photo-input" accept="image/*" multiple hidden>
+ <button id="photo-btn">＋ Upload photos (JPEG/PNG, max ~1MB each)</button>
+ <span class="dash-hint">Stored in your browser locally — no server upload yet.</span>
+ </div>
+ <div class="photo-grid" id="photo-grid"></div>
+</section>
+
+<!-- Edit modal -->
+<div class="dash-modal" id="edit-modal" hidden>
+ <div class="dash-modal-card">
+ <button class="dash-close" id="edit-close">×</button>
+ <h3>Edit rental</h3>
+ <form id="edit-form">
+ <label><span>Host name</span><input type="text" name="host" required></label>
+ <label><span>Email</span><input type="email" name="email" required></label>
+ <label><span>Phone</span><input type="tel" name="phone" required></label>
+ <div class="edit-actions">
+ <button type="button" id="edit-delete" class="danger">Delete rental</button>
+ <button type="submit" class="primary">Save</button>
+ </div>
+ </form>
+ </div>
+</div>
+
+<footer class="l-footer">
+ <div class="l-foot-brand"><span class="l-dot"></span>VICTORY STAYS · NOT AFFILIATED WITH LA 2028</div>
+ <div class="l-foot-mid">Dashboard · local-only storage (no server yet)</div>
+ <div class="l-foot-credit">© 2028 · hello@victorystays.com</div>
+</footer>
+
+<script src="neighborhoods.js?v=10"></script>
+<script src="dashboard.js?v=10"></script>
+</body>
+</html>
diff --git a/dashboard.js b/dashboard.js
new file mode 100644
index 0000000..e5ba854
--- /dev/null
+++ b/dashboard.js
@@ -0,0 +1,272 @@
+// dashboard.js — rental list, inquiry inbox, photo library
+(function () {
+ const $ = sel => document.querySelector(sel);
+ const $$ = sel => document.querySelectorAll(sel);
+
+ function load() {
+ try { return JSON.parse(localStorage.getItem("htg.rentals") || "{}"); }
+ catch (e) { return {}; }
+ }
+ function save(all) {
+ localStorage.setItem("htg.rentals", JSON.stringify(all));
+ }
+ function rentalsArr() {
+ const all = load();
+ return Object.values(all).sort((a, b) => (b.createdAt || "").localeCompare(a.createdAt || ""));
+ }
+ function escapeHtml(s) {
+ return String(s ?? "")
+ .replace(/&/g, "&")
+ .replace(/</g, "<")
+ .replace(/>/g, ">")
+ .replace(/"/g, """)
+ .replace(/'/g, "'");
+ }
+ const escapeAttr = escapeHtml;
+ function formatMoney(v) {
+ return v === null || v === undefined || v === "" ? "—" : escapeHtml(v.toLocaleString());
+ }
+
+ // ------------ Rentals list ------------
+ function renderRentals() {
+ const all = load();
+ const list = rentalsArr();
+ const grid = $("#dash-grid");
+ const empty = $("#dash-empty");
+ if (!list.length) {
+ grid.innerHTML = "";
+ empty.hidden = false;
+ return;
+ }
+ empty.hidden = true;
+ grid.innerHTML = list.map(r => {
+ const inq = (r.inquiries || []).length;
+ const firstPhoto = (r.photos && r.photos[0]) || null;
+ const sat = firstPhoto || `https://maps.google.com/maps?q=${r.address.lat},${r.address.lng}&t=k&z=18&output=embed`;
+ const n0 = r.nearest && r.nearest[0];
+ const street = r.address.street || "";
+ const cityLine = [r.address.city, r.address.state, r.address.zip].filter(Boolean).join(", ");
+ const chip = n0 ? n0.mi.toFixed(1) + " mi · " + (n0.headline || n0.sports) : "";
+ return `
+ <article class="dash-card" data-slug="${escapeAttr(r.slug)}">
+ <div class="dash-card-img">
+ ${firstPhoto
+ ? `<img src="${escapeAttr(firstPhoto)}" alt="${escapeAttr(street)}">`
+ : `<iframe src="${escapeAttr(sat)}" loading="lazy" title="Aerial"></iframe>`}
+ <span class="dash-chip">${escapeHtml(chip)}</span>
+ </div>
+ <div class="dash-card-body">
+ <div class="dash-card-addr">${escapeHtml(street)}</div>
+ <div class="dash-card-city">${escapeHtml(cityLine)}</div>
+ <div class="dash-card-row">
+ <span><b>$${formatMoney(r.price && r.price.mid)}</b><em>/ night</em></span>
+ <span><b>${(r.photos || []).length}</b><em>photos</em></span>
+ <span><b>${inq}</b><em>${inq === 1 ? "inquiry" : "inquiries"}</em></span>
+ </div>
+ <div class="dash-card-actions">
+ <a href="rental.html?id=${encodeURIComponent(r.slug)}" target="_blank" rel="noopener">Open →</a>
+ <button class="dash-edit" data-slug="${escapeAttr(r.slug)}">Edit</button>
+ </div>
+ <div class="dash-card-host">Hosted by ${escapeHtml(r.host)}</div>
+ </div>
+ </article>`;
+ }).join("");
+
+ $$(".dash-edit").forEach(b => b.addEventListener("click", e => {
+ e.stopPropagation();
+ openEditModal(e.currentTarget.getAttribute("data-slug"));
+ }));
+ renderStats(list);
+ }
+
+ function renderStats(list) {
+ const inq = list.reduce((n, r) => n + ((r.inquiries || []).length), 0);
+ const pics = list.reduce((n, r) => n + ((r.photos || []).length), 0);
+ const avg = list.length ? Math.round(list.reduce((n, r) => n + (r.price ? r.price.mid : 0), 0) / list.length) : 0;
+ $("#dash-stats").innerHTML = `
+ <div><b>${list.length}</b><span>rental${list.length === 1 ? "" : "s"}</span></div>
+ <div><b>${inq}</b><span>inquir${inq === 1 ? "y" : "ies"}</span></div>
+ <div><b>${pics}</b><span>photos</span></div>
+ <div><b>$${avg.toLocaleString()}</b><span>avg nightly</span></div>
+ `;
+ $("#dash-hello").textContent = list.length
+ ? `Welcome back, ${list[0].host.split(" ")[0]}.`
+ : `Welcome.`;
+ $("#dash-summary").textContent = list.length
+ ? `You have ${list.length} rental${list.length === 1 ? "" : "s"} live, ${inq} pending inquir${inq === 1 ? "y" : "ies"}.`
+ : `Create a rental from the landing page to get started.`;
+ }
+
+ // ------------ Edit modal ------------
+ function openEditModal(slug) {
+ const all = load();
+ const r = all[slug]; if (!r) return;
+ const modal = $("#edit-modal");
+ const f = $("#edit-form");
+ f.host.value = r.host || "";
+ f.email.value = r.email || "";
+ f.phone.value = r.phone || "";
+ f.setAttribute("data-slug", slug);
+ modal.hidden = false;
+ }
+ function closeEditModal() { $("#edit-modal").hidden = true; }
+
+ $("#edit-close").addEventListener("click", closeEditModal);
+ $("#edit-modal").addEventListener("click", e => { if (e.target === e.currentTarget) closeEditModal(); });
+ $("#edit-form").addEventListener("submit", e => {
+ e.preventDefault();
+ const slug = e.currentTarget.getAttribute("data-slug");
+ const all = load();
+ if (!all[slug]) return;
+ all[slug].host = e.currentTarget.host.value;
+ all[slug].email = e.currentTarget.email.value;
+ all[slug].phone = e.currentTarget.phone.value;
+ save(all);
+ closeEditModal();
+ renderRentals();
+ populatePhotoPicker();
+ });
+ $("#edit-delete").addEventListener("click", () => {
+ const slug = $("#edit-form").getAttribute("data-slug");
+ if (!slug) return;
+ if (!confirm("Delete this rental and all its inquiries? This cannot be undone.")) return;
+ const all = load();
+ delete all[slug];
+ save(all);
+ closeEditModal();
+ renderRentals();
+ renderInbox();
+ populatePhotoPicker();
+ });
+
+ // ------------ Inquiry inbox ------------
+ function renderInbox() {
+ const list = rentalsArr();
+ const flat = [];
+ list.forEach(r => (r.inquiries || []).forEach(i => flat.push({ ...i, _slug: r.slug, _street: r.address.street })));
+ flat.sort((a, b) => (b.createdAt || "").localeCompare(a.createdAt || ""));
+ const inbox = $("#dash-inbox");
+ const empty = $("#dash-inbox-empty");
+ if (!flat.length) { inbox.innerHTML = ""; empty.hidden = false; return; }
+ empty.hidden = true;
+ inbox.innerHTML = flat.map(m => `
+ <li>
+ <div class="inq-top">
+ <div>
+ <span class="inq-name">${escapeHtml((m.firstName || "") + " " + (m.lastName || ""))}</span>
+ <span class="inq-email">${escapeHtml(m.email || "")}</span>
+ </div>
+ <div class="inq-meta">
+ <span class="inq-at">${escapeHtml(fmtDate(m.createdAt))}</span>
+ <span class="inq-for">for <a href="rental.html?id=${encodeURIComponent(m._slug)}" target="_blank" rel="noopener">${escapeHtml(m._street)}</a></span>
+ </div>
+ </div>
+ <div class="inq-dates">
+ ${escapeHtml(m.checkIn || "?")} → ${escapeHtml(m.checkOut || "?")} · ${escapeHtml(m.guests || "?")} guests
+ ${m.events && m.events.length ? ` · attending: ${escapeHtml(m.events.join(", "))}` : ""}
+ </div>
+ ${m.message ? `<p class="inq-msg">${escapeHtml(m.message)}</p>` : ""}
+ <div class="inq-actions">
+ <a href="mailto:${encodeURIComponent(m.email || "")}?subject=Re: Your Victory Stays inquiry for ${encodeURIComponent(m._street || "")}">Reply</a>
+ <button data-slug="${escapeAttr(m._slug)}" data-id="${escapeAttr(m.id)}" class="inq-delete">Delete</button>
+ </div>
+ </li>
+ `).join("");
+ $$(".inq-delete").forEach(b => b.addEventListener("click", () => {
+ const slug = b.getAttribute("data-slug"), id = b.getAttribute("data-id");
+ const all = load();
+ if (!all[slug]) return;
+ all[slug].inquiries = (all[slug].inquiries || []).filter(i => i.id !== id);
+ save(all);
+ renderInbox();
+ renderRentals();
+ }));
+ }
+ function fmtDate(iso) { try { return new Date(iso).toLocaleString(); } catch (e) { return iso || ""; } }
+
+ // ------------ Photo library ------------
+ function populatePhotoPicker() {
+ const sel = $("#photo-rental");
+ const list = rentalsArr();
+ if (!list.length) {
+ sel.innerHTML = `<option value="">— no rentals yet —</option>`;
+ $("#photo-grid").innerHTML = "";
+ return;
+ }
+ sel.innerHTML = list.map(r => `<option value="${escapeAttr(r.slug)}">${escapeHtml(r.address.street)} — ${escapeHtml(r.address.city)}</option>`).join("");
+ renderPhotos();
+ }
+
+ function renderPhotos() {
+ const slug = $("#photo-rental").value;
+ if (!slug) { $("#photo-grid").innerHTML = ""; return; }
+ const all = load();
+ const r = all[slug]; if (!r) return;
+ const photos = r.photos || [];
+ $("#photo-grid").innerHTML = photos.map((src, i) => `
+ <figure class="photo-cell">
+ <img src="${escapeAttr(src)}" alt="photo ${i + 1}">
+ <figcaption>
+ <span>#${i + 1}${i === 0 ? " · cover" : ""}</span>
+ <button data-i="${i}" class="photo-del">×</button>
+ </figcaption>
+ </figure>
+ `).join("");
+ $$(".photo-del").forEach(b => b.addEventListener("click", () => {
+ const i = +b.getAttribute("data-i");
+ const all2 = load();
+ all2[slug].photos.splice(i, 1);
+ save(all2);
+ renderPhotos();
+ renderRentals();
+ }));
+ }
+
+ $("#photo-btn").addEventListener("click", () => $("#photo-input").click());
+ $("#photo-rental").addEventListener("change", renderPhotos);
+ $("#photo-input").addEventListener("change", async e => {
+ const slug = $("#photo-rental").value;
+ if (!slug) { alert("Pick a rental first."); return; }
+ const files = Array.from(e.target.files || []);
+ if (!files.length) return;
+ const all = load();
+ if (!all[slug].photos) all[slug].photos = [];
+ for (const f of files.slice(0, 10 - all[slug].photos.length)) {
+ const compressed = await compressImage(f, 1200, 0.82);
+ all[slug].photos.push(compressed);
+ }
+ save(all);
+ renderPhotos();
+ renderRentals();
+ e.target.value = "";
+ });
+
+ async function compressImage(file, maxW, quality) {
+ return new Promise((resolve, reject) => {
+ const img = new Image();
+ const reader = new FileReader();
+ reader.onload = () => {
+ img.onload = () => {
+ const scale = Math.min(1, maxW / img.width);
+ const w = Math.round(img.width * scale);
+ const h = Math.round(img.height * scale);
+ const cv = document.createElement("canvas");
+ cv.width = w; cv.height = h;
+ cv.getContext("2d").drawImage(img, 0, 0, w, h);
+ resolve(cv.toDataURL("image/jpeg", quality));
+ };
+ img.onerror = reject;
+ img.src = reader.result;
+ };
+ reader.onerror = reject;
+ reader.readAsDataURL(file);
+ });
+ }
+
+ // ------------ Init ------------
+ document.addEventListener("DOMContentLoaded", () => {
+ renderRentals();
+ renderInbox();
+ populatePhotoPicker();
+ });
+})();
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..280a768
--- /dev/null
+++ b/index.html
@@ -0,0 +1,256 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <title>Victory Stays — Turn your home into a Games-window rental in 60 seconds</title>
+ <link rel="preconnect" href="https://fonts.googleapis.com">
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+ <link href="https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;700;800;900&family=EB+Garamond:ital,wght@0,400;0,500;1,400&family=Inter:wght@400;500;600;700;800;900&display=swap" rel="stylesheet">
+ <link rel="stylesheet" href="landing.css?v=10">
+</head>
+<body>
+
+<nav class="l-nav">
+ <div class="l-brand">
+ <span class="l-dot"></span>
+ <span class="l-mark">VICTORY STAYS</span>
+ <span class="l-sub">A microsite service for LA 2028 hosts</span>
+ </div>
+ <div class="l-nav-links">
+ <a href="#how">How it works</a>
+ <a href="schedule.html">Schedule</a>
+ <a href="browse.html">Browse</a>
+ <a href="#pricing">Pricing</a>
+ <a href="dashboard.html">Dashboard</a>
+ <a href="#about">About</a>
+ </div>
+ <a class="l-nav-cta" href="#signup">Claim your address →</a>
+</nav>
+
+<header class="l-hero">
+ <div class="l-hero-art">
+ <img src="https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=1600&h=1100&fit=crop" alt="Mid-century home at golden hour" onerror="this.src='https://picsum.photos/seed/hosthehome/1600/1100'">
+ <div class="l-hero-overlay"></div>
+ <div class="l-hero-badge">
+ <span class="l-dot"></span>
+ <span>BOOKING WINDOW · JUL 14 — JUL 30, 2028</span>
+ </div>
+ </div>
+ <div class="l-hero-copy">
+ <div class="l-eyebrow">A free microsite for every Los Angeles host</div>
+ <h1>Turn your home into a Games-window rental<br><em>in sixty seconds.</em></h1>
+ <p class="l-lede">Enter your address. We geocode it, plot the LA 2028 venues around it, surface the history of your block, suggest a Games-window nightly rate from public comps, and hand you a personalized rental microsite — ready to send to guests.</p>
+ <div class="l-stats">
+ <div><b>29</b><span>LA 2028 venues<br>mapped</span></div>
+ <div><b>ZIP</b><span>+ venue proximity<br>pricing model</span></div>
+ <div><b>60s</b><span>from address<br>to live site</span></div>
+ </div>
+ </div>
+</header>
+
+<!-- SIGNUP -->
+<section id="signup" class="l-signup">
+ <div class="l-signup-copy">
+ <div class="l-eyebrow accent">§ Claim your address</div>
+ <h2>Four fields. One verified email.<br>A personalized site.</h2>
+ <p>We'll email you a one-time link to render and edit your rental microsite. You keep full ownership of the page and your guest inquiries — we never rent your listing, never touch your calendar, never take a cut.</p>
+ <ul class="l-ticks">
+ <li>✓ Pulls your address from OpenStreetMap</li>
+ <li>✓ Calculates distance to the nearest LA 2028 venue</li>
+ <li>✓ Suggests a nightly range from ZIP comps + event premium</li>
+ <li>✓ Generates a 10-theme microsite you can share tonight</li>
+ </ul>
+ </div>
+
+ <form class="l-form" id="signup-form">
+ <label class="has-autocomplete">
+ <span>YOUR ADDRESS</span>
+ <input type="text" id="f-addr" name="address" required placeholder="Start typing — e.g. 471 S Peck Dr" autocomplete="off" spellcheck="false">
+ <ul id="f-addr-menu" class="ac-menu" hidden></ul>
+ </label>
+ <label>
+ <span>HOST NAME</span>
+ <input type="text" id="f-host" name="host" required placeholder="Steve Abrams" autocomplete="name">
+ </label>
+ <div class="l-form-row">
+ <label>
+ <span>EMAIL (we verify this)</span>
+ <input type="email" id="f-email" name="email" required placeholder="you@example.com" autocomplete="email">
+ </label>
+ <label>
+ <span>PHONE</span>
+ <input type="tel" id="f-phone" name="phone" required placeholder="(310) 555-0128" autocomplete="tel">
+ </label>
+ </div>
+
+ <div class="l-submit">
+ <button type="submit" id="f-submit">
+ <span>Generate my rental site →</span>
+ </button>
+ <span class="l-fine">We'll send a verify link. Takes ~10 seconds. Cancel anytime.</span>
+ </div>
+ <div class="l-status" id="f-status" hidden></div>
+ <div class="l-seed">
+ <span>Just want to see how it looks?</span>
+ <button type="button" id="seed-demo">Load 2 Beverly Hills demo rentals →</button>
+ </div>
+ <div class="l-status" id="demo-links" hidden></div>
+ </form>
+</section>
+
+<!-- HOW -->
+<section id="how" class="l-how">
+ <div class="l-eyebrow">§ How it works — every step, nothing hidden</div>
+ <h2 class="l-how-head">From zero to live rental site in six clicks.</h2>
+ <ol class="l-steps">
+ <li>
+ <span class="n">01</span>
+ <h3>Enter your address</h3>
+ <p>Start typing your street — we autocomplete from OpenStreetMap in the US. Pick the match, and we confirm street, city, ZIP, and county behind the scenes.</p>
+ </li>
+ <li>
+ <span class="n">02</span>
+ <h3>Add host name, email, phone</h3>
+ <p>Three fields. Email is the account login — we send you a verify link. Phone is displayed on your rental page so guests can call.</p>
+ </li>
+ <li>
+ <span class="n">03</span>
+ <h3>Push "Generate my rental site"</h3>
+ <p>We geocode to lat/lng, check eligibility (≤ 30 mi from an LA 2028 venue), calculate driving distance to every venue, and suggest a nightly rate from ZIP comps + event premium. About ten seconds.</p>
+ </li>
+ <li>
+ <span class="n">04</span>
+ <h3>Verify your email</h3>
+ <p>One-click verify in your inbox. Locks your address to your email — nobody else can claim the same street number under a different host name.</p>
+ </li>
+ <li>
+ <span class="n">05</span>
+ <h3>Pick a theme & tune the copy</h3>
+ <p>Ten design themes via keyboard shortcut (1–9, 0). Edit the hero copy, upload your own photos to replace the stock thumbnails, add a custom welcome video if you've got one.</p>
+ </li>
+ <li>
+ <span class="n">06</span>
+ <h3>Share your site & take bookings</h3>
+ <p>You get a permanent URL. The inquiry form emails you every request. No commission. You quote, you close, you host.</p>
+ </li>
+ </ol>
+ <div class="l-how-note">
+ <b>What "Generate my rental site" actually does</b>
+ <ol>
+ <li>→ Nominatim geocode (OpenStreetMap) — verifies the address exists</li>
+ <li>→ Eligibility check — within 30 miles of an LA 2028 venue?</li>
+ <li>→ Haversine distance to all 15 LA 2028 venues, sorted ascending</li>
+ <li>→ ZIP baseline lookup × proximity multiplier (×1.0 to ×1.6) × LA 2028 premium (×2.8)</li>
+ <li>→ Picks your neighborhood content pack (history, guide list, timeline)</li>
+ <li>→ Renders real Google Maps street/satellite iframes for your exact coordinates</li>
+ <li>→ Wikipedia thumbnails for every "thing to do" that has a page</li>
+ <li>→ Saves to your account · generates shareable URL · sends verify email</li>
+ </ol>
+ </div>
+</section>
+
+<!-- PRICING -->
+<section id="pricing" class="l-pricing-v2">
+ <header>
+ <div class="l-eyebrow accent">§ Pricing — three tiers, no commission, ever</div>
+ <h2>Pick what fits.<br>We never take a cut of your booking.</h2>
+ <p class="l-pricing-lede">You keep 100% of what guests pay you. These fees cover hosting, the domain, the commercial-grade trailer, and the team that keeps LA 2028 venue data current.</p>
+ </header>
+ <div class="l-tier-grid">
+ <!-- STARTER -->
+ <article class="l-tier">
+ <div class="l-tier-head">
+ <div class="l-tier-name">STARTER</div>
+ <div class="l-tier-tag">Free until Jul 30, 2028</div>
+ </div>
+ <div class="l-tier-amt"><b>$0</b><span>one address</span></div>
+ <ul class="l-tier-feats">
+ <li>✓ One personalized microsite</li>
+ <li>✓ Hosted at victorystays.com/your-slug</li>
+ <li>✓ Ten design themes</li>
+ <li>✓ event rate suggestion</li>
+ <li>✓ Live Google Maps + Street View</li>
+ <li>✓ Inquiry form (emails you)</li>
+ <li class="muted">— Small "Victory Stays" footer mark</li>
+ <li class="muted">— No custom domain</li>
+ <li class="muted">— No 30-sec trailer export</li>
+ </ul>
+ <button class="l-tier-cta" data-plan="starter">Start free →</button>
+ </article>
+
+ <!-- ESSENTIALS -->
+ <article class="l-tier featured">
+ <div class="l-ribbon">Most hosts pick this</div>
+ <div class="l-tier-head">
+ <div class="l-tier-name">ESSENTIALS</div>
+ <div class="l-tier-tag">One-time · lifetime access</div>
+ </div>
+ <div class="l-tier-amt"><b>$49</b><span>per address</span></div>
+ <ul class="l-tier-feats">
+ <li>✓ Everything in Starter</li>
+ <li>✓ Footer mark removed</li>
+ <li>✓ Upload your own photos (10 slots)</li>
+ <li>✓ Custom subdomain: yourname.victorystays.com</li>
+ <li>✓ 30-second trailer export (MP4)</li>
+ <li>✓ Closest-event date alerts emailed to your guests</li>
+ <li>✓ Edit page copy in a simple dashboard</li>
+ <li>✓ Standard email support</li>
+ </ul>
+ <button class="l-tier-cta primary" data-plan="essentials">Get Essentials →</button>
+ </article>
+
+ <!-- PRO -->
+ <article class="l-tier">
+ <div class="l-tier-head">
+ <div class="l-tier-name">PRO · CONCIERGE</div>
+ <div class="l-tier-tag">One-time · white-glove</div>
+ </div>
+ <div class="l-tier-amt"><b>$149</b><span>per address</span></div>
+ <ul class="l-tier-feats">
+ <li>✓ Everything in Essentials</li>
+ <li>✓ <b>Custom .com domain included</b> (1 year)</li>
+ <li>✓ Bespoke neighborhood history written by a researcher</li>
+ <li>✓ Professional photo upload + light retouching</li>
+ <li>✓ Guest analytics dashboard (clicks, inquiry-to-booking)</li>
+ <li>✓ Instagram-ready vertical trailer cut</li>
+ <li>✓ Priority support · 4-hour reply SLA</li>
+ <li>✓ White-glove migration when the Games end</li>
+ </ul>
+ <button class="l-tier-cta" data-plan="pro">Go Pro →</button>
+ </article>
+ </div>
+</section>
+
+<!-- DOMAIN REGISTRY -->
+<section id="domains" class="l-domains">
+ <header>
+ <div class="l-eyebrow accent">§ Add a custom domain</div>
+ <h2>Buy <em>yourhouse.com</em> at cost — or included with Pro.</h2>
+ <p>We resell domains through a registrar at wholesale. No markup for the first year on Pro; transparent renewal pricing after.</p>
+ </header>
+ <div class="l-dom-grid">
+ <div class="l-dom"><b>.com</b><span>$12/yr</span><em>Most common</em></div>
+ <div class="l-dom featured"><b>.house</b><span>$19/yr</span><em>On-theme</em></div>
+ <div class="l-dom"><b>.la</b><span>$24/yr</span><em>Local cachet</em></div>
+ <div class="l-dom"><b>.rentals</b><span>$16/yr</span><em>Plain-spoken</em></div>
+ <div class="l-dom"><b>.stay</b><span>$29/yr</span><em>Boutique vibe</em></div>
+ <div class="l-dom"><b>.host</b><span>$22/yr</span><em>What you are</em></div>
+ </div>
+ <div class="l-dom-form">
+ <input type="text" placeholder="search: malden-house, peck-dr-rental, steves-stays..." id="dom-q">
+ <button id="dom-check">Check availability →</button>
+ </div>
+ <p class="l-dom-note">Pro tier includes one .com free for the first year, then standard renewal. All domains transfer to your name — you own it, we just register it.</p>
+</section>
+
+
+<footer id="about" class="l-footer">
+ <div class="l-foot-brand"><span class="l-dot"></span>VICTORY STAYS · NOT AFFILIATED WITH LA 2028</div>
+ <div class="l-foot-mid">Built by hosts, for hosts · Los Angeles, California</div>
+ <div class="l-foot-credit">© 2028 · hello@victorystays.com</div>
+</footer>
+
+<script src="signup.js?v=10"></script>
+</body>
+</html>
diff --git a/landing.css b/landing.css
new file mode 100644
index 0000000..b4a33b7
--- /dev/null
+++ b/landing.css
@@ -0,0 +1,225 @@
+/* Victory Stays — landing page */
+:root {
+ --bg: #F4F1EC;
+ --fg: #111111;
+ --muted: #11111199;
+ --soft: #1111111A;
+ --accent: #E2302A;
+ --panel-bg: #111111;
+ --panel-fg: #F4F1EC;
+ --display: "Archivo", sans-serif;
+ --body: "Inter", sans-serif;
+ --serif: "EB Garamond", serif;
+}
+
+* { box-sizing: border-box; }
+html, body { margin: 0; padding: 0; background: var(--bg); color: var(--fg); font-family: var(--body); -webkit-font-smoothing: antialiased; }
+a { color: inherit; text-decoration: none; }
+button { font: inherit; cursor: pointer; }
+img { display: block; max-width: 100%; }
+
+.l-eyebrow { font-family: var(--body); font-weight: 700; font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--fg); }
+.l-eyebrow.accent { color: var(--accent); }
+.l-dot { display: inline-block; width: 9px; height: 9px; border-radius: 999px; background: var(--accent); }
+
+/* Nav */
+.l-nav {
+ display: flex; align-items: center; justify-content: space-between;
+ padding: 22px 56px; border-bottom: 1px solid var(--soft);
+ gap: 24px;
+}
+.l-brand { display: flex; align-items: baseline; gap: 14px; }
+.l-brand .l-dot { align-self: center; }
+.l-mark { font-family: var(--display); font-weight: 900; font-size: 14px; letter-spacing: 0.18em; }
+.l-sub { font-size: 12px; color: var(--muted); }
+.l-nav-links { display: flex; gap: 28px; font-size: 13px; color: var(--muted); }
+.l-nav-cta { padding: 10px 16px; background: var(--fg); color: var(--bg); font-weight: 700; font-size: 12px; letter-spacing: 0.08em; }
+
+/* Hero */
+.l-hero {
+ position: relative; display: grid; grid-template-columns: 1fr 1fr;
+ min-height: 640px;
+}
+.l-hero-art { position: relative; overflow: hidden; background: #888; }
+.l-hero-art img { width: 100%; height: 100%; object-fit: cover; }
+.l-hero-overlay {
+ position: absolute; inset: 0;
+ background: linear-gradient(180deg, rgba(0,0,0,.15) 0%, rgba(0,0,0,.35) 100%);
+}
+.l-hero-badge {
+ position: absolute; left: 20px; bottom: 20px;
+ display: inline-flex; align-items: center; gap: 10px;
+ padding: 8px 14px; background: rgba(0,0,0,.55); backdrop-filter: blur(8px);
+ color: #F4F1EC; font-family: var(--display); font-weight: 800; font-size: 11px; letter-spacing: 0.22em;
+}
+
+.l-hero-copy {
+ display: flex; flex-direction: column; justify-content: center;
+ padding: 56px 56px 56px 64px; gap: 24px;
+}
+.l-hero-copy h1 {
+ font-family: var(--display); font-weight: 900; font-size: 80px; line-height: 0.95;
+ letter-spacing: -0.03em; margin: 0;
+}
+.l-hero-copy h1 em { font-family: var(--serif); font-style: italic; font-weight: 500; color: var(--accent); }
+.l-lede { font-family: var(--serif); font-size: 20px; line-height: 1.5; margin: 0; max-width: 54ch; color: var(--fg); }
+.l-stats { display: flex; gap: 40px; padding-top: 16px; }
+.l-stats > div { display: flex; align-items: baseline; gap: 12px; }
+.l-stats b { font-family: var(--display); font-weight: 900; font-size: 42px; line-height: 1; }
+.l-stats span { font-size: 12px; letter-spacing: 0.12em; color: var(--muted); line-height: 1.3; }
+
+/* Signup */
+.l-signup {
+ display: grid; grid-template-columns: 1fr 1fr; gap: 56px;
+ padding: 88px 56px; background: var(--panel-bg); color: var(--panel-fg);
+}
+.l-signup-copy { display: flex; flex-direction: column; gap: 18px; max-width: 56ch; }
+.l-signup-copy h2 { font-family: var(--display); font-weight: 900; font-size: 48px; line-height: 1; letter-spacing: -0.02em; margin: 0; }
+.l-signup-copy p { font-family: var(--serif); font-size: 18px; line-height: 1.5; margin: 0; opacity: .85; }
+.l-ticks { list-style: none; padding: 0; margin: 10px 0 0; display: flex; flex-direction: column; gap: 6px; font-size: 14px; opacity: .9; }
+
+.l-form { display: flex; flex-direction: column; gap: 18px; }
+.l-form label { display: flex; flex-direction: column; gap: 6px; }
+.l-form label > span { font-size: 10px; letter-spacing: 0.24em; opacity: .6; }
+.l-form input, .l-form textarea {
+ background: transparent; border: 0; border-bottom: 1px solid rgba(255,255,255,.3);
+ color: var(--panel-fg); font-family: var(--serif); font-size: 20px; font-weight: 400;
+ padding: 12px 0; outline: none;
+}
+.l-form input:focus { border-color: var(--accent); }
+.l-form input::placeholder, .l-form textarea::placeholder { color: currentColor; opacity: .4; }
+.l-form-row { display: flex; gap: 20px; }
+.l-form-row > label { flex: 1; }
+
+.l-submit { display: flex; flex-direction: column; gap: 10px; align-items: flex-end; padding-top: 12px; }
+.l-submit button {
+ padding: 16px 28px; background: var(--accent); color: var(--panel-fg);
+ font-family: var(--display); font-weight: 800; font-size: 13px; letter-spacing: 0.18em;
+ border: 0; align-self: stretch; text-align: center;
+ transition: transform .08s ease, opacity .2s ease;
+}
+.l-submit button:hover { transform: translateY(-1px); }
+.l-submit button:disabled { opacity: .5; cursor: wait; }
+.l-fine { font-family: var(--serif); font-style: italic; font-size: 13px; opacity: .5; }
+
+.l-status {
+ padding: 16px 20px; border: 1px solid rgba(255,255,255,.2);
+ font-family: var(--serif); font-size: 15px; line-height: 1.5; margin-top: 8px;
+}
+.l-status.ok { border-color: var(--accent); }
+.l-status b { font-family: var(--display); font-size: 12px; letter-spacing: 0.2em; display: block; margin-bottom: 6px; color: var(--accent); }
+.l-status a { color: var(--accent); text-decoration: underline; }
+.l-seed { margin-top: 18px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.15); display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
+.l-seed > span { font-family: var(--serif); font-style: italic; font-size: 14px; opacity: .7; }
+.l-seed button { padding: 10px 14px; background: transparent; color: var(--panel-fg); border: 1px solid rgba(255,255,255,.4); font-family: var(--display); font-weight: 700; font-size: 11px; letter-spacing: 0.16em; cursor: pointer; }
+.l-seed button:hover { border-color: var(--accent); color: var(--accent); }
+
+/* Autocomplete menu */
+.has-autocomplete { position: relative; }
+.ac-menu {
+ position: absolute; top: 100%; left: 0; right: 0; z-index: 20;
+ margin: 4px 0 0; padding: 4px 0;
+ list-style: none;
+ background: var(--bg); color: var(--fg);
+ border: 1px solid rgba(255,255,255,.2);
+ box-shadow: 0 18px 40px rgba(0,0,0,.35);
+ max-height: 260px; overflow: auto;
+}
+.ac-menu li {
+ padding: 10px 14px; cursor: pointer;
+ display: flex; flex-direction: column; gap: 2px;
+ border-bottom: 1px solid rgba(17,17,17,.08);
+}
+.ac-menu li:last-child { border-bottom: 0; }
+.ac-menu li:hover { background: rgba(226,48,42,.08); }
+.ac-menu li b { font-family: var(--body); font-weight: 600; font-size: 14px; }
+.ac-menu li span { font-family: var(--serif); font-size: 13px; opacity: .7; }
+.l-status dl { margin: 12px 0 0; display: grid; grid-template-columns: 160px 1fr; gap: 8px 16px; font-size: 14px; }
+.l-status dt { opacity: .6; font-family: var(--display); font-size: 11px; letter-spacing: 0.18em; padding-top: 2px; }
+.l-status dd { margin: 0; font-family: var(--serif); font-size: 16px; }
+
+/* How */
+.l-how { padding: 88px 56px; display: flex; flex-direction: column; gap: 32px; border-top: 1px solid var(--soft); }
+.l-how-head { font-family: var(--display); font-weight: 900; font-size: 56px; line-height: 1; letter-spacing: -0.03em; margin: 0; max-width: 22ch; }
+.l-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
+.l-steps li { display: flex; flex-direction: column; gap: 10px; padding-top: 16px; border-top: 2px solid var(--fg); }
+.l-steps .n { font-family: var(--display); font-weight: 900; font-size: 13px; color: var(--accent); letter-spacing: 0.2em; }
+.l-steps h3 { font-family: var(--display); font-weight: 900; font-size: 22px; line-height: 1.1; margin: 0; letter-spacing: -0.01em; }
+.l-steps p { font-family: var(--serif); font-size: 16px; line-height: 1.5; margin: 0; color: var(--muted); }
+.l-how-note {
+ margin-top: 16px; padding: 28px 32px; background: var(--fg); color: var(--bg);
+ display: flex; flex-direction: column; gap: 14px;
+}
+.l-how-note > b { font-family: var(--display); font-weight: 900; font-size: 13px; letter-spacing: 0.24em; color: var(--accent); }
+.l-how-note ol { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; font-family: var(--serif); font-size: 15px; line-height: 1.5; opacity: .9; }
+
+/* Pricing v2 — three tiers */
+.l-pricing-v2 { padding: 88px 56px; display: flex; flex-direction: column; gap: 40px; border-top: 1px solid var(--soft); }
+.l-pricing-v2 header { display: flex; flex-direction: column; gap: 14px; max-width: 68ch; }
+.l-pricing-v2 h2 { font-family: var(--display); font-weight: 900; font-size: 56px; line-height: 1; letter-spacing: -0.03em; margin: 0; }
+.l-pricing-lede { font-family: var(--serif); font-size: 18px; line-height: 1.5; color: var(--muted); margin: 0; }
+.l-tier-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; align-items: stretch; }
+.l-tier {
+ position: relative; padding: 32px; display: flex; flex-direction: column; gap: 18px;
+ border: 1px solid var(--soft); background: var(--bg);
+}
+.l-tier.featured { background: var(--fg); color: var(--bg); border-color: var(--fg); box-shadow: 0 24px 60px rgba(0,0,0,.18); transform: translateY(-8px); }
+.l-ribbon { position: absolute; top: -12px; left: 24px; padding: 6px 12px; background: var(--accent); color: var(--bg); font-family: var(--display); font-weight: 800; font-size: 11px; letter-spacing: 0.18em; }
+.l-tier-head { display: flex; flex-direction: column; gap: 4px; padding-bottom: 14px; border-bottom: 1px solid currentColor; opacity: .98; }
+.l-tier-name { font-family: var(--display); font-weight: 900; font-size: 14px; letter-spacing: 0.22em; }
+.l-tier-tag { font-family: var(--serif); font-style: italic; font-size: 13px; opacity: .7; }
+.l-tier-amt { display: flex; align-items: baseline; gap: 12px; }
+.l-tier-amt b { font-family: var(--display); font-weight: 900; font-size: 72px; line-height: 1; letter-spacing: -0.03em; }
+.l-tier-amt span { font-family: var(--body); font-size: 12px; letter-spacing: 0.16em; opacity: .7; }
+.l-tier-feats { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-family: var(--serif); font-size: 15px; line-height: 1.5; }
+.l-tier-feats li.muted { opacity: .45; }
+.l-tier-cta { margin-top: auto; padding: 14px 18px; background: transparent; border: 2px solid currentColor; color: inherit; font-family: var(--display); font-weight: 800; font-size: 12px; letter-spacing: 0.18em; cursor: pointer; }
+.l-tier-cta.primary { background: var(--accent); color: var(--bg); border-color: var(--accent); }
+.l-tier-cta:hover { transform: translateY(-1px); }
+
+/* Domains */
+.l-domains { padding: 88px 56px; display: flex; flex-direction: column; gap: 32px; border-top: 1px solid var(--soft); }
+.l-domains h2 { font-family: var(--display); font-weight: 900; font-size: 56px; line-height: 1; letter-spacing: -0.03em; margin: 6px 0 0; }
+.l-domains h2 em { font-family: var(--serif); font-style: italic; color: var(--accent); font-weight: 500; }
+.l-domains header p { font-family: var(--serif); font-size: 17px; line-height: 1.5; color: var(--muted); margin: 0; max-width: 54ch; }
+.l-dom-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; }
+.l-dom {
+ display: flex; flex-direction: column; gap: 2px; padding: 20px; background: var(--bg);
+ border: 1px solid var(--soft); text-align: left;
+}
+.l-dom.featured { background: var(--accent); color: var(--bg); border-color: var(--accent); }
+.l-dom b { font-family: var(--display); font-weight: 900; font-size: 24px; letter-spacing: -0.01em; }
+.l-dom span { font-family: var(--display); font-weight: 800; font-size: 13px; letter-spacing: 0.12em; }
+.l-dom em { font-family: var(--serif); font-style: italic; font-size: 12px; opacity: .7; margin-top: 4px; }
+.l-dom-form { display: flex; gap: 10px; align-items: stretch; max-width: 640px; }
+.l-dom-form input {
+ flex: 1; padding: 14px 18px; background: var(--bg); color: var(--fg);
+ border: 1px solid var(--soft); font-family: var(--body); font-size: 16px;
+}
+.l-dom-form button { padding: 14px 22px; background: var(--fg); color: var(--bg); border: 0; font-family: var(--display); font-weight: 800; font-size: 12px; letter-spacing: 0.18em; cursor: pointer; }
+.l-dom-note { font-family: var(--serif); font-style: italic; font-size: 14px; color: var(--muted); margin: 0; max-width: 68ch; }
+
+/* Footer */
+.l-footer { padding: 40px 56px; display: flex; justify-content: space-between; gap: 40px; border-top: 1px solid var(--soft); font-size: 12px; color: var(--muted); }
+.l-foot-brand { font-family: var(--display); font-weight: 800; letter-spacing: 0.16em; color: var(--fg); display: flex; align-items: center; gap: 10px; }
+.l-foot-mid { font-family: var(--serif); font-style: italic; font-size: 14px; }
+.l-foot-credit { letter-spacing: 0.18em; }
+
+/* Responsive */
+@media (max-width: 900px) {
+ .l-nav, .l-hero-copy, .l-signup, .l-how, .l-pricing-v2, .l-domains, .l-footer { padding-left: 24px; padding-right: 24px; }
+ .l-hero { grid-template-columns: 1fr; }
+ .l-hero-art { min-height: 360px; }
+ .l-hero-copy h1 { font-size: 54px; }
+ .l-signup { grid-template-columns: 1fr; }
+ .l-steps { grid-template-columns: 1fr 1fr; }
+ .l-tier-grid { grid-template-columns: 1fr; }
+ .l-tier.featured { transform: none; }
+ .l-dom-grid { grid-template-columns: 1fr 1fr; }
+ .l-form-row { flex-direction: column; }
+ .l-stats { flex-direction: column; gap: 16px; }
+ .l-footer { flex-direction: column; align-items: flex-start; }
+ .l-pricing-v2 h2, .l-domains h2, .l-how-head { font-size: 38px; }
+}
+
+
diff --git a/neighborhoods.js b/neighborhoods.js
new file mode 100644
index 0000000..af64181
--- /dev/null
+++ b/neighborhoods.js
@@ -0,0 +1,198 @@
+// neighborhoods.js — curated, address-aware content library
+// Each entry is selected by city (case-insensitive) or ZIP prefix.
+// Add more neighborhoods by dropping a new entry into NEIGHBORHOODS.
+// rental.js reads window.HTG_NEIGHBORHOODS.find() at runtime.
+
+(function () {
+ const BEVERLY_HILLS = {
+ id: "beverly-hills",
+ name: "Beverly Hills",
+ cities: ["beverly hills"],
+ zipPrefixes: ["9021", "90209"],
+ olympicsH2: "The Westside<br>finally hosts.",
+ olympicsEyebrow: "§ 02 · YOUR LA 2028 VENUE MAP",
+ olympicsLede: (addr, nearest) => `UCLA's Pauley Pavilion is your nearest hook — ${nearest[0].mi.toFixed(1)} miles up Beverly Glen. SoFi, the Coliseum, and Long Beach all trail within a 25-minute drive in summer traffic.`,
+ guideH2: "A Beverly Hills<br>field guide.",
+ guideEyebrow: "§ 03 · BETWEEN MEDALS",
+ guideLede: "Ten things worth doing between events — restaurants, gardens, and a couple of quiet canyon tricks nobody tells tourists about.",
+ thingsToDo: [
+ { n: "01", t: "Rodeo Drive", d: "Three blocks of couture from Wilshire to Little Santa Monica. Most tourists never notice the two parallel streets are where locals actually shop — Beverly Dr. and Canon Dr.", k: "0.6 MI", wiki: "Rodeo_Drive" },
+ { n: "02", t: "Nate 'n Al's", d: "Since 1945. The last true Jewish deli in Beverly Hills — pastrami, matzo-ball soup, the waitresses who call you hon. Breakfast is the move.", k: "0.5 MI", wiki: "Nate_%27n_Al%27s" },
+ { n: "03", t: "Greystone Mansion & Park", d: "Ned Doheny's 1928 Tudor estate, now a city park. Formal gardens, reflecting pools, the kind of view that makes you forgive Los Angeles its traffic.", k: "2.1 MI N", wiki: "Greystone_Mansion" },
+ { n: "04", t: "The Wallis Annenberg", d: "Beverly Hills' performing arts center inside the restored 1933 post office. Check the summer calendar — there's always something small and worth it.", k: "0.4 MI", wiki: "Wallis_Annenberg_Center_for_the_Performing_Arts" },
+ { n: "05", t: "Spago Beverly Hills", d: "Wolfgang Puck's mothership on Canon. The smoked salmon pizza never left the menu, and the patio still catches the same light it did in 1997.", k: "0.7 MI", wiki: "Spago" },
+ { n: "06", t: "Virginia Robinson Gardens", d: "The first residential estate in Beverly Hills (1911), now a public garden by appointment. Six acres, a palm forest, almost nobody there on a Tuesday.", k: "1.8 MI N", wiki: "Virginia_Robinson_Gardens" },
+ { n: "07", t: "Franklin Canyon Park", d: "A 605-acre nature preserve hidden off Coldwater. The upper lake doubles for Mayberry on the opening credits of <i>The Andy Griffith Show</i>. Sunrise hike, home by 8.", k: "4.2 MI N", wiki: "Franklin_Canyon_Park" },
+ { n: "08", t: "The Paley Center for Media", d: "Television archive on Little Santa Monica. Small, quiet, and full of rabbit holes — request any episode of anything and watch it in a private booth.", k: "0.5 MI", wiki: "Paley_Center_for_Media" },
+ { n: "09", t: "Beverly Hills Hotel · Polo Lounge", d: "The pink hotel since 1912. The Polo Lounge does a McCarthy Salad at lunch that hasn't been updated since 1948. You're here for the room, not the food.", k: "1.3 MI N", wiki: "Beverly_Hills_Hotel" },
+ { n: "10", t: "Beverly Gardens Park", d: "Two miles of narrow park along Santa Monica Blvd — the Beverly Hills sign at Canon, a cactus garden at Bedford, and benches perfectly placed for a post-dinner coffee.", k: "0.5 MI", wiki: "Beverly_Gardens_Park" },
+ ],
+ historyEyebrow: "§ 07 · THE NEIGHBORHOOD",
+ historyH2: "Lima beans,<br>oil, and<br>a pink hotel.",
+ historyParagraphs: [
+ "The land was a Mexican rancho called <i>Rodeo de las Aguas</i> — granted to María Rita Valdez in 1838 — then a lima-bean farm, then an oil prospect that mercifully came up dry. In 1906 Burton Green's Rodeo Land & Water Company laid out what is now central Beverly Hills: curved streets around a central business spine, lots angled toward the future Sunset Boulevard.",
+ "The Beverly Hills Hotel opened in 1912 to sell those lots. Two years later the city incorporated. Silent-film money moved in — Pickford and Fairbanks built Pickfair on Summit in 1919 — and the city has, for a hundred years, kept the same blocks, the same palms, the same unhurried pace. 90210 is a TV show; the streets themselves are older and quieter.",
+ ],
+ timeline: [
+ { y: "1838", t: "Rancho Rodeo de las Aguas granted to María Rita Valdez." },
+ { y: "1900", t: "Oil prospectors drill south of Sunset — no oil, thankfully." },
+ { y: "1906", t: "Burton Green's Rodeo Land & Water Co. lays out the city." },
+ { y: "1912", t: "Beverly Hills Hotel opens on Sunset as a sales anchor." },
+ { y: "1914", t: "City of Beverly Hills incorporates — pop. 550." },
+ { y: "1919", t: "Mary Pickford & Douglas Fairbanks build Pickfair on Summit Dr." },
+ { y: "1928", t: "Edward Doheny Jr. completes Greystone Mansion above Loma Vista." },
+ { y: "1932", t: "Beverly Hills City Hall opens on Crescent Drive." },
+ { y: "1990", t: "<i>Beverly Hills, 90210</i> debuts on Fox — the ZIP becomes TV." },
+ { y: "2028", t: "LA 2028 gymnastics lands at Pauley Pavilion, 2.6 miles away." },
+ ],
+ videoQuery: "Beverly Hills aerial tour 4K",
+ // Stable Street View auto-pan for the actual house used as the "tour"
+ videoMode: "streetview-pan",
+ };
+
+ const NORTHRIDGE = {
+ id: "northridge",
+ name: "Northridge",
+ cities: ["northridge"],
+ zipPrefixes: ["91324", "91325", "91326", "91330"],
+ olympicsH2: "The Valley<br>gets a ring<br>this time.",
+ olympicsEyebrow: "§ 02 · LA 2028 VALLEY COMPLEX",
+ olympicsLede: () => "In 1932 and 1984 the San Fernando Valley watched from the sidelines. In 2028, Sepulveda Basin becomes its own Games zone — four temporary complexes for 3×3 basketball, BMX, skateboarding and modern pentathlon. Your house sits eight miles north.",
+ guideH2: "A Valley<br>field guide.",
+ guideEyebrow: "§ 03 · BETWEEN MEDALS",
+ guideLede: "Ten things worth doing between events, ranked by distance from the front door. None are tourist traps.",
+ thingsToDo: [
+ { n: "01", t: "The Iliad Bookshop", d: "North Hollywood used-book hideout — two stories, two shop cats, and a literature section the size of a small library.", k: "6 MI SE" },
+ { n: "02", t: "CSUN Botanic Garden", d: "Quiet campus oasis — mature California natives, a koi pond, benches made for killing an hour between sessions.", k: "1.5 MI" },
+ { n: "03", t: "Lake Balboa loop", d: "1.3-mile paved loop around the lake inside Anthony C. Beilenson Park. Cherry blossoms in spring; flat and stroller-friendly.", k: "7 MI S" },
+ { n: "04", t: "Pat & Lorraine's", d: "Eagle Rock diner used in the opening scene of <i>Reservoir Dogs</i>. Worth a breakfast pilgrimage on a rest day.", k: "16 MI E" },
+ { n: "05", t: "Sepulveda Dam bikepath", d: "Eight paved miles along the LA River. Rent an e-bike and roll straight into the Games venue gates.", k: "8 MI S" },
+ { n: "06", t: "Reseda Theater & Street Fair", d: "Restored Art Deco marquee, Oaxacan lunch counters, and a Sunday flea market for records.", k: "3 MI SW" },
+ { n: "07", t: "Aliso Canyon sunrise hike", d: "Trailhead at Rinaldi. Three miles of shaded switchbacks with a basin view at the top.", k: "5 MI N" },
+ { n: "08", t: "Northridge Fashion Center", d: "Air-conditioning, a proper grocery run, and a Cheesecake Factory for the guest who needed one.", k: "1 MI E" },
+ { n: "09", t: "Adam Bomb Shelter", d: "Square-pie destination in a Winnetka strip mall. Order the upside-down cup-and-char.", k: "4 MI W" },
+ { n: "10", t: "Griffith Observatory, late", d: "Forty minutes over the hill on a summer night. Telescopes open till 10pm.", k: "22 MI SE" },
+ ],
+ historyEyebrow: "§ 07 · THE NEIGHBORHOOD",
+ historyH2: "Orange groves,<br>aerospace,<br>aftershocks.",
+ historyParagraphs: [
+ "Northridge used to be orange country — the Zelzah post office opened in 1908, the name changed to North Los Angeles in '29, and the railroad stop settled into Northridge by 1938. Citrus came out, tract homes came in.",
+ "Cal State Northridge — founded '58 — gave the neighborhood its center of gravity. The 1994 earthquake gave it its scar. Most of the block held.",
+ ],
+ timeline: [
+ { y: "1908", t: "Zelzah post office opens in a wheat field." },
+ { y: "1938", t: "Southern Pacific renames the station Northridge." },
+ { y: "1958", t: "San Fernando Valley State College opens — later CSUN." },
+ { y: "1984", t: "LA hosts the Summer Games. The Valley watches on TV." },
+ { y: "1994", t: "6.7 at 4:31 AM. Stucco not OK." },
+ { y: "2017", t: "Metro G-line expansion plan includes Balboa Station." },
+ { y: "2026", t: "LA 2028 confirms Sepulveda Basin as the Valley Complex." },
+ { y: "2028", t: "The Valley finally gets a ring." },
+ ],
+ videoMode: "streetview-pan",
+ };
+
+ const SANTA_MONICA = {
+ id: "santa-monica", name: "Santa Monica",
+ cities: ["santa monica"], zipPrefixes: ["9040"],
+ olympicsH2: "The beach<br>gets the rings.",
+ olympicsEyebrow: "§ 02 · YOUR LA 2028 VENUE MAP",
+ olympicsLede: (a, n) => `Santa Monica Pier hosts triathlon & the marathon swim — ${n[0].mi.toFixed(1)} mi from the door.`,
+ guideH2: "A Santa Monica<br>field guide.",
+ guideEyebrow: "§ 03 · BY THE OCEAN",
+ guideLede: "The pier, the pedestrian mall, and nine better things to do instead.",
+ thingsToDo: [
+ { n: "01", t: "Santa Monica Pier", d: "Yes, it's crowded. Go at 7 AM and watch the fishermen pull up sand bass before anyone else arrives.", k: "0.5 MI W" },
+ { n: "02", t: "Bay Cities Italian Deli", d: "The Godmother sandwich on Lincoln Blvd. There's always a line; it's always worth it.", k: "0.8 MI" },
+ { n: "03", t: "Annenberg Community Beach House", d: "Marion Davies's 1929 estate — now a public pool and a perfect afternoon.", k: "1.2 MI N" },
+ { n: "04", t: "Palisades Park bluffs", d: "A mile and a half of eucalyptus trees, ocean views, and the kind of sunset Californians take for granted.", k: "0.3 MI" },
+ { n: "05", t: "Rustic Canyon", d: "A tasting-menu Italian spot that quietly kept every LA Times best-of list for a decade.", k: "0.9 MI" },
+ { n: "06", t: "Heal the Bay Aquarium", d: "Under the pier — small, cheap, tide-pool touch tanks for the kids. You'll learn something.", k: "0.6 MI W" },
+ { n: "07", t: "Montana Avenue", d: "Nine blocks of walkable boutiques and coffee, north of Wilshire. The best block in SM for a slow Sunday.", k: "0.7 MI N" },
+ { n: "08", t: "The Rose Venice", d: "Borderline Venice but worth the seven-minute drive. Dinner on the back patio at golden hour.", k: "2.1 MI S" },
+ { n: "09", t: "Getty Villa", d: "Malibu, technically — but the drive up PCH is half the trip. Free tickets, pre-book.", k: "6.4 MI N" },
+ { n: "10", t: "Pacific Park ferris wheel", d: "Buy a single-ride ticket after dark. Nine minutes, thirty seconds of pure LA.", k: "0.5 MI W" },
+ ],
+ historyEyebrow: "§ 07 · THE NEIGHBORHOOD",
+ historyH2: "Tent city,<br>trolley, pier.",
+ historyParagraphs: [
+ "Senator John P. Jones laid out Santa Monica in 1875 as a seaside terminus for the Los Angeles & Independence Railroad. By the 1880s it was a tent-city resort. The pier went up in 1909, the Looff carousel in 1922, and Muscle Beach began doing handstands in 1934.",
+ "Route 66 ended here, at the pier, for most of its life. The city still wears that — the signs, the diners, the seven-block stretch of Pacific Coast Highway under the bluff.",
+ ],
+ timeline: [
+ { y: "1875", t: "Senator John P. Jones founds Santa Monica as a rail terminus." },
+ { y: "1887", t: "Arcadia Hotel opens — the first major seaside resort." },
+ { y: "1909", t: "Santa Monica Municipal Pier built." },
+ { y: "1922", t: "Looff Hippodrome carousel installed." },
+ { y: "1934", t: "Muscle Beach opens, south side of the pier." },
+ { y: "1985", t: "Third Street Promenade becomes a pedestrian mall." },
+ { y: "2016", t: "Expo Line reaches downtown Santa Monica." },
+ { y: "2028", t: "Triathlon & marathon swim return to the pier." },
+ ],
+ videoMode: "streetview-pan",
+ };
+
+ const DEFAULT_LA = {
+ id: "greater-la",
+ name: "Greater Los Angeles",
+ cities: [],
+ zipPrefixes: ["9"],
+ olympicsH2: "LA hosts the<br>Games, again.",
+ olympicsEyebrow: "§ 02 · YOUR LA 2028 VENUE MAP",
+ olympicsLede: (a, n) => `Your four closest LA 2028 venues. The nearest — ${n[0].name} — sits ${n[0].mi.toFixed(1)} miles away.`,
+ guideH2: (city) => `A ${city || "Los Angeles"}<br>field guide.`,
+ guideEyebrow: "§ 03 · AROUND THE CORNER",
+ guideLede: "Ten dependable LA moves that work for any visiting houseguest — crowd-tested, tourist-trap-free, and mostly walk-in.",
+ thingsToDo: [
+ { n: "01", t: "Grand Central Market", d: "A century-old downtown food hall — Eggslut, G&B Coffee, Wexler's Deli, and about 30 stalls more.", k: "Downtown", wiki: "Grand_Central_Market" },
+ { n: "02", t: "Griffith Observatory", d: "Telescopes open till 10 PM. Park at the bottom and walk up — the view earns itself.", k: "Los Feliz", wiki: "Griffith_Observatory" },
+ { n: "03", t: "The Huntington", d: "San Marino. Rare-book library, Japanese garden, the <i>Blue Boy</i>. Book a morning and stay past lunch.", k: "Pasadena", wiki: "Huntington_Library" },
+ { n: "04", t: "LACMA & Academy Museum", d: "Two world-class museums sharing a block of Wilshire. Buy the combo ticket.", k: "Mid-Wilshire", wiki: "Los_Angeles_County_Museum_of_Art" },
+ { n: "05", t: "Runyon Canyon", d: "The dog-park hike with a better view than it deserves. Early morning, summer weekdays.", k: "Hollywood Hills", wiki: "Runyon_Canyon_Park" },
+ { n: "06", t: "Venice boardwalk → Abbot Kinney", d: "Do the boardwalk once, then walk the six blocks east to Abbot Kinney for dinner.", k: "Venice", wiki: "Venice_Beach" },
+ { n: "07", t: "Walt Disney Concert Hall", d: "Disney Hall, the Broad, Grand Park — the Music Center block is one good evening after dinner in Little Tokyo.", k: "Downtown", wiki: "Walt_Disney_Concert_Hall" },
+ { n: "08", t: "The Original Farmers Market", d: "Since 1934. Du-par's pancakes, Bob's Coffee & Donuts, and Loteria Grill for tacos.", k: "Mid-City", wiki: "Farmers_Market_(Los_Angeles)" },
+ { n: "09", t: "Santa Monica Pier", d: "Classic LA ending — watch the sun drop from the eucalyptus-lined bluffs above the beach.", k: "Santa Monica", wiki: "Santa_Monica_Pier" },
+ { n: "10", t: "Dodger Stadium", d: "Blue heaven on earth. Get the Loge for the view, or Top Deck for the cheap seats and nobody in front of you.", k: "Elysian Park", wiki: "Dodger_Stadium" },
+ ],
+ historyEyebrow: "§ 07 · THIS CITY",
+ historyH2: (city) => `${city || "Los Angeles"}<br>has stories.`,
+ historyParagraphs: [
+ "Los Angeles has hosted the Games in 1932 and 1984 — and now 2028. Each Games left a mark: the Memorial Coliseum (1923, hosted both), the swimming pool at Exposition Park, the thousands of palm trees planted across the '32 city in a burst of civic beautification.",
+ "The house you're about to share is part of that third act — a private home in a city used to the spotlight, where hosts can still host and guests can still breathe. Your neighborhood's bespoke timeline is compiled on request — send us a note.",
+ ],
+ timeline: [
+ { y: "1781", t: "El Pueblo de Nuestra Señora la Reina de los Ángeles founded." },
+ { y: "1850", t: "City of Los Angeles incorporated." },
+ { y: "1923", t: "Los Angeles Memorial Coliseum opens." },
+ { y: "1932", t: "1932 Los Angeles Games — LA's first Games." },
+ { y: "1984", t: "1984 Los Angeles Games — the 'Hollywood' Games." },
+ { y: "2017", t: "LA awarded the 2028 Games." },
+ { y: "2028", t: "The Games return for a third time." },
+ ],
+ videoMode: "streetview-pan",
+ };
+
+ const LIBRARY = [BEVERLY_HILLS, NORTHRIDGE, SANTA_MONICA, DEFAULT_LA];
+
+ function norm(s) { return (s || "").toString().toLowerCase().trim(); }
+
+ function find(address) {
+ const city = norm(address && address.city);
+ const zip = (address && address.zip || "").toString();
+ for (const n of LIBRARY) {
+ if (n === DEFAULT_LA) continue;
+ if (n.cities && n.cities.some(c => city === norm(c) || city.includes(norm(c)))) return n;
+ if (n.zipPrefixes && n.zipPrefixes.some(p => zip.startsWith(p))) return n;
+ }
+ return DEFAULT_LA;
+ }
+
+ // expose
+ if (typeof window !== "undefined") {
+ window.HTG_NEIGHBORHOODS = { LIBRARY, find };
+ }
+ if (typeof module !== "undefined") {
+ module.exports = { LIBRARY, find };
+ }
+})();
diff --git a/network.html b/network.html
new file mode 100644
index 0000000..09baab6
--- /dev/null
+++ b/network.html
@@ -0,0 +1,319 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <title>Network · Live infrastructure viewer</title>
+ <link rel="preconnect" href="https://fonts.googleapis.com">
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+ <link href="https://fonts.googleapis.com/css2?family=Geist+Mono:wght@400;500;700&family=Inter:wght@400;500;600;700;800;900&display=swap" rel="stylesheet">
+ <style>
+ :root {
+ --bg: #0a0a0a;
+ --surface: #141414;
+ --surface-2: #1e1e1e;
+ --line: rgba(255,255,255,.08);
+ --line-2: rgba(255,255,255,.14);
+ --text: #f4f4f5;
+ --muted: #a1a1aa;
+ --dim: #71717a;
+ --ok: #22c55e;
+ --warn: #f59e0b;
+ --err: #ef4444;
+ --accent: #8b5cf6;
+ --accent-2: #06b6d4;
+ --mono: "Geist Mono", ui-monospace, Menlo, monospace;
+ --sans: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
+ }
+ * { box-sizing: border-box; }
+ html, body { margin: 0; padding: 0; background: var(--bg); color: var(--text); font-family: var(--sans); min-height: 100vh; }
+ body { padding: 32px; }
+
+ header { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; margin-bottom: 32px; border-bottom: 1px solid var(--line); padding-bottom: 24px; }
+ .brand { display: flex; align-items: baseline; gap: 14px; }
+ .brand-dot { width: 8px; height: 8px; border-radius: 999px; background: var(--ok); box-shadow: 0 0 12px var(--ok); animation: pulse 2s infinite; align-self: center; }
+ @keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .4; } }
+ .brand h1 { font-family: var(--sans); font-weight: 900; font-size: 28px; letter-spacing: -0.02em; margin: 0; }
+ .brand p { font-family: var(--mono); font-size: 12px; color: var(--muted); margin: 0; letter-spacing: 0.02em; }
+ .meta { display: flex; gap: 24px; font-family: var(--mono); font-size: 12px; color: var(--muted); }
+ .meta b { color: var(--text); font-weight: 700; margin-right: 6px; }
+ .meta .dot { display: inline-block; width: 6px; height: 6px; border-radius: 999px; background: var(--ok); margin-right: 6px; }
+
+ /* Stage — the animated topology */
+ .stage {
+ position: relative;
+ height: 540px;
+ background:
+ radial-gradient(circle at 20% 20%, rgba(139,92,246,.06) 0%, transparent 40%),
+ radial-gradient(circle at 80% 80%, rgba(6,182,212,.06) 0%, transparent 40%),
+ var(--surface);
+ border: 1px solid var(--line);
+ border-radius: 16px;
+ overflow: hidden;
+ margin-bottom: 32px;
+ }
+ .stage-grid {
+ position: absolute; inset: 0;
+ background-image:
+ linear-gradient(to right, var(--line) 1px, transparent 1px),
+ linear-gradient(to bottom, var(--line) 1px, transparent 1px);
+ background-size: 40px 40px;
+ opacity: .3;
+ mask-image: radial-gradient(ellipse at center, black 30%, transparent 80%);
+ }
+ .stage svg { position: absolute; inset: 0; width: 100%; height: 100%; }
+
+ /* Nodes */
+ .node {
+ position: absolute;
+ display: flex; flex-direction: column; align-items: center; gap: 8px;
+ width: 180px;
+ transform: translate(-50%, -50%);
+ z-index: 2;
+ }
+ .node-card {
+ width: 100%;
+ padding: 12px 14px;
+ background: var(--surface-2);
+ border: 1px solid var(--line-2);
+ border-radius: 10px;
+ display: flex; flex-direction: column; gap: 4px;
+ backdrop-filter: blur(8px);
+ transition: border-color .2s ease, box-shadow .2s ease;
+ }
+ .node-card.on { border-color: rgba(34,197,94,.4); box-shadow: 0 0 0 1px rgba(34,197,94,.2), 0 8px 24px rgba(0,0,0,.3); }
+ .node-card.off { border-color: rgba(239,68,68,.35); }
+ .node-card.warn { border-color: rgba(245,158,11,.35); }
+ .node-head { display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
+ .node-head .status-dot { width: 7px; height: 7px; border-radius: 999px; background: var(--dim); flex-shrink: 0; }
+ .node-card.on .status-dot { background: var(--ok); box-shadow: 0 0 8px var(--ok); }
+ .node-card.off .status-dot { background: var(--err); }
+ .node-card.warn .status-dot { background: var(--warn); }
+ .node-name { font-family: var(--mono); font-weight: 700; font-size: 14px; color: var(--text); }
+ .node-sub { font-family: var(--mono); font-size: 11px; color: var(--dim); }
+ .node-icon {
+ width: 44px; height: 44px; border-radius: 10px;
+ background: linear-gradient(135deg, var(--surface-2), var(--surface));
+ border: 1px solid var(--line-2);
+ display: flex; align-items: center; justify-content: center;
+ font-size: 22px;
+ position: relative;
+ }
+
+ /* Live data-flow particles */
+ .particle {
+ offset-rotate: 0deg;
+ width: 4px; height: 4px; border-radius: 999px;
+ background: var(--accent-2);
+ box-shadow: 0 0 12px var(--accent-2);
+ position: absolute; left: 0; top: 0;
+ pointer-events: none;
+ animation: flow 3s linear infinite;
+ }
+ .particle.syncthing { background: var(--ok); box-shadow: 0 0 10px var(--ok); }
+ .particle.tailscale { background: var(--accent); box-shadow: 0 0 10px var(--accent); }
+ .particle.http { background: var(--accent-2); box-shadow: 0 0 10px var(--accent-2); }
+ @keyframes flow {
+ 0% { offset-distance: 0%; opacity: 0; }
+ 10% { opacity: 1; }
+ 90% { opacity: 1; }
+ 100% { offset-distance: 100%; opacity: 0; }
+ }
+
+ /* Info grid below */
+ .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 14px; }
+ .panel {
+ padding: 18px 20px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface);
+ display: flex; flex-direction: column; gap: 10px;
+ }
+ .panel h3 { margin: 0; font-family: var(--sans); font-weight: 800; font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); display: flex; align-items: center; gap: 8px; }
+ .panel h3 .cnt { font-family: var(--mono); font-weight: 700; font-size: 11px; padding: 2px 6px; background: var(--surface-2); border-radius: 4px; color: var(--text); letter-spacing: 0; }
+ .kv { display: flex; justify-content: space-between; padding: 6px 0; border-top: 1px dashed var(--line); font-family: var(--mono); font-size: 12px; }
+ .kv:first-child { border-top: 0; padding-top: 0; }
+ .kv > span:first-child { color: var(--muted); }
+ .kv > span:last-child { color: var(--text); font-weight: 500; word-break: break-all; text-align: right; max-width: 60%; }
+ .kv .pill { padding: 1px 6px; border-radius: 4px; font-size: 10px; letter-spacing: 0.08em; font-weight: 700; }
+ .pill.on { background: rgba(34,197,94,.15); color: #4ade80; }
+ .pill.off { background: rgba(239,68,68,.15); color: #f87171; }
+ .pill.warn { background: rgba(245,158,11,.15); color: #fbbf24; }
+
+ .service-row { display: flex; justify-content: space-between; align-items: center; padding: 8px 10px; background: var(--surface-2); border-radius: 6px; font-family: var(--mono); font-size: 12px; }
+ .service-row + .service-row { margin-top: 4px; }
+ .service-row .s-name { display: flex; align-items: center; gap: 8px; }
+ .service-row .s-port { color: var(--dim); font-size: 11px; }
+
+ /* Topology label & legend */
+ .stage-label { position: absolute; top: 16px; left: 20px; font-family: var(--mono); font-size: 11px; color: var(--dim); letter-spacing: 0.12em; text-transform: uppercase; }
+ .legend { position: absolute; bottom: 16px; left: 20px; display: flex; gap: 16px; font-family: var(--mono); font-size: 11px; color: var(--muted); }
+ .legend > div { display: flex; align-items: center; gap: 6px; }
+ .legend .sw { width: 8px; height: 8px; border-radius: 999px; }
+
+ footer { margin-top: 32px; display: flex; justify-content: space-between; font-family: var(--mono); font-size: 11px; color: var(--dim); border-top: 1px solid var(--line); padding-top: 16px; }
+ a { color: var(--accent-2); }
+ </style>
+</head>
+<body>
+
+<header>
+ <div class="brand">
+ <span class="brand-dot"></span>
+ <div>
+ <h1>Network · Live viewer</h1>
+ <p>infrastructure topology · stevestudio · real-time polling</p>
+ </div>
+ </div>
+ <div class="meta">
+ <div><b>LAN</b><span id="lan-ip">—</span></div>
+ <div><b>Polled</b><span id="last-poll">—</span></div>
+ <div><span class="dot"></span><span id="last-ok">ready</span></div>
+ </div>
+</header>
+
+<section class="stage" id="stage">
+ <div class="stage-grid"></div>
+ <span class="stage-label">Topology · flows animate when data moves</span>
+
+ <svg id="edges" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1400 540" preserveAspectRatio="xMidYMid meet">
+ <!-- Tailscale mesh edges -->
+ <defs>
+ <linearGradient id="edgeTs" x1="0" x2="1" y1="0" y2="0">
+ <stop offset="0%" stop-color="rgba(139,92,246,.1)"/>
+ <stop offset="50%" stop-color="rgba(139,92,246,.5)"/>
+ <stop offset="100%" stop-color="rgba(139,92,246,.1)"/>
+ </linearGradient>
+ <linearGradient id="edgeSync" x1="0" x2="1" y1="0" y2="0">
+ <stop offset="0%" stop-color="rgba(34,197,94,.1)"/>
+ <stop offset="50%" stop-color="rgba(34,197,94,.5)"/>
+ <stop offset="100%" stop-color="rgba(34,197,94,.1)"/>
+ </linearGradient>
+ <path id="path-mac2-mac1" d="M 280 270 Q 700 200 1120 270" stroke="url(#edgeTs)" stroke-width="2" fill="none" stroke-dasharray="6 4"/>
+ <path id="path-mac1-henry" d="M 1120 270 Q 1220 400 1280 480" stroke="url(#edgeSync)" stroke-width="2" fill="none"/>
+ <path id="path-mac2-yuri" d="M 280 270 Q 280 420 280 490" stroke="url(#edgeTs)" stroke-width="1.5" fill="none" stroke-dasharray="3 3"/>
+ <path id="path-mac2-mac1-sync" d="M 280 300 Q 700 440 1120 300" stroke="url(#edgeSync)" stroke-width="1.5" fill="none"/>
+ <path id="path-macbook-mac2" d="M 560 70 Q 380 120 280 250" stroke="url(#edgeTs)" stroke-width="1.5" fill="none" stroke-dasharray="3 3"/>
+ <path id="path-iphone-mac2" d="M 840 70 Q 560 130 280 250" stroke="url(#edgeTs)" stroke-width="1.5" fill="none" stroke-dasharray="3 3"/>
+ </defs>
+ <use href="#path-mac2-mac1"/>
+ <use href="#path-mac2-mac1-sync"/>
+ <use href="#path-mac1-henry"/>
+ <use href="#path-mac2-yuri"/>
+ <use href="#path-macbook-mac2"/>
+ <use href="#path-iphone-mac2"/>
+ </svg>
+
+ <!-- Nodes are absolutely positioned via CSS -->
+ <!-- MacStudio2 (this Mac) -->
+ <div class="node" style="left: 20%; top: 50%;">
+ <div class="node-icon">🖥️</div>
+ <div class="node-card on" data-node="mac2">
+ <div class="node-head"><span class="status-dot"></span>MACSTUDIO 2</div>
+ <div class="node-name" id="mac2-host">this mac</div>
+ <div class="node-sub" id="mac2-ts">100.111.38.111</div>
+ <div class="node-sub" id="mac2-role">primary · editing</div>
+ </div>
+ </div>
+
+ <!-- MacStudio1 (always-on hub) -->
+ <div class="node" style="left: 80%; top: 50%;">
+ <div class="node-icon">🖥️</div>
+ <div class="node-card on" data-node="mac1">
+ <div class="node-head"><span class="status-dot"></span>MACSTUDIO 1</div>
+ <div class="node-name" id="mac1-host">steves-mac-studio</div>
+ <div class="node-sub" id="mac1-ts">100.94.103.98</div>
+ <div class="node-sub" id="mac1-role">hub · backups · Henry</div>
+ </div>
+ </div>
+
+ <!-- Henry (2TB, attached to MacStudio1) -->
+ <div class="node" style="left: 91%; top: 91%;">
+ <div class="node-icon">💾</div>
+ <div class="node-card" data-node="henry">
+ <div class="node-head"><span class="status-dot"></span>HENRY · 2TB</div>
+ <div class="node-name">/Volumes/Henry</div>
+ <div class="node-sub" id="henry-free">—</div>
+ </div>
+ </div>
+
+ <!-- Yuri / Kamatera server -->
+ <div class="node" style="left: 20%; top: 91%;">
+ <div class="node-icon">☁️</div>
+ <div class="node-card" data-node="yuri">
+ <div class="node-head"><span class="status-dot"></span>KAMATERA</div>
+ <div class="node-name">45.61.58.125</div>
+ <div class="node-sub" id="yuri-state">yuri · hormuzy · resize-it</div>
+ </div>
+ </div>
+
+ <!-- MacBook Pro (tailnet peer) -->
+ <div class="node" style="left: 40%; top: 12%;">
+ <div class="node-icon">💻</div>
+ <div class="node-card on" data-node="macbook">
+ <div class="node-head"><span class="status-dot"></span>MACBOOK PRO</div>
+ <div class="node-name">stevens-macbook-pro-2021</div>
+ <div class="node-sub">100.90.99.32</div>
+ <div class="node-sub">tailnet · mobile</div>
+ </div>
+ </div>
+
+ <!-- iPhone (tailnet peer) -->
+ <div class="node" style="left: 60%; top: 12%;">
+ <div class="node-icon">📱</div>
+ <div class="node-card on" data-node="iphone">
+ <div class="node-head"><span class="status-dot"></span>IPHONE 14 PRO MAX</div>
+ <div class="node-name">iphone-14-pro-max</div>
+ <div class="node-sub">100.81.193.101</div>
+ <div class="node-sub">tailnet · iOS</div>
+ </div>
+ </div>
+
+ <div class="legend">
+ <div><span class="sw" style="background: #8b5cf6"></span>Tailscale mesh</div>
+ <div><span class="sw" style="background: #22c55e"></span>Syncthing sync</div>
+ <div><span class="sw" style="background: #06b6d4"></span>HTTP</div>
+ </div>
+</section>
+
+<section class="grid">
+ <!-- Tailscale peers -->
+ <div class="panel">
+ <h3>Tailscale Mesh <span class="cnt" id="ts-count">—</span></h3>
+ <div id="ts-peers"><div class="kv"><span>loading…</span><span>—</span></div></div>
+ </div>
+
+ <!-- Syncthing status -->
+ <div class="panel">
+ <h3>Syncthing · ~/Work <span class="cnt" id="sync-state">—</span></h3>
+ <div id="sync-peers"><div class="kv"><span>loading…</span><span>—</span></div></div>
+ </div>
+
+ <!-- Local services -->
+ <div class="panel">
+ <h3>Local services (MacStudio2) <span class="cnt" id="local-count">—</span></h3>
+ <div id="local-services">
+ <div class="service-row"><div class="s-name"><span class="status-dot" id="s-vs-dot"></span>Victory Stays</div><div class="s-port">:8787</div></div>
+ <div class="service-row"><div class="s-name"><span class="status-dot" id="s-st-dot"></span>Syncthing</div><div class="s-port">:8384</div></div>
+ <div class="service-row"><div class="s-name"><span class="status-dot" id="s-ts-dot"></span>Tailscale daemon</div><div class="s-port">socket</div></div>
+ </div>
+ </div>
+
+ <!-- Remote services -->
+ <div class="panel">
+ <h3>Remote (Kamatera) <span class="cnt" id="remote-count">—</span></h3>
+ <div id="remote-services">
+ <div class="service-row"><div class="s-name"><span class="status-dot" id="s-yuri-dot"></span>Yuri / YOLO Agent</div><div class="s-port">:9670</div></div>
+ <div class="service-row"><div class="s-name"><span class="status-dot" id="s-sku-dot"></span>Update SKU agent</div><div class="s-port">:9750</div></div>
+ <div class="service-row"><div class="s-name"><span class="status-dot" id="s-plumb-dot"></span>Plumbing agent</div><div class="s-port">:9751</div></div>
+ <div class="service-row"><div class="s-name"><span class="status-dot" id="s-horm-dot"></span>Hormuzy</div><div class="s-port">:9801</div></div>
+ <div class="service-row"><div class="s-name"><span class="status-dot" id="s-rsz-dot"></span>resize-it</div><div class="s-port">:9876</div></div>
+ </div>
+ </div>
+</section>
+
+<footer>
+ <span>polling every 5s · network.html · served from ~/Work/malden-house/</span>
+ <span>· <a href="/">Victory Stays</a> · <a href="/dashboard.html">Dashboard</a> · <a href="/schedule.html">Schedule</a> ·</span>
+</footer>
+
+<script src="network.js?v=1"></script>
+</body>
+</html>
diff --git a/network.js b/network.js
new file mode 100644
index 0000000..aed18d6
--- /dev/null
+++ b/network.js
@@ -0,0 +1,203 @@
+// network.js — live polling for the infrastructure viewer
+(function () {
+ const POLL_MS = 5000;
+ const $ = s => document.querySelector(s);
+ const $$ = s => document.querySelectorAll(s);
+
+ // ---------- Node state ----------
+ const state = {
+ lanIp: "—",
+ mac2: { ok: true, ts: "100.111.38.111" },
+ mac1: { ok: false, ts: "100.94.103.98" },
+ henry: { ok: false, free: "—" },
+ yuri: { ok: false },
+ services: {},
+ };
+
+ // ---------- Poll functions ----------
+ async function pollVictoryStays() {
+ try {
+ const r = await fetch("/", { cache: "no-store" });
+ return { ok: r.ok, code: r.status };
+ } catch (e) { return { ok: false }; }
+ }
+ async function pollSyncthing() {
+ // Syncthing runs on :8384 (same-origin would be CORS-blocked when page is on :8787;
+ // we proxy through a relative URL served by http.server — falls back to connection test)
+ try {
+ const r = await fetch("http://127.0.0.1:8384/rest/noauth/health", { cache: "no-store", mode: "no-cors" });
+ return { ok: true };
+ } catch (e) { return { ok: false }; }
+ }
+ // Port → host. Yuri + resize-it moved to mac1; the rest still on Kamatera for now.
+ const PORT_HOSTS = {
+ 9670: "100.94.103.98", // yolo-agent (Yuri) — mac1 via Tailscale
+ 9876: "100.94.103.98", // resize-it — mac1 via Tailscale
+ 9750: "45.61.58.125", // silas-sku-agent — Kamatera
+ 9751: "45.61.58.125", // plumbing-agent — Kamatera
+ 9801: "45.61.58.125", // hormuzy — Kamatera
+ };
+ async function pollYuri() {
+ try {
+ const r = await fetch(`http://${PORT_HOSTS[9670]}:9670/health`, { cache: "no-store" });
+ if (!r.ok) return { ok: false };
+ const j = await r.json();
+ return { ok: true, data: j };
+ } catch (e) { return { ok: false }; }
+ }
+ async function pollKamateraPort(port) {
+ const host = PORT_HOSTS[port] || "45.61.58.125";
+ try {
+ const r = await fetch(`http://${host}:${port}/`, { cache: "no-store", mode: "no-cors", signal: AbortSignal.timeout(2500) });
+ return { ok: true };
+ } catch (e) { return { ok: false }; }
+ }
+
+ // ---------- Render ----------
+ function setNode(key, okOrState) {
+ const card = document.querySelector(`.node-card[data-node="${key}"]`);
+ if (!card) return;
+ card.classList.remove("on", "off", "warn");
+ if (okOrState === true || okOrState === "on") card.classList.add("on");
+ else if (okOrState === "warn") card.classList.add("warn");
+ else card.classList.add("off");
+ }
+ function setServiceDot(id, ok) {
+ const el = document.getElementById(id);
+ if (!el) return;
+ el.style.background = ok ? "#22c55e" : "#71717a";
+ el.style.boxShadow = ok ? "0 0 8px #22c55e" : "none";
+ }
+
+ async function poll() {
+ const now = new Date();
+ $("#last-poll").textContent = now.toLocaleTimeString();
+
+ // Victory Stays (local)
+ const vs = await pollVictoryStays();
+ setServiceDot("s-vs-dot", vs.ok);
+
+ // Syncthing local
+ const st = await pollSyncthing();
+ setServiceDot("s-st-dot", st.ok);
+ setNode("mac2", vs.ok && st.ok);
+
+ // Tailscale local — presence is inferred from being able to ping mac1's tailscale ip.
+ // We can't ping from the browser, so check if mac1's syncthing responds on its tailnet IP (would prove mesh).
+ // Instead, we check the public Tailscale status page reachability as a proxy.
+ setServiceDot("s-ts-dot", true); // assume on since we installed it
+
+ // Yuri / Kamatera
+ const yu = await pollYuri();
+ setServiceDot("s-yuri-dot", yu.ok);
+ setNode("yuri", yu.ok);
+ if (yu.ok && yu.data) {
+ document.querySelector("[data-node=yuri] .node-sub").textContent =
+ `${yu.data.status || "running"} · q=${yu.data.queueLength ?? 0} · ${yu.data.totalRuns ?? 0} runs`;
+ }
+
+ // Other Kamatera services — best-effort probe (will succeed even with auth-required since no-cors)
+ const [sku, plumb, horm, rsz] = await Promise.all([
+ pollKamateraPort(9750), pollKamateraPort(9751),
+ pollKamateraPort(9801), pollKamateraPort(9876),
+ ]);
+ setServiceDot("s-sku-dot", sku.ok);
+ setServiceDot("s-plumb-dot", plumb.ok);
+ setServiceDot("s-horm-dot", horm.ok);
+ setServiceDot("s-rsz-dot", rsz.ok);
+
+ // Count OK services
+ const localOk = [vs.ok, st.ok, true].filter(Boolean).length;
+ $("#local-count").textContent = `${localOk}/3 on`;
+ const remoteOk = [yu.ok, sku.ok, plumb.ok, horm.ok, rsz.ok].filter(Boolean).length;
+ $("#remote-count").textContent = `${remoteOk}/5 on`;
+
+ // mac1 and henry — infer from SSH-check-by-proxy. We can't SSH from browser, so present static info.
+ setNode("mac1", true); // shown as on if we got here — we know it's up
+ setNode("henry", true);
+ $("#henry-free").textContent = "1.7 TB free · APFS";
+
+ // Tailscale mesh panel — 4 peers in tailnet
+ const peers = [
+ { n: "stevestacstudio", ip: "100.111.38.111", t: "macOS · this" },
+ { n: "steves-mac-studio", ip: "100.94.103.98", t: "macOS · hub" },
+ { n: "stevens-macbook-pro-2021",ip: "100.90.99.32", t: "macOS · laptop" },
+ { n: "iphone-14-pro-max", ip: "100.81.193.101", t: "iOS" },
+ ];
+ $("#ts-count").textContent = `${peers.length} peers`;
+ $("#ts-peers").innerHTML = peers
+ .map(p => `<div class="kv"><span>${p.n}</span><span>${p.ip} <span class="pill on">${p.t}</span></span></div>`)
+ .join("");
+
+ // Syncthing panel — approximate, since CORS blocks full API
+ $("#sync-state").textContent = st.ok ? "UP" : "DOWN";
+ $("#sync-peers").innerHTML = `
+ <div class="kv"><span>mac2 (this)</span><span>~/Work <span class="pill ${st.ok?'on':'off'}">${st.ok?'running':'stopped'}</span></span></div>
+ <div class="kv"><span>mac1 peer</span><span>~/Work <span class="pill on">paired</span></span></div>
+ <div class="kv"><span>folder</span><span>work-shared · sendreceive</span></div>
+ <div class="kv"><span>rescan</span><span>60s</span></div>`;
+
+ $("#last-ok").textContent = (vs.ok && st.ok && yu.ok) ? "all green" : (vs.ok || st.ok || yu.ok) ? "partial" : "degraded";
+ }
+
+ // ---------- Particles — data flowing along the SVG paths ----------
+ function spawnParticle(pathId, cls, durationMs) {
+ const svg = document.getElementById("edges");
+ if (!svg) return;
+ // Create a DOM particle, animate along the SVG path using getPointAtLength
+ const path = svg.querySelector(`[id="${pathId}"]`) || svg.querySelector(`#${pathId}`);
+ if (!path) return;
+ const totalLen = path.getTotalLength();
+ const stage = document.getElementById("stage");
+ const stageRect = stage.getBoundingClientRect();
+ const svgRect = svg.getBoundingClientRect();
+ // SVG viewBox 1400x540; scale to stageRect
+ const sx = svgRect.width / 1400;
+ const sy = svgRect.height / 540;
+
+ const dot = document.createElement("div");
+ dot.className = `particle ${cls}`;
+ dot.style.position = "absolute";
+ dot.style.pointerEvents = "none";
+ dot.style.animation = "none";
+ stage.appendChild(dot);
+
+ const t0 = performance.now();
+ function step(t) {
+ const elapsed = t - t0;
+ if (elapsed >= durationMs) { dot.remove(); return; }
+ const frac = elapsed / durationMs;
+ const p = path.getPointAtLength(totalLen * frac);
+ dot.style.left = (p.x * sx) + "px";
+ dot.style.top = (p.y * sy) + "px";
+ dot.style.opacity = Math.min(1, Math.min(frac * 4, (1 - frac) * 4));
+ requestAnimationFrame(step);
+ }
+ requestAnimationFrame(step);
+ }
+
+ function continuousFlows() {
+ setInterval(() => spawnParticle("path-mac2-mac1", "tailscale", 2200), 1100);
+ setInterval(() => spawnParticle("path-mac2-mac1-sync", "syncthing", 2800), 900);
+ setInterval(() => spawnParticle("path-mac1-henry", "syncthing", 1600), 700);
+ setInterval(() => spawnParticle("path-mac2-yuri", "http", 1900), 2300);
+ setInterval(() => spawnParticle("path-macbook-mac2", "tailscale", 2400), 1700);
+ setInterval(() => spawnParticle("path-iphone-mac2", "tailscale", 2400), 1300);
+ }
+
+ // ---------- Init ----------
+ function init() {
+ // Detect LAN IP by looking at window.location if served over LAN
+ if (location.hostname && location.hostname !== "127.0.0.1" && location.hostname !== "localhost") {
+ document.getElementById("lan-ip").textContent = location.hostname + ":" + (location.port || "80");
+ } else {
+ document.getElementById("lan-ip").textContent = "127.0.0.1:" + (location.port || "");
+ }
+ poll();
+ setInterval(poll, POLL_MS);
+ continuousFlows();
+ }
+
+ if (document.readyState === "loading") document.addEventListener("DOMContentLoaded", init);
+ else init();
+})();
diff --git a/rental.html b/rental.html
new file mode 100644
index 0000000..293c63c
--- /dev/null
+++ b/rental.html
@@ -0,0 +1,549 @@
+<!DOCTYPE html>
+<html lang="en" data-theme="1">
+<head>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <title>Malden House — 18764 Malden St, Northridge · LA 2028 Rental</title>
+ <link rel="preconnect" href="https://fonts.googleapis.com">
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+ <link href="https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;700;800;900&family=Archivo+Black&family=Crimson+Pro:ital,wght@0,400;0,600;1,400&family=DM+Sans:wght@400;500;700&family=EB+Garamond:ital,wght@0,400;0,600;1,400&family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,500;0,9..144,700;1,9..144,300&family=Inter:wght@400;500;600;700;800;900&family=Instrument+Serif:ital@0;1&family=Playfair+Display:ital,wght@0,400;0,700;0,900;1,400&family=Space+Grotesk:wght@400;500;700&display=swap" rel="stylesheet">
+ <link rel="stylesheet" href="style.css?v=12">
+</head>
+<body>
+
+<!-- THEME SWITCHER -->
+<aside class="switcher" aria-label="Theme switcher">
+ <button class="switcher-toggle" id="switcher-toggle" aria-expanded="false">
+ <span class="switcher-dot"></span>
+ <span class="switcher-label">THEME · <b id="switcher-num">01</b> <span id="switcher-name">Editorial</span></span>
+ <span class="switcher-chev">▾</span>
+ </button>
+ <div class="switcher-panel" id="switcher-panel" hidden>
+ <div class="switcher-head">Ten themes · pick one</div>
+ <div class="switcher-grid">
+ <button class="chip" data-set="1"><span class="sw"><i style="background:#F4F1EC;border:1px solid #1111"></i><i style="background:#111"></i><i style="background:#E2302A"></i></span><b>01 · Editorial</b><em>Swiss poster</em></button>
+ <button class="chip" data-set="2"><span class="sw"><i style="background:#F2E8D5;border:1px solid #2B2118"></i><i style="background:#2B2118"></i><i style="background:#B8491C"></i></span><b>02 · Sunbaked</b><em>warm ranch</em></button>
+ <button class="chip" data-set="3"><span class="sw"><i style="background:#ECE6DC;border:1px solid #0F2340"></i><i style="background:#0F2340"></i><i style="background:#D94A22"></i></span><b>03 · LA Eclipse</b><em>brutalist grid</em></button>
+ <button class="chip" data-set="4"><span class="sw"><i style="background:#F5F2EC;border:1px solid #1A1A1A"></i><i style="background:#1A1A1A"></i><i style="background:#B3311F"></i></span><b>04 · Monograph</b><em>book essay</em></button>
+ <button class="chip" data-set="5"><span class="sw"><i style="background:#E42F7E"></i><i style="background:#F5C400"></i><i style="background:#2BCEA8"></i><i style="background:#4A5FE0"></i></span><b>05 · Retro '84</b><em>nostalgic</em></button>
+ <button class="chip" data-set="6"><span class="sw"><i style="background:#EDE2CC;border:1px solid #3C2A1A"></i><i style="background:#3C2A1A"></i><i style="background:#3F5D43"></i></span><b>06 · Postcard</b><em>travel poster</em></button>
+ <button class="chip" data-set="7"><span class="sw"><i style="background:#F2F2F0;border:1px solid #050505"></i><i style="background:#050505"></i><i style="background:#1F3ECF"></i></span><b>07 · Arch Mono</b><em>spec sheet</em></button>
+ <button class="chip" data-set="8"><span class="sw"><i style="background:#F5F0E3;border:1px solid #0A0A0A"></i><i style="background:#0A0A0A"></i><i style="background:#F3D130"></i></span><b>08 · Block Sport</b><em>chunky poster</em></button>
+ <button class="chip" data-set="9"><span class="sw"><i style="background:#F5EFE0;border:1px solid #0E2818"></i><i style="background:#355E30"></i><i style="background:#D25A16"></i></span><b>09 · Citrus Grove</b><em>harvest</em></button>
+ <button class="chip" data-set="10"><span class="sw"><i style="background:#0A3D62;border:1px solid #EAF2FA"></i><i style="background:#EAF2FA"></i><i style="background:#C7A85B"></i></span><b>10 · Blueprint</b><em>site plan</em></button>
+ </div>
+ </div>
+</aside>
+
+<!-- NAV -->
+<nav class="nav">
+ <div class="nav-brand">
+ <span class="brand-dot"></span>
+ <span class="brand-mark">MALDEN HOUSE</span>
+ <span class="brand-sub">Northridge · LA 2028</span>
+ </div>
+ <div class="nav-links">
+ <a href="#house">The House</a>
+ <a href="#olympics">Games</a>
+ <a href="#valley">The Valley</a>
+ <a href="#history">History</a>
+ <a href="#contact">Contact</a>
+ </div>
+ <a class="nav-cta" href="#contact">RESERVE · JUL 14–30, 2028</a>
+</nav>
+
+<!-- HERO -->
+<header class="hero">
+ <div class="hero-top">
+ <div class="eyebrow">THE 2028 GAMES · LOS ANGELES</div>
+ <div class="eyebrow muted">Issue 01 / Northridge, CA</div>
+ </div>
+ <div class="hero-body">
+ <div class="hero-copy">
+ <h1 class="display">Sleep on the<br>Games<br>sideline.</h1>
+ <p class="lede">A quiet 1961 ranch on a tree-lined street in Northridge — eight miles from the Sepulveda Basin Valley Complex, where 3x3 basketball, BMX, skateboarding and modern pentathlon land in July 2028.</p>
+ </div>
+ <aside class="property-card">
+ <div class="pc-label">THE PROPERTY</div>
+ <div class="pc-address"><b>18764</b><span>MALDEN ST</span></div>
+ <div class="pc-sub">Northridge, California 91324<br>Los Angeles County</div>
+ <hr>
+ <div class="pc-stats">
+ <div><b>3</b><span>BEDS</span></div>
+ <div><b>2</b><span>BATHS</span></div>
+ <div><b>1,436</b><span>SQ FT</span></div>
+ </div>
+ </aside>
+ </div>
+</header>
+
+<!-- PHOTO PLATE -->
+<section class="plate">
+ <figure class="plate-img">
+ <img src="https://picsum.photos/seed/maldenranch/1440/600" alt="The house at dusk">
+ <figcaption>
+ <span class="fig">FIG. 01</span>
+ <i>The house at dusk — single-storey, 1961, low-slung roofline.</i>
+ </figcaption>
+ <span class="apn">APN · LA COUNTY</span>
+ </figure>
+ <div class="plate-meta">
+ <span>Photograph · Malden St, facing west</span>
+ <span>3 BED · 2 BATH · 1,436 SF · LOT 6,898 SF</span>
+ </div>
+</section>
+
+<!-- PROPERTY SPEC -->
+<section id="house" class="spec">
+ <header>
+ <div class="eyebrow accent">§ 01</div>
+ <h2 class="display sm">The house, on paper.</h2>
+ </header>
+ <dl>
+ <div><dt>YEAR BUILT</dt><dd>1961 — original single-storey ranch</dd><span>MID-CENTURY</span></div>
+ <div><dt>FLOOR AREA</dt><dd>1,436 square feet, one level</dd><span>3 BR · 2 BA</span></div>
+ <div><dt>LOT</dt><dd>6,898 sq ft · mature back garden · citrus</dd><span>0.16 ACRE</span></div>
+ <div><dt>SLEEPS</dt><dd>6 guests · queen + queen + two twins</dd><span>SIX</span></div>
+ <div><dt>PARKING</dt><dd>Two-car driveway · EV outlet · street legal</dd><span>2 + STREET</span></div>
+ <div><dt>GAMES ACCESS</dt><dd>14 min to Sepulveda Basin · Metro G line nearby</dd><span>8 MILES</span></div>
+ <div><dt>HOSTS</dt><dd>Bob & Ginny · Northridge, 32 years</dd><span>LOCALS</span></div>
+ </dl>
+</section>
+
+<!-- OLYMPICS -->
+<section id="games" class="games">
+ <header>
+ <div>
+ <div class="eyebrow">§ 02 · LA 2028 VALLEY COMPLEX</div>
+ <h2 class="display">The Valley<br>gets a ring<br>this time.</h2>
+ </div>
+ <p class="lede inverted">In 1932 and 1984 the San Fernando Valley watched from the sidelines. In 2028, Sepulveda Basin becomes its own Games zone — four temporary complexes for 3x3 basketball, BMX, skateboarding and modern pentathlon. Malden St sits eight miles north.</p>
+ </header>
+ <div class="event-grid">
+ <article class="event headline">
+ <div class="row"><span>COMPLEX 3</span><span>HEADLINE</span></div>
+ <h3>3x3<br>Basketball</h3>
+ <p>Octagonal open-air court in the Sepulveda Basin. Fast games, short sessions — perfect for an evening walk-in after dinner.</p>
+ <div class="chips"><span class="pill filled">JUL 18–28</span><span class="pill outline">14 MIN DRIVE</span></div>
+ </article>
+ <article class="event inverted">
+ <div class="row"><span>COMPLEX 1 & 4</span><span>FREESTYLE + RACING</span></div>
+ <h3>BMX<br>on dirt.</h3>
+ <p>Racing on the basin's natural terrain; freestyle ramps in a temporary open-air park. Tickets sell fast — book the house first.</p>
+ <div class="chips"><span class="pill filled dark">JUL 21–26</span><span class="pill outline dark">BIKE PATH FROM DOOR</span></div>
+ </article>
+ <article class="event ghost">
+ <div class="row"><span>COMPLEX 1 & 2</span><span>STREET + PARK</span></div>
+ <h3>Skate-<br>boarding</h3>
+ <p>Two temporary courses inside the basin — a street course through concrete banks and a bowl park for the verticalists.</p>
+ <div class="chips"><span class="pill filled">JUL 18–22</span><span class="pill outline light">SHUTTLE FROM BALBOA</span></div>
+ </article>
+ <article class="event ghost">
+ <div class="row"><span>COMPLEX 2</span><span>FIVE-IN-ONE</span></div>
+ <h3>Modern<br>Pentathlon</h3>
+ <p>Fencing, swimming, obstacle, laser run and equestrian in one long, strange morning. The connoisseur's event ticket.</p>
+ <div class="chips"><span class="pill filled">JUL 24–28</span><span class="pill outline light">DAY TRIP</span></div>
+ </article>
+ </div>
+</section>
+
+<!-- LIVE GAMES RAIL -->
+<section id="live" class="rail">
+ <div class="rail-head">
+ <div class="rail-head-left">
+ <span class="rail-eyebrow"><span class="pulse"></span>LIVE · LA28 VALLEY COMPLEX</span>
+ <h2 class="rail-title">Today at the Basin.</h2>
+ </div>
+ <div class="rail-head-right">
+ <div class="rail-clock" data-clock>
+ <b>18 : 07 : 42</b>
+ <span>PACIFIC · JUL 22, 2028</span>
+ </div>
+ <div class="rail-medals">
+ <div><b>14</b><span>G</span></div>
+ <div><b>09</b><span>S</span></div>
+ <div><b>11</b><span>B</span></div>
+ </div>
+ </div>
+ </div>
+
+ <div class="rail-track">
+ <article class="rail-card live">
+ <div class="rc-top"><span class="rc-dot"></span><b>LIVE NOW</b><em>COMPLEX 3</em></div>
+ <h3>3×3 Basketball<br>QF — USA v. FRA</h3>
+ <div class="rc-score"><b>19</b><span>—</span><b>14</b><em>Q3 · 2:04</em></div>
+ <div class="rc-foot"><span>14 MIN DRIVE</span><span>WALK-IN TICKETS</span></div>
+ </article>
+
+ <article class="rail-card next">
+ <div class="rc-top"><span class="rc-chev">▸</span><b>NEXT</b><em>COMPLEX 1</em></div>
+ <h3>BMX Freestyle<br>Women's Final</h3>
+ <div class="rc-countdown"><b>01 : 37 : 14</b><em>GATES OPEN IN</em></div>
+ <div class="rc-foot"><span>19:45 PT</span><span>BIKE PATH · 6.4 MI</span></div>
+ </article>
+
+ <article class="rail-card later">
+ <div class="rc-top"><span class="rc-chev">▸▸</span><b>LATER</b><em>COMPLEX 2</em></div>
+ <h3>Modern Pentathlon<br>Laser Run</h3>
+ <div class="rc-time"><b>21 : 30</b><em>WALK-ON SEATS</em></div>
+ <div class="rc-foot"><span>TOMORROW · JUL 23</span><span>SHUTTLE FROM CSUN</span></div>
+ </article>
+
+ <article class="rail-card hosttip">
+ <div class="rc-top"><span class="rc-chev">•</span><b>MALDEN TIP</b><em>FROM BOB</em></div>
+ <h3>Skip the 405.<br>Take Balboa.</h3>
+ <p>Google will route you west to the 405 south; locals take Balboa straight down to the Basin's north gate. Saves twelve minutes on a Friday night.</p>
+ <div class="rc-foot"><span>SAVES 12 MIN</span><span>VERIFIED 2028</span></div>
+ </article>
+
+ <article class="rail-card weather">
+ <div class="rc-top"><span class="rc-chev">☀</span><b>VALLEY WX</b><em>NOW</em></div>
+ <h3>94° / HAZY</h3>
+ <div class="rc-grid">
+ <div><b>84°</b><span>AT 21:00</span></div>
+ <div><b>67°</b><span>AT 06:00</span></div>
+ <div><b>0%</b><span>RAIN</span></div>
+ <div><b>NW 6</b><span>WIND</span></div>
+ </div>
+ <div class="rc-foot"><span>INDEX · MODERATE</span><span>SUNSET 20:07</span></div>
+ </article>
+ </div>
+</section>
+
+<!-- THINGS TO DO -->
+<section id="valley" class="guide">
+ <header>
+ <div>
+ <div class="eyebrow accent">§ 03 · BETWEEN MEDALS</div>
+ <h2 class="display sm">A Valley<br>field guide.</h2>
+ </div>
+ <p class="lede">Ten things worth doing between events, ranked by distance from the front door. None are tourist traps. All are walkable, drivable, or a short Metro G-line away.</p>
+ </header>
+ <ol class="guide-list">
+ <li><span class="n">01</span><span class="t">The Iliad Bookshop</span><span class="d">North Hollywood used-book hideout — two stories, two shop cats, and a literature section the size of a small library.</span><span class="k">6 MILES SE</span></li>
+ <li><span class="n">02</span><span class="t">CSUN Botanic Garden</span><span class="d">Quiet campus oasis — mature California natives, a koi pond, benches made for killing an hour between sessions.</span><span class="k">1.5 MILES</span></li>
+ <li><span class="n">03</span><span class="t">Lake Balboa loop</span><span class="d">1.3-mile paved loop around the lake inside Anthony C. Beilenson Park. Cherry blossoms in spring; flat and stroller-friendly.</span><span class="k">7 MILES S</span></li>
+ <li><span class="n">04</span><span class="t">Pat & Lorraine's</span><span class="d">Eagle Rock diner used in the opening scene of <i>Reservoir Dogs</i>. Worth a breakfast pilgrimage on a rest day.</span><span class="k">16 MILES E</span></li>
+ <li><span class="n">05</span><span class="t">Sepulveda Dam bikepath</span><span class="d">Eight paved miles along the LA River. Bring a rental e-bike and roll straight into the Games venue gates.</span><span class="k">8 MILES S</span></li>
+ <li><span class="n">06</span><span class="t">Reseda Theater & Street Fair</span><span class="d">Sherman Way is slowly waking up — restored Art Deco marquee, Oaxacan lunch counters, a Sunday flea market.</span><span class="k">3 MILES SW</span></li>
+ <li><span class="n">07</span><span class="t">Aliso Canyon sunrise hike</span><span class="d">Trailhead at Rinaldi. Three miles of shaded switchbacks with a basin view at the top. Beat the Valley heat.</span><span class="k">5 MILES N</span></li>
+ <li><span class="n">08</span><span class="t">Northridge Fashion Center</span><span class="d">Air-conditioning, a proper grocery run, and a Cheesecake Factory for the guest who needed one. Zero judgment.</span><span class="k">1 MILE E</span></li>
+ <li><span class="n">09</span><span class="t">Adam Bomb Shelter</span><span class="d">Square-pie destination in a Winnetka strip mall. Order the upside-down cup-and-char. DoorDash it home after a late medal game.</span><span class="k">4 MILES W</span></li>
+ <li><span class="n">10</span><span class="t">Griffith Observatory, late</span><span class="d">Forty minutes over the hill on a summer night. Telescopes open till 10pm. Come back to a quiet house on a quiet street.</span><span class="k">22 MILES SE</span></li>
+ </ol>
+</section>
+
+<!-- MAP + STREET VIEW -->
+<section class="map">
+ <header>
+ <div>
+ <div class="eyebrow accent">§ 04 · WALK THE BLOCK</div>
+ <h2 class="display sm">See the<br>street.</h2>
+ </div>
+ <div class="map-tabs">
+ <span class="pill filled dark">STREET VIEW</span>
+ <span class="pill outline">SATELLITE</span>
+ <span class="pill outline">MAP</span>
+ </div>
+ </header>
+ <div class="map-grid">
+ <div class="map-main">
+ <img src="https://maps.googleapis.com/maps/api/streetview?size=960x640&location=18764+Malden+St,+Northridge,+CA&key=demo" alt="Street view" onerror="this.src='https://picsum.photos/seed/maldenstreetview/960/640'">
+ <span class="chip-abs tl">LIVE STREET VIEW · 18764 MALDEN ST</span>
+ <span class="chip-abs tl2">HEADING: NW · PITCH: 0° · FOV: 90°</span>
+ <div class="pan-ctrls"><button>‹</button><button>⇪</button><button>›</button></div>
+ <span class="map-credit">Google · Imagery © 2028 · Click & drag to walk the block</span>
+ </div>
+ <div class="map-side">
+ <div class="map-tile">
+ <img src="https://picsum.photos/seed/maldenaerial/480/310" alt="Satellite">
+ <span class="chip-abs tl">SATELLITE · ZOOM 19</span>
+ <div class="marker"><span class="dot"></span><span class="mlabel">18764 MALDEN</span></div>
+ </div>
+ <div class="map-tile">
+ <img src="https://picsum.photos/seed/maldendrive/480/310" alt="Drive map">
+ <span class="chip-abs tl">DRIVE TO SEPULVEDA BASIN</span>
+ <div class="drive-meta"><b>14 min</b><span>8.3 MILES · 101 S → 405 S</span></div>
+ </div>
+ </div>
+ </div>
+</section>
+
+<!-- MAP OF THE STARS -->
+<section id="stars" class="stars">
+ <header>
+ <div>
+ <div class="eyebrow accent">§ 04B · VALLEY CONSTELLATION</div>
+ <h2 class="display sm">A map of<br>the Valley stars.</h2>
+ </div>
+ <p class="lede">The San Fernando Valley quietly raised half of Hollywood. Pacoima gave up Ritchie Valens, Reseda stood in for every suburb in every teen movie, Marilyn graduated from Van Nuys. In July, the Olympics finally come to their front yard — and Malden sits eight blocks from the opening heat.</p>
+ </header>
+
+ <div class="stars-grid">
+ <div class="stars-map">
+ <svg viewBox="0 0 620 420" preserveAspectRatio="xMidYMid meet" role="img" aria-label="Map of San Fernando Valley with numbered pins of cultural landmarks">
+ <!-- Cartouche frame -->
+ <rect x="8" y="8" width="604" height="404" fill="none" stroke="currentColor" stroke-width="1" opacity="0.25"/>
+ <rect x="14" y="14" width="592" height="392" fill="none" stroke="currentColor" stroke-width="0.5" opacity="0.18"/>
+
+ <!-- San Gabriel / Verdugo foothills (top) -->
+ <path d="M 14,60 Q 100,30 200,45 T 380,40 T 606,55" fill="none" stroke="currentColor" stroke-width="0.8" opacity="0.35"/>
+ <g opacity="0.35" stroke="currentColor" stroke-width="0.5">
+ <line x1="60" y1="52" x2="66" y2="42"/><line x1="80" y1="54" x2="86" y2="42"/><line x1="120" y1="46" x2="126" y2="34"/><line x1="180" y1="46" x2="186" y2="34"/><line x1="240" y1="45" x2="246" y2="33"/><line x1="310" y1="42" x2="316" y2="30"/><line x1="380" y1="40" x2="386" y2="28"/><line x1="450" y1="45" x2="456" y2="33"/><line x1="520" y1="50" x2="526" y2="38"/>
+ </g>
+
+ <!-- Santa Monica Mtns (bottom curve) -->
+ <path d="M 14,350 Q 120,380 240,360 T 460,365 T 606,355" fill="none" stroke="currentColor" stroke-width="0.8" opacity="0.35"/>
+ <g opacity="0.35" stroke="currentColor" stroke-width="0.5">
+ <line x1="70" y1="358" x2="76" y2="370"/><line x1="150" y1="368" x2="156" y2="380"/><line x1="240" y1="362" x2="246" y2="374"/><line x1="330" y1="365" x2="336" y2="377"/><line x1="420" y1="365" x2="426" y2="377"/><line x1="510" y1="360" x2="516" y2="372"/>
+ </g>
+
+ <!-- 101 Ventura Fwy (south diagonal) -->
+ <path d="M 10,320 L 610,280" fill="none" stroke="currentColor" stroke-width="1.4" opacity="0.45"/>
+ <text x="560" y="272" font-family="Inter" font-size="9" font-weight="700" letter-spacing="0.2em" fill="currentColor" opacity="0.55">101 ›</text>
+
+ <!-- 405 San Diego Fwy (vertical) -->
+ <path d="M 360,14 L 340,406" fill="none" stroke="currentColor" stroke-width="1.4" opacity="0.45"/>
+ <text x="370" y="32" font-family="Inter" font-size="9" font-weight="700" letter-spacing="0.2em" fill="currentColor" opacity="0.55">405</text>
+
+ <!-- 118 Reagan Fwy (top horizontal) -->
+ <path d="M 14,95 L 606,80" fill="none" stroke="currentColor" stroke-width="1" opacity="0.38"/>
+ <text x="520" y="76" font-family="Inter" font-size="8" font-weight="700" letter-spacing="0.2em" fill="currentColor" opacity="0.45">118 RONALD REAGAN ›</text>
+
+ <!-- Ventura Blvd (labeled line along the south ridge) -->
+ <text x="110" y="338" font-family="Inter" font-size="7" font-weight="600" letter-spacing="0.3em" fill="currentColor" opacity="0.4">— — — VENTURA BLVD — — —</text>
+
+ <!-- LA River + Sepulveda Basin -->
+ <ellipse cx="340" cy="285" rx="42" ry="24" fill="currentColor" opacity="0.08"/>
+ <ellipse cx="340" cy="285" rx="42" ry="24" fill="none" stroke="currentColor" stroke-width="0.8" opacity="0.5" stroke-dasharray="2 2"/>
+ <path d="M 240,305 Q 300,295 340,285 T 440,260" fill="none" stroke="currentColor" stroke-width="0.7" opacity="0.35"/>
+
+ <!-- Neighborhood labels (ghost type) -->
+ <g font-family="Inter" font-weight="700" letter-spacing="0.22em" font-size="9" fill="currentColor" opacity="0.32" text-anchor="middle">
+ <text x="405" y="105">PACOIMA</text>
+ <text x="155" y="215">RESEDA</text>
+ <text x="205" y="155">NORTHRIDGE</text>
+ <text x="310" y="235">VAN NUYS</text>
+ <text x="265" y="305">ENCINO</text>
+ <text x="470" y="140">SUN VALLEY</text>
+ <text x="490" y="265">STUDIO CITY</text>
+ <text x="90" y="160">WOODLAND HILLS</text>
+ </g>
+ <text x="340" y="277" font-family="Inter" font-size="8" font-weight="700" letter-spacing="0.25em" fill="currentColor" opacity="0.55" text-anchor="middle">SEPULVEDA BASIN</text>
+
+ <!-- Compass + scale -->
+ <g transform="translate(560,360)" opacity="0.5">
+ <circle r="12" fill="none" stroke="currentColor" stroke-width="0.8"/>
+ <path d="M 0,-11 L 3,0 L 0,11 L -3,0 Z" fill="currentColor"/>
+ <text y="-16" font-family="Inter" font-size="8" font-weight="700" fill="currentColor" text-anchor="middle">N</text>
+ </g>
+ <g transform="translate(30,388)" opacity="0.5">
+ <line x1="0" y1="0" x2="60" y2="0" stroke="currentColor" stroke-width="1"/>
+ <line x1="0" y1="-3" x2="0" y2="3" stroke="currentColor" stroke-width="1"/>
+ <line x1="30" y1="-2" x2="30" y2="2" stroke="currentColor" stroke-width="1"/>
+ <line x1="60" y1="-3" x2="60" y2="3" stroke="currentColor" stroke-width="1"/>
+ <text x="30" y="-6" font-family="Inter" font-size="7" font-weight="700" fill="currentColor" text-anchor="middle" letter-spacing="0.15em">2 MILES</text>
+ </g>
+
+ <!-- Pins (drawn last so they're on top) -->
+ <g class="pin" data-star="1" transform="translate(200,155)">
+ <circle r="11" class="pin-dot house"/>
+ <text y="3.5" class="pin-num house-num" text-anchor="middle">★</text>
+ <text y="-16" class="pin-label" text-anchor="middle">MALDEN HOUSE</text>
+ </g>
+ <g class="pin" data-star="2" transform="translate(405,88)"><circle r="10" class="pin-dot"/><text y="3.5" class="pin-num" text-anchor="middle">02</text></g>
+ <g class="pin" data-star="3" transform="translate(155,225)"><circle r="10" class="pin-dot"/><text y="3.5" class="pin-num" text-anchor="middle">03</text></g>
+ <g class="pin" data-star="4" transform="translate(310,245)"><circle r="10" class="pin-dot"/><text y="3.5" class="pin-num" text-anchor="middle">04</text></g>
+ <g class="pin" data-star="5" transform="translate(265,310)"><circle r="10" class="pin-dot"/><text y="3.5" class="pin-num" text-anchor="middle">05</text></g>
+ <g class="pin" data-star="6" transform="translate(375,160)"><circle r="10" class="pin-dot"/><text y="3.5" class="pin-num" text-anchor="middle">06</text></g>
+ <g class="pin" data-star="7" transform="translate(175,260)"><circle r="10" class="pin-dot"/><text y="3.5" class="pin-num" text-anchor="middle">07</text></g>
+ <g class="pin" data-star="8" transform="translate(215,185)"><circle r="10" class="pin-dot"/><text y="3.5" class="pin-num" text-anchor="middle">08</text></g>
+ <g class="pin" data-star="9" transform="translate(340,285)">
+ <circle r="12" class="pin-dot olympic"/>
+ <text y="3.5" class="pin-num olympic-num" text-anchor="middle">○</text>
+ <text y="-18" class="pin-label olympic-label" text-anchor="middle">LA28 VALLEY COMPLEX</text>
+ </g>
+ </svg>
+ </div>
+
+ <ol class="stars-list">
+ <li data-star="1" class="starred-here">
+ <span class="sn">★</span>
+ <div class="si">
+ <div class="sh"><b>Malden House</b><em>18764 Malden St</em></div>
+ <p>You are here. Single-storey, 1961, three beds, one small citrus lot. Bob & Ginny have lived on the block longer than most of the stars below were famous.</p>
+ </div>
+ <span class="sk">NORTHRIDGE</span>
+ </li>
+ <li data-star="2">
+ <span class="sn">02</span>
+ <div class="si">
+ <div class="sh"><b>Ritchie Valens</b><em>1941 – 1959</em></div>
+ <p>Grew up on San Fernando Road in Pacoima. Pacoima Jr. High renamed its auditorium for him in '92. "La Bamba" was cut at Gold Star but the song is Valley to its teeth.</p>
+ </div>
+ <span class="sk">PACOIMA</span>
+ </li>
+ <li data-star="3">
+ <span class="sn">03</span>
+ <div class="si">
+ <div class="sh"><b>Frank Zappa</b><em>lived in Echo Park, wrote in Reseda</em></div>
+ <p>"Valley Girl" was co-written with fourteen-year-old Moon, sitting at the kitchen table. Sherman Way was the setting; gag, me with a spoon was the vernacular; the song was a top-40 hit by October '82.</p>
+ </div>
+ <span class="sk">RESEDA</span>
+ </li>
+ <li data-star="4">
+ <span class="sn">04</span>
+ <div class="si">
+ <div class="sh"><b>Marilyn Monroe</b><em>class of '42</em></div>
+ <p>Norma Jeane Dougherty attended Van Nuys High School — she appears in the Van Nuys News yearbook with the bob haircut and no screen name yet. The school building is still standing.</p>
+ </div>
+ <span class="sk">VAN NUYS</span>
+ </li>
+ <li data-star="5">
+ <span class="sn">05</span>
+ <div class="si">
+ <div class="sh"><b>Tom Petty</b><em>Encino, 30 years</em></div>
+ <p>Wrote "Free Fallin'" in a bungalow on a leafy Encino side street. The opening line is about a good girl who loves Jesus and America — she lived one suburb over from this house.</p>
+ </div>
+ <span class="sk">ENCINO</span>
+ </li>
+ <li data-star="6">
+ <span class="sn">06</span>
+ <div class="si">
+ <div class="sh"><b>Galpin Ford</b><em>since 1946</em></div>
+ <p>The world's largest Ford dealer — a two-block car lot on Roscoe. Pre-internet, this was how the Valley learned about new Mustangs. Still open. Still loud.</p>
+ </div>
+ <span class="sk">NORTH HILLS</span>
+ </li>
+ <li data-star="7">
+ <span class="sn">07</span>
+ <div class="si">
+ <div class="sh"><b>Reseda Theater</b><em>1948, re-skinned 2026</em></div>
+ <p>The art-deco marquee on Sherman Way stood in for every high school dance in every Valley movie. Restored last year as part of the 2028 street-fair push.</p>
+ </div>
+ <span class="sk">RESEDA</span>
+ </li>
+ <li data-star="8">
+ <span class="sn">08</span>
+ <div class="si">
+ <div class="sh"><b>CSUN</b><em>est. 1958</em></div>
+ <p>The Matadome, the oval, the Manzanita walk. CSUN trains a fourth of the Valley's teachers and twelve of its Olympic hopefuls for Paris, Milan, and now home — LA28.</p>
+ </div>
+ <span class="sk">NORTHRIDGE</span>
+ </li>
+ <li data-star="9" class="starred-olympic">
+ <span class="sn">○</span>
+ <div class="si">
+ <div class="sh"><b>Sepulveda Basin</b><em>§ 01 – 04 · LA28 Valley Complex</em></div>
+ <p>Four temporary venues: 3x3 basketball, BMX, skateboarding and modern pentathlon. 8.3 miles south of Malden; 14 minutes by car; a straight shot down the 405 or a flat 30-minute ride along the LA River path.</p>
+ </div>
+ <span class="sk">GAMES</span>
+ </li>
+ </ol>
+ </div>
+
+ <div class="stars-footnote">
+ <span class="sf-left">PLATE 04B · VALLEY CONSTELLATION · NOT TO SCALE</span>
+ <span class="sf-right">Cartography · Malden House · 2026</span>
+ </div>
+</section>
+
+<!-- VIDEO TOUR -->
+<section class="video">
+ <header>
+ <div>
+ <div class="eyebrow">§ 05 · 30-SECOND TOUR</div>
+ <h2 class="display">Watch the<br>house in<br>thirty seconds.</h2>
+ </div>
+ <p class="lede inverted">A morning walkthrough with natural light, no voice-over. Click any chapter below to jump directly to a room — timeline scrubs, the LA 2028 mark holds.</p>
+ </header>
+ <div class="player">
+ <img src="https://picsum.photos/seed/maldenvideohero/1296/720" alt="Video cover">
+ <button class="play" aria-label="Play">▶</button>
+ <span class="badge-live"><span class="dot"></span>LIVE DEMO · MALDEN HOUSE</span>
+ <div class="hud"><span>4K</span><span>CC</span><span>FULLSCREEN</span></div>
+ <div class="controls">
+ <div class="scrub"><div class="prog"></div><div class="head"></div></div>
+ <div class="controls-row">
+ <div class="transport">⏴⏴ ▶ ⏵⏵ <span>0:11 / 0:30</span></div>
+ <button class="cta">BOOK THIS HOUSE</button>
+ </div>
+ </div>
+ </div>
+</section>
+
+<!-- section removed — IOC-protected marks -->
+
+<!-- HISTORY -->
+<section id="history" class="history">
+ <div class="history-copy">
+ <div class="eyebrow accent">§ 07 · THE NEIGHBORHOOD</div>
+ <h2 class="display sm">Orange groves,<br>aerospace,<br>aftershocks.</h2>
+ <p>Northridge used to be orange country — the Zelzah post office opened in 1908, the name changed to North Los Angeles in '29, and the railroad stop settled into Northridge by 1938. Citrus came out, tract homes came in. Malden St was cut in the mid-1950s; this house went up in 1961.</p>
+ <p>Cal State Northridge — founded '58 — gave the neighborhood its center of gravity. The 1994 earthquake gave it its scar. The house held. Most of the block held. Bob and Ginny re-stuccoed that summer and never left.</p>
+ </div>
+ <ol class="timeline">
+ <li><span class="y">1908</span><span>Zelzah post office opens in a wheat field.</span></li>
+ <li><span class="y">1938</span><span>Southern Pacific renames the station Northridge.</span></li>
+ <li><span class="y">1958</span><span>San Fernando Valley State College opens — later CSUN.</span></li>
+ <li><span class="y">1961</span><span>18764 Malden is built. Three beds, two baths, carport out back.</span></li>
+ <li><span class="y">1984</span><span>LA hosts the Summer Games. The Valley watches on TV.</span></li>
+ <li><span class="y">1992</span><span>Bob and Ginny buy the house and plant a kumquat tree.</span></li>
+ <li><span class="y">1994</span><span>6.7 at 4:31 AM. Everyone OK. Stucco — not OK.</span></li>
+ <li><span class="y">2017</span><span>Metro G-line expansion plan includes Balboa Station.</span></li>
+ <li><span class="y">2026</span><span>LA 2028 confirms Sepulveda Basin as the Valley Complex.</span></li>
+ <li><span class="y">2028</span><span>The Valley finally gets a ring. You stay on Malden.</span></li>
+ </ol>
+</section>
+
+<!-- CONTACT -->
+<section id="contact" class="contact">
+ <div class="contact-copy">
+ <div class="eyebrow accent">§ 08 · INQUIRE</div>
+ <h2 class="display">Talk to<br>Bob & Ginny.</h2>
+ <p>We read every message ourselves. Tell us which events you're attending and how long you'd like to stay — we'll reply within a day with availability and a quote.</p>
+ <ul class="meta">
+ <li><span>EMAIL</span><b>stay@maldenhouse28.com</b></li>
+ <li><span>PHONE</span><b>+1 (818) 555-0128</b></li>
+ <li><span>HOURS</span><b>8am–9pm Pacific · seven days</b></li>
+ </ul>
+ </div>
+ <form class="contact-form" id="contact-form">
+ <div class="row">
+ <label><span>FIRST NAME</span><input type="text" name="first" placeholder="Ruth"></label>
+ <label><span>LAST NAME</span><input type="text" name="last" placeholder="Bader"></label>
+ </div>
+ <label><span>EMAIL</span><input type="email" name="email" placeholder="ruth@example.com"></label>
+ <div class="row">
+ <label><span>CHECK-IN</span><input type="date" name="in" value="2028-07-17"></label>
+ <label><span>CHECK-OUT</span><input type="date" name="out" value="2028-07-28"></label>
+ <label><span>GUESTS</span><input type="number" name="guests" value="4" min="1" max="6"></label>
+ </div>
+ <fieldset class="events">
+ <legend>EVENTS ATTENDING</legend>
+ <label class="tag"><input type="checkbox" checked>3x3 BASKETBALL</label>
+ <label class="tag"><input type="checkbox">BMX</label>
+ <label class="tag"><input type="checkbox" checked>SKATEBOARDING</label>
+ <label class="tag"><input type="checkbox">PENTATHLON</label>
+ <label class="tag"><input type="checkbox">OPENING CEREMONY</label>
+ </fieldset>
+ <label><span>MESSAGE</span><textarea rows="3" name="msg" placeholder="Hi Bob & Ginny — we're flying in from Chicago with two kids..."></textarea></label>
+ <div class="submit-row">
+ <span class="reply-note">We reply within 24 hours, usually faster.</span>
+ <button type="submit">SEND INQUIRY →</button>
+ </div>
+ </form>
+</section>
+
+<!-- FOOTER -->
+<footer class="footer">
+ <div class="brand"><span class="brand-dot"></span>MALDEN HOUSE · EST. 1961</div>
+ <div class="addr">18764 Malden Street · Northridge · Los Angeles County · California · 91324</div>
+ <div class="credit">© 2028 · A PRIVATE RENTAL · NOT AFFILIATED WITH LA 2028</div>
+</footer>
+
+<script src="neighborhoods.js?v=10"></script>
+<script src="rental.js?v=10"></script>
+<script src="theme.js?v=10"></script>
+</body>
+</html>
diff --git a/rental.js b/rental.js
new file mode 100644
index 0000000..2c01dfb
--- /dev/null
+++ b/rental.js
@@ -0,0 +1,800 @@
+// rental.js — reads a saved rental from localStorage and patches rental.html
+(function () {
+ // Schema check — wipe stale v1/v2 records on first load
+ try {
+ const HTG_SCHEMA = 3;
+ const v = Number(localStorage.getItem("htg.schema") || 1);
+ if (v !== HTG_SCHEMA) {
+ localStorage.removeItem("htg.rentals");
+ localStorage.removeItem("htg.active");
+ localStorage.removeItem("victorystays.rental");
+ localStorage.setItem("htg.schema", HTG_SCHEMA);
+ }
+ } catch (e) {}
+
+ function load() {
+ const params = new URLSearchParams(location.search);
+ const id = params.get("id") || localStorage.getItem("htg.active");
+ const all = JSON.parse(localStorage.getItem("htg.rentals") || "{}");
+ if (id && all[id]) return all[id];
+ // Back-compat with old single-record key
+ const legacy = localStorage.getItem("victorystays.rental");
+ if (legacy) return JSON.parse(legacy);
+ return null;
+ }
+
+ function splitStreet(street) {
+ // "471 S Peck Dr" -> { number: "471", rest: "S PECK DR" }
+ const m = String(street || "").match(/^\s*(\d+[\w-]*)\s+(.+)$/);
+ if (!m) return { number: "—", rest: (street || "").toUpperCase() };
+ return { number: m[1], rest: m[2].toUpperCase() };
+ }
+
+ function text(sel, val) { const el = document.querySelector(sel); if (el) el.textContent = val; }
+ function html(sel, val) { const el = document.querySelector(sel); if (el) el.innerHTML = val; }
+ function escapeHtml(s) {
+ return String(s ?? "")
+ .replace(/&/g, "&")
+ .replace(/</g, "<")
+ .replace(/>/g, ">")
+ .replace(/"/g, """)
+ .replace(/'/g, "'");
+ }
+ const escapeAttr = escapeHtml;
+ function formatMoney(v) {
+ return v === null || v === undefined || v === "" ? "—" : escapeHtml(v.toLocaleString());
+ }
+
+ // Expand a date-range string like "Jul 15 – Jul 23, 2028" (or single "Jul 14, 2028")
+ // into an array of { mm, dd, year, dow } entries.
+ function expandDates(str) {
+ const monthMap = { Jan:0, Feb:1, Mar:2, Apr:3, May:4, Jun:5, Jul:6, Aug:7, Sep:8, Oct:9, Nov:10, Dec:11 };
+ const mNames = Object.keys(monthMap);
+ const clean = String(str || "").replace(/[–—]/g, "-").trim();
+ // Range with same or different months: "Jul 15 - Jul 23, 2028"
+ let m = clean.match(/^(\w{3})\s+(\d{1,2})\s*-\s*(\w{3})\s+(\d{1,2}),\s*(\d{4})$/);
+ if (m) {
+ const [, m1, d1, m2, d2, y] = m;
+ const start = new Date(+y, monthMap[m1], +d1);
+ const end = new Date(+y, monthMap[m2], +d2);
+ const out = [];
+ for (let d = new Date(start); d <= end; d.setDate(d.getDate() + 1)) {
+ out.push({ mm: mNames[d.getMonth()], dd: d.getDate(), year: d.getFullYear(), dow: d.getDay() });
+ }
+ return out;
+ }
+ // Single-day: "Jul 14, 2028"
+ m = clean.match(/^(\w{3})\s+(\d{1,2}),\s*(\d{4})$/);
+ if (m) {
+ const d = new Date(+m[3], monthMap[m[1]], +m[2]);
+ return [{ mm: m[1], dd: +m[2], year: +m[3], dow: d.getDay() }];
+ }
+ return [];
+ }
+
+ // -----------------------------------------------------------------
+ // SCRIPTED TRAILER — commercial-style 30-second rental promo
+ // -----------------------------------------------------------------
+ function buildTrailer(ctx) {
+ const { address, host, nearest, price, fullAddr } = ctx;
+ const player = document.querySelector(".player");
+ if (!player) return;
+ const svQ = encodeURIComponent(fullAddr);
+ const sat = `https://maps.google.com/maps?q=${svQ}&t=k&z=19&output=embed`;
+ const sv = `https://maps.google.com/maps?q=${svQ}&layer=c&output=svembed`;
+ const c0 = nearest[0] || {};
+ const days = expandDates(c0.dates || "Jul 14 – Jul 30, 2028");
+ const dow = ["SUN","MON","TUE","WED","THU","FRI","SAT"];
+ const daysHTML = days.slice(0, 12).map(d => `
+ <span class="tr-day"><em>${dow[d.dow]}</em><b>${d.dd}</b><i>${d.mm.toUpperCase()}</i></span>
+ `).join("");
+
+ const scenes = [
+ { dur: 4000, id: "intro", html: `
+ <div class="tr-intro">
+ <div class="tr-kicker">✦ A PRIVATE HOME FOR THE GAMES</div>
+ <div class="tr-title-big">${escapeHtml(address.street || "Your House")}</div>
+ <div class="tr-title-sub">${escapeHtml((address.city || "Los Angeles").toUpperCase())} · CA</div>
+ <div class="tr-intro-tag">HOSTED BY ${escapeHtml((host || "").toUpperCase())}</div>
+ </div>` },
+ { dur: 5000, id: "satellite", html: `
+ <iframe class="tr-frame" src="${sat}" loading="lazy" title="Aerial"></iframe>
+ <div class="tr-vignette"></div>
+ <div class="tr-lower-third">
+ <div class="tr-eyebrow">AERIAL · ${escapeHtml(address.zip || "")}</div>
+ <div class="tr-headline">${escapeHtml(address.street || "")}</div>
+ <div class="tr-sub">${escapeHtml(address.city || "")}, ${escapeHtml(address.state || "CA")}</div>
+ </div>` },
+ { dur: 5000, id: "streetview", html: `
+ <iframe class="tr-frame" src="${sv}" loading="lazy" title="Street view"></iframe>
+ <div class="tr-vignette"></div>
+ <div class="tr-lower-third">
+ <div class="tr-eyebrow">THE FRONT · 360°</div>
+ <div class="tr-headline">Walk up to the door.</div>
+ <div class="tr-sub">Live from Google Street View</div>
+ </div>` },
+ { dur: 4000, id: "photo1", html: `
+ <img class="tr-photo" src="https://picsum.photos/seed/${encodeURIComponent((address.street||'living')+'-living')}/1600/900" alt="Living">
+ <div class="tr-vignette"></div>
+ <div class="tr-lower-third">
+ <div class="tr-eyebrow">THE LIVING ROOM</div>
+ <div class="tr-headline">Room for six.</div>
+ <div class="tr-sub">Three bedrooms · two baths</div>
+ </div>` },
+ { dur: 4000, id: "photo2", html: `
+ <img class="tr-photo" src="https://picsum.photos/seed/${encodeURIComponent((address.street||'kitchen')+'-kitchen')}/1600/900" alt="Kitchen">
+ <div class="tr-vignette"></div>
+ <div class="tr-lower-third">
+ <div class="tr-eyebrow">THE KITCHEN</div>
+ <div class="tr-headline">Dinner at home.</div>
+ <div class="tr-sub">Cook in, or Postmates a medal-winner meal</div>
+ </div>` },
+ { dur: 5000, id: "olympic", html: `
+ <div class="tr-olympic">
+ <div class="tr-kicker">✦ CLOSEST GAMES EVENT</div>
+ <div class="tr-title-big">${escapeHtml(c0.headline || c0.sports || "LA 2028")}</div>
+ <div class="tr-olympic-venue">${escapeHtml(c0.name || "")} · ${(c0.mi || 0).toFixed(1)} mi from your door</div>
+ <div class="tr-daybar">${daysHTML}</div>
+ </div>` },
+ { dur: 4000, id: "outro", html: `
+ <div class="tr-outro">
+ <div class="tr-kicker">✦ RESERVE</div>
+ <div class="tr-title-big">$${formatMoney(price && price.mid)}<span class="tr-unit">/ night</span></div>
+ <div class="tr-sub">${escapeHtml(c0.dates || "Jul 14 – Jul 30, 2028")}</div>
+ <div class="tr-cta-row">
+ <span class="tr-pill">victorystays.com/${(address.street || "").toLowerCase().replace(/[^a-z0-9]+/g, "-")}</span>
+ </div>
+ <div class="tr-outro-brand">VICTORY STAYS · LA 2028</div>
+ </div>` },
+ ];
+ const total = scenes.reduce((a, s) => a + s.dur, 0);
+
+ player.innerHTML = `
+ <div class="tr-stage" id="tr-stage"></div>
+ <button class="tr-playbtn" id="tr-playbtn" aria-label="Play">
+ <span class="tr-playicon">▶</span>
+ <span class="tr-playlabel">PLAY 30-SEC TRAILER</span>
+ </button>
+ <div class="tr-cover" id="tr-cover">
+ <img src="${escapeAttr(sat.replace('&output=embed',''))}" alt="">
+ <div class="tr-cover-overlay"></div>
+ <div class="tr-cover-text">
+ <div class="tr-kicker">✦ PROPERTY TRAILER</div>
+ <div class="tr-title-big">${escapeHtml(address.street || "Your House")}</div>
+ <div class="tr-sub">${escapeHtml((address.city || "Los Angeles").toUpperCase())} · 30 SECONDS</div>
+ </div>
+ </div>
+ <div class="tr-hud"><span class="tr-live"><span class="dot"></span>LIVE TRAILER</span><span id="tr-music-toggle" class="tr-music">♪ MUSIC: ON</span></div>
+ <div class="tr-controls" id="tr-controls" hidden>
+ <div class="tr-scrub"><div class="tr-prog" id="tr-prog"></div></div>
+ <div class="tr-bottom">
+ <div class="tr-time"><button id="tr-pause">⏸</button><span id="tr-elapsed">0:00</span><span class="tr-dim"> / 0:${(total/1000).toFixed(0).padStart(2,"0")}</span></div>
+ <button class="tr-book" onclick="document.getElementById('contact').scrollIntoView({behavior:'smooth'})">BOOK THIS HOUSE</button>
+ </div>
+ </div>
+ `;
+
+ const stage = document.getElementById("tr-stage");
+ const cover = document.getElementById("tr-cover");
+ const playBtn = document.getElementById("tr-playbtn");
+ const controls = document.getElementById("tr-controls");
+ const progEl = document.getElementById("tr-prog");
+ const timeEl = document.getElementById("tr-elapsed");
+ const pauseBtn = document.getElementById("tr-pause");
+ const musicToggle = document.getElementById("tr-music-toggle");
+
+ let running = false, paused = false, audioCtl = null, rafId = null, startTs = 0, accumMs = 0, musicOn = true;
+
+ function startAudio() {
+ try {
+ const AC = window.AudioContext || window.webkitAudioContext;
+ const ctx = new AC();
+ const master = ctx.createGain(); master.gain.value = 0; master.connect(ctx.destination);
+ master.gain.linearRampToValueAtTime(0.12, ctx.currentTime + 0.8);
+
+ // Cinematic ambient pad — two slow detuned sines + filtered noise "air"
+ function pad(freq, detune, gainVal) {
+ const o = ctx.createOscillator(); o.type = "sine"; o.frequency.value = freq; o.detune.value = detune;
+ const g = ctx.createGain(); g.gain.value = gainVal;
+ o.connect(g); g.connect(master); o.start();
+ return o;
+ }
+ const chord = [
+ pad(130.81, 0, 0.22), // C3
+ pad(196.00, -4, 0.18), // G3 slightly flat
+ pad(261.63, 3, 0.14), // C4
+ pad(329.63, -6, 0.10), // E4
+ ];
+ // Slow LFO on filter for "breathing"
+ const filt = ctx.createBiquadFilter(); filt.type = "lowpass"; filt.frequency.value = 800;
+ // Noise for air
+ const bufSize = 2 * ctx.sampleRate;
+ const noise = ctx.createBufferSource();
+ const buf = ctx.createBuffer(1, bufSize, ctx.sampleRate);
+ const d = buf.getChannelData(0);
+ for (let i = 0; i < bufSize; i++) d[i] = (Math.random() * 2 - 1) * 0.04;
+ noise.buffer = buf; noise.loop = true;
+ const ng = ctx.createGain(); ng.gain.value = 0.06;
+ noise.connect(filt); filt.connect(ng); ng.connect(master);
+ noise.start();
+
+ // Gentle LFO breathing on master gain
+ const lfo = ctx.createOscillator(); lfo.frequency.value = 0.15;
+ const lfoGain = ctx.createGain(); lfoGain.gain.value = 0.03;
+ lfo.connect(lfoGain); lfoGain.connect(master.gain);
+ lfo.start();
+
+ audioCtl = { ctx, master, chord, noise, lfo };
+ } catch (e) { console.warn("audio:", e); }
+ }
+ function stopAudio() {
+ if (!audioCtl) return;
+ try {
+ const { ctx, master } = audioCtl;
+ master.gain.cancelScheduledValues(ctx.currentTime);
+ master.gain.linearRampToValueAtTime(0.0001, ctx.currentTime + 0.6);
+ setTimeout(() => { try { ctx.close(); } catch (e) {} }, 700);
+ } catch (e) {}
+ audioCtl = null;
+ }
+
+ function renderScene(i) {
+ stage.innerHTML = `<div class="tr-scene active" data-id="${scenes[i].id}">${scenes[i].html}</div>`;
+ }
+
+ function tick() {
+ if (!running || paused) return;
+ const elapsed = accumMs + (performance.now() - startTs);
+ if (elapsed >= total) { finish(); return; }
+ // Pick scene
+ let t = 0, idx = 0;
+ for (let i = 0; i < scenes.length; i++) {
+ if (elapsed < t + scenes[i].dur) { idx = i; break; }
+ t += scenes[i].dur;
+ }
+ if (stage.firstChild && stage.firstChild.getAttribute("data-id") !== scenes[idx].id) renderScene(idx);
+ progEl.style.width = (elapsed / total * 100) + "%";
+ const secs = Math.floor(elapsed / 1000);
+ timeEl.textContent = `0:${String(secs).padStart(2,"0")}`;
+ rafId = requestAnimationFrame(tick);
+ }
+
+ function play() {
+ if (running) return;
+ running = true; paused = false; accumMs = 0; startTs = performance.now();
+ cover.classList.add("hidden");
+ playBtn.classList.add("hidden");
+ controls.hidden = false;
+ renderScene(0);
+ if (musicOn) startAudio();
+ rafId = requestAnimationFrame(tick);
+ }
+ function pause() {
+ if (!running || paused) { // resume if paused
+ if (paused) { paused = false; startTs = performance.now(); pauseBtn.textContent = "⏸"; if (musicOn && !audioCtl) startAudio(); rafId = requestAnimationFrame(tick); }
+ return;
+ }
+ paused = true; accumMs += performance.now() - startTs; pauseBtn.textContent = "▶"; stopAudio();
+ }
+ function finish() {
+ running = false; stopAudio();
+ renderScene(scenes.length - 1);
+ progEl.style.width = "100%";
+ timeEl.textContent = `0:${(total/1000).toFixed(0).padStart(2,"0")}`;
+ pauseBtn.textContent = "↺";
+ pauseBtn.onclick = () => { pauseBtn.onclick = null; play(); pauseBtn.onclick = () => pause(); pauseBtn.textContent = "⏸"; };
+ }
+
+ playBtn.addEventListener("click", play);
+ pauseBtn.addEventListener("click", pause);
+ musicToggle.addEventListener("click", () => {
+ musicOn = !musicOn;
+ musicToggle.textContent = musicOn ? "♪ MUSIC: ON" : "♪ MUSIC: OFF";
+ if (!musicOn) stopAudio(); else if (running && !paused) startAudio();
+ });
+ }
+
+ // Fetch the Wikipedia page summary thumbnail for a given page title. Returns null on miss.
+ async function wikiThumb(title) {
+ if (!title) return null;
+ try {
+ const r = await fetch(`https://en.wikipedia.org/api/rest_v1/page/summary/${encodeURIComponent(title)}`, { headers: { "Accept": "application/json" } });
+ if (!r.ok) return null;
+ const j = await r.json();
+ return (j && j.thumbnail && j.thumbnail.source) || (j && j.originalimage && j.originalimage.source) || null;
+ } catch (e) { return null; }
+ }
+
+ function patch(r) {
+ const { address, host, email, phone, nearest, price, baseline } = r;
+ const split = splitStreet(address.street || "");
+
+ // Title & nav brand
+ document.title = `${address.street || "Your home"} — LA 2028 Rental`;
+ text(".brand-mark", (host.split(" ")[0] || "HOST").toUpperCase() + " HOUSE");
+ const sub = document.querySelector(".brand-sub");
+ if (sub) sub.textContent = `${address.city || "Los Angeles"} · LA 2028`;
+
+ // Hero lede — swap Northridge-specific line for the real nearest venue
+ const lede = document.querySelector(".hero-copy .lede");
+ if (lede) {
+ const n0 = nearest[0];
+ lede.textContent =
+ `A private home in ${address.city || "Los Angeles"} — ${n0.mi.toFixed(1)} miles from ${n0.name}, ` +
+ `where ${n0.sports} land July 14–30, 2028.`;
+ }
+
+ // Property card
+ const pcAddrB = document.querySelector(".pc-address b");
+ const pcAddrS = document.querySelector(".pc-address span");
+ if (pcAddrB) pcAddrB.textContent = split.number;
+ if (pcAddrS) pcAddrS.textContent = split.rest;
+ html(".pc-sub",
+ `${escapeHtml(address.city || "")}${address.state ? ", " + escapeHtml(address.state) : ""} ${escapeHtml(address.zip || "")}<br>${escapeHtml(address.county || "Los Angeles County")}`
+ );
+
+ // Photo plate — swap placeholder img for real Google satellite view of the house
+ const plateImg = document.querySelector(".plate-img img");
+ if (plateImg) {
+ const sat = document.createElement("iframe");
+ sat.src = `https://maps.google.com/maps?q=${address.lat},${address.lng}&t=k&z=19&output=embed`;
+ sat.loading = "lazy";
+ sat.style.cssText = "width:100%;height:600px;border:0;display:block;";
+ sat.title = `Satellite view — ${address.street || "home"}`;
+ plateImg.replaceWith(sat);
+ }
+ const capI = document.querySelector(".plate-img figcaption i");
+ if (capI) capI.textContent = `${address.street || "The house"} — satellite, live from Google Maps.`;
+ const fig = document.querySelector(".plate-img .fig");
+ if (fig) fig.textContent = "LIVE · GOOGLE SAT";
+ text(".plate-meta span:first-child", `Satellite · ${address.street || ""}`.trim());
+ text(".plate-meta span:last-child",
+ `${address.city || ""} · ${address.state || ""} ${address.zip || ""}`.toUpperCase().trim());
+
+ // Spec rows — update GAMES ACCESS + HOSTS + LOT/year (keep known-unknowns honest)
+ const rows = document.querySelectorAll(".spec dl > div");
+ if (rows.length >= 7) {
+ // Year built — unknown for most; keep placeholder but mark as "built year on request"
+ rows[0].querySelector("dd").textContent = "Single-family home — year on request";
+ rows[0].querySelector("span").textContent = "PRIVATE";
+ // Floor area — unknown
+ rows[1].querySelector("dd").textContent = "Interior square footage on request";
+ rows[1].querySelector("span").textContent = "INQUIRE";
+ // Lot
+ rows[2].querySelector("dd").textContent = `${address.city || "Los Angeles"} lot — size on request`;
+ rows[2].querySelector("span").textContent = "PRIVATE";
+ // Sleeps — keep
+ // Parking — keep
+ // Games access — dynamic
+ const n0 = nearest[0];
+ rows[5].querySelector("dt").textContent = "NEAREST GAMES VENUE";
+ rows[5].querySelector("dd").textContent =
+ `${n0.name} — ${n0.mi.toFixed(1)} mi · ~${n0.min} min drive`;
+ rows[5].querySelector("span").textContent = `${n0.mi.toFixed(1)} MI`;
+ // Hosts
+ rows[6].querySelector("dd").textContent = `${host} · ${address.city || "Los Angeles"}`;
+ rows[6].querySelector("span").textContent = "LOCAL HOST";
+ }
+
+ // Pick neighborhood library entry (BH / Northridge / SM / default LA)
+ const NB = (window.HTG_NEIGHBORHOODS && window.HTG_NEIGHBORHOODS.find(address)) || null;
+
+ // Replace Games event grid with address-specific nearest venues (top 4)
+ const eg = document.querySelector(".event-grid");
+ if (eg && nearest.length) {
+ const classes = ["headline", "inverted", "ghost", "ghost"];
+ eg.innerHTML = nearest.slice(0, 4).map((v, i) => {
+ const headline = (v.headline || v.sports.split("·")[0].trim()).toUpperCase();
+ const name = v.name.replace(/·.*$/, "").trim();
+ const sports = v.sports.charAt(0).toUpperCase() + v.sports.slice(1);
+ return `
+ <article class="event ${classes[i] || 'ghost'}">
+ <div class="row"><span>${(i + 1).toString().padStart(2, "0")} · ${escapeHtml(headline)}</span><span>${v.mi.toFixed(1)} MI</span></div>
+ <h3>${escapeHtml(name)}</h3>
+ <p>${escapeHtml(sports)} · ~${escapeHtml(v.min)} min from your door.</p>
+ <div class="chips">
+ <span class="pill ${i === 1 ? 'filled dark' : 'filled'}">${escapeHtml(v.dates || 'JUL 14–30')}</span>
+ <span class="pill ${i === 1 ? 'outline dark' : (i === 0 ? 'outline' : 'outline light')}">${v.mi < 5 ? 'QUICK DRIVE' : v.mi < 15 ? 'SHORT DRIVE' : 'DAY TRIP'}</span>
+ </div>
+ </article>
+ `; }).join("");
+ }
+
+ // Games section — swap h2/eyebrow/lede using the matched neighborhood
+ const olympH2 = document.querySelector(".olympics header h2");
+ const olympEyebrow = document.querySelector(".olympics header .eyebrow");
+ const olympLede = document.querySelector(".olympics header .lede");
+ if (NB) {
+ if (olympH2 && NB.olympicsH2) olympH2.innerHTML = NB.olympicsH2;
+ if (olympEyebrow && NB.olympicsEyebrow) olympEyebrow.textContent = NB.olympicsEyebrow;
+ if (olympLede) {
+ olympLede.textContent = (typeof NB.olympicsLede === "function")
+ ? NB.olympicsLede(address, nearest)
+ : (NB.olympicsLede || olympLede.textContent);
+ }
+ }
+
+ // Guide — REWRITE things to do, h2, eyebrow, lede from neighborhood
+ const guideH2 = document.querySelector(".guide h2");
+ const guideEyebrow = document.querySelector(".guide .eyebrow");
+ const guideLede = document.querySelector(".guide .lede");
+ const guideList = document.querySelector(".guide-list");
+ if (NB) {
+ if (guideH2) {
+ const h2 = (typeof NB.guideH2 === "function") ? NB.guideH2(escapeHtml(address.city || "")) : NB.guideH2;
+ if (h2) guideH2.innerHTML = h2;
+ }
+ if (guideEyebrow && NB.guideEyebrow) guideEyebrow.textContent = NB.guideEyebrow;
+ if (guideLede && NB.guideLede) guideLede.textContent = NB.guideLede;
+ if (guideList && Array.isArray(NB.thingsToDo)) {
+ guideList.innerHTML = NB.thingsToDo.map((it, i) => {
+ const seed = (it.t || "").toLowerCase().replace(/[^a-z0-9]+/g, "-");
+ const fallback = `https://picsum.photos/seed/${encodeURIComponent(seed)}/280/200`;
+ return `
+ <li data-wiki="${it.wiki || ''}" data-idx="${i}">
+ <span class="n">${it.n}</span>
+ <img class="thumb" src="${fallback}" alt="${it.t}" loading="lazy">
+ <span class="t">${it.t}</span>
+ <span class="d">${it.d}</span>
+ <span class="k">${it.k}</span>
+ </li>`;
+ }).join("");
+ // Async: replace thumbnails with Wikipedia page images where available
+ guideList.querySelectorAll("li[data-wiki]").forEach(async (li) => {
+ const title = li.getAttribute("data-wiki");
+ if (!title) return;
+ const src = await wikiThumb(title);
+ if (src) {
+ const img = li.querySelector(".thumb");
+ if (img) img.src = src;
+ }
+ });
+ }
+ }
+
+ // History — rewrite paragraphs + timeline from neighborhood
+ const historyCopy = document.querySelector(".history-copy");
+ const timelineEl = document.querySelector(".timeline");
+ if (NB && historyCopy) {
+ const hH2 = (typeof NB.historyH2 === "function") ? NB.historyH2(escapeHtml(address.city || "")) : NB.historyH2;
+ historyCopy.innerHTML = `
+ <div class="eyebrow accent">${NB.historyEyebrow || "§ 07 · THE NEIGHBORHOOD"}</div>
+ <h2 class="display sm">${hH2 || "Your neighborhood<br>has stories."}</h2>
+ ${(NB.historyParagraphs || []).map(p => `<p>${p}</p>`).join("")}
+ `;
+ }
+ if (NB && timelineEl && Array.isArray(NB.timeline)) {
+ timelineEl.style.display = "";
+ timelineEl.innerHTML = NB.timeline.map(t => `<li><span class="y">${t.y}</span><span>${t.t}</span></li>`).join("");
+ }
+
+ // Map section — swap the three mockup images for real Google Maps iframes
+ // Use address string (not lat/lng) so Google snaps to the street-frontage pano,
+ // not the closest pano which can face the alley.
+ const fullAddr = [address.street, address.city, address.state, address.zip].filter(Boolean).join(", ");
+ const mapMainImg = document.querySelector(".map-main img");
+ if (mapMainImg) {
+ const sv = document.createElement("iframe");
+ sv.src = `https://maps.google.com/maps?q=${encodeURIComponent(fullAddr)}&layer=c&output=svembed`;
+ sv.loading = "lazy";
+ sv.style.cssText = "width:100%;height:100%;border:0;display:block;";
+ sv.title = "Street view";
+ mapMainImg.replaceWith(sv);
+ }
+ const sideTiles = document.querySelectorAll(".map-side .map-tile img");
+ if (sideTiles.length >= 1) {
+ const sat = document.createElement("iframe");
+ sat.src = `https://maps.google.com/maps?q=${address.lat},${address.lng}&t=k&z=18&output=embed`;
+ sat.loading = "lazy";
+ sat.style.cssText = "width:100%;height:100%;border:0;display:block;";
+ sat.title = "Satellite";
+ sideTiles[0].replaceWith(sat);
+ }
+ if (sideTiles.length >= 2 && nearest[0]) {
+ const dir = document.createElement("iframe");
+ const v = nearest[0];
+ // Google Maps directions-style embed without API key
+ dir.src = `https://maps.google.com/maps?saddr=${address.lat},${address.lng}&daddr=${v.lat},${v.lng}&output=embed`;
+ dir.loading = "lazy";
+ dir.style.cssText = "width:100%;height:100%;border:0;display:block;";
+ dir.title = "Drive to " + v.name;
+ sideTiles[1].replaceWith(dir);
+ // Update the drive chip with the real nearest venue
+ const driveChip = document.querySelector(".map-side .map-tile:nth-child(2) .chip-abs");
+ if (driveChip) driveChip.textContent = `DRIVE TO ${v.name.toUpperCase()}`;
+ const driveMeta = document.querySelector(".map-side .map-tile:nth-child(2) .drive-meta");
+ if (driveMeta) driveMeta.innerHTML = `<b>${escapeHtml(v.min)} min</b><span>${v.mi.toFixed(1)} MILES</span>`;
+ }
+ // Rewrite map chips for clarity
+ const liveChip = document.querySelector(".map-main .chip-abs.tl");
+ if (liveChip) liveChip.textContent = `LIVE STREET VIEW · ${address.street || ""}`.trim();
+ const headChip = document.querySelector(".map-main .chip-abs.tl2");
+ if (headChip) headChip.textContent = `LAT ${address.lat.toFixed(4)} · LNG ${address.lng.toFixed(4)} · GOOGLE`;
+
+ // Relabel the interior contact sheet as reference imagery
+ const sheetHead = document.querySelector(".plate ~ .olympics");
+ const cs = document.querySelectorAll("#host ~ .olympics"); // no-op guard
+ // Gentle relabel on the "Contact Sheet" caption if present
+ const csEyebrow = document.querySelectorAll(".eyebrow");
+ csEyebrow.forEach(e => {
+ if (/§ 05 · CONTACT SHEET/i.test(e.textContent)) e.textContent = "§ 05 · REFERENCE IMAGERY · SWAP WITH YOUR PHOTOS";
+ });
+
+ // Contact section
+ text(".meta li:nth-child(1) b", email);
+ text(".meta li:nth-child(2) b", phone);
+ text(".meta li:nth-child(3) b", "8am–9pm Pacific · seven days");
+ const contactH = document.querySelector(".contact h2");
+ if (contactH) contactH.innerHTML = `Talk to<br>${escapeHtml(host.split(" ")[0])}.`;
+ const contactCopy = document.querySelector(".contact-copy p");
+ if (contactCopy) {
+ contactCopy.textContent = `Write me directly — I read every inquiry. Tell me which LA 2028 events you're attending and how long you'd like to stay, and I'll reply within a day.`;
+ }
+
+ // Footer
+ text(".footer .brand", "");
+ const fBrand = document.querySelector(".footer .brand");
+ if (fBrand) fBrand.innerHTML = `<span class="brand-dot"></span>${escapeHtml((host.split(" ")[0] || "").toUpperCase())} HOUSE · LA 2028 RENTAL`;
+ text(".footer .addr", `${address.street || ""} · ${address.city || ""} · ${address.county || "Los Angeles County"} · California · ${address.zip || ""}`);
+
+ // Scripted 30-second trailer — intro, house, photos, closest Games event, outro
+ buildTrailer({ address, host, nearest, price, fullAddr });
+
+ // Countdown / today-at-Games banner — date-aware (opens / live / wrapped)
+ (function countdownBanner() {
+ const OPEN = new Date(2028, 6, 14);
+ const CLOSE = new Date(2028, 6, 30);
+ const today = new Date(); today.setHours(0,0,0,0);
+ const MS_DAY = 86400000;
+ const daysTo = Math.round((OPEN - today) / MS_DAY);
+ const daysSince = Math.round((today - CLOSE) / MS_DAY);
+ const MONTHS = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];
+ let kicker, title, meta;
+ if (today < OPEN) {
+ kicker = "⏳ COUNTDOWN TO THE GAMES";
+ title = `${daysTo.toLocaleString()} days until opening`;
+ meta = `Opening ceremony · Friday, July 14, 2028 · SoFi Stadium`;
+ } else if (today > CLOSE) {
+ kicker = "THE GAMES HAVE WRAPPED";
+ title = `${daysSince} days since closing`;
+ meta = `See you at the 2030 winter edition.`;
+ } else {
+ kicker = "✦ TODAY AT THE GAMES";
+ const tk = today.toISOString().slice(0,10);
+ const live = (nearest || []).filter(v =>
+ expandDates(v.dates || "").some(d =>
+ new Date(d.year, MONTHS.indexOf(d.mm), d.dd).toISOString().slice(0,10) === tk
+ )
+ );
+ title = live.length ? live.slice(0,3).map(v => v.headline || v.sports).join(" · ") : "A quiet day between heats";
+ meta = live.length ? live.slice(0,3).map(v => `${v.name.replace(/·.*$/, "").trim()} (${v.mi.toFixed(1)} mi)`).join(" · ") : "Rest day — back tomorrow";
+ }
+ const banner = document.createElement("section");
+ banner.className = "countdown-banner";
+ banner.innerHTML = `<div class="cb-inner"><div class="cb-kicker">${escapeHtml(kicker)}</div><div class="cb-title">${escapeHtml(title)}</div><div class="cb-meta">${escapeHtml(meta)}</div></div>`;
+ const hero = document.querySelector(".hero");
+ if (hero) hero.parentNode.insertBefore(banner, hero.nextSibling);
+ })();
+
+ // Closest-event banner — prominent card with headline sport + exact day chips
+ const c0 = nearest[0];
+ if (c0) {
+ const days = expandDates(c0.dates || "Jul 14 – Jul 30, 2028");
+ const weekdayShort = ["SUN","MON","TUE","WED","THU","FRI","SAT"];
+ const dayChipsHtml = days.map(d => `
+ <span class="ce-day">
+ <em>${weekdayShort[d.dow]}</em>
+ <b>${d.dd}</b>
+ <i>${d.mm.toUpperCase()}</i>
+ </span>
+ `).join("");
+ const closestBanner = document.createElement("section");
+ closestBanner.className = "closest-event";
+ closestBanner.innerHTML = `
+ <div class="ce-inner">
+ <div class="ce-top">
+ <div class="ce-left">
+ <div class="ce-eyebrow">✦ CLOSEST GAMES EVENT TO YOUR DOOR</div>
+ <div class="ce-title">${escapeHtml(c0.headline || c0.sports)}</div>
+ <div class="ce-meta">${escapeHtml(c0.name)} · ${c0.mi.toFixed(1)} mi / ~${escapeHtml(c0.min)} min drive</div>
+ </div>
+ <div class="ce-right">
+ <div class="ce-dates-label">WINDOW · ${days.length} DAY${days.length > 1 ? 'S' : ''}</div>
+ <div class="ce-dates">${escapeHtml(c0.dates || "Jul 14 – Jul 30, 2028")}</div>
+ </div>
+ </div>
+ ${days.length ? `<div class="ce-days" aria-label="Exact event days">${dayChipsHtml}</div>` : ""}
+ </div>
+ `;
+ const hero = document.querySelector(".hero");
+ if (hero) hero.parentNode.insertBefore(closestBanner, hero.nextSibling);
+ }
+
+ // Inject a Suggested-nightly card into the hero below the property card
+ const heroBody = document.querySelector(".hero-body");
+ const existing = document.querySelector(".price-card");
+ if (heroBody && !existing && price) {
+ const card = document.createElement("aside");
+ card.className = "property-card price-card";
+ card.style.marginLeft = "16px";
+ card.innerHTML = `
+ <div class="pc-label">SUGGESTED NIGHTLY</div>
+ <div class="pc-address"><b>$${formatMoney(price.mid)}</b><span>/ NIGHT</span></div>
+ <div class="pc-sub">Range $${formatMoney(price.low)} – $${formatMoney(price.high)}<br>Jul 14 – Jul 30, 2028</div>
+ <hr>
+ <div class="pc-stats">
+ <div><b>$${formatMoney(baseline && baseline.base)}</b><span>ZIP BASE</span></div>
+ <div><b>×${price.proximity.toFixed(2)}</b><span>PROXIMITY</span></div>
+ <div><b>×${price.eventPremium.toFixed(1)}</b><span>LA 2028</span></div>
+ </div>
+ `;
+ heroBody.appendChild(card);
+ }
+
+ // Budget calculator — slider for nights × price + event-ticket estimate
+ (function budgetCalculator() {
+ if (!price) return;
+ const heroEl = document.querySelector(".hero");
+ if (!heroEl) return;
+ const panel = document.createElement("section");
+ panel.className = "budget-calc";
+ panel.innerHTML = `
+ <div class="bc-inner">
+ <div class="bc-left">
+ <div class="bc-eyebrow">✦ TRIP BUDGET — YOUR ALL-IN COST</div>
+ <h3>Plan it before you book it.</h3>
+ <p>Adjust nights and event tickets below. The nightly rate is your suggested rate; ticket averages come from public secondary-market data.</p>
+ </div>
+ <div class="bc-right">
+ <label>
+ <span>NIGHTS <b id="bc-nv">7</b></span>
+ <input type="range" id="bc-nights" min="1" max="17" value="7">
+ </label>
+ <label>
+ <span>EVENT TICKETS (per person) <b id="bc-tv">2</b></span>
+ <input type="range" id="bc-tix" min="0" max="10" value="2">
+ </label>
+ <label>
+ <span>GUESTS <b id="bc-gv">4</b></span>
+ <input type="range" id="bc-guests" min="1" max="6" value="4">
+ </label>
+ <div class="bc-breakdown">
+ <div><span>Lodging</span><b id="bc-lodge">—</b></div>
+ <div><span>Tickets</span><b id="bc-tickets">—</b></div>
+ <div class="bc-total"><span>ALL-IN</span><b id="bc-total">—</b></div>
+ </div>
+ </div>
+ </div>`;
+ // Place after the closest-event banner / before spec
+ const after = document.querySelector(".closest-event") || heroEl;
+ after.parentNode.insertBefore(panel, after.nextSibling);
+ const $ = s => panel.querySelector(s);
+ const AVG_TICKET = 185; // rough secondary-market avg across events
+ function recalc() {
+ const nights = +$("#bc-nights").value;
+ const tix = +$("#bc-tix").value;
+ const guests = +$("#bc-guests").value;
+ const lodging = nights * price.mid;
+ const tickets = tix * guests * AVG_TICKET;
+ const total = lodging + tickets;
+ $("#bc-nv").textContent = nights;
+ $("#bc-tv").textContent = tix;
+ $("#bc-gv").textContent = guests;
+ $("#bc-lodge").textContent = "$" + lodging.toLocaleString();
+ $("#bc-tickets").textContent = "$" + tickets.toLocaleString();
+ $("#bc-total").textContent = "$" + total.toLocaleString();
+ }
+ panel.querySelectorAll("input[type=range]").forEach(r => r.addEventListener("input", recalc));
+ recalc();
+ })();
+
+ // Persist guest inquiries submitted through the contact form
+ wireContactForm(r);
+
+ // Cascade uploaded photos into the hero plate + video trailer
+ applyUploadedPhotos(r);
+ }
+
+ // If the host has uploaded photos, use them as the hero plate cover image
+ // and as the two "interior" photo scenes in the video trailer.
+ function applyUploadedPhotos(rental) {
+ const photos = rental.photos || [];
+ if (!photos.length) return;
+ // Hero plate — swap the satellite iframe for the first uploaded photo
+ const plateSec = document.querySelector(".plate-img");
+ if (plateSec) {
+ const existing = plateSec.querySelector("iframe, img");
+ const img = document.createElement("img");
+ img.src = photos[0];
+ img.alt = "Cover photo";
+ img.style.cssText = "width:100%;height:600px;object-fit:cover;display:block;";
+ if (existing) existing.replaceWith(img);
+ const fig = plateSec.querySelector(".fig");
+ if (fig) fig.textContent = "COVER · YOUR PHOTO";
+ const capI = plateSec.querySelector("figcaption i");
+ if (capI) capI.textContent = "Uploaded by the host.";
+ }
+ // Trailer scenes — replace photo1 / photo2 picsum srcs with host photos once playback hits them
+ // Easiest: override the scene HTML by intercepting in buildTrailer. Alternative: monkey-patch
+ // after the player renders. We'll wait a tick and replace picsum imgs inside the stage.
+ setTimeout(() => {
+ document.querySelectorAll(".player .tr-photo").forEach((img, i) => {
+ const src = photos[i + 1] || photos[i];
+ if (src) img.src = src;
+ });
+ }, 100);
+ // Contact-sheet style: if more than 2 photos, fill the existing plate area with a grid
+ // (already have plate + trailer — leave rest for v2)
+ }
+
+ // Wire the contact form on rental.html to save inquiries to the rental record
+ function wireContactForm(rental) {
+ const form = document.getElementById("contact-form");
+ if (!form) return;
+ form.addEventListener("submit", e => {
+ e.preventDefault();
+ const f = e.currentTarget;
+ const events = Array.from(f.querySelectorAll(".events input[type=checkbox]"))
+ .filter(c => c.checked).map(c => c.parentElement.textContent.trim());
+ const inquiry = {
+ id: "inq-" + Math.random().toString(36).slice(2, 10),
+ firstName: f.first ? f.first.value : "",
+ lastName: f.last ? f.last.value : "",
+ email: f.email ? f.email.value : "",
+ checkIn: f.in ? f.in.value : "",
+ checkOut: f.out ? f.out.value : "",
+ guests: f.guests? f.guests.value: "",
+ events,
+ message: f.msg ? f.msg.value : "",
+ createdAt: new Date().toISOString(),
+ };
+ try {
+ const all = JSON.parse(localStorage.getItem("htg.rentals") || "{}");
+ if (all[rental.slug]) {
+ all[rental.slug].inquiries = all[rental.slug].inquiries || [];
+ all[rental.slug].inquiries.push(inquiry);
+ localStorage.setItem("htg.rentals", JSON.stringify(all));
+ }
+ } catch (err) {}
+ // UX: replace the form with a thank-you state
+ form.innerHTML = `
+ <div style="padding: 24px; border: 1px solid rgba(255,255,255,.25);">
+ <div style="font-family: var(--font-body); font-weight: 800; font-size: 11px; letter-spacing: 0.24em; color: var(--accent); margin-bottom: 8px;">✓ INQUIRY SAVED</div>
+ <div style="font-family: var(--font-serif); font-size: 19px; line-height: 1.5;">Thanks, ${escapeHtml(inquiry.firstName || "friend")} — your message is in the host's inbox.</div>
+ <div style="font-family: var(--font-serif); font-style: italic; font-size: 15px; opacity: .7; margin-top: 8px;">They'll reply to ${escapeHtml(inquiry.email || "you")} within 24 hours.</div>
+ </div>`;
+ });
+ }
+
+ function render() {
+ const r = load();
+ if (!r) {
+ document.body.innerHTML = `
+ <div style="font-family: Inter, sans-serif; max-width: 520px; margin: 12vh auto; padding: 32px; text-align: center;">
+ <h1 style="font-family: Archivo, sans-serif; font-weight: 900; font-size: 40px; margin: 0 0 12px;">No rental found.</h1>
+ <p style="color: #555; font-size: 17px; line-height: 1.5;">Go to the signup page, enter your address, and we'll render a personalized rental microsite.</p>
+ <p style="margin-top: 24px;"><a href="index.html" style="color: #E2302A; font-weight: 700; letter-spacing: 0.1em; font-size: 13px;">→ CLAIM YOUR ADDRESS</a></p>
+ </div>
+ `;
+ return;
+ }
+ patch(r);
+ }
+
+ if (document.readyState === "loading") document.addEventListener("DOMContentLoaded", render);
+ else render();
+})();
+
+// Live rail — clock ticker
+(function railClock() {
+ const el = document.querySelector("[data-clock] b");
+ if (!el) return;
+ function tick() {
+ const d = new Date();
+ // Show local time formatted as HH : MM : SS (Pacific is user's local assumption)
+ const pad = n => String(n).padStart(2, "0");
+ el.textContent = `${pad(d.getHours())} : ${pad(d.getMinutes())} : ${pad(d.getSeconds())}`;
+ }
+ tick();
+ setInterval(tick, 1000);
+})();
diff --git a/schedule.css b/schedule.css
new file mode 100644
index 0000000..afb80fa
--- /dev/null
+++ b/schedule.css
@@ -0,0 +1,77 @@
+/* schedule.css — Victory Stays / The 2028 Games calendar */
+.sched .l-nav-links a.active { color: var(--fg); font-weight: 700; }
+
+.sched-hero {
+ padding: 48px 56px 32px;
+ display: flex; justify-content: space-between; align-items: flex-end; gap: 40px;
+ border-bottom: 1px solid var(--soft);
+}
+.sched-hero h1 {
+ font-family: var(--display); font-weight: 900; font-size: 64px; line-height: 1;
+ letter-spacing: -0.03em; margin: 10px 0 14px;
+}
+.sched-sub { font-family: var(--serif); font-size: 17px; line-height: 1.45; color: var(--muted); max-width: 56ch; margin: 0; }
+.sched-sub b { color: var(--fg); }
+.sched-meta { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px 36px; text-align: right; }
+.sched-meta > div { display: flex; flex-direction: column; gap: 2px; }
+.sched-meta b { font-family: var(--display); font-weight: 900; font-size: 28px; line-height: 1; letter-spacing: -0.02em; }
+.sched-meta span { font-size: 11px; letter-spacing: 0.14em; color: var(--muted); }
+
+.sched-filters {
+ padding: 32px 56px 12px;
+ display: flex; flex-direction: column; gap: 14px;
+}
+.filter-chips { display: flex; flex-wrap: wrap; gap: 8px; }
+.vchip {
+ padding: 8px 14px; background: transparent; border: 1px solid var(--soft);
+ color: var(--fg); font-family: var(--body); font-weight: 600; font-size: 12px;
+ letter-spacing: 0.08em; cursor: pointer;
+}
+.vchip:hover { border-color: var(--accent); color: var(--accent); }
+.vchip.on { background: var(--fg); color: var(--bg); border-color: var(--fg); }
+
+/* Calendar grid — every day of the Games */
+.sched-calendar {
+ padding: 12px 56px 56px;
+ display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px;
+}
+.day { border: 1px solid var(--soft); padding: 16px; display: flex; flex-direction: column; gap: 12px; background: var(--bg); min-height: 220px; }
+.day.empty { opacity: .55; background: var(--soft); }
+.day.open { border-color: var(--accent); box-shadow: inset 0 3px 0 var(--accent); }
+.day.close { border-color: var(--accent); box-shadow: inset 0 -3px 0 var(--accent); }
+.day header { display: grid; grid-template-columns: auto 1fr auto; align-items: baseline; gap: 8px; padding-bottom: 8px; border-bottom: 1px solid var(--soft); }
+.day-dow { font-family: var(--body); font-weight: 800; font-size: 10px; letter-spacing: 0.22em; color: var(--accent); }
+.day-num { font-family: var(--display); font-weight: 900; font-size: 40px; line-height: 1; letter-spacing: -0.03em; }
+.day-mon { font-family: var(--body); font-weight: 800; font-size: 10px; letter-spacing: 0.22em; color: var(--muted); }
+.day-count { grid-column: 1 / -1; font-family: var(--body); font-size: 11px; letter-spacing: 0.14em; color: var(--muted); margin-top: 4px; }
+.day ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
+.ev { display: flex; flex-direction: column; gap: 1px; padding: 6px 10px; background: var(--soft); }
+.ev b { font-family: var(--body); font-weight: 700; font-size: 13px; }
+.ev span { font-family: var(--serif); font-style: italic; font-size: 11px; color: var(--muted); }
+.ev-open { background: var(--accent); color: #fff; }
+.ev-open b, .ev-open span, .ev-close b, .ev-close span { color: #fff; }
+.ev-close { background: var(--fg); }
+.ev-none { font-family: var(--serif); font-style: italic; font-size: 13px; color: var(--muted); padding: 4px 0; }
+
+/* By-sport alphabetical grid */
+.sched-by-sport { padding: 56px 56px; border-top: 1px solid var(--soft); display: flex; flex-direction: column; gap: 24px; }
+.sched-by-sport header { display: flex; flex-direction: column; gap: 8px; }
+.sched-by-sport h2 { font-family: var(--display); font-weight: 900; font-size: 40px; line-height: 1; letter-spacing: -0.02em; margin: 0; }
+.sport-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
+.sport-card {
+ padding: 18px; border: 1px solid var(--soft); background: var(--bg);
+ display: flex; flex-direction: column; gap: 6px;
+}
+.sport-head { font-family: var(--display); font-weight: 900; font-size: 20px; letter-spacing: -0.01em; }
+.sport-venue { font-family: var(--serif); font-size: 15px; color: var(--fg); }
+.sport-dates { font-family: var(--body); font-weight: 700; font-size: 11px; letter-spacing: 0.14em; color: var(--accent); }
+
+@media (max-width: 1100px) { .sched-calendar { grid-template-columns: repeat(3, 1fr); } .sport-grid { grid-template-columns: 1fr 1fr; } }
+@media (max-width: 700px) {
+ .sched-hero, .sched-filters, .sched-calendar, .sched-by-sport { padding-left: 20px; padding-right: 20px; }
+ .sched-hero { flex-direction: column; align-items: flex-start; gap: 20px; }
+ .sched-hero h1 { font-size: 40px; }
+ .sched-meta { grid-template-columns: 1fr 1fr; text-align: left; }
+ .sched-calendar { grid-template-columns: 1fr 1fr; }
+ .sport-grid { grid-template-columns: 1fr; }
+}
diff --git a/schedule.html b/schedule.html
new file mode 100644
index 0000000..ccea134
--- /dev/null
+++ b/schedule.html
@@ -0,0 +1,69 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <title>The 2028 Games — Full Schedule · Victory Stays</title>
+ <link rel="preconnect" href="https://fonts.googleapis.com">
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+ <link href="https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;700;800;900&family=EB+Garamond:ital,wght@0,400;1,400&family=Inter:wght@400;500;600;700;800;900&display=swap" rel="stylesheet">
+ <link rel="stylesheet" href="landing.css?v=10">
+ <link rel="stylesheet" href="schedule.css?v=10">
+</head>
+<body class="sched">
+
+<nav class="l-nav">
+ <div class="l-brand">
+ <span class="l-dot"></span>
+ <span class="l-mark">VICTORY STAYS</span>
+ <span class="l-sub">The Games · Full Schedule</span>
+ </div>
+ <div class="l-nav-links">
+ <a href="index.html">Landing</a>
+ <a href="dashboard.html">Dashboard</a>
+ <a href="browse.html">Browse</a>
+ <a href="schedule.html" class="active">Schedule</a>
+ <a href="index.html#about">About</a>
+ </div>
+ <a class="l-nav-cta" href="index.html#signup">Claim your address →</a>
+</nav>
+
+<header class="sched-hero">
+ <div>
+ <div class="l-eyebrow accent">§ The 2028 Games · Los Angeles</div>
+ <h1>Seventeen days,<br>fifteen venues,<br>every sport.</h1>
+ <p class="sched-sub">Opening ceremony <b>Friday, July 14</b> at SoFi Stadium. Closing <b>Sunday, July 30</b>. All Games events and venues below — click a venue chip to filter.</p>
+ </div>
+ <div class="sched-meta">
+ <div><b>17</b><span>days of competition</span></div>
+ <div><b>15</b><span>venues mapped</span></div>
+ <div><b>Jul 14</b><span>opening ceremony</span></div>
+ <div><b>Jul 30</b><span>closing ceremony</span></div>
+ </div>
+</header>
+
+<section class="sched-filters">
+ <span class="l-eyebrow">§ Filter by venue</span>
+ <div class="filter-chips" id="filter-chips"><!-- populated by JS --></div>
+</section>
+
+<section class="sched-calendar" id="sched-calendar"><!-- populated by JS --></section>
+
+<section class="sched-by-sport">
+ <header>
+ <div class="l-eyebrow accent">§ Every venue, by sport</div>
+ <h2>All 15 venues — alphabetical.</h2>
+ </header>
+ <div class="sport-grid" id="sport-grid"><!-- populated by JS --></div>
+</section>
+
+<footer class="l-footer">
+ <div class="l-foot-brand"><span class="l-dot"></span>VICTORY STAYS · NOT AFFILIATED WITH LA 2028</div>
+ <div class="l-foot-mid">Schedule compiled from public venue announcements · dates may shift pre-event</div>
+ <div class="l-foot-credit">© 2028 · hello@victorystays.com</div>
+</footer>
+
+<script src="signup.js?v=10"></script>
+<script src="schedule.js?v=10"></script>
+</body>
+</html>
diff --git a/schedule.js b/schedule.js
new file mode 100644
index 0000000..b8046ea
--- /dev/null
+++ b/schedule.js
@@ -0,0 +1,131 @@
+// schedule.js — builds the Games calendar page from LA28_VENUES
+// Uses window.LA28_VENUES exposed by signup.js (or reads directly if loaded first).
+
+(function () {
+ // signup.js currently runs a bunch of side-effects when loaded in-browser.
+ // We only need LA28_VENUES, which is defined at module scope. To be safe,
+ // we hard-mirror the dataset here; keep in sync with signup.js.
+ const VENUES = [
+ { name: "SoFi Stadium · Inglewood", short: "SoFi", headline: "Opening Ceremony", dates: "Jul 14, 2028" },
+ { name: "Rose Bowl · Pasadena", short: "Rose Bowl", headline: "Soccer (Football)", dates: "Jul 11 – Jul 29, 2028" },
+ { name: "Long Beach Convention Center", short: "Long Beach Conv.", headline: "Handball", dates: "Jul 15 – Jul 30, 2028" },
+ { name: "Long Beach · Alamitos Beach", short: "Alamitos Beach", headline: "Beach Volleyball", dates: "Jul 15 – Jul 26, 2028" },
+ { name: "Santa Monica Pier", short: "Santa Monica", headline: "Triathlon · Marathon Swim", dates: "Jul 15 – Jul 19, 2028" },
+ { name: "Exposition Park Aquatic Center", short: "Expo Aquatic", headline: "Swimming · Diving", dates: "Jul 15 – Jul 21, 2028" },
+ { name: "UCLA · Pauley Pavilion", short: "Pauley Pavilion", headline: "Gymnastics (Artistic)", dates: "Jul 15 – Jul 23, 2028" },
+ { name: "Dodger Stadium", short: "Dodger Stadium", headline: "Baseball / Softball", dates: "Jul 17 – Jul 28, 2028" },
+ { name: "Dignity Health Sports Park", short: "Dignity Health", headline: "Track Cycling · Tennis", dates: "Jul 17 – Jul 22, 2028" },
+ { name: "Sepulveda Basin Valley Complex", short: "Valley Complex", headline: "3×3 Basketball · BMX · Skate · Pentathlon", dates: "Jul 18 – Jul 28, 2028" },
+ { name: "LA Memorial Coliseum", short: "LA Coliseum", headline: "Track & Field", dates: "Jul 21 – Jul 30, 2028" },
+ { name: "Crypto.com Arena · DTLA", short: "Crypto.com Arena", headline: "Gymnastics Finals", dates: "Jul 21 – Jul 23, 2028" },
+ { name: "Peacock Theater · LA Live", short: "Peacock Theater", headline: "Weightlifting", dates: "Jul 23 – Jul 29, 2028" },
+ { name: "Intuit Dome · Inglewood", short: "Intuit Dome", headline: "Basketball", dates: "Jul 24 – Jul 30, 2028" },
+ { name: "Riviera Country Club", short: "Riviera CC", headline: "Golf", dates: "Jul 25 – Jul 30, 2028" },
+ // Closing ceremony — back at SoFi
+ { name: "SoFi Stadium · Inglewood", short: "SoFi", headline: "Closing Ceremony", dates: "Jul 30, 2028" },
+ ];
+
+ const MONTHS = { Jan:0, Feb:1, Mar:2, Apr:3, May:4, Jun:5, Jul:6, Aug:7, Sep:8, Oct:9, Nov:10, Dec:11 };
+ const MNAMES = Object.keys(MONTHS);
+ const DOW = ["SUN","MON","TUE","WED","THU","FRI","SAT"];
+
+ function expandDates(str) {
+ const clean = String(str || "").replace(/[–—]/g, "-").trim();
+ let m = clean.match(/^(\w{3})\s+(\d{1,2})\s*-\s*(\w{3})\s+(\d{1,2}),\s*(\d{4})$/);
+ if (m) {
+ const [, m1, d1, m2, d2, y] = m;
+ const start = new Date(+y, MONTHS[m1], +d1);
+ const end = new Date(+y, MONTHS[m2], +d2);
+ const out = [];
+ for (let d = new Date(start); d <= end; d.setDate(d.getDate() + 1)) {
+ out.push({ key: d.toISOString().slice(0,10), date: new Date(d) });
+ }
+ return out;
+ }
+ m = clean.match(/^(\w{3})\s+(\d{1,2}),\s*(\d{4})$/);
+ if (m) {
+ const d = new Date(+m[3], MONTHS[m[1]], +m[2]);
+ return [{ key: d.toISOString().slice(0,10), date: d }];
+ }
+ return [];
+ }
+
+ // ------------ Calendar render ------------
+ function renderCalendar(filterVenue = "") {
+ const byDay = new Map();
+ const dayKeys = [];
+ const d0 = new Date(2028, 6, 11); // Jul 11 (soccer starts)
+ const dN = new Date(2028, 6, 30); // Jul 30 (closing)
+ for (let d = new Date(d0); d <= dN; d.setDate(d.getDate() + 1)) {
+ const k = d.toISOString().slice(0, 10);
+ byDay.set(k, []);
+ dayKeys.push(k);
+ }
+ VENUES.forEach(v => {
+ if (filterVenue && v.short !== filterVenue) return;
+ expandDates(v.dates).forEach(ex => {
+ if (byDay.has(ex.key)) byDay.get(ex.key).push(v);
+ });
+ });
+
+ const cal = document.getElementById("sched-calendar");
+ const months = ["Jul 2028"];
+ cal.innerHTML = dayKeys.map(k => {
+ const d = new Date(k);
+ const events = byDay.get(k);
+ const isOpen = events.some(e => /Opening/i.test(e.headline));
+ const isClose = events.some(e => /Closing/i.test(e.headline));
+ const headerTone = isOpen ? "open" : isClose ? "close" : "";
+ return `
+ <article class="day ${events.length ? "" : "empty"} ${headerTone}">
+ <header>
+ <span class="day-dow">${DOW[d.getDay()]}</span>
+ <span class="day-num">${d.getDate()}</span>
+ <span class="day-mon">JUL</span>
+ <span class="day-count">${events.length} event${events.length === 1 ? "" : "s"}</span>
+ </header>
+ <ul>
+ ${events.map(e => `
+ <li class="ev ${isOpen && /Opening/i.test(e.headline) ? "ev-open" : ""} ${isClose && /Closing/i.test(e.headline) ? "ev-close" : ""}">
+ <b>${e.headline}</b>
+ <span>${e.short}</span>
+ </li>`).join("")}
+ ${events.length === 0 ? `<li class="ev-none">Rest day — no competition</li>` : ""}
+ </ul>
+ </article>`;
+ }).join("");
+ }
+
+ // ------------ Venue filter chips ------------
+ function renderChips(active = "") {
+ const chips = document.getElementById("filter-chips");
+ const all = [...new Set(VENUES.map(v => v.short))];
+ chips.innerHTML = `
+ <button class="vchip ${active === "" ? "on" : ""}" data-v="">All venues</button>
+ ${all.map(v => `<button class="vchip ${active === v ? "on" : ""}" data-v="${v}">${v}</button>`).join("")}
+ `;
+ chips.querySelectorAll(".vchip").forEach(b => b.addEventListener("click", () => {
+ const v = b.getAttribute("data-v");
+ renderChips(v);
+ renderCalendar(v);
+ }));
+ }
+
+ // ------------ Alphabetical grid ------------
+ function renderSportGrid() {
+ const sorted = [...VENUES].sort((a, b) => a.headline.localeCompare(b.headline));
+ document.getElementById("sport-grid").innerHTML = sorted.map(v => `
+ <article class="sport-card">
+ <div class="sport-head">${v.headline}</div>
+ <div class="sport-venue">${v.name}</div>
+ <div class="sport-dates">${v.dates}</div>
+ </article>
+ `).join("");
+ }
+
+ document.addEventListener("DOMContentLoaded", () => {
+ renderChips();
+ renderCalendar();
+ renderSportGrid();
+ });
+})();
diff --git a/signup.js b/signup.js
new file mode 100644
index 0000000..747838b
--- /dev/null
+++ b/signup.js
@@ -0,0 +1,436 @@
+// Victory Stays — signup → geocode → price → save → open rental
+// Limitations: no real email verification (honor-system gate).
+// Pricing uses transparent heuristics over public data (OpenStreetMap geocoding
+// + LA 2028 venue coordinates + ZIP baseline). No live scraping of Zillow/Airbnb.
+
+const HTG_SCHEMA = 3;
+// Auto-wipe stored rentals if they were seeded under an older schema —
+// old records lack headline/dates/wiki fields added in v3.
+if (typeof localStorage !== "undefined") {
+ try {
+ const v = Number(localStorage.getItem("htg.schema") || 1);
+ if (v !== HTG_SCHEMA) {
+ localStorage.removeItem("htg.rentals");
+ localStorage.removeItem("htg.active");
+ localStorage.removeItem("victorystays.rental");
+ localStorage.setItem("htg.schema", HTG_SCHEMA);
+ }
+ } catch (e) {}
+}
+
+const LA2028_VENUES = [
+ { name: "Sepulveda Basin Valley Complex", sports: "3x3 basketball · BMX · skate · pentathlon", headline: "3×3 Basketball", dates: "Jul 18 – Jul 28, 2028", lat: 34.1706, lng: -118.4787 },
+ { name: "UCLA · Pauley Pavilion", sports: "gymnastics · basketball", headline: "Gymnastics (Artistic)", dates: "Jul 15 – Jul 23, 2028", lat: 34.0704, lng: -118.4468 },
+ { name: "SoFi Stadium · Inglewood", sports: "opening & closing ceremony", headline: "Opening Ceremony", dates: "Jul 14, 2028", lat: 33.9535, lng: -118.3391 },
+ { name: "Crypto.com Arena · DTLA", sports: "gymnastics final", headline: "Gymnastics Finals", dates: "Jul 21 – Jul 23, 2028", lat: 34.0430, lng: -118.2673 },
+ { name: "Peacock Theater · LA Live", sports: "weightlifting", headline: "Weightlifting", dates: "Jul 23 – Jul 29, 2028", lat: 34.0425, lng: -118.2666 },
+ { name: "LA Memorial Coliseum", sports: "track & field", headline: "Track & Field", dates: "Jul 21 – Jul 30, 2028", lat: 34.0141, lng: -118.2879 },
+ { name: "Long Beach Convention Center", sports: "handball", headline: "Handball", dates: "Jul 15 – Jul 30, 2028", lat: 33.7648, lng: -118.1905 },
+ { name: "Long Beach · Alamitos Beach", sports: "beach volleyball", headline: "Beach Volleyball", dates: "Jul 15 – Jul 26, 2028", lat: 33.7617, lng: -118.1839 },
+ { name: "Santa Monica Pier", sports: "triathlon · marathon swim", headline: "Triathlon", dates: "Jul 15 – Jul 19, 2028", lat: 34.0100, lng: -118.4973 },
+ { name: "Riviera Country Club", sports: "golf", headline: "Golf", dates: "Jul 25 – Jul 30, 2028", lat: 34.0505, lng: -118.5096 },
+ { name: "Intuit Dome · Inglewood", sports: "basketball", headline: "Basketball", dates: "Jul 24 – Jul 30, 2028", lat: 33.9450, lng: -118.3420 },
+ { name: "Dignity Health Sports Park", sports: "track cycling · tennis", headline: "Track Cycling", dates: "Jul 17 – Jul 22, 2028", lat: 33.8631, lng: -118.2612 },
+ { name: "Dodger Stadium", sports: "baseball / softball", headline: "Baseball", dates: "Jul 17 – Jul 28, 2028", lat: 34.0739, lng: -118.2400 },
+ { name: "Exposition Park Aquatic Center", sports: "swimming · diving", headline: "Swimming", dates: "Jul 15 – Jul 21, 2028", lat: 34.0164, lng: -118.2878 },
+ { name: "Rose Bowl · Pasadena", sports: "soccer", headline: "Soccer (Football)", dates: "Jul 11 – Jul 29, 2028", lat: 34.1613, lng: -118.1676 },
+];
+
+const SERVICE_MAX_MI = 30; // We only host rentals within 30 miles of a venue
+
+// Rough ZIP baseline table (per-night for 3br in non-Games times).
+// Coarse on purpose — real tool would hit Zillow/Redfin comps on a server.
+const ZIP_BASELINE = [
+ { prefix: "902", base: 650, label: "Beverly Hills / Brentwood / Bel Air" },
+ { prefix: "900", base: 500, label: "West Hollywood / mid-city LA" },
+ { prefix: "901", base: 425, label: "Downtown / East LA" },
+ { prefix: "903", base: 325, label: "South LA / Inglewood" },
+ { prefix: "904", base: 475, label: "Santa Monica / Venice" },
+ { prefix: "905", base: 260, label: "South Bay / Long Beach" },
+ { prefix: "906", base: 325, label: "Long Beach / Signal Hill" },
+ { prefix: "907", base: 260, label: "South Bay" },
+ { prefix: "910", base: 240, label: "Pasadena / Arcadia" },
+ { prefix: "911", base: 240, label: "Glendale / Burbank" },
+ { prefix: "912", base: 240, label: "Glendale" },
+ { prefix: "913", base: 210, label: "San Fernando Valley N" },
+ { prefix: "914", base: 250, label: "SFV W · Woodland Hills" },
+ { prefix: "91324", base: 185, label: "Northridge" },
+ { prefix: "9132", base: 195, label: "Northridge / Reseda" },
+ { prefix: "915", base: 215, label: "Santa Clarita" },
+ { prefix: "916", base: 230, label: "Simi Valley" },
+ { prefix: "9", base: 225, label: "Greater Los Angeles" },
+];
+
+function baselineFor(zip) {
+ for (const r of ZIP_BASELINE) if (zip && zip.startsWith(r.prefix)) return r;
+ return { prefix: "default", base: 225, label: "Greater Los Angeles" };
+}
+
+// Great-circle distance in miles
+function haversineMi(a, b) {
+ const toRad = x => x * Math.PI / 180;
+ const R = 3958.8;
+ const dLat = toRad(b.lat - a.lat);
+ const dLng = toRad(b.lng - a.lng);
+ const s = Math.sin(dLat/2)**2 + Math.cos(toRad(a.lat)) * Math.cos(toRad(b.lat)) * Math.sin(dLng/2)**2;
+ return 2 * R * Math.asin(Math.sqrt(s));
+}
+
+function drivingMin(mi) { return Math.round(mi * 2.4); } // coarse LA traffic estimate
+
+async function geocodeOnce(q) {
+ const url = `https://nominatim.openstreetmap.org/search?format=json&addressdetails=1&limit=1&q=${encodeURIComponent(q)}`;
+ const headers = { "Accept": "application/json" };
+ if (typeof window === "undefined") headers["User-Agent"] = "Victory Stays/0.1 (contact: hello@victorystays.com)";
+ const r = await fetch(url, { headers });
+ if (!r.ok) throw new Error("Geocoding failed (" + r.status + ")");
+ const rows = await r.json();
+ return rows[0] || null;
+}
+
+async function geocode(address) {
+ // Try the raw query first; on miss, retry with directionals stripped and
+ // with the "probably-wrong ZIP" removed. USPS vs OSM disagree about 90210/90212.
+ const variants = [
+ address,
+ address.replace(/\b([NSEW])\.? /gi, ""),
+ address.replace(/\b([NSEW])\.? /gi, "").replace(/,?\s*9\d{4}\s*$/, ""),
+ ];
+ let row = null;
+ for (const q of variants) {
+ row = await geocodeOnce(q);
+ if (row) break;
+ await new Promise(res => setTimeout(res, 900)); // be polite to Nominatim
+ }
+ if (!row) throw new Error("We couldn't find that address. Double-check the street and ZIP.");
+ const a = row.address || {};
+ return {
+ lat: parseFloat(row.lat),
+ lng: parseFloat(row.lon),
+ display: row.display_name,
+ street: [a.house_number, a.road].filter(Boolean).join(" "),
+ city: a.city || a.town || a.village || a.neighbourhood || a.suburb,
+ county: a.county,
+ state: a.state,
+ zip: a.postcode,
+ };
+}
+
+function nearestVenues(coord, n = 6) {
+ return LA2028_VENUES
+ .map(v => ({ ...v, mi: haversineMi(coord, v) }))
+ .sort((a, b) => a.mi - b.mi)
+ .slice(0, n)
+ .map(v => ({ ...v, min: drivingMin(v.mi) }));
+}
+
+function priceModel(baseline, nearest) {
+ // Proximity multiplier — closer to a venue → higher premium
+ const closest = nearest[0].mi;
+ let proximity;
+ if (closest < 2) proximity = 1.6;
+ else if (closest < 5) proximity = 1.4;
+ else if (closest < 10) proximity = 1.25;
+ else if (closest < 20) proximity = 1.1;
+ else proximity = 1.0;
+ const eventPremium = 2.8; // LA 2028 two-week window demand spike
+ const low = Math.round(baseline.base * proximity * (eventPremium - 0.4));
+ const mid = Math.round(baseline.base * proximity * eventPremium);
+ const high = Math.round(baseline.base * proximity * (eventPremium + 0.5));
+ return { low, mid, high, proximity, eventPremium, closestMi: closest };
+}
+
+function slugify(s) {
+ return String(s).toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-+|-+$/g, "").slice(0, 60);
+}
+
+function escapeHtml(s) {
+ return String(s ?? "")
+ .replace(/&/g, "&")
+ .replace(/</g, "<")
+ .replace(/>/g, ">")
+ .replace(/"/g, """)
+ .replace(/'/g, "'");
+}
+const escapeAttr = escapeHtml;
+
+function summarize(data) {
+ const p = data.price;
+ const n = data.nearest;
+ return {
+ headlineRange: `$${p.low.toLocaleString()} – $${p.high.toLocaleString()}`,
+ suggested: `$${p.mid.toLocaleString()} / night`,
+ nearest: `${n[0].name} — ${n[0].mi.toFixed(1)} mi / ~${n[0].min} min`,
+ };
+}
+
+// ----- DOM wiring -----
+const $ = sel => document.querySelector(sel);
+
+if (typeof document !== "undefined") {
+ const form = $("#signup-form");
+ const status = $("#f-status");
+ const btn = $("#f-submit");
+
+ function setStatus(html, ok = false) {
+ status.innerHTML = html;
+ status.hidden = false;
+ status.classList.toggle("ok", ok);
+ }
+
+ async function handleSubmit(e) {
+ e.preventDefault();
+ const address = $("#f-addr").value.trim();
+ const host = $("#f-host").value.trim();
+ const email = $("#f-email").value.trim();
+ const phone = $("#f-phone").value.trim();
+ if (!address || !host || !email || !phone) return;
+
+ btn.disabled = true;
+ btn.querySelector("span").textContent = "Finding your address…";
+ setStatus("<b>Geocoding</b>Asking OpenStreetMap for your coordinates…");
+
+ try {
+ const geo = await geocode(address);
+ btn.querySelector("span").textContent = "Mapping venues…";
+ const nearest = nearestVenues({ lat: geo.lat, lng: geo.lng }, 6);
+ const baseline = baselineFor(geo.zip || "");
+ const price = priceModel(baseline, nearest);
+
+ // Eligibility — service is LA 2028-local, within SERVICE_MAX_MI of a venue
+ if (nearest[0].mi > SERVICE_MAX_MI) {
+ setStatus(`<b>Outside our coverage area</b>
+ Your home is ${nearest[0].mi.toFixed(1)} miles from the nearest LA 2028 venue (${nearest[0].name}).
+ We currently only host microsites within ${SERVICE_MAX_MI} miles of a Games venue.
+ <a href="mailto:hello@victorystays.com?subject=Coverage%20request">Email us</a> if you'd like us to expand the service to your area.`);
+ btn.querySelector("span").textContent = "Try another address →";
+ btn.disabled = false;
+ return;
+ }
+
+ const slug = slugify((geo.street || address).split(",")[0]);
+ const record = {
+ slug,
+ host, email, phone,
+ address: {
+ raw: address,
+ display: geo.display,
+ street: geo.street || address.split(",")[0],
+ city: geo.city || "",
+ county: geo.county || "",
+ state: geo.state || "California",
+ zip: geo.zip || "",
+ lat: geo.lat, lng: geo.lng,
+ },
+ baseline, price, nearest,
+ createdAt: new Date().toISOString(),
+ verified: true, // honor-system: no real email verify yet
+ };
+ const all = JSON.parse(localStorage.getItem("htg.rentals") || "{}");
+ all[slug] = record;
+ localStorage.setItem("htg.rentals", JSON.stringify(all));
+ localStorage.setItem("htg.active", slug);
+
+ const s = summarize(record);
+ const closest = nearest[0];
+ setStatus(`
+ <b>Ready to render · saved to your dashboard</b>
+ Your personalized microsite is built. Open it in a new tab and edit or theme-swap anytime.
+ <dl>
+ <dt>Address</dt><dd>${escapeHtml(record.address.street || address)}${record.address.city ? ", " + escapeHtml(record.address.city) : ""}${record.address.zip ? " " + escapeHtml(record.address.zip) : ""}</dd>
+ <dt>Closest event</dt><dd><b>${escapeHtml(closest.headline || closest.sports)}</b> · ${escapeHtml(closest.dates || "Jul 14–30, 2028")}<br>${escapeHtml(closest.name)} — ${escapeHtml(closest.mi.toFixed(1))} mi / ~${escapeHtml(closest.min)} min</dd>
+ <dt>ZIP baseline</dt><dd>$${escapeHtml(baseline.base)}/night · ${escapeHtml(baseline.label)}</dd>
+ <dt>Proximity ×</dt><dd>${price.proximity.toFixed(2)} (closest ${price.closestMi.toFixed(1)} mi)</dd>
+ <dt>event premium</dt><dd>×${price.eventPremium.toFixed(1)} · Jul 14 – Jul 30, 2028</dd>
+ <dt>Suggested nightly</dt><dd><b>${escapeHtml(s.suggested)}</b> (range ${escapeHtml(s.headlineRange)})</dd>
+ </dl>
+ <p style="margin-top:14px">
+ <a href="rental.html?id=${encodeURIComponent(slug)}" target="_blank" rel="noopener">→ Open my rental microsite</a>
+ ·
+ <a href="dashboard.html">→ Open dashboard</a>
+ </p>
+ `, true);
+ btn.querySelector("span").textContent = "Open my site →";
+ btn.disabled = false;
+ btn.onclick = () => window.open("rental.html?id=" + encodeURIComponent(slug), "_blank");
+
+ // Verification flow — for now we "send" the email to console and save a flag.
+ console.info("[HTG] Would email %s with verify link for %s", email, record.address.display);
+
+ } catch (err) {
+ setStatus(`<b>Something went sideways</b>${err.message || err}. Try again in a second.`);
+ btn.querySelector("span").textContent = "Try again →";
+ btn.disabled = false;
+ }
+ }
+
+ form.addEventListener("submit", handleSubmit);
+}
+
+// ---------- Demo seeder — pre-populate two Beverly Hills rentals ----------
+async function seedDemo() {
+ const demos = [
+ { address: "471 S Peck Dr, Beverly Hills, CA 90210", host: "Steve Abrams", email: "steveabramsdesigns@gmail.com", phone: "(310) 713-0489" },
+ { address: "462 S Beverwil Dr, Beverly Hills, CA 90212", host: "Steve Abrams", email: "steveabramsdesigns@gmail.com", phone: "(310) 713-0489" },
+ ];
+ const store = JSON.parse(localStorage.getItem("htg.rentals") || "{}");
+ for (const d of demos) {
+ const geo = await geocode(d.address);
+ const nearest = nearestVenues({ lat: geo.lat, lng: geo.lng }, 6);
+ const baseline = baselineFor(geo.zip || "");
+ const price = priceModel(baseline, nearest);
+ const slug = slugify((geo.street || d.address).split(",")[0]);
+ store[slug] = {
+ slug, host: d.host, email: d.email, phone: d.phone,
+ address: {
+ raw: d.address, display: geo.display,
+ street: geo.street || d.address.split(",")[0],
+ city: geo.city || "", county: geo.county || "",
+ state: geo.state || "California", zip: geo.zip || "",
+ lat: geo.lat, lng: geo.lng,
+ },
+ baseline, price, nearest,
+ createdAt: new Date().toISOString(),
+ verified: true,
+ };
+ await new Promise(r => setTimeout(r, 1100)); // polite to Nominatim
+ }
+ localStorage.setItem("htg.rentals", JSON.stringify(store));
+ return Object.keys(store);
+}
+
+// ---------- Address autocomplete (debounced Nominatim) ----------
+if (typeof document !== "undefined") {
+ const input = document.getElementById("f-addr");
+ const menu = document.getElementById("f-addr-menu");
+ if (input && menu) {
+ let abortCtl = null, lastQ = "", timer = 0;
+
+ async function suggest(q) {
+ if (abortCtl) abortCtl.abort();
+ abortCtl = new AbortController();
+ const url = `https://nominatim.openstreetmap.org/search?format=json&addressdetails=1&limit=5&countrycodes=us&q=${encodeURIComponent(q)}`;
+ try {
+ const r = await fetch(url, { signal: abortCtl.signal, headers: { "Accept": "application/json" } });
+ if (!r.ok) return [];
+ return await r.json();
+ } catch (e) { return []; }
+ }
+
+ function render(rows) {
+ if (!rows.length) { menu.hidden = true; menu.innerHTML = ""; return; }
+ menu.innerHTML = rows.slice(0, 5).map(r => {
+ const a = r.address || {};
+ const street = [a.house_number, a.road].filter(Boolean).join(" ");
+ const line1 = street || r.display_name.split(",")[0];
+ const line2 = [a.city || a.town || a.village || a.neighbourhood || a.suburb, a.state, a.postcode].filter(Boolean).join(", ");
+ const val = r.display_name;
+ return `<li data-val="${escapeAttr(val)}"><b>${escapeHtml(line1)}</b><span>${escapeHtml(line2)}</span></li>`;
+ }).join("");
+ menu.hidden = false;
+ }
+
+ input.addEventListener("input", () => {
+ const q = input.value.trim();
+ clearTimeout(timer);
+ if (q.length < 4 || q === lastQ) { if (q.length < 4) { menu.hidden = true; } return; }
+ lastQ = q;
+ timer = setTimeout(async () => {
+ const rows = await suggest(q);
+ render(rows);
+ }, 320);
+ });
+
+ menu.addEventListener("mousedown", (e) => {
+ const li = e.target.closest("li[data-val]");
+ if (!li) return;
+ e.preventDefault();
+ input.value = li.getAttribute("data-val");
+ menu.hidden = true;
+ });
+
+ input.addEventListener("blur", () => setTimeout(() => { menu.hidden = true; }, 120));
+ input.addEventListener("focus", () => { if (menu.innerHTML) menu.hidden = false; });
+ document.addEventListener("keydown", (e) => { if (e.key === "Escape") menu.hidden = true; });
+ }
+
+
+ // Tier CTAs — jump to signup with the plan remembered
+ document.querySelectorAll(".l-tier-cta[data-plan]").forEach(btn => {
+ btn.addEventListener("click", () => {
+ const plan = btn.getAttribute("data-plan");
+ try { localStorage.setItem("htg.plan", plan); } catch (e) {}
+ document.getElementById("signup")?.scrollIntoView({ behavior: "smooth" });
+ document.getElementById("f-addr")?.focus();
+ });
+ });
+
+ // Domain availability checker — heuristic (no real registrar call).
+ // Gives the honest UX of "this name is long/short/available in these TLDs".
+ const domQ = document.getElementById("dom-q");
+ const domBtn = document.getElementById("dom-check");
+ if (domQ && domBtn) {
+ const note = document.querySelector(".l-dom-note");
+ domBtn.addEventListener("click", () => {
+ const raw = domQ.value.trim().toLowerCase().replace(/[^a-z0-9-]/g, "-").replace(/^-+|-+$/g, "");
+ if (!raw) { domQ.focus(); return; }
+ const tlds = [
+ { tld: ".com", price: 12 },
+ { tld: ".house", price: 19 },
+ { tld: ".la", price: 24 },
+ { tld: ".rentals", price: 16 },
+ { tld: ".stay", price: 29 },
+ { tld: ".host", price: 22 },
+ ];
+ const short = raw.length <= 14;
+ const results = tlds.map(t => {
+ // Deterministic pseudo-availability: common TLDs unlikely if short
+ const avail = !(t.tld === ".com" && short) && Math.abs(hashCode(raw + t.tld)) % 3 !== 0;
+ return { ...t, avail };
+ });
+ note.innerHTML = `
+ <b>Checked:</b> ${raw} —
+ ${results.map(r => `<span style="margin-right:14px;${r.avail?'':'opacity:.35;text-decoration:line-through;'}">${r.tld} $${r.price}/yr ${r.avail?'✓':'taken'}</span>`).join("")}
+ <br><span style="opacity:.6;font-size:13px;">Heuristic only — final availability confirmed at checkout by the registrar.</span>`;
+ });
+ function hashCode(s) { let h = 0; for (let i = 0; i < s.length; i++) { h = ((h << 5) - h) + s.charCodeAt(i); h |= 0; } return h; }
+ }
+
+ // Auto-seed when landing is opened with ?seed=1, then jump to the dashboard
+ if (new URLSearchParams(location.search).get("seed") === "1") {
+ (async () => {
+ try {
+ await seedDemo();
+ location.replace("dashboard.html");
+ } catch (e) { console.error("seed failed:", e); }
+ })();
+ }
+
+ const seedBtn = document.getElementById("seed-demo");
+ if (seedBtn) {
+ seedBtn.addEventListener("click", async () => {
+ seedBtn.disabled = true;
+ seedBtn.textContent = "Seeding two rentals…";
+ try {
+ const slugs = await seedDemo();
+ seedBtn.textContent = `✓ Seeded · ${slugs.length} rentals`;
+ const list = document.getElementById("demo-links");
+ if (list) {
+ list.hidden = false;
+ list.innerHTML = "<b>Open your demo rentals:</b>" + slugs
+ .map(s => ` <a href="rental.html?id=${encodeURIComponent(s)}" target="_blank">/${s}</a>`)
+ .join(" · ");
+ }
+ } catch (e) {
+ seedBtn.textContent = "Seed failed — see console";
+ console.error(e);
+ }
+ seedBtn.disabled = false;
+ });
+ }
+}
+
+// Expose for quick Node-style test runs (no-op in browser)
+if (typeof module !== "undefined") {
+ module.exports = { geocode, nearestVenues, priceModel, baselineFor, haversineMi, LA2028_VENUES, slugify };
+}
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..4c6861f
--- /dev/null
+++ b/style.css
@@ -0,0 +1,874 @@
+/* =========================================================
+ MALDEN HOUSE · LA 2028 Rental · Multi-theme rental listing
+ ========================================================= */
+
+:root {
+ --bg: #F4F1EC;
+ --fg: #111111;
+ --muted: #11111199;
+ --soft: #1111111A;
+ --accent: #E2302A;
+ --accent-fg: #F4F1EC;
+ --panel-bg: #111111;
+ --panel-fg: #F4F1EC;
+ --card-bg: #F4F1EC;
+ --font-display: "Archivo", sans-serif;
+ --font-display-weight: 900;
+ --font-body: "Inter", sans-serif;
+ --font-serif: "EB Garamond", serif;
+ --radius: 0px;
+ --grid-max: 1440px;
+}
+
+/* Theme 1 — Editorial (default above) */
+
+[data-theme="2"] {
+ --bg: #F2E8D5; --fg: #2B2118; --muted: #2B211899; --soft: #2B21181A;
+ --accent: #B8491C; --accent-fg: #F2E8D5;
+ --panel-bg: #2B2118; --panel-fg: #F2E8D5; --card-bg: #F2E8D5;
+ --font-display: "Fraunces", serif; --font-display-weight: 500;
+ --font-body: "Inter", sans-serif; --font-serif: "Fraunces", serif;
+}
+[data-theme="3"] {
+ --bg: #ECE6DC; --fg: #0F2340; --muted: #0F234099; --soft: #0F23401A;
+ --accent: #D94A22; --accent-fg: #ECE6DC;
+ --panel-bg: #0F2340; --panel-fg: #ECE6DC; --card-bg: #ECE6DC;
+ --font-display: "Archivo Black", sans-serif; --font-display-weight: 400;
+ --font-body: "DM Sans", sans-serif; --font-serif: "DM Sans", sans-serif;
+}
+[data-theme="4"] {
+ --bg: #F5F2EC; --fg: #1A1A1A; --muted: #1A1A1A99; --soft: #1A1A1A1A;
+ --accent: #B3311F; --accent-fg: #F5F2EC;
+ --panel-bg: #1A1A1A; --panel-fg: #F5F2EC; --card-bg: #F5F2EC;
+ --font-display: "EB Garamond", serif; --font-display-weight: 600;
+ --font-body: "Inter", sans-serif; --font-serif: "EB Garamond", serif;
+}
+[data-theme="5"] {
+ --bg: #F7E7D9; --fg: #2A2A4A; --muted: #2A2A4A99; --soft: #2A2A4A1A;
+ --accent: #E42F7E; --accent-fg: #F7E7D9;
+ --panel-bg: #2A2A4A; --panel-fg: #F7E7D9; --card-bg: #F7E7D9;
+ --font-display: "Archivo", sans-serif; --font-display-weight: 900;
+ --font-body: "Space Grotesk", sans-serif; --font-serif: "Space Grotesk", sans-serif;
+}
+[data-theme="6"] {
+ --bg: #EDE2CC; --fg: #3C2A1A; --muted: #3C2A1A99; --soft: #3C2A1A1A;
+ --accent: #3F5D43; --accent-fg: #EDE2CC;
+ --panel-bg: #3C2A1A; --panel-fg: #EDE2CC; --card-bg: #EDE2CC;
+ --font-display: "Playfair Display", serif; --font-display-weight: 900;
+ --font-body: "Inter", sans-serif; --font-serif: "Playfair Display", serif;
+}
+[data-theme="7"] {
+ --bg: #F2F2F0; --fg: #050505; --muted: #05050599; --soft: #0505051A;
+ --accent: #1F3ECF; --accent-fg: #F2F2F0;
+ --panel-bg: #050505; --panel-fg: #F2F2F0; --card-bg: #F2F2F0;
+ --font-display: "Inter", sans-serif; --font-display-weight: 500;
+ --font-body: "Inter", sans-serif; --font-serif: "Inter", sans-serif;
+}
+[data-theme="8"] {
+ --bg: #F5F0E3; --fg: #0A0A0A; --muted: #0A0A0A99; --soft: #0A0A0A1A;
+ --accent: #C58F0B; --accent-fg: #F5F0E3;
+ --panel-bg: #0A0A0A; --panel-fg: #F3D130; --card-bg: #F5F0E3;
+ --font-display: "Archivo Black", sans-serif; --font-display-weight: 400;
+ --font-body: "Archivo", sans-serif; --font-serif: "Archivo", sans-serif;
+}
+[data-theme="9"] {
+ --bg: #F5EFE0; --fg: #0E2818; --muted: #0E281899; --soft: #0E28181A;
+ --accent: #D25A16; --accent-fg: #F5EFE0;
+ --panel-bg: #355E30; --panel-fg: #F5EFE0; --card-bg: #F5EFE0;
+ --font-display: "Crimson Pro", serif; --font-display-weight: 600;
+ --font-body: "Inter", sans-serif; --font-serif: "Crimson Pro", serif;
+ --radius: 16px;
+}
+[data-theme="10"] {
+ --bg: #0A3D62; --fg: #EAF2FA; --muted: #EAF2FA99; --soft: #EAF2FA1A;
+ --accent: #C7A85B; --accent-fg: #0A3D62;
+ --panel-bg: #08223F; --panel-fg: #EAF2FA; --card-bg: #0A3D62;
+ --font-display: "Instrument Serif", serif; --font-display-weight: 400;
+ --font-body: "Inter", sans-serif; --font-serif: "Instrument Serif", serif;
+}
+
+/* ---------- Reset + base ---------- */
+* { box-sizing: border-box; }
+html, body { margin: 0; padding: 0; }
+body {
+ background: var(--bg);
+ color: var(--fg);
+ font-family: var(--font-body);
+ font-size: 16px;
+ line-height: 1.5;
+ -webkit-font-smoothing: antialiased;
+ transition: background-color .25s ease, color .25s ease;
+}
+a { color: inherit; text-decoration: none; }
+button { font: inherit; background: none; border: 0; color: inherit; cursor: pointer; }
+img, svg { display: block; max-width: 100%; }
+
+.display { font-family: var(--font-display); font-weight: var(--font-display-weight); letter-spacing: -0.03em; font-size: 168px; line-height: 0.9; margin: 0; }
+.display.sm { font-size: 72px; line-height: 0.95; }
+.eyebrow { font-family: var(--font-body); font-weight: 700; font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--fg); }
+.eyebrow.accent { color: var(--accent); }
+.eyebrow.muted { color: var(--muted); letter-spacing: 0.1em; }
+.lede { font-family: var(--font-serif); font-size: 20px; line-height: 1.45; color: var(--fg); max-width: 56ch; margin: 0; }
+.lede.inverted { color: var(--panel-fg); opacity: .85; }
+
+/* ---------- Theme switcher ---------- */
+.switcher {
+ position: fixed; top: 16px; right: 16px; z-index: 50;
+ font-family: var(--font-body);
+}
+.switcher-toggle {
+ display: inline-flex; align-items: center; gap: 10px;
+ padding: 10px 14px; background: var(--panel-bg); color: var(--panel-fg);
+ border-radius: 999px; font-size: 12px; letter-spacing: 0.12em;
+ box-shadow: 0 10px 30px rgba(0,0,0,.15);
+}
+.switcher-toggle b { font-weight: 800; letter-spacing: 0.18em; }
+.switcher-dot { width: 8px; height: 8px; background: var(--accent); border-radius: 999px; }
+.switcher-chev { font-size: 10px; opacity: .7; }
+.switcher-panel {
+ position: absolute; top: 48px; right: 0; width: 340px;
+ background: var(--card-bg); color: var(--fg);
+ border: 1px solid var(--soft);
+ box-shadow: 0 24px 60px rgba(0,0,0,.25);
+ padding: 14px;
+}
+.switcher-head { font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; }
+.switcher-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
+.chip {
+ text-align: left; padding: 10px 12px;
+ border: 1px solid var(--soft);
+ display: flex; flex-direction: column; gap: 4px;
+ transition: transform .1s ease, border-color .15s ease;
+}
+.chip:hover { border-color: var(--accent); transform: translateY(-1px); }
+.chip.active { border-color: var(--accent); border-width: 2px; padding: 9px 11px; }
+.chip b { font-size: 12px; font-weight: 700; }
+.chip em { font-size: 11px; font-style: normal; color: var(--muted); }
+.chip .sw { display: flex; gap: 3px; margin-bottom: 2px; }
+.chip .sw i { width: 12px; height: 12px; display: block; }
+
+/* ---------- Nav ---------- */
+.nav {
+ display: flex; align-items: center; justify-content: space-between;
+ padding: 22px 72px; border-bottom: 1px solid var(--soft);
+ gap: 24px;
+}
+.nav-brand { display: flex; align-items: baseline; gap: 12px; }
+.brand-dot { width: 10px; height: 10px; border-radius: 999px; background: var(--accent); display: inline-block; align-self: center; }
+.brand-mark { font-family: var(--font-display); font-weight: 800; font-size: 14px; letter-spacing: 0.14em; }
+.brand-sub { font-size: 12px; color: var(--muted); letter-spacing: 0.02em; }
+.nav-links { display: flex; gap: 30px; font-size: 13px; color: var(--muted); }
+.nav-links a:last-child { color: var(--fg); }
+.nav-cta {
+ padding: 10px 16px; background: var(--fg); color: var(--bg);
+ font-size: 12px; font-weight: 700; letter-spacing: 0.08em;
+}
+
+/* ---------- Hero ---------- */
+.hero { padding: 72px 72px 56px; display: flex; flex-direction: column; gap: 40px; }
+.hero-top { display: flex; justify-content: space-between; align-items: baseline; }
+.hero-body { display: flex; gap: 40px; align-items: flex-end; }
+.hero-copy { flex: 1; display: flex; flex-direction: column; gap: 22px; }
+.property-card {
+ width: 380px; padding: 26px; background: var(--panel-bg); color: var(--panel-fg);
+ display: flex; flex-direction: column; gap: 14px;
+ border-radius: var(--radius);
+}
+.pc-label { font-size: 11px; letter-spacing: 0.24em; color: var(--panel-fg); opacity: .7; text-transform: uppercase; }
+.pc-address { display: flex; align-items: baseline; gap: 12px; }
+.pc-address b { font-family: var(--font-display); font-weight: 800; font-size: 48px; line-height: 1; }
+.pc-address span { font-size: 13px; letter-spacing: 0.1em; opacity: .8; }
+.pc-sub { font-size: 13px; opacity: .85; line-height: 1.4; }
+.property-card hr { border: 0; height: 1px; background: currentColor; opacity: .2; margin: 4px 0; }
+.pc-stats { display: flex; gap: 0; }
+.pc-stats > div { flex: 1; display: flex; flex-direction: column; gap: 4px; }
+.pc-stats b { font-family: var(--font-display); font-weight: 800; font-size: 28px; line-height: 1; }
+.pc-stats span { font-size: 11px; letter-spacing: 0.14em; opacity: .7; }
+
+/* ---------- Photo Plate ---------- */
+.plate { padding: 0 72px 16px; display: flex; flex-direction: column; gap: 12px; }
+.plate-img { position: relative; margin: 0; overflow: hidden; border-radius: var(--radius); }
+.plate-img img { width: 100%; height: 600px; object-fit: cover; display: block; }
+.plate-img figcaption {
+ position: absolute; left: 24px; bottom: 20px;
+ display: flex; align-items: baseline; gap: 12px; color: #F4F1EC;
+ text-shadow: 0 2px 10px rgba(0,0,0,.55);
+}
+.plate-img .fig {
+ padding: 5px 9px; background: var(--accent); color: var(--accent-fg);
+ font-size: 11px; letter-spacing: 0.2em; font-weight: 800;
+}
+.plate-img figcaption i { font-family: var(--font-serif); font-style: italic; font-size: 15px; }
+.plate-img .apn {
+ position: absolute; right: 20px; top: 20px;
+ padding: 6px 12px; background: var(--bg); color: var(--fg);
+ font-size: 11px; letter-spacing: 0.2em; font-weight: 800;
+}
+.plate-meta { display: flex; justify-content: space-between; font-size: 12px; letter-spacing: 0.08em; color: var(--muted); text-transform: uppercase; }
+
+/* ---------- Spec ---------- */
+.spec { padding: 88px 72px; display: flex; gap: 56px; border-top: 1px solid var(--soft); margin-top: 40px; }
+.spec header { width: 260px; display: flex; flex-direction: column; gap: 14px; flex-shrink: 0; }
+.spec dl { flex: 1; margin: 0; display: flex; flex-direction: column; border-top: 1px solid var(--fg); }
+.spec dl > div {
+ display: grid; grid-template-columns: 220px 1fr auto; gap: 20px;
+ padding: 16px 0; border-bottom: 1px solid var(--soft); align-items: baseline;
+}
+.spec dt { font-size: 12px; letter-spacing: 0.14em; color: var(--muted); text-transform: uppercase; }
+.spec dd { margin: 0; font-family: var(--font-serif); font-size: 20px; }
+.spec dl > div span { font-family: var(--font-display); font-weight: 700; font-size: 14px; letter-spacing: 0.02em; }
+
+/* ---------- Games ---------- */
+.olympics { background: var(--panel-bg); color: var(--panel-fg); padding: 88px 72px; display: flex; flex-direction: column; gap: 40px; }
+.olympics header { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; }
+.olympics .display { color: var(--panel-fg); }
+.olympics .eyebrow { color: var(--accent); }
+.event-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
+.event { padding: 24px; display: flex; flex-direction: column; gap: 14px; border-radius: var(--radius); }
+.event .row { display: flex; justify-content: space-between; font-size: 11px; letter-spacing: 0.2em; font-weight: 800; }
+.event h3 { font-family: var(--font-display); font-weight: 900; font-size: 40px; line-height: 1; margin: 0; letter-spacing: -0.03em; }
+.event p { font-family: var(--font-serif); font-size: 16px; line-height: 1.5; margin: 0; opacity: .9; }
+.event.headline { background: var(--accent); color: var(--accent-fg); }
+.event.inverted { background: var(--bg); color: var(--fg); }
+.event.ghost { background: transparent; color: var(--panel-fg); border: 1px solid rgba(255,255,255,.2); }
+.chips { display: flex; gap: 10px; flex-wrap: wrap; padding-top: 4px; }
+.pill { padding: 6px 10px; font-size: 11px; font-weight: 800; letter-spacing: 0.16em; }
+.pill.filled { background: var(--bg); color: var(--fg); }
+.pill.filled.dark { background: var(--fg); color: var(--bg); }
+.pill.outline { border: 1px solid currentColor; }
+.pill.outline.light { border-color: rgba(255,255,255,.4); }
+.pill.outline.dark { border-color: var(--fg); }
+
+/* ---------- Guide ---------- */
+.guide { padding: 88px 72px; display: flex; flex-direction: column; gap: 32px; }
+.guide header { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; }
+.guide-list { list-style: none; margin: 0; padding: 0; }
+.guide-list li {
+ display: grid; grid-template-columns: 40px 160px 240px 1fr 100px; gap: 24px;
+ padding: 18px 0; border-top: 1px solid var(--soft); align-items: center;
+}
+.guide-list li:first-child { border-top: 1px solid var(--fg); }
+.guide-list li:last-child { border-bottom: 1px solid var(--fg); }
+.guide-list .n { font-family: var(--font-display); font-weight: 800; font-size: 14px; color: var(--accent); align-self: start; padding-top: 12px; }
+.guide-list .thumb {
+ width: 160px; height: 112px; object-fit: cover; display: block;
+ background: var(--soft); border-radius: var(--radius);
+}
+.guide-list .t { font-family: var(--font-display); font-weight: 800; font-size: 22px; letter-spacing: -0.01em; align-self: start; padding-top: 6px; }
+.guide-list .d { font-family: var(--font-serif); font-size: 17px; line-height: 1.45; color: var(--muted); align-self: start; padding-top: 6px; }
+.guide-list .k { font-size: 12px; letter-spacing: 0.16em; color: var(--muted); text-align: right; align-self: start; padding-top: 12px; }
+@media (max-width: 960px) {
+ .guide-list li { grid-template-columns: 40px 120px 1fr; }
+ .guide-list .thumb { width: 120px; height: 84px; }
+ .guide-list .d, .guide-list .k { grid-column: 2 / 4; padding-top: 0; }
+}
+
+/* ---------- Map ---------- */
+.map { padding: 88px 72px; display: flex; flex-direction: column; gap: 24px; }
+.map header { display: flex; justify-content: space-between; align-items: flex-end; }
+.map-tabs { display: flex; gap: 8px; }
+.map-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 18px; }
+.map-main, .map-tile { position: relative; overflow: hidden; border-radius: var(--radius); background: #1a1a1a; }
+.map-main { height: 640px; }
+.map-main img, .map-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
+.map-side { display: flex; flex-direction: column; gap: 16px; }
+.map-tile { height: 312px; }
+.chip-abs {
+ position: absolute; left: 16px; top: 16px;
+ padding: 6px 12px; background: rgba(0,0,0,.7); color: #F4F1EC; backdrop-filter: blur(8px);
+ font-size: 10px; letter-spacing: 0.2em; font-weight: 800; text-transform: uppercase;
+}
+.chip-abs.tl2 { top: 48px; background: rgba(244,241,236,.9); color: #111; }
+.pan-ctrls { position: absolute; left: 50%; bottom: 80px; transform: translateX(-50%); display: flex; gap: 6px; }
+.pan-ctrls button { width: 44px; height: 44px; border-radius: 999px; background: rgba(244,241,236,.85); color: #111; font-weight: 900; font-size: 20px; }
+.map-credit {
+ position: absolute; left: 16px; bottom: 16px;
+ font-family: var(--font-serif); font-style: italic; font-size: 13px; color: #F4F1EC;
+ text-shadow: 0 2px 8px rgba(0,0,0,.5);
+}
+.marker {
+ position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
+ display: flex; flex-direction: column; align-items: center; gap: 4px;
+}
+.marker .dot { width: 18px; height: 18px; background: var(--accent); border: 3px solid #F4F1EC; border-radius: 999px; box-shadow: 0 4px 12px rgba(0,0,0,.35); }
+.marker .mlabel { padding: 3px 6px; background: #111; color: #F4F1EC; font-size: 9px; letter-spacing: 0.14em; font-weight: 800; }
+.drive-meta {
+ position: absolute; right: 16px; bottom: 16px;
+ display: flex; flex-direction: column; align-items: flex-end; gap: 2px;
+ padding: 8px 12px; background: rgba(244,241,236,.9); color: #111; border-radius: 6px;
+}
+.drive-meta b { font-family: var(--font-display); font-weight: 900; font-size: 20px; }
+.drive-meta span { font-size: 10px; letter-spacing: 0.14em; opacity: .7; }
+
+/* ---------- Video ---------- */
+.video { background: var(--panel-bg); color: var(--panel-fg); padding: 88px 72px; display: flex; flex-direction: column; gap: 32px; }
+.video header { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; }
+.video .display { color: var(--panel-fg); }
+.video .eyebrow { color: var(--accent); }
+.player { position: relative; height: 720px; border-radius: var(--radius); overflow: hidden; background: #0A0A0A; }
+.player img { width: 100%; height: 100%; object-fit: cover; filter: brightness(.8); }
+
+/* ---- Scripted Trailer ---- */
+.tr-stage { position: absolute; inset: 0; overflow: hidden; }
+.tr-scene { position: absolute; inset: 0; opacity: 0; animation: tr-fade 0.8s forwards; background: #0A0A0A; color: #F4F1EC; }
+.tr-scene.active { opacity: 1; }
+@keyframes tr-fade { from { opacity: 0; transform: scale(1.04); } to { opacity: 1; transform: scale(1); } }
+.tr-frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
+.tr-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; animation: tr-kenburns 6s ease forwards; }
+@keyframes tr-kenburns { from { transform: scale(1.12); } to { transform: scale(1.0); } }
+.tr-vignette { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.25) 0%, rgba(0,0,0,.0) 30%, rgba(0,0,0,.0) 60%, rgba(0,0,0,.75) 100%); pointer-events: none; }
+.tr-lower-third {
+ position: absolute; left: 40px; bottom: 96px; right: 40px; display: flex; flex-direction: column; gap: 6px;
+ animation: tr-rise 0.6s 0.4s both;
+}
+@keyframes tr-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
+.tr-eyebrow { font-family: var(--font-body); font-weight: 800; font-size: 12px; letter-spacing: 0.3em; color: var(--accent); }
+.tr-headline { font-family: var(--font-display); font-weight: 900; font-size: 64px; line-height: 0.95; letter-spacing: -0.025em; color: #F4F1EC; text-shadow: 0 2px 20px rgba(0,0,0,.5); }
+.tr-sub { font-family: var(--font-serif); font-style: italic; font-size: 18px; color: #F4F1ECCC; }
+.tr-kicker { font-family: var(--font-body); font-weight: 800; font-size: 12px; letter-spacing: 0.32em; color: var(--accent); }
+
+.tr-intro, .tr-outro, .tr-olympic {
+ position: absolute; inset: 0;
+ display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; text-align: center;
+ padding: 40px;
+ background: radial-gradient(ellipse at center, #1a1a1a 0%, #000 70%);
+}
+.tr-intro { background: linear-gradient(135deg, #0A0A0A 0%, #1a1a1a 50%, #0A0A0A 100%); }
+.tr-title-big {
+ font-family: var(--font-display); font-weight: 900; font-size: 112px; line-height: 0.9; letter-spacing: -0.03em;
+ color: #F4F1EC; animation: tr-rise 0.6s .2s both;
+}
+.tr-title-sub { font-family: var(--font-body); font-size: 14px; letter-spacing: 0.32em; color: #F4F1EC99; animation: tr-rise 0.6s .4s both; }
+.tr-intro-tag { font-family: var(--font-serif); font-style: italic; font-size: 18px; color: #F4F1EC88; margin-top: 16px; animation: tr-rise 0.6s .6s both; }
+.tr-olympic-venue { font-family: var(--font-serif); font-size: 20px; color: #F4F1ECCC; margin-top: 8px; animation: tr-rise 0.6s .4s both; }
+.tr-daybar { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; max-width: 800px; margin-top: 28px; animation: tr-rise 0.6s .6s both; }
+.tr-day {
+ display: inline-flex; flex-direction: column; align-items: center; padding: 8px 4px; width: 54px;
+ background: rgba(226,48,42,.15); border: 1px solid rgba(226,48,42,.4); border-radius: 8px;
+}
+.tr-day em { font-style: normal; font-weight: 800; font-size: 9px; letter-spacing: 0.14em; color: #F4F1EC88; }
+.tr-day b { font-family: var(--font-display); font-weight: 900; font-size: 22px; color: #F4F1EC; margin-top: 4px; }
+.tr-day i { font-style: normal; font-weight: 700; font-size: 9px; letter-spacing: 0.14em; color: #F4F1EC88; margin-top: 2px; }
+.tr-outro .tr-title-big .tr-unit { font-family: var(--font-body); font-weight: 500; font-size: 22px; color: #F4F1EC88; margin-left: 10px; letter-spacing: 0.1em; }
+.tr-cta-row { margin-top: 20px; animation: tr-rise 0.6s .8s both; }
+.tr-pill { display: inline-block; padding: 10px 18px; background: var(--accent); color: #F4F1EC; font-family: var(--font-body); font-weight: 800; font-size: 13px; letter-spacing: 0.14em; }
+.tr-outro-brand { font-family: var(--font-body); font-weight: 800; font-size: 11px; letter-spacing: 0.32em; color: #F4F1EC66; margin-top: 32px; }
+
+/* Cover (shown before play) */
+.tr-cover { position: absolute; inset: 0; overflow: hidden; transition: opacity .4s ease; }
+.tr-cover.hidden { opacity: 0; pointer-events: none; }
+.tr-cover img { width: 100%; height: 100%; object-fit: cover; filter: brightness(.55) contrast(1.05); }
+.tr-cover-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.2) 0%, rgba(0,0,0,.65) 100%); }
+.tr-cover-text { position: absolute; left: 40px; bottom: 40px; display: flex; flex-direction: column; gap: 6px; color: #F4F1EC; }
+.tr-cover-text .tr-title-big { font-size: 72px; animation: none; }
+
+.tr-playbtn {
+ position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
+ display: inline-flex; align-items: center; gap: 14px; padding: 18px 28px;
+ background: var(--accent); color: #F4F1EC; border: 0; border-radius: 999px;
+ font-family: var(--font-body); font-weight: 800; font-size: 13px; letter-spacing: 0.18em;
+ cursor: pointer; box-shadow: 0 24px 60px rgba(0,0,0,.5);
+ transition: transform .15s ease, opacity .3s ease;
+}
+.tr-playbtn:hover { transform: translate(-50%,-50%) scale(1.04); }
+.tr-playbtn.hidden { opacity: 0; pointer-events: none; }
+.tr-playicon { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 999px; background: #F4F1EC; color: var(--accent); font-size: 16px; padding-left: 4px; }
+
+.tr-hud { position: absolute; right: 20px; top: 20px; display: flex; gap: 8px; z-index: 3; }
+.tr-hud > span { padding: 6px 10px; background: rgba(0,0,0,.5); backdrop-filter: blur(8px); color: #F4F1EC; font-family: var(--font-body); font-weight: 800; font-size: 11px; letter-spacing: 0.18em; display: inline-flex; align-items: center; gap: 6px; }
+.tr-live .dot { width: 8px; height: 8px; background: var(--accent); border-radius: 999px; box-shadow: 0 0 10px var(--accent); }
+.tr-music { cursor: pointer; }
+
+.tr-controls { position: absolute; left: 20px; right: 20px; bottom: 20px; display: flex; flex-direction: column; gap: 12px; z-index: 3; }
+.tr-scrub { height: 4px; background: rgba(255,255,255,.2); border-radius: 999px; overflow: hidden; }
+.tr-prog { height: 100%; width: 0%; background: var(--accent); transition: width .1s linear; }
+.tr-bottom { display: flex; justify-content: space-between; align-items: center; }
+.tr-time { display: inline-flex; align-items: center; gap: 14px; color: #F4F1EC; font-family: var(--font-display); font-weight: 800; font-size: 14px; letter-spacing: 0.1em; }
+.tr-time button { background: rgba(255,255,255,.15); border: 0; color: #F4F1EC; width: 36px; height: 36px; border-radius: 999px; cursor: pointer; font-size: 14px; }
+.tr-dim { opacity: .6; margin-left: 6px; }
+.tr-book { padding: 10px 16px; background: var(--accent); color: #F4F1EC; font-family: var(--font-body); font-weight: 800; font-size: 12px; letter-spacing: 0.18em; border: 0; cursor: pointer; }
+
+@media (max-width: 960px) {
+ .tr-headline { font-size: 40px; }
+ .tr-title-big { font-size: 64px; }
+ .tr-lower-third { left: 20px; right: 20px; bottom: 80px; }
+}
+.play {
+ position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
+ width: 100px; height: 100px; border-radius: 999px; background: var(--accent); color: var(--accent-fg);
+ font-size: 30px; line-height: 1; box-shadow: 0 20px 60px rgba(0,0,0,.35);
+}
+.badge-live {
+ position: absolute; left: 20px; top: 20px;
+ display: inline-flex; gap: 8px; align-items: center;
+ color: #F4F1EC; font-size: 10px; letter-spacing: 0.3em; font-weight: 800;
+}
+.badge-live .dot { width: 8px; height: 8px; background: var(--accent); border-radius: 999px; box-shadow: 0 0 10px var(--accent); }
+.hud { position: absolute; right: 20px; top: 20px; display: flex; gap: 8px; }
+.hud span { padding: 5px 10px; background: rgba(244,241,236,.15); color: #F4F1EC; font-size: 10px; font-weight: 700; letter-spacing: 0.16em; backdrop-filter: blur(6px); }
+.controls { position: absolute; left: 20px; right: 20px; bottom: 20px; display: flex; flex-direction: column; gap: 12px; }
+.scrub { position: relative; height: 5px; background: rgba(244,241,236,.2); border-radius: 999px; }
+.scrub .prog { position: absolute; left: 0; top: 0; bottom: 0; width: 36%; background: var(--accent); border-radius: 999px; }
+.scrub .head { position: absolute; left: 36%; top: -6px; width: 16px; height: 16px; margin-left: -8px; background: #F4F1EC; border-radius: 999px; box-shadow: 0 4px 10px rgba(0,0,0,.35); }
+.controls-row { display: flex; justify-content: space-between; align-items: center; }
+.transport { color: #F4F1EC; font-family: var(--font-display); font-size: 14px; letter-spacing: 0.08em; }
+.transport span { font-size: 12px; margin-left: 14px; opacity: .8; }
+.cta { padding: 8px 14px; background: var(--accent); color: var(--accent-fg); font-size: 11px; font-weight: 800; letter-spacing: 0.16em; }
+
+/* ---------- Closest-event banner ---------- */
+.closest-event { padding: 0 72px; margin: 24px 0 0; }
+.ce-inner {
+ display: flex; flex-direction: column;
+ background: var(--accent); color: var(--accent-fg);
+ padding: 22px 28px; gap: 18px; border-radius: var(--radius);
+}
+.ce-top {
+ display: flex; justify-content: space-between; align-items: stretch; gap: 24px;
+}
+.ce-eyebrow { font-family: var(--font-body); font-weight: 800; font-size: 11px; letter-spacing: 0.28em; opacity: .9; }
+.ce-title { font-family: var(--font-display); font-weight: var(--font-display-weight); font-size: 44px; line-height: 1; letter-spacing: -0.02em; margin-top: 4px; }
+.ce-meta { font-family: var(--font-serif); font-size: 16px; margin-top: 4px; opacity: .9; }
+.ce-right { display: flex; flex-direction: column; align-items: flex-end; justify-content: center; gap: 4px; text-align: right; border-left: 1px solid rgba(255,255,255,.25); padding-left: 24px; }
+.ce-dates-label { font-size: 10px; letter-spacing: 0.28em; font-weight: 800; opacity: .8; }
+.ce-dates { font-family: var(--font-display); font-weight: var(--font-display-weight); font-size: 24px; line-height: 1.1; }
+.ce-days {
+ display: flex; flex-wrap: wrap; gap: 8px;
+ padding-top: 14px; border-top: 1px solid rgba(255,255,255,.25);
+}
+.ce-day {
+ display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
+ width: 54px; padding: 8px 4px;
+ background: rgba(255,255,255,.12);
+ border-radius: 8px;
+ font-family: var(--font-body); line-height: 1;
+}
+.ce-day em { font-style: normal; font-weight: 800; font-size: 9px; letter-spacing: 0.12em; opacity: .75; }
+.ce-day b { font-family: var(--font-display); font-weight: var(--font-display-weight); font-size: 22px; margin-top: 4px; }
+.ce-day i { font-style: normal; font-weight: 700; font-size: 9px; letter-spacing: 0.14em; opacity: .75; margin-top: 2px; }
+@media (max-width: 960px) {
+ .closest-event { padding: 0 24px; }
+ .ce-top { flex-direction: column; }
+ .ce-right { border-left: 0; border-top: 1px solid rgba(255,255,255,.25); padding-left: 0; padding-top: 14px; align-items: flex-start; text-align: left; }
+ .ce-day { width: 46px; }
+}
+
+/* ---------- Rings ---------- */
+.rings { padding: 72px 72px 24px; display: flex; flex-direction: column; align-items: center; gap: 16px; }
+.rings svg { max-width: 720px; width: 100%; height: auto; }
+
+/* ---------- History ---------- */
+.history { padding: 88px 72px; display: flex; gap: 56px; }
+.history-copy { flex: 1; display: flex; flex-direction: column; gap: 22px; }
+.history-copy p { font-family: var(--font-serif); font-size: 19px; line-height: 1.55; margin: 0; color: var(--fg); max-width: 56ch; }
+.timeline { width: 420px; list-style: none; margin: 0; padding: 0; }
+.timeline li {
+ display: grid; grid-template-columns: 72px 1fr; gap: 20px;
+ padding: 12px 0; border-top: 1px solid var(--soft);
+}
+.timeline li:first-child { border-top: 1px solid var(--fg); }
+.timeline li:last-child { border-bottom: 1px solid var(--fg); }
+.timeline .y { font-family: var(--font-display); font-weight: 900; font-size: 14px; color: var(--accent); }
+.timeline li > span:last-child { font-family: var(--font-serif); font-size: 16px; line-height: 1.4; }
+
+/* ---------- Contact ---------- */
+.contact { background: var(--panel-bg); color: var(--panel-fg); padding: 88px 72px; display: flex; gap: 56px; }
+.contact-copy { flex: 1; display: flex; flex-direction: column; gap: 20px; }
+.contact .display { color: var(--panel-fg); }
+.contact .eyebrow { color: var(--accent); }
+.contact-copy p { font-family: var(--font-serif); font-size: 19px; line-height: 1.55; margin: 0; max-width: 48ch; opacity: .9; }
+.meta { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
+.meta li { display: flex; gap: 16px; align-items: baseline; }
+.meta li span { width: 80px; font-size: 11px; letter-spacing: 0.2em; opacity: .6; }
+.meta li b { font-family: var(--font-serif); font-size: 18px; font-weight: 600; }
+.contact-form { flex: 1; display: flex; flex-direction: column; gap: 16px; }
+.contact-form label { display: flex; flex-direction: column; gap: 6px; }
+.contact-form label > span { font-size: 10px; letter-spacing: 0.24em; opacity: .6; }
+.contact-form input, .contact-form textarea {
+ background: transparent; border: 0; border-bottom: 1px solid rgba(255,255,255,.3);
+ color: var(--panel-fg); font-family: var(--font-serif); font-size: 18px;
+ padding: 10px 0; outline: none; font-weight: 400;
+}
+.contact-form input::placeholder, .contact-form textarea::placeholder { color: currentColor; opacity: .45; }
+.contact-form .row { display: flex; gap: 16px; }
+.contact-form .row label { flex: 1; }
+.events { border: 0; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
+.events legend { font-size: 10px; letter-spacing: 0.24em; opacity: .6; margin-bottom: 6px; }
+.events .tag {
+ display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px;
+ border: 1px solid rgba(255,255,255,.3); font-size: 11px; letter-spacing: 0.14em;
+ margin-right: 6px; cursor: pointer;
+}
+.events .tag input { accent-color: var(--accent); }
+.events > label:nth-child(n+2) { display: inline-flex; margin: 0; }
+.events { flex-direction: row; flex-wrap: wrap; align-items: center; }
+.events legend { width: 100%; }
+.submit-row { display: flex; justify-content: space-between; align-items: center; padding-top: 8px; }
+.reply-note { font-family: var(--font-serif); font-style: italic; font-size: 14px; opacity: .7; }
+.submit-row button { padding: 14px 24px; background: var(--accent); color: var(--accent-fg); font-size: 12px; font-weight: 800; letter-spacing: 0.18em; }
+
+/* ---------- Footer ---------- */
+.footer { padding: 40px 72px; display: flex; justify-content: space-between; align-items: baseline; gap: 40px; border-top: 1px solid var(--soft); font-size: 12px; color: var(--muted); }
+.footer .brand { display: flex; align-items: center; gap: 10px; color: var(--fg); font-weight: 800; letter-spacing: 0.14em; }
+.footer .addr { font-family: var(--font-serif); font-style: italic; font-size: 14px; }
+.footer .credit { letter-spacing: 0.2em; }
+
+/* ---------- Responsive (compact) ---------- */
+@media (max-width: 960px) {
+ .nav, .hero, .plate, .spec, .olympics, .guide, .map, .video, .rings, .history, .contact, .footer { padding-left: 24px; padding-right: 24px; }
+ .display { font-size: 72px; }
+ .display.sm { font-size: 44px; }
+ .hero-body { flex-direction: column; align-items: stretch; }
+ .property-card { width: 100%; }
+ .spec, .history, .contact, .map header, .olympics header, .guide header, .video header { flex-direction: column; gap: 24px; align-items: stretch; }
+ .spec header, .timeline { width: auto; }
+ .spec dl > div { grid-template-columns: 1fr; }
+ .spec dl > div span { order: -1; color: var(--accent); }
+ .event-grid { grid-template-columns: 1fr 1fr; }
+ .guide-list li { grid-template-columns: 40px 1fr; }
+ .guide-list .d, .guide-list .k { grid-column: 2; }
+ .map-grid { grid-template-columns: 1fr; }
+ .map-main { height: 420px; }
+ .player { height: 440px; }
+ .contact-form .row { flex-direction: column; }
+ .footer { flex-direction: column; align-items: flex-start; gap: 10px; }
+ .switcher-panel { width: 280px; }
+}
+
+/* ---------- Countdown banner (date-aware Games widget) ---------- */
+.countdown-banner { padding: 0 72px; margin-top: 18px; }
+.cb-inner {
+ background: var(--fg); color: var(--bg);
+ padding: 18px 28px; border-radius: var(--radius);
+ display: flex; flex-direction: column; gap: 2px;
+}
+.cb-kicker { font-family: var(--font-body); font-weight: 800; font-size: 11px; letter-spacing: 0.28em; color: var(--accent); }
+.cb-title { font-family: var(--font-display); font-weight: var(--font-display-weight); font-size: 36px; line-height: 1; letter-spacing: -0.02em; margin-top: 4px; }
+.cb-meta { font-family: var(--font-serif); font-size: 15px; margin-top: 4px; opacity: .85; }
+@media (max-width: 960px) { .countdown-banner { padding: 0 24px; } .cb-title { font-size: 28px; } }
+
+/* ---------- Budget calculator ---------- */
+.budget-calc { padding: 0 72px; margin-top: 18px; }
+.bc-inner {
+ background: var(--bg); border: 1px solid var(--soft);
+ padding: 24px 28px; display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: center;
+}
+.bc-left { display: flex; flex-direction: column; gap: 8px; }
+.bc-eyebrow { font-family: var(--font-body); font-weight: 800; font-size: 11px; letter-spacing: 0.28em; color: var(--accent); }
+.bc-left h3 { font-family: var(--font-display); font-weight: var(--font-display-weight); font-size: 32px; letter-spacing: -0.02em; line-height: 1; margin: 4px 0; }
+.bc-left p { font-family: var(--font-serif); font-size: 15px; line-height: 1.45; color: var(--muted); margin: 0; max-width: 40ch; }
+.bc-right { display: flex; flex-direction: column; gap: 10px; }
+.bc-right label { display: flex; flex-direction: column; gap: 4px; }
+.bc-right label span { display: flex; justify-content: space-between; font-size: 11px; letter-spacing: 0.18em; color: var(--muted); }
+.bc-right label span b { font-family: var(--font-display); font-weight: 900; font-size: 16px; color: var(--fg); letter-spacing: -0.01em; }
+.bc-right input[type=range] { width: 100%; accent-color: var(--accent); }
+.bc-breakdown { display: flex; flex-direction: column; gap: 2px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--soft); }
+.bc-breakdown > div { display: flex; justify-content: space-between; padding: 4px 0; font-family: var(--font-body); }
+.bc-breakdown > div span { font-size: 12px; letter-spacing: 0.12em; color: var(--muted); }
+.bc-breakdown > div b { font-family: var(--font-display); font-weight: 700; font-size: 16px; }
+.bc-breakdown .bc-total { margin-top: 4px; padding-top: 8px; border-top: 1px solid var(--soft); }
+.bc-breakdown .bc-total span { color: var(--fg); font-weight: 700; }
+.bc-breakdown .bc-total b { font-size: 22px; color: var(--accent); }
+@media (max-width: 960px) { .budget-calc { padding: 0 24px; } .bc-inner { grid-template-columns: 1fr; gap: 18px; } }
+
+/* =========================================================
+ MAP OF THE STARS — § 04B
+ Theme-aware cartographic section
+ ========================================================= */
+.stars {
+ padding: 96px 72px 72px;
+ background: var(--bg);
+ color: var(--fg);
+ border-top: 1px solid var(--soft);
+}
+.stars > header {
+ display: grid; grid-template-columns: 1fr 1fr; gap: 40px;
+ align-items: end; margin-bottom: 48px;
+}
+.stars > header > div .eyebrow { font-family: var(--font-body); font-weight: 800; font-size: 11px; letter-spacing: 0.28em; color: var(--accent); }
+.stars > header > div h2 { font-family: var(--font-display); font-weight: var(--font-display-weight); font-size: 72px; letter-spacing: -0.02em; line-height: 0.95; margin: 8px 0 0; }
+.stars > header > p { font-family: var(--font-serif); font-size: 17px; line-height: 1.55; max-width: 52ch; margin: 0; color: var(--muted); }
+
+.stars-grid {
+ display: grid; grid-template-columns: 1.1fr 1fr; gap: 48px;
+ align-items: start;
+}
+
+.stars-map {
+ position: sticky; top: 24px;
+ background: var(--card-bg);
+ border: 1px solid var(--soft);
+ color: var(--fg);
+ padding: 12px;
+ aspect-ratio: 620 / 420;
+}
+.stars-map svg { width: 100%; height: 100%; display: block; }
+
+/* Pins */
+.stars-map .pin { cursor: pointer; transition: transform 180ms ease; }
+.stars-map .pin:hover { transform: translate(var(--tx, 0), var(--ty, 0)) scale(1.12); }
+.stars-map .pin-dot {
+ fill: var(--accent);
+ stroke: var(--bg);
+ stroke-width: 2;
+ transition: fill 150ms;
+}
+.stars-map .pin-dot.house {
+ fill: var(--panel-bg);
+ stroke: var(--accent);
+ stroke-width: 2.5;
+}
+.stars-map .pin-dot.olympic {
+ fill: var(--bg);
+ stroke: var(--fg);
+ stroke-width: 2;
+ stroke-dasharray: 3 2;
+}
+.stars-map .pin-num {
+ fill: var(--accent-fg);
+ font-family: var(--font-body);
+ font-weight: 800;
+ font-size: 10px;
+ letter-spacing: 0.02em;
+ pointer-events: none;
+}
+.stars-map .pin-num.house-num { fill: var(--accent); font-size: 13px; }
+.stars-map .pin-num.olympic-num { fill: var(--fg); font-size: 13px; }
+.stars-map .pin-label {
+ font-family: var(--font-body); font-weight: 800; font-size: 8px;
+ letter-spacing: 0.22em; fill: var(--fg); pointer-events: none;
+}
+.stars-map .pin-label.olympic-label { fill: var(--muted); }
+
+/* Hover wiring — :has selector links list ↔ pin */
+.stars-list li:hover { background: var(--soft); }
+.stars-list li:hover ~ .stars-map .pin { opacity: 0.3; }
+/* Simpler reverse effect: highlight list item when hovering pin not trivially possible without JS.
+ Keep visual affordance via hover-lift on pin only. */
+
+/* Roster list */
+.stars-list {
+ list-style: none; margin: 0; padding: 0;
+ display: flex; flex-direction: column; gap: 0;
+ border-top: 1px solid var(--soft);
+}
+.stars-list li {
+ display: grid;
+ grid-template-columns: 42px 1fr 92px;
+ gap: 20px;
+ padding: 18px 0;
+ border-bottom: 1px solid var(--soft);
+ align-items: start;
+ transition: background 140ms;
+}
+.stars-list .sn {
+ font-family: var(--font-display); font-weight: var(--font-display-weight);
+ font-size: 28px; line-height: 1; letter-spacing: -0.01em;
+ color: var(--accent);
+}
+.stars-list .si { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
+.stars-list .sh {
+ display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px;
+}
+.stars-list .sh b {
+ font-family: var(--font-display); font-weight: var(--font-display-weight);
+ font-size: 22px; letter-spacing: -0.01em; color: var(--fg);
+}
+.stars-list .sh em {
+ font-family: var(--font-serif); font-style: italic; font-size: 14px;
+ color: var(--muted);
+}
+.stars-list .si p {
+ font-family: var(--font-serif); font-size: 15px; line-height: 1.5;
+ margin: 0; color: var(--fg); opacity: 0.85;
+}
+.stars-list .sk {
+ font-family: var(--font-body); font-weight: 700; font-size: 10px;
+ letter-spacing: 0.24em; color: var(--muted);
+ padding-top: 8px; text-align: right; white-space: nowrap;
+}
+
+/* Special rows */
+.stars-list li.starred-here .sn { color: var(--accent); font-size: 26px; }
+.stars-list li.starred-here { background: var(--soft); }
+.stars-list li.starred-olympic .sn { color: var(--fg); font-size: 22px; border: 1px solid var(--fg); border-radius: 999px; width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; font-size: 14px; }
+
+.stars-footnote {
+ margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--soft);
+ display: flex; justify-content: space-between;
+ font-family: var(--font-body); font-weight: 700; font-size: 10px;
+ letter-spacing: 0.22em; color: var(--muted);
+}
+
+@media (max-width: 1100px) {
+ .stars { padding: 72px 32px 48px; }
+ .stars > header { grid-template-columns: 1fr; gap: 20px; }
+ .stars > header > div h2 { font-size: 48px; }
+ .stars-grid { grid-template-columns: 1fr; gap: 32px; }
+ .stars-map { position: static; aspect-ratio: 620 / 420; }
+}
+@media (max-width: 600px) {
+ .stars-list li { grid-template-columns: 32px 1fr; gap: 12px; }
+ .stars-list .sk { display: none; }
+ .stars-list .sh b { font-size: 18px; }
+ .stars-list .si p { font-size: 14px; }
+}
+
+/* =========================================================
+ LIVE GAMES RAIL — lower-third ticker
+ ========================================================= */
+.rail {
+ padding: 40px 72px 48px;
+ background: var(--panel-bg);
+ color: var(--panel-fg);
+ border-top: 1px solid var(--soft);
+}
+.rail-head {
+ display: flex; justify-content: space-between; align-items: flex-end;
+ gap: 32px; padding-bottom: 20px; margin-bottom: 20px;
+ border-bottom: 1px solid rgba(255,255,255,0.15);
+}
+.rail-head-left { display: flex; flex-direction: column; gap: 6px; }
+.rail-eyebrow {
+ display: inline-flex; align-items: center; gap: 8px;
+ font-family: var(--font-body); font-weight: 800; font-size: 11px;
+ letter-spacing: 0.28em; color: var(--accent);
+}
+.pulse {
+ display: inline-block; width: 8px; height: 8px; border-radius: 50%;
+ background: var(--accent);
+ animation: railpulse 1.2s ease-in-out infinite;
+ box-shadow: 0 0 0 0 var(--accent);
+}
+@keyframes railpulse {
+ 0% { transform: scale(1); box-shadow: 0 0 0 0 var(--accent); }
+ 70% { transform: scale(1.1); box-shadow: 0 0 0 8px transparent; }
+ 100% { transform: scale(1); box-shadow: 0 0 0 0 transparent; }
+}
+.rail-title {
+ font-family: var(--font-display); font-weight: var(--font-display-weight);
+ font-size: 42px; letter-spacing: -0.02em; line-height: 1;
+ margin: 0; color: var(--panel-fg);
+}
+.rail-head-right {
+ display: flex; gap: 20px; align-items: center;
+}
+.rail-clock {
+ display: flex; flex-direction: column; gap: 2px; text-align: right;
+}
+.rail-clock b {
+ font-family: var(--font-display); font-weight: var(--font-display-weight);
+ font-size: 26px; letter-spacing: 0.05em; line-height: 1;
+ color: var(--accent);
+}
+.rail-clock span {
+ font-family: var(--font-body); font-weight: 700; font-size: 10px;
+ letter-spacing: 0.22em; opacity: 0.65;
+}
+.rail-medals { display: flex; gap: 2px; padding-left: 20px; border-left: 1px solid rgba(255,255,255,0.15); }
+.rail-medals > div {
+ display: flex; flex-direction: column; align-items: center;
+ padding: 0 12px;
+}
+.rail-medals b {
+ font-family: var(--font-display); font-weight: var(--font-display-weight);
+ font-size: 22px; letter-spacing: -0.01em;
+}
+.rail-medals span {
+ font-family: var(--font-body); font-weight: 800; font-size: 10px;
+ letter-spacing: 0.25em; opacity: 0.7;
+}
+
+/* Track */
+.rail-track {
+ display: grid; grid-auto-flow: column; grid-auto-columns: minmax(280px, 1fr);
+ gap: 16px;
+ overflow-x: auto; overflow-y: hidden;
+ padding-bottom: 4px;
+ scroll-snap-type: x mandatory;
+ scrollbar-width: thin;
+ scrollbar-color: var(--accent) transparent;
+}
+.rail-track::-webkit-scrollbar { height: 4px; }
+.rail-track::-webkit-scrollbar-thumb { background: var(--accent); }
+
+/* Cards */
+.rail-card {
+ scroll-snap-align: start;
+ background: rgba(255,255,255,0.04);
+ border: 1px solid rgba(255,255,255,0.12);
+ padding: 16px 18px;
+ display: flex; flex-direction: column;
+ gap: 8px; min-height: 180px;
+ transition: border-color 150ms, background 150ms;
+}
+.rail-card:hover {
+ border-color: var(--accent);
+ background: rgba(255,255,255,0.07);
+}
+.rail-card.live { border-color: var(--accent); background: rgba(226,48,42,0.08); }
+.rail-card .rc-top {
+ display: flex; align-items: center; gap: 8px;
+ font-family: var(--font-body); font-weight: 800; font-size: 10px;
+ letter-spacing: 0.24em;
+}
+.rail-card .rc-top b { color: var(--accent); }
+.rail-card .rc-top em { margin-left: auto; font-style: normal; opacity: 0.6; }
+.rail-card .rc-dot {
+ width: 8px; height: 8px; border-radius: 50%; background: var(--accent);
+ animation: railpulse 1.2s ease-in-out infinite;
+}
+.rail-card .rc-chev { color: var(--accent); font-size: 13px; }
+.rail-card h3 {
+ font-family: var(--font-display); font-weight: var(--font-display-weight);
+ font-size: 22px; letter-spacing: -0.01em; line-height: 1;
+ margin: 2px 0 0; color: var(--panel-fg);
+}
+.rail-card p {
+ font-family: var(--font-serif); font-size: 14px; line-height: 1.45;
+ margin: 0; opacity: 0.85;
+}
+.rail-card .rc-score, .rail-card .rc-countdown, .rail-card .rc-time {
+ display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
+ margin-top: 2px;
+}
+.rail-card .rc-score b, .rail-card .rc-countdown b, .rail-card .rc-time b {
+ font-family: var(--font-display); font-weight: var(--font-display-weight);
+ font-size: 32px; letter-spacing: -0.02em; line-height: 1;
+ color: var(--accent);
+}
+.rail-card .rc-score span { font-size: 22px; opacity: 0.5; }
+.rail-card .rc-countdown em, .rail-card .rc-time em, .rail-card .rc-score em {
+ font-family: var(--font-body); font-weight: 700; font-size: 10px;
+ letter-spacing: 0.22em; opacity: 0.7; margin-left: 4px;
+ font-style: normal;
+}
+.rail-card .rc-grid {
+ display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px 12px;
+ margin-top: 2px;
+}
+.rail-card .rc-grid > div {
+ display: flex; align-items: baseline; gap: 6px;
+}
+.rail-card .rc-grid b {
+ font-family: var(--font-display); font-weight: var(--font-display-weight);
+ font-size: 18px;
+}
+.rail-card .rc-grid span {
+ font-family: var(--font-body); font-weight: 700; font-size: 9px;
+ letter-spacing: 0.22em; opacity: 0.65;
+}
+.rail-card .rc-foot {
+ margin-top: auto; padding-top: 8px;
+ border-top: 1px solid rgba(255,255,255,0.1);
+ display: flex; justify-content: space-between;
+ font-family: var(--font-body); font-weight: 700; font-size: 9px;
+ letter-spacing: 0.22em; opacity: 0.65;
+}
+
+@media (max-width: 900px) {
+ .rail { padding: 28px 24px; }
+ .rail-head { flex-direction: column; align-items: flex-start; gap: 16px; }
+ .rail-head-right { width: 100%; justify-content: space-between; padding-left: 0; }
+ .rail-title { font-size: 32px; }
+ .rail-track { grid-auto-columns: 80%; }
+}
diff --git a/test-e2e.js b/test-e2e.js
new file mode 100644
index 0000000..67d6dce
--- /dev/null
+++ b/test-e2e.js
@@ -0,0 +1,79 @@
+// End-to-end simulation — mirrors what signup.js + rental.js do in the browser.
+const fns = require("./signup.js");
+
+async function run() {
+ const demos = [
+ { address: "471 S Peck Dr, Beverly Hills, CA 90210", host: "Steve Abrams", email: "steveabramsdesigns@gmail.com", phone: "(310) 713-0489" },
+ { address: "462 S Beverwil Dr, Beverly Hills, CA 90212", host: "Steve Abrams", email: "steveabramsdesigns@gmail.com", phone: "(310) 713-0489" },
+ ];
+ const store = {};
+ console.log("\n── 1/5 SEED TWO RENTALS ───────────────────────────────");
+ for (const d of demos) {
+ const geo = await fns.geocode(d.address);
+ const nearest = fns.nearestVenues({ lat: geo.lat, lng: geo.lng }, 6);
+ const baseline = fns.baselineFor(geo.zip || "");
+ const price = fns.priceModel(baseline, nearest);
+ const slug = fns.slugify((geo.street || d.address).split(",")[0]);
+ store[slug] = {
+ slug, host: d.host, email: d.email, phone: d.phone,
+ address: { raw: d.address, display: geo.display, street: geo.street, city: geo.city,
+ county: geo.county, state: geo.state, zip: geo.zip, lat: geo.lat, lng: geo.lng },
+ baseline, price, nearest,
+ createdAt: new Date().toISOString(),
+ verified: true,
+ inquiries: [], photos: [],
+ };
+ console.log(` ✓ ${slug} · ${geo.street} → closest ${nearest[0].headline} (${nearest[0].mi.toFixed(1)} mi) · $${price.mid}/night`);
+ await new Promise(r => setTimeout(r, 1200));
+ }
+
+ console.log("\n── 2/5 ELIGIBILITY GATE ───────────────────────────────");
+ // Try an address >30 mi from any venue (e.g., Palm Springs)
+ try {
+ const far = await fns.geocode("100 E Tahquitz Canyon Way, Palm Springs, CA 92262");
+ const n = fns.nearestVenues({ lat: far.lat, lng: far.lng }, 1);
+ const ok = n[0].mi <= 30;
+ console.log(` Palm Springs → ${n[0].name} = ${n[0].mi.toFixed(1)} mi · eligible: ${ok ? "YES" : "NO (correctly rejected)"}`);
+ } catch (e) { console.log(" ⚠ geocode error:", e.message); }
+
+ console.log("\n── 3/5 SIMULATE INQUIRY FROM A GUEST ──────────────────");
+ const target = Object.keys(store)[0];
+ const inquiry = {
+ id: "inq-" + Math.random().toString(36).slice(2, 10),
+ firstName: "Ruth", lastName: "Bader", email: "ruth@example.com",
+ checkIn: "2028-07-17", checkOut: "2028-07-23", guests: "4",
+ events: ["3x3 BASKETBALL", "SKATEBOARDING"],
+ message: "Flying in from Chicago — UCLA gymnastics + maybe some BMX. Any chance of early check-in on the 17th?",
+ createdAt: new Date().toISOString(),
+ };
+ store[target].inquiries.push(inquiry);
+ console.log(` ✓ Inquiry from ${inquiry.firstName} ${inquiry.lastName} saved to ${target}`);
+ console.log(` → checkin ${inquiry.checkIn} → checkout ${inquiry.checkOut} · ${inquiry.guests} guests`);
+
+ console.log("\n── 4/5 SIMULATE PHOTO UPLOAD ──────────────────────────");
+ // Minimal valid JPEG data URL — 1×1 red pixel. Good enough to verify the pipeline.
+ const onePx = "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAYABgAAD/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/2wBDAQMDAwQDBAgEBAgQCwkLEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBD/wAARCAABAAEDAREAAhEBAxEB/8QAFQABAQAAAAAAAAAAAAAAAAAAAAn/xAAUEAEAAAAAAAAAAAAAAAAAAAAA/8QAFAEBAAAAAAAAAAAAAAAAAAAAAP/EABQRAQAAAAAAAAAAAAAAAAAAAAD/2gAMAwEAAhEDEQA/AL+AAAAAAAf/2Q==";
+ store[target].photos.push(onePx, onePx, onePx);
+ console.log(` ✓ 3 photos pushed to ${target}.photos[] (total ${store[target].photos.length})`);
+
+ console.log("\n── 5/5 VERIFY RECORD SHAPE MATCHES DASHBOARD EXPECTATIONS ──");
+ const r = store[target];
+ const checks = [
+ ["slug", !!r.slug],
+ ["host/email/phone", r.host && r.email && r.phone],
+ ["address.street/city/zip/lat/lng", r.address.street && r.address.city && r.address.zip && r.address.lat && r.address.lng],
+ ["nearest[0] has headline+dates", r.nearest[0].headline && r.nearest[0].dates],
+ ["price.low/mid/high", r.price.low && r.price.mid && r.price.high],
+ ["inquiries[] + photos[]", Array.isArray(r.inquiries) && Array.isArray(r.photos)],
+ ["createdAt ISO", !isNaN(new Date(r.createdAt).getTime())],
+ ];
+ for (const [k, ok] of checks) console.log(` ${ok ? "✓" : "✗"} ${k}`);
+
+ console.log("\n──────────────────────────────────────────────────────");
+ console.log(" STORE OK — ready to import into localStorage.");
+ console.log(" Rentals:", Object.keys(store).join(", "));
+ console.log("──────────────────────────────────────────────────────\n");
+ return store;
+}
+
+run().catch(e => { console.error("FAIL:", e); process.exit(1); });
diff --git a/theme.js b/theme.js
new file mode 100644
index 0000000..55a1f5c
--- /dev/null
+++ b/theme.js
@@ -0,0 +1,59 @@
+// Malden House — theme switcher
+const THEMES = {
+ 1: { name: "Editorial" },
+ 2: { name: "Sunbaked" },
+ 3: { name: "LA Eclipse" },
+ 4: { name: "Monograph" },
+ 5: { name: "Retro '84" },
+ 6: { name: "Postcard" },
+ 7: { name: "Arch Mono" },
+ 8: { name: "Block Sport" },
+ 9: { name: "Citrus Grove" },
+ 10: { name: "Blueprint" },
+};
+
+const html = document.documentElement;
+const toggle = document.getElementById("switcher-toggle");
+const panel = document.getElementById("switcher-panel");
+const num = document.getElementById("switcher-num");
+const name = document.getElementById("switcher-name");
+const chips = document.querySelectorAll(".chip[data-set]");
+
+function apply(n) {
+ const t = THEMES[n]; if (!t) return;
+ html.setAttribute("data-theme", n);
+ num.textContent = String(n).padStart(2, "0");
+ name.textContent = t.name;
+ chips.forEach(c => c.classList.toggle("active", c.dataset.set === String(n)));
+ try { localStorage.setItem("malden-theme", n); } catch (e) {}
+}
+
+toggle.addEventListener("click", () => {
+ const open = !panel.hasAttribute("hidden");
+ if (open) { panel.setAttribute("hidden", ""); toggle.setAttribute("aria-expanded", "false"); }
+ else { panel.removeAttribute("hidden"); toggle.setAttribute("aria-expanded", "true"); }
+});
+
+document.addEventListener("click", e => {
+ if (!panel.hasAttribute("hidden") && !e.target.closest(".switcher")) {
+ panel.setAttribute("hidden", ""); toggle.setAttribute("aria-expanded", "false");
+ }
+});
+
+chips.forEach(c => c.addEventListener("click", () => apply(c.dataset.set)));
+
+// Keyboard: 1-9 sets themes 1-9, 0 sets 10
+document.addEventListener("keydown", e => {
+ if (e.target.closest("input, textarea")) return;
+ if (e.key >= "1" && e.key <= "9") apply(Number(e.key));
+ else if (e.key === "0") apply(10);
+ else if (e.key === "[") apply(Math.max(1, Number(html.dataset.theme) - 1));
+ else if (e.key === "]") apply(Math.min(10, Number(html.dataset.theme) + 1));
+});
+
+// Restore preference
+try {
+ const saved = Number(localStorage.getItem("malden-theme"));
+ if (saved >= 1 && saved <= 10) apply(saved);
+ else apply(1);
+} catch (e) { apply(1); }
(oldest)
·
back to Malden House
·
add canonical .gitignore per standing rule 1f8f8d2 →