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         </style>
  38     </head>
  39     <body>
  40         <div id="slide-0" style="display: block">
  41             <div class="slide-title">=<< Speaker Notes >>=</div>
  42             <div class="slide flexotron">
  43                 <div class="textbox flexotron" id="notes" style="position: relative; margin-right:20px; padding: 20px;">
  44                     <div id="cloudguy">
  45                         <div style="text-align: center;">
  46                             <img style="height: 200px; display: block; margin-left: auto; margin-right: auto; margin-bottom: 10px;" src="img/cloudguy.gif" />
  47                             <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>
  48                         </div>
  49                     </div>
  50                 </div>
  51             </div>
  52         </div>
  53     </body>
  54     <script>
  55      var bc = new BroadcastChannel('test_channel');
  56      bc.onmessage = function (ev) { changeNotes(ev.data); } /* receive */
  57
  58      function changeNotes(notes) {
  59          if (!!notes) {
  60              document.getElementById('notes').innerHTML = notes;
  61          } else {
  62              document.getElementById('notes').innerHTML = "No notes for this slide! Go on to the next one when you're ready.";
  63          }
  64      }
  65
  66      var x = 0;
  67      var y = 0;
  68      var b = document.querySelectorAll('body')[0];
  69      setInterval(function(){
  70          x+=2;
  71          y-=2;
  72
  73          b.style.backgroundPosition = x + 'px ' + y + 'px';
  74      }, 250);
  75
  76     </script>
  77 </html>