diff --git a/layouts/shortcodes/cassette-player.html b/layouts/shortcodes/cassette-player.html new file mode 100644 index 0000000..c365b7f --- /dev/null +++ b/layouts/shortcodes/cassette-player.html @@ -0,0 +1,2 @@ + +{{ readFile "static/cassette-player/index.html" }} \ No newline at end of file diff --git a/static/cassette-player/ReadMe.md b/static/cassette-player/ReadMe.md new file mode 100644 index 0000000..8b13789 --- /dev/null +++ b/static/cassette-player/ReadMe.md @@ -0,0 +1 @@ + diff --git a/static/cassette-player/css/demo.css b/static/cassette-player/css/demo.css new file mode 100644 index 0000000..7482fe4 --- /dev/null +++ b/static/cassette-player/css/demo.css @@ -0,0 +1,146 @@ +@import url('normalize.css'); +/* Icon font for player controls */ +@font-face { + font-family: 'playericons'; + src: url("fonts/playericons.eot"); + src: url("fonts/playericons.eot?#iefix") format('embedded-opentype'), + url("fonts/playericons.woff") format('woff'), + url("fonts/playericons.ttf") format('truetype'), + url("fonts/playericons.svg#playericons") format('svg'); + font-weight: normal; + font-style: normal; +} +/* General Demo Style */ + +body{ + font-family: Cambria, Georgia, serif; + background: #b6b6b6 url(../images/bg.jpg) fixed no-repeat top center; + font-weight: 400; + font-size: 15px; + color: #333; + overflow-y: scroll; + overflow-x: hidden; +} +a{ + color: #2886BC; + text-decoration: none; +} +a:hover{ + color: #000; +} +.container{ + width: 100%; + position: relative; +} +.clr{ + clear: both; + padding: 0; + height: 0; + margin: 0; +} +.container > header{ + margin: 10px 10px 0px 10px; + padding: 20px 10px 0px 10px; + position: relative; + display: block; + text-shadow: 1px 1px 1px rgba(0,0,0,0.2); + text-align: center; +} +.container > header h1{ + font-family: 'Aldrich'; + font-size: 26px; + line-height: 26px; + margin: 0; + position: relative; + font-weight: 300; + color: #666; + text-shadow: 1px 1px 1px rgba(255,255,255,0.5); +} +.container > header h1 span{ + font-weight: 700; +} +.container > header h2{ + width: 500px; + font-size: 14px; + line-height: 22px; + font-weight: 300; + margin: 0 auto; + padding: 15px 0 5px 0; + color: #666; + font-style: italic; + text-shadow: 1px 1px 1px rgba(255,255,255,0.9); +} +.container > header h2 strong{ + color: #781430; +} + +.main{ + width: 672px; + height: 480px; + padding: 30px 0; + margin: 0 auto; + position: relative; + overflow: hidden; + + -webkit-box-sizing: content-box; + -moz-box-sizing: content-box; + box-sizing: content-box; +} +/* Header Style */ +.codrops-top{ + line-height: 24px; + font-size: 11px; + background: #fff; + background: rgba(255, 255, 255, 0.7); + text-transform: uppercase; + z-index: 9999; + position: relative; + font-family: Cambria, Georgia, serif; + box-shadow: 1px 0px 2px rgba(0,0,0,0.2); +} +.codrops-top a{ + padding: 0px 10px; + letter-spacing: 1px; + color: #333; + display: inline-block; +} +.codrops-top a:hover{ + background: rgba(255,255,255,0.3); +} +.codrops-top span.right{ + float: right; +} +.codrops-top span.right a{ + float: left; + display: block; +} +.attribution{ + width: 600px; + margin: 0 auto; + text-align: center; + padding: 20px 10px 50px; + border-top: 1px solid rgba(255,255,255,0.5); + box-shadow: 0 -1px 0 rgba(0,0,0,0.1); + text-shadow: 0 1px 1px rgba(255,255,255,0.8); + font-size: 10px; + font-family: 'Aldrich'; + text-transform: uppercase; + font-weight: 300; + letter-spacing: 1px; + color: #666; +} + +.support-note span{ + color: #ac375d; + font-size: 16px; + display: none; + font-weight: bold; + text-align: center; + padding: 5px 0; +} +.no-cssanimations .support-note span.no-cssanimations, +.no-csstransforms .support-note span.no-csstransforms, +.no-csstransforms3d .support-note span.no-csstransforms3d, +.no-csstransitions .support-note span.no-csstransitions{ + display: block; +} \ No newline at end of file diff --git a/static/cassette-player/css/fonts/LICENSE.txt b/static/cassette-player/css/fonts/LICENSE.txt new file mode 100644 index 0000000..45412e9 --- /dev/null +++ b/static/cassette-player/css/fonts/LICENSE.txt @@ -0,0 +1,12 @@ +Font license info + + +## Font Awesome + + Copyright (C) 2012 by Dave Gandy + + Author: Dave Gandy + License: CC BY 3.0 (http://creativecommons.org/licenses/by/3.0/) + Homepage: http://fortawesome.github.com/Font-Awesome/ + + diff --git a/static/cassette-player/css/fonts/README.txt b/static/cassette-player/css/fonts/README.txt new file mode 100644 index 0000000..0a85785 --- /dev/null +++ b/static/cassette-player/css/fonts/README.txt @@ -0,0 +1,33 @@ +This webfont is generated by http://fontello.com open source project. + + +================================================================================ +Please, note, that you should obey original font licences, used to make this +webfont pack. Details available in LICENSE.txt file. + +- Usually, it's enougth to publish content of LICENSE.txt file somewhere on your + site in "About" section. + +- If your project is open-source, usually, it will be ok to make LICENSE.txt + file publically available in your repository. + +- Fonts, used in Fontello, don't require to make clickable links on your site. + But any kind of additional authors crediting is welcome. +================================================================================ + + +Comments on archive content +--------------------------- + +- /font/* - fonts in different formats + +- /css/* - different kinds of css, for all situations. Should be ok with + twitter bootstrap. Also, you can skip style and assign icon classes + directly to text elements + +- demo.html - demo file, to show your webfont content + +- LICENSE.txt - license info about source fonts, used to build your one. + +- config.json - keeps your settings. You can import it back to fontello anytime, + to continue your work \ No newline at end of file diff --git a/static/cassette-player/css/fonts/playericons.eot b/static/cassette-player/css/fonts/playericons.eot new file mode 100644 index 0000000..527c29e Binary files /dev/null and b/static/cassette-player/css/fonts/playericons.eot differ diff --git a/static/cassette-player/css/fonts/playericons.svg b/static/cassette-player/css/fonts/playericons.svg new file mode 100644 index 0000000..7c03071 --- /dev/null +++ b/static/cassette-player/css/fonts/playericons.svg @@ -0,0 +1,53 @@ + + + + +Created by FontForge 20100429 at Mon Jul 9 13:20:52 2012 + By root +Copyright (C) 2012 by original authors @ fontello.com + + + + + + + + + + + + + + + + + + diff --git a/static/cassette-player/css/fonts/playericons.ttf b/static/cassette-player/css/fonts/playericons.ttf new file mode 100644 index 0000000..8715853 Binary files /dev/null and b/static/cassette-player/css/fonts/playericons.ttf differ diff --git a/static/cassette-player/css/fonts/playericons.woff b/static/cassette-player/css/fonts/playericons.woff new file mode 100644 index 0000000..62490f4 Binary files /dev/null and b/static/cassette-player/css/fonts/playericons.woff differ diff --git a/static/cassette-player/css/knobKnob.css b/static/cassette-player/css/knobKnob.css new file mode 100644 index 0000000..625e19f --- /dev/null +++ b/static/cassette-player/css/knobKnob.css @@ -0,0 +1,50 @@ +/*---------------------------- + knobKnob Styles +-----------------------------*/ +.knob{ + width: 100px; + height: 100px; + position: relative; +} + +.knob .top{ + position: absolute; + width: 100%; + height: 100%; + background: url(../images/knob.jpg) no-repeat center center; + z-index: 10; + cursor: default !important; + border-radius: 50%; + box-shadow: inset 0 0 3px 2px rgba(255,255,255,0.6); +} + +.knob .base{ + width: 100%; + height: 100%; + box-shadow: 0 5px 0 #555, 0px 5px 5px black; + position: absolute; + z-index: 1; + border-radius: 50%; +} + +.knob .top:after{ + content: ''; + width: 4px; + height: 4px; + background-color: #666; + position: absolute; + top: 50%; + margin-top: -2px; + left: 4px; + border-radius: 50%; + cursor: default !important; + box-shadow: + 0 0 1px #5a5a5a inset, + 1px -1px 1px rgba(255,255,255,0.5); +} + +.knob [draggable] { + -moz-user-select: none; + -webkit-user-select: none; + user-select: none; +} \ No newline at end of file diff --git a/static/cassette-player/css/normalize.css b/static/cassette-player/css/normalize.css new file mode 100644 index 0000000..32987cf --- /dev/null +++ b/static/cassette-player/css/normalize.css @@ -0,0 +1,512 @@ +/*! normalize.css 2012-03-11T12:53 UTC - http://github.com/necolas/normalize.css */ + +/* ============================================================================= + HTML5 display definitions + ========================================================================== */ + +/* + * Corrects block display not defined in IE6/7/8/9 & FF3 + */ + +article, +aside, +details, +figcaption, +figure, +footer, +header, +hgroup, +nav, +section, +summary { + display: block; +} + +/* + * Corrects inline-block display not defined in IE6/7/8/9 & FF3 + */ + +audio, +canvas, +video { + display: inline-block; + *display: inline; + *zoom: 1; +} + +/* + * Prevents modern browsers from displaying 'audio' without controls + * Remove excess height in iOS5 devices + */ + +audio:not([controls]) { + display: none; + height: 0; +} + +/* + * Addresses styling for 'hidden' attribute not present in IE7/8/9, FF3, S4 + * Known issue: no IE6 support + */ + +[hidden] { + display: none; +} + + +/* ============================================================================= + Base + ========================================================================== */ + +/* + * 1. Corrects text resizing oddly in IE6/7 when body font-size is set using em units + * http://clagnut.com/blog/348/#c790 + * 2. Prevents iOS text size adjust after orientation change, without disabling user zoom + * www.456bereastreet.com/archive/201012/controlling_text_size_in_safari_for_ios_without_disabling_user_zoom/ + */ + +html { + font-size: 100%; /* 1 */ + -webkit-text-size-adjust: 100%; /* 2 */ + -ms-text-size-adjust: 100%; /* 2 */ +} + +/* + * Addresses font-family inconsistency between 'textarea' and other form elements. + */ + +html, +button, +input, +select, +textarea { + font-family: sans-serif; +} + +/* + * Addresses margins handled incorrectly in IE6/7 + */ + +body { + margin: 0; +} + + +/* ============================================================================= + Links + ========================================================================== */ + +/* + * Addresses outline displayed oddly in Chrome + */ + +a:focus { + outline: thin dotted; +} + +/* + * Improves readability when focused and also mouse hovered in all browsers + * people.opera.com/patrickl/experiments/keyboard/test + */ + +a:hover, +a:active { + outline: 0; +} + + +/* ============================================================================= + Typography + ========================================================================== */ + +/* + * Addresses font sizes and margins set differently in IE6/7 + * Addresses font sizes within 'section' and 'article' in FF4+, Chrome, S5 + */ + +h1 { + font-size: 2em; + margin: 0.67em 0; +} + +h2 { + font-size: 1.5em; + margin: 0.83em 0; +} + +h3 { + font-size: 1.17em; + margin: 1em 0; +} + +h4 { + font-size: 1em; + margin: 1.33em 0; +} + +h5 { + font-size: 0.83em; + margin: 1.67em 0; +} + +h6 { + font-size: 0.75em; + margin: 2.33em 0; +} + +/* + * Addresses styling not present in IE7/8/9, S5, Chrome + */ + +abbr[title] { + border-bottom: 1px dotted; +} + +/* + * Addresses style set to 'bolder' in FF3+, S4/5, Chrome +*/ + +b, +strong { + font-weight: bold; +} + +blockquote { + margin: 1em 40px; +} + +/* + * Addresses styling not present in S5, Chrome + */ + +dfn { + font-style: italic; +} + +/* + * Addresses styling not present in IE6/7/8/9 + */ + +mark { + background: #ff0; + color: #000; +} + +/* + * Addresses margins set differently in IE6/7 + */ + +p, +pre { + margin: 1em 0; +} + +/* + * Corrects font family set oddly in IE6, S4/5, Chrome + * en.wikipedia.org/wiki/User:Davidgothberg/Test59 + */ + +pre, +code, +kbd, +samp { + font-family: monospace, serif; + _font-family: 'courier new', monospace; + font-size: 1em; +} + +/* + * Improves readability of pre-formatted text in all browsers + */ + +pre { + white-space: pre; + white-space: pre-wrap; + word-wrap: break-word; +} + +/* + * 1. Addresses CSS quotes not supported in IE6/7 + * 2. Addresses quote property not supported in S4 + */ + +/* 1 */ + +q { + quotes: none; +} + +/* 2 */ + +q:before, +q:after { + content: ''; + content: none; +} + +small { + font-size: 75%; +} + +/* + * Prevents sub and sup affecting line-height in all browsers + * gist.github.com/413930 + */ + +sub, +sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; +} + +sup { + top: -0.5em; +} + +sub { + bottom: -0.25em; +} + + +/* ============================================================================= + Lists + ========================================================================== */ + +/* + * Addresses margins set differently in IE6/7 + */ + +dl, +menu, +ol, +ul { + margin: 1em 0; +} + +dd { + margin: 0 0 0 40px; +} + +/* + * Addresses paddings set differently in IE6/7 + */ + +menu, +ol, +ul { + padding: 0 0 0 40px; +} + +/* + * Corrects list images handled incorrectly in IE7 + */ + +nav ul, +nav ol { + list-style: none; + list-style-image: none; +} + + +/* ============================================================================= + Embedded content + ========================================================================== */ + +/* + * 1. Removes border when inside 'a' element in IE6/7/8/9, FF3 + * 2. Improves image quality when scaled in IE7 + * code.flickr.com/blog/2008/11/12/on-ui-quality-the-little-things-client-side-image-resizing/ + */ + +img { + border: 0; /* 1 */ + -ms-interpolation-mode: bicubic; /* 2 */ +} + +/* + * Corrects overflow displayed oddly in IE9 + */ + +svg:not(:root) { + overflow: hidden; +} + + +/* ============================================================================= + Figures + ========================================================================== */ + +/* + * Addresses margin not present in IE6/7/8/9, S5, O11 + */ + +figure { + margin: 0; + -webkit-margin-before: 0; + -webkit-margin-after: 0; + -webkit-margin-start: 0; + -webkit-margin-end: 0; +} + + +/* ============================================================================= + Forms + ========================================================================== */ + +/* + * Corrects margin displayed oddly in IE6/7 + */ + +form { + margin: 0; +} + +/* + * Define consistent border, margin, and padding + */ + +fieldset { + border: 1px solid #c0c0c0; + margin: 0 2px; + padding: 0.35em 0.625em 0.75em; +} + +/* + * 1. Corrects color not being inherited in IE6/7/8/9 + * 2. Corrects text not wrapping in FF3 + * 3. Corrects alignment displayed oddly in IE6/7 + */ + +legend { + border: 0; /* 1 */ + padding: 0; + white-space: normal; /* 2 */ + *margin-left: -7px; /* 3 */ +} + +/* + * 1. Corrects font size not being inherited in all browsers + * 2. Addresses margins set differently in IE6/7, FF3+, S5, Chrome + * 3. Improves appearance and consistency in all browsers + */ + +button, +input, +select, +textarea { + font-size: 100%; /* 1 */ + margin: 0; /* 2 */ + vertical-align: baseline; /* 3 */ + *vertical-align: middle; /* 3 */ +} + +/* + * Addresses FF3/4 setting line-height on 'input' using !important in the UA stylesheet + */ + +button, +input { + line-height: normal; /* 1 */ +} + +/* + * 1. Improves usability and consistency of cursor style between image-type 'input' and others + * 2. Corrects inability to style clickable 'input' types in iOS + * 3. Removes inner spacing in IE7 without affecting normal text inputs + * Known issue: inner spacing remains in IE6 + */ + +button, +input[type="button"], +input[type="reset"], +input[type="submit"] { + cursor: pointer; /* 1 */ + -webkit-appearance: button; /* 2 */ + *overflow: visible; /* 3 */ +} + +/* + * Re-set default cursor for disabled elements + */ + +button[disabled], +input[disabled] { + cursor: default; +} + +/* + * 1. Addresses box sizing set to content-box in IE8/9 + * 2. Removes excess padding in IE8/9 + * 3. Removes excess padding in IE7 + Known issue: excess padding remains in IE6 + */ + +input[type="checkbox"], +input[type="radio"] { + box-sizing: border-box; /* 1 */ + padding: 0; /* 2 */ + *height: 13px; /* 3 */ + *width: 13px; /* 3 */ +} + +/* + * 1. Addresses appearance set to searchfield in S5, Chrome + * 2. Addresses box-sizing set to border-box in S5, Chrome (include -moz to future-proof) + */ + +input[type="search"] { + -webkit-appearance: textfield; /* 1 */ + -moz-box-sizing: content-box; + -webkit-box-sizing: content-box; /* 2 */ + box-sizing: content-box; +} + +/* + * Removes inner padding and search cancel button in S5, Chrome on OS X + */ + +input[type="search"]::-webkit-search-decoration, +input[type="search"]::-webkit-search-cancel-button { + -webkit-appearance: none; +} + +/* + * Removes inner padding and border in FF3+ + * www.sitepen.com/blog/2008/05/14/the-devils-in-the-details-fixing-dojos-toolbar-buttons/ + */ + +button::-moz-focus-inner, +input::-moz-focus-inner { + border: 0; + padding: 0; +} + +/* + * 1. Removes default vertical scrollbar in IE6/7/8/9 + * 2. Improves readability and alignment in all browsers + */ + +textarea { + overflow: auto; /* 1 */ + vertical-align: top; /* 2 */ +} + + +/* ============================================================================= + Tables + ========================================================================== */ + +/* + * Remove most spacing between table cells + */ + +table { + border-collapse: collapse; + border-spacing: 0; +} +/* Addition */ +/* apply a natural box layout model to all elements */ +/* By Paul Irish: http://paulirish.com/2012/box-sizing-border-box-ftw/ */ + * { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } \ No newline at end of file diff --git a/static/cassette-player/css/style.css b/static/cassette-player/css/style.css new file mode 100644 index 0000000..5bab682 --- /dev/null +++ b/static/cassette-player/css/style.css @@ -0,0 +1,315 @@ + +/* Main container */ +.vc-container{ + text-align: center; + height: 500px; + margin-bottom: 50px; + position: relative; +} + +/* Tape elements */ +.vc-tape-wrapper{ + -webkit-perspective: 800px; + -moz-perspective: 800px; + -o-perspective: 800px; + -ms-perspective: 800px; + perspective: 800px; +} +.vc-tape{ + width: 586px; + height: 379px; + margin: 30px auto 0; + position: relative; + -webkit-transition: all .4s ease-in-out; + -moz-transition: all .4s ease-in-out; + -o-transition: all .4s ease-in-out; + -ms-transition: all .4s ease-in-out; + transition: all .4s ease-in-out; +} +.vc-loader{ + position: absolute; + width: 31px; + height: 31px; + bottom: 50px; + left: 50%; + margin: -15px 0 0 -15px; + background: transparent url(../images/ajax-loader.gif) no-repeat center center; + display: none; +} +.vc-tape-back{ + width: 100%; + height: 100%; + position: relative; + background: transparent url(../images/cs_back.png) no-repeat center center; +} +.vc-tape-wheel{ + width: 125px; + height: 125px; + position: absolute; + top: 110px; + background: transparent; + border-radius: 50%; +} +.vc-tape-wheel-left{ + left: 109px; + box-shadow: 0 0 0 70px #000; +} +.vc-tape-wheel-right{ + right: 113px; +} +@-webkit-keyframes rotateLeft { + 0% { -webkit-transform: rotate(0deg) translateZ(-1px); } + 100% { -webkit-transform: rotate(-360deg) translateZ(-1px); } +} +@-webkit-keyframes rotateRight { + 0% { -webkit-transform: rotate(0deg) translateZ(-1px); } + 100% { -webkit-transform: rotate(360deg) translateZ(-1px); } +} +@-moz-keyframes rotateLeft { + 0% { -moz-transform: rotate(0deg) translateZ(-1px); } + 100% { -moz-transform: rotate(-360deg) translateZ(-1px); } +} +@-moz-keyframes rotateRight { + 0% { -moz-transform: rotate(0deg) translateZ(-1px); } + 100% { -moz-transform: rotate(360deg) translateZ(-1px); } +} +@-o-keyframes rotateLeft { + 0% { -o-transform: rotate(0deg) translateZ(-1px); } + 100% { -o-transform: rotate(-360deg) translateZ(-1px); } +} +@-o-keyframes rotateRight { + 0% { -o-transform: rotate(0deg) translateZ(-1px); } + 100% { -o-transform: rotate(360deg) translateZ(-1px); } +} +@-ms-keyframes rotateLeft { + 0% { -ms-transform: rotate(0deg) translateZ(-1px); } + 100% { -ms-transform: rotate(-360deg) translateZ(-1px); } +} +@-ms-keyframes rotateRight { + 0% { -ms-transform: rotate(0deg) translateZ(-1px); } + 100% { -ms-transform: rotate(360deg) translateZ(-1px); } +} +@keyframes rotateLeft { + 0% { transform: rotate(0deg) translateZ(-1px); } + 100% { transform: rotate(-360deg) translateZ(-1px); } +} +@keyframes rotateRight { + 0% { transform: rotate(0deg) translateZ(-1px); } + 100% { transform: rotate(360deg) translateZ(-1px); } +} +.vc-tape-wheel div{ + width: 100%; + height: 100%; + background: transparent url(../images/cs_wheel.png) no-repeat center center; +} +.vc-tape-front{ + width: 100%; + height: 100%; + position: absolute; + background: transparent url(../images/cs_front.png) no-repeat center center; + top: 0px; + left: 0px; +} +.vc-tape-side-b{ + display: none; + -webkit-transform: rotate3d(0, 1, 0, 180deg); + -moz-transform: rotate3d(0, 1, 0, 180deg); + -o-transform: rotate3d(0, 1, 0, 180deg); + -ms-transform: rotate3d(0, 1, 0, 180deg); + transform: rotate3d(0, 1, 0, 180deg); +} + +.vc-tape-front span{ + color: rgba(0, 0, 0, 0.6); + position: absolute; + top: 83px; + left: 67px; + font-family: Arial; + font-weight: bold; + font-size: 20px; +} + +/* Controls list */ +ul.vc-controls{ + list-style: none; + padding: 0; + width: 440px; + position: absolute; + bottom: 18px; + left: 50%; + margin: 0 0 0 -170px; + background: -moz-linear-gradient(top, rgba(170,170,170,0.35) 0%, rgba(255,255,255,0.44) 50%, rgba(255,255,255,0.53) 100%); + background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(170,170,170,0.35)), color-stop(50%,rgba(255,255,255,0.44)), color-stop(100%,rgba(255,255,255,0.53))); + background: -webkit-linear-gradient(top, rgba(170,170,170,0.35) 0%,rgba(255,255,255,0.44) 50%,rgba(255,255,255,0.53) 100%); + background: -o-linear-gradient(top, rgba(170,170,170,0.35) 0%,rgba(255,255,255,0.44) 50%,rgba(255,255,255,0.53) 100%); + background: -ms-linear-gradient(top, rgba(170,170,170,0.35) 0%,rgba(255,255,255,0.44) 50%,rgba(255,255,255,0.53) 100%); + background: linear-gradient(to bottom, rgba(170,170,170,0.35) 0%,rgba(255,255,255,0.44) 50%,rgba(255,255,255,0.53) 100%); + filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#59aaaaaa', endColorstr='#87ffffff',GradientType=0 ); + border: 1px solid rgba(0,0,0,0.1); + border-bottom-color: rgba(255,255,255,0.6); + padding: 8px; + height: 54px; + box-shadow: + inset 0 1px 0px rgba(0,0,0,0.05), + 0 1px 0 rgba(255,255,255,0.8), + 0 -1px 0 rgba(255,255,255,0.4), + inset 0 2px 19px rgba(0,0,0,0.05), + 0 2px 1px rgba(0,0,0,0.06); + -webkit-box-sizing: content-box; + -moz-box-sizing: content-box; + box-sizing: content-box; + border-radius: 12px; +} + +/* Controls list items */ +ul.vc-controls li { + display: block; + float: left; + width: 80px; + height: 50px; + line-height: 55px; + text-align: left; + padding: 10px; + margin: 0; + cursor: pointer; + background: #ddd url(../images/metal.jpg) no-repeat center top; + box-shadow: + inset 0 0 0 1px rgba(0,0,0, 0.2), + inset 0 0 1px 2px rgba(255,255,255,0.9), + inset 0 -6px 5px rgba(0,0,0,0.1), + 0 6px 7px rgba(0,0,0,0.3), + 0 4px 1px rgba(0,0,0,0.5); + -webkit-touch-callout: none; + -webkit-user-select: none; + -khtml-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; +} + +ul.vc-controls li:first-child{ + border-radius: 8px 0 0 8px; +} + +ul.vc-controls li:last-child{ + border-radius: 0px 8px 8px 0px; +} + +ul.vc-controls li.vc-control-play{ + width: 120px; +} + +/* Control icons */ +ul.vc-controls li span:before{ + font-size: 16px; + line-height: 50px; + text-align: center; + float: left; + color: #444; + font-family: 'playericons'; + text-shadow: 1px 1px 1px rgba(255,255,255,0.9); + font-style: normal; + font-weight: normal; + text-transform: none; + speak: none; + display: inline-block; + text-decoration: inherit; + width: 1em; + margin-right: 0.2em; + text-align: center; +} + +li.vc-control-pause span:before { content: '\50'; } +li.vc-control-fforward span:before { content: '\23e9'; } +li.vc-control-rewind span:before { content: '\23ea'; } +li.vc-control-stop span:before { content: '\25aa'; } +li.vc-control-play span:before { content: '\70'; } +li.vc-control-volume-off span:before { content: '🔇'; } +li.vc-control-volume-down span:before { content: '🔉'; } +li.vc-control-volume-up span:before { content: '🔊'; } + +ul.vc-controls li:hover{ + box-shadow: + inset 0 0 0 1px rgba(0,0,0, 0.2), + inset 0 0 1px 2px rgba(255,255,255,0.9), + inset 0 -10px 15px rgba(0,0,0,0.1), + 0 6px 7px rgba(0,0,0,0.3), + 0 4px 1px rgba(0,0,0,0.5); +} + +/* Pressed (active) */ +ul.vc-controls li.vc-control-active{ + height: 50px; + margin-top: 2px; + background-image: url(../images/metal_dark.jpg); + box-shadow: + inset 0 0 0 1px rgba(0,0,0, 0.18), + inset 0 0 1px 2px rgba(255,255,255,0.5), + inset 0 -6px 5px rgba(0,0,0,0.1), + 0 6px 7px rgba(0,0,0,0.3), + 0 2px 1px rgba(0,0,0,0.5); + +} + +/* Activated */ +ul.vc-controls li.vc-control-pressed, +ul.vc-controls li.vc-control-active.vc-control-pressed{ + height: 50px; + background-image: url(../images/metal_dark.jpg); + margin-top: 4px; + box-shadow: + inset 0 0 0 1px rgba(0,0,0, 0.2), + inset 0 0 5px 1px rgba(255,255,255,0.5), + inset 0 -10px 15px rgba(0,0,0,0.2), + 0 7px 5px rgba(255,255,255,0.5); +} + +/* +Background for the volume knob +See knobKnob.css for the knob style +*/ +.vc-volume-wrap{ + width: 100px; + height: 100px; + position: absolute; + bottom: 0px; + left: 50%; + margin-left: -318px; + background: -moz-linear-gradient(top, rgba(170,170,170,0.35) 0%, rgba(255,255,255,0.44) 50%, rgba(255,255,255,0.53) 100%); + background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(170,170,170,0.35)), color-stop(50%,rgba(255,255,255,0.44)), color-stop(100%,rgba(255,255,255,0.53))); + background: -webkit-linear-gradient(top, rgba(170,170,170,0.35) 0%,rgba(255,255,255,0.44) 50%,rgba(255,255,255,0.53) 100%); + background: -o-linear-gradient(top, rgba(170,170,170,0.35) 0%,rgba(255,255,255,0.44) 50%,rgba(255,255,255,0.53) 100%); + background: -ms-linear-gradient(top, rgba(170,170,170,0.35) 0%,rgba(255,255,255,0.44) 50%,rgba(255,255,255,0.53) 100%); + background: linear-gradient(to bottom, rgba(170,170,170,0.35) 0%,rgba(255,255,255,0.44) 50%,rgba(255,255,255,0.53) 100%); + filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#59aaaaaa', endColorstr='#87ffffff',GradientType=0 ); + border: 1px solid rgba(0,0,0,0.1); + border-radius: 50%; + padding: 8px; + box-shadow: + inset 0 1px 0px rgba(0,0,0,0.05), + 0 1px 0 rgba(255,255,255,0.6), + 0 -1px 0 rgba(255,255,255,0.4), + inset 0 2px 19px rgba(0,0,0,0.05), + 0 2px 1px rgba(0,0,0,0.06); + -webkit-box-sizing: content-box; + -moz-box-sizing: content-box; + box-sizing: content-box; +} + +.vc-volume-wrap:after{ + content: 'Volume'; + margin-top: 15px; + display: block; +} + +/* Text style for controls */ +ul.vc-controls li, +.vc-volume-wrap:after{ + font-family: 'Aldrich'; + font-size: 10px; + font-weight: 300; + text-transform: uppercase; + letter-spacing: 1px; + color: #666; + text-shadow: 0 1px 1px rgba(255,255,255,0.8); +} diff --git a/static/cassette-player/images/AttributionsImages.txt b/static/cassette-player/images/AttributionsImages.txt new file mode 100644 index 0000000..431066b --- /dev/null +++ b/static/cassette-player/images/AttributionsImages.txt @@ -0,0 +1,2 @@ + +Cassette Tape by Mauricio Estrella http://manicho.deviantart.com/art/Cassette-PSD-File-86548493 \ No newline at end of file diff --git a/static/cassette-player/images/ajax-loader.gif b/static/cassette-player/images/ajax-loader.gif new file mode 100644 index 0000000..6d57ce4 Binary files /dev/null and b/static/cassette-player/images/ajax-loader.gif differ diff --git a/static/cassette-player/images/bg.jpg b/static/cassette-player/images/bg.jpg new file mode 100644 index 0000000..b035f82 Binary files /dev/null and b/static/cassette-player/images/bg.jpg differ diff --git a/static/cassette-player/images/cs_back.png b/static/cassette-player/images/cs_back.png new file mode 100644 index 0000000..9264c5f Binary files /dev/null and b/static/cassette-player/images/cs_back.png differ diff --git a/static/cassette-player/images/cs_front.png b/static/cassette-player/images/cs_front.png new file mode 100644 index 0000000..83ad1ee Binary files /dev/null and b/static/cassette-player/images/cs_front.png differ diff --git a/static/cassette-player/images/cs_wheel.png b/static/cassette-player/images/cs_wheel.png new file mode 100644 index 0000000..b33b418 Binary files /dev/null and b/static/cassette-player/images/cs_wheel.png differ diff --git a/static/cassette-player/images/knob.jpg b/static/cassette-player/images/knob.jpg new file mode 100644 index 0000000..cbdb2b0 Binary files /dev/null and b/static/cassette-player/images/knob.jpg differ diff --git a/static/cassette-player/images/metal.jpg b/static/cassette-player/images/metal.jpg new file mode 100644 index 0000000..662a850 Binary files /dev/null and b/static/cassette-player/images/metal.jpg differ diff --git a/static/cassette-player/images/metal_dark.jpg b/static/cassette-player/images/metal_dark.jpg new file mode 100644 index 0000000..3672e82 Binary files /dev/null and b/static/cassette-player/images/metal_dark.jpg differ diff --git a/static/cassette-player/index.html b/static/cassette-player/index.html new file mode 100644 index 0000000..414f95f --- /dev/null +++ b/static/cassette-player/index.html @@ -0,0 +1,69 @@ + + + + Old School Cassette Player with HTML5 Audio + + + + + + + + + + + + + + +
+ + + + +
+ CSS animations are not supported in your browser + CSS transforms are not supported in your browser + CSS 3D transforms are not supported in your browser + CSS transitions are not supported in your browser + Sorry, only modern browsers. +
+ + + +
+
+
+
+
+
+
+
+ A +
+
+ B +
+
+
+
+
+ + +
+ + + + + + + + + + \ No newline at end of file diff --git a/static/cassette-player/js/jquery.cassette.js b/static/cassette-player/js/jquery.cassette.js new file mode 100644 index 0000000..0c4aac2 --- /dev/null +++ b/static/cassette-player/js/jquery.cassette.js @@ -0,0 +1,1000 @@ +/** + * jquery.cxassette.js v1.0.0 + * http://www.codrops.com + * + * Licensed under the MIT license. + * http://www.opensource.org/licenses/mit-license.php + * + * Copyright 2012, Codrops + * http://www.codrops.com + */ + +( function( window, $, undefined ) { + + var aux = { + + getSupportedType : function() { + + var audio = document.createElement( 'audio' ); + + if ( audio.canPlayType('audio/mpeg;') ) { + + return 'mp3'; + + } + else if ( audio.canPlayType('audio/ogg;') ) { + + return 'ogg'; + + } + else { + + return 'wav'; + + } + + } + + }; + + // Cassette obj + $.Cassette = function( options, element ) { + + this.$el = $( element ); + this._init( options ); + + }; + + $.Cassette.defaults = { + // song names. Assumes the path of each song is songs/name.filetype + songs : [ 'BlueDucks_FourFlossFiveSix', 'BlankKytt_ThursdaySnowReprise', 'BlueDucks_FlossSuffersFromGammaRadiation', 'BlankKyt_RSPN' ], + fallbackMessage : 'HTML5 audio not supported', + // initial sound volume + initialVolume : 0.7 + }; + + $.Cassette.prototype = { + + _init : function( options ) { + + var _self = this; + + // the options + this.options = $.extend( true, {}, $.Cassette.defaults, options ); + + // current side of the tape + this.currentSide = 1; + // current time of playing side + this.cntTime = 0; + // current sum of the duration of played songs + this.timeIterator = 0; + // used for rewind / forward + this.elapsed = 0.0; + // action performed + this.lastaction = ''; + // if play / forward / rewind active.. + this.isMoving = false; + + this.$loader = this.$el.find( 'div.vc-loader' ).show(); + + // create cassette sides + $.when( this._createSides() ).done( function() { + + _self.$loader.hide(); + + // create player + _self._createPlayer(); + _self.sound = new $.Sound(); + // load events + _self._loadEvents(); + + } ); + + }, + _getSide : function() { + + return ( this.currentSide === 1 ) ? { + current : this.side1, + reverse : this.side2 + } : { + current : this.side2, + reverse : this.side1 + }; + + }, + // songs are distributed equally on both sides + _createSides : function() { + + var playlistSide1 = [], + playlistSide2 = [], + _self = this, + cnt = 0; + + return $.Deferred( + + function( dfd ) { + + for( var i = 0, len = _self.options.songs.length; i < len; ++i ) { + + var song = new $.Song( _self.options.songs[i], i ); + + $.when( song.loadMetadata() ).done( function( song ) { + + ( song.id < len / 2 ) ? playlistSide1.push( song ) : playlistSide2.push( song ); + + ++cnt; + + if( cnt === len ) { + + // two sides, each side with multiple songs + _self.side1 = new $.Side( 'side1', playlistSide1, 'start' ), + _self.side2 = new $.Side( 'side2', playlistSide2, 'end' ); + + dfd.resolve(); + + } + + } ); + + } + + } + + ).promise(); + + }, + _createPlayer : function() { + + // create HTML5 audio element + this.$audioEl = $( '' ); + this.$el.prepend( this.$audioEl ); + + this.audio = this.$audioEl.get(0); + + // create custom controls + this._createControls(); + + this.$theTape = this.$el.find( 'div.vc-tape' ); + this.$wheelLeft = this.$theTape.find( 'div.vc-tape-wheel-left' ); + this.$wheelRight= this.$theTape.find( 'div.vc-tape-wheel-right' ); + this.$tapeSideA = this.$theTape.find( 'div.vc-tape-side-a' ).show(); + this.$tapeSideB = this.$theTape.find( 'div.vc-tape-side-b' ); + + }, + _createControls : function() { + + var _self = this; + + this.$controls = $( '