-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.php
143 lines (121 loc) · 4.65 KB
/
index.php
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
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
<!doctype html>
<html lang="">
<head>
<meta charset="utf-8">
<title>Annoying Beep</title>
<meta name="description" content="Finally, a website for beeping. frustrate and annoy your friend, family, and coworkers with the most powerful tool on the web.">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta property="og:title" content="Annoying Beep">
<meta property="og:url" content="https://annoyingbeep.com">
<meta property="og:image" content="https://annoyingbeep.com/images/social.png">
<link rel="stylesheet" href="/paper.min.css">
<link rel="stylesheet" href="/app.css">
<meta name="theme-color" content="#fafafa">
<link rel="apple-touch-icon" sizes="180x180" href="/images/icons/180x180-maskable.png">
<link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16.png">
<?php include_once 'meta.php'; ?>
<link rel="manifest" href="/manifest.json" crossorigin="use-credentials">
<link rel="mask-icon" href="/images/safari-pinned-tab.svg" color="#DC2626">
<meta name="msapplication-TileColor" content="#DC2626">
<meta name="theme-color" content="#DC2626">
<script defer data-domain="annoyingbeep.com" src="https://plausible.io/js/script.js"></script>
<script type="text/javascript">
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('/service-worker.js', {
scope: '.'
}).then(async () => {
const registration = navigator.serviceWorker.ready;
if ('periodicSync' in registration) {
const status = await navigator.permissions.query({
name: 'periodic-background-sync',
});
if (status.state === 'granted') {
try {
await registration.periodicSync.register('all', {
minInterval: 24 * 60 * 60 * 1000
});
console.log('Periodic background sync registered!');
} catch (e) {
console.error(`Periodic background sync failed:\n${e}`);
}
}
}
});
self.addEventListener('periodicsync', (event) => {
console.log('Periodicsync')
});
}
</script>
</head>
<body class="h-screen">
<div class="main-container">
<div class="container text-center flex-center">
<h1>
Annoying beep
</h1>
<p>
Finally, a website for beeping.
</p>
<p>
Frustrate and annoy your friend, family, and coworkers with the most powerful tool on the web.
</p>
<br>
<div class="margin-top">
<button id="start">Start that beep</button>
<button id="stop1" hidden>Stop</button>
<button id="stop2" hidden>No seriously, stop</button>
<button id="stop3" hidden>Please</button>
<div id="sorry" hidden class="alert-danger alert margin-top">
Sorry, stopping simply isn't an option
</div>
</div>
<br><br>
<div class="flex-center text-center margin-top padding-top">
<img src="/images/mum.png" height="100" width="100" class="round mx-auto" alt="Mummy"/>
<p>
“What? That's stupid, I don't get it.”
</p>
<p class="text-md">
- My mum
</p>
</div>
<audio id="audio" loop>
<source src="beep.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
</div>
<footer>
<div class="container text-center padding-bottom text-small">
Made with annoyance and hatred 👹 by <a href="https://www.buymeacoffee.com/captenmasin" target="_blank">Mason</a>
</div>
</footer>
</div>
<script>
const stopButton1 = document.getElementById('stop1')
const stopButton2 = document.getElementById('stop2')
const stopButton3 = document.getElementById('stop3')
const startButton = document.getElementById('start')
const sorryContent = document.getElementById('sorry')
startButton.addEventListener('click', function () {
stopButton1.removeAttribute('hidden')
startButton.setAttribute('disabled', true)
const audio = document.getElementById("audio");
audio.play()
})
stopButton1.addEventListener('click', function () {
stopButton1.setAttribute('hidden', true)
stopButton2.removeAttribute('hidden')
})
stopButton2.addEventListener('click', function () {
stopButton2.setAttribute('hidden', true)
sorryContent.removeAttribute('hidden')
stopButton3.removeAttribute('hidden')
})
stopButton3.addEventListener('click', function () {
stopButton3.setAttribute('disabled', true)
sorryContent.classList.add("wiggle");
})
</script>
</body>
</html>