| | <!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; |
| | |
