add vehicle opens the pollinations api to a custom vehicle gen

MyGarageView.html

@@ -68,10 +68,10 @@
         <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 class="bg-indigo-600 hover:bg-indigo-700 px-4 py-2 rounded-lg flex items-center">
+                <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>
 
             <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
                 <!-- Repeat for each car in inventory -->
@@ -106,9 +106,90 @@
             </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>