Permalink
Browse files

redid stylez

  • Loading branch information...
1 parent baf3bb1 commit a0c98b6314f5cf25a1756564f19af56bdb41dfba @grimmdude committed Nov 24, 2011
View
@@ -0,0 +1,176 @@
+/*RESET*/
+
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, font, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td {
+ margin: 0;
+ padding: 0;
+ border: 0;
+ outline: 0;
+ font-size: 100%;
+ vertical-align: baseline;
+ background: transparent;
+}
+body {
+ line-height: 1;
+}
+ol, ul {
+ list-style: none;
+}
+blockquote, q {
+ quotes: none;
+}
+blockquote:before, blockquote:after,
+q:before, q:after {
+ content: '';
+ content: none;
+}
+
+/* remember to define focus styles! */
+:focus {
+ outline: 0;
+}
+
+/* remember to highlight inserts somehow! */
+ins {
+ text-decoration: none;
+}
+del {
+ text-decoration: line-through;
+}
+
+/* tables still need 'cellspacing="0"' in the markup */
+table {
+ border-collapse: collapse;
+ border-spacing: 0;
+}
+
+/*START EDITING HERE*/
+
+body {
+ background-color:#F8F7F3;
+ background-image:url(../images/diagonal_stripe_gray.png);
+ font-family: 'trebuchet MS';
+ font-size: .9em;
+}
+
+#wrapper {
+ width:900px;
+ border:1px solid #ccc;
+ margin-left:auto;
+ margin-right:auto;
+ padding:8px 8px 8px 8px;
+ background-color:#ffffff;
+ position:relative;
+ overflow:auto;
+}
+
+div#logo {
+ height:80px;
+ width:100%;
+ /*background-color:#222222;*/
+ background-color:#ffffff;
+ font-size:2em;
+ line-height:80px;
+}
+
+#logo img {
+ margin:10px;
+}
+
+h2 {
+ font-family:helvetica;
+ font-size:1.3em;
+ font-weight:lighter;
+ margin-bottom:10px;
+
+}
+p {
+ margin-bottom:12px;
+ line-height:18px;
+ clear:both;
+}
+label { width: 10em; }
+label.error { float: none; color: red; padding-left: .5em; vertical-align: top; }
+.submit { margin-left: 12em; }
+em { font-weight: bold; padding-right: 1em; vertical-align: top; }
+
+hr {
+ margin-bottom:20px;
+ clear:both;
+}
+
+table td, table th {
+ padding:5px;
+ text-align:center;
+}
+
+table td.product_name, table td.product_desc {
+ text-align:left;
+}
+
+#product_selectors {
+ margin-left:30px;
+}
+
+table#fresh_cart, table#purchased_products {
+ width:100%;
+ margin-bottom:15px;
+}
+
+table#fresh_cart th, table#purchased_products th {
+ text-align:center;
+}
+
+tr#cart_header th, tr#cart_header th {
+ background-color:#000000;
+ color:#ffffff;
+}
+
+table#order_summary {
+ float:right;
+ margin:20px 5px 20px 0px;
+ border:1px solid #ccc;
+}
+
+table#order_summary td {
+ padding:5px;
+}
+
+.eyesystem_button {
+ -moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
+ -webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
+ box-shadow:inset 0px 1px 0px 0px #ffffff;
+ background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ededed), color-stop(1, #dfdfdf) );
+ background:-moz-linear-gradient( center top, #ededed 5%, #dfdfdf 100% );
+ filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#dfdfdf');
+ background-color:#ededed;
+ -moz-border-radius:6px;
+ -webkit-border-radius:6px;
+ border-radius:6px;
+ border:1px solid #dcdcdc;
+ display:inline-block;
+ color:#777777;
+ font-family:arial;
+ font-size:15px;
+ font-weight:bold;
+ padding:6px 24px;
+ text-decoration:none;
+ text-shadow:1px 1px 0px #ffffff;
+}
+.eyesystem_button:hover {
+ background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #dfdfdf), color-stop(1, #ededed) );
+ background:-moz-linear-gradient( center top, #dfdfdf 5%, #ededed 100% );
+ filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#dfdfdf', endColorstr='#ededed');
+ background-color:#dfdfdf;
+}
+.eyesystem_button:active {
+ position:relative;
+ top:1px;
+}
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
@@ -1,14 +1,16 @@
<!DOCTYPE html>
<html>
<head>
-<title>Raphael Keyboard</title>
-<script src="raphael-min.js" type="text/javascript"></script>
-<script src="raphael_keyboard.js" type="text/javascript"></script>
-<style type="text/css">
-</style>
+<meta charset="utf-8" />
+<title>jQuery Fresh Shopping Cart</title>
+<link href="css/style.css" rel="stylesheet" type="text/css" media="screen" />
+<script src="js/raphael-min.js"></script>
+<script src="js/raphael_keyboard.js"></script>
</head>
<body>
-<h1>Raphael Keyboard</h1>
-<div id='keyboard'></div>
+ <div id="wrapper">
+ <h2>Raphael Keyboard</h2>
+ <div id="keyboard"></div>
+ </div>
</body>
</html>
File renamed without changes.
@@ -7,6 +7,12 @@ window.onload = function () {
// Keyboard Width
var keyboard_width = 624;
+ // White Key Color
+ var white_color = 'white';
+
+ // Black Key Color
+ var black_color = 'black';
+
// Number of octaves
var octaves = 6;
@@ -16,7 +22,7 @@ window.onload = function () {
//------------------------------------------------------------
// Creates canvas 700 x 200 in above defined div
- var paper = Raphael(div_id, 700, 200);
+ var paper = Raphael(div_id, keyboard_width, keyboard_height);
// Define white key specs
var white_width = keyboard_width / 52;
@@ -30,22 +36,23 @@ window.onload = function () {
var repeat = 0;
keyboard_keys = [];
- for (i=0;i<=octaves;i++) {
+ for (i=0;i<octaves;i++) {
+
//white keys in back
- keyboard_keys["C"+i] = paper.rect(white_width*repeat, 0, white_width, keyboard_height).attr("fill", "white");
- keyboard_keys["D"+i] = paper.rect(white_width*(repeat+1), 0, white_width, keyboard_height).attr("fill", "white");
- keyboard_keys["E"+i] = paper.rect(white_width*(repeat+2), 0, white_width, keyboard_height).attr("fill", "white");
- keyboard_keys["F"+i] = paper.rect(white_width*(repeat+3), 0, white_width, keyboard_height).attr("fill", "white");
- keyboard_keys["G"+i] = paper.rect(white_width*(repeat+4), 0, white_width, keyboard_height).attr("fill", "white");
- keyboard_keys["A"+i] = paper.rect(white_width*(repeat+5), 0, white_width, keyboard_height).attr("fill", "white");
- keyboard_keys["B"+i] = paper.rect(white_width*(repeat+6), 0, white_width, keyboard_height).attr("fill", "white");
+ keyboard_keys["C"+i] = paper.rect(white_width*repeat, 0, white_width, keyboard_height).attr("fill", white_color);
+ keyboard_keys["D"+i] = paper.rect(white_width*(repeat+1), 0, white_width, keyboard_height).attr("fill", white_color);
+ keyboard_keys["E"+i] = paper.rect(white_width*(repeat+2), 0, white_width, keyboard_height).attr("fill", white_color);
+ keyboard_keys["F"+i] = paper.rect(white_width*(repeat+3), 0, white_width, keyboard_height).attr("fill", white_color);
+ keyboard_keys["G"+i] = paper.rect(white_width*(repeat+4), 0, white_width, keyboard_height).attr("fill", white_color);
+ keyboard_keys["A"+i] = paper.rect(white_width*(repeat+5), 0, white_width, keyboard_height).attr("fill", white_color);
+ keyboard_keys["B"+i] = paper.rect(white_width*(repeat+6), 0, white_width, keyboard_height).attr("fill", white_color);
//black keys on top
- keyboard_keys["Csharp"+i] = paper.rect((white_width*repeat) +(black_width*1.5), 0, black_width, black_height).attr("fill", "black");
- keyboard_keys["Dsharp"+i] = paper.rect((white_width*repeat) +(black_width*3.5), 0, black_width, black_height).attr("fill", "black");
- keyboard_keys["Fsharp"+i] = paper.rect((white_width*repeat) +(black_width*7.5), 0, black_width, black_height).attr("fill", "black");
- keyboard_keys["Gsharp"+i] = paper.rect((white_width*repeat) +(black_width*9.5), 0, black_width, black_height).attr("fill", "black");
- keyboard_keys["Asharp"+i] = paper.rect((white_width*repeat) +(black_width*11.5), 0, black_width, black_height).attr("fill", "black");
+ keyboard_keys["Csharp"+i] = paper.rect((white_width*repeat) +(black_width*1.5), 0, black_width, black_height).attr("fill", black_color);
+ keyboard_keys["Dsharp"+i] = paper.rect((white_width*repeat) +(black_width*3.5), 0, black_width, black_height).attr("fill", black_color);
+ keyboard_keys["Fsharp"+i] = paper.rect((white_width*repeat) +(black_width*7.5), 0, black_width, black_height).attr("fill", black_color);
+ keyboard_keys["Gsharp"+i] = paper.rect((white_width*repeat) +(black_width*9.5), 0, black_width, black_height).attr("fill", black_color);
+ keyboard_keys["Asharp"+i] = paper.rect((white_width*repeat) +(black_width*11.5), 0, black_width, black_height).attr("fill", black_color);
repeat = repeat+7;
}

0 comments on commit a0c98b6

Please sign in to comment.