FORMULÁRIO DE LOGIN DE IDENTIFICAÇÃO ÚNICA

46 Kyekyeku-tech

Abrir no Editor Publique Seu Código Precisa de um site?

FORMULÁRIO DE LOGIN DE IDENTIFICAÇÃO ÚNICA

Recomendado

21 September 2024

Adicionar botão para abrir adicionar dados de perfil com validação

17 May 2025

Formulário de login moderno + barra lateral deslizante

21 July 2025

Tela de TV HTML com incorporação e efeitos do YouTube

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'
        });
      }
    }

Recomendado

Adicionar botão para abrir adicionar dados de perfil com validação

Formulário de login moderno + barra lateral deslizante

Tela de TV HTML com incorporação e efeitos do YouTube

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS