Move tv.html to tv/index.html
authorTechnologyClassroom <michael.steven.mcmahon@gmail.com>
Thu, 21 Mar 2019 15:20:26 +0000 (11:20 -0400)
committerTechnologyClassroom <michael.steven.mcmahon@gmail.com>
Thu, 21 Mar 2019 15:20:26 +0000 (11:20 -0400)
2019/tv/index.html [new file with mode: 0755]

diff --git a/2019/tv/index.html b/2019/tv/index.html
new file mode 100755 (executable)
index 0000000..d1a8ae2
--- /dev/null
@@ -0,0 +1,326 @@
+<!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>