| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Car Garage - Vue SPA</title> |
| <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script> |
| <script src="https://cdn.jsdelivr.net/npm/three@0.150.0/build/three.min.js"></script> |
| <script src="https://cdn.jsdelivr.net/npm/three@0.150.0/examples/js/loaders/GLTFLoader.js"></script> |
| <script src="https://cdn.jsdelivr.net/npm/three@0.150.0/examples/js/controls/OrbitControls.js"></script> |
| <style> |
| * { |
| margin: 0; |
| padding: 0; |
| box-sizing: border-box; |
| } |
| |
| body { |
| font-family: 'Arial', sans-serif; |
| overflow: hidden; |
| background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); |
| } |
| |
| #app { |
| width: 100vw; |
| height: 100vh; |
| display: flex; |
| flex-direction: column; |
| } |
| |
| .garage-container { |
| flex: 1; |
| display: flex; |
| flex-direction: column; |
| padding: 20px; |
| position: relative; |
| } |
| |
| .header { |
| display: flex; |
| justify-content: space-between; |
| align-items: center; |
| margin-bottom: 20px; |
| } |
| |
| .mode-toggle { |
| background: rgba(255, 255, 255, 0.2); |
| border: 2px solid rgba(255, 255, 255, 0.4); |
| color: white; |
| padding: 10px 20px; |
| border-radius: 8px; |
| cursor: pointer; |
| font-weight: bold; |
| transition: all 0.3s ease; |
| backdrop-filter: blur(10px); |
| } |
| |
| .mode-toggle:hover { |
| background: rgba(255, 255, 255, 0.3); |
| transform: translateY(-2px); |
| } |
| |
| .main-display { |
| flex: 1; |
| display: flex; |
| justify-content: center; |
| align-items: center; |
| margin-bottom: 20px; |
| } |
| |
| .image-slot { |
| width: 600px; |
| height: 400px; |
| background: rgba(255, 255, 255, 0.1); |
| border: 3px dashed rgba(255, 255, 255, 0.4); |
| border-radius: 15px; |
| display: flex; |
| flex-direction: column; |
| justify-content: center; |
| align-items: center; |
| cursor: pointer; |
| transition: all 0.3s ease; |
| position: relative; |
| overflow: hidden; |
| backdrop-filter: blur(10px); |
| } |
| |
| .image-slot:hover { |
| background: rgba(255, 255, 255, 0.2); |
| border-color: rgba(255, 255, 255, 0.6); |
| transform: scale(1.02); |
| } |
| |
| .image-slot img { |
| max-width: 100%; |
| max-height: 100%; |
| object-fit: contain; |
| } |
| |
| .placeholder { |
| display: flex; |
| flex-direction: column; |
| align-items: center; |
| color: rgba(255, 255, 255, 0.7); |
| } |
| |
| .question-mark { |
| font-size: 120px; |
| font-weight: bold; |
| margin-bottom: 20px; |
| text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3); |
| } |
| |
| .placeholder-text { |
| font-size: 18px; |
| text-align: center; |
| } |
| |
| .viewer-3d { |
| width: 600px; |
| height: 400px; |
| border-radius: 15px; |
| overflow: hidden; |
| } |
| |
| .inventory-bar { |
| background: rgba(0, 0, 0, 0.3); |
| padding: 15px; |
| border-radius: 10px; |
| backdrop-filter: blur(10px); |
| } |
| |
| .inventory-slots { |
| display: flex; |
| gap: 15px; |
| overflow-x: auto; |
| padding: 10px 0; |
| } |
| |
| .inventory-slot { |
| min-width: 100px; |
| height: 100px; |
| background: rgba(255, 255, 255, 0.1); |
| border: 2px solid rgba(255, 255, 255, 0.3); |
| border-radius: 10px; |
| display: flex; |
| justify-content: center; |
| align-items: center; |
| cursor: pointer; |
| transition: all 0.3s ease; |
| position: relative; |
| overflow: hidden; |
| } |
| |
| .inventory-slot:hover { |
| background: rgba(255, 255, 255, 0.2); |
| border-color: rgba(255, 255, 255, 0.5); |
| transform: translateY(-5px); |
| } |
| |
| .inventory-slot.active { |
| border-color: #4CAF50; |
| box-shadow: 0 0 20px rgba(76, 175, 80, 0.5); |
| } |
| |
| .inventory-slot img { |
| max-width: 100%; |
| max-height: 100%; |
| object-fit: cover; |
| } |
| |
| .inventory-slot .empty { |
| color: rgba(255, 255, 255, 0.3); |
| font-size: 40px; |
| } |
| |
| .remove-btn { |
| position: absolute; |
| top: 5px; |
| right: 5px; |
| background: rgba(255, 0, 0, 0.7); |
| color: white; |
| border: none; |
| border-radius: 50%; |
| width: 25px; |
| height: 25px; |
| cursor: pointer; |
| display: none; |
| align-items: center; |
| justify-content: center; |
| font-size: 16px; |
| font-weight: bold; |
| } |
| |
| .inventory-slot:hover .remove-btn, |
| .image-slot:hover .remove-btn { |
| display: flex; |
| } |
| |
| .image-slot .remove-btn { |
| width: 40px; |
| height: 40px; |
| font-size: 24px; |
| } |
| |
| input[type="file"] { |
| display: none; |
| } |
| |
| .inventory-title { |
| color: white; |
| margin-bottom: 10px; |
| font-size: 16px; |
| font-weight: bold; |
| text-transform: uppercase; |
| letter-spacing: 1px; |
| } |
| |
| .loading { |
| color: white; |
| |
