Enhance Data Visualization

components/HrTile.tsx

@@ -11,9 +11,18 @@ export interface HrTileProps {
   bpm: number
   percentMax: number // 0-100
   background: string // hex color
+  gradient: string
+  glow: string
 }
 
-const HrTile = ({ name, bpm, percentMax, background }: HrTileProps) => {
+const HrTile = ({
+  name,
+  bpm,
+  percentMax,
+  background,
+  gradient,
+  glow,
+}: HrTileProps) => {
   return (
     <Tooltip
       title={`Name: ${name}, BPM: ${bpm}, % Max HR: ${percentMax}%`}
@@ -44,7 +53,10 @@ const HrTile = ({ name, bpm, percentMax, background }: HrTileProps) => {
               fontWeight: 900,
               lineHeight: 0.85,
               my: 0.5,
-              textShadow: '0 2px 4px rgba(0,0,0,0.2)',
+              textShadow: glow,
+              background: gradient,
+              WebkitBackgroundClip: 'text',
+              WebkitTextFillColor: 'transparent',
             }}
           >
             {percentMax}%
@@ -89,7 +101,9 @@ const arePropsEqual = (prevProps: HrTileProps, nextProps: HrTileProps) => {
     prevProps.name === nextProps.name &&
     prevProps.bpm === nextProps.bpm &&
     prevProps.background === nextProps.background &&
-    prevProps.percentMax === nextProps.percentMax
+    prevProps.percentMax === nextProps.percentMax &&
+    prevProps.gradient === nextProps.gradient &&
+    prevProps.glow === nextProps.glow
   )
 }
 

components/TimerDisplay.tsx

@@ -180,12 +180,12 @@ const TimerDisplay = ({
           aria-atomic="true"
           sx={{
             fontFamily: 'var(--font-roboto-mono), monospace',
-            fontSize: { xs: '6rem', sm: '8rem', md: '10rem' },
+            fontSize: { xs: '6rem', sm: '8rem', md: '12rem' },
             fontWeight: 800,
             letterSpacing: '0.12rem',
             lineHeight: 1,
             color: phaseColor,
-            textShadow: `0 0 20px ${phaseColor}80`,
+            textShadow: `0 0 25px ${phaseColor}80, 0 0 40px ${phaseColor}50`,
           }}
         >
           {displayTime}

utils/visualization.ts

@@ -23,34 +23,44 @@ export const HR_ZONES = [
     color: 'text-blue-400',
     progressColor: '#3b82f6', // Darker blue
     bgColor: '#3b82f6', // Darker blue
+    gradient: 'linear-gradient(45deg, #2196F3, #64B5F6)',
+    glow: '0 0 20px #2196F3',
   },
   {
     name: 'Fat Burn',
     min: 0.6,
     color: 'text-green-500',
     progressColor: '#22c55e',
     bgColor: '#4CAF50',
+    gradient: 'linear-gradient(45deg, #4CAF50, #81C784)',
+    glow: '0 0 20px #4CAF50',
   },
   {
     name: 'Cardio',
     min: 0.7,
     color: 'text-yellow-500',
     progressColor: '#d97706', // Darker orange/yellow
     bgColor: '#d97706', // Darker orange/yellow
+    gradient: 'linear-gradient(45deg, #FFEB3B, #FFF176)',
+    glow: '0 0 25px #FFEB3B',
   },
   {
     name: 'Peak',
     min: 0.85,
     color: 'text-red-500',
     progressColor: '#ef4444',
     bgColor: '#F44336',
+    gradient: 'linear-gradient(45deg, #F44336, #E57373)',
+    glow: '0 0 30px #F44336',
   },
   {
     name: 'Max',
     min: 0.95,
     color: 'text-purple-600',
     progressColor: '#9333ea',
     bgColor: '#9C27B0',
+    gradient: 'linear-gradient(45deg, #9C27B0, #BA68C8)',
+    glow: '0 0 35px #9C27B0',
   },
 ]
 
@@ -71,6 +81,8 @@ interface HrZoneProps {
   progressColor: string // Hex color for MUI components
   backgroundColor: string // Hex color for background
   bpm: number
+  gradient: string
+  glow: string
 }
 
 /**
@@ -88,6 +100,8 @@ export const getHrZoneProps = (
       progressColor: '#9ca3af',
       backgroundColor: '#9ca3af',
       bpm: 0,
+      gradient: 'linear-gradient(45deg, #9E9E9E, #BDBDBD)',
+      glow: 'none',
     }
   }
 
@@ -110,6 +124,8 @@ export const getHrZoneProps = (
       progressColor: '#9ca3af',
       backgroundColor: '#9ca3af',
       bpm: currentHr,
+      gradient: 'linear-gradient(45deg, #9E9E9E, #BDBDBD)',
+      glow: 'none',
     }
   }
 
@@ -120,6 +136,8 @@ export const getHrZoneProps = (
     progressColor: zone.progressColor,
     backgroundColor: zone.bgColor,
     bpm: currentHr,
+    gradient: zone.gradient,
+    glow: zone.glow,
   }
 }