Spaces:
Sleeping
Sleeping
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Tolerate Space Lab</title> | |
| <link rel="stylesheet" href="/static/styles.css"> | |
| </head> | |
| <body> | |
| <div id="app"> | |
| <!-- SCREEN 1: Welcome & Onboarding --> | |
| <section id="welcome-screen" class="screen active"> | |
| <div class="welcome-container"> | |
| <h1>Tolerate Space Lab</h1> | |
| <p class="subtitle">A relational workout for building distress tolerance</p> | |
| <div class="welcome-content"> | |
| <div class="intro-text"> | |
| <p>This is a practice space for sitting with the uncertainty that arises when waiting for a response from someone who matters to you.</p> | |
| <p>You'll engage in a simulated text conversation. <strong>Responses will be intentionally delayed</strong> — and the delays will gradually stretch as you practice.</p> | |
| <p>While you wait, you're invited to notice what arises in your body. A gentle reflection space beside the conversation will hold whatever you discover.</p> | |
| </div> | |
| <div class="the-invitation"> | |
| <p><em>Imagine you're texting someone whose response matters to you — a partner, friend, family member, or someone you're getting to know. The AI will respond as that person might.</em></p> | |
| </div> | |
| <div class="practice-setup"> | |
| <h3>Set the Scene</h3> | |
| <div class="setup-row"> | |
| <label for="relationship-type">Who are you texting?</label> | |
| <select id="relationship-type"> | |
| <option value="partner">Partner</option> | |
| <option value="friend">Friend</option> | |
| <option value="family">Family member</option> | |
| <option value="new">Someone new</option> | |
| <option value="ex">Ex</option> | |
| </select> | |
| </div> | |
| <div class="setup-row"> | |
| <label for="person-name">Their name (optional)</label> | |
| <input type="text" id="person-name" placeholder="e.g., Sam"> | |
| </div> | |
| <div class="setup-row"> | |
| <label for="context">Brief context (optional)</label> | |
| <input type="text" id="context" placeholder="e.g., We were supposed to meet up today"> | |
| </div> | |
| </div> | |
| <div class="practice-options"> | |
| <h3>Practice Settings</h3> | |
| <div class="option-row"> | |
| <label class="toggle-label"> | |
| <input type="checkbox" id="show-timer" checked> | |
| <span class="toggle-text">Show wait timer</span> | |
| </label> | |
| <p class="option-description">Display elapsed seconds while waiting.</p> | |
| </div> | |
| <div class="option-row"> | |
| <label class="toggle-label"> | |
| <input type="checkbox" id="tension-mode"> | |
| <span class="toggle-text">Enable stretch mode</span> | |
| </label> | |
| <p class="option-description">They'll be distracted, brief, and not fully present — realistic friction to stretch your tolerance.</p> | |
| </div> | |
| </div> | |
| <button id="begin-btn" class="primary-btn">Begin Practice</button> | |
| <p class="disclaimer">This is a practice tool, not therapy. You can end the session at any time.</p> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- SCREEN 2: Practice Space --> | |
| <section id="practice-screen" class="screen"> | |
| <header class="practice-header"> | |
| <h2>Tolerate Space Lab</h2> | |
| <div class="session-info"> | |
| <span id="round-display">Round 1</span> | |
| </div> | |
| </header> | |
| <!-- Mobile tabs --> | |
| <div class="mobile-tabs"> | |
| <button class="tab-btn active" data-tab="conversation">Conversation</button> | |
| <button class="tab-btn" data-tab="journal">Reflection</button> | |
| </div> | |
| <div class="practice-container"> | |
| <!-- Left: Conversation --> | |
| <div class="conversation-panel" data-panel="conversation"> | |
| <div class="panel-header"> | |
| <h3>Conversation</h3> | |
| </div> | |
| <div id="messages" class="messages-container"> | |
| <!-- Messages will be inserted here --> | |
| </div> | |
| <div id="waiting-indicator" class="waiting-indicator hidden"> | |
| <div class="breathing-dots"> | |
| <span></span><span></span><span></span> | |
| </div> | |
| <span id="wait-timer">waiting...</span> | |
| </div> | |
| <div class="input-area"> | |
| <textarea id="user-input" placeholder="Type your message..." rows="2"></textarea> | |
| <button id="send-btn" class="send-btn">Send</button> | |
| </div> | |
| </div> | |
| <!-- Right: Somatic Journal --> | |
| <div class="journal-panel" data-panel="journal"> | |
| <div class="panel-header"> | |
| <h3>Somatic Reflection</h3> | |
| </div> | |
| <div class="journal-invitation"> | |
| <p id="current-invitation" class="invitation-text">With kindness, notice what's here...</p> | |
| </div> | |
| <div class="journal-input-area"> | |
| <textarea id="journal-input" placeholder="Whatever arises is welcome here..." rows="4"></textarea> | |
| <button id="save-reflection-btn" class="save-btn">Save Reflection</button> | |
| </div> | |
| <p class="journal-examples">You might notice: tightness, warmth, a flutter, stillness, restlessness, breath changes, nothing at all — all are welcome here.</p> | |
| <div class="journal-history"> | |
| <h4>Previous Reflections</h4> | |
| <div id="reflection-entries"> | |
| <!-- Entries will be inserted here --> | |
| </div> | |
| </div> | |
| <div class="end-session-area"> | |
| <button id="end-session-btn" class="end-session-btn">End Session</button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="grounding-link"> | |
| <a href="#" id="grounding-btn">Need to ground? Try a simple breath...</a> | |
| </div> | |
| </section> | |
| <!-- SCREEN 3: Session Analysis --> | |
| <section id="analysis-screen" class="screen"> | |
| <div class="analysis-container"> | |
| <h1>Session Complete</h1> | |
| <p class="subtitle">Let's reflect on what emerged</p> | |
| <div class="session-stats"> | |
| <div class="stat"> | |
| <span class="stat-number" id="total-exchanges">0</span> | |
| <span class="stat-label">Exchanges</span> | |
| </div> | |
| <div class="stat"> | |
| <span class="stat-number" id="delay-range">0-0s</span> | |
| <span class="stat-label">Delay Range</span> | |
| </div> | |
| <div class="stat"> | |
| <span class="stat-number" id="total-reflections">0</span> | |
| <span class="stat-label">Reflections</span> | |
| </div> | |
| </div> | |
| <div class="journal-review"> | |
| <h3>Your Somatic Journey</h3> | |
| <div id="all-reflections"> | |
| <!-- All reflections displayed here --> | |
| </div> | |
| </div> | |
| <div class="pattern-analysis"> | |
| <h3>Patterns & Themes</h3> | |
| <div id="analysis-content" class="analysis-text"> | |
| <p class="loading-text">Reflecting on your journey...</p> | |
| </div> | |
| </div> | |
| <div class="bridge-section"> | |
| <h3>Bridge to Human Connection</h3> | |
| <p>What from this practice might you bring to a therapist, partner, or trusted person?</p> | |
| <textarea id="bridge-reflection" placeholder="Take a moment to consider..." rows="3"></textarea> | |
| </div> | |
| <div class="action-buttons"> | |
| <button id="export-btn" class="secondary-btn">Export Session</button> | |
| <button id="new-session-btn" class="primary-btn">New Practice</button> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Grounding Modal --> | |
| <div id="grounding-modal" class="modal hidden"> | |
| <div class="modal-content"> | |
| <button class="close-modal">×</button> | |
| <h3>A Simple Breath</h3> | |
| <p>Find your feet on the ground. Notice where your body meets the chair or floor.</p> | |
| <p>Take a slow breath in... and let it go at its own pace.</p> | |
| <p>You're here. This is practice. You can stop anytime.</p> | |
| <button id="close-grounding" class="primary-btn">Return to Practice</button> | |
| </div> | |
| </div> | |
| </div> | |
| <script src="/static/app.js"></script> | |
| </body> | |
| </html> | |