Webleb - fragmentos de código - FORMULARIO DE INICIO DE SESIÓN CON ID ÚNICO

HTML

CSS

* {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

body {
      font-family: 'Poppins', sans-serif;
      background-image: url('https://wallpapers.com/images/featured/unique-laptop-bnw8292wzppmnfmr.jpg');
      background-size: 40% 40%;
      animation: gradientBG 15s ease infinite;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      color: #0e0d0d;
      padding: 20px;
    }

@keyframes gradientBG {
      0% { background-position: 0% 50%; }
      50% { background-position: 100% 50%; }
      100% { background-position: 0% 50%; }
    }

.padlock-container {
      position: relative;
      margin-bottom: 30px;
      width: 120px;
      height: 150px;
    }

.desbloquear-cadeado,
    .desbloquear-cadeado-detail,
    .desbloquear-cadeado-locker,
    .desbloquear-cadeado-hole {
      position: absolute;
    }

.desbloquear-cadeado {
      background: linear-gradient(145deg, #e6e6e6, #ffffff);
      width: 120px;
      height: 120px;
      border-radius: 30px 30px 3px 3px;
      box-shadow:
        5px 5px 10px rgba(0, 0, 0, 0.3),
        -2px -2px 8px rgba(255, 255, 255, 0.1),
        inset 3px 3px 5px rgba(0, 0, 0, 0.1),
        inset -3px -3px 5px rgba(255, 255, 255, 0.2);
      z-index: 1;
    }

.desbloquear-cadeado::after {
      content: '';
      position: absolute;
      top: 10px; left: 10px; right: 10px; bottom: 10px;
      border-radius: 15px;
      background: linear-gradient(145deg, #d1d1d1, #f0f0f0);
      z-index: 1;
    }

.desbloquear-cadeado-detail {
      width: 14px;
      height: 20px;
      background: linear-gradient(135deg, #e6e6e6, #8a8a8a);
      clip-path: polygon(0% 100%, 0% 0%, 100% 0%, 100% 100%);
      border-radius: 30%;
      left: 66%;
      bottom: 55%;
      z-index: 3;
      transition: all 0.3s ease;
      transform-origin: right center;
    }

.desbloquear-cadeado-locker {
      width: 120px;
      height: 150px;
      border: solid #d1d1d1 15px;
      border-top-color: #f5f5f5;
      border-left-color: #e0e0e0;
      border-right-color: #b0b0b0;
      border-bottom-color: #8a8a8a;
      clip-path: polygon(0% 70%, 0% 0%, 100% 0%, 100% 70%);
      border-radius: 30%;
      left: 0;
      bottom: 50%;
      z-index: 2;
      transition: all 0.3s ease;
      transform-origin: right center;
    }

.desbloquear-cadeado-hole {
      background: #333;
      width: 1px;
      height: 1px;
      left: 50%;
      top: 50%;
      border-radius: 50%;
      transform: translate(-50%, -50%) scale(20);
      z-index: 4;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.7);
      cursor: pointer;
      transition: all 0.3s ease;
    }

.unlock .desbloquear-cadeado-locker {
      animation: desbloquear 3s ease forwards;
    }

.unlock .desbloquear-cadeado-detail {
      animation: desbloquear-detail 3s ease forwards;
    }

@keyframes desbloquear {
      0%, 30% { transform: translateY(-15px) rotateY(0deg); }
      100% { transform: translateY(-15px) rotateY(-180deg); }
    }

@keyframes desbloquear-detail {
      0%, 30% { transform: rotateY(0deg); }
      100% { transform: rotateY(-180deg); }
    }

.login-container {
      background: #07013d;
      backdrop-filter: blur(10px);
      padding: 40px 30px;
      border-radius: 20px;
      box-shadow: 0 12px 8px rgba(12, 0, 0, 0.993);
      max-width: 400px;
      text-align: center;
      width: 100%;
    }

h2 {
      color: #fa2003;
      margin-bottom: 25px;
    }

input {
      width: 100%;
      padding: 14px;
      margin-bottom: 20px;
      border: 2px solid #0c0c0c;
      border-radius: 10px;
      font-size: 16px;
    }

input:focus {
      outline: none;
      border-color: #0055ff;
      box-shadow: 0 0 8px #0055ff66;
    }

@media (max-width: 480px) {
      .login-container {
        padding: 30px 20px;
      }

h2 {
        font-size: 22px;
      }

input {
        font-size: 15px;
      }
    }

JS

function handleUnlock() {
      const input = document.getElementById("uniqueNumber");
      const uniqueNumber = input.value.trim().toUpperCase();

if (users[uniqueNumber]) {
        const username = users[uniqueNumber];
        const padlock = document.getElementById("padlock");
        padlock.classList.add("unlock");

setTimeout(() => {
          Swal.fire({
            icon: 'success',
            title: `Welcome, ${username}!`,
            text: 'Redirecting to OB Prime Booking form ...',
            showConfirmButton: false,
            timer: 2000
          }).then(() => {
            window.location.href = "pages/home.html";
          });
        }, 3000);

} else {
        Swal.fire({
          icon: 'error',
          title: 'Oops!',
          text: 'Invalid unique number. Please try again.',
          confirmButtonText: 'Try Again'
        });
      }
    }

FORMULARIO DE INICIO DE SESIÓN CON ID ÚNICO

Recomendado

Escáner de virus

Un código de Metehan

PAGINA DE CARGA DE NETFLIX

HTML

CSS

JS

Recomendado

Escáner de virus

Un código de Metehan

PAGINA DE CARGA DE NETFLIX

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS