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

3
.idea/.gitignore generated vendored Normal file
View File

@@ -0,0 +1,3 @@
# Default ignored files
/shelf/
/workspace.xml

9
.idea/Motivation_App.iml generated Normal file
View File

@@ -0,0 +1,9 @@
<?xml version="1.0" encoding="UTF-8"?>
<module type="JAVA_MODULE" version="4">
<component name="NewModuleRootManager" inherit-compiler-output="true">
<exclude-output />
<content url="file://$MODULE_DIR$" />
<orderEntry type="inheritedJdk" />
<orderEntry type="sourceFolder" forTests="false" />
</component>
</module>

1186
.idea/caches/deviceStreaming.xml generated Normal file
View File

File diff suppressed because it is too large Load Diff

13
.idea/deviceManager.xml generated Normal file
View File

@@ -0,0 +1,13 @@
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="DeviceTable">
<option name="columnSorters">
<list>
<ColumnSorterState>
<option name="column" value="Name" />
<option name="order" value="ASCENDING" />
</ColumnSorterState>
</list>
</option>
</component>
</project>

6
.idea/misc.xml generated Normal file
View File

@@ -0,0 +1,6 @@
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="ProjectRootManager" version="2" languageLevel="JDK_21" default="true" project-jdk-name="jbr-21" project-jdk-type="JavaSDK">
<output url="file://$PROJECT_DIR$/out" />
</component>
</project>

8
.idea/modules.xml generated Normal file
View File

@@ -0,0 +1,8 @@
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="ProjectModuleManager">
<modules>
<module fileurl="file://$PROJECT_DIR$/.idea/Motivation_App.iml" filepath="$PROJECT_DIR$/.idea/Motivation_App.iml" />
</modules>
</component>
</project>

15
Hydroflux/.gitignore vendored Normal file
View File

@@ -0,0 +1,15 @@
*.iml
.gradle
/local.properties
/.idea/caches
/.idea/libraries
/.idea/modules.xml
/.idea/workspace.xml
/.idea/navEditor.xml
/.idea/assetWizardSettings.xml
.DS_Store
/build
/captures
.externalNativeBuild
.cxx
local.properties

3
Hydroflux/.idea/.gitignore generated vendored Normal file
View File

@@ -0,0 +1,3 @@
# Default ignored files
/shelf/
/workspace.xml

6
Hydroflux/.idea/AndroidProjectSystem.xml generated Normal file
View File

@@ -0,0 +1,6 @@
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="AndroidProjectSystem">
<option name="providerId" value="com.android.tools.idea.GradleProjectSystem" />
</component>
</project>

123
Hydroflux/.idea/codeStyles/Project.xml generated Normal file
View File

@@ -0,0 +1,123 @@
<component name="ProjectCodeStyleConfiguration">
<code_scheme name="Project" version="173">
<JetCodeStyleSettings>
<option name="CODE_STYLE_DEFAULTS" value="KOTLIN_OFFICIAL" />
</JetCodeStyleSettings>
<codeStyleSettings language="XML">
<option name="FORCE_REARRANGE_MODE" value="1" />
<indentOptions>
<option name="CONTINUATION_INDENT_SIZE" value="4" />
</indentOptions>
<arrangement>
<rules>
<section>
<rule>
<match>
<AND>
<NAME>xmlns:android</NAME>
<XML_ATTRIBUTE />
<XML_NAMESPACE>^$</XML_NAMESPACE>
</AND>
</match>
</rule>
</section>
<section>
<rule>
<match>
<AND>
<NAME>xmlns:.*</NAME>
<XML_ATTRIBUTE />
<XML_NAMESPACE>^$</XML_NAMESPACE>
</AND>
</match>
<order>BY_NAME</order>
</rule>
</section>
<section>
<rule>
<match>
<AND>
<NAME>.*:id</NAME>
<XML_ATTRIBUTE />
<XML_NAMESPACE>http://schemas.android.com/apk/res/android</XML_NAMESPACE>
</AND>
</match>
</rule>
</section>
<section>
<rule>
<match>
<AND>
<NAME>.*:name</NAME>
<XML_ATTRIBUTE />
<XML_NAMESPACE>http://schemas.android.com/apk/res/android</XML_NAMESPACE>
</AND>
</match>
</rule>
</section>
<section>
<rule>
<match>
<AND>
<NAME>name</NAME>
<XML_ATTRIBUTE />
<XML_NAMESPACE>^$</XML_NAMESPACE>
</AND>
</match>
</rule>
</section>
<section>
<rule>
<match>
<AND>
<NAME>style</NAME>
<XML_ATTRIBUTE />
<XML_NAMESPACE>^$</XML_NAMESPACE>
</AND>
</match>
</rule>
</section>
<section>
<rule>
<match>
<AND>
<NAME>.*</NAME>
<XML_ATTRIBUTE />
<XML_NAMESPACE>^$</XML_NAMESPACE>
</AND>
</match>
<order>BY_NAME</order>
</rule>
</section>
<section>
<rule>
<match>
<AND>
<NAME>.*</NAME>
<XML_ATTRIBUTE />
<XML_NAMESPACE>http://schemas.android.com/apk/res/android</XML_NAMESPACE>
</AND>
</match>
<order>ANDROID_ATTRIBUTE_ORDER</order>
</rule>
</section>
<section>
<rule>
<match>
<AND>
<NAME>.*</NAME>
<XML_ATTRIBUTE />
<XML_NAMESPACE>.*</XML_NAMESPACE>
</AND>
</match>
<order>BY_NAME</order>
</rule>
</section>
</rules>
</arrangement>
</codeStyleSettings>
<codeStyleSettings language="kotlin">
<option name="CODE_STYLE_DEFAULTS" value="KOTLIN_OFFICIAL" />
</codeStyleSettings>
</code_scheme>
</component>

5
Hydroflux/.idea/codeStyles/codeStyleConfig.xml generated Normal file
View File

@@ -0,0 +1,5 @@
<component name="ProjectCodeStyleConfiguration">
<state>
<option name="USE_PER_PROJECT_SETTINGS" value="true" />
</state>
</component>

6
Hydroflux/.idea/compiler.xml generated Normal file
View File

@@ -0,0 +1,6 @@
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="CompilerConfiguration">
<bytecodeTargetLevel target="21" />
</component>
</project>

18
Hydroflux/.idea/deploymentTargetSelector.xml generated Normal file
View File

@@ -0,0 +1,18 @@
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="deploymentTargetSelector">
<selectionStates>
<SelectionState runConfigName="app">
<option name="selectionMode" value="DROPDOWN" />
<DropdownSelection timestamp="2026-01-17T04:31:29.584970200Z">
<Target type="DEFAULT_BOOT">
<handle>
<DeviceId pluginId="PhysicalDevice" identifier="serial=27151FDH20068C" />
</handle>
</Target>
</DropdownSelection>
<DialogSelection />
</SelectionState>
</selectionStates>
</component>
</project>

13
Hydroflux/.idea/deviceManager.xml generated Normal file
View File

@@ -0,0 +1,13 @@
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="DeviceTable">
<option name="columnSorters">
<list>
<ColumnSorterState>
<option name="column" value="Name" />
<option name="order" value="ASCENDING" />
</ColumnSorterState>
</list>
</option>
</component>
</project>

19
Hydroflux/.idea/gradle.xml generated Normal file
View File

@@ -0,0 +1,19 @@
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="GradleMigrationSettings" migrationVersion="1" />
<component name="GradleSettings">
<option name="linkedExternalProjectsSettings">
<GradleProjectSettings>
<option name="testRunner" value="CHOOSE_PER_TEST" />
<option name="externalProjectPath" value="$PROJECT_DIR$" />
<option name="gradleJvm" value="#GRADLE_LOCAL_JAVA_HOME" />
<option name="modules">
<set>
<option value="$PROJECT_DIR$" />
<option value="$PROJECT_DIR$/app" />
</set>
</option>
</GradleProjectSettings>
</option>
</component>
</project>

10
Hydroflux/.idea/migrations.xml generated Normal file
View File

@@ -0,0 +1,10 @@
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="ProjectMigrations">
<option name="MigrateToGradleLocalJavaHome">
<set>
<option value="$PROJECT_DIR$" />
</set>
</option>
</component>
</project>

9
Hydroflux/.idea/misc.xml generated Normal file
View File

@@ -0,0 +1,9 @@
<project version="4">
<component name="ExternalStorageConfigurationManager" enabled="true" />
<component name="ProjectRootManager" version="2" languageLevel="JDK_21" default="true" project-jdk-name="jbr-21" project-jdk-type="JavaSDK">
<output url="file://$PROJECT_DIR$/build/classes" />
</component>
<component name="ProjectType">
<option name="id" value="Android" />
</component>
</project>

17
Hydroflux/.idea/runConfigurations.xml generated Normal file
View File

