Add menu, change view engine, use Grunt

4 files changed, 157 insertions, 149 deletions

diff --git a/views/calculator/setup.html b/views/calculator/setup.html
index 26977c7a..bd98e885 100644
--- a/views/calculator/setup.html
+++ b/views/calculator/setup.html
@@ -1,65 +1,60 @@
-<!DOCTYPE html>
-<html>
-  <head>
-    <meta charset="utf-8" />
-		<meta name="viewport" content="width=480, height=752, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
-    <title>Bitcoin Payment Calculator</title>
-    <link href="img/favicon.ico" rel="shortcut icon" />
-    {{#css}}calculator{{/css}}
-    {{#js}}setup{{/js}}
-  </head>
-  <body>
-    <div class="container-fluid">
-      <form id="setup" action="/calculator" method="get">
-        <h1>Settings</h1>
+{{#yield-scripts}}
+<script src='/js/jquery-1.8.2.min.js'></script>
+<script src='/js/bootstrap.min.js'></script>
+<script src='/js/2.5.3-crypto-sha256.js'></script>
+<script src='/js/jsbn.js'></script>
+<script src='/js/jsbn2.js'></script>
+<script src='/js/check_address.js'></script>
+<script src='/js/setup.js'></script>
+{{/yield-scripts}}
 
-        <input type="hidden" id="username" name="username" value="{{user}}" />
+<form id="setup" action="/calculator" method="get">
+  <h1>Settings</h1>
 
-        <div class="form-group">
-          <label for="title">Store Name:</label>
-          <input type="text" id="title" name="title" class="form-control" />
-        </div>
+  <input type="hidden" id="username" name="username" value="{{user}}" />
 
-        <div class="form-group">
-          <label for="logo">Logo <small>(optional URL)</small>:</label>
-          <input type="text" id="logo" name="logo" class="form-control" />
-        </div>
+  <div class="form-group">
+    <label for="title">Store Name:</label>
+    <input type="text" id="title" name="title" class="form-control" />
+  </div>
 
-        <div class="form-group">
-          <label for="address">Bitcoin Address:</label>
-          <input type="text" id="address" name="address" class="form-control" />
-        </div>
+  <div class="form-group">
+    <label for="logo">Logo <small>(optional URL)</small>:</label>
+    <input type="text" id="logo" name="logo" class="form-control" />
+  </div>
 
-        <div class="form-group">
-          <label for="currency">Currency:</label>
-          <select id="currency" name="currency" class="form-control">
-          </select>
-        </div>
+  <div class="form-group">
+    <label for="address">Bitcoin Address:</label>
+    <input type="text" id="address" name="address" class="form-control" />
+  </div>
 
-        <div class="form-group">
-          <label for="symbol">Exchange Rate:</label>
-          <select id="symbol" name="symbol" class="form-control">
-          </select>
-        </div>
-        
-        <div class="form-group">
-          <label for="commission">Commission/Discount <small>(optional %)</small>:</label>
-          <input type="text" id="commission" name="commission" class="form-control" />
-        </div>
+  <div class="form-group">
+    <label for="currency">Currency:</label>
+    <select id="currency" name="currency" class="form-control">
+    </select>
+  </div>
 
-        <div class="form-group">
-          <label for="password">New Password <small>(blank = no change)</small>:</label>
-          <input type="password" id="password" name="password" class="form-control" />
-        </div>
+  <div class="form-group">
+    <label for="symbol">Exchange Rate:</label>
+    <select id="symbol" name="symbol" class="form-control">
+    </select>
+  </div>
+  
+  <div class="form-group">
+    <label for="commission">Commission/Discount <small>(optional %)</small>:</label>
+    <input type="text" id="commission" name="commission" class="form-control" />
+  </div>
 
-        <div class="form-group">
-          <label for="confirm">Confirm New Password:</label>
-          <input type="password" id="confirm" name="confirm" class="form-control" />
-        </div>
+  <div class="form-group">
+    <label for="password">New Password <small>(blank = no change)</small>:</label>
+    <input type="password" id="password" name="password" class="form-control" />
+  </div>
 
-        <br />
-        <input class="btn btn-primary" type="submit" value="Done" />
-      </form>
-    </div>
-  </body>
-</html> 
+  <div class="form-group">
+    <label for="confirm">Confirm New Password:</label>
+    <input type="password" id="confirm" name="confirm" class="form-control" />
+  </div>
+
+  <br />
+  <input class="btn btn-primary" type="submit" value="Done" />
+</form>
diff --git a/views/calculator/show.html b/views/calculator/show.html
index db3cb698..31c9071a 100644
--- a/views/calculator/show.html
+++ b/views/calculator/show.html
@@ -1,59 +1,56 @@
-<!DOCTYPE html>
-<html>
-  <head>
-    <meta charset="utf-8" />
-		<meta name="viewport" content="width=480, height=752, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
-    <title>Bitcoin Payment Calculator</title>
-    <link href="img/favicon.ico" rel="shortcut icon" />
-    {{#css}}calculator{{/css}}
-    {{#js}}calculator{{/js}}
-  </head>
-  <body>
-    <div class="container-fluid">
-      <div id="calculator" style="display: none">
-        <input id="user" type="hidden" value="{{user}}" />
+{{#yield-scripts}}
+<script src='/js/jquery-1.8.2.min.js'></script>
+<script src='/js/moment.min.js'></script>
+<script src='/js/qrcode.js'></script>
+<script src='/js/bootstrap.min.js'></script>
+<script src='/js/2.5.3-crypto-sha256.js'></script>
+<script src='/js/jsbn.js'></script>
+<script src='/js/jsbn2.js'></script>
+<script src='/js/check_address.js'></script>
+<script src='/js/calculator.js'></script>
+{{/yield-scripts}}
 
-        <h1 id="title"></h1>
-        <img id="logo" src="img/logo.jpg" alt="Logo" />
+<div id="calculator" style="display: none">
+  <input id="user" type="hidden" value="{{user}}" />
 
-        <form role="form">
-          <div class="form-group">
-            <label for="exchange">Exchange Rate:</label>
-            <input type="text" id="exchange" value="0" disabled="disabled" class="form-control" />
-            <span id="symbol"></span>
-          </div>
+  <h1 id="title"></h1>
+  <img id="logo" src="img/bitcoin.png" alt="Logo" />
 
-          <div class="form-group">
-            <label for="amount">Amount:</label>
-            <input type="text" id="amount" class="form-control" />
-            <span id="currency"></span>
-          </div>
-
-          <div class="form-group">
-            <label for="tip">Tip:</label>
-            <div class="btn-toolbar">
-              <div class="btn-group" id="tip">
-                <button type="button" class="active btn btn-default">0%</button>
-                <button type="button" class="btn btn-default">10%</button>
-                <button type="button" class="btn btn-default">15%</button>
-                <button type="button" class="btn btn-default">20%</button>
-              </div>
-            </div>
-          </div>
-
-          <br />
+  <form role="form">
+    <div class="form-group">
+      <label for="exchange">Exchange Rate:</label>
+      <input type="text" id="exchange" value="0" disabled="disabled" class="form-control" />
+      <span id="symbol"></span>
+    </div>
 
-          <div id="payment">
-            <p>Please send <strong id="total">0.0</strong> mBTC to</p><br />
-            <div id="qr"></div>
-            <p id="address"></p>
-          </div>
+    <div class="form-group">
+      <label for="amount">Amount:</label>
+      <input type="text" id="amount" class="form-control" />
+      <span id="currency"></span>
+    </div>
 
-          <span id="received" class="btn btn-success">Payment Received.  Thank you!</span>
+    <div class="form-group">
+      <label for="tip">Tip:</label>
+      <div class="btn-toolbar">
+        <div class="btn-group" id="tip">
+          <button type="button" class="active btn btn-default">0%</button>
+          <button type="button" class="btn btn-default">10%</button>
+          <button type="button" class="btn btn-default">15%</button>
+          <button type="button" class="btn btn-default">20%</button>
         </div>
-      </form>
+      </div>
+    </div>
+
+    <br />
 
-      <span id="error" class="btn btn-danger" style="display: none"></span> 
+    <div id="payment">
+      <p>Please send <strong id="total">0.0</strong> mBTC to</p><br />
+      <div id="qr"></div>
+      <p id="address"></p>
     </div>
-  </body>
-</html> 
+
+    <span id="received" class="btn btn-success">Payment Received.  Thank you!</span>
+  </div>
+</form>
+
+<span id="error" class="btn btn-danger" style="display: none"></span> 
diff --git a/views/layout.html b/views/layout.html
index 0e806b3b..7d1ea7fa 100644
--- a/views/layout.html
+++ b/views/layout.html
@@ -2,14 +2,36 @@
   <head>
     <meta charset="utf-8" />
 		<meta name="viewport" content="width=480, height=752, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
-    <title>Bitcoin Payment Calculator</title>
+    <title>CoinOS</title>
     <link href="img/favicon.ico" rel="shortcut icon" />
-    {{#css}}calculator{{/css}}
-    {{#js}}bootstrap.min.js{{/js}}
+    <link rel='stylesheet' href='/css/calculator.css'>
+    {{{yield-styles}}}
+    {{{yield-scripts}}}
   </head>
   <body>
     <div class="container-fluid">
-      {{>content}}
+      <nav class="navbar" role="navigation">
+          <button type="button" class="btn btn-primary navbar-toggle" data-toggle="collapse" data-target="#nav">
+            <span class="glyphicon glyphicon-list"></span>
+          </button>
+          <div id="nav" class="collapse navbar-collapse">
+            <div class="navbar">
+              <ul class="nav navbar-nav">
+                <!--
+                <li><a href="{{user}}/edit"><span class="glyphicon glyphicon-user"></span> Profile</a></li>
+-->
+                <li><a href="/{{user}}"><span class="glyphicon glyphicon-home"></span> Home</a></li>
+                <li><a href="/{{user}}/edit"><span class="glyphicon glyphicon-cog"></span> Settings</a></li>
+                <li><a href="/{{user}}/report"><span class="glyphicon glyphicon-list-alt"></span> Transactions</a></li>
+                <!--
+                <li><a href="/help"><span class="glyphicon glyphicon-info-sign"></span> Help</a></li>
+-->
+              </ul>
+            </div>
+          </div>
+      </nav>
+
+      {{{yield}}}
     </div>
   </body>
 </html>
diff --git a/views/transactions/index.html b/views/transactions/index.html
index 7efd6477..56d68dda 100644
--- a/views/transactions/index.html
+++ b/views/transactions/index.html
@@ -1,40 +1,34 @@
-<!DOCTYPE html>
-<html>
-  <head>
-    <meta charset="utf-8" />
-		<meta name="viewport" content="width=480, height=752, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
-    <title>Bitcoin Payment Report</title>
-    {{#css}}calculator{{/css}}
-    {{#js}}report{{/js}}
-  </head>
-  <body>
-    <div class="container-fluid">
-      <h1>Transactions Report</h1>
+{{#yield-scripts}}
+<script src='/js/jquery-1.8.2.min.js'></script>
+<script src='/js/jquery-ui-1.9.0.custom.min.js'></script>
+<script src='/js/bootstrap.min.js'></script>
+<script src='/js/moment.min.js'></script>
+<script src='/js/report.js'></script>
+{{/yield-scripts}}
 
-      <input id="user" type="hidden" value="{{user}}" />
-      From: <input id="from" name="from" type="text" class="date" />
-      To: <input id="to" name="to" type="text" class="date" />
+<h1>Transactions Report</h1>
 
-      <table class="table report">
-        <thead>
-          <tr>
-            <th>Date</th>
-            <th>Address</th>
-            <th>Rate</th>
-            <th>mBTC</th>
-            <th>CAD</th>
-          </tr>
-        </thead>
-        <tbody>
-        </tbody>
-        <tfoot>
-          <tr>
-            <td id="total" colspan="3">Totals:</td>
-            <td id="btc"></td>
-            <td id="cad"></td>
-          </tr>
-        </tfoot>
-      </table>
-    </div>
-  </body>
-</html> 
+<input id="user" type="hidden" value="{{user}}" />
+From: <input id="from" name="from" type="text" class="date" />
+To: <input id="to" name="to" type="text" class="date" />
+
+<table class="table report">
+  <thead>
+    <tr>
+      <th>Date</th>
+      <th>Address</th>
+      <th>Rate</th>
+      <th>mBTC</th>
+      <th>CAD</th>
+    </tr>
+  </thead>
+  <tbody>
+  </tbody>
+  <tfoot>
+    <tr>
+      <td id="total" colspan="3">Totals:</td>
+      <td id="btc"></td>
+      <td id="cad"></td>
+    </tr>
+  </tfoot>
+</table>