-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
121 lines (110 loc) · 3.63 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no">
<title>WhatsApp</title>
<link rel="manifest" href="manifest.json">
<style>
body {
background-color: #0C0C0C;
margin: 0;
overflow: hidden;
background-image: url('0.jpeg');
background-size: cover;
background-position: center;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
}
.buttons-container {
position: relative;
width: 100%;
height: 100%;
user-select: none;
}
.button,
.new-button {
position: absolute;
width: 70px;
height: 70px;
border: none;
background: none;
cursor: pointer;
outline: none;
}
.new-button {
top: 65%;
left: 50%;
transform: translateX(-50%);
}
button {
touch-action: manipulation;
}
</style>
</head>
<body>
<div class="buttons-container" id="buttonsContainer">
<button class="button" style="top: 35%; left: 15%;" data-index="1"></button>
<button class="button" style="top: 35%; left: 42%;" data-index="2"></button>
<button class="button" style="top: 35%; left: 72%;" data-index="3"></button>
<button class="button" style="top: 48%; left: 15%;" data-index="4"></button>
<button class="button" style="top: 48%; left: 42%;" data-index="5"></button>
<button class="button" style="top: 48%; left: 72%;" data-index="6"></button>
<button class="button" style="top: 60%; left: 15%;" data-index="7"></button>
<button class="button" style="top: 60%; left: 42%;" data-index="8"></button>
<button class="button" style="top: 60%; left: 72%;" data-index="9"></button>
<button class="button" style="top: 72%; left: 42%;" data-index="0"></button>
</div>
<script>
const container = document.getElementById('buttonsContainer');
const buttons = document.querySelectorAll('.button');
const imageUrls = ['0.jpeg', '1.jpeg', '2.jpeg', '3.jpeg', '4.jpeg'];
let currentImageIndex = 0;
const buttonPressLog = [];
// Preload all images including home.jpeg
const preloadedImages = [];
[...imageUrls, 'home.jpeg'].forEach((url, index) => {
const img = new Image();
img.src = url;
preloadedImages[index] = img;
});
buttons.forEach(button => {
button.addEventListener('click', () => {
const buttonIndex = button.dataset.index;
console.log(`Button ${buttonIndex} pressed`);
buttonPressLog.push(buttonIndex);
changeBackground();
});
});
function changeBackground() {
if (currentImageIndex < 3) {
currentImageIndex++;
document.body.style.backgroundImage = `url('${imageUrls[currentImageIndex]}')`;
} else if (currentImageIndex === 3) {
document.body.style.backgroundImage = `url('${imageUrls[4]}')`;
setTimeout(() => {
removeButtonsAndShowFinal();
}, 500);
}
}
function removeButtonsAndShowFinal() {
// Change background to home.jpeg
document.body.style.backgroundImage = `url('home.jpeg')`;
// Remove all buttons
container.innerHTML = '';
// Add the new invisible button
const newButton = document.createElement('button');
newButton.classList.add('new-button');
newButton.addEventListener('click', () => {
alert(`Password: ${buttonPressLog.join('')}`);
});
container.appendChild(newButton);
}
</script>
</body>
</html>