Commit | Line | Data |
---|---|---|
d409556c T |
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> | |
c214b941 V |
7 | <meta http-equiv="refresh" content="600"> |
8 | <meta http-equiv="Cache-Control" content="no-store" /> | |
d409556c T |
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 { | |
005c3368 | 115 | position: absolute; |
d409556c T |
116 | animation: slide-slow infinite; |
117 | animation-duration: 20s; | |
118 | animation-direction: alternate; | |
2c364bd2 | 119 | animation-timing-function: ease-in-out; |
d409556c T |
120 | } |
121 | ||
122 | @keyframes slide-slow { | |
005c3368 V |
123 | from { top: 1%; } |
124 | to { top: -100%; } | |
d409556c T |
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 */ | |
c214b941 V |
211 | .day21 #day-1-program, |
212 | .day22 #day-2-program, | |
d409556c | 213 | .day23 #day-1-program, |
c214b941 | 214 | .day24 #day-2-program { display: block; } |
d409556c T |
215 | |
216 | /* Show specifiy time */ | |
c214b941 V |
217 | .time8 #day-1-timeslot-1, |
218 | .time8 #day-1-timeslot-2, | |
219 | .time8 #day-1-timeslot-3, | |
2c364bd2 V |
220 | .time8 #day-1-timeslot-4, |
221 | .time8 #day-1-timeslot-5, | |
c214b941 V |
222 | .time8 #day-2-timeslot-1, |
223 | .time8 #day-2-timeslot-2, | |
2c364bd2 V |
224 | .time8 #day-2-timeslot-3, |
225 | .time8 #day-2-timeslot-4, | |
226 | .time8 #day-2-timeslot-5, | |
d409556c T |
227 | .time9 #day-1-timeslot-1, |
228 | .time9 #day-1-timeslot-2, | |
229 | .time9 #day-1-timeslot-3, | |
230 | .time9 #day-1-timeslot-4, | |
2c364bd2 | 231 | .time9 #day-1-timeslot-5, |
d409556c T |
232 | .time9 #day-2-timeslot-1, |
233 | .time9 #day-2-timeslot-2, | |
234 | .time9 #day-2-timeslot-3, | |
2c364bd2 V |
235 | .time9 #day-2-timeslot-4, |
236 | .time9 #day-2-timeslot-5, | |
c214b941 V |
237 | .time10 #day-1-timeslot-3, |
238 | .time10 #day-1-timeslot-4, | |
239 | .time10 #day-1-timeslot-5, | |
2c364bd2 | 240 | .time10 #day-1-timeslot-6, |
c214b941 V |
241 | .time10 #day-2-timeslot-3, |
242 | .time10 #day-2-timeslot-4, | |
d409556c | 243 | .time10 #day-2-timeslot-5, |
2c364bd2 | 244 | .time10 #day-2-timeslot-6, |
2fdc9487 V |
245 | .time11 #day-1-timeslot-5, |
246 | .time11 #day-1-timeslot-6, | |
247 | .time11 #day-2-timeslot-5, | |
248 | .time11 #day-2-timeslot-6, | |
c214b941 V |
249 | .time12 #day-1-timeslot-6, |
250 | .time12 #day-1-timeslot-7, | |
2c364bd2 | 251 | .time12 #day-1-timeslot-8, |
c214b941 V |
252 | .time12 #day-2-timeslot-6, |
253 | .time12 #day-2-timeslot-7, | |
2c364bd2 | 254 | .time12 #day-2-timeslot-8, |
c214b941 V |
255 | .time13 #day-1-timeslot-7, |
256 | .time13 #day-1-timeslot-8, | |
2c364bd2 V |
257 | .time13 #day-1-timeslot-9, |
258 | .time13 #day-1-timeslot-10, | |
c214b941 V |
259 | .time13 #day-2-timeslot-7, |
260 | .time13 #day-2-timeslot-8, | |
2c364bd2 V |
261 | .time13 #day-2-timeslot-9, |
262 | .time13 #day-2-timeslot-10, | |
c214b941 V |
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, | |
2c364bd2 | 284 | .time17 #day-1-timeslot-17, |
c214b941 | 285 | .time17 #day-2-timeslot-14, |
d409556c | 286 | .time17 #day-2-timeslot-15, |
c214b941 | 287 | .time17 #day-2-timeslot-16, |
2c364bd2 V |
288 | .time17 #day-2-timeslot-17, |
289 | .time18 #day-1-timeslot-15, | |
c214b941 V |
290 | .time18 #day-1-timeslot-16, |
291 | .time18 #day-1-timeslot-17, | |
2c364bd2 | 292 | .time18 #day-2-timeslot-15, |
c214b941 V |
293 | .time18 #day-2-timeslot-16, |
294 | .time18 #day-2-timeslot-17, | |
2fdc9487 V |
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; } | |
d409556c T |
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"--> | |
c214b941 | 313 | |
2fdc9487 | 314 | <article class="program-day" id="whatsup"> |
c214b941 V |
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> | |
2fdc9487 V |
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 --> | |
c214b941 | 343 | |
d409556c T |
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> | |
e511448d V |
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> | |
d409556c T |
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 | |
d1e13c74 | 373 | var feedUrl = 'https://status.fsf.org/lpstatus/all/rss' |
d409556c T |
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(); | |
827d4be9 | 405 | var h = d.getUTCHours(); |
3276bf68 | 406 | h = h - 4; |
d409556c T |
407 | var m = d.getDate(); |
408 | document.body.className = "day" + m + " time" + h; | |
409 | ||
410 | </script> | |
411 | </body> | |
412 | </html> |