@@ -0,0 +1,17 @@
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="RunConfigurationProducerService">
<option name="ignoredProducers">
<set>
<option value="com.intellij.execution.junit.AbstractAllInDirectoryConfigurationProducer" />
<option value="com.intellij.execution.junit.AllInPackageConfigurationProducer" />
<option value="com.intellij.execution.junit.PatternConfigurationProducer" />
<option value="com.intellij.execution.junit.TestInClassConfigurationProducer" />
<option value="com.intellij.execution.junit.UniqueIdConfigurationProducer" />
<option value="com.intellij.execution.junit.testDiscovery.JUnitTestDiscoveryConfigurationProducer" />
<option value="org.jetbrains.kotlin.idea.junit.KotlinJUnitRunConfigurationProducer" />
<option value="org.jetbrains.kotlin.idea.junit.KotlinPatternConfigurationProducer" />
</set>
</option>
</component>
</project>

1
Hydroflux/app/.gitignore vendored Normal file
View File

@@ -0,0 +1 @@
/build

60
Hydroflux/app/build.gradle.kts Normal file
View File

@@ -0,0 +1,60 @@
plugins {
alias(libs.plugins.android.application)
alias(libs.plugins.kotlin.android)
alias(libs.plugins.kotlin.compose)
}
android {
namespace = "com.david.hydroflux"
compileSdk = 36
defaultConfig {
applicationId = "com.david.hydroflux.v2"
minSdk = 28
targetSdk = 36
versionCode = 1
versionName = "1.0"
testInstrumentationRunner = "androidx.test.runner.AndroidJUnitRunner"
}
buildTypes {
release {
isMinifyEnabled = false
proguardFiles(
getDefaultProguardFile("proguard-android-optimize.txt"),
"proguard-rules.pro"
)
}
}
compileOptions {
sourceCompatibility = JavaVersion.VERSION_11
targetCompatibility = JavaVersion.VERSION_11
}
kotlinOptions {
jvmTarget = "11"
}
buildFeatures {
compose = true
}
}
dependencies {
implementation("androidx.appcompat:appcompat:1.6.1")
implementation("androidx.health.connect:connect-client:1.1.0") // Official Stable Release
implementation(libs.androidx.core.ktx)
implementation(libs.androidx.lifecycle.runtime.ktx)
implementation(libs.androidx.activity.compose)
implementation(platform(libs.androidx.compose.bom))
implementation(libs.androidx.compose.ui)
implementation(libs.androidx.compose.ui.graphics)
implementation(libs.androidx.compose.ui.tooling.preview)
implementation(libs.androidx.compose.material3)
testImplementation(libs.junit)
androidTestImplementation(libs.androidx.junit)
androidTestImplementation(libs.androidx.espresso.core)
androidTestImplementation(platform(libs.androidx.compose.bom))
androidTestImplementation(libs.androidx.compose.ui.test.junit4)
debugImplementation(libs.androidx.compose.ui.tooling)
debugImplementation(libs.androidx.compose.ui.test.manifest)
}

21
Hydroflux/app/proguard-rules.pro vendored Normal file
View File

@@ -0,0 +1,21 @@
# Add project specific ProGuard rules here.
# You can control the set of applied configuration files using the
# proguardFiles setting in build.gradle.
#
# For more details, see
# http://developer.android.com/guide/developing/tools/proguard.html
# If your project uses WebView with JS, uncomment the following
# and specify the fully qualified class name to the JavaScript interface
# class:
#-keepclassmembers class fqcn.of.javascript.interface.for.webview {
# public *;
#}
# Uncomment this to preserve the line number information for
# debugging stack traces.
#-keepattributes SourceFile,LineNumberTable
# If you keep the line number information, uncomment this to
# hide the original source file name.
#-renamesourcefileattribute SourceFile

24
Hydroflux/app/src/androidTest/java/com/david/hydroflux/ExampleInstrumentedTest.kt Normal file
View File

@@ -0,0 +1,24 @@
package com.david.hydroflux
import androidx.test.platform.app.InstrumentationRegistry
import androidx.test.ext.junit.runners.AndroidJUnit4
import org.junit.Test
import org.junit.runner.RunWith
import org.junit.Assert.*
/**
* Instrumented test, which will execute on an Android device.
*
* See [testing documentation](http://d.android.com/tools/testing).
*/
@RunWith(AndroidJUnit4::class)
class ExampleInstrumentedTest {
@Test
fun useAppContext() {
// Context of the app under test.
val appContext = InstrumentationRegistry.getInstrumentation().targetContext
assertEquals("com.david.hydroflux", appContext.packageName)
}
}

55
Hydroflux/app/src/main/AndroidManifest.xml Normal file
View File

@@ -0,0 +1,55 @@
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools">
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.VIBRATE" />
<uses-permission android:name="android.permission.POST_NOTIFICATIONS" />
<!-- Health Connect Permissions -->
<uses-permission android:name="android.permission.health.READ_STEPS"/>
<uses-permission android:name="android.permission.health.READ_SLEEP"/>
<uses-permission android:name="android.permission.ACTIVITY_RECOGNITION" />
<!-- Required to interact with Health Connect on Android 11+ -->
<queries>
<package android:name="com.google.android.apps.healthdata" />
</queries>
<application
android:allowBackup="true"
android:dataExtractionRules="@xml/data_extraction_rules"
android:fullBackupContent="@xml/backup_rules"
android:icon="@mipmap/ic_launcher"
android:label="@string/app_name"
android:roundIcon="@mipmap/ic_launcher_round"
android:supportsRtl="true"
android:theme="@style/Theme.Hydroflux">
<activity
android:name=".MainActivity"
android:exported="true"
android:label="@string/app_name"
android:theme="@style/Theme.Hydroflux">
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
<!-- Required for Health Connect Visibility -->
<intent-filter>
<action android:name="android.intent.action.VIEW_PERMISSION_USAGE" />
<category android:name="android.intent.category.HEALTH_PERMISSIONS" />
</intent-filter>
</activity>
<activity
android:name=".PermissionsRationaleActivity"
android:exported="true"
android:label="Health Access Rationale"
android:theme="@style/Theme.Hydroflux">
<intent-filter>
<action android:name="androidx.health.ACTION_SHOW_PERMISSIONS_RATIONALE" />
<category android:name="android.intent.category.DEFAULT" />
</intent-filter>
</activity>
</application>
</manifest>

641
Hydroflux/app/src/main/assests/css/style.css Normal file
View File

@@ -0,0 +1,641 @@
: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: 15px 40px;
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 {
margin-top: 8px;
font-size: 0.6rem;
color: var(--text-muted);
}

74
Hydroflux/app/src/main/assests/index.html Normal file
View File

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

28
Hydroflux/app/src/main/assests/js/app.js Normal file
View File

@@ -0,0 +1,28 @@
console.log('HydroFlux Initialized');
// Simple Navigation Logic
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';
});
});
// Initialize Modules
import { WaterTracker } from './modules/water.js?v=2';
import { StreakTracker } from './modules/streak.js?v=2';
import { FitnessDashboard } from './modules/fitness.js?v=2';
const waterTracker = new WaterTracker('water-section');
const streakTracker = new StreakTracker('streak-section');
const fitnessDashboard = new FitnessDashboard('fitness-section');

153
Hydroflux/app/src/main/assests/js/modules/fitness.js Normal file
View File

@@ -0,0 +1,153 @@
export class FitnessDashboard {
constructor(containerId) {
this.container = document.getElementById(containerId);
// Mock Data
this.data = {
steps: { current: 8432, goal: 10000 },
sleep: { current: 6.5, goal: 8 },
history: {
steps: [4500, 7200, 10500, 8900, 6000, 11200, 8432],
sleep: [5.5, 6.0, 7.5, 8.2, 5.0, 9.0, 6.5]
}
};
this.render();
// Delay animation to allow DOM paint
setTimeout(() => this.animate(), 100);
}
render() {
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);
// Ring Config
const center = 100;
const radiusOuter = 80;
const radiusInner = 55;
const circumOuter = 2 * Math.PI * radiusOuter;
const circumInner = 2 * Math.PI * radiusInner;
this.container.innerHTML = `
<div class="fitness-container">
<h2 class="section-title">DAILY ACTIVITY</h2>
<!-- Top: Concentric Rings -->
<div class="rings-wrapper">
<svg class="concentric-svg" viewBox="0 0 200 200">
<!-- Outer Track (Steps) -->
<circle class="ring-bg" cx="${center}" cy="${center}" r="${radiusOuter}" stroke-width="18"></circle>
<!-- Inner Track (Sleep) -->
<circle class="ring-bg" cx="${center}" cy="${center}" r="${radiusInner}" stroke-width="18"></circle>
<!-- Outer Progress (Steps - Cyan) -->
<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>
<!-- Inner Progress (Sleep - Purple) -->
<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>
<!-- Icons/Center -->
<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>
<!-- Legend to explain the rings -->
<div class="rings-legend">
<div class="legend-item">
<span class="dot cyan"></span> STEPS
</div>
<div class="legend-item">
<span class="dot purple"></span> SLEEP
</div>
</div>
</div>
<!-- Middle: Device -->
<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">LINK</button>
</div>
<!-- Box 1: Steps (Current + History) -->
<div class="stat-card">
<div class="stat-header">
<div>
<span class="stat-label">STEPS</span>
<div class="stat-value">${this.data.steps.current}</div>
<div class="stat-sub">Goal: ${this.data.steps.goal}</div>
</div>
<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="M13 2L3 14h9l-1 8 10-12h-9l1-8z"/></svg>
</div>
</div>
<div class="chart-divider"></div>
<div class="chart-container small">
${this.generateBars(this.data.history.steps, 12000, 'cyan')}
</div>
</div>
<!-- Box 2: Sleep (Current + History) -->
<div class="stat-card">
<div class="stat-header">
<div>
<span class="stat-label">SLEEP</span>
<div class="stat-value">${this.data.sleep.current}h</div>
<div class="stat-sub">Goal: ${this.data.sleep.goal}h</div>
</div>
<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="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/></svg>
</div>
</div>
<div class="chart-divider"></div>
<div class="chart-container small">
${this.generateBars(this.data.history.sleep, 10, 'purple')}
</div>
</div>
</div>
`;
this.attachEvents();
}
generateBars(data, max, colorClass) {
const days = ['M', 'T', 'W', 'T', 'F', 'S', 'S'];
return data.map((val, index) => {
const height = Math.min((val / max) * 100, 100);
return `
<div class="chart-column">
<div class="chart-bar ${colorClass}" style="height: ${height}%"></div>
<span class="chart-day">${days[index]}</span>
</div>
`;
}).join('');
}
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', () => {
alert("Placeholder: This feature would connect to the WearOS API in the native app.");
});
}
}
}

