Webleb - Extraits de Code - FORMULAIRE DE CONNEXION PAR ID UNIQUE

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

FORMULAIRE DE CONNEXION PAR ID UNIQUE

Recommandé

Animation d'ombre de texte

Un code de Metehan

Animation de bouton au survol

HTML

CSS

JS

Recommandé

Animation d'ombre de texte

Un code de Metehan

Animation de bouton au survol

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS