-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy paththenletsmakevdaypancakes.html
64 lines (56 loc) · 2.07 KB
/
thenletsmakevdaypancakes.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Valentine's Day 2025 - pancake timer!</title>
<style>
@font-face {
font-family: 'Raster Forge';
src: url('RasterForgeRegular.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
.timer {
font-size: 1em;
margin: 20px;
font-family: 'Raster Forge';
}
</style>
</head>
<body>
<div>
<div style="position: relative; display: inline-block;">
<img src="window.png">
<image style="position: absolute; top: 20px; left: 20px;" src="yaypancakes.png"></image>
<image style="position: absolute; top: 120px; left: 90px;" src="pancakecounter.png"></image>
<img style="position: absolute; top: 190px; left: 140px;" src="backbutton.png">
<a href="vdaywillu.html">
<img style="position: absolute; top: 190px; left: 140px;" src="backbutton.png"></a>
<!-- 'Yes' button starts the timer -->
<img id="yesButton" style="position: absolute; top: 190px; left: 205px; cursor: pointer;"
src="startbutton.png" onclick="startTimer()">
</div>
</div>
<div style="position: absolute; top: 141px; left: 103px;" class="timer" id="timer">1:00</div>
<script>
let timeLeft = 60;
let timerInterval;
function startTimer() {
if (!timerInterval) {
timerInterval = setInterval(() => {
let minutes = Math.floor(timeLeft / 60);
let seconds = timeLeft % 60;
document.getElementById("timer").innerText = minutes + ":" + (seconds < 10 ? "0" : "") + seconds;
if (timeLeft <= 0) {
clearInterval(timerInterval);
timerInterval = null;
document.getElementById("timer").innerText = "FLIP!";
}
timeLeft--;
}, 1000);
}
}
</script>
</body>
</html>