6ca5bddc |
1 | <!doctype html> |
2 | <html> |
3 | <head> |
4 | <meta charset="utf-8" /> |
5 | <meta name="viewport" content="width=device-width, initial-scale=1.0"/> |
6 | <title>Notice from #LibrePlanet</title> |
7 | <meta http-equiv="refresh" content="600"> |
8 | <meta http-equiv="Cache-Control" content="no-store" /> |
9 | <link href="https://fonts.googleapis.com/css?family=Exo+2:400,800" rel="stylesheet"> |
10 | </head> |
11 | <style> |
12 | |
13 | body { |
14 | font-family: 'Exo 2', sans-serif; |
15 | margin: 0; |
16 | padding: 0; |
17 | overflow: hidden; |
18 | background-color: #4F0276; |
19 | color: #DFDFDF; |
20 | } |
21 | |
22 | header.grid { |
23 | grid-area: header; |
24 | text-align: center; |
25 | } |
26 | |
27 | header.grid h1 { |
28 | background-color: #52ce73; |
29 | color: #FFF; |
30 | font-weight: 800; |
31 | font-size: 3em; |
32 | padding: 0.3em; |
33 | width: auto; |
34 | margin: 0; |
35 | border-bottom-left-radius: 100px; |
36 | } |
37 | |
38 | article.grid { |
39 | grid-area: content; |
40 | min-height: 70vh; |
41 | max-height: 70vh; |
42 | overflow: auto; |
43 | } |
44 | |
45 | #content-program .program-session-desc-block, |
46 | #content-program button { |
47 | display: none; |
48 | } |
49 | |
50 | aside.grid { |
51 | grid-area: sidebar; |
52 | min-height: 80vh; |
53 | text-align: center; |
54 | } |
55 | footer.grid { |
56 | position: relative; |
57 | min-height: 20vh; |
58 | grid-area: footer; |
59 | background-color: #DFDFDF; |
60 | color: #4F0276; |
61 | } |
62 | |
63 | footer .mpost { |
64 | font-weight: 400; |
65 | font-size: 2em; |
66 | text-align: center; |
67 | height: 20vh; |
68 | display: flex; |
69 | flex-direction: row; |
70 | flex-wrap: wrap; |
71 | align-items: center; |
72 | max-height: 20vh; |
73 | } |
74 | |
75 | footer .mpost p { padding: 0px; margin: 0px; margin-bottom: 20px; } |
76 | |
77 | footer .mpost a { |
78 | text-decoration: none; |
79 | color: #000; |
80 | } |
81 | |
82 | .wrapper { |
83 | display: grid; |
84 | grid-gap: 5px; |
85 | grid-template-columns: 1fr 3fr; |
86 | grid-template-areas: |
87 | "sidebar header" |
88 | "sidebar content" |
89 | "footer footer"; |
90 | } |
91 | .content-ft { |
92 | font-size: 2em; |
93 | text-align: center; |
94 | overflow: hidden; |
95 | height: 20vh; |
96 | max-height: 20vh; |
97 | display: inline-flex; |
98 | align-content: center; |
99 | align-items: center; |
100 | width: 48%; |
101 | padding: 0 0.5em; |
102 | float: left; |
103 | } |
104 | .content-ft:first-child { |
105 | border-right: 3px solid #4F0276; |
106 | } |
107 | |
108 | #content-program { |
109 | width: 100%; |
110 | position: relative; |
111 | overflow: hidden; |
112 | } |
113 | |
114 | #content-program .program-day { |
115 | position: absolute; |
116 | animation: slide-slow infinite; |
117 | animation-duration: 20s; |
118 | animation-direction: alternate; |
119 | animation-timing-function: ease-in-out; |
120 | } |
121 | |
122 | @keyframes slide-slow { |
123 | from { top: 1%; } |
124 | to { top: -100%; } |
125 | } |
126 | |
127 | .program-day-header { |
128 | text-align: center; |
129 | color: #FFF; |
130 | } |
131 | |
132 | .program-timeslot-header { |
133 | color: #52ce73; |
134 | text-align: center; |
135 | } |
136 | .program-session-header h2 { |
137 | font-size: 2.5em; |
138 | font-weight: 400; |
139 | color: #DFDFDF; |
140 | margin: 0; |
141 | padding: 0; |
142 | } |
143 | .program-session { padding-left: 5em; } |
144 | .program-session-speaker { |
145 | color: #52ce73; |
146 | font-size: 2em; |
147 | } |
148 | .program-session-speaker a { |
149 | color: #52ce73; |
150 | text-decoration: none; |
151 | } |
152 | .program-session-room-details { |
153 | font-weight: 800; |
154 | font-size: 1.5em; |
155 | color: #52ce73; |
156 | padding-bottom: 1.5em; |
157 | } |
158 | |
159 | aside { position: relative; } |
160 | |
161 | .iitem { width: 90%; } |
162 | |
163 | .item-1, |
164 | .item-2, |
165 | .item-3 { |
166 | position: absolute; |
167 | display: block; |
168 | width: 50%; |
169 | padding: 0px; |
170 | margin-top: 3em; |
171 | animation-duration: 20s; |
172 | animation-timing-function: ease-in-out; |
173 | animation-iteration-count: infinite; |
174 | } |
175 | |
176 | .item-1{ |
177 | animation-name: anim-1; |
178 | } |
179 | |
180 | .item-2{ |
181 | animation-name: anim-2; |
182 | } |
183 | |
184 | .item-3{ |
185 | animation-name: anim-3; |
186 | } |
187 | |
188 | @keyframes anim-1 { |
189 | 0%, 8.3% { left: -100%; opacity: 0; } |
190 | 8.3%,25% { left: 25%; opacity: 1; } |
191 | 33.33%, 100% { left: 110%; opacity: 0; } |
192 | } |
193 | |
194 | @keyframes anim-2 { |
195 | 0%, 33.33% { left: -100%; opacity: 0; } |
196 | 41.63%, 58.29% { left: 25%; opacity: 1; } |
197 | 66.66%, 100% { left: 110%; opacity: 0; } |
198 | } |
199 | |
200 | @keyframes anim-3 { |
201 | 0%, 66.66% { left: -100%; opacity: 0; } |
202 | 74.96%, 91.62% { left: 25%; opacity: 1; } |
203 | 100% { left: 110%; opacity: 0; } |
204 | } |
205 | |
206 | /* Hidden all content */ |
207 | .program-day, |
208 | .program-timeslot { display: none; } |
209 | |
210 | /* Show specifiy day */ |
211 | .day21 #day-1-program, |
212 | .day22 #day-2-program, |
213 | .day23 #day-1-program, |
214 | .day24 #day-2-program { display: block; } |
215 | |
216 | /* Show specifiy time */ |
217 | .time8 #day-1-timeslot-1, |
218 | .time8 #day-1-timeslot-2, |
219 | .time8 #day-1-timeslot-3, |
220 | .time8 #day-1-timeslot-4, |
221 | .time8 #day-1-timeslot-5, |
222 | .time8 #day-2-timeslot-1, |
223 | .time8 #day-2-timeslot-2, |
224 | .time8 #day-2-timeslot-3, |
225 | .time8 #day-2-timeslot-4, |
226 | .time8 #day-2-timeslot-5, |
227 | .time9 #day-1-timeslot-1, |
228 | .time9 #day-1-timeslot-2, |
229 | .time9 #day-1-timeslot-3, |
230 | .time9 #day-1-timeslot-4, |
231 | .time9 #day-1-timeslot-5, |
232 | .time9 #day-2-timeslot-1, |
233 | .time9 #day-2-timeslot-2, |
234 | .time9 #day-2-timeslot-3, |
235 | .time9 #day-2-timeslot-4, |
236 | .time9 #day-2-timeslot-5, |
237 | .time10 #day-1-timeslot-3, |
238 | .time10 #day-1-timeslot-4, |
239 | .time10 #day-1-timeslot-5, |
240 | .time10 #day-1-timeslot-6, |
241 | .time10 #day-2-timeslot-3, |
242 | .time10 #day-2-timeslot-4, |
243 | .time10 #day-2-timeslot-5, |
244 | .time10 #day-2-timeslot-6, |
245 | .time11 #day-1-timeslot-5, |
246 | .time11 #day-1-timeslot-6, |
247 | .time11 #day-2-timeslot-5, |
248 | .time11 #day-2-timeslot-6, |
249 | .time12 #day-1-timeslot-6, |
250 | .time12 #day-1-timeslot-7, |
251 | .time12 #day-1-timeslot-8, |
252 | .time12 #day-2-timeslot-6, |
253 | .time12 #day-2-timeslot-7, |
254 | .time12 #day-2-timeslot-8, |
255 | .time13 #day-1-timeslot-7, |
256 | .time13 #day-1-timeslot-8, |
257 | .time13 #day-1-timeslot-9, |
258 | .time13 #day-1-timeslot-10, |
259 | .time13 #day-2-timeslot-7, |
260 | .time13 #day-2-timeslot-8, |
261 | .time13 #day-2-timeslot-9, |
262 | .time13 #day-2-timeslot-10, |
263 | .time14 #day-1-timeslot-8, |
264 | .time14 #day-1-timeslot-9, |
265 | .time14 #day-1-timeslot-10, |
266 | .time14 #day-2-timeslot-8, |
267 | .time14 #day-2-timeslot-9, |
268 | .time14 #day-2-timeslot-10, |
269 | .time15 #day-1-timeslot-10, |
270 | .time15 #day-1-timeslot-11, |
271 | .time15 #day-1-timeslot-12, |
272 | .time15 #day-2-timeslot-10, |
273 | .time15 #day-2-timeslot-11, |
274 | .time15 #day-2-timeslot-12, |
275 | .time16 #day-1-timeslot-12, |
276 | .time16 #day-1-timeslot-13, |
277 | .time16 #day-1-timeslot-14, |
278 | .time16 #day-2-timeslot-12, |
279 | .time16 #day-2-timeslot-13, |
280 | .time16 #day-2-timeslot-14, |
281 | .time17 #day-1-timeslot-14, |
282 | .time17 #day-1-timeslot-15, |
283 | .time17 #day-1-timeslot-16, |
284 | .time17 #day-1-timeslot-17, |
285 | .time17 #day-2-timeslot-14, |
286 | .time17 #day-2-timeslot-15, |
287 | .time17 #day-2-timeslot-16, |
288 | .time17 #day-2-timeslot-17, |
289 | .time18 #day-1-timeslot-15, |
290 | .time18 #day-1-timeslot-16, |
291 | .time18 #day-1-timeslot-17, |
292 | .time18 #day-2-timeslot-15, |
293 | .time18 #day-2-timeslot-16, |
294 | .time18 #day-2-timeslot-17, |
295 | .time19 #day-1-timeslot-15, |
296 | .time19 #day-1-timeslot-16, |
297 | .time19 #day-1-timeslot-17, |
298 | .time18.day24 #creatures, |
299 | .time19.day24 #creatures, |
300 | .time20.day24 #creatures, |
301 | .time20.day24 #whatsup { display: block; } |
302 | |
303 | </style> |
304 | <body class="day time"> |
305 | |
306 | <div class="wrapper"> |
307 | <header class="grid"> |
308 | <h1>What's Up!</h1> |
309 | </header> |
310 | <article class="grid" id="content-program"> |
311 | |
312 | <!--#include virtual="/2019/includes/generated-sessions.html"--> |
313 | |
314 | <article class="program-day" id="whatsup"> |
315 | <section class="program-session"> |
316 | <header class="program-session-header"> |
317 | <hgroup> |
318 | <h2>We do not have programming today.</h2> |
319 | </hgroup> |
320 | </header> |
321 | <div class="program-session-shelf"> |
322 | <div class="program-session-room-details"> |
323 | <span class="room label label-default"><h3 style="text-align: center;">March 23rd - 24th</h3></span> |
324 | </div> |
325 | </div> |
326 | </section> |
327 | </article><!-- #whatsup --> |
328 | |
329 | <article class="program-day" style="margin-top: 50%;" id="creatures"> |
330 | <section class="program-session"> |
331 | <header class="program-session-header"> |
332 | <hgroup> |
333 | <h2>Thank you for participating in LibrePlanet!</h2> |
334 | </hgroup> |
335 | </header> |
336 | <div class="program-session-shelf"> |
337 | <div style="text-align: center;"> |
338 | <img class="creatures-fsf" src="/2019/assets/img/creatures.png" alt="Creatures Libres" /> |
339 | </div> |
340 | </div> |
341 | </section> |
342 | </article><!-- #creatures --> |
343 | |
344 | </article> |
345 | <aside class="grid"> |
346 | <p> |
347 | <img src="/2019/assets/img/lp-anim.svg" alt="LibrePlanet Logo with Animation" title="LibrePlanet Logo" /> |
348 | </p> |
349 | <p class="item-1"><img class="iitem" src="/2019/assets/img/pia-logo.svg" alt="Private Internet Access" /></p> |
350 | <p class="item-2"><img class="iitem" src="/2019/assets/img/redhat-logo.svg" alt="RedHat" /></p> |
351 | <p class="item-3"><img class="iitem" src="/2019/assets/img/fsf2.svg" alt="Free Software Foundation" /></p> |
352 | </aside> |
353 | <footer class="grid"> |
354 | |
355 | <div> |
356 | |
357 | <div class="slider"> |
358 | <div class="multiple-items slide-list"> |
359 | <output>Loading...</output> |
360 | </div></div> |
361 | |
362 | <template> |
363 | <div class="content-ft"></div> |
364 | </template> |
365 | |
366 | </div> |
367 | </footer> |
368 | </div> |
369 | <script> |
370 | const DOMPARSER = new DOMParser().parseFromString.bind(new DOMParser()) |
371 | var frag = document.createDocumentFragment() |
372 | var hasBegun = true |
373 | var feedUrl = 'https://status.fsf.org/lpstatus/all/rss' |
374 | /* Fetch the RSS Feed */ |
375 | fetch(feedUrl).then((res) => { |
376 | res.text().then((xmlTxt) => { |
377 | /* Parse the RSS Feed and display the content */ |
378 | try { |
379 | let doc = DOMPARSER(xmlTxt, "text/xml") |
380 | // let heading = document.createElement('h1') |
381 | // heading.textContent = url.hostname |
382 | // frag.appendChild(heading) |
383 | doc.querySelectorAll('item').forEach((item) => { |
384 | let temp = document.importNode(document.querySelector('template').content, true); |
385 | let i = item.querySelector.bind(item) |
386 | let t = temp.querySelector.bind(temp) |
387 | t('div').textContent = !!i('title') ? i('title').textContent : '-' |
388 | // t('a').textContent = t('a').href = !!i('link') ? i('link').textContent : '#' |
389 | // t('p').innerHTML = !!i('description') ? i('description').textContent : '-' |
390 | // t('h3').textContent = url.hostname |
391 | frag.appendChild(temp) |
392 | }) |
393 | } catch (e) { |
394 | console.error('Error in parsing the feed') |
395 | } |
396 | if(hasBegun) { |
397 | document.querySelector('output').textContent = ''; |
398 | hasBegun = false; |
399 | } |
400 | document.querySelector('output').appendChild(frag) |
401 | }) |
402 | }).catch(() => console.error('Error in fetching the RSS feed')); |
403 | |
404 | var d = new Date(); |
405 | var h = d.getUTCHours(); |
406 | h = h - 4; |
407 | var m = d.getDate(); |
408 | document.body.className = "day" + m + " time" + h; |
409 | |
410 | </script> |
411 | </body> |
412 | </html> |