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   margin-top: 0%;
 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   0% { margin-top: 1%; }
 124   10% { margin-top: 1%; }
 125   95% { margin-top: -43%; }
 126   100% { margin-top: -43%; }
 127 }
 128
 129 .program-day-header {
 130   text-align: center;
 131   color: #FFF;
 132 }
 133
 134 .program-timeslot-header {
 135   color: #52ce73;
 136   text-align: center;
 137 }
 138 .program-session-header h2 {
 139   font-size: 2.5em;
 140   font-weight: 400;
 141   color: #DFDFDF;
 142   margin: 0;
 143   padding: 0;
 144 }
 145 .program-session { padding-left: 5em; }
 146 .program-session-speaker {
 147   color: #52ce73;
 148   font-size: 2em;
 149 }
 150 .program-session-speaker a {
 151   color: #52ce73;
 152   text-decoration: none;
 153 }
 154 .program-session-room-details {
 155   font-weight: 800;
 156   font-size: 1.5em;
 157   color: #52ce73;
 158   padding-bottom: 1.5em;
 159 }
 160
 161 aside { position: relative; }
 162
 163 .iitem { width: 90%; }
 164
 165 .item-1,
 166 .item-2,
 167 .item-3 {
 168         position: absolute;
 169         display: block;
 170         width: 50%;
 171         padding: 0px;
 172         margin-top: 3em;
 173         animation-duration: 20s;
 174         animation-timing-function: ease-in-out;
 175         animation-iteration-count: infinite;
 176 }
 177
 178 .item-1{
 179         animation-name: anim-1;
 180 }
 181
 182 .item-2{
 183         animation-name: anim-2;
 184 }
 185
 186 .item-3{
 187         animation-name: anim-3;
 188 }
 189
 190 @keyframes anim-1 {
 191         0%, 8.3% { left: -100%; opacity: 0; }
 192   8.3%,25% { left: 25%; opacity: 1; }
 193   33.33%, 100% { left: 110%; opacity: 0; }
 194 }
 195
 196 @keyframes anim-2 {
 197         0%, 33.33% { left: -100%; opacity: 0; }
 198   41.63%, 58.29% { left: 25%; opacity: 1; }
 199   66.66%, 100% { left: 110%; opacity: 0; }
 200 }
 201
 202 @keyframes anim-3 {
 203         0%, 66.66% { left: -100%; opacity: 0; }
 204   74.96%, 91.62% { left: 25%; opacity: 1; }
 205   100% { left: 110%; opacity: 0; }
 206 }
 207
 208 /* Hidden all content */
 209 .program-day,
 210 .program-timeslot { display: none; }
 211
 212 /* Show specifiy day */
 213 .day21 #day-1-program,
 214 .day22 #day-2-program,
 215 .day23 #day-1-program,
 216 .day24 #day-2-program { display: block; }
 217
 218 /* Show specifiy time */
 219 .time8 #day-1-timeslot-1,
 220 .time8 #day-1-timeslot-2,
 221 .time8 #day-1-timeslot-3,
 222 .time8 #day-1-timeslot-4,
 223 .time8 #day-1-timeslot-5,
 224 .time8 #day-2-timeslot-1,
 225 .time8 #day-2-timeslot-2,
 226 .time8 #day-2-timeslot-3,
 227 .time8 #day-2-timeslot-4,
 228 .time8 #day-2-timeslot-5,
 229 .time9 #day-1-timeslot-1,
 230 .time9 #day-1-timeslot-2,
 231 .time9 #day-1-timeslot-3,
 232 .time9 #day-1-timeslot-4,
 233 .time9 #day-1-timeslot-5,
 234 .time9 #day-2-timeslot-1,
 235 .time9 #day-2-timeslot-2,
 236 .time9 #day-2-timeslot-3,
 237 .time9 #day-2-timeslot-4,
 238 .time9 #day-2-timeslot-5,
 239 .time10 #day-1-timeslot-3,
 240 .time10 #day-1-timeslot-4,
 241 .time10 #day-1-timeslot-5,
 242 .time10 #day-1-timeslot-6,
 243 .time10 #day-2-timeslot-3,
 244 .time10 #day-2-timeslot-4,
 245 .time10 #day-2-timeslot-5,
 246 .time10 #day-2-timeslot-6,
 247 .time11 #day-1-timeslot-5,
 248 .time11 #day-1-timeslot-6,
 249 .time11 #day-2-timeslot-5,
 250 .time11 #day-2-timeslot-6,
 251 .time12 #day-1-timeslot-6,
 252 .time12 #day-1-timeslot-7,
 253 .time12 #day-1-timeslot-8,
 254 .time12 #day-2-timeslot-6,
 255 .time12 #day-2-timeslot-7,
 256 .time12 #day-2-timeslot-8,
 257 .time13 #day-1-timeslot-7,
 258 .time13 #day-1-timeslot-8,
 259 .time13 #day-1-timeslot-9,
 260 .time13 #day-1-timeslot-10,
 261 .time13 #day-2-timeslot-7,
 262 .time13 #day-2-timeslot-8,
 263 .time13 #day-2-timeslot-9,
 264 .time13 #day-2-timeslot-10,
 265 .time14 #day-1-timeslot-8,
 266 .time14 #day-1-timeslot-9,
 267 .time14 #day-1-timeslot-10,
 268 .time14 #day-2-timeslot-8,
 269 .time14 #day-2-timeslot-9,
 270 .time14 #day-2-timeslot-10,
 271 .time15 #day-1-timeslot-10,
 272 .time15 #day-1-timeslot-11,
 273 .time15 #day-1-timeslot-12,
 274 .time15 #day-2-timeslot-10,
 275 .time15 #day-2-timeslot-11,
 276 .time15 #day-2-timeslot-12,
 277 .time16 #day-1-timeslot-12,
 278 .time16 #day-1-timeslot-13,
 279 .time16 #day-1-timeslot-14,
 280 .time16 #day-2-timeslot-12,
 281 .time16 #day-2-timeslot-13,
 282 .time16 #day-2-timeslot-14,
 283 .time17 #day-1-timeslot-14,
 284 .time17 #day-1-timeslot-15,
 285 .time17 #day-1-timeslot-16,
 286 .time17 #day-1-timeslot-17,
 287 .time17 #day-2-timeslot-14,
 288 .time17 #day-2-timeslot-15,
 289 .time17 #day-2-timeslot-16,
 290 .time17 #day-2-timeslot-17,
 291 .time18 #day-1-timeslot-15,
 292 .time18 #day-1-timeslot-16,
 293 .time18 #day-1-timeslot-17,
 294 .time18 #day-2-timeslot-15,
 295 .time18 #day-2-timeslot-16,
 296 .time18 #day-2-timeslot-17,
 297 .time19 #whatsup,
 298 .time20 #whatsup { display: block; }
 299
 300 </style>
 301 <body class="day time">
 302
 303 <div class="wrapper">
 304   <header class="grid">
 305           <h1>What's Up!</h1>
 306   </header>
 307   <article class="grid" id="content-program">
 308
 309  <!--#include virtual="/2019/includes/generated-sessions.html"-->
 310
 311  <div class="program-day" id="whatsup">
 312           <section class="program-session">
 313                 <header class="program-session-header">
 314                   <hgroup>
 315                     <h2>We do not have programming today.</h2>
 316                   </hgroup>
 317                 </header>
 318                 <div class="program-session-shelf">
 319                   <div class="program-session-room-details">
 320                           <span class="room label label-default"><h3 style="text-align: center;">March 23rd - 24th</h3></span>
 321                    </div>
 322                 </div>
 323         </section>
 324   </div><!-- #whatsup -->
 325
 326   </article>
 327   <aside class="grid">
 328           <p>
 329           <img src="/2019/assets/img/lp-anim.svg" alt="LibrePlanet Logo with Animation" title="LibrePlanet Logo" />
 330           </p>
 331         <p class="item-1"><img class="iitem" src="/2019/assets/img/pia-logo.svg" alt="Private Internet Access" /></p>
 332         <p class="item-2"><img class="iitem" src="/2019/assets/img/redhat-logo.svg" alt="RedHat" /></p>
 333         <p class="item-3"><img class="iitem" src="/2019/assets/img/fsf2.svg" alt="Free Software Foundation" /></p>
 334   </aside>
 335   <footer class="grid">
 336
 337         <div>
 338
 339         <div class="slider">
 340         <div class="multiple-items slide-list">
 341         <output>Loading...</output>
 342         </div></div>
 343
 344         <template>
 345                 <div class="content-ft"></div>
 346         </template>
 347
 348           </div>
 349   </footer>
 350 </div>
 351 <script>
 352 const DOMPARSER = new DOMParser().parseFromString.bind(new DOMParser())
 353 var frag = document.createDocumentFragment()
 354 var hasBegun = true
 355 var feedUrl = 'https://status.fsf.org/lpstatus/all/rss'
 356 /* Fetch the RSS Feed */
 357 fetch(feedUrl).then((res) => {
 358         res.text().then((xmlTxt) => {
 359                 /* Parse the RSS Feed and display the content */
 360                 try {
 361                         let doc = DOMPARSER(xmlTxt, "text/xml")
 362                         // let heading = document.createElement('h1')
 363                         // heading.textContent = url.hostname
 364                         // frag.appendChild(heading)
 365                         doc.querySelectorAll('item').forEach((item) => {
 366                                 let temp = document.importNode(document.querySelector('template').content, true);
 367                                 let i = item.querySelector.bind(item)
 368                                 let t = temp.querySelector.bind(temp)
 369                                 t('div').textContent = !!i('title') ? i('title').textContent : '-'
 370                                 // t('a').textContent = t('a').href = !!i('link') ? i('link').textContent : '#'
 371                                 // t('p').innerHTML = !!i('description') ? i('description').textContent : '-'
 372                                 // t('h3').textContent = url.hostname
 373                                 frag.appendChild(temp)
 374                         })
 375                 } catch (e) {
 376                         console.error('Error in parsing the feed')
 377                 }
 378                 if(hasBegun) {
 379                         document.querySelector('output').textContent = '';
 380                         hasBegun = false;
 381                 }
 382                 document.querySelector('output').appendChild(frag)
 383         })
 384 }).catch(() => console.error('Error in fetching the RSS feed'));
 385
 386 var d = new Date();
 387 var h = d.getUTCHours();
 388 h = h - 4;
 389 var m = d.getDate();
 390 document.body.className = "day" + m + " time" + h;
 391
 392 </script>
 393 </body>
 394 </html>