-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
414 lines (369 loc) · 21.4 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
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
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
<!DOCTYPE html>
<html lang="en" data-theme="lightest">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="canonical" href="https://arewefuckedyet.com">
<title>Are we fucked yet? There are a lot of reasons we might!</title>
<meta name="description" content="Did you ever want to know if we were fucked already? Actually we might be quite close. Find the answer here and leave your vote!">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:creator" content="@bengthedev">
<meta name="twitter:url" content="https://arewefuckedyet.com">
<meta name="twitter:title" content="Are we fucked yet? We're working on it!">
<meta name="twitter:description" content="A dark view on current world politics and climate change">
<meta name="twitter:image" content="https://arewefuckedyet.com/img/social.png?1">
<meta property="og:title" content="Are we fucked yet? We're working on it!">
<meta property="og:type" content="website">
<meta property="og:image" content="https://arewefuckedyet.com/img/social.png?1">
<meta property="og:url" content="https://arewefuckedyet.com">
<meta property="og:description" content="A dark view on current world politics and climate change">
<link rel="icon" href="/favicon.ico">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="manifest" href="/site.webmanifest">
<link rel="apple-touch-icon" href="/icon.png">
<meta name="theme-color" content="#f67dbc">
<style> .affiliate-off .affiliate.text, .affiliate-off img.affiliate {display: none;}</style>
<link href="tailwind.css" rel="stylesheet" media="all">
<link rel="preconnect" href="https://usagelog.pagereply.com" />
<link rel="preconnect" href="https://yesno.pagereply.com" />
<script src="https://yesno.pagereply.com/arewefuckedyet.com/votejs" defer></script>
<script src="https://usagelog.pagereply.com/logjs/arewefuckedyet.com" defer></script>
</head>
<body class="affiliate-off">
<header class="min-h-screen lg:mb-12">
<div class="mt-4 mb-4 text-center lg:min-w-full lg:mb-6 lg:mt-16">
<h1 class="font-bold text-2xl mb-4">Are we fucked yet?</h1>
</div>
<div class="hero">
<div class="hero-content flex flex-col lg:flex-row-reverse">
<div class="lg:min-w-[960px]">
<div class="text-center">
<h2 class="text-6xl font-bold md:text-9xl" id="heading">
I honestly don't know
</h2>
<p class="mt-12 mb-5 text-3xl md:text-4xl">
<span id="subtext">There's <b>certainly</b> someone out there doing something <b>stupid</b>!</span>
</p>
</div>
</div>
</div>
</div>
<div class="mt-4 mb-4 text-center lg:min-w-full lg:mb-24 lg:mt-16">
<form id="vote_yesno">
<p class="font-bold text-2xl mb-4">What do you think?</p>
<button class="btn btn-primary disabled:text-slate-600" name="yes" id="vote_yes">Yes</button>
<button class="btn btn-secondary disabled:text-slate-600" name="no" id="vote_no">No</button>
<p id="userpoll" class="text-xl mt-4" title="How the page's users think we're fucked"> </p>
<p id="percentage" class="text-xl mt-4" title="State of being fucked"> </p>
</form>
<p class="mt-16 bottom-0">
<a class="btn btn-primary animate-bounce" href="#more" title="Read more">Read more!</a>
</p>
</div>
</header>
<main class="min-h-screen w-min-full p-6 bg-white" id="more">
<h2 class="text-4xl font-bold text-center mb-5 mt-16" style="color: hsl(var(--b1) / var(--tw-bg-opacity))">Why would we be fucked yet?</h2>
<p class="text-center text-slate-800" style="color: hsl(var(--b1) / var(--tw-bg-opacity))">Well, look around! I give you a few reasons:</p>
<div class="flex flex-wrap justify-center gap-2 mt-12">
<div class="card w-96 bg-base-100 shadow-xl">
<figure><img src="/img/explosion.jpg" class="max-h-[200px] w-full object-cover" alt="Nuclear bomb explosion mushroom cloud" loading="lazy" /></figure>
<div class="card-body">
<h3 class="card-title">War</h3>
<p>A superpower in possession of nuclear weapons with a maniac leader started a war lately.</p>
<p>Which had all the world's people having wet dreams about any kind of more weapons go very excited.</p>
</div>
</div>
<div class="card w-96 bg-base-100 shadow-xl">
<figure><img src="/img/bundestag.jpg" class="max-h-[200px] w-full object-cover" alt="German Bundestag with German flag" loading="lazy" /></figure>
<div class="card-body">
<h3 class="card-title">Germany</h3>
<p>Trust me, you don't want to see headlines like <a class="link" href="https://text.npr.org/1087137501" title="external link to article about Germany's military plans">Germany is supposedly building Europe's largest military</a>. Because, well, last time it went so well...</p>
<p>Ok, that one is a joke! Luckily it's not like that anymore.</p>
</div>
</div>
<div class="card w-96 bg-base-100 shadow-xl">
<figure><img src="/img/covid.jpg" class="max-h-[200px] w-full object-cover" alt="Earth depicted as corona virus - covid" loading="lazy" /></figure>
<div class="card-body">
<h3 class="card-title">Pandemic</h3>
<p>COVID-19 was bad, while not only having a huge death toll, producing long-term sickness and restricting our way of life as well as affecting mental health.</p>
<p>Next pandemics are to come, unfortunately.</p>
</div>
</div>
<div class="card w-96 bg-base-100 shadow-xl">
<figure><img src="/img/desert.jpg" class="max-h-[200px] w-full object-cover" alt="Dry tree in sand desert" loading="lazy" /></figure>
<div class="card-body">
<h3 class="card-title">Climate Change</h3>
<p>
And then... There's climate change.
This fucker – <a href="https://www.thedailybeast.com/un-climate-experts-to-the-world-were-already-fucked" class="link" title="external link to article about climate expert's view">without a doubt</a> – will make us, as a species with interplanetary ambitions and being relatively intelligent, hit the coffin.
If we're not going to pivot anytime soon, that is!
And we're doing very well to reach every single 'goal' here.
Right now it seems <a href="https://www.theguardian.com/environment/article/2024/may/08/world-scientists-climate-failure-survey-global-temperature" class="link" title="external link to an article about how we're probably going to blast past 1.5 degrees target">we're not going to reach our current goals</a>.
</p>
</div>
</div>
<div class="card w-96 bg-base-100 shadow-xl">
<figure><img src="/img/beer.jpg" class="max-h-[200px] w-full object-cover" alt="Beer bottle" loading="lazy" /></figure>
<div class="card-body">
<h3 class="card-title">Peak Beer</h3>
<p>
Germany is running out of beer or at <a href="https://www.bbc.com/news/world-europe-61490433" class="link" title="external link to article about beer bottle shortage in Germany">least bottles for said beverage</a>.<br>
This is bad! If there wasn't enough beer in Germany god knows what could happen!
</p>
</div>
</div>
<div class="card w-96 bg-base-100 shadow-xl">
<figure><img src="/img/plankton.jpg" class="max-h-[200px] w-full object-cover" alt="Maritime Life - plankton" loading="lazy" /></figure>
<div class="card-body">
<h3 class="card-title">Killing Marine Life</h3>
<p>
We're (well, our pollution) killing marine wildlife, <a href="https://www.sundaypost.com/fp/humanity-will-not-survive-extinction-of-most-marine-plants-and-animals/" class="link" title="external link to article about beer bottle shortage in Germany">especially plankton *</a>.<br>
Since plankton is one of the very roots in marine food chain this is awful in so many ways.
With plankton missing, most maritime species are going to die. And so are we!
<span class="text-xs mt-4 block">* It's only one data point and most likely not as bad as they write! Still we should take more care of our ecosystems!</span>
</p>
</div>
</div>
<div class="card w-96 bg-base-100 shadow-xl">
<figure><img src="/img/drought.jpg" class="max-h-[200px] w-full object-cover" alt="Soil dried by drought" loading="lazy" /></figure>
<div class="card-body">
<h3 class="card-title">Drought</h3>
<p>
2022 brought large parts of the northern hemisphere another pretty plague...
Europe, the US and China suffered (and are still suffering at the time of writing this) from the worst drought for 500 years.
We didn't have real rain for about 8 weeks where I live which is very unusual.
</p>
</div>
</div>
<div class="card w-96 bg-base-100 shadow-xl">
<figure><img src="/img/deforestation.jpg" class="max-h-[200px] w-full object-cover" alt="Deforestation" loading="lazy" /></figure>
<div class="card-body">
<h3 class="card-title">Deforestation</h3>
<p>
Wood pellets used to create heat in special furnaces are supposed to be a bit more climate friendly since, in theory, they're using a renewable source.<br>
Turns out (I know, you already guessed it) the technology <a href="https://www.nytimes.com/interactive/2022/09/07/world/europe/eu-logging-wood-pellets.html" class="link" title="external link to NYT article about wood pellets leading to deforestation">leads to even more deforestation</a>, because people don't regrow enough forests but just burn the old ones.<br>
Oh my, we're soo good at this!
</p>
</div>
</div>
<div class="card w-96 bg-base-100 shadow-xl">
<figure><img src="/img/rain-forest.jpg" class="max-h-[200px] w-full object-cover" alt="Rain forest - well, should be offsetting carbon" loading="lazy" /></figure>
<div class="card-body">
<h3 class="card-title">Carbon offset</h3>
<p>
Carbon offset doesn't work.
It's basically <a href="https://www.theguardian.com/environment/2023/jan/18/revealed-forest-carbon-offsets-biggest-provider-worthless-verra-aoe" class="link" title="external link to The Guardian article about Verra and carbon offset payments">just useless sh**</a>.
Who could have thought that buying yourself a clear conscience wouldn't work. I wouldn't even be surprised if it all was mostly an elaborate scam.
</p>
</div>
</div>
<div class="card w-96 bg-base-100 shadow-xl">
<figure><img src="/img/ai.jpg" class="max-h-[200px] w-full object-cover" alt="GPT4 as a computer chip illustration" loading="lazy" /></figure>
<div class="card-body">
<h3 class="card-title">AI</h3>
<p>
Fun fact: It might not be the singularity that kills us. Turns out a bit less than dumb text and conversation generator is sufficient.<br>
Why? Because those generators are very confident in what they're 'saying', even if it's utter nonsense.
While, until now, we had to rely on windbags like Trump, now everyone can create truthful sounding lies without much effort.
And hoping for people double (fact) checking what they read seems to be very optimistic to me.
</p>
</div>
</div>
<div class="card w-96 bg-base-100 shadow-xl">
<figure><img src="/img/robot.jpg" class="max-h-[200px] w-full object-cover" alt="Futurist robot that could be a killer robot" loading="lazy" /></figure>
<div class="card-body">
<h3 class="card-title">Military AI</h3>
<p>
Have I mentioned AI?<br>
Ah, yes, so <a href="https://www.vice.com/en/article/4a33gj/ai-controlled-drone-goes-rogue-kills-human-operator-in-usaf-simulated-test" class="link" title="external link to VICE article about AI Drone killing operator">the military is running tests</a> here as well.<br>
And boy, they're doing great!
I mean, this was a <s>simulation</s> thought experiment, but it still shows how <em>creative</em> an AI could get to reach its target.
So might get to the killer AI, after all!
</p>
</div>
</div>
<div class="card w-96 bg-base-100 shadow-xl">
<figure><img src="/img/windows.jpg" class="max-h-[200px] w-full object-cover" alt="Windows as part of the deadly trio" loading="lazy" /></figure>
<div class="card-body">
<h3 class="card-title">The deadly trio</h3>
<p>
The IT Security related deadliest Software combination definitely is related to Windows + Outlook/MS Office + Active Directory/ADFS.<br>
Well, trio somehow sounds better than quintet, so I left out Exchange. On the other hand that way we would get to the four horseman of the apocalypse...<br>
Or to make it short: Microsoft plays a big role in Software related apocalypse.<br>
Oh, and did I mention <a href="https://en.wikipedia.org/wiki/2024_CrowdStrike-related_IT_outages" class="link" title="external link to article about the crowdstrike incident">Crowdstrike</a>?
</p>
</div>
</div>
<div class="card w-96 bg-base-100 shadow-xl">
<figure><img src="/img/trump.jpg" class="max-h-[200px] w-full object-cover" alt="Trump masked pointing fingers at the camera in front of the White House" loading="lazy" /></figure>
<div class="card-body">
<h3 class="card-title">Trump re-election</h3>
<p>
If Trump gets re-elected, which is quite likely imho, this will be another step in the direction of 'yes'...
</p>
</div>
</div>
</div>
<p class="mt-16 text-center">
<a class="btn btn-primary animate-bounce" href="/authors-take.html" title="Read the author's take">The author's take!</a>
</p>
</main>
<footer class="bg-neutral-900">
<div class="footer p-10 pt-6">
<div>
<span class="footer-title">Contact</span>
<a class="link link-hover" href="https://twitter.com/bengthedev">Twitter</a>
<a class="link link-hover" href="impress.html">Impress</a>
</div>
<div>
<span class="footer-title">Site</span>
<a class="link link-hover" href="/authors-take.html">Author's take</a>
</div>
<div class="w-full">
<span class="footer-title">Attribution</span>
Beer Bottle photo by <a href="https://unsplash.com/@storyninetyfour?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText" class="link">Story Ninety-Four</a> on <a href="https://unsplash.com/s/photos/beer-bottle?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText" class="link">Unsplash</a>
Trump Mask photo by <a href="https://unsplash.com/de/@darren1303?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash" clasS="link">Darren Halstead</a> auf <a href="https://unsplash.com/de/fotos/mann-mit-donald-trump-maske-steht-vor-dem-weissen-haus-B_vXFdzvw3g?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash" class="link">Unsplash</a>
</div>
</div>
<div class="footer-center md:pl-6 md:pr-6 pb-6 flex flex-col md:flex-row justify-center md:justify-between">
<div>© Benedikt Grande. All rights reserved.</div>
<div class="affiliate text">
<a class="hover:text-neutral-200 link" href="/impress.html">Impress</a>
</div>
</div>
</footer>
<script type="application/javascript">
const stateObjectList = [
{
threshold: null,
heading: "I really don\'t know",
subtext: "There\'s <b>certainly</b> someone out there doing something <b>stupid</b>!",
theme: "light",
},
// 15 * 60
{
threshold: 900,
heading: "No!",
subtext: "We\'re <b>surprisingly</b> far away from it.",
theme: "lightest",
},
// 10 * 60
{
threshold: 600,
heading: "No...",
subtext: "But it\'s <b>not</b> looking good!",
theme: "lighter",
},
// 5 * 60
{
threshold: 300,
heading: "Not quite",
subtext: "<b>But</b> we\'re getting <b>close</b>!",
theme: "light",
},
// 2 * 60
{
threshold: 180,
heading: "Not yet",
subtext: "<b>But</b> we\'re <b>actively working</b> on it!",
theme: "medium",
},
// 50
{
threshold: 120,
heading: "Very close now",
subtext: "<b>We\'ve</b> done a <b>great</b> job so far!",
theme: "dark",
},
// 30
{
threshold: 90,
heading: "Pretty much",
subtext: "We\'re really <b>good</b> at <b>this</b>!",
theme: "darker",
},
// 0
{
threshold: 5,
heading: "YES!",
subtext: "Yep, <b>that\'s it</b>! I\'m <b>surprised</b> you can still read this!",
theme: "darkest",
}
];
const getStateObject = function getStateObject(doomsday, stateObjects) {
if (!doomsday || (!doomsday.time && doomsday.time !== 0)) {
return stateObjects['fallback'];
}
for (let state in stateObjects) {
if (!stateObjects.hasOwnProperty(state) || stateObjects[state].threshold === null) {
continue;
}
if (doomsday.time >= stateObjects[state].threshold) {
return stateObjects[state];
}
}
return stateObjects['fallback'];
}
const getHeading = function getHeading(stateObject) {
return stateObject.heading;
}
const getSubText = function getSubText(stateObject) {
return stateObject.subtext;
}
const getTheme = function getTheme(stateObject) {
return stateObject.theme;
}
const setTextAndLayoutByClock = function setTextAndLayoutByClock (localJson, stateObjectList, headingElement, subTextElement, themeElement) {
const stateObject = getStateObject(localJson, stateObjectList);
const subText = getSubText(stateObject);
const heading = getHeading(stateObject);
const theme = getTheme(stateObject);
headingElement.innerHTML = heading;
subTextElement.innerHTML = subText;
themeElement.setAttribute("data-theme", theme)
}
fetch("http://localhost:63342/doomsday.json", {
method: "GET",
redirect: "follow",
mode: "cors",
headers: {
"Content-Type": "application/json",
"Access-Control-Request-Method": "GET"
}
}).then(async function (data) {
const jsonData = await data.json()
const headingElement = document.getElementById("heading");
const subTextElement = document.getElementById("subtext");
const themeElement = document.querySelector("html");
if (!jsonData.time && jsonData.time !== 0) {
return data;
}
setTextAndLayoutByClock(jsonData, stateObjectList, headingElement, subTextElement, themeElement);
setTimeout(async function () {
const fuckedPercentage = Math.round((1 - (Number(jsonData.time) / (60 * 60))) * 100);
const percentageElement = document.getElementById("percentage");
const userPollElement = document.getElementById("userpoll");
percentageElement.innerHTML = '<span class="font-bold">' + fuckedPercentage + '%</span> progress according to <a class="link" href="https://thebulletin.org/doomsday-clock/" title="external link to doomsday clock">doomsday clock</a>';
const yesno = await fetch('https://yesno.pagereply.com/arewefuckedyet.com/vote', {
method: "GET",
mode: "cors",
headers: {
"Content-type": "application/json"
}
}).then(async function(data){
return data.json();
});
const yesnoSum = yesno.yes + yesno.no;
const fuckedFromQuestions = yesno.yes / yesnoSum;
userPollElement.innerHTML = '<span class="font-bold">' + Math.round(fuckedFromQuestions * 100) + "%</span> of voters think we're fucked";
}, 100);
return jsonData;
})
.catch(function (err) {
console.log(err);
})
;
</script>
</body>
</html>