Mercurial > 826-national-preso

--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/index.html	Thu Jul 08 09:07:09 2010 -0700
@@ -0,0 +1,194 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>What Mozilla Can Learn From 826 National</title>
+  <base target="_blank">
+  <style type="text/css" media="screen">
+  body {
+    font-family: Futura;
+    font-size: 36pt;
+    margin: 1em;
+    overflow: hidden;
+  }
+
+  .slide {
+    display: none;
+  }
+
+  div.slide.selected {
+    display: block;
+    position: absolute;
+    height: auto;
+    bottom: 0;
+    top: 0;
+    left: 0;
+    right: 0;
+    margin: 1em;
+  }
+
+  h1, h2, h3 {
+    text-align: right;
+    font-weight: normal;
+  }
+
+  h3 {
+    color: gray;
+  }
+
+  ul {
+    list-style-type: none;
+  }
+
+  li {
+    padding-bottom: 1em;
+  }
+
+  img {
+    display: block;
+    margin: auto;
+    max-width: 90%;
+    max-height: 90%;
+  }
+
+  a {
+    color: inherit;
+    text-decoration: inherit;
+  }
+
+  a:hover {
+    background: yellow;
+  }
+  </style>
+</head>
+<body>
+<div class="slide">
+  <h1>What Can Mozilla Learn From Other Movements?</h1>
+  <h3>Mozilla Summit &ndash; July 2010</h3>
+</div>
+<div class="slide">
+  <img src="http://www.826national.org/images/362.jpg">
+</div>
+<div class="slide">
+  <img src="http://www.826national.org/images/143.jpg">
+</div>
+<div class="slide">
+  <img src="http://www.826national.org/images/227.jpg">
+</div>
+<div class="slide">
+  <img src="http://www.826national.org/images/35.jpg">
+</div>
+<div class="slide">
+  <h2>Why I Chose 826&nbsp;National</h2>
+  <ul>
+    <li><a href="http://826national.org/chapters/">Every chapter is
+    unique.</a></li>
+    <li><a
+    href="http://www.826national.org/about/186/project-based-learning">It's
+    about making things.</a></li>
+    <li>It's vibrantly creative.</li>
+    <li><a
+    href="http://www.826national.org/content/157/design-catalog">It's
+    odd.</a></li>
+  </ul>
+</div>
+<div class="slide">
+  <img src="http://www.826valencia.org/store/img/signs/captrickinformation.gif">
+</div>
+<div class="slide">
+  <img src="http://www.826national.org/images/215.jpg">
+</div>
+<div class="slide">
+  <h2>How Does 826&nbsp;National Inspire Me?</h2>
+  <ul>
+    <li>It inspires me to create.</li>
+    <li>It unites amateurs and professionals who love
+    writing.</li>
+  </ul>
+</div>
+<div class="slide">
+  <h2>Key Lessons From 826&nbsp;National</h2>
+  <ul>
+    <li>Revenue need not come from utility.</li>
+    <li>People should know when and how they're
+    supporting a non-profit.</li>
+  </ul>
+</div>
+<div class="slide">
+  <h2>Takeaways for Mozilla</h2>
+  <ul>
+    <li>Everything we create should be an embodiment of
+    what we promote.</li>
+    <li>The mission should be obvious.</li>
+    <li>Teaching helps us learn.</li>
+  </ul>
+</div>
+<script>
+onload = function() {
+  var allSlides = document.querySelectorAll(".slide");
+  var currSlide;
+
+  function $(sel) {
+   return document.querySelector(sel);
+  }
+
+  function setCurrSlide(newCurrSlide) {
+    if (newCurrSlide != currSlide) {
+      if (currSlide != undefined)
+        allSlides[currSlide].className = "slide";
+      currSlide = newCurrSlide;
+      allSlides[currSlide].className = "slide selected";
+      if (currSlide == 0)
+        window.location.hash = "";
+      else
+        window.location.hash = "#" + currSlide;
+    }
+  }
+
+  function setCurrSlideFromHash() {
+    var hash = window.location.hash;
+    var match = hash.match(/#(-?[0-9]+)/);
+    if (match) {
+      var newSlide = parseInt(match[1]);
+      if (newSlide < 0)
+        newSlide = allSlides.length + newSlide;
+      setCurrSlide(newSlide);
+    } else
+      setCurrSlide(0);
+  }
+
+  function prevSlide() {
+    if (currSlide > 0)
+      setCurrSlide(currSlide - 1);
+  }
+
+  function nextSlide() {
+    if (currSlide < allSlides.length - 1)
+      setCurrSlide(currSlide + 1);
+  }
+
+  if ('onhashchange' in window)
+    window.onhashchange = setCurrSlideFromHash;
+  else
+    window.setInterval(setCurrSlideFromHash, 250);
+
+  window.onkeyup = function(event) {
+    const LEFT_ARROW = 37;
+    const RIGHT_ARROW = 39;
+    const SPACE = 32;
+
+    switch (event.keyCode) {
+    case SPACE:
+    case RIGHT_ARROW:
+      nextSlide();
+      break;
+    case LEFT_ARROW:
+      prevSlide();
+      break;
+    }
+  };
+
+  setCurrSlideFromHash();
+};
+</script>
+</body>
+</html>