Spaces:
Sleeping
Sleeping
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | |
| <title>BREATHE — Stress Intelligence Platform</title> | |
| <link rel="stylesheet" href="/static/css/main.css" /> | |
| <link rel="preconnect" href="https://fonts.googleapis.com" /> | |
| <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet" /> | |
| </head> | |
| <body> | |
| <!-- ══════════════════════════ AUTH SCREENS ══════════════════════════ --> | |
| <div id="auth-screen" class="screen active"> | |
| <div class="auth-bg"> | |
| <div class="auth-card"> | |
| <div class="brand"> | |
| <span class="brand-icon">🫁</span> | |
| <h1 class="brand-name">BREATHE</h1> | |
| <p class="brand-tagline">Stress Intelligence Platform</p> | |
| </div> | |
| <!-- Tab bar --> | |
| <div class="tab-bar"> | |
| <button class="tab active" data-tab="login">Log In</button> | |
| <button class="tab" data-tab="signup">Sign Up</button> | |
| </div> | |
| <!-- Login form --> | |
| <form id="login-form" class="auth-form active"> | |
| <div class="field"> | |
| <label>Email or Username</label> | |
| <input type="text" id="login-identity" autocomplete="username" placeholder="you@example.com" required /> | |
| </div> | |
| <div class="field"> | |
| <label>Password</label> | |
| <input type="password" id="login-password" autocomplete="current-password" placeholder="••••••••" required /> | |
| </div> | |
| <div id="login-error" class="form-error hidden"></div> | |
| <button type="submit" class="btn-primary full-width">Log In</button> | |
| </form> | |
| <!-- Signup form --> | |
| <form id="signup-form" class="auth-form"> | |
| <div class="field"> | |
| <label>Username</label> | |
| <input type="text" id="signup-username" autocomplete="username" placeholder="breatheuser" required /> | |
| </div> | |
| <div class="field"> | |
| <label>Email</label> | |
| <input type="email" id="signup-email" autocomplete="email" placeholder="you@example.com" required /> | |
| </div> | |
| <div class="field"> | |
| <label>Password <small>(min 8 chars)</small></label> | |
| <input type="password" id="signup-password" autocomplete="new-password" placeholder="••••••••" required /> | |
| </div> | |
| <div id="signup-error" class="form-error hidden"></div> | |
| <button type="submit" class="btn-primary full-width">Create Account</button> | |
| </form> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- ══════════════════════════ MAIN APP ══════════════════════════════ --> | |
| <div id="app-screen" class="screen"> | |
| <!-- Sidebar --> | |
| <aside class="sidebar"> | |
| <div class="sidebar-brand"> | |
| <span class="brand-icon">🫁</span> | |
| <span class="brand-name-sm">BREATHE</span> | |
| </div> | |
| <nav class="sidebar-nav"> | |
| <button class="nav-item active" data-view="dashboard"> | |
| <span class="nav-icon">📊</span> Dashboard | |
| </button> | |
| <button class="nav-item" data-view="assess"> | |
| <span class="nav-icon">🧠</span> New Assessment | |
| </button> | |
| <button class="nav-item" data-view="history"> | |
| <span class="nav-icon">📋</span> History | |
| </button> | |
| </nav> | |
| <div class="sidebar-footer"> | |
| <div class="user-info"> | |
| <span class="user-avatar">👤</span> | |
| <span id="sidebar-username" class="user-name">User</span> | |
| </div> | |
| <button id="logout-btn" class="btn-ghost small">Log out</button> | |
| </div> | |
| </aside> | |
| <!-- Main content area --> | |
| <main class="main-content"> | |
| <!-- ── DASHBOARD VIEW ───────────────────────────────────────────── --> | |
| <div id="view-dashboard" class="view active"> | |
| <div class="page-header"> | |
| <h2>Your Stress Dashboard</h2> | |
| <p class="page-sub" id="dash-greeting">Welcome back!</p> | |
| </div> | |
| <div class="stats-row"> | |
| <div class="stat-card" id="stat-total"> | |
| <div class="stat-value">—</div> | |
| <div class="stat-label">Total Assessments</div> | |
| </div> | |
| <div class="stat-card" id="stat-latest"> | |
| <div class="stat-value">—</div> | |
| <div class="stat-label">Latest Stress Level</div> | |
| </div> | |
| <div class="stat-card" id="stat-avg"> | |
| <div class="stat-value">—</div> | |
| <div class="stat-label">Average Score</div> | |
| </div> | |
| <div class="stat-card" id="stat-trend"> | |
| <div class="stat-value">—</div> | |
| <div class="stat-label">Trend</div> | |
| </div> | |
| </div> | |
| <!-- Timeline chart --> | |
| <div class="card chart-card"> | |
| <h3>Stress Score Timeline</h3> | |
| <div class="chart-wrap"> | |
| <canvas id="timeline-chart"></canvas> | |
| </div> | |
| </div> | |
| <!-- Distribution --> | |
| <div class="card chart-card"> | |
| <h3>Stress Level Distribution</h3> | |
| <div class="chart-wrap donut-wrap"> | |
| <canvas id="distribution-chart"></canvas> | |
| </div> | |
| </div> | |
| <!-- Recent assessments --> | |
| <div class="card"> | |
| <h3>Recent Assessments</h3> | |
| <div id="recent-list" class="assessment-list"> | |
| <p class="empty-state">No assessments yet. Take your first one!</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- ── ASSESSMENT VIEW ──────────────────────────────────────────── --> | |
| <div id="view-assess" class="view"> | |
| <div class="page-header"> | |
| <h2>New Assessment</h2> | |
| <p class="page-sub">Fill in any combination of sections below</p> | |
| </div> | |
| <form id="assess-form"> | |
| <!-- Psychometric Section --> | |
| <div class="card section-card"> | |
| <div class="section-title"> | |
| <span class="section-icon">📋</span> | |
| <h3>Psychometric Cues</h3> | |
| <span class="section-badge optional">Optional</span> | |
| </div> | |
| <p class="section-desc">Rate your lifestyle habits over the past week.</p> | |
| <div class="form-grid"> | |
| <div class="field"> | |
| <label>Sleep Duration (hrs/day)</label> | |
| <input type="number" name="Sleep_Duration" min="0" max="24" step="0.5" placeholder="7" /> | |
| </div> | |
| <div class="field"> | |
| <label>Sleep Quality (1–5)</label> | |
| <input type="number" name="Sleep_Quality" min="1" max="5" step="1" placeholder="3" /> | |
| </div> | |
| <div class="field"> | |
| <label>Work Hours (hrs/day)</label> | |
| <input type="number" name="Work_Hours" min="0" max="24" step="0.5" placeholder="8" /> | |
| </div> | |
| <div class="field"> | |
| <label>Physical Activity (hrs/day)</label> | |
| <input type="number" name="Physical_Activity" min="0" max="12" step="0.5" placeholder="1" /> | |
| </div> | |
| <div class="field"> | |
| <label>Screen Time (hrs/day)</label> | |
| <input type="number" name="Screen_Time" min="0" max="24" step="0.5" placeholder="4" /> | |
| </div> | |
| <div class="field"> | |
| <label>Travel Time (hrs/day)</label> | |
| <input type="number" name="Travel_Time" min="0" max="10" step="0.5" placeholder="1" /> | |
| </div> | |
| <div class="field"> | |
| <label>Social Interactions (count/day)</label> | |
| <input type="number" name="Social_Interactions" min="0" max="50" step="1" placeholder="5" /> | |
| </div> | |
| <div class="field"> | |
| <label>Caffeine Intake (cups/day)</label> | |
| <input type="number" name="Caffeine_Intake" min="0" max="20" step="1" placeholder="2" /> | |
| </div> | |
| <div class="field"> | |
| <label>Alcohol Intake (units/week)</label> | |
| <input type="number" name="Alcohol_Intake" min="0" max="50" step="1" placeholder="1" /> | |
| </div> | |
| <div class="field"> | |
| <label>Blood Pressure (mmHg)</label> | |
| <input type="number" name="Blood_Pressure" min="60" max="200" step="1" placeholder="120" /> | |
| </div> | |
| <div class="field"> | |
| <label>Cholesterol Level (mg/dL)</label> | |
| <input type="number" name="Cholesterol_Level" min="50" max="400" step="1" placeholder="190" /> | |
| </div> | |
| <div class="field"> | |
| <label>Blood Sugar Level (mg/dL)</label> | |
| <input type="number" name="Blood_Sugar_Level" min="50" max="400" step="1" placeholder="90" /> | |
| </div> | |
| </div> | |
| <!-- Categorical fields --> | |
| <div class="form-grid mt-sm"> | |
| <div class="field"> | |
| <label>Gender</label> | |
| <select name="Gender"> | |
| <option value="">-- select --</option> | |
| <option value="Male">Male</option> | |
| <option value="Female">Female</option> | |
| <option value="Other">Other</option> | |
| </select> | |
| </div> | |
| <div class="field"> | |
| <label>Occupation</label> | |
| <select name="Occupation"> | |
| <option value="">-- select --</option> | |
| <option value="Student">Student</option> | |
| <option value="Working Professional">Working Professional</option> | |
| <option value="Homemaker">Homemaker</option> | |
| <option value="Retired">Retired</option> | |
| <option value="Unemployed">Unemployed</option> | |
| </select> | |
| </div> | |
| <div class="field"> | |
| <label>Smoking Status</label> | |
| <select name="Smoking_Status"> | |
| <option value="">-- select --</option> | |
| <option value="Non-Smoker">Non-Smoker</option> | |
| <option value="Occasional">Occasional</option> | |
| <option value="Regular">Regular</option> | |
| </select> | |
| </div> | |
| <div class="field"> | |
| <label>Diet Quality</label> | |
| <select name="Diet_Quality"> | |
| <option value="">-- select --</option> | |
| <option value="Poor">Poor</option> | |
| <option value="Average">Average</option> | |
| <option value="Good">Good</option> | |
| <option value="Excellent">Excellent</option> | |
| </select> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Text Note Section --> | |
| <div class="card section-card"> | |
| <div class="section-title"> | |
| <span class="section-icon">📝</span> | |
| <h3>Text Note</h3> | |
| <span class="section-badge optional">Optional</span> | |
| </div> | |
| <p class="section-desc">Write freely about how you're feeling. Our NLP model will analyse the sentiment.</p> | |
| <textarea | |
| id="text-note" | |
| name="text_note" | |
| rows="5" | |
| placeholder="Today I felt... I've been experiencing... my mind keeps going to..." | |
| ></textarea> | |
| </div> | |
| <div id="assess-error" class="form-error hidden"></div> | |
| <button type="submit" class="btn-primary" id="assess-submit">Analyse My Stress →</button> | |
| </form> | |
| <!-- Result panel (shown after submit) --> | |
| <div id="result-panel" class="card result-card hidden"> | |
| <h3>Your Stress Analysis</h3> | |
| <div class="result-gauge-wrap"> | |
| <div id="result-gauge" class="result-gauge"> | |
| <div class="gauge-circle"> | |
| <svg viewBox="0 0 120 120"> | |
| <circle class="gauge-bg" cx="60" cy="60" r="50"/> | |
| <circle id="gauge-arc" class="gauge-arc" cx="60" cy="60" r="50" | |
| stroke-dasharray="0 314"/> | |
| </svg> | |
| <div class="gauge-center"> | |
| <div id="gauge-score" class="gauge-score">—</div> | |
| <div id="gauge-label" class="gauge-label">—</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="result-details"> | |
| <div class="result-item" id="res-psycho"> | |
| <span class="result-key">Psychometric</span> | |
| <span class="result-val" id="res-psycho-val">—</span> | |
| </div> | |
| <div class="result-item" id="res-text"> | |
| <span class="result-key">Text Sentiment</span> | |
| <span class="result-val" id="res-text-val">—</span> | |
| </div> | |
| <div class="result-item"> | |
| <span class="result-key">Modality Used</span> | |
| <span class="result-val" id="res-modality">—</span> | |
| </div> | |
| <div class="result-item"> | |
| <span class="result-key">Assessed At</span> | |
| <span class="result-val" id="res-time">—</span> | |
| </div> | |
| </div> | |
| <div id="result-advice" class="result-advice"></div> | |
| <button class="btn-secondary mt-sm" onclick="app.goToView('dashboard')">View Dashboard →</button> | |
| </div> | |
| </div> | |
| <!-- ── HISTORY VIEW ─────────────────────────────────────────────── --> | |
| <div id="view-history" class="view"> | |
| <div class="page-header"> | |
| <h2>Assessment History</h2> | |
| <p class="page-sub">All your past stress analyses</p> | |
| </div> | |
| <div id="history-list" class="assessment-list full"> | |
| <p class="empty-state">Loading…</p> | |
| </div> | |
| <div id="history-pagination" class="pagination"></div> | |
| </div> | |
| </main> | |
| </div> | |
| <!-- Modal for detail view --> | |
| <div id="detail-modal" class="modal hidden"> | |
| <div class="modal-backdrop" onclick="app.closeModal()"></div> | |
| <div class="modal-box"> | |
| <button class="modal-close" onclick="app.closeModal()">✕</button> | |
| <h3>Assessment Detail</h3> | |
| <div id="modal-body"></div> | |
| </div> | |
| </div> | |
| <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script> | |
| <script src="/static/js/app.js"></script> | |
| </body> | |
| </html> | |