Commits

Anonymous committed 818175f

1) Edited the look & feel of the shopping cart popover
2) create payment/customer detail page
3) created a template of the order summary

Comments (0)

Files changed (5)

web/checkOut.html

+<!--
+To change this template, choose Tools | Templates
+and open the template in the editor.
+-->
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta name="apple-mobile-web-app-capable" content="yes" />
+        <title id="systemName">Mobile POS</title>
+        <link href="css/bootstrap.css" rel="stylesheet">
+    </head>
+    <body>
+        <div class="navbar-inner ">
+            <div class="container">
+                <div class="navbar ">
+                    <!-- HOME BTN -->
+                    <a class="btn btn-info pull-left" href="product.html" style="display: inline-block">
+                        <i class="icon-arrow-left"></i>Products </a>
+                    <a class="brand" style="margin-left: 250px">&nbsp;&nbsp; Checkout </a>
+
+                </div>
+            </div>
+        </div>
+
+        <div class="container-fluid">
+
+
+            <!--order summary -->
+            <div class="span3">
+                <legend>Order Summary</legend>
+                <div class="row">
+                    <div class="col span1">
+                        <img class="img-rounded" src="http://www.placehold.it/60x60">
+                    </div>
+                    <div class="col span2">
+                        Product Name 
+                        </br>Price: $165
+                        </br>Quantity: 
+                    </div>
+                </div>
+                <br/>
+                <div class="row">
+                    <div class="col span1">
+                        <img class="img-rounded" src="http://www.placehold.it/60x60">
+                    </div>
+                    <div class="col span2">
+                        Product Name 
+                        </br>Price: $165
+                        </br>Quantity: 
+                    </div>
+                </div>
+                <br/>
+                <div class="row">
+                    <b class="pull-right">Total $500</b>
+                </div>
+            </div>
+
+            <!--payment information request-->
+            <div class="span9">
+                <br/>
+
+                <!--Payment detail form -->
+                <div class="row well" style="margin-left: 10px"> 
+                    <form class="form-horizontal2 ">
+                        <legend> Payment detail </legend>
+                        <div class="control-group">
+                            <label class="control-label" for="inputCC">Credit Card No. </label>
+                            <div class="controls">
+                                <input type="text" id="inputCC" placeholder="Credit Card Number">
+                            </div>
+                        </div>
+                        <div class="control-group">
+                            <label class="control-label" for="inputCW2">CW2/CV2</label>
+                            <div class="controls">
+                                <input type="text" id="inputCW2" placeholder="CW2/CV2">
+                            </div>
+                        </div>
+                        <div class="control-group">
+                            <label class="control-label" for="inputExpiryDate">Expiry Date</label>
+                            <div class="controls">
+                                <input type="text" id="inputExpiryDate" placeholder="Credit Card Expiry Date (MMYY)">
+                            </div>
+                        </div>
+                    </form>
+
+                    <button class="btn offset1  btn-info pull-right" id="btnFinish" type="button">Submit payment detail <i class="icon-arrow-right"></i></button>
+
+                </div>
+
+            </div>
+
+        </div>
+
+        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
+        <script src="js/bootstrap.min.js"></script>
+
+        <script>
+            $('#btnFinish').click(function() 
+            {
+               window.location.href = "checkOutStep2.html"; 
+            });
+        </script>
+    </body>
+</html>

web/checkOutStep2.html

