f305fb6d |
1 | <!DOCTYPE html> |
2 | <html> |
3 | <head> |
4 | <meta charset="utf-8"> |
5 | <!-- |
6 | |
7 | *************************************************** |
8 | * * |
9 | * DZ-Slides: HTML Template for your presentations * |
10 | * * |
11 | *************************************************** |
12 | More information: http://paulrouget.com/dzslides |
13 | |
14 | |
15 | Author: @paulrouget <paul@mozilla.com> |
16 | |
17 | Contributor(s): |
18 | - Anthony Ricaud <rik24d@gmail.com> |
19 | - Louis-Rémi Babé <lrbabe@gmail.com> |
20 | |
21 | |
22 | LICENSE: |
23 | DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE |
24 | Version 2, December 2004 |
25 | |
26 | Copyright (C) 2004 Sam Hocevar <sam@hocevar.net> |
27 | |
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. |
31 | |
32 | DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE |
33 | TERMS AND CONDITIONS FOR COPYING, DISTRIBUTION AND MODIFICATION |
34 | |
35 | 0. You just DO WHAT THE FUCK YOU WANT TO. |
36 | |
37 | |
38 | --> |
39 | |
40 | |
41 | |
42 | <title>SeaMonkey 2.1 und DACH</title> |
43 | |
44 | <!-- |
45 | ************************************ |
46 | * * |
47 | * CSS * |
48 | * * |
49 | ************************************ |
50 | --> |
51 | |
52 | |
53 | <style> |
54 | /* |
55 | ************************************ |
56 | * CSS CORE: * |
57 | * YOU DON'T WANT TO EDIT THIS * |
58 | * (but you can) * |
59 | ************************************ |
60 | */ |
61 | |
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 */ |
67 | /* See JS hack */ |
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; } |
79 | |
80 | /* |
81 | ************************************ |
82 | * CSS OPTIONS: * |
83 | * YOU WANT TO EDIT THIS * |
84 | * * |
85 | ************************************ |
86 | */ |
87 | |
88 | /* Want your own font? Use font-face */ |
89 | @font-face { |
90 | /* Uncomment and add your own font file |
91 | font-family: fface; |
92 | src: url(myfont.ttf); |
93 | */ |
94 | } |
95 | |
96 | /* The backgrounds of all your slides */ |
97 | body { |
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; |
102 | } |
103 | |
104 | /* This is the style of a slide */ |
105 | section { |
106 | font-family:"Linux Libertine", Arial, sans-serif; |
107 | font-weight: bold; |
108 | font-size: 60px; |
109 | text-shadow: 0px -2px 0px #188bfe; |
110 | color: white; |
111 | /* |
112 | Your own font? |
113 | font-family: fface; |
114 | */ |
115 | } |
116 | |
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. |
123 | */ |
124 | |
125 | |
126 | /* Let me describe how the slides work: |
127 | A slide can be: |
128 | - the current slide |
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 |
133 | this. |
134 | */ |
135 | |
136 | |
137 | |
138 | /* "PAST" ******************************/ |
139 | section { |
140 | |
141 | /* The sliding effect |
142 | -moz-transform: translate(-100%, 0); |
143 | -webkit-transform: translate(-100%, 0); */ |
144 | |
145 | /* The rotating effect */ |
146 | -moz-transform: scale(0.3) rotate(180deg); |
147 | -webkit-transform: scale(0.3) rotate(180deg); |
148 | |
149 | /* The nothing effect */ |
150 | /* Well, just comment out the rotating and sliding effect*/ |
151 | |
152 | } |
153 | |
154 | /* The footer with the title + the current slide number */ |
155 | #footer { |
156 | display: block; |
157 | color: white; |
158 | opacity: 0.5; |
159 | |
160 | /* |
161 | display: none; |
162 | */ |
163 | } |
164 | |
165 | |
166 | /* "PRESENT" ****************************/ |
167 | /* Current slide */ |
168 | section[aria-selected] { |
169 | -moz-transform: scale(1.0) translate(0, 0); |
170 | -webkit-transform: scale(1.0) translate(0, 0); |
171 | } |
172 | |
173 | /* "FUTURE" *****************************/ |
174 | /* Selector not yet supported by Webkit :( */ |
175 | section[aria-selected] ~ section { |
176 | |
177 | /* The sliding effect |
178 | -moz-transform: translate(100%, 0); |
179 | -webkit-transform: translate(100%, 0); */ |
180 | |
181 | /* The rotating effect */ |
182 | -moz-transform: scale(5) rotate(-180deg); |
183 | -webkit-transform: scale(5) rotate(-180deg); |
184 | |
185 | /* The nothing effect */ |
186 | /* Well, just comment the rotating and sliding effect*/ |
187 | |
188 | |
189 | } |
190 | |
191 | </style> |
192 | </head> |
193 | |
194 | <!-- |
195 | ************************************ |
196 | * * |
197 | * HTML: YOUR SLIDES * |
198 | * * |
199 | ************************************ |
200 | --> |
201 | |
202 | <section> |
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;"> |
205 | </section> |
206 | |
207 | <section> |
208 | <h1>SM 2.1 - gleiche Basis wie FF 4.0</h1> |
209 | </section> |
210 | |
211 | <section> |
212 | <h2>Plattform</h2> |
213 | <ul> |
214 | <li>CSS Transitions</li> |
215 | <li>WebSockets</li> |
216 | <li>...</li> |
217 | </ul> |
218 | </section> |
219 | |
220 | <section data-onload="playVideo" |
221 | data-onunload="stopVideo"> |
222 | <script> |
223 | // |section| referes to this section element |
224 | function playVideo(section) { |
225 | section.querySelector("video").play(); |
226 | } |
227 | function stopVideo(section) { |
228 | section.querySelector("video").pause(); |
229 | } |
230 | </script> |
231 | <h1>HTML5 Video</h1> |
232 | <video controls autobuffer preload src="http://demos.hacks.mozilla.org/openweb/LONDONPROJECT/fight.ogv"></video> |
233 | </section> |
234 | |
235 | <section> |
236 | <h1>DACH-Region</h1> |
237 | <p>ca. 25% aller SeaMonkey-Benutzer</p> |
238 | </section> |
239 | |
240 | <section> |
241 | <p>the end :)</p> |
242 | </section> |
243 | |
244 | |
245 | <script> |
246 | |
247 | /* |
248 | ************************************ |
249 | * * |
250 | * JAVASCRIPT * |
251 | * (You don't have to read this) * |
252 | ************************************ |
253 | */ |
254 | |
255 | function init() { |
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 |
261 | // Firefox bug :( |
262 | slides[i - 1].innerHTML = "<div>" + slides[i - 1].innerHTML + "</div>"; |
263 | window.history[(i == 1? 'replace' : 'push') + 'State'](i, title + " ("+ i +"/"+ il +")", "#"+i); |
264 | } |
265 | |
266 | var footer = document.createElement("footer"); |
267 | footer.id = "footer"; |
268 | footer.innerHTML = |
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); |
274 | |
275 | |
276 | window.addEventListener("popstate", function(e) { |
277 | if(e.state) { |
278 | var old = document.querySelector("section[aria-selected]"); |
279 | var next = document.querySelector("section:nth-of-type("+ e.state +")"); |
280 | |
281 | if (old) { |
282 | old.removeAttribute("aria-selected"); |
283 | if (old.hasAttribute("data-onunload")) { |
284 | window[old.getAttribute("data-onunload")].call(window, old); |
285 | } |
286 | } |
287 | |
288 | if (next) { |
289 | next.setAttribute("aria-selected", "true"); |
290 | if (next.hasAttribute("data-onload")) { |
291 | window[next.getAttribute("data-onload")].call(window, next); |
292 | } |
293 | } |
294 | |
295 | |
296 | var index = document.querySelector("#index .pagenumber"); |
297 | index.innerHTML = e.state; |
298 | } |
299 | }, true); |
300 | } |
301 | |
302 | function resize() { |
303 | var style = document.getElementById("resizeStyle"); |
304 | if (!style) { |
305 | style = document.createElement("style"); |
306 | style.id = "resizeStyle"; |
307 | document.head.appendChild(style); |
308 | } |
309 | style.textContent = "body>section>div {height: "+ window.innerHeight +"px}"; |
310 | } |
311 | |
312 | window.addEventListener("resize", resize, true); |
313 | window.addEventListener("load", resize, true); |
314 | window.addEventListener("load", init, true); |
315 | |
316 | // Webkit bug |
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) { |
321 | return; |
322 | } |
323 | if ( e.keyCode == 80 // p |
324 | || e.keyCode == 66 // b |
325 | || e.keyCode == 37 // left arrow |
326 | || e.keyCode == 33 // page up |
327 | ) { |
328 | e.preventDefault(); |
329 | history.back(); |
330 | } |
331 | if ( e.keyCode == 78 // n |
332 | || e.keyCode == 32 // space |
333 | || e.keyCode == 39 // right arrow |
334 | || e.keyCode == 34 // page down |
335 | ) { |
336 | e.preventDefault(); |
337 | history.forward(); |
338 | } |
339 | }, true); |
340 | </script> |
341 | </body> |
342 | </html> |