Isaac Aracena
109 lines
3.9 KiB
HTML
109 lines
3.9 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="es">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<title>GLM - Ruleta</title>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<!-- Estilos del juego -->
|
|
<link rel="stylesheet" href="style.css" />
|
|
</head>
|
|
<body>
|
|
<!-- Banners (se rellenan dinámicamente) -->
|
|
<div class="banner banner-1"></div>
|
|
<div class="banner banner-2"></div>
|
|
<div class="banner banner-3"></div>
|
|
<div class="banner banner-4"></div>
|
|
|
|
<!-- Contenido principal -->
|
|
<div class="content">
|
|
<h1></h1>
|
|
<div class="game">
|
|
<!-- Se asignan src dinámicamente -->
|
|
<img id="ruleta" alt="Ruleta" />
|
|
<img id="puntero" alt="Puntero" />
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Botón de pantalla completa (icono dinámico) -->
|
|
<div class="fullscreen-btn" id="fullscreen-btn"></div>
|
|
|
|
<!-- Mensaje para orientación vertical -->
|
|
<div class="landscape-message">
|
|
Por favor, gira tu dispositivo para ver el contenido en horizontal.
|
|
</div>
|
|
|
|
<!-- Modal de confirmación -->
|
|
<div id="confirm-modal" class="modal">
|
|
<div class="modal-content">
|
|
<p>¿Deseas participar en la promoción?</p>
|
|
<div class="modal-buttons">
|
|
<button id="confirm-yes">Sí</button>
|
|
<button id="confirm-no">No</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Modal de agradecimiento -->
|
|
<div id="thank-you-modal" class="popup-modal" style="display: none;">
|
|
<div class="popup-content">
|
|
<h2 id="thank-you-message"></h2>
|
|
<p id="thank-you-details"></p>
|
|
<button id="redirect-button">Cerrar</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Confeti -->
|
|
<script src="https://cdn.jsdelivr.net/npm/canvas-confetti@1.5.1/dist/confetti.browser.min.js"></script>
|
|
|
|
<!-- Cargar imágenes/estilos por ruleta desde la API -->
|
|
<script>
|
|
(function () {
|
|
const params = new URLSearchParams(window.location.search);
|
|
const ruletaId = params.get("ruleta_id") || 1;
|
|
|
|
fetch(`api/ruleta_config.php?ruleta_id=${ruletaId}`)
|
|
.then(r => r.json())
|
|
.then(data => {
|
|
// Ruleta & Puntero
|
|
const imgRuleta = document.getElementById("ruleta");
|
|
const imgPuntero = document.getElementById("puntero");
|
|
imgRuleta.src = data.imagen_ruleta || "img/ruleta.png";
|
|
imgPuntero.src = data.imagen_puntero || "img/puntero.png";
|
|
|
|
// Banners
|
|
if (data.banner_1) document.querySelector(".banner-1").style.backgroundImage = `url("${data.banner_1}")`;
|
|
if (data.banner_2) document.querySelector(".banner-2").style.backgroundImage = `url("${data.banner_2}")`;
|
|
if (data.banner_3) document.querySelector(".banner-3").style.backgroundImage = `url("${data.banner_3}")`;
|
|
if (data.banner_4) document.querySelector(".banner-4").style.backgroundImage = `url("${data.banner_4}")`;
|
|
|
|
// Background de la página
|
|
if (data.background_image) {
|
|
document.body.style.backgroundImage = `url("${data.background_image}")`;
|
|
document.body.style.backgroundSize = "cover";
|
|
document.body.style.backgroundRepeat = "no-repeat";
|
|
document.body.style.backgroundPosition= "center center";
|
|
}
|
|
|
|
// Icono del botón Fullscreen
|
|
if (data.fullscreen_icon) {
|
|
const fs = document.getElementById("fullscreen-btn");
|
|
fs.style.backgroundImage = `url("${data.fullscreen_icon}")`;
|
|
fs.style.backgroundRepeat = "no-repeat";
|
|
fs.style.backgroundSize = "contain";
|
|
fs.style.backgroundPosition= "center";
|
|
}
|
|
})
|
|
.catch(err => {
|
|
console.error("Error cargando configuración de ruleta:", err);
|
|
// Fallback mínimo si falla
|
|
document.getElementById("ruleta").src = "img/ruleta.png";
|
|
document.getElementById("puntero").src = "img/puntero.png";
|
|
});
|
|
})();
|
|
</script>
|
|
|
|
<!-- Lógica del juego (usa seleccionar_premio.php y respeta ruleta_id) -->
|
|
<script src="script.js"></script>
|
|
</body>
|
|
</html>
|