Delete templates
Browse files- templates/index.html +0 -456
templates/index.html
DELETED
|
@@ -1,456 +0,0 @@
|
|
| 1 |
-
<!DOCTYPE html>
|
| 2 |
-
<html lang="en">
|
| 3 |
-
<head>
|
| 4 |
-
<meta charset="UTF-8">
|
| 5 |
-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
| 6 |
-
<title>Serinity - Mental Healthcare</title>
|
| 7 |
-
<link rel="icon" type="image/svg+xml" href="/static/icons/logo.svg">
|
| 8 |
-
<script src="https://cdn.tailwindcss.com"></script>
|
| 9 |
-
<link rel="stylesheet" href="/static/css/style.css">
|
| 10 |
-
<script>
|
| 11 |
-
tailwind.config = {
|
| 12 |
-
theme: {
|
| 13 |
-
extend: {
|
| 14 |
-
colors: {
|
| 15 |
-
paper: '#F6F3EE',
|
| 16 |
-
ink: '#262521',
|
| 17 |
-
moss: '#4B6358',
|
| 18 |
-
clay: '#9C7A5B',
|
| 19 |
-
signal: '#B4483C'
|
| 20 |
-
}
|
| 21 |
-
}
|
| 22 |
-
}
|
| 23 |
-
}
|
| 24 |
-
</script>
|
| 25 |
-
</head>
|
| 26 |
-
<body class="bg-paper text-ink min-h-screen flex flex-col font-body">
|
| 27 |
-
|
| 28 |
-
<!-- Loading Screen -->
|
| 29 |
-
<div id="loadingScreen" class="fixed inset-0 bg-paper z-50 flex flex-col items-center justify-center transition-opacity duration-500">
|
| 30 |
-
<h1 class="logo-text">Serinity</h1>
|
| 31 |
-
<div class="loading-dots" id="loadingDots">
|
| 32 |
-
<span></span>
|
| 33 |
-
<span></span>
|
| 34 |
-
<span></span>
|
| 35 |
-
</div>
|
| 36 |
-
<button class="btn-primary mt-8" id="startButton" disabled>
|
| 37 |
-
Initializing...
|
| 38 |
-
</button>
|
| 39 |
-
<p id="wakeupText" class="text-sm text-clay mt-4 text-center max-w-xs mx-auto font-utility">
|
| 40 |
-
Validating credentials...
|
| 41 |
-
</p>
|
| 42 |
-
</div>
|
| 43 |
-
|
| 44 |
-
<!-- Auth Screen -->
|
| 45 |
-
<div id="authScreen" style="display: none;" class="fixed inset-0 bg-paper z-40 flex flex-col items-center justify-center p-4 overflow-y-auto custom-scrollbar">
|
| 46 |
-
<div class="panel p-8 max-w-md w-full my-auto shadow-sm">
|
| 47 |
-
|
| 48 |
-
<!-- Logo/Branding -->
|
| 49 |
-
<div class="flex items-center gap-3 mb-8 justify-center">
|
| 50 |
-
<img src="/static/icons/logo.svg" alt="Serinity Logo" class="w-10 h-10">
|
| 51 |
-
<h2 class="text-3xl font-display text-ink">Serinity</h2>
|
| 52 |
-
</div>
|
| 53 |
-
|
| 54 |
-
<!-- Login Form -->
|
| 55 |
-
<div id="loginFormContainer" class="block space-y-5">
|
| 56 |
-
<div>
|
| 57 |
-
<label class="block text-xs font-utility text-clay uppercase mb-1">Username / Email *</label>
|
| 58 |
-
<input type="text" id="loginUsername" placeholder="Username or Email" class="w-full bg-paper border border-ink p-3 text-ink focus:outline-none focus:border-moss transition">
|
| 59 |
-
</div>
|
| 60 |
-
<div>
|
| 61 |
-
<label class="block text-xs font-utility text-clay uppercase mb-1">Password</label>
|
| 62 |
-
<input type="password" id="loginPassword" class="w-full bg-paper border border-ink p-3 text-ink focus:outline-none focus:border-moss transition" placeholder="Enter password">
|
| 63 |
-
</div>
|
| 64 |
-
<div class="flex justify-between items-center text-xs font-utility uppercase tracking-widest mt-2">
|
| 65 |
-
<button id="showForgotPwdBtn" class="text-clay hover:text-ink transition">Forgot Password?</button>
|
| 66 |
-
</div>
|
| 67 |
-
<button id="loginBtn" class="w-full btn-primary py-3 font-utility uppercase tracking-widest text-sm mt-4">
|
| 68 |
-
Log In
|
| 69 |
-
</button>
|
| 70 |
-
<div class="text-center mt-6 border-t border-ink/20 pt-6">
|
| 71 |
-
<p class="text-xs text-clay font-utility uppercase tracking-widest mb-3">New Patient?</p>
|
| 72 |
-
<button id="showSignupBtn" class="w-full bg-transparent border border-ink text-ink hover:bg-ink hover:text-paper transition py-3 font-utility uppercase tracking-widest text-sm">
|
| 73 |
-
Create Account
|
| 74 |
-
</button>
|
| 75 |
-
</div>
|
| 76 |
-
</div>
|
| 77 |
-
|
| 78 |
-
<!-- Signup Form -->
|
| 79 |
-
<div id="signupFormContainer" class="hidden space-y-4">
|
| 80 |
-
<div>
|
| 81 |
-
<label class="block text-xs font-utility text-clay uppercase mb-1">Full Name *</label>
|
| 82 |
-
<input type="text" id="signupName" class="w-full bg-paper border border-ink p-2 text-ink focus:outline-none focus:border-moss" placeholder="Jane Doe">
|
| 83 |
-
</div>
|
| 84 |
-
<div class="grid grid-cols-3 gap-4">
|
| 85 |
-
<div>
|
| 86 |
-
<label class="block text-xs font-utility text-clay uppercase mb-1">Username *</label>
|
| 87 |
-
<input type="text" id="signupUsername" class="w-full bg-paper border border-ink p-2 text-ink focus:outline-none focus:border-moss">
|
| 88 |
-
</div>
|
| 89 |
-
<div>
|
| 90 |
-
<label class="block text-xs font-utility text-clay uppercase mb-1">Gender *</label>
|
| 91 |
-
<select id="signupGender" class="w-full bg-paper border border-ink p-2 text-ink focus:outline-none focus:border-moss">
|
| 92 |
-
<option value="">Select</option>
|
| 93 |
-
<option value="Male">Male</option>
|
| 94 |
-
<option value="Female">Female</option>
|
| 95 |
-
<option value="Other">Other</option>
|
| 96 |
-
</select>
|
| 97 |
-
</div>
|
| 98 |
-
<div>
|
| 99 |
-
<label class="block text-xs font-utility text-clay uppercase mb-1">Age</label>
|
| 100 |
-
<input type="number" id="signupAge" min="5" max="99" class="w-full bg-paper border border-ink p-2 text-ink focus:outline-none focus:border-moss">
|
| 101 |
-
</div>
|
| 102 |
-
</div>
|
| 103 |
-
<div>
|
| 104 |
-
<label class="block text-xs font-utility text-clay uppercase mb-1">Email *</label>
|
| 105 |
-
<input type="email" id="signupEmail" class="w-full bg-paper border border-ink p-2 text-ink focus:outline-none focus:border-moss" placeholder="jane@example.com">
|
| 106 |
-
</div>
|
| 107 |
-
<div>
|
| 108 |
-
<label class="block text-xs font-utility text-clay uppercase mb-1">Password *</label>
|
| 109 |
-
<input type="password" id="signupPassword" class="w-full bg-paper border border-ink p-2 text-ink focus:outline-none focus:border-moss">
|
| 110 |
-
</div>
|
| 111 |
-
<div class="grid grid-cols-2 gap-4">
|
| 112 |
-
<div class="relative" id="nationalityWrapper">
|
| 113 |
-
<label class="block text-xs font-utility text-clay uppercase mb-1" title="For cultural context">Nationality *</label>
|
| 114 |
-
<input type="text" id="signupNationality" autocomplete="off" class="w-full bg-paper border border-ink p-2 text-ink focus:outline-none focus:border-moss" placeholder="e.g. India">
|
| 115 |
-
<div id="nationalityDropdown" class="hidden absolute left-0 right-0 top-full mt-1 bg-paper border border-ink z-50 max-h-48 overflow-y-auto shadow-lg">
|
| 116 |
-
<!-- Populated by JS -->
|
| 117 |
-
</div>
|
| 118 |
-
</div>
|
| 119 |
-
<div>
|
| 120 |
-
<label class="block text-xs font-utility text-clay uppercase mb-1">Primary Concern *</label>
|
| 121 |
-
<select id="signupConcern" class="w-full bg-paper border border-ink p-2 text-ink focus:outline-none focus:border-moss">
|
| 122 |
-
<option value="">Select...</option>
|
| 123 |
-
<option value="Anxiety">Anxiety</option>
|
| 124 |
-
<option value="Depression">Depression</option>
|
| 125 |
-
<option value="Stress">Stress</option>
|
| 126 |
-
<option value="Sleep">Sleep Issues</option>
|
| 127 |
-
<option value="General">General Wellness</option>
|
| 128 |
-
<option value="Other">Other</option>
|
| 129 |
-
</select>
|
| 130 |
-
</div>
|
| 131 |
-
</div>
|
| 132 |
-
<div class="grid grid-cols-2 gap-4">
|
| 133 |
-
<div>
|
| 134 |
-
<label class="block text-xs font-utility text-clay uppercase mb-1">Emergency Contact Name</label>
|
| 135 |
-
<input type="text" id="signupEmergencyName" class="w-full bg-paper border border-ink p-2 text-ink focus:outline-none focus:border-moss" placeholder="John Doe">
|
| 136 |
-
</div>
|
| 137 |
-
<div>
|
| 138 |
-
<label class="block text-xs font-utility text-clay uppercase mb-1">Emergency Contact Phone</label>
|
| 139 |
-
<input type="tel" id="signupEmergencyPhone" class="w-full bg-paper border border-ink p-2 text-ink focus:outline-none focus:border-moss" placeholder="+1 234 567 8900">
|
| 140 |
-
</div>
|
| 141 |
-
</div>
|
| 142 |
-
|
| 143 |
-
<button id="signupGetOtpBtn" class="w-full btn-primary py-3 font-utility uppercase tracking-widest text-sm mt-4">
|
| 144 |
-
Get OTP
|
| 145 |
-
</button>
|
| 146 |
-
|
| 147 |
-
<button id="backToLoginBtn1" class="w-full bg-transparent text-clay hover:text-ink transition py-3 font-utility uppercase tracking-widest text-xs mt-2">
|
| 148 |
-
← Back to Login
|
| 149 |
-
</button>
|
| 150 |
-
</div>
|
| 151 |
-
|
| 152 |
-
<!-- Forgot Password Form -->
|
| 153 |
-
<div id="forgotPwdFormContainer" class="hidden space-y-4">
|
| 154 |
-
<p class="text-sm text-clay font-body mb-4">Enter your email address and we will send you a 6-digit verification code to reset your password.</p>
|
| 155 |
-
<div>
|
| 156 |
-
<label class="block text-xs font-utility text-clay uppercase mb-1">Email Address</label>
|
| 157 |
-
<input type="email" id="forgotPwdEmail" class="w-full bg-paper border border-ink p-3 text-ink focus:outline-none focus:border-moss transition" placeholder="jane@example.com">
|
| 158 |
-
</div>
|
| 159 |
-
<button id="requestOtpBtn" class="w-full btn-primary py-3 font-utility uppercase tracking-widest text-sm mt-2">
|
| 160 |
-
Send Code
|
| 161 |
-
</button>
|
| 162 |
-
<button id="backToLoginBtn2" class="w-full bg-transparent text-clay hover:text-ink transition py-3 font-utility uppercase tracking-widest text-xs mt-2">
|
| 163 |
-
← Back to Login
|
| 164 |
-
</button>
|
| 165 |
-
</div>
|
| 166 |
-
|
| 167 |
-
<!-- Reset Password Step 1: OTP Verification -->
|
| 168 |
-
<div id="otpStepContainer" class="hidden space-y-4">
|
| 169 |
-
<p class="text-sm text-clay font-body mb-4 text-center">We've sent a 6-digit code to your email.</p>
|
| 170 |
-
<div>
|
| 171 |
-
<label class="block text-xs font-utility text-clay uppercase mb-1">6-Digit Code</label>
|
| 172 |
-
<input type="text" id="resetOtpCode" class="w-full bg-paper border border-ink p-3 text-ink focus:outline-none focus:border-moss text-center tracking-widest font-mono text-lg" placeholder="000000" maxlength="6" inputmode="numeric">
|
| 173 |
-
</div>
|
| 174 |
-
<button id="verifyOtpBtn" class="w-full btn-primary py-3 font-utility uppercase tracking-widest text-sm mt-2">
|
| 175 |
-
Verify Code
|
| 176 |
-
</button>
|
| 177 |
-
<button id="backToForgotBtn" class="w-full bg-transparent text-clay hover:text-ink transition py-3 font-utility uppercase tracking-widest text-xs mt-2">
|
| 178 |
-
← Back
|
| 179 |
-
</button>
|
| 180 |
-
</div>
|
| 181 |
-
|
| 182 |
-
<!-- Reset Password Step 2: New Password (no back button) -->
|
| 183 |
-
<div id="newPwdStepContainer" class="hidden space-y-4">
|
| 184 |
-
<p class="text-sm text-clay font-body mb-4 text-center">OTP verified. Enter your new password below.</p>
|
| 185 |
-
<div>
|
| 186 |
-
<label class="block text-xs font-utility text-clay uppercase mb-1">New Password</label>
|
| 187 |
-
<input type="password" id="resetNewPassword" class="w-full bg-paper border border-ink p-3 text-ink focus:outline-none focus:border-moss" placeholder="Min. 8 characters">
|
| 188 |
-
</div>
|
| 189 |
-
<button id="submitResetBtn" class="w-full btn-primary py-3 font-utility uppercase tracking-widest text-sm mt-2">
|
| 190 |
-
Update Password
|
| 191 |
-
</button>
|
| 192 |
-
</div>
|
| 193 |
-
|
| 194 |
-
<!-- Signup Step 2: OTP Verification -->
|
| 195 |
-
<div id="signupOtpStepContainer" class="hidden space-y-4">
|
| 196 |
-
<p class="text-sm text-clay font-body mb-4 text-center">We've sent a 6-digit code to your email.</p>
|
| 197 |
-
<div>
|
| 198 |
-
<label class="block text-xs font-utility text-clay uppercase mb-1">6-Digit Code *</label>
|
| 199 |
-
<input type="text" id="signupOtpCode" class="w-full bg-paper border border-ink p-3 text-ink focus:outline-none focus:border-moss text-center tracking-widest font-mono text-lg" placeholder="000000" maxlength="6" inputmode="numeric">
|
| 200 |
-
</div>
|
| 201 |
-
<button id="signupCompleteBtn" class="w-full btn-primary py-3 font-utility uppercase tracking-widest text-sm mt-2">
|
| 202 |
-
Complete Signup
|
| 203 |
-
</button>
|
| 204 |
-
<button id="backToSignupBtn" class="w-full bg-transparent text-clay hover:text-ink transition py-3 font-utility uppercase tracking-widest text-xs mt-2">
|
| 205 |
-
← Back to Signup
|
| 206 |
-
</button>
|
| 207 |
-
</div>
|
| 208 |
-
|
| 209 |
-
</div>
|
| 210 |
-
</div>
|
| 211 |
-
|
| 212 |
-
<!-- Profile Selection Screen Removed -->
|
| 213 |
-
|
| 214 |
-
<!-- Patient Dashboard -->
|
| 215 |
-
<div class="hidden max-w-5xl mx-auto w-full h-screen p-4 flex-col fade-in overflow-hidden" id="dashboardScreen">
|
| 216 |
-
<div class="bg-paper border border-ink p-6 lg:p-10 flex-1 flex flex-col min-h-0 h-full">
|
| 217 |
-
|
| 218 |
-
<!-- Header -->
|
| 219 |
-
<div class="flex justify-between items-start border-b border-ink/30 pb-6 mb-6 shrink-0">
|
| 220 |
-
<div>
|
| 221 |
-
<h2 class="text-3xl font-display text-ink" id="dashboardPatientName">Patient Name</h2>
|
| 222 |
-
<p class="text-xs font-utility tracking-widest uppercase text-clay mt-2" id="dashboardPatientAge">Age: --</p>
|
| 223 |
-
</div>
|
| 224 |
-
<button class="btn-primary" id="dashboardStartBtn">NEW SESSION</button>
|
| 225 |
-
</div>
|
| 226 |
-
|
| 227 |
-
<!-- Content -->
|
| 228 |
-
<div class="grid grid-cols-1 md:grid-cols-2 gap-10 flex-1 min-h-0 overflow-hidden" id="dashboardContent">
|
| 229 |
-
<!-- Profile left -->
|
| 230 |
-
<div class="space-y-6 overflow-y-auto pr-4 custom-scrollbar" id="dashboardDomains">
|
| 231 |
-
<h3 class="font-utility uppercase text-clay text-sm border-b border-ink/30 pb-2">Clinical Profile</h3>
|
| 232 |
-
<p class="text-clay text-sm italic">Loading profile data...</p>
|
| 233 |
-
</div>
|
| 234 |
-
|
| 235 |
-
<!-- Column 2: Session History -->
|
| 236 |
-
<div class="flex flex-col min-h-0 h-full">
|
| 237 |
-
<h3 class="font-utility uppercase text-clay text-sm border-b border-ink/30 pb-2 mb-4 shrink-0">Session History</h3>
|
| 238 |
-
<div id="dashboardSessionsList" class="flex-1 overflow-y-auto pr-4 space-y-4 custom-scrollbar">
|
| 239 |
-
<p class="text-clay text-sm italic">Loading previous sessions...</p>
|
| 240 |
-
</div>
|
| 241 |
-
</div>
|
| 242 |
-
</div>
|
| 243 |
-
|
| 244 |
-
<div class="mt-8 pt-6 border-t border-ink/30 shrink-0 flex flex-wrap justify-between items-center gap-4">
|
| 245 |
-
<button class="text-xs font-utility tracking-widest text-clay hover:text-ink uppercase transition flex items-center gap-2" id="dashboardLogoutBtn">
|
| 246 |
-
<span>←</span> LOGOUT
|
| 247 |
-
</button>
|
| 248 |
-
<div class="flex gap-4">
|
| 249 |
-
<button class="text-xs font-utility tracking-widest text-signal border border-signal hover:bg-signal hover:text-paper uppercase transition px-4 py-2 flex items-center gap-2" id="dashboardResetBtn">
|
| 250 |
-
RESET DATA
|
| 251 |
-
</button>
|
| 252 |
-
<button class="text-xs font-utility tracking-widest text-paper bg-signal hover:bg-signal/90 uppercase transition px-4 py-2 flex items-center gap-2" id="dashboardDeleteBtn">
|
| 253 |
-
DELETE ACCOUNT
|
| 254 |
-
</button>
|
| 255 |
-
</div>
|
| 256 |
-
</div>
|
| 257 |
-
</div>
|
| 258 |
-
</div>
|
| 259 |
-
|
| 260 |
-
<!-- Main App (Hidden Initially) -->
|
| 261 |
-
<div id="mainApp" style="display: none;" class="flex flex-col h-screen">
|
| 262 |
-
<!-- Header -->
|
| 263 |
-
<header class="bg-paper border-b border-ink sticky top-0 z-50 py-2 md:py-3 shadow-sm">
|
| 264 |
-
<div class="w-full px-3 md:px-12 mx-auto flex items-center justify-between gap-1 md:gap-2">
|
| 265 |
-
|
| 266 |
-
<!-- Left: Logo & Title -->
|
| 267 |
-
<div class="flex items-center gap-2 md:gap-4 shrink-0 min-w-0">
|
| 268 |
-
<img src="/static/icons/logo.svg" alt="Serinity Logo" class="w-8 h-8 md:w-10 md:h-10 opacity-90 shrink-0">
|
| 269 |
-
<div class="flex flex-col justify-center min-w-0">
|
| 270 |
-
<h1 class="text-xl md:text-3xl font-display text-ink leading-none truncate" id="headerName">Serinity</h1>
|
| 271 |
-
<p class="text-[10px] md:text-xs font-utility text-clay tracking-widest uppercase mt-0.5 truncate hidden sm:block">Clinical Session</p>
|
| 272 |
-
</div>
|
| 273 |
-
</div>
|
| 274 |
-
|
| 275 |
-
<!-- Right: Controls -->
|
| 276 |
-
<div class="flex items-center gap-2 shrink-0">
|
| 277 |
-
<span id="sessionStats" class="text-xs font-utility text-moss uppercase hidden lg:block"></span>
|
| 278 |
-
|
| 279 |
-
<select
|
| 280 |
-
id="voiceSelect"
|
| 281 |
-
class="bg-paper border border-ink text-ink text-xs md:text-sm font-utility px-1 py-1.5 outline-none focus:border-moss w-[70px] sm:w-[140px] md:w-[200px] cursor-pointer hover:bg-ink/5 truncate shrink-0"
|
| 282 |
-
>
|
| 283 |
-
<option value="">Voice: Off</option>
|
| 284 |
-
</select>
|
| 285 |
-
|
| 286 |
-
<!-- Mobile Slider Toggle -->
|
| 287 |
-
<label class="flex sm:hidden items-center cursor-pointer gap-1.5 shrink-0" title="Toggle Audio Response">
|
| 288 |
-
<div class="relative flex items-center">
|
| 289 |
-
<input type="checkbox" id="audioOutputToggleMobile" class="sr-only">
|
| 290 |
-
<div id="audioToggleTrack" class="block bg-ink/30 w-10 h-6 rounded-full transition-colors duration-200"></div>
|
| 291 |
-
<div id="audioToggleDot" class="dot absolute left-1 top-1 bg-paper w-4 h-4 rounded-full transition-transform duration-200"></div>
|
| 292 |
-
</div>
|
| 293 |
-
<svg id="audioToggleIconMobile" class="w-4 h-4 text-ink/50 transition-colors duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
| 294 |
-
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.536 8.464a5 5 0 010 7.072M17.95 6.05a8 8 0 010 11.9M6.5 8.5H4a1 1 0 00-1 1v5a1 1 0 001 1h2.5l4 4V4.5l-4 4z"></path>
|
| 295 |
-
</svg>
|
| 296 |
-
</label>
|
| 297 |
-
|
| 298 |
-
<!-- Desktop Button Toggle -->
|
| 299 |
-
<button
|
| 300 |
-
id="audioOutputToggleDesktop"
|
| 301 |
-
class="hidden sm:flex border border-ink text-ink hover:bg-moss hover:border-moss hover:text-paper transition-all items-center justify-center px-2 py-1.5 md:px-3 shrink-0 gap-1"
|
| 302 |
-
title="Toggle Audio Response"
|
| 303 |
-
>
|
| 304 |
-
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
| 305 |
-
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.536 8.464a5 5 0 010 7.072M17.95 6.05a8 8 0 010 11.9M6.5 8.5H4a1 1 0 00-1 1v5a1 1 0 001 1h2.5l4 4V4.5l-4 4z"></path>
|
| 306 |
-
</svg>
|
| 307 |
-
<span class="text-xs font-utility uppercase tracking-wide" id="audioToggleLabelDesktop">Audio Off</span>
|
| 308 |
-
</button>
|
| 309 |
-
|
| 310 |
-
<button
|
| 311 |
-
id="endSessionBtn"
|
| 312 |
-
class="text-signal hover:text-signal/70 transition-colors border border-signal flex items-center justify-center px-2 py-1.5 md:px-3 shrink-0"
|
| 313 |
-
title="End Session"
|
| 314 |
-
>
|
| 315 |
-
<span class="text-xs md:text-sm font-utility uppercase tracking-wide md:hidden">End</span>
|
| 316 |
-
<span class="hidden md:inline text-sm font-utility uppercase tracking-wide">End Session</span>
|
| 317 |
-
</button>
|
| 318 |
-
</div>
|
| 319 |
-
|
| 320 |
-
</div>
|
| 321 |
-
</header>
|
| 322 |
-
|
| 323 |
-
<!-- Chat Container -->
|
| 324 |
-
<div class="flex-1 overflow-hidden flex flex-col w-full">
|
| 325 |
-
<div id="chatWrapper" class="flex-1 overflow-y-auto px-6 md:px-12 py-8 custom-scrollbar">
|
| 326 |
-
<div id="chat" class="flex flex-col gap-6 max-w-3xl mx-auto pb-8"></div>
|
| 327 |
-
</div>
|
| 328 |
-
</div>
|
| 329 |
-
|
| 330 |
-
<!-- Fixed Bottom Controls -->
|
| 331 |
-
<div class="bg-paper border-t border-ink sticky bottom-0">
|
| 332 |
-
<div class="w-full px-6 md:px-12 mx-auto py-4">
|
| 333 |
-
<!-- Input Mode Toggle -->
|
| 334 |
-
<div class="flex justify-center gap-4 mb-4">
|
| 335 |
-
<button id="textModeBtn" class="btn-toggle active uppercase tracking-wider text-xs">Text</button>
|
| 336 |
-
<button id="voiceModeBtn" class="btn-toggle uppercase tracking-wider text-xs">Audio</button>
|
| 337 |
-
</div>
|
| 338 |
-
|
| 339 |
-
<!-- Voice Input -->
|
| 340 |
-
<div id="voiceInput" class="hidden flex-col items-center gap-3">
|
| 341 |
-
<button
|
| 342 |
-
id="micBtn"
|
| 343 |
-
class="w-14 h-14 border border-ink rounded-full flex items-center justify-center transition-all duration-200 hover:bg-moss hover:border-moss hover:text-paper group text-ink"
|
| 344 |
-
style="touch-action: none;"
|
| 345 |
-
>
|
| 346 |
-
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
| 347 |
-
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11a7 7 0 01-7 7m0 0a7 7 0 01-7-7m7 7v4m0 0H8m4 0h4m-4-8a3 3 0 01-3-3V5a3 3 0 116 0v6a3 3 0 01-3 3z"></path>
|
| 348 |
-
</svg>
|
| 349 |
-
</button>
|
| 350 |
-
<p id="status" class="text-xs font-utility text-clay uppercase tracking-widest">Hold Space to speak</p>
|
| 351 |
-
</div>
|
| 352 |
-
|
| 353 |
-
<!-- Text Input -->
|
| 354 |
-
<div id="textInput" class="block">
|
| 355 |
-
<div class="chat-input-container max-w-3xl mx-auto">
|
| 356 |
-
<input
|
| 357 |
-
type="text"
|
| 358 |
-
id="chatInput"
|
| 359 |
-
class="chat-input"
|
| 360 |
-
placeholder="Enter message..."
|
| 361 |
-
autocomplete="off"
|
| 362 |
-
/>
|
| 363 |
-
<button id="sendBtn" class="px-4 py-2 bg-ink text-paper text-sm font-utility uppercase transition-colors hover:bg-moss">
|
| 364 |
-
Submit
|
| 365 |
-
</button>
|
| 366 |
-
</div>
|
| 367 |
-
</div>
|
| 368 |
-
</div>
|
| 369 |
-
</div>
|
| 370 |
-
</div>
|
| 371 |
-
|
| 372 |
-
<!-- Confirmation Modal -->
|
| 373 |
-
<div id="confirmationModal" style="display: none;" class="fixed inset-0 bg-ink/50 backdrop-blur-sm z-[60] flex flex-col items-center justify-center p-4 fade-in">
|
| 374 |
-
<div class="bg-paper border border-signal p-8 max-w-sm w-full shadow-lg">
|
| 375 |
-
<h2 class="text-xl font-display text-signal mb-2" id="confirmModalTitle">Are you sure?</h2>
|
| 376 |
-
<p class="text-clay text-sm mb-6" id="confirmModalText">This action cannot be undone.</p>
|
| 377 |
-
|
| 378 |
-
<div class="flex gap-4">
|
| 379 |
-
<button id="confirmModalCancelBtn" class="flex-1 bg-transparent border border-ink text-ink hover:bg-ink hover:text-paper transition py-2 font-utility uppercase tracking-widest text-sm">
|
| 380 |
-
CANCEL
|
| 381 |
-
</button>
|
| 382 |
-
<button id="confirmModalConfirmBtn" class="flex-1 bg-signal text-paper hover:bg-signal/80 transition py-2 font-utility uppercase tracking-widest text-sm">
|
| 383 |
-
CONFIRM
|
| 384 |
-
</button>
|
| 385 |
-
</div>
|
| 386 |
-
</div>
|
| 387 |
-
</div>
|
| 388 |
-
|
| 389 |
-
<!-- Continue Session Modal -->
|
| 390 |
-
<div id="continueSessionModal" style="display: none;" class="fixed inset-0 bg-ink/50 backdrop-blur-sm z-[60] flex flex-col items-center justify-center p-4 fade-in">
|
| 391 |
-
<div class="bg-paper border border-signal p-8 max-w-sm w-full shadow-lg">
|
| 392 |
-
<h2 class="text-xl font-display text-signal mb-2">Active Session Found</h2>
|
| 393 |
-
<p class="text-clay text-sm mb-6">You have a previous session that is still open. Would you like to pick up where you left off, or end it and start a new one?</p>
|
| 394 |
-
|
| 395 |
-
<div class="flex flex-col gap-3">
|
| 396 |
-
<button id="continueSessionBtn" class="w-full bg-signal text-paper hover:bg-signal/80 transition py-2 font-utility uppercase tracking-widest text-sm">
|
| 397 |
-
Continue Session
|
| 398 |
-
</button>
|
| 399 |
-
<button id="endAndStartNewBtn" class="w-full bg-transparent border border-ink text-ink hover:bg-ink hover:text-paper transition py-2 font-utility uppercase tracking-widest text-sm">
|
| 400 |
-
End & Start New
|
| 401 |
-
</button>
|
| 402 |
-
</div>
|
| 403 |
-
</div>
|
| 404 |
-
</div>
|
| 405 |
-
|
| 406 |
-
<!-- Alert Modal -->
|
| 407 |
-
<div id="alertModal" style="display: none;" class="fixed inset-0 bg-ink/50 backdrop-blur-sm z-[70] flex flex-col items-center justify-center p-4 fade-in">
|
| 408 |
-
<div class="bg-paper border border-ink p-8 max-w-sm w-full shadow-lg">
|
| 409 |
-
<h2 class="text-xl font-display text-ink mb-2" id="alertModalTitle">Notice</h2>
|
| 410 |
-
<p class="text-clay text-sm mb-6" id="alertModalText"></p>
|
| 411 |
-
<button id="alertModalOkBtn" class="w-full bg-ink text-paper hover:bg-moss transition py-2 font-utility uppercase tracking-widest text-sm">
|
| 412 |
-
OK
|
| 413 |
-
</button>
|
| 414 |
-
</div>
|
| 415 |
-
</div>
|
| 416 |
-
|
| 417 |
-
<!-- Delete Account Confirmation Modal -->
|
| 418 |
-
<div id="deleteAccountConfirmModal" style="display: none;" class="fixed inset-0 bg-ink/50 backdrop-blur-sm z-50 flex flex-col items-center justify-center p-4">
|
| 419 |
-
<div class="panel p-8 max-w-sm w-full shadow-lg">
|
| 420 |
-
<h2 class="text-xl font-display text-signal mb-2">Delete Account?</h2>
|
| 421 |
-
<p class="text-clay text-sm mb-6">Are you sure you want to completely delete your account? This action is irreversible and all data will be erased. An OTP will be sent to your email to verify.</p>
|
| 422 |
-
|
| 423 |
-
<div class="flex gap-4">
|
| 424 |
-
<button id="deleteAccountCancelBtn" class="flex-1 bg-transparent border border-ink text-ink hover:bg-ink hover:text-paper transition py-2 font-utility uppercase tracking-widest text-sm">
|
| 425 |
-
CANCEL
|
| 426 |
-
</button>
|
| 427 |
-
<button id="deleteAccountSendOtpBtn" class="flex-1 bg-signal text-paper hover:bg-signal/80 transition py-2 font-utility uppercase tracking-widest text-sm">
|
| 428 |
-
SEND OTP
|
| 429 |
-
</button>
|
| 430 |
-
</div>
|
| 431 |
-
</div>
|
| 432 |
-
</div>
|
| 433 |
-
|
| 434 |
-
<!-- Delete Account OTP Modal -->
|
| 435 |
-
<div id="deleteAccountOtpModal" style="display: none;" class="fixed inset-0 bg-ink/50 backdrop-blur-sm z-50 flex flex-col items-center justify-center p-4">
|
| 436 |
-
<div class="panel p-8 max-w-sm w-full shadow-lg">
|
| 437 |
-
<div class="flex justify-between items-center mb-6">
|
| 438 |
-
<h2 class="text-xl font-display text-signal">Delete Account</h2>
|
| 439 |
-
<button id="closeDeleteOtpModalBtn" class="text-clay hover:text-ink transition">×</button>
|
| 440 |
-
</div>
|
| 441 |
-
<p class="text-clay text-sm mb-6">An OTP has been sent to your email. Enter it below to permanently delete your account and all data.</p>
|
| 442 |
-
<div class="space-y-4">
|
| 443 |
-
<div>
|
| 444 |
-
<label class="block text-xs font-utility text-clay uppercase mb-1">6-Digit Code</label>
|
| 445 |
-
<input type="text" id="deleteAccountOtpCode" class="w-full bg-paper border border-ink p-3 text-ink focus:outline-none focus:border-moss text-center tracking-widest font-mono text-lg" placeholder="000000" maxlength="6">
|
| 446 |
-
</div>
|
| 447 |
-
<button id="submitDeleteOtpBtn" class="w-full bg-signal text-paper hover:bg-signal/90 transition py-3 font-utility uppercase tracking-widest text-sm mt-2">
|
| 448 |
-
Verify & Delete
|
| 449 |
-
</button>
|
| 450 |
-
</div>
|
| 451 |
-
</div>
|
| 452 |
-
</div>
|
| 453 |
-
|
| 454 |
-
<script type="module" src="/static/js/app.js"></script>
|
| 455 |
-
</body>
|
| 456 |
-
</html>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|