Amogh1221 commited on
Commit
15b95e6
·
verified ·
1 Parent(s): 5c3dc21

Delete templates

Browse files
Files changed (1) hide show
  1. 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
- &larr; 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
- &larr; 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
- &larr; 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
- &larr; 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>&larr;</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">&times;</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>