WEBLEB
Home
Editor
Accedi
Pro
Italiano
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Modulo di Accesso Panda
2336
Andev.web
Apri nell'Editor
Pubblica il Tuo Codice
Consigliato
26 December 2024
Un codice di efficientcloud646
2 March 2025
Sistema di accesso HTML e CSS
28 November 2024
Pagina di destinazione - Hacking
HTML
Copy
Andev Web
Username:
Password:
Login
CSS
Copy
*{ padding: 0; margin: 0; box-sizing: border-box; font-family: "Poppins", sans-serif; } body { background-color: #f4c531; } .container { height: 31.25em; width: 31.25em; position: absolute; transform: translate(-50%, -50%); top: 50%; left: 50%; } form { width: 23.75em; height: 18.75em; background-color: #ffffff; position: absolute; transform: translate(-50%, -50%); top: calc(50% + 3.1em); left: 50%; padding: 0 3.1em; display: flex; flex-direction: column; justify-content: center; border-radius: 0.5em; } form label { display: block; margin-bottom: 0.2em; font-weight: 600; color: #2e0d30; } form input { font-size: 0.95em; font-weight: 400; color: #3f3554; padding: 0.3em; border: none; border-bottom: 0.12em solid #3f3554; outline: none; } form input:focus { border-color: #f4c531; } form input:not(:last-child) { margin-bottom: 0.9em; } form button { font-size: 0.95em; padding: 0.8em 0; border-radius: 2em; border: none; cursor: pointer; outline: none; background-color: #f4c531; color: #2e0d30; text-transform: uppercase; font-weight: 600; letter-spacing: 0.15em; margin-top: 0.8em; transition: 0.5s ; } .panda-face { height: 7.5em; width: 8.4em; background-color: #ffffff; border: 0.18em solid #2e0d30; border-radius: 7.5em 7.5em 5.62em 5.62em; position: absolute; top: 2em; margin: auto; left: 0; right: 0; } .ear-l, .ear-r { background-color: #3f3554; height: 2.5em; width: 2.81em; border: 0.18em solid #2e0d30; border-radius: 2.5em 2.5em 0 0; top: 1.75em; position: absolute; } .ear-l { transform: rotate(-38deg); left: 10.75em; } .ear-r { transform: rotate(38deg); right: 10.75em; } .blush-l, .blush-r { background-color: #ff8bb1; height: 1em; width: 1.37em; border-radius: 50%; position: absolute; top: 4em; } .blush-l { transform: rotate(25deg); left: 1em; } .blush-r { transform: rotate(-25deg); right: 1em; } .eye-l, .eye-r { background-color: #3f3554; height: 2.18em; width: 2em; border-radius: 2em; position: absolute; top: 2.18em; } .eye-l { left: 1.37em; transform: rotate(-20deg); } .eye-r { right: 1.37em; transform: rotate(20deg); } .eyeball-l, .eyeball-r { height: 0.6em; width: 0.6em; background-color: #ffffff; border-radius: 50%; position: absolute; left: 0.6em; top: 0.6em; transition: 1s all; } .eyeball-l { transform: rotate(20deg); } .eyeball-r { transform: rotate(-20deg); } .nose { height: 1em; width: 1em; background-color: #3f3554; position: absolute; top: 4.37em; margin: auto; left: 0; right: 0; border-radius: 1.2em 0 0 0.25em; transform: rotate(45deg); } .nose:before { content: ""; position: absolute; background-color: #3f3554; height: 0.6em; width: 0.1em; transform: rotate(-45deg); top: 0.75em; left: 1em; } .mouth, .mouth:before { height: 0.75em; width: 0.93em; background-color: transparent; position: absolute; border-radius: 50%; box-shadow: 0 0.18em #3f3554; } .mouth { top: 5.31em; left: 3.12em; } .mouth:before { content: ""; position: absolute; left: 0.87em; } .hand-l, .hand-r { background-color: #3f3554; height: 2.81em; width: 2.5em; border: 0.18em solid #2e0d30; border-radius: 0.6em 0.6em 2.18em 2.18em; transition: 1s all; position: absolute; top: 8.4em; } .hand-l { left: 7.5em; } .hand-r { right: 7.5em; } .paw-l, .paw-r { background-color: #3f3554; height: 3.12em; width: 3.12em; border: 0.18em solid #2e0d30; border-radius: 2.5em 2.5em 1.2em 1.2em; position: absolute; top: 26.56em; } .paw-l { left: 10em; } .paw-r { right: 10em; } .paw-l:before, .paw-r:before { position: absolute; content: ""; background-color: #ffffff; height: 1.37em; width: 1.75em; top: 1.12em; left: 0.55em; border-radius: 1.56em 1.56em 0.6em 0.6em; } .paw-l:after, .paw-r:after { position: absolute; content: ""; background-color: #ffffff; height: 0.5em; width: 0.5em; border-radius: 50%; top: 0.31em; left: 1.12em; box-shadow: 0.87em 0.37em #ffffff, -0.87em 0.37em #ffffff; } @media screen and (max-width: 500px) { .container { font-size: 14px; } }
JS
Copy
let usernameRef = document.getElementById("username"); let passwordRef = document.getElementById("password"); let eyeL = document.querySelector(".eyeball-l"); let eyeR = document.querySelector(".eyeball-r"); let handL = document.querySelector(".hand-l"); let handR = document.querySelector(".hand-r"); let normalEyeStyle = () => { eyeL.style.cssText = ` left:0.6em; top: 0.6em; `; eyeR.style.cssText = ` right:0.6em; top:0.6em; `; }; let normalHandStyle = () => { handL.style.cssText = ` height: 2.81em; top:8.4em; left:7.5em; transform: rotate(0deg); `; handR.style.cssText = ` height: 2.81em; top: 8.4em; right: 7.5em; transform: rotate(0deg) `; }; //When clicked on username input usernameRef.addEventListener("focus", () => { eyeL.style.cssText = ` left: 0.75em; top: 1.12em; `; eyeR.style.cssText = ` right: 0.75em; top: 1.12em; `; normalHandStyle(); }); //When clicked on password input passwordRef.addEventListener("focus", () => { handL.style.cssText = ` height: 6.56em; top: 3.87em; left: 11.75em; transform: rotate(-155deg); `; handR.style.cssText = ` height: 6.56em; top: 3.87em; right: 11.75em; transform: rotate(155deg); `; normalEyeStyle(); }); //When clicked outside username and password input document.addEventListener("click", (e) => { let clickedElem = e.target; if (clickedElem != usernameRef && clickedElem != passwordRef) { normalEyeStyle(); normalHandStyle(); } });