+<!--
+To change this template, choose Tools | Templates
+and open the template in the editor.
+-->
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta name="apple-mobile-web-app-capable" content="yes" />
+        <title id="systemName">Mobile POS</title>
+        <link href="css/bootstrap.css" rel="stylesheet">
+    </head>
+    <body>
+        <div class="navbar-inner ">
+            <div class="container">
+                <div class="navbar ">
+                    <!-- HOME BTN -->
+                    <a class="btn btn-info pull-left" href="checkOut.html" style="display: inline-block">
+                        <i class="icon-arrow-left"></i>Payment detail </a>
+                    <a class="brand" style="margin-left: 250px">&nbsp;&nbsp; Checkout </a>
+
+                </div>
+            </div>
+        </div>
+
+        <div class="container-fluid">
+
+
+            <!--order summary -->
+            <div class="span3">
+                <legend>Order Summary</legend>
+                <div class="row">
+                    <div class="col span1">
+                        <img class="img-rounded" src="http://www.placehold.it/60x60">
+                    </div>
+                    <div class="col span2">
+                        Product Name 
+                        </br>Price: $165
+                        </br>Quantity: 
+                    </div>
+                </div>
+                <br/>
+                <div class="row">
+                    <div class="col span1">
+                        <img class="img-rounded" src="http://www.placehold.it/60x60">
+                    </div>
+                    <div class="col span2">
+                        Product Name 
+                        </br>Price: $165
+                        </br>Quantity: 
+                    </div>
+                </div>
+                <br/>
+                <div class="row">
+                    <b class="pull-right">Total $500</b>
+                </div>
+            </div>
+
+            <!--payment information request-->
+            <div class="span9">
+                <br/>
+
+
+
+                <!--Delivery detail form -->
+                <div class="row well" style="margin-left: 10px"> 
+                    <form class="form-horizontal2 ">
+                        <legend> Customer detail </legend>
+                        <div class="control-group">
+                            <label class="control-label" for="inputName">Name </label>
+                            <div class="controls">
+                                <input type="text" id="inputName" placeholder="Name">
+                            </div>
+                        </div>
+                        <div class="control-group">
+                            <label class="control-label" for="inputAdd">Address</label>
+                            <div class="controls">
+                                <input type="text" id="inputAdd" placeholder="Address">
+                            </div>
+                        </div>
+                        <div class="control-group">
+                            <label class="control-label" for="inputContact">Contact No:</label>
+                            <div class="controls">
+                                <input type="text" id="inputContact" placeholder="Contact Number">
+                            </div>
+                        </div>
+                        <div class="control-group">
+                            <label class="control-label" for="inputEmail">Email</label>
+                            <div class="controls">
+                                <input type="text" id="inputEmail" placeholder="Email">
+                            </div>
+                        </div>
+                        <button class="btn offset1  btn-info pull-right" id="btnFinish" type="button">Submit customer detail <i class="icon-arrow-right"></i></button>
+                    </form>
+                </div>
+            </div>
+
+        </div>
+
+        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
+        <script src="js/bootstrap.min.js"></script>
+        <script>
+            $('#btnFinish').click(function() 
+            {
+                window.location.href = "checkOutStep3.html"; 
+            });
+        </script>
+    </body>
+</html>

web/checkOutStep3.html

+<!--
+To change this template, choose Tools | Templates
+and open the template in the editor.
+-->
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta name="apple-mobile-web-app-capable" content="yes" />
+        <title id="systemName">Mobile POS</title>
+        <link href="css/bootstrap.css" rel="stylesheet">
+    </head>
+    <body>
+        <div class="navbar-inner ">
+            <div class="container">
+                <div class="navbar ">
+                    <!-- HOME BTN -->
+                    <a class="btn btn-info pull-left" href="checkOut.html" style="display: inline-block">
+                        Home </a>
+                    <a class="brand" style="margin-left: 250px">&nbsp;&nbsp; Order Summary </a>
+
+                </div>
+            </div>
+        </div>
+
+        <div class="container-fluid">
+            </br>
+            <div class="row well" style="margin-left:10px">
+                <legend>Orders</legend>
+                <table class="table table-bordered">
+                    <thead>
+                        <tr>
+                            <th>Item (Qty) </th>
+                            <th>Total Price </th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>Table lamp base (1) </td>
+                            <td>$19.90 </td>
+                        <tr>
+                    </tbody>
+                </table>
+                <div class="row pull-right">
+                    <h5>Total: $150</h5>
+                </div>
+            </div>
+
+
+            <div class="row well" style="margin-left:10px">
+                <legend>Your Information</legend>
+                Name: Steve Ng
+                <br/>Address: Blk 501, Hougang hehee ave 9, #01-11 (530501)
+                <br/>Contact No: 96210234
+                <br/>Email : xxx
+
+                <br/><br/>
+                Credit Card No: xxxxxxxxxxxx1234
+                </br>Cw2/Cv2: 9xx
+                </br>Expiry date: 27/xx/xx
+
+                <button class="btn   btn-info pull-right" id="btnFinish" type="button">Click here to return home and clear your information</button>
+            </div>
+
+        </div>
+
+        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
+        <script src="js/bootstrap.min.js"></script>
+
+        <script>
+            
+            $('#btnFinish').click(function() 
+            {
+                window.location.href = "index.html"; 
+            });
+            
+        </script>
+    </body>
+</html>

