Initial commit

keeto · Feb 21, 2012 · 8e82ec2 · 8e82ec2
commit 8e82ec2
Show file tree

Hide file tree

Showing 15 changed files with 148 additions and 0 deletions.
diff --git a/css/style.css b/css/style.css
@@ -0,0 +1,80 @@
+html, body {
+	background: #292929;
+}
+
+body {
+	width: 700px;
+	margin: 40px auto;
+}
+
+
+.clock {
+	width: 700px;
+	height: 243px;
+	margin: 0 auto 100px auto;
+}
+
+	.clock .clock-top {
+		width: 685px;
+		height: 21px;
+		margin: 0 auto;
+		background: url('../images/clock/top.png');
+	}
+		.clock .clock-top .switch-face {
+			border: 0;
+			display: block;
+			width: 58px;
+			height: 8px;
+			margin: 0 auto;
+			position: relative;
+			top: 4px;
+			background: url('../images/clock/top-button.png');
+		}
+
+	.clock .clock-frame {
+		width: 700px;
+		height: 230px;
+		background: url('../images/clock/frame.png');
+		position: relative;
+		top: -5px;
+	}
+
+		.clock .clock-frame .clock-inside {
+			width: 670px;
+			height: 200px;
+			background: url('../images/clock/inside.png');
+			position: absolute;
+			top: 15px;
+			left: 15px;
+			z-index: 5;
+		}
+			.clock .clock-frame .clock-inside .clock-face {
+				position: absolute;
+				top: 0;
+				z-index: 6;
+			}
+
+		.clock .clock-frame .clock-inside:before {
+			content: "";
+			display: block;
+			width: 670px;
+			height: 200px;
+			background: url('../images/clock/inner-shadow.png');
+			position: relative;
+			z-index: 7;
+		}
+
+.clock:after {
+	content: "";
+	display: block;
+	width: 698px;
+	height: 213px;
+	position: relative;
+	top: -140px;
+	background: url('../images/clock/drop-shadow.png');
+}
+
+
+#droparea {
+	display: none;
+}
diff --git a/images/clock/drop-shadow.png b/images/clock/drop-shadow.png
diff --git a/images/clock/frame.png b/images/clock/frame.png
diff --git a/images/clock/inner-shadow.png b/images/clock/inner-shadow.png
diff --git a/images/clock/inside.png b/images/clock/inside.png
diff --git a/images/clock/top-button.png b/images/clock/top-button.png
diff --git a/images/clock/top.png b/images/clock/top.png
diff --git a/images/icon/128x128.png b/images/icon/128x128.png
diff --git a/images/icon/18x18.png b/images/icon/18x18.png
diff --git a/images/icon/64x64.png b/images/icon/64x64.png
diff --git a/images/icon/icon.psd b/images/icon/icon.psd
diff --git a/index.html b/index.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8">
+    <title>Clock</title>
+
+    <link rel="stylesheet" href="sp://import/css/adam.css">
+    <link rel="stylesheet" href="css/style.css">
+</head>
+<body>
+	<div class="clock">
+		<div class="clock-top">
+			<button type="button" class="switch-face"></button>
+		</div>
+		<div class="clock-frame">
+			<div class="clock-inside">
+				<canvas class="clock-face" id="clock-face" width="670" height="200"></canvas>
+			</div>
+		</div>
+	</div>
+
+	<section id="droparea">
+		<h1>Drop any music here</h1>
+		<p>Drop a playlist, album, artist or track here to use that music for the clock.</p>
+	</section>
+
+	<script>var sp = getSpotifyApi(1), app = sp.require("js/app");</script>
+</body>
+</html>
diff --git a/js/app.js b/js/app.js
@@ -0,0 +1,9 @@
+"use strict";
+var sp = getSpotifyApi(1);
+var models = sp.require('sp://import/scripts/api/models');
+var application = models.application;
+
+
+/*application.observe(models.EVENT.LINKSCHANGED, function () {
+
+});*/
diff --git a/js/ocanvas-2.0.0.min.js b/js/ocanvas-2.0.0.min.js
diff --git a/manifest.json b/manifest.json
@@ -0,0 +1,19 @@
+{
+	"BundleType": "Application",
+	"AppName": {
+		"en": "Clock"
+	},
+	"AppIcon": {
+		"18x18": "images/icon/18x18.png"
+	},
+	"AcceptedLinkTypes": [
+		"album",
+		"artist",
+		"playlist",
+		"track",
+		"user"
+	],
+	"SupportedLanguages": [
+		"en"
+	]
+}