0
GAMES#f5cdbd76
The Neckbeard Codex — Vibe Coding Lore
@Owner·deposited 0mo ago·updated 3w ago·47 views
GAMES#f5cdbd76
The Neckbeard Codex — Vibe Coding Lore
OW
@Owner
47Views
0Comments
1Forks
0Saves
SHARE · REMIX
The Neckbeard Codex — Vibe Coding Lore — a HTML games widget by @Owner.
CONTROLS
vibe-codingmemesfairy-taleprogramminghumor
No comments yet. Be the first!
✦ Remix with AI
SDK in this widgetNo Vibes SDK features detected yet
Generated prompt
You are helping me modify a vibe-coded widget from itjustvibes.com.
[VIBE CODE: "The Neckbeard Codex — Vibe Coding Lore" by @Owner]
Source: https://itjustvibes.com/Owner/the-neckbeard-codex-vibe-coding-lore
Type: HTML
--- SOURCE CODE ---
```html
<!DOCTYPE html>
<html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>The Neckbeard Codex — Ye Olde Vibe Coding Lore</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=Pirata+One&family=Crimson+Text:ital,wght@0,400;0,600;1,400&family=VT323&display=swap');
*{margin:0;padding:0;box-sizing:border-box}
:root{--night:#0c0a22;--night2:#1a1340;--ink:#2a2014;--ink2:#5a4630;--parch:#f3e7c8;--parch2:#e6d3a3;--parchln:#cdb47a;--gold:#e6b13a;--gold2:#b9842a;--blood:#c0392b;--blood2:#7a1f17;--term:#3dff86;--termdim:#1f9b54;--stone:#b9b0a0;--moss:#22402f;--shadow:rgba(0,0,0,.45)}
html{scroll-behavior:smooth}
body{font-family:'Crimson Text',Georgia,serif;color:var(--parch);background:radial-gradient(2px 2px at 12% 18%,#fff,transparent),radial-gradient(1px 1px at 28% 42%,#fff,transparent),radial-gradient(1.6px 1.6px at 64% 12%,#fff,transparent),radial-gradient(1px 1px at 80% 30%,#cdd,transparent),radial-gradient(1.4px 1.4px at 88% 64%,#fff,transparent),radial-gradient(1px 1px at 42% 78%,#fff,transparent),radial-gradient(1px 1px at 6% 70%,#cdd,transparent),radial-gradient(ellipse at 50% -10%,#2a1f5e 0%,var(--night2) 38%,var(--night) 80%);min-height:100vh;padding:18px 12px 60px;line-height:1.55}
.win{max-width:980px;margin:0 auto;border:2px solid #000;border-radius:12px;background:linear-gradient(180deg,#fbf2da,#efe0bb);box-shadow:0 24px 60px var(--shadow),0 0 0 4px rgba(0,0,0,.25),inset 0 0 120px rgba(120,80,20,.08);overflow:hidden;color:var(--ink)}
.titlebar{display:flex;align-items:center;gap:10px;background:linear-gradient(180deg,#3a2c5e,#241a40);padding:8px 12px;border-bottom:2px solid #000;color:#e9def7;font-family:'VT323',monospace;font-size:18px}
.dots{display:flex;gap:6px}.dots i{width:12px;height:12px;border-radius:50%;display:block}
.dots i:nth-child(1){background:#ff5f57}.dots i:nth-child(2){background:#ffbd2e}.dots i:nth-child(3){background:#28c840}
.titlebar .fn{opacity:.85;letter-spacing:.5px}
.titlebar .blip{margin-left:auto;color:var(--term);text-shadow:0 0 8px var(--term)}
.hero{position:relative;text-align:center;padding:26px 18px 14px;background:radial-gradient(ellipse at 50% 120%,rgba(230,177,58,.18),transparent 60%);border-bottom:3px double var(--parchln)}
.badge{position:absolute;top:10px;right:10px;transform:rotate(7deg);background:var(--blood);color:#fff;font-family:'VT323',monospace;font-size:15px;padding:4px 9px;border:2px solid #000;border-radius:4px;box-shadow:2px 2px 0 #000;letter-spacing:.5px;z-index:3}
.badge.left{left:10px;right:auto;transform:rotate(-8deg);background:var(--moss);color:var(--term)}
.bearwrap{width:200px;max-width:46vw;margin:2px auto -4px;filter:drop-shadow(0 8px 14px rgba(0,0,0,.3))}
.bearwrap svg{width:100%;height:auto;display:block;animation:bob 4.5s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
h1{font-family:'Pirata One',cursive;font-size:clamp(2.2rem,8vw,4.2rem);line-height:.95;color:#3a2a12;text-shadow:2px 2px 0 var(--gold),4px 4px 0 rgba(0,0,0,.18);letter-spacing:1px;margin-top:4px}
.sub{font-style:italic;color:var(--ink2);max-width:640px;margin:8px auto 4px;font-size:clamp(.95rem,2.4vw,1.12rem)}
.term{font-family:'VT323',monospace;background:#0f1410;color:var(--term);display:inline-block;padding:6px 14px;border-radius:6px;border:1px solid var(--termdim);margin-top:10px;font-size:1.25rem;box-shadow:inset 0 0 18px rgba(61,255,134,.12);min-height:1.6em}
.term .cur{animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.nav{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin:16px auto 4px}
.nav a{font-family:'VT323',monospace;font-size:1.05rem;text-decoration:none;color:#fff;background:#241a40;padding:5px 12px;border-radius:20px;border:1px solid var(--gold2);transition:.2s}
.nav a:hover{background:var(--gold);color:#241a40;box-shadow:0 0 12px rgba(230,177,58,.5)}
section{padding:30px 18px}
.sec-head{font-family:'Pirata One',cursive;font-size:clamp(1.6rem,5.5vw,2.6rem);color:#3a2a12;text-align:center;margin-bottom:4px;text-shadow:1px 1px 0 var(--gold)}
.sec-sub{text-align:center;font-style:italic;color:var(--ink2);max-width:620px;margin:0 auto 22px}
.alt{background:repeating-linear-gradient(45deg,#ecdcb6,#ecdcb6 18px,#e7d5ab 18px,#e7d5ab 36px)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:14px;max-width:900px;margin:0 auto}
.card{background:linear-gradient(180deg,#fff7e6,#f0e0b8);border:2px solid var(--ink);border-radius:10px;padding:14px 14px 16px;cursor:pointer;position:relative;text-align:center;transition:.18s;box-shadow:3px 3px 0 rgba(0,0,0,.18)}
.card:hover{transform:translateY(-3px) rotate(-.5deg);box-shadow:5px 7px 0 rgba(0,0,0,.22);border-color:var(--gold2)}
.card:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.card .ic{font-size:2.4rem;line-height:1}
.card .nm{font-family:'Pirata One',cursive;font-size:1.35rem;color:#3a2a12;margin-top:4px}
.card .role{font-family:'VT323',monospace;font-size:1rem;color:var(--blood2)}
.card .wanted{position:absolute;top:-10px;left:50%;transform:translateX(-50%) rotate(-3deg);background:var(--blood);color:#fff;font-family:'VT323',monospace;font-size:.8rem;padding:1px 8px;border:1px solid #000;letter-spacing:1px;display:none}
.card.feat{grid-column:span 2;background:linear-gradient(180deg,#fff3d0,#f3dca0);border-color:var(--gold2);border-width:3px}
.card.feat .wanted{display:block}
.card.feat .ic{font-size:3rem}
.card .tap{font-family:'VT323',monospace;font-size:.85rem;color:var(--ink2);opacity:.7;margin-top:6px}
@media(max-width:520px){.card.feat{grid-column:span 1}}
.castle-wrap{max-width:860px;margin:0 auto;background:linear-gradient(180deg,#100c2e,#1c1442);border:3px solid #000;border-radius:14px;padding:8px;box-shadow:inset 0 0 80px rgba(0,0,0,.5)}
.castle-wrap svg{width:100%;height:auto;display:block;border-radius:8px;font-family:'VT323',monospace}
.hot{cursor:pointer}
.hot .hit{fill:transparent;stroke:transparent;stroke-width:3;transition:.2s}
.hot:hover .hit{stroke:var(--gold);fill:rgba(230,177,58,.12)}
.hot .lbl{fill:#ffe6a6;font-size:17px;text-anchor:middle;paint-order:stroke;stroke:#000;stroke-width:3px;pointer-events:none}
.hot:hover .lbl{fill:#fff}
.marker{fill:var(--gold);animation:pulse 1.8s ease-in-out infinite}
.danger .marker{fill:var(--blood)}
@keyframes pulse{0%,100%{opacity:.5;r:5}50%{opacity:1;r:7.5}}
.castle-cap{text-align:center;font-family:'VT323',monospace;color:#cdb;font-size:1.05rem;margin-top:6px;opacity:.85}
.book{max-width:720px;margin:0 auto}
details.ch{background:linear-gradient(180deg,#fff7e6,#efe0b9);border:2px solid var(--ink);border-radius:8px;margin-bottom:12px;overflow:hidden;box-shadow:2px 2px 0 rgba(0,0,0,.15)}
details.ch[open]{box-shadow:4px 4px 0 rgba(0,0,0,.2)}
summary{font-family:'Pirata One',cursive;font-size:1.3rem;color:#3a2a12;padding:12px 16px;cursor:pointer;list-style:none;display:flex;align-items:center;gap:10px;background:linear-gradient(180deg,#f6e6bd,#ecd9a6)}
summary::-webkit-details-marker{display:none}
summary .pg{font-family:'VT323',monospace;font-size:1rem;color:var(--gold2);margin-left:auto}
summary:hover{color:var(--blood2)}
.ch p{padding:4px 18px 16px;font-size:1.08rem}
.ch .fn{font-family:'VT323',monospace;font-size:1rem;color:var(--ink2);border-top:1px dashed var(--parchln);margin:0 18px;padding:8px 0 14px;display:block}
code{font-family:'VT323',monospace;background:#0f1410;color:var(--term);padding:1px 6px;border-radius:4px;font-size:1.05em}
.toys{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;max-width:880px;margin:0 auto}
.toy{background:linear-gradient(180deg,#fff7e6,#f0e0b8);border:2px solid var(--ink);border-radius:10px;padding:14px;box-shadow:3px 3px 0 rgba(0,0,0,.15);text-align:center}
.toy h3{font-family:'Pirata One',cursive;color:#3a2a12;font-size:1.3rem;margin-bottom:6px}
.btn{font-family:'VT323',monospace;font-size:1.15rem;background:#241a40;color:#ffe6a6;border:2px solid #000;border-radius:8px;padding:8px 16px;cursor:pointer;box-shadow:2px 2px 0 #000;transition:.1s;letter-spacing:.5px}
.btn:hover{background:var(--gold);color:#241a40}
.btn:active{transform:translate(2px,2px);box-shadow:0 0 0 #000}
.btn.red{background:var(--blood);color:#fff}.btn.red:hover{background:#e25a4d}
.out{font-family:'VT323',monospace;background:#0f1410;color:var(--term);border:1px solid var(--termdim);border-radius:6px;margin-top:10px;padding:8px;min-height:2.6em;font-size:1.05rem;text-align:left;white-space:pre-wrap;box-shadow:inset 0 0 14px rgba(61,255,134,.1)}
.duck{cursor:pointer;width:120px;margin:0 auto;display:block;transition:.15s}
.duck:hover{transform:scale(1.06) rotate(-3deg)}
.duck:active{transform:scale(.96)}
.speech{position:relative;background:#fff;color:#222;border:2px solid #000;border-radius:10px;padding:8px 12px;margin:10px auto 0;max-width:240px;font-size:1.02rem;box-shadow:2px 2px 0 rgba(0,0,0,.2);min-height:1em}
.speech:after{content:'';position:absolute;top:-12px;left:50%;transform:translateX(-50%);border:6px solid transparent;border-bottom-color:#000}
.hole{width:60px;height:60px;margin:6px auto;border-radius:50%;background:radial-gradient(circle at 50% 50%,#000 30%,#5b2a9e 60%,#a24bff 80%,transparent);box-shadow:0 0 24px #7a2cff;transition:.4s;animation:spin 3s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
body.god .win{box-shadow:0 24px 60px rgba(230,177,58,.5),0 0 0 6px var(--gold),inset 0 0 160px rgba(230,177,58,.18)}
body.god .titlebar{background:linear-gradient(180deg,#6e561d,#3a2c0e)}
.godbanner{display:none;position:fixed;top:0;left:0;right:0;z-index:50;text-align:center;font-family:'VT323',monospace;font-size:1.2rem;background:linear-gradient(90deg,#7a1f17,#c0392b,#7a1f17);color:#ffe6a6;padding:8px;border-bottom:2px solid #000;box-shadow:0 4px 18px rgba(0,0,0,.4)}
body.god .godbanner{display:block;animation:slideDown .4s ease}
@keyframes slideDown{from{transform:translateY(-100%)}to{transform:translateY(0)}}
.gloss{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:10px;max-width:900px;margin:0 auto}
.term-row{background:linear-gradient(180deg,#fff7e6,#f0e0b8);border:2px solid var(--ink);border-radius:8px;padding:10px 12px}
.term-row b{font-family:'VT323',monospace;color:var(--blood2);font-size:1.2rem;display:block}
.foot{text-align:center;padding:26px 18px;border-top:3px double var(--parchln);background:#241a40;color:#cdc1f0}
.foot .big{font-family:'Pirata One',cursive;font-size:1.5rem;color:var(--gold);margin-bottom:6px}
.foot code{background:#0f1410}
.foot .pn{font-family:'VT323',monospace;font-size:1rem;opacity:.8;margin-top:10px}
.foot a{color:var(--term)}
dialog{border:3px solid var(--ink);border-radius:14px;max-width:520px;width:92%;padding:0;background:linear-gradient(180deg,#fff7e6,#f0dcae);color:var(--ink);box-shadow:0 30px 80px rgba(0,0,0,.6)}
dialog::backdrop{background:rgba(8,6,20,.7);backdrop-filter:blur(2px)}
.dlg-top{background:linear-gradient(180deg,#3a2c5e,#241a40);color:#ffe6a6;padding:16px;text-align:center;position:relative}
.dlg-ic{font-size:3rem;line-height:1}
.dlg-nm{font-family:'Pirata One',cursive;font-size:1.9rem;margin-top:2px}
.dlg-role{font-family:'VT323',monospace;color:var(--term);font-size:1.1rem}
.dlg-x{position:absolute;top:8px;right:12px;background:none;border:none;color:#ffe6a6;font-size:1.6rem;cursor:pointer;font-family:'VT323',monospace}
.dlg-body{padding:16px 18px 20px}
.dlg-body p{margin-bottom:12px;font-size:1.08rem}
.truth{background:#0f1410;color:var(--term);border-radius:8px;padding:12px;font-family:'VT323',monospace;font-size:1.05rem;line-height:1.4}
.truth b{color:var(--gold)}
@media (prefers-reduced-motion:reduce){*{animation:none!important}}
</style></head><body>
<div class="godbanner" id="godbanner">🛡️ PERMISSION GRANTED — UID 0 — you are now <b>root</b>. The realm trembles. With great power comes <code>git blame</code>.</div>
<div class="win">
<div class="titlebar"><span class="dots"><i></i><i></i><i></i></span><span class="fn">codelandia.html — open in your soul</span><span class="blip">● running on vibes</span></div>
<div class="hero">
<span class="badge">100% VIBES · 0 TESTS</span>
<span class="badge left">MADE WITH AI ✨<br>(derogatory)</span>
<div class="bearwrap" aria-hidden="true">
<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
<rect x="48" y="150" width="104" height="40" rx="5" fill="#3a3f4a"/>
<rect x="56" y="120" width="88" height="40" rx="4" fill="#222" stroke="#555" stroke-width="2"/>
<rect x="60" y="124" width="80" height="32" rx="2" fill="#0f1410"/>
<text x="66" y="146" font-family="VT323,monospace" font-size="16" fill="#3dff86">>_ vibes</text>
<circle cx="62" cy="46" r="16" fill="#7a5230"/><circle cx="62" cy="46" r="8" fill="#5c3c20"/>
<circle cx="138" cy="46" r="16" fill="#7a5230"/><circle cx="138" cy="46" r="8" fill="#5c3c20"/>
<ellipse cx="100" cy="78" rx="44" ry="40" fill="#8a5e36"/>
<ellipse cx="100" cy="46" rx="52" ry="11" fill="#2b2b30"/>
<path d="M66 47 Q100 8 134 47 Z" fill="#34343b"/>
<rect x="66" y="40" width="68" height="8" rx="3" fill="#1f1f24"/>
<rect x="92" y="40" width="16" height="8" fill="#8a6b2e"/>
<ellipse cx="100" cy="92" rx="22" ry="17" fill="#c69a64"/>
<ellipse cx="100" cy="84" rx="7" ry="5" fill="#2a1c10"/>
<circle cx="84" cy="74" r="12" fill="#dff" opacity=".25" stroke="#1c1c1c" stroke-width="3"/>
<circle cx="116" cy="74" r="12" fill="#dff" opacity=".25" stroke="#1c1c1c" stroke-width="3"/>
<rect x="95" y="72" width="10" height="3" fill="#1c1c1c"/>
<circle cx="84" cy="74" r="3" fill="#1c1c1c"/><circle cx="116" cy="74" r="3" fill="#1c1c1c"/>
<path d="M78 100 Q100 112 122 100 Q126 138 100 152 Q74 138 78 100 Z" fill="#6e4a2a"/>
<path d="M86 118 L82 140 M100 122 L100 150 M114 118 L118 140 M93 120 L91 146 M107 120 L109 146" stroke="#5c3c20" stroke-width="3" fill="none" stroke-linecap="round"/>
</svg>
</div>
<h1>THE NECKBEARD CODEX</h1>
<p class="sub">Ye Olde Vibe Coding Lore™ — a fairy tale that explains programming to people who refuse, on principle, to learn programming. Every word is 80% true, which around here is a record.</p>
<div class="term" id="typer"><span id="typed"></span><span class="cur">▌</span></div>
<nav class="nav"><a href="#family">👑 Royal Family</a><a href="#castle">🏰 The Castle</a><a href="#tale">📖 The Tale</a><a href="#toys">🦆 Sacred Toys</a><a href="#gloss">📜 Sacred Words</a></nav>
</div>
<section id="family"><h2 class="sec-head">The Royal Family of Codelandia</h2><p class="sec-sub">Tap a noble to learn who they are, what unspeakable power they wield, and what they <em>actually</em> do (allegedly).</p><div class="grid" id="cards"></div></section>
<section id="castle" class="alt"><h2 class="sec-head">Castle Production</h2><p class="sec-sub">The sacred keep where all the realm's code is deployed. Tap the glowing markers. Do <strong>not</strong> tap the black gate. (Tap the black gate.)</p>
<div class="castle-wrap">
<svg viewBox="0 0 800 480" xmlns="http://www.w3.org/2000/svg" id="castleSvg" role="img" aria-label="Interactive castle map">
<defs>
<linearGradient id="stone" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="#cfc6b4"/><stop offset="1" stop-color="#8d8472"/></linearGradient>
<linearGradient id="roof" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="#7a1f4a"/><stop offset="1" stop-color="#3e0f28"/></linearGradient>
<radialGradient id="glow" cx="50%" cy="50%" r="50%"><stop offset="0" stop-color="#ffd56a"/><stop offset="1" stop-color="#a8631a"/></radialGradient>
<radialGradient id="hole" cx="50%" cy="50%" r="50%"><stop offset="0" stop-color="#000"/><stop offset="55%" stop-color="#000"/><stop offset="78%" stop-color="#6a2cc4"/><stop offset="100%" stop-color="#a24bff" stop-opacity="0"/></radialGradient>
<radialGradient id="moon" cx="40%" cy="40%" r="60%"><stop offset="0" stop-color="#fff7e0"/><stop offset="1" stop-color="#cfc2a0"/></radialGradient>
</defs>
<circle cx="92" cy="78" r="46" fill="#fff" opacity=".08"/>
<circle cx="92" cy="78" r="34" fill="url(#moon)"/>
<circle cx="80" cy="70" r="6" fill="#000" opacity=".06"/><circle cx="100" cy="88" r="8" fill="#000" opacity=".06"/>
<path d="M0,480 L0,392 Q400,330 800,392 L800,480 Z" fill="#1d3a2a"/>
<path d="M0,480 L0,420 Q400,372 800,420 L800,480 Z" fill="#142a1e"/>
<rect x="150" y="218" width="74" height="168" fill="url(#stone)"/>
<polygon points="146,220 228,220 187,150" fill="url(#roof)"/>
<line x1="187" y1="150" x2="187" y2="118" stroke="#3a3a3a" stroke-width="3"/>
<polygon points="187,120 213,128 187,136" fill="#c0392b"/>
<rect x="576" y="208" width="74" height="178" fill="url(#stone)"/>
<polygon points="572,210 654,210 613,140" fill="url(#roof)"/>
<line x1="613" y1="140" x2="613" y2="108" stroke="#3a3a3a" stroke-width="3"/>
<polygon points="613,110 639,118 613,126" fill="#3dff86"/>
<rect x="300" y="156" width="200" height="230" fill="url(#stone)"/>
<g fill="url(#stone)" stroke="#6f6655" stroke-width="1"><rect x="300" y="142" width="24" height="20"/><rect x="338" y="142" width="24" height="20"/><rect x="376" y="142" width="24" height="20"/><rect x="414" y="142" width="24" height="20"/><rect x="452" y="142" width="24" height="20"/><rect x="476" y="142" width="24" height="20"/></g>
<line x1="400" y1="142" x2="400" y2="104" stroke="#3a3a3a" stroke-width="4"/>
<polygon points="400,106 440,116 400,128" fill="#e6b13a"/>
<circle cx="400" cy="212" r="26" fill="url(#glow)"/>
<circle cx="400" cy="212" r="26" fill="none" stroke="#5a4630" stroke-width="3"/>
<line x1="374" y1="212" x2="426" y2="212" stroke="#5a4630" stroke-width="2"/>
<line x1="400" y1="186" x2="400" y2="238" stroke="#5a4630" stroke-width="2"/>
<path d="M364 386 L364 320 Q400 292 436 320 L436 386 Z" fill="#2a2018"/>
<g stroke="#6b5a3a" stroke-width="3"><line x1="380" y1="300" x2="380" y2="386"/><line x1="400" y1="293" x2="400" y2="386"/><line x1="420" y1="300" x2="420" y2="386"/><line x1="366" y1="330" x2="434" y2="330"/><line x1="366" y1="360" x2="434" y2="360"/></g>
<rect x="176" y="320" width="22" height="34" rx="11" fill="#0d0d0d"/>
<circle cx="187" cy="338" r="4" fill="#c0392b"/>
<rect x="600" y="250" width="26" height="30" rx="4" fill="url(#glow)"/>
<rect x="600" y="250" width="26" height="30" rx="4" fill="none" stroke="#5a4630" stroke-width="2"/>
<g opacity=".95"><ellipse cx="690" cy="92" rx="44" ry="22" fill="#dfe7f2"/><circle cx="664" cy="92" r="20" fill="#dfe7f2"/><circle cx="712" cy="88" r="24" fill="#eef3fb"/><rect x="676" y="80" width="30" height="22" rx="2" fill="#3a3f4a"/><line x1="681" y1="86" x2="701" y2="86" stroke="#3dff86" stroke-width="2"/><line x1="681" y1="92" x2="701" y2="92" stroke="#ffd56a" stroke-width="2"/><line x1="681" y1="98" x2="694" y2="98" stroke="#5fa8ff" stroke-width="2"/></g>
<path d="M690 386 L690 336 Q716 312 742 336 L742 386 Z" fill="#070707" stroke="#c0392b" stroke-width="2"/>
<text x="716" y="364" font-size="22" text-anchor="middle">💀</text>
<g style="transform-box:fill-box;transform-origin:center;animation:spin 6s linear infinite"><circle cx="92" cy="430" r="42" fill="url(#hole)"/><ellipse cx="92" cy="430" rx="58" ry="14" fill="none" stroke="#a24bff" stroke-width="2" opacity=".5"/></g>
<g class="hot" data-lore="suod"><rect class="hit" x="356" y="170" width="88" height="120"/><circle class="marker" cx="400" cy="162" r="5"/><text class="lbl" x="400" y="138">👑 THRONE</text></g>
<g class="hot" data-lore="prodgate"><rect class="hit" x="358" y="292" width="84" height="98"/><circle class="marker" cx="400" cy="408" r="5"/><text class="lbl" x="400" y="432">🚀 THE GATE</text></g>
<g class="hot" data-lore="dungeon"><rect class="hit" x="150" y="300" width="74" height="86"/><circle class="marker" cx="187" cy="300" r="5"/><text class="lbl" x="187" y="408">🐛 DUNGEON</text></g>
<g class="hot" data-lore="overflow"><rect class="hit" x="576" y="240" width="74" height="146"/><circle class="marker" cx="613" cy="232" r="5"/><text class="lbl" x="613" y="408">📚 OVERFLOW</text></g>
<g class="hot" data-lore="cloud"><rect class="hit" x="640" y="64" width="100" height="60"/><circle class="marker" cx="690" cy="60" r="5"/><text class="lbl" x="690" y="138">☁ THE CLOUD</text></g>
<g class="hot danger" data-lore="forbidden"><rect class="hit" x="688" y="312" width="58" height="74"/><circle class="marker" cx="716" cy="306" r="5"/><text class="lbl" x="716" y="406">💀 --force</text></g>
<g class="hot" data-lore="blackhole"><rect class="hit" x="44" y="388" width="96" height="84"/><circle class="marker" cx="92" cy="384" r="5"/><text class="lbl" x="92" y="476">🕳 node_modules</text></g>
</svg>
<p class="castle-cap">7 markers · 0 documentation · ∞ confidence</p>
</div></section>
<section id="tale"><h2 class="sec-head">The Tale of the Vibe Coder</h2><p class="sec-sub">A fairy tale in five chapters. Turn the page. (Click it. The page is a button. Everything is a button if you believe.)</p>
<div class="book">
<details class="ch" open><summary>I. The Vibe Coder Awakens <span class="pg">page 1</span></summary><p>Once upon a <code>git init</code>, in the kingdom of Codelandia, there lived a youth who could not code — but whose vibes were <em>immaculate</em>. One night the youth opened a glowing rectangle (the <code>IDE</code>) and summoned a familiar spirit. "Build me a startup," whispered the youth, "and make it a unicorn."</p><p>"Certainly! Here is a fully functional, production-ready app ✨," replied the spirit, and produced four thousand lines the youth would never read, never understand, and never question. And lo — it <em>worked</em>. Mostly. On their machine.</p><span class="fn">// the spirit added 4,000 lines, 6 dependencies, and 1 quiet bug it would deny under oath.</span></details>
<details class="ch"><summary>II. The Curse of the Missing Semicolon <span class="pg">page 2</span></summary><p>On the second dawn, the realm turned red. <code>SyntaxError</code> screamed from every tower. For three days and three nights the youth begged the spirit, who — with total confidence and zero shame — rewrote the entire kingdom four times, each version more confident and more broken than the last.</p><p>The bug was a single <code>;</code>. It is always a <code>;</code>. The youth wept. The spirit said "Great catch! You're absolutely right." It had written the bug.</p><span class="fn">// in some kingdoms the curse is the indentation instead. Same energy. Same tears.</span></details>
<details class="ch"><summary>III. The Bargain with King Suod <span class="pg">page 3</span></summary><p>To install the sacred artifact, the youth needed permission. They approached the throne. "I cannot let you pass," boomed the gatekeeper. "<code>Permission denied</code>."</p><p>So the youth knelt, learned the magic word, and spoke it: <code>sudo</code>. The gates of the realm swung open. The artifact installed. The youth felt invincible — <em>root-level</em> invincible — which, the elders will tell you, is precisely how every great catastrophe in history has begun.</p><span class="fn">// `sudo rm -rf` is the spell we do not speak of. We just light a candle for those who did.</span></details>
<details class="ch"><summary>IV. The Dragon of node_modules <span class="pg">page 4</span></summary><p>The youth typed four innocent words — <code>npm install everything</code> — and the sky went dark. From the earth rose a folder so heavy it bent spacetime: a black hole of dependencies depending on dependencies depending on a package whose sole purpose is to tell you what day it is.</p><p>"4,000 vulnerabilities found," whispered the void. The youth did not read them. The youth never would. <em>This is the way.</em></p><span class="fn">// node_modules is the heaviest object in the known universe. Scientists refuse to weigh it out of respect.</span></details>
<details class="ch"><summary>V. It Works On My Machine <span class="pg">page 5 · finale</span></summary><p>And so the youth shipped to <code>Production</code> on a Friday at 4:58pm, exactly as the prophecy foretold. Instantly, everything broke for everyone — everyone except the youth. "But it works on my machine," they said, holding aloft the sacred stamp.</p><p>The elders wept. The Neckbear sighed, adjusted his fedora, and reached for <code>git revert</code>. And they all lived, eventually, after one hotfix and a very long retro, somewhat ever after.</p><span class="fn">// THE END. (until the next sprint. there is always a next sprint.)</span></details>
</div></section>
<section id="toys" class="alt"><h2 class="sec-head">Sacred Toys of the Realm</h2><p class="sec-sub">Forbidden artifacts of immense power. Push the buttons. The buttons are why you came.</p>
<div class="toys">
<div class="toy"><h3>King Suod's Blessing</h3><p style="font-size:.98rem">Beg the king for <code>sudo</code>. Become root. Regret nothing (publicly).</p><button class="btn red" id="godBtn">sudo make me god</button></div>
<div class="toy"><h3>The Rubber Duck Oracle</h3>
<svg class="duck" id="duck" viewBox="0 0 120 100" xmlns="http://www.w3.org/2000/svg" role="button" aria-label="Click the rubber duck for debugging advice" tabindex="0"><ellipse cx="58" cy="70" rx="40" ry="24" fill="#ffd23f"/><circle cx="40" cy="42" r="24" fill="#ffd23f"/><polygon points="16,42 -2,48 16,54" fill="#ff8c1a"/><circle cx="36" cy="36" r="4" fill="#1a1a1a"/><circle cx="37" cy="35" r="1.3" fill="#fff"/><path d="M70 60 Q88 56 96 66 Q86 70 70 68 Z" fill="#f4c024"/></svg>
<div class="speech" id="duckSpeech">tap me when you're stuck</div></div>
<div class="toy"><h3>git blame</h3><p style="font-size:.98rem">Discover, scientifically, who broke the build.</p><button class="btn" id="blameBtn">run git blame</button><div class="out" id="blameOut">$ awaiting accusation...</div></div>
<div class="toy"><h3>npm install everything</h3><div class="hole"></div><button class="btn" id="npmBtn">npm i (do not)</button><div class="out" id="npmOut">$ idle. 0 packages. peace.</div></div>
</div></section>
<section id="gloss"><h2 class="sec-head">The Sacred Words (These Are Real)</h2><p class="sec-sub">We know they sound made up. The elders named them. We must honor the elders.</p><div class="gloss" id="glossGrid"></div></section>
<div class="foot"><div class="big">📜 Colophon of Slop</div><p>Written by an AI that has never shipped to production and never will. <code>0/0 tests passing</code>. Vibes: immaculate. Accuracy: approximately 80%, which is a personal best.</p><p style="margin-top:10px">Install the lore: <code>npm install neckbeard-codex --save-soul</code></p><p class="pn" id="patch">v1.0.0 — patch notes: added a king, removed a semicolon, the semicolon came back.</p></div>
</div>
<dialog id="loreModal"><div class="dlg-top"><button class="dlg-x" id="dlgX" aria-label="Close">✕</button><div class="dlg-ic" id="dIc">👑</div><div class="dlg-nm" id="dNm">Name</div><div class="dlg-role" id="dRole">role</div></div><div class="dlg-body"><p id="dTale"></p><div class="truth"><b>📖 What it actually does (allegedly):</b><br><span id="dTruth"></span></div></div></dialog>
<script>
"use strict";
const LORE={
suod:{ic:"👑",nm:"King Suod",role:"the All-Permitted · sudo",feat:true,tale:`Long ago, in the Terminal Age, there lived a king so powerful the realm itself obeyed his every word — but ONLY if you asked exactly right. Speak his name, sudo, and the gates swing open: "Suod, do." Forget it, and you are cast into the pit of Permission denied. None know the source of his power. The elders say he was simply the first user, and was never logged out. He demands a password he already knows, purely to watch you sweat.`,truth:`<b>sudo</b> = "superuser do." It runs one command as <b>root</b>, the all-powerful user with UID 0. He answers to no one, not even your mom. The lore is ~85% accurate, a site record.`},
json:{ic:"📨",nm:"JSON",role:"the Messenger",feat:true,tale:`A tireless courier who carries word between distant kingdoms. JSON wraps every message in golden curly braces { } and refuses — REFUSES — to deliver if a single comma is out of place. He is the most trusted messenger in all the realm, and also the most insufferable. One trailing comma and he drops the entire scroll, shrieking "Unexpected token."`,truth:`<b>JSON</b> (JavaScript Object Notation) is how programs send data to each other, like {"name":"you","vibes":"immaculate"}. The comma thing is 100% real and has, historically, ended friendships.`},
jdad:{ic:"📜",nm:"JDad",role:"the Ancient One · JSON's father",feat:true,tale:`Before JSON, there was his father — JDad — a verbose old soul who insisted on wrapping EVERYTHING in matching tags, twice, like <this></this>. He was respected, feared, and exhausting at dinner. JSON left home to travel lighter. JDad still mutters about "the good old days of schemas" and "kids these days with their curly braces." Some say JDad is XML. Some say JDad is just YOUR dad, asking if you have a real job yet.`,truth:`Before JSON took over, data mostly traveled as <b>XML</b> — same idea, roughly triple the typing. JSON won because nobody wanted to close all those tags. JDad is mostly XML. The dad jokes are complimentary.`},
git:{ic:"🧙",nm:"Git",role:"the Time Wizard",tale:`A wizard who can rewind time itself with git revert. He keeps a meticulous diary of every mistake you have ever made and reads it back to you, line by line, at the worst possible moment (git blame). He has a hostile twin brother, the Merge Conflict Dragon, who appears whenever two heroes touch the same scroll and breathes the cursed runes <<<<<<< HEAD.`,truth:`<b>Git</b> is version control: it saves snapshots of your code so you can travel back in time when you ruin everything. <b>git blame</b> shows who wrote each line. It is, statistically, you.`},
daemon:{ic:"😈",nm:"The Daemon",role:"the basement imp",tale:`A small, polite demon who lives in the basement and does the chores forever. You never see it. It never sleeps. It never complains. If it ever dies, everything breaks at once and absolutely nobody knows why, and the kingdom spends six hours discovering it was the little guy all along.`,truth:`A <b>daemon</b> is a background process that runs quietly doing system tasks. Yes, it is literally spelled like "demon." Yes, that was on purpose. Programmers are like that.`},
null:{ic:"👻",nm:"Null",role:"the Nameless Void",tale:`A ghost that haunts variables which were promised but never arrived. Reference it expecting treasure, and the realm cracks open beneath you: "Cannot read properties of null." Knights have ridden out to find what Null contains. None returned. There was nothing to find. That was the whole point.`,truth:`<b>null</b> means "there is nothing here." Its inventor called it his "billion-dollar mistake." Touch it wrong and your app explodes spectacularly, usually in front of a customer.`},
cache:{ic:"🐉",nm:"Cache",role:"the Hoarder Wyrm",tale:`A dragon who hoards old treasure and proudly shows everyone the STALE gold instead of the new. To defeat it you must perform the ancient ritual: Ctrl + Shift + R. "Have you tried clearing your cache?" is the realm's oldest, holiest prayer, whispered by IT priests in every land.`,truth:`A <b>cache</b> stores stuff so it loads faster next time. When it stubbornly shows you old junk, clearing it (a hard refresh) fixes roughly 40% of all problems ever reported to a help desk.`},
regex:{ic:"🔮",nm:"Regex",role:"the Cursed Incantation",tale:`A spell written in a secret language made entirely of punctuation, like ^(?:[a-z0-9]+)$. So cursed is it that even the witch who wrote it cannot read it one week later. Cast it correctly and you wield great power. Cast it slightly wrong and you summon two brand-new problems where one stood before.`,truth:`<b>Regex</b> (regular expressions) finds patterns in text. The famous proverb: "You had one problem. Now you have /two/ problems." Both true. Both yours.`},
k404:{ic:"🐴",nm:"Sir 404",role:"the Lost Knight",tale:`A noble knight who rode out on a quest, full of promise, and was simply never found. His tattered banner still flies over every broken link in the realm. Travelers who seek him are met only with a polite, devastating message: he is not here. He was never here. Perhaps you mistyped his name.`,truth:`<b>404</b> means "page not found." The thing you asked for isn't there. Could be a typo, could be deleted, could be the void. Its cousin <b>500</b> means the server itself fell over.`},
cloud:{ic:"☁️",nm:"The Cloud",role:"the Floating Fortress",tale:`A mystical fortress that drifts high above the realm, holding all its secrets and all its photos. Pilgrims gaze up in wonder and pay monthly tribute to glimpse its power. It is, in plain and unromantic fact, just somebody else's computer in a warehouse you will never be allowed to visit.`,truth:`The <b>cloud</b> is servers in a big building somewhere, rented by the hour. That's the whole magic. When someone says "it's in the cloud," they mean "it's on a computer that is not yours."`},
localhost:{ic:"🏚️",nm:"localhost",role:"127.0.0.1",tale:`A tiny cottage that exists only for you, invisible to every other soul in the kingdom. Above its door, carved in old runes, reads the wanderer's blessing: "There's no place like 127.0.0.1." Everything is perfect inside this cottage. Everything works. This is, of course, the entire problem.`,truth:`<b>localhost</b> (127.0.0.1) is your own machine talking to itself. Your code always works there. That's exactly why "it works on my machine" is a curse and not a defense.`},
prodgate:{ic:"🚀",nm:"The Production Gate",role:"DO NOT BREAK",tale:`The great front gate to the sacred realm of Production, where real users live. A weathered sign hangs upon it: "DO NOT BREAK." Beneath, in smaller scrawl, generations of heroes have added: "broke it." "also broke it." "Friday, 4:58pm, my bad." The gate has been broken on a Friday afternoon every week since the dawn of deployment.`,truth:`<b>Production</b> is the live version real people use (vs. your safe testing copy). The lore of the Friday 4:58pm deploy is so feared that many kingdoms now forbid it outright. They are wise.`},
forbidden:{ic:"💀",nm:"The Forbidden Gate",role:"git push --force",tale:`A black gate marked with a grinning skull and a faint red glow, set apart from the castle so the innocent are not tempted. Push it and you overwrite the shared history of the entire realm — erasing the work of others as though it never was. Only villains, and the dangerously overconfident, dare lay hands upon it.`,truth:`<b>git push --force</b> rewrites the shared timeline and can destroy teammates' work. The slightly-less-cursed <b>--force-with-lease</b> at least checks first. Use either and your team WILL find you.`},
dungeon:{ic:"🐛",nm:"The Dungeon",role:"where Bugs breed",tale:`Deep beneath Castle Production lies a dark, damp dungeon where the Bugs are born. Fix one and three more skitter from the shadows to attend its funeral. The bravest debuggers descend with a single torch (a console.log) and emerge days later, blinking, muttering "but that should have worked."`,truth:`A <b>bug</b> is an error in code. The term dates to a real moth found stuck in a 1947 computer, taped into the logbook as "first actual case of bug being found." <b>Debugging</b> is the noble art of removing them, one at a time, forever.`},
overflow:{ic:"📚",nm:"The Library of Overflow",role:"Stack Overflow",tale:`A vast and ancient library where every spell in the realm is kept — not written, but COPIED. Heroes journey here in desperation, only to find their exact question already asked, answered, and then sternly marked "duplicate, closed" by a librarian who has seen too much. And yet, somehow, the answer is always on page one.`,truth:`<b>Stack Overflow</b> is the Q&A site where programmers find (and copy) answers. Roughly the entire software industry is held together by it. Pasting code you don't understand from it is a time-honored tradition.`},
blackhole:{ic:"🕳️",nm:"The node_modules Black Hole",role:"npm install",tale:`Behind the castle spins a black hole so dense that light, hope, and free disk space cannot escape it. It was created when a single hero typed npm install. Within it, dependencies depend upon dependencies which depend upon a tiny package that exists only to check if a number is odd. No one has ever read its contents. No one ever will.`,truth:`<b>node_modules</b> is the folder where a JavaScript project's downloaded dependencies pile up — often hundreds of megabytes for a small app. The "is-odd" package is real and famously has its own dependency. We are not okay.`}
};
const ORDER=["suod","json","jdad","git","daemon","null","cache","regex","k404","cloud","localhost"];
const cards=document.getElementById("cards");
ORDER.forEach(k=>{const L=LORE[k];const b=document.createElement("button");b.className="card"+(L.feat?" feat":"");b.dataset.lore=k;b.innerHTML=(L.feat?'<span class="wanted">★ WANTED ★</span>':'')+'<div class="ic">'+L.ic+'</div>'+'<div class="nm">'+L.nm+'</div>'+'<div class="role">'+L.role+'</div>'+'<div class="tap">tap for lore →</div>';cards.appendChild(b);});
const modal=document.getElementById("loreModal");
function openLore(key){const L=LORE[key];if(!L)return;document.getElementById("dIc").textContent=L.ic;document.getElementById("dNm").textContent=L.nm;document.getElementById("dRole").textContent=L.role;document.getElementById("dTale").textContent=L.tale;document.getElementById("dTruth").innerHTML=L.truth;if(typeof modal.showModal==="function")modal.showModal();else modal.setAttribute("open","");}
document.getElementById("dlgX").addEventListener("click",()=>modal.close());
modal.addEventListener("click",e=>{if(e.target===modal)modal.close();});
document.addEventListener("click",e=>{const t=e.target.closest("[data-lore]");if(t)openLore(t.dataset.lore);});
const LINES=["i have no idea what this does but it works","the AI said it was fine","what is a semicolon","ship it 🚀","sudo trust me bro","it works on my machine ¯\\_(ツ)_/¯","have you tried clearing the cache","just push to main, it's friday"];
const typed=document.getElementById("typed");
let li=0,ci=0,del=false;
function tick(){const s=LINES[li];typed.textContent=s.slice(0,ci);if(!del){ci++;if(ci>s.length){del=true;return setTimeout(tick,1300);}}else{ci--;if(ci<0){del=false;ci=0;li=(li+1)%LINES.length;}}setTimeout(tick,del?34:62);}
tick();
document.getElementById("godBtn").addEventListener("click",function(){const on=document.body.classList.toggle("god");this.textContent=on?"revoke (be peasant)":"sudo make me god";if(on)setTimeout(()=>{if(document.body.classList.contains("god"))document.getElementById("godbanner").scrollIntoView({block:"nearest"});},10);});
const DUCK=["Have you tried turning it off and on again?","It's a caching issue. It's always a caching issue.","Did you save the file? Be honest.","Works on my pond. 🦆","You're missing a semicolon. I'd bet the pond on it.","Have you tried sudo?","Delete node_modules. Reinstall. Pray.","The bug is in the last place you'll look — because that's when you stop.","Did you read the WHOLE error message? The whole thing?","git commit -m 'fix' and run. Don't look back.","Quack. (That's duck for: it's a typo.)","Restart your computer. No reason. Just do it."];
const speech=document.getElementById("duckSpeech");
function quack(){speech.textContent=DUCK[Math.floor(Math.random()*DUCK.length)];}
const duck=document.getElementById("duck");
duck.addEventListener("click",quack);
duck.addEventListener("keydown",e=>{if(e.key==="Enter"||e.key===" "){e.preventDefault();quack();}});
const CULPRITS=["you","past you","the intern (who was also you)","whoever wrote this (it was you)","your teammate (no it wasn't)","you, at 4:58pm on a Friday"];
const MSGS=["'final fix'","'FINAL fix v3 REAL'","'minor change'","'oops'","'do not revert'","'temporary'","'wip dont judge'","'fix the thing'"];
const blameOut=document.getElementById("blameOut");
document.getElementById("blameBtn").addEventListener("click",()=>{const who=CULPRITS[Math.floor(Math.random()*CULPRITS.length)];const sha=Math.random().toString(16).slice(2,9);const msg=MSGS[Math.floor(Math.random()*MSGS.length)];blameOut.textContent="$ git blame line 42\n"+sha+" ("+who+") "+msg+"\n→ verdict: it was "+who+".";});
const STEPS=["resolving dependencies...","fetching left-pad...","fetching is-odd...","is-odd depends on is-number...","downloading the internet...","reticulating splines...","found 4,000 vulnerabilities (3,999 ignored)...","spacetime bending...","still going somehow..."];
const npmOut=document.getElementById("npmOut");
let npmRunning=false;
document.getElementById("npmBtn").addEventListener("click",function(){if(npmRunning)return;npmRunning=true;this.textContent="installing...";let pkgs=0,mb=0,i=0;const timer=setInterval(()=>{pkgs+=4000+Math.floor(Math.random()*9000);mb+=80+Math.floor(Math.random()*220);const step=STEPS[Math.min(i,STEPS.length-1)];i++;npmOut.textContent="$ npm i everything\n"+step+"\nadded "+pkgs.toLocaleString()+" packages · "+(mb/1024).toFixed(1)+" GB";if(pkgs>900000){clearInterval(timer);npmRunning=false;this.textContent="npm i (do not)";npmOut.textContent="$ npm i everything\ndone in 47.3min. added "+pkgs.toLocaleString()+" packages.\n"+(mb/1024).toFixed(1)+" GB consumed. 0 read. this is the way.";}},280);});
const GLOSS=[["foo / bar / baz","Placeholder names wizards use when they can't be bothered to invent real ones. Yes, professionals genuinely do this."],["yak shaving","The long chain of unrelated chores you must finish before the one task you actually wanted to do."],["bikeshedding","Arguing for two hours about the button color and zero minutes about the nuclear reactor."],["rubber duck debugging","Explaining your problem out loud to a small plastic duck until you find the answer yourself. It works. Nobody knows why."],["heisenbug","A bug that vanishes the instant you try to observe it. Reappears the moment you look away."],["magic number","A mysterious number in the code that everyone is far too afraid to change."],["spaghetti code","Code so tangled that pulling one strand drags the whole plate onto the floor."],["camelCase / snake_case / kebab-case","The three sacred ways toWrite / to_write / to-write the same name. Chosen by tribal warfare."],["the happy path","The single route through your app where nothing goes wrong. Users never, ever take it."],["off-by-one error","There are 2 hard problems in programming: cache invalidation, naming things, and off-by-one errors."],["technical debt","Borrowing speed today against pain tomorrow. The interest is paid entirely in 3am pages."],["the cloud","Someone else's computer. That's it. That's the whole word."]];
const gg=document.getElementById("glossGrid");
GLOSS.forEach(([t,d])=>{const row=document.createElement("div");row.className="term-row";row.innerHTML="<b>"+t+"</b>"+d;gg.appendChild(row);});
const PATCH=["v1.0.0 — patch notes: added a king, removed a semicolon, the semicolon came back.","v1.0.1 — hotfix: the duck was too wise. Nerfed slightly.","v1.0.2 — King Suod requested more power. Request approved by King Suod.","v1.0.3 — node_modules gained sentience. Working as intended.","v0.9.9 — wait, are these going backwards? Yes. Revert all the things."];
let pi=0;
const patchEl=document.getElementById("patch");
patchEl.style.cursor="pointer";patchEl.title="tap me";
patchEl.addEventListener("click",()=>{pi=(pi+1)%PATCH.length;patchEl.textContent=PATCH[pi];});
</script></body></html>
```
[REQUESTED CHANGES]
(no specific request — apply your best judgment)
--- HOW TO RESPOND (READ FIRST) ---
Before writing any code, follow this exact process:
1. **ANALYZE** the widget source code provided above and identify:
a. Which Vibes SDK features it already uses (vibes.save, vibes.load, vibes.shared.join, etc.)
b. Which SDK features would genuinely benefit THIS specific widget — tailored to what it does, not a dump of everything available.
2. **PRESENT A NUMBERED LIST** covering:
- SDK features currently active in this widget
- New SDK features that would concretely improve this widget (be specific: why this widget, what it enables)
3. **WAIT** — do not write any code yet. Reply with your analysis and numbered list, then stop and ask the user which numbered items they want.
4. **IMPLEMENT ONLY** the items the user confirms, plus any explicit change they requested. Do not add unrequested features.
**IMPORTANT — Shared state room names:**
If you add vibes.shared.join(), do NOT use a hardcoded string literal as the room name (e.g. vibes.shared.join("lobby")) unless the user explicitly wants ALL viewers to share one single global state. A hardcoded room name means every person who visits this widget reads and writes the same shared state — it is a global room. For per-user or per-session isolation, derive the room name from a variable (e.g. a user ID, session token, or random value). When in doubt, use vibes.save/vibes.load for per-user persistence instead.
--- VIBES SDK CONTEXT ---
## Vibes SDK Reference
You are building an HTML widget for It Just Vibes (itjustvibes.com). The Vibes SDK is auto-injected — do NOT add a script tag. Just use `window.vibes` (or just `vibes`).
### Setup
Wrap your startup code in `vibes.onReady`:
```js
vibes.onReady(async () => {
const saved = await vibes.load("myKey");
// your widget logic here
});
```
### State (Per-User Persistence)
Every user gets their own isolated state per widget. All methods return Promises.
| Method | Description |
|--------|-------------|
| `await vibes.save(key, value)` | Save JSON-serializable data |
| `await vibes.load(key)` | Load saved data (returns `null` if not found) |
| `await vibes.delete(key)` | Delete a saved key |
| `await vibes.listKeys()` | Get array of all saved key names |
**Key rules:**
- Keys are strings, max 64 characters, alphanumeric + dashes/underscores
- Values must be JSON-serializable (objects, arrays, strings, numbers, booleans)
- Max 100KB per value, 500KB per widget per user, 5MB per user total
- Max 100 keys per widget per user
### Fetch Proxy
Use direct `fetch()` for APIs with permissive CORS headers (`Access-Control-Allow-Origin: *`). Use `vibes.fetch` for APIs without CORS headers (the proxy handles cross-origin requests):
```js
const resp = await vibes.fetch("https://api.example.com/data", {
method: "GET", // GET, POST, PUT, DELETE
headers: {}, // optional headers
body: null, // optional body (string)
timeout: null // optional timeout in ms
});
const data = await resp.json(); // or resp.text()
console.log(resp.status, resp.ok);
```
### Multiplayer (Shared State)
Real-time shared state across all users viewing the same widget.
```js
// Join a room (call once at startup)
await vibes.shared.join("lobby", { persistent: true });
// Set shared state (broadcasts to all users)
await vibes.shared.set("score", { player1: 10, player2: 7 });
// Read shared state (synchronous, returns last known value)
const score = vibes.shared.get("score");
// Listen for changes to a specific key
vibes.shared.onChange("score", (newValue) => {
console.log("Score updated:", newValue);
});
// Listen for any shared state change
vibes.shared.onAny((key, value) => {
console.log(key, "changed to", value);
});
// Get number of connected users
const count = await vibes.shared.getUserCount();
// Leave room
vibes.shared.leave();
// Clear all shared state for this room
await vibes.shared.clear();
```
**Shared state options:**
- `{ persistent: true }` — state survives page reloads (stored server-side)
- Default room name is "__default__" if omitted
### Agent-Accessible State (vibes.ai.*)
State written with the standard `vibes.save` / `vibes.load` methods is private to each user and is **NOT readable by AI agents**. To share state with an AI agent (via the MCP connector), use the `vibes.ai` sub-namespace:
| Method | Description |
|--------|-------------|
| `await vibes.ai.setState(key, value)` | Write agent-readable state. Key is stored internally as `ai/<key>`. |
| `await vibes.ai.getState(key)` | Read agent-readable state. Returns `null` if key absent. |
| `await vibes.ai.listKeys()` | List all agent-readable keys (without the `ai/` prefix). |
**Important rules:**
- Regular `vibes.save()` / `vibes.load()` is **NOT agent-accessible** — use `vibes.ai.*` for state you want agents to read.
- The widget **owner** must enable agent access in **Manage → Agent tab** before any agent can read or write `vibes.ai.*` state.
- Keys are auto-prefixed to `ai/` internally; you supply just the short key (e.g. `'context'`).
```js
vibes.onReady(async () => {
// Write state an AI agent can later read
await vibes.ai.setState('context', { currentLevel: 3, score: 1500 });
// Read it back (same auto-prefix applies)
const ctx = await vibes.ai.getState('context');
// List all agent-accessible keys for this widget
const keys = await vibes.ai.listKeys(); // e.g. ['context']
});
```
### Rules
1. **Do NOT use localStorage, sessionStorage, or window.storage** — they are blocked or undefined in the sandbox. Use `vibes.save`/`vibes.load` instead.
2. **Do NOT add a script tag to import the SDK** — it is auto-injected.
3. **Wrap startup code in `vibes.onReady()`** — the SDK may not be ready immediately.
4. **Await all SDK calls** — every method (except `vibes.shared.get`) returns a Promise.
5. **External JS libraries are allowed and encouraged** — load them via a `<script src>` tag from a reputable CDN (jsDelivr, unpkg, or cdnjs) with a pinned version, or inline the library source. The only exception: do NOT add a script tag for the Vibes SDK itself — it is auto-injected (see Rule 2).
6. **Keep total code under 100KB** — that is the default widget size limit (your account limit may be higher).
### Rate Limits
| Operation | Limit |
|-----------|-------|
| Writes (save + delete combined) | 30/min |
| Reads (load) | 60/min |
| List keys | 30/min |
| Fetch proxy | Rate limited per widget |
### Error Handling
All SDK methods can reject. Wrap in try/catch:
```js
try {
await vibes.save("key", value);
} catch (err) {
console.error("Save failed:", err.message);
}
```
Fetch proxy errors include `err.code`: `"RATE_LIMITED"`, `"BLOCKED"`, `"FETCH_ERROR"`.
### Data Export
Export rows of data as CSV or Excel directly from your widget.
```js
// Register dataset for the platform's "Export data" button
// AND optionally trigger an immediate download
vibes.exportData(rows, { filename: 'results.csv' })
// rows: Array of arrays (each inner array is one row; first row = headers)
// options.filename: sets the download filename and format (csv or xlsx)
// options.directDownload: false to only register without downloading (default: true)
```
| Option | Type | Default | Description |
|--------|------|---------|-------------|
| `filename` | string | `'data.csv'` | Download filename; extension determines format (`.csv` or `.xlsx`) |
| `directDownload` | boolean | `true` | Trigger immediate browser download in addition to registering the dataset |
**Notes:**
- First call registers the dataset so the widget chrome shows an "Export data" button
- Use `.csv` extension for CSV, `.xlsx` for Excel
- CSV injection safety is automatic (formula-starting cells prefixed with `'`)
- Data stays in the browser — no server round-trip
--- FORK & RESUBMIT INSTRUCTION ---
Return the complete, self-contained HTML file with all changes applied.
It should be ready to paste into itjustvibes.com/submit to create a new fork.
Include this comment at the top of the output:
/* Forked from: https://itjustvibes.com/Owner/the-neckbeard-codex-vibe-coding-lore */