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