← back to Bubbesblock
Add Nextdoor-style block post-detail UI (public/index.html)
5be1261d4b0053d68a691840902f35ae692fb6b3 · 2026-06-19 14:08:52 -0700 · Steve
Files touched
Diff
commit 5be1261d4b0053d68a691840902f35ae692fb6b3
Author: Steve <steve@designerwallcoverings.com>
Date: Fri Jun 19 14:08:52 2026 -0700
Add Nextdoor-style block post-detail UI (public/index.html)
---
public/index.html | 366 ++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 file changed, 366 insertions(+)
diff --git a/public/index.html b/public/index.html
new file mode 100644
index 0000000..c44f94e
--- /dev/null
+++ b/public/index.html
@@ -0,0 +1,366 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8" />
+<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+<title>BubbesBlock — Sunset Park Block</title>
+<meta name="description" content="BubbesBlock — your neighborhood block, the warm way. Cup-of-sugar favors, block events, and the stories of who lived where." />
+<style>
+ :root{
+ --green:#00874b; /* brand block green */
+ --green-dark:#006c3c;
+ --green-tint:#e9f6ee;
+ --plum:#7a3f6e; /* bubbe warmth accent */
+ --ink:#1b1b1b;
+ --muted:#65676b;
+ --line:#e4e6ea;
+ --bg:#f3f1ec; /* warm paper grey */
+ --card:#ffffff;
+ --radius:12px;
+ --shadow:0 1px 2px rgba(0,0,0,.06),0 1px 3px rgba(0,0,0,.04);
+ }
+ *{box-sizing:border-box}
+ html,body{margin:0;padding:0}
+ body{
+ font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
+ background:var(--bg);color:var(--ink);font-size:15px;line-height:1.45;
+ -webkit-font-smoothing:antialiased;
+ }
+ a{color:inherit;text-decoration:none}
+ button{font-family:inherit;cursor:pointer;border:none;background:none}
+ img{display:block;max-width:100%}
+
+ /* ---------- top bar ---------- */
+ header.topbar{
+ position:sticky;top:0;z-index:50;background:var(--card);
+ border-bottom:1px solid var(--line);height:60px;display:flex;align-items:center;
+ padding:0 16px;gap:16px;
+ }
+ .brand{display:flex;align-items:center;gap:9px;font-weight:800;font-size:20px;color:var(--green);letter-spacing:-.5px}
+ .brand .house{
+ width:34px;height:34px;border-radius:10px;background:var(--green);
+ display:grid;place-items:center;flex:none;
+ }
+ .brand .house svg{width:20px;height:20px}
+ .brand small{font-weight:600;color:var(--plum);font-size:12px;margin-left:2px}
+ .search{flex:1;max-width:420px;position:relative}
+ .search input{
+ width:100%;height:40px;border-radius:22px;border:1px solid transparent;background:#eef0f2;
+ padding:0 16px 0 42px;font-size:14px;outline:none;
+ }
+ .search input:focus{background:#fff;border-color:var(--green)}
+ .search svg{position:absolute;left:14px;top:11px;width:18px;height:18px;color:var(--muted)}
+ nav.topnav{margin-left:auto;display:flex;align-items:center;gap:6px}
+ .navbtn{
+ width:44px;height:44px;border-radius:50%;display:grid;place-items:center;color:var(--muted);position:relative;
+ }
+ .navbtn:hover{background:#eef0f2;color:var(--ink)}
+ .navbtn.active{color:var(--green)}
+ .navbtn svg{width:23px;height:23px}
+ .badge{position:absolute;top:6px;right:6px;background:#e0245e;color:#fff;font-size:10px;font-weight:700;border-radius:10px;min-width:16px;height:16px;display:grid;place-items:center;padding:0 4px}
+ .avatar-btn{width:40px;height:40px;border-radius:50%;overflow:hidden;margin-left:8px;border:2px solid var(--green-tint)}
+
+ /* ---------- layout ---------- */
+ .wrap{max-width:1180px;margin:0 auto;padding:20px 16px;display:grid;grid-template-columns:248px minmax(0,1fr) 300px;gap:20px;align-items:start}
+ .col-left,.col-right{position:sticky;top:80px}
+
+ /* avatars (initials) */
+ .ava{border-radius:50%;flex:none;display:grid;place-items:center;color:#fff;font-weight:700;overflow:hidden}
+ .a1{background:#c2557a}.a2{background:#3a7d5d}.a3{background:#b8862f}.a4{background:#5566b5}.a5{background:#a05236}
+
+ /* ---------- left sidebar ---------- */
+ .me{display:flex;align-items:center;gap:11px;padding:12px;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);margin-bottom:14px}
+ .me .ava{width:44px;height:44px}
+ .me b{display:block;font-size:15px}
+ .me span{font-size:12.5px;color:var(--muted)}
+ .menu{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:6px;margin-bottom:14px}
+ .menu a{display:flex;align-items:center;gap:13px;padding:10px 12px;border-radius:9px;font-weight:600;font-size:14.5px;color:#3a3b3c}
+ .menu a:hover{background:#f0f2f4}
+ .menu a.active{background:var(--green-tint);color:var(--green-dark)}
+ .menu a svg{width:21px;height:21px;flex:none}
+ .menu a .pill{margin-left:auto;background:var(--green);color:#fff;font-size:11px;font-weight:700;border-radius:10px;padding:1px 7px}
+ .grouphd{font-size:11px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;color:var(--muted);padding:4px 12px 8px}
+ .grp a{display:flex;align-items:center;gap:11px;padding:8px 12px;border-radius:9px;font-size:14px}
+ .grp a:hover{background:#f0f2f4}
+ .grp .dot{width:30px;height:30px;border-radius:8px;display:grid;place-items:center;color:#fff;font-size:14px;flex:none}
+
+ /* ---------- center / post ---------- */
+ .backbar{display:flex;align-items:center;gap:10px;margin-bottom:12px;font-weight:700;color:var(--muted)}
+ .backbar button{display:flex;align-items:center;gap:8px;color:var(--muted);font-weight:700;font-size:14px;padding:6px 10px;border-radius:20px}
+ .backbar button:hover{background:#e7e9ec;color:var(--ink)}
+
+ .card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
+ .post{padding:16px 18px 8px}
+ .post-head{display:flex;align-items:center;gap:11px}
+ .post-head .ava{width:46px;height:46px;font-size:17px}
+ .post-head .who b{font-size:15.5px}
+ .post-head .who .meta{font-size:13px;color:var(--muted);display:flex;align-items:center;gap:5px;flex-wrap:wrap}
+ .post-head .who .meta .gd{color:var(--green-dark);font-weight:600}
+ .more{margin-left:auto;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;color:var(--muted)}
+ .more:hover{background:#eef0f2}
+ .cat{display:inline-flex;align-items:center;gap:6px;margin-top:13px;background:var(--green-tint);color:var(--green-dark);font-weight:700;font-size:12px;padding:5px 11px;border-radius:20px}
+ .body{font-size:16px;line-height:1.55;margin:13px 0 4px;color:#222}
+ .body p{margin:0 0 12px}
+ .photo{margin:8px -18px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
+ .photo .ph{height:330px;background:
+ radial-gradient(120% 120% at 20% 10%,#f6e7c9 0%,#e8c88c 30%,#cf9a5a 60%,#9c6b3f 100%);
+ position:relative;display:grid;place-items:center;color:#5a3c22}
+ .photo .ph .tag{position:absolute;left:14px;bottom:14px;background:rgba(0,0,0,.55);color:#fff;font-size:12px;font-weight:600;padding:5px 11px;border-radius:16px;backdrop-filter:blur(2px)}
+ .photo .ph .emoji{font-size:84px;filter:drop-shadow(0 6px 10px rgba(0,0,0,.18))}
+
+ .stats{display:flex;align-items:center;gap:6px;padding:12px 18px;color:var(--muted);font-size:13.5px}
+ .stats .react{display:flex;align-items:center}
+ .stats .react span{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-size:12px;margin-left:-6px;border:2px solid #fff}
+ .stats .react span:first-child{margin-left:0}
+ .stats .r1{background:#f3603c}.stats .r2{background:#f7b500}.stats .r3{background:var(--green)}
+ .stats .right{margin-left:auto;display:flex;gap:14px}
+
+ .actions{display:flex;border-top:1px solid var(--line);padding:4px 8px}
+ .actions button{flex:1;display:flex;align-items:center;justify-content:center;gap:9px;padding:10px;border-radius:9px;color:var(--muted);font-weight:700;font-size:14.5px}
+ .actions button:hover{background:#f0f2f4}
+ .actions button.on{color:var(--green)}
+ .actions svg{width:21px;height:21px}
+
+ /* comments */
+ .comments{padding:6px 18px 16px}
+ .compose{display:flex;gap:10px;align-items:center;padding:10px 0 6px}
+ .compose .ava{width:36px;height:36px;font-size:14px}
+ .compose .field{flex:1;display:flex;align-items:center;background:#eef0f2;border-radius:22px;padding:0 8px 0 16px;height:42px}
+ .compose .field input{flex:1;border:none;background:none;outline:none;font-size:14px;height:100%}
+ .compose .field button{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;color:var(--green)}
+ .compose .field button:hover{background:#dfe3e8}
+
+ .cmt{display:flex;gap:10px;padding:10px 0}
+ .cmt .ava{width:36px;height:36px;font-size:14px}
+ .cmt .bub{background:#f0f2f4;border-radius:16px;padding:9px 13px;display:inline-block}
+ .cmt .bub b{font-size:14px}
+ .cmt .bub .nb{font-size:12px;color:var(--muted);font-weight:600}
+ .cmt .bub p{margin:2px 0 0;font-size:14.5px}
+ .cmt .meta{display:flex;gap:16px;font-size:12.5px;font-weight:700;color:var(--muted);padding:5px 0 0 13px}
+ .cmt .meta a:hover{color:var(--green);text-decoration:underline}
+ .cmt.reply{margin-left:46px}
+ .morecmt{padding:8px 0 0 0;font-weight:700;color:var(--muted);font-size:13.5px}
+ .morecmt:hover{color:var(--green);cursor:pointer}
+
+ /* ---------- right sidebar ---------- */
+ .panel{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:15px;margin-bottom:16px}
+ .panel h3{margin:0 0 4px;font-size:15px}
+ .panel .sub{font-size:13px;color:var(--muted);margin:0 0 12px}
+ .claim{background:linear-gradient(150deg,var(--green) 0%,var(--green-dark) 100%);color:#fff;border:none}
+ .claim h3{color:#fff}.claim .sub{color:rgba(255,255,255,.85)}
+ .claim .cta{display:block;text-align:center;background:#fff;color:var(--green-dark);font-weight:800;padding:10px;border-radius:22px;font-size:14px;margin-top:4px}
+ .claim .fine{font-size:11px;color:rgba(255,255,255,.8);text-align:center;margin:9px 0 0}
+ .spon{font-size:10.5px;font-weight:800;letter-spacing:.6px;color:var(--muted);text-transform:uppercase;margin-bottom:8px}
+ .biz{display:flex;gap:11px;align-items:center;padding:8px 0;border-top:1px solid var(--line)}
+ .biz:first-of-type{border-top:none}
+ .biz .lg{width:42px;height:42px;border-radius:10px;display:grid;place-items:center;color:#fff;font-size:18px;flex:none}
+ .biz b{font-size:14px;display:block}
+ .biz span{font-size:12px;color:var(--muted)}
+ .biz .rate{color:#e8a200;font-size:12px}
+ .trend a{display:block;padding:8px 0;border-top:1px solid var(--line);font-size:14px}
+ .trend a:first-of-type{border-top:none}
+ .trend a:hover b{color:var(--green-dark)}
+ .trend small{color:var(--muted);font-size:12px}
+ .footnote{font-size:12px;color:var(--muted);padding:0 6px;line-height:1.7}
+ .footnote a:hover{text-decoration:underline}
+ .footnote .mark{margin-top:8px;font-weight:700;color:var(--green)}
+
+ @media(max-width:980px){
+ .wrap{grid-template-columns:minmax(0,1fr) 300px}
+ .col-left{display:none}
+ }
+ @media(max-width:760px){
+ .wrap{grid-template-columns:1fr}
+ .col-right{display:none}
+ .search{display:none}
+ .photo .ph{height:240px}
+ }
+</style>
+</head>
+<body>
+
+<!-- ===================== TOP BAR ===================== -->
+<header class="topbar">
+ <a class="brand" href="/">
+ <span class="house">
+ <svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 11l9-8 9 8"/><path d="M5 10v10h14V10"/><path d="M9 20v-6h6v6"/></svg>
+ </span>
+ BubbesBlock<small>♥ your block</small>
+ </a>
+
+ <div class="search">
+ <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="7"/><path d="M21 21l-4.3-4.3"/></svg>
+ <input placeholder="Search your block — neighbors, favors, history…" />
+ </div>
+
+ <nav class="topnav">
+ <button class="navbtn active" title="Block Feed"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 11l9-8 9 8"/><path d="M5 10v10h14V10"/></svg></button>
+ <button class="navbtn" title="Cup of Sugar"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 7h18l-1.5 12.5a2 2 0 0 1-2 1.5H6.5a2 2 0 0 1-2-1.5L3 7z"/><path d="M8 7V5a4 4 0 0 1 8 0v2"/></svg></button>
+ <button class="navbtn" title="Notifications"><span class="badge">5</span><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 8a6 6 0 0 0-12 0c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.7 21a2 2 0 0 1-3.4 0"/></svg></button>
+ <button class="navbtn" title="Inbox"><span class="badge">2</span><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4h16v16H4z"/><path d="M4 8h5l2 3h2l2-3h5"/></svg></button>
+ <button class="avatar-btn"><span class="ava a1" style="width:100%;height:100%;border-radius:0;font-size:15px">MS</span></button>
+ </nav>
+</header>
+
+<!-- ===================== BODY ===================== -->
+<div class="wrap">
+
+ <!-- ---------- LEFT ---------- -->
+ <aside class="col-left">
+ <div class="me">
+ <span class="ava a1" style="width:44px;height:44px;font-size:16px">MS</span>
+ <div><b>Miriam Stein</b><span>112 Beekman Ave · verified</span></div>
+ </div>
+
+ <div class="menu">
+ <a class="active" href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 11l9-8 9 8"/><path d="M5 10v10h14V10"/></svg>Block Feed</a>
+ <a href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 8a6 6 0 0 0-12 0c0 7-3 9-3 9h18s-3-2-3-9"/></svg>Notifications<span class="pill">5</span></a>
+ <a href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 7h18l-1.5 12.5a2 2 0 0 1-2 1.5H6.5a2 2 0 0 1-2-1.5z"/><path d="M8 7V5a4 4 0 0 1 8 0v2"/></svg>Cup of Sugar</a>
+ <a href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M8 2v4M16 2v4M3 9h18M5 5h14v16H5z"/></svg>Block Events</a>
+ <a href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3l9 6-9 6-9-6 9-6z"/><path d="M3 13l9 6 9-6"/></svg>Who Lived Here</a>
+ <a href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 5h14v14l-7-3-7 3z"/></svg>Bookmarks</a>
+ </div>
+
+ <div class="menu">
+ <div class="grouphd">Your Block · Beekman Ave</div>
+ <div class="grp">
+ <a href="#"><span class="dot" style="background:#3a7d5d">🥧</span> Babka & Bagel Swap</a>
+ <a href="#"><span class="dot" style="background:#b8862f">🔧</span> Tools & Ladders to Borrow</a>
+ <a href="#"><span class="dot" style="background:#5566b5">🐕</span> Block Dog Walkers</a>
+ <a href="#"><span class="dot" style="background:#c2557a">🕯️</span> Shabbat Dinner Club</a>
+ </div>
+ </div>
+ </aside>
+
+ <!-- ---------- CENTER ---------- -->
+ <main class="col-center">
+ <div class="backbar">
+ <button>
+ <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M15 18l-6-6 6-6"/></svg>
+ Back to Block Feed
+ </button>
+ </div>
+
+ <article class="card">
+ <div class="post">
+ <div class="post-head">
+ <span class="ava a3" style="width:46px;height:46px;font-size:17px">RB</span>
+ <div class="who">
+ <b>Bubbe Ruth Bernstein</b>
+ <div class="meta"><span class="gd">108 Beekman Ave</span> · 3h · <svg viewBox="0 0 24 24" width="13" height="13" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></svg> Edited</div>
+ </div>
+ <button class="more"><svg viewBox="0 0 24 24" width="20" height="20" fill="currentColor"><circle cx="5" cy="12" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="19" cy="12" r="2"/></svg></button>
+ </div>
+
+ <span class="cat">🥧 Cup of Sugar · Free to a neighbor</span>
+
+ <div class="body">
+ <p><b>Made too much honey cake again.</b> 🍯 I always tell myself "Ruth, half a recipe!" and then I make a recipe and a half. So — there are <b>three loaves</b> on my stoop at 108 Beekman, wrapped and labeled, free for whoever wants one.</p>
+ <p>Take one, leave the foil for the next bubbe. And if anyone has a folding table I can borrow for Sunday's block party, I'll trade you a loaf for it. Knock anytime, I'm home. ♥</p>
+ </div>
+ </div>
+
+ <div class="photo">
+ <div class="ph">
+ <span class="emoji">🍯🍰</span>
+ <span class="tag">📍 108 Beekman Ave · the famous stoop</span>
+ </div>
+ </div>
+
+ <div class="stats">
+ <div class="react">
+ <span class="r1">❤️</span><span class="r2">😋</span><span class="r3">👍</span>
+ </div>
+ <span style="margin-left:8px">Goldie, Sol & 41 neighbors</span>
+ <div class="right"><span>18 comments</span><span>6 shares</span></div>
+ </div>
+
+ <div class="actions">
+ <button class="on"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20.8 4.6a5.5 5.5 0 0 0-7.8 0L12 5.7l-1-1a5.5 5.5 0 0 0-7.8 7.8l1 1L12 21l7.8-7.6 1-1a5.5 5.5 0 0 0 0-7.8z"/></svg>Thank</button>
+ <button><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 11.5a8.4 8.4 0 0 1-9 8.4 9 9 0 0 1-4-1L3 20l1.2-4A8.4 8.4 0 1 1 21 11.5z"/></svg>Reply</button>
+ <button><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 12v8h16v-8"/><path d="M12 16V4"/><path d="M8 8l4-4 4 4"/></svg>Share</button>
+ </div>
+
+ <!-- comments -->
+ <div class="comments">
+ <div class="compose">
+ <span class="ava a1" style="width:36px;height:36px;font-size:13px">MS</span>
+ <div class="field">
+ <input placeholder="Add a neighborly reply…" />
+ <button title="Photo"><svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="5" width="18" height="14" rx="2"/><circle cx="9" cy="11" r="2"/><path d="M21 17l-5-5-9 7"/></svg></button>
+ <button title="Send"><svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 2L11 13"/><path d="M22 2l-7 20-4-9-9-4 20-7z"/></svg></button>
+ </div>
+ </div>
+
+ <div class="cmt">
+ <span class="ava a2" style="width:36px;height:36px;font-size:14px">GF</span>
+ <div>
+ <div class="bub"><b>Goldie Fein</b> <span class="nb">· 114 Beekman</span><p>You are a treasure, Ruth. I'll send my grandson over for a loaf — and he'll bring the folding table back to you Saturday, promise. 🙏</p></div>
+ <div class="meta"><span>2h</span><a>Thank · 12</a><a>Reply</a></div>
+ </div>
+ </div>
+
+ <div class="cmt reply">
+ <span class="ava a3" style="width:36px;height:36px;font-size:13px">RB</span>
+ <div>
+ <div class="bub"><b>Bubbe Ruth Bernstein</b> <span class="nb">· author</span><p>Deal! Tell him there's an extra slice in it for him. 😉</p></div>
+ <div class="meta"><span>2h</span><a>Thank · 8</a><a>Reply</a></div>
+ </div>
+ </div>
+
+ <div class="cmt">
+ <span class="ava a4" style="width:36px;height:36px;font-size:14px">SK</span>
+ <div>
+ <div class="bub"><b>Sol Katz</b> <span class="nb">· 121 Beekman</span><p>This block has the best stoop in Sunset Park, hands down. Saving one for Mrs. Adler at 110, she doesn't get out much these days.</p></div>
+ <div class="meta"><span>1h</span><a>Thank · 23</a><a>Reply</a></div>
+ </div>
+ </div>
+
+ <div class="morecmt">View 15 more comments</div>
+ </div>
+ </article>
+ </main>
+
+ <!-- ---------- RIGHT ---------- -->
+ <aside class="col-right">
+ <div class="panel claim">
+ <h3>Claim 112 Beekman Ave</h3>
+ <p class="sub">Verify you live here to post, reply & unlock your home's full history.</p>
+ <a class="cta" href="https://claimmyaddress.com">Claim your address →</a>
+ <p class="fine">Free · takes 2 minutes · powered by claimmyaddress.com</p>
+ </div>
+
+ <div class="panel">
+ <div class="spon">Neighborhood Favorites</div>
+ <div class="biz">
+ <span class="lg" style="background:#c2557a">🥯</span>
+ <div><b>Beekman Bagel & Babka</b><span>Bakery · 2 blocks</span><div class="rate">★★★★★ <span style="color:#65676b">· 214</span></div></div>
+ </div>
+ <div class="biz">
+ <span class="lg" style="background:#3a7d5d">🔨</span>
+ <div><b>Sunset Park Hardware</b><span>Hardware · 4 blocks</span><div class="rate">★★★★☆ <span style="color:#65676b">· 96</span></div></div>
+ </div>
+ <div class="biz">
+ <span class="lg" style="background:#5566b5">🕯️</span>
+ <div><b>Adas Yeshurun Shul</b><span>Community · on the block</span><div class="rate">★★★★★ <span style="color:#65676b">· 58</span></div></div>
+ </div>
+ </div>
+
+ <div class="panel trend">
+ <h3 style="margin-bottom:10px">Trending on your block</h3>
+ <a href="#"><b>🔧 Who has a tall ladder?</b><br><small>9 neighbors replied · 1h</small></a>
+ <a href="#"><b>🐱 Found: orange tabby near 116</b><br><small>14 neighbors replied · 3h</small></a>
+ <a href="#"><b>🎉 Sunday block party — 1pm</b><br><small>32 going · 5h</small></a>
+ <a href="#"><b>🏚️ Who lived at 104 in the '60s?</b><br><small>from wholivedthere.com · 1d</small></a>
+ </div>
+
+ <div class="footnote">
+ <a href="#">About</a> · <a href="#">Block Guidelines</a> · <a href="#">Privacy</a> · <a href="#">Help</a><br>
+ <a href="https://wholivedthere.com">wholivedthere.com</a> · <a href="https://claimmyaddress.com">claimmyaddress.com</a>
+ <div class="mark">BubbesBlock © 2026 — your block, the warm way ♥</div>
+ </div>
+ </aside>
+
+</div>
+</body>
+</html>
← 1adfcbd security: untrack .env (still present on disk, just not in g
·
back to Bubbesblock
·
Wire BubbesBlock live: Express server + data-driven block fe d0b4a97 →