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

Código de revisión del iPhone 16

Un código de Mete

Estructura HTML de la animación del cubo CSS

HTML

CSS

JS

Recomendado

Código de revisión del iPhone 16

Un código de Mete

Estructura HTML de la animación del cubo CSS

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS