74 lines
3.1 KiB
HTML
74 lines
3.1 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
|
<title>HydroFlux</title>
|
|
<meta name="description" content="Futuristic Hydration & Fitness Tracker">
|
|
<meta name="theme-color" content="#0a0a12">
|
|
|
|
<!-- PWA Application Settings -->
|
|
<link rel="manifest" href="/manifest.json">
|
|
<meta name="apple-mobile-web-app-capable" content="yes">
|
|
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
|
|
<meta name="apple-mobile-web-app-title" content="HydroFlux">
|
|
|
|
<!-- Fonts: Orbitron for headers, Outfit for body text -->
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link
|
|
href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&family=Outfit:wght@300;400;600&display=swap"
|
|
rel="stylesheet">
|
|
|
|
<link rel="stylesheet" href="css/style.css?v=3">
|
|
</head>
|
|
|
|
<body>
|
|
<div id="app">
|
|
<!-- Main Layout injected here -->
|
|
<header class="glass-header">
|
|
<h1 class="glow-text">HYDRO<span class="highlight">FLUX</span></h1>
|
|
<div id="connection-status" class="status-indicator"></div>
|
|
</header>
|
|
|
|
<main id="main-content">
|
|
<!-- Dynamic Content -->
|
|
<section id="water-section" class="glass-panel">
|
|
<!-- Water Tracker injected via JS -->
|
|
<div class="loader">Loading Core...</div>
|
|
</section>
|
|
|
|
<section id="streak-section" class="glass-panel" style="display: none;">
|
|
<!-- Streak Tracker injected via JS -->
|
|
</section>
|
|
|
|
<section id="fitness-section" class="glass-panel" style="display: none;">
|
|
<h2>FITNESS DATA</h2>
|
|
<p style="text-align:center; color: var(--text-muted); margin-top: 20px;">Coming Soon</p>
|
|
</section>
|
|
</main>
|
|
|
|
<nav class="glass-nav">
|
|
<button class="nav-btn active" data-view="water">
|
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<path d="M12 2.69l5.66 5.66a8 8 0 1 1-11.31 0z" />
|
|
</svg>
|
|
</button>
|
|
<button class="nav-btn" data-view="streak">
|
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<path
|
|
d="M8.5 14.5A2.5 2.5 0 0 0 11 12c0-1.38-.5-2-1-3-1.072-2.143-.224-4.054 2-6 .5 2.5 2 4.9 4 6.5 2 1.6 3 3.5 3 5.5a7 7 0 1 1-14 0c0-1.153.433-2.294 1-3a2.5 2.5 0 0 0 2.5 2.5z" />
|
|
</svg>
|
|
</button>
|
|
<button class="nav-btn" data-view="fitness">
|
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<polyline points="22 12 18 12 15 21 9 3 6 12 2 12" />
|
|
</svg>
|
|
</button>
|
|
</nav>
|
|
</div>
|
|
<script type="module" src="js/app.js?v=2"></script>
|
|
</body>
|
|
|
|
</html> |