144 lines
5.4 KiB
HTML
144 lines
5.4 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<!--
|
||
|
|
/**
|
||
|
|
* Cassette Tape UI Prototype (09/2012)
|
||
|
|
* ALPHA build / experimental state, unsupported; use at own risk
|
||
|
|
* Requires CSS3 border-radius + <canvas> support
|
||
|
|
* http://www.schillmania.com/projects/soundmanager2/
|
||
|
|
*/
|
||
|
|
-->
|
||
|
|
<html>
|
||
|
|
<head>
|
||
|
|
<title>Cassette Tape Prototype: Canvas mask + blur effects version (MA-R90-style design)</title>
|
||
|
|
<meta name="robots" content="noindex" />
|
||
|
|
<meta name="description" content="An experimental web audio player UI based on the TDK MA-R90 cassette tape, a classic metal-alloy cassette model from 1982. Includes slight translucency and blurring effects." />
|
||
|
|
<meta name="keywords" content="javascript sound, html5 audio, css3, cassette tape, tdk, mar, ma-r, mar90, html5 sound, javascript audio, schill, schillmania, soundmanager, soundmanager2" />
|
||
|
|
<meta name="author" content="Scott Schiller" />
|
||
|
|
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
|
||
|
|
<link rel="stylesheet" type="text/css" media="screen" href="css/cassette-tape-ui.css" />
|
||
|
|
<link rel="stylesheet" type="text/css" media="screen" href="css/cassette-tape-ui-blur.css" />
|
||
|
|
<noscript>
|
||
|
|
<!-- Legal? Probably not - but, works. -->
|
||
|
|
<link rel="stylesheet" type="text/css" media="screen" href="css/cassette-tape-ui-blur-nojs.css" />
|
||
|
|
</noscript>
|
||
|
|
<link rel="stylesheet" type="text/css" media="screen" href="css/demo.css" />
|
||
|
|
<script src="../../script/soundmanager2.js"></script>
|
||
|
|
<script src="script/cassette-tape-ui.js"></script>
|
||
|
|
<script src="script/demo.js"></script>
|
||
|
|
</head>
|
||
|
|
|
||
|
|
<body>
|
||
|
|
|
||
|
|
<div id="demo-header-wrapper">
|
||
|
|
<div id="demo-header">
|
||
|
|
<h1>Cassette Tape UI</h1>
|
||
|
|
<p>An exercise in skeuomorphic excess. <a id="nextBackground" href="#next" title="Change background">✭ </a> <a href="more.html" title="More cassette tape prototype designs">more ↬</a> <a href="../../" title="SoundManager 2 homepage">home ↬</a></p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div id="tape-loader">
|
||
|
|
<div class="spinner-box">
|
||
|
|
<div class="spinner"></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!--
|
||
|
|
/**
|
||
|
|
* DIV-tastic! Indeed, tons of elements in this version - but this allows for easy customization.
|
||
|
|
* The basic version (no canvas + blur effects) uses more images for skinning and has a few less elements.
|
||
|
|
*/
|
||
|
|
-->
|
||
|
|
|
||
|
|
<div class="draggable clear ma-r90 cutout tape">
|
||
|
|
<div class="blur-image-wrapper">
|
||
|
|
<canvas class="blur-image"></canvas>
|
||
|
|
</div>
|
||
|
|
<div class="transparency-sheet"></div>
|
||
|
|
<div class="tape-shell image-mask" data-image-repeat="true" data-mask-url="image/ma-r90-mask.png"></div>
|
||
|
|
<div class="tape-gradient image-mask" data-mask-url="image/ma-r90-mask.png"></div>
|
||
|
|
<div class="tab-left">
|
||
|
|
<div class="notch"></div>
|
||
|
|
<div class="ridge"></div>
|
||
|
|
</div>
|
||
|
|
<div class="tab-right">
|
||
|
|
<div class="notch"></div>
|
||
|
|
<div class="ridge"></div>
|
||
|
|
</div>
|
||
|
|
<div class="rail-left"></div>
|
||
|
|
<div class="rail-right"></div>
|
||
|
|
<div class="rail-middle">
|
||
|
|
<div class="rail-middle-outline">
|
||
|
|
<div class="tape-pad-holder">
|
||
|
|
<div class="tape-pad"></div>
|
||
|
|
<div class="tape-pad-line"></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="screw-bm"></div>
|
||
|
|
</div>
|
||
|
|
<div class="screw-tl"></div>
|
||
|
|
<div class="screw-tr"></div>
|
||
|
|
<div class="screw-bl"></div>
|
||
|
|
<div class="screw-br"></div>
|
||
|
|
<div class="screw-tm"></div>
|
||
|
|
<div class="left reel-mask"></div>
|
||
|
|
<div class="right reel-mask"></div>
|
||
|
|
<canvas class="connecting-tape"></canvas>
|
||
|
|
<div class="left reel"></div>
|
||
|
|
<div class="left spokes"></div>
|
||
|
|
<div class="right reel"></div>
|
||
|
|
<div class="right spokes"></div>
|
||
|
|
<div class="progress-notches">
|
||
|
|
<div class="n1"></div>
|
||
|
|
<div class="n2"></div>
|
||
|
|
<div class="n3"></div>
|
||
|
|
<div class="n4"></div>
|
||
|
|
<div class="n5"></div>
|
||
|
|
<div class="n6"></div>
|
||
|
|
<div class="n7"></div>
|
||
|
|
<div class="n8"></div>
|
||
|
|
<div class="n9"></div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- static label version -->
|
||
|
|
<!--
|
||
|
|
<div class="label">Chill With Schill: Mixtape Demo</div>
|
||
|
|
-->
|
||
|
|
|
||
|
|
<!-- editable URL-based label for the demo, you don't need to use this -->
|
||
|
|
<form id="tape-form" action="." method="get" onsubmit="return false">
|
||
|
|
<input class="label" name="tape_url" placeholder="Type an MP3 URL here ..." title="Click to edit and provide your own MP3 URL" value="Chill With Schill: Mixtape Demo" data-default-value="Chill With Schill: Mixtape Demo" />
|
||
|
|
</form>
|
||
|
|
|
||
|
|
<div class="aqua controls">
|
||
|
|
<div class="bd">
|
||
|
|
<ul>
|
||
|
|
<li><a href="#" title="play/pause" class="play">◄</a></li>
|
||
|
|
<li><a href="#" title="rewind" class="rew">«</a></li>
|
||
|
|
<li><a href="#" title="fast-forward" class="ffwd">»</a></li>
|
||
|
|
<li><a href="#" title="stop" class="stop">■</a></li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="thanks">
|
||
|
|
<p>Mixtape demo includes "Render Your Heart" by <a href="http://sonreal.ca/" title="SonReal (official website)">SonReal</a>. For the complete mix, see <a href="http://www.mixcrate.com/schill/chill-with-schill-summer-idj-live-session-169722" title="Chill With Schill: Summer iDJ Live Session (mixcrate)">Chill With Schill: Summer iDJ Live Session</a> on Mixcrate.</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
(function() {
|
||
|
|
window.setTimeout(function() {
|
||
|
|
// transition hack
|
||
|
|
document.getElementById('tape-loader').className = 'visible';
|
||
|
|
}, 1);
|
||
|
|
// oh, what a hack! (demo only: no high-end unicode characters on WinXP)
|
||
|
|
var char = '∞';
|
||
|
|
if (navigator.userAgent.indexOf('Windows NT 5.1') !== -1) {
|
||
|
|
document.getElementById('nextBackground').innerHTML = char + ' ';
|
||
|
|
}
|
||
|
|
}());
|
||
|
|
</script>
|
||
|
|
|
||
|
|
</body>
|
||
|
|
</html>
|