Hugging Face's logo

Spaces:
camvoya
/
anycoder-e72a12e0
Running

App Files Community
camvoya commited on
Commit
e54e5f2
·
verified ·
1 Parent(s): e128f5b

Upload folder using huggingface_hub

Browse files
Files changed (1) hide show
  1. index.html +542 -19
index.html CHANGED
@@ -1,19 +1,542 @@
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="es">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Galactic Miniatures - Tienda de Rol</title>
7
+
8
+ <!-- Fuentes de Google -->
9
+ <link rel="preconnect" href="https://fonts.googleapis.com">
10
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
11
+ <link href="https://fonts.googleapis.com/css2?family=Exo+2:wght@300;400;700&family=Orbitron:wght@400;700;900&display=swap" rel="stylesheet">
12
+
13
+ <style>
14
+ /* --- VARIABLES & RESET --- */
15
+ :root {
16
+ --bg-deep: #05050a;
17
+ --bg-card: rgba(20, 20, 35, 0.6);
18
+ --primary: #00f3ff; /* Cyan Neon */
19
+ --secondary: #bc13fe; /* Purple Neon */
20
+ --accent: #ff0055; /* Pink Neon */
21
+ --text-main: #e0e6ed;
22
+ --text-muted: #8b9bb4;
23
+ --glass-border: 1px solid rgba(255, 255, 255, 0.1);
24
+ --glow: 0 0 15px rgba(0, 243, 255, 0.3);
25
+ }
26
+
27
+ * {
28
+ margin: 0;
29
+ padding: 0;
30
+ box-sizing: border-box;
31
+ }
32
+
33
+ body {
34
+ font-family: 'Exo 2', sans-serif;
35
+ background-color: var(--bg-deep);
36
+ color: var(--text-main);
37
+ overflow-x: hidden;
38
+ min-height: 100vh;
39
+ position: relative;
40
+ }
41
+
42
+ /* --- ESTRELLAS ANIMADAS (FONDO) --- */
43
+ #star-container {
44
+ position: fixed;
45
+ top: 0;
46
+ left: 0;
47
+ width: 100%;
48
+ height: 100%;
49
+ z-index: -1;
50
+ background: radial-gradient(circle at center, #1a1a2e 0%, #000000 100%);
51
+ overflow: hidden;
52
+ }
53
+
54
+ .star {
55
+ position: absolute;
56
+ background: white;
57
+ border-radius: 50%;
58
+ opacity: 0.8;
59
+ animation: twinkle var(--duration) ease-in-out infinite;
60
+ }
61
+
62
+ @keyframes twinkle {
63
+ 0%, 100% { opacity: 0.2; transform: scale(0.8); }
64
+ 50% { opacity: 1; transform: scale(1.2); }
65
+ }
66
+
67
+ /* --- HEADER --- */
68
+ header {
69
+ display: flex;
70
+ justify-content: space-between;
71
+ align-items: center;
72
+ padding: 20px 5%;
73
+ background: rgba(5, 5, 10, 0.8);
74
+ backdrop-filter: blur(10px);
75
+ border-bottom: var(--glass-border);
76
+ position: sticky;
77
+ top: 0;
78
+ z-index: 100;
79
+ }
80
+
81
+ .logo {
82
+ font-family: 'Orbitron', sans-serif;
83
+ font-size: 1.5rem;
84
+ font-weight: 900;
85
+ color: var(--primary);
86
+ text-transform: uppercase;
87
+ letter-spacing: 2px;
88
+ text-shadow: var(--glow);
89
+ }
90
+
91
+ .anycoder-link {
92
+ font-size: 0.9rem;
93
+ color: var(--text-muted);
94
+ text-decoration: none;
95
+ border: 1px solid var(--secondary);
96
+ padding: 5px 15px;
97
+ border-radius: 20px;
98
+ transition: 0.3s;
99
+ }
100
+
101
+ .anycoder-link:hover {
102
+ background: var(--secondary);
103
+ color: white;
104
+ box-shadow: 0 0 15px var(--secondary);
105
+ }
106
+
107
+ /* --- HERO SECTION --- */
108
+ .hero {
109
+ text-align: center;
110
+ padding: 80px 20px;
111
+ }
112
+
113
+ .hero h1 {
114
+ font-family: 'Orbitron', sans-serif;
115
+ font-size: 3rem;
116
+ margin-bottom: 15px;
117
+ background: linear-gradient(90deg, var(--primary), var(--secondary));
118
+ -webkit-background-clip: text;
119
+ -webkit-text-fill-color: transparent;
120
+ }
121
+
122
+ .hero p {
123
+ color: var(--text-muted);
124
+ font-size: 1.2rem;
125
+ max-width: 600px;
126
+ margin: 0 auto;
127
+ }
128
+
129
+ /* --- PRODUCT GRID --- */
130
+ .shop-container {
131
+ max-width: 1200px;
132
+ margin: 0 auto;
133
+ padding: 20px;
134
+ display: grid;
135
+ grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
136
+ gap: 30px;
137
+ padding-bottom: 100px;
138
+ }
139
+
140
+ /* --- PRODUCT CARD --- */
141
+ .product-card {
142
+ background: var(--bg-card);
143
+ border: var(--glass-border);
144
+ border-radius: 15px;
145
+ overflow: hidden;
146
+ backdrop-filter: blur(10px);
147
+ transition: transform 0.3s ease, box-shadow 0.3s ease;
148
+ position: relative;
149
+ display: flex;
150
+ flex-direction: column;
151
+ }
152
+
153
+ .product-card:hover {
154
+ transform: translateY(-5px);
155
+ box-shadow: 0 10px 30px rgba(0, 243, 255, 0.1);
156
+ border-color: rgba(0, 243, 255, 0.3);
157
+ }
158
+
159
+ .product-image-container {
160
+ width: 100%;
161
+ height: 250px;
162
+ position: relative;
163
+ overflow: hidden;
164
+ }
165
+
166
+ .product-image-container img {
167
+ width: 100%;
168
+ height: 100%;
169
+ object-fit: cover;
170
+ transition: transform 0.5s;
171
+ }
172
+
173
+ .product-card:hover .product-image-container img {
174
+ transform: scale(1.1);
175
+ }
176
+
177
+ /* Badge */
178
+ .badge {
179
+ position: absolute;
180
+ top: 10px;
181
+ right: 10px;
182
+ background: var(--accent);
183
+ color: white;
184
+ padding: 5px 10px;
185
+ font-size: 0.8rem;
186
+ font-weight: bold;
187
+ border-radius: 5px;
188
+ font-family: 'Orbitron', sans-serif;
189
+ z-index: 2;
190
+ }
191
+
192
+ .product-details {
193
+ padding: 20px;
194
+ flex-grow: 1;
195
+ display: flex;
196
+ flex-direction: column;
197
+ }
198
+
199
+ .product-title {
200
+ font-family: 'Orbitron', sans-serif;
201
+ font-size: 1.2rem;
202
+ margin-bottom: 10px;
203
+ color: white;
204
+ }
205
+
206
+ .product-desc {
207
+ font-size: 0.9rem;
208
+ color: var(--text-muted);
209
+ margin-bottom: 20px;
210
+ line-height: 1.5;
211
+ }
212
+
213
+ /* --- CONTROLES (COLOR & SIZE) --- */
214
+ .config-section {
215
+ margin-top: auto; /* Empuja hacia abajo */
216
+ }
217
+
218
+ .config-label {
219
+ font-size: 0.8rem;
220
+ text-transform: uppercase;
221
+ letter-spacing: 1px;
222
+ color: var(--primary);
223
+ margin-bottom: 8px;
224
+ display: block;
225
+ }
226
+
227
+ /* Color Picker Styling */
228
+ .color-options {
229
+ display: flex;
230
+ gap: 10px;
231
+ margin-bottom: 15px;
232
+ }
233
+
234
+ .color-option {
235
+ cursor: pointer;
236
+ position: relative;
237
+ }
238
+
239
+ .color-option input {
240
+ display: none;
241
+ }
242
+
243
+ .color-circle {
244
+ width: 25px;
245
+ height: 25px;
246
+ border-radius: 50%;
247
+ border: 2px solid transparent;
248
+ transition: all 0.2s;
249
+ }
250
+
251
+ .color-option input:checked + .color-circle {
252
+ border-color: white;
253
+ box-shadow: 0 0 10px var(--color-hex);
254
+ transform: scale(1.2);
255
+ }
256
+
257
+ /* Size Picker Styling */
258
+ .size-options {
259
+ display: flex;
260
+ gap: 10px;
261
+ }
262
+
263
+ .size-btn {
264
+ flex: 1;
265
+ background: rgba(255, 255, 255, 0.05);
266
+ border: 1px solid rgba(255, 255, 255, 0.1);
267
+ color: var(--text-muted);
268
+ padding: 8px;
269
+ cursor: pointer;
270
+ font-family: 'Exo 2', sans-serif;
271
+ font-weight: bold;
272
+ transition: 0.3s;
273
+ border-radius: 4px;
274
+ }
275
+
276
+ .size-btn:hover {
277
+ border-color: var(--primary);
278
+ color: white;
279
+ }
280
+
281
+ .size-btn.active {
282
+ background: rgba(0, 243, 255, 0.1);
283
+ border-color: var(--primary);
284
+ color: var(--primary);
285
+ box-shadow: 0 0 10px rgba(0, 243, 255, 0.1);
286
+ }
287
+
288
+ /* --- FOOTER & PRICE --- */
289
+ .card-footer {
290
+ display: flex;
291
+ justify-content: space-between;
292
+ align-items: center;
293
+ margin-top: 20px;
294
+ padding-top: 15px;
295
+ border-top: 1px solid rgba(255, 255, 255, 0.05);
296
+ }
297
+
298
+ .price {
299
+ font-size: 1.3rem;
300
+ font-weight: bold;
301
+ color: white;
302
+ }
303
+
304
+ .add-btn {
305
+ background: linear-gradient(45deg, var(--primary), var(--secondary));
306
+ border: none;
307
+ padding: 10px 20px;
308
+ color: white;
309
+ font-weight: bold;
310
+ border-radius: 5px;
311
+ cursor: pointer;
312
+ text-transform: uppercase;
313
+ transition: 0.3s;
314
+ }
315
+
316
+ .add-btn:hover {
317
+ box-shadow: 0 0 20px rgba(188, 19, 254, 0.6);
318
+ transform: scale(1.05);
319
+ }
320
+
321
+ /* --- RESPONSIVE --- */
322
+ @media (max-width: 768px) {
323
+ .hero h1 { font-size: 2rem; }
324
+ header { flex-direction: column; gap: 10px; }
325
+ }
326
+ </style>
327
+ </head>
328
+ <body>
329
+
330
+ <!-- Fondo de Estrellas -->
331
+ <div id="star-container"></div>
332
+
333
+ <header>
334
+ <div class="logo">Galactic<span style="color:var(--secondary)">Miniatures</span></div>
335
+ <nav>
336
+ <a href="#" class="anycoder-link" target="_blank">Built with anycoder</a>
337
+ </nav>
338
+ </header>
339
+
340
+ <section class="hero">
341
+ <h1>Elige Tu Guerrero Estelar</h1>
342
+ <p>Miniaturas de alta calidad para tus campañas de rol. Personaliza tu figura con colores vibrantes y diferentes escalas.</p>
343
+ </section>
344
+
345
+ <main class="shop-container">
346
+
347
+ <!-- PRODUCTO 1 -->
348
+ <article class="product-card">
349
+ <div class="product-image-container">
350
+ <span class="badge">Best Seller</span>
351
+ <!-- Imagen Placeholder: Warrior -->
352
+ <img src="https://images.unsplash.com/photo-1612362464414-0492729dfdb1?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80" alt="Cazador Estelar">
353
+ </div>
354
+ <div class="product-details">
355
+ <h2 class="product-title">Cazador Estelar</h2>
356
+ <p class="product-desc">Perfecto para guerreros de élite. Figura articulada con detalles mecanizados intrincados.</p>
357
+
358
+ <div class="config-section">
359
+ <label class="config-label">Seleccionar Color</label>
360
+ <div class="color-options">
361
+ <label class="color-option">
362
+ <input type="radio" name="color1" value="blue" checked>
363
+ <div class="color-circle" style="--color-hex: #00f3ff; background: #00f3ff;"></div>
364
+ </label>
365
+ <label class="color-option">
366
+ <input type="radio" name="color1" value="red">
367
+ <div class="color-circle" style="--color-hex: #ff0055; background: #ff0055;"></div>
368
+ </label>
369
+ <label class="color-option">
370
+ <input type="radio" name="color1" value="green">
371
+ <div class="color-circle" style="--color-hex: #00ff66; background: #00ff66;"></div>
372
+ </label>
373
+ </div>
374
+
375
+ <label class="config-label">Seleccionar Tamaño</label>
376
+ <div class="size-options">
377
+ <button class="size-btn" onclick="selectSize(this)">28mm</button>
378
+ <button class="size-btn active" onclick="selectSize(this)">32mm</button>
379
+ <button class="size-btn" onclick="selectSize(this)">50mm</button>
380
+ </div>
381
+ </div>
382
+
383
+ <div class="card-footer">
384
+ <div class="price">24.99 €</div>
385
+ <button class="add-btn" onclick="addToCart('Cazador Estelar')">Añadir</button>
386
+ </div>
387
+ </div>
388
+ </article>
389
+
390
+ <!-- PRODUCTO 2 -->
391
+ <article class="product-card">
392
+ <div class="product-image-container">
393
+ <!-- Imagen Placeholder: Alien -->
394
+ <img src="https://images.unsplash.com/photo-1605806616949-1e87b487bc2a?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80" alt="Alien Predator">
395
+ </div>
396
+ <div class="product-details">
397
+ <h2 class="product-title">Xenomorfo Experto</h2>
398
+ <p class="product-desc">Miniatura escala 32mm tallada a mano. Acabado realista en resina de alta resistencia.</p>
399
+
400
+ <div class="config-section">
401
+ <label class="config-label">Seleccionar Color</label>
402
+ <div class="color-options">
403
+ <label class="color-option">
404
+ <input type="radio" name="color2" value="black">
405
+ <div class="color-circle" style="--color-hex: #333; background: #1a1a1a;"></div>
406
+ </label>
407
+ <label class="color-option">
408
+ <input type="radio" name="color2" value="purple" checked>
409
+ <div class="color-circle" style="--color-hex: #bc13fe; background: #bc13fe;"></div>
410
+ </label>
411
+ <label class="color-option">
412
+ <input type="radio" name="color2" value="gold">
413
+ <div class="color-circle" style="--color-hex: #ffd700; background: linear-gradient(135deg, #b8860b, #ffd700);"></div>
414
+ </label>
415
+ </div>
416
+
417
+ <label class="config-label">Seleccionar Tamaño</label>
418
+ <div class="size-options">
419
+ <button class="size-btn active" onclick="selectSize(this)">32mm</button>
420
+ <button class="size-btn" onclick="selectSize(this)">70mm</button>
421
+ </div>
422
+ </div>
423
+
424
+ <div class="card-footer">
425
+ <div class="price">32.50 €</div>
426
+ <button class="add-btn" onclick="addToCart('Xenomorfo Experto')">Añadir</button>
427
+ </div>
428
+ </div>
429
+ </article>
430
+
431
+ <!-- PRODUCTO 3 -->
432
+ <article class="product-card">
433
+ <div class="product-image-container">
434
+ <span class="badge">Nuevo</span>
435
+ <!-- Imagen Placeholder: Mech -->
436
+ <img src="https://images.unsplash.com/photo-1535378433864-48cf10419c5c?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80" alt="Mech Pilot">
437
+ </div>
438
+ <div class="product-details">
439
+ <h2 class="product-title">Piloto de Mech</h2>
440
+ <p class="product-desc"> Incluye pilote y mecha desmontable. Ideal para batallas de ciencia ficción.</p>
441
+
442
+ <div class="config-section">
443
+ <label class="config-label">Seleccionar Color</label>
444
+ <div class="color-options">
445
+ <label class="color-option">
446
+ <input type="radio" name="color3" value="orange" checked>
447
+ <div class="color-circle" style="--color-hex: #ff9900; background: #ff9900;"></div>
448
+ </label>
449
+ <label class="color-option">
450
+ <input type="radio" name="color3" value="grey">
451
+ <div class="color-circle" style="--color-hex: #a0a0a0; background: #a0a0a0;"></div>
452
+ </label>
453
+ </div>
454
+
455
+ <label class="config-label">Seleccionar Tamaño</label>
456
+ <div class="size-options">
457
+ <button class="size-btn" onclick="selectSize(this)">28mm</button>
458
+ <button class="size-btn" onclick="selectSize(this)">32mm</button>
459
+ </div>
460
+ </div>
461
+
462
+ <div class="card-footer">
463
+ <div class="price">19.99 €</div>
464
+ <button class="add-btn" onclick="addToCart('Piloto de Mech')">Añadir</button>
465
+ </div>
466
+ </div>
467
+ </article>
468
+
469
+ </main>
470
+
471
+ <script>
472
+ // --- GENERADOR DE ESTRELLAS ---
473
+ function createStars() {
474
+ const container = document.getElementById('star-container');
475
+ const starCount = 100;
476
+
477
+ for (let i = 0; i < starCount; i++) {
478
+ const star = document.createElement('div');
479
+ star.classList.add('star');
480
+
481
+ // Posición aleatoria
482
+ const x = Math.random() * 100;
483
+ const y = Math.random() * 100;
484
+
485
+ // Tamaño aleatorio
486
+ const size = Math.random() * 2 + 1; // Entre 1px y 3px
487
+
488
+ // Duración de parpadeo aleatoria
489
+ const duration = Math.random() * 3 + 2; // Entre 2s y 5s
490
+
491
+ star.style.left = `${x}%`;
492
+ star.style.top = `${y}%`;
493
+ star.style.width = `${size}px`;
494
+ star.style.height = `${size}px`;
495
+ star.style.setProperty('--duration', `${duration}s`);
496
+
497
+ container.appendChild(star);
498
+ }
499
+ }
500
+
501
+ // --- LÓGICA DE INTERFAZ ---
502
+
503
+ // Manejo de botones de tamaño
504
+ function selectSize(btn) {
505
+ // Encontrar el grupo de botones hermano (parent) y quitar clase active a todos
506
+ const siblings = btn.parentElement.querySelectorAll('.size-btn');
507
+ siblings.forEach(sib => sib.classList.remove('active'));
508
+
509
+ // Añadir clase active al botón cliqueado
510
+ btn.classList.add('active');
511
+ }
512
+
513
+ // Simulación de añadir al carrito
514
+ function addToCart(productName) {
515
+ // Obtener color seleccionado
516
+ // Esta es una lógica visual simple para el mockup
517
+ const colorInputs = document.querySelectorAll('input[type="radio"]:checked');
518
+
519
+ // Alertas simuladas (solo para el boceto)
520
+ // En una app real, esto iría a un array de objetos
521
+
522
+ console.log(`Producto: ${productName} añadido.`);
523
+
524
+ // Feedback visual simple
525
+ const btn = event.target;
526
+ const originalText = btn.innerText;
527
+ btn.innerText = "¡Añadido!";
528
+ btn.style.background = "#00ff66";
529
+ btn.style.color = "#000";
530
+
531
+ setTimeout(() => {
532
+ btn.innerText = originalText;
533
+ btn.style.background = "";
534
+ btn.style.color = "";
535
+ }, 1500);
536
+ }
537
+
538
+ // Inicialización
539
+ window.onload = createStars;
540
+ </script>
541
+ </body>
542
+ </html>