Final commit.

* Possibility to change play position. * Slightly modified design * Uses Tumblr APIv2
quentinms · Jan 23, 2013 · df7e652 · df7e652
1 parent 10f9588
commit df7e652
Show file tree

Hide file tree

Showing 10 changed files with 230 additions and 97 deletions.
diff --git a/css/index.css b/css/index.css
@@ -1,8 +1,3 @@
-/*
-Quentin Mazars-Simon
-@quentinms
-*/
-
 *{
   margin: 0;
   padding: 0;
@@ -11,49 +6,63 @@ Quentin Mazars-Simon
 body{
 	font-family: "Helvetica Neue", Helvetica, Arial;
 	font-weight: 100; 
+	width: 1000px;
+	margin: auto;
 }
 
 #main_panel{
+	width: 500px;
+	display: inline;
+	float: left;
+	margin-left: 20px;
+	margin-right: 20px;
+}
 
+#comments_div {
+	float: left;
+	display: inline;
+	width: 230px;	
 }
 
+#comment{
+	display: none;
+	word-wrap: break-word;
+}
 
 nav {
-	width: 250px;
 	float: left;
 	display: inline;
-	margin: 10px 10px 10px 100px;
-	padding: 0;
-
+	margin-top: 50px;
+	width: 230px;
 }
 
 nav ul {
 	list-style: none;
-	text-align: center;
+	vertical-align: middle;
 }
 
-nav ul li {
-	border-bottom: 1px solid black;	
+nav ul li{
+	margin-bottom: 10px;
+	height: 20px;	
 }
 
 nav ul li a{
 	text-decoration: none;
 	color: inherit;
-	font-size: 30px;
-
+	font-size: 20px;	
 }
 
 h1{
 	font-size: 45px;
 	font-weight: 100;
 	text-align: center;
-	margin: 20px;
+	margin:20px 20px 40px 20px
 }
 
 #newSongForm{
 	float: left;
 	font-size: 20px;
-	margin: 5%;
+	margin: 50px;
 	display: none;
 }
 
@@ -70,17 +79,25 @@ h1{
 	width: 100px;
 	font-family: "Helvetica Neue";
 	font-weight: 100;
-	margin: 20px auto 20px auto;
-
-	position: relative;
-	left: 25%;
+	border:0px solid transparent;
+	background: transparent;
+	cursor: pointer;
+}
+
+#cancel_button{
+	margin: 20px 0px 0px 90px;
+}
+
+#submit_button{
+	margin: 20px 0px 0px 20px;
 }
 
 #content{
 
 
 }
 
+
 #illustration{
   width: 500px;
   height: 500px;
@@ -90,26 +107,44 @@ h1{
   background-repeat: no-repeat;
   background-position: center center;
 
+  cursor: pointer;
+
   /*
   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 {
+#player {
+  position: relative;
   width: 500px;
-  height: 75px;
+  height: 50px;
   margin: auto; 
 }
 
+#waveform {
+	position: absolute;
+	top:0px;
+	left: 50px;
+	width: 450px;
+	height: 50px;
+	z-index: -1;
+	margin: auto;
+
+}
+
+#cursor {
+  	position: absolute;
+	top:0px;
+	left: 50px;
+	width: 450px;
+	height: 50px;
+	margin: auto;
+}
diff --git a/img/Comment.png b/img/Comment.png
diff --git a/img/Nocomment.png b/img/Nocomment.png
diff --git a/img/loading.gif b/img/loading.gif
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
@@ -1,10 +1,3 @@
-<!--
-
-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>
@@ -17,6 +10,7 @@
 <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/raphael-min.js"></script>
 <script type='text/javascript' src="js/index.js"></script>
 
 </head>
@@ -25,25 +19,28 @@
 <h1>SoundCloud Video Clip</h1>
 
 <nav></nav>
-
-<div id="#main_panel">
+<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>
+		<button id="cancel_button" type="button" onclick="javascript:hideForm();" >Cancel</button> <button id="submit_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 id="illustration"></div>
+		<div id="time"> </div>
+		<div id="player">
+			<img src="img/Play.png" id="playButton" onclick="javascript:togglePause();" />
+			<div id="cursor"></div>
+			<div id="waveform"></div>
 		</div>
-	<div id="comment"></div>
-	<div id="time"> </div>
-	<div id="waveform"></div>
 	</div>
 </div>
-
+<div id="comments_div">
+	<img src="img/Comment.png" id="commentButton" onclick="javascript:toggleComments();" />
+	<div id="comment"></div>
+</div>
 </body>
 </html>