Merge branch 'master' of https://github.com/kmeht/youtube2gif

kmeht · Nov 18, 2012 · fce2187 · fce2187
2 parents 35b9ea3 + 3894beb
commit fce2187
Show file tree

Hide file tree

Showing 4 changed files with 66 additions and 12 deletions.
diff --git a/static/css/style.css b/static/css/style.css
@@ -17,7 +17,7 @@ body {
 	position: absolute;
 	left: 50%;
 	top: 50%;
-	margin: -50px 0 0 -450px;
+	margin: -175px 0 0 -450px;
 	text-align: center;
 }
 
@@ -26,6 +26,19 @@ body {
 	text-shadow: 0px 1px 1px #006;
 	font-size: 20px;
 	margin-bottom: 20px;
+	font-weight: 500;
+}
+
+#youtube-form h1 {
+	color: #fff;
+	font-size: 150px;
+	font-weight: 100;
+	text-shadow: 0px 1px 2px #900;
+}
+
+#youtube-form h1 span {
+	font-weight: 500;
+	color: #f90;
 }
 
 #youtube-form input[type=text] {
@@ -40,21 +53,38 @@ body {
 	outline: none;
 }
 
+#header {
+	margin: 20px auto;
+	width: 600px;
+	height: 300px;
+	text-align: center;
+}
+
+#header h1 {
+	color: #fff;
+	font-size: 75px;
+	font-weight: 100;
+	text-shadow: 0px 1px 1px #900;
+}
 
+#header h1 span {
+	font-weight: 500;
+	color: #f90;
+}
 
 #container {
 	width: 800px;
-	height: 400px;
+	height: 355px;
 	position: absolute;
 	left: 50%;
 	top: 50%;
-	margin: -200px 0 0 -400px;
-	border: 1px solid #aaa;
+	margin: -187px 0 0 -400px;
 	box-shadow: 0px 0px 5px #000;
+	text-align: center;
 }
 
 #window {
-	height: 400px;
+	height: 355px;
 	width: 650px;
 	float: left;
 	background: #333;
@@ -77,8 +107,8 @@ body {
 #toolbar {
 	float:left;
 	width: 139px;
-	height: 390px;
-	background: #999;
+	height: 347px;
+	background: #013;
 	overflow: scroll;
 	border-right: 1px solid #eee;
 	padding: 5px;
@@ -88,6 +118,12 @@ body {
 	width: 139px;
 }
 
+#toolbar h3 {
+	color: #fff;
+	font-weight: 300;
+	font-size: 20px;
+}
+
 .upvote {
 	height: 210px;
 	width: 210px;
@@ -98,7 +134,7 @@ body {
 #stage {
 	position: absolute;
 	width: 650px;
-	height: 400px;
+	height: 355px;
 	top: 0;
 	z-index: 100;
 }
@@ -114,8 +150,20 @@ body {
 
 #submit {
 	display: block;
-	background: #0f0;
+	background: #f90;
 	color: #fff;
-	height: 20px;
-	width: 60px;
+	height: 25px;
+	width: 120px;
+	padding: 10px;
+	left: 50%;
+	bottom: -60px;
+	margin-left: -60px;
+	position: absolute;
+	border-radius: 5px;
+	text-decoration: none;
+	color: #630;
+	text-shadow: 0px 0px 1px #fff;
+	font-weight: 700;
+	font-size: 20px;
+	box-shadow: 0px 1px 2px #003;
 }
diff --git a/static/js/editor.js b/static/js/editor.js
@@ -112,6 +112,7 @@ $(function() {
                     .attr('src', data.url)
                     .data('name', data.name)
                     .attr('draggable', true);
+                $("#toolbar .empty").remove();
                 $("#toolbar").append(image);
             },
             error: function() {

diff --git a/templates/editor.html b/templates/editor.html
@@ -8,8 +8,12 @@
 {% endblock js %}
 
 {% block body %}
+<div id="header">
+	<h1>You<span>GIF</span> Editor</h1>
+</div>
 <div id="container">
 	<div id="toolbar">
+		<h3 class="empty">Start by dragging images here.</h3>
 	</div>
 	<div id="window">
 		<div id="images">
@@ -20,6 +24,6 @@
 		<div id="stage" draggable="true">
 		</div>
 	</div>
-	<a href="#" id="submit">SUBMIT</a>
+	<a href="#" id="submit">FINISH!</a>
 </div>
 {% endblock body %}
diff --git a/templates/index.html b/templates/index.html
@@ -4,6 +4,7 @@
 
 {% block body %}
 <div id="youtube-form">
+	<h1>You<span>GIF</span></h1>
 	<h3>YouGif takes videos from YouTube and turns them into gifs... instantly.</h3>
 	<form action="{{ session_id }}" method="post">
 		<input type="text" name="url" placeholder="Paste the URL to a YouTube video here and hit Enter!" />