| <!DOCTYPE html>
|
| <html lang="en" data-color-scheme="light">
|
| <head>
|
| <meta charset="UTF-8">
|
| <meta name="viewport" content="width=device-width, initial-scale=1.0">
|
| <title>βaspirin - Digital Mental Health Platform</title>
|
| <link rel="stylesheet" href="style.css">
|
| <link rel="icon" type="image/x-icon" href="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIiIGhlaWdodD0iMzIiIHZpZXdCb3g9IjAgMCAzMiAzMiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTE2IDJDOC4yNyAyIDIgOC4yNyAyIDE2czYuMjcgMTQgMTQgMTQgMTQtNi4yNyAxNC0xNFMyMy43MyAyIDE2IDJabTAgMjZjLTYuNjIgMC0xMi01LjM4LTEyLTEyczUuMzgtMTIgMTItMTIgMTIgNS4zOCAxMiAxMi01LjM4IDEyLTEyIDEyWiIgZmlsbD0iIzIxOTBEMCIvPgo8L3N2Zz4K">
|
| <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
| </head>
|
| <body>
|
|
|
| <header class="header">
|
| <nav class="nav">
|
| <div class="nav__brand">
|
| <h2>βaspirin</h2>
|
| </div>
|
| <div class="nav__actions">
|
| <select id="languageSelect" class="form-control language-select">
|
| <option value="en">English</option>
|
| <option value="hi">हिंदी</option>
|
| </select>
|
| <button id="loginBtn" class="btn btn--outline" data-key="login">Student Login</button>
|
| <button id="registerBtn" class="btn btn--primary" data-key="register">Register</button>
|
| </div>
|
| </nav>
|
| </header>
|
|
|
|
|
| <main class="main">
|
|
|
| <div id="landingScreen" class="screen active">
|
| <div class="container">
|
| <div class="welcome-hero">
|
| <h1 class="welcome-title" data-key="welcome_title">Welcome to βaspirin</h1>
|
| <p class="welcome-subtitle" data-key="welcome_subtitle">Your Digital Mental Health Support System</p>
|
| </div>
|
|
|
| <div class="feature-grid">
|
| <div class="feature-card" data-screen="assessmentScreen" style="background: var(--color-bg-1);">
|
| <div class="feature-icon">📊</div>
|
| <h3 data-key="take_assessment">Take Assessment</h3>
|
| <p data-key="assessment_description">Complete PHQ-9 and GAD-7 screenings to understand your mental health</p>
|
| </div>
|
|
|
| <div class="feature-card" data-screen="chatScreen" style="background: var(--color-bg-2);">
|
| <div class="feature-icon">💬</div>
|
| <h3 data-key="ai_support_chat">AI Support Chat</h3>
|
| <p data-key="chat_description">Get immediate support and coping strategies from our AI assistant</p>
|
| </div>
|
|
|
| <div class="feature-card" data-screen="resourcesScreen" style="background: var(--color-bg-3);">
|
| <div class="feature-icon">📚</div>
|
| <h3 data-key="resource_library">Resource Library</h3>
|
| <p data-key="resources_description">Access CBT modules, mindfulness practices, and educational content</p>
|
| </div>
|
|
|
| <div class="feature-card" data-screen="bookingScreen" style="background: var(--color-bg-4);">
|
| <div class="feature-icon">📅</div>
|
| <h3 data-key="book_appointment">Book Appointment</h3>
|
| <p data-key="booking_description">Schedule sessions with qualified counselors and therapists</p>
|
| </div>
|
|
|
| <div class="feature-card" data-screen="dashboardScreen" style="background: var(--color-bg-5);">
|
| <div class="feature-icon">📈</div>
|
| <h3 data-key="my_dashboard">My Dashboard</h3>
|
| <p data-key="dashboard_description">Track your progress and view your mental health journey</p>
|
| </div>
|
|
|
| <div class="feature-card" data-screen="adminScreen" style="background: var(--color-bg-6);">
|
| <div class="feature-icon">⚙️</div>
|
| <h3 data-key="admin_panel">Admin Panel</h3>
|
| <p data-key="admin_description">Institutional analytics and monitoring (Demo)</p>
|
| </div>
|
| </div>
|
| </div>
|
| </div>
|
|
|
|
|
| <div id="registrationScreen" class="screen">
|
| <div class="container">
|
| <a href="#" class="back-btn" data-target="landingScreen" data-key="back_to_home">← Back to Home</a>
|
|
|
| <div class="auth-container">
|
| <div class="card">
|
| <div class="card__body">
|
| <h2 data-key="register_title">Create Student Account</h2>
|
|
|
| <form id="registrationForm">
|
| <div class="form-group">
|
| <label for="fullName" class="form-label" data-key="full_name">Full Name</label>
|
| <input type="text" id="fullName" name="fullName" class="form-control" required>
|
| </div>
|
|
|
| <div class="form-group">
|
| <label for="email" class="form-label" data-key="email_address">Email Address</label>
|
| <input type="email" id="email" name="email" class="form-control" required>
|
| </div>
|
|
|
| <div class="form-group">
|
| <label for="college" class="form-label" data-key="select_college">Select College</label>
|
| <select id="college" name="college" class="form-control" required>
|
| <option value="">Choose your college</option>
|
| </select>
|
| </div>
|
|
|
| <div class="form-group">
|
| <label for="password" class="form-label" data-key="password">Password</label>
|
| <input type="password" id="password" name="password" class="form-control" required>
|
| </div>
|
|
|
| <button type="submit" class="btn btn--primary btn--full-width" data-key="register">Register</button>
|
| </form>
|
| </div>
|
| </div>
|
| </div>
|
| </div>
|
| </div>
|
|
|
|
|
| <div id="assessmentScreen" class="screen">
|
| <div class="container">
|
| <a href="#" class="back-btn" data-target="landingScreen" data-key="back_to_home">← Back to Home</a>
|
|
|
| <div class="assessment-container">
|
| <div class="assessment-header">
|
| <h2 data-key="assessment_title">Mental Health Assessment</h2>
|
| <p data-key="assessment_subtitle">Complete the PHQ-9 and GAD-7 questionnaires to get personalized insights</p>
|
| </div>
|
|
|
|
|
| <div id="assessmentSelection" class="assessment-step active">
|
| <div class="assessment-options">
|
| <div class="assessment-option" data-type="phq9">
|
| <h3 data-key="phq9_title">PHQ-9 Depression Screening</h3>
|
| <p data-key="phq9_description">9 questions about depression symptoms over the past 2 weeks</p>
|
| <button class="btn btn--primary" data-key="start_phq9">Start PHQ-9</button>
|
| </div>
|
|
|
| <div class="assessment-option" data-type="gad7">
|
| <h3 data-key="gad7_title">GAD-7 Anxiety Screening</h3>
|
| <p data-key="gad7_description">7 questions about anxiety symptoms over the past 2 weeks</p>
|
| <button class="btn btn--primary" data-key="start_gad7">Start GAD-7</button>
|
| </div>
|
| </div>
|
| </div>
|
|
|
|
|
| <div id="assessmentQuestions" class="assessment-step">
|
| <div class="progress-bar">
|
| <div class="progress-fill"></div>
|
| </div>
|
| <span class="progress-text">
|
| <span data-key="question">Question</span>
|
| <span id="currentQuestion">1</span> of <span id="totalQuestions">9</span>
|
| </span>
|
|
|
| <div class="question-container">
|
| <h3 id="questionText"></h3>
|
| <div id="questionOptions" class="question-options"></div>
|
| </div>
|
|
|
| <div class="question-navigation">
|
| <button id="prevQuestion" class="btn btn--outline" data-key="previous">Previous</button>
|
| <button id="nextQuestion" class="btn btn--primary" data-key="next">Next</button>
|
| </div>
|
| </div>
|
|
|
|
|
| <div id="assessmentResults" class="assessment-step">
|
| <div class="results-container">
|
| <h2 id="resultTitle" data-key="results_title">Your Assessment Results</h2>
|
|
|
| <div class="results-grid">
|
| <div class="result-card">
|
| <div class="score-display">
|
| <span class="score-number" id="scoreNumber">0</span>
|
| <span class="score-total" id="scoreTotal">/ 27</span>
|
| </div>
|
| <div id="riskLevel" class="risk-level">Minimal Risk</div>
|
| </div>
|
| </div>
|
|
|
| <div class="recommendations">
|
| <h3 data-key="recommendations_title">Personalized Recommendations</h3>
|
| <div id="recommendationsList" class="recommendations-list"></div>
|
| </div>
|
|
|
| <div class="next-steps">
|
| <button class="btn btn--primary" data-screen="chatScreen" data-key="talk_to_ai">Talk to AI Support</button>
|
| <button class="btn btn--outline" data-screen="resourcesScreen" data-key="explore_resources">Explore Resources</button>
|
| <button id="retakeAssessment" class="btn btn--secondary" data-key="retake_assessment">Take Another Assessment</button>
|
| </div>
|
| </div>
|
| </div>
|
| </div>
|
| </div>
|
| </div>
|
|
|
|
|
| <div id="chatScreen" class="screen">
|
| <div class="container">
|
| <a href="#" class="back-btn" data-target="landingScreen" data-key="back_to_home">← Back to Home</a>
|
|
|
| <div class="chat-header">
|
| <h2 data-key="ai_assistant_title">AI Support Assistant</h2>
|
| <p data-key="ai_assistant_subtitle">Get immediate support and guidance. I'm here to help 24/7.</p>
|
| </div>
|
|
|
|
|
| <div id="crisisAlert" class="crisis-alert hidden">
|
| <div class="crisis-content">
|
| <p><strong data-key="crisis_detected">Crisis Detected:</strong></p>
|
| <p data-key="crisis_message">I'm very concerned about what you've shared. Please reach out for immediate help:</p>
|
| <div class="crisis-actions">
|
| <button id="emergencyContact" class="btn btn--sm btn--primary" data-key="contact_helpline">Contact Crisis Helpline</button>
|
| <button id="findCounselor" class="btn btn--sm btn--outline" data-key="find_counselor">Find Counselor</button>
|
| </div>
|
| </div>
|
| </div>
|
|
|
| <div class="chat-container">
|
| <div id="chatMessages" class="chat-messages">
|
|
|
| <div id="typing-indicator" class="hidden typing-indicator">
|
| <div class="message bot-message">
|
| <div class="message-content">
|
| <div class="typing-dots">
|
| <span></span>
|
| <span></span>
|
| <span></span>
|
| </div>
|
| </div>
|
| </div>
|
| </div>
|
| </div>
|
|
|
| <div class="chat-input-container">
|
| <div class="chat-input">
|
| <textarea id="chatInput" class="form-control" placeholder="Type your message here..." rows="1"></textarea>
|
| <button id="sendMessage" class="btn btn--primary" data-key="send">Send</button>
|
| </div>
|
|
|
| <div class="quick-responses">
|
| <button class="quick-response" data-message="I'm feeling anxious" data-key="feeling_anxious">I'm feeling anxious</button>
|
| <button class="quick-response" data-message="I can't sleep" data-key="cant_sleep">I can't sleep</button>
|
| <button class="quick-response" data-message="I'm stressed about exams" data-key="exam_stress">I'm stressed about exams</button>
|
| <button class="quick-response" data-message="I feel lonely" data-key="feeling_lonely">I feel lonely</button>
|
| </div>
|
| </div>
|
| </div>
|
| </div>
|
| </div>
|
|
|
|
|
| <div id="resourcesScreen" class="screen">
|
| <div class="container">
|
| <a href="#" class="back-btn" data-target="landingScreen" data-key="back_to_home">← Back to Home</a>
|
|
|
| <div class="resource-header">
|
| <h2 data-key="resource_library_title">Resource Library</h2>
|
| <p data-key="resource_library_subtitle">Access educational content, exercises, and tools for mental wellness</p>
|
| </div>
|
|
|
| <div class="resources-categories">
|
|
|
| </div>
|
| </div>
|
| </div>
|
|
|
|
|
| <div id="bookingScreen" class="screen">
|
| <div class="container">
|
| <a href="#" class="back-btn" data-target="landingScreen" data-key="back_to_home">← Back to Home</a>
|
|
|
| <div class="booking-container">
|
| <div class="booking-header">
|
| <h2 data-key="booking_title">Book Appointment</h2>
|
| <p data-key="booking_subtitle">Schedule a session with our qualified mental health professionals</p>
|
| </div>
|
|
|
|
|
| <div id="selectCounselor" class="booking-step active">
|
| <h3 data-key="select_counselor">Select a Counselor</h3>
|
| <div id="counselorList" class="counselor-list">
|
|
|
| </div>
|
| </div>
|
|
|
|
|
| <div id="selectDateTime" class="booking-step">
|
| <h3 data-key="select_date_time">Select Date & Time</h3>
|
|
|
| <div class="datetime-selection">
|
| <div class="calendar-section">
|
| <h4>January 2025</h4>
|
| <div id="calendar" class="calendar">
|
|
|
| </div>
|
| </div>
|
|
|
| <div class="time-section">
|
| <h4>Available Times</h4>
|
| <div id="timeSlots" class="time-slots">
|
|
|
| </div>
|
| </div>
|
| </div>
|
| </div>
|
|
|
|
|
| <div id="selectType" class="booking-step">
|
| <h3 data-key="select_appointment_type">Select Appointment Type</h3>
|
|
|
| <div class="appointment-types">
|
| <div class="appointment-type">
|
| <h4 data-key="individual_session">Individual Session</h4>
|
| <p data-key="individual_session_desc">One-on-one counseling session (50 minutes)</p>
|
| </div>
|
|
|
| <div class="appointment-type">
|
| <h4 data-key="group_session">Group Session</h4>
|
| <p data-key="group_session_desc">Group therapy session (60 minutes)</p>
|
| </div>
|
|
|
| <div class="appointment-type">
|
| <h4 data-key="crisis_intervention">Crisis Intervention</h4>
|
| <p data-key="crisis_intervention_desc">Immediate support (30 minutes)</p>
|
| </div>
|
| </div>
|
| </div>
|
|
|
|
|
| <div id="confirmBooking" class="booking-step">
|
| <h3 data-key="confirm_appointment">Confirm Appointment</h3>
|
|
|
| <div class="booking-summary">
|
| <div class="summary-item">
|
| <strong data-key="counselor">Counselor:</strong>
|
| <span id="confirmCounselor"></span>
|
| </div>
|
| <div class="summary-item">
|
| <strong data-key="date">Date:</strong>
|
| <span id="confirmDate"></span>
|
| </div>
|
| <div class="summary-item">
|
| <strong data-key="time">Time:</strong>
|
| <span id="confirmTime"></span>
|
| </div>
|
| <div class="summary-item">
|
| <strong data-key="type">Type:</strong>
|
| <span id="confirmType"></span>
|
| </div>
|
| </div>
|
|
|
| <button id="confirmBooking" class="btn btn--primary btn--full-width" data-key="confirm_booking_btn">Confirm Appointment</button>
|
| </div>
|
| </div>
|
| </div>
|
| </div>
|
|
|
|
|
| <div id="dashboardScreen" class="screen">
|
| <div class="container">
|
| <a href="#" class="back-btn" data-target="landingScreen" data-key="back_to_home">← Back to Home</a>
|
|
|
| <div class="dashboard-header">
|
| <h2 data-key="my_dashboard_title">My Dashboard</h2>
|
| <p data-key="my_dashboard_subtitle">Track your mental health journey and progress</p>
|
| </div>
|
|
|
| <div class="dashboard-grid">
|
| <div class="dashboard-card">
|
| <h3 data-key="mood_tracking">Mood Tracking</h3>
|
| <div class="chart-container">
|
| <canvas id="moodChart"></canvas>
|
| </div>
|
| </div>
|
|
|
| <div class="dashboard-card">
|
| <h3 data-key="assessment_history">Assessment History</h3>
|
| <div class="chart-container">
|
| <canvas id="assessmentChart"></canvas>
|
| </div>
|
| </div>
|
|
|
| <div class="dashboard-card">
|
| <h3 data-key="recent_activities">Recent Activities</h3>
|
| <div class="activity-list">
|
| <div class="activity-item">
|
| <span class="activity-date" data-key="today">Today</span>
|
| <span class="activity-text" data-key="activity1">Completed PHQ-9 assessment</span>
|
| </div>
|
| <div class="activity-item">
|
| <span class="activity-date" data-key="yesterday">Yesterday</span>
|
| <span class="activity-text" data-key="activity2">Used breathing exercise</span>
|
| </div>
|
| <div class="activity-item">
|
| <span class="activity-date" data-key="2_days_ago">2 days ago</span>
|
| <span class="activity-text" data-key="activity3">Booked appointment with Dr. Johnson</span>
|
| </div>
|
| </div>
|
| </div>
|
|
|
| <div class="dashboard-card">
|
| <h3 data-key="quick_actions">Quick Actions</h3>
|
| <div class="quick-actions-grid">
|
| <button class="btn btn--outline" data-screen="chatScreen" data-key="chat_support">Chat Support</button>
|
| <button class="btn btn--outline" data-screen="bookingScreen" data-key="book_session">Book Session</button>
|
| <button class="btn btn--outline" data-screen="assessmentScreen">Take Assessment</button>
|
| <button class="btn btn--outline" data-screen="resourcesScreen">Resources</button>
|
| </div>
|
| </div>
|
| </div>
|
| </div>
|
| </div>
|
|
|
|
|
| <div id="adminScreen" class="screen">
|
| <div class="container">
|
| <a href="#" class="back-btn" data-target="landingScreen" data-key="back_to_home">← Back to Home</a>
|
|
|
| <div class="admin-header">
|
| <h2 data-key="admin_dashboard_title">Admin Dashboard</h2>
|
| <p data-key="admin_dashboard_subtitle">Institutional analytics and monitoring (Demo)</p>
|
| </div>
|
|
|
| <div class="admin-stats">
|
| <div class="stat-card">
|
| <h3 data-key="total_students">Total Students</h3>
|
| <div class="stat-number">856</div>
|
| </div>
|
| <div class="stat-card">
|
| <h3 data-key="active_users">Active Users</h3>
|
| <div class="stat-number">234</div>
|
| </div>
|
| <div class="stat-card">
|
| <h3 data-key="crisis_alerts">Crisis Alerts</h3>
|
| <div class="stat-number">3</div>
|
| </div>
|
| <div class="stat-card">
|
| <h3 data-key="appointments">Appointments</h3>
|
| <div class="stat-number">45</div>
|
| </div>
|
| </div>
|
|
|
| <div class="admin-charts">
|
| <div class="chart-section">
|
| <h3 data-key="usage_analytics">Usage Analytics</h3>
|
| <div class="chart-container">
|
| <canvas id="usageChart"></canvas>
|
| </div>
|
| </div>
|
|
|
| <div class="chart-section">
|
| <h3 data-key="risk_level_distribution">Risk Level Distribution</h3>
|
| <div class="chart-container">
|
| <canvas id="riskChart"></canvas>
|
| </div>
|
| </div>
|
| </div>
|
|
|
| <div class="crisis-monitoring">
|
| <h3 data-key="crisis_monitoring">Crisis Monitoring</h3>
|
| <div class="alert-list">
|
| <div class="alert-item medium">
|
| <strong data-key="medium_priority">Medium Priority:</strong>
|
| <span data-key="medium_priority_desc">Student ID #STU456 - Elevated anxiety scores</span>
|
| </div>
|
| <div class="alert-item high">
|
| <strong data-key="high_priority">High Priority:</strong>
|
| <span data-key="high_priority_desc">Crisis keywords detected in chat - Student ID #STU789</span>
|
| </div>
|
| </div>
|
| </div>
|
| </div>
|
| </div>
|
| </main>
|
|
|
|
|
| <div id="loginModal" class="modal">
|
| <div class="modal-content">
|
| <div class="modal-header">
|
| <h3 data-key="student_login">Student Login</h3>
|
| <button id="closeLoginModal" class="modal-close">×</button>
|
| </div>
|
| <div class="modal-body">
|
| <form id="loginForm">
|
| <div class="form-group">
|
| <label for="studentId" class="form-label" data-key="student_id">Student ID</label>
|
| <input type="text" id="studentId" name="studentId" class="form-control" required>
|
| </div>
|
| <div class="form-group">
|
| <label for="loginPassword" class="form-label" data-key="password">Password</label>
|
| <input type="password" id="loginPassword" name="password" class="form-control" required>
|
| </div>
|
| <button type="submit" class="btn btn--primary btn--full-width" data-key="login">Login</button>
|
| </form>
|
| </div>
|
| </div>
|
| </div>
|
|
|
|
|
| <div id="successModal" class="modal">
|
| <div class="modal-content">
|
| <div class="modal-header">
|
| <h3 data-key="success">Success!</h3>
|
| <button class="modal-close">×</button>
|
| </div>
|
| <div class="modal-body">
|
| <p id="successMessage"></p>
|
| <button class="btn btn--primary" data-key="close">Close</button>
|
| </div>
|
| </div>
|
| </div>
|
|
|
| <script src="noob.js"></script>
|
| </body>
|
| </html> |
