2019/tv/index.html

   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 .timexxx11 #day-1-timeslot-5,
 246 .timexxx11 #day-1-timeslot-6,
 247 .timexxx11 #day-2-timeslot-5,
 248 .timexxx11 #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 #whatsup,
 296 .time20 #whatsup { display: block; }
 297
 298 </style>
 299 <body class="day time">
 300
 301 <div class="wrapper">
 302   <header class="grid">
 303           <h1>What's Up!</h1>
 304   </header>
 305   <article class="grid" id="content-program">
 306
 307  <!--#include virtual="/2019/includes/generated-sessions.html"-->
 308
 309  <div class="program-day" id="whatsup">
 310           <section class="program-session">
 311                 <header class="program-session-header">
 312                   <hgroup>
 313                     <h2>We do not have programming today.</h2>
 314                   </hgroup>
 315                 </header>
 316                 <div class="program-session-shelf">
 317                   <div class="program-session-room-details">
 318                           <span class="room label label-default"><h3 style="text-align: center;">March 23rd - 24th</h3></span>
 319                    </div>
 320                 </div>
 321         </section>
 322   </div><!-- #whatsup -->
 323
 324   </article>
 325   <aside class="grid">
 326           <p>
 327           <img src="/2019/assets/img/lp-anim.svg" alt="LibrePlanet Logo with Animation" title="LibrePlanet Logo" />
 328           </p>
 329         <p class="item-1"><img class="iitem" src="/2019/assets/img/pia-logo.svg" alt="Private Internet Access" /></p>
 330         <p class="item-2"><img class="iitem" src="/2019/assets/img/redhat-logo.svg" alt="RedHat" /></p>
 331         <p class="item-3"><img class="iitem" src="/2019/assets/img/fsf2.svg" alt="Free Software Foundation" /></p>
 332   </aside>
 333   <footer class="grid">
 334
 335         <div>
 336
 337         <div class="slider">
 338         <div class="multiple-items slide-list">
 339         <output>Loading...</output>
 340         </div></div>
 341
 342         <template>
 343                 <div class="content-ft"></div>
 344         </template>
 345
 346           </div>
 347   </footer>
 348 </div>
 349 <script>
 350 const DOMPARSER = new DOMParser().parseFromString.bind(new DOMParser())
 351 var frag = document.createDocumentFragment()
 352 var hasBegun = true
 353 var feedUrl = 'https://status.fsf.org/lpstatus/all/rss'
 354 /* Fetch the RSS Feed */
 355 fetch(feedUrl).then((res) => {
 356         res.text().then((xmlTxt) => {
 357                 /* Parse the RSS Feed and display the content */
 358                 try {
 359                         let doc = DOMPARSER(xmlTxt, "text/xml")
 360                         // let heading = document.createElement('h1')
 361                         // heading.textContent = url.hostname
 362                         // frag.appendChild(heading)
 363                         doc.querySelectorAll('item').forEach((item) => {
 364                                 let temp = document.importNode(document.querySelector('template').content, true);
 365                                 let i = item.querySelector.bind(item)
 366                                 let t = temp.querySelector.bind(temp)
 367                                 t('div').textContent = !!i('title') ? i('title').textContent : '-'
 368                                 // t('a').textContent = t('a').href = !!i('link') ? i('link').textContent : '#'
 369                                 // t('p').innerHTML = !!i('description') ? i('description').textContent : '-'
 370                                 // t('h3').textContent = url.hostname
 371                                 frag.appendChild(temp)
 372                         })
 373                 } catch (e) {
 374                         console.error('Error in parsing the feed')
 375                 }
 376                 if(hasBegun) {
 377                         document.querySelector('output').textContent = '';
 378                         hasBegun = false;
 379                 }
 380                 document.querySelector('output').appendChild(frag)
 381         })
 382 }).catch(() => console.error('Error in fetching the RSS feed'));
 383
 384 var d = new Date();
 385 var h = d.getUTCHours();
 386 h = h - 4;
 387 var m = d.getDate();
 388 document.body.className = "day" + m + " time" + h;
 389
 390 </script>
 391 </body>
 392 </html>