@@ -0,0 +1,363 @@
1+<!DOCTYPE html>
2+<head>
3+<meta charset="utf-8">
4+$for(author)$
5+ <meta name="author" content="$author$" />
6+$endfor$
7+$if(date)$
8+ <meta name="date" content="$date$" />
9+$endif$
10+ <title>$if(title-prefix)$$title-prefix$ - $endif$$if(pagetitle)$$pagetitle$$endif$</title>
11+$if(highlighting-css)$
12+ <style type="text/css">
13+/*<![CDATA[*/
14+$highlighting-css$
15+/*]]>*/
16+ </style>
17+$endif$
18+<title>$title$</title>
19+</head>
20+<body>
21+$if(title)$
22+<section>
23+ <h1>$title$</h1>
24+</section>
25+$endif$
26+$for(include-before)$
27+$include-before$
28+$endfor$
29+$body$
30+$for(include-after)$
31+$include-after$
32+$endfor$
33+<!-- Your Style -->
34+<!-- Define the style of you presentation -->
35+
36+<!-- Maybe a font from http://www.google.com/webfonts ? -->
37+<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet'>
38+
39+<style>
40+ html { background-color: black; }
41+ body { background-color: white; }
42+ /* A section is a slide. Its size is 800x600, and this will never change */
43+ section {
44+ /* The font from Google */
45+ font-family: 'Oswald', arial, serif;
46+ font-size: 2em;
47+ padding-left: 1em;
48+ }
49+ h1, h2, h3 {
50+ margin-top: 50px;
51+ text-align: center;
52+ }
53+ ul {
54+ margin-left: 40px;
55+ }
56+ a { color: #FF0066; } a:hover { text-decoration: underline; }
57+ footer { position: absolute; bottom: 50px; right: 50px; }
58+
59+ .images {
60+ margin: 20px;
61+ text-align: center;
62+ }
63+
64+ /* Transition effect */
65+ /* Feel free to change the transition effect for original
66+ animations. See here:
67+ https://developer.mozilla.org/en/CSS/CSS_transitions
68+ How to use CSS3 Transitions: */
69+ section {
70+ -moz-transition: left 400ms linear 0s;
71+ -webkit-transition: left 400ms linear 0s;
72+ -ms-transition: left 400ms linear 0s;
73+ transition: left 400ms linear 0s;
74+ }
75+
76+ /* Before */
77+ section { left: -150%; }
78+ /* Now */
79+ section[aria-selected] { left: 0; }
80+ /* After */
81+ section[aria-selected] ~ section { left: +150%; }
82+
83+ /* Increment with lists */
84+ .incremental > * { opacity: 1; }
85+ .incremental > *[aria-selected] { color: red; opacity: 1; }
86+ .incremental > *[aria-selected] ~ * { opacity: 0.2; }
87+ /* Increment with images */
88+ .incremental > img[aria-selected] { box-shadow: 0 0 10px #000 }
89+
90+</style>
91+
92+
93+<!-- {{{{ ***************** DZSlides CORE 2.0b1 *************************** -->
94+<!-- *********************************************************************** -->
95+<!-- *********************************************************************** -->
96+<!-- *********************************************************************** -->
97+<!-- *********************************************************************** -->
98+
99+<!-- 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 ;) -->
100+
101+<!-- Default Style -->
102+<style>
103+ * { margin: 0; padding: 0; }
104+ details { display: none; }
105+ body {
106+ width: 800px; height: 600px;
107+ margin-left: -400px; margin-top: -300px;
108+ position: absolute; top: 50%; left: 50%;
109+ overflow: hidden;
110+ }
111+ html {
112+ overflow: hidden;
113+ }
114+ section {
115+ position: absolute;
116+ pointer-events: none;
117+ width: 95%; height: 100%;
118+ }
119+ section[aria-selected] { pointer-events: auto; }
120+ body { display: none; }
121+ body.loaded { display: block; }
122+ .incremental {visibility: hidden}
123+ .incremental[active] {visibility: visible}
124+</style>
125+
126+<script>
127+ var friendWindows = [];
128+ var idx, step;
129+ var slides;
130+
131+ /* main() */
132+
133+ window.onload = function() {
134+ slides = document.querySelectorAll("body > section");
135+ onhashchange();
136+ document.body.className = "loaded";
137+ setupTouchEvents();
138+ onresize();
139+ }
140+
141+ /* Handle keys */
142+
143+ window.onkeydown = function(e) {
144+ // Don't intercept keyboard shortcuts
145+ if (e.altKey || e.ctrlKey || e.metaKey || e.shiftKey) {
146+ return;
147+ }
148+ if ( e.keyCode == 37 // left arrow
149+ || e.keyCode == 38 // up arrow
150+ || e.keyCode == 33 // page up
151+ ) {
152+ e.preventDefault();
153+ back();
154+ }
155+ if ( e.keyCode == 39 // right arrow
156+ || e.keyCode == 40 // down arrow
157+ || e.keyCode == 34 // page down
158+ ) {
159+ e.preventDefault();
160+ forward();
161+ }
162+ if (e.keyCode == 35) { // end
163+ e.preventDefault();
164+ end();
165+ }
166+ if (e.keyCode == 36) { // home
167+ e.preventDefault();
168+ start();
169+ }
170+
171+ if ( e.keyCode == 32) { // space
172+ e.preventDefault();
173+ toggleContent();
174+ }
175+ }
176+
177+ /* Touch Events */
178+
179+ function setupTouchEvents() {
180+ var orgX, newX;
181+ var tracking = false;
182+
183+ var db = document.body;
184+ db.addEventListener("touchstart", start, false);
185+ db.addEventListener("touchmove", move, false);
186+
187+ function start(e) {
188+ e.preventDefault();
189+ tracking = true;
190+ orgX = e.changedTouches[0].pageX;
191+ }
192+
193+ function move(e) {
194+ if (!tracking) return;
195+ newX = e.changedTouches[0].pageX;
196+ if (orgX - newX > 100) {
197+ tracking = false;
198+ forward();
199+ } else {
200+ if (orgX - newX < -100) {
201+ tracking = false;
202+ back();
203+ }
204+ }
205+ }
206+ }
207+
208+ /* Adapt the size of the slides to the window */
209+
210+ window.onresize = function() {
211+ var db = document.body;
212+ var sx = db.clientWidth / window.innerWidth;
213+ var sy = db.clientHeight / window.innerHeight;
214+ var transform = "scale(" + (1/Math.max(sx, sy)) + ")";
215+ db.style.MozTransform = transform;
216+ db.style.WebkitTransform = transform;
217+ db.style.OTransform = transform;
218+ db.style.msTransform = transform;
219+ db.style.transform = transform;
220+ }
221+ function getDetails(idx) {
222+ var s = document.querySelector("section:nth-of-type("+ idx +")");
223+ var d = s.querySelector("details");
224+ return d?d.innerHTML:"";
225+ }
226+ window.onmessage = function(e) {
227+ var msg = e.data;
228+ var win = e.source;
229+ if (msg === "register") {
230+ friendWindows.push(win);
231+ win.postMessage(JSON.stringify({method: "registered", title: document.title, count: slides.length}), "*");
232+ win.postMessage(JSON.stringify({method: "newslide", details: getDetails(idx), idx: idx}), "*");
233+ return;
234+ }
235+ if (msg === "back") back();
236+ if (msg === "forward") forward();
237+ if (msg === "toggleContent") toggleContent();
238+ // setSlide(42)
239+ var r = /setSlide\((\d+)\)/.exec(msg);
240+ if (r) {
241+ setSlide(r[1]);
242+ }
243+ }
244+
245+ /* If a Video is present in this new slide, play it.
246+ If a Video is present in the previous slide, stop it. */
247+
248+ function toggleContent() {
249+ var s = document.querySelector("section[aria-selected]");
250+ if (s) {
251+ var video = s.querySelector("video");
252+ if (video) {
253+ if (video.ended || video.paused) {
254+ video.play();
255+ } else {
256+ video.pause();
257+ }
258+ }
259+ }
260+ }
261+
262+ /* If the user change the slide number in the URL bar, jump
263+ to this slide. */
264+
265+ function setCursor(aIdx, aStep) {
266+ aStep = (aStep != 0 && typeof aStep !== "undefined") ? "." + aStep : "";
267+ window.location.hash = "#" + aIdx + aStep;
268+ }
269+ window.onhashchange = function(e) {
270+ var cursor = window.location.hash.split("#"), newidx = 1, newstep = 0;
271+ if (cursor.length == 2) {
272+ newidx = ~~cursor[1].split(".")[0];
273+ newstep = ~~cursor[1].split(".")[1];
274+ }
275+ if (newidx != idx) setSlide(newidx);
276+ setIncremental(newstep);
277+ }
278+
279+ /* Slide controls */
280+
281+ function back() {
282+ if (idx == 1 && step == 0) return;
283+ if (step == 0)
284+ setCursor(idx - 1, slides[idx - 2].querySelectorAll('.incremental > *').length);
285+ else
286+ setCursor(idx, step - 1);
287+ }
288+ function forward() {
289+ if (idx >= slides.length && step >= slides[idx - 1].querySelectorAll('.incremental > *').length) return;
290+ if (step >= slides[idx - 1].querySelectorAll('.incremental > *').length)
291+ setCursor(idx + 1, 0);
292+ else
293+ setCursor(idx, step + 1);
294+ }
295+ function start() {
296+ setCursor(1, 0);
297+ }
298+ function end() {
299+ var lastIdx = slides.length;
300+ var lastStep = slides[lastIdx - 1].querySelectorAll('.incremental > *').length;
301+ setCursor(lastIdx, lastStep);
302+ }
303+
304+ function setSlide(aIdx) {
305+ idx = aIdx;
306+ var old = document.querySelector("section[aria-selected]");
307+ var next = document.querySelector("section:nth-of-type("+ idx +")");
308+ if (old) {
309+ old.removeAttribute("aria-selected");
310+ var video = old.querySelector("video");
311+ if (video) { video.pause(); }
312+ }
313+ if (next) {
314+ next.setAttribute("aria-selected", "true");
315+ var video = next.querySelector("video");
316+ if (video) { video.play(); }
317+ } else {
318+ idx = 0;
319+ for (var i = 0, l = slides.length; i < l; i++) {
320+ if (slides[i].hasAttribute("aria-selected")) {
321+ idx = i + 1;
322+ }
323+ }
324+ }
325+ for (var i = 0, l = friendWindows.length; i < l; i++) {
326+ friendWindows[i].postMessage(JSON.stringify({method: "newslide", details: getDetails(idx), idx: idx}), "*");
327+ }
328+ }
329+ function setIncremental(aStep) {
330+ step = aStep;
331+ var old = slides[idx-1].querySelector('.incremental > *[aria-selected]');
332+ if (old)
333+ old.removeAttribute('aria-selected');
334+ var incrementals = slides[idx-1].querySelectorAll('.incremental');
335+ if (step == 0) {
336+ for (var i = 0; i < incrementals.length; i++) {
337+ incrementals[i].removeAttribute('active');
338+ }
339+ return;
340+ }
341+ var next = slides[idx-1].querySelectorAll('.incremental > *')[step-1];
342+ if (next) {
343+ next.setAttribute('aria-selected', true);
344+ next.parentNode.setAttribute('active', true);
345+ var found = false;
346+ for (var i = 0; i < incrementals.length; i++) {
347+ if (incrementals[i] != next.parentNode)
348+ if (found)
349+ incrementals[i].removeAttribute('active');
350+ else
351+ incrementals[i].setAttribute('active', true);
352+ else
353+ found = true;
354+ }
355+ } else {
356+ setCursor(idx, 0);
357+ }
358+ return next;
359+ }
360+</script>
361+<!-- vim: set fdm=marker: }}} -->
362+</body>
363+</html>