├── svg └── circle.svg ├── .htaccess ├── images ├── cat.png ├── logo.png ├── bg-bike.png ├── bg-form.png ├── bg-main.gif ├── dukes.gif ├── dukes.png ├── invalid.png ├── logo-sp.gif ├── logo-sp.png ├── poster.jpg ├── valid.png ├── bg-header.gif ├── required.png ├── thumbnail.jpg ├── bg-subhead.gif ├── bg-texture.png ├── bike_sprite.png ├── html5-logo.png ├── bg-formtitle-left.png ├── controls-sprite.png ├── ford-plane-still.png ├── bg-formtitle-right.png ├── computer-mouse-pic.png ├── circle.svg ├── rectangle.svg ├── button-gradient.svg ├── gradient.svg ├── outliner.0.5.0.62.html ├── computer-mouse-pic.svg ├── spinnerBW.svg ├── spinner.svg └── spinnerBWfromFilter.svg ├── jwplayer ├── yt.swf ├── video.mp4 ├── player.swf ├── preview.jpg ├── JW Player Embedding and JavaScript Guide.pdf ├── license.txt ├── readme.html └── swfobject.js ├── media ├── ford-plane-takes-off.mp4 └── ford-plane-takes-off.ogv ├── fonts ├── Acknowledgement-webfont.eot ├── Acknowledgement-webfont.ttf ├── League_Gothic-webfont.eot ├── League_Gothic-webfont.ttf ├── League_Gothic-webfont.woff ├── Acknowledgement-webfont.woff └── League_Gothic-webfont.svg ├── css ├── canvas.css ├── normalize.css └── style.css ├── README.txt ├── scss ├── _ad4.scss ├── _sub.scss ├── _authors.scss ├── style.scss ├── _nav.scss ├── _ad1.scss ├── _footer.scss ├── _media.scss ├── _print.scss ├── _page.scss ├── _columns.scss ├── _fonts.scss ├── _ad2.scss ├── _header.scss ├── _main.scss ├── _advertisements.scss ├── _ad3.scss ├── _ad3_anim.scss ├── _video.scss └── _forms.scss ├── offline.html ├── herald.appcache ├── herald.appcacheOLD ├── js ├── dragDrop.js ├── rememberMe.js ├── geolocation.js ├── videoToBW.js ├── canvas.js ├── videoControls.js ├── modernizr.min.js └── modernizr-1.7.min.js ├── canvas.html ├── register.html └── index.html /svg/circle.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /.htaccess: -------------------------------------------------------------------------------- 1 | AddType text/cache-manifest .manifest -------------------------------------------------------------------------------- /images/cat.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/htmlcss2/HEAD/images/cat.png -------------------------------------------------------------------------------- /images/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/htmlcss2/HEAD/images/logo.png -------------------------------------------------------------------------------- /jwplayer/yt.swf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/htmlcss2/HEAD/jwplayer/yt.swf -------------------------------------------------------------------------------- /images/bg-bike.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/htmlcss2/HEAD/images/bg-bike.png -------------------------------------------------------------------------------- /images/bg-form.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/htmlcss2/HEAD/images/bg-form.png -------------------------------------------------------------------------------- /images/bg-main.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/htmlcss2/HEAD/images/bg-main.gif -------------------------------------------------------------------------------- /images/dukes.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/htmlcss2/HEAD/images/dukes.gif -------------------------------------------------------------------------------- /images/dukes.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/htmlcss2/HEAD/images/dukes.png -------------------------------------------------------------------------------- /images/invalid.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/htmlcss2/HEAD/images/invalid.png -------------------------------------------------------------------------------- /images/logo-sp.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/htmlcss2/HEAD/images/logo-sp.gif -------------------------------------------------------------------------------- /images/logo-sp.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/htmlcss2/HEAD/images/logo-sp.png -------------------------------------------------------------------------------- /images/poster.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/htmlcss2/HEAD/images/poster.jpg -------------------------------------------------------------------------------- /images/valid.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/htmlcss2/HEAD/images/valid.png -------------------------------------------------------------------------------- /jwplayer/video.mp4: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/htmlcss2/HEAD/jwplayer/video.mp4 -------------------------------------------------------------------------------- /images/bg-header.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/htmlcss2/HEAD/images/bg-header.gif -------------------------------------------------------------------------------- /images/required.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/htmlcss2/HEAD/images/required.png -------------------------------------------------------------------------------- /images/thumbnail.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/htmlcss2/HEAD/images/thumbnail.jpg -------------------------------------------------------------------------------- /jwplayer/player.swf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/htmlcss2/HEAD/jwplayer/player.swf -------------------------------------------------------------------------------- /jwplayer/preview.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/htmlcss2/HEAD/jwplayer/preview.jpg -------------------------------------------------------------------------------- /images/bg-subhead.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/htmlcss2/HEAD/images/bg-subhead.gif -------------------------------------------------------------------------------- /images/bg-texture.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/htmlcss2/HEAD/images/bg-texture.png -------------------------------------------------------------------------------- /images/bike_sprite.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/htmlcss2/HEAD/images/bike_sprite.png -------------------------------------------------------------------------------- /images/html5-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/htmlcss2/HEAD/images/html5-logo.png -------------------------------------------------------------------------------- /images/bg-formtitle-left.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/htmlcss2/HEAD/images/bg-formtitle-left.png -------------------------------------------------------------------------------- /images/controls-sprite.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/htmlcss2/HEAD/images/controls-sprite.png -------------------------------------------------------------------------------- /images/ford-plane-still.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/htmlcss2/HEAD/images/ford-plane-still.png -------------------------------------------------------------------------------- /images/bg-formtitle-right.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/htmlcss2/HEAD/images/bg-formtitle-right.png -------------------------------------------------------------------------------- /images/computer-mouse-pic.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/htmlcss2/HEAD/images/computer-mouse-pic.png -------------------------------------------------------------------------------- /media/ford-plane-takes-off.mp4: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/htmlcss2/HEAD/media/ford-plane-takes-off.mp4 -------------------------------------------------------------------------------- /media/ford-plane-takes-off.ogv: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/htmlcss2/HEAD/media/ford-plane-takes-off.ogv -------------------------------------------------------------------------------- /fonts/Acknowledgement-webfont.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/htmlcss2/HEAD/fonts/Acknowledgement-webfont.eot -------------------------------------------------------------------------------- /fonts/Acknowledgement-webfont.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/htmlcss2/HEAD/fonts/Acknowledgement-webfont.ttf -------------------------------------------------------------------------------- /fonts/League_Gothic-webfont.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/htmlcss2/HEAD/fonts/League_Gothic-webfont.eot -------------------------------------------------------------------------------- /fonts/League_Gothic-webfont.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/htmlcss2/HEAD/fonts/League_Gothic-webfont.ttf -------------------------------------------------------------------------------- /fonts/League_Gothic-webfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/htmlcss2/HEAD/fonts/League_Gothic-webfont.woff -------------------------------------------------------------------------------- /fonts/Acknowledgement-webfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/htmlcss2/HEAD/fonts/Acknowledgement-webfont.woff -------------------------------------------------------------------------------- /images/circle.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /css/canvas.css: -------------------------------------------------------------------------------- 1 | #myCanvas 2 | { 3 | border-width: 2px; 4 | border-style: dotted; 5 | border-color: black; 6 | margin: 0 20px; 7 | } 8 | -------------------------------------------------------------------------------- /jwplayer/JW Player Embedding and JavaScript Guide.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/htmlcss2/HEAD/jwplayer/JW Player Embedding and JavaScript Guide.pdf -------------------------------------------------------------------------------- /README.txt: -------------------------------------------------------------------------------- 1 | A sample HTML5 and CSS3 website created for SitePoint's book "HTML5 and CSS3 for the Real World," by Alexis Goldstein, Louis Lazaris, and Estelle Weyl. 2 | -------------------------------------------------------------------------------- /scss/_ad4.scss: -------------------------------------------------------------------------------- 1 | .ad-ad4 { 2 | position: relative; 3 | .no-geolocation & { 4 | display: none; 5 | } 6 | h1 { 7 | font-size: 20px; 8 | font-family: AcknowledgementMedium; 9 | text-align: center; 10 | } 11 | } -------------------------------------------------------------------------------- /images/rectangle.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | Drawing a rectangle 4 | 5 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /jwplayer/license.txt: -------------------------------------------------------------------------------- 1 | This work is licensed under the Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported License. To view a copy of this license, visit http://creativecommons.org/licenses/by-nc-sa/3.0/ or send a letter to Creative Commons, 171 Second Street, Suite 300, San Francisco, California, 94105, USA. -------------------------------------------------------------------------------- /offline.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | You are offline! 6 | 7 | 8 | 9 |

Sorry, you are now offline!

