notes.html

   1 <html>
   2     <head>
   3         <meta charset="utf-8">
   4         <link rel="stylesheet" href="css/style.css">
   5         <link href="https://fonts.googleapis.com/css?family=Press+Start+2P&amp;display=swap" rel="stylesheet">
   6         <link rel="stylesheet"
   7               href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.18.1/styles/atom-one-dark.min.css">
   8         <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.18.1/highlight.min.js"></script>
   9         <script>hljs.initHighlightingOnLoad();</script>
  10         <title>Wide-Eyed Crazy Functional Programming - Speaker Notes</title>
  11         <meta charset="utf-8">
  12         <style>
  13          a {
  14              color: #f98012;
  15              text-decoration: none;
  16          }
  17
  18          a:hover {
  19              color: white;
  20          }
  21
  22          .textbox ul {
  23              text-align: left;
  24          }
  25
  26          li {
  27              margin-bottom: 20px;
  28          }
  29
  30          .hljs {
  31              font-size: 22px !important;
  32          }
  33
  34          #notes h1 {
  35              width:100%;
  36          }
  37
  38         </style>
  39     </head>
  40     <body>
  41         <div id="slide-0" style="display: block">
  42             <div class="slide-title">=<< Speaker Notes >>=</div>
  43             <div class="slide flexotron">
  44                 <div class="textbox flexotron" id="notes" style="position: relative; margin-right:20px; padding: 20px; max-height:80%; overflow: scroll; overflow-y: auto; overflow-x: unset;">
  45                     <div id="cloudguy">
  46                         <div style="text-align: center;">
  47                             <img style="height: 200px; display: block; margin-left: auto; margin-right: auto; margin-bottom: 10px;" src="img/cloudguy.gif" />
  48                             <div id="cgquotes" style="margin: auto;">Hey! It's me again! Move this tab in a new window and as you go through the slides (unless your screen is small because I doubt the slides resize well), there'll be commentary here!</div>
  49                         </div>
  50                     </div>
  51                 </div>
  52             </div>
  53         </div>
  54     </body>
  55     <script>
  56      var bc = new BroadcastChannel('test_channel');
  57      bc.onmessage = function (ev) { changeNotes(ev.data); } /* receive */
  58
  59      function changeNotes(notes) {
  60          if (!!notes) {
  61              document.getElementById('notes').innerHTML = notes;
  62          } else {
  63              document.getElementById('notes').innerHTML = "No notes for this slide! Go on to the next one when you're ready.";
  64          }
  65      }
  66
  67      var x = 0;
  68      var y = 0;
  69      var b = document.querySelectorAll('body')[0];
  70      setInterval(function(){
  71          x+=2;
  72          y-=2;
  73
  74          b.style.backgroundPosition = x + 'px ' + y + 'px';
  75      }, 250);
  76
  77     </script>
  78 </html>