-
Notifications
You must be signed in to change notification settings - Fork 0
/
j0jyg.html
134 lines (113 loc) · 3.92 KB
/
j0jyg.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
122
123
124
125
126
127
128
129
130
131
132
133
134
<!DOCTYPE html>
<html>
<head>
<title>Vijfde gerecht</title>
<style>
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
h1 {
font-weight: normal;
}
li {
display: inline-block;
font-size: 1.5em;
list-style-type: none;
padding: 1em;
text-transform: uppercase;
}
li span {
display: block;
font-size: 4.5rem;
}
/* general styling */
html, body {
height: 100%;
margin: 0;
}
body {
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
background-color: #786afa;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
font-family: -apple-system,
BlinkMacSystemFont,
"Segoe UI",
Roboto,
Oxygen-Sans,
Ubuntu,
Cantarell,
"Helvetica Neue",
sans-serif;
}
.container {
color: #333;
margin: 0 auto;
padding: 0.5rem;
text-align: center;
}
#course{
max-width: 600px;
}
#course img{
border-radius: 80px;
margin-bottom: 40px;
}
#course h1{
margin-bottom: 30px;
}
#course p{
margin-bottom: 10px;
line-height: 25px;
}
</style>
</head>
<body>
<div id="timer" class="container">
<h1>Countdown tot het vijfde gerecht:</h1>
<ul>
<li><span id="days"></span>Dagen</li>
<li><span id="hours"></span>Uur</li>
<li><span id="minutes"></span>Minuten</li>
<li><span id="seconds"></span>Seconde</li>
</ul>
</div>
<div id="course" class="container">
<img src="https://media.giphy.com/media/svCK1QQtolnXy/giphy.gif" alt="">
<h1>Viva la chocolate</h1>
<p>How wonderful that we could first connect as schoonvader en schoondochter over a chocolate dessert board at Wicked Wines. Instant common ground that we could build on. Every bite of chocolate, every bit of laughter brought us closer together. And here we are now - a year and a half later, and I couldn’t be luckier to have you in my life as father figure. You have been a beacon of strength and security for me in this time and I have enjoyed every second revelling in sweetness with you. And of course - it is only fitting that I would be preparing our fifth course. The most decadent, goeye, chocolate fondant you could dream of. With a crispy exterior and a soft, warm, molten interior (just like you).</p>
<p><i>Liefs, Andria</i></p>
</div>
</body>
<script>
var dateString = 'Jul 19, 2020 20:00:00';
if(!!window.location.search || new Date() > new Date(dateString)){
document.querySelector('#timer').style.display = 'none';
}else{
document.querySelector('#course').style.display = 'none';
}
const second = 1000,
minute = second * 60,
hour = minute * 60,
day = hour * 24;
let countDown = new Date(dateString).getTime(),
x = setInterval(function() {
let now = new Date().getTime(),
distance = countDown - now;
document.getElementById('days').innerText = Math.floor(distance / (day)),
document.getElementById('hours').innerText = Math.floor((distance % (day)) / (hour)),
document.getElementById('minutes').innerText = Math.floor((distance % (hour)) / (minute)),
document.getElementById('seconds').innerText = Math.floor((distance % (minute)) / second);
//do something later when date is reached
//if (distance < 0) {
// clearInterval(x);
// 'IT'S MY BIRTHDAY!;
//}
}, second)
</script>
</html>