when i press tap on add card button or the arrow right, get error 404

card-selector.html

@@ -32,64 +32,56 @@
             <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">
-                    <i data-feather="award" class="w-6 h-6 mb-2 mx-auto"></i>
+                <a href="training-card.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>
                 </a>
-                
-                <a href="/favorites-card.html" class="card-option p-4 border border-gray-700 rounded-lg cursor-pointer hover:bg-indigo-900/30 transition">
-                    <i data-feather="heart" class="w-6 h-6 mb-2 mx-auto"></i>
+                <a href="favorites-card.html" class="card-option p-4 border border-gray-700 rounded-lg cursor-pointer hover:bg-indigo-900/30 transition">
+<i data-feather="heart" class="w-6 h-6 mb-2 mx-auto"></i>
                     <h4 class="font-medium">Favorite Things</h4>
                     <p class="text-sm text-gray-400">Toys, snacks & routines</p>
                 </a>
-                
-                <a href="/gallery-card.html" class="card-option p-4 border border-gray-700 rounded-lg cursor-pointer hover:bg-indigo-900/30 transition">
-                    <i data-feather="image" class="w-6 h-6 mb-2 mx-auto"></i>
+                <a href="gallery-card.html" class="card-option p-4 border border-gray-700 rounded-lg cursor-pointer hover:bg-indigo-900/30 transition">
+<i data-feather="image" class="w-6 h-6 mb-2 mx-auto"></i>
                     <h4 class="font-medium">Photo Gallery</h4>
                     <p class="text-sm text-gray-400">Pictures for identification</p>
                 </a>
-                
-                <a href="/video-card.html" class="card-option p-4 border border-gray-700 rounded-lg cursor-pointer hover:bg-indigo-900/30 transition">
-                    <i data-feather="video" class="w-6 h-6 mb-2 mx-auto"></i>
+                <a href="video-card.html" class="card-option p-4 border border-gray-700 rounded-lg cursor-pointer hover:bg-indigo-900/30 transition">
+<i data-feather="video" class="w-6 h-6 mb-2 mx-auto"></i>
                     <h4 class="font-medium">Video Card</h4>
                     <p class="text-sm text-gray-400">Embed video showing behavior</p>
                 </a>
-                
-                <a href="/lost-card.html" class="card-option p-4 border border-gray-700 rounded-lg cursor-pointer hover:bg-indigo-900/30 transition">
-                    <i data-feather="alert-circle" class="w-6 h-6 mb-2 mx-auto"></i>
+                <a href="lost-card.html" class="card-option p-4 border border-gray-700 rounded-lg cursor-pointer hover:bg-indigo-900/30 transition">
+<i data-feather="alert-circle" class="w-6 h-6 mb-2 mx-auto"></i>
                     <h4 class="font-medium">Lost Poster</h4>
                     <p class="text-sm text-gray-400">Auto-generated missing dog flyer</p>
                 </a>
-                
-                <a href="/id-card.html" class="card-option p-4 border border-gray-700 rounded-lg cursor-pointer hover:bg-indigo-900/30 transition">
-                    <i data-feather="credit-card" class="w-6 h-6 mb-2 mx-auto"></i>
+                <a href="id-card.html" class="card-option p-4 border border-gray-700 rounded-lg cursor-pointer hover:bg-indigo-900/30 transition">
+<i data-feather="credit-card" class="w-6 h-6 mb-2 mx-auto"></i>
                     <h4 class="font-medium">Dog ID Card</h4>
                     <p class="text-sm text-gray-400">Basic info & QR code</p>
                 </a>
-                
-                <a href="/location-card.html" class="card-option p-4 border border-gray-700 rounded-lg cursor-pointer hover:bg-indigo-900/30 transition">
-                    <i data-feather="home" class="w-6 h-6 mb-2 mx-auto"></i>
+                <a href="location-card.html" class="card-option p-4 border border-gray-700 rounded-lg cursor-pointer hover:bg-indigo-900/30 transition">
+<i data-feather="home" class="w-6 h-6 mb-2 mx-auto"></i>
                     <h4 class="font-medium">Home Location</h4>
                     <p class="text-sm text-gray-400">Safe return address</p>
                 </a>
-                
-                <a href="/moments-card.html" class="card-option p-4 border border-gray-700 rounded-lg cursor-pointer hover:bg-indigo-900/30 transition">
-                    <i data-feather="star" class="w-6 h-6 mb-2 mx-auto"></i>
+                <a href="moments-card.html" class="card-option p-4 border border-gray-700 rounded-lg cursor-pointer hover:bg-indigo-900/30 transition">
+<i data-feather="star" class="w-6 h-6 mb-2 mx-auto"></i>
                     <h4 class="font-medium">Favorite Moments</h4>
                     <p class="text-sm text-gray-400">Fun pictures & gifs</p>
                 </a>
-                
-                <a href="/reward-card.html" class="card-option p-4 border border-gray-700 rounded-lg cursor-pointer hover:bg-indigo-900/30 transition">
-                    <i data-feather="gift" class="w-6 h-6 mb-2 mx-auto"></i>
+                <a href="reward-card.html" class="card-option p-4 border border-gray-700 rounded-lg cursor-pointer hover:bg-indigo-900/30 transition">
+<i data-feather="gift" class="w-6 h-6 mb-2 mx-auto"></i>
                     <h4 class="font-medium">Reward Card</h4>
                     <p class="text-sm text-gray-400">Optional reward info</p>
                 </a>
             </div>
             
             <div class="mt-6">
-                <a href="/" class="px-4 py-2 bg-gray-700 rounded hover:bg-gray-600 inline-block">Back to Profile</a>
-            </div>
+                <a href="index.html" class="px-4 py-2 bg-gray-700 rounded hover:bg-gray-600 inline-block">Back to Profile</a>
+</div>
         </div>
     </div>
     <script>

index.html

@@ -769,22 +769,18 @@ if (profileData.bgAnimation !== undefined) {
         <script>
             // Card modal functionality
             document.getElementById('addCardBtn').addEventListener('click', function() {
-                window.location.href = '/card-selector.html';
+                window.location.href = 'card-selector.html';
             });
 
             // Navigation functionality
             document.getElementById('nextCard').addEventListener('click', function() {
-                // In a real implementation, this would load the next card in the sequence
-                // For now we'll simulate it with a placeholder
-                window.location.href = '/training-card.html';
+                window.location.href = 'training-card.html';
             });
 
             document.getElementById('prevCard').addEventListener('click', function() {
-                // Navigate back to profile
-                window.location.href = '/';
+                window.location.href = 'index.html';
             });
-
-            // Swipe detection for mobile
+// Swipe detection for mobile
             let touchStartX = 0;
             let touchEndX = 0;