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