Source

POS Front End Updated UI / build / web / product.html

Full commit
<!--
To change this template, choose Tools | Templates
and open the template in the editor.
-->
<!DOCTYPE html>
<html>

    <head>
        <meta content="yes" name="apple-mobile-web-app-capable" />
        <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="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> -->
                    <a class="brand" style="margin-left: 250px">&nbsp;&nbsp; Browse Product
                    </a>
                    <form class="navbar-search">
                        &nbsp;&nbsp; <input class="search-query" placeholder="Search Product" style="width: 180px" type="text"> &nbsp;&nbsp
                    </form>
                    <!-- 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">
                            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>
                            <br />
                            <div class="row">
                                hehe </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="container-fluid">
            <div class="row-fluid">
                <div class="span3">
                    <br>
                    <ul class="nav nav-list affix-top">
                        <!--<li class="nav-header">Products Categories</li> -->
                        <li class="active"><a href="#Tables"><br>Tables
                                <i class="icon-chevron-right pull-right"></i></a></li>
                        <li><a href="#Chairs"><br>Chairs
                                <i class="icon-chevron-right pull-right"></i></a></li>
                        <li><a href="#"><br>Beds
                                <i class="icon-chevron-right pull-right"></i></a></li>
                        <li><a href="#"><br>Lightings
                                <i class="icon-chevron-right pull-right"></i></a></li>
                        <li><a href="#"><br>Cupboards
                                <i class="icon-chevron-right pull-right"></i></a></li>
                    </ul>
                </div>
                <div class="span9">
                    <br />
                    <!-- Table ============================================== -->
                    <section id="Tables">
                        <div class="container" style="text-align: center">
                            <div class="row">
                                <div class="span3">

                                    <a href="#myModal" role ="button" data-toggle="modal"> 
                                        <img class="img-rounded" src="http://www.placehold.it/125x125">
                                    </a>
                                    <h5>Product Name </h5>
                                    <h6>$100 </h6>

                                </div>
                                <div class="span3 ">
                                    <img class="img-rounded" src="http://www.placehold.it/125x125">
                                    <h5>Product Name </h5>
                                    <h6>$100 </h6>
                                </div>
                                <div class="span3 ">
                                    <img class="img-rounded" src="http://www.placehold.it/125x125">
                                    <h5>Product Name </h5>
                                    <h6>$100 </h6>
                                </div>
                            </div>
                            <div class="row">
                                <div class="span3">
                                    <img class="img-rounded" src="http://www.placehold.it/125x125">
                                    <h5>Product Name </h5>
                                    <h6>$100 </h6>
                                </div>
                                <div class="span3 ">
                                    <img class="img-rounded" src="http://www.placehold.it/125x125">
                                    <h5>Product Name </h5>
                                    <h6>$100 </h6>
                                </div>
                                <div class="span3 ">
                                    <img class="img-rounded" src="http://www.placehold.it/125x125">
                                    <h5>Product Name </h5>
                                    <h6>$100 </h6>
                                </div>
                            </div>
                            <div class="row">
                                <div class="span3">
                                    <img class="img-rounded" src="http://www.placehold.it/125x125">
                                    <h5>Product Name </h5>
                                    <h6>$100 </h6>
                                </div>
                                <div class="span3 ">
                                    <img class="img-rounded" src="http://www.placehold.it/125x125">
                                    <h5>Product Name </h5>
                                    <h6>$100 </h6>
                                </div>
                                <div class="span3 ">
                                    <img class="img-rounded" src="http://www.placehold.it/125x125">
                                    <h5>Product Name </h5>
                                    <h6>$100 </h6>
                                </div>
                            </div>
                        </div>
                    </section>
                    <!-- End of table section ============================== -->

                </div>
            </div>
        </div>

        <div class="container">
            <!-- Button to trigger modal -->
     <!--       <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">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h3 id="myModalLabel">Product Information</h3>
                </div>
                <div class="modal-body">
                    <div class="container-fluid">
                        <div class="row-fluid">
                            <div class="span3">
                                <img class="img-rounded" src="http://www.placehold.it/300x300">
                            </div>
                            <div class="span3">
                                <h6> Product Brand </h6>
                                <h6> Title </h6>
                                <h6> Description  </h6>
                                <h6> Price: $100 </h6>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
                    <button class="btn btn-primary">Add item to cart</button>
                </div>
            </div>


        </div>

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
        <script src="js/bootstrap.js"></script>
        <script>
            $(function ()
            {
                $("#shoppingCart").popover({
                    offset: -0,
                    placement:'bottom',
                    html:'true',
                    content: function() {
                        return $('#popover_content_wrapper').html();
                    },
                    title: function() {
                        return $('#popover_content_title').html();
                    }
                });
            });
            
            
        </script>

    </body>

</html>