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

best i can

Browse Source
This commit is contained in:
Robert
2025-03-10 17:58:38 +00:00
parent 9a5ad29533
commit 409ecbfe8f
5 changed files with 66 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Pass.css
+28 -2
View File
@@ -15,6 +15,7 @@ body {
background-color: #50bdc7;
overflow: hidden;
}
body:before {
z-index: -1;
content: "";
@@ -28,17 +29,21 @@ 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;
@@ -46,11 +51,13 @@ 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;
@@ -62,26 +69,45 @@ 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;
}
button {
div buttonback {
color: blue;
text-decoration-color: black;
font-size: 16px;
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;
}
node_modules/.package-lock.json
Generated Vendored
+1 -1
View File
@@ -1,5 +1,5 @@
{
"name": "fun-miles",
"name": "give-this-a-new-name",
"lockfileVersion": 3,
"requires": true,
"packages": {}
package-lock.json
Generated
+1 -1
View File
@@ -1,5 +1,5 @@
{
"name": "fun-miles",
"name": "give-this-a-new-name",
"lockfileVersion": 3,
"requires": true,
"packages": {}
pass.html
+25 -9
View File
@@ -1,6 +1,3 @@
<div class="button">
<button onclick="redirectToFile()">Back</button>
</div>
<!DOCTYPE html>
<html lang="en">
<head>
@@ -10,13 +7,32 @@
<link rel="stylesheet" href="Pass.css" />
</head>
<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">
<script src="pass.js"></script>
<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>
pass.js
+11 -12
View File
@@ -25,12 +25,11 @@ 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;
});
@@ -38,30 +37,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) {
@@ -76,4 +75,4 @@ document.addEventListener('mouseup', (e)=>{
}
startingPos = undefined;
})
});