7 ***************************************************
9 * DZ-Slides: HTML Template for your presentations *
11 ***************************************************
12 More information: http://paulrouget.com/dzslides
15 Author: @paulrouget <paul@mozilla.com>
18 - Anthony Ricaud <rik24d@gmail.com>
19 - Louis-Rémi Babé <lrbabe@gmail.com>
23 DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE
24 Version 2, December 2004
26 Copyright (C) 2004 Sam Hocevar <sam@hocevar.net>
28 Everyone is permitted to copy and distribute verbatim or modified
29 copies of this license document, and changing it is allowed as long
30 as the name is changed.
32 DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE
33 TERMS AND CONDITIONS FOR COPYING, DISTRIBUTION AND MODIFICATION
35 0. You just DO WHAT THE FUCK YOU WANT TO.
42 <title>SeaMonkey 2.1 und DACH</title>
45 ************************************
49 ************************************
55 ************************************
57 * YOU DON'T WANT TO EDIT THIS *
59 ************************************
62 html { overflow: hidden; }
63 body, html { height: 100%; padding: 0px; }
64 body { margin: auto; position: relative; }
65 img, video { vertical-align: middle; }
66 /* FIXME : Mandatory for flex box model, Firefox bug */
68 section > div { width: 100%; display: -moz-box; -moz-box-orient : vertical; -moz-box-pack : center; -moz-box-align : center; }
69 section > div { width: 100%; display: -webkit-box; -webkit-box-orient : vertical; -webkit-box-pack : center; -webkit-box-align : center; }
70 footer { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; position: absolute; bottom: 0; padding: 1em; width: 100%; }
71 .flex-wrapper { display: -moz-box; display: -webkit-box; -moz-box-orient: horizontal; -webkit-box-orient: horizontal; width: 100%; }
72 footer .flex-space { -moz-box-flex: 1; -webkit-box-flex: 1; }
73 section { -moz-transition-property: -moz-transform, opacity; -moz-transition-duration: 1s, 1s; pointer-events: none; display: block; width: 100%; margin: auto; position: absolute; padding: 0 10px; opacity: 0; -moz-box-sizing: border-box; }
74 section { -webkit-transition-property: -webkit-transform, opacity; -webkit-transition-duration: 1s, 1s; pointer-events: none; -webkit-box-sizing: border-box; }
75 section h1, section h2, section h3, section p { text-align: center; margin: .3em; margin: 0; padding: 0; }
76 section[aria-selected] { opacity: 1; pointer-events: auto; -moz-transition-delay: 1s, 1s; -webkit-transition-delay: 1s, 1s; }
77 pre { font-size: 35px; border-left: 6px solid white; padding-left: 10px; white-space: pre-wrap; /* css-3 */ word-wrap: break-word; /* Internet Explorer 5.5+ */ line-height: 1.3em; }
78 a { color: white!important; text-decoration: none; }
81 ************************************
83 * YOU WANT TO EDIT THIS *
85 ************************************
88 /* Want your own font? Use font-face */
90 /* Uncomment and add your own font file
96 /* The backgrounds of all your slides */
98 /* Could be an image, a color, a gradient */
99 background-image: -moz-radial-gradient( 50% 30% 90deg, circle, #000089 0%, #0582fe 600px);
100 background-image: -webkit-gradient(radial, 50% 30%, 0, 50% 30%, 600, from(#000089), to(#0582fe));
101 background-color: #000089;
104 /* This is the style of a slide */
106 font-family:"Linux Libertine", Arial, sans-serif;
109 text-shadow: 0px -2px 0px #188bfe;
117 /* This part define the transitions between the slides
118 Here I propose 3 differents effect:
119 Default translation (classic "sliding" effect)
120 Rotation (a bit dizzy... "DZ"? You get it? \o/)
121 Nothing (just a fadein/fadeout)
122 With the CSS3 transformations, you can create your own.
126 /* Let me describe how the slides work:
129 - A upcoming slide (from the "future")
130 - A slide already seen (from the "past")
131 With CSS, you describe where are those slide,
132 in the space. Then, a transition will animate
138 /* "PAST" ******************************/
141 /* The sliding effect
142 -moz-transform: translate(-100%, 0);
143 -webkit-transform: translate(-100%, 0); */
145 /* The rotating effect */
146 -moz-transform: scale(0.3) rotate(180deg);
147 -webkit-transform: scale(0.3) rotate(180deg);
149 /* The nothing effect */
150 /* Well, just comment out the rotating and sliding effect*/
154 /* The footer with the title + the current slide number */
166 /* "PRESENT" ****************************/
168 section[aria-selected] {
169 -moz-transform: scale(1.0) translate(0, 0);
170 -webkit-transform: scale(1.0) translate(0, 0);
173 /* "FUTURE" *****************************/
174 /* Selector not yet supported by Webkit :( */
175 section[aria-selected] ~ section {
177 /* The sliding effect
178 -moz-transform: translate(100%, 0);
179 -webkit-transform: translate(100%, 0); */
181 /* The rotating effect */
182 -moz-transform: scale(5) rotate(-180deg);
183 -webkit-transform: scale(5) rotate(-180deg);
185 /* The nothing effect */
186 /* Well, just comment the rotating and sliding effect*/
195 ************************************
197 * HTML: YOUR SLIDES *
199 ************************************
203 <h1>SeaMonkey 2.1 und DACH</h1>
204 <img src="seamonkey-with-font2-web_r.png" style="height: auto;max-width: 200px;-moz-box-flex:none;margin:auto;">
208 <h1>SM 2.1 - gleiche Basis wie FF 4.0</h1>
214 <li>CSS Transitions</li>
220 <section data-onload="playVideo"
221 data-onunload="stopVideo">
223 // |section| referes to this section element
224 function playVideo(section) {
225 section.querySelector("video").play();
227 function stopVideo(section) {
228 section.querySelector("video").pause();
232 <video controls autobuffer preload src="http://demos.hacks.mozilla.org/openweb/LONDONPROJECT/fight.ogv"></video>
237 <p>ca. 25% aller SeaMonkey-Benutzer</p>
248 ************************************
251 * (You don't have to read this) *
252 ************************************
256 var firstFrame = window.location.hash? parseInt(window.location.hash.split("#")[1], 10) : 1;
257 var title = document.querySelector("title").textContent;
258 var slides = document.querySelectorAll("body > section");
259 for (var i = 1, il = slides.length; i <= il; i++) {
260 // FIXME : Mandatory for flex box model for vertical align
262 slides[i - 1].innerHTML = "<div>" + slides[i - 1].innerHTML + "</div>";
263 window.history[(i == 1? 'replace' : 'push') + 'State'](i, title + " ("+ i +"/"+ il +")", "#"+i);
266 var footer = document.createElement("footer");
267 footer.id = "footer";
269 '<div class="flex-wrapper"><p>' + title + '</p>' +
270 '<p class="flex-space"></p>' +
271 '<p id="index"><span class="pagenumber"></span> / ' + il +'</p>';
272 document.body.appendChild(footer);
273 history.go(- slides.length + firstFrame);
276 window.addEventListener("popstate", function(e) {
278 var old = document.querySelector("section[aria-selected]");
279 var next = document.querySelector("section:nth-of-type("+ e.state +")");
282 old.removeAttribute("aria-selected");
283 if (old.hasAttribute("data-onunload")) {
284 window[old.getAttribute("data-onunload")].call(window, old);
289 next.setAttribute("aria-selected", "true");
290 if (next.hasAttribute("data-onload")) {
291 window[next.getAttribute("data-onload")].call(window, next);
296 var index = document.querySelector("#index .pagenumber");
297 index.innerHTML = e.state;
303 var style = document.getElementById("resizeStyle");
305 style = document.createElement("style");
306 style.id = "resizeStyle";
307 document.head.appendChild(style);
309 style.textContent = "body>section>div {height: "+ window.innerHeight +"px}";
312 window.addEventListener("resize", resize, true);
313 window.addEventListener("load", resize, true);
314 window.addEventListener("load", init, true);
317 // window.addEventListener("hashchange", init, true); // FIXME Webkit fires hashchange when it shouldn't
318 window.addEventListener("keydown", function(e) {
319 // Don't intercept keyboard shortcuts
320 if (e.altKey || e.ctrlKey || e.metaKey || e.shiftKey) {
323 if ( e.keyCode == 80 // p
324 || e.keyCode == 66 // b
325 || e.keyCode == 37 // left arrow
326 || e.keyCode == 33 // page up
331 if ( e.keyCode == 78 // n
332 || e.keyCode == 32 // space
333 || e.keyCode == 39 // right arrow
334 || e.keyCode == 34 // page down