From 53cc07dc30a36e712aff7176cde42434fa01ab8c Mon Sep 17 00:00:00 2001 From: Robert <152218269+PenguinRobert1@users.noreply.github.com> Date: Mon, 10 Mar 2025 18:01:51 +0000 Subject: [PATCH] yes --- Pass.css | 33 ++++++++------------------------ pass.html | 57 ++++++------------------------------------------------- pass.js | 23 +++++++++++----------- 3 files changed, 26 insertions(+), 87 deletions(-) diff --git a/Pass.css b/Pass.css index e26b3552..16e23e2a 100644 --- a/Pass.css +++ b/Pass.css @@ -15,7 +15,6 @@ body { background-color: #50bdc7; overflow: hidden; } - body:before { z-index: -1; content: ""; @@ -29,21 +28,17 @@ body:before { transform: rotate(-23deg); opacity: 0.7; } - body.grabbing { cursor: grabbing; } - body.grabbing * { cursor: grabbing !important; } - body .password_label { position: absolute; font-size: 25px; transform: translateY(-70px); } - body .password { font-size: 20px; outline: none; @@ -51,13 +46,11 @@ body .password { height: 80px; border: 1px solid #686868; } - body .password.visible { letter-spacing: 12px; padding: 20px 7px 20px 35px; color: black; } - body .password.hidden { padding: 20px; font-size: 50px; @@ -69,45 +62,35 @@ body .password.hidden { background-image: url("https://raw.githubusercontent.com/Nik439/Images/master/cpc-hide-reveal/glass.svg"); transform-origin: 50% 100%; } - body .password.hidden.slide { transform: rotateX(180deg); } - body img { position: absolute; user-select: none; } - body img.left { transform: translate(-100px, 40px); } - body img.right { transform: translate(100px, 40px); } - body img.handle { transform: translateY(-40px); z-index: 3; transform-origin: 50% calc(50% + 80px); cursor: grab; } -div buttonback { +button.buttonback { + position: absolute; + top: 10px; + left: 10px; color: blue; - font-size: 16px; + text-align: left; + vertical-align: text-top; + background-color: black; border: none; padding: 10px 20px; cursor: pointer; - text-align: center; - vertical-align: text-top; - border-radius: 5px; -} - -button.buttonback:hover { - background-color: #333; -} - -button.buttonback:active { - background-color: #555; + font-size: 16px; } \ No newline at end of file diff --git a/pass.html b/pass.html index 40b95400..bab49dc2 100644 --- a/pass.html +++ b/pass.html @@ -9,56 +9,11 @@ - - - - - + + + + + - - - - - - - - - -
- - - - + \ No newline at end of file diff --git a/pass.js b/pass.js index b7d6f81d..7f6062d8 100644 --- a/pass.js +++ b/pass.js @@ -25,11 +25,12 @@ document.addEventListener('DOMContentLoaded', () => { }); }); + const text = document.querySelector('input.password.visible'); const pass = document.querySelector('input.password.hidden'); const handle = document.querySelector('img.handle'); -text.addEventListener('input', (e) => { +text.addEventListener('input', (e)=>{ pass.value = e.target.value; }); @@ -37,30 +38,30 @@ let startingPos; let paneUp = true; let angle; -handle.addEventListener('mousedown', (e) => { +handle.addEventListener('mousedown', (e)=>{ startingPos = e.clientY; document.body.classList.add('grabbing'); -}); +}) -document.addEventListener('mousemove', (e) => { +document.addEventListener('mousemove', (e)=>{ if (startingPos) { if (paneUp) { - if (e.clientY > startingPos && e.clientY < startingPos + 160) { - angle = ((e.clientY - startingPos) * 180) / 160; + if (e.clientY > startingPos && e.clientY < startingPos+160) { + angle = ((e.clientY-startingPos) * 180) / 160; pass.style.transform = `rotateX(${angle}deg)`; handle.style.transform = `translateY(-40px) rotateX(${angle}deg)`; } } else { - if (e.clientY < startingPos && e.clientY > startingPos - 160) { - angle = 360 + ((e.clientY - startingPos - 160) * 180) / 160; + if (e.clientY < startingPos && e.clientY > startingPos-160) { + angle = 360 + ((e.clientY-startingPos-160) * 180) / 160; pass.style.transform = `rotateX(${angle}deg)`; handle.style.transform = `translateY(-40px) rotateX(${angle}deg)`; } } } -}); +}) -document.addEventListener('mouseup', (e) => { +document.addEventListener('mouseup', (e)=>{ document.body.classList.remove('grabbing'); if (startingPos) { if (angle >= 90) { @@ -75,4 +76,4 @@ document.addEventListener('mouseup', (e) => { } startingPos = undefined; -}); \ No newline at end of file +}) \ No newline at end of file