:quality(85)/https:%2F%2Fcdn.upit.com/m4jbe4bg09a5iv8od1ittl2y.png)
:quality(85)/https:%2F%2Fcdn.upit.com/50biikfso9gqfvi4rr3kxm2e.png)
:quality(85)/https:%2F%2Fcdn.upit.com/3hd2wb4rhf16rnqrbpv61bh6.png)
<!DOCTYPE html> <html lang="es"> <head> <meta charset="UTF-8"> <title>Ataque de Rol - Menú</title> <style> /* Estilos generales con estética de juego */ body { margin: 0; padding: 0; background-color: #1a1a1a; color: white; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; display: flex; justify-content: center; align-items: center; height: 100vh; overflow: hidden; } .container { text-align: center; } /* Pantallas */ .screen { display: none; } .active { display: block; } h1 { font-size: 4rem; color: #ff4500; text-shadow: 2px 2px #551a00; } /* Botones */ .btn { padding: 15px 40px; font-size: 1.5rem; background: #444; color: gold; border: 2px solid gold; cursor: pointer; transition: 0.3s; margin: 10px; } .btn:hover { background: gold; color: black; transform: scale(1.1); } /* Selección de Personajes */ .character-grid { display: flex; gap: 20px; margin-top: 20px; } .char-card { border: 1px solid #777; padding: 20px; background: #333; width: 150px; border-radius: 10px; } </style> </head> <body> <div id="menu-inicio" class="screen active"> <h1>ATAQUE DE ROL</h1> <button class="btn" onclick="mostrarSeleccion()">JUGAR</button> <br> <button class="btn" style="font-size: 1rem; border-color: #777; color: #777;">Opciones</button> </div> <div id="seleccion-personaje" class="screen"> <h2>Selecciona tu Héroe</h2> <div class="character-grid"> <div class="char-card"> <h3>Guerrero</h3> <p>⚔️ Gran fuerza</p> <button onclick="confirmar()">Elegir</button> </div> <div class="char-card"> <h3>Mago</h3> <p>🔮 Poder arcano</p> <button onclick="confirmar()">Elegir</button> </div> <div class="char-card"> <h3>Pícaro</h3> <p>🗡️ Sigilo puro</p> <button onclick="confirmar()">Elegir</button> </div> </div> <br> <button onclick="volverAlMenu()" style="color: white; background: none; border: none; cursor: pointer;">← Volver</button> </div> <script> // Función para cambiar de pantalla function mostrarSeleccion() { document.getElementById('menu-inicio').classList.remove('active'); document.getElementById('seleccion-personaje').classList.add('active'); } function volverAlMenu() { document.getElementById('seleccion-personaje').classList.remove('active'); document.getElementById('menu-inicio').classList.add('active'); } function confirmar() { const ok = confirm("¿Estás listo para entrar al Patio del Rey con este personaje?"); if (ok) { alert("¡Cargando el Patio del Rey...!"); // Aquí podrías usar: window.location.href = "juego.html"; } } </script> </body> </html>
