when plus tapped there is no action - Follow Up Deployment

index.html

@@ -430,7 +430,7 @@
                             <div class="relative">
                                 <svg width="120" height="120" viewBox="0 0 120 120">
                                     <circle cx="60" cy="60" r="54" fill="none" stroke="#e2e8f0" stroke-width="8" />
-                                    <circle cx="60" cy="60" r="54" fill="none" stroke="#3b82f6" stroke-width="8" stroke-dasharray="339.292" stroke-dashoffset="84.823" stroke-linecap="round" transform="rotate(-90 60 60)" />
+                                    <circle class="progress-ring__circle" cx="60" cy="60" r="54" fill="none" stroke="#3b82f6" stroke-width="8" stroke-dasharray="339.292" stroke-dashoffset="84.823" stroke-linecap="round" transform="rotate(-90 60 60)" />
                                 </svg>
                                 <div class="absolute inset-0 flex flex-col items-center justify-center">
                                     <span class="text-2xl font-bold">1.8L</span>
@@ -440,10 +440,10 @@
                         </div>
                         
                         <div class="grid grid-cols-4 gap-2">
-                            <button class="bg-blue-50 text-blue-500 py-2 rounded-lg hover:bg-blue-100 transition">
+                            <button id="add250ml" class="bg-blue-50 text-blue-500 py-2 rounded-lg hover:bg-blue-100 transition">
                                 <i class="fas fa-plus"></i> 250ml
                             </button>
-                            <button class="bg-blue-50 text-blue-500 py-2 rounded-lg hover:bg-blue-100 transition">
+                            <button id="add500ml" class="bg-blue-50 text-blue-500 py-2 rounded-lg hover:bg-blue-100 transition">
                                 <i class="fas fa-plus"></i> 500ml
                             </button>
                             <button class="bg-blue-100 text-blue-700 py-2 rounded-lg font-medium">
@@ -682,12 +682,39 @@
             });
         });
         
-        // Water intake buttons
-        document.querySelectorAll('.bg-blue-50').forEach(button => {
-            button.addEventListener('click', function() {
-                // In a real app, this would update the water intake value
-                alert('Water intake recorded!');
-            });
+        // Water intake functionality
+        let waterIntake = 1.8;
+        const maxWaterIntake = 2.5;
+        const waterDisplay = document.querySelector('.absolute.inset-0 span.text-2xl');
+        const waterCircle = document.querySelector('.progress-ring__circle');
+        
+        // Update water display and progress circle
+        function updateWaterDisplay() {
+            waterDisplay.textContent = `${waterIntake.toFixed(1)}L`;
+            const percentage = (waterIntake / maxWaterIntake) * 100;
+            const circumference = 2 * Math.PI * 54;
+            const offset = circumference - (percentage / 100) * circumference;
+            waterCircle.style.strokeDashoffset = offset;
+        }
+        
+        // Add 250ml button
+        document.getElementById('add250ml').addEventListener('click', function() {
+            waterIntake += 0.25;
+            if (waterIntake > maxWaterIntake) waterIntake = maxWaterIntake;
+            updateWaterDisplay();
+        });
+        
+        // Add 500ml button
+        document.getElementById('add500ml').addEventListener('click', function() {
+            waterIntake += 0.5;
+            if (waterIntake > maxWaterIntake) waterIntake = maxWaterIntake;
+            updateWaterDisplay();
+        });
+        
+        // Reset button
+        document.querySelector('.bg-blue-500').addEventListener('click', function() {
+            waterIntake = 0;
+            updateWaterDisplay();
         });
         
         // Sync steps button