Spaces:
Running
Running
| <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> | |
| .glass-card::-webkit-scrollbar { | |
| display: none; | |
| } | |
| @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; overflow-y: auto; -ms-overflow-style: none; scrollbar-width: none;"> | |
| <h1 class="text-2xl font-bold mb-6 gradient-text">Select Card Type</h1> | |
| <div class="grid grid-cols-2 gap-4"> | |
| <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> | |
| </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="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> | |
| feather.replace(); | |
| </script> | |
| </body> | |
| </html> |