Hugging Face's logo

Spaces:
Wavetype
/
chooseshapeeeeeeeeee
Running

App Files Community
Wavetype commited on
Commit
17f61b7
·
verified ·
1 Parent(s): ad935d6

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +261 -19
index.html CHANGED
@@ -1,19 +1,261 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <title>Sleeper Configurator | Body Style</title>
6
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
+ <link rel="preconnect" href="https://fonts.googleapis.com">
8
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
9
+ <link href="https://fonts.googleapis.com/css2?family=Gloria+Hallelujah&display=swap" rel="stylesheet">
10
+ <style>
11
+ @import url('https://unpkg.com/normalize.css') layer(normalize);
12
+
13
+ :root {
14
+ --bg: #000;
15
+ --accent: #ff1e1e;
16
+ --card-bg: #fff;
17
+ --text: #000;
18
+ --selection: #f0f0f0;
19
+ }
20
+
21
+ body {
22
+ background: light-dark(#fff, #000);
23
+ display: grid;
24
+ place-items: center;
25
+ min-height: 100vh;
26
+ margin: 0;
27
+ font-family: 'SF Pro Text', system-ui, sans-serif;
28
+ overflow-x: hidden;
29
+ }
30
+
31
+ body::before {
32
+ --size: 45px;
33
+ --line: color-mix(in lch, canvasText, transparent 80%);
34
+ content: '';
35
+ height: 100vh;
36
+ width: 100vw;
37
+ position: fixed;
38
+ background: linear-gradient(90deg, var(--line) 1px, transparent 1px var(--size)) calc(var(--size) * 0.36) 50% / var(--size) var(--size),
39
+ linear-gradient(var(--line) 1px, transparent 1px var(--size)) 0% calc(var(--size) * 0.32) / var(--size) var(--size);
40
+ mask: linear-gradient(-20deg, transparent 50%, white);
41
+ top: 0;
42
+ z-index: -1;
43
+ pointer-events: none;
44
+ }
45
+
46
+ main {
47
+ display: flex;
48
+ flex-direction: column;
49
+ align-items: center;
50
+ gap: 2rem;
51
+ padding: 2rem;
52
+ z-index: 1;
53
+ }
54
+
55
+ .config-card {
56
+ width: clamp(320px, 90vw, 800px);
57
+ background: var(--card-bg);
58
+ padding: 2rem;
59
+ border: 2px solid #000;
60
+ box-shadow: 10px 10px 0px #000;
61
+ position: relative;
62
+ }
63
+
64
+ h2 {
65
+ font-family: 'Gloria Hallelujah', cursive;
66
+ margin: 0 0 1.5rem 0;
67
+ font-size: 1.8rem;
68
+ text-transform: uppercase;
69
+ }
70
+
71
+ .shape-grid {
72
+ display: grid;
73
+ grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
74
+ gap: 1rem;
75
+ margin-bottom: 2rem;
76
+ }
77
+
78
+ .shape-option {
79
+ border: 2px solid #eee;
80
+ padding: 1rem;
81
+ display: flex;
82
+ flex-direction: column;
83
+ align-items: center;
84
+ cursor: pointer;
85
+ transition: all 0.2s ease;
86
+ background: #fff;
87
+ }
88
+
89
+ .shape-option:hover {
90
+ border-color: #000;
91
+ background: var(--selection);
92
+ }
93
+
94
+ .shape-option.active {
95
+ border-color: var(--accent);
96
+ background: #fff5f5;
97
+ box-shadow: 4px 4px 0px var(--accent);
98
+ }
99
+
100
+ .shape-icon {
101
+ width: 80px;
102
+ height: 40px;
103
+ margin-bottom: 1rem;
104
+ fill: #333;
105
+ }
106
+
107
+ .shape-option.active .shape-icon {
108
+ fill: var(--accent);
109
+ }
110
+
111
+ .label {
112
+ font-size: 0.8rem;
113
+ font-weight: 800;
114
+ text-transform: uppercase;
115
+ letter-spacing: 1px;
116
+ }
117
+
118
+ .preview-area {
119
+ width: 100%;
120
+ aspect-ratio: 16/9;
121
+ background: #000;
122
+ border: 2px solid #000;
123
+ overflow: hidden;
124
+ position: relative;
125
+ }
126
+
127
+ #previewImage {
128
+ width: 100%;
129
+ height: 100%;
130
+ object-fit: cover;
131
+ transition: opacity 0.4s ease;
132
+ }
133
+
134
+ .loading-overlay {
135
+ position: absolute;
136
+ inset: 0;
137
+ background: rgba(255,255,255,0.8);
138
+ display: none;
139
+ place-items: center;
140
+ font-family: 'Gloria Hallelujah', cursive;
141
+ z-index: 2;
142
+ }
143
+
144
+ .footer-controls {
145
+ margin-top: 1.5rem;
146
+ display: flex;
147
+ justify-content: space-between;
148
+ align-items: center;
149
+ }
150
+
151
+ .btn-main {
152
+ padding: 1rem 2rem;
153
+ background: #000;
154
+ color: #fff;
155
+ border: none;
156
+ font-weight: bold;
157
+ cursor: pointer;
158
+ font-family: inherit;
159
+ transition: 0.2s;
160
+ }
161
+
162
+ .btn-main:hover {
163
+ background: var(--accent);
164
+ transform: translate(-3px, -3px);
165
+ box-shadow: 3px 3px 0 #000;
166
+ }
167
+
168
+ .arrow-tag {
169
+ font-family: 'Gloria Hallelujah', cursive;
170
+ font-size: 0.8rem;
171
+ position: absolute;
172
+ left: -40px;
173
+ top: 50px;
174
+ rotate: -15deg;
175
+ background: var(--accent);
176
+ color: white;
177
+ padding: 2px 10px;
178
+ }
179
+ </style>
180
+ </head>
181
+ <body>
182
+
183
+ <main>
184
+ <div class="config-card">
185
+ <div class="arrow-tag">SELECT SHAPE</div>
186
+ <h2>Build Your Base<sup>™</sup></h2>
187
+
188
+ <div class="shape-grid">
189
+ <div class="shape-option active" onclick="selectShape('coupe', this)">
190
+ <svg class="shape-icon" viewBox="0 0 100 50"><path d="M10 35 L20 35 L25 25 L65 25 L80 35 L90 35 L90 45 L10 45 Z"/></svg>
191
+ <span class="label">Coupe</span>
192
+ </div>
193
+ <div class="shape-option" onclick="selectShape('90s muscle car', this)">
194
+ <svg class="shape-icon" viewBox="0 0 100 50"><path d="M5 30 L30 30 L35 20 L75 20 L80 30 L95 30 L95 45 L5 45 Z"/></svg>
195
+ <span class="label">Muscle</span>
196
+ </div>
197
+ <div class="shape-option" onclick="selectShape('station wagon', this)">
198
+ <svg class="shape-icon" viewBox="0 0 100 50"><path d="M10 30 L80 30 L80 20 L25 20 L10 30 L10 45 L80 45 L90 45 L90 35 Z"/></svg>
199
+ <span class="label">Wagon</span>
200
+ </div>
201
+ <div class="shape-option" onclick="selectShape('convertible roadster', this)">
202
+ <svg class="shape-icon" viewBox="0 0 100 50"><path d="M10 35 L30 35 C30 35 40 25 50 25 L85 35 L90 35 L90 45 L10 45 Z"/></svg>
203
+ <span class="label">Droptop</span>
204
+ </div>
205
+ <div class="shape-option" onclick="selectShape('hot hatch', this)">
206
+ <svg class="shape-icon" viewBox="0 0 100 50"><path d="M10 40 L20 25 L60 25 L75 40 L10 40 Z"/></svg>
207
+ <span class="label">Hatch</span>
208
+ </div>
209
+ </div>
210
+
211
+ <div class="preview-area">
212
+ <div class="loading-overlay" id="loader">GENERATING...</div>
213
+ <img id="previewImage" src="https://image.pollinations.ai/prompt/faded%20rusted%2090s%20coupe%20parked%20in%20driveway%20sleeper%20car?width=800&height=450&nologo=true" alt="Preview">
214
+ </div>
215
+
216
+ <div class="footer-controls">
217
+ <div style="font-size: 0.7rem; color: #666; max-width: 200px;">
218
+ *Body panels may show significant patina. Racing slicks installed by default.
219
+ </div>
220
+ <button class="btn-main" onclick="confirmSelection()">LOCK IN SHAPE</button>
221
+ </div>
222
+ </div>
223
+ </main>
224
+
225
+ <script>
226
+ let selectedType = 'coupe';
227
+
228
+ function selectShape(type, element) {
229
+ // UI Update
230
+ document.querySelectorAll('.shape-option').forEach(opt => opt.classList.remove('active'));
231
+ element.classList.add('active');
232
+
233
+ selectedType = type;
234
+ updatePreview();
235
+ }
236
+
237
+ function updatePreview() {
238
+ const img = document.getElementById('previewImage');
239
+ const loader = document.getElementById('loader');
240
+
241
+ loader.style.display = 'grid';
242
+ img.style.opacity = '0.3';
243
+
244
+ const prompt = `Highly detailed photorealistic ${selectedType} sleeper car, beater condition, rusted fenders, 1990s style, mismatched paint, street racer components hidden, parked on city street, 8k resolution, cinematic lighting`;
245
+ const url = `https://image.pollinations.ai/prompt/${encodeURIComponent(prompt)}?width=800&height=450&nologo=true&seed=${Math.floor(Math.random()*99999)}`;
246
+
247
+ const tempImg = new Image();
248
+ tempImg.onload = () => {
249
+ img.src = url;
250
+ img.style.opacity = '1';
251
+ loader.style.display = 'none';
252
+ };
253
+ tempImg.src = url;
254
+ }
255
+
256
+ function confirmSelection() {
257
+ alert(`Shape Locked: ${selectedType.toUpperCase()}. Proceeding to Engine Bay configuration...`);
258
+ }
259
+ </script>
260
+ </body>
261
+ </html>