Initial Commit

quentinms · Dec 16, 2012 · 10f9588 · 10f9588
commit 10f9588
Show file tree

Hide file tree

Showing 8 changed files with 688 additions and 0 deletions.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1 @@
+*.sketch/*
diff --git a/css/index.css b/css/index.css
@@ -0,0 +1,115 @@
+/*
+Quentin Mazars-Simon
+@quentinms
+*/
+
+*{
+  margin: 0;
+  padding: 0;
+}
+
+body{
+	font-family: "Helvetica Neue", Helvetica, Arial;
+	font-weight: 100; 
+}
+
+#main_panel{
+
+}
+
+
+nav {
+	width: 250px;
+	float: left;
+	display: inline;
+	margin: 10px 10px 10px 100px;
+	padding: 0;
+
+}
+
+nav ul {
+	list-style: none;
+	text-align: center;
+}
+
+nav ul li {
+	border-bottom: 1px solid black;	
+}
+
+nav ul li a{
+	text-decoration: none;
+	color: inherit;
+	font-size: 30px;
+
+}
+
+h1{
+	font-size: 45px;
+	font-weight: 100;
+	text-align: center;
+	margin: 20px;
+}
+
+#newSongForm{
+	float: left;
+	font-size: 20px;
+	margin: 5%;
+	display: none;
+}
+
+#newSongForm input{
+	font-size: 20px;
+	width: 400px;
+	font-family: "Helvetica Neue";
+	font-weight: 100;
+
+}
+#newSongForm button{
+
+	font-size: 20px;
+	width: 100px;
+	font-family: "Helvetica Neue";
+	font-weight: 100;
+	margin: 20px auto 20px auto;
+
+	position: relative;
+	left: 25%;
+}
+
+#content{
+
+
+}
+
+#illustration{
+  width: 500px;
+  height: 500px;
+  margin: auto;
+  background: url('http://lorempixel.com/500/500/abstract/');
+
+  background-repeat: no-repeat;
+  background-position: center center;
+
+  /*
+  If do not want to always be squared
+  background-size: contain;
+  */
+}
+
+#playImage{
+	margin: 200px;
+}
+
+#time{
+  width: 500px;
+  height: 20px;
+  margin: auto; 
+  text-align: right;
+}
+
+#waveform {
+  width: 500px;
+  height: 75px;
+  margin: auto; 
+}
+
diff --git a/img/pause.png b/img/pause.png
diff --git a/img/play.png b/img/play.png
diff --git a/index.html b/index.html
@@ -0,0 +1,49 @@
+<!--
+
+Quentin Mazars-Simon
+@quentinms
+
+ -->
+
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html>
+<head>
+<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+<title>SoundCloud Video Clip</title>
+
+<link rel="stylesheet" type="text/css" href="css/index.css" media="screen" />
+
+<!-- Scripts -->
+<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
+<script type="text/javascript" src="https://connect.soundcloud.com/sdk.js"></script>
+<script type="text/javascript" src="js/waveform.js"></script>
+<script type='text/javascript' src="js/index.js"></script>
+
+</head>
+
+<body>
+<h1>SoundCloud Video Clip</h1>
+
+<nav></nav>
+
+<div id="#main_panel">
+	<form id="newSongForm" action="javascript:selectSong($('#song_url').val(),$('#song_tag').val());">
+		<label for="song_url">URL:</label>
+		<input  id="song_url" type="url" placeholder="https://soundcloud.com/tea-leigh/color-theory-1"/><br />
+		<label for="song_tag">Tag:</label>
+		<input id="song_tag" type="text"  placeholder="Color Theory"/><br />
+		<button type="button" onclick="javascript:hideForm();" >Cancel</button> <button type="submit">Submit</button>
+	</form>
+
+	<div id="content">
+		<div id="illustration">
+			<img id="playImage" alt="Play/Pause icon" src="img/play.png"></img>
+		</div>
+	<div id="comment"></div>
+	<div id="time"> </div>
+	<div id="waveform"></div>
+	</div>
+</div>
+
+</body>
+</html>