86 lines
		
	
	
		
			2.0 KiB
		
	
	
	
		
			HTML
		
	
	
	
	
	
			
		
		
	
	
			86 lines
		
	
	
		
			2.0 KiB
		
	
	
	
		
			HTML
		
	
	
	
	
	
| <!doctype html>
 | |
| <html lang="en">
 | |
|   <head>
 | |
|     <meta charset="utf-8">
 | |
| 
 | |
|     <title>Slide Notes</title>
 | |
| 
 | |
|     <style>
 | |
|       #notes {
 | |
|         font-family: Helvetica;
 | |
|         font-size: 24px;
 | |
|         width: 640px;
 | |
|       }
 | |
| 
 | |
|       #wrap-slides {
 | |
|         width: 640px;
 | |
|         height: 512px;
 | |
|         float: left;
 | |
|       }
 | |
| 
 | |
|       #slides {
 | |
|         width: 1280px;
 | |
|         height: 1024px;
 | |
|         border: 1px solid black;
 | |
|         -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 50px;
 | |
|       }
 | |
| 
 | |
|       #next-slide {
 | |
|         width: 1280px;
 | |
|         height: 1024px;
 | |
|         border: 1px solid black;
 | |
|         -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;
 | |
|       }
 | |
|     </style>
 | |
|   </head>
 | |
| 
 | |
|   <body>
 | |
| 
 | |
|     <div id="wrap-slides">
 | |
|       <iframe src="/?receiver" width="1280" height="1024" id="slides"></iframe>
 | |
|     </div>
 | |
| 
 | |
|     <div id="wrap-next-slide">
 | |
|       <iframe src="/?receiver" width="640" height="512" id="next-slide"></iframe>
 | |
|     </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 slides = document.getElementById('slides');
 | |
|     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;
 | |
|       slides.contentWindow.Reveal.navigateTo(data.indexh, data.indexv);
 | |
|       nextSlide.contentWindow.Reveal.navigateTo(data.nextindexh, data.nextindexv);
 | |
|     });
 | |
|     </script>
 | |
| 
 | |
|   </body>
 | |
| </html>
 |