Spaces:
Running
Running
| <html lang="es"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Pixel Dungeon - Un juego de exploración épica</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&family=Silkscreen:wght@400;700&display=swap" rel="stylesheet"> | |
| <script> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| colors: { | |
| dungeon: '#3d1e6d', | |
| pixel: '#e73c7e', | |
| pixelLight: '#ff8cc6', | |
| neon: '#03e9f4', | |
| dungeonDark: '#241147' | |
| }, | |
| fontFamily: { | |
| 'retro': ['"Press Start 2P"', 'cursive'], | |
| 'pixel': ['Silkscreen', 'sans-serif'] | |
| }, | |
| animation: { | |
| 'pixel-pulse': 'pixelPulse 2s ease-in-out infinite', | |
| 'float': 'float 6s ease-in-out infinite', | |
| 'pixel-bounce': 'pixelBounce 0.4s ease infinite' | |
| }, | |
| keyframes: { | |
| pixelPulse: { | |
| '0%, 100%': { 'box-shadow': '0 0 8px rgba(231, 60, 126, 0.8)' }, | |
| '50%': { 'box-shadow': '0 0 16px rgba(231, 60, 126, 0.8)' } | |
| }, | |
| float: { | |
| '0%, 100%': { transform: 'translateY(0)' }, | |
| '50%': { transform: 'translateY(-15px)' } | |
| }, | |
| pixelBounce: { | |
| '0%, 100%': { transform: 'translateY(0)' }, | |
| '50%': { transform: 'translateY(-15px)' } | |
| } | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| <style> | |
| body { | |
| background-color: #0c0b14; | |
| background-image: | |
| radial-gradient(circle at 10% 20%, rgba(58, 12, 163, 0.2) 0%, transparent 20%), | |
| radial-gradient(circle at 90% 80%, rgba(231, 60, 126, 0.15) 0%, transparent 20%); | |
| color: #f0f0f0; | |
| overflow-x: hidden; | |
| } | |
| .pixel-text { | |
| color: #ff8cc6; | |
| text-shadow: | |
| 0 0 5px rgba(231, 60, 126, 0.8), | |
| 0 0 15px rgba(231, 60, 126, 0.6), | |
| 0 0 25px rgba(231, 60, 126, 0.4); | |
| } | |
| .pixel-border { | |
| border: 4px solid #e73c7e; | |
| box-shadow: | |
| 0 0 10px rgba(231, 60, 126, 0.6), | |
| 0 0 20px rgba(231, 60, 126, 0.4), | |
| inset 0 0 10px rgba(231, 60, 126, 0.3); | |
| } | |
| .retro-border { | |
| border: 4px double #03e9f4; | |
| box-shadow: | |
| 0 0 12px rgba(3, 233, 244, 0.7), | |
| inset 0 0 8px rgba(3, 233, 244, 0.4); | |
| } | |
| .pixel-btn { | |
| background: linear-gradient(45deg, #e73c7e, #3d1e6d); | |
| position: relative; | |
| overflow: hidden; | |
| transition: all 0.3s; | |
| letter-spacing: 1px; | |
| } | |
| .pixel-btn:hover { | |
| transform: translateY(-3px); | |
| box-shadow: 0 10px 20px rgba(231, 60, 126, 0.3); | |
| } | |
| .pixel-btn:active { | |
| transform: translateY(1px); | |
| } | |
| .pixel-btn::after { | |
| content: ''; | |
| position: absolute; | |
| top: -50%; | |
| left: -60%; | |
| width: 20px; | |
| height: 200%; | |
| background: rgba(255, 255, 255, 0.3); | |
| transform: rotate(25deg); | |
| transition: all 0.7s; | |
| } | |
| .pixel-btn:hover::after { | |
| left: 130%; | |
| } | |
| .grid-pattern { | |
| background: | |
| linear-gradient(to right, rgba(61, 30, 109, 0.1) 1px, transparent 1px), | |
| linear-gradient(to bottom, rgba(61, 30, 109, 0.1) 1px, transparent 1px); | |
| background-size: 20px 20px; | |
| } | |
| .platform-card { | |
| transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); | |
| } | |
| .platform-card:hover { | |
| transform: translateY(-8px); | |
| box-shadow: 0 15px 25px rgba(3, 233, 244, 0.4); | |
| } | |
| .platform-card:nth-child(1):hover { background-color: #3d1e6d; } | |
| .platform-card:nth-child(2):hover { background-color: #3a6d1e; } | |
| .platform-card:nth-child(3):hover { background-color: #d65b15; } | |
| .platform-card:nth-child(4):hover { background-color: #1e6d6d; } | |
| .pixel-8bit { | |
| border-width: 0; | |
| position: relative; | |
| } | |
| .pixel-8bit:after { | |
| content: ""; | |
| position: absolute; | |
| width: 100%; | |
| height: 100%; | |
| top: 4px; | |
| left: 4px; | |
| background-color: #3d1e6d; | |
| z-index: -1; | |
| transition: all 0.3s ease; | |
| } | |
| .pixel-8bit:hover:after { | |
| top: 2px; | |
| left: 2px; | |
| } | |
| .quote-start, .quote-end { | |
| font-size: 4rem; | |
| line-height: 1; | |
| display: block; | |
| color: #e73c7e; | |
| } | |
| .quote-start { | |
| margin-top: -1.5rem; | |
| margin-bottom: -1rem; | |
| } | |
| .quote-end { | |
| margin-top: -1rem; | |
| margin-bottom: -1.5rem; | |
| text-align: right; | |
| } | |
| .pixel-scanline { | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .pixel-scanline::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background: linear-gradient( | |
| to bottom, | |
| rgba(255, 255, 255, 0) 0%, | |
| rgba(255, 255, 255, 0.06) 10%, | |
| rgba(255, 255, 255, 0) 100% | |
| ); | |
| animation: scan 8s linear infinite; | |
| } | |
| @keyframes scan { | |
| 0% { top: -100%; } | |
| 100% { top: 100%; } | |
| } | |
| @media (max-width: 768px) { | |
| .testimonial-card { | |
| max-width: 90%; | |
| } | |
| .countdown-item { | |
| min-width: 4.5rem; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body class="font-pixel text-gray-200"> | |
| <!-- Hero Section --> | |
| <section class="min-h-screen flex flex-col justify-center items-center relative overflow-hidden"> | |
| <div class="absolute inset-0 bg-gradient-to-b from-dungeonDark/70 to-black/80 z-0"></div> | |
| <div class="absolute inset-0 z-0"> | |
| <div class="grid-pattern w-full h-full"></div> | |
| </div> | |
| <div class="z-10 container mx-auto px-4 flex flex-col items-center"> | |
| <h1 class="text-5xl md:text-7xl lg:text-8xl font-retro mb-4 mt-8 text-center pixel-text"> | |
| PIXEL DUNGEON | |
| </h1> | |
| <p class="text-xl md:text-2xl mb-10 text-center max-w-3xl"> | |
| ¡Embárcate en una aventura de píxeles épica donde cada nivel es generado al azar y ningún juego es igual! | |
| </p> | |
| <div class="w-full max-w-4xl pixel-border mb-12 p-1 bg-black/30 relative rounded-lg overflow-hidden pixel-scanline"> | |
| <div class="w-full aspect-video"> | |
| <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> | |
| </div> | |
| </div> | |
| <div class="text-center"> | |
| <a href="#" class="pixel-btn py-4 px-8 rounded-none font-bold text-xl tracking-wide inline-block pixel-8bit font-retro"> | |
| <span class="relative z-10">¡RESERVALO AHORA!</span> | |
| </a> | |
| </div> | |
| </div> | |
| <!-- Floating pixel art elements --> | |
| <div class="absolute top-1/4 left-10 w-6 h-6 rounded-sm bg-pixelLight animation-pixel-bounce" style="animation-delay: 0s"></div> | |
| <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> | |
| <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> | |
| <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> | |
| <div class="absolute bottom-20 left-10 w-6 h-6 rounded-sm bg-pixelLight animation-pixel-bounce" style="animation-delay: 0.8s"></div> | |
| </section> | |
| <!-- Countdown Section --> | |
| <section class="py-16 bg-gradient-to-b from-dungeonDark/70 to-black/80 relative overflow-hidden"> | |
| <div class="container mx-auto px-4 text-center relative z-10"> | |
| <h2 class="text-3xl md:text-4xl font-retro mb-12 pixel-text"> | |
| LANZAMIENTO INMINENTE | |
| </h2> | |
| <div class="flex justify-center items-center gap-4 md:gap-8 flex-wrap"> | |
| <div class="countdown-item"> | |
| <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> | |
| <div class="mt-2 text-lg">DÍAS</div> | |
| </div> | |
| <div class="countdown-item"> | |
| <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> | |
| <div class="mt-2 text-lg">HORAS</div> | |
| </div> | |
| <div class="countdown-item"> | |
| <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> | |
| <div class="mt-2 text-lg">MINUTOS</div> | |
| </div> | |
| <div class="countdown-item"> | |
| <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> | |
| <div class="mt-2 text-lg">SEGUNDOS</div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Pricing Comparison Section --> | |
| <section class="py-16 relative overflow-hidden bg-gradient-to-b from-black/80 to-dungeonDark/90"> | |
| <div class="absolute inset-0 grid-pattern"></div> | |
| <div class="container mx-auto px-4 relative z-10"> | |
| <h2 class="text-3xl md:text-4xl font-retro mb-8 text-center pixel-text"> | |
| ¿DÓNDE COMPRAR? | |
| </h2> | |
| <p class="text-center max-w-2xl mx-auto mb-12"> | |
| Pixel Dungeon estará disponible en todas las plataformas principales con distintos contenidos adicionales | |
| </p> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8"> | |
| <!-- Steam Card --> | |
| <div class="platform-card retro-border bg-dungeonDark/50 p-6 rounded-xl text-center hover:bg-dungeonDark/90"> | |
| <div class="flex justify-center mb-4"> | |
| <i class="fab fa-steam text-5xl text-gray-200"></i> | |
| </div> | |
| <h3 class="text-2xl font-bold mb-2">STEAM</h3> | |
| <p class="text-pixelLight font-bold text-xl mb-4">€14.99</p> | |
| <ul class="space-y-2 mb-6"> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check-circle text-neon mr-2"></i> | |
| Acceso anticipado a beta | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check-circle text-neon mr-2"></i> | |
| Steam Logros | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check-circle text-neon mr-2"></i> | |
| Workshop integrado | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check-circle text-neon mr-2"></i> | |
| Contenido exclusivo | |
| </li> | |
| </ul> | |
| <button class="pixel-btn w-full py-3 px-4 rounded-none font-bold">Comprar en Steam</button> | |
| </div> | |
| <!-- Switch Card --> | |
| <div class="platform-card retro-border bg-dungeonDark/50 p-6 rounded-xl text-center hover:bg-dungeonDark/90"> | |
| <div class="flex justify-center mb-4"> | |
| <i class="fab fa-nintendo-switch text-5xl text-red-300"></i> | |
| </div> | |
| <h3 class="text-2xl font-bold mb-2">NINTENDO SWITCH</h3> | |
| <p class="text-pixelLight font-bold text-xl mb-4">€17.99</p> | |
| <ul class="space-y-2 mb-6"> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check-circle text-neon mr-2"></i> | |
| Modo portátil y TV | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check-circle text-neon mr-2"></i> | |
| Controles HD Rumble | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check-circle text-neon mr-2"></i> | |
| Cross-save con otros dispositivos | |
| </li> | |
| </ul> | |
| <button class="pixel-btn w-full py-3 px-4 rounded-none font-bold">Comprar en Nintendo</button> | |
| </div> | |
| <!-- PS5 Card --> | |
| <div class="platform-card retro-border bg-dungeonDark/50 p-6 rounded-xl text-center hover:bg-dungeonDark/90"> | |
| <div class="flex justify-center mb-4"> | |
| <i class="fab fa-playstation text-5xl text-blue-400"></i> | |
| </div> | |
| <h3 class="text-2xl font-bold mb-2">PLAYSTATION 5</h3> | |
| <p class="text-pixelLight font-bold text-xl mb-4">€16.99</p> | |
| <ul class="space-y-2 mb-6"> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check-circle text-neon mr-2"></i> | |
| Compatible con DualSense | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check-circle text-neon mr-2"></i> | |
| Gráficos mejorados | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check-circle text-neon mr-2"></i> | |
| Tiempos de carga rápidos | |
| </li> | |
| </ul> | |
| <button class="pixel-btn w-full py-3 px-4 rounded-none font-bold">Comprar en PlayStation</button> | |
| </div> | |
| <!-- Xbox Card --> | |
| <div class="platform-card retro-border bg-dungeonDark/50 p-6 rounded-xl text-center hover:bg-dungeonDark/90"> | |
| <div class="flex justify-center mb-4"> | |
| <i class="fab fa-xbox text-5xl text-green-400"></i> | |
| </div> | |
| <h3 class="text-2xl font-bold mb-2">XBOX SERIES X/S</h3> | |
| <p class="text-pixelLight font-bold text-xl mb-4">€16.99</p> | |
| <ul class="space-y-2 mb-6"> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check-circle text-neon mr-2"></i> | |
| Smart Delivery | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check-circle text-neon mr-2"></i> | |
| Compatible con XCloud | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check-circle text-neon mr-2"></i> | |
| Contenido adicional | |
| </li> | |
| </ul> | |
| <button class="pixel-btn w-full py-3 px-4 rounded-none font-bold">Comprar en Xbox</button> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Testimonials Section --> | |
| <section class="py-20 relative overflow-hidden"> | |
| <div class="absolute inset-0 bg-gradient-to-r from-dungeonDark/60 to-black/80 z-0"></div> | |
| <div class="container mx-auto px-4 relative z-10"> | |
| <h2 class="text-3xl md:text-4xl font-retro mb-4 text-center pixel-text"> | |
| LO QUE DICE LA PRENSA | |
| </h2> | |
| <p class="text-center max-w-2xl mx-auto mb-12"> | |
| Descubre por qué los principales críticos ya están hablando de Pixel Dungeon | |
| </p> | |
| <div class="flex flex-wrap justify-center gap-8"> | |
| <!-- Testimonial 1 --> | |
| <div class="testimonial-card float bg-dungeonDark/70 retro-border p-6 rounded-xl max-w-xs"> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-12 h-12 bg-pixelLight rounded-full mr-4"></div> | |
| <div> | |
| <h4 class="font-bold">GAMER MAGAZINE</h4> | |
| <div class="flex text-yellow-300"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="relative"> | |
| <span class="quote-start">"</span> | |
| <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> | |
| <span class="quote-end">"</span> | |
| </div> | |
| </div> | |
| <!-- Testimonial 2 --> | |
| <div class="testimonial-card float bg-dungeonDark/70 retro-border p-6 rounded-xl max-w-xs" style="animation-delay: 1s;"> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-12 h-12 bg-neon rounded-full mr-4"></div> | |
| <div> | |
| <h4 class="font-bold">INDIE GAME HUB</h4> | |
| <div class="flex text-yellow-300"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star-half-alt"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="relative"> | |
| <span class="quote-start">"</span> | |
| <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> | |
| <span class="quote-end">"</span> | |
| </div> | |
| </div> | |
| <!-- Testimonial 3 --> | |
| <div class="testimonial-card float bg-dungeonDark/70 retro-border p-6 rounded-xl max-w-xs" style="animation-delay: 2s;"> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-12 h-12 bg-pixelLight rounded-full mr-4"></div> | |
| <div> | |
| <h4 class="font-bold">GAMING WEEKLY</h4> | |
| <div class="flex text-yellow-300"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="relative"> | |
| <span class="quote-start">"</span> | |
| <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> | |
| <span class="quote-end">"</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="py-10 bg-black border-t-2 border-pixelLight/20 text-center"> | |
| <div class="container mx-auto px-4"> | |
| <div class="flex justify-center space-x-6 mb-6"> | |
| <a href="#" class="text-gray-400 hover:text-pixelLight text-xl"> | |
| <i class="fab fa-twitter"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-pixelLight text-xl"> | |
| <i class="fab fa-facebook-f"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-pixelLight text-xl"> | |
| <i class="fab fa-discord"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-pixelLight text-xl"> | |
| <i class="fab fa-youtube"></i> | |
| </a> | |
| </div> | |
| <p class="text-gray-500">© 2023 Pixel Dungeon Studios. Todos los derechos reservados.</p> | |
| </div> | |
| </footer> | |
| <!-- Countdown Script --> | |
| <script> | |
| // Set the date we're counting down to (next month from now) | |
| const countDownDate = new Date(); | |
| countDownDate.setMonth(countDownDate.getMonth() + 1); | |
| // Update the countdown every 1 second | |
| const x = setInterval(function() { | |
| // Get today's date and time | |
| const now = new Date().getTime(); | |
| // Find the distance between now and the countdown date | |
| const distance = countDownDate - now; | |
| // Time calculations for days, hours, minutes and seconds | |
| const days = Math.floor(distance / (1000 * 60 * 60 * 24)); | |
| const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)); | |
| const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60)); | |
| const seconds = Math.floor((distance % (1000 * 60)) / 1000); | |
| // Output the result in the corresponding elements | |
| document.getElementById("days").innerHTML = days.toString().padStart(2, '0'); | |
| document.getElementById("hours").innerHTML = hours.toString().padStart(2, '0'); | |
| document.getElementById("minutes").innerHTML = minutes.toString().padStart(2, '0'); | |
| document.getElementById("seconds").innerHTML = seconds.toString().padStart(2, '0'); | |
| // If the countdown is finished, write some text | |
| if (distance < 0) { | |
| clearInterval(x); | |
| document.querySelectorAll('.countdown-item > div:first-child').forEach(el => { | |
| el.innerHTML = "¡AHORA!"; | |
| }); | |
| } | |
| }, 1000); | |
| // Floating testimonials | |
| const testimonials = document.querySelectorAll('.testimonial-card'); | |
| testimonials.forEach((card, index) => { | |
| card.style.animationDelay = `${index * 0.5}s`; | |
| }); | |
| </script> | |
| <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> | |
| </html> |