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;
}
#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/marked.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 = marked( data.notes );
Hakim El Hattab
committed
notes.innerHTML = data.notes;
Hakim El Hattab
committed
183
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
}
// 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();
Thomas Rosenau
committed
hours = Math.floor( diff / ( 1000 * 60 * 60 ) );
minutes = Math.floor( ( diff / ( 1000 * 60 ) ) % 60 );
seconds = Math.floor( ( diff / 1000 ) % 60 );
Hakim El Hattab
committed
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>