-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
118 lines (111 loc) · 5.48 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
<!DOCTYPE html>
<html lang="en">
<head>
<title>Future of Tech</title>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Caveat:wght@500&display=swap" rel="stylesheet">
<link href="style.css" rel="stylesheet">
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="UTF-8">
<meta name="description" content="A time capsule packed with tech-related predictions. In 2031 all predictions are released publicly. What do you think 2021 predicted would happen?">
<meta name="keywords" content="Future, Technology, Time Capsule, 2020, 2031">
<meta property="og:title" content="The 2021 tech-predictions time capsule">
<meta property="og:site_name" content="Future of Tech">
<meta property="og:description" content="A 10-year time capsule filled will technology predictions!">
<meta property="og:image" content="https://future-of.technology/socialmedia-title.png">
<meta property="og:url" content="https://future-of.technology">
<meta name="twitter:title" content="The 2021 tech-predictions time capsule">
<meta name="twitter:description" content="A 10-year time capsule filled will technology predictions!">
<meta name="twitter:image" content="https://future-of.technology/socialmedia-title.png">
<meta name="twitter:card" content="summary_large_image">
</head>
<body>
<div class="page">
<div class="content1">
<div id="input-form-container">
<h1 id="title">
2031 <div id="title-text">Tech</div> <div id="title-pred">prediction</div>
</h1>
<p>Tech is changing. Isn't that exciting?
To celebrate we created a <b>time capsule</b> packed with <b>tech-related predictions</b>.
</p>
<p>
In january 2021 everyone was invited to submit their technology related predictions.
These submissions are now safely stored and kept secret.
In December 2031 all predictions will be made public for everyone to enjoy.
</p>
</div>
<div class="goto goto-down">
<a href="#about">\/</a>
</div>
</div>
</div>
<div class="page">
<div class="content2">
<h2 id="about">About</h2>
<div class="faq-grid">
<div class="faq">
<a class="text-button" href="#faq">Why are you doing this?</a>
<div class="faq-extended">
<ul>
<li>Because we think it is really funny to look back at how we perceived the future in the past.</li>
<li>Because we want to give our future selves a Christmas present.</li>
<li>And mostly just because we can.</li>
</ul>
</div>
</div>
<div class="faq">
<a class="text-button" href="#faq">When and where will the predictions be released?</a>
<div class="faq-extended">
On this site! Come back in December 2031.<br/>
<br/>
Why 2031 you ask? We all like round, easy to remember numbers.
In January 2021 predictions were collected.
10 year is such a nice number, thus 2031 was chosen.
</div>
</div>
<div class="faq">
<a class="text-button" href="#faq">Is there an actual real-life time capsule?</a>
<div class="faq-extended">
There is no classic metal-box buried at some classified location.
We want to keep control and ensure nobody accidentally finds it, therefore we made copies and distributed them among people we trust.
Virtual copies are be stored in the cloud, on bare metal and offline (usb sticks).
Everything is also printed and sealed in envelopes.
</div>
</div>
<div class="faq">
<a class="text-button" href="#faq">Under what license will the submissions be published?</a>
<div class="faq-extended">
All valid submissions will be published in the public domain.
It will be free to use by anyone for any purpose without restriction.
</div>
</div>
<div class="faq">
<a class="text-button" href="#faq">I have an idea on how to improve this website!</a>
<div class="faq-extended">
That's great! We would love to hear it.
<a href="https://github.com/SijmenHuizenga/future-of-tech/issues/new" target="_blank">Create a ticket on GitHub with your suggestion</a>.
</div>
</div>
<div class="faq">
<a class="text-button" href="#faq">Who did this?</a>
<div class="faq-extended">
<a href="https://github.com/SijmenHuizenga/" target="_blank">Sijmen</a> & <a href="https://github.com/winterworks" target="_blank">Bram</a>
</div>
</div>
</div>
<div class="goto goto-up">
<a href="#title">/\</a>
</div>
</div>
</div>
<script>
for (let faq of document.getElementsByClassName('faq')) {
faq.addEventListener('click', () => {
faq.classList.toggle('show')
})
}
</script>
</body>
</html>