PythonSlideShow

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