Newer
Older
Hakim El Hattab
committed
<!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;
Hakim El Hattab
committed
}
#wrap-current-slide {
width: 640px;
height: 512px;
float: left;
overflow: hidden;
}
#current-slide {
width: 1280px;
height: 1024px;
border: none;
-webkit-transform-origin: 0 0;
-moz-transform-origin: 0 0;
-ms-transform-origin: 0 0;
-o-transform-origin: 0 0;
transform-origin: 0 0;
Hakim El Hattab
committed
-webkit-transform: scale(0.5);
-moz-transform: scale(0.5);
-ms-transform: scale(0.5);
-o-transform: scale(0.5);
transform: scale(0.5);
Hakim El Hattab
committed
}
#wrap-next-slide {
width: 448px;
height: 358px;
float: left;
margin: 0 0 0 10px;
overflow: hidden;
}
#next-slide {
width: 1280px;
height: 1024px;
border: none;
-webkit-transform-origin: 0 0;
-moz-transform-origin: 0 0;
-ms-transform-origin: 0 0;
-o-transform-origin: 0 0;
transform-origin: 0 0;
Hakim El Hattab
committed
-webkit-transform: scale(0.35);
-moz-transform: scale(0.35);
-ms-transform: scale(0.35);
-o-transform: scale(0.35);
transform: scale(0.35);
Hakim El Hattab
committed
}
.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 );
}
.error {
font-weight: bold;
color: red;
font-size: 1.5em;
text-align: center;
margin-top: 10%;
}
.error code {
font-family: monospace;
}
Hakim El Hattab
committed
Hakim El Hattab
committed
width: 448px;
margin: 30px 0 0 10px;
float: left;
Hakim El Hattab
committed
opacity: 0;
-webkit-transition: opacity 0.4s;
-moz-transition: opacity 0.4s;
-o-transition: opacity 0.4s;
transition: opacity 0.4s;
Hakim El Hattab
committed
.elapsed,
.clock {
color: #333;
font-size: 2em;
text-align: center;
display: inline-block;
padding: 0.5em;
background-color: #eee;
border-radius: 10px;
}
Hakim El Hattab
committed
.elapsed h2,
.clock h2 {
font-size: 0.8em;
line-height: 100%;
margin: 0;
color: #aaa;
}
Hakim El Hattab
committed
.elapsed .mute {
color: #ddd;
}
Hakim El Hattab
committed
</style>
</head>
<body>
<div id="wrap-current-slide" class="slides">
<script>document.write( '<iframe width="1280" height="1024" id="current-slide" src="'+ window.opener.location.href +'"></iframe>' );</script>
Hakim El Hattab
committed
</div>
<div id="wrap-next-slide" class="slides">
<script>document.write( '<iframe width="640" height="512" id="next-slide" src="'+ window.opener.location.href +'"></iframe>' );</script>
Hakim El Hattab
committed
<span>UPCOMING:</span>
</div>
Hakim El Hattab
committed
<div class="time">
<div class="clock">
Hakim El Hattab
committed
<span id="clock">0:00:00 AM</span>
Hakim El Hattab
committed
<div class="elapsed">
Hakim El Hattab
committed
<span id="hours">00</span><span id="minutes">:00</span><span id="seconds">:00</span>
Hakim El Hattab
committed
Hakim El Hattab
committed
<div id="notes"></div>
<script src="../../plugin/markdown/showdown.js"></script>
Hakim El Hattab
committed
<script>
Hakim El Hattab
committed
Hakim El Hattab
committed
window.addEventListener( 'load', function() {
if( window.opener && window.opener.location && window.opener.location.href ) {
Hakim El Hattab
committed
var notes = document.getElementById( 'notes' ),
currentSlide = document.getElementById( 'current-slide' ),
nextSlide = document.getElementById( 'next-slide' );
Hakim El Hattab
committed
window.addEventListener( 'message', function( event ) {
var data = JSON.parse( event.data );
// No need for updating the notes in case of fragment changes
if ( data.notes !== undefined) {
if( data.markdown ) {
notes.innerHTML = (new Showdown.converter()).makeHtml( data.notes );
Hakim El Hattab
committed
notes.innerHTML = data.notes;
Hakim El Hattab
committed
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
}
// Showing and hiding fragments
if( data.fragment === 'next' ) {
currentSlide.contentWindow.Reveal.nextFragment();
}
else if( data.fragment === 'prev' ) {
currentSlide.contentWindow.Reveal.prevFragment();
}
else {
// Update the note slides
currentSlide.contentWindow.Reveal.slide( data.indexh, data.indexv );
nextSlide.contentWindow.Reveal.slide( data.nextindexh, data.nextindexv );
}
}, false );
var start = new Date(),
timeEl = document.querySelector( '.time' ),
clockEl = document.getElementById( 'clock' ),
hoursEl = document.getElementById( 'hours' ),
minutesEl = document.getElementById( 'minutes' ),
secondsEl = document.getElementById( 'seconds' );
setInterval( function() {
timeEl.style.opacity = 1;
var diff, hours, minutes, seconds,
now = new Date();
diff = now.getTime() - start.getTime();
hours = parseInt( diff / ( 1000 * 60 * 60 ) );
minutes = parseInt( ( diff / ( 1000 * 60 ) ) % 60 );
seconds = parseInt( ( diff / 1000 ) % 60 );
clockEl.innerHTML = now.toLocaleTimeString();
hoursEl.innerHTML = zeroPadInteger( hours );
hoursEl.className = hours > 0 ? "" : "mute";
minutesEl.innerHTML = ":" + zeroPadInteger( minutes );
minutesEl.className = minutes > 0 ? "" : "mute";
secondsEl.innerHTML = ":" + zeroPadInteger( seconds );
}, 1000 );
// Navigate the main window when the notes slide changes
currentSlide.contentWindow.Reveal.addEventListener( 'slidechanged', function( event ) {
window.opener.Reveal.slide( event.indexh, event.indexv );
} );
}
else {
document.body.innerHTML = '<p class="error">Unable to access <code>window.opener.location</code>.<br>Make sure the presentation is running on a web server.</p>';
}
Hakim El Hattab
committed
Hakim El Hattab
committed
}, false );
Hakim El Hattab
committed
function zeroPadInteger( num ) {
var str = "00" + parseInt( num );
return str.substring( str.length - 2 );
}
Hakim El Hattab
committed
</script>
</body>
</html>