feat: Initial commit - Ruleta con PIN (credenciales sanitizadas)

2026-05-09 11:56:04 -04:00
commit 19f01c4c54
18 changed files with 1008 additions and 0 deletions
@@ -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;
+}