<html>
<head>
<meta charset="utf-8">
+ <link rel="stylesheet" href="css/style.css">
+ <link href="https://fonts.googleapis.com/css?family=Press+Start+2P&display=swap" rel="stylesheet">
+ <link rel="stylesheet"
+ href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.18.1/styles/atom-one-dark.min.css">
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.18.1/highlight.min.js"></script>
+ <script>hljs.initHighlightingOnLoad();</script>
+ <title>Wide-Eyed Crazy Functional Programming - Speaker Notes</title>
+ <meta charset="utf-8">
<style>
- div[id^="slide-"] {
- display: none;
- }
+ a {
+ color: #f98012;
+ text-decoration: none;
+ }
+
+ a:hover {
+ color: white;
+ }
+
+ .textbox ul {
+ text-align: left;
+ }
+
+ li {
+ margin-bottom: 20px;
+ }
+
+ .hljs {
+ font-size: 22px !important;
+ }
+
+ #notes h1 {
+ width:100%;
+ }
+
</style>
</head>
<body>
- <div id="notes" >
- hello
+ <div id="slide-0" style="display: block">
+ <div class="slide-title">=<< Speaker Notes >>=</div>
+ <div class="slide flexotron">
+ <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;">
+ <div id="cloudguy">
+ <div style="text-align: center;">
+ <img style="height: 200px; display: block; margin-left: auto; margin-right: auto; margin-bottom: 10px;" src="img/cloudguy.gif" />
+ <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>
+ </div>
+ </div>
+ </div>
+ </div>
</div>
</body>
<script>
bc.onmessage = function (ev) { changeNotes(ev.data); } /* receive */
function changeNotes(notes) {
- window.console.log(notes);
- document.getElementById('notes').innerHTML = notes;
+ if (!!notes) {
+ document.getElementById('notes').innerHTML = notes;
+ } else {
+ document.getElementById('notes').innerHTML = "No notes for this slide! Go on to the next one when you're ready.";
+ }
}
+ var x = 0;
+ var y = 0;
+ var b = document.querySelectorAll('body')[0];
+ setInterval(function(){
+ x+=2;
+ y-=2;
+
+ b.style.backgroundPosition = x + 'px ' + y + 'px';
+ }, 250);
+
</script>
</html>
projects / fp-lecture.git / blobdiff