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