better styling

apassant · Jan 29, 2012 · ec9f26b · ec9f26b
1 parent 1c99dcb
commit ec9f26b
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 4 deletions.
diff --git a/mixture/static/mixture.css b/mixture/static/mixture.css
@@ -84,4 +84,35 @@ body {
 
 body.two {
   background: #cccccc;
+}
+
+#camholder {
+  margin-top: 40px;
+  background-color: #eee;
+  margin-left: auto;
+  margin-right: auto;
+  width: 435px;
+  padding: 10px;
+  border: 1px solid #666666;
+  border-radius: 3px;
+  text-align: center;
+
+  background-color: #d2d2d2;
+  background: -moz-linear-gradient(top, #f2f2f2,  #d2d2d2);
+  background: -webkit-gradient(linear, left top, left bottom, from(#f2f2f2), to(#d2d2d2));
+}
+
+#capture {
+  margin-top: 10px;
+  padding: 15px 100px;
+  background-color: #eb2950;
+  background: -moz-linear-gradient(top, #ef5272,  #eb2950);
+  background: -webkit-gradient(linear, left top, left bottom, from(#ef5272), to(#eb2950));
+  color: #EDEDED;
+  text-shadow: 0 -0.35mm rgba(0,0,0,0.25);
+  border-radius: 3px;
+  outline: none;
+  -webkit-appearance: none;
+  font-size: 16pt;
+
 }
diff --git a/mixture/templates/base.html b/mixture/templates/base.html
@@ -11,7 +11,7 @@
   <div id="header"><img src="/static/mixture_logo.png"></div>
   <div id="nav" class="{{ nav }}">
     <div class="segment" id="nav-one">
-      <span>1. Choose a picture</span>
+      <span>1. Take a picture</span>
       <div class="edge" id="edge-left"></div>
     </div>
     <div class="segment" id="nav-two">

diff --git a/mixture/templates/upload.html b/mixture/templates/upload.html
@@ -5,17 +5,21 @@
 {% endblock %}
 
 {% block body %}
-<h1>Take a picture</h1>
 
 <script language="JavaScript">
   webcam.set_swf_url('/static/webcam.swf');
   webcam.set_shutter_sound(true, '/static/shutter.mp3');
-  document.write(webcam.get_html(320, 240));
+
   webcam.set_api_url('/upload/');
   webcam.set_hook('onComplete', 'my_callback_function');
   function my_callback_function(response) {
     window.location.href=response;
   }
 </script>
-<a href="javascript:void(webcam.snap())">Take Snapshot</a>
+  <div id="camholder">
+    <div id="camera"><script>document.write(webcam.get_html(435, 325));</script></div>
+    <button onclick="webcam.snap()" id="capture">Capture!</button>
+  </div>
+
+  </div>
 {% endblock %}