add questionnaire
[libreplanet-static.git] / 2022 / tv / index.html
CommitLineData
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
13body {
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
22header.grid {
23 grid-area: header;
24 text-align: center;
25}
26
27header.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
38article.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
50aside.grid {
51 grid-area: sidebar;
52 min-height: 80vh;
53 text-align: center;
54}
55footer.grid {
56 position: relative;
57 min-height: 20vh;
58 grid-area: footer;
59 background-color: #DFDFDF;
60 color: #4F0276;
61}
62
63footer .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
75footer .mpost p { padding: 0px; margin: 0px; margin-bottom: 20px; }
76
77footer .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
159aside { 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>
370const DOMPARSER = new DOMParser().parseFromString.bind(new DOMParser())
371var frag = document.createDocumentFragment()
372var hasBegun = true
373var feedUrl = 'https://status.fsf.org/lpstatus/all/rss'
374/* Fetch the RSS Feed */
375fetch(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
404var d = new Date();
405var h = d.getUTCHours();
406h = h - 4;
407var m = d.getDate();
408document.body.className = "day" + m + " time" + h;
409
410</script>
411</body>
412</html>