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 Future</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, #4040AA 0%, #80CCFF 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: -2px 2px 5px #000089;
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 Future</h1>
204 <img src="seamonkey-with-font2-web_r.png">
208 <h2>Your Thoughts</h2>
210 <li>What do you like?</li>
211 <li>What differentiates us?</li>
212 <li>What do you want to see?</li>
217 <h2>Thunderbird Future</h2>
219 <li>Mostly unclear vision</li>
220 <li>More web integration</li>
225 <h1>Firefox Present</h1>
226 <img src="firefox-present.png">
230 <h1>Firefox Future</h1>
231 <img src="firefox-future.png">
235 <h2>SeaMonkey Option 1</h2>
237 <li>Split off into own organization</li>
238 <li>Mostly independent</li>
239 <li>Details on funding, infrascture, etc. still need to be defined</li>
240 <li>May enable very few full-time jobs</li>
245 <h2>SeaMonkey Option 2</h2>
247 <li>Obsolete separate product</li>
248 <li>Integrate into Firefox community</li>
249 <li>Provide extended features as add-on collection</li>
250 <li>Possibly Firefox distribution</li>
255 <h2>SeaMonkey Option 3</h2>
257 <li>Predefined budget within Mozilla for limited time</li>
258 <li>No/unclear long-term perspective</li>
259 <li>No improvements on work force</li>
264 <h2>Think About It!</h2>
266 <li>No decision made yet</li>
267 <li>All options will be discussed further</li>
268 <li>Pros and cons exist for all of them</li>
269 <li>Keep long-term possibilities in mind</li>
277 ************************************
280 * (You don't have to read this) *
281 ************************************
285 var firstFrame = window.location.hash? parseInt(window.location.hash.split("#")[1], 10) : 1;
286 var title = document.querySelector("title").textContent;
287 var slides = document.querySelectorAll("body > section");
288 for (var i = 1, il = slides.length; i <= il; i++) {
289 // FIXME : Mandatory for flex box model for vertical align
291 slides[i - 1].innerHTML = "<div>" + slides[i - 1].innerHTML + "</div>";
292 window.history[(i == 1? 'replace' : 'push') + 'State'](i, title + " ("+ i +"/"+ il +")", "#"+i);
295 var footer = document.createElement("footer");
296 footer.id = "footer";
298 '<div class="flex-wrapper"><p>' + title + '</p>' +
299 '<p class="flex-space"></p>' +
300 '<p id="index"><span class="pagenumber"></span> / ' + il +'</p>';
301 document.body.appendChild(footer);
302 history.go(- slides.length + firstFrame);
305 window.addEventListener("popstate", function(e) {
307 var old = document.querySelector("section[aria-selected]");
308 var next = document.querySelector("section:nth-of-type("+ e.state +")");
311 old.removeAttribute("aria-selected");
312 if (old.hasAttribute("data-onunload")) {
313 window[old.getAttribute("data-onunload")].call(window, old);
318 next.setAttribute("aria-selected", "true");
319 if (next.hasAttribute("data-onload")) {
320 window[next.getAttribute("data-onload")].call(window, next);
325 var index = document.querySelector("#index .pagenumber");
326 index.innerHTML = e.state;
332 var style = document.getElementById("resizeStyle");
334 style = document.createElement("style");
335 style.id = "resizeStyle";
336 document.head.appendChild(style);
338 style.textContent = "body>section>div {height: "+ window.innerHeight +"px}";
341 window.addEventListener("resize", resize, true);
342 window.addEventListener("load", resize, true);
343 window.addEventListener("load", init, true);
346 // window.addEventListener("hashchange", init, true); // FIXME Webkit fires hashchange when it shouldn't
347 window.addEventListener("keydown", function(e) {
348 // Don't intercept keyboard shortcuts
349 if (e.altKey || e.ctrlKey || e.metaKey || e.shiftKey) {
352 if ( e.keyCode == 80 // p
353 || e.keyCode == 66 // b
354 || e.keyCode == 37 // left arrow
355 || e.keyCode == 33 // page up
360 if ( e.keyCode == 78 // n
361 || e.keyCode == 32 // space
362 || e.keyCode == 39 // right arrow
363 || e.keyCode == 34 // page down