135 lines
6.4 KiB
HTML
135 lines
6.4 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>HydroFit</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="HydroFit">
|
|
|
|
<!-- 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">
|
|
|
|
<!-- DEBUGGING SCRIPT -->
|
|
<script>
|
|
// Production Error Handling
|
|
window.onerror = function (msg, url, line) {
|
|
console.error("JS Error: " + msg + " @ " + line);
|
|
};
|
|
</script>
|
|
</head>
|
|
|
|
<body>
|
|
<div id="app">
|
|
<!-- Main Layout injected here -->
|
|
<header class="glass-header">
|
|
<h1 class="glow-text">HYDRO<span class="highlight">FIT</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>
|
|
<div id="fitness-container">
|
|
<!-- Populated by JS -->
|
|
</div>
|
|
</section>
|
|
|
|
<section id="stats-section" class="glass-panel" style="display: none;">
|
|
<!-- Stats injected via JS -->
|
|
</section>
|
|
|
|
<section id="goals-section" class="glass-panel" style="display: none;">
|
|
<!-- Goals injected via JS -->
|
|
</section>
|
|
</main>
|
|
|
|
<!-- Settings Modal (Glassmorphism) -->
|
|
<div id="settings-modal" class="modal-overlay" style="display: none;">
|
|
<div class="glass-panel modal-content">
|
|
<div class="modal-header">
|
|
<h2>SETTINGS</h2>
|
|
<button id="close-settings-btn" class="icon-btn-small">✕</button>
|
|
</div>
|
|
|
|
<div class="setting-group">
|
|
<label>Daily Water Goal (mL)</label>
|
|
<input type="number" id="setting-goal-input" class="glow-input">
|
|
</div>
|
|
|
|
<div class="setting-group">
|
|
<label>Custom Bottle Size (mL)</label>
|
|
<input type="number" id="setting-bottle-input" class="glow-input">
|
|
</div>
|
|
|
|
<button id="save-settings-btn" class="glow-btn full-width">SAVE CHANGES</button>
|
|
</div>
|
|
</div>
|
|
|
|
<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>
|
|
<button class="nav-btn" data-view="stats">
|
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<line x1="18" y1="20" x2="18" y2="10"></line>
|
|
<line x1="12" y1="20" x2="12" y2="4"></line>
|
|
<line x1="6" y1="20" x2="6" y2="14"></line>
|
|
</svg>
|
|
</button>
|
|
<button class="nav-btn" data-view="goals">
|
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<path d="M9 11l3 3L22 4"></path>
|
|
<path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"></path>
|
|
</svg>
|
|
</button>
|
|
<button class="nav-btn" id="open-settings-btn">
|
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<circle cx="12" cy="12" r="3"></circle>
|
|
<path
|
|
d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z">
|
|
</path>
|
|
</svg>
|
|
</button>
|
|
</nav>
|
|
</div>
|
|
<script type="module" src="js/app.js"></script>
|
|
</body>
|
|
|
|
</html> |