Deploy plotwren

.gitattributes

@@ -33,3 +33,5 @@ saved_model/**/* filter=lfs diff=lfs merge=lfs -text
 *.zip filter=lfs diff=lfs merge=lfs -text
 *.zst filter=lfs diff=lfs merge=lfs -text
 *tfevents* filter=lfs diff=lfs merge=lfs -text
+brand/cover.png filter=lfs diff=lfs merge=lfs -text
+brand/og.png filter=lfs diff=lfs merge=lfs -text

404.html

@@ -0,0 +1,2 @@
+<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Not found · Plotwren</title><link rel="stylesheet" href="/style.css"><link rel="icon" href="/icon.svg"></head>
+<body class="sub"><header class="bar"><a class="brand" href="/"><img src="/icon.svg" alt="" width="28" height="28"> Plotwren</a></header><main class="wrap"><h1>This street doesn't exist</h1><p><a class="btn" href="/">Back to the town map</a></p></main></body></html>

README.md

@@ -1,10 +1,39 @@
 ---
-title: Plotwren
-emoji: 📚
-colorFrom: pink
-colorTo: red
+title: "Plotwren — the CyberMax maker town"
+emoji: 🏘️
+colorFrom: red
+colorTo: yellow
 sdk: static
 pinned: false
+license: other
+short_description: "A pixel town where makers claim a plot from $5"
+tags:
+- pixel-art
+- indie-makers
+- startup-promotion
+- canvas
+- game
+- cybermax
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# Plotwren: put your product on the map from $5
+
+[![Plotwren demo](https://cybermaxtools.com/media/demos/plotwren/poster.jpg)](https://plotwren.cybermaxtools.com/?s=hf-plotwren)
+
+Plotwren is a pixel town for makers, indie devs and small businesses. Claim a **stall, shop, billboard or landmark** with your logo, one-line pitch and link. Fixed prices, paid once: nobody can outbid you or take your plot over.
+
+| Plot | Where | Price |
+|---|---|---|
+| Market stall | Market Row | $5, paid once |
+| Shop | Maker Street | $19, paid once |
+| Billboard | Launch Boulevard | $49, paid once |
+| Landmark (4 in total) | Plotwren Square | $149, paid once |
+| Featured (optional) | Featured strip + glowing outline | $9/month, cancel any time |
+
+**This Space is a static viewer** of the live town: it reads the same map data and opens checkout on the real site. Claim a plot at **[plotwren.cybermaxtools.com](https://plotwren.cybermaxtools.com/?s=hf-plotwren)**.
+
+- Every plot gets a share page, an "I'm on Plotwren" badge and real visit counts (no bots, no link previews).
+- Every sign is checked automatically before it shows: text, link and image. Adult, illegal, hateful or scam content is refused.
+- 14-day fix-or-refund if it doesn't work as described. [Terms](https://plotwren.cybermaxtools.com/terms/).
+
+Plots marked CyberMax are CyberMax's own products. © 2026 CyberMax. All rights reserved.

_headers

@@ -0,0 +1,23 @@
+# security-headers v1 (scripts/web/security_headers.py)
+/*
+  Strict-Transport-Security: max-age=31536000
+  X-Content-Type-Options: nosniff
+  X-Frame-Options: SAMEORIGIN
+  Referrer-Policy: strict-origin-when-cross-origin
+  Cross-Origin-Resource-Policy: cross-origin
+  Content-Security-Policy: frame-ancestors 'self'; object-src 'none'; base-uri 'self'; upgrade-insecure-requests
+/embed/*
+  ! X-Frame-Options
+  ! Content-Security-Policy
+# /security-headers
+/*
+  X-Content-Type-Options: nosniff
+  Referrer-Policy: strict-origin-when-cross-origin
+/town.js
+  Cache-Control: public, max-age=300
+/app.js
+  Cache-Control: public, max-age=300
+/style.css
+  Cache-Control: public, max-age=300
+/seed/*
+  Cache-Control: public, max-age=86400

app.js

@@ -0,0 +1,375 @@
+// Plotwren town map: a hand-drawn (code-drawn) pixel town on one <canvas>. No libraries, ~20 KB, works with touch,
+// mouse and keyboard. Data: /api/town (live plots), falling back to the house plots when offline or on a static mirror.
+// © 2026 CyberMax. All rights reserved.
+import { WORLD, TIERS, FEATURED, DISTRICTS, ROADS, WATER, FOUNTAIN, PLOTS, YARD, usd } from './town.js';
+
+const SITE = 'https://plotwren.cybermaxtools.com';
+const ON_SITE = /plotwren\.cybermaxtools\.com$|plotwren\.cybermax-tools\.workers\.dev$|^localhost$|^127\.0\.0\.1$/.test(location.hostname);
+const BASE = ON_SITE ? '' : SITE; // the static mirror (Hugging Face) reads the live town and links to the real checkout
+const SRC = new URLSearchParams(location.search).get('s') || (ON_SITE ? 'map' : 'mirror');
+const reduced = matchMedia('(prefers-reduced-motion: reduce)').matches;
+
+const cv = document.getElementById('town');
+const cx = cv.getContext('2d');
+const panel = document.getElementById('panel');
+const state = { plots: {}, house: [], loaded: false, checkout: true };
+const cam = { x: 0, y: 0, s: 1 };
+const imgs = new Map();
+let hover = null, selected = null, t0 = performance.now();
+
+// ---------------------------------------------------------------- deterministic noise
+function rng(seed) { let s = seed >>> 0; return () => ((s = (s * 1664525 + 1013904223) >>> 0) / 4294967296); }
+const hash = (str) => [...str].reduce((h, c) => (Math.imul(h ^ c.charCodeAt(0), 16777619) >>> 0), 2166136261);
+const inRect = (x, y, r, m = 0) => x >= r.x - m && x < r.x + r.w + m && y >= r.y - m && y < r.y + r.h + m;
+
+// ---------------------------------------------------------------- static background (drawn once)
+const PAL = { grass: '#8fd16a', grass2: '#7cc35a', grass3: '#a3dc7e', road: '#6b7280', road2: '#5b616d', line: '#f8e16c', walk: '#d6cfc2', walk2: '#c7bfb0', water: '#4aa3df', water2: '#7cc4f0', dirt: '#c99a5b', dirt2: '#b5864a', ink: '#2b2d42', paper: '#fff8e7', trunk: '#7a4a24', leaf: '#3f8f3a', leaf2: '#55a84b' };
+const bg = document.createElement('canvas');
+bg.width = WORLD.w; bg.height = WORLD.h;
+function drawBackground() {
+  const g = bg.getContext('2d');
+  const r = rng(7);
+  g.fillStyle = PAL.grass; g.fillRect(0, 0, WORLD.w, WORLD.h);
+  for (let i = 0; i < 2600; i++) { g.fillStyle = r() < 0.5 ? PAL.grass2 : PAL.grass3; g.fillRect((r() * WORLD.w) | 0, (r() * WORLD.h) | 0, 2, 2); }
+  // sidewalks around roads, then the roads
+  for (const rd of ROADS) { g.fillStyle = PAL.walk; g.fillRect(rd.x - 4, rd.y - 4, rd.w + 8, rd.h + 8); }
+  for (const rd of ROADS) {
+    g.fillStyle = PAL.road; g.fillRect(rd.x, rd.y, rd.w, rd.h);
+    g.fillStyle = PAL.road2; for (let i = 0; i < (rd.w * rd.h) / 60; i++) g.fillRect(rd.x + ((r() * rd.w) | 0), rd.y + ((r() * rd.h) | 0), 2, 2);
+    g.fillStyle = PAL.line;
+    if (rd.w > rd.h) for (let x = rd.x + 6; x < rd.x + rd.w - 10; x += 24) g.fillRect(x, rd.y + rd.h / 2 - 1, 12, 2);
+    else for (let y = rd.y + 6; y < rd.y + rd.h - 10; y += 24) g.fillRect(rd.x + rd.w / 2 - 1, y, 2, 12);
+  }
+  // water + a little pier
+  g.fillStyle = PAL.water; g.fillRect(WATER.x, WATER.y, WATER.w, WATER.h);
+  g.fillStyle = '#e9d8a6'; g.fillRect(0, WATER.y - 10, WORLD.w, 10);
+  g.fillStyle = PAL.trunk; g.fillRect(744, WATER.y - 10, 48, 54);
+  for (let y = WATER.y - 10; y < WATER.y + 44; y += 6) { g.fillStyle = '#5e3a1c'; g.fillRect(744, y, 48, 1); }
+  // fountain on the square
+  const f = FOUNTAIN;
+  g.fillStyle = '#9aa3ad'; g.fillRect(f.x + 4, f.y + 4, f.w - 8, f.h - 8);
+  g.fillStyle = PAL.water; g.fillRect(f.x + 8, f.y + 8, f.w - 16, f.h - 16);
+  g.fillStyle = '#e5e7eb'; g.fillRect(f.x + 20, f.y + 16, 8, 16);
+  // trees and flowers on empty grass
+  const blocked = (x, y) => ROADS.some((rd) => inRect(x, y, rd, 10)) || inRect(x, y, WATER, 14) || [...PLOTS, ...YARD].some((p) => inRect(x, y, p, 8)) || inRect(x, y, FOUNTAIN, 14);
+  for (let i = 0; i < 700; i++) {
+    const x = (r() * (WORLD.w - 20)) | 0, y = (r() * (WORLD.h - 90)) | 0;
+    if (blocked(x, y) || blocked(x + 14, y + 18)) continue;
+    if (r() < 0.55) tree(g, x, y, r() < 0.3); else flower(g, x, y, ['#ff5d8f', '#f3a712', '#ffffff', '#7b2cbf'][(r() * 4) | 0]);
+  }
+  // district plaques
+  label(g, DISTRICTS.yard, 72, 44); label(g, DISTRICTS.street, 72, 172); label(g, DISTRICTS.boulevard, 72, 380);
+  label(g, DISTRICTS.square, 640, 324); label(g, DISTRICTS.market, 72, 652); label(g, DISTRICTS.market, 840, 652); label(g, DISTRICTS.street, 840, 172); label(g, DISTRICTS.boulevard, 912, 380);
+}
+function tree(g, x, y, round) {
+  g.fillStyle = 'rgba(0,0,0,.15)'; g.fillRect(x + 2, y + 16, 14, 4);
+  g.fillStyle = PAL.trunk; g.fillRect(x + 7, y + 11, 4, 8);
+  g.fillStyle = PAL.leaf; round ? (g.fillRect(x + 2, y + 2, 14, 10), g.fillRect(x + 4, y, 10, 14)) : (g.fillRect(x + 5, y, 8, 4), g.fillRect(x + 3, y + 4, 12, 4), g.fillRect(x + 1, y + 8, 16, 4));
+  g.fillStyle = PAL.leaf2; g.fillRect(x + 5, y + 3, 4, 3);
+}
+function flower(g, x, y, c) { g.fillStyle = '#3f8f3a'; g.fillRect(x + 2, y + 3, 1, 3); g.fillStyle = c; g.fillRect(x + 1, y + 1, 3, 3); g.fillStyle = '#f8e16c'; g.fillRect(x + 2, y + 2, 1, 1); }
+function label(g, text, x, y) {
+  g.font = 'bold 9px ui-monospace, Menlo, Consolas, monospace';
+  const w = Math.ceil(g.measureText(text).width) + 8;
+  g.fillStyle = PAL.ink; g.fillRect(x, y - 9, w, 12);
+  g.fillStyle = '#fff'; g.fillText(text, x + 4, y);
+}
+
+// ---------------------------------------------------------------- plots
+function logoImg(src) {
+  if (!src) return null;
+  let im = imgs.get(src);
+  if (!im) { im = new Image(); im.decoding = 'async'; im.src = src.startsWith('/') ? BASE + src : src; im.onload = () => draw(); imgs.set(src, im); }
+  return im.complete && im.naturalWidth ? im : null;
+}
+function signBox(g, x, y, w, h, colour, live) {
+  g.fillStyle = PAL.ink; g.fillRect(x - 1, y - 1, w + 2, h + 2);
+  g.fillStyle = PAL.paper; g.fillRect(x, y, w, h);
+  const im = logoImg(live.logo);
+  const s = Math.min(w, h) - 2;
+  if (im) { g.imageSmoothingEnabled = true; g.drawImage(im, x + (w - s) / 2, y + (h - s) / 2, s, s); g.imageSmoothingEnabled = false; }
+  else {
+    g.fillStyle = colour; g.fillRect(x + 1, y + 1, w - 2, h - 2);
+    g.fillStyle = '#fff'; g.font = `bold ${Math.max(6, (s * 0.7) | 0)}px ui-monospace, monospace`; g.textAlign = 'center'; g.textBaseline = 'middle';
+    g.fillText((live.name || '?').slice(0, 1).toUpperCase(), x + w / 2, y + h / 2 + 1); g.textAlign = 'start'; g.textBaseline = 'alphabetic';
+  }
+}
+function drawPlot(g, p, info, now) {
+  const { x, y, w, h } = p;
+  const tier = p.tier;
+  g.fillStyle = 'rgba(0,0,0,.12)'; g.fillRect(x + 2, y + h - 2, w, 4);
+  if (!info || info.state === 'free') { // empty lot with a for-sale sign
+    g.fillStyle = PAL.dirt; g.fillRect(x, y, w, h);
+    g.fillStyle = PAL.dirt2; for (let i = 2; i < w; i += 6) g.fillRect(x + i, y + ((i * 7) % (h - 2)), 2, 2);
+    g.strokeStyle = '#8a6a3c'; g.setLineDash([2, 2]); g.strokeRect(x + 0.5, y + 0.5, w - 1, h - 1); g.setLineDash([]);
+    const sx = x + w / 2 - 7, sy = y + h / 2 - 9;
+    g.fillStyle = PAL.trunk; g.fillRect(sx + 6, sy + 8, 2, 10);
+    g.fillStyle = { stall: '#29bf12', shop: '#2e86ab', billboard: '#f3a712', landmark: '#e4572e' }[tier]; g.fillRect(sx, sy, 14, 9);
+    g.fillStyle = '#fff'; g.fillRect(sx + 3, sy + 4, 8, 1); g.fillRect(sx + 6, sy + 2, 2, 5);
+    return;
+  }
+  if (info.state === 'reserved' || info.state === 'sold') { // claimed, content coming: scaffolding
+    g.fillStyle = '#d9c7a3'; g.fillRect(x, y, w, h);
+    g.strokeStyle = '#a0763c'; g.lineWidth = 1;
+    for (let i = 0; i <= w; i += 8) { g.beginPath(); g.moveTo(x + i + 0.5, y); g.lineTo(x + i + 0.5, y + h); g.stroke(); }
+    for (let j = 0; j <= h; j += 8) { g.beginPath(); g.moveTo(x, y + j + 0.5); g.lineTo(x + w, y + j + 0.5); g.stroke(); }
+    g.fillStyle = '#f3a712'; g.fillRect(x + 2, y + h - 6, w - 4, 3);
+    return;
+  }
+  const c = info.colour || '#2e86ab';
+  if (tier === 'stall') {
+    g.fillStyle = '#c7a26b'; g.fillRect(x + 2, y + 14, w - 4, h - 16);
+    for (let i = 0; i < w - 4; i += 6) { g.fillStyle = (i / 6) % 2 ? '#fff' : c; g.fillRect(x + 2 + i, y + 6, 6, 8); }
+    g.fillStyle = PAL.ink; g.fillRect(x + 2, y + 14, w - 4, 1);
+    signBox(g, x + 9, y + 17, 14, 12, c, info);
+  } else if (tier === 'shop' || tier === 'house') {
+    g.fillStyle = '#efe3cc'; g.fillRect(x + 3, y + 14, w - 6, h - 16);
+    g.fillStyle = c; g.fillRect(x, y + 6, w, 10); g.fillRect(x + 4, y + 2, w - 8, 4);
+    g.fillStyle = 'rgba(0,0,0,.2)'; g.fillRect(x, y + 15, w, 1);
+    g.fillStyle = '#7fc8f8'; g.fillRect(x + 6, y + h - 14, 10, 8); g.fillRect(x + w - 16, y + h - 14, 10, 8);
+    g.fillStyle = PAL.ink; g.fillRect(x + w / 2 - 4, y + h - 14, 8, 12);
+    signBox(g, x + w / 2 - 12, y + 17, 24, 16, c, info);
+    if (tier === 'house') { g.fillStyle = PAL.ink; g.fillRect(x + w - 18, y, 18, 9); g.fillStyle = '#fff'; g.font = 'bold 7px ui-monospace, monospace'; g.fillText('CMX', x + w - 17, y + 7); }
+  } else if (tier === 'billboard') {
+    g.fillStyle = '#5e3a1c'; g.fillRect(x + 12, y + 34, 4, 14); g.fillRect(x + w - 16, y + 34, 4, 14);
+    g.fillStyle = PAL.ink; g.fillRect(x, y, w, 36);
+    g.fillStyle = c; g.fillRect(x + 2, y + 2, w - 4, 32);
+    signBox(g, x + 5, y + 5, 26, 26, c, info);
+    g.fillStyle = '#fff'; g.font = 'bold 7px ui-monospace, monospace';
+    const nm = (info.name || '').slice(0, 8);
+    g.fillText(nm, x + 34, y + 16); g.font = '6px ui-monospace, monospace'; g.fillText((info.name || '').slice(8, 16), x + 34, y + 25);
+  } else if (tier === 'landmark') {
+    g.fillStyle = '#e9e4da'; g.fillRect(x + 14, y + 10, w - 28, h - 12);
+    g.fillStyle = c; g.fillRect(x + 10, y + 4, w - 20, 10); g.fillRect(x + 24, y, w - 48, 4);
+    g.fillStyle = '#7fc8f8';
+    for (let r = 0; r < 4; r++) for (let k = 0; k < 4; k++) g.fillRect(x + 20 + k * 15, y + 54 + r * 9, 8, 5);
+    g.fillStyle = PAL.ink; g.fillRect(x + w / 2 - 6, y + h - 14, 12, 12);
+    signBox(g, x + w / 2 - 18, y + 16, 36, 34, c, info);
+  }
+  if (info.featured) {
+    const a = reduced ? 0.9 : 0.55 + 0.45 * Math.sin(now / 300);
+    g.strokeStyle = `rgba(255, 214, 10, ${a})`; g.lineWidth = 3; g.strokeRect(x - 3, y - 3, w + 6, h + 6); g.lineWidth = 1;
+  }
+}
+
+// ---------------------------------------------------------------- walkers (decoration only)
+const walkers = Array.from({ length: reduced ? 0 : 26 }, (_, i) => {
+  const r = rng(100 + i), rd = ROADS[i % ROADS.length], horiz = rd.w > rd.h;
+  return { rd, horiz, p: r(), v: (0.012 + r() * 0.02) * (r() < 0.5 ? 1 : -1), lane: r(), c: ['#e4572e', '#2e86ab', '#7b2cbf', '#29bf12', '#f3a712', '#ff5d8f'][i % 6] };
+});
+function drawWalkers(g, now) {
+  for (const w of walkers) {
+    const len = w.horiz ? w.rd.w : w.rd.h;
+    const pos = (((w.p * len + (now / 1000) * w.v * 600) % len) + len) % len;
+    const x = w.horiz ? w.rd.x + pos : w.rd.x - 3 + (w.lane < 0.5 ? 0 : w.rd.w + 2);
+    const y = w.horiz ? w.rd.y - 7 + (w.lane < 0.5 ? 0 : w.rd.h + 6) : w.rd.y + pos;
+    const step = ((now / 180) | 0) % 2;
+    g.fillStyle = '#f2c79b'; g.fillRect(x, y, 3, 3);
+    g.fillStyle = w.c; g.fillRect(x - 1, y + 3, 5, 4);
+    g.fillStyle = PAL.ink; g.fillRect(x - 1 + step, y + 7, 1, 2); g.fillRect(x + 2 - step, y + 7, 1, 2);
+  }
+}
+
+// ---------------------------------------------------------------- camera + drawing
+function fit() {
+  const r = cv.getBoundingClientRect();
+  const dpr = Math.min(devicePixelRatio || 1, 2);
+  cv.width = Math.round(r.width * dpr); cv.height = Math.round(r.height * dpr);
+  const s = Math.max(r.width / WORLD.w, r.height / WORLD.h) * (r.width < 700 ? 1.6 : 1.05);
+  cam.s = s; cam.min = Math.min(r.width / WORLD.w, r.height / WORLD.h); cam.max = 6;
+  cam.x = WORLD.w / 2 - r.width / s / 2; cam.y = 420 - r.height / s / 2;
+  clamp(); draw();
+}
+function clamp() {
+  const r = cv.getBoundingClientRect();
+  const vw = r.width / cam.s, vh = r.height / cam.s;
+  cam.x = vw >= WORLD.w ? (WORLD.w - vw) / 2 : Math.max(0, Math.min(WORLD.w - vw, cam.x));
+  cam.y = vh >= WORLD.h ? (WORLD.h - vh) / 2 : Math.max(0, Math.min(WORLD.h - vh, cam.y));
+}
+function infoOf(p) {
+  if (p.tier === 'house') return p.live;
+  return state.plots[p.id] || { state: 'free' };
+}
+const HOUSE_PLOTS = () => state.house.map((h) => ({ ...YARD.find((y) => y.id === h.id), tier: 'house', live: { state: 'live', ...h } }));
+let raf = 0;
+function draw() {
+  if (raf) return;
+  raf = requestAnimationFrame(frame);
+}
+function frame(now) {
+  raf = 0;
+  const dpr = cv.width / cv.getBoundingClientRect().width;
+  cx.setTransform(dpr * cam.s, 0, 0, dpr * cam.s, -cam.x * dpr * cam.s, -cam.y * dpr * cam.s);
+  cx.imageSmoothingEnabled = false;
+  cx.drawImage(bg, 0, 0);
+  if (!reduced) { // water shimmer
+    cx.fillStyle = PAL.water2;
+    for (let i = 0; i < 40; i++) { const x = (i * 97 + now / 40) % WORLD.w; cx.fillRect(x, WATER.y + 8 + ((i * 13) % 44), 10, 2); }
+  }
+  for (const p of PLOTS) drawPlot(cx, p, state.plots[p.id], now);
+  for (const h of HOUSE_PLOTS()) drawPlot(cx, h, h.live, now);
+  drawWalkers(cx, now);
+  const hl = (p, col) => { if (!p) return; cx.strokeStyle = col; cx.lineWidth = 2 / cam.s; cx.strokeRect(p.x - 1, p.y - 1, p.w + 2, p.h + 2); };
+  hl(hover, 'rgba(255,255,255,.9)'); hl(selected, '#ffd60a');
+  if (cam.s >= 2.2) { // names under live signs when zoomed in
+    cx.font = 'bold 6px ui-monospace, monospace'; cx.textAlign = 'center';
+    for (const p of [...PLOTS, ...HOUSE_PLOTS()]) {
+      const i = infoOf(p);
+      if (i?.state !== 'live' || p.tier === 'billboard') continue;
+      const t = (i.name || '').slice(0, 14), tw = cx.measureText(t).width + 4;
+      cx.fillStyle = 'rgba(43,45,66,.85)'; cx.fillRect(p.x + p.w / 2 - tw / 2, p.y + p.h + 1, tw, 8);
+      cx.fillStyle = '#fff'; cx.fillText(t, p.x + p.w / 2, p.y + p.h + 7);
+    }
+    cx.textAlign = 'start';
+  }
+  if (!reduced && !document.hidden && visible) draw();
+}
+let visible = true;
+new IntersectionObserver(([e]) => { visible = e.isIntersecting; if (visible) draw(); }).observe(cv);
+document.addEventListener('visibilitychange', () => { if (!document.hidden) draw(); });
+
+// ---------------------------------------------------------------- input: drag, pinch, wheel, tap, keyboard
+const pts = new Map();
+let drag = null, moved = 0, pinch = null;
+const toWorld = (cxp, cyp) => { const r = cv.getBoundingClientRect(); return { x: cam.x + (cxp - r.left) / cam.s, y: cam.y + (cyp - r.top) / cam.s }; };
+const hit = (w) => [...HOUSE_PLOTS(), ...PLOTS].find((p) => inRect(w.x, w.y, p, 2)) || null;
+function zoomAt(f, cxp, cyp) {
+  const before = toWorld(cxp, cyp);
+  cam.s = Math.max(cam.min, Math.min(cam.max, cam.s * f));
+  const r = cv.getBoundingClientRect();
+  cam.x = before.x - (cxp - r.left) / cam.s; cam.y = before.y - (cyp - r.top) / cam.s;
+  clamp(); draw();
+}
+cv.addEventListener('pointerdown', (e) => {
+  cv.setPointerCapture(e.pointerId);
+  pts.set(e.pointerId, { x: e.clientX, y: e.clientY });
+  if (pts.size === 1) { drag = { x: e.clientX, y: e.clientY, cx: cam.x, cy: cam.y }; moved = 0; }
+  if (pts.size === 2) { const [a, b] = [...pts.values()]; pinch = { d: Math.hypot(a.x - b.x, a.y - b.y), s: cam.s }; moved = 99; }
+});
+cv.addEventListener('pointermove', (e) => {
+  if (pts.has(e.pointerId)) pts.set(e.pointerId, { x: e.clientX, y: e.clientY });
+  if (pinch && pts.size === 2) {
+    const [a, b] = [...pts.values()];
+    const f = (pinch.s * Math.hypot(a.x - b.x, a.y - b.y) / pinch.d) / cam.s;
+    zoomAt(f, (a.x + b.x) / 2, (a.y + b.y) / 2);
+    return;
+  }
+  if (drag && pts.size === 1) {
+    moved = Math.max(moved, Math.hypot(e.clientX - drag.x, e.clientY - drag.y));
+    cam.x = drag.cx - (e.clientX - drag.x) / cam.s; cam.y = drag.cy - (e.clientY - drag.y) / cam.s;
+    clamp(); draw();
+    return;
+  }
+  if (e.pointerType === 'mouse') {
+    const h = hit(toWorld(e.clientX, e.clientY));
+    if (h !== hover) { hover = h; cv.style.cursor = h ? 'pointer' : 'grab'; draw(); }
+  }
+});
+const up = (e) => {
+  pts.delete(e.pointerId);
+  if (pts.size < 2) pinch = null;
+  if (pts.size === 0) {
+    if (drag && moved < 6) { const p = hit(toWorld(e.clientX, e.clientY)); select(p); }
+    drag = null;
+  }
+};
+cv.addEventListener('pointerup', up);
+cv.addEventListener('pointercancel', (e) => { pts.delete(e.pointerId); drag = null; pinch = null; });
+cv.addEventListener('wheel', (e) => { e.preventDefault(); zoomAt(Math.exp(-e.deltaY * 0.0015), e.clientX, e.clientY); }, { passive: false });
+document.getElementById('zin').onclick = () => { const r = cv.getBoundingClientRect(); zoomAt(1.4, r.left + r.width / 2, r.top + r.height / 2); };
+document.getElementById('zout').onclick = () => { const r = cv.getBoundingClientRect(); zoomAt(1 / 1.4, r.left + r.width / 2, r.top + r.height / 2); };
+cv.addEventListener('keydown', (e) => {
+  const step = 40 / cam.s, k = e.key;
+  if (k === 'ArrowLeft') cam.x -= step; else if (k === 'ArrowRight') cam.x += step; else if (k === 'ArrowUp') cam.y -= step; else if (k === 'ArrowDown') cam.y += step;
+  else if (k === '+' || k === '=') return zoomAt(1.25, ...centre()); else if (k === '-') return zoomAt(0.8, ...centre()); else return;
+  e.preventDefault(); clamp(); draw();
+});
+const centre = () => { const r = cv.getBoundingClientRect(); return [r.left + r.width / 2, r.top + r.height / 2]; };
+
+function focus(p) {
+  const r = cv.getBoundingClientRect();
+  cam.s = Math.max(cam.s, r.width < 700 ? 1.8 : 2);
+  cam.x = p.x + p.w / 2 - r.width / cam.s / 2; cam.y = p.y + p.h / 2 - r.height / cam.s / 2.6;
+  clamp(); draw();
+}
+
+// ---------------------------------------------------------------- panel
+const esc = (s) => String(s ?? '').replace(/[&<>"']/g, (c) => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' })[c]);
+function host(u) { try { return new URL(u).hostname.replace(/^www\./, ''); } catch { return ''; } }
+function select(p) {
+  selected = p; draw();
+  if (!p) { panel.hidden = true; return; }
+  const i = infoOf(p);
+  const tier = p.tier === 'house' ? null : TIERS[p.tier];
+  const where = p.tier === 'house' ? DISTRICTS.yard : DISTRICTS[p.district];
+  let html;
+  if (i.state === 'live') {
+    const logo = i.logo ? `<img src="${esc(i.logo.startsWith('/') ? BASE + i.logo : i.logo)}" alt="" width="56" height="56">` : `<span class="mono" style="background:${esc(i.colour)}">${esc((i.name || '?')[0])}</span>`;
+    html = `<div class="ph">${logo}<div><h3>${esc(i.name)}</h3><p>${esc(i.pitch)}</p></div></div>
+      <p class="meta">Plot ${esc(p.id)} · ${esc(tier ? tier.name : 'CyberMax house plot')} · ${esc(where)}${p.tier === 'house' ? ' · <b>one of CyberMax\'s own products</b>' : ''}${i.featured ? ' · <b class="feat">Featured</b>' : ''}</p>
+      <p class="row"><a class="btn" href="${BASE}/go/${esc(p.id)}" rel="nofollow ugc" target="_blank">Visit ${esc(host(i.url))}</a><a class="btn ghost" href="${BASE}/p/${esc(p.id)}">Share page</a></p>`;
+  } else if (i.state === 'reserved' || i.state === 'sold') {
+    html = `<h3>Plot ${esc(p.id)}: ${esc(tier.name)}</h3><p>${i.state === 'sold' ? 'Claimed. The owner is putting up their sign.' : 'Someone is checking out on this plot right now. Try a neighbour.'}</p><p class="meta">${esc(where)}</p>`;
+  } else {
+    const can = state.checkout;
+    html = `<h3>Plot ${esc(p.id)}: ${esc(tier.name)} · <span class="price">${usd(tier.price)}</span> <small>paid once</small></h3><p>${esc(tier.blurb)}</p>
+      <p class="meta">${esc(where)} · your logo, name, one-line pitch and link · share page + badge · real visit counts</p>
+      <p class="row">${can ? `<a class="btn" id="claim" href="${BASE}/buy/${esc(p.id)}?s=${encodeURIComponent(SRC)}">Claim plot ${esc(p.id)} for ${usd(tier.price)}</a>` : '<span class="btn disabled">Checkout opens soon</span>'}<a class="btn ghost" href="${BASE}/p/${esc(p.id)}">Plot page</a></p>
+      <p class="fine">Fixed price, no bidding, nobody can take it over. 14-day fix-or-refund if it doesn't work as described. <a href="${BASE}/terms/">Terms</a></p>`;
+  }
+  panel.innerHTML = `<button class="x" aria-label="Close" onclick="this.parentElement.hidden=true">×</button>${html}`;
+  panel.hidden = false;
+  history.replaceState(null, '', `?plot=${p.id}${location.hash}`);
+}
+
+// ---------------------------------------------------------------- lists below the map (featured strip, directory, stock)
+function lists() {
+  const live = [...PLOTS.map((p) => ({ p, i: state.plots[p.id] })).filter((x) => x.i?.state === 'live'), ...HOUSE_PLOTS().map((p) => ({ p, i: p.live }))];
+  live.sort((a, b) => (b.i.featured ? 1 : 0) - (a.i.featured ? 1 : 0) || (b.i.since || 0) - (a.i.since || 0));
+  const card = ({ p, i }) => `<li><button type="button" data-plot="${esc(p.id)}">${i.logo ? `<img src="${esc(i.logo.startsWith('/') ? BASE + i.logo : i.logo)}" alt="" width="28" height="28" loading="lazy">` : `<span class="mono" style="background:${esc(i.colour)}">${esc((i.name || '?')[0])}</span>`}<span><b>${esc(i.name)}</b><small>${esc(i.pitch)}</small></span>${p.tier === 'house' ? '<em>CyberMax</em>' : i.featured ? '<em class="feat">Featured</em>' : ''}</button></li>`;
+  const dir = document.getElementById('dir');
+  dir.innerHTML = live.map(card).join('');
+  const feat = live.filter((x) => x.i.featured);
+  document.getElementById('featured').innerHTML = feat.length ? feat.map(card).join('') : `<li class="empty">No featured makers yet. Own a plot? Feature it for ${usd(FEATURED.price)}/month.</li>`;
+  for (const t of Object.keys(TIERS)) {
+    const left = PLOTS.filter((p) => p.tier === t && !state.plots[p.id]).length;
+    const el = document.querySelector(`[data-left="${t}"]`);
+    if (el) el.textContent = `${left} of ${PLOTS.filter((p) => p.tier === t).length} free`;
+  }
+  const sold = Object.values(state.plots).filter((x) => x.state === 'live' || x.state === 'sold').length;
+  document.getElementById('count').textContent = sold ? `${sold} plot${sold === 1 ? '' : 's'} claimed so far` : 'Opening week: every plot is free to claim';
+}
+document.addEventListener('click', (e) => {
+  const b = e.target.closest('[data-plot]');
+  if (!b) return;
+  const p = [...HOUSE_PLOTS(), ...PLOTS].find((x) => x.id === b.dataset.plot);
+  if (p) { cv.scrollIntoView({ behavior: reduced ? 'auto' : 'smooth', block: 'center' }); focus(p); select(p); }
+});
+document.querySelectorAll('[data-pick]').forEach((b) => b.addEventListener('click', () => { // "pick a free X for me"
+  const free = PLOTS.filter((p) => p.tier === b.dataset.pick && !state.plots[p.id]);
+  if (!free.length) return;
+  const p = free[(Math.random() * Math.min(free.length, 6)) | 0];
+  cv.scrollIntoView({ behavior: reduced || innerWidth < 700 ? 'auto' : 'smooth', block: 'center' }); focus(p); select(p);
+}));
+
+// ---------------------------------------------------------------- boot
+async function load() {
+  try {
+    const r = await fetch(`${BASE}/api/town`, { cache: 'no-store' });
+    if (!r.ok) throw new Error(r.status);
+    const j = await r.json();
+    state.plots = j.plots || {}; state.house = j.house || []; state.checkout = j.checkout !== false;
+  } catch {
+    try { const j = await (await fetch('./house.json')).json(); state.house = j.house; } catch { /* map still works */ }
+  }
+  state.loaded = true;
+  lists(); draw();
+  const q = new URLSearchParams(location.search).get('plot');
+  const p = q && [...HOUSE_PLOTS(), ...PLOTS].find((x) => x.id === q);
+  if (p) { focus(p); select(p); }
+}
+drawBackground();
+addEventListener('resize', () => { fit(); });
+fit();
+load();
+window.__plotwren = { state, cam, select: (id) => select([...HOUSE_PLOTS(), ...PLOTS].find((x) => x.id === id)) }; // for tests and the demo recorder

e3a69b3cf2f5db7a1df9abcd5efda221.txt

@@ -0,0 +1 @@
+e3a69b3cf2f5db7a1df9abcd5efda221

house.json

@@ -0,0 +1,68 @@
+{
+ "house": [
+  {
+   "id": "Y1",
+   "name": "CyberMax Store",
+   "pitch": "Useful software, games and data tools from $5.",
+   "url": "https://cybermaxtools.com/store/",
+   "logo": "/seed/cybermax-store.png",
+   "colour": "#2e86ab"
+  },
+  {
+   "id": "Y2",
+   "name": "Shiftmoor",
+   "pitch": "Get an alert when any web page changes. Free for 3 pages.",
+   "url": "https://shiftmoor.cybermaxtools.com/",
+   "logo": "/seed/shiftmoor.png",
+   "colour": "#7b2cbf"
+  },
+  {
+   "id": "Y3",
+   "name": "Pricewick",
+   "pitch": "Track competitor prices and stock without spreadsheets.",
+   "url": "https://pricewick.cybermaxtools.com/",
+   "logo": "/seed/pricewick.png",
+   "colour": "#e4572e"
+  },
+  {
+   "id": "Y4",
+   "name": "Snipbare",
+   "pitch": "White-background product photos in your browser.",
+   "url": "https://snipbare.cybermaxtools.com/",
+   "logo": "/seed/cutout.png",
+   "colour": "#00a6a6"
+  },
+  {
+   "id": "Y5",
+   "name": "Ledgermoor",
+   "pitch": "Bank statement PDFs to Excel and QuickBooks CSV.",
+   "url": "https://ledgermoor.cybermaxtools.com/",
+   "logo": "/seed/ledgermoor.png",
+   "colour": "#29bf12"
+  },
+  {
+   "id": "Y6",
+   "name": "Citewren",
+   "pitch": "Check if AI search engines can find and cite your site.",
+   "url": "https://citewren.cybermaxtools.com/",
+   "logo": "/seed/citewren.png",
+   "colour": "#f3a712"
+  },
+  {
+   "id": "Y7",
+   "name": "Figurewell API",
+   "pitch": "Point-in-time SEC financials for quants and researchers.",
+   "url": "https://figurewell-api.cybermaxtools.com/",
+   "logo": "/seed/figurewell-api.png",
+   "colour": "#3d405b"
+  },
+  {
+   "id": "Y8",
+   "name": "Pathmoor",
+   "pitch": "A free daily path puzzle. New board every day.",
+   "url": "https://cybermaxtools.com/games/pathmoor/",
+   "logo": "/seed/pathmoor.png",
+   "colour": "#ff5d8f"
+  }
+ ]
+}

index.html

@@ -1,19 +1,116 @@
 <!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width,initial-scale=1,viewport-fit=cover">
+<title>Plotwren: put your product on the map from $5 | CyberMax maker town</title>
+<meta name="description" content="Plotwren is a pixel town for makers, indie devs and small businesses. Claim a plot, shop sign or billboard with your logo, pitch and link from $5, paid once. No bidding, no takeovers, real visit counts.">
+<link rel="canonical" href="https://plotwren.cybermaxtools.com/">
+<meta property="og:type" content="website">
+<meta property="og:url" content="https://plotwren.cybermaxtools.com/">
+<meta property="og:title" content="Plotwren: put your product on the map from $5">
+<meta property="og:description" content="A pixel town where makers claim a stall, shop, billboard or landmark with their logo and link. Fixed prices, paid once.">
+<meta property="og:image" content="https://plotwren.cybermaxtools.com/brand/og.png">
+<meta name="twitter:card" content="summary_large_image">
+<meta name="theme-color" content="#2b2d42">
+<link rel="icon" href="/icon.svg">
+<link rel="stylesheet" href="style.css">
+<link rel="preload" href="town.js" as="script" crossorigin>
+<script type="application/ld+json">
+{"@context":"https://schema.org","@graph":[
+ {"@type":"WebApplication","name":"Plotwren","url":"https://plotwren.cybermaxtools.com/","applicationCategory":"BusinessApplication","operatingSystem":"Any (web browser)",
+  "description":"A pixel town map where makers, indie developers and small businesses buy a fixed-price plot with their logo, one-line pitch and link.",
+  "publisher":{"@type":"Organization","name":"CyberMax","url":"https://cybermaxtools.com/"},
+  "offers":[
+   {"@type":"Offer","name":"Market stall","price":"5.00","priceCurrency":"USD"},
+   {"@type":"Offer","name":"Shop","price":"19.00","priceCurrency":"USD"},
+   {"@type":"Offer","name":"Billboard","price":"49.00","priceCurrency":"USD"},
+   {"@type":"Offer","name":"Landmark","price":"149.00","priceCurrency":"USD"}]},
+ {"@type":"VideoObject","name":"Plotwren: claim a plot in the CyberMax maker town","description":"A quick tour of the Plotwren pixel town: pan the map, pick a free plot and open a live sign.","thumbnailUrl":"https://cybermaxtools.com/media/demos/plotwren/poster.jpg","contentUrl":"https://cybermaxtools.com/media/demos/plotwren/demo-16x9.mp4","duration":"PT17S","uploadDate":"2026-10-09"},
+ {"@type":"FAQPage","mainEntity":[
+  {"@type":"Question","name":"Can someone take over my plot?","acceptedAnswer":{"@type":"Answer","text":"No. Every plot has one fixed price and is sold once. There is no bidding, no outbid button and no resale."}},
+  {"@type":"Question","name":"How long does my plot stay up?","acceptedAnswer":{"@type":"Answer","text":"For as long as Plotwren runs, and at least 12 months. If we ever closed the town sooner, we would refund the unused share of those 12 months."}},
+  {"@type":"Question","name":"Are the visit counts real?","acceptedAnswer":{"@type":"Answer","text":"Yes. Bots, link previews and prefetches are not counted, and each visitor counts once a day per plot."}}]}
+]}
+</script>
+</head>
+<body>
+<header class="bar">
+  <a class="brand" href="/"><img src="icon.svg" alt="" width="28" height="28"> Plotwren</a>
+  <span class="tag">the CyberMax maker town</span>
+  <a class="btn small" href="#plots">Claim a plot</a>
+</header>
+
+<section class="hero">
+  <div class="copy">
+    <h1>Put your product on the map, from $5</h1>
+    <p class="lead">A pixel town for makers, indie devs and small businesses. Claim a stall, shop, billboard or landmark with your <b>logo, one-line pitch and link</b>. Paid once. Nobody can outbid you or take it over.</p>
+    <p class="row"><button class="btn" type="button" data-pick="stall">Find me a $5 stall</button><a class="btn ghost" href="#plots">See all plots</a></p>
+    <p class="fine" id="count">Loading the town…</p>
+  </div>
+  <video class="demo" src="https://cybermaxtools.com/media/demos/plotwren/demo.webm" poster="https://cybermaxtools.com/media/demos/plotwren/poster.jpg" autoplay muted loop playsinline preload="metadata" width="480" height="270" aria-label="17-second tour of the Plotwren town"><source src="https://cybermaxtools.com/media/demos/plotwren/demo.webm" type="video/webm"><source src="https://cybermaxtools.com/media/demos/plotwren/demo-16x9.mp4" type="video/mp4"></video>
+</section>
+
+<section class="mapwrap" aria-label="Town map">
+  <canvas id="town" tabindex="0" aria-label="Plotwren town map. Drag to move, pinch or scroll to zoom, tap a plot to open it. A list of every plot is below the map."></canvas>
+  <div class="zoom"><button id="zin" type="button" aria-label="Zoom in">+</button><button id="zout" type="button" aria-label="Zoom out">−</button></div>
+  <div class="legend"><span><i class="lg free"></i>Free plot</span><span><i class="lg built"></i>Claimed</span><span><i class="lg feat"></i>Featured</span></div>
+  <aside id="panel" class="panel" hidden aria-live="polite"></aside>
+</section>
+
+<section class="wrap">
+  <h2>Featured makers</h2>
+  <ul id="featured" class="cards"></ul>
+</section>
+
+<section class="wrap" id="plots">
+  <h2>Pick your plot</h2>
+  <p class="lead">One fixed price per size, paid once. Your sign shows your logo, name, one-line pitch and link, with its own share page, an "I'm on Plotwren" badge and real visit counts.</p>
+  <div class="tiers">
+    <article class="tier"><h3>Market stall</h3><p class="price">$5 <small>once</small></p><p>A stall on Market Row. The easiest way into town.</p><p class="left" data-left="stall"></p><button class="btn" type="button" data-pick="stall">Pick a free stall</button></article>
+    <article class="tier"><h3>Shop</h3><p class="price">$19 <small>once</small></p><p>A shop on Maker Street with a big sign for your logo.</p><p class="left" data-left="shop"></p><button class="btn" type="button" data-pick="shop">Pick a free shop</button></article>
+    <article class="tier hot"><h3>Billboard</h3><p class="price">$49 <small>once</small></p><p>Launch Boulevard, the road everyone crosses. Your name in big letters.</p><p class="left" data-left="billboard"></p><button class="btn" type="button" data-pick="billboard">Pick a free billboard</button></article>
+    <article class="tier"><h3>Landmark</h3><p class="price">$149 <small>once</small></p><p>One of only four towers on Plotwren Square, the first thing visitors see.</p><p class="left" data-left="landmark"></p><button class="btn" type="button" data-pick="landmark">Pick a free landmark</button></article>
+  </div>
+  <p class="fine">Optional: <b>Featured, $9/month</b> pins your plot to the Featured strip, adds a glowing outline on the map and lists you first. Cancel any time. Prices in USD; tax, if any, is shown at checkout.</p>
+</section>
+
+<section class="wrap">
+  <h2>How it works</h2>
+  <ol class="steps">
+    <li><b>Pick a free plot</b> on the map (or let us pick one for you).</li>
+    <li><b>Pay once</b> with Stripe. The plot is held for you while you check out.</li>
+    <li><b>Add your sign</b>: name, one-line pitch, link and logo, from your private edit link. Most signs go live in seconds.</li>
+    <li><b>Share it</b>: your plot has its own page, a badge for your site and real visit counts.</li>
+  </ol>
+</section>
+
+<section class="wrap">
+  <h2>Everyone in town</h2>
+  <p class="fine">Plots marked CyberMax are our own products.</p>
+  <ul id="dir" class="cards"></ul>
+</section>
+
+<section class="wrap faq">
+  <h2>Questions</h2>
+  <details><summary>Can someone take over my plot?</summary><p>No. Each plot has one fixed price and is sold once. There's no bidding, no "outbid" button and no resale.</p></details>
+  <details><summary>How long does my plot stay up?</summary><p>For as long as Plotwren runs, and at least 12 months. If we ever closed the town sooner, we'd refund the unused share of those 12 months.</p></details>
+  <details><summary>Can I change my sign later?</summary><p>Yes, as often as you like, from your private edit link. Each edit is checked automatically and most go live in seconds.</p></details>
+  <details><summary>What isn't allowed?</summary><p>Adult content, illegal goods or services, hate, scams, malware or phishing, and links that hide where they go (shorteners). Every sign is checked automatically and borderline ones get a quick human look. See the <a href="/terms/">terms</a>.</p></details>
+  <details><summary>Are the visit counts real?</summary><p>Yes. We don't count bots, link previews or prefetches, and each visitor counts once a day per plot. We don't sell traffic or invent numbers.</p></details>
+  <details><summary>What if it doesn't work for me?</summary><p>14-day fix-or-refund: if your plot doesn't work as described, tell us and we'll fix it or refund you.</p></details>
+  <details><summary>Why not a launch directory?</summary><p>Launch days last a day. A plot stays on the map, keeps its share page and badge, and costs less than one featured week on most directories.</p></details>
+</section>
+
+<section class="wrap cta">
+  <h2>Your sign could be up in two minutes</h2>
+  <p class="row"><button class="btn" type="button" data-pick="stall">Claim a $5 stall</button><button class="btn ghost" type="button" data-pick="shop">Claim a $19 shop</button></p>
+  <p class="fine">Also from CyberMax: <a href="https://cybermaxtools.com/store/?s=plotwren">the CyberMax Store</a>, <a href="https://citewren.cybermaxtools.com/?s=plotwren">Citewren</a> (can AI search cite your site?) and <a href="https://shiftmoor.cybermaxtools.com/?s=plotwren">Shiftmoor</a> (watch competitor pages).</p>
+</section>
+
+<div class="buybar"><span>Plots from <b>$5</b>, paid once</span><button class="btn small" type="button" data-pick="stall">Claim one</button></div>
+
+<footer class="foot"><a href="/terms/">Terms &amp; refunds</a> · <a href="/llms.txt">llms.txt</a> · <a href="https://cybermaxtools.com/?s=plotwren">CyberMax</a> · © 2026 CyberMax</footer>
+<script type="module" src="app.js"></script>
+</body>
 </html>

llms.txt

@@ -0,0 +1,23 @@
+# Plotwren
+
+> Plotwren is the CyberMax maker town: a pixel town map in the browser where makers, indie developers and small businesses claim a fixed-price plot that shows their logo, name, one-line pitch and link. Plots are sold once at a fixed price; there is no bidding, takeover or resale.
+
+## Prices (USD, paid once)
+- Market stall: $5 (Market Row)
+- Shop: $19 (Maker Street)
+- Billboard: $49 (Launch Boulevard)
+- Landmark: $149 (Plotwren Square, four in total)
+- Optional Featured upgrade: $9/month (Featured strip, glowing outline, first in the directory; cancel any time)
+
+## How it works
+1. Pick a free plot on the map at https://plotwren.cybermaxtools.com/ (or open /buy/<plot id>, e.g. /buy/M001).
+2. Pay with Stripe Checkout; the plot is held for 30 minutes while you pay.
+3. Add your sign from the private edit link shown after checkout. Every edit is checked automatically (text, link, image); most go live in seconds.
+4. Share your plot page (/p/<plot id>) and badge (/badge/<plot id>.svg). Visit counts are real visitors only.
+
+## Pages
+- [Town map](https://plotwren.cybermaxtools.com/): the live pixel town and plot directory
+- [Terms and refunds](https://plotwren.cybermaxtools.com/terms/): content rules, 14-day fix-or-refund
+- [Town data (JSON)](https://plotwren.cybermaxtools.com/api/town): live plots, tiers and prices
+
+Plots marked CyberMax are CyberMax's own products. © 2026 CyberMax.

robots.txt

@@ -0,0 +1,10 @@
+User-agent: *
+Allow: /
+Disallow: /buy/
+Disallow: /welcome
+Disallow: /edit/
+Disallow: /go/
+Disallow: /admin/
+Disallow: /api/
+
+Sitemap: https://plotwren.cybermaxtools.com/sitemap.xml

style.css

@@ -1,28 +1,101 @@
-body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
-}
-
-h1 {
-	font-size: 16px;
-	margin-top: 0;
-}
-
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
-}
-
-.card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
-}
-
-.card p:last-child {
-	margin-bottom: 0;
+/* Plotwren. © 2026 CyberMax. All rights reserved. */
+:root { --ink: #2b2d42; --paper: #fff8e7; --grass: #8fd16a; --accent: #e4572e; --gold: #ffd60a; --muted: #5c5f73; --line: #e6dcc6; --card: #fffdf6; }
+* { box-sizing: border-box; }
+html { -webkit-text-size-adjust: 100%; }
+body { margin: 0; font: 16px/1.5 system-ui, -apple-system, Segoe UI, Roboto, sans-serif; color: var(--ink); background: var(--paper); }
+a { color: #1d5f8a; }
+h1, h2, h3 { font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; letter-spacing: -0.02em; line-height: 1.15; }
+h1 { font-size: clamp(28px, 5vw, 44px); margin: 0 0 10px; }
+h2 { font-size: 24px; margin: 32px 0 10px; }
+.bar { display: flex; align-items: center; gap: 12px; padding: 10px 16px; background: var(--ink); color: #fff; position: sticky; top: 0; z-index: 5; }
+.bar .brand { display: flex; align-items: center; gap: 8px; color: #fff; text-decoration: none; font: 700 18px ui-monospace, monospace; }
+.bar .brand img { image-rendering: pixelated; }
+.bar .tag { color: #c9f2b0; font-size: 13px; flex: 1; }
+.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 10px 16px; border: 3px solid var(--ink); background: var(--accent); color: #fff; font: 700 15px ui-monospace, monospace; text-decoration: none; cursor: pointer; box-shadow: 3px 3px 0 var(--ink); border-radius: 0; }
+.btn:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--ink); }
+.btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }
+.btn.ghost { background: #fff; color: var(--ink); }
+.btn.small { min-height: 36px; padding: 6px 12px; font-size: 13px; box-shadow: 2px 2px 0 #000; border-color: #000; }
+.btn.disabled { background: #bbb; cursor: not-allowed; }
+.row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
+.lead { font-size: 18px; color: #3a3d55; max-width: 62ch; }
+.fine { font-size: 13px; color: var(--muted); }
+.hero { padding: 22px 16px 8px; max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: center; }
+.hero .demo { width: 400px; max-width: 100%; height: auto; aspect-ratio: 16 / 9; border: 3px solid var(--ink); box-shadow: 4px 4px 0 var(--ink); background: var(--grass); }
+.mapwrap { position: relative; height: min(68vh, 640px); min-height: 380px; margin: 8px auto 0; max-width: 1400px; border-top: 4px solid var(--ink); border-bottom: 4px solid var(--ink); background: var(--grass); }
+#town { display: block; width: 100%; height: 100%; touch-action: none; cursor: grab; image-rendering: pixelated; outline: none; }
+#town:focus-visible { box-shadow: inset 0 0 0 3px var(--gold); }
+.zoom { position: absolute; right: 12px; top: 12px; display: flex; flex-direction: column; gap: 6px; }
+.zoom button { width: 44px; height: 44px; font: 700 22px ui-monospace, monospace; background: #fff; border: 3px solid var(--ink); box-shadow: 2px 2px 0 var(--ink); cursor: pointer; color: var(--ink); }
+.legend { position: absolute; left: 12px; top: 12px; display: flex; gap: 10px; flex-wrap: wrap; background: rgba(255, 248, 231, .92); border: 2px solid var(--ink); padding: 4px 8px; font-size: 12px; }
+.lg { display: inline-block; width: 12px; height: 12px; margin-right: 4px; vertical-align: -2px; border: 1px solid var(--ink); }
+.lg.free { background: #c99a5b; } .lg.built { background: #2e86ab; } .lg.feat { background: #fff; outline: 2px solid var(--gold); }
+.panel { position: absolute; right: 12px; bottom: 12px; width: min(380px, calc(100% - 24px)); background: var(--card); border: 3px solid var(--ink); box-shadow: 4px 4px 0 var(--ink); padding: 14px 16px; }
+.panel h3 { margin: 0 0 6px; font-size: 18px; padding-right: 28px; }
+.panel .x { position: absolute; right: 6px; top: 4px; width: 36px; height: 36px; border: 0; background: none; font-size: 26px; cursor: pointer; color: var(--ink); }
+.panel .ph { display: flex; gap: 12px; align-items: center; }
+.panel .ph img, .mono { width: 56px; height: 56px; border: 2px solid var(--ink); object-fit: contain; background: #fff; flex: none; }
+.mono { display: inline-flex; align-items: center; justify-content: center; color: #fff; font: 700 26px ui-monospace, monospace; }
+.panel p { margin: 6px 0; }
+.meta { font-size: 13px; color: var(--muted); }
+.price { color: var(--accent); font: 700 1.1em ui-monospace, monospace; }
+.feat { color: #9a7b00; font-style: normal; }
+.wrap { max-width: 1100px; margin: 0 auto; padding: 0 16px; }
+.cards { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
+.cards button { width: 100%; display: flex; gap: 10px; align-items: center; text-align: left; background: var(--card); border: 2px solid var(--ink); padding: 8px 10px; cursor: pointer; font: inherit; color: inherit; min-height: 56px; }
+.cards button:hover { background: #fff; }
+.cards img, .cards .mono { width: 32px; height: 32px; font-size: 16px; }
+.cards span { display: flex; flex-direction: column; min-width: 0; flex: 1; }
+.cards small { color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.cards em { font-size: 11px; font-style: normal; background: var(--ink); color: #fff; padding: 1px 6px; }
+.cards em.feat { background: var(--gold); color: var(--ink); }
+.cards .empty { color: var(--muted); font-size: 14px; }
+.tiers { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
+.tier { background: var(--card); border: 3px solid var(--ink); padding: 14px; box-shadow: 4px 4px 0 var(--ink); display: flex; flex-direction: column; }
+.tier.hot { background: #fff4c2; }
+.tier h3 { margin: 0; }
+.tier .price { font-size: 30px; margin: 6px 0; }
+.tier .price small { font-size: 13px; color: var(--muted); }
+.tier .left { font-size: 13px; color: var(--muted); margin-top: auto; }
+.steps li { margin: 6px 0; }
+.faq details { border-bottom: 2px solid var(--line); padding: 10px 0; }
+.faq summary { cursor: pointer; font-weight: 700; }
+.cta { text-align: center; padding-bottom: 30px; }
+.cta .row { justify-content: center; }
+.foot { text-align: center; font-size: 13px; color: var(--muted); padding: 24px 16px 90px; }
+.buybar { display: none; }
+@media (max-width: 700px) {
+  .bar .tag { display: none; }
+  .bar .brand { flex: 1; }
+  .mapwrap { height: 62vh; }
+  .hero { padding: 14px 16px 4px; grid-template-columns: 1fr; gap: 8px; }
+  .hero .demo { width: 100%; max-height: 190px; }
+  .hero h1 { font-size: 26px; }
+  .hero .lead { font-size: 15px; margin: 6px 0; }
+  .hero .row .ghost { display: none; }
+  .hero .fine { margin: 6px 0; }
+  .panel { left: 8px; right: 8px; bottom: 8px; width: auto; max-height: 60%; overflow: auto; }
+  .legend { font-size: 11px; }
+  .buybar { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 6; gap: 10px; align-items: center; justify-content: space-between; padding: 8px 16px calc(8px + env(safe-area-inset-bottom)); background: var(--ink); color: #fff; }
 }
+/* sub pages (share, edit, terms) */
+body.sub .wrap { padding-top: 20px; padding-bottom: 30px; }
+.card { background: var(--card); border: 3px solid var(--ink); padding: 16px; margin: 16px 0; box-shadow: 4px 4px 0 var(--ink); }
+.plotcard { display: flex; gap: 18px; align-items: flex-start; border-top: 14px solid var(--c, var(--accent)); }
+.plotcard .sign img, .plotcard .sign .mono { width: 96px; height: 96px; font-size: 44px; border: 3px solid var(--ink); background: #fff; object-fit: contain; }
+.plotcard .sign .mono { background: var(--c); }
+.form label { display: block; margin: 10px 0; font-weight: 600; }
+.form input[type=text], .form input:not([type]), .form input[type=url], .form input[type=file], textarea { display: block; width: 100%; margin-top: 4px; padding: 10px; border: 2px solid var(--ink); font: inherit; background: #fff; }
+.form fieldset { border: 2px solid var(--line); margin: 10px 0; display: flex; gap: 8px; flex-wrap: wrap; }
+.form .row { display: flex; gap: 8px; align-items: center; font-weight: 400; }
+.sw { position: relative; display: inline-block; margin: 0 !important; }
+.sw input { position: absolute; opacity: 0; }
+.sw span { display: block; width: 34px; height: 34px; background: var(--c); border: 3px solid var(--ink); }
+.sw input:checked + span { outline: 3px solid var(--gold); outline-offset: 2px; }
+.sw input:focus-visible + span { outline: 3px solid #1d5f8a; }
+.note { padding: 10px 14px; border: 3px solid var(--ink); margin: 12px 0; }
+.note.ok { background: #d8f5c4; } .note.warn { background: #fff1b8; } .note.bad { background: #ffd6cc; }
+.ok { color: #1e7a12; }
+.center { text-align: center; }
+.terms h2 { font-size: 20px; }
+@media (max-width: 700px) { .plotcard { flex-direction: column; } }

terms/index.html

@@ -0,0 +1,57 @@
+<!doctype html>
+<html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">
+<title>Terms and refund policy · Plotwren</title>
+<meta name="description" content="Plotwren terms: what you buy, how long a plot stays up, content rules, moderation and the 14-day fix-or-refund policy.">
+<link rel="canonical" href="https://plotwren.cybermaxtools.com/terms/"><link rel="icon" href="/icon.svg"><link rel="stylesheet" href="/style.css"></head>
+<body class="sub"><header class="bar"><a class="brand" href="/"><img src="/icon.svg" alt="" width="28" height="28"> Plotwren</a><span class="tag">the CyberMax maker town</span><a class="btn small" href="/#plots">Claim a plot</a></header>
+<main class="wrap terms">
+<h1>Terms and refund policy</h1>
+<p class="fine">Last updated 9 October 2026. Plotwren is run by CyberMax. Questions: <a href="mailto:cybermax.tools@gmail.com">cybermax.tools@gmail.com</a>.</p>
+
+<h2>1. What you buy</h2>
+<p>A plot is a display spot on the Plotwren town map that shows the name, one-line pitch, link and logo you provide, plus a share page, a badge and visit counts. It is an advertising placement on our website. It is not land, property, a token or an investment, and it has no resale value. You can't resell or transfer it through Plotwren, and nobody can buy it away from you.</p>
+<ul>
+<li>Market stall: $5, paid once</li>
+<li>Shop: $19, paid once</li>
+<li>Billboard: $49, paid once</li>
+<li>Landmark: $149, paid once</li>
+<li>Featured (optional, for a plot you own): $9 a month, cancel any time from your Stripe receipt or by emailing us; it stays on until the end of the paid month</li>
+</ul>
+<p>Prices are in US dollars. Any sales tax or VAT is shown at checkout. Payments are processed by Stripe; we never see your card number.</p>
+
+<h2>2. How long a plot stays up</h2>
+<p>Your plot stays on the map for as long as Plotwren runs, and at least 12 months from purchase. If we ever closed Plotwren within those 12 months, we would refund the unused share of the 12 months, pro rata.</p>
+
+<h2>3. Your content</h2>
+<p>You can change your sign as often as you like from your private edit link. Keep that link private: anyone with it can edit your plot. If you lose it, email us from the address on your Stripe receipt and we'll resend it.</p>
+<p>You confirm that you have the right to use the name, logo and link you submit, and you give CyberMax permission to show them on Plotwren, on your plot's share page and badge, and in images of the town that promote Plotwren.</p>
+
+<h2>4. Content rules and moderation</h2>
+<p>Every submission is checked automatically before it appears: text limits, a banned-words list, the link (https only, a real public website, no link shorteners, no IP addresses, no hidden credentials, and a check against a public malware list when available) and the image (PNG, JPEG, WebP or GIF only, up to 96 KB and 1024×1024 px). Borderline submissions wait for a quick human review. We refuse, and may remove at any time:</p>
+<ul>
+<li>sexual or adult content;</li>
+<li>illegal goods or services, including drugs, weapons, counterfeit goods, stolen data and hacking services;</li>
+<li>hate, harassment or violence;</li>
+<li>scams, phishing, malware, "guaranteed returns" and get-rich-quick schemes;</li>
+<li>content that infringes someone else's trademark or copyright, or impersonates another person or company;</li>
+<li>links that redirect somewhere other than what the sign says.</li>
+</ul>
+<p>If your edit is refused, your previous sign stays up and you can submit a new one. If a plot breaks these rules after it goes live (for example, the linked site changes), we may hide the sign until it's fixed. If we remove a plot for a serious breach (illegal content, malware, scams), we don't refund it.</p>
+
+<h2>5. Visit counts</h2>
+<p>We show real visits only: page views of your share page and clicks from Plotwren to your link. Bots, link previews and prefetches aren't counted, and each visitor counts once a day per plot. We store a daily, salted hash for this, never your visitors' IP addresses. We don't promise any number of visits or sales.</p>
+
+<h2>6. Refunds: 14-day fix-or-refund</h2>
+<p>If your plot doesn't work as described (for example, your sign won't publish or your link doesn't work from the map) tell us within 14 days of purchase. We'll fix it, or refund you in full if we can't. If two people pay for the same plot at the same moment, the second buyer gets the nearest free plot of the same size; if none is left, we refund them in full. A refunded plot goes back on sale.</p>
+<p>Featured renews monthly until you cancel. Cancelling stops the next charge; the current month isn't refunded unless Featured didn't work as described.</p>
+
+<h2>7. CyberMax house plots</h2>
+<p>Plots in CyberMax Yard, and any plot marked "CyberMax", show CyberMax's own products. They are not customers and are never for sale.</p>
+
+<h2>8. Liability</h2>
+<p>Plotwren is provided as is. We're not responsible for the websites you or other makers link to. To the extent the law allows, our total liability for any plot is limited to what you paid for it.</p>
+
+<p><a class="btn" href="/#plots">Pick a plot</a></p>
+</main>
+<footer class="foot"><a href="/">Town map</a> · © 2026 CyberMax</footer>
+</body></html>

town.js

@@ -0,0 +1,72 @@
+// Plotwren town layout: one fixed map, every plot has a fixed tier and a fixed price. Pure data, shared by the Worker and
+// the browser (build copies it to web/town.js). No auctions, no takeovers, no resale: a plot is sold once at its tier price.
+// © 2026 CyberMax. All rights reserved.
+
+export const WORLD = { w: 1536, h: 1024, tile: 16 };
+
+// Prices in US cents. Featured is an optional monthly upgrade for any sold plot.
+export const TIERS = {
+  stall: { name: 'Market stall', price: 500, w: 32, h: 32, blurb: 'A pixel stall on Market Row with your logo, name and link.' },
+  shop: { name: 'Shop', price: 1900, w: 48, h: 48, blurb: 'A shop on Maker Street with a big sign, your logo and a one-line pitch.' },
+  billboard: { name: 'Billboard', price: 4900, w: 64, h: 48, blurb: 'A billboard on Launch Boulevard, the road everyone crosses.' },
+  landmark: { name: 'Landmark', price: 14900, w: 96, h: 96, blurb: 'One of four landmark towers on Plotwren Square, the centre of town.' },
+};
+export const FEATURED = { name: 'Featured', price: 900, interval: 'month', blurb: 'Pinned to the Featured strip, a glowing outline on the map and first in the directory. Cancel any time.' };
+
+export const DISTRICTS = {
+  square: 'Plotwren Square',
+  boulevard: 'Launch Boulevard',
+  street: 'Maker Street',
+  market: 'Market Row',
+  yard: 'CyberMax Yard',
+};
+
+// Roads (world px rectangles) drawn by the renderer; plots never overlap them.
+export const ROADS = [
+  { x: 0, y: 448, w: 1536, h: 48 },   // Launch Boulevard (east-west)
+  { x: 744, y: 0, w: 48, h: 1024 },   // North-south avenue
+  { x: 64, y: 240, w: 640, h: 32 },   // Maker Street (west)
+  { x: 832, y: 240, w: 640, h: 32 },  // Maker Street (east)
+  { x: 64, y: 704, w: 640, h: 24 },   // Market Row lane (west)
+  { x: 832, y: 704, w: 640, h: 24 },  // Market Row lane (east)
+];
+export const WATER = { x: 0, y: 960, w: 1536, h: 64 };
+export const FOUNTAIN = { x: 744, y: 448, w: 48, h: 48 };
+
+const pad = (n, l = 2) => String(n).padStart(l, '0');
+
+function build() {
+  const plots = [];
+  const add = (id, tier, district, x, y) => plots.push({ id, tier, district, x, y, w: TIERS[tier].w, h: TIERS[tier].h });
+  // Plotwren Square: four landmarks around the fountain crossing.
+  add('L1', 'landmark', 'square', 636, 336); add('L2', 'landmark', 'square', 804, 336);
+  add('L3', 'landmark', 'square', 636, 508); add('L4', 'landmark', 'square', 804, 508);
+  // Launch Boulevard: 6 billboards each side of the square, north side of the road.
+  let b = 1;
+  for (let i = 0; i < 6; i++) add(`B${pad(b++)}`, 'billboard', 'boulevard', 72 + i * 92, 392);
+  for (let i = 0; i < 6; i++) add(`B${pad(b++)}`, 'billboard', 'boulevard', 912 + i * 92, 392);
+  // Maker Street: two rows of shops either side of each half of the street.
+  let s = 1;
+  for (const x0 of [72, 840]) {
+    for (let i = 0; i < 10; i++) add(`H${pad(s++)}`, 'shop', 'street', x0 + i * 62, 184);
+    for (let i = 0; i < 10; i++) add(`H${pad(s++)}`, 'shop', 'street', x0 + i * 62, 280);
+  }
+  // Market Row: stalls in two rows either side of each lane, south of the boulevard.
+  let m = 1;
+  for (const x0 of [72, 840]) {
+    for (const y of [664, 736, 776]) for (let i = 0; i < 16; i++) add(`M${pad(m++, 3)}`, 'stall', 'market', x0 + i * 39, y);
+  }
+  return plots;
+}
+
+// CyberMax Yard: the house plots, north-west corner, never for sale (CyberMax's own products, clearly labelled).
+export const YARD = [
+  { id: 'Y1', x: 72, y: 56, w: 64, h: 64 }, { id: 'Y2', x: 152, y: 56, w: 64, h: 64 }, { id: 'Y3', x: 232, y: 56, w: 64, h: 64 },
+  { id: 'Y4', x: 312, y: 56, w: 64, h: 64 }, { id: 'Y5', x: 392, y: 56, w: 64, h: 64 }, { id: 'Y6', x: 472, y: 56, w: 64, h: 64 },
+  { id: 'Y7', x: 552, y: 56, w: 64, h: 64 }, { id: 'Y8', x: 632, y: 56, w: 64, h: 64 },
+];
+
+export const PLOTS = build();
+export const PLOT_BY_ID = Object.fromEntries(PLOTS.map((p) => [p.id, p]));
+export const priceOf = (id) => TIERS[PLOT_BY_ID[id]?.tier]?.price ?? null;
+export const usd = (cents) => `$${(cents / 100).toFixed(cents % 100 ? 2 : 0)}`;