asdf

ericz · Jul 22, 2012 · 7bc26c4 · 7bc26c4
1 parent 42fd631
commit 7bc26c4
Show file tree

Hide file tree

Showing 4 changed files with 64 additions and 10 deletions.
diff --git a/spotify/bg.png b/spotify/bg.png
diff --git a/spotify/index.html b/spotify/index.html
@@ -20,20 +20,28 @@
 			};
 
 			ws.onmessage = function(msg) {
+        $('#logo').addClass('shake');
+        $('#label').hide();
+        setTimeout(function(){
+          $('#logo').removeClass('shake');
+          $('#label').show();
+        }, 500);
 				var data = JSON.parse(msg.data);
 				if (!data.write) {
 					var ms = data.data.position % 60000,
 						minutes = (data.data.position - ms)/60000;
 					player.play(data.data.track + "#" + minutes + ":" + ms/1000);
 				}
 				if (data.write) {
+          $('#label').text('Click to save song');
 					console.log(player.track.uri, player.position);
 					$.post(CLOUD + '/store/' + data.id, {type: 'song', track: player.track.uri, position: player.position});
 				}
 			}
 
-			$(document).on("click", "#write", function() {
+			$(document).on("click", "#logo", function() {
 				ws.send(JSON.stringify({type: 'write'}));
+        $('#label').text('Tap to complete');
 			});
 		}
 
@@ -42,8 +50,8 @@
 	<link rel="stylesheet" href="syncpad.css">
 </head>
 <body>
-  <div id="logo"></div>
-	<a href="#" class="button" id="write">Write tag</a>
-	<div id="test">yo</div>
+  <div id="logo">
+    <div id="label">Click to save song</div>
+  </div>
 </body>
 </html>
diff --git a/spotify/logo.png b/spotify/logo.png
diff --git a/spotify/syncpad.css b/spotify/syncpad.css
@@ -30,16 +30,62 @@
 	top:1px;
 }
 
+
+@-webkit-keyframes rotate {
+	0% {
+		-webkit-transform: rotate(0);
+	}
+	25% {
+		-webkit-transform: rotate(15deg);
+	}
+  75% {
+		-webkit-transform: rotate(-15deg);
+	}
+	100% {
+		-webkit-transform: rotate(0deg);
+	}
+}
+
+
+.shake {
+  -webkit-animation-name: rotate;
+	-webkit-animation-duration: 100ms;
+	-webkit-animation-iteration-count: 4;
+	-webkit-animation-direction: alternate;
+	-webkit-animation-timing-function: ease-in-out;
+}
+
+
 #logo {
-  background: url(logo.png) center center no-repeat;
-  border-radius: 4px;
-  -webkit-transform: rotate(-15deg);
+  background: url(logo.png) center 50px no-repeat;
+  border-radius: 8px;
   margin: 0 auto;
   background-color: #fff;
-  width: 111px;
+  width: 444px;
   margin-top: 40px;
   margin-bottom: -20px;
-  height: 70px;
-  box-shadow: 1px 2px 2px rgba(0,0,0,0.05);
+  height: 280px;
+  box-shadow: 0px 0px 24px rgba(0,0,0,0.15);
+  -webkit-transition: all 0.3s;
+  position: relative;
+  cursor: pointer;
+  color: #aaa;
+}
+#logo:hover {
+  color: #000;
+  box-shadow: 0px 0px 24px rgba(0,0,0,0.3);
+}
+#label {
+  position: absolute;
+  bottom: 20px;
+  left: 0;
+  right: 0;
+  text-align: center;
+  font-size:20px;
+  text-transform: uppercase;
 }
 
+body {
+  font-family: Helvetica, Arial;
+  background: url(bg.png);
+}