David/HydroFlux
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

HydroFlux 0.0.1

Browse Source
This commit is contained in:
David
2026-02-04 20:56:57 +11:00
commit 5a8c661ce8
88 changed files with 7464 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
Hydroflux/app/src/main/assets/css/fitness_stats.css Normal file
View File

@@ -0,0 +1,40 @@
/* --- New Fitness Stats Display --- */
.rings-stats {
display: flex;
justify-content: center;
gap: 40px;
margin-top: 20px;
width: 100%;
}
.stat-item {
display: flex;
flex-direction: column;
align-items: center;
gap: 5px;
}
.stat-item.cyan .stat-number {
color: var(--primary-cyan);
text-shadow: 0 0 10px rgba(0, 243, 255, 0.4);
}
.stat-item.purple .stat-number {
color: var(--secondary-purple);
text-shadow: 0 0 10px rgba(188, 19, 254, 0.4);
}
.stat-label-small {
font-size: 0.75rem;
color: var(--text-muted);
letter-spacing: 2px;
display: flex;
align-items: center;
gap: 6px;
}
.stat-number {
font-family: var(--font-heading);
font-size: 1.8rem;
font-weight: 700;
}

955
Hydroflux/app/src/main/assets/css/style.css Normal file
View File

@@ -0,0 +1,955 @@
:root {
/* Futuristic Palette */
--bg-dark: #050508;
--bg-panel: rgba(20, 20, 35, 0.4);
--primary-cyan: #00f3ff;
--secondary-purple: #bc13fe;
--text-main: #e0e0e0;
--text-muted: #8a8a9b;
--glass-border: rgba(255, 255, 255, 0.08);
--neon-shadow: 0 0 10px rgba(0, 243, 255, 0.5);
/* Spacing */
--spacing-sm: 8px;
--spacing-md: 16px;
--spacing-lg: 24px;
/* Font */
--font-heading: 'Orbitron', sans-serif;
--font-body: 'Outfit', sans-serif;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
-webkit-tap-highlight-color: transparent;
/* Remove mobile tap highlight */
}
body {
background-color: var(--bg-dark);
color: var(--text-main);
font-family: var(--font-body);
height: 100vh;
overflow: hidden;
background-image:
radial-gradient(circle at 10% 20%, rgba(188, 19, 254, 0.1) 0%, transparent 40%),
radial-gradient(circle at 90% 80%, rgba(0, 243, 255, 0.08) 0%, transparent 40%);
}
#app {
display: flex;
flex-direction: column;
height: 100%;
}
/* Typography */
h1,
h2,
h3 {
font-family: var(--font-heading);
letter-spacing: 1px;
}
.glow-text {
text-shadow: 0 0 8px rgba(0, 243, 255, 0.3);
}
.highlight {
color: var(--primary-cyan);
}
/* Glassmorphism Utilities */
.glass-header {
background: rgba(5, 5, 8, 0.7);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
padding: var(--spacing-md);
border-bottom: 1px solid var(--glass-border);
display: flex;
justify-content: space-between;
align-items: center;
position: sticky;
top: 0;
z-index: 10;
}
.glass-panel {
background: var(--bg-panel);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border: 1px solid var(--glass-border);
border-radius: 20px;
padding: var(--spacing-lg);
margin: var(--spacing-md);
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}
.glass-nav {
background: rgba(10, 10, 16, 0.8);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border-top: 1px solid var(--glass-border);
padding: var(--spacing-md) var(--spacing-lg);
display: flex;
justify-content: space-around;
position: fixed;
bottom: 0;
width: 100%;
padding-bottom: max(16px, env(safe-area-inset-bottom));
/* Safe area for iOS */
}
/* Content Area */
#main-content {
flex: 1;
overflow-y: auto;
padding-bottom: 80px;
/* Space for nav */
}
/* Interactive Elements */
.nav-btn {
background: none;
border: none;
color: var(--text-muted);
padding: 10px;
border-radius: 50%;
transition: all 0.3s ease;
cursor: pointer;
}
.nav-btn.active {
color: var(--primary-cyan);
background: rgba(0, 243, 255, 0.1);
box-shadow: 0 0 15px rgba(0, 243, 255, 0.2);
}
.nav-btn svg {
display: block;
}
/* Animations */
@keyframes pulse-glow {
0% {
box-shadow: 0 0 5px rgba(0, 243, 255, 0.5);
}
50% {
box-shadow: 0 0 20px rgba(0, 243, 255, 0.8);
}
100% {
box-shadow: 0 0 5px rgba(0, 243, 255, 0.5);
}
}
/* --- Water Tracker Module Styles --- */
.water-tracker-container {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--spacing-lg);
}
.circle-container {
position: relative;
width: 250px;
height: 250px;
border-radius: 50%;
border: 4px solid var(--bg-panel);
box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
overflow: hidden;
/* Clips the wave */
background: rgba(0, 0, 0, 0.3);
}
.water-circle {
width: 100%;
height: 100%;
position: relative;
}
/* Wave Animation */
.wave {
position: absolute;
top: 100%;
/* Dynamic */
left: -50%;
width: 200%;
height: 200%;
background: rgba(0, 243, 255, 0.4);
border-radius: 40%;
animation: rotate 6s linear infinite;
transition: top 1s ease-in-out;
}
.wave::before {
content: "";
position: absolute;
top: 5px;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 243, 255, 0.3);
/* Lighter top layer */
border-radius: 40%;
animation: rotate 10s linear infinite reverse;
}
@keyframes rotate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.circle-content {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
z-index: 2;
/* Above wave */
pointer-events: none;
}
.water-percentage {
font-family: var(--font-heading);
font-size: 3rem;
font-weight: 700;
color: #fff;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}
.water-label {
font-size: 0.8rem;
letter-spacing: 2px;
color: rgba(255, 255, 255, 0.7);
margin-top: -5px;
}
.stats-row {
font-family: var(--font-heading);
font-size: 1.2rem;
color: var(--primary-cyan);
}
/* Controls */
.controls-area {
width: 100%;
display: flex;
flex-direction: column;
gap: var(--spacing-md);
align-items: center;
}
.bottle-selector {
display: flex;
align-items: center;
gap: 10px;
font-size: 0.9rem;
color: var(--text-muted);
}
.bottle-selector input {
background: rgba(0, 0, 0, 0.3);
border: 1px solid var(--primary-cyan);
color: var(--primary-cyan);
padding: 10px;
border-radius: 12px;
font-family: var(--font-heading);
width: 80px;
text-align: center;
font-size: 1.1rem;
outline: none;
box-shadow: 0 0 10px rgba(0, 243, 255, 0.1);
}
.bottle-selector input:focus {
box-shadow: 0 0 15px rgba(0, 243, 255, 0.3);
}
.action-buttons {
display: flex;
align-items: center;
gap: 20px;
margin-top: 10px;
}
.icon-btn {
background: rgba(255, 255, 255, 0.05);
border: 1px solid var(--glass-border);
color: var(--text-muted);
width: 60px;
height: 60px;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.icon-btn.secondary {
border-color: rgba(255, 50, 50, 0.3);
color: #ff4d4d;
}
.icon-btn:active {
transform: scale(0.9);
}
.glow-btn {
position: relative;
background: rgba(0, 243, 255, 0.1);
border: 1px solid var(--primary-cyan);
color: var(--primary-cyan);
font-family: var(--font-heading);
font-size: 1.1rem;
font-weight: 700;
padding: 0 40px;
height: 60px;
border-radius: 30px;
cursor: pointer;
display: flex;
align-items: center;
gap: 12px;
box-shadow: 0 0 10px rgba(0, 243, 255, 0.2), inset 0 0 20px rgba(0, 243, 255, 0.1);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
text-transform: uppercase;
letter-spacing: 2px;
overflow: hidden;
}
.glow-btn::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(0, 243, 255, 0.4), transparent);
transition: 0.5s;
}
.glow-btn:hover {
background: rgba(0, 243, 255, 0.2);
box-shadow: 0 0 30px rgba(0, 243, 255, 0.6);
color: #fff;
text-shadow: 0 0 8px rgba(0, 243, 255, 0.8);
}
.glow-btn:hover::before {
left: 100%;
}
.glow-btn:active {
transform: scale(0.98);
}
.glow-btn svg {
filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.8));
}
/* --- Streak Module Styles --- */
.streak-container {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--spacing-lg);
text-align: center;
}
.section-title {
font-size: 1.2rem;
color: var(--secondary-purple);
letter-spacing: 4px;
margin-bottom: 20px;
}
.streak-counter {
background: radial-gradient(circle, rgba(188, 19, 254, 0.1) 0%, transparent 70%);
padding: 40px;
border-radius: 50%;
margin-bottom: 20px;
}
.streak-days {
font-family: var(--font-heading);
font-size: 6rem;
color: white;
line-height: 1;
text-shadow: 0 0 20px rgba(188, 19, 254, 0.6);
}
.streak-label {
font-size: 1.5rem;
color: var(--text-muted);
letter-spacing: 5px;
}
.streak-detail {
font-size: 1rem;
color: var(--primary-cyan);
margin-top: 10px;
}
.quote-card {
background: rgba(255, 255, 255, 0.05);
border-left: 3px solid var(--primary-cyan);
padding: 20px;
font-style: italic;
color: #dedede;
margin: 20px 0;
line-height: 1.6;
max-width: 300px;
}
.danger-btn {
position: relative;
background: rgba(255, 50, 50, 0.1);
border: 1px solid #ff4d4d;
color: #ff4d4d;
font-family: var(--font-heading);
padding: 30px 20px 15px;
/* Increased top padding for camera cutout */
border-radius: 30px;
cursor: pointer;
font-size: 1rem;
letter-spacing: 2px;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
margin-top: 30px;
box-shadow: 0 0 10px rgba(255, 50, 50, 0.2), inset 0 0 20px rgba(255, 50, 50, 0.1);
text-transform: uppercase;
font-weight: 700;
}
.danger-btn:hover {
background: rgba(255, 50, 50, 0.2);
box-shadow: 0 0 30px rgba(255, 50, 50, 0.6);
color: #fff;
text-shadow: 0 0 8px rgba(255, 50, 50, 0.8);
transform: translateY(-2px);
}
.danger-btn:active {
transform: scale(0.95);
}
/* --- Connect Button (Neon Cyan Variant) --- */
.connect-glow-btn {
position: relative;
background: rgba(0, 243, 255, 0.1);
border: 1px solid var(--primary-cyan);
color: var(--primary-cyan);
font-family: var(--font-heading);
padding: 8px 24px;
border-radius: 20px;
cursor: pointer;
font-size: 0.9rem;
letter-spacing: 1px;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: 0 0 10px rgba(0, 243, 255, 0.2), inset 0 0 10px rgba(0, 243, 255, 0.1);
text-transform: uppercase;
font-weight: 700;
}
.connect-glow-btn:hover {
background: rgba(0, 243, 255, 0.2);
box-shadow: 0 0 20px rgba(0, 243, 255, 0.6);
color: #fff;
text-shadow: 0 0 5px rgba(0, 243, 255, 0.8);
transform: translateY(-1px);
}
.connect-glow-btn:active {
transform: scale(0.95);
}
/* --- Concentric Rings --- */
.rings-wrapper {
display: flex;
flex-direction: column;
align-items: center;
margin-bottom: 20px;
background: radial-gradient(circle, rgba(255, 255, 255, 0.02) 0%, transparent 70%);
padding: 20px;
border-radius: 50%;
}
.concentric-svg {
width: 200px;
height: 200px;
transform: rotate(-90deg);
}
.ring-bg {
fill: none;
stroke: rgba(255, 255, 255, 0.05);
/* Proper track color */
}
.ring-progress {
fill: none;
stroke-linecap: round;
transition: stroke-dashoffset 1.5s ease-in-out;
}
.ring-progress.cyan {
stroke: var(--primary-cyan);
filter: drop-shadow(0 0 5px var(--primary-cyan));
}
.ring-progress.purple {
stroke: var(--secondary-purple);
filter: drop-shadow(0 0 5px var(--secondary-purple));
}
.rings-legend {
display: flex;
gap: 20px;
margin-top: 15px;
}
.legend-item {
font-size: 0.8rem;
color: var(--text-muted);
display: flex;
align-items: center;
gap: 8px;
letter-spacing: 1px;
}
.dot {
width: 8px;
height: 8px;
border-radius: 50%;
}
.dot.cyan {
background: var(--primary-cyan);
box-shadow: 0 0 5px var(--primary-cyan);
}
.dot.purple {
background: var(--secondary-purple);
box-shadow: 0 0 5px var(--secondary-purple);
}
/* --- Combined Stat Card & Charts --- */
.stat-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
}
.stat-label {
font-size: 0.8rem;
color: var(--text-muted);
letter-spacing: 2px;
margin-bottom: 5px;
display: block;
}
.stat-value {
font-family: var(--font-heading);
font-size: 2rem;
color: #fff;
line-height: 1;
}
.stat-sub {
font-size: 0.8rem;
color: rgba(255, 255, 255, 0.5);
margin-top: 5px;
}
.icon-box {
width: 40px;
height: 40px;
border-radius: 12px;
display: flex;
justify-content: center;
align-items: center;
}
.cyan-box {
background: rgba(0, 243, 255, 0.1);
color: var(--primary-cyan);
}
.purple-box {
background: rgba(188, 19, 254, 0.1);
color: var(--secondary-purple);
}
.chart-divider {
height: 1px;
background: rgba(255, 255, 255, 0.1);
margin: 20px 0;
}
/* Re-using chart styles but refining for the box */
.chart-container.small {
height: 100px;
margin-top: 0;
border-bottom: none;
padding-bottom: 0;
display: flex;
justify-content: space-between;
align-items: flex-end;
}
.chart-column {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
}
.chart-bar {
width: 6px;
background: rgba(255, 255, 255, 0.1);
border-radius: 3px;
transition: height 1s ease-out;
}
.chart-bar.cyan {
background: var(--primary-cyan);
box-shadow: 0 0 5px rgba(0, 243, 255, 0.3);
}
.chart-bar.purple {
background: var(--secondary-purple);
box-shadow: 0 0 5px rgba(188, 19, 254, 0.3);
}
.chart-day {
color: var(--text-muted);
}
/* --- Calendar Module Styles --- */
.calendar-wrapper {
background: rgba(255, 255, 255, 0.03);
border-radius: 20px;
padding: 20px;
width: 100%;
max-width: 350px;
margin-top: 20px;
border: 1px solid var(--glass-border);
}
.calendar-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 15px;
font-family: var(--font-heading);
color: var(--text-main);
}
.cal-nav-btn {
background: none;
border: none;
color: var(--text-muted);
font-size: 1.2rem;
cursor: pointer;
padding: 5px 10px;
transition: color 0.3s;
}
.cal-nav-btn:hover {
color: var(--primary-cyan);
}
.calendar-grid {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 8px;
text-align: center;
}
.cal-day-label {
color: var(--text-muted);
font-size: 0.7rem;
margin-bottom: 5px;
font-weight: 600;
}
.cal-day {
aspect-ratio: 1;
display: flex;
align-items: center;
justify-content: center;
border-radius: 8px;
background: rgba(255, 255, 255, 0.02);
color: rgba(255, 255, 255, 0.3);
font-size: 0.9rem;
position: relative;
font-family: var(--font-body);
}
.cal-day.active {
background: rgba(188, 19, 254, 0.2);
color: #fff;
box-shadow: 0 0 10px rgba(188, 19, 254, 0.2);
border: 1px solid rgba(188, 19, 254, 0.4);
}
.cal-day.start-date {
background: rgba(0, 243, 255, 0.2);
border-color: var(--primary-cyan);
box-shadow: 0 0 10px rgba(0, 243, 255, 0.3);
}
.cal-day.today::after {
content: '';
position: absolute;
bottom: 4px;
width: 4px;
height: 4px;
background: #fff;
border-radius: 50%;
}
/* --- Modal Styles --- */
.modal-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.8);
backdrop-filter: blur(5px);
z-index: 100;
display: flex;
justify-content: center;
align-items: center;
animation: fadeIn 0.3s ease;
}
.modal-content {
width: 90%;
max-width: 400px;
background: rgba(10, 10, 20, 0.95);
/* Darker for readability */
border: 1px solid var(--primary-cyan);
box-shadow: 0 0 30px rgba(0, 243, 255, 0.2);
}
.modal-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
border-bottom: 1px solid var(--glass-border);
padding-bottom: 10px;
}
.icon-btn-small {
background: none;
border: none;
color: var(--text-muted);
font-size: 1.5rem;
cursor: pointer;
}
.setting-group {
margin-bottom: 20px;
}
.setting-group label {
display: block;
color: var(--text-muted);
margin-bottom: 8px;
font-size: 0.9rem;
letter-spacing: 1px;
}
.glow-input {
width: 100%;
background: rgba(255, 255, 255, 0.05);
border: 1px solid var(--glass-border);
color: #fff;
padding: 15px;
border-radius: 12px;
font-size: 1.1rem;
font-family: var(--font-heading);
outline: none;
transition: all 0.3s;
}
.glow-input:focus {
border-color: var(--primary-cyan);
box-shadow: 0 0 15px rgba(0, 243, 255, 0.2);
}
.full-width {
width: 100%;
justify-content: center;
margin-top: 10px;
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
/* --- Fitness Schedule Styles --- */
.workout-card {
background: rgba(255, 255, 255, 0.05);
border: 1px solid var(--glass-border);
border-radius: 20px;
padding: 20px;
width: 100%;
margin-bottom: 20px;
position: relative;
overflow: hidden;
}
.glow-card {
box-shadow: 0 0 20px rgba(0, 243, 255, 0.1);
border-color: rgba(0, 243, 255, 0.3);
}
.card-header {
margin-bottom: 20px;
}
.day-badge {
font-size: 0.8rem;
color: var(--text-muted);
letter-spacing: 2px;
display: block;
margin-bottom: 5px;
}
.workout-type {
font-family: var(--font-heading);
font-size: 1.8rem;
line-height: 1.2;
text-transform: uppercase;
}
.exercise-list {
display: flex;
flex-direction: column;
gap: 15px;
}
.exercise-item {
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
padding-bottom: 10px;
}
.exercise-item:last-child {
border-bottom: none;
}
.ex-name {
font-size: 1rem;
color: #e0e0e0;
}
.ex-meta {
font-family: var(--font-heading);
color: var(--primary-cyan);
font-size: 0.9rem;
text-align: right;
}
.ex-note {
font-family: var(--font-body);
font-size: 0.8rem;
color: var(--text-muted);
font-weight: normal;
}
.subsection-title {
font-size: 1rem;
color: var(--text-muted);
letter-spacing: 2px;
margin-bottom: 15px;
margin-top: 10px;
}
.schedule-list {
width: 100%;
}
.schedule-row {
display: flex;
justify-content: space-between;
padding: 12px 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
font-size: 0.9rem;
}
.sch-day {
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: 1px;
}
.sch-type {
font-weight: 600;
}/* --- New Fitness Stats Display --- */
.rings-stats {
display: flex;
justify-content: center;
gap: 40px;
margin-top: 20px;
width: 100%;
}
.stat-item {
display: flex;
flex-direction: column;
align-items: center;
gap: 5px;
}
.stat-item.cyan .stat-number {
color: var(--primary-cyan);
text-shadow: 0 0 10px rgba(0, 243, 255, 0.4);
}

0
Hydroflux/app/src/main/assets/icon.png Normal file
View File

135
Hydroflux/app/src/main/assets/index.html Normal file
View File

@@ -0,0 +1,135 @@
<!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>

43
Hydroflux/app/src/main/assets/js/app.js Normal file
View File

@@ -0,0 +1,43 @@
console.log('HydroFlux Initialized');
// Simple Navigation Logic
// Simple Navigation Logic - REPLACED BY NEW BLOCK BELOW
// Initialize Modules
import { WaterTracker } from './modules/water.js';
import { StreakTracker } from './modules/streak.js';
import { FitnessDashboard } from './modules/fitness.js';
import { StatsDashboard } from './modules/stats.js';
import { GoalsTracker } from './modules/goals.js';
const waterTracker = new WaterTracker('water-section');
const streakTracker = new StreakTracker('streak-section');
const fitnessDashboard = new FitnessDashboard('fitness-section');
const statsDashboard = new StatsDashboard('stats-section');
const goalsTracker = new GoalsTracker('goals-section');
// Navigation Logic with Auto-Refresh
document.querySelectorAll('.nav-btn').forEach(btn => {
btn.addEventListener('click', (e) => {
// Toggle Active State
document.querySelectorAll('.nav-btn').forEach(b => b.classList.remove('active'));
e.currentTarget.classList.add('active');
const view = e.currentTarget.dataset.view;
// Hide all sections
document.querySelectorAll('section').forEach(el => el.style.display = 'none');
// Show target section
const target = document.getElementById(`${view}-section`);
if (target) {
target.style.display = 'block';
// Auto-Refresh Stats when viewing
if (view === 'stats') {
statsDashboard.update();
}
}
});
});

332
Hydroflux/app/src/main/assets/js/modules/fitness.js Normal file
View File

@@ -0,0 +1,332 @@
export class FitnessDashboard {
constructor(containerId) {
this.container = document.getElementById(containerId);
this.viewDate = new Date(); // Calendar View
// 1. Activity Ring Data & History
this.data = {
steps: { current: 0, goal: 10000 },
sleep: { current: 0, goal: 8 },
history: {}
};
// Try to load existing data from storage (So we don't start at 0 on refresh)
const saved = localStorage.getItem('hydroflux_fitness_v2');
if (saved) {
try {
const parsed = JSON.parse(saved);
this.data.steps.current = parsed.steps || 0;
this.data.sleep.current = parsed.sleep || 0;
this.data.history = parsed.history || {};
} catch (e) { console.error("Load failed", e); }
}
// 2. Custom Schedule Configuration
this.schedule = {
"Monday": {
type: "CHEST DAY",
focus: "Strength",
exercises: [
{ name: "Bench Press", sets: "4x8-12", note: "Bench Only" },
{ name: "Push-Ups", sets: "3xFailure", note: "Wide Grip" },
{ name: "Dips", sets: "3x10-15", note: "Use Bench/Chair" },
{ name: "Incline Push-Ups", sets: "3x12", note: "Feet on Bench" }
],
color: "var(--primary-cyan)"
},
"Tuesday": {
type: "REST & RECOVERY",
focus: "Recovery",
exercises: [
{ name: "Light Stretch", sets: "10 mins", note: "Full Body" },
{ name: "Hydrate", sets: "3 Liters", note: "Goal" }
],
color: "var(--text-muted)"
},
"Wednesday": {
type: "CARDIO",
focus: "Endurance",
exercises: [
{ name: "Running / Jogging", sets: "30 mins", note: "Steady Pace" },
{ name: "Jumping Jacks", sets: "3x1 min", note: "High Intensity" },
{ name: "Burpees", sets: "3x10", note: "Explosive" }
],
color: "var(--secondary-purple)"
},
"Thursday": {
type: "CORE STRENGTH",
focus: "Abs & Core",
exercises: [
{ name: "Plank", sets: "3x60s", note: "Hold Steady" },
{ name: "Crunches", sets: "3x20", note: "Slow Control" },
{ name: "Leg Raises", sets: "3x15", note: "Lower Abs focus" },
{ name: "Russian Twists", sets: "3x20", note: "Obliques" }
],
color: "#ff0055" // Intense Red/Pink for Core
},
"Friday": {
type: "REST & RECOVERY",
focus: "Recovery",
exercises: [
{ name: "Mobility Work", sets: "15 mins", note: "Joint Focus" },
{ name: "Walk", sets: "20 mins", note: "Light movement" }
],
color: "var(--text-muted)"
},
"Saturday": {
type: "FREESTYLE / ACTIVE",
focus: "Fun",
exercises: [
{ name: "Hiking / Sports", sets: "N/A", note: "Enjoy yourself" }
],
color: "#ffd700" // Gold
},
"Sunday": {
type: "PREP & REST",
focus: "Recharge",
exercises: [
{ name: "Meal Prep", sets: "Weekly", note: "Nutrition" },
{ name: "Sleep Early", sets: "8h+", note: "Recovery" }
],
color: "var(--text-muted)"
}
};
// 3. Setup Global Listener (Once)
window.updateHealthData = (steps, sleep) => {
// Update Data Model
this.data.steps.current = steps;
this.data.sleep.current = parseFloat(sleep.toFixed(1));
this.data.sleep.current = parseFloat(sleep.toFixed(1));
// Update today in history
const todayKey = new Date().toDateString();
this.data.history[todayKey] = {
steps: steps,
sleep: this.data.sleep.current
};
// Persist for Stats Module (NOW INCLUDES HISTORY)
localStorage.setItem('hydroflux_fitness_v2', JSON.stringify({
steps: this.data.steps.current,
sleep: this.data.sleep.current,
history: this.data.history
}));
// Re-render
this.render();
this.animate();
this.renderCalendar();
const btn = this.container.querySelector('#connect-watch-btn');
if (btn) {
btn.textContent = "UPDATE";
btn.style.borderColor = "#00ff00"; // Green success
btn.style.color = "#00ff00";
}
};
this.render();
// Delay animation to allow DOM paint
setTimeout(() => this.animate(), 100);
// 4. Auto-Sync on load if Native (Once)
if (window.HydroFluxNative) {
window.HydroFluxNative.requestHealthPermissions();
}
}
render() {
// --- Logic for Activity Rings ---
const stepPercent = Math.min((this.data.steps.current / this.data.steps.goal) * 100, 100);
const sleepPercent = Math.min((this.data.sleep.current / this.data.sleep.goal) * 100, 100);
const center = 100;
const radiusOuter = 80;
const radiusInner = 55;
const circumOuter = 2 * Math.PI * radiusOuter;
const circumInner = 2 * Math.PI * radiusInner;
// --- Logic for Weekly Schedule ---
const days = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
const todayIndex = new Date().getDay();
const todayName = days[todayIndex];
const plan = this.schedule[todayName];
this.container.innerHTML = `
<div class="fitness-container">
<!-- SECTION 1: ACTIVITY RINGS -->
<h2 class="section-title">DAILY ACTIVITY</h2>
<div class="rings-wrapper">
<svg class="concentric-svg" viewBox="0 0 200 200">
<circle class="ring-bg" cx="${center}" cy="${center}" r="${radiusOuter}" stroke-width="18"></circle>
<circle class="ring-bg" cx="${center}" cy="${center}" r="${radiusInner}" stroke-width="18"></circle>
<circle class="ring-progress cyan" cx="${center}" cy="${center}" r="${radiusOuter}"
stroke-width="18"
stroke-dasharray="${circumOuter}"
stroke-dashoffset="${circumOuter}"
data-offset="${circumOuter - (stepPercent / 100) * circumOuter}"></circle>
<circle class="ring-progress purple" cx="${center}" cy="${center}" r="${radiusInner}"
stroke-width="18"
stroke-dasharray="${circumInner}"
stroke-dashoffset="${circumInner}"
data-offset="${circumInner - (sleepPercent / 100) * circumInner}"></circle>
<image href="https://fonts.gstatic.com/s/i/materialicons/bolt/v5/24px.svg" x="90" y="90" height="20" width="20" style="filter: invert(1); opacity: 0.5;" />
</svg>
<div class="rings-stats">
<div class="stat-item cyan">
<span class="stat-label-small"><span class="dot cyan"></span> STEPS</span>
<span class="stat-number" id="steps-display">${this.data.steps.current.toLocaleString()}</span>
</div>
<div class="stat-item purple">
<span class="stat-label-small"><span class="dot purple"></span> SLEEP</span>
<span class="stat-number" id="sleep-display">${this.data.sleep.current}h</span>
</div>
</div>
</div>
<div class="device-card">
<div class="device-info">
<span class="device-name">TicWatch Pro 5</span>
<span class="device-status">Disconnected</span>
</div>
<button id="connect-watch-btn" class="connect-glow-btn">UPDATE</button>
</div>
<!-- SECTION 2: WEEKLY SCHEDULE -->
<h2 class="section-title" style="margin-top: 30px;">WEEKLY SCHEDULE</h2>
<div class="workout-card glow-card">
<div class="card-header">
<span class="day-badge">TODAY: ${todayName.toUpperCase()}</span>
<h3 class="workout-type" style="color: ${plan.color}">${plan.type}</h3>
</div>
<div class="exercise-list">
${plan.exercises.map(ex => `
<div class="exercise-item">
<span class="ex-name">${ex.name}</span>
<span class="ex-meta">${ex.sets} <span class="ex-note">• ${ex.note}</span></span>
</div>
`).join('')}
</div>
</div>
<div class="schedule-list">
<h3 class="subsection-title">UPCOMING</h3>
${days.map((d, i) => {
if (d === todayName) return '';
const p = this.schedule[d];
return `
<div class="schedule-row ${i === todayIndex ? 'active' : ''}">
<span class="sch-day">${d.substring(0, 3)}</span>
<span class="sch-type" style="color: ${p.color}">${p.type}</span>
</div>
`;
}).join('')}
</div>
<!-- SECTION 3: CALENDAR HISTORY -->
<h2 class="section-title" style="margin-top: 30px;">HISTORY LOG</h2>
<div class="calendar-wrapper" style="margin-bottom: 20px;">
<div class="calendar-header">
<button class="cal-nav-btn" id="fit-prev-month">&lt;</button>
<span id="cal-month-label-fit">Month</span>
<button class="cal-nav-btn" id="fit-next-month">&gt;</button>
</div>
<div class="calendar-grid" id="fit-calendar-grid"></div>
</div>
</div>
`;
this.renderCalendar();
this.attachEvents();
}
// --- Calendar Logic ---
changeMonth(offset) {
this.viewDate.setMonth(this.viewDate.getMonth() + offset);
this.renderCalendar();
}
renderCalendar() {
const grid = this.container.querySelector('#fit-calendar-grid');
const monthLabel = this.container.querySelector('#cal-month-label-fit');
if (!grid || !monthLabel) return;
grid.innerHTML = '';
const year = this.viewDate.getFullYear();
const month = this.viewDate.getMonth();
const months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
monthLabel.textContent = `${months[month]} ${year}`;
const firstDay = new Date(year, month, 1).getDay();
const daysInMonth = new Date(year, month + 1, 0).getDate();
// Loop Days
const daysShort = ['S', 'M', 'T', 'W', 'T', 'F', 'S'];
daysShort.forEach(d => grid.innerHTML += `<div class="cal-day-label">${d}</div>`);
for (let i = 0; i < firstDay; i++) grid.innerHTML += `<div></div>`;
const todayStr = new Date().toDateString();
for (let i = 1; i <= daysInMonth; i++) {
const dateObj = new Date(year, month, i);
const dateKey = dateObj.toDateString();
let classes = 'cal-day';
// Check History (Prioritize Steps Goal)
if (this.data.history[dateKey]) {
const record = this.data.history[dateKey];
// Success = Steps > Goal (10k) OR Sleep > 7h
if (record.steps >= 10000 || record.sleep >= 7) {
classes += ' start-date active'; // Cyan glow (Success)
} else {
classes += ' active'; // Just active (Purple/Normal)
}
}
if (dateKey === todayStr) classes += ' today';
grid.innerHTML += `<div class="${classes}">${i}</div>`;
}
}
animate() {
this.container.querySelectorAll('.ring-progress').forEach(ring => {
ring.style.strokeDashoffset = ring.dataset.offset;
});
}
attachEvents() {
const btn = this.container.querySelector('#connect-watch-btn');
if (btn) {
btn.addEventListener('click', () => {
// Feature Detection for Native Android Bridge
if (window.HydroFluxNative) {
btn.textContent = "REQUESTING...";
window.HydroFluxNative.requestHealthPermissions();
// Fallback reset if no response in 5s
setTimeout(() => {
if (btn.textContent === "REQUESTING...") btn.textContent = "UPDATE";
}, 5000);
} else {
alert("This feature requires the Android App!");
}
});
}
// Calendar Nav
const prevBtn = this.container.querySelector('#fit-prev-month');
const nextBtn = this.container.querySelector('#fit-next-month');
if (prevBtn) prevBtn.addEventListener('click', () => this.changeMonth(-1));
if (nextBtn) nextBtn.addEventListener('click', () => this.changeMonth(1));
}
}

123
Hydroflux/app/src/main/assets/js/modules/goals.js Normal file
View File

@@ -0,0 +1,123 @@
export class GoalsTracker {
constructor(containerId) {
this.container = document.getElementById(containerId);
this.STORAGE_KEY = 'hydroflux_goals';
this.goals = [];
this.loadState();
this.render();
}
loadState() {
const saved = localStorage.getItem(this.STORAGE_KEY);
if (saved) {
this.goals = JSON.parse(saved);
} else {
// Default Goal Example
this.goals = [
{ id: Date.now(), text: "Drink 3L of Water", completed: false }
];
this.saveState();
}
}
saveState() {
localStorage.setItem(this.STORAGE_KEY, JSON.stringify(this.goals));
}
addGoal(text) {
if (!text.trim()) return;
const newGoal = {
id: Date.now(),
text: text.trim(),
completed: false
};
this.goals.push(newGoal);
this.saveState();
this.render();
}
toggleGoal(id) {
const goal = this.goals.find(g => g.id === id);
if (goal) {
goal.completed = !goal.completed;
this.saveState();
this.render();
if (goal.completed && navigator.vibrate) {
navigator.vibrate(50); // Haptic feedback
}
}
}
deleteGoal(id) {
if (confirm("Delete this goal?")) {
this.goals = this.goals.filter(g => g.id !== id);
this.saveState();
this.render();
}
}
render() {
if (!this.container) return;
this.container.innerHTML = `
<div class="goals-container">
<h2 class="section-title">GOALS</h2>
<div class="goal-input-area">
<input type="text" id="new-goal-input" placeholder="Add new goal..." class="glow-input">
<button id="add-goal-btn" class="connect-glow-btn" style="padding: 0 20px; height: 50px;">ADD</button>
</div>
<div class="goals-list">
${this.goals.map(goal => `
<div class="goal-item ${goal.completed ? 'completed' : ''}" data-id="${goal.id}">
<div class="checkbox-custom"></div>
<span class="goal-text">${goal.text}</span>
<button class="delete-goal-btn" data-id="${goal.id}">✕</button>
</div>
`).join('')}
${this.goals.length === 0 ? '<div class="empty-state">No active goals</div>' : ''}
</div>
</div>
`;
this.attachEvents();
}
attachEvents() {
const input = this.container.querySelector('#new-goal-input');
const addBtn = this.container.querySelector('#add-goal-btn');
// Add Logic
const handleAdd = () => {
if (input.value) {
this.addGoal(input.value);
input.value = ''; // Reset
}
};
addBtn.addEventListener('click', handleAdd);
input.addEventListener('keypress', (e) => {
if (e.key === 'Enter') handleAdd();
});
// Toggle Logic (Delegate)
this.container.querySelectorAll('.goal-item').forEach(item => {
item.addEventListener('click', (e) => {
// Ignore if clicked delete button
if (e.target.classList.contains('delete-goal-btn')) return;
this.toggleGoal(parseInt(item.dataset.id));
});
});
// Delete Logic
this.container.querySelectorAll('.delete-goal-btn').forEach(btn => {
btn.addEventListener('click', (e) => {
e.stopPropagation();
this.deleteGoal(parseInt(btn.dataset.id));
});
});
}
}

257
Hydroflux/app/src/main/assets/js/modules/stats.js Normal file
View File

@@ -0,0 +1,257 @@
export class StatsDashboard {
constructor(containerId) {
this.container = document.getElementById(containerId);
this.render();
}
getStreakData() {
const saved = localStorage.getItem('hydroflux_streak');
if (saved) {
const start = new Date(parseInt(saved));
const now = new Date();
const diff = now - start;
const days = Math.floor(diff / (1000 * 60 * 60 * 24));
return days < 0 ? 0 : days;
}
return 0;
}
getFitnessData() {
const saved = localStorage.getItem('hydroflux_fitness_v2');
if (saved) {
const parsed = JSON.parse(saved);
return {
steps: parsed.steps || 0,
sleep: parsed.sleep || 0,
history: parsed.history || {}
};
}
return { steps: 0, sleep: 0, history: {} };
}
calculateScores() {
const waterData = this.getWaterDataRaw(); // Need raw history access
const streakDays = this.getStreakData();
const fitness = this.getFitnessData();
// --- ENTROPY SCORING SYSTEM (Infinite & Decay) ---
// 1. LIQUID LEVEL (Historical Volume - Time Decay)
// You gain +1 XP for every 100mL you drink.
// You lose -20 XP for every day since you started.
// Result: You must drink > 2000mL/day just to maintain your level.
// Calculate Total Volume from History
let totalVolume = 0;
let firstDate = new Date();
const history = waterData.history || {};
const dates = Object.keys(history);
if (dates.length > 0) {
// Find earliest date
firstDate = new Date(dates.sort((a, b) => new Date(a) - new Date(b))[0]);
// Sum Volume
Object.values(history).forEach(day => {
totalVolume += (day.current || 0);
});
}
// Add Today's Volume (in case it's not in history yet)
totalVolume += waterData.current;
// Calculate Days Since Start
const now = new Date();
const msPerDay = 1000 * 60 * 60 * 24;
const daysSinceStart = Math.max(1, Math.floor((now - firstDate) / msPerDay));
// Liquid Math
const volumeXP = Math.floor(totalVolume / 100); // 1 pt per 100mL
const entropyTax = daysSinceStart * 25; // Tax: 25 pts/day (Need 2.5L to break even)
let liquidLevel = volumeXP - entropyTax;
// 2. WILLPOWER LEVEL (Streak * Multiplier)
// High risk, high reward.
// 1 Day = 50 Levels.
// Breaking streak = Instant loss of all these levels.
let willpowerLevel = streakDays * 50;
// 3. FIT LEVEL (Cumulative Persistence)
// Logic: Sum of all historical performance - Daily Tax
// Good day (+XP) > Tax = Level Up
// Bad day (+0) < Tax = Level Down
let cumulativeFitXP = 0;
const fitHistory = fitness.history || {};
// Sum all historical points
Object.values(fitHistory).forEach(day => {
const daySteps = day.steps || 0;
const daySleep = day.sleep || 0;
// Formula: 1pt per 500 steps + 4pts per hour sleep
// e.g. 10k steps (20) + 8h sleep (32) = 52 pts/day
cumulativeFitXP += Math.floor(daySteps / 500) + Math.floor(daySleep * 4);
});
// Add current day if not in history yet
const todayKey = new Date().toDateString();
if (!fitHistory[todayKey]) {
cumulativeFitXP += Math.floor(fitness.steps / 500) + Math.floor(fitness.sleep * 4);
}
// Apply Entropy Tax
// You lose 30 XP per day you've been active.
const fitTax = daysSinceStart * 30;
let fitLevel = cumulativeFitXP - fitTax;
// 4. TOTAL HYDRO LEVEL
let hydroLevel = liquidLevel + willpowerLevel + fitLevel;
// Prevent Negative Display (though internal math is negative)
// Actually, user wants to go down. Negative levels are valid shame indicators?
// "Go down on levels" -> usually implies dropping from 50 to 40.
// If we allow negative, it might be discouraging. Let's floor at 0.
// But the user said "harder to progress", implying you can be in a deficit.
// Let's allow negative but style it red? No, let's keep floor at 0 for MVP.
if (hydroLevel < 0) hydroLevel = 0;
if (liquidLevel < 0) liquidLevel = 0;
// Fit level can be negative (dragging you down), but we display it unsigned usually.
// Let's allow the components to sum naturally, but display 0 if total is < 0.
return {
liquid: liquidLevel,
willpower: willpowerLevel,
fit: fitLevel,
total: hydroLevel,
details: {
daysActive: daysSinceStart,
totalLiters: (totalVolume / 1000).toFixed(1),
dailyTax: 25
}
};
}
getWaterDataRaw() {
const saved = localStorage.getItem('hydroflux_data');
if (saved) {
return JSON.parse(saved);
}
return { current: 0, goal: 3000, history: {} };
}
update() {
this.render();
}
render() {
const scores = this.calculateScores();
// Progress Bar Calculation Logic
const liquidPct = Math.min(100, (scores.details.waterCurrent / 2500) * 100); // 2.5L is break even
const fitPct = Math.min(100, Math.max(0, scores.fit * 5)); // Scaling fit level to bar (approx)
this.container.innerHTML = `
<div class="stats-container" style="padding-bottom: 80px;">
<!-- HERO LEVEL DISPLAY -->
<div class="level-hero" style="text-align: center; margin-bottom: 30px; padding: 20px;">
<div style="position: relative; width: 160px; height: 160px; margin: 0 auto;">
<svg viewBox="0 0 100 100" style="transform: rotate(-90deg); width: 100%; height: 100%;">
<circle cx="50" cy="50" r="45" stroke="rgba(255,255,255,0.1)" stroke-width="8" fill="none"></circle>
<circle cx="50" cy="50" r="45" stroke="var(--primary-cyan)" stroke-width="8" fill="none"
stroke-dasharray="283" stroke-dashoffset="${283 - (Math.min(100, scores.total % 100) / 100 * 283)}"></circle>
</svg>
<div style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center;">
<span style="font-size: 0.8rem; color: var(--text-muted); letter-spacing: 2px;">LEVEL</span>
<span style="font-size: 3rem; font-family: var(--font-heading); color: #fff; text-shadow: 0 0 15px var(--primary-cyan);">${scores.total}</span>
</div>
</div>
</div>
<div class="stats-grid" style="display: flex; flex-direction: column; gap: 20px;">
<!-- Liquid Level Card -->
<div class="glass-panel" style="margin: 0; padding: 20px;">
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px;">
<div style="display: flex; align-items: center; gap: 10px;">
<div class="icon-box cyan-box">
<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>
</div>
<div>
<span class="stat-label" style="margin: 0; color: var(--primary-cyan);">LIQUID LEVEL</span>
<div class="stat-sub">Daily Maintenance</div>
</div>
</div>
<span class="stat-value" style="font-size: 1.8rem;">${scores.liquid}</span>
</div>
<!-- Bar -->
<div style="height: 8px; background: rgba(255,255,255,0.1); border-radius: 4px; overflow: hidden; margin-top: 10px;">
<div style="width: ${liquidPct}%; height: 100%; background: var(--primary-cyan); box-shadow: 0 0 10px var(--primary-cyan); transition: width 1s;"></div>
</div>
<div style="display: flex; justify-content: space-between; margin-top: 8px; font-size: 0.8rem; color: var(--text-muted);">
<span>Tax: -${scores.details.dailyTax}/day</span>
<span>${Math.round(liquidPct)}% Safe</span>
</div>
</div>
<!-- Willpower Level Card -->
<div class="glass-panel" style="margin: 0; padding: 20px;">
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px;">
<div style="display: flex; align-items: center; gap: 10px;">
<div class="icon-box purple-box">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M10 2v7.31"/><path d="M14 2v7.31"/><path d="M4 10h16v12a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1z"/></svg>
</div>
<div>
<span class="stat-label" style="margin: 0; color: var(--secondary-purple);">WILLPOWER</span>
<div class="stat-sub">Streak Intensity</div>
</div>
</div>
<span class="stat-value" style="font-size: 1.8rem;">${scores.willpower}</span>
</div>
<!-- Bar (Always full if active, pulsing) -->
<div style="height: 8px; background: rgba(255,255,255,0.1); border-radius: 4px; overflow: hidden; margin-top: 10px;">
<div style="width: 100%; height: 100%; background: var(--secondary-purple); box-shadow: 0 0 15px var(--secondary-purple); animation: pulse-glow 2s infinite;"></div>
</div>
<div style="display: flex; justify-content: space-between; margin-top: 8px; font-size: 0.8rem; color: var(--text-muted);">
<span>Streak: ${scores.details.daysActive} Days</span>
<span>ACTIVE</span>
</div>
</div>
<!-- Fit Level Card -->
<div class="glass-panel" style="margin: 0; padding: 20px;">
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px;">
<div style="display: flex; align-items: center; gap: 10px;">
<div class="icon-box" style="background: rgba(255, 215, 0, 0.1); color: #ffd700;">
<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>
</div>
<div>
<span class="stat-label" style="margin: 0; color: #ffd700;">FIT LEVEL</span>
<div class="stat-sub">Daily Activity</div>
</div>
</div>
<span class="stat-value" style="font-size: 1.8rem; color: ${scores.fit < 0 ? '#ff4d4d' : '#ffd700'};">${scores.fit}</span>
</div>
<!-- Bar -->
<div style="height: 8px; background: rgba(255,255,255,0.1); border-radius: 4px; overflow: hidden; margin-top: 10px;">
<div style="width: ${fitPct}%; height: 100%; background: #ffd700; box-shadow: 0 0 10px #ffd700;"></div>
</div>
<div style="display: flex; justify-content: space-between; margin-top: 8px; font-size: 0.8rem; color: var(--text-muted);">
<span>Status</span>
<span style="color: ${scores.fit < 0 ? '#ff4d4d' : '#ffd700'};">${scores.fit < 0 ? 'PENALTY' : 'BOOSTING'}</span>
</div>
</div>
</div>
</div>
`;
}
}

196
Hydroflux/app/src/main/assets/js/modules/streak.js Normal file
View File

@@ -0,0 +1,196 @@
export class StreakTracker {
constructor(containerId) {
this.container = document.getElementById(containerId);
this.STORAGE_KEY = 'hydroflux_streak';
this.quotes = [
"The only easy day was yesterday.",
"Discipline is doing what needs to be done, even if you don't want to.",
"Your future self is watching you right now through memories.",
"Pain is temporary. Quitting lasts forever.",
"Suffering is the currency of success.",
"Don't stop when you're tired. Stop when you're done.",
"You are stronger than your urges.",
"Focus on the goal, not the obstacle."
];
this.viewDate = new Date(); // For Calendar Navigation
this.loadState();
this.render();
this.startTimer();
}
loadState() {
const saved = localStorage.getItem(this.STORAGE_KEY);
if (saved) {
this.startDate = new Date(parseInt(saved));
} else {
this.startDate = new Date();
this.saveState();
}
}
saveState() {
localStorage.setItem(this.STORAGE_KEY, this.startDate.getTime().toString());
}
resetStreak() {
if (confirm("Are you sure you want to reset your streak?")) {
this.startDate = new Date();
this.saveState();
this.updateUI();
this.renderCalendar(); // Refresh calendar
// Haptic Bad Feedback
if (navigator.vibrate) navigator.vibrate([100, 50, 100]);
}
}
getDuration() {
const now = new Date();
const diff = now - this.startDate;
const days = Math.floor(diff / (1000 * 60 * 60 * 24));
const hours = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
return { days, hours, minutes };
}
updateUI() {
const { days, hours, minutes } = this.getDuration();
const daysEl = this.container.querySelector('.streak-days');
const detailEl = this.container.querySelector('.streak-detail');
if (daysEl) daysEl.textContent = days;
if (detailEl) detailEl.textContent = `${hours}h ${minutes}m`;
}
startTimer() {
setInterval(() => this.updateUI(), 60000); // Update every minute
}
getRandomQuote() {
return this.quotes[Math.floor(Math.random() * this.quotes.length)];
}
changeMonth(offset) {
this.viewDate.setMonth(this.viewDate.getMonth() + offset);
this.renderCalendar();
}
renderCalendar() {
const grid = this.container.querySelector('.calendar-grid');
const monthLabel = this.container.querySelector('#cal-month-label');
if (!grid || !monthLabel) return;
grid.innerHTML = '';
const year = this.viewDate.getFullYear();
const month = this.viewDate.getMonth();
// Month Names
const months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
monthLabel.textContent = `${months[month]} ${year}`;
// Date Logic
const firstDay = new Date(year, month, 1).getDay(); // 0 = Sunday
const daysInMonth = new Date(year, month + 1, 0).getDate();
// Adjust for Monday start if preferred, but let's stick to Sun=0 for standard
const paddingDays = firstDay;
// Labels
const daysShort = ['S', 'M', 'T', 'W', 'T', 'F', 'S'];
daysShort.forEach(d => {
grid.innerHTML += `<div class="cal-day-label">${d}</div>`;
});
// Padding
for (let i = 0; i < paddingDays; i++) {
grid.innerHTML += `<div></div>`;
}
const now = new Date();
const todayStr = now.toDateString();
const startStr = this.startDate.toDateString();
// Days
for (let i = 1; i <= daysInMonth; i++) {
const currentObj = new Date(year, month, i);
const currentStr = currentObj.toDateString();
let classes = 'cal-day';
// Check if within streak (Active)
// Active if: current >= startDate AND current <= now
if (currentObj >= this.startDate && currentObj <= now) {
// Determine if it's the exact start date for special styling
if (currentStr === startStr) {
classes += ' start-date active';
} else {
classes += ' active';
}
} else if (currentStr === startStr) {
// Even if in future (impossible logic wise but for safety) or just start
classes += ' start-date';
}
// Today marker
if (currentStr === todayStr) {
classes += ' today';
}
grid.innerHTML += `<div class="${classes}">${i}</div>`;
}
}
render() {
this.container.innerHTML = `
<div class="streak-container">
<h2 class="section-title">QUIT STREAK</h2>
<div class="streak-counter">
<div class="streak-days glow-text">0</div>
<div class="streak-label">DAYS</div>
<div class="streak-detail">0h 0m</div>
</div>
<!-- Calendar Module -->
<div class="calendar-wrapper">
<div class="calendar-header">
<button class="cal-nav-btn" id="prev-month">&lt;</button>
<span id="cal-month-label">Month</span>
<button class="cal-nav-btn" id="next-month">&gt;</button>
</div>
<div class="calendar-grid">
<!-- JS Injected -->
</div>
</div>
<div class="quote-card">
"${this.getRandomQuote()}"
</div>
<button id="reset-streak-btn" class="danger-btn">
RESET STREAK
</button>
</div>
`;
this.updateUI();
this.renderCalendar();
this.container.querySelector('#reset-streak-btn').addEventListener('click', () => {
this.resetStreak();
});
this.container.querySelector('#prev-month').addEventListener('click', () => {
this.changeMonth(-1);
});
this.container.querySelector('#next-month').addEventListener('click', () => {
this.changeMonth(1);
});
}
}

319
Hydroflux/app/src/main/assets/js/modules/water.js Normal file
View File

@@ -0,0 +1,319 @@
export class WaterTracker {
constructor(containerId) {
this.container = document.getElementById(containerId);
this.state = {
current: 0,
goal: 3000,
bottleSize: 500,
lastActiveDate: new Date().toISOString(),
history: {} // Format: "YYYY-MM-DD": { current: 2000, goal: 3000 }
};
this.STORAGE_KEY = 'hydroflux_data';
this.viewDate = new Date(); // For Calendar
this.loadState();
this.render();
this.attachEvents();
this.updateUI();
this.setupSettings(); // New Settings Logic
}
loadState() {
const saved = localStorage.getItem(this.STORAGE_KEY);
if (saved) {
const parsed = JSON.parse(saved);
this.state = { ...this.state, ...parsed };
if (!this.state.history) this.state.history = {}; // Safety init
// Check for 1AM Reset
this.checkDailyReset();
}
}
checkDailyReset() {
const now = new Date();
const lastDate = this.state.lastActiveDate ? new Date(this.state.lastActiveDate) : new Date(0);
// Logic: if it is a NEW day (past 1am), reset.
if (now.toDateString() !== lastDate.toDateString()) {
if (now.getHours() >= 1) {
this.state.current = 0;
}
}
this.state.lastActiveDate = now.toISOString();
this.saveState();
}
saveState() {
// Record History for Today
const todayKey = new Date().toDateString(); // "Fri Dec 26 2025" logic
this.state.history[todayKey] = {
current: this.state.current,
goal: this.state.goal
};
localStorage.setItem(this.STORAGE_KEY, JSON.stringify(this.state));
this.updateUI(); // Updates UI and Calendar
this.renderCalendar();
}
addWater() {
this.state.current += this.state.bottleSize;
this.saveState();
if (navigator.vibrate) navigator.vibrate(50);
}
removeWater() {
this.state.current = Math.max(0, this.state.current - this.state.bottleSize);
this.saveState();
if (navigator.vibrate) navigator.vibrate(50);
}
setBottleSize(size) {
if (!size || size <= 0) return;
this.state.bottleSize = size;
this.saveState();
// Update input field if visible
const input = document.getElementById('bottle-size-input');
if (input) input.value = size;
}
setGoal(goal) {
if (!goal || goal <= 0) return;
this.state.goal = goal;
this.saveState();
}
getPercentage() {
return Math.min(100, Math.max(0, (this.state.current / this.state.goal) * 100));
}
updateUI() {
// Update Text
const currentEl = this.container.querySelector('.water-count');
const percentageEl = this.container.querySelector('.water-percentage');
if (currentEl) currentEl.textContent = `${this.state.current} / ${this.state.goal} mL`;
if (percentageEl) percentageEl.textContent = `${Math.round(this.getPercentage())}%`;
// Update Wave Animation
const wave = this.container.querySelector('.wave');
if (wave) {
wave.style.top = `${100 - this.getPercentage()}%`;
}
}
// --- Calendar Logic ---
changeMonth(offset) {
this.viewDate.setMonth(this.viewDate.getMonth() + offset);
this.renderCalendar();
}
renderCalendar() {
const grid = this.container.querySelector('.calendar-grid');
const monthLabel = this.container.querySelector('#cal-month-label-water');
if (!grid || !monthLabel) return;
grid.innerHTML = '';
const year = this.viewDate.getFullYear();
const month = this.viewDate.getMonth();
const months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
monthLabel.textContent = `${months[month]} ${year}`;
const firstDay = new Date(year, month, 1).getDay();
const daysInMonth = new Date(year, month + 1, 0).getDate();
// Loop Days
const daysShort = ['S', 'M', 'T', 'W', 'T', 'F', 'S'];
daysShort.forEach(d => grid.innerHTML += `<div class="cal-day-label">${d}</div>`);
for (let i = 0; i < firstDay; i++) grid.innerHTML += `<div></div>`;
const todayStr = new Date().toDateString();
for (let i = 1; i <= daysInMonth; i++) {
const dateObj = new Date(year, month, i);
const dateKey = dateObj.toDateString();
let classes = 'cal-day';
// Check History
if (this.state.history[dateKey]) {
const record = this.state.history[dateKey];
if (record.current >= record.goal) {
classes += ' start-date active'; // Cyan glow for success
} else if (record.current > 0) {
// Partial highlight could go here, but let's keep it simple
classes += ' active'; // Purple fallback or just active
}
}
if (dateKey === todayStr) classes += ' today';
grid.innerHTML += `<div class="${classes}">${i}</div>`;
}
}
render() {
this.container.innerHTML = `
<div class="water-tracker-container">
<!-- Circular Progress -->
<div class="circle-container">
<div class="water-circle">
<div class="wave"></div>
<div class="circle-content">
<span class="water-percentage">0%</span>
<span class="water-label">HYDRATION</span>
</div>
</div>
</div>
<!-- Stats Display -->
<div class="stats-row">
<span class="water-count">0 / 3000 mL</span>
</div>
<!-- Controls -->
<div class="controls-area">
<div class="bottle-selector">
<label>Bottle (mL):</label>
<input type="number" id="bottle-size-input" value="${this.state.bottleSize}" min="1" max="5000">
</div>
<div class="action-buttons">
<button id="remove-water-btn" class="icon-btn secondary" aria-label="Remove Drink">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M5 12h14"/></svg>
</button>
<button id="add-water-btn" class="glow-btn">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 5v14M5 12h14"/></svg>
DRINK
</button>
<button id="notify-btn" class="icon-btn" title="Enable Reminders">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"></path>
<path d="M13.73 21a2 2 0 0 1-3.46 0"></path>
</svg>
</button>
</div>
</div>
<!-- Hydration Calendar -->
<div class="calendar-wrapper" style="margin-bottom: 0;">
<div class="calendar-header">
<button class="cal-nav-btn" id="water-prev-month">&lt;</button>
<span id="cal-month-label-water">Month</span>
<button class="cal-nav-btn" id="water-next-month">&gt;</button>
</div>
<div class="calendar-grid"></div>
</div>
</div>
`;
this.checkNotificationStatus();
this.renderCalendar();
}
attachEvents() {
this.container.querySelector('#add-water-btn').addEventListener('click', () => this.addWater());
this.container.querySelector('#remove-water-btn').addEventListener('click', () => this.removeWater());
this.container.querySelector('#notify-btn').addEventListener('click', (e) => this.toggleNotifications(e.currentTarget));
this.container.querySelector('#bottle-size-input').addEventListener('change', (e) => {
this.setBottleSize(parseInt(e.target.value));
});
// Calendar Nav
this.container.querySelector('#water-prev-month').addEventListener('click', () => this.changeMonth(-1));
this.container.querySelector('#water-next-month').addEventListener('click', () => this.changeMonth(1));
}
// --- Settings Modal Logic ---
setupSettings() {
const modal = document.getElementById('settings-modal');
const openBtn = document.getElementById('open-settings-btn');
const closeBtn = document.getElementById('close-settings-btn');
const saveBtn = document.getElementById('save-settings-btn');
const goalInput = document.getElementById('setting-goal-input');
const bottleInput = document.getElementById('setting-bottle-input');
if (openBtn) {
openBtn.addEventListener('click', () => {
// Populate inputs
goalInput.value = this.state.goal;
bottleInput.value = this.state.bottleSize;
modal.style.display = 'flex';
});
}
if (closeBtn) {
closeBtn.addEventListener('click', () => {
modal.style.display = 'none';
});
}
if (saveBtn) {
saveBtn.addEventListener('click', () => {
const newGoal = parseInt(goalInput.value);
const newBottle = parseInt(bottleInput.value);
if (newGoal) this.setGoal(newGoal);
if (newBottle) this.setBottleSize(newBottle);
modal.style.display = 'none';
alert("Settings Saved!");
});
}
}
// --- Notification Logic ---
toggleNotifications(btn) {
if (!("Notification" in window)) {
alert("Notifications coming soon to the Android App version!");
return;
}
if (Notification.permission === "granted") {
alert("Reminders are active! We'll check every hour.");
} else if (Notification.permission !== "denied") {
Notification.requestPermission().then(permission => {
if (permission === "granted") {
this.startReminderLoop();
btn.style.color = "var(--primary-cyan)";
new Notification("HydroFlux", { body: "Smart Hydration Reminders Enabled!" });
}
});
}
}
checkNotificationStatus() {
if (!('Notification' in window)) return;
if (Notification.permission === "granted") {
const btn = this.container.querySelector('#notify-btn');
if (btn) btn.style.color = "var(--primary-cyan)";
this.startReminderLoop();
}
}
startReminderLoop() {
if (!('Notification' in window)) return;
// Clear existing to avoid duplicates
if (this.reminderInterval) clearInterval(this.reminderInterval);
// Check every minute if it's been > 1 hour since last drink
this.reminderInterval = setInterval(() => {
// Pseudo-logic check since we don't store timestamp in this simple version yet
// In a real app, you'd check this.state.lastDrinkTime
new Notification("HydroFlux Needs You", {
body: "Remember to drink water!",
icon: "/icon.png"
});
}, 3600000); // 1 Hour
}
}

17
Hydroflux/app/src/main/assets/manifest.json Normal file
View File

@@ -0,0 +1,17 @@
{
"name": "HydroFit",
"short_name": "HydroFit",
"background_color": "#050508",
"theme_color": "#050508",
"display": "standalone",
"orientation": "portrait",
"scope": "/",
"start_url": "/",
"icons": [
{
"src": "favicon.svg",
"sizes": "192x192",
"type": "image/svg+xml"
}
]
}