Spaces:
Runtime error
Runtime error
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| <title>VADUGWI — Read the Room</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=Hanken+Grotesk:wght@400;500;600;700&family=Newsreader:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400;1,500&display=swap" rel="stylesheet"> | |
| <link rel="stylesheet" href="styles.css?v=5"> | |
| </head> | |
| <body> | |
| <div id="app-root" data-theme="paper" class="rtr-root"> | |
| <!-- theme toggle --> | |
| <button id="theme-toggle" aria-label="Toggle theme" class="rtr-theme-toggle">☾</button> | |
| <!-- ===================== INTRO ===================== --> | |
| <section id="phase-intro" class="rtr-intro"> | |
| <div class="rtr-intro-eyebrow">An Emotional Baseline</div> | |
| <h1 class="rtr-intro-title">How do you read<br>the room?</h1> | |
| <p class="rtr-intro-sub">Fifty — situations and words. Your gut reaction. There are no wrong answers.</p> | |
| <div id="intro-gradient" class="rtr-intro-gradient"></div> | |
| <div class="rtr-intro-body"> | |
| <p>You'll see things that happen to people. Some are clearly bad. Some are clearly good. Many could go either way.</p> | |
| <p>Rate each from <strong class="rtr-clay">hits hard</strong> to <strong class="rtr-green">feels good</strong>. The middle means it doesn't move you at all.</p> | |
| <p>This measures how you <em class="rtr-serif">interpret</em> situations — your emotional lens, not objective truth.</p> | |
| </div> | |
| <div class="rtr-intro-actions"> | |
| <button id="begin-btn" class="rtr-btn-primary">Begin assessment →</button> | |
| <span id="pool-line" class="rtr-pool-line">Preparing your situations…</span> | |
| </div> | |
| <p class="rtr-pool-line rtr-privacy-line">Your anonymous ratings help improve the engine. No account, no tracking.</p> | |
| </section> | |
| <!-- ===================== TEST ===================== --> | |
| <section id="phase-test" class="rtr-test" hidden> | |
| <!-- progress --> | |
| <div class="rtr-progress-bar"> | |
| <div class="rtr-progress-track"> | |
| <div id="progress-fill" class="rtr-progress-fill"></div> | |
| </div> | |
| <div class="rtr-progress-meta"> | |
| <span class="rtr-progress-label">Read the Room</span> | |
| <span id="progress-text" class="rtr-progress-count">0 / 0</span> | |
| </div> | |
| </div> | |
| <!-- question --> | |
| <div class="rtr-question-wrap"> | |
| <div id="question-card" class="rtr-card"> | |
| <div id="q-index" class="rtr-q-index">Situation 01 / 50</div> | |
| <p id="word-prompt" class="rtr-word-prompt" hidden></p> | |
| <p id="probe-text" class="rtr-probe-text"></p> | |
| <!-- value display --> | |
| <div class="rtr-value-block"> | |
| <div id="value-display" class="rtr-value-display">–</div> | |
| <div id="value-word" class="rtr-value-word">Drag or tap the line</div> | |
| </div> | |
| <!-- spectrum rail --> | |
| <div id="rail" class="rtr-rail" tabindex="0"> | |
| <div id="rail-gradient" class="rtr-rail-gradient"></div> | |
| <div id="rail-ticks" class="rtr-rail-ticks"></div> | |
| <div id="rail-thumb" class="rtr-rail-thumb"></div> | |
| </div> | |
| <!-- anchor labels --> | |
| <div class="rtr-anchors"> | |
| <span class="rtr-clay rtr-anchor-w">Hits hard</span> | |
| <span>Doesn't affect me</span> | |
| <span class="rtr-green rtr-anchor-w">Feels good</span> | |
| </div> | |
| <!-- nav --> | |
| <div class="rtr-nav"> | |
| <button id="prev-btn" class="rtr-btn-back">← Back</button> | |
| <button id="next-btn" class="rtr-btn-next">Next →</button> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- ===================== RESULTS ===================== --> | |
| <section id="phase-results" class="rtr-results" hidden> | |
| <div> | |
| <div class="rtr-results-eyebrow">Your VADUGWI Baseline</div> | |
| <h1 class="rtr-results-title">Your emotional baseline</h1> | |
| <p class="rtr-results-sub">Seven dimensions — how your system reads the world.</p> | |
| </div> | |
| <!-- headline archetype --> | |
| <div id="headline-card" class="rtr-headline-card" hidden> | |
| <div class="rtr-headline-eyebrow">The pattern</div> | |
| <div id="headline-title" class="rtr-headline-title"></div> | |
| <p id="headline-body" class="rtr-headline-body"></p> | |
| </div> | |
| <!-- profile (dimension bars) --> | |
| <div class="rtr-panel"> | |
| <div class="rtr-panel-title">The seven dimensions</div> | |
| <p class="rtr-panel-sub">Each bar leans from one tendency toward its opposite.</p> | |
| <div id="dim-rows"></div> | |
| </div> | |
| <!-- insights --> | |
| <div class="rtr-panel"> | |
| <div class="rtr-panel-title">What this means</div> | |
| <div id="insight-list"></div> | |
| </div> | |
| <!-- tier resilience read --> | |
| <div id="tier-panel" class="rtr-panel" hidden> | |
| <div class="rtr-panel-title">Floor, ceiling, baseline</div> | |
| <p class="rtr-panel-sub">How hard the painful ones land, how much of the good you let in, and which way you tilt the neutral ones.</p> | |
| <div id="tier-read"></div> | |
| </div> | |
| <!-- callbacks --> | |
| <div id="callback-panel" class="rtr-panel" hidden> | |
| <div class="rtr-panel-title">What you reacted to</div> | |
| <p class="rtr-panel-sub">The specific scenarios that moved you most — or moved you against type.</p> | |
| <div id="callback-list"></div> | |
| </div> | |
| <!-- how you read words --> | |
| <div id="wordgap-panel" class="rtr-panel" hidden> | |
| <div class="rtr-panel-title">How you read words</div> | |
| <p class="rtr-panel-sub">Fifteen charged words, and how your rating compares to what the engine knows.</p> | |
| <div id="wordgap-list"></div> | |
| <p class="rtr-panel-sub rtr-privacy-line" style="margin-top:18px;margin-bottom:0;">Your anonymous ratings help improve the engine. No account, no tracking.</p> | |
| </div> | |
| <!-- breakdown --> | |
| <div class="rtr-panel"> | |
| <div class="rtr-panel-title">Your responses</div> | |
| <p class="rtr-panel-sub">Every situation you rated, grouped by what it was testing.</p> | |
| <div id="breakdown-list"></div> | |
| </div> | |
| <!-- disclaimer --> | |
| <div class="rtr-disclaimer"> | |
| <p>This is not a clinical assessment. It measures emotional interpretation patterns — same situations, different people, different readings. Your results reflect your current lens, not objective truth.</p> | |
| <p>If your results concern you, consider talking to someone you trust.</p> | |
| <p class="rtr-clay rtr-lifeline">988 Suicide & Crisis Lifeline — call or text 988</p> | |
| </div> | |
| <div class="rtr-restart-wrap"> | |
| <button id="restart-btn" class="rtr-btn-ghost">Take it again →</button> | |
| </div> | |
| </section> | |
| </div> | |
| <script defer src="pool.js?v=5"></script> | |
| <script defer src="compute.js?v=5"></script> | |
| <script defer src="interpret.js?v=5"></script> | |
| <script defer src="app.js?v=5"></script> | |
| </body> | |
| </html> | |