-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.htm
148 lines (139 loc) · 6.94 KB
/
index.htm
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
144
145
146
147
148
<!-- You're kidding me right? You're looking at this source? Ok, I'll annotate it...-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>WTF Day Is It?</title>
<meta name="description" content="What the fuck day is it? Because I was bad remembering the day before I was stuck in my house">
<!-- Jesus Christ all this shit to get a picture to show up when I send this to someone on facebook and twitter. -->
<meta name="twitter:card" value="summary">
<meta property="og:title" content="WTF Day Is It?">
<meta property="og:type" content="website">
<meta property="og:url" content="https://wtfdayisit.com">
<meta property="og:image" content="https://wtfdayisit.com/images/year.jpg">
<meta property="og:description" content="I couldn't remember the day of the week before I was stuck in the house, now, forget it. I needed a stupid-simple thing to remind me the day of the week...here you go">
<!-- I like this font -->
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Bebas+Neue&display=swap">
<!-- Smart resetting because I'm lazy and browsers are stupid in stupid ways -->
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css">
<!-- "...but why did he import momentjs that's a massive libarary, he could have hand written his own
bespoke Date libary it would have been so much cleaner..." my response: "I uh, don't care" -->
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
<!-- Here's the CSS...grids are more fun than flexbox -->
<style>
* {
-webkit-overflow-scrolling: touch;
box-sizing: inherit;
}
*::before, *::after {
box-sizing: inherit;
}
html {
box-sizing: border-box;
height: 100vh;
overflow: hidden;
}
body {
align-items: center;
color: #444;
display: grid;
font-family: 'Bebas Neue', cursive;
grid-template-columns: 1fr;
grid-template-rows: 1fr;
height: 100%;
line-height: 1.5;
margin: 0;
min-width: 320px;
overflow-y: scroll;
padding: 0;
text-align: center;
width: 100vw;
}
h1 {
font-size: 6.2rem;
line-height: 1;
margin: 0;
padding: 0 10px;
}
h2 {
color: #aaa;
font-size: 2.5rem;
line-height: 1;
margin: 0;
padding: 5px 10px;
}
p {
color: #999;
font-size: 2rem;
line-height: 1.3;
margin: 0;
padding: 0 10px;
}
.year {
border-radius: 1%;
border: 5px solid #444;
width: 320px;
}
</style>
<!-- if you're wondering where the media queries are...look at the site again...you think I need a media query? -->
</head>
<body>
<main>
<h2 class="date"></h2>
<img class="year" src="images/year.jpg" alt="Day? Week? Month? I got no fucking clue. 2020? 1920? 2004? No idea! At this point you could tell me it's the 4th quiznak of melmar and I'd go with it">
<h1>Today is <span class="the-fucking-day"></span></h1>
<p class="snark"></p>
</main>
<!--
I considered doing this in Vue or React just to see if I could get someone to go on a
diatribe about how over engineered this is...but that seemed too much like work so...
-->
<script>
(function() {
/** I'm happy to update this list! If you're reading this, you're crazy so send me a PR with some ideas **/
var snarky = [
'Did you shower today?',
'When was the last time you brushed your teeth?',
'Do some crunches tubby.',
'No dummy, covid-19 is not caused by 5G.',
'You know, you could have just looked at your fucking phone dummy',
'You should call someone you miss.',
'When was the last time you washed those sweatpants?',
'Watching The Office is not a substitute for checking email.',
'Turns out, I cannot remember the date either',
'Just...just go back to sleep.',
'No, using wet naps are not a good shower substitute.',
'I assumed there\'d be more leather in the apocalypse',
'Your mom called, she wants to you to continue the social distancing even after the lockdown',
'That friend, who thinks the earth is flat, is not someone you should listen to about covid-19.',
'Oh please, you were gonna cancel your plans anyway to sit on the couch.',
'Look, we all know you don\'t have friends, so going out was never an option.',
'See. All of those meetings could have been emails.',
'Yes another day of hate liking posts.',
'Still 2020...I think',
'It\'s ok. You can ask what\'s for dinner at lunch',
'Every White House briefing you watch drops your IQ by 5 points...and most of you already owe',
'Leftover Nachos are fine for breakfast.',
'You were gonna binge that show anyway.',
'You\'re someone\'s reason to get out of bed...because you scheduled a stupid Zoom meeting too early',
'Ugh this again? I mean \"good morning!\"',
'We can\'t leave lockdown till you use up all your TP.',
'Don\'t blame me I didn\'t open the black sarcophagus',
'If you don\'t have kids and you are complaining about lockdown–know that I hate you',
'Lets play a game...guess how many people on your last Zoom meeting were watching PornHub in the background',
'I would like to apologize to the world because you\'re gonna have to deal with my homeschooled kids eventually',
'Guess you can work on that "book" you\'re always on about....lol',
'If I get one more email from some random-ass online shop telling me what they\'re doing "in these times" I\'m gonna go lick a hospital doorknob'
];
/** What's up with all thees var's what is this 1998? I feel your eye twitch and I love it **/
var randomSnark = Math.floor(Math.random() * (snarky.length) + 1) - 1;
var dt = moment();
document.querySelector('.the-fucking-day').innerHTML = dt.format('dddd');
document.querySelector('.date').innerHTML = dt.format('MMMM Do');
document.querySelector('.snark').innerHTML = snarky[randomSnark];
})();
</script>
<!-- No analytics: we aren't watching you because we don't care -->
</body>
</html>