Hugging Face's logo

Spaces:
Wavetype
/
Test
Build error

App Files Community
Wavetype commited on
Commit
6ce8bb1
·
verified ·
1 Parent(s): 038f01d

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +218 -10
index.html CHANGED
@@ -1,13 +1,221 @@
1
  <!DOCTYPE html>
2
- <html lang="">
3
- <head>
4
  <meta charset="UTF-8">
5
- <link rel="icon" href="/favicon.ico">
6
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
- <title>Vite App</title>
8
- </head>
9
- <body>
10
- <div id="app"></div>
11
- <script type="module" src="/src/main.ts"></script>
12
- </body>
13
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
  <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
  <meta charset="UTF-8">
 
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Car Garage - Vue SPA</title>
7
+ <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
8
+ <script src="https://cdn.jsdelivr.net/npm/three@0.150.0/build/three.min.js"></script>
9
+ <script src="https://cdn.jsdelivr.net/npm/three@0.150.0/examples/js/loaders/GLTFLoader.js"></script>
10
+ <script src="https://cdn.jsdelivr.net/npm/three@0.150.0/examples/js/controls/OrbitControls.js"></script>
11
+ <style>
12
+ * {
13
+ margin: 0;
14
+ padding: 0;
15
+ box-sizing: border-box;
16
+ }
17
+
18
+ body {
19
+ font-family: 'Arial', sans-serif;
20
+ overflow: hidden;
21
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
22
+ }
23
+
24
+ #app {
25
+ width: 100vw;
26
+ height: 100vh;
27
+ display: flex;
28
+ flex-direction: column;
29
+ }
30
+
31
+ .garage-container {
32
+ flex: 1;
33
+ display: flex;
34
+ flex-direction: column;
35
+ padding: 20px;
36
+ position: relative;
37
+ }
38
+
39
+ .header {
40
+ display: flex;
41
+ justify-content: space-between;
42
+ align-items: center;
43
+ margin-bottom: 20px;
44
+ }
45
+
46
+ .mode-toggle {
47
+ background: rgba(255, 255, 255, 0.2);
48
+ border: 2px solid rgba(255, 255, 255, 0.4);
49
+ color: white;
50
+ padding: 10px 20px;
51
+ border-radius: 8px;
52
+ cursor: pointer;
53
+ font-weight: bold;
54
+ transition: all 0.3s ease;
55
+ backdrop-filter: blur(10px);
56
+ }
57
+
58
+ .mode-toggle:hover {
59
+ background: rgba(255, 255, 255, 0.3);
60
+ transform: translateY(-2px);
61
+ }
62
+
63
+ .main-display {
64
+ flex: 1;
65
+ display: flex;
66
+ justify-content: center;
67
+ align-items: center;
68
+ margin-bottom: 20px;
69
+ }
70
+
71
+ .image-slot {
72
+ width: 600px;
73
+ height: 400px;
74
+ background: rgba(255, 255, 255, 0.1);
75
+ border: 3px dashed rgba(255, 255, 255, 0.4);
76
+ border-radius: 15px;
77
+ display: flex;
78
+ flex-direction: column;
79
+ justify-content: center;
80
+ align-items: center;
81
+ cursor: pointer;
82
+ transition: all 0.3s ease;
83
+ position: relative;
84
+ overflow: hidden;
85
+ backdrop-filter: blur(10px);
86
+ }
87
+
88
+ .image-slot:hover {
89
+ background: rgba(255, 255, 255, 0.2);
90
+ border-color: rgba(255, 255, 255, 0.6);
91
+ transform: scale(1.02);
92
+ }
93
+
94
+ .image-slot img {
95
+ max-width: 100%;
96
+ max-height: 100%;
97
+ object-fit: contain;
98
+ }
99
+
100
+ .placeholder {
101
+ display: flex;
102
+ flex-direction: column;
103
+ align-items: center;
104
+ color: rgba(255, 255, 255, 0.7);
105
+ }
106
+
107
+ .question-mark {
108
+ font-size: 120px;
109
+ font-weight: bold;
110
+ margin-bottom: 20px;
111
+ text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
112
+ }
113
+
114
+ .placeholder-text {
115
+ font-size: 18px;
116
+ text-align: center;
117
+ }
118
+
119
+ .viewer-3d {
120
+ width: 600px;
121
+ height: 400px;
122
+ border-radius: 15px;
123
+ overflow: hidden;
124
+ }
125
+
126
+ .inventory-bar {
127
+ background: rgba(0, 0, 0, 0.3);
128
+ padding: 15px;
129
+ border-radius: 10px;
130
+ backdrop-filter: blur(10px);
131
+ }
132
+
133
+ .inventory-slots {
134
+ display: flex;
135
+ gap: 15px;
136
+ overflow-x: auto;
137
+ padding: 10px 0;
138
+ }
139
+
140
+ .inventory-slot {
141
+ min-width: 100px;
142
+ height: 100px;
143
+ background: rgba(255, 255, 255, 0.1);
144
+ border: 2px solid rgba(255, 255, 255, 0.3);
145
+ border-radius: 10px;
146
+ display: flex;
147
+ justify-content: center;
148
+ align-items: center;
149
+ cursor: pointer;
150
+ transition: all 0.3s ease;
151
+ position: relative;
152
+ overflow: hidden;
153
+ }
154
+
155
+ .inventory-slot:hover {
156
+ background: rgba(255, 255, 255, 0.2);
157
+ border-color: rgba(255, 255, 255, 0.5);
158
+ transform: translateY(-5px);
159
+ }
160
+
161
+ .inventory-slot.active {
162
+ border-color: #4CAF50;
163
+ box-shadow: 0 0 20px rgba(76, 175, 80, 0.5);
164
+ }
165
+
166
+ .inventory-slot img {
167
+ max-width: 100%;
168
+ max-height: 100%;
169
+ object-fit: cover;
170
+ }
171
+
172
+ .inventory-slot .empty {
173
+ color: rgba(255, 255, 255, 0.3);
174
+ font-size: 40px;
175
+ }
176
+
177
+ .remove-btn {
178
+ position: absolute;
179
+ top: 5px;
180
+ right: 5px;
181
+ background: rgba(255, 0, 0, 0.7);
182
+ color: white;
183
+ border: none;
184
+ border-radius: 50%;
185
+ width: 25px;
186
+ height: 25px;
187
+ cursor: pointer;
188
+ display: none;
189
+ align-items: center;
190
+ justify-content: center;
191
+ font-size: 16px;
192
+ font-weight: bold;
193
+ }
194
+
195
+ .inventory-slot:hover .remove-btn,
196
+ .image-slot:hover .remove-btn {
197
+ display: flex;
198
+ }
199
+
200
+ .image-slot .remove-btn {
201
+ width: 40px;
202
+ height: 40px;
203
+ font-size: 24px;
204
+ }
205
+
206
+ input[type="file"] {
207
+ display: none;
208
+ }
209
+
210
+ .inventory-title {
211
+ color: white;
212
+ margin-bottom: 10px;
213
+ font-size: 16px;
214
+ font-weight: bold;
215
+ text-transform: uppercase;
216
+ letter-spacing: 1px;
217
+ }
218
+
219
+ .loading {
220
+ color: white;
221
+