102
Hydroflux/app/src/main/assests/js/modules/streak.js Normal file
View File

@@ -0,0 +1,102 @@
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.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();
// 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)];
}
render() {
this.container.innerHTML = `
<div class="streak-container">
<h2 class="section-title">ABSTINENCE STREAK</h2>
<div class="streak-counter">
<div class="streak-days glow-text">0</div>
<div class="streak-label">DAYS</div>
<div class="streak-detail">${0}h ${0}m</div>
</div>
<div class="quote-card">
"${this.getRandomQuote()}"
</div>
<button id="reset-streak-btn" class="danger-btn">
RESET STREAK
</button>
</div>
`;
this.updateUI();
this.container.querySelector('#reset-streak-btn').addEventListener('click', () => {
this.resetStreak();
});
}
}

184
Hydroflux/app/src/main/assests/js/modules/water.js Normal file
View File

@@ -0,0 +1,184 @@
export class WaterTracker {
constructor(containerId) {
this.container = document.getElementById(containerId);
this.state = {
current: 0,
goal: 3000, // mL
bottleSize: 500, // mL
};
this.STORAGE_KEY = 'hydroflux_data';
this.loadState();
this.render();
this.attachEvents();
this.updateUI();
}
loadState() {
const saved = localStorage.getItem(this.STORAGE_KEY);
if (saved) {
const parsed = JSON.parse(saved);
this.state = { ...this.state, ...parsed };
}
}
saveState() {
localStorage.setItem(this.STORAGE_KEY, JSON.stringify(this.state));
this.updateUI();
}
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();
}
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 Height
const wave = this.container.querySelector('.wave');
if (wave) {
wave.style.top = `${100 - this.getPercentage()}%`;
}
}
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>
<!-- Notification Toggle -->
<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>
</div>
`;
this.checkNotificationStatus();
}
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);
});
const input = this.container.querySelector('#bottle-size-input');
input.addEventListener('change', (e) => {
this.setBottleSize(parseInt(e.target.value));
});
}
// --- Notification Logic ---
toggleNotifications(btn) {
if (!("Notification" in window)) {
alert("This browser does not support desktop notifications");
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.permission === "granted") {
const btn = this.container.querySelector('#notify-btn');
if (btn) btn.style.color = "var(--primary-cyan)";
this.startReminderLoop();
}
}
startReminderLoop() {
// 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/assests/manifest.json Normal file
View File

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

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"
}
]
}

BIN
Hydroflux/app/src/main/ic_launcher-playstore.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 529 KiB

233
Hydroflux/app/src/main/java/com/david/hydroflux/MainActivity.kt Normal file
View File

@@ -0,0 +1,233 @@
package com.david.hydroflux
import android.annotation.SuppressLint
import android.os.Bundle
import android.webkit.JavascriptInterface
import android.webkit.WebView
import android.webkit.WebViewClient
import android.webkit.WebChromeClient
import android.widget.Toast // Added for Debugging
import androidx.fragment.app.FragmentActivity
import androidx.lifecycle.lifecycleScope
import androidx.health.connect.client.HealthConnectClient
import androidx.health.connect.client.permission.HealthPermission
import androidx.health.connect.client.records.StepsRecord
import androidx.health.connect.client.records.SleepSessionRecord
import androidx.health.connect.client.request.ReadRecordsRequest
import androidx.health.connect.client.request.AggregateRequest
import androidx.health.connect.client.time.TimeRangeFilter
import kotlinx.coroutines.launch
import java.time.Instant
import java.time.ZonedDateTime
import java.time.temporal.ChronoUnit
class MainActivity : FragmentActivity() {
private lateinit var myWebView: WebView
private lateinit var healthConnectClient: HealthConnectClient
// Define Permissions we need
private val PERMISSIONS = setOf(
HealthPermission.getReadPermission(StepsRecord::class),
HealthPermission.getReadPermission(SleepSessionRecord::class)
)
private val requestPermissions = registerForActivityResult(
androidx.health.connect.client.PermissionController.createRequestPermissionResultContract()
) { granted ->
if (granted.containsAll(PERMISSIONS)) {
// Permissions Granted - Silent Sync
if (::healthConnectClient.isInitialized) {
// Use a slight delay to allow permission propogation
android.os.Handler(android.os.Looper.getMainLooper()).postDelayed({
WebAppInterface(this@MainActivity).triggerSync()
}, 500)
}
} else {
val missing = PERMISSIONS.minus(granted)
Toast.makeText(this, "Denied. Opening Settings...", Toast.LENGTH_LONG).show()
// Fallback: Open Health Connect Settings so user can enable manually
try {
val intent = android.content.Intent("androidx.health.ACTION_HEALTH_CONNECT_SETTINGS")
startActivity(intent)
} catch (e: Exception) {
// Try generic app details
Toast.makeText(this, "Could not open Health Settings", Toast.LENGTH_SHORT).show()
val intent = android.content.Intent(android.provider.Settings.ACTION_APPLICATION_DETAILS_SETTINGS)
intent.data = android.net.Uri.parse("package:$packageName")
startActivity(intent)
}
}
}
@SuppressLint("SetJavaScriptEnabled")
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
// Setup WebView FIRST to ensure we have it
myWebView = findViewById(R.id.webview)
myWebView.settings.javaScriptEnabled = true
myWebView.settings.domStorageEnabled = true
myWebView.settings.allowFileAccess = true
myWebView.settings.allowFileAccessFromFileURLs = true
myWebView.settings.allowUniversalAccessFromFileURLs = true
myWebView.webViewClient = WebViewClient()
myWebView.webChromeClient = WebChromeClient()
myWebView.addJavascriptInterface(WebAppInterface(this), "HydroFluxNative")
myWebView.loadUrl("file:///android_asset/index.html")
// Setup Health Connect
val availabilityStatus = HealthConnectClient.getSdkStatus(this)
if (availabilityStatus == HealthConnectClient.SDK_UNAVAILABLE) {
Toast.makeText(this, "Health Connect Unavailable on this device", Toast.LENGTH_LONG).show()
return
}
if (availabilityStatus == HealthConnectClient.SDK_UNAVAILABLE_PROVIDER_UPDATE_REQUIRED) {
Toast.makeText(this, "Health Connect Update Required", Toast.LENGTH_LONG).show()
return
}
// Grab client
try {
healthConnectClient = HealthConnectClient.getOrCreate(this)
} catch (e: Exception) {
e.printStackTrace()
}
// Start Periodic Sleep Check (6am - 10am)
startPeriodicCheck()
}
private fun startPeriodicCheck() {
val handler = android.os.Handler(android.os.Looper.getMainLooper())
val runnable = object : Runnable {
override fun run() {
val cal = java.util.Calendar.getInstance()
val hour = cal.get(java.util.Calendar.HOUR_OF_DAY)
// Check between 6:00 and 10:00
if (hour in 6..10) {
WebAppInterface(this@MainActivity).triggerSync()
}
// Repeat every 30 minutes (30 * 60 * 1000)
handler.postDelayed(this, 1800000)
}
}
handler.post(runnable) // Start immediately
}
inner class WebAppInterface(private val activity: MainActivity) {
@JavascriptInterface
fun requestHealthPermissions() {
runOnUiThread {
if (!::healthConnectClient.isInitialized) {
Toast.makeText(activity, "Health Client Not Init", Toast.LENGTH_SHORT).show()
return@runOnUiThread
}
activity.lifecycleScope.launch {
try {
val granted = healthConnectClient.permissionController.getGrantedPermissions()
if (granted.containsAll(PERMISSIONS)) {
triggerSync()
} else {
try {
requestPermissions.launch(PERMISSIONS)
} catch (e: Exception) {
val err = e.message ?: "Unknown"
Toast.makeText(activity, "Launch Error: $err", Toast.LENGTH_LONG).show()
e.printStackTrace()
}
}
} catch (e: Exception) {
e.printStackTrace()
}
}
}
}
@JavascriptInterface
fun triggerSync() {
if (!::healthConnectClient.isInitialized) return
activity.lifecycleScope.launch {
// MOVE TO IO THREAD for stability (Prevents IllegalStateException)
kotlinx.coroutines.withContext(kotlinx.coroutines.Dispatchers.IO) {
// Use Application Context for Client
try {
if (!::healthConnectClient.isInitialized) {
healthConnectClient = HealthConnectClient.getOrCreate(activity.applicationContext)
}
} catch (e: Exception) {
e.printStackTrace()
}
val startOfDay = ZonedDateTime.now().truncatedTo(ChronoUnit.DAYS).toInstant()
val now = Instant.now()
var totalSteps = 0L
var sleepHours = 0.0
// 1. Try Read Steps (AGGREGATE)
try {
val response = healthConnectClient.aggregate(
AggregateRequest(
metrics = setOf(StepsRecord.COUNT_TOTAL),
timeRangeFilter = TimeRangeFilter.between(startOfDay, now)
)
)
// The result may be null if no data
totalSteps = response[StepsRecord.COUNT_TOTAL] ?: 0
} catch (e: Exception) {
e.printStackTrace()
val msg = e.message ?: "Unknown Error"
runOnUiThread { Toast.makeText(activity, "Steps Error: $msg", Toast.LENGTH_LONG).show() }
totalSteps = 0
}
// 2. Try Read Sleep (AGGREGATE)
try {
val sleepResponse = healthConnectClient.aggregate(
AggregateRequest(
metrics = setOf(SleepSessionRecord.SLEEP_DURATION_TOTAL),
timeRangeFilter = TimeRangeFilter.between(now.minus(24, ChronoUnit.HOURS), now)
)
)
// Get total duration in Seconds (Duration -> Seconds)
val duration = sleepResponse[SleepSessionRecord.SLEEP_DURATION_TOTAL]
if (duration != null) {
sleepHours = duration.seconds / 3600.0
}
} catch (e: Exception) {
e.printStackTrace()
sleepHours = 0.0
}
runOnUiThread {
if (!activity.isFinishing && !activity.isDestroyed) {
try {
myWebView.evaluateJavascript("window.updateHealthData($totalSteps, $sleepHours)", null)
} catch (e: Exception) {
e.printStackTrace()
}
}
}
}
}
}
}
@Suppress("DEPRECATION")
@Deprecated("Deprecated in Java")
override fun onBackPressed() {
if (myWebView.canGoBack()) {
myWebView.goBack()
} else {
super.onBackPressed()
}
}
}

54
Hydroflux/app/src/main/java/com/david/hydroflux/PermissionsRationaleActivity.kt Normal file
View File

@@ -0,0 +1,54 @@
package com.david.hydroflux
import android.os.Bundle
import android.widget.LinearLayout
import android.widget.TextView
import android.widget.Button
import android.view.Gravity
import android.graphics.Color
import android.widget.Toast
import androidx.appcompat.app.AppCompatActivity
class PermissionsRationaleActivity : AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
val title = TextView(this).apply {
text = "Health Permission Needed"
textSize = 24f
setTextColor(Color.CYAN)
gravity = Gravity.CENTER
setPadding(0, 0, 0, 30)
}
val message = TextView(this).apply {
text = "HydroFit needs access to your Steps and Sleep data to populate the activity rings and history charts.\n\nWe do not share this data."
textSize = 16f
setTextColor(Color.WHITE)
gravity = Gravity.CENTER
setPadding(0, 0, 0, 50)
}
val btn = Button(this).apply {
text = "UNDERSTOOD"
setBackgroundColor(Color.DKGRAY)
setTextColor(Color.WHITE)
setOnClickListener {
finish() // Close rationale and return to system dialog logic
}
}
val layout = LinearLayout(this).apply {
orientation = LinearLayout.VERTICAL
gravity = Gravity.CENTER
setPadding(50, 50, 50, 50)
setBackgroundColor(Color.BLACK)
addView(title)
addView(message)
addView(btn)
}
setContentView(layout)
}
}

11
Hydroflux/app/src/main/java/com/david/hydroflux/ui/theme/Color.kt Normal file
View File

@@ -0,0 +1,11 @@
package com.david.hydroflux.ui.theme
import androidx.compose.ui.graphics.Color
val Purple80 = Color(0xFFD0BCFF)
val PurpleGrey80 = Color(0xFFCCC2DC)
val Pink80 = Color(0xFFEFB8C8)
val Purple40 = Color(0xFF6650a4)
val PurpleGrey40 = Color(0xFF625b71)
val Pink40 = Color(0xFF7D5260)

58
Hydroflux/app/src/main/java/com/david/hydroflux/ui/theme/Theme.kt Normal file
View File

@@ -0,0 +1,58 @@
package com.david.hydroflux.ui.theme
import android.app.Activity
import android.os.Build
import androidx.compose.foundation.isSystemInDarkTheme
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.darkColorScheme
import androidx.compose.material3.dynamicDarkColorScheme
import androidx.compose.material3.dynamicLightColorScheme
import androidx.compose.material3.lightColorScheme
import androidx.compose.runtime.Composable
import androidx.compose.ui.platform.LocalContext
private val DarkColorScheme = darkColorScheme(
primary = Purple80,
secondary = PurpleGrey80,
tertiary = Pink80
)
private val LightColorScheme = lightColorScheme(
primary = Purple40,
secondary = PurpleGrey40,
tertiary = Pink40
/* Other default colors to override
background = Color(0xFFFFFBFE),
surface = Color(0xFFFFFBFE),
onPrimary = Color.White,
onSecondary = Color.White,
onTertiary = Color.White,
onBackground = Color(0xFF1C1B1F),
onSurface = Color(0xFF1C1B1F),
*/
)
@Composable
fun HydrofluxTheme(
darkTheme: Boolean = isSystemInDarkTheme(),
// Dynamic color is available on Android 12+
dynamicColor: Boolean = true,
content: @Composable () -> Unit
) {
val colorScheme = when {
dynamicColor && Build.VERSION.SDK_INT >= Build.VERSION_CODES.S -> {
val context = LocalContext.current
if (darkTheme) dynamicDarkColorScheme(context) else dynamicLightColorScheme(context)
}
darkTheme -> DarkColorScheme
else -> LightColorScheme
}
MaterialTheme(
colorScheme = colorScheme,
typography = Typography,
content = content
)
}

34
Hydroflux/app/src/main/java/com/david/hydroflux/ui/theme/Type.kt Normal file
View File

@@ -0,0 +1,34 @@
package com.david.hydroflux.ui.theme
import androidx.compose.material3.Typography
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.text.font.FontFamily
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.unit.sp
// Set of Material typography styles to start with
val Typography = Typography(
bodyLarge = TextStyle(
fontFamily = FontFamily.Default,
fontWeight = FontWeight.Normal,
fontSize = 16.sp,
lineHeight = 24.sp,
letterSpacing = 0.5.sp
)
/* Other default text styles to override
titleLarge = TextStyle(
fontFamily = FontFamily.Default,
fontWeight = FontWeight.Normal,
fontSize = 22.sp,
lineHeight = 28.sp,
letterSpacing = 0.sp
),
labelSmall = TextStyle(
fontFamily = FontFamily.Default,
fontWeight = FontWeight.Medium,
fontSize = 11.sp,
lineHeight = 16.sp,
letterSpacing = 0.5.sp
)
*/
)

74
Hydroflux/app/src/main/res/drawable/ic_launcher_background.xml Normal file
View File

@@ -0,0 +1,74 @@
<?xml version="1.0" encoding="utf-8"?>
<vector
android:height="108dp"
android:width="108dp"
android:viewportHeight="108"
android:viewportWidth="108"
xmlns:android="http://schemas.android.com/apk/res/android">
<path android:fillColor="#3DDC84"
android:pathData="M0,0h108v108h-108z"/>
<path android:fillColor="#00000000" android:pathData="M9,0L9,108"
android:strokeColor="#33FFFFFF" android:strokeWidth="0.8"/>
<path android:fillColor="#00000000" android:pathData="M19,0L19,108"
android:strokeColor="#33FFFFFF" android:strokeWidth="0.8"/>
<path android:fillColor="#00000000" android:pathData="M29,0L29,108"
android:strokeColor="#33FFFFFF" android:strokeWidth="0.8"/>
<path android:fillColor="#00000000" android:pathData="M39,0L39,108"
android:strokeColor="#33FFFFFF" android:strokeWidth="0.8"/>
<path android:fillColor="#00000000" android:pathData="M49,0L49,108"
android:strokeColor="#33FFFFFF" android:strokeWidth="0.8"/>
<path android:fillColor="#00000000" android:pathData="M59,0L59,108"
android:strokeColor="#33FFFFFF" android:strokeWidth="0.8"/>
<path android:fillColor="#00000000" android:pathData="M69,0L69,108"
android:strokeColor="#33FFFFFF" android:strokeWidth="0.8"/>
<path android:fillColor="#00000000" android:pathData="M79,0L79,108"
android:strokeColor="#33FFFFFF" android:strokeWidth="0.8"/>
<path android:fillColor="#00000000" android:pathData="M89,0L89,108"
android:strokeColor="#33FFFFFF" android:strokeWidth="0.8"/>
<path android:fillColor="#00000000" android:pathData="M99,0L99,108"
android:strokeColor="#33FFFFFF" android:strokeWidth="0.8"/>
<path android:fillColor="#00000000" android:pathData="M0,9L108,9"
android:strokeColor="#33FFFFFF" android:strokeWidth="0.8"/>
<path android:fillColor="#00000000" android:pathData="M0,19L108,19"
android:strokeColor="#33FFFFFF" android:strokeWidth="0.8"/>
<path android:fillColor="#00000000" android:pathData="M0,29L108,29"
android:strokeColor="#33FFFFFF" android:strokeWidth="0.8"/>
<path android:fillColor="#00000000" android:pathData="M0,39L108,39"
android:strokeColor="#33FFFFFF" android:strokeWidth="0.8"/>
<path android:fillColor="#00000000" android:pathData="M0,49L108,49"
android:strokeColor="#33FFFFFF" android:strokeWidth="0.8"/>
<path android:fillColor="#00000000" android:pathData="M0,59L108,59"
android:strokeColor="#33FFFFFF" android:strokeWidth="0.8"/>
<path android:fillColor="#00000000" android:pathData="M0,69L108,69"
android:strokeColor="#33FFFFFF" android:strokeWidth="0.8"/>
<path android:fillColor="#00000000" android:pathData="M0,79L108,79"
android:strokeColor="#33FFFFFF" android:strokeWidth="0.8"/>
<path android:fillColor="#00000000" android:pathData="M0,89L108,89"
android:strokeColor="#33FFFFFF" android:strokeWidth="0.8"/>
<path android:fillColor="#00000000" android:pathData="M0,99L108,99"
android:strokeColor="#33FFFFFF" android:strokeWidth="0.8"/>
<path android:fillColor="#00000000" android:pathData="M19,29L89,29"
android:strokeColor="#33FFFFFF" android:strokeWidth="0.8"/>
<path android:fillColor="#00000000" android:pathData="M19,39L89,39"
android:strokeColor="#33FFFFFF" android:strokeWidth="0.8"/>
<path android:fillColor="#00000000" android:pathData="M19,49L89,49"
android:strokeColor="#33FFFFFF" android:strokeWidth="0.8"/>
<path android:fillColor="#00000000" android:pathData="M19,59L89,59"
android:strokeColor="#33FFFFFF" android:strokeWidth="0.8"/>
<path android:fillColor="#00000000" android:pathData="M19,69L89,69"
android:strokeColor="#33FFFFFF" android:strokeWidth="0.8"/>
<path android:fillColor="#00000000" android:pathData="M19,79L89,79"
android:strokeColor="#33FFFFFF" android:strokeWidth="0.8"/>
<path android:fillColor="#00000000" android:pathData="M29,19L29,89"
android:strokeColor="#33FFFFFF" android:strokeWidth="0.8"/>
<path android:fillColor="#00000000" android:pathData="M39,19L39,89"
android:strokeColor="#33FFFFFF" android:strokeWidth="0.8"/>
<path android:fillColor="#00000000" android:pathData="M49,19L49,89"
android:strokeColor="#33FFFFFF" android:strokeWidth="0.8"/>
<path android:fillColor="#00000000" android:pathData="M59,19L59,89"
android:strokeColor="#33FFFFFF" android:strokeWidth="0.8"/>
<path android:fillColor="#00000000" android:pathData="M69,19L69,89"
android:strokeColor="#33FFFFFF" android:strokeWidth="0.8"/>
<path android:fillColor="#00000000" android:pathData="M79,19L79,89"
android:strokeColor="#33FFFFFF" android:strokeWidth="0.8"/>
</vector>

30
Hydroflux/app/src/main/res/drawable/ic_launcher_foreground.xml Normal file
View File

@@ -0,0 +1,30 @@
<vector xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:aapt="http://schemas.android.com/aapt"
android:width="108dp"
android:height="108dp"
android:viewportWidth="108"
android:viewportHeight="108">
<path android:pathData="M31,63.928c0,0 6.4,-11 12.1,-13.1c7.2,-2.6 26,-1.4 26,-1.4l38.1,38.1L107,108.928l-32,-1L31,63.928z">
<aapt:attr name="android:fillColor">
<gradient
android:endX="85.84757"
android:endY="92.4963"
android:startX="42.9492"
android:startY="49.59793"
android:type="linear">
<item
android:color="#44000000"
android:offset="0.0" />
<item
android:color="#00000000"
android:offset="1.0" />
</gradient>
</aapt:attr>
</path>
<path
android:fillColor="#FFFFFF"
android:fillType="nonZero"
android:pathData="M65.3,45.828l3.8,-6.6c0.2,-0.4 0.1,-0.9 -0.3,-1.1c-0.4,-0.2 -0.9,-0.1 -1.1,0.3l-3.9,6.7c-6.3,-2.8 -13.4,-2.8 -19.7,0l-3.9,-6.7c-0.2,-0.4 -0.7,-0.5 -1.1,-0.3C38.8,38.328 38.7,38.828 38.9,39.228l3.8,6.6C36.2,49.428 31.7,56.028 31,63.928h46C76.3,56.028 71.8,49.428 65.3,45.828zM43.4,57.328c-0.8,0 -1.5,-0.5 -1.8,-1.2c-0.3,-0.7 -0.1,-1.5 0.4,-2.1c0.5,-0.5 1.4,-0.7 2.1,-0.4c0.7,0.3 1.2,1 1.2,1.8C45.3,56.528 44.5,57.328 43.4,57.328L43.4,57.328zM64.6,57.328c-0.8,0 -1.5,-0.5 -1.8,-1.2s-0.1,-1.5 0.4,-2.1c0.5,-0.5 1.4,-0.7 2.1,-0.4c0.7,0.3 1.2,1 1.2,1.8C66.5,56.528 65.6,57.328 64.6,57.328L64.6,57.328z"
android:strokeWidth="1"
android:strokeColor="#00000000" />
</vector>

10
Hydroflux/app/src/main/res/layout/activity_main.xml Normal file
View File

@@ -0,0 +1,10 @@
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<WebView
android:id="@+id/webview"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>

5
Hydroflux/app/src/main/res/mipmap-anydpi-v26/ic_launcher.xml Normal file
View File

@@ -0,0 +1,5 @@
<?xml version="1.0" encoding="utf-8"?>
<adaptive-icon xmlns:android="http://schemas.android.com/apk/res/android">
<background android:drawable="@drawable/ic_launcher_background"/>
<foreground android:drawable="@mipmap/ic_launcher_foreground"/>
</adaptive-icon>

5
Hydroflux/app/src/main/res/mipmap-anydpi-v26/ic_launcher_round.xml Normal file
View File

@@ -0,0 +1,5 @@
<?xml version="1.0" encoding="utf-8"?>
<adaptive-icon xmlns:android="http://schemas.android.com/apk/res/android">
<background android:drawable="@drawable/ic_launcher_background"/>
<foreground android:drawable="@mipmap/ic_launcher_foreground"/>
</adaptive-icon>

BIN
Hydroflux/app/src/main/res/mipmap-hdpi/ic_launcher.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.3 KiB

BIN
Hydroflux/app/src/main/res/mipmap-hdpi/ic_launcher_foreground.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 17 KiB

BIN
Hydroflux/app/src/main/res/mipmap-hdpi/ic_launcher_round.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.8 KiB

BIN
Hydroflux/app/src/main/res/mipmap-mdpi/ic_launcher.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.1 KiB

BIN
Hydroflux/app/src/main/res/mipmap-mdpi/ic_launcher_foreground.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 9.0 KiB

BIN
Hydroflux/app/src/main/res/mipmap-mdpi/ic_launcher_round.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.8 KiB

BIN
Hydroflux/app/src/main/res/mipmap-xhdpi/ic_launcher.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 7.9 KiB

BIN
Hydroflux/app/src/main/res/mipmap-xhdpi/ic_launcher_foreground.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 28 KiB

BIN
Hydroflux/app/src/main/res/mipmap-xhdpi/ic_launcher_round.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 10 KiB

BIN
Hydroflux/app/src/main/res/mipmap-xxhdpi/ic_launcher.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 15 KiB

BIN
Hydroflux/app/src/main/res/mipmap-xxhdpi/ic_launcher_foreground.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 60 KiB

BIN
Hydroflux/app/src/main/res/mipmap-xxhdpi/ic_launcher_round.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 19 KiB

BIN
Hydroflux/app/src/main/res/mipmap-xxxhdpi/ic_launcher.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 23 KiB

BIN
Hydroflux/app/src/main/res/mipmap-xxxhdpi/ic_launcher_foreground.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 105 KiB

BIN
Hydroflux/app/src/main/res/mipmap-xxxhdpi/ic_launcher_round.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 30 KiB

10
Hydroflux/app/src/main/res/values/colors.xml Normal file
View File

@@ -0,0 +1,10 @@
<?xml version="1.0" encoding="utf-8"?>
<resources>
<color name="purple_200">#FFBB86FC</color>
<color name="purple_500">#FF6200EE</color>
<color name="purple_700">#FF3700B3</color>
<color name="teal_200">#FF03DAC5</color>
<color name="teal_700">#FF018786</color>
<color name="black">#FF000000</color>
<color name="white">#FFFFFFFF</color>
</resources>

3
Hydroflux/app/src/main/res/values/strings.xml Normal file
View File

@@ -0,0 +1,3 @@
<resources>
<string name="app_name">HydroFit</string>
</resources>

5
Hydroflux/app/src/main/res/values/themes.xml Normal file
View File

@@ -0,0 +1,5 @@
<?xml version="1.0" encoding="utf-8"?>
<resources>
<style name="Theme.Hydroflux" parent="android:Theme.Material.Light.NoActionBar" />
</resources>

13
Hydroflux/app/src/main/res/xml/backup_rules.xml Normal file
View File

@@ -0,0 +1,13 @@
<?xml version="1.0" encoding="utf-8"?><!--
Sample backup rules file; uncomment and customize as necessary.
See https://developer.android.com/guide/topics/data/autobackup
for details.
Note: This file is ignored for devices older than API 31
See https://developer.android.com/about/versions/12/backup-restore
-->
<full-backup-content>
<!--
<include domain="sharedpref" path="."/>
<exclude domain="sharedpref" path="device.xml"/>
-->
</full-backup-content>

19
Hydroflux/app/src/main/res/xml/data_extraction_rules.xml Normal file
View File

@@ -0,0 +1,19 @@
<?xml version="1.0" encoding="utf-8"?><!--
Sample data extraction rules file; uncomment and customize as necessary.
See https://developer.android.com/about/versions/12/backup-restore#xml-changes
for details.
-->
<data-extraction-rules>
<cloud-backup>
<!-- TODO: Use <include> and <exclude> to control what is backed up.
<include .../>
<exclude .../>
-->
</cloud-backup>
<!--
<device-transfer>
<include .../>
<exclude .../>
</device-transfer>
-->
</data-extraction-rules>

17
Hydroflux/app/src/test/java/com/david/hydroflux/ExampleUnitTest.kt Normal file
View File

@@ -0,0 +1,17 @@
package com.david.hydroflux
import org.junit.Test
import org.junit.Assert.*
/**
* Example local unit test, which will execute on the development machine (host).
*
* See [testing documentation](http://d.android.com/tools/testing).
*/
class ExampleUnitTest {
@Test
fun addition_isCorrect() {
assertEquals(4, 2 + 2)
}
}

6
Hydroflux/build.gradle.kts Normal file
View File

@@ -0,0 +1,6 @@
// Top-level build file where you can add configuration options common to all sub-projects/modules.
plugins {
alias(libs.plugins.android.application) apply false
alias(libs.plugins.kotlin.android) apply false
alias(libs.plugins.kotlin.compose) apply false
}

23
Hydroflux/gradle.properties Normal file
View File

@@ -0,0 +1,23 @@
# Project-wide Gradle settings.
# IDE (e.g. Android Studio) users:
# Gradle settings configured through the IDE *will override*
# any settings specified in this file.
# For more details on how to configure your build environment visit
# http://www.gradle.org/docs/current/userguide/build_environment.html
# Specifies the JVM arguments used for the daemon process.
# The setting is particularly useful for tweaking memory settings.
org.gradle.jvmargs=-Xmx2048m -Dfile.encoding=UTF-8
# When configured, Gradle will run in incubating parallel mode.
# This option should only be used with decoupled projects. For more details, visit
# https://developer.android.com/r/tools/gradle-multi-project-decoupled-projects
# org.gradle.parallel=true
# AndroidX package structure to make it clearer which packages are bundled with the
# Android operating system, and which are packaged with your app's APK
# https://developer.android.com/topic/libraries/support-library/androidx-rn
android.useAndroidX=true
# Kotlin code style for this project: "official" or "obsolete":
kotlin.code.style=official
# Enables namespacing of each library's R class so that its R class includes only the
# resources declared in the library itself and none from the library's dependencies,
# thereby reducing the size of the R class for that library
android.nonTransitiveRClass=true

32
Hydroflux/gradle/libs.versions.toml Normal file
View File

@@ -0,0 +1,32 @@
[versions]
agp = "8.13.2"
kotlin = "2.0.21"
coreKtx = "1.10.1"
junit = "4.13.2"
junitVersion = "1.1.5"
espressoCore = "3.5.1"
lifecycleRuntimeKtx = "2.6.1"
activityCompose = "1.8.0"
composeBom = "2024.09.00"
[libraries]
androidx-core-ktx = { group = "androidx.core", name = "core-ktx", version.ref = "coreKtx" }
junit = { group = "junit", name = "junit", version.ref = "junit" }
androidx-junit = { group = "androidx.test.ext", name = "junit", version.ref = "junitVersion" }
androidx-espresso-core = { group = "androidx.test.espresso", name = "espresso-core", version.ref = "espressoCore" }
androidx-lifecycle-runtime-ktx = { group = "androidx.lifecycle", name = "lifecycle-runtime-ktx", version.ref = "lifecycleRuntimeKtx" }
androidx-activity-compose = { group = "androidx.activity", name = "activity-compose", version.ref = "activityCompose" }
androidx-compose-bom = { group = "androidx.compose", name = "compose-bom", version.ref = "composeBom" }
androidx-compose-ui = { group = "androidx.compose.ui", name = "ui" }
androidx-compose-ui-graphics = { group = "androidx.compose.ui", name = "ui-graphics" }
androidx-compose-ui-tooling = { group = "androidx.compose.ui", name = "ui-tooling" }
androidx-compose-ui-tooling-preview = { group = "androidx.compose.ui", name = "ui-tooling-preview" }
androidx-compose-ui-test-manifest = { group = "androidx.compose.ui", name = "ui-test-manifest" }
androidx-compose-ui-test-junit4 = { group = "androidx.compose.ui", name = "ui-test-junit4" }
androidx-compose-material3 = { group = "androidx.compose.material3", name = "material3" }
[plugins]
android-application = { id = "com.android.application", version.ref = "agp" }
kotlin-android = { id = "org.jetbrains.kotlin.android", version.ref = "kotlin" }
kotlin-compose = { id = "org.jetbrains.kotlin.plugin.compose", version.ref = "kotlin" }

BIN
Hydroflux/gradle/wrapper/gradle-wrapper.jar vendored Normal file
View File

Binary file not shown.

8
Hydroflux/gradle/wrapper/gradle-wrapper.properties vendored Normal file
View File

@@ -0,0 +1,8 @@
#Fri Dec 26 17:01:57 AEDT 2025
distributionBase=GRADLE_USER_HOME
distributionPath=wrapper/dists
distributionUrl=https\://services.gradle.org/distributions/gradle-8.13-bin.zip
networkTimeout=10000
validateDistributionUrl=true
zipStoreBase=GRADLE_USER_HOME
zipStorePath=wrapper/dists

251
Hydroflux/gradlew vendored Normal file
View File

@@ -0,0 +1,251 @@
#!/bin/sh
#
# Copyright © 2015 the original authors.
#
# Licensed under the Apache License, Version 2.0 (the "License");
# you may not use this file except in compliance with the License.
# You may obtain a copy of the License at
#
# https://www.apache.org/licenses/LICENSE-2.0
#
# Unless required by applicable law or agreed to in writing, software
# distributed under the License is distributed on an "AS IS" BASIS,
# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
# See the License for the specific language governing permissions and
# limitations under the License.
#
# SPDX-License-Identifier: Apache-2.0
#
##############################################################################
#
# Gradle start up script for POSIX generated by Gradle.
#
# Important for running:
#
# (1) You need a POSIX-compliant shell to run this script. If your /bin/sh is
# noncompliant, but you have some other compliant shell such as ksh or
# bash, then to run this script, type that shell name before the whole
# command line, like:
#
# ksh Gradle
#
# Busybox and similar reduced shells will NOT work, because this script
# requires all of these POSIX shell features:
# * functions;
# * expansions «$var», «${var}», «${var:-default}», «${var+SET}»,
# «${var#prefix}», «${var%suffix}», and «$( cmd )»;
# * compound commands having a testable exit status, especially «case»;
# * various built-in commands including «command», «set», and «ulimit».
#
# Important for patching:
#
# (2) This script targets any POSIX shell, so it avoids extensions provided
# by Bash, Ksh, etc; in particular arrays are avoided.
#
# The "traditional" practice of packing multiple parameters into a
# space-separated string is a well documented source of bugs and security
# problems, so this is (mostly) avoided, by progressively accumulating
# options in "$@", and eventually passing that to Java.
#
# Where the inherited environment variables (DEFAULT_JVM_OPTS, JAVA_OPTS,
# and GRADLE_OPTS) rely on word-splitting, this is performed explicitly;
# see the in-line comments for details.
#
# There are tweaks for specific operating systems such as AIX, CygWin,
# Darwin, MinGW, and NonStop.
#
# (3) This script is generated from the Groovy template
# https://github.com/gradle/gradle/blob/HEAD/platforms/jvm/plugins-application/src/main/resources/org/gradle/api/internal/plugins/unixStartScript.txt
# within the Gradle project.
#
# You can find Gradle at https://github.com/gradle/gradle/.
#
##############################################################################
# Attempt to set APP_HOME
# Resolve links: $0 may be a link
app_path=$0
# Need this for daisy-chained symlinks.
while
APP_HOME=${app_path%"${app_path##*/}"} # leaves a trailing /; empty if no leading path
[ -h "$app_path" ]
do
ls=$( ls -ld "$app_path" )
link=${ls#*' -> '}
case $link in #(
/*) app_path=$link ;; #(
*) app_path=$APP_HOME$link ;;
esac
done
# This is normally unused
# shellcheck disable=SC2034
APP_BASE_NAME=${0##*/}
# Discard cd standard output in case $CDPATH is set (https://github.com/gradle/gradle/issues/25036)
APP_HOME=$( cd -P "${APP_HOME:-./}" > /dev/null && printf '%s\n' "$PWD" ) || exit
# Use the maximum available, or set MAX_FD != -1 to use that value.
MAX_FD=maximum
warn () {
echo "$*"
} >&2
die () {
echo
echo "$*"
echo
exit 1
} >&2
# OS specific support (must be 'true' or 'false').
cygwin=false
msys=false
darwin=false
nonstop=false
case "$( uname )" in #(
CYGWIN* ) cygwin=true ;; #(
Darwin* ) darwin=true ;; #(
MSYS* | MINGW* ) msys=true ;; #(
NONSTOP* ) nonstop=true ;;
esac
CLASSPATH="\\\"\\\""
# Determine the Java command to use to start the JVM.
if [ -n "$JAVA_HOME" ] ; then
if [ -x "$JAVA_HOME/jre/sh/java" ] ; then
# IBM's JDK on AIX uses strange locations for the executables
JAVACMD=$JAVA_HOME/jre/sh/java
else
JAVACMD=$JAVA_HOME/bin/java
fi
if [ ! -x "$JAVACMD" ] ; then
die "ERROR: JAVA_HOME is set to an invalid directory: $JAVA_HOME
Please set the JAVA_HOME variable in your environment to match the
location of your Java installation."
fi
else
JAVACMD=java
if ! command -v java >/dev/null 2>&1
then
die "ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH.
Please set the JAVA_HOME variable in your environment to match the
location of your Java installation."
fi
fi
# Increase the maximum file descriptors if we can.
if ! "$cygwin" && ! "$darwin" && ! "$nonstop" ; then
case $MAX_FD in #(
max*)
# In POSIX sh, ulimit -H is undefined. That's why the result is checked to see if it worked.
# shellcheck disable=SC2039,SC3045
MAX_FD=$( ulimit -H -n ) ||
warn "Could not query maximum file descriptor limit"
esac
case $MAX_FD in #(
'' | soft) :;; #(
*)
# In POSIX sh, ulimit -n is undefined. That's why the result is checked to see if it worked.
# shellcheck disable=SC2039,SC3045
ulimit -n "$MAX_FD" ||
warn "Could not set maximum file descriptor limit to $MAX_FD"
esac
fi
# Collect all arguments for the java command, stacking in reverse order:
# * args from the command line
# * the main class name
# * -classpath
# * -D...appname settings
# * --module-path (only if needed)
# * DEFAULT_JVM_OPTS, JAVA_OPTS, and GRADLE_OPTS environment variables.
# For Cygwin or MSYS, switch paths to Windows format before running java
if "$cygwin" || "$msys" ; then
APP_HOME=$( cygpath --path --mixed "$APP_HOME" )
CLASSPATH=$( cygpath --path --mixed "$CLASSPATH" )
JAVACMD=$( cygpath --unix "$JAVACMD" )
# Now convert the arguments - kludge to limit ourselves to /bin/sh
for arg do
if
case $arg in #(
-*) false ;; # don't mess with options #(
/?*) t=${arg#/} t=/${t%%/*} # looks like a POSIX filepath
[ -e "$t" ] ;; #(
*) false ;;
esac
then
arg=$( cygpath --path --ignore --mixed "$arg" )
fi
# Roll the args list around exactly as many times as the number of
# args, so each arg winds up back in the position where it started, but
# possibly modified.
#
# NB: a `for` loop captures its iteration list before it begins, so
# changing the positional parameters here affects neither the number of
# iterations, nor the values presented in `arg`.
shift # remove old arg
set -- "$@" "$arg" # push replacement arg
done
fi
# Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script.
DEFAULT_JVM_OPTS='"-Xmx64m" "-Xms64m"'
# Collect all arguments for the java command:
# * DEFAULT_JVM_OPTS, JAVA_OPTS, and optsEnvironmentVar are not allowed to contain shell fragments,
# and any embedded shellness will be escaped.
# * For example: A user cannot expect ${Hostname} to be expanded, as it is an environment variable and will be
# treated as '${Hostname}' itself on the command line.
set -- \
"-Dorg.gradle.appname=$APP_BASE_NAME" \
-classpath "$CLASSPATH" \
-jar "$APP_HOME/gradle/wrapper/gradle-wrapper.jar" \
"$@"
# Stop when "xargs" is not available.
if ! command -v xargs >/dev/null 2>&1
then
die "xargs is not available"
fi
# Use "xargs" to parse quoted args.
#
# With -n1 it outputs one arg per line, with the quotes and backslashes removed.
#
# In Bash we could simply go:
#
# readarray ARGS < <( xargs -n1 <<<"$var" ) &&
# set -- "${ARGS[@]}" "$@"
#
# but POSIX shell has neither arrays nor command substitution, so instead we
# post-process each arg (as a line of input to sed) to backslash-escape any
# character that might be a shell metacharacter, then use eval to reverse
# that process (while maintaining the separation between arguments), and wrap
# the whole thing up as a single "set" statement.
#
# This will of course break if any of these variables contains a newline or
# an unmatched quote.
#
eval "set -- $(
printf '%s\n' "$DEFAULT_JVM_OPTS $JAVA_OPTS $GRADLE_OPTS" |
xargs -n1 |
sed ' s~[^-[:alnum:]+,./:=@_]~\\&~g; ' |
tr '\n' ' '
)" '"$@"'
exec "$JAVACMD" "$@"

94
Hydroflux/gradlew.bat vendored Normal file
View File

@@ -0,0 +1,94 @@
@rem
@rem Copyright 2015 the original author or authors.
@rem
@rem Licensed under the Apache License, Version 2.0 (the "License");
@rem you may not use this file except in compliance with the License.
@rem You may obtain a copy of the License at
@rem
@rem https://www.apache.org/licenses/LICENSE-2.0
@rem
@rem Unless required by applicable law or agreed to in writing, software
@rem distributed under the License is distributed on an "AS IS" BASIS,
@rem WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
@rem See the License for the specific language governing permissions and
@rem limitations under the License.
@rem
@rem SPDX-License-Identifier: Apache-2.0
@rem
@if "%DEBUG%"=="" @echo off
@rem ##########################################################################
@rem
@rem Gradle startup script for Windows
@rem
@rem ##########################################################################
@rem Set local scope for the variables with windows NT shell
if "%OS%"=="Windows_NT" setlocal
set DIRNAME=%~dp0
if "%DIRNAME%"=="" set DIRNAME=.
@rem This is normally unused
set APP_BASE_NAME=%~n0
set APP_HOME=%DIRNAME%
@rem Resolve any "." and ".." in APP_HOME to make it shorter.
for %%i in ("%APP_HOME%") do set APP_HOME=%%~fi
@rem Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script.
set DEFAULT_JVM_OPTS="-Xmx64m" "-Xms64m"
@rem Find java.exe
if defined JAVA_HOME goto findJavaFromJavaHome
set JAVA_EXE=java.exe
%JAVA_EXE% -version >NUL 2>&1
if %ERRORLEVEL% equ 0 goto execute
echo. 1>&2
echo ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH. 1>&2
echo. 1>&2
echo Please set the JAVA_HOME variable in your environment to match the 1>&2
echo location of your Java installation. 1>&2
goto fail
:findJavaFromJavaHome
set JAVA_HOME=%JAVA_HOME:"=%
set JAVA_EXE=%JAVA_HOME%/bin/java.exe
if exist "%JAVA_EXE%" goto execute
echo. 1>&2
echo ERROR: JAVA_HOME is set to an invalid directory: %JAVA_HOME% 1>&2
echo. 1>&2
echo Please set the JAVA_HOME variable in your environment to match the 1>&2
echo location of your Java installation. 1>&2
goto fail
:execute
@rem Setup the command line
set CLASSPATH=
@rem Execute Gradle
"%JAVA_EXE%" %DEFAULT_JVM_OPTS% %JAVA_OPTS% %GRADLE_OPTS% "-Dorg.gradle.appname=%APP_BASE_NAME%" -classpath "%CLASSPATH%" -jar "%APP_HOME%\gradle\wrapper\gradle-wrapper.jar" %*
:end
@rem End local scope for the variables with windows NT shell
if %ERRORLEVEL% equ 0 goto mainEnd
:fail
rem Set variable GRADLE_EXIT_CONSOLE if you need the _script_ return code instead of
rem the _cmd.exe /c_ return code!
set EXIT_CODE=%ERRORLEVEL%
if %EXIT_CODE% equ 0 set EXIT_CODE=1
if not ""=="%GRADLE_EXIT_CONSOLE%" exit %EXIT_CODE%
exit /b %EXIT_CODE%
:mainEnd
if "%OS%"=="Windows_NT" endlocal
:omega

24
Hydroflux/settings.gradle.kts Normal file
View File

@@ -0,0 +1,24 @@
pluginManagement {
repositories {
google {
content {
includeGroupByRegex("com\\.android.*")
includeGroupByRegex("com\\.google.*")
includeGroupByRegex("androidx.*")
}
}
mavenCentral()
gradlePluginPortal()
}
}
dependencyResolutionManagement {
repositoriesMode.set(RepositoriesMode.FAIL_ON_PROJECT_REPOS)
repositories {
google()
mavenCentral()
}
}
rootProject.name = "Hydroflux"
include(":app")

641
css/style.css Normal file
View File

@@ -0,0 +1,641 @@
: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: 15px 40px;
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 {
margin-top: 8px;
font-size: 0.6rem;
color: var(--text-muted);
}

74
index.html Normal file
View File

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

28
js/app.js Normal file
View File

@@ -0,0 +1,28 @@
console.log('HydroFlux Initialized');
// Simple Navigation Logic
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';
});
});
// Initialize Modules
import { WaterTracker } from './modules/water.js?v=2';
import { StreakTracker } from './modules/streak.js?v=2';
import { FitnessDashboard } from './modules/fitness.js?v=2';
const waterTracker = new WaterTracker('water-section');
const streakTracker = new StreakTracker('streak-section');
const fitnessDashboard = new FitnessDashboard('fitness-section');

153
js/modules/fitness.js Normal file
View File

@@ -0,0 +1,153 @@
export class FitnessDashboard {
constructor(containerId) {
this.container = document.getElementById(containerId);
// Mock Data
this.data = {
steps: { current: 8432, goal: 10000 },
sleep: { current: 6.5, goal: 8 },
history: {
steps: [4500, 7200, 10500, 8900, 6000, 11200, 8432],
sleep: [5.5, 6.0, 7.5, 8.2, 5.0, 9.0, 6.5]
}
};
this.render();
// Delay animation to allow DOM paint
setTimeout(() => this.animate(), 100);
}
render() {
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);
// Ring Config
const center = 100;
const radiusOuter = 80;
const radiusInner = 55;
const circumOuter = 2 * Math.PI * radiusOuter;
const circumInner = 2 * Math.PI * radiusInner;
this.container.innerHTML = `
<div class="fitness-container">
<h2 class="section-title">DAILY ACTIVITY</h2>
<!-- Top: Concentric Rings -->
<div class="rings-wrapper">
<svg class="concentric-svg" viewBox="0 0 200 200">
<!-- Outer Track (Steps) -->
<circle class="ring-bg" cx="${center}" cy="${center}" r="${radiusOuter}" stroke-width="18"></circle>
<!-- Inner Track (Sleep) -->
<circle class="ring-bg" cx="${center}" cy="${center}" r="${radiusInner}" stroke-width="18"></circle>
<!-- Outer Progress (Steps - Cyan) -->
<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>
<!-- Inner Progress (Sleep - Purple) -->
<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>
<!-- Icons/Center -->
<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>
<!-- Legend to explain the rings -->
<div class="rings-legend">
<div class="legend-item">
<span class="dot cyan"></span> STEPS
</div>
<div class="legend-item">
<span class="dot purple"></span> SLEEP
</div>
</div>
</div>
<!-- Middle: Device -->
<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">LINK</button>
</div>
<!-- Box 1: Steps (Current + History) -->
<div class="stat-card">
<div class="stat-header">
<div>
<span class="stat-label">STEPS</span>
<div class="stat-value">${this.data.steps.current}</div>
<div class="stat-sub">Goal: ${this.data.steps.goal}</div>
</div>
<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="M13 2L3 14h9l-1 8 10-12h-9l1-8z"/></svg>
</div>
</div>
<div class="chart-divider"></div>
<div class="chart-container small">
${this.generateBars(this.data.history.steps, 12000, 'cyan')}
</div>
</div>
<!-- Box 2: Sleep (Current + History) -->
<div class="stat-card">
<div class="stat-header">
<div>
<span class="stat-label">SLEEP</span>
<div class="stat-value">${this.data.sleep.current}h</div>
<div class="stat-sub">Goal: ${this.data.sleep.goal}h</div>
</div>
<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="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/></svg>
</div>
</div>
<div class="chart-divider"></div>
<div class="chart-container small">
${this.generateBars(this.data.history.sleep, 10, 'purple')}
</div>
</div>
</div>
`;
this.attachEvents();
}
generateBars(data, max, colorClass) {
const days = ['M', 'T', 'W', 'T', 'F', 'S', 'S'];
return data.map((val, index) => {
const height = Math.min((val / max) * 100, 100);
return `
<div class="chart-column">
<div class="chart-bar ${colorClass}" style="height: ${height}%"></div>
<span class="chart-day">${days[index]}</span>
</div>
`;
}).join('');
}
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', () => {
alert("Placeholder: This feature would connect to the WearOS API in the native app.");
});
}
}
}

102
js/modules/streak.js Normal file
View File

@@ -0,0 +1,102 @@
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.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();
// 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)];
}
render() {
this.container.innerHTML = `
<div class="streak-container">
<h2 class="section-title">ABSTINENCE STREAK</h2>
<div class="streak-counter">
<div class="streak-days glow-text">0</div>
<div class="streak-label">DAYS</div>
<div class="streak-detail">${0}h ${0}m</div>
</div>
<div class="quote-card">
"${this.getRandomQuote()}"
</div>
<button id="reset-streak-btn" class="danger-btn">
RESET STREAK
</button>
</div>
`;
this.updateUI();
this.container.querySelector('#reset-streak-btn').addEventListener('click', () => {
this.resetStreak();
});
}
}

184
js/modules/water.js Normal file
View File

@@ -0,0 +1,184 @@
export class WaterTracker {
constructor(containerId) {
this.container = document.getElementById(containerId);
this.state = {
current: 0,
goal: 3000, // mL
bottleSize: 500, // mL
};
this.STORAGE_KEY = 'hydroflux_data';
this.loadState();
this.render();
this.attachEvents();
this.updateUI();
}
loadState() {
const saved = localStorage.getItem(this.STORAGE_KEY);
if (saved) {
const parsed = JSON.parse(saved);
this.state = { ...this.state, ...parsed };
}
}
saveState() {
localStorage.setItem(this.STORAGE_KEY, JSON.stringify(this.state));
this.updateUI();
}
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();
}
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 Height
const wave = this.container.querySelector('.wave');
if (wave) {
wave.style.top = `${100 - this.getPercentage()}%`;
}
}
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>
<!-- Notification Toggle -->
<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>
</div>
`;
this.checkNotificationStatus();
}
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);
});
const input = this.container.querySelector('#bottle-size-input');
input.addEventListener('change', (e) => {
this.setBottleSize(parseInt(e.target.value));
});
}
// --- Notification Logic ---
toggleNotifications(btn) {
if (!("Notification" in window)) {
alert("This browser does not support desktop notifications");
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.permission === "granted") {
const btn = this.container.querySelector('#notify-btn');
if (btn) btn.style.color = "var(--primary-cyan)";
this.startReminderLoop();
}
}
startReminderLoop() {
// 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
manifest.json Normal file
View File

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