10 | 11 | 12 | -------------------------------------------------------------------------------- /scss/_sub.scss: -------------------------------------------------------------------------------- 1 | 2 | .sub { 3 | padding: 0 0 10px 0; 4 | margin: 0 0 5px 0; 5 | background: transparent url(../images/bg-subhead.gif) no-repeat bottom center; 6 | h2 { 7 | font-size: 14px; 8 | text-transform: none; 9 | font-family: "Times New Roman", Times, serif; 10 | font-weight: bold; 11 | text-shadow: none; 12 | text-align: center; 13 | } 14 | } -------------------------------------------------------------------------------- /scss/_authors.scss: -------------------------------------------------------------------------------- 1 | #authors { 2 | padding-top: 10px; 3 | padding-right: 20px; 4 | background-color: #d1d1d1; 5 | border: solid 1px #888; 6 | border-width: 1px 0; 7 | overflow: hidden; 8 | display: flex; 9 | h1 { 10 | margin: 0; 11 | } 12 | section { 13 | padding: 0 0 0 20px; 14 | box-sizing: border-box; 15 | &:nth-of-type(2) { 16 | order: 2; 17 | } 18 | } 19 | } -------------------------------------------------------------------------------- /scss/style.scss: -------------------------------------------------------------------------------- 1 | 2 | @import "fonts"; 3 | @import "page"; 4 | @import "header"; 5 | @import "nav"; 6 | @import "main"; 7 | @import "columns"; 8 | @import "sub"; 9 | @import "advertisements"; 10 | @import "ad1"; 11 | @import "ad2"; 12 | @import "ad3_anim"; 13 | @import "ad4"; 14 | @import "forms"; 15 | @import "video"; 16 | @import "footer"; 17 | @import "authors"; 18 | @import "print"; 19 | @import "media"; 20 | -------------------------------------------------------------------------------- /scss/_nav.scss: -------------------------------------------------------------------------------- 1 | 2 | nav { 3 | border-top: double 3px #8e8e8e; 4 | text-align: center; 5 | ul { 6 | list-style: none; 7 | padding: 0; 8 | margin: 0 auto; 9 | white-space: nowrap; 10 | text-align: center; 11 | width: 10.2em; 12 | } 13 | li { 14 | display: inline-block; 15 | padding: 0 1em; 16 | } 17 | a { 18 | text-transform: uppercase; 19 | font-size: 13px; 20 | font-size: 0.875rem; 21 | display: block; 22 | line-height: 27px; 23 | } 24 | } -------------------------------------------------------------------------------- /scss/_ad1.scss: -------------------------------------------------------------------------------- 1 | .ad-ad1 { 2 | a:hover, 3 | a:active { 4 | text-decoration: none; 5 | } 6 | h1 { 7 | font-family: AcknowledgementMedium; 8 | letter-spacing: 0.1em; 9 | font-size: 36px; 10 | margin: 0 0 0 0; 11 | text-align: center; 12 | } 13 | h1:first-letter { 14 | letter-spacing: -0.1em; 15 | } 16 | p { 17 | margin: 0; 18 | font-family: AcknowledgementMedium; 19 | text-transform: uppercase; 20 | font-size: 14px; 21 | text-align: center; 22 | } 23 | } -------------------------------------------------------------------------------- /images/button-gradient.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Button Gradient 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /scss/_footer.scss: -------------------------------------------------------------------------------- 1 | body > footer { 2 | clear: both; 3 | small { 4 | font-family: LeagueGothic, Tahoma, Geneva, sans-serif; 5 | text-transform: uppercase; 6 | line-height: 32px; 7 | padding: 0 0 0 7px; 8 | letter-spacing: .08em; 9 | text-shadow: rgba(0,0,0,0.4) 1px 1px 4px; 10 | float: left; 11 | } 12 | 13 | p:last-of-type { 14 | float: right; 15 | padding: 5px 0 0 0; 16 | } 17 | 18 | section { 19 | float: left; 20 | } 21 | 22 | h1 { 23 | font-size: 2rem; 24 | } 25 | } 26 | 27 | 28 | .footerinfo { 29 | clear: both; 30 | height: 30px; 31 | width: 100%; 32 | background: transparent; 33 | } 34 | 35 | -------------------------------------------------------------------------------- /scss/_media.scss: -------------------------------------------------------------------------------- 1 | @media screen and (max-width: 500px) { 2 | body { 3 | width: 100%; 4 | min-width: 320px; 5 | } 6 | body > header h1 { 7 | font-size: 7vw; 8 | } 9 | body main > div:nth-of-type(n), 10 | aside, 11 | aside article { 12 | width: 100%; 13 | padding: 0 1em; 14 | box-sizing: border-box; 15 | } 16 | article h2, 17 | #mouseContainer { 18 | text-align: left; 19 | background-position: left top; 20 | } 21 | .content { 22 | -webkit-column-count: 1; 23 | -moz-column-count: 1; 24 | column-count: 1; 25 | } 26 | article:not([id="ac1"]) { 27 | border-top: 1px solid; 28 | margin-top: 1em; 29 | padding-top: 1em; 30 | } 31 | #authors { 32 | flex-direction: column; 33 | } 34 | } -------------------------------------------------------------------------------- /scss/_print.scss: -------------------------------------------------------------------------------- 1 | /* PRINT STYLES */ 2 | @media print { 3 | * { 4 | background: transparent !important; 5 | color: #484848 !important; 6 | text-shadow: none; 7 | } 8 | a, a:visited { 9 | color: #484848 !important; 10 | text-decoration: underline; 11 | } 12 | a:after { 13 | content: " (" attr(href) ")"; 14 | } 15 | abbr:after { 16 | content: " (" attr(title) ")"; 17 | } 18 | .ir a:after { 19 | content: ""; /* Don't show links for images */ 20 | } 21 | pre, blockquote { 22 | border: 1px solid #999; 23 | page-break-inside: avoid; 24 | } 25 | img { 26 | page-break-inside: avoid; 27 | } 28 | @page { 29 | margin: 0.5cm; 30 | } 31 | p, h2, h3 { 32 | orphans: 3; widows: 3; 33 | } 34 | h2, h3 { 35 | page-break-after: avoid; 36 | } 37 | } 38 | -------------------------------------------------------------------------------- /images/gradient.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Module Gradient 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /scss/_page.scss: -------------------------------------------------------------------------------- 1 | 2 | 3 | html { 4 | background: transparent url(../images/bg-main.gif) repeat 0 0; 5 | height: 100%; 6 | } 7 | 8 | body { 9 | width: 758px; 10 | margin: 6px auto 0; 11 | border-top: solid 1px #8e8e8e; 12 | background: transparent url(../images/bg-texture.png) no-repeat top center; 13 | height: 100%; 14 | color: #484848; 15 | font-size: 13px; 16 | position: relative; 17 | font-family: Times, "Times New Roman", serif; 18 | } 19 | 20 | a { 21 | color: #484848; 22 | text-decoration: none; 23 | } 24 | 25 | a:hover, a:active { 26 | text-decoration: underline; 27 | } 28 | 29 | p { 30 | margin: 0 0 13px 0; 31 | text-align: justify; 32 | line-height: 1em; 33 | } 34 | 35 | h1 { 36 | text-shadow: #fff 1px 1px; 37 | font-family: LeagueGothic, Tahoma, Geneva, sans-serif; 38 | text-transform: uppercase; 39 | line-height: 1; 40 | } 41 | 42 | h2 { 43 | font-family: LeagueGothic, Tahoma, Geneva, sans-serif; 44 | padding: 7px 0 0 0; 45 | margin: 0; 46 | } -------------------------------------------------------------------------------- /scss/_columns.scss: -------------------------------------------------------------------------------- 1 | .content { 2 | -webkit-columns: 3 9em; 3 | -webkit-column-gap: 10px; 4 | -moz-column-count: 3; 5 | -moz-column-width: 9em; 6 | -moz-column-gap: 10px; 7 | column-count: 3; 8 | column-width: 9em; 9 | column-gap: 10px; 10 | } 11 | 12 | .content h1 { 13 | -webkit-column-span: all; 14 | -moz-column-span: all; 15 | } 16 | 17 | .tertiary .content { 18 | -webkit-column-count: 2; 19 | -webkit-column-width: 112px; 20 | -webkit-column-gap: 10px; 21 | -moz-column-count: 2; 22 | -moz-column-width: 112px; 23 | -moz-column-gap: 10px; 24 | column-count: 2; 25 | column-width: 117px; 26 | column-gap: 10px; 27 | } 28 | 29 | .tertiary article:last-of-type { 30 | border: none; 31 | } 32 | 33 | 34 | .secondary article { 35 | padding: 0 4px 0 4px; 36 | float: left; 37 | border-right: solid 1px #979797; 38 | border-left: solid 1px #979797; 39 | } 40 | 41 | .secondary h1 { 42 | margin-top: 0; 43 | } 44 | 45 | img[alt~=cat] { 46 | margin: 0 auto 15px; 47 | display: block; 48 | } 49 | -------------------------------------------------------------------------------- /scss/_fonts.scss: -------------------------------------------------------------------------------- 1 | /* @font-face code Generated by Font Squirrel (http://www.fontsquirrel.com) */ 2 | @font-face { 3 | font-family: 'LeagueGothic'; 4 | src: url('../fonts/League_Gothic-webfont.eot'); 5 | src: url('../fonts/League_Gothic-webfont.eot?#iefix') format('eot'), 6 | url('../fonts/League_Gothic-webfont.woff') format('woff'), 7 | url('../fonts/League_Gothic-webfont.ttf') format('truetype'), 8 | url('../fonts/League_Gothic-webfont.svg#webfontFHzvtkso') format('svg'); 9 | font-weight: bold; 10 | font-style: normal; 11 | } 12 | 13 | @font-face { 14 | font-family: 'AcknowledgementMedium'; 15 | src: url('../fonts/Acknowledgement-webfont.eot'); 16 | src: url('../fonts/Acknowledgement-webfont.eot?#iefix') format('eot'), 17 | url('../fonts/Acknowledgement-webfont.woff') format('woff'), 18 | url('../fonts/Acknowledgement-webfont.ttf') format('truetype'), 19 | url('../fonts/Acknowledgement-webfont.svg#webfontuCYqM11k') format('svg'); 20 | font-weight: normal; 21 | font-style: normal; 22 | } -------------------------------------------------------------------------------- /scss/_ad2.scss: -------------------------------------------------------------------------------- 1 | aside > article:nth-of-type(2), 2 | .ad-ad2 { 3 | background-image: url(../images/dukes.png); 4 | background-position: bottom left; 5 | background-repeat: no-repeat; 6 | -webkit-transition: -webkit-transform 2s linear 250ms; 7 | transition: transform 2s linear 250ms; 8 | min-height: 140px; 9 | h1 { 10 | font-size: 20px; 11 | font-family: AcknowledgementMedium; 12 | padding: 0 30px 0 75px; 13 | line-height:1; 14 | color: #999; 15 | margin: 0 0 0 15px; 16 | text-align: left; 17 | span { 18 | font-size: 30px; 19 | color: #999999; 20 | display:inline-block; 21 | -webkit-transition: color 0.2s ease-out, -webkit-transform 0.2s ease-out; 22 | transition: color 0.2s ease-out, transform 0.2s ease-out; 23 | } 24 | &:hover span { 25 | color: #484848; 26 | -webkit-transform:rotate(10deg) translateX(40px) scale(1.5); 27 | transform:rotate(10deg) translateX(40px) scale(1.5); 28 | } 29 | } 30 | p { 31 | padding: 5px 3px 0 75px; 32 | font-size: 0.85em; 33 | } 34 | } -------------------------------------------------------------------------------- /herald.appcache: -------------------------------------------------------------------------------- 1 | CACHE MANIFEST 2 | #v2.7.2 3 | 4 | CACHE: 5 | index.html 6 | register.html 7 | canvas.html 8 | 9 | js/hyphenator.js 10 | js/modernizr-1.7.min.js 11 | js/videoControls.js 12 | js/dragDrop.js 13 | js/geolocation.js 14 | js/videoToBW.js 15 | js/canvas.js 16 | 17 | css/styles.css 18 | css/canvas.css 19 | images/bg-bike.png 20 | images/bg-form.png 21 | images/bg-formtitle-left.png 22 | images/bg-formtitle-right.png 23 | images/bg-header.gif 24 | images/bg-main.gif 25 | images/bg-subhead.gif 26 | images/bg-texture.png 27 | images/cat.png 28 | images/dukes.gif 29 | images/dukes.png 30 | images/logo-sp.gif 31 | images/logo.png 32 | images/gradient.svg 33 | images/ford-plane-still.png 34 | images/spinnerBW.svg 35 | fonts/League_Gothic-webfont.eot 36 | fonts/League_Gothic-webfont.svg 37 | fonts/League_Gothic-webfont.ttf 38 | fonts/League_Gothic-webfont.woff 39 | fonts/Acknowledgement-webfont.eot 40 | fonts/Acknowledgement-webfont.svg 41 | fonts/Acknowledgement-webfont.ttf 42 | fonts/Acknowledgement-webfont.woff 43 | 44 | FALLBACK: 45 | media/ images/ford-plane-still.png 46 | / offline.html 47 | 48 | NETWORK: 49 | * 50 | 51 | -------------------------------------------------------------------------------- /herald.appcacheOLD: -------------------------------------------------------------------------------- 1 | CACHE MANIFEST 2 | #v1.7 3 | 4 | CACHE: 5 | index.html 6 | register.html 7 | canvas.html 8 | 9 | js/hyphenator.js 10 | js/modernizr-1.7.min.js 11 | js/videoControls.js 12 | js/dragDrop.js 13 | js/geolocation.js 14 | js/videoToBW.js 15 | js/canvas.js 16 | 17 | css/styles.css 18 | css/canvas.css 19 | images/bg-bike.png 20 | images/bg-form.png 21 | images/bg-formtitle-left.png 22 | images/bg-formtitle-right.png 23 | images/bg-header.gif 24 | images/bg-main.gif 25 | images/bg-subhead.gif 26 | images/bg-texture.png 27 | images/cat.png 28 | images/dukes.gif 29 | images/dukes.png 30 | images/logo-sp.gif 31 | images/logo.png 32 | images/gradient.svg 33 | images/ford-plane-still.png 34 | images/spinnerBW.svg 35 | fonts/League_Gothic-webfont.eot 36 | fonts/League_Gothic-webfont.svg 37 | fonts/League_Gothic-webfont.ttf 38 | fonts/League_Gothic-webfont.woff 39 | fonts/Acknowledgement-webfont.eot 40 | fonts/Acknowledgement-webfont.svg 41 | fonts/Acknowledgement-webfont.ttf 42 | fonts/Acknowledgement-webfont.woff 43 | 44 | FALLBACK: 45 | media/ images/ford-plane-still.png 46 | / offline.html 47 | 48 | NETWORK: 49 | * 50 | 51 | -------------------------------------------------------------------------------- /scss/_header.scss: -------------------------------------------------------------------------------- 1 | /* HEADER */ 2 | body > header { 3 | border-top: solid 1px #8e8e8e; 4 | border-bottom: solid 1px #8e8e8e; 5 | margin: 1px auto; 6 | padding-top: 8px; 7 | overflow: hidden; 8 | position: relative; 9 | } 10 | 11 | .logo { 12 | vertical-align: top; 13 | } 14 | 15 | .h { 16 | text-align: center; 17 | margin-left: 30px; 18 | } 19 | 20 | body > header { 21 | text-align: center; 22 | h1 { 23 | font-family: "Times New Roman", Times, serif; 24 | font-size: 60px; 25 | position: relative; 26 | margin: 10px 0 0 0; 27 | font-weight: normal; 28 | line-height: .9; 29 | } 30 | h1 span { 31 | position: absolute; 32 | left: 40px; 33 | top: 40%; 34 | font-size: 30%; 35 | } 36 | h1 a:hover, 37 | h1 a:active { 38 | text-decoration: none; 39 | } 40 | p { 41 | line-height: 29px; 42 | font-size: 12px; 43 | font-size: 0.75rem; 44 | margin: 0; 45 | } 46 | #volume { 47 | float: left; 48 | } 49 | time { 50 | float: right; 51 | } 52 | } 53 | 54 | .issue { 55 | right: 0; 56 | text-align: right; 57 | } 58 | .tagline { 59 | text-transform: lowercase; 60 | background-image: none; 61 | font-size: 16px; 62 | letter-spacing: 2px; 63 | text-align: center; 64 | text-shadow: none; 65 | font-weight: normal; 66 | line-height: 2; 67 | } -------------------------------------------------------------------------------- /scss/_main.scss: -------------------------------------------------------------------------------- 1 | 2 | main { 3 | margin: 1px 0 0 0; 4 | border-top: solid 1px #8e8e8e; 5 | padding: 15px 0; 6 | clear: both; 7 | > div { 8 | float: left; 9 | &:first-of-type, /* both selectors target the same element */ 10 | .primary { 11 | width: 50%; 12 | padding-right: 4px; 13 | box-sizing: border-box; 14 | } 15 | &:nth-of-type(2), /* both selectors target the same element */ 16 | .secondary { 17 | width: 17%; 18 | } 19 | &:last-of-type, /* both selectors target the same element */ 20 | .tertiary { 21 | width: 33%; 22 | margin-right: 0; 23 | padding-left: 4px; 24 | box-sizing: border-box; 25 | } 26 | } 27 | > div:first-of-type h1 { 28 | font-size: 33px; 29 | padding: 0 0 4px 0; 30 | letter-spacing: -1px; 31 | text-align: left; 32 | } 33 | h1 { 34 | font-size: 22px; 35 | margin: 10px 0 8px 0; 36 | } 37 | hgroup { 38 | padding: 0 0 10px 0; 39 | margin: 0 0 5px 0; 40 | background: rgba(0, 0, 0, 0) url(../images/bg-subhead.gif) no-repeat bottom center; 41 | } 42 | 43 | } 44 | article h2 { 45 | background: url(../images/bg-header.gif) no-repeat top center; 46 | font-size: 14px; 47 | text-transform: none; 48 | font-family: "Times New Roman", Times, serif; 49 | font-weight: bold; 50 | text-shadow: none; 51 | text-align: center; 52 | } 53 | -------------------------------------------------------------------------------- /scss/_advertisements.scss: -------------------------------------------------------------------------------- 1 | 2 | aside { 3 | float: left; 4 | width: 246px; 5 | margin-right: 0; 6 | padding-left: 4px; 7 | h1, 8 | h2 { 9 | font-weight: normal; 10 | margin: 0; 11 | text-align: center; 12 | } 13 | article { 14 | width: 236px; 15 | border: 1px solid #ccc; 16 | margin-bottom: 5px; 17 | } 18 | p + a { 19 | display: block; 20 | text-decoration: none; 21 | border: 5px double; 22 | color: #ffffff; 23 | background-color: #484848; 24 | text-align: center; 25 | font-size: 28px; 26 | margin: 5px 5px 9px 5px; 27 | padding: 15px 0; 28 | position: relative; 29 | border-radius: 25px; 30 | box-shadow: 2px 5px 0 0 rgba(72,72,72,1); 31 | text-shadow: 3px 3px 1px rgba(0, 0, 0, 0.5); 32 | font-family: AcknowledgementMedium, sans-serif; 33 | } 34 | } 35 | 36 | .draganddrop .mc { 37 | text-align: center; 38 | } 39 | 40 | .no-draganddrop .mc { 41 | visibility: hidden; 42 | height: 0; 43 | } 44 | 45 | a.wanted:hover { 46 | box-shadow: 4px 10px #484848; 47 | top: -5px; 48 | left: -2px; 49 | position: relative; 50 | } 51 | .holding { 52 | /* WebKit */ 53 | -webkit-transition: all 0.3s ease; 54 | /* Standard */ 55 | transition: all 0.3s ease; 56 | } 57 | .md { 58 | height: 140px; 59 | width: 236px; 60 | } 61 | 62 | .spin { 63 | position: absolute; 64 | top: 8px; 65 | left: 55px; 66 | } 67 | -------------------------------------------------------------------------------- /scss/_ad3.scss: -------------------------------------------------------------------------------- 1 | .ad-ad3 { 2 | background-image: 3 | url(../images/bg-bike.png), 4 | url(../images/gradient.svg); 5 | /* Gradient syntax for WebKit */ 6 | background-image: 7 | url(../images/bg-bike.png), 8 | -webkit-linear-gradient(top, 9 | rgba(0,0,0,0.4) 0, 10 | rgba(0,0,0,0) 37%, 11 | rgba(0,0,0,0) 83%, 12 | rgba(0,0,0,0.06) 92%, 13 | rgba(0,0,0,0) 98%); 14 | /* Unprefixed W3C syntax */ 15 | background-image: 16 | url(../images/bg-bike.png), 17 | linear-gradient(to bottom, 18 | rgba(0,0,0,0.4) 0, 19 | rgba(0,0,0,0) 37%, 20 | rgba(0,0,0,0) 83%, 21 | rgba(0,0,0,0.06) 92%, 22 | rgba(0,0,0,0) 98%); 23 | 24 | background-position: 50% 88%, 0 0; 25 | background-repeat: no-repeat; 26 | padding-bottom: 50px; 27 | -webkit-transition: background-position 1s linear 250ms; 28 | transition: background-position 1s linear 250ms; 29 | h1 { 30 | color: #484848; 31 | text-align: center; 32 | text-transform: uppercase; 33 | text-shadow: 1px 1px #fff; 34 | font-family: LeagueGothic, Arial Narrow, Helvetica, sans-serif; 35 | font-size: 42px; 36 | letter-spacing: -1px; 37 | margin: 20px 5px; 38 | text-shadow: #fff 1px 1px; 39 | } 40 | a { 41 | text-decoration: none; 42 | } 43 | &:hover { 44 | background-position: 150% 88%, 0 0; 45 | } 46 | 47 | article h1 a:after { 48 | content: ""; 49 | } 50 | } 51 | -------------------------------------------------------------------------------- /js/dragDrop.js: -------------------------------------------------------------------------------- 1 | function addEvent(event, elem, fxn) { 2 | if (elem.addEventListener) { 3 | elem.addEventListener(event, fxn, false); 4 | } else if (elem.attachEvent) { 5 | elem.attachEvent('on' + event, fxn); 6 | } else { 7 | elem['on' + event] = fxn; 8 | } 9 | } 10 | 11 | // bind the dragstart event on the mice 12 | var mice = document.querySelectorAll('#mouseContainer img'); 13 | var mouse = null; 14 | for (var i=0; i < mice.length; i++) { 15 | mouse = mice[i]; 16 | mouse.addEventListener('dragstart', function (event) { 17 | event.dataTransfer.setData('text/plain', this.id); 18 | }); 19 | } 20 | 21 | // bind the dragover event on the cat 22 | var cat = document.getElementById('cat'); 23 | addEvent('dragover', cat, function(event) { 24 | event.preventDefault(); 25 | }); 26 | 27 | // bind the drop event on the cat 28 | addEvent('drop', cat, function(event) { 29 | var mouseHash = { 30 | mouse1: 'NOMNOMNOM', 31 | mouse2: 'Mreow', 32 | mouse3: 'Purrrrrr...' 33 | }; 34 | 35 | var ch = document.getElementById('catHeading'); 36 | 37 | // change text of the header based on which mouse was dropped 38 | var mouseID = event.dataTransfer.getData('text/plain'); 39 | ch.innerHTML = mouseHash[mouseID]; 40 | 41 | // get the img element for the mouse, and then remove it 42 | var mousey = document.getElementById(mouseID); 43 | mousey.parentNode.removeChild(mousey); 44 | 45 | event.preventDefault(); 46 | }); 47 | 48 | 49 | -------------------------------------------------------------------------------- /scss/_ad3_anim.scss: -------------------------------------------------------------------------------- 1 | .ad-ad3 { 2 | background-image: 3 | url(../images/gradient.svg); 4 | /* Gradient syntax for WebKit */ 5 | background-image: 6 | -webkit-linear-gradient(top, 7 | rgba(0,0,0,0.4) 0, 8 | rgba(0,0,0,0) 37%, 9 | rgba(0,0,0,0) 83%, 10 | rgba(0,0,0,0.06) 92%, 11 | rgba(0,0,0,0) 98%); 12 | /* Unprefixed W3C syntax */ 13 | background-image: 14 | linear-gradient(to bottom, 15 | rgba(0,0,0,0.4) 0, 16 | rgba(0,0,0,0) 37%, 17 | rgba(0,0,0,0) 83%, 18 | rgba(0,0,0,0.06) 92%, 19 | rgba(0,0,0,0) 98%); 20 | 21 | background-position: 0 0; 22 | background-repeat: no-repeat; 23 | padding-bottom: 10px; 24 | h1 { 25 | color: #484848; 26 | text-align: center; 27 | text-transform: uppercase; 28 | text-shadow: 1px 1px #fff; 29 | font-family: LeagueGothic, Arial Narrow, Helvetica, sans-serif; 30 | font-size: 42px; 31 | letter-spacing: -1px; 32 | margin: 20px 5px 0; 33 | text-shadow: #fff 1px 1px; 34 | &:after { 35 | content: ''; 36 | width: 90px; 37 | height: 92px; 38 | background-image: url(../images/bike_sprite.png); 39 | display: block; 40 | margin: auto; 41 | -webkit-animation: bike steps(4, start) infinite 0.4s, 42 | move linear infinite 8s; 43 | -webkit-animation-play-state: paused; 44 | } 45 | &:hover:after { 46 | -webkit-animation-play-state: running; 47 | } 48 | } 49 | a { 50 | text-decoration: none; 51 | } 52 | } 53 | @-webkit-keyframes bike { 54 | 0% { 55 | background-position: 0 0; 56 | } 57 | 100% { 58 | background-position: -360px 0; 59 | } 60 | } 61 | 62 | @-webkit-keyframes move { 63 | 0% { 64 | -webkit-transform: translatex(-100px) 65 | } 66 | 100% { 67 | -webkit-transform: translatex(100px) 68 | } 69 | } -------------------------------------------------------------------------------- /js/rememberMe.js: -------------------------------------------------------------------------------- 1 | function addEvent(event, elem, fxn) { 2 | if (elem.addEventListener) { 3 | elem.addEventListener(event, fxn, false); 4 | } else if (elem.attachEvent) { 5 | elem.attachEvent('on' + event, fxn); 6 | } else { 7 | elem['on' + event] = fxn; 8 | } 9 | } 10 | 11 | function loadStoredDetails(){ 12 | if (Modernizr.localstorage) { 13 | var name = localStorage.getItem("name"); 14 | var email = localStorage.getItem("email"); 15 | var remember = localStorage.getItem("remember"); 16 | 17 | if (name) { 18 | document.getElementById("name").value = name; 19 | } 20 | 21 | if (email) { 22 | document.getElementById("email").value = email; 23 | } 24 | 25 | if (remember === "true") //stored as a string, not a bool 26 | { 27 | document.getElementById("rememberme").setAttribute("checked", "checked"); 28 | } 29 | } 30 | else { 31 | // no native support for HTML5 storage :( 32 | } 33 | 34 | } 35 | 36 | function saveData(){ 37 | if (Modernizr.localstorage) { 38 | // We need to check that the checkbox is ON, not just 39 | // that's it's been clicked (the change event is also fired for 40 | // UNchecking the box). 41 | if (document.getElementById("rememberme").checked === true) { 42 | var name = document.getElementById("name").value; 43 | var email = document.getElementById("email").value; 44 | 45 | localStorage.setItem("name", name); 46 | localStorage.setItem("email", email); 47 | localStorage.setItem("remember", true); 48 | } 49 | // if they uncheck the "remember me" checkbox, clear out 50 | // all the values 51 | else { 52 | localStorage.clear(); 53 | } 54 | } 55 | else { 56 | // no native support for Web storage :( 57 | } 58 | } 59 | 60 | loadStoredDetails(); 61 | var rememberMe = document.getElementById("rememberme"); 62 | addEvent('change', rememberMe, saveData); -------------------------------------------------------------------------------- /scss/_video.scss: -------------------------------------------------------------------------------- 1 | #video-container { 2 | width: 373px; 3 | margin: 0 auto; 4 | position: relative; 5 | } 6 | video { 7 | display: block; 8 | margin-bottom: 12px; 9 | } 10 | 11 | video, 12 | .content h1 { 13 | -webkit-column-span: all; 14 | -moz-column-span: all; 15 | column-span: all; 16 | clear: both; 17 | } 18 | 19 | .cnvs { 20 | position: absolute; 21 | top: 0; 22 | left: 0; 23 | /* to avoid seeing the video in color for a second before the JavaScript runs 24 | * show a black background instead */ 25 | background-color: black; 26 | margin-bottom: 25px; 27 | } 28 | 29 | .myCanvas { 30 | border: 2px dotted black; 31 | margin: 0 20px; 32 | } 33 | 34 | .vc { 35 | width: 373px; 36 | margin: 0 auto; 37 | position: relative; 38 | } 39 | 40 | .ctrl { 41 | position: absolute; 42 | bottom: 0px; 43 | opacity: .5; 44 | -webkit-transition: opacity .7s linear; 45 | transition: opacity .7s linear; 46 | &:hover { 47 | opacity: 1; 48 | } 49 | } 50 | 51 | .hidden { 52 | display: none; 53 | } 54 | .pp, 55 | .mu { 56 | width: 25px; 57 | height: 25px; 58 | float: left; 59 | text-indent: -9999em; 60 | border-right: solid 1px #000; 61 | &:hover { 62 | cursor: pointer; 63 | } 64 | } 65 | .paused { 66 | background: #ccc url(../images/controls-sprite.png) no-repeat 0 -75px; 67 | } 68 | .playing { 69 | background-position: 0 -50px; 70 | } 71 | .timer { 72 | width: 321px; 73 | height: 25px; 74 | background: #ccc; 75 | float: left; 76 | text-align: center; 77 | line-height: 25px; 78 | overflow: hidden; 79 | } 80 | .mu { 81 | overflow: hidden; 82 | } 83 | .unmuted { 84 | background: #ccc url(../images/controls-sprite.png) no-repeat 0 -25px; 85 | } 86 | .muted { 87 | background-position: 0 0; 88 | } 89 | 90 | #canvasOverlay { 91 | position: absolute; 92 | top: 0px; 93 | left: 0px; 94 | background-color: #000; 95 | margin-bottom: 25px; 96 | } -------------------------------------------------------------------------------- /js/geolocation.js: -------------------------------------------------------------------------------- 1 | function addEvent(event, elem, fxn) { 2 | if (elem.addEventListener) { 3 | elem.addEventListener(event, fxn, false); 4 | } else if (elem.attachEvent) { 5 | elem.attachEvent('on' + event, fxn); 6 | } else { 7 | elem['on' + event] = fxn; 8 | } 9 | } 10 | 11 | function determineLocation() { 12 | if (navigator.onLine) { 13 | if (Modernizr.geolocation) { 14 | navigator.geolocation.getCurrentPosition(displayOnMap); 15 | 16 | var container = Raphael(document.getElementById("spinner"), 125, 125); 17 | var spinner = container.image("images/spinnerBW.svg", 0, 0, 125, 125); 18 | var attrsToAnimate = { transform: "r720" }; 19 | spinner.animate(attrsToAnimate, 60000); 20 | } 21 | else { 22 | // geolocation is not supported in this browser 23 | // we can use the geo-location-javascript polyfill 24 | // https://code.google.com/p/geo-location-javascript/ 25 | } 26 | } 27 | else { 28 | alert("You must be online to use this feature."); 29 | } 30 | } 31 | 32 | function displayOnMap(position) { 33 | document.getElementById("spinner").style.display = "none"; 34 | var latitude = position.coords.latitude; 35 | var longitude = position.coords.longitude; 36 | 37 | // Let's use Google Maps to display the location 38 | var myOptions = { 39 | zoom: 14, 40 | mapTypeId: google.maps.MapTypeId.ROADMAP 41 | }; 42 | 43 | var map = new google.maps.Map(document.getElementById("geoForm"), myOptions); 44 | 45 | var initialLocation = new google.maps.LatLng(latitude, longitude); 46 | 47 | var marker = new google.maps.Marker({ 48 | position: initialLocation, 49 | map: map, 50 | title: "Hello World!" 51 | }); 52 | 53 | map.setCenter(initialLocation); 54 | } 55 | 56 | var geobutton = document.getElementById('geobutton'); 57 | addEvent('click', geobutton, determineLocation); -------------------------------------------------------------------------------- /canvas.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | The HTML5 Herald 6 | 7 | 8 | 9 | 10 | 11 |
12 |

