-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
115 lines (99 loc) · 3.92 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
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: #000000;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
overflow: hidden;
}
#myButton {
z-index: 10;
background-color: purple;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
#overlay {
z-index: 1;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0.75;
}
</style>
</head>
<body>
<div id="overlay"></div>
<button id="myButton">Trust me, Bro</button>
<script>
let scale = 1;
let fontSize = 16;
let isFirstClick = true;
const button = document.getElementById("myButton");
const fonts = ["Arial", "Verdana", "Helvetica", "Tahoma", "Trebuchet MS", "Times New Roman", "Georgia", "Garamond", "Courier New", "Brush Script MT"];
// Create audio element and set initial volume to 0.1
const audio = new Audio('/assets/music.mp3');
audio.volume = 0.1;
button.onclick = function() {
scale += 0.2;
fontSize += 2;
this.style.transform = `scale(${scale})`;
this.style.fontSize = `${fontSize}px`;
if (isFirstClick) {
this.textContent = "MORE";
isFirstClick = false;
} else {
const randomColor = '#' + Math.floor(Math.random()*16777215).toString(16);
this.style.backgroundColor = randomColor;
const randomFont = fonts[Math.floor(Math.random() * fonts.length)];
this.style.fontFamily = randomFont;
// Increase volume by 10% each click, up to a maximum of 100%
audio.volume = Math.min(audio.volume + 0.1, 1);
}
audio.play();
// Generate a random number of images between 1 and 3
const numImages = Math.floor(Math.random() * 3) + 1;
for (let i = 0; i < numImages; i++) {
fetch('/assets/anim.png')
.then(response => response.blob())
.then(blob => {
const img = new Image();
img.onload = function() {
img.style.position = 'absolute';
// Set the position of the image to a random location on the screen
img.style.left = Math.random() * window.innerWidth + 'px';
img.style.top = Math.random() * window.innerHeight + 'px';
// Set the z-index of the image to a random integer between 1 and 100
img.style.zIndex = Math.floor(Math.random() * 100) + 1;
img.style.pointerEvents = 'none';
// Set the size of the image to a random value between 25% and 90%
const size = Math.random() * (50 - 25) + 25;
img.style.width = size + '%';
img.style.height = 'auto';
// Set the opacity of the image to a random value between 0.25 and 0.9
img.style.opacity = Math.random() * (0.9 - 0.25) + 0.25;
// Append the image to the body of the document
document.body.appendChild(img);
}
img.src = URL.createObjectURL(blob);
});
}}
document.body.onclick = function() {
const randomColor = '#' + Math.floor(Math.random()*16777215).toString(16);
document.getElementById('overlay').style.backgroundColor = randomColor;
}
</script>
</body>
</html>