Spaces:
Running
Running
File size: 10,212 Bytes
48edd44 b6a8769 48edd44 b6a8769 48edd44 2d28d59 48edd44 2d28d59 48edd44 2d28d59 48edd44 4a6e944 48edd44 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 |
<!DOCTYPE html>
<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>
|