build.html.tt in prez-0.0.3

- old
+ new

@@ -2,11 +2,10 @@
 <html lang="en">
   <head>
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1">
-    <%= stylesheet "bootstrap" %>
     <%= stylesheet "prez-controller" %>
     <%= javascript "jquery" %>
     <%= javascript "prez-controller" %>
     <%= javascript "bootstrap" %>
   </head>
@@ -15,10 +14,19 @@
     <div id="container" class="container-fluid">
       <div id="pre-launch">
         <div id="filler"></div>
 
         <div class="row">
+          <div class="col-md-offset-2 col-md-8 col-lg-offset-3 col-lg-6">
+            <div class="form-group">
+              <label for="prez-duration">Duration</label>
+              <input type="text" id="prez-duration" class="form-control" placeholder="hours:minutes:seconds" value="<%= duration_amount %>" />
+            </div>
+          </div>
+        </div>
+
+        <div class="row">
           <div class="col-xs-6 col-md-offset-2 col-md-4 col-lg-offset-3 col-lg-3">
             <button id="new-window" type="button" class="btn btn-default btn-block btn-lg active" data-toggle="button">
               <span class="glyphicon glyphicon-new-window"></span>
               <span id="launch-message">Launch in new window</span>
             </button>
@@ -45,12 +53,28 @@
           <div class="col-xs-offset-3 col-xs-2">
             <button class="next-slide btn btn-primary btn-block btn-lg"><span class="glyphicon glyphicon-chevron-right"></span></button>
           </div>
         </div>
 
-        <p class="lead text-center">
-          <strong>Current slide: <span class="current-slide-number"></span></strong>
-        </p>
+        <div class="row">
+          <div class="col-xs-2">
+            <div>
+              <span class="prez-total-duration"></span>
+            </div>
+          </div>
+
+          <div class="col-xs-8">
+            <p class="lead text-center">
+              <strong>Current slide: <span class="current-slide-number"></span> of <span class="total-slides"></span></strong>
+            </p>
+          </div>
+
+          <div class="col-xs-2">
+            <div class="text-right">
+              <span class="prez-current-slide-duration"></span>
+            </div>
+          </div>
+        </div>
 
         <iframe id="preview-frame"></iframe>
         <div id="preview-frame-padding"></div>
 
         <div class="row">