--- /dev/null
+<!doctype html>
+<html>
+<head>
+ <meta charset="utf-8" />
+ <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+ <title>Notice from #LibrePlanet</title>
+ <meta http-equiv="refresh" content="300">
+ <link href="https://fonts.googleapis.com/css?family=Exo+2:400,800" rel="stylesheet">
+</head>
+<style>
+
+body {
+ font-family: 'Exo 2', sans-serif;
+ margin: 0;
+ padding: 0;
+ overflow: hidden;
+ background-color: #4F0276;
+ color: #DFDFDF;
+}
+
+header.grid {
+ grid-area: header;
+ text-align: center;
+}
+
+header.grid h1 {
+ background-color: #52ce73;
+ color: #FFF;
+ font-weight: 800;
+ font-size: 3em;
+ padding: 0.3em;
+ width: auto;
+ margin: 0;
+ border-bottom-left-radius: 100px;
+}
+
+article.grid {
+ grid-area: content;
+ min-height: 70vh;
+ max-height: 70vh;
+ overflow: auto;
+}
+
+#content-program .program-session-desc-block,
+#content-program button {
+ display: none;
+}
+
+aside.grid {
+ grid-area: sidebar;
+ min-height: 80vh;
+ text-align: center;
+}
+footer.grid {
+ position: relative;
+ min-height: 20vh;
+ grid-area: footer;
+ background-color: #DFDFDF;
+ color: #4F0276;
+}
+
+footer .mpost {
+ font-weight: 400;
+ font-size: 2em;
+ text-align: center;
+ height: 20vh;
+ display: flex;
+ flex-direction: row;
+ flex-wrap: wrap;
+ align-items: center;
+ max-height: 20vh;
+}
+
+footer .mpost p { padding: 0px; margin: 0px; margin-bottom: 20px; }
+
+footer .mpost a {
+ text-decoration: none;
+ color: #000;
+}
+
+.wrapper {
+ display: grid;
+ grid-gap: 5px;
+ grid-template-columns: 1fr 3fr;
+ grid-template-areas:
+ "sidebar header"
+ "sidebar content"
+ "footer footer";
+}
+.content-ft {
+ font-size: 2em;
+ text-align: center;
+ overflow: hidden;
+ height: 20vh;
+ max-height: 20vh;
+ display: inline-flex;
+ align-content: center;
+ align-items: center;
+ width: 48%;
+ padding: 0 0.5em;
+ float: left;
+}
+.content-ft:first-child {
+ border-right: 3px solid #4F0276;
+}
+
+#content-program {
+ width: 100%;
+ position: relative;
+ overflow: hidden;
+}
+
+#content-program .program-day {
+ margin-top: 0%;
+ animation: slide-slow infinite;
+ animation-duration: 20s;
+ animation-direction: alternate;
+}
+
+@keyframes slide-slow {
+ from { margin-top: 1%; }
+ to { margin-top: -20%; }
+}
+
+.program-day-header {
+ text-align: center;
+ color: #FFF;
+}
+
+.program-timeslot-header {
+ color: #52ce73;
+ text-align: center;
+}
+.program-session-header h2 {
+ font-size: 2.5em;
+ font-weight: 400;
+ color: #DFDFDF;
+ margin: 0;
+ padding: 0;
+}
+.program-session { padding-left: 5em; }
+.program-session-speaker {
+ color: #52ce73;
+ font-size: 2em;
+}
+.program-session-speaker a {
+ color: #52ce73;
+ text-decoration: none;
+}
+.program-session-room-details {
+ font-weight: 800;
+ font-size: 1.5em;
+ color: #52ce73;
+ padding-bottom: 1.5em;
+}
+
+aside { position: relative; }
+
+.iitem { width: 90%; }
+
+.item-1,
+.item-2,
+.item-3 {
+ position: absolute;
+ display: block;
+ width: 50%;
+ padding: 0px;
+ margin-top: 3em;
+ animation-duration: 20s;
+ animation-timing-function: ease-in-out;
+ animation-iteration-count: infinite;
+}
+
+.item-1{
+ animation-name: anim-1;
+}
+
+.item-2{
+ animation-name: anim-2;
+}
+
+.item-3{
+ animation-name: anim-3;
+}
+
+@keyframes anim-1 {
+ 0%, 8.3% { left: -100%; opacity: 0; }
+ 8.3%,25% { left: 25%; opacity: 1; }
+ 33.33%, 100% { left: 110%; opacity: 0; }
+}
+
+@keyframes anim-2 {
+ 0%, 33.33% { left: -100%; opacity: 0; }
+ 41.63%, 58.29% { left: 25%; opacity: 1; }
+ 66.66%, 100% { left: 110%; opacity: 0; }
+}
+
+@keyframes anim-3 {
+ 0%, 66.66% { left: -100%; opacity: 0; }
+ 74.96%, 91.62% { left: 25%; opacity: 1; }
+ 100% { left: 110%; opacity: 0; }
+}
+
+/* Hidden all content */
+.program-day,
+.program-timeslot { display: none; }
+
+/* Show specifiy day */
+.day23 #day-1-program,
+.day20 #day-2-program { display: block; }
+
+/* Show specifiy time */
+.time9 #day-1-timeslot-1,
+.time9 #day-1-timeslot-2,
+.time9 #day-1-timeslot-3,
+.time9 #day-1-timeslot-4,
+.time10 #day-1-timeslot-5,
+.time10 #day-1-timeslot-6,
+.time10 #day-1-timeslot-7,
+.time11 #day-1-timeslot-7,
+.time11 #day-1-timeslot-8,
+.time11 #day-1-timeslot-9,
+.time12 #day-1-timeslot-10,
+.time12 #day-1-timeslot-11,
+.time12 #day-1-timeslot-12,
+.time15 #day-1-timeslot-13,
+.time15 #day-1-timeslot-14,
+.time15 #day-1-timeslot-15,
+.time15 #day-1-timeslot-16,
+.time9 #day-2-timeslot-1,
+.time9 #day-2-timeslot-2,
+.time9 #day-2-timeslot-3,
+.time9 #day-2-timeslot-4,
+.time10 #day-2-timeslot-5,
+.time10 #day-2-timeslot-6,
+.time10 #day-2-timeslot-7,
+.time11 #day-2-timeslot-8,
+.time11 #day-2-timeslot-9,
+.time11 #day-2-timeslot-10,
+.time12 #day-2-timeslot-11,
+.time12 #day-2-timeslot-12,
+.time13 #day-2-timeslot-13,
+.time13 #day-2-timeslot-14,
+.time17 #day-2-timeslot-15,
+.time17 #day-2-timeslot-16,
+.time17 #day-2-timeslot-17 { display: block; }
+
+</style>
+<body class="day time">
+
+<div class="wrapper">
+ <header class="grid">
+ <h1>What's Up!</h1>
+ </header>
+ <article class="grid" id="content-program">
+
+ <!--#include virtual="/2019/includes/generated-sessions.html"-->
+
+ </article>
+ <aside class="grid">
+ <p>
+ <img src="/2019/assets/img/lp-anim.svg" alt="LibrePlanet Logo with Animation" title="LibrePlanet Logo" />
+ </p>
+ <p class="item-1"><img class="iitem" src="/2019/assets/img/fsf.svg" alt="Logo FSF" /></p>
+ <p class="item-2"><img class="iitem" src="/2019/assets/img/fsf1.svg" alt="Logo FSF" /></p>
+ <p class="item-3"><img class="iitem" src="/2019/assets/img/fsf2.svg" alt="Logo FSF" /></p>
+ </aside>
+ <footer class="grid">
+
+ <div>
+
+ <div class="slider">
+ <div class="multiple-items slide-list">
+ <output>Loading...</output>
+ </div></div>
+
+ <template>
+ <div class="content-ft"></div>
+ </template>
+
+ </div>
+ </footer>
+</div>
+<script>
+const DOMPARSER = new DOMParser().parseFromString.bind(new DOMParser())
+var frag = document.createDocumentFragment()
+var hasBegun = true
+var feedUrl = 'https://quitter.im/libreplanet/all/rss'
+/* Fetch the RSS Feed */
+fetch(feedUrl).then((res) => {
+ res.text().then((xmlTxt) => {
+ /* Parse the RSS Feed and display the content */
+ try {
+ let doc = DOMPARSER(xmlTxt, "text/xml")
+ // let heading = document.createElement('h1')
+ // heading.textContent = url.hostname
+ // frag.appendChild(heading)
+ doc.querySelectorAll('item').forEach((item) => {
+ let temp = document.importNode(document.querySelector('template').content, true);
+ let i = item.querySelector.bind(item)
+ let t = temp.querySelector.bind(temp)
+ t('div').textContent = !!i('title') ? i('title').textContent : '-'
+ // t('a').textContent = t('a').href = !!i('link') ? i('link').textContent : '#'
+ // t('p').innerHTML = !!i('description') ? i('description').textContent : '-'
+ // t('h3').textContent = url.hostname
+ frag.appendChild(temp)
+ })
+ } catch (e) {
+ console.error('Error in parsing the feed')
+ }
+ if(hasBegun) {
+ document.querySelector('output').textContent = '';
+ hasBegun = false;
+ }
+ document.querySelector('output').appendChild(frag)
+ })
+}).catch(() => console.error('Error in fetching the RSS feed'));
+
+var d = new Date();
+var h = d.getHours();
+var m = d.getDate();
+document.body.className = "day" + m + " time" + h;
+
+</script>
+</body>
+</html>