Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>My Garage | Customization Hub</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <style> | |
| .car-tile { | |
| transition: all 0.3s ease; | |
| } | |
| .car-tile:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.4); | |
| } | |
| .selected-car { | |
| border: 3px solid #6366f1; | |
| box-shadow: 0 0 20px rgba(99, 102, 241, 0.5); | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-900 text-gray-100"> | |
| <div class="container mx-auto px-4 py-8"> | |
| <header class="flex justify-between items-center mb-8"> | |
| <h1 class="text-3xl font-bold flex items-center"> | |
| <i data-feather="home" class="mr-2 text-indigo-400"></i> | |
| My Garage | |
| </h1> | |
| <a href="MyProfileView.html" class="flex items-center"> | |
| <img src="http://static.photos/people/40x40/1" class="rounded-full mr-2"> | |
| <span>My Profile</span> | |
| </a> | |
| </header> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8"> | |
| <div class="bg-gray-800 rounded-xl p-6 car-tile selected-car"> | |
| <div class="relative"> | |
| <img src="http://static.photos/automotive/640x360/1" alt="Current Car" class="w-full rounded-lg mb-4"> | |
| <div class="absolute top-2 right-2 bg-indigo-600 px-2 py-1 rounded text-xs">ACTIVE</div> | |
| </div> | |
| <h3 class="text-xl font-semibold">2023 HyperSport GT</h3> | |
| <div class="flex justify-between text-sm text-gray-400 mt-2"> | |
| <span><i data-feather="zap" class="inline mr-1"></i> 850 HP</span> | |
| <span><i data-feather="trending-up" class="inline mr-1"></i> Tier 3</span> | |
| </div> | |
| </div> | |
| <div class="bg-gray-800 rounded-xl p-6 car-tile"> | |
| <img src="http://static.photos/automotive/640x360/2" alt="Car" class="w-full rounded-lg mb-4"> | |
| <h3 class="text-xl font-semibold">Urban Drift Racer</h3> | |
| <div class="flex justify-between text-sm text-gray-400 mt-2"> | |
| <span><i data-feather="zap" class="inline mr-1"></i> 620 HP</span> | |
| <span><i data-feather="trending-up" class="inline mr-1"></i> Tier 2</span> | |
| </div> | |
| </div> | |
| <div class="bg-gray-800 rounded-xl p-6 car-tile"> | |
| <img src="http://static.photos/automotive/640x360/3" alt="Car" class="w-full rounded-lg mb-4"> | |
| <h3 class="text-xl font-semibold">Classic Roadster</h3> | |
| <div class="flex justify-between text-sm text-gray-400 mt-2"> | |
| <span><i data-feather="zap" class="inline mr-1"></i> 450 HP</span> | |
| <span><i data-feather="trending-up" class="inline mr-1"></i> Tier 1</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-gray-800 rounded-xl p-6"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <h2 class="text-2xl font-bold">Garage Inventory</h2> | |
| <button onclick="openVehicleGenModal()" class="bg-indigo-600 hover:bg-indigo-700 px-4 py-2 rounded-lg flex items-center"> | |
| <i data-feather="plus" class="mr-2"></i> Add Vehicle | |
| </button> | |
| </div> | |
| <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4"> | |
| <!-- Repeat for each car in inventory --> | |
| <div class="bg-gray-700 rounded-lg overflow-hidden"> | |
| <img src="http://static.photos/automotive/320x240/4" alt="Car" class="w-full h-32 object-cover"> | |
| <div class="p-3"> | |
| <h3 class="font-medium">Track Dominator</h3> | |
| <p class="text-gray-400 text-xs">Unlocked: 05/15/23</p> | |
| </div> | |
| </div> | |
| <div class="bg-gray-700 rounded-lg overflow-hidden"> | |
| <img src="http://static.photos/automotive/320x240/5" alt="Car" class="w-full h-32 object-cover"> | |
| <div class="p-3"> | |
| <h3 class="font-medium">Desert Cruiser</h3> | |
| <p class="text-gray-400 text-xs">Unlocked: 04/22/23</p> | |
| </div> | |
| </div> | |
| <div class="bg-gray-700 rounded-lg overflow-hidden"> | |
| <img src="http://static.photos/automotive/320x240/6" alt="Car" class="w-full h-32 object-cover"> | |
| <div class="p-3"> | |
| <h3 class="font-medium">Cyber Racer</h3> | |
| <p class="text-gray-400 text-xs">Unlocked: 03/10/23</p> | |
| </div> | |
| </div> | |
| <div class="bg-gray-700 rounded-lg overflow-hidden"> | |
| <img src="http://static.photos/automotive/320x240/7" alt="Car" class="w-full h-32 object-cover"> | |
| <div class="p-3"> | |
| <h3 class="font-medium">Vintage Speedster</h3> | |
| <p class="text-gray-400 text-xs">Unlocked: 02/28/23</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Vehicle Generation Modal --> | |
| <div id="vehicleGenModal" class="fixed inset-0 bg-black bg-opacity-75 flex items-center justify-center z-50 hidden"> | |
| <div class="bg-gray-800 rounded-xl p-6 w-full max-w-2xl"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h3 class="text-xl font-bold">Generate Custom Vehicle</h3> | |
| <button onclick="closeVehicleGenModal()" class="text-gray-400 hover:text-white"> | |
| <i data-feather="x"></i> | |
| </button> | |
| </div> | |
| <div class="flex gap-4 mb-4"> | |
| <input type="text" id="vehiclePrompt" placeholder="Describe your dream vehicle..." | |
| class="flex-1 bg-gray-700 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-500"> | |
| <button onclick="generateVehicle()" class="bg-indigo-600 hover:bg-indigo-700 px-6 py-2 rounded-lg font-medium flex items-center"> | |
| <i data-feather="zap" class="mr-2"></i> Generate | |
| </button> | |
| </div> | |
| <div id="vehicleGenContainer" class="mt-4"> | |
| <img id="generatedVehicle" class="w-full rounded-lg hidden" alt="Generated vehicle"> | |
| <div id="vehicleLoading" class="text-center py-8 hidden"> | |
| <i data-feather="loader" class="animate-spin w-12 h-12 mx-auto text-indigo-400"></i> | |
| <p class="mt-2 text-gray-400">Creating your custom vehicle...</p> | |
| </div> | |
| </div> | |
| <div class="mt-6 flex justify-end gap-4"> | |
| <button onclick="saveGeneratedVehicle()" class="bg-green-600 hover:bg-green-700 px-4 py-2 rounded-lg hidden" id="saveVehicleBtn"> | |
| <i data-feather="save" class="mr-2"></i> Save to Garage | |
| </button> | |
| <button onclick="closeVehicleGenModal()" class="bg-gray-600 hover:bg-gray-700 px-4 py-2 rounded-lg"> | |
| <i data-feather="x" class="mr-2"></i> Close | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| feather.replace(); | |
| // Vehicle Generation Functions | |
| function openVehicleGenModal() { | |
| document.getElementById('vehicleGenModal').classList.remove('hidden'); | |
| } | |
| function closeVehicleGenModal() { | |
| document.getElementById('vehicleGenModal').classList.add('hidden'); | |
| document.getElementById('generatedVehicle').classList.add('hidden'); | |
| document.getElementById('saveVehicleBtn').classList.add('hidden'); | |
| document.getElementById('vehiclePrompt').value = ''; | |
| } | |
| function generateVehicle() { | |
| const prompt = document.getElementById('vehiclePrompt').value; | |
| if (!prompt) return; | |
| const vehicleImage = document.getElementById('generatedVehicle'); | |
| const loading = document.getElementById('vehicleLoading'); | |
| vehicleImage.classList.add('hidden'); | |
| loading.classList.remove('hidden'); | |
| // Generate vehicle image via Pollinations.AI | |
| const promptText = `Hyper-realistic concept car, ${prompt}, futuristic design, 8k, ultra detailed, studio lighting`; | |
| const encodedPrompt = encodeURIComponent(promptText); | |
| const imageUrl = `https://image.pollinations.ai/prompt/${encodedPrompt}?width=1024&height=576`; | |
| vehicleImage.src = imageUrl; | |
| vehicleImage.onload = function() { | |
| loading.classList.add('hidden'); | |
| vehicleImage.classList.remove('hidden'); | |
| document.getElementById('saveVehicleBtn').classList.remove('hidden'); | |
| }; | |
| vehicleImage.onerror = function() { | |
| loading.classList.add('hidden'); | |
| alert('Failed to generate vehicle. Please try a different description.'); | |
| }; | |
| } | |
| function saveGeneratedVehicle() { | |
| // In a real app, you would send this to your backend | |
| alert('Vehicle saved to your garage!'); | |
| closeVehicleGenModal(); | |
| } | |
| </script> | |
| </body> | |
| </html> |