The HTML5 Herald

13 |

Produced with That Good ol' Timey HTML5 & CSS3

14 | 21 |

Vol. MMXI

22 |

23 |
24 |
25 |

Demo 1: Drawing a rectangle

26 | 27 | Sorry! Your browser doesn't support Canvas. 28 | 29 |

Demo 2: Filling the canvas with a pattern

30 | 31 | Sorry! Your browser doesn't support Canvas. 32 | 33 | 34 |

Demo 3: Creating a gradient on the canvas

35 | 36 | Sorry! Your browser doesn't support Canvas. 37 | 38 | 39 |

Demo 4: Drawing a circle

40 | 41 | Sorry! Your browser doesn't support Canvas. 42 | 43 | 44 |

Demo 5: Saving canvas drawings

45 | 46 | Sorry! Your browser doesn't support Canvas. 47 | 48 | 49 | 50 | 51 | 52 |

Demo 6: Drawing an image to the canvas

53 | 54 | Sorry! Your browser doesn't support Canvas. 55 | 56 | 57 | 58 | 59 | 60 |

Demo 7: Converting an image from color to black and white

61 | 62 | Sorry! Your browser doesn't support Canvas. 63 | 64 | 65 | 66 | 67 |
68 | 69 | 73 | 74 | 75 | 76 | 77 | 78 | -------------------------------------------------------------------------------- /js/videoToBW.js: -------------------------------------------------------------------------------- 1 | function addEvent(event, elem, fxn) { 2 | if (elem.addEventListener) { 3 | elem.addEventListener(event, fxn, false); 4 | } else if (elem.attachEvent) { 5 | elem.attachEvent('on' + event, fxn); 6 | } else { 7 | elem['on' + event] = fxn; 8 | } 9 | } 10 | 11 | function makeVideoOldTimey () 12 | { 13 | var video = document.getElementById("video"); 14 | var canvas = document.getElementById("canvasOverlay"); 15 | var context = canvas.getContext("2d"); 16 | 17 | var still = document.getElementById("video-still"); 18 | 19 | // draw a black and white version of the video poster to display by default 20 | drawOneFrame(still,context,canvas); 21 | 22 | video.addEventListener("play", function(){ 23 | draw(video,context,canvas); 24 | },false); 25 | 26 | } 27 | 28 | function draw(video, context, canvas) { 29 | if (video.paused || video.ended) return false; 30 | 31 | drawOneFrame(video, context, canvas); 32 | 33 | // Start over! 34 | setTimeout(function(){ draw(video, context, canvas); }, 0); 35 | } 36 | 37 | function drawOneFrame(video, context, canvas){ 38 | // draw the video onto the canvas 39 | context.drawImage(video, 0, 0, canvas.width, canvas.height); 40 | 41 | // wrap the call to getImageData in a try/catch 42 | // if the page is viewed locally from the computer in Chrome 43 | // or Firefox, a Security exception will be thrown, and we'll skip 44 | // the canvas manipulation, simply playing the color video 45 | try { 46 | var imageData = context.getImageData(0, 0, canvas.width, canvas.height); 47 | var pixelData = imageData.data; 48 | // Loop through the red, green and blue pixels, turning them grayscale 49 | var red, green, blue, greyscale; 50 | for (var i = 0; i < pixelData.length; i += 4) { 51 | red = pixelData[i]; 52 | green = pixelData[i + 1]; 53 | blue = pixelData[i + 2]; 54 | //we'll ignore the alpha value, which is in position i+3 55 | 56 | greyscale = red * 0.3 + green * 0.59 + blue * 0.11; 57 | 58 | pixelData[i] = greyscale; 59 | pixelData[i + 1] = greyscale; 60 | pixelData[i + 2] = greyscale; 61 | } 62 | 63 | context.putImageData(imageData, 0, 0); 64 | } 65 | catch (err) { 66 | 67 | // clear the canvas 68 | context.clearRect (0,0,canvas.width,canvas.height); 69 | 70 | canvas.style.backgroundColor = "transparent"; 71 | //write an error message to the canvas 72 | context.fillStyle = "white"; 73 | context.textAlign = "left"; 74 | context.font = "18px LeagueGothic, Tahoma, Geneva, sans-serif"; 75 | context.fillText("There was an error rendering ",10,20); 76 | context.fillText("the video to the canvas.",10,40); 77 | context.fillText("Perhaps you are viewing this page from",10,70); 78 | context.fillText("a file on your computer?",10,90); 79 | context.fillText("Try viewing this page online instead.",10,130); 80 | 81 | return false; 82 | } 83 | } 84 | 85 | addEvent("DOMContentLoaded", document, makeVideoOldTimey); 86 | -------------------------------------------------------------------------------- /js/canvas.js: -------------------------------------------------------------------------------- 1 | function addEvent(event, elem, fxn) { 2 | if (elem.addEventListener) { 3 | elem.addEventListener(event, fxn, false); 4 | } else if (elem.attachEvent) { 5 | elem.attachEvent('on' + event, fxn); 6 | } else { 7 | elem['on' + event] = fxn; 8 | } 9 | } 10 | 11 | function drawRectangle() { 12 | var canvas = document.getElementById("demo1"); 13 | var context = canvas.getContext("2d"); 14 | context.strokeStyle = "red"; 15 | context.fillStyle = "rgba(0, 0, 255, 0.50)"; 16 | context.fillRect(10,10,100,100); 17 | context.strokeRect(10,10,100,100); 18 | } 19 | 20 | function drawPattern() { 21 | var canvas = document.getElementById("demo2"); 22 | var context = canvas.getContext("2d"); 23 | context.strokeStyle = "red"; 24 | 25 | var img = new Image(); 26 | img.src = "images/bg-bike.png"; 27 | img.onload = function() { 28 | var pattern = context.createPattern(img, "repeat"); 29 | context.fillStyle = pattern; 30 | context.fillRect(10,10,100,100); 31 | context.strokeRect(10,10,100,100); 32 | }; 33 | } 34 | 35 | function drawGradient() { 36 | var canvas = document.getElementById("demo3"); 37 | var context = canvas.getContext("2d"); 38 | context.strokeStyle = "red"; 39 | 40 | var gradient = context.createLinearGradient(0, 0, 0, 200); 41 | gradient.addColorStop(0,"blue"); 42 | gradient.addColorStop(1,"white"); 43 | context.fillStyle = gradient; 44 | context.fillRect(10,10,100,100); 45 | context.strokeRect(10,10,100,100); 46 | } 47 | 48 | function drawCircle(canvas) { 49 | var context = canvas.getContext("2d"); 50 | 51 | context.beginPath(); 52 | context.arc(50, 50, 30, 0, Math.PI*2, true); 53 | context.closePath(); 54 | context.strokeStyle = "red"; 55 | context.fillStyle = "blue"; 56 | context.lineWidth = 3; 57 | context.fill(); 58 | context.stroke(); 59 | } 60 | 61 | function saveDrawing() { 62 | var canvas5 = document.getElementById("demo5"); 63 | window.open(canvas5.toDataURL("image/png")); 64 | } 65 | 66 | function drawImageToCanvas() { 67 | var canvas = document.getElementById("demo6"); 68 | var context = canvas.getContext("2d"); 69 | var image = document.getElementById("myImageElem"); 70 | context.drawImage(image, 0, 0); 71 | } 72 | 73 | function manipulateImage() { 74 | var canvas = document.getElementById("demo7"); 75 | var context = canvas.getContext("2d"); 76 | var image = document.getElementById("secondImage"); 77 | context.drawImage(image, 60, 60); 78 | 79 | var imageData = context.getImageData(0, 0, 200, 200); 80 | 81 | var red, green, blue, greyscale; 82 | for (var i = 0; i < imageData.data.length; i += 4) { 83 | red = imageData.data[i]; 84 | green = imageData.data[i + 1]; 85 | blue = imageData.data[i + 2]; 86 | 87 | greyscale = red * 0.3 + green * 0.59 + blue * 0.11; 88 | 89 | imageData.data[i] = greyscale; 90 | imageData.data[i + 1] = greyscale; 91 | imageData.data[i + 2] = greyscale; 92 | } 93 | context.putImageData(imageData, 0, 0); 94 | } 95 | 96 | var button = document.getElementById("saveButton"); 97 | addEvent('click', button, saveDrawing); 98 | 99 | drawRectangle(); 100 | drawPattern(); 101 | drawGradient(); 102 | 103 | var canvas4 = document.getElementById("demo4"); 104 | 105 | drawCircle(canvas4); 106 | 107 | 108 | var canvas5 = document.getElementById("demo5"); 109 | drawCircle(canvas5); 110 | 111 | addEvent('load', window, drawImageToCanvas); 112 | addEvent('load', window, manipulateImage); 113 | -------------------------------------------------------------------------------- /scss/_forms.scss: -------------------------------------------------------------------------------- 1 | 2 | /* FORM */ 3 | 4 | form { 5 | border: solid 2px #888; 6 | border-width: 2px 0; 7 | clear: both; 8 | box-shadow: 9 | inset 1px 1px 84px rgba(0,0,0,0.24), 10 | inset -1px -1px 84px rgba(0,0,0,0.24); 11 | filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cacaca', endColorstr='#b1b1b1'); /* IE6,IE7 */ 12 | -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#cacaca', endColorstr='#b1b1b1')"; /* IE8+ */ 13 | margin: 1px 0; 14 | text-align: center; 15 | padding: 20px; 16 | min-height: 300px; 17 | background: rgba(0,0,0,0.2) url(../images/bg-form.png) no-repeat bottom center; 18 | ul { 19 | list-style-type: none; 20 | margin: 0; 21 | padding: 0; 22 | } 23 | li { 24 | margin-bottom: 40px; 25 | } 26 | p { 27 | text-align: center; 28 | } 29 | h1 { 30 | margin: 0 auto; 31 | font-size: 50px; 32 | font-family: AcknowledgementMedium; 33 | text-align: center; 34 | white-space: nowrap; 35 | background: 36 | url(../images/bg-formtitle-left.png) left 13px no-repeat, 37 | url(../images/bg-formtitle-right.png) right 13px no-repeat; 38 | + p { 39 | font-size: 20px; 40 | margin-bottom: 50px; 41 | font-family: LeagueGothic, Tahoma, Geneva, sans-serif; 42 | } 43 | } 44 | } 45 | 46 | .geoForm { 47 | padding: 0; 48 | border: none; 49 | min-height: 0; 50 | background: none; 51 | filter: none; 52 | -ms-filter: none; 53 | box-shadow: none; 54 | } 55 | 56 | 57 | 58 | label { 59 | font-family: LeagueGothic, Tahoma, Geneva, sans-serif; 60 | font-size: 26px; 61 | display: block; 62 | margin: auto; 63 | text-align: center; 64 | } 65 | 66 | input[type="text"], 67 | input[type="email"], 68 | input[type="password"], 69 | input[type="url"], 70 | textarea { 71 | background: transparent no-repeat top right; 72 | border: 0 dotted #484848; 73 | border-bottom-width: 1px; 74 | display: block; 75 | margin: 10px auto 10px; 76 | font-style:italic; 77 | font-family: Times, "Times New Roman", serif; 78 | padding: 5px 30px; 79 | width: 50%; 80 | &:required { 81 | background-image: url('../images/required.png'); 82 | } 83 | &:focus:invalid { 84 | background-image: url('../images/invalid.png'); 85 | } 86 | &:focus:valid { 87 | background-image: url('../images/valid.png'); 88 | } 89 | } 90 | 91 | .zipcode { 92 | width: 25%; 93 | display: inline-block; 94 | margin-right: 25px; 95 | } 96 | 97 | input[type=number] { 98 | width: 3em; 99 | } 100 | 101 | :invalid { 102 | box-shadow: none; 103 | } 104 | 105 | ::-webkit-input-placeholder { 106 | color:#333; 107 | } 108 | 109 | input { 110 | font-size: 20px; 111 | text-align: center; 112 | } 113 | 114 | input[type=submit], 115 | input[type=button] { 116 | border: none; 117 | border-radius: 5px; 118 | background-color: #333; 119 | /* SVG for IE9 and Opera */ 120 | background-image: url(../images/button-gradient.svg); 121 | /* Older WebKit */ 122 | background-image: -webkit-radial-gradient(30% 120%, circle, 123 | rgba(144,144,144,1) 0%, 124 | rgba(72,72,72,1) 50%); 125 | /* W3C unprefixed */ 126 | background-image: radial-gradient(circle at 30% 120%, 127 | rgba(144,144,144, 1) 0%, 128 | rgba(72,72,72,1) 50%); 129 | color: #fff; 130 | font-family: LeagueGothic, Tahoma, Geneva, sans-serif; 131 | text-transform: uppercase; 132 | font-size: 1.75rem; 133 | padding: 10px 30px; 134 | margin: 10px auto; 135 | opacity: 0.8; 136 | -webkit-transition: opacity .25s linear; 137 | transition: opacity .25s linear; 138 | } 139 | 140 | input[type=submit]:hover { 141 | opacity: 1; 142 | -webkit-transition: opacity .25s linear; 143 | transition: opacity .25s linear; 144 | } 145 | 146 | 147 | -------------------------------------------------------------------------------- /register.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | The HTML5 Herald 6 | 7 | 8 | 9 | 10 | 11 |
12 |
13 |

The HTML5 Herald

14 |

Produced with That Good ol' Timey HTML5 & CSS3

15 |
16 | 23 |

Vol. MMXI

24 |

25 |
26 | 27 |
28 |

Sign Me Up!

29 |

I would like to receive your fine publication.

30 | 31 | 69 | 70 |
71 | 75 | 109 | 110 | 111 | 112 | 113 | -------------------------------------------------------------------------------- /images/outliner.0.5.0.62.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | HTML5 Outliner bookmarklet (v0.5.0.62) 5 | 6 | 7 | 20 |

Drag this link to your favorites bar: H5O v0.5.0.62

28 | 29 |

Tested in:

30 | 34 |

However, it should work normally in other modern browsers. Please report a bug if it doesn't.

35 | 36 |

Internet Explorer is not supported

37 |

Except for an older version of the bookmarklet. For reasoning please see the ProblemsWithInternetExplorer wiki page.

38 | 39 | 40 | -------------------------------------------------------------------------------- /images/computer-mouse-pic.svg: -------------------------------------------------------------------------------- 1 | 2 | 4 | 5 | 6 | 7 | 8 | Part of the Flat Icon Collection (Wed Aug 25 23:31:03 2004) 9 | 10 | 11 | 12 | hash 13 | 14 | computer 15 | icons 16 | device 17 | theme 18 | 19 | 20 | 21 | 22 | Danny Allen 23 | 24 | 25 | 26 | 27 | Danny Allen 28 | 29 | 30 | 31 | 32 | Danny Allen 33 | 34 | 35 | 36 | image/svg+xml 37 | 38 | 39 | en 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | -------------------------------------------------------------------------------- /jwplayer/readme.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | About the JW Player 5 6 | 7 | 13 | 14 | 15 | 16 | 17 |

About the JW Player 5

18 |

Thank you for downloading the JW Player, the leading open source video player for Flash and HTML5 on the Web. Not only is the JW Player the easiest way to put video on your website, but we offer a host of other products and services to assist in providing the best possible video experience for your users.

19 | 20 |

Quickstart

21 |

The quickest way to get started is to unzip the file you downloaded (you must have done that if you're reading this!) and copy the contents into a folder called 'jwplayer' at the root of your website. The end result should be:

22 |
    23 |
  1. {webroot}/jwplayer/player.swf
    2. 24 |
  2. {webroot}/jwplayer/jwplayer.js
    3. 25 |
  3. etc...
    4. 26 |
27 |

You can then view the source of this page and copy the code from the example below onto your webpage. That's it! You should see a player on your site.

28 | 29 |

An Example of the JW Player

30 |

Below you see a simple embedded example of the JW Player.

31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 49 | 50 | 51 | 52 |

Support, Documentation and Source Code

53 | 54 |

If you need help, the LongTail Support Community contains a wealth of information, include a large library of documentation, a very active support forum, and a blog on the latest releases and tips on publishing video.

55 | 56 |

Some documents you might find useful are:

57 |
    58 |
  1. Supported file formats.
    2. 59 |
  2. Supported XML playlist formats.
    3. 60 |
  3. Complete list of configuration options (for customizing the player).
    4. 61 |
  4. Supported JavaScript API calls (for JavaScript interaction).
    5. 62 |
  5. Supported skinning elements (for creating your own graphics).
    6. 63 |
  6. Roadmap with full changelogs for each version.
    7. 64 |
65 |

Last, the source code of all different versions of the player can be found here. You can click a version and download the ZIP files (the links are at the bottom).

66 | 67 |

Licensing

68 |

The player is licensed under a Creative Commons License. It allows you to use, modify and redistribute the script, but only for non-commercial purposes.

69 |

Examples of commercial use include: 70 | 71 |

77 | 78 | If any of the above conditions apply to you, then please purchase a license for the player. If you are still unsure whether you need to purchase a license, please contact us.

79 | 80 |

Related Products

81 |

In addition to the JW Player, LongTail Video has a suite of products to help you publish video.

82 |

Learn more about them here:

83 | 84 | 90 | 91 | 92 | 93 | 94 | -------------------------------------------------------------------------------- /jwplayer/swfobject.js: -------------------------------------------------------------------------------- 1 | /** 2 | * SWFObject v1.5: Flash Player detection and embed - http://blog.deconcept.com/swfobject/ 3 | * 4 | * SWFObject is (c) 2007 Geoff Stearns and is released under the MIT License: 5 | * http://www.opensource.org/licenses/mit-license.php 6 | * 7 | */ 8 | if(typeof deconcept=="undefined"){var deconcept=new Object();}if(typeof deconcept.util=="undefined"){deconcept.util=new Object();}if(typeof deconcept.SWFObjectUtil=="undefined"){deconcept.SWFObjectUtil=new Object();}deconcept.SWFObject=function(_1,id,w,h,_5,c,_7,_8,_9,_a){if(!document.getElementById){return;}this.DETECT_KEY=_a?_a:"detectflash";this.skipDetect=deconcept.util.getRequestParameter(this.DETECT_KEY);this.params=new Object();this.variables=new Object();this.attributes=new Array();if(_1){this.setAttribute("swf",_1);}if(id){this.setAttribute("id",id);}if(w){this.setAttribute("width",w);}if(h){this.setAttribute("height",h);}if(_5){this.setAttribute("version",new deconcept.PlayerVersion(_5.toString().split(".")));}this.installedVer=deconcept.SWFObjectUtil.getPlayerVersion();if(!window.opera&&document.all&&this.installedVer.major>7){deconcept.SWFObject.doPrepUnload=true;}if(c){this.addParam("bgcolor",c);}var q=_7?_7:"high";this.addParam("quality",q);this.setAttribute("useExpressInstall",false);this.setAttribute("doExpressInstall",false);var _c=(_8)?_8:window.location;this.setAttribute("xiRedirectUrl",_c);this.setAttribute("redirectUrl","");if(_9){this.setAttribute("redirectUrl",_9);}};deconcept.SWFObject.prototype={useExpressInstall:function(_d){this.xiSWFPath=!_d?"expressinstall.swf":_d;this.setAttribute("useExpressInstall",true);},setAttribute:function(_e,_f){this.attributes[_e]=_f;},getAttribute:function(_10){return this.attributes[_10];},addParam:function(_11,_12){this.params[_11]=_12;},getParams:function(){return this.params;},addVariable:function(_13,_14){this.variables[_13]=_14;},getVariable:function(_15){return this.variables[_15];},getVariables:function(){return this.variables;},getVariablePairs:function(){var _16=new Array();var key;var _18=this.getVariables();for(key in _18){_16[_16.length]=key+"="+_18[key];}return _16;},getSWFHTML:function(){var _19="";if(navigator.plugins&&navigator.mimeTypes&&navigator.mimeTypes.length){if(this.getAttribute("doExpressInstall")){this.addVariable("MMplayerType","PlugIn");this.setAttribute("swf",this.xiSWFPath);}_19="0){_19+="flashvars=\""+_1c+"\"";}_19+="/>";}else{if(this.getAttribute("doExpressInstall")){this.addVariable("MMplayerType","ActiveX");this.setAttribute("swf",this.xiSWFPath);}_19="";_19+="";var _1d=this.getParams();for(var key in _1d){_19+="";}var _1f=this.getVariablePairs().join("&");if(_1f.length>0){_19+="";}_19+="";}return _19;},write:function(_20){if(this.getAttribute("useExpressInstall")){var _21=new deconcept.PlayerVersion([6,0,65]);if(this.installedVer.versionIsValid(_21)&&!this.installedVer.versionIsValid(this.getAttribute("version"))){this.setAttribute("doExpressInstall",true);this.addVariable("MMredirectURL",escape(this.getAttribute("xiRedirectUrl")));document.title=document.title.slice(0,47)+" - Flash Player Installation";this.addVariable("MMdoctitle",document.title);}}if(this.skipDetect||this.getAttribute("doExpressInstall")||this.installedVer.versionIsValid(this.getAttribute("version"))){var n=(typeof _20=="string")?document.getElementById(_20):_20;n.innerHTML=this.getSWFHTML();return true;}else{if(this.getAttribute("redirectUrl")!=""){document.location.replace(this.getAttribute("redirectUrl"));}}return false;}};deconcept.SWFObjectUtil.getPlayerVersion=function(){var _23=new deconcept.PlayerVersion([0,0,0]);if(navigator.plugins&&navigator.mimeTypes.length){var x=navigator.plugins["Shockwave Flash"];if(x&&x.description){_23=new deconcept.PlayerVersion(x.description.replace(/([a-zA-Z]|\s)+/,"").replace(/(\s+r|\s+b[0-9]+)/,".").split("."));}}else{if(navigator.userAgent&&navigator.userAgent.indexOf("Windows CE")>=0){var axo=1;var _26=3;while(axo){try{_26++;axo=new ActiveXObject("ShockwaveFlash.ShockwaveFlash."+_26);_23=new deconcept.PlayerVersion([_26,0,0]);}catch(e){axo=null;}}}else{try{var axo=new ActiveXObject("ShockwaveFlash.ShockwaveFlash.7");}catch(e){try{var axo=new ActiveXObject("ShockwaveFlash.ShockwaveFlash.6");_23=new deconcept.PlayerVersion([6,0,21]);axo.AllowScriptAccess="always";}catch(e){if(_23.major==6){return _23;}}try{axo=new ActiveXObject("ShockwaveFlash.ShockwaveFlash");}catch(e){}}if(axo!=null){_23=new deconcept.PlayerVersion(axo.GetVariable("$version").split(" ")[1].split(","));}}}return _23;};deconcept.PlayerVersion=function(_29){this.major=_29[0]!=null?parseInt(_29[0]):0;this.minor=_29[1]!=null?parseInt(_29[1]):0;this.rev=_29[2]!=null?parseInt(_29[2]):0;};deconcept.PlayerVersion.prototype.versionIsValid=function(fv){if(this.majorfv.major){return true;}if(this.minorfv.minor){return true;}if(this.rev=0;i--){_2f[i].style.display="none";for(var x in _2f[i]){if(typeof _2f[i][x]=="function"){_2f[i][x]=function(){};}}}};if(deconcept.SWFObject.doPrepUnload){if(!deconcept.unloadSet){deconcept.SWFObjectUtil.prepUnload=function(){__flash_unloadHandler=function(){};__flash_savedUnloadHandler=function(){};window.attachEvent("onunload",deconcept.SWFObjectUtil.cleanupSWFs);};window.attachEvent("onbeforeunload",deconcept.SWFObjectUtil.prepUnload);deconcept.unloadSet=true;}}if(!document.getElementById&&document.all){document.getElementById=function(id){return document.all[id];};}var getQueryParamValue=deconcept.util.getRequestParameter;var FlashObject=deconcept.SWFObject;var SWFObject=deconcept.SWFObject; -------------------------------------------------------------------------------- /js/videoControls.js: -------------------------------------------------------------------------------- 1 | /*globals $ window document */ 2 | 3 | contentLoaded(window, function () { 4 | 5 | var videoEl = document.getElementById('video'), 6 | playPauseBtn = document.getElementById('playPause'), 7 | vidControls = document.getElementById('controls'), 8 | muteBtn = document.getElementById('muteUnmute'), 9 | timeHolder = document.getElementById('timer'); 10 | 11 | // Check to see if the video is already ready (if it's cached, for example) 12 | if (videoEl.readyState === 4) { 13 | videoEl.removeAttribute('controls'); 14 | vidControls.classList.remove('hidden'); 15 | } 16 | 17 | videoEl.addEventListener('canplay', function () { 18 | videoEl.removeAttribute('controls'); 19 | vidControls.classList.remove('hidden') 20 | }, true); 21 | 22 | // click handler for play/pause btn 23 | playPauseBtn.addEventListener('click', function () { 24 | if (videoEl.paused) { 25 | videoEl.play(); 26 | } else { 27 | videoEl.pause(); 28 | } 29 | }, false); 30 | 31 | // listening for 'play' events 32 | videoEl.addEventListener('play', function () { 33 | playPauseBtn.classList.add('playing'); 34 | playPauseBtn.title = "Pause"; 35 | }, false); 36 | 37 | // listening for 'pause' events 38 | videoEl.addEventListener('pause', function () { 39 | playPauseBtn.classList.remove('playing'); 40 | playPauseBtn.title = "Play"; 41 | }, false); 42 | 43 | muteBtn.addEventListener('click', function () { 44 | if (videoEl.muted) { 45 | videoEl.muted = false; 46 | } else { 47 | videoEl.muted = true; 48 | } 49 | }, false); 50 | 51 | // listening for 'volumechange' events 52 | videoEl.addEventListener('volumechange', function () { 53 | if (videoEl.muted) { 54 | muteBtn.classList.add('muted'); 55 | } else { 56 | muteBtn.classList.remove('muted'); 57 | } 58 | }, false); 59 | 60 | // listening for 'ended' events 61 | videoEl.addEventListener('ended', function () { 62 | videoEl.currentTime = 0; 63 | videoEl.pause(); 64 | }, false); 65 | 66 | // listening for 'timeupdate' events 67 | // Every time the time changes, the 'secondsToTime' function runs 68 | videoEl.addEventListener('timeupdate', function () { 69 | timeHolder.innerHTML = secondsToTime(videoEl.currentTime); 70 | }, false); 71 | 72 | }); 73 | 74 | // currentTime is in seconds; this function converts it to properly formatted time 75 | function secondsToTime(s) { 76 | var h = Math.floor(s / (60 * 60)), 77 | dm = s % (60 * 60), 78 | m = Math.floor(dm / 60), 79 | ds = dm % 60, 80 | secs = Math.ceil(ds); 81 | 82 | // this fixes the crossover from 59 seconds to 1 minute 83 | if (secs === 60) { 84 | secs = 0; 85 | m = m + 1; 86 | } 87 | 88 | if (secs < 10) { 89 | secs = "0" + secs; 90 | } 91 | 92 | // this fixes the crossover from 59 minutes to 1 hour 93 | if (m === 60) { 94 | m = 0; 95 | h = h + 1; 96 | } 97 | 98 | if (m < 10) { 99 | m = "0" + m; 100 | } 101 | 102 | if (h === 0) { 103 | fulltime = m + ":" + secs; 104 | } else { 105 | fulltime = h + ":" + m + ":" + secs; 106 | } 107 | 108 | return fulltime; 109 | } 110 | 111 | /*! 112 | * contentloaded.js 113 | * 114 | * Author: Diego Perini (diego.perini at gmail.com) 115 | * Summary: cross-browser wrapper for DOMContentLoaded 116 | * Updated: 20101020 117 | * License: MIT 118 | * Version: 1.2 119 | * 120 | * URL: 121 | * https://github.com/dperini/ContentLoaded 122 | * http://javascript.nwbox.com/ContentLoaded/ 123 | * http://javascript.nwbox.com/ContentLoaded/MIT-LICENSE 124 | * 125 | */ 126 | 127 | // @win window reference 128 | // @fn function reference 129 | function contentLoaded(win, fn) { 130 | 131 | var done = false, top = true, 132 | 133 | doc = win.document, root = doc.documentElement, 134 | 135 | add = doc.addEventListener ? 'addEventListener' : 'attachEvent', 136 | rem = doc.addEventListener ? 'removeEventListener' : 'detachEvent', 137 | pre = doc.addEventListener ? '' : 'on', 138 | 139 | init = function(e) { 140 | if (e.type == 'readystatechange' && doc.readyState != 'complete') return; 141 | (e.type == 'load' ? win : doc)[rem](pre + e.type, init, false); 142 | if (!done && (done = true)) fn.call(win, e.type || e); 143 | }, 144 | 145 | poll = function() { 146 | try { root.doScroll('left'); } catch(e) { setTimeout(poll, 50); return; } 147 | init('poll'); 148 | }; 149 | 150 | if (doc.readyState == 'complete') fn.call(win, 'lazy'); 151 | else { 152 | if (doc.createEventObject && root.doScroll) { 153 | try { top = !win.frameElement; } catch(e) { } 154 | if (top) poll(); 155 | } 156 | doc[add](pre + 'DOMContentLoaded', init, false); 157 | doc[add](pre + 'readystatechange', init, false); 158 | win[add](pre + 'load', init, false); 159 | } 160 | 161 | } 162 | 163 | // classList polyfill by Remy Sharp 164 | // https://github.com/remy/polyfills/blob/master/classList.js 165 | 166 | (function () { 167 | 168 | if (typeof window.Element === "undefined" || "classList" in document.documentElement) return; 169 | 170 | var prototype = Array.prototype, 171 | push = prototype.push, 172 | splice = prototype.splice, 173 | join = prototype.join; 174 | 175 | function DOMTokenList(el) { 176 | this.el = el; 177 | // The className needs to be trimmed and split on whitespace 178 | // to retrieve a list of classes. 179 | var classes = el.className.replace(/^\s+|\s+$/g,'').split(/\s+/); 180 | for (var i = 0; i < classes.length; i++) { 181 | push.call(this, classes[i]); 182 | } 183 | }; 184 | 185 | DOMTokenList.prototype = { 186 | add: function(token) { 187 | if(this.contains(token)) return; 188 | push.call(this, token); 189 | this.el.className = this.toString(); 190 | }, 191 | contains: function(token) { 192 | return this.el.className.indexOf(token) != -1; 193 | }, 194 | item: function(index) { 195 | return this[index] || null; 196 | }, 197 | remove: function(token) { 198 | if (!this.contains(token)) return; 199 | for (var i = 0; i < this.length; i++) { 200 | if (this[i] == token) break; 201 | } 202 | splice.call(this, i, 1); 203 | this.el.className = this.toString(); 204 | }, 205 | toString: function() { 206 | return join.call(this, ' '); 207 | }, 208 | toggle: function(token) { 209 | if (!this.contains(token)) { 210 | this.add(token); 211 | } else { 212 | this.remove(token); 213 | } 214 | 215 | return this.contains(token); 216 | } 217 | }; 218 | 219 | window.DOMTokenList = DOMTokenList; 220 | 221 | function defineElementGetter (obj, prop, getter) { 222 | if (Object.defineProperty) { 223 | Object.defineProperty(obj, prop,{ 224 | get : getter 225 | }); 226 | } else { 227 | obj.__defineGetter__(prop, getter); 228 | } 229 | } 230 | 231 | defineElementGetter(Element.prototype, 'classList', function () { 232 | return new DOMTokenList(this); 233 | }); 234 | 235 | })(); -------------------------------------------------------------------------------- /images/spinnerBW.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 19 | 21 | 28 | 35 | 44 | 46 | 50 | 54 | 55 | 64 | 73 | 82 | 91 | 100 | 109 | 110 | 130 | 134 | 135 | 137 | 138 | 140 | image/svg+xml 141 | 143 | 144 | 145 | 146 | 147 | 152 | 158 | 164 | 165 | 171 | 177 | 178 | 184 | 190 | 191 | 192 | 193 | -------------------------------------------------------------------------------- /images/spinner.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 19 | 21 | 28 | 35 | 44 | 47 | 51 | 55 | 56 | 65 | 74 | 83 | 92 | 101 | 110 | 111 | 131 | 135 | 136 | 138 | 139 | 141 | image/svg+xml 142 | 144 | 145 | 146 | 147 | 148 | 153 | 159 | 165 | 166 | 172 | 178 | 179 | 185 | 191 | 192 | 193 | 194 | -------------------------------------------------------------------------------- /js/modernizr.min.js: -------------------------------------------------------------------------------- 1 | /* Modernizr (Custom Build) | MIT & BSD 2 | * Build: http://modernizr.com/download/#-shiv-load-cssclasses-svg-geolocation-localstorage-draganddrop 3 | */ 4 | ;window.Modernizr=function(e,t,n){function S(e){f.cssText=e}function x(e,t){return S(prefixes.join(e+";")+(t||""))}function T(e,t){return typeof e===t}function N(e,t){return!!~(""+e).indexOf(t)}function C(e,t,r){for(var i in e){var s=t[e[i]];if(s!==n)return r===!1?e[i]:T(s,"function")?s.bind(r||t):s}return!1}var r="2.8.3",i={},s=!0,o=t.documentElement,u="modernizr",a=t.createElement(u),f=a.style,l,c={}.toString,h={svg:"http://www.w3.org/2000/svg"},p={},d={},v={},m=[],g=m.slice,y,b=function(){function r(r,i){i=i||t.createElement(e[r]||"div"),r="on"+r;var s=r in i;return s||(i.setAttribute||(i=t.createElement("div")),i.setAttribute&&i.removeAttribute&&(i.setAttribute(r,""),s=T(i[r],"function"),T(i[r],"undefined")||(i[r]=n),i.removeAttribute(r))),i=null,s}var e={select:"input",change:"input",submit:"form",reset:"form",error:"img",load:"img",abort:"img"};return r}(),w={}.hasOwnProperty,E;!T(w,"undefined")&&!T(w.call,"undefined")?E=function(e,t){return w.call(e,t)}:E=function(e,t){return t in e&&T(e.constructor.prototype[t],"undefined")},Function.prototype.bind||(Function.prototype.bind=function(t){var n=this;if(typeof n!="function")throw new TypeError;var r=g.call(arguments,1),i=function(){if(this instanceof i){var e=function(){};e.prototype=n.prototype;var s=new e,o=n.apply(s,r.concat(g.call(arguments)));return Object(o)===o?o:s}return n.apply(t,r.concat(g.call(arguments)))};return i}),p.geolocation=function(){return"geolocation"in navigator},p.draganddrop=function(){var e=t.createElement("div");return"draggable"in e||"ondragstart"in e&&"ondrop"in e},p.localstorage=function(){try{return localStorage.setItem(u,u),localStorage.removeItem(u),!0}catch(e){return!1}},p.svg=function(){return!!t.createElementNS&&!!t.createElementNS(h.svg,"svg").createSVGRect};for(var k in p)E(p,k)&&(y=k.toLowerCase(),i[y]=p[k](),m.push((i[y]?"":"no-")+y));return i.addTest=function(e,t){if(typeof e=="object")for(var r in e)E(e,r)&&i.addTest(r,e[r]);else{e=e.toLowerCase();if(i[e]!==n)return i;t=typeof t=="function"?t():t,typeof s!="undefined"&&s&&(o.className+=" "+(t?"":"no-")+e),i[e]=t}return i},S(""),a=l=null,function(e,t){function c(e,t){var n=e.createElement("p"),r=e.getElementsByTagName("head")[0]||e.documentElement;return n.innerHTML="x",r.insertBefore(n.lastChild,r.firstChild)}function h(){var e=y.elements;return typeof e=="string"?e.split(" "):e}function p(e){var t=f[e[u]];return t||(t={},a++,e[u]=a,f[a]=t),t}function d(e,n,r){n||(n=t);if(l)return n.createElement(e);r||(r=p(n));var o;return r.cache[e]?o=r.cache[e].cloneNode():s.test(e)?o=(r.cache[e]=r.createElem(e)).cloneNode():o=r.createElem(e),o.canHaveChildren&&!i.test(e)&&!o.tagUrn?r.frag.appendChild(o):o}function v(e,n){e||(e=t);if(l)return e.createDocumentFragment();n=n||p(e);var r=n.frag.cloneNode(),i=0,s=h(),o=s.length;for(;i",o="hidden"in e,l=e.childNodes.length==1||function(){t.createElement("a");var e=t.createDocumentFragment();return typeof e.cloneNode=="undefined"||typeof e.createDocumentFragment=="undefined"||typeof e.createElement=="undefined"}()}catch(n){o=!0,l=!0}})();var y={elements:r.elements||"abbr article aside audio bdi canvas data datalist details dialog figcaption figure footer header hgroup main mark meter nav output progress section summary template time video",version:n,shivCSS:r.shivCSS!==!1,supportsUnknownElements:l,shivMethods:r.shivMethods!==!1,type:"default",shivDocument:g,createElement:d,createDocumentFragment:v};e.html5=y,g(t)}(this,t),i._version=r,i.hasEvent=b,o.className=o.className.replace(/(^|\s)no-js(\s|$)/,"$1$2")+(s?" js "+m.join(" "):""),i}(this,this.document),function(e,t,n){function r(e){return"[object Function]"==d.call(e)}function i(e){return"string"==typeof e}function s(){}function o(e){return!e||"loaded"==e||"complete"==e||"uninitialized"==e}function u(){var e=v.shift();m=1,e?e.t?h(function(){("c"==e.t?k.injectCss:k.injectJs)(e.s,0,e.a,e.x,e.e,1)},0):(e(),u()):m=0}function a(e,n,r,i,s,a,f){function l(t){if(!d&&o(c.readyState)&&(w.r=d=1,!m&&u(),c.onload=c.onreadystatechange=null,t)){"img"!=e&&h(function(){b.removeChild(c)},50);for(var r in T[n])T[n].hasOwnProperty(r)&&T[n][r].onload()}}var f=f||k.errorTimeout,c=t.createElement(e),d=0,g=0,w={t:r,s:n,e:s,a:a,x:f};1===T[n]&&(g=1,T[n]=[]),"object"==e?c.data=n:(c.src=n,c.type=e),c.width=c.height="0",c.onerror=c.onload=c.onreadystatechange=function(){l.call(this,g)},v.splice(i,0,w),"img"!=e&&(g||2===T[n]?(b.insertBefore(c,y?null:p),h(l,f)):T[n].push(c))}function f(e,t,n,r,s){return m=0,t=t||"j",i(e)?a("c"==t?E:w,e,t,this.i++,n,r,s):(v.splice(this.i++,0,e),1==v.length&&u()),this}function l(){var e=k;return e.loader={load:f,i:0},e}var c=t.documentElement,h=e.setTimeout,p=t.getElementsByTagName("script")[0],d={}.toString,v=[],m=0,g="MozAppearance"in c.style,y=g&&!!t.createRange().compareNode,b=y?c:p.parentNode,c=e.opera&&"[object Opera]"==d.call(e.opera),c=!!t.attachEvent&&!c,w=g?"object":c?"script":"img",E=c?"script":w,S=Array.isArray||function(e){return"[object Array]"==d.call(e)},x=[],T={},N={timeout:function(e,t){return t.length&&(e.timeout=t[0]),e}},C,k;k=function(e){function t(e){var e=e.split("!"),t=x.length,n=e.pop(),r=e.length,n={url:n,origUrl:n,prefixes:e},i,s,o;for(s=0;s7)},r.history=function(){return !!(a.history&&history.pushState)},r.draganddrop=function(){return x("dragstart")&&x("drop")},r.websockets=function(){return"WebSocket"in a},r.rgba=function(){A("background-color:rgba(150,255,150,.5)");return D(k.backgroundColor,"rgba")},r.hsla=function(){A("background-color:hsla(120,40%,100%,.5)");return D(k.backgroundColor,"rgba")||D(k.backgroundColor,"hsla")},r.multiplebgs=function(){A("background:url(//:),url(//:),red url(//:)");return(new RegExp("(url\\s*\\(.*?){3}")).test(k.background)},r.backgroundsize=function(){return F("backgroundSize")},r.borderimage=function(){return F("borderImage")},r.borderradius=function(){return F("borderRadius","",function(a){return D(a,"orderRadius")})},r.boxshadow=function(){return F("boxShadow")},r.textshadow=function(){return b.createElement("div").style.textShadow===""},r.opacity=function(){B("opacity:.55");return/^0.55$/.test(k.opacity)},r.cssanimations=function(){return F("animationName")},r.csscolumns=function(){return F("columnCount")},r.cssgradients=function(){var a="background-image:",b="gradient(linear,left top,right bottom,from(#9f9),to(white));",c="linear-gradient(left top,#9f9, white);";A((a+o.join(b+a)+o.join(c+a)).slice(0,-a.length));return D(k.backgroundImage,"gradient")},r.cssreflections=function(){return F("boxReflect")},r.csstransforms=function(){return!!E(["transformProperty","WebkitTransform","MozTransform","OTransform","msTransform"])},r.csstransforms3d=function(){var a=!!E(["perspectiveProperty","WebkitPerspective","MozPerspective","OPerspective","msPerspective"]);a&&"webkitPerspective"in g.style&&(a=w("@media ("+o.join("transform-3d),(")+"modernizr)"));return a},r.csstransitions=function(){return F("transitionProperty")},r.fontface=function(){var a,c,d=h||g,e=b.createElement("style"),f=b.implementation||{hasFeature:function(){return!1}};e.type="text/css",d.insertBefore(e,d.firstChild),a=e.sheet||e.styleSheet;var i=f.hasFeature("CSS2","")?function(b){if(!a||!b)return!1;var c=!1;try{a.insertRule(b,0),c=/src/i.test(a.cssRules[0].cssText),a.deleteRule(a.cssRules.length-1)}catch(d){}return c}:function(b){if(!a||!b)return!1;a.cssText=b;return a.cssText.length!==0&&/src/i.test(a.cssText)&&a.cssText.replace(/\r+|\n+/g,"").indexOf(b.split(" ")[0])===0};c=i('@font-face { font-family: "font"; src: url(data:,); }'),d.removeChild(e);return c},r.video=function(){var a=b.createElement("video"),c=!!a.canPlayType;if(c){c=new Boolean(c),c.ogg=a.canPlayType('video/ogg; codecs="theora"');var d='video/mp4; codecs="avc1.42E01E';c.h264=a.canPlayType(d+'"')||a.canPlayType(d+', mp4a.40.2"'),c.webm=a.canPlayType('video/webm; codecs="vp8, vorbis"')}return c},r.audio=function(){var a=b.createElement("audio"),c=!!a.canPlayType;c&&(c=new Boolean(c),c.ogg=a.canPlayType('audio/ogg; codecs="vorbis"'),c.mp3=a.canPlayType("audio/mpeg;"),c.wav=a.canPlayType('audio/wav; codecs="1"'),c.m4a=a.canPlayType("audio/x-m4a;")||a.canPlayType("audio/aac;"));return c},r.localstorage=function(){try{return!!localStorage.getItem}catch(a){return!1}},r.sessionstorage=function(){try{return!!sessionStorage.getItem}catch(a){return!1}},r.webWorkers=function(){return!!a.Worker},r.applicationcache=function(){return!!a.applicationCache},r.svg=function(){return!!b.createElementNS&&!!b.createElementNS(q.svg,"svg").createSVGRect},r.inlinesvg=function(){var a=b.createElement("div");a.innerHTML="";return(a.firstChild&&a.firstChild.namespaceURI)==q.svg},r.smil=function(){return!!b.createElementNS&&/SVG/.test(n.call(b.createElementNS(q.svg,"animate")))},r.svgclippaths=function(){return!!b.createElementNS&&/SVG/.test(n.call(b.createElementNS(q.svg,"clipPath")))};for(var H in r)z(r,H)&&(v=H.toLowerCase(),e[v]=r[H](),u.push((e[v]?"":"no-")+v));e.input||G(),e.crosswindowmessaging=e.postmessage,e.historymanagement=e.history,e.addTest=function(a,b){a=a.toLowerCase();if(!e[a]){b=!!b(),g.className+=" "+(b?"":"no-")+a,e[a]=b;return e}},A(""),j=l=null,f&&a.attachEvent&&function(){var a=b.createElement("div");a.innerHTML="";return a.childNodes.length!==1}()&&function(a,b){function p(a,b){var c=-1,d=a.length,e,f=[];while(++c