Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <meta | |
| name="viewport" | |
| content="width=device-width, initial-scale=1, viewport-fit=cover, maximum-scale=1" | |
| /> | |
| <meta name="theme-color" content="#7ec9b0" /> | |
| <title>Brainrot Lab — Attention Clinic</title> | |
| <link rel="preconnect" href="https://fonts.googleapis.com" /> | |
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /> | |
| <link | |
| href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;600&family=Public+Sans:wght@400;600;700&family=Syne:wght@600;700;800&display=swap" | |
| rel="stylesheet" | |
| /> | |
| <link rel="stylesheet" href="styles.css" /> | |
| </head> | |
| <body> | |
| <div class="wall" aria-hidden="true"></div> | |
| <div class="app" id="app"> | |
| <!-- HOME --> | |
| <section class="screen active" data-screen="home"> | |
| <p class="clinic-tag">Municipal Attention Clinic · Walk-ins welcome</p> | |
| <header class="brand"> | |
| <h1 class="logo"> | |
| <span class="logo-brain">BRAIN</span><span class="logo-rot">ROT</span> | |
| </h1> | |
| <p class="logo-sub">LABORATORY</p> | |
| <p class="tagline"> | |
| How cooked is your attention after years of feeds, maps, and | |
| autocomplete? | |
| </p> | |
| </header> | |
| <aside class="intake-stub" aria-hidden="true"> | |
| <div class="stub-perf"></div> | |
| <div class="stub-body"> | |
| <div class="stub-row"> | |
| <span>Form</span> | |
| <strong>ACL-07</strong> | |
| </div> | |
| <div class="stub-row"> | |
| <span>Scale</span> | |
| <strong>intact → fried</strong> | |
| </div> | |
| <div class="chart-bar"> | |
| <i id="homeMeter"></i> | |
| </div> | |
| <p class="stub-note">Keep this stub. Results stamp below.</p> | |
| </div> | |
| </aside> | |
| <div class="home-actions"> | |
| <button class="cta" id="speedRunBtn" type="button"> | |
| Start speed run | |
| <span class="cta-meta">5 probes · ~5 minutes</span> | |
| </button> | |
| <button class="cta ghost" id="labBtn" type="button"> | |
| Browse the lab | |
| <span class="cta-meta">One probe at a time</span> | |
| </button> | |
| </div> | |
| </section> | |
| <!-- LAB --> | |
| <section class="screen" data-screen="lab"> | |
| <header class="screen-head"> | |
| <button class="back" data-nav="home" type="button" aria-label="Back">←</button> | |
| <div> | |
| <p class="eyebrow">individual probes</p> | |
| <h2>The Lab</h2> | |
| </div> | |
| </header> | |
| <p class="probe-brief lab-intro"> | |
| Run each probe alone. Your chart fills in as you go — strengths on | |
| the left of fried, soft spots on the right. | |
| </p> | |
| <ul class="probe-list" id="probeList"></ul> | |
| <div class="profile-card ticket" id="profileCard" hidden> | |
| <div class="ticket-head"> | |
| <p class="eyebrow ink">patient chart</p> | |
| <span class="ticket-id">ACL-PROFILE</span> | |
| </div> | |
| <div class="trait-bars" id="traitBars"></div> | |
| </div> | |
| </section> | |
| <div class="run-hud" id="runHud" hidden> | |
| <div class="run-hud-inner ticket"> | |
| <div class="run-hud-row"> | |
| <span id="runProbeLabel">Probe 1 of 5</span> | |
| <strong id="runClock">5:00</strong> | |
| </div> | |
| <div class="chart-bar thin"> | |
| <i id="runProgress"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- FEED FREEZE --> | |
| <section class="screen" data-screen="feed-freeze"> | |
| <header class="screen-head tight probe-head"> | |
| <button class="back exit-probe" type="button" aria-label="Back">←</button> | |
| <div> | |
| <p class="eyebrow">doomscroll</p> | |
| <h2>Feed Freeze</h2> | |
| </div> | |
| <div class="timer" id="ffTimer">12.0</div> | |
| </header> | |
| <p class="probe-brief" id="ffBrief"> | |
| Scroll the phone. When the <em>real</em> post flashes, freeze — stop | |
| scrolling. Baits don’t count. | |
| </p> | |
| <div class="phone-bezel"> | |
| <div class="phone-notch" aria-hidden="true"></div> | |
| <div class="feed-stage" id="ffStage"> | |
| <div class="feed" id="ffFeed"></div> | |
| <div class="freeze-banner" id="ffBanner" hidden>FREEZE</div> | |
| </div> | |
| </div> | |
| <div class="probe-actions"> | |
| <button class="cta ghost" id="ffReady" type="button">I’m ready</button> | |
| <button class="cta" id="ffFreeze" type="button" hidden>I froze</button> | |
| </div> | |
| </section> | |
| <!-- LANDMARK --> | |
| <section class="screen" data-screen="landmark"> | |
| <header class="screen-head tight probe-head"> | |
| <button class="back exit-probe" type="button" aria-label="Back">←</button> | |
| <div> | |
| <p class="eyebrow">gps dependence</p> | |
| <h2>Landmark Labyrinth</h2> | |
| </div> | |
| <div class="timer" id="lmMoves">0</div> | |
| </header> | |
| <p class="probe-brief" id="lmBrief"> | |
| No compass. Face a direction, turn, walk. Street names only. | |
| </p> | |
| <div class="mission-chip" id="lmMission"></div> | |
| <div class="map-stage sketch" id="lmMap"></div> | |
| <div class="dpad"> | |
| <button type="button" class="dpad-btn" id="lmLeft" aria-label="Turn left">↺</button> | |
| <button type="button" class="dpad-btn primary" id="lmForward" aria-label="Walk">Walk</button> | |
| <button type="button" class="dpad-btn" id="lmRight" aria-label="Turn right">↻</button> | |
| </div> | |
| </section> | |
| <!-- SCENE SWAP --> | |
| <section class="screen" data-screen="scene-swap"> | |
| <header class="screen-head tight probe-head"> | |
| <button class="back exit-probe" type="button" aria-label="Back">←</button> | |
| <div> | |
| <p class="eyebrow">glance memory</p> | |
| <h2>Scene Swap</h2> | |
| </div> | |
| <div class="timer" id="ssTimer">3.0</div> | |
| </header> | |
| <p class="probe-brief" id="ssBrief"> | |
| Memorize the scene. Tap every change. False taps count against you. | |
| </p> | |
| <div class="scene-stage sketch" id="ssStage"></div> | |
| <div class="probe-actions"> | |
| <button class="cta ghost" id="ssReady" type="button">Show scene</button> | |
| <button class="cta" id="ssDone" type="button" hidden>That’s all</button> | |
| </div> | |
| </section> | |
| <!-- ANTI-COMPLETE --> | |
| <section class="screen" data-screen="anti-complete"> | |
| <header class="screen-head tight probe-head"> | |
| <button class="back exit-probe" type="button" aria-label="Back">←</button> | |
| <div> | |
| <p class="eyebrow">autocomplete gravity</p> | |
| <h2>Anti-Complete</h2> | |
| </div> | |
| </header> | |
| <p class="probe-brief"> | |
| Finish the line. Escape the bland suggestions — the clinic scores how | |
| predictable you sound. | |
| </p> | |
| <div class="compose-card ticket"> | |
| <p class="stem" id="acStem"></p> | |
| <div class="suggest-row" id="acSuggest"></div> | |
| <textarea | |
| id="acInput" | |
| class="ac-input" | |
| rows="3" | |
| maxlength="160" | |
| placeholder="write past the prediction" | |
| autocomplete="off" | |
| autocorrect="off" | |
| autocapitalize="off" | |
| spellcheck="false" | |
| ></textarea> | |
| </div> | |
| <div class="probe-actions"> | |
| <button class="cta" id="acSubmit" type="button">Lock it in</button> | |
| </div> | |
| </section> | |
| <!-- DEEP LINK --> | |
| <section class="screen" data-screen="deep-link"> | |
| <header class="screen-head tight probe-head"> | |
| <button class="back exit-probe" type="button" aria-label="Back">←</button> | |
| <div> | |
| <p class="eyebrow">context thrash</p> | |
| <h2>Deep Link Amnesia</h2> | |
| </div> | |
| <div class="timer" id="dlHop">0/3</div> | |
| </header> | |
| <p class="probe-brief" id="dlBrief"> | |
| Hold your starting question while the rabbit hole begs. | |
| </p> | |
| <div class="link-card ticket" id="dlCard"></div> | |
| <div class="probe-actions stacked" id="dlActions"></div> | |
| </section> | |
| <!-- INTERSTITIAL --> | |
| <section class="screen" data-screen="interstitial"> | |
| <div class="interstitial ticket"> | |
| <p class="eyebrow" id="ixEyebrow">probe cleared</p> | |
| <h2 id="ixTitle">Next up</h2> | |
| <p id="ixBlurb"></p> | |
| <div class="chart-bar thin"> | |
| <i id="ixMeter"></i> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- RESULT --> | |
| <section class="screen" data-screen="result"> | |
| <header class="screen-head"> | |
| <button class="back" id="resultBack" type="button" aria-label="Back">←</button> | |
| <div> | |
| <p class="eyebrow" id="resultEyebrow">results</p> | |
| <h2 id="resultTitle">Probe complete</h2> | |
| </div> | |
| </header> | |
| <div class="result-sheet ticket"> | |
| <p class="result-label" id="resultLabel">doomscroll impulse</p> | |
| <div class="score-stack"> | |
| <p class="result-score" id="resultScore">0</p> | |
| <div class="stamp" id="resultStamp" aria-hidden="true">MILD</div> | |
| </div> | |
| <p class="result-unit" id="resultUnit">brainrot pts</p> | |
| <p class="result-blurb" id="resultBlurb"></p> | |
| <div class="chart-bar"> | |
| <i id="resultMeter"></i> | |
| </div> | |
| </div> | |
| <div class="result-breakdown" id="resultBreakdown" hidden></div> | |
| <div class="probe-actions stacked"> | |
| <button class="cta" id="againBtn" type="button">Retry</button> | |
| <button class="cta ghost" id="resultSecondary" type="button">Back</button> | |
| </div> | |
| </section> | |
| </div> | |
| <script type="module" src="game.js"></script> | |
| </body> | |
| </html> | |