| 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 Future</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, #4040AA 0%, #80CCFF 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: -2px 2px 5px #000089; |
| 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: #000089; |
| 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 Future</h1> |
| 204 | <img src="seamonkey-with-font2-web_r.png"> |
| 205 | </section> |
| 206 | |
| 207 | <section> |
| 208 | <h2>Your Thoughts</h2> |
| 209 | <ul> |
| 210 | <li>What do you like?</li> |
| 211 | <li>What differentiates us?</li> |
| 212 | <li>What do you want to see?</li> |
| 213 | </ul> |
| 214 | </section> |
| 215 | |
| 216 | <section> |
| 217 | <h2>Thunderbird Future</h2> |
| 218 | <ul> |
| 219 | <li>Mostly unclear vision</li> |
| 220 | <li>More web integration</li> |
| 221 | </ul> |
| 222 | </section> |
| 223 | |
| 224 | <section> |
| 225 | <h1>Firefox Present</h1> |
| 226 | <img src="firefox-present.png"> |
| 227 | </section> |
| 228 | |
| 229 | <section> |
| 230 | <h1>Firefox Future</h1> |
| 231 | <img src="firefox-future.png"> |
| 232 | </section> |
| 233 | |
| 234 | <section> |
| 235 | <h2>SeaMonkey Option 1</h2> |
| 236 | <ul> |
| 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> |
| 241 | </ul> |
| 242 | </section> |
| 243 | |
| 244 | <section> |
| 245 | <h2>SeaMonkey Option 2</h2> |
| 246 | <ul> |
| 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> |
| 251 | </ul> |
| 252 | </section> |
| 253 | |
| 254 | <section> |
| 255 | <h2>SeaMonkey Option 3</h2> |
| 256 | <ul> |
| 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> |
| 260 | </ul> |
| 261 | </section> |
| 262 | |
| 263 | <section> |
| 264 | <h2>Think About It!</h2> |
| 265 | <ul> |
| 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> |
| 270 | </ul> |
| 271 | </section> |
| 272 | |
| 273 | |
| 274 | <script> |
| 275 | |
| 276 | /* |
| 277 | ************************************ |
| 278 | * * |
| 279 | * JAVASCRIPT * |
| 280 | * (You don't have to read this) * |
| 281 | ************************************ |
| 282 | */ |
| 283 | |
| 284 | function init() { |
| 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 |
| 290 | // Firefox bug :( |
| 291 | slides[i - 1].innerHTML = "<div>" + slides[i - 1].innerHTML + "</div>"; |
| 292 | window.history[(i == 1? 'replace' : 'push') + 'State'](i, title + " ("+ i +"/"+ il +")", "#"+i); |
| 293 | } |
| 294 | |
| 295 | var footer = document.createElement("footer"); |
| 296 | footer.id = "footer"; |
| 297 | footer.innerHTML = |
| 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); |
| 303 | |
| 304 | |
| 305 | window.addEventListener("popstate", function(e) { |
| 306 | if(e.state) { |
| 307 | var old = document.querySelector("section[aria-selected]"); |
| 308 | var next = document.querySelector("section:nth-of-type("+ e.state +")"); |
| 309 | |
| 310 | if (old) { |
| 311 | old.removeAttribute("aria-selected"); |
| 312 | if (old.hasAttribute("data-onunload")) { |
| 313 | window[old.getAttribute("data-onunload")].call(window, old); |
| 314 | } |
| 315 | } |
| 316 | |
| 317 | if (next) { |
| 318 | next.setAttribute("aria-selected", "true"); |
| 319 | if (next.hasAttribute("data-onload")) { |
| 320 | window[next.getAttribute("data-onload")].call(window, next); |
| 321 | } |
| 322 | } |
| 323 | |
| 324 | |
| 325 | var index = document.querySelector("#index .pagenumber"); |
| 326 | index.innerHTML = e.state; |
| 327 | } |
| 328 | }, true); |
| 329 | } |
| 330 | |
| 331 | function resize() { |
| 332 | var style = document.getElementById("resizeStyle"); |
| 333 | if (!style) { |
| 334 | style = document.createElement("style"); |
| 335 | style.id = "resizeStyle"; |
| 336 | document.head.appendChild(style); |
| 337 | } |
| 338 | style.textContent = "body>section>div {height: "+ window.innerHeight +"px}"; |
| 339 | } |
| 340 | |
| 341 | window.addEventListener("resize", resize, true); |
| 342 | window.addEventListener("load", resize, true); |
| 343 | window.addEventListener("load", init, true); |
| 344 | |
| 345 | // Webkit bug |
| 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) { |
| 350 | return; |
| 351 | } |
| 352 | if ( e.keyCode == 80 // p |
| 353 | || e.keyCode == 66 // b |
| 354 | || e.keyCode == 37 // left arrow |
| 355 | || e.keyCode == 33 // page up |
| 356 | ) { |
| 357 | e.preventDefault(); |
| 358 | history.back(); |
| 359 | } |
| 360 | if ( e.keyCode == 78 // n |
| 361 | || e.keyCode == 32 // space |
| 362 | || e.keyCode == 39 // right arrow |
| 363 | || e.keyCode == 34 // page down |
| 364 | ) { |
| 365 | e.preventDefault(); |
| 366 | history.forward(); |
| 367 | } |
| 368 | }, true); |
| 369 | </script> |
| 370 | </body> |
| 371 | </html> |