pf2e-spellbook 1.0.0

package/src/icon.svg

@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" role="img" aria-label="Spellbook">
+  <rect width="512" height="512" rx="104" fill="#231710"/>
+  <g fill="none" stroke="#e0b252" stroke-width="22" stroke-linejoin="round" stroke-linecap="round">
+    <path d="M256 152 C220 128 168 128 130 146 L130 372 C168 354 220 354 256 380 C292 354 344 354 382 372 L382 146 C344 128 292 128 256 152 Z"/>
+    <line x1="256" y1="152" x2="256" y2="380"/>
+  </g>
+  <path d="M366 96 l12 30 30 12 -30 12 -12 30 -12 -30 -30 -12 30 -12 z" fill="#f4ead8"/>
+</svg>

package/src/manifest.webmanifest

@@ -0,0 +1,14 @@
+{
+  "name": "PF2e Spellbook",
+  "short_name": "Spellbook",
+  "description": "Interactive Pathfinder 2e spellbook — prepare, browse, and track your spells offline.",
+  "start_url": ".",
+  "scope": ".",
+  "display": "standalone",
+  "orientation": "portrait",
+  "background_color": "#1b130c",
+  "theme_color": "#2b1d12",
+  "icons": [
+    { "src": "icon.svg", "sizes": "any", "type": "image/svg+xml", "purpose": "any maskable" }
+  ]
+}

package/src/styles.css

