Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Tree: 3e3fbf0527
Fetching contributors…

Cannot retrieve contributors at this time

291 lines (245 sloc) 7.413 kB
!!!5
%head
%title JPC2000 – JavaScript Production Center
%script{ type: 'text/javascript', src: 'jquery-1.7.1.min.js' }
%script{ type: 'text/javascript', src: 'underscore-min.js' }
%script{ type: 'text/javascript', src: 'backbone-min.js' }
%script{ type: 'text/javascript', src: 'jpc.js' }
%body
:css
* {
border-radius: 5px
}
html {
height: 100%
}
body {
background: #866;
height: 100%;
font-family: "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
text-transform: uppercase;
clear:both;
}
#jpc {
margin: 20px auto 50px;
padding: 10px 30px;
width: 1000px;
height: 620px;
background: -webkit-linear-gradient(bottom, rgb(191,194,188) 0%, rgb(206,210,201) 50%);
position: relative;
box-shadow: 0px 0px 25px #111 inset, 0px 5px 5px #111;
border: 2px solid #333;
border-radius: 20px
}
#left {
float: left;
}
#logo {
margin: 10px 25px;
}
#jpc #logo h1 {
background: url('/logo.png') no-repeat;
width: 370px;
height: 146px;
text-indent: -9999px;
}
#logo h1, #logo h2 {
margin: 5px 0;
}
#logo h2 {
font-weight: 400;
font-size: 90%;
letter-spacing: 4px;
word-spacing: 7px;
color: #555;
}
#logo {
width: 370px;
}
#mhd {
width: 330px;
box-shadow: 0px 1px 1px #222;
position: absolute;
top: 300px;
left: 110px;
-webkit-transform:rotate(350deg)
}
#sticker {
display: inline;
padding: 5px 20px;
border-radius: 10px;
background: #fff;
text-align: center;
background: #71ad1b;
color: #d3d13c;
position: absolute;
top: 370px;
left: 170px;
box-shadow: 0px 1px 1px #222;
-webkit-transform:rotate(2deg)
}
#bezel {
background: -webkit-linear-gradient(bottom, rgb(60,60,60) 0%, rgb(90,90,90) 100%);
padding: 15px;
position: absolute;
top: 25px;
right: 25px;
}
#display {
background: #bdc6b3;
border: 2px solid #aaa;
padding: 15px;
border-top-color: #666;
border-top-width: 3px;
border-bottom-color: #bbb;
box-shadow: 0px 0px 10px #888 inset;
}
#pitch {
-webkit-appearance: none;
background-image: -webkit-linear-gradient(bottom, rgb(41,40,41) 0%, rgb(66,66,66) 47%, rgb(82,79,82) 66%, rgb(56,56,56) 68%);
height:5px;
border: 1px solid #222;
-webkit-transform:rotate(-90deg);
width: 310px;
position: absolute;
left: -90px;
bottom: 250px;
}
#pitch::-webkit-slider-thumb {
-webkit-transform:rotate(-90deg);
-webkit-appearance: none;
background-image:-webkit-linear-gradient(bottom, rgb(242,237,242) 0%, rgb(184,184,184) 24%, rgb(207,207,207) 26%, rgb(230,230,230) 45%, rgb(154,167,218) 46%, rgb(155,177,222) 52%, rgb(255,255,255) 52%, rgb(230,230,230) 77%, rgb(255,255,255) 80%, rgb(212,212,212) 97%, rgb(214,214,214) 95%);
width: 60px;
height: 30px;
border: 2px solid #999;
border-bottom-color: #ddd;
box-shadow: 0px -1px 1px #000
}
#params {
text-transform: lowercase;
color: #555;
}
#params fieldset {
position: absolute;
bottom: 100px;
left: 145px;
width: 245px;
font-size: 90%;
border-color: #ddd
}
#params fieldset input {
margin: 0px 16px 2px;
-webkit-appearance: none;
background: #300;
height:10px;
width: 10px;
border: 1px solid #222
}
#params fieldset input:checked {
background-image: -webkit-radial-gradient(rgb(255,105,105) 2%, rgb(255,0,0) 12%, rgb(59,20,20) 100%);
}
#pads {
width: 535px;
background: -webkit-linear-gradient(bottom, rgb(80,96,97) 0%, rgb(99,119,122) 100%);
padding: 15px;
vertical-align: baseline;
border-radius: 10px;
position: absolute;
right: 25px;
bottom: 25px;
}
#pads button {
background: -webkit-linear-gradient(bottom, rgb(166,166,166) 0%, rgb(189,189,189) 80%, rgb(209,209,209) 96%);
box-shadow: 0 0 3px #222;
border: none;
height: 110px;
width: 110px;
margin: 10px;
color: #444;
text-shadow: 0 1px 2px #fff;
font-size: 90%;
text-align: right;
padding-top: 85px;
display: inline-block;
}
@-webkit-keyframes pad_hit {
0% { background: #f56b6b; }
100% { background: #ca8f8f; }
}
button.pressed {
-webkit-animation: pad_hit 0.1s 1;
}
#pads button.active {
background: #ca8f8f;
}
#transport {
position: absolute;
bottom: 25px;
left: 30px;
}
#transport button {
display: inline-block;
padding: 10px 25px;
margin: 0 5px;
font-size: 90%;
background: -webkit-linear-gradient(bottom, rgb(138,138,138) 0%, rgb(184,184,184) 100%);
color: #444;
box-shadow: 0 1px 2px #222, 0 -1px 1px #666;
border-width: 1px;
text-shadow: 0 1px 2px #fff;
}
#transport button:active {
box-shadow: none;
background: -webkit-linear-gradient(bottom, rgb(160,160,160) 0%, rgb(138,138,138) 100%);
position: relative;
top: 1px
}
%a{ href: 'http://github.com/stevegraham/JPC2000' }
%img{ src: 'https://a248.e.akamai.net/assets.github.com/img/7afbc8b248c68eb468279e8c17986ad46549fb71/687474703a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f6461726b626c75655f3132313632312e706e67', style: 'position: fixed; right: 0; top: 0; z-index: 999;' }
#jpc
#bezel
%canvas#display{ width: '500px', height: '80px' }
%img#mhd{ src: 'mhd_logo.png'}
#sticker
A Stevie Graham Joint
#pads
%button#113.pad q
%button#119.pad w
%button#101.pad e
%button#114.pad r
%button#97.pad a
%button#115.pad s
%button#100.pad d
%button#102.pad f
%button#122.pad z
%button#120.pad x
%button#99.pad c
%button#118.pad v
#right
#logo
%h1 JPC2000
%h2 JavaScript Production Center
#transport
%button#record record
%button#play play
%button#stop stop
%button#undo undo
#params
%fieldset
%legend choke group
%input{ type: 'radio', name: 'choke', value: 1, disabled: 'disabled' } 1
%input{ type: 'radio', name: 'choke', value: 2, disabled: 'disabled' } 2
%input{ type: 'radio', name: 'choke', value: 3, disabled: 'disabled' } 3
%input{ type: 'radio', name: 'choke', value: 4, disabled: 'disabled' } 4
%input#pitch{ type: 'range', min: 0.50, max: 1.50, step: 0.01, value: 1.00 }
:javascript
var GoSquared={};
GoSquared.acct = "GSN-227323-X";
(function(w){
function gs(){
w._gstc_lt=+(new Date); var d=document;
var g = d.createElement("script"); g.type = "text/javascript"; g.async = true; g.src = "//d1l6p2sc9645hc.cloudfront.net/tracker.js";
var s = d.getElementsByTagName("script")[0]; s.parentNode.insertBefore(g, s);
}
w.addEventListener?w.addEventListener("load",gs,false):w.attachEvent("onload",gs);
})(window);
Jump to Line
Something went wrong with that request. Please try again.