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; background-color: #50bdc7;
overflow: hidden; overflow: hidden;
} }
body:before { body:before {
z-index: -1; z-index: -1;
content: ""; content: "";
@@ -29,21 +28,17 @@ body:before {
transform: rotate(-23deg); transform: rotate(-23deg);
opacity: 0.7; opacity: 0.7;
} }
body.grabbing { body.grabbing {
cursor: grabbing; cursor: grabbing;
} }
body.grabbing * { body.grabbing * {
cursor: grabbing !important; cursor: grabbing !important;
} }
body .password_label { body .password_label {
position: absolute; position: absolute;
font-size: 25px; font-size: 25px;
transform: translateY(-70px); transform: translateY(-70px);
} }
body .password { body .password {
font-size: 20px; font-size: 20px;
outline: none; outline: none;
@@ -51,13 +46,11 @@ body .password {
height: 80px; height: 80px;
border: 1px solid #686868; border: 1px solid #686868;
} }
body .password.visible { body .password.visible {
letter-spacing: 12px; letter-spacing: 12px;
padding: 20px 7px 20px 35px; padding: 20px 7px 20px 35px;
color: black; color: black;
} }
body .password.hidden { body .password.hidden {
padding: 20px; padding: 20px;
font-size: 50px; 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"); background-image: url("https://raw.githubusercontent.com/Nik439/Images/master/cpc-hide-reveal/glass.svg");
transform-origin: 50% 100%; transform-origin: 50% 100%;
} }
body .password.hidden.slide { body .password.hidden.slide {
transform: rotateX(180deg); transform: rotateX(180deg);
} }
body img { body img {
position: absolute; position: absolute;
user-select: none; user-select: none;
} }
body img.left { body img.left {
transform: translate(-100px, 40px); transform: translate(-100px, 40px);
} }
body img.right { body img.right {
transform: translate(100px, 40px); transform: translate(100px, 40px);
} }
body img.handle { body img.handle {
transform: translateY(-40px); transform: translateY(-40px);
z-index: 3; z-index: 3;
transform-origin: 50% calc(50% + 80px); transform-origin: 50% calc(50% + 80px);
cursor: grab; cursor: grab;
} }
div buttonback { button.buttonback {
position: absolute;
top: 10px;
left: 10px;
color: blue; color: blue;
font-size: 16px; text-align: left;
vertical-align: text-top;
background-color: black;
border: none; border: none;
padding: 10px 20px; padding: 10px 20px;
cursor: pointer; cursor: pointer;
text-align: center; font-size: 16px;
vertical-align: text-top;
border-radius: 5px;
}
button.buttonback:hover {
background-color: #333;
}
button.buttonback:active {
background-color: #555;
} }
pass.html
+6 -51
View File
@@ -9,56 +9,11 @@
<body> <body>
<button class="buttonback" onclick="redirectToFile()">Back</button> <button class="buttonback" onclick="redirectToFile()">Back</button>
<label class="password_label" for="text_input">Password</label> <label class="password_label" for="text_input">Password</label>
<input <input id="text_input" name="text_input" class="password visible" type="text" spellcheck="false">
id="text_input" <input class="password hidden" type="password" enabled>
name="text_input" <img class="left" src="https://raw.githubusercontent.com/Nik439/Images/master/cpc-hide-reveal/hinge.svg" draggable="false">
class="password visible" <img class="handle" src="https://raw.githubusercontent.com/Nik439/Images/master/cpc-hide-reveal/handle.svg" draggable="false">
type="text" <img class="right" src="https://raw.githubusercontent.com/Nik439/Images/master/cpc-hide-reveal/hinge.svg" draggable="false">
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> <script src="pass.js"></script>
</body> </body>
</html> </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 text = document.querySelector('input.password.visible');
const pass = document.querySelector('input.password.hidden'); const pass = document.querySelector('input.password.hidden');
const handle = document.querySelector('img.handle'); const handle = document.querySelector('img.handle');
text.addEventListener('input', (e) => { text.addEventListener('input', (e)=>{
pass.value = e.target.value; pass.value = e.target.value;
}); });
@@ -37,30 +38,30 @@ let startingPos;
let paneUp = true; let paneUp = true;
let angle; let angle;
handle.addEventListener('mousedown', (e) => { handle.addEventListener('mousedown', (e)=>{
startingPos = e.clientY; startingPos = e.clientY;
document.body.classList.add('grabbing'); document.body.classList.add('grabbing');
}); })
document.addEventListener('mousemove', (e) => { document.addEventListener('mousemove', (e)=>{
if (startingPos) { if (startingPos) {
if (paneUp) { if (paneUp) {
if (e.clientY > startingPos && e.clientY < startingPos + 160) { if (e.clientY > startingPos && e.clientY < startingPos+160) {
angle = ((e.clientY - startingPos) * 180) / 160; angle = ((e.clientY-startingPos) * 180) / 160;
pass.style.transform = `rotateX(${angle}deg)`; pass.style.transform = `rotateX(${angle}deg)`;
handle.style.transform = `translateY(-40px) rotateX(${angle}deg)`; handle.style.transform = `translateY(-40px) rotateX(${angle}deg)`;
} }
} else { } else {
if (e.clientY < startingPos && e.clientY > startingPos - 160) { if (e.clientY < startingPos && e.clientY > startingPos-160) {
angle = 360 + ((e.clientY - startingPos - 160) * 180) / 160; angle = 360 + ((e.clientY-startingPos-160) * 180) / 160;
pass.style.transform = `rotateX(${angle}deg)`; pass.style.transform = `rotateX(${angle}deg)`;
handle.style.transform = `translateY(-40px) rotateX(${angle}deg)`; handle.style.transform = `translateY(-40px) rotateX(${angle}deg)`;
} }
} }
} }
}); })
document.addEventListener('mouseup', (e) => { document.addEventListener('mouseup', (e)=>{
document.body.classList.remove('grabbing'); document.body.classList.remove('grabbing');
if (startingPos) { if (startingPos) {
if (angle >= 90) { if (angle >= 90) {
@@ -75,4 +76,4 @@ document.addEventListener('mouseup', (e) => {
} }
startingPos = undefined; startingPos = undefined;
}); })