HydroFlux 0.0.1
This commit is contained in:
3
.idea/.gitignore
generated
vendored
Normal file
3
.idea/.gitignore
generated
vendored
Normal file
@@ -0,0 +1,3 @@
|
|||||||
|
# Default ignored files
|
||||||
|
/shelf/
|
||||||
|
/workspace.xml
|
||||||
9
.idea/Motivation_App.iml
generated
Normal file
9
.idea/Motivation_App.iml
generated
Normal 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
1186
.idea/caches/deviceStreaming.xml
generated
Normal file
File diff suppressed because it is too large
Load Diff
13
.idea/deviceManager.xml
generated
Normal file
13
.idea/deviceManager.xml
generated
Normal 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
6
.idea/misc.xml
generated
Normal 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
8
.idea/modules.xml
generated
Normal 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
15
Hydroflux/.gitignore
vendored
Normal 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
3
Hydroflux/.idea/.gitignore
generated
vendored
Normal file
@@ -0,0 +1,3 @@
|
|||||||
|
# Default ignored files
|
||||||
|
/shelf/
|
||||||
|
/workspace.xml
|
||||||
6
Hydroflux/.idea/AndroidProjectSystem.xml
generated
Normal file
6
Hydroflux/.idea/AndroidProjectSystem.xml
generated
Normal 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
123
Hydroflux/.idea/codeStyles/Project.xml
generated
Normal 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
5
Hydroflux/.idea/codeStyles/codeStyleConfig.xml
generated
Normal 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
6
Hydroflux/.idea/compiler.xml
generated
Normal 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
18
Hydroflux/.idea/deploymentTargetSelector.xml
generated
Normal 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
13
Hydroflux/.idea/deviceManager.xml
generated
Normal 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
19
Hydroflux/.idea/gradle.xml
generated
Normal 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
10
Hydroflux/.idea/migrations.xml
generated
Normal 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
9
Hydroflux/.idea/misc.xml
generated
Normal 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
17
Hydroflux/.idea/runConfigurations.xml
generated
Normal 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
1
Hydroflux/app/.gitignore
vendored
Normal file
@@ -0,0 +1 @@
|
|||||||
|
/build
|
||||||
60
Hydroflux/app/build.gradle.kts
Normal file
60
Hydroflux/app/build.gradle.kts
Normal 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
21
Hydroflux/app/proguard-rules.pro
vendored
Normal 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
|
||||||
@@ -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
55
Hydroflux/app/src/main/AndroidManifest.xml
Normal 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
641
Hydroflux/app/src/main/assests/css/style.css
Normal 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
74
Hydroflux/app/src/main/assests/index.html
Normal 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
28
Hydroflux/app/src/main/assests/js/app.js
Normal 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
153
Hydroflux/app/src/main/assests/js/modules/fitness.js
Normal 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
102
Hydroflux/app/src/main/assests/js/modules/streak.js
Normal 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
184
Hydroflux/app/src/main/assests/js/modules/water.js
Normal 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
17
Hydroflux/app/src/main/assests/manifest.json
Normal 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
40
Hydroflux/app/src/main/assets/css/fitness_stats.css
Normal 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
955
Hydroflux/app/src/main/assets/css/style.css
Normal 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;
|
||||||
|
}/ * - - - N e w F i t n e s s S t a t s D i s p l a y - - - * /
|
||||||
|
|
||||||
|
. r i n g s - s t a t s {
|
||||||
|
|
||||||
|
d i s p l a y : f l e x ;
|
||||||
|
|
||||||
|
j u s t i f y - c o n t e n t : c e n t e r ;
|
||||||
|
|
||||||
|
g a p : 4 0 p x ;
|
||||||
|
|
||||||
|
m a r g i n - t o p : 2 0 p x ;
|
||||||
|
|
||||||
|
w i d t h : 1 0 0 % ;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
. s t a t - i t e m {
|
||||||
|
|
||||||
|
d i s p l a y : f l e x ;
|
||||||
|
|
||||||
|
f l e x - d i r e c t i o n : c o l u m n ;
|
||||||
|
|
||||||
|
a l i g n - i t e m s : c e n t e r ;
|
||||||
|
|
||||||
|
g a p : 5 p x ;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
. s t a t - i t e m . c y a n . s t a t - n u m b e r {
|
||||||
|
|
||||||
|
c o l o r : v a r ( - - p r i m a r y - c y a n ) ;
|
||||||
|
|
||||||
|
t e x t - s h a d o w : 0 0 1 0 p x r g b a ( 0 , 2 4 3 , 2 5 5 , 0 . 4 ) ;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
0
Hydroflux/app/src/main/assets/icon.png
Normal file
0
Hydroflux/app/src/main/assets/icon.png
Normal file
135
Hydroflux/app/src/main/assets/index.html
Normal file
135
Hydroflux/app/src/main/assets/index.html
Normal 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
43
Hydroflux/app/src/main/assets/js/app.js
Normal 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
332
Hydroflux/app/src/main/assets/js/modules/fitness.js
Normal 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"><</button>
|
||||||
|
<span id="cal-month-label-fit">Month</span>
|
||||||
|
<button class="cal-nav-btn" id="fit-next-month">></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
123
Hydroflux/app/src/main/assets/js/modules/goals.js
Normal 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
257
Hydroflux/app/src/main/assets/js/modules/stats.js
Normal 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
196
Hydroflux/app/src/main/assets/js/modules/streak.js
Normal 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"><</button>
|
||||||
|
<span id="cal-month-label">Month</span>
|
||||||
|
<button class="cal-nav-btn" id="next-month">></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
319
Hydroflux/app/src/main/assets/js/modules/water.js
Normal 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"><</button>
|
||||||
|
<span id="cal-month-label-water">Month</span>
|
||||||
|
<button class="cal-nav-btn" id="water-next-month">></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
17
Hydroflux/app/src/main/assets/manifest.json
Normal 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
BIN
Hydroflux/app/src/main/ic_launcher-playstore.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 529 KiB |
233
Hydroflux/app/src/main/java/com/david/hydroflux/MainActivity.kt
Normal file
233
Hydroflux/app/src/main/java/com/david/hydroflux/MainActivity.kt
Normal 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()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -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)
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -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)
|
||||||
@@ -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
|
||||||
|
)
|
||||||
|
}
|
||||||
@@ -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
|
||||||
|
)
|
||||||
|
*/
|
||||||
|
)
|
||||||
@@ -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>
|
||||||
@@ -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
10
Hydroflux/app/src/main/res/layout/activity_main.xml
Normal 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>
|
||||||
@@ -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>
|
||||||
@@ -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
BIN
Hydroflux/app/src/main/res/mipmap-hdpi/ic_launcher.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 17 KiB |
BIN
Hydroflux/app/src/main/res/mipmap-hdpi/ic_launcher_round.webp
Normal file
BIN
Hydroflux/app/src/main/res/mipmap-hdpi/ic_launcher_round.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.8 KiB |
BIN
Hydroflux/app/src/main/res/mipmap-mdpi/ic_launcher.webp
Normal file
BIN
Hydroflux/app/src/main/res/mipmap-mdpi/ic_launcher.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 9.0 KiB |
BIN
Hydroflux/app/src/main/res/mipmap-mdpi/ic_launcher_round.webp
Normal file
BIN
Hydroflux/app/src/main/res/mipmap-mdpi/ic_launcher_round.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.8 KiB |
BIN
Hydroflux/app/src/main/res/mipmap-xhdpi/ic_launcher.webp
Normal file
BIN
Hydroflux/app/src/main/res/mipmap-xhdpi/ic_launcher.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 7.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 28 KiB |
BIN
Hydroflux/app/src/main/res/mipmap-xhdpi/ic_launcher_round.webp
Normal file
BIN
Hydroflux/app/src/main/res/mipmap-xhdpi/ic_launcher_round.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 10 KiB |
BIN
Hydroflux/app/src/main/res/mipmap-xxhdpi/ic_launcher.webp
Normal file
BIN
Hydroflux/app/src/main/res/mipmap-xxhdpi/ic_launcher.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 60 KiB |
BIN
Hydroflux/app/src/main/res/mipmap-xxhdpi/ic_launcher_round.webp
Normal file
BIN
Hydroflux/app/src/main/res/mipmap-xxhdpi/ic_launcher_round.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 19 KiB |
BIN
Hydroflux/app/src/main/res/mipmap-xxxhdpi/ic_launcher.webp
Normal file
BIN
Hydroflux/app/src/main/res/mipmap-xxxhdpi/ic_launcher.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 23 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 105 KiB |
BIN
Hydroflux/app/src/main/res/mipmap-xxxhdpi/ic_launcher_round.webp
Normal file
BIN
Hydroflux/app/src/main/res/mipmap-xxxhdpi/ic_launcher_round.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 30 KiB |
10
Hydroflux/app/src/main/res/values/colors.xml
Normal file
10
Hydroflux/app/src/main/res/values/colors.xml
Normal 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
3
Hydroflux/app/src/main/res/values/strings.xml
Normal file
@@ -0,0 +1,3 @@
|
|||||||
|
<resources>
|
||||||
|
<string name="app_name">HydroFit</string>
|
||||||
|
</resources>
|
||||||
5
Hydroflux/app/src/main/res/values/themes.xml
Normal file
5
Hydroflux/app/src/main/res/values/themes.xml
Normal 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
13
Hydroflux/app/src/main/res/xml/backup_rules.xml
Normal 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
19
Hydroflux/app/src/main/res/xml/data_extraction_rules.xml
Normal 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>
|
||||||
@@ -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
6
Hydroflux/build.gradle.kts
Normal 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
23
Hydroflux/gradle.properties
Normal 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
32
Hydroflux/gradle/libs.versions.toml
Normal 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
BIN
Hydroflux/gradle/wrapper/gradle-wrapper.jar
vendored
Normal file
Binary file not shown.
8
Hydroflux/gradle/wrapper/gradle-wrapper.properties
vendored
Normal file
8
Hydroflux/gradle/wrapper/gradle-wrapper.properties
vendored
Normal 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
251
Hydroflux/gradlew
vendored
Normal 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
94
Hydroflux/gradlew.bat
vendored
Normal 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
24
Hydroflux/settings.gradle.kts
Normal 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
641
css/style.css
Normal 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
74
index.html
Normal 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
28
js/app.js
Normal 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
153
js/modules/fitness.js
Normal 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
102
js/modules/streak.js
Normal 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
184
js/modules/water.js
Normal 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
17
manifest.json
Normal 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"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user