multiple selections at once are possible, re-clicking deactivates the selection - Follow Up Deployment

index.html

@@ -25,7 +25,6 @@
             transform: translateY(-5px);
             box-shadow: 0 10px 25px -5px rgba(212, 175, 55, 0.3);
             border-color: #d4af37;
-            background-color: #111111;
         }
         
         .gold-gradient {
@@ -139,13 +138,13 @@
         <!-- Equipment Selection -->
         <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-6">
             <!-- Bodyweight Card -->
-            <div class="equipment-card rounded-lg overflow-hidden transition duration-300 cursor-pointer">
+            <div class="equipment-card bg-white rounded-xl shadow-md overflow-hidden transition duration-300 cursor-pointer">
                 <div class="p-6 flex flex-col items-center">
                     <div class="w-20 h-20 mb-4 flex items-center justify-center">
                         <img src="https://ktworkout-kintsugi-tradings-projects.vercel.app/_next/static/media/bodyweight.e08c10a8.png" 
                              alt="Bodyweight" class="w-full h-full object-contain">
                     </div>
-                    <h3 class="text-lg font-semibold">Bodyweight</h3>
+                    <h3 class="text-lg font-semibold text-gray-800">Bodyweight</h3>
                 </div>
             </div>
             
@@ -268,20 +267,24 @@
             menu.classList.toggle('hidden');
         });
         
-        // Equipment card selection
+        // Equipment card selection (multiple with toggle)
         const equipmentCards = document.querySelectorAll('.equipment-card');
         equipmentCards.forEach(card => {
             card.addEventListener('click', function() {
-                // Remove active class from all cards
-                equipmentCards.forEach(c => {
-                    c.classList.remove('border-2', 'border-amber-500');
-                    c.style.backgroundColor = '#000000';
-                });
+                const isActive = this.classList.contains('border-2');
                 
-                // Add active class to clicked card
-                this.classList.add('border-2', 'border-amber-500');
-                this.style.backgroundColor = '#ffffff';
-                this.style.color = '#000000';
+                // Toggle the clicked card
+                if (isActive) {
+                    this.classList.remove('border-2', 'border-amber-500');
+                    this.style.backgroundColor = '#000000';
+                    const h3 = this.querySelector('h3');
+                    if (h3) h3.style.color = '#ffffff';
+                } else {
+                    this.classList.add('border-2', 'border-amber-500');
+                    this.style.backgroundColor = '#ffffff';
+                    const h3 = this.querySelector('h3');
+                    if (h3) h3.style.color = '#000000';
+                }
             });
         });
     </script>