Newer
Older
Hakim El Hattab
a validé
<!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
a validé
-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
a validé
}
#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
a validé
-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
a validé
}
.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
a validé
Hakim El Hattab
a validé
width: 448px;
margin: 30px 0 0 10px;
float: left;
Hakim El Hattab
a validé
opacity: 0;
-webkit-transition: opacity 0.4s;
-moz-transition: opacity 0.4s;
-o-transition: opacity 0.4s;
transition: opacity 0.4s;
Hakim El Hattab
a validé
.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
a validé
.elapsed h2,
.clock h2 {
font-size: 0.8em;
line-height: 100%;
margin: 0;
color: #aaa;
}
Hakim El Hattab
a validé
.elapsed .mute {
color: #ddd;
}
Hakim El Hattab
a validé
</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
a validé
</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
a validé
<span>UPCOMING:</span>
</div>
Hakim El Hattab
a validé
<div class="time">
<div class="clock">
Hakim El Hattab
a validé
<span id="clock">0:00:00 AM</span>
Hakim El Hattab
a validé
<div class="elapsed">
Hakim El Hattab
a validé
<span id="hours">00</span><span id="minutes">:00</span><span id="seconds">:00</span>
Hakim El Hattab
a validé
Hakim El Hattab
a validé
<div id="notes"></div>
<script src="../../plugin/markdown/marked.js"></script>
Hakim El Hattab
a validé
<script>
Hakim El Hattab
a validé
Hakim El Hattab
a validé
window.addEventListener( 'load', function() {
if( window.opener && window.opener.location && window.opener.location.href ) {
Hakim El Hattab
a validé
var notes = document.getElementById( 'notes' ),
currentSlide = document.getElementById( 'current-slide' ),
nextSlide = document.getElementById( 'next-slide' );
Hakim El Hattab
a validé
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
a validé
notes.innerHTML = data.notes;
Hakim El Hattab
a validé
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
215
216
217
218
219
220
221
222
223
224
225
226
}
// 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
a validé
Hakim El Hattab
a validé
}, false );
Hakim El Hattab
a validé
function zeroPadInteger( num ) {
var str = "00" + parseInt( num );
return str.substring( str.length - 2 );
}
Hakim El Hattab
a validé
</script>
</body>
</html>