Permalink
Switch branches/tags
Nothing to show
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
333 lines (259 sloc) 13.3 KB
<!DOCTYPE html>
<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">
<title>Code.JS Food</title>
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body id="page-top" data-spy="scroll" data-target=".navbar-fixed-top">
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header page-scroll">
<button type="button" class="navbar-toggle" data-toggle="collapse"
data-target=".navbar-ex1-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand page-scroll" href="#page-top">
<span class="logo-text">Code.js Food</span>
</a>
</div>
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav center-nav">
<li class="hidden">
<a class="page-scroll" href="#page-top"></a>
</li>
<li>
<a class="page-scroll" href="#pizza">
<span>
<i class="ionicons ion-pizza"></i>
&nbsp;Pizza &nbsp;
</span>
</a>
</li>
<li>
<a class="page-scroll" href="#drink">
<span>
<i class="ionicons ion-beer"></i>
&nbsp; Drinks &nbsp;
</span>
</a>
</li>
<li>
<a class="page-scroll" href="#order">
<span>
<i class="ionicons ion-card"></i>
Your order
</span>
</a>
</li>
</ul>
</div>
<div class="order-preview">
<a class="page-scroll" href="#order" title="Ordered items">
<i class="glyphicon glyphicon-shopping-cart"></i>
<strong id="order-items-count">(0)</strong>
</a>
</div>
</div>
</nav>
<div class="divided30"></div>
<!-- Intro -->
<section id="hello" class="hello-section">
<div class="container">
<div class="row">
<div class="col-lg-12">
<h1>Welcome to Code.JS Food!</h1>
<h5>Check our tasty <strong>menu</strong> lorem ipsum</h5>
<div class="divided20"></div>
<h3><strong>Are you hungry?</strong></h3>
<p>
Just order our awesome <code>pizza</code> and drinks <code>(beer, soda, rum)</code>.
You can do it so easy - few clicks and ready!
</p>
<div class="divided30"></div><div class="divided10"></div>
<p><em>Bon Appetit!</em></p>
<div class="divided30"></div><div class="divided10"></div>
<a class="btn btn-default page-scroll" id="welcome-btn" href="#pizza">
<strong>I'm hungry - show me menu!</strong>
</a>
</div>
</div>
</div>
</section>
<!-- Section with pizza items -->
<section id="pizza" class="pizza-section">
<div class="container">
<div class="row">
<div class="col-lg-12">
<h1>
<i class="ionicons ion-pizza"></i>
Pizzas
</h1>
<div class="divided10"></div>
<div class="container-fluid" id="pizzas-items"></div>
<div class="divided20"></div>
<a class="page-scroll mini-nav-link" href="#drink">
<i class="ionicons ion-beer"></i> <span>Something to drink?</span>
</a>
</div>
</div>
</div>
</section>
<!-- Drinks offer -->
<section id="drink" class="drink-section">
<div class="container">
<div class="row">
<div class="col-lg-12">
<h1>
<i class="ionicons ion-beer"></i>
Drinks
</h1>
<div class="container-fluid" id="drinks-items"></div>
<div class="divided20"></div>
<a class="page-scroll mini-nav-link" href="#pizza">
<i class="ionicons ion-pizza"></i> <span>I want more pizza!</span>
</a>
</div>
</div>
</div>
</section>
<!-- "Your order" Section -->
<section id="order" class="order-section">
<div class="container">
<div class="row">
<div class="col-lg-12">
<h1>
<i class="ionicons ion-card"></i>
Your order
</h1>
<div class="container-fluid" id="order-items">
No items yet.
</div>
<div class="divided20"></div>
<div class="container-fluid" id="submit-area">
<!-- very simple form to type user contact data -->
<strong>We need your address</strong>
<div class="divided10"></div>
<input type="text" id="user-phone" placeholder="Your phone number">
<input type="text" id="user-address" placeholder="Delivery address">
<div class="divided30"></div>
<a class="btn btn-default page-scroll" id="welcome-btn" href="#"
onclick="pizzaApp.validate()">
<strong>Order now</strong>
</a>
</div>
</div>
</div>
</div>
</section>
<!-- templates for mustache.js -->
<script id="pizzas-grid" type="text/template">
<div class="col-xs-4 col-md-4 pizza-col-item">
<img class="photo-sml" src="{{img}}" title="Details: {{details}}" alt="Pizza">
<h6 class="pizza-title"><em>{{name}}</em></h6>
<div class="pizza-price">{{price_format}}</div>
<div title="Add to cart" class="pizza-add-to-cart">
<a href="javascript:pizzaApp.addPizzaToCart('{{name}}', '{{price}}', '{{index}}')">
<i class="glyphicon glyphicon-shopping-cart"></i> (+)
<span class="cart-added-blinker" id="blinker-{{index}}"> &nbsp;Added to cart</span>
</a>
<!-- TODO: consider adding of a small input for amount, to enable user add few items at once -->
</div>
</div>
</script>
<!--
NOTE: template for each type of drink; it could be (and would be reasonable in case of more drink types)
generated dynamically e.g. from drinks-data stored in DB
-->
<script id="drinks-grid-soda" type="text/template">
<div class="col-xs-4 col-md-4 drink-col-item">
<img class="photo-sml" src="{{img}}" alt="Drink">
<h6 class="pizza-title"><em>{{name}}</em></h6>
<div class="pizza-price">{{price_format}}</div>
<div title="Add to cart" class="pizza-add-to-cart">
<a href="javascript:pizzaApp.addDrinkToCart('{{name}}', '{{price}}', '{{index}}', '{{type}}')">
<i class="glyphicon glyphicon-shopping-cart"></i> (+)
<span class="cart-added-blinker" id="blinker-{{index}}-{{type}}"> &nbsp;Added to cart</span>
</a>
</div>
</div>
</script>
<script id="drinks-grid-beer" type="text/template">
<div class="col-xs-4 col-md-4 drink-col-item">
<img class="photo-sml" src="{{img}}" alt="Drink">
<h6 class="pizza-title"><em>{{name}}</em></h6>
<div class="pizza-price">{{price_format}}</div>
<div title="Add to cart" class="pizza-add-to-cart">
<a href="javascript:pizzaApp.addDrinkToCart('{{name}}', '{{price}}', '{{index}}', '{{type}}')">
<i class="glyphicon glyphicon-shopping-cart"></i> (+)
<span class="cart-added-blinker" id="blinker-{{index}}-{{type}}"> &nbsp;Added to cart</span>
</a>
</div>
</div>
</script>
<script id="drinks-grid-rum" type="text/template">
<div class="col-xs-4 col-md-4 drink-col-item">
<img class="photo-sml" src="{{img}}" alt="Drink">
<h6 class="pizza-title"><em>{{name}}</em></h6>
<div class="pizza-price">{{price_format}}</div>
<div title="Add to cart" class="pizza-add-to-cart">
<a href="javascript:pizzaApp.addDrinkToCart('{{name}}', '{{price}}', '{{index}}', '{{type}}')">
<i class="glyphicon glyphicon-shopping-cart"></i> (+)
<span class="cart-added-blinker" id="blinker-{{index}}-{{type}}"> &nbsp;Added to cart</span>
</a>
</div>
</div>
</script>
<div id="pizza-alert-dialog" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header" style="cursor: pointer">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
<h4 class="modal-title" style="text-align: center">
<!--<span class="glyphicon glyphicon-alert"></span>-->
<span id="dialog-title">Food App</span>
</h4>
</div>
<div class="modal-body">
<div class="divided30"></div>
<div class="row" style="margin: 0 auto; width: 100%">
<p style="text-align: center" id="alert-validation-msg"></p>
</div>
<div class="divided30"></div>
<div style="text-align: center">
<button type="button" class="btn btn-info" data-dismiss="modal">
<strong>OK</strong>
</button>
</div>
</div>
</div>
</div>
</div>
<div class="clearfix"></div>
<footer class="footer">
<div class="container">
© javascript-html5-tutorial.com
<a href="#" id="back-to-top" title="Back to top">&uarr;</a>
</div>
</footer>
<!-- externals: jQ, jq.easing, bootstrap -->
<script src="js/jquery.min.js"></script>
<!--<script src="js/jquery-ui.min.js"></script>-->
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.easing.min.js"></script>
<script src="js/mustache.min.js"></script>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/ionicons.min.css" rel="stylesheet">
<!-- core resources -->
<script src="js/pizza_app.js"></script>
<link rel="stylesheet" type="text/css" href="css/app.css">
</body>
</html>