Skip to content
Find file
Fetching contributors…
Cannot retrieve contributors at this time
249 lines (220 sloc) 6.6 KB
<!DOCTYPE html>
<meta charset="utf-8">
<title>The Title Of Your Presentation</title>
<!-- Your Slides -->
<!-- One section is one slide -->
<section>
<!-- This is the first slide -->
<h1>Foobar.</h1>
<footer>by John Doe</footer>
</section>
<section>
<h2>Foo?</h2>
</section>
<section>
<h3>No, bar!</h3>
<ul>
<li>Text
<li>Images
<li>Videos
</ul>
</section>
<!-- Your Style -->
<!-- Define the style of you presentation -->
<!-- Maybe a font from http://www.google.com/webfonts ? -->
<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet'>
<style>
html { background-color: black; }
body {background-color: white;}
/* A section is a slide. It's size is 800x600, and this will never change */
section {
/* The font from Google */
font-family: 'Oswald', arial, serif;
font-size: 2em;
}
h1, h2, h3 {
margin-top: 50px;
text-align: center;
}
ul {
margin-left: 200px;
}
a { color: #FF0066; } a:hover {text-decoration: underline;}
footer { position: absolute; bottom: 50px; right: 50px; }
/* Transition effect */
/* Feel free to change the transition effect for original
animations. See here:
https://developer.mozilla.org/en/CSS/CSS_transitions
How to use CSS3 Transitions: */
section {
-moz-transition: left 400ms linear 0s;
-webkit-transition: left 400ms linear 0s;
-o-transition: left 400ms linear 0s;
-ms-transition: left 400ms linear 0s;
transition: left 400ms linear 0s;
}
/* Before */
section { left: -150%; }
/* Now */
section[aria-selected] { left: 0; }
/* After */
section[aria-selected] ~ section { left: +150% }
</style>
<!-- {{{{ ***************** DZSlides CORE 2.0b1 *************************** -->
<!-- *********************************************************************** -->
<!-- *********************************************************************** -->
<!-- *********************************************************************** -->
<!-- *********************************************************************** -->
<!-- This block of code is not supposed to be edited, but if you want to change the behavior of the slides, feel free to hack it ;) -->
<!-- Default Style -->
<style>
* { margin: 0; padding: 0; }
details {display: none;}
body {
width: 800px; height: 600px;
margin-left: -400px; margin-top: -300px;
position: absolute; top: 50%; left: 50%;
overflow: hidden;
}
section {
position: absolute;
pointer-events: none;
width: 100%; height: 100%;
}
section[aria-selected] { pointer-events: auto;}
body {display: none}
body.loaded {display: block}
</style>
<script>
var friendWindows = [];
var idx = 1;
var slides;
/* main() */
window.onload = function() {
slides = document.querySelectorAll("body > section");
onhashchange();
setSlide();
document.body.className = "loaded";
onresize();
}
/* Handle keys */
window.onkeydown = function(e) {
// Don't intercept keyboard shortcuts
if (e.altKey || e.ctrlKey || e.metaKey || e.shiftKey) {
return;
}
if ( e.keyCode == 37 // left arrow
|| e.keyCode == 33 // page up
) {
e.preventDefault();
back();
}
if ( e.keyCode == 39 // right arrow
|| e.keyCode == 34 // page down
) {
e.preventDefault();
forward();
}
if ( e.keyCode == 32) { // space
e.preventDefault();
toggleContent();
}
}
/* Adapt the size of the slides to the window */
window.onresize = function() {
var sx = document.body.clientWidth / window.innerWidth;
var sy = document.body.clientHeight / window.innerHeight;
var transform = "scale(" + (1/Math.max(sx, sy)) + ")";
document.body.style.MozTransform = transform;
document.body.style.WebkitTransform = transform;
document.body.style.OTransform = transform;
document.body.style.msTransform = transform;
document.body.style.transform = transform;
}
function getDetails(idx) {
var s = document.querySelector("section:nth-of-type("+ idx +")");
var d = s.querySelector("details");
return d?d.innerHTML:"";
}
window.onmessage = function(e) {
msg = e.data;
win = e.source;
if (msg === "register") {
friendWindows.push(win);
win.postMessage(JSON.stringify({method: "registered", title: document.title, count: slides.length}), document.location);
win.postMessage(JSON.stringify({method: "newslide", details: getDetails(idx), idx: idx}), document.location);
return;
}
if (msg === "back") back();
if (msg === "forward") forward();
if (msg === "toggleContent") toggleContent();
// setSlide(42)
var r = /setSlide\((\d+)\)/.exec(msg);
if (r) {
idx = r[1];
setSlide();
}
}
/* If a Video is present in this new slide, play it.
If a Video is present in the previous slide, stop it. */
function toggleContent() {
var s = document.querySelector("section[aria-selected]");
if (s) {
var video = s.querySelector("video");
if (video) {
if (video.ended || video.paused) {
video.play();
} else {
video.pause();
}
}
}
}
/* If the user change the slide number in the URL bar, jump
to this slide. */
window.onhashchange = function(e) {
var newidx = ~~window.location.hash.split("#")[1];
if (!newidx) newidx = 1;
if (newidx == idx) return;
idx = newidx;
setSlide();
}
/* Slide controls */
function back() {
if (idx == 1) return;
idx--;
setSlide();
}
function forward() {
if (idx >= slides.length) return;
idx++;
setSlide();
}
function setSlide() {
var old = document.querySelector("section[aria-selected]");
var next = document.querySelector("section:nth-of-type("+ idx +")");
if (old) {
old.removeAttribute("aria-selected");
var video = old.querySelector("video");
if (video) { video.pause(); }
}
if (next) {
next.setAttribute("aria-selected", "true");
var video = next.querySelector("video");
if (video) { video.play(); }
} else {
console.warn("No such slide: " + idx);
idx = 0;
for (var i = 0; i < slides.length; i++) {
if (slides[i].hasAttribute("aria-selected")) {
idx = i + 1;
}
}
}
window.location.hash = idx;
for (var i = 0; i < friendWindows.length; i++) {
friendWindows[i].postMessage(JSON.stringify({method: "newslide", details: getDetails(idx), idx: idx}), document.location);
}
}
</script>
<!-- vim: set fdm=marker: }}} -->
Jump to Line
Something went wrong with that request. Please try again.