Adds HTML + CSS starting point, open questions from #31 (comment) sti…

…ll to be answered
dwyl · Apr 1, 2015 · b0279cd · b0279cd
1 parent 2b86729
commit b0279cd
Show file tree

Hide file tree

Showing 3 changed files with 257 additions and 21 deletions.
diff --git a/front/routes.js b/front/routes.js
@@ -1,3 +1,6 @@
+var path = require('path');
+var cssdir = path.normalize(__dirname + '/views/css');
+
 module.exports = [
   { path: '/',
     method: 'GET',
@@ -7,5 +10,17 @@ module.exports = [
         reply.view("index", {fortune:"everything is awesome"});
       }
     }
+  },
+  {
+    method: 'GET',
+    path: '/css/{param*}',
+    config: {
+      auth: false,
+      handler: {
+          directory: {
+              path: cssdir
+          }
+      }
+    }
   }
 ]
diff --git a/front/views/css/mobile-first.css b/front/views/css/mobile-first.css
@@ -0,0 +1,199 @@
+/*==============================
+  GENERAL STYLES
+================================*/
+
+/*https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/*/
+html {
+  box-sizing: border-box;
+}
+*, *:before, *:after {
+  box-sizing: inherit;
+}
+
+body{
+  margin: 0;
+  font-family: 'Open Sans', sans-serif;
+  color: #403f3f;
+}
+
+p {
+  margin: 0;
+}
+
+/*==============================
+  Section | MAIN (current timer)
+================================*/
+#main {
+  width: 100%;
+  padding: 0.5em;
+  background: #EEE8E8;
+  text-align: center;
+}
+
+
+/*======== Timer time ========*/
+  #main .timer-time {
+    font-size: 3em;
+    display: inline-block;
+    margin: 0 auto;
+  }
+
+    .timer-time button {
+      border-radius: 50%;
+      background: #464646;
+      padding: 0.75em;
+      margin: 1em;
+      color: #f5f5f5;
+      border: 2px solid #f5f5f5;
+      position: fixed;
+      top: 1.3em;
+      right: 0.5em;
+    }
+
+/*======== Timer description ========*/
+  #main .timer-desc{
+    display: block;
+    margin: 0 auto;
+  }
+
+    #main .timer-desc input{
+      font-size: 0.9em;
+      font-family: 'Open Sans', sans-serif;
+      text-align: center;
+      background: none;
+      border:0;
+      border-bottom: 1px solid #848484;
+      border-radius: 0; /*iOS shows curves on border without this*/
+    }
+
+      #main .timer-desc input:focus{
+          outline:0;
+      }
+
+   /*Only way to change placeholder text color*/
+    #main ::-webkit-input-placeholder {
+      color: #848484;
+    }
+    #main ::-moz-placeholder {
+      color: #848484;
+    }
+
+
+/*==============================
+    Section | PAST TIMERS
+================================*/
+
+/*======== Message when there are no timers ========*/
+  #why {
+    font-size: 3em;
+    font-family: 'Open Sans Condensed', sans-serif;
+    color: #d3d3d3;
+    width: 90%;
+    margin:auto;
+  }
+
+/*======== Past timer list ========*/
+#past-timers{
+  width: 100%;
+  font-size:0.9em;
+  padding:0.7em 0.2em;
+  border-bottom: 1px solid #d3d3d3;
+  display: table;
+}
+
+  .timer-one-line{
+    display: table-row;
+  }
+
+  .timer-one-line i,
+  .timer-one-line span{
+    display: table-cell;
+    padding: 0 0.3em;
+  }
+
+    span.timer-desc{
+      text-align:left;
+    }
+
+    span.timer-time{
+      text-align:right;
+    }
+
+/*==============================
+    Section | LOGIN
+================================*/
+#login{
+  background: #323232;
+  width: 100%;
+  position: fixed;
+  bottom: 0;
+}
+
+/*======== Input fields ========*/
+  div.email, div.pw {
+    position: relative; /* fa Helps curtail overlap of fa */
+    padding: 0.4em;
+    margin: 0.8em auto;
+    border-bottom: solid 1px #fff;
+    display: block; /*default is inline*/
+    width: 90%;
+  }
+
+    .email input, .pw input{
+      font-family: 'Open Sans', sans-serif;
+      border: 0;
+      margin-left: 0.3em;
+      width: 90%;
+      background:none;
+      font-size:0.9em;
+      color:white; /*text input by user*/
+    }
+
+      .email input:focus, .pw input:focus{
+        outline: 0;
+      }
+
+  /*fa*/
+  .fa-envelope-o:before, .fa-lock:before{
+    color: #848484;
+  }
+
+/*======== Submit button ========*/
+  #login-button{
+    width: 90%; /*keeps contents in line with other login fields*/
+    text-align:right; /*aligns contents to the right*/
+    margin:auto;
+  }
+
+    #login-button button{
+      border-radius:0;
+      color: #fff;
+      font-size:0.9em;
+      border: solid 1px #fff;
+      text-transform:uppercase;
+      text-align: center;
+      background: none;
+      padding:0.5em;
+      margin: 0 0 0.7em;
+    }
+
+/*==============================
+    Section | NAV
+================================*/
+#nav{
+  background: #323232;
+  width: 100%;
+  position: fixed;
+  bottom: 0;
+}
+
+  #profile-button{
+    color: white;
+    font-size: 1.5em;
+    padding: 0.1em 0.2em;
+  }
+
+/*==============================
+    Colours
+================================*/
+/*greens: #00ca74 #01a25e #78d123 #93da4f*/
diff --git a/front/views/index.html b/front/views/index.html
@@ -1,32 +1,54 @@
 <html>
   <head>
