Hugging Face's logo

Spaces:
Backtun
/
pixel-dungeon
Running

App Files Community
Backtun commited on
Commit
7de0b46
·
verified ·
1 Parent(s): 2611d73

Agregar un margin-top de 20 px - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +533 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Pixel Dungeon
3
- emoji: 🔥
4
- colorFrom: purple
5
- colorTo: pink
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: pixel-dungeon
3
+ emoji: 🐳
4
+ colorFrom: pink
5
+ colorTo: yellow
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,533 @@
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>Pixel Dungeon - Un juego de exploración épica</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&family=Silkscreen:wght@400;700&display=swap" rel="stylesheet">
10
+ <script>
11
+ tailwind.config = {
12
+ theme: {
13
+ extend: {
14
+ colors: {
15
+ dungeon: '#3d1e6d',
16
+ pixel: '#e73c7e',
17
+ pixelLight: '#ff8cc6',
18
+ neon: '#03e9f4',
19
+ dungeonDark: '#241147'
20
+ },
21
+ fontFamily: {
22
+ 'retro': ['"Press Start 2P"', 'cursive'],
23
+ 'pixel': ['Silkscreen', 'sans-serif']
24
+ },
25
+ animation: {
26
+ 'pixel-pulse': 'pixelPulse 2s ease-in-out infinite',
27
+ 'float': 'float 6s ease-in-out infinite',
28
+ 'pixel-bounce': 'pixelBounce 0.4s ease infinite'
29
+ },
30
+ keyframes: {
31
+ pixelPulse: {
32
+ '0%, 100%': { 'box-shadow': '0 0 8px rgba(231, 60, 126, 0.8)' },
33
+ '50%': { 'box-shadow': '0 0 16px rgba(231, 60, 126, 0.8)' }
34
+ },
35
+ float: {
36
+ '0%, 100%': { transform: 'translateY(0)' },
37
+ '50%': { transform: 'translateY(-15px)' }
38
+ },
39
+ pixelBounce: {
40
+ '0%, 100%': { transform: 'translateY(0)' },
41
+ '50%': { transform: 'translateY(-15px)' }
42
+ }
43
+ }
44
+ }
45
+ }
46
+ }
47
+ </script>
48
+ <style>
49
+ body {
50
+ background-color: #0c0b14;
51
+ background-image:
52
+ radial-gradient(circle at 10% 20%, rgba(58, 12, 163, 0.2) 0%, transparent 20%),
53
+ radial-gradient(circle at 90% 80%, rgba(231, 60, 126, 0.15) 0%, transparent 20%);
54
+ color: #f0f0f0;
55
+ overflow-x: hidden;
56
+ }
57
+
58
+ .pixel-text {
59
+ color: #ff8cc6;
60
+ text-shadow:
61
+ 0 0 5px rgba(231, 60, 126, 0.8),
62
+ 0 0 15px rgba(231, 60, 126, 0.6),
63
+ 0 0 25px rgba(231, 60, 126, 0.4);
64
+ }
65
+
66
+ .pixel-border {
67
+ border: 4px solid #e73c7e;
68
+ box-shadow:
69
+ 0 0 10px rgba(231, 60, 126, 0.6),
70
+ 0 0 20px rgba(231, 60, 126, 0.4),
71
+ inset 0 0 10px rgba(231, 60, 126, 0.3);
72
+ }
73
+
74
+ .retro-border {
75
+ border: 4px double #03e9f4;
76
+ box-shadow:
77
+ 0 0 12px rgba(3, 233, 244, 0.7),
78
+ inset 0 0 8px rgba(3, 233, 244, 0.4);
79
+ }
80
+
81
+ .pixel-btn {
82
+ background: linear-gradient(45deg, #e73c7e, #3d1e6d);
83
+ position: relative;
84
+ overflow: hidden;
85
+ transition: all 0.3s;
86
+ letter-spacing: 1px;
87
+ }
88
+
89
+ .pixel-btn:hover {
90
+ transform: translateY(-3px);
91
+ box-shadow: 0 10px 20px rgba(231, 60, 126, 0.3);
92
+ }
93
+
94
+ .pixel-btn:active {
95
+ transform: translateY(1px);
96
+ }
97
+
98
+ .pixel-btn::after {
99
+ content: '';
100
+ position: absolute;
101
+ top: -50%;
102
+ left: -60%;
103
+ width: 20px;
104
+ height: 200%;
105
+ background: rgba(255, 255, 255, 0.3);
106
+ transform: rotate(25deg);
107
+ transition: all 0.7s;
108
+ }
109
+
110
+ .pixel-btn:hover::after {
111
+ left: 130%;
112
+ }
113
+
114
+ .grid-pattern {
115
+ background:
116
+ linear-gradient(to right, rgba(61, 30, 109, 0.1) 1px, transparent 1px),
117
+ linear-gradient(to bottom, rgba(61, 30, 109, 0.1) 1px, transparent 1px);
118
+ background-size: 20px 20px;
119
+ }
120
+
121
+ .platform-card {
122
+ transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
123
+ }
124
+
125
+ .platform-card:hover {
126
+ transform: translateY(-8px);
127
+ box-shadow: 0 15px 25px rgba(3, 233, 244, 0.4);
128
+ }
129
+
130
+ .platform-card:nth-child(1):hover { background-color: #3d1e6d; }
131
+ .platform-card:nth-child(2):hover { background-color: #3a6d1e; }
132
+ .platform-card:nth-child(3):hover { background-color: #d65b15; }
133
+ .platform-card:nth-child(4):hover { background-color: #1e6d6d; }
134
+
135
+ .pixel-8bit {
136
+ border-width: 0;
137
+ position: relative;
138
+ }
139
+
140
+ .pixel-8bit:after {
141
+ content: "";
142
+ position: absolute;
143
+ width: 100%;
144
+ height: 100%;
145
+ top: 4px;
146
+ left: 4px;
147
+ background-color: #3d1e6d;
148
+ z-index: -1;
149
+ transition: all 0.3s ease;
150
+ }
151
+
152
+ .pixel-8bit:hover:after {
153
+ top: 2px;
154
+ left: 2px;
155
+ }
156
+
157
+ .quote-start, .quote-end {
158
+ font-size: 4rem;
159
+ line-height: 1;
160
+ display: block;
161
+ color: #e73c7e;
162
+ }
163
+
164
+ .quote-start {
165
+ margin-top: -1.5rem;
166
+ margin-bottom: -1rem;
167
+ }
168
+
169
+ .quote-end {
170
+ margin-top: -1rem;
171
+ margin-bottom: -1.5rem;
172
+ text-align: right;
173
+ }
174
+
175
+ .pixel-scanline {
176
+ position: relative;
177
+ overflow: hidden;
178
+ }
179
+
180
+ .pixel-scanline::before {
181
+ content: '';
182
+ position: absolute;
183
+ top: 0;
184
+ left: 0;
185
+ width: 100%;
186
+ height: 100%;
187
+ background: linear-gradient(
188
+ to bottom,
189
+ rgba(255, 255, 255, 0) 0%,
190
+ rgba(255, 255, 255, 0.06) 10%,
191
+ rgba(255, 255, 255, 0) 100%
192
+ );
193
+ animation: scan 8s linear infinite;
194
+ }
195
+
196
+ @keyframes scan {
197
+ 0% { top: -100%; }
198
+ 100% { top: 100%; }
199
+ }
200
+
201
+ @media (max-width: 768px) {
202
+ .testimonial-card {
203
+ max-width: 90%;
204
+ }
205
+
206
+ .countdown-item {
207
+ min-width: 4.5rem;
208
+ }
209
+ }
210
+ </style>
211
+ </head>
212
+ <body class="font-pixel text-gray-200">
213
+ <!-- Hero Section -->
214
+ <section class="min-h-screen flex flex-col justify-center items-center relative overflow-hidden">
215
+ <div class="absolute inset-0 bg-gradient-to-b from-dungeonDark/70 to-black/80 z-0"></div>
216
+ <div class="absolute inset-0 z-0">
217
+ <div class="grid-pattern w-full h-full"></div>
218
+ </div>
219
+
220
+ <div class="z-10 container mx-auto px-4 flex flex-col items-center">
221
+ <h1 class="text-5xl md:text-7xl lg:text-8xl font-retro mb-4 text-center pixel-text">
222
+ PIXEL DUNGEON
223
+ </h1>
224
+ <p class="text-xl md:text-2xl mb-10 text-center max-w-3xl">
225
+ ¡Embárcate en una aventura de píxeles épica donde cada nivel es generado al azar y ningún juego es igual!
226
+ </p>
227
+ <div class="w-full max-w-4xl pixel-border mb-12 p-1 bg-black/30 relative rounded-lg overflow-hidden pixel-scanline">
228
+ <div class="w-full aspect-video">
229
+ <iframe class="w-full h-full" src="https://www.youtube.com/embed/gFiv4Zwfjws?si=FB9dOVfG3ebzJlUN" title="Trailer de Pixel Dungeon" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
230
+ </div>
231
+ </div>
232
+ <div class="text-center">
233
+ <a href="#" class="pixel-btn py-4 px-8 rounded-none font-bold text-xl tracking-wide inline-block pixel-8bit font-retro">
234
+ <span class="relative z-10">¡RESERVALO AHORA!</span>
235
+ </a>
236
+ </div>
237
+ </div>
238
+
239
+ <!-- Floating pixel art elements -->
240
+ <div class="absolute top-1/4 left-10 w-6 h-6 rounded-sm bg-pixelLight animation-pixel-bounce" style="animation-delay: 0s"></div>
241
+ <div class="absolute top-1/3 right-20 w-6 h-6 rounded-sm bg-neon animation-pixel-bounce" style="animation-delay: 0.2s"></div>
242
+ <div class="absolute bottom-1/4 left-1/4 w-8 h-8 rounded-sm bg-pixelLight animation-pixel-bounce" style="animation-delay: 0.4s"></div>
243
+ <div class="absolute bottom-1/3 right-1/3 w-4 h-4 rounded-sm bg-neon animation-pixel-bounce" style="animation-delay: 0.6s"></div>
244
+ <div class="absolute bottom-20 left-10 w-6 h-6 rounded-sm bg-pixelLight animation-pixel-bounce" style="animation-delay: 0.8s"></div>
245
+ </section>
246
+
247
+ <!-- Countdown Section -->
248
+ <section class="py-16 bg-gradient-to-b from-dungeonDark/70 to-black/80 relative overflow-hidden">
249
+ <div class="container mx-auto px-4 text-center relative z-10">
250
+ <h2 class="text-3xl md:text-4xl font-retro mb-12 pixel-text">
251
+ LANZAMIENTO INMINENTE
252
+ </h2>
253
+ <div class="flex justify-center items-center gap-4 md:gap-8 flex-wrap">
254
+ <div class="countdown-item">
255
+ <div id="days" class="text-4xl md:text-6xl font-bold font-retro bg-dungeonDark/80 pixel-border py-6 px-4 md:px-8 rounded-lg min-w-[5rem]">00</div>
256
+ <div class="mt-2 text-lg">DÍAS</div>
257
+ </div>
258
+ <div class="countdown-item">
259
+ <div id="hours" class="text-4xl md:text-6xl font-bold font-retro bg-dungeonDark/80 pixel-border py-6 px-4 md:px-8 rounded-lg min-w-[5rem]">00</div>
260
+ <div class="mt-2 text-lg">HORAS</div>
261
+ </div>
262
+ <div class="countdown-item">
263
+ <div id="minutes" class="text-4xl md:text-6xl font-bold font-retro bg-dungeonDark/80 pixel-border py-6 px-4 md:px-8 rounded-lg min-w-[5rem]">00</div>
264
+ <div class="mt-2 text-lg">MINUTOS</div>
265
+ </div>
266
+ <div class="countdown-item">
267
+ <div id="seconds" class="text-4xl md:text-6xl font-bold font-retro bg-dungeonDark/80 pixel-border py-6 px-4 md:px-8 rounded-lg min-w-[5rem]">00</div>
268
+ <div class="mt-2 text-lg">SEGUNDOS</div>
269
+ </div>
270
+ </div>
271
+ </div>
272
+ </section>
273
+
274
+ <!-- Pricing Comparison Section -->
275
+ <section class="py-16 relative overflow-hidden bg-gradient-to-b from-black/80 to-dungeonDark/90">
276
+ <div class="absolute inset-0 grid-pattern"></div>
277
+ <div class="container mx-auto px-4 relative z-10">
278
+ <h2 class="text-3xl md:text-4xl font-retro mb-8 text-center pixel-text">
279
+ ¿DÓNDE COMPRAR?
280
+ </h2>
281
+ <p class="text-center max-w-2xl mx-auto mb-12">
282
+ Pixel Dungeon estará disponible en todas las plataformas principales con distintos contenidos adicionales
283
+ </p>
284
+
285
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
286
+ <!-- Steam Card -->
287
+ <div class="platform-card retro-border bg-dungeonDark/50 p-6 rounded-xl text-center hover:bg-dungeonDark/90">
288
+ <div class="flex justify-center mb-4">
289
+ <i class="fab fa-steam text-5xl text-gray-200"></i>
290
+ </div>
291
+ <h3 class="text-2xl font-bold mb-2">STEAM</h3>
292
+ <p class="text-pixelLight font-bold text-xl mb-4">€14.99</p>
293
+ <ul class="space-y-2 mb-6">
294
+ <li class="flex items-center">
295
+ <i class="fas fa-check-circle text-neon mr-2"></i>
296
+ Acceso anticipado a beta
297
+ </li>
298
+ <li class="flex items-center">
299
+ <i class="fas fa-check-circle text-neon mr-2"></i>
300
+ Steam Logros
301
+ </li>
302
+ <li class="flex items-center">
303
+ <i class="fas fa-check-circle text-neon mr-2"></i>
304
+ Workshop integrado
305
+ </li>
306
+ <li class="flex items-center">
307
+ <i class="fas fa-check-circle text-neon mr-2"></i>
308
+ Contenido exclusivo
309
+ </li>
310
+ </ul>
311
+ <button class="pixel-btn w-full py-3 px-4 rounded-none font-bold">Comprar en Steam</button>
312
+ </div>
313
+
314
+ <!-- Switch Card -->
315
+ <div class="platform-card retro-border bg-dungeonDark/50 p-6 rounded-xl text-center hover:bg-dungeonDark/90">
316
+ <div class="flex justify-center mb-4">
317
+ <i class="fab fa-nintendo-switch text-5xl text-red-300"></i>
318
+ </div>
319
+ <h3 class="text-2xl font-bold mb-2">NINTENDO SWITCH</h3>
320
+ <p class="text-pixelLight font-bold text-xl mb-4">€17.99</p>
321
+ <ul class="space-y-2 mb-6">
322
+ <li class="flex items-center">
323
+ <i class="fas fa-check-circle text-neon mr-2"></i>
324
+ Modo portátil y TV
325
+ </li>
326
+ <li class="flex items-center">
327
+ <i class="fas fa-check-circle text-neon mr-2"></i>
328
+ Controles HD Rumble
329
+ </li>
330
+ <li class="flex items-center">
331
+ <i class="fas fa-check-circle text-neon mr-2"></i>
332
+ Cross-save con otros dispositivos
333
+ </li>
334
+ </ul>
335
+ <button class="pixel-btn w-full py-3 px-4 rounded-none font-bold">Comprar en Nintendo</button>
336
+ </div>
337
+
338
+ <!-- PS5 Card -->
339
+ <div class="platform-card retro-border bg-dungeonDark/50 p-6 rounded-xl text-center hover:bg-dungeonDark/90">
340
+ <div class="flex justify-center mb-4">
341
+ <i class="fab fa-playstation text-5xl text-blue-400"></i>
342
+ </div>
343
+ <h3 class="text-2xl font-bold mb-2">PLAYSTATION 5</h3>
344
+ <p class="text-pixelLight font-bold text-xl mb-4">€16.99</p>
345
+ <ul class="space-y-2 mb-6">
346
+ <li class="flex items-center">
347
+ <i class="fas fa-check-circle text-neon mr-2"></i>
348
+ Compatible con DualSense
349
+ </li>
350
+ <li class="flex items-center">
351
+ <i class="fas fa-check-circle text-neon mr-2"></i>
352
+ Gráficos mejorados
353
+ </li>
354
+ <li class="flex items-center">
355
+ <i class="fas fa-check-circle text-neon mr-2"></i>
356
+ Tiempos de carga rápidos
357
+ </li>
358
+ </ul>
359
+ <button class="pixel-btn w-full py-3 px-4 rounded-none font-bold">Comprar en PlayStation</button>
360
+ </div>
361
+
362
+ <!-- Xbox Card -->
363
+ <div class="platform-card retro-border bg-dungeonDark/50 p-6 rounded-xl text-center hover:bg-dungeonDark/90">
364
+ <div class="flex justify-center mb-4">
365
+ <i class="fab fa-xbox text-5xl text-green-400"></i>
366
+ </div>
367
+ <h3 class="text-2xl font-bold mb-2">XBOX SERIES X/S</h3>
368
+ <p class="text-pixelLight font-bold text-xl mb-4">€16.99</p>
369
+ <ul class="space-y-2 mb-6">
370
+ <li class="flex items-center">
371
+ <i class="fas fa-check-circle text-neon mr-2"></i>
372
+ Smart Delivery
373
+ </li>
374
+ <li class="flex items-center">
375
+ <i class="fas fa-check-circle text-neon mr-2"></i>
376
+ Compatible con XCloud
377
+ </li>
378
+ <li class="flex items-center">
379
+ <i class="fas fa-check-circle text-neon mr-2"></i>
380
+ Contenido adicional
381
+ </li>
382
+ </ul>
383
+ <button class="pixel-btn w-full py-3 px-4 rounded-none font-bold">Comprar en Xbox</button>
384
+ </div>
385
+ </div>
386
+ </div>
387
+ </section>
388
+
389
+ <!-- Testimonials Section -->
390
+ <section class="py-20 relative overflow-hidden">
391
+ <div class="absolute inset-0 bg-gradient-to-r from-dungeonDark/60 to-black/80 z-0"></div>
392
+ <div class="container mx-auto px-4 relative z-10">
393
+ <h2 class="text-3xl md:text-4xl font-retro mb-4 text-center pixel-text">
394
+ LO QUE DICE LA PRENSA
395
+ </h2>
396
+ <p class="text-center max-w-2xl mx-auto mb-12">
397
+ Descubre por qué los principales críticos ya están hablando de Pixel Dungeon
398
+ </p>
399
+
400
+ <div class="flex flex-wrap justify-center gap-8">
401
+ <!-- Testimonial 1 -->
402
+ <div class="testimonial-card float bg-dungeonDark/70 retro-border p-6 rounded-xl max-w-xs">
403
+ <div class="flex items-center mb-4">
404
+ <div class="w-12 h-12 bg-pixelLight rounded-full mr-4"></div>
405
+ <div>
406
+ <h4 class="font-bold">GAMER MAGAZINE</h4>
407
+ <div class="flex text-yellow-300">
408
+ <i class="fas fa-star"></i>
409
+ <i class="fas fa-star"></i>
410
+ <i class="fas fa-star"></i>
411
+ <i class="fas fa-star"></i>
412
+ <i class="fas fa-star"></i>
413
+ </div>
414
+ </div>
415
+ </div>
416
+ <div class="relative">
417
+ <span class="quote-start">"</span>
418
+ <p class="text-sm italic">Pixel Dungeon reinventa el género roguelike con su generación procedimental impresionante y combates fluidos que enganchan desde el primer minuto.</p>
419
+ <span class="quote-end">"</span>
420
+ </div>
421
+ </div>
422
+
423
+ <!-- Testimonial 2 -->
424
+ <div class="testimonial-card float bg-dungeonDark/70 retro-border p-6 rounded-xl max-w-xs" style="animation-delay: 1s;">
425
+ <div class="flex items-center mb-4">
426
+ <div class="w-12 h-12 bg-neon rounded-full mr-4"></div>
427
+ <div>
428
+ <h4 class="font-bold">INDIE GAME HUB</h4>
429
+ <div class="flex text-yellow-300">
430
+ <i class="fas fa-star"></i>
431
+ <i class="fas fa-star"></i>
432
+ <i class="fas fa-star"></i>
433
+ <i class="fas fa-star"></i>
434
+ <i class="fas fa-star-half-alt"></i>
435
+ </div>
436
+ </div>
437
+ </div>
438
+ <div class="relative">
439
+ <span class="quote-start">"</span>
440
+ <p class="text-sm italic">La variedad de enemigos y objetos crea experiencias completamente únicas en cada partida. Un juego que todo aficionado a los roguelikes debe probar.</p>
441
+ <span class="quote-end">"</span>
442
+ </div>
443
+ </div>
444
+
445
+ <!-- Testimonial 3 -->
446
+ <div class="testimonial-card float bg-dungeonDark/70 retro-border p-6 rounded-xl max-w-xs" style="animation-delay: 2s;">
447
+ <div class="flex items-center mb-4">
448
+ <div class="w-12 h-12 bg-pixelLight rounded-full mr-4"></div>
449
+ <div>
450
+ <h4 class="font-bold">GAMING WEEKLY</h4>
451
+ <div class="flex text-yellow-300">
452
+ <i class="fas fa-star"></i>
453
+ <i class="fas fa-star"></i>
454
+ <i class="fas fa-star"></i>
455
+ <i class="fas fa-star"></i>
456
+ <i class="fas fa-star"></i>
457
+ </div>
458
+ </div>
459
+ </div>
460
+ <div class="relative">
461
+ <span class="quote-start">"</span>
462
+ <p class="text-sm italic">Pixel Dungeon logra un equilibrio perfecto entre accesibilidad y profundidad. Sus niveles generados aleatoriamente garantizan horas infinitas de diversión.</p>
463
+ <span class="quote-end">"</span>
464
+ </div>
465
+ </div>
466
+ </div>
467
+ </div>
468
+ </section>
469
+
470
+ <!-- Footer -->
471
+ <footer class="py-10 bg-black border-t-2 border-pixelLight/20 text-center">
472
+ <div class="container mx-auto px-4">
473
+ <div class="flex justify-center space-x-6 mb-6">
474
+ <a href="#" class="text-gray-400 hover:text-pixelLight text-xl">
475
+ <i class="fab fa-twitter"></i>
476
+ </a>
477
+ <a href="#" class="text-gray-400 hover:text-pixelLight text-xl">
478
+ <i class="fab fa-facebook-f"></i>
479
+ </a>
480
+ <a href="#" class="text-gray-400 hover:text-pixelLight text-xl">
481
+ <i class="fab fa-discord"></i>
482
+ </a>
483
+ <a href="#" class="text-gray-400 hover:text-pixelLight text-xl">
484
+ <i class="fab fa-youtube"></i>
485
+ </a>
486
+ </div>
487
+ <p class="text-gray-500">&copy; 2023 Pixel Dungeon Studios. Todos los derechos reservados.</p>
488
+ </div>
489
+ </footer>
490
+
491
+ <!-- Countdown Script -->
492
+ <script>
493
+ // Set the date we're counting down to (next month from now)
494
+ const countDownDate = new Date();
495
+ countDownDate.setMonth(countDownDate.getMonth() + 1);
496
+
497
+ // Update the countdown every 1 second
498
+ const x = setInterval(function() {
499
+ // Get today's date and time
500
+ const now = new Date().getTime();
501
+
502
+ // Find the distance between now and the countdown date
503
+ const distance = countDownDate - now;
504
+
505
+ // Time calculations for days, hours, minutes and seconds
506
+ const days = Math.floor(distance / (1000 * 60 * 60 * 24));
507
+ const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
508
+ const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
509
+ const seconds = Math.floor((distance % (1000 * 60)) / 1000);
510
+
511
+ // Output the result in the corresponding elements
512
+ document.getElementById("days").innerHTML = days.toString().padStart(2, '0');
513
+ document.getElementById("hours").innerHTML = hours.toString().padStart(2, '0');
514
+ document.getElementById("minutes").innerHTML = minutes.toString().padStart(2, '0');
515
+ document.getElementById("seconds").innerHTML = seconds.toString().padStart(2, '0');
516
+
517
+ // If the countdown is finished, write some text
518
+ if (distance < 0) {
519
+ clearInterval(x);
520
+ document.querySelectorAll('.countdown-item > div:first-child').forEach(el => {
521
+ el.innerHTML = "¡AHORA!";
522
+ });
523
+ }
524
+ }, 1000);
525
+
526
+ // Floating testimonials
527
+ const testimonials = document.querySelectorAll('.testimonial-card');
528
+ testimonials.forEach((card, index) => {
529
+ card.style.animationDelay = `${index * 0.5}s`;
530
+ });
531
+ </script>
532
+ <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=Backtun/pixel-dungeon" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
533
+ </html>