<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>reveal.js - Slide Notes</title> <style> body { font-family: Helvetica; } #notes { font-size: 24px; width: 640px; margin-top: 5px; } #wrap-current-slide { width: 640px; height: 512px; float: left; overflow: hidden; } #current-slide { width: 1280px; height: 1024px; border: none; -moz-transform: scale(0.5); -moz-transform-origin: 0 0; -o-transform: scale(0.5); -o-transform-origin: 0 0; -webkit-transform: scale(0.5); -webkit-transform-origin: 0 0; } #wrap-next-slide { width: 320px; height: 256px; float: left; margin: 0 0 0 10px; overflow: hidden; } #next-slide { width: 1280px; height: 1024px; border: none; -moz-transform: scale(0.25); -moz-transform-origin: 0 0; -o-transform: scale(0.25); -o-transform-origin: 0 0; -webkit-transform: scale(0.25); -webkit-transform-origin: 0 0; } .slides { position: relative; margin-bottom: 10px; border: 1px solid black; border-radius: 2px; background: rgb(28, 30, 32); } .slides span { position: absolute; top: 3px; left: 3px; font-weight: bold; font-size: 14px; color: rgba( 255, 255, 255, 0.9 ); } </style> </head> <body> <div id="wrap-current-slide" class="slides"> <iframe src="/?receiver" width="1280" height="1024" id="current-slide"></iframe> </div> <div id="wrap-next-slide" class="slides"> <iframe src="/?receiver" width="640" height="512" id="next-slide"></iframe> <span>UPCOMING:</span> </div> <div id="notes"></div> <script src="/socket.io/socket.io.js"></script> <script> var socketId = '{{socketId}}'; var socket = io.connect(window.location.origin); var notes = document.getElementById('notes'); var currentSlide = document.getElementById('current-slide'); var nextSlide = document.getElementById('next-slide'); socket.on('slidedata', function(data) { // ignore data from sockets that aren't ours if (data.socketId !== socketId) { return; } notes.innerHTML = data.notes; currentSlide.contentWindow.Reveal.navigateTo(data.indexh, data.indexv); nextSlide.contentWindow.Reveal.navigateTo(data.nextindexh, data.nextindexv); }); </script> </body> </html>