-    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+    <!-- <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> -->
     <title>Timers Are Amazing!</title>
-    <!-- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootswatch/3.2.0/united/bootstrap.min.css"> -->
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
+
+    <link rel="stylesheet" href="./css/mobile-first.css"/>
+
+    <!--FontAwesome-->
+    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
+    <!-- Adding google fonts -->
+    <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300|Open+Sans+Condensed:300' rel='stylesheet' type='text/css'>
   </head>
   <body>
-    <span id="main">01:12</span>
-    <p>{{fortune}}</p>
-    <h1>KItten!</h1>
-    <img src="http://www.randomkittengenerator.com/images/cats/rotator.php" />
-
-<style>
-body {
 
-  /*margin: 1em 0em 0em 20%;*/
-  margin: 1em;
+    <section id="main">
+      <div class="timer-time">
+        00:02
+        <button>
+          <i class="fa fa-stop fa-lg" aria-hidden="true"></i>
+        </button>
+      </div>
+      <div class="timer-desc">
+        <input placeholder="What are you timing?" type="text" autocomplete/>
+      </div>
+    </section>
 
-  border-radius: 40px;
-  /*margin-left: 30px;*/
-  min-height: 100%;
-  margin-top:10px;
+    <section id="past-timers">
+      <div id="why">
+        <p>Track your time. Your past timers will appear here.</p>
+      </div>
+      <!-- <div class="timer-one-line">
+          <i class="fa fa-check-circle-o"></i>
+          <span class="timer-desc">Task 1 but a bit longer and super long so it wraps the line</span>
+          <span class="timer-time">14:21</span>
+      </div> -->
+    </section>
 
-}
-#main {
-  font-size: 5em;
-  padding: 5%;
-}
-</style>
+    <section id="login">
+      <form>
+        <div class="email fa fa-envelope-o">
+            <input type="text" required placeholder="Email Address" name="email"/>
+        </div>
+        <div class="pw fa fa-lock">
+            <input type="password" placeholder=" Password" name="password"/>
+        </div>
+        <div id="login-button">
+          <button type="submit">Save your timer</button>
+        </div>
+      </form>
+    </section>
 <!-- https://github.com/ideaq/faster -->
 
 <script src="https://rawgit.com/ideaq/faster/master/lib/client.js"></script>