feat: Initial commit - Ruleta con PIN (credenciales sanitizadas)
This commit is contained in:
Isaac_Aracena
+27
@@ -0,0 +1,27 @@
|
|||||||
|
# ─── Credenciales y configuración local ───
|
||||||
|
config.php
|
||||||
|
.env
|
||||||
|
|
||||||
|
# ─── Sistema operativo ───
|
||||||
|
Thumbs.db
|
||||||
|
.DS_Store
|
||||||
|
desktop.ini
|
||||||
|
|
||||||
|
# ─── IDEs y editores ───
|
||||||
|
.vscode/
|
||||||
|
.idea/
|
||||||
|
*.swp
|
||||||
|
*.swo
|
||||||
|
*~
|
||||||
|
|
||||||
|
# ─── PHP ───
|
||||||
|
vendor/
|
||||||
|
composer.lock
|
||||||
|
|
||||||
|
# ─── Archivos temporales ───
|
||||||
|
*.log
|
||||||
|
*.tmp
|
||||||
|
*.bak
|
||||||
|
|
||||||
|
# ─── ZIP original del proyecto ───
|
||||||
|
*.zip
|
||||||
@@ -0,0 +1,232 @@
|
|||||||
|
# 🎰 Ruleta con PIN
|
||||||
|
|
||||||
|
Aplicación web de **ruleta de premios** protegida por PIN, con registro de resultados vía backend PHP y base de datos MySQL/MariaDB.
|
||||||
|
|
||||||
|
Desarrollada para campañas promocionales de **Gomez Lee Marketing (GLM)**.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 📋 Tabla de Contenidos
|
||||||
|
|
||||||
|
- [Características](#-características)
|
||||||
|
- [Requisitos](#-requisitos)
|
||||||
|
- [Instalación](#-instalación)
|
||||||
|
- [Configuración de Base de Datos](#-configuración-de-base-de-datos)
|
||||||
|
- [Configuración de PINs](#-configuración-de-pins)
|
||||||
|
- [Estructura del Proyecto](#-estructura-del-proyecto)
|
||||||
|
- [Flujo del Sistema](#-flujo-del-sistema)
|
||||||
|
- [Operación Diaria](#-operación-diaria)
|
||||||
|
- [Solución de Problemas](#-solución-de-problemas)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## ✨ Características
|
||||||
|
|
||||||
|
- **Autenticación por PIN** antes de girar la ruleta
|
||||||
|
- **Selección aleatoria ponderada** de premios según probabilidades configurables
|
||||||
|
- **Control de stock** por premio y cupo global de giros
|
||||||
|
- **Registro de auditoría** con IP, user agent y timestamp
|
||||||
|
- **Animación fluida** de ruleta con CSS transitions
|
||||||
|
- **Efecto confeti** al ganar (canvas-confetti)
|
||||||
|
- **Diseño responsive** con soporte de pantalla completa
|
||||||
|
- **Redirección a formulario JotForm** para reclamar el premio
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 📦 Requisitos
|
||||||
|
|
||||||
|
| Componente | Versión mínima |
|
||||||
|
|---|---|
|
||||||
|
| PHP | 8.0+ con extensión `mysqli` |
|
||||||
|
| MySQL / MariaDB | 5.7+ / 10.3+ |
|
||||||
|
| Servidor Web | Apache (XAMPP) o Nginx |
|
||||||
|
| Navegador | Cualquier navegador moderno con JS habilitado |
|
||||||
|
|
||||||
|
> La aplicación requiere acceso HTTP saliente a `https://api.ipify.org` para obtener la IP pública del usuario.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 🚀 Instalación
|
||||||
|
|
||||||
|
### 1. Clonar el repositorio
|
||||||
|
|
||||||
|
```bash
|
||||||
|
git clone https://git.digitalcompass.agency/Isaac_Aracena/ruleta-con-pin.git
|
||||||
|
```
|
||||||
|
|
||||||
|
### 2. Colocar en el servidor web
|
||||||
|
|
||||||
|
- **Windows (XAMPP):** Copiar a `C:\xampp\htdocs\ruleta\`
|
||||||
|
- **Linux (Apache/Nginx):** Copiar a `/var/www/ruleta/`
|
||||||
|
|
||||||
|
### 3. Configurar credenciales de BD
|
||||||
|
|
||||||
|
```bash
|
||||||
|
cp config.example.php config.php
|
||||||
|
```
|
||||||
|
|
||||||
|
Editar `config.php` con los datos reales:
|
||||||
|
|
||||||
|
```php
|
||||||
|
$servername = "localhost";
|
||||||
|
$username = "tu_usuario";
|
||||||
|
$password = "tu_contraseña";
|
||||||
|
$dbname = "ruleta_db";
|
||||||
|
```
|
||||||
|
|
||||||
|
> ⚠️ **`config.php` está en `.gitignore`** y nunca se versiona. Las credenciales quedan solo en tu servidor.
|
||||||
|
|
||||||
|
### 4. Crear la base de datos
|
||||||
|
|
||||||
|
Ejecutar el script SQL incluido:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
mysql -u root -p < database/schema.sql
|
||||||
|
```
|
||||||
|
|
||||||
|
### 5. Cargar premios y PINs
|
||||||
|
|
||||||
|
Ver sección [Configuración de PINs](#-configuración-de-pins).
|
||||||
|
|
||||||
|
### 6. Probar
|
||||||
|
|
||||||
|
Abrir `http://localhost/ruleta/index.html` e ingresar un PIN válido.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 🗄️ Configuración de Base de Datos
|
||||||
|
|
||||||
|
### Tablas
|
||||||
|
|
||||||
|
| Tabla | Descripción |
|
||||||
|
|---|---|
|
||||||
|
| `girospermitidos` | Control global de cupo de giros (1 registro, id=1) |
|
||||||
|
| `premiosnew` | Premios con stock, probabilidad y PIN asignado |
|
||||||
|
| `premiosentregados` | Auditoría de premios entregados |
|
||||||
|
|
||||||
|
### Ajustar cupo de giros
|
||||||
|
|
||||||
|
```sql
|
||||||
|
UPDATE girospermitidos SET cantidad = 50000 WHERE id = 1;
|
||||||
|
```
|
||||||
|
|
||||||
|
### Cargar un premio
|
||||||
|
|
||||||
|
```sql
|
||||||
|
INSERT INTO premiosnew (nombre, probabilidad, cantidad, inicio, final, nombre_usuario)
|
||||||
|
VALUES ('Gorra', 1.0, 10, 0, 45, '1989');
|
||||||
|
```
|
||||||
|
|
||||||
|
- `inicio` / `final` = ángulos en la imagen de la ruleta (0–360°)
|
||||||
|
- `nombre_usuario` = el PIN que podrá ganar este premio
|
||||||
|
- `cantidad` = stock disponible
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 🔑 Configuración de PINs
|
||||||
|
|
||||||
|
Los PINs deben estar sincronizados en **dos lugares**:
|
||||||
|
|
||||||
|
1. **Base de datos:** columna `premiosnew.nombre_usuario`
|
||||||
|
2. **Frontend:** array `validPins` en `script.js` (línea 35)
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
const validPins = ["1989", "4708", "6823", "7591", ...];
|
||||||
|
```
|
||||||
|
|
||||||
|
> Si un PIN está en la BD pero no en `validPins`, el modal del frontend no dejará pasar.
|
||||||
|
> Si un PIN está en `validPins` pero no en la BD, el backend responderá "No hay premios disponibles".
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 📁 Estructura del Proyecto
|
||||||
|
|
||||||
|
```
|
||||||
|
ruleta-con-pin/
|
||||||
|
├── index.html # Página principal (modal PIN + ruleta)
|
||||||
|
├── script.js # Lógica del juego, validación, animación
|
||||||
|
├── style.css # Estilos, responsive, modales
|
||||||
|
├── seleccionar_premio.php # Backend: selección aleatoria + registro BD
|
||||||
|
├── config.example.php # Plantilla de configuración de BD
|
||||||
|
├── config.php # ⛔ Credenciales reales (no versionado)
|
||||||
|
├── database/
|
||||||
|
│ └── schema.sql # Script de creación de BD y tablas
|
||||||
|
└── img/
|
||||||
|
├── background.png # Fondo de la página
|
||||||
|
├── ruleta.png # Imagen de la ruleta
|
||||||
|
├── puntero.png # Flecha/puntero de la ruleta
|
||||||
|
├── fullscreen-icon.png
|
||||||
|
├── BANNER-1.png # Logo GLM
|
||||||
|
├── BANNER-2.png # Banner lateral
|
||||||
|
└── BANNER-4.png # Banner inferior
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 🔄 Flujo del Sistema
|
||||||
|
|
||||||
|
```
|
||||||
|
Usuario → Ingresa PIN → Validación frontend (validPins)
|
||||||
|
→ Muestra ruleta → Click en puntero → Obtiene IP (ipify)
|
||||||
|
→ POST a seleccionar_premio.php
|
||||||
|
→ Verifica cupo global (girospermitidos)
|
||||||
|
→ Selecciona premio aleatorio ponderado (premiosnew)
|
||||||
|
→ Descuenta stock + registra en premiosentregados
|
||||||
|
→ Retorna JSON {id, nombre, inicio, final}
|
||||||
|
→ Anima ruleta al ángulo del premio
|
||||||
|
→ Confeti 🎊 + Modal "¡Ganaste!"
|
||||||
|
→ Botón "Ir al formulario" → JotForm
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 📊 Operación Diaria
|
||||||
|
|
||||||
|
### Agregar PINs/premios
|
||||||
|
|
||||||
|
1. Insertar en `premiosnew` con el PIN deseado
|
||||||
|
2. Agregar el PIN al array `validPins` en `script.js`
|
||||||
|
|
||||||
|
### Consultar premios entregados
|
||||||
|
|
||||||
|
```sql
|
||||||
|
SELECT * FROM premiosentregados ORDER BY created_at DESC;
|
||||||
|
```
|
||||||
|
|
||||||
|
### Consultar stock restante
|
||||||
|
|
||||||
|
```sql
|
||||||
|
SELECT nombre, nombre_usuario, cantidad FROM premiosnew;
|
||||||
|
```
|
||||||
|
|
||||||
|
### Aumentar cupo de giros
|
||||||
|
|
||||||
|
```sql
|
||||||
|
UPDATE girospermitidos SET cantidad = cantidad + 1000 WHERE id = 1;
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 🔧 Solución de Problemas
|
||||||
|
|
||||||
|
| Problema | Causa |
|
||||||
|
|---|---|
|
||||||
|
| "Conexión fallida…" | Credenciales en `config.php` incorrectas o BD inaccesible |
|
||||||
|
| "No hay premios disponibles" | No hay fila en `premiosnew` con ese PIN y `cantidad > 0` |
|
||||||
|
| No pasa del modal de PIN | El PIN no está en `validPins` en `script.js` |
|
||||||
|
| No registra IP | Navegador no puede acceder a `https://api.ipify.org` |
|
||||||
|
| "Se ha alcanzado el límite de giros" | `girospermitidos.cantidad` llegó a 0 |
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 🛡️ Notas de Seguridad
|
||||||
|
|
||||||
|
- Las credenciales de BD se cargan desde `config.php` (no versionado)
|
||||||
|
- Los `INSERT` usan **prepared statements** para prevenir SQL injection
|
||||||
|
- La validación de PINs en el frontend es solo UX; la validación real ocurre en el backend vía `nombre_usuario` en la consulta SQL
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 📄 Licencia
|
||||||
|
|
||||||
|
Proyecto interno de **Gomez Lee Marketing**. Uso privado.
|
||||||
@@ -0,0 +1,9 @@
|
|||||||
|
<?php
|
||||||
|
// ─── Configuración de Base de Datos ───
|
||||||
|
// Copia este archivo como "config.php" y completa los valores reales.
|
||||||
|
// config.php está excluido de git (.gitignore) para proteger credenciales.
|
||||||
|
|
||||||
|
$servername = "localhost"; // Host de la BD (IP o dominio)
|
||||||
|
$username = "tu_usuario"; // Usuario de MySQL
|
||||||
|
$password = "tu_contraseña"; // Contraseña de MySQL
|
||||||
|
$dbname = "ruleta_db"; // Nombre de la base de datos
|
||||||
@@ -0,0 +1,54 @@
|
|||||||
|
-- =========================================================
|
||||||
|
-- RuletaFullConPIN — Esquema de Base de Datos
|
||||||
|
-- =========================================================
|
||||||
|
-- Ejecutar este script en MySQL/MariaDB para crear la
|
||||||
|
-- estructura necesaria antes de usar la aplicación.
|
||||||
|
-- =========================================================
|
||||||
|
|
||||||
|
CREATE DATABASE IF NOT EXISTS ruleta_db
|
||||||
|
CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;
|
||||||
|
|
||||||
|
USE ruleta_db;
|
||||||
|
|
||||||
|
-- ---------------------------------------------------------
|
||||||
|
-- 1. Control de giros global (un único registro, id = 1)
|
||||||
|
-- ---------------------------------------------------------
|
||||||
|
CREATE TABLE IF NOT EXISTS girospermitidos (
|
||||||
|
id INT PRIMARY KEY,
|
||||||
|
cantidad INT NOT NULL
|
||||||
|
);
|
||||||
|
|
||||||
|
INSERT INTO girospermitidos (id, cantidad)
|
||||||
|
VALUES (1, 100000) -- Ajusta el cupo según la campaña
|
||||||
|
ON DUPLICATE KEY UPDATE cantidad = VALUES(cantidad);
|
||||||
|
|
||||||
|
-- ---------------------------------------------------------
|
||||||
|
-- 2. Premios disponibles (vinculados a un PIN / usuario)
|
||||||
|
-- ---------------------------------------------------------
|
||||||
|
CREATE TABLE IF NOT EXISTS premiosnew (
|
||||||
|
id INT AUTO_INCREMENT PRIMARY KEY,
|
||||||
|
nombre VARCHAR(190) NOT NULL, -- Nombre del premio a mostrar
|
||||||
|
probabilidad DECIMAL(10,6) NOT NULL, -- Peso relativo (0..1 o cualquier peso)
|
||||||
|
cantidad INT NOT NULL, -- Stock disponible
|
||||||
|
inicio INT NOT NULL, -- Ángulo inicial en la ruleta (0-360)
|
||||||
|
final INT NOT NULL, -- Ángulo final en la ruleta (0-360)
|
||||||
|
nombre_usuario VARCHAR(64) NOT NULL -- PIN que puede ganar este premio
|
||||||
|
);
|
||||||
|
|
||||||
|
-- ---------------------------------------------------------
|
||||||
|
-- 3. Registro de premios entregados (auditoría)
|
||||||
|
-- ---------------------------------------------------------
|
||||||
|
CREATE TABLE IF NOT EXISTS premiosentregados (
|
||||||
|
id BIGINT AUTO_INCREMENT PRIMARY KEY,
|
||||||
|
nombre_usuario VARCHAR(64) NOT NULL, -- PIN usado
|
||||||
|
premio VARCHAR(190) NOT NULL, -- Nombre del premio ganado
|
||||||
|
ip_address VARCHAR(64) NULL,
|
||||||
|
user_agent VARCHAR(255) NULL,
|
||||||
|
created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
|
||||||
|
);
|
||||||
|
|
||||||
|
-- ---------------------------------------------------------
|
||||||
|
-- Ejemplo: Cargar un premio para el PIN "1989"
|
||||||
|
-- ---------------------------------------------------------
|
||||||
|
-- INSERT INTO premiosnew (nombre, probabilidad, cantidad, inicio, final, nombre_usuario)
|
||||||
|
-- VALUES ('Gorra', 1.0, 10, 0, 45, '1989');
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 23 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 26 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 61 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.7 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 102 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 7.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 99 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 106 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 135 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 64 KiB |
+60
@@ -0,0 +1,60 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>GLM - Ruleta</title>
|
||||||
|
<link rel="stylesheet" href="style.css">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<!-- Banners en las posiciones 1, 2, 3 y 4 -->
|
||||||
|
<a href="https://promo.gomezleemarketing.com/" target="_blank" class="banner banner-1"></a>
|
||||||
|
<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">
|
||||||
|
<img id="ruleta" src="img/ruleta.png"/>
|
||||||
|
<img id="puntero" src="img/puntero.png"/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Botón de pantalla completa -->
|
||||||
|
<div class="fullscreen-btn" id="fullscreen-btn"></div>
|
||||||
|
|
||||||
|
<!-- Mensaje de orientaci¨®n vertical -->
|
||||||
|
<div class="landscape-message">
|
||||||
|
Por favor, gira tu dispositivo para ver el contenido en horizontal.
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<!-- Pop-up modal -->
|
||||||
|
<div id="popup-modal" class="popup-modal">
|
||||||
|
<div class="popup-content">
|
||||||
|
<h2>Favor de ingresar su PIN</h2>
|
||||||
|
<form id="user-form">
|
||||||
|
<label for="user-name">PIN:</label>
|
||||||
|
<input type="text" id="user-name" name="user-name" required>
|
||||||
|
|
||||||
|
<button type="submit">Continuar</button>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Nuevo popup 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">Ir al formulario</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<!-- Script -->
|
||||||
|
<script src="https://cdn.jsdelivr.net/npm/canvas-confetti@1.5.1/dist/confetti.browser.min.js"></script>
|
||||||
|
<script src="script.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@@ -0,0 +1,216 @@
|
|||||||
|
var ruleta = document.getElementById("ruleta");
|
||||||
|
var puntero = document.getElementById("puntero");
|
||||||
|
let gira = 0;
|
||||||
|
let giraDos = 0;
|
||||||
|
|
||||||
|
const rangos = [
|
||||||
|
{ articulo: "Freidora de aire", inicio: 330, final: 16 },
|
||||||
|
{ articulo: "Articulo plastico", inicio: 15, final: 16 },
|
||||||
|
{ articulo: "Sandwichera", inicio: 150, final: 196 },
|
||||||
|
{ articulo: "Kits Protex", inicio: 170, final: 16 },
|
||||||
|
{ articulo: "Cubeta", inicio: 20, final: 52 },
|
||||||
|
{ articulo: "Lonchera", inicio: 42, final: 88 },
|
||||||
|
{ articulo: "Recipiente plastico", inicio: 130, final: 160 },
|
||||||
|
{ articulo: "Kits Cuidado Oral", inicio: 220, final: 232 },
|
||||||
|
{ articulo: "Plancha", inicio: 150, final: 232 },
|
||||||
|
{ articulo: "Caldero", inicio: 30, final: 194 },
|
||||||
|
{ articulo: "Abanico de piso", inicio: 296, final: 328 },
|
||||||
|
];
|
||||||
|
|
||||||
|
let articuloGanador = "";
|
||||||
|
|
||||||
|
// Variables para el modal y formulario
|
||||||
|
const modal = document.getElementById("popup-modal");
|
||||||
|
const form = document.getElementById("user-form");
|
||||||
|
const userNameInput = document.getElementById("user-name");
|
||||||
|
|
||||||
|
let nombreUsuario = "";
|
||||||
|
|
||||||
|
// Mostrar el modal al cargar la página
|
||||||
|
window.onload = function () {
|
||||||
|
modal.style.display = "flex";
|
||||||
|
};
|
||||||
|
|
||||||
|
// Lista de PINs válidos
|
||||||
|
const validPins = ["1989", "4708", "6823", "7591", "3664", "3520", "4528", "9033", "3688", "6159", "2258"];
|
||||||
|
|
||||||
|
// Manejar el envío del formulario
|
||||||
|
form.addEventListener("submit", function (e) {
|
||||||
|
e.preventDefault();
|
||||||
|
nombreUsuario = userNameInput.value.trim(); // Eliminar espacios en blanco
|
||||||
|
|
||||||
|
if (!nombreUsuario) {
|
||||||
|
alert("Por favor, completa todos los campos.");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Validar si el PIN es válido
|
||||||
|
if (!validPins.includes(nombreUsuario)) {
|
||||||
|
alert("PIN inválido. Por favor, inténtelo de nuevo.");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Si el PIN es válido, ocultar el modal y continuar
|
||||||
|
modal.style.display = "none";
|
||||||
|
document.querySelector(".content").style.display = "block"; // Mostrar el contenido principal
|
||||||
|
});
|
||||||
|
|
||||||
|
// Calcular el ángulo intermedio de un rango
|
||||||
|
function calcularAngulo(rango) {
|
||||||
|
if (rango.inicio > rango.final) {
|
||||||
|
return (rango.inicio + (360 - rango.inicio + rango.final) / 2) % 360;
|
||||||
|
}
|
||||||
|
return rango.inicio + (rango.final - rango.inicio) / 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Girar la ruleta a un artículo específico
|
||||||
|
function girarRuletaAArticulo(nombreArticulo) {
|
||||||
|
let rangoSeleccionado = rangos.find(
|
||||||
|
(rango) => rango.articulo === nombreArticulo
|
||||||
|
);
|
||||||
|
|
||||||
|
if (rangoSeleccionado) {
|
||||||
|
let anguloFinal = calcularAngulo(rangoSeleccionado);
|
||||||
|
gira = 1440 + anguloFinal; // 1440 asegura varias vueltas antes de detenerse en el artículo ganador
|
||||||
|
ruleta.style.transition = "all 5s ease-out";
|
||||||
|
ruleta.style.transform = `rotate(${gira}deg)`;
|
||||||
|
} else {
|
||||||
|
console.log("Artículo no encontrado.");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Fin de la rodada
|
||||||
|
ruleta.addEventListener("transitionend", function () {
|
||||||
|
puntero.style.pointerEvents = "auto"; // Reactivar clics
|
||||||
|
ruleta.style.transition = "none";
|
||||||
|
giraDos = gira % 360;
|
||||||
|
ruleta.style.transform = `rotate(${giraDos}deg)`;
|
||||||
|
|
||||||
|
mostrarConfetiConTexto(articuloGanador);
|
||||||
|
});
|
||||||
|
|
||||||
|
// Obtener dirección IP
|
||||||
|
async function obtenerIP() {
|
||||||
|
const response = await fetch("https://api.ipify.org?format=json");
|
||||||
|
const data = await response.json();
|
||||||
|
return data.ip;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Obtener artículo ganador
|
||||||
|
async function obtenerArticuloGanador() {
|
||||||
|
const userAgent = navigator.userAgent;
|
||||||
|
const ipAddress = await obtenerIP();
|
||||||
|
|
||||||
|
fetch("seleccionar_premio.php", {
|
||||||
|
method: "POST",
|
||||||
|
headers: {
|
||||||
|
"Content-Type": "application/json",
|
||||||
|
},
|
||||||
|
body: JSON.stringify({
|
||||||
|
user_agent: userAgent,
|
||||||
|
ip_address: ipAddress,
|
||||||
|
nombre_usuario: nombreUsuario,
|
||||||
|
}),
|
||||||
|
})
|
||||||
|
.then((response) => response.json())
|
||||||
|
.then((data) => {
|
||||||
|
articuloGanador = data.nombre;
|
||||||
|
girarRuletaAArticulo(articuloGanador);
|
||||||
|
})
|
||||||
|
.catch((error) =>
|
||||||
|
console.error("Error al obtener el artículo ganador:", error)
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Bloquear interacción con la ruleta mientras gira
|
||||||
|
puntero.addEventListener("mousedown", function () {
|
||||||
|
if (!nombreUsuario) {
|
||||||
|
alert("Por favor, completa el formulario antes de continuar.");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
puntero.style.pointerEvents = "none"; // Bloquear clics
|
||||||
|
obtenerArticuloGanador();
|
||||||
|
});
|
||||||
|
|
||||||
|
// Mostrar confeti con texto
|
||||||
|
function mostrarConfetiConTexto(texto) {
|
||||||
|
const duration = 5 * 1000;
|
||||||
|
const end = Date.now() + duration;
|
||||||
|
|
||||||
|
(function frame() {
|
||||||
|
confetti({
|
||||||
|
particleCount: 7,
|
||||||
|
angle: 60,
|
||||||
|
spread: 55,
|
||||||
|
origin: { x: 0 },
|
||||||
|
scalar: 1.2,
|
||||||
|
});
|
||||||
|
confetti({
|
||||||
|
particleCount: 7,
|
||||||
|
angle: 120,
|
||||||
|
spread: 55,
|
||||||
|
origin: { x: 1 },
|
||||||
|
scalar: 1.2,
|
||||||
|
});
|
||||||
|
|
||||||
|
if (Date.now() < end) {
|
||||||
|
requestAnimationFrame(frame);
|
||||||
|
}
|
||||||
|
})();
|
||||||
|
|
||||||
|
console.log("¡Felicidades! Ganaste: " + texto);
|
||||||
|
}
|
||||||
|
|
||||||
|
const fullscreenBtn = document.getElementById("fullscreen-btn");
|
||||||
|
|
||||||
|
fullscreenBtn.addEventListener("click", () => {
|
||||||
|
if (!document.fullscreenElement) {
|
||||||
|
document.documentElement.requestFullscreen().catch((err) => {
|
||||||
|
console.error(
|
||||||
|
`Error al intentar entrar en pantalla completa: ${err.message}`
|
||||||
|
);
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
document.exitFullscreen().catch((err) => {
|
||||||
|
console.error(
|
||||||
|
`Error al intentar salir de pantalla completa: ${err.message}`
|
||||||
|
);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// Mostrar el popup de agradecimiento
|
||||||
|
function mostrarMensajeAgradecimiento() {
|
||||||
|
const modal = document.getElementById("thank-you-modal");
|
||||||
|
const mensaje = document.getElementById("thank-you-message");
|
||||||
|
const detalles = document.getElementById("thank-you-details");
|
||||||
|
const botonRedirigir = document.getElementById("redirect-button");
|
||||||
|
|
||||||
|
// Personalizar contenido del mensaje
|
||||||
|
mensaje.textContent = `🎊🎉¡Felicidades!🎉🎊`;
|
||||||
|
detalles.textContent = `🎁 Has ganado "${articuloGanador}" 🎁`;
|
||||||
|
|
||||||
|
modal.style.display = "flex"; // Mostrar el modal
|
||||||
|
|
||||||
|
botonRedirigir.addEventListener("click", () => {
|
||||||
|
// Abre el enlace en una nueva pestaña
|
||||||
|
window.open("https://form.jotform.com/250134957677669", "_blank");
|
||||||
|
|
||||||
|
// Actualiza la pestaña actual
|
||||||
|
window.location.href = window.location.href; // Redirige a la misma URL actual
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// Fin de la rodada
|
||||||
|
ruleta.addEventListener("transitionend", function () {
|
||||||
|
puntero.style.pointerEvents = "auto"; // Reactivar clics
|
||||||
|
ruleta.style.transition = "none";
|
||||||
|
giraDos = gira % 360;
|
||||||
|
ruleta.style.transform = `rotate(${giraDos}deg)`;
|
||||||
|
|
||||||
|
mostrarConfetiConTexto(articuloGanador); // Mostrar confeti
|
||||||
|
mostrarMensajeAgradecimiento(); // Mostrar mensaje de agradecimiento
|
||||||
|
});
|
||||||
|
|
||||||
@@ -0,0 +1,128 @@
|
|||||||
|
<?php
|
||||||
|
// ─── Configuración de Base de Datos ───
|
||||||
|
// Carga las credenciales desde config.php (no versionado en git).
|
||||||
|
// Si no existe, usa valores por defecto para desarrollo local.
|
||||||
|
if (file_exists(__DIR__ . '/config.php')) {
|
||||||
|
require_once __DIR__ . '/config.php';
|
||||||
|
} else {
|
||||||
|
$servername = "localhost";
|
||||||
|
$username = "root";
|
||||||
|
$password = "";
|
||||||
|
$dbname = "ruleta_db";
|
||||||
|
}
|
||||||
|
|
||||||
|
// Crear la conexión
|
||||||
|
$conn = new mysqli($servername, $username, $password, $dbname);
|
||||||
|
|
||||||
|
// Verificar la conexión
|
||||||
|
if ($conn->connect_error) {
|
||||||
|
die(json_encode(["error" => "Conexión fallida: " . $conn->connect_error]));
|
||||||
|
}
|
||||||
|
|
||||||
|
// Obtener la IP del cliente en el servidor
|
||||||
|
$ip_address = $_SERVER['REMOTE_ADDR'];
|
||||||
|
|
||||||
|
// Recibir los datos enviados desde el frontend
|
||||||
|
$data = json_decode(file_get_contents("php://input"), true);
|
||||||
|
$user_agent = $data['user_agent'] ?? null;
|
||||||
|
$nombre_usuario = $data['nombre_usuario'] ?? null;
|
||||||
|
|
||||||
|
// Consultar la cantidad de giros disponibles en la tabla limite_giros
|
||||||
|
$sqlLimite = "SELECT cantidad FROM girospermitidos WHERE id = 1"; // Se asume un único registro de control
|
||||||
|
$resultLimite = $conn->query($sqlLimite);
|
||||||
|
|
||||||
|
if ($resultLimite->num_rows > 0) {
|
||||||
|
$rowLimite = $resultLimite->fetch_assoc();
|
||||||
|
$cantidadGirosDisponibles = $rowLimite['cantidad'];
|
||||||
|
|
||||||
|
if ($cantidadGirosDisponibles <= 0) {
|
||||||
|
echo json_encode(["error" => "Se ha alcanzado el límite de giros"]);
|
||||||
|
$conn->close();
|
||||||
|
exit();
|
||||||
|
}
|
||||||
|
|
||||||
|
// Restar un giro al contador global
|
||||||
|
$stmtGiros = $conn->prepare("UPDATE girospermitidos SET cantidad = cantidad - 1 WHERE id = 1");
|
||||||
|
if ($stmtGiros) {
|
||||||
|
$stmtGiros->execute();
|
||||||
|
$stmtGiros->close();
|
||||||
|
} else {
|
||||||
|
echo json_encode(["error" => "Error al actualizar el límite de giros"]);
|
||||||
|
$conn->close();
|
||||||
|
exit();
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
echo json_encode(["error" => "No se encontró el registro de límite de giros"]);
|
||||||
|
$conn->close();
|
||||||
|
exit();
|
||||||
|
}
|
||||||
|
|
||||||
|
// Consultar los premios con cantidad mayor que 0
|
||||||
|
$sql = "SELECT id, nombre, probabilidad, cantidad, inicio, final FROM premiosnew WHERE cantidad > 0 AND nombre_usuario = '$nombre_usuario'";
|
||||||
|
$result = $conn->query($sql);
|
||||||
|
|
||||||
|
$premios = array();
|
||||||
|
$totalProbabilidad = 0;
|
||||||
|
|
||||||
|
if ($result->num_rows > 0) {
|
||||||
|
// Calcular el total de probabilidades
|
||||||
|
while ($row = $result->fetch_assoc()) {
|
||||||
|
$premios[] = $row;
|
||||||
|
$totalProbabilidad += $row['probabilidad'];
|
||||||
|
}
|
||||||
|
|
||||||
|
// Generar un número aleatorio entre 0 y el total de probabilidades
|
||||||
|
$random = mt_rand(0, $totalProbabilidad * 1000) / 1000; // Se multiplica por 1000 para trabajar con 3 decimales
|
||||||
|
$suma = 0;
|
||||||
|
|
||||||
|
// Seleccionar el premio basado en la probabilidad acumulada
|
||||||
|
foreach ($premios as $premio) {
|
||||||
|
$suma += $premio['probabilidad'];
|
||||||
|
if ($random <= $suma) {
|
||||||
|
// Actualizar la cantidad del premio seleccionado
|
||||||
|
$stmt = $conn->prepare("UPDATE premiosnew SET cantidad = cantidad - 1 WHERE id = ?");
|
||||||
|
if ($stmt) {
|
||||||
|
$stmt->bind_param("i", $premio['id']);
|
||||||
|
$stmt->execute();
|
||||||
|
$stmt->close();
|
||||||
|
|
||||||
|
// Agregar el premio y nombre a la tabla premios
|
||||||
|
$stmtInsert = $conn->prepare(
|
||||||
|
"INSERT INTO premiosentregados (nombre_usuario, premio, ip_address, user_agent)
|
||||||
|
VALUES (?, ?, ?, ?)"
|
||||||
|
);
|
||||||
|
if ($stmtInsert) {
|
||||||
|
$stmtInsert->bind_param(
|
||||||
|
"ssss",
|
||||||
|
$nombre_usuario,
|
||||||
|
$premio['nombre'],
|
||||||
|
$ip_address,
|
||||||
|
$user_agent
|
||||||
|
);
|
||||||
|
$stmtInsert->execute();
|
||||||
|
$stmtInsert->close();
|
||||||
|
} else {
|
||||||
|
echo json_encode(["error" => "Error al guardar el participante"]);
|
||||||
|
exit();
|
||||||
|
}
|
||||||
|
|
||||||
|
// Devolver el premio seleccionado con sus rangos de ángulo
|
||||||
|
echo json_encode([
|
||||||
|
'id' => $premio['id'],
|
||||||
|
'nombre' => $premio['nombre'],
|
||||||
|
'inicio' => $premio['inicio'],
|
||||||
|
'final' => $premio['final']
|
||||||
|
]);
|
||||||
|
exit(); // Salir inmediatamente después de devolver el premio seleccionado
|
||||||
|
} else {
|
||||||
|
echo json_encode(["error" => "Error en la preparación de la actualización"]);
|
||||||
|
}
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
echo json_encode(["error" => "No hay premios disponibles"]);
|
||||||
|
}
|
||||||
|
|
||||||
|
$conn->close();
|
||||||
|
?>
|
||||||
@@ -0,0 +1,282 @@
|
|||||||
|
/* Estilos generales existentes */
|
||||||
|
body, html {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background: #C10F1A url(img/background.png) repeat center center; /* Imagen centrada y no repetida */
|
||||||
|
background-size: cover; /* Hace que la imagen se ajuste al contenedor sin recortarse */
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
font-family: 'Montserrat', sans-serif;
|
||||||
|
overflow: hidden; /* Evitar desplazamiento */
|
||||||
|
}
|
||||||
|
|
||||||
|
.content {
|
||||||
|
text-align: center;
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: 48px;
|
||||||
|
color: #ffffff;
|
||||||
|
text-shadow:
|
||||||
|
4px 4px 0 #C10F1A;
|
||||||
|
}
|
||||||
|
|
||||||
|
.game {
|
||||||
|
position: relative;
|
||||||
|
display: inline-block;
|
||||||
|
margin-left: -400px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#ruleta {
|
||||||
|
max-width: 100%;
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
#puntero {
|
||||||
|
position: absolute;
|
||||||
|
top: 47%;
|
||||||
|
left: 50%;
|
||||||
|
width: 300px;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Estilos para dispositivos con pantallas más pequeñas */
|
||||||
|
@media (max-width: 1024px) {
|
||||||
|
#ruleta {
|
||||||
|
width: 70%;
|
||||||
|
}
|
||||||
|
|
||||||
|
#puntero {
|
||||||
|
width: 200px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
#ruleta, #puntero {
|
||||||
|
width: 50%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 480px) {
|
||||||
|
#ruleta, #puntero {
|
||||||
|
width: 80%;
|
||||||
|
}
|
||||||
|
|
||||||
|
#puntero {
|
||||||
|
width: 100px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Nueva clase para manejar orientación vertical */
|
||||||
|
.landscape-message {
|
||||||
|
display: none;
|
||||||
|
text-align: center;
|
||||||
|
font-size: 24px;
|
||||||
|
color: red;
|
||||||
|
position: fixed;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
background-color: #ffffff;
|
||||||
|
padding: 20px;
|
||||||
|
border: 2px solid red;
|
||||||
|
z-index: 9999;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (orientation: portrait) {
|
||||||
|
.landscape-message {
|
||||||
|
display: block !important;
|
||||||
|
z-index: 100000;
|
||||||
|
}
|
||||||
|
|
||||||
|
#ruleta, #puntero, .content, .game {
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.fullscreen-btn {
|
||||||
|
position: absolute;
|
||||||
|
top: 5%;
|
||||||
|
right: 3%;
|
||||||
|
width: 40px;
|
||||||
|
height: 40px;
|
||||||
|
background: url('img/fullscreen-icon.png') no-repeat center center;
|
||||||
|
background-size: contain;
|
||||||
|
cursor: pointer;
|
||||||
|
z-index: 1000;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 1024px) {
|
||||||
|
.fullscreen-btn {
|
||||||
|
top: 3%;
|
||||||
|
right: 5%;
|
||||||
|
width: 35px;
|
||||||
|
height: 35px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.fullscreen-btn {
|
||||||
|
top: 3%;
|
||||||
|
right: 5%;
|
||||||
|
width: 30px;
|
||||||
|
height: 30px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 480px) {
|
||||||
|
.fullscreen-btn {
|
||||||
|
top: 2%;
|
||||||
|
right: 8%;
|
||||||
|
width: 25px;
|
||||||
|
height: 25px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
canvas {
|
||||||
|
position: fixed !important;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100% !important;
|
||||||
|
height: 100% !important;
|
||||||
|
z-index: 99999 !important; /* Mayor que cualquier otro elemento */
|
||||||
|
pointer-events: none; /* No bloquear interacciones */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Estilos de los banners */
|
||||||
|
.banner {
|
||||||
|
position: fixed;
|
||||||
|
background-size: contain;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
z-index: 1000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.banner-1 {
|
||||||
|
top: 0%;
|
||||||
|
left: 5%;
|
||||||
|
width: 150px;
|
||||||
|
height: 150px;
|
||||||
|
background-image: url('img/BANNER-1.png');
|
||||||
|
}
|
||||||
|
|
||||||
|
.banner-4 {
|
||||||
|
bottom: 0%;
|
||||||
|
right: 5%;
|
||||||
|
width: 400px;
|
||||||
|
height: 100px;
|
||||||
|
background-image: url('img/BANNER-4.png');
|
||||||
|
}
|
||||||
|
|
||||||
|
.banner-2 {
|
||||||
|
top: 10%;
|
||||||
|
right: 5%;
|
||||||
|
width: 400px;
|
||||||
|
height: 400px;
|
||||||
|
background-image: url('img/BANNER-2.png');
|
||||||
|
}
|
||||||
|
|
||||||
|
.popup-modal {
|
||||||
|
display: none;
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background-color: rgba(0, 0, 0, 0.8);
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
z-index: 1000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.popup-content {
|
||||||
|
background: #C10F1A;
|
||||||
|
padding: 20px;
|
||||||
|
border-radius: 8px;
|
||||||
|
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
|
||||||
|
max-width: 400px;
|
||||||
|
width: 90%;
|
||||||
|
text-align: center;
|
||||||
|
animation: fadeIn 0.3s ease-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
.popup-content h2 {
|
||||||
|
margin-bottom: 15px;
|
||||||
|
font-size: 24px;
|
||||||
|
color: #ccc;
|
||||||
|
}
|
||||||
|
|
||||||
|
#user-form label {
|
||||||
|
display: block;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #ccc;
|
||||||
|
}
|
||||||
|
|
||||||
|
#user-form input, #user-form select, #user-form button {
|
||||||
|
width: 50%;
|
||||||
|
padding: 10px;
|
||||||
|
margin-bottom: 15px;
|
||||||
|
border: 1px solid #ccc;
|
||||||
|
border-radius: 4px;
|
||||||
|
font-size: 16px;
|
||||||
|
font-family: 'Montserrat', sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
#user-form button {
|
||||||
|
background-color: #007BFF;
|
||||||
|
color: white;
|
||||||
|
font-weight: bold;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
#user-form button:hover {
|
||||||
|
background-color: #0056b3;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes fadeIn {
|
||||||
|
from {
|
||||||
|
opacity: 0;
|
||||||
|
transform: scale(0.9);
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
opacity: 1;
|
||||||
|
transform: scale(1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/*PopUp Agradecimiento*/
|
||||||
|
#thank-you-modal {
|
||||||
|
display: none;
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background-color: rgba(0, 0, 0, 0.8);
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
z-index: 1000;
|
||||||
|
color: #ffffff;
|
||||||
|
}
|
||||||
|
|
||||||
|
#thank-you-modal .popup-content {
|
||||||
|
background: #C10F1A;
|
||||||
|
padding: 20px;
|
||||||
|
border-radius: 8px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
#redirect-button {
|
||||||
|
padding: 10px 20px;
|
||||||
|
background-color: #007bff;
|
||||||
|
color: white;
|
||||||
|
border: none;
|
||||||
|
border-radius: 5px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
#redirect-button:hover {
|
||||||
|
background-color: #0056b3;
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user