diff --git a/Pass.css b/Pass.css
index 28c3a35e..e26b3552 100644
--- a/Pass.css
+++ b/Pass.css
@@ -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;
}
\ No newline at end of file
diff --git a/node_modules/.package-lock.json b/node_modules/.package-lock.json
index 1d78fa9d..73711f0c 100644
--- a/node_modules/.package-lock.json
+++ b/node_modules/.package-lock.json
@@ -1,5 +1,5 @@
{
- "name": "fun-miles",
+ "name": "give-this-a-new-name",
"lockfileVersion": 3,
"requires": true,
"packages": {}
diff --git a/package-lock.json b/package-lock.json
index 1d78fa9d..73711f0c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,5 +1,5 @@
{
- "name": "fun-miles",
+ "name": "give-this-a-new-name",
"lockfileVersion": 3,
"requires": true,
"packages": {}
diff --git a/pass.html b/pass.html
index 4436a449..40b95400 100644
--- a/pass.html
+++ b/pass.html
@@ -1,6 +1,3 @@
-
-
-
@@ -10,13 +7,32 @@
+
-
-
-
-
-
-
+
+
+
+
+
+
diff --git a/pass.js b/pass.js
index 7f6062d8..b7d6f81d 100644
--- a/pass.js
+++ b/pass.js
@@ -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;
-})
\ No newline at end of file
+});
\ No newline at end of file