-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
228 lines (202 loc) · 9.3 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
<!doctype html>
<!--suppress HtmlFormInputWithoutLabel -->
<html class="no-js" lang="de" prefix="og: https://ogp.me/ns#">
<head>
<meta charset="utf-8">
<title>Um Die Welt - Gymnasium Höchstadt</title>
<meta name="description" content='Das Gymnasium Höchstadt radelt digital um die Welt! Hier findest du unsere Motivation, den aktuellen Fortschritt und wie wir mit dieser Aktion Schülern in Entwicklungsländern helfen.'>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="keywords"
content="Um die Welt, Gymnasium Höchstadt, Weltumrundung, one car less, Fahrrad, Fahrradfahren, fahren, eintragen, teilnehmen, mitmachen, spenden">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Um Die Welt - Gymnasium Höchstadt">
<meta name="twitter:description"
content='Das Gymnasium Höchstadt radelt digital um die Welt! Hier findest du unsere Motivation, den aktuellen Fortschritt und wie wir mit dieser Aktion Schülern in Entwicklungsländern helfen.'>
<meta property="twitter:url" content="http://umdiewelt.gymnasium-hoechstadt.de">
<meta property="twitter:domain" content="umdiewelt.gymnasium-hoechstadt.de">
<meta name="twitter:image" content="img/hero.jpg?quality=95&width=1200">
<meta name="twitter:image:alt" content="Ein Projekt des Gymnasium Höchstadt.">
<meta property="og:title" content="Um Die Welt - Gymnasium Höchstadt">
<meta property="og:description" content='Das Gymnasium Höchstadt radelt digital um die Welt! Hier findest du unsere Motivation, den aktuellen Fortschritt und wie wir mit dieser Aktion Schülern in Entwicklungsländern helfen.'>
<meta property="og:url" content="http://umdiewelt.gymnasium-hoechstadt.de">
<meta property="og:type" content="website">
<meta property="og:image" content="img/hero.jpg?quality=95&width=1200">
<meta property="og:image:type" content="image/jpeg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="677">
<meta property="og:image:alt" content="Ein Projekt des Gymnasium Höchstadt.">
<meta property="og:locale" content="de">
<meta property="og:site_name" content="Gymnasium Höchstadt">
<link rel="apple-touch-icon" href="icon.png">
<!-- Place favicon.ico in the root directory -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,400;0,700;0,900;1,400&display=swap"
rel="stylesheet">
<!-- <link rel="stylesheet" href="css/normalize.css">-->
<link rel="stylesheet" href="sass/main.sass">
<!-- <link rel="stylesheet" href="css/main.css">-->
<link rel="preload" href="sass/metaballs.sass" as="style" onload="this.onload=null;this.rel='stylesheet'">
<noscript>
<link rel="stylesheet" href="sass/metaballs.sass">
</noscript>
<meta name="theme-color" content="#C2DC62FF">
<script src="js/vendor/modernizr-3.11.2.min.js" type="module"></script>
<script src="js/plugins.js"></script>
<script src="js/main.ts" type="module"></script>
</head>
<body>
<header>
<h2>Um Die Welt</h2>
<section id="willkommen" class="checkIfVisibleMargin checkIfVisible">
<div class="text">
<h1>Hallo Fahrrad­fahrer!</h1>
<p>Wir sind ein Se­minar am Gym­nasium Höch­stadt.</p>
<p class="um-die-welt">Mit der ganzen Schule möchten wir digital auf dem Rad die Welt um­run­den!</p>
<button id="eintragen-shortcut">Teilnehmen</button>
</div>
<div id="welt">
<div id="anzeige"></div>
<include src="html/fakten.html"></include>
</div>
<div class="hintergrund">
<script>
const hintergrund = document.querySelector("#willkommen > .hintergrund")
hintergrund.style.setProperty("--scale-x", ((Math.round(Math.random()) - 0.5) * 2).toString())
hintergrund.style.setProperty("--scale-y", ((Math.round(Math.random()) - 0.5) * 2).toString())
</script>
<div class="kasten"></div>
<div class="kasten"></div>
<div class="kasten"></div>
<div class="kasten"></div>
<div class="kasten"></div>
<div class="kasten"></div>
<div class="kasten"></div>
<div class="kasten"></div>
<!--<div class="kasten"></div>
<div class="kasten"></div>
<div class="kasten"></div>
<div class="kasten"></div>-->
</div>
</section>
</header>
<main>
<section id="nachricht2">
<p>Neu: Gutscheine</p>
<p>Damit das Mitmachen noch attraktiver wird, konnten wir neben unseren beiden Großsponsoren auch <b>Fahrrad
Dresel</b> in Höchstadt für unser Projekt gewinnen. Unter allen Teilnehmerinnen und Teilnehmern werden am Ende der Saison
Sachpreise verlost, die uns Fahrrad Dresel spendet.</p>
<p><u>Und ganz neu:</u> auch <b>Adidas</b> ist mit von der Partie und spendet für unsere Verlsoung eine große Zahl Wertgutscheine!</p>
<div class="logos">
<a class="logo adidas"
href="https://www.adidas.de/"><img data-src="img/Sponsoren/Adidas.webp"
alt=""
class="lazyload" /></a>
<a class="logo dresel"
href="https://www.fahrrad-dresel.com/"><img data-src="img/Sponsoren/Fahrrad%20Dresel.webp"
alt=""
class="lazyload" /></a>
</div>
</section>
<script>
const ersterTag = new Date("2023/06/27");
const einMonatDanach = new Date(ersterTag.getTime() + 30 * 24 * 60 * 60 * 1000);
if (Date.now() <= einMonatDanach) document.getElementById("nachricht2").classList.add("sichtbar");
</script>
<!-- Um keinen Hinweis zu zeigen: einfach Inhalt komplett löschen (auch whitespace) -->
<section id="nachricht">
<p>Es ist geschafft!</p>
<p>Wir sind einmal um die Welt und haben unser erstes Ziel erreicht!</p>
<p>Aber es geht weiter!</p>
<p><b>Wir sammeln weiter Kilometer</b> für die gute Sache und brauchen v. a. immer noch <b>mehr Teilnehmer</b>! Also <a
href="#teilnahme">mach mit</a>!</p>
</section>
<section id="nachricht4">
<p>Letzte Chance!</p>
<p>Du kannst Strecken nur noch bis <span id="nachricht4-zeit">...</span> eintragen.</p>
</section>
<!-- Um keinen Hinweis zu zeigen: einfach Inhalt komplett löschen (auch whitespace) -->
<section id="nachricht3">
<p>Unglaublich!</p>
<p>Wir sind ein <b>zweites Mal</b> um die Welt! Und noch lange nicht fertig!</p>
<p><b>Wir sammeln weiter Kilometer</b> für die gute Sache und brauchen v. a. immer noch <b>mehr Teilnehmer</b>! Also <a
href="#teilnahme">mach mit</a>!</p>
</section>
<section id="nachricht5">
<p>- Sensationell! -</p>
<p>Zusammen haben wir die Welt jetzt schon <b>drei Mal</b> umrundet. Eine super Leistung!</p>
</section>
<section id="inhalt">
<include src="html/ansprache.html"></include>
<div id="saisons-wrapper" class="leer">
<a id="saison"></a>
<ul id="saison-auswahl"></ul>
<div id="saisons"></div>
</div>
<include src="html/faq.html"></include>
<div id="bestenliste-wrapper" class="container max versteckt">
<p class="wusstest-du-schon">
In Deutschland gibt es fast so viele Fahrräder wie Menschen.
</p>
<h3><a href="#bestenliste" id="bestenliste">Aktivste Teil­nehmer:</a></h3>
<ul id="bestenliste-anzeige" class="checkIfVisible"></ul>
<div class="keine-teilnehmer">
<span>Noch keine Teil­nehmer! <a href="#teilnahme">Sei der Erste.</a></span>
</div>
<button class="links leer" disabled>Mehr laden</button>
</div>
<div id="bestenliste-kurve"></div>
<!-- TODO Danksagung anpassen, solange noch keine Strecken da sind! -->
<div id="danksagung" class="container">
<p>Wir danken allen flei­ßigen Fahrrad­fahrern, euer Einsatz
ist
groß­artig!</p>
<ul id="fahrer" class="horizontal"></ul>
</div>
<include src="html/call-to-action.html"></include>
</section>
</main>
<footer>
<h2 id="slogan">
Auf dem <span class="fahrradweg">Fahr­rad­weg</span> zu mehr <span class="klimaschutz">Klima­schutz</span>.
</h2>
<div id="fußzeile">
<p id="copyright">© 2021</p>
<ul id="links" class="horizontal">
<li id="quellen">Quellen</li>
<li id="cookies">Cookies</li>
<li><a href="#kontakt">Kontakt</a></li>
<li id="github">
<a href="https://github.com/LeonardNolting/umdiewelt">Quellcode</a>
</li>
<li id="impressum">
<a href="impressum.html">Impressum</a>
</li>
<li id="datenschutzerklaerung">
<a href="datenschutzerklaerung.html">Datenschutz</a>
</li>
<li id="admin-anmelden" class="nicht-admin-exklusive">
<button>Admin</button>
</li>
<li id="admin-abmelden" class="admin-exklusive">
<button>Abmelden</button>
</li>
</ul>
</div>
<include src="html/admin.html"></include>
</footer>
<include src="html/popups.html"></include>
<!-- TODO -->
<!-- Google Analytics: change UA-XXXXX-Y to be your site's ID. -->
<!--<script>
window.ga = function () { ga.q.push(arguments) };
ga.q = [];
ga.l = +new Date;
ga('create', 'UA-XXXXX-Y', 'auto');
ga('set', 'anonymizeIp', true);
ga('set', 'transport', 'beacon');
ga('send', 'pageview')
</script>
<script src="https://www.google-analytics.com/analytics.js" async></script>-->
</body>
</html>