--- /dev/null
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <!--
+
+ ***************************************************
+ * *
+ * DZ-Slides: HTML Template for your presentations *
+ * *
+ ***************************************************
+ More information: http://paulrouget.com/dzslides
+
+
+ Author: @paulrouget <paul@mozilla.com>
+
+ Contributor(s):
+ - Anthony Ricaud <rik24d@gmail.com>
+ - Louis-Rémi Babé <lrbabe@gmail.com>
+
+
+ LICENSE:
+ DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE
+ Version 2, December 2004
+
+ Copyright (C) 2004 Sam Hocevar <sam@hocevar.net>
+
+ Everyone is permitted to copy and distribute verbatim or modified
+ copies of this license document, and changing it is allowed as long
+ as the name is changed.
+
+ DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE
+ TERMS AND CONDITIONS FOR COPYING, DISTRIBUTION AND MODIFICATION
+
+ 0. You just DO WHAT THE FUCK YOU WANT TO.
+
+
+ -->
+
+
+
+ <title>SeaMonkey 2.1 und DACH</title>
+
+ <!--
+ ************************************
+ * *
+ * CSS *
+ * *
+ ************************************
+ -->
+
+
+ <style>
+ /*
+ ************************************
+ * CSS CORE: *
+ * YOU DON'T WANT TO EDIT THIS *
+ * (but you can) *
+ ************************************
+ */
+
+ html { overflow: hidden; }
+ body, html { height: 100%; padding: 0px; }
+ body { margin: auto; position: relative; }
+ img, video { vertical-align: middle; }
+ /* FIXME : Mandatory for flex box model, Firefox bug */
+ /* See JS hack */
+ section > div { width: 100%; display: -moz-box; -moz-box-orient : vertical; -moz-box-pack : center; -moz-box-align : center; }
+ section > div { width: 100%; display: -webkit-box; -webkit-box-orient : vertical; -webkit-box-pack : center; -webkit-box-align : center; }
+ footer { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; position: absolute; bottom: 0; padding: 1em; width: 100%; }
+ .flex-wrapper { display: -moz-box; display: -webkit-box; -moz-box-orient: horizontal; -webkit-box-orient: horizontal; width: 100%; }
+ footer .flex-space { -moz-box-flex: 1; -webkit-box-flex: 1; }
+ 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; }
+ section { -webkit-transition-property: -webkit-transform, opacity; -webkit-transition-duration: 1s, 1s; pointer-events: none; -webkit-box-sizing: border-box; }
+ section h1, section h2, section h3, section p { text-align: center; margin: .3em; margin: 0; padding: 0; }
+ section[aria-selected] { opacity: 1; pointer-events: auto; -moz-transition-delay: 1s, 1s; -webkit-transition-delay: 1s, 1s; }
+ 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; }
+ a { color: white!important; text-decoration: none; }
+
+ /*
+ ************************************
+ * CSS OPTIONS: *
+ * YOU WANT TO EDIT THIS *
+ * *
+ ************************************
+ */
+
+ /* Want your own font? Use font-face */
+ @font-face {
+ /* Uncomment and add your own font file
+ font-family: fface;
+ src: url(myfont.ttf);
+ */
+ }
+
+ /* The backgrounds of all your slides */
+ body {
+ /* Could be an image, a color, a gradient */
+ background-image: -moz-radial-gradient( 50% 30% 90deg, circle, #000089 0%, #0582fe 600px);
+ background-image: -webkit-gradient(radial, 50% 30%, 0, 50% 30%, 600, from(#000089), to(#0582fe));
+ background-color: #000089;
+ }
+
+ /* This is the style of a slide */
+ section {
+ font-family:"Linux Libertine", Arial, sans-serif;
+ font-weight: bold;
+ font-size: 60px;
+ text-shadow: 0px -2px 0px #188bfe;
+ color: white;
+ /*
+ Your own font?
+ font-family: fface;
+ */
+ }
+
+ /* This part define the transitions between the slides
+ Here I propose 3 differents effect:
+ Default translation (classic "sliding" effect)
+ Rotation (a bit dizzy... "DZ"? You get it? \o/)
+ Nothing (just a fadein/fadeout)
+ With the CSS3 transformations, you can create your own.
+ */
+
+
+ /* Let me describe how the slides work:
+ A slide can be:
+ - the current slide
+ - A upcoming slide (from the "future")
+ - A slide already seen (from the "past")
+ With CSS, you describe where are those slide,
+ in the space. Then, a transition will animate
+ this.
+ */
+
+
+
+ /* "PAST" ******************************/
+ section {
+
+ /* The sliding effect
+ -moz-transform: translate(-100%, 0);
+ -webkit-transform: translate(-100%, 0); */
+
+ /* The rotating effect */
+ -moz-transform: scale(0.3) rotate(180deg);
+ -webkit-transform: scale(0.3) rotate(180deg);
+
+ /* The nothing effect */
+ /* Well, just comment out the rotating and sliding effect*/
+
+ }
+
+ /* The footer with the title + the current slide number */
+ #footer {
+ display: block;
+ color: white;
+ opacity: 0.5;
+
+ /*
+ display: none;
+ */
+ }
+
+
+ /* "PRESENT" ****************************/
+ /* Current slide */
+ section[aria-selected] {
+ -moz-transform: scale(1.0) translate(0, 0);
+ -webkit-transform: scale(1.0) translate(0, 0);
+ }
+
+ /* "FUTURE" *****************************/
+ /* Selector not yet supported by Webkit :( */
+ section[aria-selected] ~ section {
+
+ /* The sliding effect
+ -moz-transform: translate(100%, 0);
+ -webkit-transform: translate(100%, 0); */
+
+ /* The rotating effect */
+ -moz-transform: scale(5) rotate(-180deg);
+ -webkit-transform: scale(5) rotate(-180deg);
+
+ /* The nothing effect */
+ /* Well, just comment the rotating and sliding effect*/
+
+
+ }
+
+ </style>
+ </head>
+
+ <!--
+ ************************************
+ * *
+ * HTML: YOUR SLIDES *
+ * *
+ ************************************
+ -->
+
+ <section>
+ <h1>SeaMonkey 2.1 und DACH</h1>
+ <img src="seamonkey-with-font2-web_r.png" style="height: auto;max-width: 200px;-moz-box-flex:none;margin:auto;">
+ </section>
+
+ <section>
+ <h1>SM 2.1 - gleiche Basis wie FF 4.0</h1>
+ </section>
+
+ <section>
+ <h2>Plattform</h2>
+ <ul>
+ <li>CSS Transitions</li>
+ <li>WebSockets</li>
+ <li>...</li>
+ </ul>
+ </section>
+
+ <section data-onload="playVideo"
+ data-onunload="stopVideo">
+ <script>
+ // |section| referes to this section element
+ function playVideo(section) {
+ section.querySelector("video").play();
+ }
+ function stopVideo(section) {
+ section.querySelector("video").pause();
+ }
+ </script>
+ <h1>HTML5 Video</h1>
+ <video controls autobuffer preload src="http://demos.hacks.mozilla.org/openweb/LONDONPROJECT/fight.ogv"></video>
+ </section>
+
+ <section>
+ <h1>DACH-Region</h1>
+ <p>ca. 25% aller SeaMonkey-Benutzer</p>
+ </section>
+
+ <section>
+ <p>the end :)</p>
+ </section>
+
+
+ <script>
+
+ /*
+ ************************************
+ * *
+ * JAVASCRIPT *
+ * (You don't have to read this) *
+ ************************************
+ */
+
+ function init() {
+ var firstFrame = window.location.hash? parseInt(window.location.hash.split("#")[1], 10) : 1;
+ var title = document.querySelector("title").textContent;
+ var slides = document.querySelectorAll("body > section");
+ for (var i = 1, il = slides.length; i <= il; i++) {
+ // FIXME : Mandatory for flex box model for vertical align
+ // Firefox bug :(
+ slides[i - 1].innerHTML = "<div>" + slides[i - 1].innerHTML + "</div>";
+ window.history[(i == 1? 'replace' : 'push') + 'State'](i, title + " ("+ i +"/"+ il +")", "#"+i);
+ }
+
+ var footer = document.createElement("footer");
+ footer.id = "footer";
+ footer.innerHTML =
+ '<div class="flex-wrapper"><p>' + title + '</p>' +
+ '<p class="flex-space"></p>' +
+ '<p id="index"><span class="pagenumber"></span> / ' + il +'</p>';
+ document.body.appendChild(footer);
+ history.go(- slides.length + firstFrame);
+
+
+ window.addEventListener("popstate", function(e) {
+ if(e.state) {
+ var old = document.querySelector("section[aria-selected]");
+ var next = document.querySelector("section:nth-of-type("+ e.state +")");
+
+ if (old) {
+ old.removeAttribute("aria-selected");
+ if (old.hasAttribute("data-onunload")) {
+ window[old.getAttribute("data-onunload")].call(window, old);
+ }
+ }
+
+ if (next) {
+ next.setAttribute("aria-selected", "true");
+ if (next.hasAttribute("data-onload")) {
+ window[next.getAttribute("data-onload")].call(window, next);
+ }
+ }
+
+
+ var index = document.querySelector("#index .pagenumber");
+ index.innerHTML = e.state;
+ }
+ }, true);
+ }
+
+ function resize() {
+ var style = document.getElementById("resizeStyle");
+ if (!style) {
+ style = document.createElement("style");
+ style.id = "resizeStyle";
+ document.head.appendChild(style);
+ }
+ style.textContent = "body>section>div {height: "+ window.innerHeight +"px}";
+ }
+
+ window.addEventListener("resize", resize, true);
+ window.addEventListener("load", resize, true);
+ window.addEventListener("load", init, true);
+
+ // Webkit bug
+ // window.addEventListener("hashchange", init, true); // FIXME Webkit fires hashchange when it shouldn't
+ window.addEventListener("keydown", function(e) {
+ // Don't intercept keyboard shortcuts
+ if (e.altKey || e.ctrlKey || e.metaKey || e.shiftKey) {
+ return;
+ }
+ if ( e.keyCode == 80 // p
+ || e.keyCode == 66 // b
+ || e.keyCode == 37 // left arrow
+ || e.keyCode == 33 // page up
+ ) {
+ e.preventDefault();
+ history.back();
+ }
+ if ( e.keyCode == 78 // n
+ || e.keyCode == 32 // space
+ || e.keyCode == 39 // right arrow
+ || e.keyCode == 34 // page down
+ ) {
+ e.preventDefault();
+ history.forward();
+ }
+ }, true);
+ </script>
+ </body>
+</html>
projects / slides.git / blobdiff