130 lines
5.4 KiB
HTML
130 lines
5.4 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
|
|
<title>MindShift - CBT Therapy App</title>
|
|
|
|
<!-- PWA Meta Tags -->
|
|
<meta name="theme-color" content="#8ECAE6">
|
|
<meta name="description" content="Your personal CBT therapy companion for mood management and mental wellness">
|
|
<meta name="apple-mobile-web-app-capable" content="yes">
|
|
<meta name="apple-mobile-web-app-status-bar-style" content="default">
|
|
<meta name="apple-mobile-web-app-title" content="MindShift">
|
|
<meta name="application-name" content="MindShift">
|
|
<meta name="msapplication-TileColor" content="#FF6B6B">
|
|
<meta name="msapplication-config" content="browserconfig.xml">
|
|
|
|
<!-- PWA Manifest -->
|
|
<link rel="manifest" href="manifest.json">
|
|
|
|
<!-- Fonts -->
|
|
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet">
|
|
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
|
|
|
|
<!-- Styles -->
|
|
<link rel="stylesheet" href="styles.css">
|
|
<link rel="stylesheet" href="guided-styles.css">
|
|
</head>
|
|
<body>
|
|
<!-- Animated Background Orbs -->
|
|
<div class="background-orbs">
|
|
<div class="orb orb-1"></div>
|
|
<div class="orb orb-2"></div>
|
|
<div class="orb orb-3"></div>
|
|
</div>
|
|
|
|
<!-- Success Ping Container -->
|
|
<div id="success-ping" class="success-ping"></div>
|
|
|
|
<!-- Proactive Badge -->
|
|
<div id="proactive-badge" class="proactive-badge">✨ Time for a vibe check?</div>
|
|
|
|
<!-- Welcome Overlay -->
|
|
<div id="welcome-overlay" class="welcome-overlay">
|
|
<div class="welcome-emoji">🧠</div>
|
|
<h1 class="welcome-title">MindShift</h1>
|
|
<p class="welcome-subtitle">Your personal CBT companion</p>
|
|
</div>
|
|
|
|
<!-- Header -->
|
|
<header class="app-header">
|
|
<div class="header-content">
|
|
<div class="app-title">
|
|
<span class="material-icons">self_improvement</span>
|
|
MindShift
|
|
</div>
|
|
<div class="header-actions">
|
|
<button class="nav-item" onclick="showLanguageModal()" style="color: var(--primary);">
|
|
<span class="material-icons">language</span>
|
|
</button>
|
|
<div style="position: relative;">
|
|
<button class="nav-item" onclick="toggleNotifications()" style="color: white;">
|
|
<span class="material-icons">notifications</span>
|
|
<span id="notification-badge" class="notification-badge" style="display: none;">0</span>
|
|
</button>
|
|
<div id="notification-list" class="notification-dropdown">
|
|
<!-- Notifications will be loaded here -->
|
|
</div>
|
|
</div>
|
|
<button class="nav-item" onclick="logout()" style="color: white;">
|
|
<span class="material-icons">logout</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- Main Content -->
|
|
<main id="main-content" class="main-content">
|
|
<!-- Loading State -->
|
|
<div id="initial-loader" style="display: flex; flex-direction: column; align-items: center; justify-content: center; height: 80vh; color: #666;">
|
|
<div class="spinner" style="width: 40px; height: 40px; border: 4px solid #f3f3f3; border-top: 4px solid #FF6B6B; border-radius: 50%; animation: spin 1s linear infinite;"></div>
|
|
<p style="margin-top: 20px; font-family: sans-serif;">Initializing MindShift...</p>
|
|
</div>
|
|
</main>
|
|
|
|
<!-- Bottom Navigation -->
|
|
<nav class="bottom-nav">
|
|
<button class="nav-item active" onclick="navigateTo('home')">
|
|
<span class="material-icons">home</span>
|
|
<span class="nav-label">Home</span>
|
|
</button>
|
|
<button class="nav-item" onclick="navigateTo('mood')">
|
|
<span class="material-icons">mood</span>
|
|
<span class="nav-label">Mood</span>
|
|
</button>
|
|
<button class="nav-item" onclick="navigateTo('thoughts')">
|
|
<span class="material-icons">psychology</span>
|
|
<span class="nav-label">Thoughts</span>
|
|
</button>
|
|
<button class="nav-item" onclick="navigateTo('gratitude')">
|
|
<span class="material-icons">favorite</span>
|
|
<span class="nav-label">Gratitude</span>
|
|
</button>
|
|
<button class="nav-item" onclick="navigateTo('progress')">
|
|
<span class="material-icons">insights</span>
|
|
<span class="nav-label">Progress</span>
|
|
</button>
|
|
</nav>
|
|
|
|
<!-- Floating Action Button -->
|
|
<button class="fab" onclick="showQuickActionMenu()">
|
|
<span class="material-icons">add</span>
|
|
</button>
|
|
|
|
<style>
|
|
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
|
|
</style>
|
|
<!-- Scripts -->
|
|
<script>
|
|
window.addEventListener('error', function(e) {
|
|
// Display error on screen if app fails to load
|
|
var loader = document.getElementById('initial-loader');
|
|
if (loader) {
|
|
loader.innerHTML = '<div style="color: red; padding: 20px; text-align: center;"><h3>Error Loading App</h3><p>' + e.message + '</p></div>';
|
|
}
|
|
});
|
|
</script>
|
|
<script type="module" src="./app.js"></script>
|
|
</body>
|
|
</html> |