Spaces:

baranayek
/

linkcraft-pro

Running

App Files Files Community

baranayek commited on Sep 28, 2025

Commit

a9644eb

verified ·

1 Parent(s): 964da71

first the sadd card page must follow the same style css look and feel of the profile page , and its come on top of the profile page as new page with its own url path , but its same, and must be like the mentioned block background and , so everything in page remain the same and its like that the add card open new page on top of this page with samr style, but not for creating profile , it will be for choosing from the card list that we have.

Browse files

Files changed (2) hide show

card-selector.html +99 -0
index.html +40 -20

card-selector.html ADDED Viewed

	@@ -0,0 +1,99 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Select Card</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://unpkg.com/feather-icons"></script>
+    <style>
+        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
+        body {
+            font-family: 'Inter', sans-serif;
+        }
+        .glass-card {
+            background: rgba(255, 255, 255, 0.08);
+            backdrop-filter: blur(10px);
+            -webkit-backdrop-filter: blur(10px);
+            border-radius: 12px;
+            border: 1px solid rgba(255, 255, 255, 0.18);
+        }
+        .gradient-text {
+            background: linear-gradient(90deg, #3b82f6, #8b5cf6);
+            -webkit-background-clip: text;
+            background-clip: text;
+            color: transparent;
+        }
+    </style>
+</head>
+<body class="bg-gray-900 text-white min-h-screen">
+    <div 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;">
+            <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>
+                    <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>
+                    <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>
+                    <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>
+                    <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>
+                    <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>
+                    <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>
+                    <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>
+                    <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>
+                    <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>
+        </div>
+    </div>
+    <script>
+        feather.replace();
+    </script>
+</body>
+</html>

index.html CHANGED Viewed

@@ -129,8 +129,15 @@
 <body class="bg-gray-900 text-white min-h-screen">
 <!-- Profile Section -->
     <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;">
-            <!-- 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">
                     <i data-feather="plus" class="w-3 h-3 mr-1"></i> Add Card
@@ -762,30 +769,43 @@ if (profileData.bgAnimation !== undefined) {
         <script>
             // Card modal functionality
             document.getElementById('addCardBtn').addEventListener('click', function() {
-                document.getElementById('cardModal').classList.remove('hidden');
             });
-            document.getElementById('closeCardModal').addEventListener('click', function() {
-                document.getElementById('cardModal').classList.add('hidden');
             });
-            document.querySelectorAll('.card-option').forEach(option => {
-                option.addEventListener('click', function() {
-                    const cardType = this.getAttribute('data-card');
-                    // Create new card based on type
-                    createNewCard(cardType);
-                    document.getElementById('cardModal').classList.add('hidden');
-                });
             });
-            function createNewCard(cardType) {
-                // This will create a new page/card and add it to the horizontal swipe view
-                // Implementation depends on how swipe functionality is set up
-                console.log('Creating new card of type:', cardType);
-                // In a real implementation, this would:
-                // 1. Create a new page with the appropriate template
-                // 2. Add it to the swipeable view
-                // 3. Allow editing of the card content
             }
         </script>
 </body>

 <body class="bg-gray-900 text-white min-h-screen">
 <!-- Profile Section -->
     <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">
+                <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">
+                <i data-feather="chevron-right" class="w-5 h-5"></i>
+            </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">
                     <i data-feather="plus" class="w-3 h-3 mr-1"></i> Add Card
         <script>
             // Card modal functionality
             document.getElementById('addCardBtn').addEventListener('click', function() {
+                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';
             });
+            document.getElementById('prevCard').addEventListener('click', function() {
+                // Navigate back to profile
+                window.location.href = '/';
             });
+            // Swipe detection for mobile
+            let touchStartX = 0;
+            let touchEndX = 0;
+            document.getElementById('profileCard').addEventListener('touchstart', function(e) {
+                touchStartX = e.changedTouches[0].screenX;
+            }, false);
+            document.getElementById('profileCard').addEventListener('touchend', function(e) {
+                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) {
+                    // Swipe right - previous card
+                    document.getElementById('prevCard').click();
+                }
             }
         </script>
 </body>