WEBLEB
Home
Editor
Accedi
Pro
Italiano
English
Français
Español
Português
Deutsch
Italiano
हिंदी
MODULO DI ACCESSO CON ID UNIVOCO
471
Kyekyeku-tech
Apri nell'Editor
Pubblica il Tuo Codice
Consigliato
10 May 2025
Un codice di jrj332790
12 April 2025
Un codice di fadlanbryan22
23 April 2025
Un codice di Metehan
HTML
Copy
OB Prime Staff Portal
CSS
Copy
* { 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
Copy
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script> const users = { "AK1253": "Mr. Godwin", "K12342": "Ms Victoria", "F202426": "MR Daniel" }; 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' }); } }