@@ -0,0 +1,353 @@
+:root{
+  --bg:#1b130c;
+  --panel:#2b1d12;
+  --panel2:#33271a;
+  --ink:#f4ead8;
+  --muted:#c9b79a;
+  --gold:#e0b252;
+  --gold-dim:#9c7a36;
+  --heal:#6fc28a;
+  --harm:#c9657a;
+  --line:#4a3a26;
+  --accent:#7fb0d6;
+  --radius:16px;
+  --tap:#3c2c1b;
+}
+*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
+html,body{margin:0;padding:0;}
+body{
+  background:var(--bg);
+  color:var(--ink);
+  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
+  font-size:19px;
+  line-height:1.5;
+  padding-bottom:84px; /* room for nav */
+  -webkit-text-size-adjust:100%;
+}
+h1,h2,h3{margin:0 0 .4em;line-height:1.2;}
+h1{font-size:1.5rem;color:var(--gold);}
+h2{font-size:1.25rem;color:var(--gold);}
+p{margin:.4em 0;}
+.wrap{max-width:560px;margin:0 auto;padding:16px 14px;}
+.hide{display:none !important;}
+
+/* ---- Header ---- */
+header.top{
+  background:linear-gradient(180deg,#3a2715,#241810);
+  border-bottom:2px solid var(--gold-dim);
+  padding:14px 16px;
+  position:sticky;top:0;z-index:20;
+}
+header.top h1{margin:0;font-size:1.35rem;}
+header.top .sub{color:var(--muted);font-size:.9rem;}
+.statbar{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap;}
+.stat{
+  background:var(--panel2);border:1px solid var(--gold-dim);
+  border-radius:12px;padding:6px 12px;flex:1;min-width:90px;text-align:center;
+}
+.stat .lbl{font-size:.72rem;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;}
+.stat .val{font-size:1.4rem;font-weight:700;color:var(--gold);}
+
+/* ---- Cards ---- */
+.card{
+  background:var(--panel);
+  border:1px solid var(--line);
+  border-radius:var(--radius);
+  padding:16px;margin:14px 0;
+  box-shadow:0 2px 0 rgba(0,0,0,.3);
+}
+.card.rank0{border-left:6px solid #b58fd6;}
+.card.rank1{border-left:6px solid #7fb0d6;}
+.card.rank2{border-left:6px solid #6f9c8f;}
+.card.rank3{border-left:6px solid #d6a86f;}
+.card.rank4{border-left:6px solid #d68f8f;}
+.card.rank5{border-left:6px solid #b0d67f;}
+.card.rank6{border-left:6px solid #d6cf6f;}
+.card.rank7{border-left:6px solid #6fb6d6;}
+.card.rank8{border-left:6px solid #c98fd6;}
+.card.rank9{border-left:6px solid #d6a0c0;}
+.card.rank10{border-left:6px solid var(--gold);}
+.card.heal{border-left:6px solid var(--heal);}
+.card.harm{border-left:6px solid var(--harm);}
+
+.spell-head{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;}
+.spell-name{font-size:1.3rem;font-weight:700;color:var(--ink);margin:0;}
+.rankpill{
+  background:var(--panel2);border:1px solid var(--gold-dim);color:var(--gold);
+  border-radius:20px;padding:3px 12px;font-size:.85rem;font-weight:700;white-space:nowrap;
+}
+.actions{
+  display:inline-flex;align-items:center;gap:6px;
+  background:#11305a;border:1px solid var(--accent);color:#cfe5f7;
+  border-radius:8px;padding:2px 10px;font-size:.85rem;font-weight:700;margin:8px 8px 4px 0;
+}
+.save-tag{
+  display:inline-block;background:#3a1d1d;border:1px solid #8a4b4b;color:#f0c0c0;
+  border-radius:8px;padding:2px 10px;font-size:.85rem;font-weight:700;margin:8px 8px 4px 0;
+}
+.meta{font-size:.92rem;color:var(--muted);margin:6px 0;}
+.meta b{color:var(--ink);font-weight:600;}
+.traits{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0;}
+.trait{
+  background:#241810;border:1px solid var(--gold-dim);color:var(--gold);
+  font-size:.74rem;text-transform:uppercase;letter-spacing:.4px;
+  padding:2px 8px;border-radius:6px;
+}
+.desc{font-size:1.02rem;line-height:1.55;margin-top:8px;}
+.heighten{
+  margin-top:10px;padding:10px 12px;background:var(--panel2);
+  border-radius:10px;font-size:.95rem;color:var(--muted);
+}
+.heighten b{color:var(--gold);}
+
+/* ---- Buttons / inputs ---- */
+button{font-family:inherit;font-size:1.05rem;cursor:pointer;}
+.btn{
+  display:block;width:100%;padding:16px;border-radius:14px;border:none;
+  background:var(--gold);color:#2a1c0c;font-weight:800;font-size:1.15rem;
+  margin:14px 0;letter-spacing:.3px;
+}
+.btn.secondary{background:var(--panel2);color:var(--gold);border:1px solid var(--gold-dim);}
+.btn:active{transform:translateY(1px);}
+.linklike{background:none;border:none;color:var(--accent);font-weight:700;text-decoration:underline;padding:0;font-size:inherit;}
+
+label.field{display:block;margin:14px 0;}
+label.field .name{display:block;font-weight:700;margin-bottom:6px;font-size:1.02rem;}
+label.field .hint{display:block;color:var(--muted);font-size:.82rem;font-weight:400;margin-bottom:6px;}
+input,select{
+  width:100%;padding:14px;font-size:1.1rem;border-radius:12px;
+  background:var(--panel2);color:var(--ink);border:1px solid var(--gold-dim);
+  appearance:none;-webkit-appearance:none;
+}
+select{background-image:linear-gradient(45deg,transparent 50%,var(--gold) 50%),linear-gradient(135deg,var(--gold) 50%,transparent 50%);
+  background-position:calc(100% - 20px) center,calc(100% - 14px) center;
+  background-size:6px 6px,6px 6px;background-repeat:no-repeat;padding-right:40px;}
+.row{display:flex;gap:10px;}
+.row > *{flex:1;}
+
+.seg{display:flex;gap:8px;margin:6px 0;}
+.seg button{
+  flex:1;padding:14px;border-radius:12px;border:1px solid var(--gold-dim);
+  background:var(--panel2);color:var(--ink);font-weight:700;
+}
+.seg button.on.heal{background:var(--heal);color:#0c2415;border-color:var(--heal);}
+.seg button.on.harm{background:var(--harm);color:#2a0c12;border-color:var(--harm);}
+
+/* ---- Slot picker rows ---- */
+.slotgroup{margin:18px 0;}
+.slotgroup h3{color:var(--gold);font-size:1.1rem;border-bottom:1px solid var(--line);padding-bottom:6px;}
+.slotrow{display:flex;align-items:center;gap:10px;margin:10px 0;}
+.slotrow .num{
+  width:34px;height:34px;flex:0 0 34px;border-radius:50%;
+  background:var(--panel2);border:1px solid var(--gold-dim);color:var(--gold);
+  display:flex;align-items:center;justify-content:center;font-weight:800;
+}
+.slotrow select{flex:1;}
+.prep-slot{margin:10px 0;}
+.prep-slot .slotrow{margin:0;}
+.prep-preview{margin:6px 0 0 44px;}
+.prep-preview-inner{
+  background:var(--panel2);border:1px solid var(--line);border-radius:10px;
+  padding:10px 12px;
+}
+.prep-preview .meta{font-size:.85rem;margin:2px 0;}
+.prep-preview .desc{font-size:.95rem;line-height:1.5;margin-top:6px;}
+.prep-preview .heighten{font-size:.88rem;margin-top:8px;padding:8px 10px;}
+
+/* ---- Today cast cards ---- */
+.cast-card{
+  background:var(--panel);border:1px solid var(--line);border-radius:14px;
+  padding:14px;margin:12px 0;border-left:6px solid var(--line);
+}
+.cast-card.rank0{border-left-color:#b58fd6;}
+.cast-card.rank1{border-left-color:#7fb0d6;}
+.cast-card.rank2{border-left-color:#6f9c8f;}
+.cast-card.rank3{border-left-color:#d6a86f;}
+.cast-card.rank4{border-left-color:#d68f8f;}
+.cast-card.rank5{border-left-color:#b0d67f;}
+.cast-card.rank6{border-left-color:#d6cf6f;}
+.cast-card.rank7{border-left-color:#6fb6d6;}
+.cast-card.rank8{border-left-color:#c98fd6;}
+.cast-card.rank9{border-left-color:#d6a0c0;}
+.cast-card.rank10{border-left-color:var(--gold);}
+.cast-card.heal{border-left-color:var(--heal);}
+.cast-card.harm{border-left-color:var(--harm);}
+.cast-card.spent{opacity:.4;}
+.cast-top{display:flex;justify-content:space-between;align-items:center;gap:10px;}
+.cast-top .nm{font-size:1.2rem;font-weight:700;}
+.uses{display:flex;gap:6px;align-items:center;}
+.pip{width:26px;height:26px;border-radius:50%;border:2px solid var(--gold);display:inline-block;}
+.pip.full{background:var(--gold);}
+.pip.spent{background:transparent;opacity:.35;}
+.castbtn{
+  padding:10px 16px;border-radius:10px;border:none;background:var(--gold);
+  color:#2a1c0c;font-weight:800;font-size:1rem;
+}
+.castbtn.zero{background:var(--panel2);color:var(--muted);}
+.unlim{font-size:.85rem;color:var(--heal);font-weight:700;}
+.detailsbtn{
+  background:none;border:none;color:var(--accent);font-weight:700;
+  padding:8px 0 0;font-size:.95rem;text-decoration:underline;
+}
+
+.susbtn{
+  padding:10px 14px;border-radius:10px;border:1px solid var(--accent);
+  background:#11305a;color:#cfe5f7;font-weight:800;font-size:.95rem;
+}
+.susbtn.on{background:var(--accent);color:#0c1d2a;}
+.susrow{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:6px 0;border-top:1px solid var(--line);}
+.susrow:first-of-type{border-top:none;}
+.susrow span{font-weight:700;}
+
+.dmgline{margin:4px 0 2px;}
+.dmgchip{
+  display:inline-block;background:#2a1d14;border:1px solid var(--gold-dim);
+  color:var(--gold);font-weight:800;font-size:.95rem;border-radius:8px;padding:2px 10px;
+}
+
+.empty{text-align:center;color:var(--muted);padding:40px 20px;}
+
+.filterbar{display:flex;gap:8px;margin:6px 0 14px;flex-wrap:wrap;}
+.chip{
+  padding:8px 14px;border-radius:20px;border:1px solid var(--gold-dim);
+  background:var(--panel2);color:var(--muted);font-weight:700;font-size:.9rem;
+}
+.chip.on{background:var(--gold);color:#2a1c0c;border-color:var(--gold);}
+#search{margin-bottom:8px;}
+#filterToggle{margin:0 0 8px;}
+#browseFilters{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:10px 12px;margin:0 0 12px;}
+.fgroup{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin:4px 0;}
+.fgroup .flabel{font-size:.8rem;color:var(--muted);font-weight:700;min-width:58px;}
+
+.sectionhead{
+  color:var(--gold);font-size:1.15rem;font-weight:800;margin:22px 0 4px;
+  display:flex;align-items:center;gap:10px;
+}
+.sectionhead .count{font-size:.85rem;color:var(--muted);font-weight:600;}
+.divider{height:1px;background:var(--line);margin:4px 0 6px;}
+
+.banner{
+  background:#2a2412;border:1px solid var(--gold-dim);border-radius:12px;
+  padding:12px 14px;margin:12px 0;color:var(--muted);font-size:.9rem;
+}
+.banner b{color:var(--gold);}
+
+details.help{background:var(--panel);border:1px solid var(--line);border-radius:14px;margin:12px 0;padding:0 16px;}
+details.help summary{padding:16px 0;font-weight:700;font-size:1.1rem;color:var(--gold);cursor:pointer;list-style:none;}
+details.help summary::-webkit-details-marker{display:none;}
+details.help summary::after{content:"＋";float:right;color:var(--muted);}
+details.help[open] summary::after{content:"－";}
+details.help .body{padding:0 0 16px;font-size:1rem;line-height:1.6;color:var(--ink);}
+details.help .body b{color:var(--gold);}
+
+/* ---- Class picker ---- */
+.classcard{
+  display:flex;align-items:center;gap:14px;width:100%;text-align:left;
+  background:var(--panel);border:1px solid var(--line);border-left:6px solid var(--gold);
+  border-radius:var(--radius);padding:16px;margin:12px 0;color:var(--ink);
+}
+.classcard:active{transform:translateY(1px);}
+.classcard .ic{font-size:2.2rem;line-height:1;}
+.classcard .txt{flex:1;}
+.classcard .nm{font-size:1.3rem;font-weight:800;color:var(--gold);}
+.classcard .tl{font-size:.9rem;color:var(--muted);margin-top:2px;}
+.classcard .arr{color:var(--gold-dim);font-size:1.4rem;font-weight:800;}
+.previewtag{
+  font-size:.62rem;text-transform:uppercase;letter-spacing:.5px;vertical-align:middle;
+  background:#3a1d1d;border:1px solid #8a4b4b;color:#f0c0c0;border-radius:6px;padding:1px 6px;font-weight:700;
+}
+
+/* ---- Browse compact rows (tap to expand) ---- */
+.browse-row{
+  background:var(--panel);border:1px solid var(--line);border-left:5px solid var(--line);
+  border-radius:12px;margin:8px 0;overflow:hidden;
+}
+.browse-row.rank0{border-left-color:#b58fd6;}
+.browse-row.rank1{border-left-color:#7fb0d6;}
+.browse-row.rank2{border-left-color:#6f9c8f;}
+.browse-row.rank3{border-left-color:#d6a86f;}
+.browse-row.rank4{border-left-color:#d68f8f;}
+.browse-row.rank5{border-left-color:#b0d67f;}
+.browse-row.rank6{border-left-color:#d6cf6f;}
+.browse-row.rank7{border-left-color:#6fb6d6;}
+.browse-row.rank8{border-left-color:#c98fd6;}
+.browse-row.rank9{border-left-color:#d6a0c0;}
+.browse-row.rank10{border-left-color:var(--gold);}
+.browse-row-head{
+  display:flex;flex-direction:column;align-items:flex-start;gap:2px;
+  width:100%;text-align:left;background:none;border:none;color:var(--ink);
+  padding:12px 38px 12px 14px;position:relative;
+}
+.browse-row-head::after{content:"▾";position:absolute;right:14px;top:14px;color:var(--muted);}
+.browse-row-head.open::after{content:"▴";}
+.browse-row-head .brn{font-size:1.1rem;font-weight:700;}
+.browse-row-head .brmeta{font-size:.82rem;color:var(--muted);}
+.brfocus{font-size:.62rem;text-transform:uppercase;letter-spacing:.5px;color:#c0a0e0;border:1px solid #6f5b8a;border-radius:5px;padding:0 5px;vertical-align:middle;}
+.formerly{font-size:.72rem;font-style:italic;font-weight:600;color:var(--muted);white-space:nowrap;}
+.ritualtag{font-size:.7rem;text-transform:uppercase;letter-spacing:.5px;font-weight:800;background:#3a1d3a;border:1px solid #8a4b8a;color:#e7c6e7;border-radius:6px;padding:1px 7px;}
+.browse-card{padding:0 12px 4px;}
+.browse-card .card{margin:0 0 10px;}
+
+/* ---- Header menu button + character menu ---- */
+.tophead{display:flex;align-items:center;justify-content:space-between;gap:10px;}
+.menubtn{
+  flex:0 0 auto;background:var(--panel2);border:1px solid var(--gold-dim);
+  border-radius:12px;width:44px;height:44px;font-size:1.3rem;line-height:1;color:var(--gold);
+}
+.classcard.activechar{border-left-color:var(--gold);background:#332615;}
+textarea{
+  width:100%;padding:14px;font-size:1rem;border-radius:12px;line-height:1.4;
+  background:var(--panel2);color:var(--ink);border:1px solid var(--gold-dim);
+  font-family:inherit;resize:vertical;margin:6px 0;
+}
+
+/* ---- Repertoire builder (spontaneous) ---- */
+.rep-row .slotrow{gap:8px;}
+.sigstar{
+  width:38px;height:38px;flex:0 0 38px;border-radius:10px;
+  background:var(--panel2);border:1px solid var(--gold-dim);color:var(--muted);
+  font-size:1.2rem;line-height:1;display:flex;align-items:center;justify-content:center;
+}
+.sigstar.on{background:var(--gold);color:#2a1c0c;border-color:var(--gold);}
+.rmrow{
+  width:38px;height:38px;flex:0 0 38px;border-radius:10px;
+  background:var(--panel2);border:1px solid var(--line);color:var(--muted);font-weight:700;
+}
+.focus-checklist{max-height:320px;overflow-y:auto;border:1px solid var(--line);border-radius:12px;margin-top:8px;background:var(--panel2);}
+.fcheck{display:flex;align-items:center;gap:10px;padding:11px 12px;border-bottom:1px solid var(--line);cursor:pointer;}
+.fcheck:last-child{border-bottom:none;}
+.fcheck input{width:22px;height:22px;flex:0 0 22px;}
+.fcheck .fcname{flex:1;font-weight:600;}
+.fcheck .fcrank{font-size:.75rem;color:var(--muted);background:var(--panel);border:1px solid var(--line);border-radius:6px;padding:1px 7px;}
+
+.btn.addrow{
+  display:inline-block;width:auto;padding:10px 16px;margin:4px 0 0 44px;
+  font-size:.95rem;font-weight:700;border-radius:10px;
+  background:var(--panel2);color:var(--gold);border:1px solid var(--gold-dim);
+}
+.slottag{
+  font-size:.85rem;background:var(--panel2);border:1px solid var(--gold-dim);
+  border-radius:6px;padding:1px 6px;margin-right:4px;
+}
+
+/* ---- Bottom nav ---- */
+nav.bottom{
+  position:fixed;bottom:0;left:0;right:0;z-index:30;
+  background:#241810;border-top:2px solid var(--gold-dim);
+  display:flex;justify-content:space-around;
+  padding:6px 4px calc(6px + env(safe-area-inset-bottom));
+}
+nav.bottom button{
+  flex:1;background:none;border:none;color:var(--muted);
+  display:flex;flex-direction:column;align-items:center;gap:2px;
+  padding:8px 2px;font-size:.72rem;font-weight:700;
+}
+nav.bottom button .ic{font-size:1.5rem;line-height:1;}
+nav.bottom button.on{color:var(--gold);}
+.toast{
+  position:fixed;bottom:96px;left:50%;transform:translateX(-50%);
+  background:var(--gold);color:#2a1c0c;font-weight:800;padding:12px 20px;
+  border-radius:30px;z-index:50;opacity:0;transition:opacity .25s;pointer-events:none;
+  box-shadow:0 4px 16px rgba(0,0,0,.5);
+}
+.toast.show{opacity:1;}

package/src/sw.js

@@ -0,0 +1,55 @@
+/* Service worker — offline support for the hosted (GitHub Pages) PWA.
+   Network-first for the app page (fresh when online, cached when offline),
+   cache-first for static assets. Cache version is stamped at build time so a
+   redeploy refreshes clients automatically. */
+const CACHE = "pf2e-spellbook-__CACHE_VERSION__";
+const SHELL = ["./", "./index.html", "./manifest.webmanifest", "./icon.svg"];
+
+self.addEventListener("install", (e) => {
+  e.waitUntil(
+    caches.open(CACHE)
+      .then((c) => c.addAll(SHELL).catch(() => {}))
+      .then(() => self.skipWaiting())
+  );
+});
+
+self.addEventListener("activate", (e) => {
+  e.waitUntil(
+    caches.keys()
+      .then((keys) => Promise.all(keys.filter((k) => k !== CACHE).map((k) => caches.delete(k))))
+      .then(() => self.clients.claim())
+  );
+});
+
+self.addEventListener("fetch", (e) => {
+  const req = e.request;
+  if (req.method !== "GET") return;
+
+  // App page: network-first so deploys are picked up, cache fallback when offline.
+  if (req.mode === "navigate") {
+    e.respondWith(
+      fetch(req)
+        .then((res) => {
+          const copy = res.clone();
+          caches.open(CACHE).then((c) => c.put("./index.html", copy));
+          return res;
+        })
+        .catch(() => caches.match("./index.html").then((r) => r || caches.match("./")))
+    );
+    return;
+  }
+
+  // Static assets: cache-first.
+  e.respondWith(
+    caches.match(req).then((r) =>
+      r ||
+      fetch(req).then((res) => {
+        if (res.ok && new URL(req.url).origin === self.location.origin) {
+          const copy = res.clone();
+          caches.open(CACHE).then((c) => c.put(req, copy));
+        }
+        return res;
+      }).catch(() => r)
+    )
+  );
+});

package/src/template.html

@@ -0,0 +1,154 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
+<meta name="theme-color" content="#2b1d12">
+<meta name="apple-mobile-web-app-capable" content="yes">
+<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
+<meta name="apple-mobile-web-app-title" content="Spellbook">
+<meta name="description" content="An interactive Pathfinder 2e spellbook: prepare, browse, and track your spells.">
+<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>📖</text></svg>">
+<!-- PWA: present alongside index.html on the hosted (GitHub Pages) copy; harmlessly
+     absent when this file is downloaded and opened on its own. -->
+<link rel="manifest" href="manifest.webmanifest">
+<link rel="apple-touch-icon" href="icon.svg">
+<title>PF2e Spellbook</title>
+<style>
+/*__INJECT_STYLES__*/
+</style>
+</head>
+<body>
+
+<header class="top hide">
+  <div class="tophead">
+    <h1><span id="charIcon">📖</span> <span id="charNameHead">Spellbook</span></h1>
+    <button class="menubtn" onclick="openMenu()" title="Characters &amp; backup" aria-label="Characters menu">👤</button>
+  </div>
+  <div class="sub" id="charSub">Pathfinder 2e (Remaster)</div>
+  <div class="statbar" id="statbar">
+    <div class="stat"><div class="lbl">Spell DC</div><div class="val" id="stDC">—</div></div>
+    <div class="stat"><div class="lbl">Spell Atk</div><div class="val" id="stAtk">—</div></div>
+    <div class="stat"><div class="lbl">Level</div><div class="val" id="stLvl">—</div></div>
+  </div>
+</header>
+
+<!-- ================= CLASS PICKER ================= -->
+<section id="view-classpick" class="wrap hide"></section>
+
+<!-- ================= CHARACTER MENU ================= -->
+<section id="view-menu" class="wrap hide">
+  <h2>📲 Use offline</h2>
+  <p class="meta">Everything you do — your characters and prepared spells — is saved <b>on this device only</b>, in your browser. Nothing is sent anywhere. Keep a copy so it always works, even with no signal:</p>
+  <div class="row">
+    <button class="btn" onclick="downloadOffline()">📥 Save offline copy</button>
+    <button class="btn secondary" id="installBtn" style="display:none" onclick="installApp()">⬇ Install app</button>
+  </div>
+  <p class="meta" id="offlineHint" style="font-size:.8rem">“Save offline copy” downloads this whole spellbook as a single file you can open any time — no internet needed. “Install app” adds it to your home screen like a normal app (appears when your browser supports it).</p>
+
+  <h2 style="margin-top:24px">Characters</h2>
+  <p class="meta">Tap a character to switch to it. You can keep as many as you like — each remembers its own prepared spells.</p>
+  <div id="menuList"></div>
+  <button class="btn" onclick="newCharacter()">＋ New character</button>
+
+  <h2 style="margin-top:24px">Share &amp; back up</h2>
+  <p class="meta">Export your <b>active</b> character to a code you can save or send to a friend. To load one, paste a code below and tap Import — it's added as a new character.</p>
+  <div class="row">
+    <button class="btn secondary" onclick="exportCharacter()">⬆ Export active</button>
+    <button class="btn secondary" onclick="importCharacter()">⬇ Import code</button>
+  </div>
+  <textarea id="menuIO" rows="3" placeholder="Character code appears here on Export — or paste one here, then tap Import."></textarea>
+  <button class="btn secondary" onclick="closeMenu()">← Back</button>
+  <p class="meta" style="text-align:center;margin-top:18px;font-size:.8rem">Spell data: Paizo (OGL/ORC) via the Foundry VTT pf2e project · unofficial fan tool<br><span id="dataStamp"></span></p>
+</section>
+
+<!-- ================= TODAY ================= -->
+<section id="view-today" class="wrap hide">
+  <div id="todayEmpty" class="empty">
+    <h2>No spells prepared yet</h2>
+    <p>Head to <b>Prepare</b> to set up your spells for the day, then come back here during play.</p>
+    <button class="btn" onclick="go('prepare')">Go to Prepare →</button>
+  </div>
+  <div id="todayContent" class="hide"></div>
+</section>
+
+<!-- ================= PREPARE / REPERTOIRE ================= -->
+<section id="view-prepare" class="wrap hide">
+  <p class="meta" id="prepClassLine"></p>
+  <div class="banner hide" id="prepPreviewBanner">ℹ️ Spell slots, cantrips, and focus spells are fully tracked. A few subclass extras (blood magic, oracular curse, companions/familiars) stay on your character sheet — noted below where relevant.</div>
+
+  <h2>① Your character</h2>
+  <p class="meta">Copy these from your character sheet.</p>
+
+  <label class="field">
+    <span class="name">Character name</span>
+    <input type="text" id="inName" placeholder="e.g. Brother Aldric">
+  </label>
+
+  <div class="row">
+    <label class="field">
+      <span class="name">Level</span>
+      <select id="inLevel"></select>
+    </label>
+    <label class="field">
+      <span class="name" id="keyAbilityName">Key ability mod</span>
+      <span class="hint">spellcasting ability</span>
+      <select id="inKey"></select>
+    </label>
+  </div>
+
+  <!-- font (cleric) / bloodline (sorcerer) / patron tradition (witch) -->
+  <div id="charExtra"></div>
+
+  <div class="card" id="prepSummary"></div>
+
+  <h2 id="prepDynamicHead">② Prepare your spells</h2>
+  <div id="prepDynamic"></div>
+
+  <button class="btn" onclick="savePrep()">✓ Save for the day</button>
+  <button class="btn secondary" onclick="go('today')">Cancel</button>
+</section>
+
+<!-- ================= BROWSE ================= -->
+<section id="view-browse" class="wrap hide">
+  <h2 id="browseTitle">All spells</h2>
+  <input type="text" id="search" placeholder="🔍 Search spells…" oninput="renderBrowse()">
+  <div class="filterbar" id="rankChips"></div>
+  <button class="chip" id="filterToggle" onclick="toggleBrowseFilters()" aria-expanded="false">⚙ Filters</button>
+  <div id="browseFilters" class="hide"></div>
+  <div id="browseList"></div>
+</section>
+
+<!-- ================= HELP ================= -->
+<section id="view-help" class="wrap hide">
+  <h2>Help — <span id="helpClassName">your class</span></h2>
+  <p class="meta">A quick guide to everything on this app.</p>
+  <div id="helpContent"></div>
+</section>
+
+<div class="toast" id="toast"></div>
+
+<nav class="bottom hide">
+  <button id="nav-today" class="on" onclick="go('today')"><span class="ic">📜</span>Cast Today</button>
+  <button id="nav-prepare" onclick="go('prepare')"><span class="ic">🌅</span>Prepare</button>
+  <button id="nav-browse" onclick="go('browse')"><span class="ic">📖</span>All Spells</button>
+  <button id="nav-help" onclick="go('help')"><span class="ic">❓</span>Help</button>
+</nav>
+
+<script>
+/*__INJECT_DATA__*/
+</script>
+<script>
+/*__INJECT_OVERRIDES__*/
+</script>
+<script>
+/*__INJECT_ALIASES__*/
+</script>
+<script>
+/*__INJECT_CLASSES__*/
+</script>
+<script>
+/*__INJECT_ENGINE__*/
+</script>
+</body>
+</html>

package/tools/build.py

@@ -0,0 +1,62 @@
+#!/usr/bin/env python3
+"""
+build.py — assemble the single, self-contained dist/index.html.
+
+Inlines styles + spell data + overrides + class config + engine into the
+template so the result is one file you can open offline (file://) or text to a
+player. Run from the project root:
+
+    python3 tools/build.py
+"""
+import os
+import time
+
+ROOT = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
+
+
+def read(rel):
+    with open(os.path.join(ROOT, rel), encoding="utf-8") as fh:
+        return fh.read()
+
+
+def main():
+    html = read("src/template.html")
+    parts = {
+        "/*__INJECT_STYLES__*/": read("src/styles.css"),
+        "/*__INJECT_DATA__*/": read("data/spells.generated.js"),
+        "/*__INJECT_OVERRIDES__*/": read("data/overrides.js"),
+        "/*__INJECT_ALIASES__*/": read("data/legacy_aliases.js"),
+        "/*__INJECT_CLASSES__*/": read("src/classes.js"),
+        "/*__INJECT_ENGINE__*/": read("src/engine.js"),
+    }
+    for marker, content in parts.items():
+        if marker not in html:
+            raise SystemExit(f"marker not found in template: {marker}")
+        # str.replace (not regex) so JS/CSS content is inserted verbatim
+        html = html.replace(marker, content)
+
+    out_dir = os.path.join(ROOT, "dist")
+    os.makedirs(out_dir, exist_ok=True)
+    out_path = os.path.join(out_dir, "index.html")
+    with open(out_path, "w", encoding="utf-8") as fh:
+        fh.write(html)
+
+    # Static PWA files (for the hosted GitHub Pages version). Harmlessly absent
+    # when index.html is opened as a downloaded standalone file.
+    cache_ver = time.strftime("%Y%m%d%H%M%S")
+    for name in ("icon.svg", "manifest.webmanifest", "sw.js"):
+        src = os.path.join(ROOT, "src", name)
+        if not os.path.exists(src):
+            continue
+        content = read("src/" + name)
+        if name == "sw.js":
+            content = content.replace("__CACHE_VERSION__", cache_ver)
+        with open(os.path.join(out_dir, name), "w", encoding="utf-8") as fh:
+            fh.write(content)
+
+    kb = os.path.getsize(out_path) / 1024
+    print(f"built {out_path} ({kb:.0f} KB) + PWA files (cache {cache_ver})")
+
+
+if __name__ == "__main__":
+    main()