|
rc-web@42
|
1 <!doctype html>
|
|
rc-web@42
|
2 <html lang="en">
|
|
rc-web@42
|
3 <head>
|
|
rc-web@42
|
4 <meta charset="utf-8">
|
|
rc-web@42
|
5
|
|
rc-web@42
|
6 <title>reveal.js - Slide Notes</title>
|
|
rc-web@42
|
7
|
|
rc-web@42
|
8 <style>
|
|
rc-web@42
|
9 body {
|
|
rc-web@42
|
10 font-family: Helvetica;
|
|
rc-web@42
|
11 }
|
|
rc-web@42
|
12
|
|
rc-web@42
|
13 #notes {
|
|
rc-web@42
|
14 font-size: 24px;
|
|
rc-web@42
|
15 width: 640px;
|
|
rc-web@42
|
16 margin-top: 5px;
|
|
rc-web@42
|
17 }
|
|
rc-web@42
|
18
|
|
rc-web@42
|
19 #wrap-current-slide {
|
|
rc-web@42
|
20 width: 640px;
|
|
rc-web@42
|
21 height: 512px;
|
|
rc-web@42
|
22 float: left;
|
|
rc-web@42
|
23 overflow: hidden;
|
|
rc-web@42
|
24 }
|
|
rc-web@42
|
25
|
|
rc-web@42
|
26 #current-slide {
|
|
rc-web@42
|
27 width: 1280px;
|
|
rc-web@42
|
28 height: 1024px;
|
|
rc-web@42
|
29 border: none;
|
|
rc-web@42
|
30 -moz-transform: scale(0.5);
|
|
rc-web@42
|
31 -moz-transform-origin: 0 0;
|
|
rc-web@42
|
32 -o-transform: scale(0.5);
|
|
rc-web@42
|
33 -o-transform-origin: 0 0;
|
|
rc-web@42
|
34 -webkit-transform: scale(0.5);
|
|
rc-web@42
|
35 -webkit-transform-origin: 0 0;
|
|
rc-web@42
|
36 }
|
|
rc-web@42
|
37
|
|
rc-web@42
|
38 #wrap-next-slide {
|
|
rc-web@42
|
39 width: 320px;
|
|
rc-web@42
|
40 height: 256px;
|
|
rc-web@42
|
41 float: left;
|
|
rc-web@42
|
42 margin: 0 0 0 10px;
|
|
rc-web@42
|
43 overflow: hidden;
|
|
rc-web@42
|
44 }
|
|
rc-web@42
|
45
|
|
rc-web@42
|
46 #next-slide {
|
|
rc-web@42
|
47 width: 1280px;
|
|
rc-web@42
|
48 height: 1024px;
|
|
rc-web@42
|
49 border: none;
|
|
rc-web@42
|
50 -moz-transform: scale(0.25);
|
|
rc-web@42
|
51 -moz-transform-origin: 0 0;
|
|
rc-web@42
|
52 -o-transform: scale(0.25);
|
|
rc-web@42
|
53 -o-transform-origin: 0 0;
|
|
rc-web@42
|
54 -webkit-transform: scale(0.25);
|
|
rc-web@42
|
55 -webkit-transform-origin: 0 0;
|
|
rc-web@42
|
56 }
|
|
rc-web@42
|
57
|
|
rc-web@42
|
58 .slides {
|
|
rc-web@42
|
59 position: relative;
|
|
rc-web@42
|
60 margin-bottom: 10px;
|
|
rc-web@42
|
61 border: 1px solid black;
|
|
rc-web@42
|
62 border-radius: 2px;
|
|
rc-web@42
|
63 background: rgb(28, 30, 32);
|
|
rc-web@42
|
64 }
|
|
rc-web@42
|
65
|
|
rc-web@42
|
66 .slides span {
|
|
rc-web@42
|
67 position: absolute;
|
|
rc-web@42
|
68 top: 3px;
|
|
rc-web@42
|
69 left: 3px;
|
|
rc-web@42
|
70 font-weight: bold;
|
|
rc-web@42
|
71 font-size: 14px;
|
|
rc-web@42
|
72 color: rgba( 255, 255, 255, 0.9 );
|
|
rc-web@42
|
73 }
|
|
rc-web@42
|
74 </style>
|
|
rc-web@42
|
75 </head>
|
|
rc-web@42
|
76
|
|
rc-web@42
|
77 <body>
|
|
rc-web@42
|
78
|
|
rc-web@42
|
79 <div id="wrap-current-slide" class="slides">
|
|
rc-web@42
|
80 <iframe src="/?receiver" width="1280" height="1024" id="current-slide"></iframe>
|
|
rc-web@42
|
81 </div>
|
|
rc-web@42
|
82
|
|
rc-web@42
|
83 <div id="wrap-next-slide" class="slides">
|
|
rc-web@42
|
84 <iframe src="/?receiver" width="640" height="512" id="next-slide"></iframe>
|
|
rc-web@42
|
85 <span>UPCOMING:</span>
|
|
rc-web@42
|
86 </div>
|
|
rc-web@42
|
87 <div id="notes"></div>
|
|
rc-web@42
|
88
|
|
rc-web@42
|
89 <script src="/socket.io/socket.io.js"></script>
|
|
rc-web@42
|
90
|
|
rc-web@42
|
91 <script>
|
|
rc-web@42
|
92 var socketId = '{{socketId}}';
|
|
rc-web@42
|
93 var socket = io.connect(window.location.origin);
|
|
rc-web@42
|
94 var notes = document.getElementById('notes');
|
|
rc-web@42
|
95 var currentSlide = document.getElementById('current-slide');
|
|
rc-web@42
|
96 var nextSlide = document.getElementById('next-slide');
|
|
rc-web@42
|
97
|
|
rc-web@42
|
98 socket.on('slidedata', function(data) {
|
|
rc-web@42
|
99 // ignore data from sockets that aren't ours
|
|
rc-web@42
|
100 if (data.socketId !== socketId) { return; }
|
|
rc-web@42
|
101
|
|
rc-web@42
|
102 notes.innerHTML = data.notes;
|
|
rc-web@42
|
103 currentSlide.contentWindow.Reveal.navigateTo(data.indexh, data.indexv);
|
|
rc-web@42
|
104 nextSlide.contentWindow.Reveal.navigateTo(data.nextindexh, data.nextindexv);
|
|
rc-web@42
|
105 });
|
|
rc-web@42
|
106 </script>
|
|
rc-web@42
|
107
|
|
rc-web@42
|
108 </body>
|
|
rc-web@42
|
109 </html>
|
