miles/moon-gaming
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

yes

Browse Source
This commit is contained in:
Robert
2025-03-10 18:01:51 +00:00
parent 409ecbfe8f
commit 53cc07dc30
3 changed files with 26 additions and 87 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Pass.css
+8 -25
View File
@@ -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;
}
pass.html
+5 -50
View File
@@ -9,56 +9,11 @@
<body>
<button class="buttonback" onclick="redirectToFile()">Back</button>
<label class="password_label" for="text_input">Password</label>
<input
id="text_input"
name="text_input"
class="password visible"
type="text"
spellcheck="false"
/>
<input class="password hidden" type="password" enabled />
<img
class="left"
src="https://raw.githubusercontent.com/Nik439/Images/master/cpc-hide-reveal/hinge.svg"
draggable="false"
/>
<img
class="handle"
src="https://raw.githubusercontent.com/Nik439/Images/master/cpc-hide-reveal/handle.svg"
draggable="false"
/>
<img
class="right"
src="https://raw.githubusercontent.com/Nik439/Images/master/cpc-hide-reveal/hinge.svg"
draggable="false"
/>
<input id="text_input" name="text_input" class="password visible" type="text" spellcheck="false">
<input class="password hidden" type="password" enabled>
<img class="left" src="https://raw.githubusercontent.com/Nik439/Images/master/cpc-hide-reveal/hinge.svg" draggable="false">
<img class="handle" src="https://raw.githubusercontent.com/Nik439/Images/master/cpc-hide-reveal/handle.svg" draggable="false">
<img class="right" src="https://raw.githubusercontent.com/Nik439/Images/master/cpc-hide-reveal/hinge.svg" draggable="false">
<script src="pass.js"></script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device+width, initial-scale=1.0">
<style>
.version {
position: fixed;
bottom: 10px;
right: 10px;
background-color: #f1f1f1;
padding: 5px 10px;
border-radius: 5px;
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
font-family: Arial, sans-serif;
font-size: 14px;
}
</style>
</head>
<body>
<div class="version" id="versionDisplay"></div>
<script>
document.getElementById('versionDisplay').redirectToFile('index.html') .textcontent = 'Back';
</script>
</body>
</html>
pass.js
+12 -11
View File
@@ -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;
});
})