please fix it and make that add card open card list page and the arrow position left and right they only control swiping pages left and right

card-selector.html

@@ -32,7 +32,7 @@
             <h1 class="text-2xl font-bold mb-6 gradient-text">Select Card Type</h1>
             
             <div class="grid grid-cols-2 gap-4">
-                <a href="training-card.html" class="card-option p-4 border border-gray-700 rounded-lg cursor-pointer hover:bg-indigo-900/30 transition">
+                <a href="index.html" class="card-option p-4 border border-gray-700 rounded-lg cursor-pointer hover:bg-indigo-900/30 transition">
 <i data-feather="award" class="w-6 h-6 mb-2 mx-auto"></i>
                     <h4 class="font-medium">Training Card</h4>
                     <p class="text-sm text-gray-400">Commands your dog understands</p>

index.html

@@ -131,7 +131,7 @@
     <div id="vanta-bg" class="min-h-screen w-full flex items-center justify-center px-4 relative">
         <div class="glass-card p-6 w-full max-w-md mx-auto text-center relative" style="aspect-ratio: 9/19; max-height: 95vh;" id="profileCard">
             <!-- Navigation Arrows -->
-            <button id="prevCard" class="absolute left-2 top-1/2 transform -translate-y-1/2 bg-gray-800/50 hover:bg-gray-700/50 rounded-full p-2 z-50 hidden">
+            <button id="prevCard" class="absolute left-2 top-1/2 transform -translate-y-1/2 bg-gray-800/50 hover:bg-gray-700/50 rounded-full p-2 z-50">
                 <i data-feather="chevron-left" class="w-5 h-5"></i>
             </button>
             <button id="nextCard" class="absolute right-2 top-1/2 transform -translate-y-1/2 bg-gray-800/50 hover:bg-gray-700/50 rounded-full p-2 z-50">
@@ -139,11 +139,11 @@
             </button>
 <!-- Control Buttons -->
             <div class="absolute top-2 left-2 z-50">
-                <button id="addCardBtn" class="bg-indigo-600 hover:bg-indigo-700 px-3 py-1 rounded-full text-xs font-medium transition flex items-center">
+                <a href="card-selector.html" class="bg-indigo-600 hover:bg-indigo-700 px-3 py-1 rounded-full text-xs font-medium transition flex items-center">
                     <i data-feather="plus" class="w-3 h-3 mr-1"></i> Add Card
-                </button>
+                </a>
             </div>
-            <div class="absolute top-2 right-2 z-50 space-y-1">
+<div class="absolute top-2 right-2 z-50 space-y-1">
 <button id="saveProfile" class="bg-indigo-600 hover:bg-indigo-700 px-3 py-1 rounded-full text-xs font-medium transition flex items-center">
                     <i data-feather="save" class="w-3 h-3 mr-1"></i> Save
                 </button>
@@ -767,18 +767,36 @@ if (profileData.bgAnimation !== undefined) {
             </div>
         </div>
         <script>
-            // Card modal functionality
+            // Card navigation functionality
             document.getElementById('addCardBtn').addEventListener('click', function() {
                 window.location.href = 'card-selector.html';
             });
 
+            // Set up page order for navigation
+            const pages = [
+                'index.html',
+                'training-card.html',
+                'favorites-card.html',
+                'gallery-card.html',
+                'video-card.html',
+                'lost-card.html',
+                'id-card.html',
+                'location-card.html',
+                'moments-card.html',
+                'reward-card.html'
+            ];
+
             // Navigation functionality
             document.getElementById('nextCard').addEventListener('click', function() {
-                window.location.href = 'training-card.html';
+                const currentIndex = pages.indexOf(window.location.pathname.split('/').pop());
+                const nextIndex = (currentIndex + 1) % pages.length;
+                window.location.href = pages[nextIndex];
             });
 
             document.getElementById('prevCard').addEventListener('click', function() {
-                window.location.href = 'index.html';
+                const currentIndex = pages.indexOf(window.location.pathname.split('/').pop());
+                const prevIndex = (currentIndex - 1 + pages.length) % pages.length;
+                window.location.href = pages[prevIndex];
             });
 // Swipe detection for mobile
             let touchStartX = 0;
@@ -792,17 +810,15 @@ if (profileData.bgAnimation !== undefined) {
                 touchEndX = e.changedTouches[0].screenX;
                 handleSwipe();
             }, false);
-
             function handleSwipe() {
                 if (touchEndX < touchStartX - 50) {
                     // Swipe left - next card
                     document.getElementById('nextCard').click();
-                }
-                if (touchEndX > touchStartX + 50) {
+                } else if (touchEndX > touchStartX + 50) {
                     // Swipe right - previous card
                     document.getElementById('prevCard').click();
                 }
             }
-        </script>
+</script>
 </body>
 </html>