Update index.html

index.html

@@ -62,25 +62,22 @@
         <header class="text-center mb-10">
             <h1 class="text-4xl md:text-5xl font-bold mb-2 glow-text">SweatSculpt Supreme</h1>
             <p class="text-xl text-gray-300">Your digital yoga and fitness companion</p>
-            <div class="flex justify-center mt-4">
+            <p id="routine-indicator" class="text-lg text-cyan-300 mt-2"></p> <div class="flex justify-center mt-4">
                 <div class="w-24 h-1 bg-gradient-to-r from-blue-400 to-green-400 rounded-full"></div>
             </div>
         </header>
 
         <div class="flex flex-col lg:flex-row gap-8">
-            <!-- Left Panel - Exercise List -->
             <div class="w-full lg:w-1/3 bg-gray-800 bg-opacity-70 rounded-xl p-6 shadow-lg">
                 <h2 class="text-2xl font-semibold mb-4 flex items-center">
                     <i data-feather="list" class="mr-2"></i> Workout Plan
                 </h2>
                 <div class="scroll-container max-h-[500px] overflow-y-auto pr-2">
                     <div id="exercise-list" class="space-y-3">
-                        <!-- Exercises will be injected here by JavaScript -->
-                    </div>
+                        </div>
                 </div>
             </div>
 
-            <!-- Right Panel - Instructions and Controls -->
             <div class="w-full lg:w-2/3 bg-gray-800 bg-opacity-70 rounded-xl p-6 shadow-lg">
                 <div class="flex justify-between items-center mb-6">
                     <h2 class="text-2xl font-semibold flex items-center">
@@ -96,12 +93,10 @@
                     </div>
                 </div>
 
-                <!-- Exercise Details -->
                 <div id="exercise-instructions" class="bg-gray-700 bg-opacity-50 rounded-lg p-4 mb-6 h-64 overflow-y-auto">
                     <p class="text-gray-300 italic">Select an exercise to begin or click Start Workout</p>
                 </div>
 
-                <!-- Timer and Progress -->
                 <div class="bg-gray-700 bg-opacity-50 rounded-lg p-6 mb-6">
                     <div class="flex flex-col md:flex-row justify-between items-center space-y-4 md:space-y-0">
                         <div class="text-center">
@@ -119,7 +114,6 @@
                     </div>
                 </div>
 
-                <!-- Progress Bar -->
                 <div class="mb-6">
                     <div class="flex justify-between text-sm text-gray-400 mb-1">
                         <span>Workout Progress</span>
@@ -130,7 +124,6 @@
                     </div>
                 </div>
 
-                <!-- Controls -->
                 <div class="flex flex-col sm:flex-row justify-center space-y-3 sm:space-y-0 sm:space-x-4">
                     <button id="start-btn" class="px-8 py-3 bg-gradient-to-r from-blue-500 to-green-500 rounded-full font-bold hover:from-blue-600 hover:to-green-600 transition transform hover:scale-105 shadow-lg">
                         <i data-feather="play" class="mr-2"></i> Start Workout
@@ -145,7 +138,6 @@
             </div>
         </div>
 
-        <!-- Audio Element for Background Music -->
         <audio id="background-music" loop>
             <source src="background.mp3" type="audio/mpeg">
         </audio>
@@ -172,6 +164,19 @@
             zoom: 0.65
         });
 
+        // --- MODIFICATION START ---
+        // Auto-detect morning/evening for Suryanamaskar rounds
+        const currentHour = new Date().getHours();
+        const isEvening = currentHour >= 16; // Evening is defined as 4 PM (16:00) or later
+        const suryanamaskarRounds = isEvening ? 6 : 12;
+
+        // Update UI indicator
+        const routineIndicator = document.getElementById('routine-indicator');
+        if (routineIndicator) {
+            routineIndicator.textContent = `✨ ${isEvening ? 'Evening Routine' : 'Morning Routine'} Activated (${suryanamaskarRounds} Suryanamaskars)`;
+        }
+        // --- MODIFICATION END ---
+
         // Exercise Data
         const exercises = [
             // Warm-up
@@ -183,8 +188,8 @@
             { name: "Gentle stretching", type: "warmup", duration: 120, tips: "Do not bounce, Feel the stretch" },
             { name: "Short break", type: "warmup", duration: 30, tips: "Relax shoulders, Sip water" },
             
-            // Suryanamaskar (12 rounds, 12 poses per round)
-            ...Array.from({ length: 12 }, (_, round) => [
+            // Suryanamaskar (Dynamic rounds based on time of day)
+            ...Array.from({ length: suryanamaskarRounds }, (_, round) => [
                 { name: `Round ${round+1}: Pranamasana`, type: "suryanamaskar", duration: 5, tips: "Focus on breathing, Keep core engaged" },
                 { name: `Round ${round+1}: Hasta Uttanasana`, type: "suryanamaskar", duration: 5, tips: "Focus on breathing, Keep core engaged" },
                 { name: `Round ${round+1}: Padahastasana`, type: "suryanamaskar", duration: 5, tips: "Focus on breathing, Keep core engaged" },