├── public ├── img │ ├── 1kg.jpg │ ├── NGO.jpg │ ├── TED.jpg │ ├── go.jpg │ ├── me.jpg │ ├── mtb.jpg │ ├── mud.jpg │ ├── arts.jpg │ ├── chess.jpg │ ├── happy.jpg │ ├── lego.jpg │ ├── maze.jpg │ ├── olpc.jpg │ ├── paints.jpg │ ├── piano.jpg │ ├── quake3.jpg │ ├── rich4.jpg │ ├── sudoku.jpg │ ├── thanks.jpg │ ├── theory.jpg │ ├── title.jpg │ ├── travel.jpg │ ├── yebob.jpg │ ├── cs-italy.jpg │ ├── diablo2.jpg │ ├── football.jpg │ ├── lego-nxt.jpg │ ├── majiang.jpg │ ├── monopoly.jpg │ ├── scratch.jpg │ ├── warcraft.jpg │ ├── wcg-dota.jpg │ ├── wcg2011.jpg │ ├── xianjian.jpg │ ├── angry-birds.jpg │ ├── cargo-bot.jpg │ ├── concept-art.jpg │ ├── crossword.jpg │ ├── cs-guitar.jpg │ ├── game-over.jpg │ ├── lego-land.jpg │ ├── magic-cube.jpg │ ├── mud-trigger.jpg │ ├── openparty.jpg │ ├── play-again.jpg │ ├── sanguosha.jpg │ ├── spiderman.jpg │ ├── starcraft.jpg │ ├── super-mario.jpg │ ├── team-work.jpg │ ├── tic-tac-toe.jpg │ ├── tomb-raider.jpg │ ├── wcg-player.jpg │ ├── Space Travel.jpg │ ├── chinese-chess.jpg │ ├── cut-the-rope.jpg │ ├── john-carmack.jpg │ ├── king-of-kings.jpg │ ├── question-play.jpg │ ├── resident-evil.jpg │ ├── rock-climbing.jpg │ ├── what-is-game.jpg │ ├── wowwiki-maps.jpg │ ├── Russell-Spacewar.jpg │ ├── age-of-empires.jpg │ ├── cosplay-diablo3.jpg │ ├── counter-strike.jpg │ ├── game-is-culture.jpg │ ├── heros-jack-linus.jpg │ ├── impressjs-source.jpg │ ├── my-other-games.jpg │ ├── need-for-speed.jpg │ ├── nolan_bushnell.jpg │ ├── player-or-coder.jpg │ ├── social-learn-lab.jpg │ ├── street-fighter.jpg │ ├── sunshine-library.jpg │ ├── video-game-live.jpg │ ├── plants-vs-zombies.jpg │ ├── where-is-my-water.jpg │ ├── cosplay-tomb-raider.jpg │ ├── angry_birds_music_landon.jpg │ ├── jobs-and-wozniak-breakout.jpg │ ├── JohnMcCarthy-Computer-Chess.jpg │ └── Ken-Thompson-and-Dennis-Ritchie-unix.jpg ├── css │ ├── font.css │ └── style.css ├── js │ └── impress.js └── index.html └── config.ru /public/img/1kg.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lite/op-talk-games/master/public/img/1kg.jpg -------------------------------------------------------------------------------- /public/img/NGO.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lite/op-talk-games/master/public/img/NGO.jpg -------------------------------------------------------------------------------- /public/img/TED.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lite/op-talk-games/master/public/img/TED.jpg -------------------------------------------------------------------------------- /public/img/go.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lite/op-talk-games/master/public/img/go.jpg -------------------------------------------------------------------------------- /public/img/me.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lite/op-talk-games/master/public/img/me.jpg -------------------------------------------------------------------------------- /public/img/mtb.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lite/op-talk-games/master/public/img/mtb.jpg -------------------------------------------------------------------------------- /public/img/mud.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lite/op-talk-games/master/public/img/mud.jpg -------------------------------------------------------------------------------- /public/img/arts.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lite/op-talk-games/master/public/img/arts.jpg -------------------------------------------------------------------------------- /public/img/chess.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lite/op-talk-games/master/public/img/chess.jpg -------------------------------------------------------------------------------- /public/img/happy.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lite/op-talk-games/master/public/img/happy.jpg -------------------------------------------------------------------------------- /public/img/lego.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lite/op-talk-games/master/public/img/lego.jpg -------------------------------------------------------------------------------- /public/img/maze.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lite/op-talk-games/master/public/img/maze.jpg -------------------------------------------------------------------------------- /public/img/olpc.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lite/op-talk-games/master/public/img/olpc.jpg -------------------------------------------------------------------------------- /public/img/paints.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lite/op-talk-games/master/public/img/paints.jpg -------------------------------------------------------------------------------- /public/img/piano.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lite/op-talk-games/master/public/img/piano.jpg -------------------------------------------------------------------------------- /public/img/quake3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lite/op-talk-games/master/public/img/quake3.jpg -------------------------------------------------------------------------------- /public/img/rich4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lite/op-talk-games/master/public/img/rich4.jpg -------------------------------------------------------------------------------- /public/img/sudoku.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lite/op-talk-games/master/public/img/sudoku.jpg -------------------------------------------------------------------------------- /public/img/thanks.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lite/op-talk-games/master/public/img/thanks.jpg -------------------------------------------------------------------------------- /public/img/theory.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lite/op-talk-games/master/public/img/theory.jpg -------------------------------------------------------------------------------- /public/img/title.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lite/op-talk-games/master/public/img/title.jpg -------------------------------------------------------------------------------- /public/img/travel.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lite/op-talk-games/master/public/img/travel.jpg -------------------------------------------------------------------------------- /public/img/yebob.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lite/op-talk-games/master/public/img/yebob.jpg -------------------------------------------------------------------------------- /public/img/cs-italy.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lite/op-talk-games/master/public/img/cs-italy.jpg -------------------------------------------------------------------------------- /public/img/diablo2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lite/op-talk-games/master/public/img/diablo2.jpg -------------------------------------------------------------------------------- /public/img/football.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lite/op-talk-games/master/public/img/football.jpg -------------------------------------------------------------------------------- /public/img/lego-nxt.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lite/op-talk-games/master/public/img/lego-nxt.jpg -------------------------------------------------------------------------------- /public/img/majiang.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lite/op-talk-games/master/public/img/majiang.jpg -------------------------------------------------------------------------------- /public/img/monopoly.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lite/op-talk-games/master/public/img/monopoly.jpg -------------------------------------------------------------------------------- /public/img/scratch.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lite/op-talk-games/master/public/img/scratch.jpg -------------------------------------------------------------------------------- /public/img/warcraft.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lite/op-talk-games/master/public/img/warcraft.jpg -------------------------------------------------------------------------------- /public/img/wcg-dota.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lite/op-talk-games/master/public/img/wcg-dota.jpg -------------------------------------------------------------------------------- /public/img/wcg2011.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lite/op-talk-games/master/public/img/wcg2011.jpg -------------------------------------------------------------------------------- /public/img/xianjian.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lite/op-talk-games/master/public/img/xianjian.jpg -------------------------------------------------------------------------------- /public/img/angry-birds.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lite/op-talk-games/master/public/img/angry-birds.jpg -------------------------------------------------------------------------------- /public/img/cargo-bot.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lite/op-talk-games/master/public/img/cargo-bot.jpg -------------------------------------------------------------------------------- /public/img/concept-art.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lite/op-talk-games/master/public/img/concept-art.jpg -------------------------------------------------------------------------------- /public/img/crossword.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lite/op-talk-games/master/public/img/crossword.jpg -------------------------------------------------------------------------------- /public/img/cs-guitar.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lite/op-talk-games/master/public/img/cs-guitar.jpg -------------------------------------------------------------------------------- /public/img/game-over.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lite/op-talk-games/master/public/img/game-over.jpg -------------------------------------------------------------------------------- /public/img/lego-land.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lite/op-talk-games/master/public/img/lego-land.jpg -------------------------------------------------------------------------------- /public/img/magic-cube.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lite/op-talk-games/master/public/img/magic-cube.jpg -------------------------------------------------------------------------------- /public/img/mud-trigger.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lite/op-talk-games/master/public/img/mud-trigger.jpg -------------------------------------------------------------------------------- /public/img/openparty.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lite/op-talk-games/master/public/img/openparty.jpg -------------------------------------------------------------------------------- /public/img/play-again.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lite/op-talk-games/master/public/img/play-again.jpg -------------------------------------------------------------------------------- /public/img/sanguosha.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lite/op-talk-games/master/public/img/sanguosha.jpg -------------------------------------------------------------------------------- /public/img/spiderman.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lite/op-talk-games/master/public/img/spiderman.jpg -------------------------------------------------------------------------------- /public/img/starcraft.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lite/op-talk-games/master/public/img/starcraft.jpg -------------------------------------------------------------------------------- /public/img/super-mario.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lite/op-talk-games/master/public/img/super-mario.jpg -------------------------------------------------------------------------------- /public/img/team-work.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lite/op-talk-games/master/public/img/team-work.jpg -------------------------------------------------------------------------------- /public/img/tic-tac-toe.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lite/op-talk-games/master/public/img/tic-tac-toe.jpg -------------------------------------------------------------------------------- /public/img/tomb-raider.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lite/op-talk-games/master/public/img/tomb-raider.jpg -------------------------------------------------------------------------------- /public/img/wcg-player.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lite/op-talk-games/master/public/img/wcg-player.jpg -------------------------------------------------------------------------------- /public/img/Space Travel.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lite/op-talk-games/master/public/img/Space Travel.jpg -------------------------------------------------------------------------------- /public/img/chinese-chess.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lite/op-talk-games/master/public/img/chinese-chess.jpg -------------------------------------------------------------------------------- /public/img/cut-the-rope.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lite/op-talk-games/master/public/img/cut-the-rope.jpg -------------------------------------------------------------------------------- /public/img/john-carmack.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lite/op-talk-games/master/public/img/john-carmack.jpg -------------------------------------------------------------------------------- /public/img/king-of-kings.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lite/op-talk-games/master/public/img/king-of-kings.jpg -------------------------------------------------------------------------------- /public/img/question-play.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lite/op-talk-games/master/public/img/question-play.jpg -------------------------------------------------------------------------------- /public/img/resident-evil.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lite/op-talk-games/master/public/img/resident-evil.jpg -------------------------------------------------------------------------------- /public/img/rock-climbing.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lite/op-talk-games/master/public/img/rock-climbing.jpg -------------------------------------------------------------------------------- /public/img/what-is-game.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lite/op-talk-games/master/public/img/what-is-game.jpg -------------------------------------------------------------------------------- /public/img/wowwiki-maps.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lite/op-talk-games/master/public/img/wowwiki-maps.jpg -------------------------------------------------------------------------------- /public/img/Russell-Spacewar.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lite/op-talk-games/master/public/img/Russell-Spacewar.jpg -------------------------------------------------------------------------------- /public/img/age-of-empires.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lite/op-talk-games/master/public/img/age-of-empires.jpg -------------------------------------------------------------------------------- /public/img/cosplay-diablo3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lite/op-talk-games/master/public/img/cosplay-diablo3.jpg -------------------------------------------------------------------------------- /public/img/counter-strike.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lite/op-talk-games/master/public/img/counter-strike.jpg -------------------------------------------------------------------------------- /public/img/game-is-culture.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lite/op-talk-games/master/public/img/game-is-culture.jpg -------------------------------------------------------------------------------- /public/img/heros-jack-linus.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lite/op-talk-games/master/public/img/heros-jack-linus.jpg -------------------------------------------------------------------------------- /public/img/impressjs-source.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lite/op-talk-games/master/public/img/impressjs-source.jpg -------------------------------------------------------------------------------- /public/img/my-other-games.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lite/op-talk-games/master/public/img/my-other-games.jpg -------------------------------------------------------------------------------- /public/img/need-for-speed.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lite/op-talk-games/master/public/img/need-for-speed.jpg -------------------------------------------------------------------------------- /public/img/nolan_bushnell.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lite/op-talk-games/master/public/img/nolan_bushnell.jpg -------------------------------------------------------------------------------- /public/img/player-or-coder.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lite/op-talk-games/master/public/img/player-or-coder.jpg -------------------------------------------------------------------------------- /public/img/social-learn-lab.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lite/op-talk-games/master/public/img/social-learn-lab.jpg -------------------------------------------------------------------------------- /public/img/street-fighter.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lite/op-talk-games/master/public/img/street-fighter.jpg -------------------------------------------------------------------------------- /public/img/sunshine-library.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lite/op-talk-games/master/public/img/sunshine-library.jpg -------------------------------------------------------------------------------- /public/img/video-game-live.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lite/op-talk-games/master/public/img/video-game-live.jpg -------------------------------------------------------------------------------- /public/img/plants-vs-zombies.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lite/op-talk-games/master/public/img/plants-vs-zombies.jpg -------------------------------------------------------------------------------- /public/img/where-is-my-water.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lite/op-talk-games/master/public/img/where-is-my-water.jpg -------------------------------------------------------------------------------- /public/img/cosplay-tomb-raider.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lite/op-talk-games/master/public/img/cosplay-tomb-raider.jpg -------------------------------------------------------------------------------- /public/img/angry_birds_music_landon.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lite/op-talk-games/master/public/img/angry_birds_music_landon.jpg -------------------------------------------------------------------------------- /public/img/jobs-and-wozniak-breakout.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lite/op-talk-games/master/public/img/jobs-and-wozniak-breakout.jpg -------------------------------------------------------------------------------- /public/img/JohnMcCarthy-Computer-Chess.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lite/op-talk-games/master/public/img/JohnMcCarthy-Computer-Chess.jpg -------------------------------------------------------------------------------- /public/img/Ken-Thompson-and-Dennis-Ritchie-unix.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lite/op-talk-games/master/public/img/Ken-Thompson-and-Dennis-Ritchie-unix.jpg -------------------------------------------------------------------------------- /config.ru: -------------------------------------------------------------------------------- 1 | use Rack::Static, 2 | :urls => ["/css", "/img", "/js"], 3 | :root => "public" 4 | 5 | run lambda { |env| 6 | [ 7 | 200, 8 | { 9 | 'Content-Type' => 'text/html', 10 | 'Cache-Control' => 'public, max-age=86400' 11 | }, 12 | File.open('public/index.html', File::RDONLY) 13 | ] 14 | } -------------------------------------------------------------------------------- /public/css/font.css: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family: 'PT Serif'; 3 | font-style: normal; 4 | font-weight: normal; 5 | src: local('PT Serif'), local('PTSerif-Regular'), url('http://themes.googleusercontent.com/static/fonts/ptserif/v4/sDRi4fY9bOiJUbgq53yZCfesZW2xOQ-xsNqO47m55DA.woff') format('woff'); 6 | } 7 | @font-face { 8 | font-family: 'PT Sans'; 9 | font-style: normal; 10 | font-weight: bold; 11 | src: local('PT Sans Bold'), local('PTSans-Bold'), url('http://themes.googleusercontent.com/static/fonts/ptsans/v4/0XxGQsSc1g4rdRdjJKZrNBsxEYwM7FgeyaSgU71cLG0.woff') format('woff'); 12 | } 13 | @font-face { 14 | font-family: 'PT Serif'; 15 | font-style: normal; 16 | font-weight: bold; 17 | src: local('PT Serif Bold'), local('PTSerif-Bold'), url('http://themes.googleusercontent.com/static/fonts/ptserif/v4/QABk9IxT-LFTJ_dQzv7xpIbN6UDyHWBl620a-IRfuBk.woff') format('woff'); 18 | } 19 | @font-face { 20 | font-family: 'PT Serif'; 21 | font-style: italic; 22 | font-weight: bold; 23 | src: local('PT Serif Bold Italic'), local('PTSerif-BoldItalic'), url('http://themes.googleusercontent.com/static/fonts/ptserif/v4/Foydq9xJp--nfYIx2TBz9QFhaRv2pGgT5Kf0An0s4MM.woff') format('woff'); 24 | } 25 | @font-face { 26 | font-family: 'PT Serif'; 27 | font-style: italic; 28 | font-weight: normal; 29 | src: local('PT Serif Italic'), local('PTSerif-Italic'), url('http://themes.googleusercontent.com/static/fonts/ptserif/v4/03aPdn7fFF3H6ngCgAlQzBsxEYwM7FgeyaSgU71cLG0.woff') format('woff'); 30 | } 31 | @font-face { 32 | font-family: 'PT Sans'; 33 | font-style: italic; 34 | font-weight: normal; 35 | src: local('PT Sans Italic'), local('PTSans-Italic'), url('http://themes.googleusercontent.com/static/fonts/ptsans/v4/PIPMHY90P7jtyjpXuZ2cLD8E0i7KZn-EPnyo3HZu7kw.woff') format('woff'); 36 | } 37 | @font-face { 38 | font-family: 'Open Sans'; 39 | font-style: normal; 40 | font-weight: 400; 41 | src: local('Open Sans'), local('OpenSans'), url('http://themes.googleusercontent.com/static/fonts/opensans/v6/cJZKeOuBrn4kERxqtaUH3T8E0i7KZn-EPnyo3HZu7kw.woff') format('woff'); 42 | } 43 | @font-face { 44 | font-family: 'Open Sans'; 45 | font-style: italic; 46 | font-weight: 600; 47 | src: local('Open Sans Semibold Italic'), local('OpenSans-SemiboldItalic'), url('http://themes.googleusercontent.com/static/fonts/opensans/v6/PRmiXeptR36kaC0GEAetxn5HxGBcBvicCpTp6spHfNo.woff') format('woff'); 48 | } 49 | @font-face { 50 | font-family: 'PT Sans'; 51 | font-style: italic; 52 | font-weight: bold; 53 | src: local('PT Sans Bold Italic'), local('PTSans-BoldItalic'), url('http://themes.googleusercontent.com/static/fonts/ptsans/v4/lILlYDvubYemzYzN7GbLkHhCUOGz7vYGh680lGh-uXM.woff') format('woff'); 54 | } 55 | @font-face { 56 | font-family: 'PT Sans'; 57 | font-style: normal; 58 | font-weight: normal; 59 | src: local('PT Sans'), local('PTSans-Regular'), url('http://themes.googleusercontent.com/static/fonts/ptsans/v4/LKf8nhXsWg5ybwEGXk8UBQ.woff') format('woff'); 60 | } 61 | @font-face { 62 | font-family: 'Open Sans'; 63 | font-style: normal; 64 | font-weight: 600; 65 | src: local('Open Sans Semibold'), local('OpenSans-Semibold'), url('http://themes.googleusercontent.com/static/fonts/opensans/v6/MTP_ySUJH_bn48VBG8sNSnhCUOGz7vYGh680lGh-uXM.woff') format('woff'); 66 | } 67 | @font-face { 68 | font-family: 'Open Sans'; 69 | font-style: italic; 70 | font-weight: 400; 71 | src: local('Open Sans Italic'), local('OpenSans-Italic'), url('http://themes.googleusercontent.com/static/fonts/opensans/v6/xjAJXh38I15wypJXxuGMBobN6UDyHWBl620a-IRfuBk.woff') format('woff'); 72 | } -------------------------------------------------------------------------------- /public/js/impress.js: -------------------------------------------------------------------------------- 1 | /** 2 | * impress.js 3 | * 4 | * impress.js is a presentation tool based on the power of CSS3 transforms and transitions 5 | * in modern browsers and inspired by the idea behind prezi.com. 6 | * 7 | * MIT Licensed. 8 | * 9 | * Copyright 2011 Bartek Szopka (@bartaz) 10 | * 11 | * Version slightly modified for the sake of this presentation ;) 12 | * 13 | * For original check: http://bartaz.github.com/impress.js/ 14 | */ 15 | 16 | (function ( document, window ) { 17 | 18 | // HELPER FUNCTIONS 19 | 20 | var pfx = (function () { 21 | 22 | var style = document.createElement('dummy').style, 23 | prefixes = 'Webkit Moz O ms Khtml'.split(' '), 24 | memory = {}; 25 | 26 | return function ( prop ) { 27 | if ( typeof memory[ prop ] === "undefined" ) { 28 | 29 | var ucProp = prop.charAt(0).toUpperCase() + prop.substr(1), 30 | props = (prop + ' ' + prefixes.join(ucProp + ' ') + ucProp).split(' '); 31 | 32 | memory[ prop ] = null; 33 | for ( var i in props ) { 34 | if ( style[ props[i] ] !== undefined ) { 35 | memory[ prop ] = props[i]; 36 | break; 37 | } 38 | } 39 | 40 | } 41 | 42 | return memory[ prop ]; 43 | } 44 | 45 | })(); 46 | 47 | var arrayify = function ( a ) { 48 | return [].slice.call( a ); 49 | }; 50 | 51 | var css = function ( el, props ) { 52 | var key, pkey; 53 | for ( key in props ) { 54 | if ( props.hasOwnProperty(key) ) { 55 | pkey = pfx(key); 56 | if ( pkey != null ) { 57 | el.style[pkey] = props[key]; 58 | } 59 | } 60 | } 61 | return el; 62 | } 63 | 64 | var byId = function ( id ) { 65 | return document.getElementById(id); 66 | } 67 | 68 | var $ = function ( selector, context ) { 69 | context = context || document; 70 | return context.querySelector(selector); 71 | }; 72 | 73 | var $$ = function ( selector, context ) { 74 | context = context || document; 75 | return arrayify( context.querySelectorAll(selector) ); 76 | }; 77 | 78 | var translate = function ( t ) { 79 | return " translate3d(" + t.x + "px," + t.y + "px," + t.z + "px) "; 80 | }; 81 | 82 | var rotate = function ( r, revert ) { 83 | var rX = " rotateX(" + r.x + "deg) ", 84 | rY = " rotateY(" + r.y + "deg) ", 85 | rZ = " rotateZ(" + r.z + "deg) "; 86 | 87 | return revert ? rZ+rY+rX : rX+rY+rZ; 88 | }; 89 | 90 | var scale = function ( s ) { 91 | return " scale(" + s + ") "; 92 | } 93 | 94 | // CHECK SUPPORT 95 | 96 | var ua = navigator.userAgent.toLowerCase(); 97 | var impressSupported = ( pfx("perspective") != null ) && 98 | ( ua.search(/(iphone)|(ipod)|(ipad)|(android)/) == -1 ); 99 | 100 | // DOM ELEMENTS 101 | 102 | var impress = byId("impress"); 103 | 104 | if (!impressSupported) { 105 | impress.className = "impress-not-supported"; 106 | document.documentElement.className += " impress-not-supported "; 107 | return; 108 | } else { 109 | impress.className = ""; 110 | } 111 | 112 | var canvas = document.createElement("div"); 113 | canvas.className = "canvas"; 114 | 115 | arrayify( impress.childNodes ).forEach(function ( el ) { 116 | canvas.appendChild( el ); 117 | }); 118 | impress.appendChild(canvas); 119 | 120 | var steps = $$(".step", impress); 121 | 122 | // SETUP 123 | // set initial values and defaults 124 | 125 | document.documentElement.style.height = "100%"; 126 | 127 | css(document.body, { 128 | height: "100%", 129 | overflow: "hidden" 130 | }); 131 | 132 | var props = { 133 | position: "absolute", 134 | transformOrigin: "top left", 135 | transition: "all 1s ease-in-out", 136 | transformStyle: "preserve-3d" 137 | } 138 | 139 | css(impress, props); 140 | css(impress, { 141 | top: "50%", 142 | left: "50%", 143 | perspective: "0px" // 2d 144 | }); 145 | css(canvas, props); 146 | 147 | var current = { 148 | translate: { x: 0, y: 0, z: 0 }, 149 | rotate: { x: 0, y: 0, z: 0 }, 150 | scale: 1 151 | }; 152 | 153 | steps.forEach(function ( el, idx ) { 154 | var data = el.dataset, 155 | step = { 156 | translate: { 157 | x: data.x || 0, 158 | y: data.y || 0, 159 | z: data.z || 0 160 | }, 161 | rotate: { 162 | x: data.rotateX || 0, 163 | y: data.rotateY || 0, 164 | z: data.rotateZ || data.rotate || 0 165 | }, 166 | scale: data.scale || 1 167 | }; 168 | 169 | el.stepData = step; 170 | 171 | if ( !el.id ) { 172 | el.id = "step-" + (idx + 1); 173 | } 174 | 175 | css(el, { 176 | position: "absolute", 177 | transform: "translate(-50%,-50%)" + 178 | translate(step.translate) + 179 | rotate(step.rotate) + 180 | scale(step.scale)//, 181 | // transformStyle: "preserve-3d" 2d 182 | }); 183 | 184 | }); 185 | 186 | // making given step active 187 | 188 | var active = null; 189 | var hashTimeout = null; 190 | 191 | var select = function ( el ) { 192 | if ( !el || !el.stepData || el == active) { 193 | // selected element is not defined as step or is already active 194 | return false; 195 | } 196 | 197 | // Sometimes it's possible to trigger focus on first link with some keyboard action. 198 | // Browser in such a case tries to scroll the page to make this element visible 199 | // (even that body overflow is set to hidden) and it breaks our careful positioning. 200 | // 201 | // So, as a lousy (and lazy) workaround we will make the page scroll back to the top 202 | // whenever slide is selected 203 | // 204 | // If you are reading this and know any better way to handle it, I'll be glad to hear about it! 205 | window.scrollTo(0, 0); 206 | 207 | var step = el.stepData; 208 | 209 | if ( active ) { 210 | active.classList.remove("active"); 211 | } 212 | el.classList.add("active"); 213 | 214 | impress.className = "step-" + el.id; 215 | 216 | // `#/step-id` is used instead of `#step-id` to prevent default browser 217 | // scrolling to element in hash 218 | // 219 | // and it has to be set after animation finishes, because in chrome it 220 | // causes transtion being laggy 221 | window.clearTimeout( hashTimeout ); 222 | hashTimeout = window.setTimeout(function () { 223 | window.location.hash = "#/" + el.id; 224 | }, 1000); 225 | 226 | var target = { 227 | rotate: { 228 | x: -parseInt(step.rotate.x, 10), 229 | y: -parseInt(step.rotate.y, 10), 230 | z: -parseInt(step.rotate.z, 10) 231 | }, 232 | translate: { 233 | x: -step.translate.x, 234 | y: -step.translate.y, 235 | z: -step.translate.z 236 | }, 237 | scale: 1 / parseFloat(step.scale) 238 | }; 239 | 240 | var zoomin = target.scale >= current.scale; 241 | 242 | css(impress, { 243 | // to keep the perspective look similar for different scales 244 | // we need to 'scale' the perspective, too 245 | // perspective: step.scale * 1000 + "px", 2d 246 | transform: scale(target.scale), 247 | transitionDelay: (zoomin ? "500ms" : "0ms") 248 | }); 249 | 250 | css(canvas, { 251 | transform: rotate(target.rotate, true) + translate(target.translate), 252 | transitionDelay: (zoomin ? "0ms" : "500ms") 253 | }); 254 | 255 | current = target; 256 | active = el; 257 | 258 | return el; 259 | } 260 | 261 | // EVENTS 262 | 263 | document.addEventListener("keydown", function ( event ) { 264 | if ( event.keyCode == 9 || ( event.keyCode >= 32 && event.keyCode <= 34 ) || (event.keyCode >= 37 && event.keyCode <= 40) ) { 265 | var next = active; 266 | switch( event.keyCode ) { 267 | case 33: ; // pg up 268 | case 37: ; // left 269 | case 38: // up 270 | next = steps.indexOf( active ) - 1; 271 | next = next >= 0 ? steps[ next ] : steps[ steps.length-1 ]; 272 | break; 273 | case 9: ; // tab 274 | case 32: ; // space 275 | case 34: ; // pg down 276 | case 39: ; // right 277 | case 40: // down 278 | next = steps.indexOf( active ) + 1; 279 | next = next < steps.length ? steps[ next ] : steps[ 0 ]; 280 | break; 281 | } 282 | 283 | select(next); 284 | 285 | event.preventDefault(); 286 | } 287 | }, false); 288 | 289 | document.addEventListener("click", function ( event ) { 290 | // event delegation with "bubbling" 291 | // check if event target (or any of its parents is a link or a step) 292 | var target = event.target; 293 | while ( (target.tagName != "A") && 294 | (!target.stepData) && 295 | (target != document.body) ) { 296 | target = target.parentNode; 297 | } 298 | 299 | if ( target.tagName == "A" ) { 300 | var href = target.getAttribute("href"); 301 | 302 | // if it's a link to presentation step, target this step 303 | if ( href && href[0] == '#' ) { 304 | target = byId( href.slice(1) ); 305 | } 306 | } 307 | 308 | if ( select(target) ) { 309 | event.preventDefault(); 310 | } 311 | }, false); 312 | 313 | var getElementFromUrl = function () { 314 | // get id from url # by removing `#` or `#/` from the beginning, 315 | // so both "fallback" `#slide-id` and "enhanced" `#/slide-id` will work 316 | return byId( window.location.hash.replace(/^#\/?/,"") ); 317 | } 318 | 319 | window.addEventListener("hashchange", function () { 320 | select( getElementFromUrl() ); 321 | }, false); 322 | 323 | // START 324 | // by selecting step defined in url or first step of the presentation 325 | select(getElementFromUrl() || steps[0]); 326 | 327 | })(document, window); 328 | 329 | -------------------------------------------------------------------------------- /public/css/style.css: -------------------------------------------------------------------------------- 1 | /* 2 | So you like the style of impress.js demo? 3 | Or maybe you are just curious how it was done? 4 | 5 | You couldn't find a better place to find out! 6 | 7 | Welcome to the stylesheet impress.js demo presentation. 8 | 9 | Please remember that it is not meant to be a part of impress.js and is 10 | not required by impress.js. 11 | I expect that anyone creating a presentation for impress.js would create 12 | their own set of styles. 13 | 14 | But feel free to read through it and learn how to get the most of what 15 | impress.js provides. 16 | 17 | And let me be your guide. 18 | 19 | Shall we begin? 20 | */ 21 | 22 | 23 | /* 24 | We start with a good ol' reset. 25 | That's the one by Eric Meyer http://meyerweb.com/eric/tools/css/reset/ 26 | 27 | You can probably argue if it is needed here, or not, but for sure it 28 | doesn't do any harm and gives us a fresh start. 29 | */ 30 | 31 | html, body, div, span, applet, object, iframe, 32 | h1, h2, h3, h4, h5, h6, p, blockquote, pre, 33 | a, abbr, acronym, address, big, cite, code, 34 | del, dfn, em, img, ins, kbd, q, s, samp, 35 | small, strike, strong, sub, sup, tt, var, 36 | b, u, i, center, 37 | dl, dt, dd, ol, ul, li, 38 | fieldset, form, label, legend, 39 | table, caption, tbody, tfoot, thead, tr, th, td, 40 | article, aside, canvas, details, embed, 41 | figure, figcaption, footer, header, hgroup, 42 | menu, nav, output, ruby, section, summary, 43 | time, mark, audio, video { 44 | margin: 0; 45 | padding: 0; 46 | border: 0; 47 | font-size: 100%; 48 | font: inherit; 49 | vertical-align: baseline; 50 | } 51 | 52 | /* HTML5 display-role reset for older browsers */ 53 | article, aside, details, figcaption, figure, 54 | footer, header, hgroup, menu, nav, section { 55 | display: block; 56 | } 57 | body { 58 | line-height: 1; 59 | } 60 | ol, ul { 61 | list-style: none; 62 | } 63 | blockquote, q { 64 | quotes: none; 65 | } 66 | blockquote:before, blockquote:after, 67 | q:before, q:after { 68 | content: ''; 69 | content: none; 70 | } 71 | 72 | table { 73 | border-collapse: collapse; 74 | border-spacing: 0; 75 | } 76 | 77 | /* 78 | Now here is when interesting things start to appear. 79 | 80 | We set up styles with default font and nice gradient in the background. 81 | And yes, there is a lot of repetition there because of -prefixes but we don't 82 | want to leave anybody behind. 83 | */ 84 | body { 85 | font-family: 'PT Sans', sans-serif; 86 | min-height: 740px; 87 | 88 | background: rgb(215, 215, 215); 89 | background: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 500, from(rgb(240, 240, 240)), to(rgb(190, 190, 190))); 90 | background: -webkit-radial-gradient(rgb(240, 240, 240), rgb(190, 190, 190)); 91 | background: -moz-radial-gradient(rgb(240, 240, 240), rgb(190, 190, 190)); 92 | background: -ms-radial-gradient(rgb(240, 240, 240), rgb(190, 190, 190)); 93 | background: -o-radial-gradient(rgb(240, 240, 240), rgb(190, 190, 190)); 94 | background: radial-gradient(rgb(240, 240, 240), rgb(190, 190, 190)); 95 | } 96 | 97 | /* 98 | Now let's bring some text styles back ... 99 | */ 100 | b, strong { font-weight: bold } 101 | i, em { font-style: italic } 102 | 103 | /* 104 | ... and give links a nice look. 105 | */ 106 | a { 107 | color: inherit; 108 | text-decoration: none; 109 | padding: 0 0.1em; 110 | background: rgba(255,255,255,0.5); 111 | text-shadow: -1px -1px 2px rgba(100,100,100,0.9); 112 | border-radius: 0.2em; 113 | 114 | -webkit-transition: 0.5s; 115 | -moz-transition: 0.5s; 116 | -ms-transition: 0.5s; 117 | -o-transition: 0.5s; 118 | transition: 0.5s; 119 | } 120 | 121 | a:hover, 122 | a:focus { 123 | background: rgba(255,255,255,1); 124 | text-shadow: -1px -1px 2px rgba(100,100,100,0.5); 125 | } 126 | 127 | /* 128 | Because the main point behind the impress.js demo is to demo impress.js 129 | we display a fallback message for users with browsers that don't support 130 | all the features required by it. 131 | 132 | All of the content will be still fully accessible for them, but I want 133 | them to know that they are missing something - that's what the demo is 134 | about, isn't it? 135 | 136 | And then we hide the message, when support is detected in the browser. 137 | */ 138 | 139 | .fallback-message { 140 | font-family: sans-serif; 141 | line-height: 1.3; 142 | 143 | width: 780px; 144 | padding: 10px 10px 0; 145 | margin: 20px auto; 146 | 147 | border: 1px solid #E4C652; 148 | border-radius: 10px; 149 | background: #EEDC94; 150 | } 151 | 152 | .fallback-message p { 153 | margin-bottom: 10px; 154 | } 155 | 156 | .impress-supported .fallback-message { 157 | display: none; 158 | } 159 | 160 | /* 161 | Now let's style the presentation steps. 162 | 163 | We start with basics to make sure it displays correctly in everywhere ... 164 | */ 165 | 166 | .step { 167 | position: relative; 168 | width: 1000px; 169 | padding: 40px; 170 | margin: 20px auto; 171 | 172 | -webkit-box-sizing: border-box; 173 | -moz-box-sizing: border-box; 174 | -ms-box-sizing: border-box; 175 | -o-box-sizing: border-box; 176 | box-sizing: border-box; 177 | 178 | font-family: 'PT Serif', georgia, serif; 179 | font-size: 48px; 180 | line-height: 1.5; 181 | } 182 | 183 | /* 184 | ... and we enhance the styles for impress.js. 185 | 186 | Basically we remove the margin and make inactive steps a little bit transparent. 187 | */ 188 | .impress-enabled .step { 189 | margin: 0; 190 | opacity: 0.3; 191 | 192 | -webkit-transition: opacity 1s; 193 | -moz-transition: opacity 1s; 194 | -ms-transition: opacity 1s; 195 | -o-transition: opacity 1s; 196 | transition: opacity 1s; 197 | } 198 | 199 | .impress-enabled .step.active { opacity: 1 } 200 | 201 | /* 202 | These 'slide' step styles were heavily inspired by HTML5 Slides: 203 | http://html5slides.googlecode.com/svn/trunk/styles.css 204 | 205 | ;) 206 | 207 | They cover everything what you see on first three steps of the demo. 208 | */ 209 | .slide { 210 | display: block; 211 | 212 | width: 1000px; 213 | /*height: 700px;*/ 214 | /*padding: 40px 60px;*/ 215 | 216 | background-color: white; 217 | /*background: rgba(0,0,0,0.5);*/ 218 | border: 1px solid rgba(0, 0, 0, .3); 219 | border-radius: 10px; 220 | box-shadow: 0 2px 6px rgba(0, 0, 0, .1); 221 | 222 | color: rgb(102, 102, 102); 223 | text-shadow: 0 2px 2px rgba(0, 0, 0, .1); 224 | 225 | font-family: 'Open Sans', Arial, sans-serif; 226 | font-size: 30px; 227 | line-height: 36px; 228 | letter-spacing: -1px; 229 | } 230 | 231 | /* 232 | And now we start to style each step separately. 233 | 234 | I agree that this may be not the most efficient, object-oriented and 235 | scalable way of styling, but most of steps have quite a custom look 236 | and typography tricks here and there, so they had to be styles separately. 237 | 238 | First is the title step with a big

(no room for padding) and some 239 | 3D positioning along Z axis. 240 | */ 241 | 242 | #thanks { 243 | position: absolute; 244 | top: 0em; 245 | left: 0em; 246 | 247 | -webkit-transform: translateZ(20px); 248 | -moz-transform: translateZ(20px); 249 | -ms-transform: translateZ(20px); 250 | -o-transform: translateZ(20px); 251 | transform: translateZ(20px); 252 | } 253 | 254 | #thanks h1 { 255 | font-size: 90px; 256 | 257 | -webkit-transform: translateZ(50px); 258 | -moz-transform: translateZ(50px); 259 | -ms-transform: translateZ(50px); 260 | -o-transform: translateZ(50px); 261 | transform: translateZ(50px); 262 | } 263 | 264 | /* 265 | And the "it's in 3D" step again brings some 3D typography - just for fun. 266 | 267 | Because we want to position elements in 3D we set transform-style to 268 | `preserve-3d` on the paragraph. 269 | It is not needed by webkit browsers, but it is in Firefox. It's hard to say 270 | which behaviour is correct as 3D transforms spec is not very clear about it. 271 | */ 272 | #thanks p { 273 | font-size: 30px; 274 | 275 | -webkit-transform-style: preserve-3d; 276 | -moz-transform-style: preserve-3d; /* Y U need this Firefox?! */ 277 | -ms-transform-style: preserve-3d; 278 | -o-transform-style: preserve-3d; 279 | transform-style: preserve-3d; 280 | } 281 | 282 | 283 | /* 284 | The last step is an overview. 285 | There is no content in it, so we make sure it's not visible because we want 286 | to be able to click on other steps. 287 | 288 | */ 289 | #overview { display: none } 290 | 291 | /* 292 | We also make other steps visible and give them a pointer cursor using the 293 | `impress-on-` class. 294 | */ 295 | .impress-on-overview .step { 296 | opacity: 1; 297 | cursor: pointer; 298 | } 299 | 300 | 301 | /* 302 | Now, when we have all the steps styled let's give users a hint how to navigate 303 | around the presentation. 304 | 305 | The best way to do this would be to use JavaScript, show a delayed hint for a 306 | first time users, then hide it and store a status in cookie or localStorage... 307 | 308 | But I wanted to have some CSS fun and avoid additional scripting... 309 | 310 | Let me explain it first, so maybe the transition magic will be more readable 311 | when you read the code. 312 | 313 | First of all I wanted the hint to appear only when user is idle for a while. 314 | You can't detect the 'idle' state in CSS, but I delayed a appearing of the 315 | hint by 5s using transition-delay. 316 | 317 | You also can't detect in CSS if the user is a first-time visitor, so I had to 318 | make an assumption that I'll only show the hint on the first step. And when 319 | the step is changed hide the hint, because I can assume that user already 320 | knows how to navigate. 321 | 322 | To summarize it - hint is shown when the user is on the first step for longer 323 | than 5 seconds. 324 | 325 | The other problem I had was caused by the fact that I wanted the hint to fade 326 | in and out. It can be easily achieved by transitioning the opacity property. 327 | But that also meant that the hint was always on the screen, even if totally 328 | transparent. It covered part of the screen and you couldn't correctly clicked 329 | through it. 330 | Unfortunately you cannot transition between display `block` and `none` in pure 331 | CSS, so I needed a way to not only fade out the hint but also move it out of 332 | the screen. 333 | 334 | I solved this problem by positioning the hint below the bottom of the screen 335 | with CSS transform and moving it up to show it. But I also didn't want this move 336 | to be visible. I wanted the hint only to fade in and out visually, so I delayed 337 | the fade in transition, so it starts when the hint is already in its correct 338 | position on the screen. 339 | 340 | I know, it sounds complicated ... maybe it would be easier with the code? 341 | */ 342 | 343 | .hint { 344 | /* 345 | We hide the hint until presentation is started and from browsers not supporting 346 | impress.js, as they will have a linear scrollable view ... 347 | */ 348 | display: none; 349 | 350 | /* 351 | ... and give it some fixed position and nice styles. 352 | */ 353 | position: fixed; 354 | left: 0; 355 | right: 0; 356 | bottom: 200px; 357 | 358 | background: rgba(0,0,0,0.5); 359 | color: #EEE; 360 | text-align: center; 361 | 362 | font-size: 50px; 363 | padding: 20px; 364 | 365 | z-index: 100; 366 | 367 | /* 368 | By default we don't want the hint to be visible, so we make it transparent ... 369 | */ 370 | opacity: 0; 371 | 372 | /* 373 | ... and position it below the bottom of the screen (relative to it's fixed position) 374 | */ 375 | -webkit-transform: translateY(400px); 376 | -moz-transform: translateY(400px); 377 | -ms-transform: translateY(400px); 378 | -o-transform: translateY(400px); 379 | transform: translateY(400px); 380 | 381 | /* 382 | Now let's imagine that the hint is visible and we want to fade it out and move out 383 | of the screen. 384 | 385 | So we define the transition on the opacity property with 1s duration and another 386 | transition on transform property delayed by 1s so it will happen after the fade out 387 | on opacity finished. 388 | 389 | This way user will not see the hint moving down. 390 | */ 391 | -webkit-transition: opacity 1s, -webkit-transform 0.5s 1s; 392 | -moz-transition: opacity 1s, -moz-transform 0.5s 1s; 393 | -ms-transition: opacity 1s, -ms-transform 0.5s 1s; 394 | -o-transition: opacity 1s, -o-transform 0.5s 1s; 395 | transition: opacity 1s, transform 0.5s 1s; 396 | } 397 | 398 | /* 399 | Now we 'enable' the hint when presentation is initialized ... 400 | */ 401 | .impress-enabled .hint { display: block } 402 | 403 | /* 404 | ... and we will show it when the first step (with id 'bored') is active. 405 | */ 406 | .impress-on-bored .hint { 407 | /* 408 | We remove the transparency and position the hint in its default fixed 409 | position. 410 | */ 411 | opacity: 1; 412 | 413 | -webkit-transform: translateY(0px); 414 | -moz-transform: translateY(0px); 415 | -ms-transform: translateY(0px); 416 | -o-transform: translateY(0px); 417 | transform: translateY(0px); 418 | 419 | /* 420 | Now for fade in transition we have the oposite situation from the one 421 | above. 422 | 423 | First after 4.5s delay we animate the transform property to move the hint 424 | into its correct position and after that we fade it in with opacity 425 | transition. 426 | */ 427 | -webkit-transition: opacity 1s 5s, -webkit-transform 0.5s 4.5s; 428 | -moz-transition: opacity 1s 5s, -moz-transform 0.5s 4.5s; 429 | -ms-transition: opacity 1s 5s, -ms-transform 0.5s 4.5s; 430 | -o-transition: opacity 1s 5s, -o-transform 0.5s 4.5s; 431 | transition: opacity 1s 5s, transform 0.5s 4.5s; 432 | } 433 | 434 | /* 435 | And as the last thing there is a workaround for quite strange bug. 436 | It happens a lot in Chrome. I don't remember if I've seen it in Firefox. 437 | 438 | Sometimes the element positioned in 3D (especially when it's moved back 439 | along Z axis) is not clickable, because it falls 'behind' the 440 | element. 441 | 442 | To prevent this, I decided to make non clickable by setting 443 | pointer-events property to `none` value. 444 | Value if this property is inherited, so to make everything else clickable 445 | I bring it back on the #impress element. 446 | 447 | If you want to know more about `pointer-events` here are some docs: 448 | https://developer.mozilla.org/en/CSS/pointer-events 449 | 450 | There is one very important thing to notice about this workaround - it makes 451 | everything 'unclickable' except what's in #impress element. 452 | 453 | So use it wisely ... or don't use at all. 454 | */ 455 | .impress-enabled { pointer-events: none } 456 | .impress-enabled #impress { pointer-events: auto } 457 | 458 | /* 459 | There is one funny thing I just realized. 460 | 461 | Thanks to this workaround above everything except #impress element is invisible 462 | for click events. That means that the hint element is also not clickable. 463 | So basically all of this transforms and delayed transitions trickery was probably 464 | not needed at all... 465 | 466 | But it was fun to learn about it, wasn't it? 467 | */ 468 | 469 | /* 470 | That's all I have for you in this file. 471 | Thanks for reading. I hope you enjoyed it at least as much as I enjoyed writing it 472 | for you. 473 | */ -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 46 | 47 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | Games @lite 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 |
82 | 83 | 84 |
85 | 86 |
87 | 88 | 89 |
90 | 91 |
92 | 93 |
94 | 95 |
96 | 97 |
98 | 99 |
100 | 101 |
102 | 103 |
104 | 105 |
106 | 107 |
108 | 109 |
110 | 111 |
112 | 113 |
114 | 115 |
116 | 117 |
118 | 119 |
120 | 121 |
122 | 123 |
124 | 125 |
126 | 127 |
128 | 129 |
130 | 131 |
132 | 133 |
134 | 135 |
136 | 137 | 138 |
139 | 140 |
141 | 142 | 143 |
144 | 145 | 146 | 147 | 148 |
149 | 150 |
151 | 152 | 153 | 154 | 155 |
156 | 157 |
158 | 159 | 160 |
161 | 162 |
163 | 164 | 165 |
166 | 167 | 168 |
169 | 170 | 171 | 172 | 173 |
174 | 175 |
176 | 177 | 178 | 179 | 180 |
181 | 182 |
183 | 184 | 185 | 186 | 187 |
188 | 189 | 190 | 191 |
192 | 193 |
194 | 195 | 196 |
197 | 198 |
199 | 200 |
201 | 202 |
203 | 204 |
205 | 206 |
207 | 208 |
209 | 210 |
211 | 212 |
213 | 214 |
215 | 216 |
217 | 218 |
219 | 220 |
221 | 222 |
223 | 224 | 225 |
226 | 227 |
228 | 229 |
230 | 231 |
232 | 233 |
234 | 235 |
236 | 237 |
238 | 239 | 240 |
241 | 242 |
243 | 244 | 245 |
246 | 247 |
248 | 249 |
250 | 251 |
252 | 253 |
254 | 255 |
256 | 257 |
258 | 259 | 260 |
261 | 262 |
263 | 264 |
265 | 266 |
267 | 268 |
269 | 270 |
271 | 272 |
273 | 274 |
275 | 276 |
277 | 278 | 279 |
280 | 281 |
282 | 283 |
284 | 285 |
286 | 287 |
288 | 289 |
290 | 291 | 292 | 293 | 294 |
295 | 296 | 297 |
298 | 299 |
300 | 301 |
302 | 303 |
304 | 305 |
306 | 307 | 308 | 309 | 310 | 311 |
312 | 313 |
314 | 315 | 316 | 317 |

Jane McGonigal: 318 | Gaming can make a better world 319 |

320 | 321 |

David Perry: 322 | Are games better than life? 323 |

324 | 325 |

Tom Chatfield: 326 | 7 ways games reward the brain 327 |

328 | 329 | © 2012 330 | Powered by impress.js 331 |
332 | 333 | 334 |
335 |
336 | 337 |
338 | 339 | 363 |
364 |

Use a spacebar or arrow keys to navigate

365 |
366 | 371 | 372 | 387 | 388 | 389 | 390 | 414 | 415 | 416 | 417 | 418 | 446 | 447 | 462 | 463 | --------------------------------------------------------------------------------