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"> ??? </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>