PythonSlideShow

minimumWorking_H5p10n.html

6:c69af778e9a3
2010-08-26 ink changed template_H5p10n.html to use vertical CSS transitions instead of horizontal ones.
     1 <!DOCTYPE html>     2 <!-- saved from url=(0036)http://slides.html5rocks.com/#slide1 -->     3 <!-- <HTML manifest="/html5/src/slides_manifest.php"> -->     4 <!-- Bugs: The first slide is always in the background if URL references "#slideN" are followed when the document is first loaded.-->     5 <HTML>     6 <HEAD><META http-equiv="Content-Type" content="text/html; charset=UTF-8">     7     <META charset="UTF-8">     8     <!--[if lt IE 9]>     9       <meta http-equiv="X-UA-Compatible" content="chrome=1">    10     <![endif]-->    11     12     <TITLE>HTML5 presentation</TITLE>    13     <LINK href="./HTML5 presentation_files/css" rel="stylesheet" type="text/css">    14         15     <!-- <link type="text/css" href="./src/scrollbar.css" rel="stylesheet"> -->    16         17     <STYLE>    18       .notes { display: none; }    19       .stroke {    20         -webkit-text-stroke-color: red;    21         -webkit-text-stroke-width: 1px;    22       } /* currently webkit-only */    23           24       body {    25         font: 14px "Lucida Grande", "Trebuchet MS", Verdana, sans-serif;    26         padding: 0;    27         margin: 0;    28         width: 100%;    29         height: 100%;    30         position: absolute;    31         left: 0px; top: 0px;    32       }    33           34       .presentation {    35         position: absolute;    36         height: 100%;    37         width: 100%;    38         left: 0px;    39         top: 0px;    40         display: block;    41         overflow: hidden;    42         background: #778;    43       }    44           45       .slides {    46         width: 100%;    47         height: 100%;    48         /*    49         overflow: hidden;    50         */    51         left: 0;    52         top: 0;    53         position: absolute;    54         display: block;    55         -webkit-transition: -webkit-transform 2s ease-in-out;    56         -moz-transition: -moz-transform 2s ease-in-out;    57         -o-transition: -o-transform 2s ease-in-out;    58         transition: transform 2s ease-in-out;    59       }    60     61       .slide {    62         display: none;    63         position: absolute;    64         overflow: hidden;    65         width: 900px;    66         height: 700px;    67         left: 50%;    68         top: 50%;    69         margin-top: -350px;    70         background-color: #eee;    71         background: -webkit-gradient(linear, left bottom, left top, from(#bbd), to(#fff));    72         background: -moz-linear-gradient(bottom, #bbd, #fff);    73         background: linear-gradient(bottom, #bbd, #fff);    74         -webkit-transition: margin 2.25s ease-in-out;    75         -moz-transition: margin 2.25s ease-in-out;    76         -o-transition: margin 2.25s ease-in-out;    77         transition: margin 2.25s ease-in-out;    78       }    79           80       .slide:nth-child(even) {    81         border-radius: 20px 0; /* includes Opera 10.5+ */    82         -moz-border-radius: 20px 0;    83         -khtml-border-radius: 20px 0;    84         -webkit-border-top-left-radius: 20px;    85         -webkit-border-bottom-right-radius: 20px;    86       }    87           88       .slide:nth-child(odd) {    89         border-radius: 0 20px;    90         -moz-border-radius: 0 20px;    91         -khtml-border-radius: 0 20px;    92         -webkit-border-top-right-radius: 20px;    93         -webkit-border-bottom-left-radius: 20px;    94       }    95     96       .slide p {    97         font-size: 20px;    98       }    99    100       .slide .counter {   101         color: #999999;   102         position: absolute;   103         left: 20px;   104         bottom: 20px;   105         display: block;   106         font-size: 12px;   107       }   108    109       .slide.title > .counter,   110       .slide.segue > .counter,   111       .slide.mainTitle > .counter {   112         display: none;   113       }   114    115       .force-render {   116         display: block;   117         margin-top: -10000px;   118       }   119    120       section.intro p {   121         font-size: 35px;   122       }   123    124       button {   125         font-size: 20px;   126       }   127          128       .summary {   129        font-size: 30px;   130       }   131    132       .bullets {   133        font-size: 40px;   134       }   135          136       .slide.far-past {   137         display: block;   138         margin-left: -2400px;   139       }   140          141       .slide.past {   142         display: block;   143         margin-left: -1400px;   144       }   145          146       .slide.current {   147         display: block;   148         margin-left: -450px;   149       }   150          151       .slide.future {   152         display: block;   153         margin-left: 500px;   154       }   155          156       .slide.far-future {   157         display: block;   158         margin-left: 1500px;   159       }   160    161       body.three-d div.presentation {   162         /*background: -webkit-gradient(radial, 50% 50%, 10, 50% 50%, 1000, from(#333), to(#000));        */   163       }   164          165       body.three-d div.slides {   166         -webkit-transform: translateX(50px) scale(0.8) rotateY(10deg);   167         -moz-transform: translateX(50px) scale(0.8) rotateY(10deg);   168         -o-transform: translateX(50px) scale(0.8) rotateY(10deg);   169         transform: translateX(50px) scale(0.8) rotateY(10deg);   170       }   171          172          173       /* Content */   174          175       @font-face { font-family: 'Junction'; src: url(src/Junction02.otf); }   176       @font-face { font-family: 'LeagueGothic'; src: url(src/LeagueGothic.otf); }   177          178       header {   179         font-family: 'Droid Sans';   180         font-weight: normal;   181         font-size: 50px;   182         letter-spacing: -.05em;   183         color: white;   184         color: black;   185         text-shadow: rgba(0, 0, 0, 0.2) 0 2px 5px;   186         position: absolute;   187         left: 30px;   188         top: 25px;   189         margin: 0;   190         padding: 0;   191       }   192          193       .intro h1 {   194         color: black;   195         padding: 0;   196         margin: 0;   197         letter-spacing: -2px;   198         font-size: 96px;   199       }   200          201       .intro h2 {   202         color: black;   203         padding: 0;   204         margin: 0;   205         margin-top: -5px;   206         font-size: 40px;   207         letter-spacing: -1px;   208       }   209          210       h1 {   211         display: inline;   212         font-size: 100%;   213       	font-weight: normal;   214       	padding: 0;   215       	margin: 0;   216       }   217          218       h2 {   219         font-family: 'Droid Sans';   220         color: black;   221         font-size: 20px;   222         margin-left: 20px;   223         margin-top: 50px;   224       }   225          226       h2:first-child {   227         margin-top: 0;   228       }   229    230       section, footer {   231         font-family: 'Droid Sans';   232         font-size: 50px;   233         color: #3f3f3f;   234         text-shadow: rgba(0, 0, 0, 0.2) 0 2px 5px;   235         margin-left: 30px;   236         margin-right: 30px;   237         margin-top: 100px;   238         display: block;   239         overflow: hidden;   240       }   241          242       footer { font-size: 12px; margin-top: 20px;}   243    244       a {   245         color: inherit;   246         display: inline-block;   247         text-decoration: none;   248         line-height: 110%;   249         border-bottom: 2px solid #3f3f3f;   250       }   251    252       #wmap a {   253         line-height: 100%;   254         border-bottom: none;   255       }   256          257       section.left {   258         float: left;   259         width: 390px;   260       }   261          262       section.small {   263         font-size: 24px;   264       }   265          266       section.small ul {   267         margin: 0 0 0 15px;   268         padding: 0;   269       }   270          271       section.small li {   272         padding-bottom: 0;   273       }   274          275       h2 {   276         padding: 0;   277         margin: 15px 0 5px 0;   278 /*        font-family: GG240;*/   279       }   280          281       section.center {   282         line-height: 180%;   283         text-align: center;   284         display: table-cell;   285         vertical-align: middle;   286         height: 700px;   287         width: 900px;   288       }   289          290       pre {   291         text-align: left;   292         font-size: 16px;   293         font-family: 'Droid Sans Mono', Courier;   294         padding-bottom: 10px;   295            296         padding: 10px 20px;   297         background: rgba(255, 0, 0, 0.05);   298         border-radius: 8px;   299         -webkit-border-radius: 8px;   300         -khtml-border-radius: 8px;   301         -moz-border-radius: 8px;   302         border: 1px solid rgba(255, 0, 0, 0.2);   303       }   304       .two-column {   305         -webkit-column-count: 2;   306         -moz-column-count: 2;   307         column-count: 2;   308       }   309          310       pre select {   311         font-size: 16px;   312         font-family: Monaco, Courier;   313         border: 1px solid #c61800;   314       }   315            316       input {   317         font-size: 16px;   318         font-family: Helvetica;   319         padding: 3px;   320       }   321       input[type="range"] {   322         width: 100%;   323       }   324          325       button {   326         font-family: Verdana;   327       }   328          329       button.large {   330         font-size: 32px;   331       }   332            333       pre b {   334         font-weight: normal;   335         color: #c61800;   336         text-shadow: #c61800 0 0 1px;   337         /*letter-spacing: -1px;*/   338       }   339       pre em {   340         font-weight: normal;   341         font-style: normal;   342         color: #18a600;   343         text-shadow: #18a600 0 0 1px;   344       }   345       pre input[type="range"] {   346         height: 6px;   347         cursor: pointer;   348         width: auto;   349       }   350       example {   351         font-size: 16px;   352         display: block;   353         padding: 10px 20px;   354         color: black;   355         background: rgba(255, 255, 255, 0.4);   356         border-radius: 8px;   357         -webkit-border-radius: 8px;   358         -khtml-border-radius: 8px;   359         -moz-border-radius: 8px;   360         margin-bottom: 10px;   361         border: 1px solid rgba(0, 0, 0, 0.2);   362       }   363       video {   364         border-radius: 8px;   365         -moz-border-radius: 8px;   366         -khtml-border-radius: 8px;   367         -webkit-border-radius: 8px;   368         border: 1px solid rgba(0, 0, 0, 0.2);   369       }   370          371       .css,   372       .js,   373       .html,   374       .key {   375         font-family: 'Droid Sans';   376         color: black;   377         display: inline-block;   378         padding: 6px 10px 3px 10px;   379         font-size: 25px;   380         line-height: 30px;   381         text-shadow: none;   382         letter-spacing: 0;   383         bottom: 10px;   384         position: relative;   385         border-radius: 10px;   386         -moz-border-radius: 10px;   387         -khtml-border-radius: 10px;   388         -webkit-border-radius: 10px;   389         background: white;   390         box-shadow: rgba(0, 0, 0, 0.1) 0 2px 5px;   391         -webkit-box-shadow: rgba(0, 0, 0, 0.1) 0 2px 5px;   392         -moz-box-shadow: rgba(0, 0, 0, 0.1) 0 2px 5px;   393         -o-box-shadow: rgba(0, 0, 0, 0.1) 0 2px 5px;   394       }   395          396       .key { font-family: Arial; }   397          398       :not(header) > .css,   399       :not(header) > .js,   400       :not(header) > .html,   401       :not(header) > .key {   402         margin: 0 5px;   403         bottom: 4px;   404       }   405          406       .css {   407         background: -webkit-gradient(linear, left top, left bottom, from(#ff4), to(#ffa));   408         background-color: #ff4;   409         background: -moz-linear-gradient(left top, #ff4, #ffa);   410       }   411       .js {   412         background: -webkit-gradient(linear, left top, left bottom, from(#4f4), to(#afa));   413         background-color: #4f4;   414         background: -moz-linear-gradient(left top, #4f4, #afa);   415       }   416       .html {   417         background: -webkit-gradient(linear, left top, left bottom, from(#e88), to(#fee));   418         background-color: #e88;   419         background: -moz-linear-gradient(left top, #e88, #fee);   420       }   421          422       li {   423         list-style: none;   424         padding: 10px 0;   425       }   426          427       .summary li::before, .bullets li::before {   428         content: '?? ';   429       }   430          431       info {   432         display: block;   433         font-size: 50%;   434         text-align: center;   435       }   436          437     </STYLE>   438     </HEAD><BODY>   439     <DIV class="presentation">   440       <DIV class="slides">   441 <!--NEW SLIDES-->   442         <DIV class="slide current">   443           <SECTION class="center intro">   444             <P>Getting around</P>   445             <P>Press <SPAN class="key">???</SPAN> to move on. See detail by using <SPAN class="key">???</SPAN>, go back via <SPAN class="key">???</SPAN> and <SPAN class="key">???</SPAN>. Use <SPAN CLASS="key">Tab ???</SPAN> and <SPAN CLASS="key">&nbsp;???&nbsp;</SPAN> to find and follow links.</P>   446             <P>Zoom in/out: <SPAN class="key">Ctrl or Command</SPAN> + <SPAN class="key">+/-</SPAN></P>   447             <P style="font-size: 25px">Derived from <A href="http://slides.html5rocks.com/disclaimer.html">slides.html5rocks.com</A></P>   448           </SECTION>   449         <SPAN class="counter">1</SPAN></DIV>   450                    451         <DIV class="slide future">   452           <SECTION class="center intro">   453             <HGROUP>   454               <H1>   455                 P10ns in HTML5   456               </H1>   457               <H2>   458                  Presentations in HyperText Markup Language 5   459               </H2>   460             </HGROUP>   461             <P style="font-size: 32px">Documenting Finnish, some ideas, real estate searches and employment</P>   462           </SECTION>   463         <SPAN class="counter">2</SPAN></DIV>   464    465         <DIV class="slide far-future">   466           <HEADER>Planning</HEADER>   467           <SECTION class="small">   468 <P>Generate content with bpy/Python 3. This supports integration with Blender 2.5+ with no external Python 3 interpreter needed. Multi-key controls implemented in-context, per-slide, enable quick and easy development of quizzes, like counting up, counting down and typing the alphabet (with or without c[l]ues). Answers show transitional slides or content (e.g. "Correct!" flying past or flashing on the screen or a video or sound plays) before showing the next slide from the current section or subsection. This document can include hangman and similar games relying on specific typing for progression.</P>   469           </SECTION>   470         <SPAN class="counter">2</SPAN></DIV>   471    472    473    474       </DIV> <!-- slides -->   475           476     </DIV> <!-- presentation -->   477        478     <SCRIPT>   479       (function() {   480         // bail in IE   481         var doc = document;   482         if (doc.all) { return; }   483    484         var disableBuilds = true; //true;   485    486         var ctr = 0;   487         var spaces = /\s+/, a1 = [""];   488    489         var toArray = function(list) {   490           return Array.prototype.slice.call(list||[], 0);   491         };   492    493         var byId = function(id) {   494           if (typeof id == "string") { return doc.getElementById(id); }   495           return id;   496         };   497    498         var query = function(query, root) {   499           if (!query) { return []; }   500           if (typeof query != "string") { return toArray(query); }   501           if (typeof root == "string"){   502             root = byId(root);   503             if(!root){ return []; }   504           }   505    506           root = root||document;   507           var rootIsDoc = (root.nodeType == 9);   508           var doc = rootIsDoc ? root : (root.ownerDocument||document);   509    510           // rewrite the query to be ID rooted   511           if (!rootIsDoc || (">~+".indexOf(query.charAt(0)) >= 0)) {   512             root.id = root.id||("qUnique"+(ctr++));   513             query = "#"+root.id+" "+query;   514           }   515           // don't choke on something like ".yada.yada >"   516           if (">~+".indexOf(query.slice(-1)) >= 0) { query += " *"; }   517    518           return toArray(doc.querySelectorAll(query));   519         };   520    521         var strToArray = function(s) {   522           if (typeof s == "string" || s instanceof String) {   523             if (s.indexOf(" ") < 0) {   524               a1[0] = s;   525               return a1;   526             } else {   527               return s.split(spaces);   528             }   529           }   530           return s;   531         };   532    533         var trim = function(str) {   534           return str.replace(/^\s\s*/, '').replace(/\s\s*$/, '');   535         };   536    537         var addClass = function(node, classStr) {   538           classStr = strToArray(classStr);   539           var cls = " " + node.className + " ";   540           for (var i = 0, len = classStr.length, c; i < len; ++i) {   541             c = classStr[i];   542             if (c && cls.indexOf(" " + c + " ") < 0) {   543               cls += c + " ";   544             }   545           }   546           node.className = trim(cls);   547         };   548    549         var removeClass = function(node, classStr) {   550           var cls;   551           if (classStr !== undefined) {   552             classStr = strToArray(classStr);   553             cls = " " + node.className + " ";   554             for (var i = 0, len = classStr.length; i < len; ++i) {   555               cls = cls.replace(" " + classStr[i] + " ", " ");   556             }   557             cls = trim(cls);   558           } else {   559             cls = "";   560           }   561           if (node.className != cls) {   562             node.className = cls;   563           }   564         };   565    566         var toggleClass = function(node, classStr) {   567           var cls = " " + node.className + " ";   568           if (cls.indexOf(" " + trim(classStr) + " ") >= 0) {   569             removeClass(node, classStr);   570           } else {   571             addClass(node, classStr);   572           }   573         };   574    575         var ua = navigator.userAgent;   576         var isFF = parseFloat(ua.split("Firefox/")[1]) || undefined;   577         var isWK = parseFloat(ua.split("WebKit/")[1]) || undefined;   578         var isOpera = parseFloat(ua.split("Opera/")[1]) || undefined;   579    580         var canTransition = (function() {   581           var ver = parseFloat(ua.split("Version/")[1]) || undefined;   582           // test to determine if this browser can handle CSS transitions.   583           var cachedCanTransition =    584             (isWK || (isFF && isFF > 3.6 ) || (isOpera && ver >= 10.5));   585           return function() { return cachedCanTransition; }   586         })();   587    588         //   589         // Slide class   590         //   591         var Slide = function(node, idx) {   592           this._node = node;   593           if (idx >= 0) {   594             this._count = idx+1;   595           }   596           if (this._node) {   597             addClass(this._node, "slide distant-future");   598           }   599           this._makeCounter();   600           this._makeBuildList();   601         };   602    603         Slide.prototype = {   604           _node: null,   605           _count: 0,   606           _buildList: [],   607           _visited: false,   608           _currentState: "",   609           _states: [ "distant-past", "far-past",   610                      "past", "current", "future",   611                      "far-future", "distant-future" ],   612           setState: function(state) {   613             if (typeof state != "string") {   614               state = this._states[state];   615             }   616             if (state == "current" && !this._visited) {   617               this._visited = true;   618               this._makeBuildList();   619             }   620             removeClass(this._node, this._states);   621             addClass(this._node, state);   622             this._currentState = state;   623    624             // delay first auto run. Really wish this were in CSS.   625             /*   626             this._runAutos();   627             */   628             var _t = this;   629             setTimeout(function(){ _t._runAutos(); } , 400);   630           },   631           _makeCounter: function() {   632             if(!this._count || !this._node) { return; }   633             var c = doc.createElement("span");   634             c.innerHTML = this._count;   635             c.className = "counter";   636             this._node.appendChild(c);   637           },   638           _makeBuildList: function() {   639             this._buildList = [];   640             if (disableBuilds) { return; }   641             if (this._node) {   642               this._buildList = query("[data-build] > *", this._node);   643             }   644             this._buildList.forEach(function(el) {   645               addClass(el, "to-build");   646             });   647           },   648           _runAutos: function() {   649             if (this._currentState != "current") {   650               return;   651             }   652             // find the next auto, slice it out of the list, and run it   653             var idx = -1;   654             this._buildList.some(function(n, i) {   655               if (n.hasAttribute("data-auto")) {   656                 idx = i;   657                 return true;   658               }   659               return false;   660             });   661             if (idx >= 0) {   662               var elem = this._buildList.splice(idx, 1)[0];   663               var transitionEnd = isWK ? "webkitTransitionEnd" : (isFF ? "mozTransitionEnd" : "oTransitionEnd");   664               var _t = this;   665               if (canTransition()) {   666                 var l = function(evt) {   667                   elem.parentNode.removeEventListener(transitionEnd, l, false);   668                   _t._runAutos();   669                 };   670                 elem.parentNode.addEventListener(transitionEnd, l, false);   671                 removeClass(elem, "to-build");   672               } else {   673                 setTimeout(function() {   674                   removeClass(elem, "to-build");   675                   _t._runAutos();   676                 }, 400);   677               }   678             }   679           },   680           buildNext: function() {   681             if (!this._buildList.length) {   682               return false;   683             }   684             removeClass(this._buildList.shift(), "to-build");   685             return true;   686           },   687         };   688    689         //   690         // SlideShow class   691         //   692         var SlideShow = function(slides) {   693           this._slides = (slides||[]).map(function(el, idx) {   694             return new Slide(el, idx);   695           });   696    697           var h = window.location.hash;   698           try {   699             this.current = parseInt(h.split('#slide')[1], 10);   700           }catch (e) { /* squeltch */ }   701           this.current = isNaN(this.current) ? 1 : this.current;   702           var _t = this;   703           doc.addEventListener('keydown',    704               function(e) { _t.handleKeys(e); }, false);   705           doc.addEventListener('mousewheel',    706               function(e) { _t.handleWheel(e); }, false);   707           doc.addEventListener('DOMMouseScroll',    708               function(e) { _t.handleWheel(e); }, false);   709           doc.addEventListener('touchstart',    710               function(e) { _t.handleTouchStart(e); }, false);   711           doc.addEventListener('touchend',    712               function(e) { _t.handleTouchEnd(e); }, false);   713           window.addEventListener('popstate',    714               function(e) { _t.go(e.state); }, false);   715           this._update();   716              717           // hide those slides we forced to render on load time for positioning purposes   718           [].forEach.call(document.querySelectorAll('.force-render'), function(elem,i){   719             setTimeout(function() {   720               removeClass(elem, 'force-render');   721             }, 2000);   722           });   723         };   724    725         SlideShow.prototype = {   726           _slides: [],   727           _update: function(dontPush) {   728             if (history.pushState) {   729               if (!dontPush) {   730                 history.pushState(this.current, "Slide " + this.current, "#slide" + this.current);   731               }   732             } else {   733               window.location.hash = "slide" + this.current;   734             }   735             for (var x = this.current-1; x < this.current+7; x++) {   736               if (this._slides[x-4]) {   737                 this._slides[x-4].setState(Math.max(0, x-this.current));   738               }   739             }   740           },   741    742           current: 0,   743           next: function() {   744             if (!this._slides[this.current-1].buildNext()) {   745               this.current = Math.min(this.current+1, this._slides.length);   746               this._update();   747             }   748           },   749           prev: function() {   750             this.current = Math.max(this.current-1, 1);   751             this._update();   752           },   753           go: function(num) {   754             if (history.pushState && this.current != num) {   755               history.replaceState(this.current, "Slide " + this.current, "#slide" + this.current);   756             }   757             this.current = num;   758             this._update(true);   759           },   760    761           _notesOn: false,   762           showNotes: function() {   763             var isOn = this._notesOn = !this._notesOn;   764             query(".notes").forEach(function(el) {   765               el.style.display = (notesOn) ? "block" : "none";   766             });   767           },   768           switch3D: function() {   769             toggleClass(document.body, "three-d");   770           },   771           handleWheel: function(e) {   772             var delta = 0;   773             if (e.wheelDelta) {   774               delta = e.wheelDelta/120;   775               if (isOpera) {   776                 delta = -delta;   777               }   778             } else if (e.detail) {   779               delta = -e.detail/3;   780             }   781    782             if (delta > 0 ) {   783               this.prev();   784               return;   785             }   786             if (delta < 0 ) {   787               this.next();   788               return;   789             }   790           },   791           handleKeys: function(e) {   792                793             if (/^(input|textarea)$/i.test(e.target.nodeName)) return;   794                795             switch (e.keyCode) {   796               case 37: // left arrow   797                 this.prev(); break;   798               case 39: // right arrow   799               case 32: // space   800                 this.next(); break;   801               case 50: // 2   802                 this.showNotes(); break;   803               case 51: // 3   804                 this.switch3D(); break;   805             }   806           },   807           _touchStartX: 0,   808           handleTouchStart: function(e) {   809             this._touchStartX = e.touches[0].pageX;   810           },   811           handleTouchEnd: function(e) {   812             var delta = this._touchStartX - e.changedTouches[0].pageX;   813             var SWIPE_SIZE = 150;   814             if (delta > SWIPE_SIZE) {   815               this.next();   816             } else if (delta< -SWIPE_SIZE) {   817               this.prev();   818             }   819           },   820         };   821    822         // Initialize   823         var slideshow = new SlideShow(query(".slide"));   824       })();   825     </SCRIPT>   826    827     <!--[if lt IE 9]>   828     <script    829       src="http://ajax.googleapis.com/ajax/libs/chrome-frame/1/CFInstall.min.js">   830     </script>   831 		<script>CFInstall.check({ mode: "overlay" });</script>   832     <![endif]-->   833        834  -->   835    836 </BODY></HTML>