inyoung
/
grocerycalc


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212
							<!DOCTYPE html>
<!--
File Name: index.html
Author Name: In-young Choung
Date: April 15, 2017
Description: This html serves content locally to interact with users
             and sends users' input values to Javascript.
>

<html lang="en">

<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta charset="utf-8">
    <title>Calculate Grocery</title>
    <meta name="generator" content="Bootply" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
{#    <link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css" rel="stylesheet">#}
    <!--[if lt IE 9]>
      <script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    <link href="{{ url_for('static', filename='css/bootstrap.min.css') }}" rel="stylesheet">
    <link href="{{ url_for('static', filename='css/styles.css') }}" rel="stylesheet">
    <link href="{{ url_for('static', filename='css/inyoung.css') }}" rel="stylesheet">


</head>

<body>
    <div class="container-full">
        <div class="row">
            <div class="col-lg-12 text-center v-center">
                <h1>Grocery Calculation</h1>
                <p class="lead">Smart-save your grocery expense.</p>
                <br>
                <br>
                <br>
                <form class="col-lg-12" action="{{url_for('index')}}" method="POST">
                    <div class="input-group" style="width:340px;text-align:center;margin:0 auto;, ">
                       {# <input class="form-control input-lg" title="Don't worry. We hate spam, and will not share your email with anyone." placeholder="Enter your email address" type="email" name="email">
                        <input class="form-control input-lg" title="Use the password you use for everything. Trust us." placeholder="Enter your password" type="password" name="password">

                        <span class="input-group-btn"><button class="btn btn-lg btn-primary" type="submit">GO</button></span>#}
                    </div>
                </form>
            </div>
        </div>
{#                action="action_page.php"#}


            <br><br>
            <form id = "calcform" style = "margin-left: 20%">
            <table id="comparison-table" style="width: auto;">
                <tr>
                    <td>
                        Item Type:
                    </td>
                    <td class="colspan-4" colspan="4">
                        <input type="text" name="itemtype"  placeholder="Bacon" >
                    </td>
                </tr>
                <tr>
                    <td>
                        Brand Name:
                    </td>
                    <td class="colspan-2" colspan="2">
                        <input type="text" name="brandname1" placeholder="Maple Leaf" value="">
                    </td>
                    <td class="colspan-2" colspan="2">
                        <input type="text" name="brandname2" placeholder="Shanaor" value="">
                    </td>
                </tr>
                <tr>
                    <td>
                        Price:
                    </td>
                    <td class="colspan-2" colspan="2">
                        <input type="text" name="price1" value="">
                    </td>
                    <td class="colspan-2" colspan="2">
                        <input type="text" name="price2" value="">
                    </td>
                </tr>
                <tr>
                    <td>
                      Weight:
                    </td>
                    <td>
                        <input type="text" name="weight1" value="">
                    </td>
                    <td>
                        <select>
                            <option>lb</option>
                            <option>kg</option>
                            <option>g</option>
                        </select>
                    </td>
                    <td>
                        <input type="text" name="weight2" value = "">
                    </td>
                    <td>
                        <select>
                            <option>lb</option>
                            <option>kg</option>
                            <option>g</option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td>
                        Discounts:
                    </td>
                    <td>
                       <input type="text" name="discount1" value="">
                    </td>
                    <td>
                        <select>
                            <option>percentage</option>
                            <option>dollar</option>
                        </select>
                    </td>
                    <td>
                       <input type="text" name="discount2" value="">
                    </td>
                    <td>
                        <select>
                            <option>percentage</option>
                            <option>dollar</option>
                        </select>
                    </td>
                 </tr>
                </table>
            <br><br>
            <button type="button"
                    onclick="calc_handle(this.form[0].value, this.form[1].value,
                                         this.form[2].value, this.form[3].value,
                                         this.form[4].value, this.form[5].value,
                                         this.form[6].value, this.form[7].value,
                                         this.form[8].value, this.form[9].value,
                                         this.form[10].value, this.form[11].value,
                                         this.form[12].value)"
                    value="calculate_btn">Calculate</button>
            <br><br>
        </form>
        <!-- /row -->

        <div class="row">
            <div class="col-lg-12 text-center v-center" style="font-size:39pt;">
{#                <a href="#"><i class="icon-google-plus"></i></a>#}
                <a href="#"><i class="icon-facebook"></i></a>
                <a href="#"><i class="icon-twitter"></i></a>
                <a href="#"><i class="icon-github"></i></a>
{#                <a href="#"><i class="icon-pinterest"></i></a>#}
            </div>
        </div>
        <br>
        <br>
        <br>
        <br>
        <br>
    </div>
    <!-- /container full -->

    <div class="container">
        <hr>
        <div class="row">
            <div class="col-md-4">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h3>Hello.</h3>
                    </div>
                    <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra varius quam sit amet vulputate. Quisque mauris augue, molestie tincidunt condimentum vitae, gravida a libero. Aenean sit amet felis dolor, in sagittis nisi. Sed ac orci quis tortor imperdiet venenatis. Duis elementum auctor accumsan. Aliquam in felis sit amet augue.
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h3>Hello.</h3>
                    </div>
                    <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra varius quam sit amet vulputate. Quisque mauris augue, molestie tincidunt condimentum vitae, gravida a libero. Aenean sit amet felis dolor, in sagittis nisi. Sed ac orci quis tortor imperdiet venenatis. Duis elementum auctor accumsan. Aliquam in felis sit amet augue.
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h3>Hello.</h3>
                    </div>
                    <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra varius quam sit amet vulputate. Quisque mauris augue, molestie tincidunt condimentum vitae, gravida a libero. Aenean sit amet felis dolor, in sagittis nisi. Sed ac orci quis tortor imperdiet venenatis. Duis elementum auctor accumsan. Aliquam in felis sit amet augue.
                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-lg-12">
                <br>
                <br>
                <p class="pull-right"><a href="http://www.bootply.com">Template from Bootply</a> &nbsp; ©Copyright 2014 ACME<sup>TM</sup> Brand.</p>
                <br>
                <br>
            </div>
        </div>
    </div>

    <!-- script references -->
    <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
    <script src="{{ url_for('static', filename='js/bootstrap.min.js') }}"></script>
    <script src="{{ url_for('static', filename='js/scripts.js') }}"></script>
</body>
</html>