| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Serinity - Mental Healthcare</title> |
| <link rel="icon" type="image/svg+xml" href="/static/icons/logo.svg"> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <link rel="stylesheet" href="/static/css/style.css"> |
| <script> |
| tailwind.config = { |
| theme: { |
| extend: { |
| colors: { |
| paper: '#F6F3EE', |
| ink: '#262521', |
| moss: '#4B6358', |
| clay: '#9C7A5B', |
| signal: '#B4483C' |
| } |
| } |
| } |
| } |
| </script> |
| </head> |
| <body class="bg-paper text-ink min-h-screen flex flex-col font-body"> |
|
|
| |
| <div id="loadingScreen" class="fixed inset-0 bg-paper z-50 flex flex-col items-center justify-center transition-opacity duration-500"> |
| <h1 class="logo-text">Serinity</h1> |
| <div class="loading-dots" id="loadingDots"> |
| <span></span> |
| <span></span> |
| <span></span> |
| </div> |
| <button class="btn-primary mt-8" id="startButton" disabled> |
| Initializing... |
| </button> |
| <p id="wakeupText" class="text-sm text-clay mt-4 text-center max-w-xs mx-auto font-utility"> |
| Validating credentials... |
| </p> |
| </div> |
|
|
| |
| <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"> |
| <div class="panel p-8 max-w-md w-full my-auto shadow-sm"> |
| |
| |
| <div class="flex items-center gap-3 mb-8 justify-center"> |
| <img src="/static/icons/logo.svg" alt="Serinity Logo" class="w-10 h-10"> |
| <h2 class="text-3xl font-display text-ink">Serinity</h2> |
| </div> |
|
|
| |
| <div id="loginFormContainer" class="block space-y-5"> |
| <div> |
| <label class="block text-xs font-utility text-clay uppercase mb-1">Username / Email *</label> |
| <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"> |
| </div> |
| <div> |
| <label class="block text-xs font-utility text-clay uppercase mb-1">Password</label> |
| <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"> |
| </div> |
| <div class="flex justify-between items-center text-xs font-utility uppercase tracking-widest mt-2"> |
| <button id="showForgotPwdBtn" class="text-clay hover:text-ink transition">Forgot Password?</button> |
| </div> |
| <button id="loginBtn" class="w-full btn-primary py-3 font-utility uppercase tracking-widest text-sm mt-4"> |
| Log In |
| </button> |
| <div class="text-center mt-6 border-t border-ink/20 pt-6"> |
| <p class="text-xs text-clay font-utility uppercase tracking-widest mb-3">New Patient?</p> |
| <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"> |
| Create Account |
| </button> |
| </div> |
| </div> |
|
|
| |
| <div id="signupFormContainer" class="hidden space-y-4"> |
| <div> |
| <label class="block text-xs font-utility text-clay uppercase mb-1">Full Name *</label> |
| <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"> |
| </div> |
| <div class="grid grid-cols-3 gap-4"> |
| <div> |
| <label class="block text-xs font-utility text-clay uppercase mb-1">Username *</label> |
| <input type="text" id="signupUsername" class="w-full bg-paper border border-ink p-2 text-ink focus:outline-none focus:border-moss"> |
| </div> |
| <div> |
| <label class="block text-xs font-utility text-clay uppercase mb-1">Gender *</label> |
| <select id="signupGender" class="w-full bg-paper border border-ink p-2 text-ink focus:outline-none focus:border-moss"> |
| <option value="">Select</option> |
| <option value="Male">Male</option> |
| <option value="Female">Female</option> |
| <option value="Other">Other</option> |
| </select> |
| </div> |
| <div> |
| <label class="block text-xs font-utility text-clay uppercase mb-1">Age</label> |
| <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"> |
| </div> |
| </div> |
| <div> |
| <label class="block text-xs font-utility text-clay uppercase mb-1">Email *</label> |
| <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"> |
| </div> |
| <div> |
| <label class="block text-xs font-utility text-clay uppercase mb-1">Password *</label> |
| <input type="password" id="signupPassword" class="w-full bg-paper border border-ink p-2 text-ink focus:outline-none focus:border-moss"> |
| </div> |
| <div class="grid grid-cols-2 gap-4"> |
| <div class="relative" id="nationalityWrapper"> |
| <label class="block text-xs font-utility text-clay uppercase mb-1" title="For cultural context">Nationality *</label> |
| <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"> |
| <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"> |
| |
| </div> |
| </div> |
| <div> |
| <label class="block text-xs font-utility text-clay uppercase mb-1">Primary Concern *</label> |
| <select id="signupConcern" class="w-full bg-paper border border-ink p-2 text-ink focus:outline-none focus:border-moss"> |
| <option value="">Select...</option> |
| <option value="Anxiety">Anxiety</option> |
| <option value="Depression">Depression</option> |
| <option value="Stress">Stress</option> |
| <option value="Sleep">Sleep Issues</option> |
| <option value="General">General Wellness</option> |
| <option value="Other">Other</option> |
| </select> |
| </div> |
| </div> |
| <div class="grid grid-cols-2 gap-4"> |
| <div> |
| <label class="block text-xs font-utility text-clay uppercase mb-1">Emergency Contact Name</label> |
| <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"> |
| </div> |
| <div> |
| <label class="block text-xs font-utility text-clay uppercase mb-1">Emergency Contact Phone</label> |
| <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"> |
| </div> |
| </div> |
|
|
| <button id="signupCompleteBtn" class="w-full btn-primary py-3 font-utility uppercase tracking-widest text-sm mt-4"> |
| Create Account |
| </button> |
|
|
| <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"> |
| ← Back to Login |
| </button> |
| </div> |
|
|
| |
| <div id="forgotPwdFormContainer" class="hidden space-y-4"> |
| <p class="text-sm text-clay font-body mb-4">Enter your email address and a new password.</p> |
| <div> |
| <label class="block text-xs font-utility text-clay uppercase mb-1">Email Address</label> |
| <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"> |
| </div> |
| <div> |
| <label class="block text-xs font-utility text-clay uppercase mb-1">New Password</label> |
| <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"> |
| </div> |
| <button id="submitResetBtn" class="w-full btn-primary py-3 font-utility uppercase tracking-widest text-sm mt-2"> |
| Update Password |
| </button> |
| <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"> |
| ← Back to Login |
| </button> |
| </div> |
|
|
| </div> |
| </div> |
|
|
| |
|
|
| |
| <div class="hidden max-w-5xl mx-auto w-full h-screen p-4 flex-col fade-in overflow-hidden" id="dashboardScreen"> |
| <div class="bg-paper border border-ink p-6 lg:p-10 flex-1 flex flex-col min-h-0 h-full"> |
| |
| |
| <div class="flex justify-between items-start border-b border-ink/30 pb-6 mb-6 shrink-0"> |
| <div> |
| <h2 class="text-3xl font-display text-ink" id="dashboardPatientName">Patient Name</h2> |
| <p class="text-xs font-utility tracking-widest uppercase text-clay mt-2" id="dashboardPatientAge">Age: --</p> |
| </div> |
| <button class="btn-primary" id="dashboardStartBtn">NEW SESSION</button> |
| </div> |
| |
| |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-10 flex-1 min-h-0 overflow-hidden" id="dashboardContent"> |
| |
| <div class="space-y-6 overflow-y-auto pr-4 custom-scrollbar" id="dashboardDomains"> |
| <h3 class="font-utility uppercase text-clay text-sm border-b border-ink/30 pb-2">Clinical Profile</h3> |
| <p class="text-clay text-sm italic">Loading profile data...</p> |
| </div> |
| |
| |
| <div class="flex flex-col min-h-0 h-full"> |
| <h3 class="font-utility uppercase text-clay text-sm border-b border-ink/30 pb-2 mb-4 shrink-0">Session History</h3> |
| <div id="dashboardSessionsList" class="flex-1 overflow-y-auto pr-4 space-y-4 custom-scrollbar"> |
| <p class="text-clay text-sm italic">Loading previous sessions...</p> |
| </div> |
| </div> |
| </div> |
|
|
| <div class="mt-8 pt-6 border-t border-ink/30 shrink-0 flex flex-wrap justify-between items-center gap-4"> |
| <button class="text-xs font-utility tracking-widest text-clay hover:text-ink uppercase transition flex items-center gap-2" id="dashboardLogoutBtn"> |
| <span>←</span> LOGOUT |
| </button> |
| <div class="flex gap-4"> |
| <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"> |
| RESET DATA |
| </button> |
| <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"> |
| DELETE ACCOUNT |
| </button> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div id="mainApp" style="display: none;" class="flex flex-col h-screen"> |
| |
| <header class="bg-paper border-b border-ink sticky top-0 z-50 py-2 md:py-3 shadow-sm"> |
| <div class="w-full px-3 md:px-12 mx-auto flex items-center justify-between gap-1 md:gap-2"> |
| |
| |
| <div class="flex items-center gap-2 md:gap-4 shrink-0 min-w-0"> |
| <img src="/static/icons/logo.svg" alt="Serinity Logo" class="w-8 h-8 md:w-10 md:h-10 opacity-90 shrink-0"> |
| <div class="flex flex-col justify-center min-w-0"> |
| <h1 class="text-xl md:text-3xl font-display text-ink leading-none truncate" id="headerName">Serinity</h1> |
| <p class="text-[10px] md:text-xs font-utility text-clay tracking-widest uppercase mt-0.5 truncate hidden sm:block">Clinical Session</p> |
| </div> |
| </div> |
| |
| |
| <div class="flex items-center gap-2 shrink-0"> |
| <span id="sessionStats" class="text-xs font-utility text-moss uppercase hidden lg:block"></span> |
| |
| <select |
| id="voiceSelect" |
| 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" |
| > |
| <option value="">Voice: Off</option> |
| </select> |
|
|
| |
| <label class="flex sm:hidden items-center cursor-pointer gap-1.5 shrink-0" title="Toggle Audio Response"> |
| <div class="relative flex items-center"> |
| <input type="checkbox" id="audioOutputToggleMobile" class="sr-only"> |
| <div id="audioToggleTrack" class="block bg-ink/30 w-10 h-6 rounded-full transition-colors duration-200"></div> |
| <div id="audioToggleDot" class="dot absolute left-1 top-1 bg-paper w-4 h-4 rounded-full transition-transform duration-200"></div> |
| </div> |
| <svg id="audioToggleIconMobile" class="w-4 h-4 text-ink/50 transition-colors duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24"> |
| <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> |
| </svg> |
| </label> |
|
|
| |
| <button |
| id="audioOutputToggleDesktop" |
| 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" |
| title="Toggle Audio Response" |
| > |
| <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"> |
| <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> |
| </svg> |
| <span class="text-xs font-utility uppercase tracking-wide" id="audioToggleLabelDesktop">Audio Off</span> |
| </button> |
|
|
| <button |
| id="endSessionBtn" |
| 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" |
| title="End Session" |
| > |
| <span class="text-xs md:text-sm font-utility uppercase tracking-wide md:hidden">End</span> |
| <span class="hidden md:inline text-sm font-utility uppercase tracking-wide">End Session</span> |
| </button> |
| </div> |
| |
| </div> |
| </header> |
|
|
| |
| <div class="flex-1 overflow-hidden flex flex-col w-full"> |
| <div id="chatWrapper" class="flex-1 overflow-y-auto px-6 md:px-12 py-8 custom-scrollbar"> |
| <div id="chat" class="flex flex-col gap-6 max-w-3xl mx-auto pb-8"></div> |
| </div> |
| </div> |
|
|
| |
| <div class="bg-paper border-t border-ink sticky bottom-0"> |
| <div class="w-full px-6 md:px-12 mx-auto py-4"> |
| |
| <div class="flex justify-center gap-4 mb-4"> |
| <button id="textModeBtn" class="btn-toggle active uppercase tracking-wider text-xs">Text</button> |
| <button id="voiceModeBtn" class="btn-toggle uppercase tracking-wider text-xs">Audio</button> |
| </div> |
|
|
| |
| <div id="voiceInput" class="hidden flex-col items-center gap-3"> |
| <button |
| id="micBtn" |
| 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" |
| style="touch-action: none;" |
| > |
| <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"> |
| <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> |
| </svg> |
| </button> |
| <p id="status" class="text-xs font-utility text-clay uppercase tracking-widest">Hold Space to speak</p> |
| </div> |
|
|
| |
| <div id="textInput" class="block"> |
| <div class="chat-input-container max-w-3xl mx-auto"> |
| <input |
| type="text" |
| id="chatInput" |
| class="chat-input" |
| placeholder="Enter message..." |
| autocomplete="off" |
| /> |
| <button id="sendBtn" class="px-4 py-2 bg-ink text-paper text-sm font-utility uppercase transition-colors hover:bg-moss"> |
| Submit |
| </button> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <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"> |
| <div class="bg-paper border border-signal p-8 max-w-sm w-full shadow-lg"> |
| <h2 class="text-xl font-display text-signal mb-2" id="confirmModalTitle">Are you sure?</h2> |
| <p class="text-clay text-sm mb-6" id="confirmModalText">This action cannot be undone.</p> |
| |
| <div class="flex gap-4"> |
| <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"> |
| CANCEL |
| </button> |
| <button id="confirmModalConfirmBtn" class="flex-1 bg-signal text-paper hover:bg-signal/80 transition py-2 font-utility uppercase tracking-widest text-sm"> |
| CONFIRM |
| </button> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <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"> |
| <div class="bg-paper border border-signal p-8 max-w-sm w-full shadow-lg"> |
| <h2 class="text-xl font-display text-signal mb-2">Active Session Found</h2> |
| <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> |
| |
| <div class="flex flex-col gap-3"> |
| <button id="continueSessionBtn" class="w-full bg-signal text-paper hover:bg-signal/80 transition py-2 font-utility uppercase tracking-widest text-sm"> |
| Continue Session |
| </button> |
| <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"> |
| End & Start New |
| </button> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <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"> |
| <div class="bg-paper border border-ink p-8 max-w-sm w-full shadow-lg"> |
| <h2 class="text-xl font-display text-ink mb-2" id="alertModalTitle">Notice</h2> |
| <p class="text-clay text-sm mb-6" id="alertModalText"></p> |
| <button id="alertModalOkBtn" class="w-full bg-ink text-paper hover:bg-moss transition py-2 font-utility uppercase tracking-widest text-sm"> |
| OK |
| </button> |
| </div> |
| </div> |
|
|
| |
| <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"> |
| <div class="panel p-8 max-w-sm w-full shadow-lg"> |
| <h2 class="text-xl font-display text-signal mb-2">Delete Account?</h2> |
| <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.</p> |
| |
| <div class="flex gap-4"> |
| <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"> |
| CANCEL |
| </button> |
| <button id="deleteAccountConfirmBtn" class="flex-1 bg-signal text-paper hover:bg-signal/80 transition py-2 font-utility uppercase tracking-widest text-sm"> |
| DELETE |
| </button> |
| </div> |
| </div> |
| </div> |
|
|
| <script type="module" src="/static/js/app.js"></script> |
| </body> |
| </html> |
