-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathtemplate.jinja
235 lines (223 loc) · 8.93 KB
/
template.jinja
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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Haskell bois</title>
<link
rel="icon"
href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🚴♂️</text></svg>"
>
<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=Inter:wght@400;700&display=swap"
rel="stylesheet"
>
<link rel="stylesheet" href="style.css" />
<script src="//unpkg.com/@alpinejs/trap"></script>
<script src="//unpkg.com/alpinejs" defer></script>
<script
src="https://analytics.michaljanocko.com/js/plausible.js"
data-domain="michaljanocko.com/haskell_bois"
async
defer
></script>
<script>
document.addEventListener('alpine:init', () => {
Alpine.data('posts', () => ({
lang: 'cs',
pictures: [[]],
day: 0,
img: null,
init() {
this.pictures = Array
.from(document.getElementsByClassName('gallery'))
.map(gallery => Array.from(gallery.getElementsByClassName('img')).map($ => $.src))
},
setPicture(name) {
[this.day, this.img] = [
parseInt(name.split('/')[1]) - 1,
parseInt(name.split('/')[2].split('.')[0]) - 1
]
},
closePreview() {
this.img = null
}
}))
})
</script>
</head>
<body
x-data="posts"
:class="lang"
>
<!-- Picture preview -->
<div
x-cloak
id="preview"
x-show="img !== null"
x-trap.inert.noscroll="img !== null"
x-transition
@dragend="closePreview"
@keyup.document.escape="closePreview"
@keyup.document.left="img > 0 && img--"
@keyup.document.right="img < pictures[day].length - 1 && img++"
>
<img src="close.svg" @click="closePreview">
<div id="box" @click.outside="closePreview">
<span class="control">
<img src="left.svg" @click="img--" x-show="img > 0">
</span>
<img id="picture" :src="pictures[day][img]">
<span class="control">
<img src="right.svg" @click="img++" x-show="img < pictures[day].length - 1">
</span>
</div>
</div>
<header>
<nav>
<li>Haskell bois 🚴♂️</li>
<li @click="lang = 'cs'"><img src="cz.svg"></li>
<li @click="lang = 'en'"><img src="us.svg"></li>
</nav>
</header>
<article>
<p class="cs">
Milí přátelé, aby naše radosti a strasti byly zachovány i jinde než na
Instagramu, vytvořil jsem pro vás tuto stránku. U každého dne je odkaz
na původní post a na mapy se záznamem cesty. Trasa byla plánována
přibližně podle <a href="https://viaczechia.cz">Via Czechia</a>. K
dispozici je i anglický překlad. Přeji příjemné čtení.
<br><br>
<a href="#summary-cs">Shrnutí v číslech je úplně dole</a>
</p>
<p class="en">
Dear friends, I created this page in order to preserve our journey
somewhere else than just on Instagram. I provided links to the original
posts and map recording next to each day's title. We (approximately)
followed the <a href="https://viaczechia.cz">Via Czechia</a> route.
Also, as you probably noticed, there is an English translation
available. I hope you like it.
<br><br>
<a href="#summary-en">You can find the number summary at the very bottom</a>
</p>
</article>
{% for day in days %}
<article class="post">
<section class="gallery">
{% for picture in day.pictures %}
<img
src="{{ picture }}"
class="img"
@click="setPicture('{{ picture }}')"
>
{% endfor %}
</section>
<section class="cs">
<h1>{{ day.number }}. den</h1>
<a href="{{ day.data['ig'] }}" target="_blank" rel="noreferrer noopener">
<img src="ig.svg" class="icon">
</a>
<a href="{{ day.data['map'] }}" target="_blank" rel="noreferrer noopener">
<img src="map.svg" class="icon">
</a>
<br>
<b>{{ day.data['odo'] }} km</b>
<p>{{ day.data['elev']['cs'] }}</p>
<br>
{{ day.post_cs }}
</section>
<section class="en">
<h1>{{ day.number }}. den</h1>
<a href="{{ day.data['ig'] }}" target="_blank" rel="noreferrer noopener">
<img src="ig.svg" class="icon">
</a>
<a href="{{ day.data['map'] }}" target="_blank" rel="noreferrer noopener">
<img src="map.svg" class="icon">
</a>
<br>
<b>{{ day.data['odo'] / 1.6 }} mi</b>
<p>{{ day.data['elev']['en'] }}</p>
<br>
{{ day.post_en }}
</section>
</article>
{% endfor %}
<article class="post">
<section class="cs" id="summary-cs">
<h1>Souhrn</h1>
<a href="https://www.instagram.com/p/CSCzQfwIs6m/" target="_blank" rel="noreferrer noopener">
<img src="ig.svg" class="icon">
</a>
<br>
<ul>
<li>Přátelé a kamarádi, je to tu – my to dojeli! Za to, že jste to s námi vydrželi dvacet dní, vám nabízíme křupavé statistiky a čerstvý souhrn důležitostí.</li>
<br>
<li>Celkem ujeto: 1028.9 km</li>
<li>Celkem 20 dní, z toho 2 odpočinkové (0 km)</li>
<li>Celkový čas jízdy: 89.4 h</li>
<li>Průměrná rychlost: 11.5 km/h</li>
<li>Za den průměrně ujeto: 57.16 km (mimo odpočinkové dny)</li>
<li>Nahoru: 27011 vertikálních metrů</li>
<li>Dolů: 27201 vertikálních metrů</li>
<li>Průměrně za den nastoupáno: 1500.6 metrů vzhůru a 1511.2 metrů dolů</li>
<br>
<li>Musíme se přiznat – náš Stopař od Seznamu trochu lže a my nejspíš nenaklesali ani nenastoupali tolik, kolik se nám snaží grafama nakecat.</li>
<br>
<li>Jirka vyzkoušel tři stojánky</li>
<li>Sjeli jsme dvoje brzdové destičky</li>
<li>Jeden zničený brzdový kotouč</li>
<li>Jeden urvaný nosič (druhý sdrátovaný vydržel od prvního týdne až do konce)</li>
<li>6 mincových, 8 AA a 4 AAA baterky padly</li>
<li>Nespočet spadlých řetězů</li>
<li>Pět gumicuků popraveno</li>
<li>Jedna servaná přehazovačka</li>
<li>Jedny roztrhané brašny</li>
<br>
<li>A jednou smazaný tenhle text, protože neumíme používat Instagram (a museli jsme ho tak psát nadvakrát)</li>
<br>
<li>Tady končí naše cesta.</li>
<li>Děkujeme vám a zase příští rok(?)</li>
</ul>
</section>
<section class="en" id="summary-en">
<h1>Summary</h1>
<a href="https://www.instagram.com/p/CSCzQfwIs6m/" target="_blank" rel="noreferrer noopener">
<img src="ig.svg" class="icon">
</a>
<br>
<ul>
<li>Dear friends, we did it! And for supporting us for those 20 days, we give you freshly crunched numbers and a summary of all the important milestones.</li>
<br>
<li>Distance traveled: 639.3 mi</li>
<li>20 days, out of which we used 2 to get some rest (0 mi)</li>
<li>Total time on the bike: 89.4 h</li>
<li>Average speed: 7.15 mph</li>
<li>Daily average: 35.52 mi (without the resting days)</li>
<li>88619 ft ascended</li>
<li>89242 ft descended</li>
<li>Average daily elevation: 4922 ft up and 4958 ft down</li>
<br>
<li>Confession time: the way our tracker measures elevation is kind of questionable so the mountains are likely not as high as shown in the graphs.</li>
<br>
<li>None of three kickstands fit Jirka's bike</li>
<li>We killed two pairs of braking pads</li>
<li>One braking disc died</li>
<li>One carrier rack broke apart (the second one, wired together, lasted for the rest of the trip)</li>
<li>6 coin batteries, 8 AA and 4 AAA batteries used</li>
<li>The chain slipped of countless of times</li>
<li>Five rubber tiers executed by the wiring in our wheels</li>
<li>One change-speed stripped</li>
<li>One pair of bags torn apart</li>
<br>
<li>And we accidentally erased this text once because we don't know how to use Instagram (and we had to write the whole thing again)</li>
<br>
<li>Our journey ends here.</li>
<li>Thank you and see you next year(?)</li>
</ul>
</section>
</article>
</body>
</html>