web/css/bootstrap.css

   margin-bottom: 0;
   vertical-align: left;
   *zoom: 1;
+  width:300px;
 }
 
 .form-search .hide,
 
 .form-horizontal2 .control-label {
   float: left;
-  width: 100px;
+  width: 120px;
   padding-top: 5px;
   text-align: left;
 }
 
 .form-horizontal .control-label {
   float: left;
-  width: 160px;
   padding-top: 5px;
   text-align: right;
 }
 .form-horizontal .controls {
   *display: inline-block;
   *padding-left: 20px;
-  margin-left: 180px;
+  margin-left: 100px;
   *margin-left: 0;
 }
 
 
 .popover {
   position: absolute;
+  margin-left: -120px;
   top: 0;
   left: 0px;
   z-index: 1010;
   display: none;
-  width: 236px;
+  width: 350px;
   padding: 1px;
   background-color: #ffffff;
   border: 1px solid #ccc;
 .popover.bottom .arrow {
   top: -10px;
   left: 50%;
-  margin-left: -10px;
+  margin-left: 125px;
   border-bottom-color: #ffffff;
   border-width: 0 10px 10px;
 }
                 <div class="navbar ">
                     <!-- HOME BTN -->
                     <a class="btn btn-info pull-left" href="index.html" style="display: inline-block">
-                        <i class="icon-arrow-left"></i>Home </a>
-                    <!--<a "id="shoppingCart" class="btn btn-info pull-right" style="display:inline-block"><i class="icon-shopping-cart"></i> Shopping Cart </a> -->
+                        <i class="icon-arrow-left"></i>Home 
+                    </a>
                     <a class="brand" style="margin-left: 250px">&nbsp;&nbsp; Browse Product
                     </a>
                     <form class="navbar-search">
                     <!-- Shopping cart popover -->
                     <a id="shoppingCart" class="btn btn-info pull-right" style="display: inline-block; margin-right: 20px">
                         <i class="icon-shopping-cart"></i>Shopping Cart </a>
-                    <!--<a id ="shoppingCart" class="btn pull-right" rel="popover" ><<img src="http://www.placehold.it/30x30"> HEHE </a> -->
                     <div id="popover_content_title" class="container row" style="display: none">
-                        <div class="col span2">
-                            Product Detail </div>
+                        <div class="col span3">
+                            &nbsp;&nbsp; Product Detail </div>
                         <div class="col">
                             Qty </div>
                     </div>
                     <div id="popover_content_wrapper" style="display: none">
                         <div class="container">
                             <div class="row">
-                                <div class="col span2">
-                                    Product Name $100 </div>
-                                <div class="col offset2">
-                                    1 </div>
+                                <div class="col span3">
+                                    <button class="btn-info btn-mini">
+                                        x</i>
+                                    </button>
+                                     
+                                    Product Name 1 $100 
+                                </div>
+                                <div class="col offset3">
+                                    1 
+                                </div>
                             </div>
-                            <br />
+                            <br/>
                             <div class="row">
-                                hehe </div>
+                                <div class="col offset3">
+                                    Total : $9999
+                                </div>
+                            </div>
+                            <div class="row">
+                                <div class="col offset3">
+                                    <a class="btn btn-small btn-info" href="checkOut.html" style="display: inline-block">
+                                        Checkout <i class="icon-arrow-right"></i>
+                                    </a>
+                                </div>
+                            </div>
                         </div>
                     </div>
                 </div>
 
         <div class="container">
             <!-- Button to trigger modal -->
-     <!--       <a href="#myModal" role="button" class="btn" data-toggle="modal">Launch demo modal</a>
-
+            <!--       <a href="#myModal" role="button" class="btn" data-toggle="modal">Launch demo modal</a>
+       
             <!-- Modal -->
             <div class="modal hide fade in" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="false">
                 <div class="modal-header">