forked from kth-csc-iprog/dinnerplanner-html
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
130 lines (117 loc) · 4.97 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
<!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>Dinner planner</title>
<link rel="stylesheet" href="./styles.css">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS"
crossorigin="anonymous">
</head>
<body>
<div class="alert alert-danger" id="alert" role="alert">
</div>
<h1 class="title my-0">Dinner planner</h1>
<div class="container-float overflow-hidden">
<div class="row mx-0">
<div id="sidebar" class="col-sm-12 col-md-4 col-lg-3 mx-0">
<div id="sidebar-toggle" class='btn-toolbar pull-right'>
<div class='btn-group d-md-none d-lg-none d-sm-block d-xs-block'>
<button type='button' id="sidebar-toggle" data-target="#sidebar-hidden-part" class="btn btn-primary" data-toggle="collapse">Toggle</button>
</div>
</div>
<h4>My Dinner</h4>
<div id="sidebar-hidden-part" class="collapse d-lg-block d-md-block">
<div>People</div>
<input type="number" min="0" id="people">
<table id="sidebarTable"></table>
<button class="btn btn-light" id="confirmDinner">Confirm order</button>
</div>
<h5 id="total-due">Total: $75</h5>
</div>
<div class="col-sm-12 col-md col-lg px-0">
<div id="welcomeView" class="col-12"></div>
<div id="goBackView" class="col-12">
<div class="justify-content-between">
<h3 id="dinnerText"></h3>
<button id="goBack" class="btn btn-light float-right">Go back and edit dinner</button>
</div>
</div>
<div id="dishSearchView" class="col-12">
<h5>Find a dish</h5>
<div class="row">
<div class="col-sm-12 col-md-4">
<input type="text" id="dish">
</div>
<div class="col-sm-12 col-md-4">
<select name="category" id="options">
<option value="main course">Main Course</option>
<option value="side dish">Side Dish</option>
<option value="dessert">Dessert</option>
<option value="appetizer">Appetizer</option>
<option value="salad">Salad</option>
<option value="bread">Bread</option>
<option value="breakfast">Breakfast</option>
<option value="soup">Soup</option>
<option value="beverage">Beverage</option>
<option value="sauce">Sauce</option>
<option value="drink">Drink</option>
<!--main course, side dish, dessert, appetizer, salad, bread, breakfast, soup, beverage, sauce, or drink -->
</select>
</div>
<div class="col-sm-12 col-md-4">
<button id="search" class="btn btn-light">Search</button>
</div>
</div>
</div>
<div id="dishItemView" class="col-12 px-0">
<div id="dishrows" class="row food border border-dark justify-content-center mx-auto"></div>
<div class="loader"></div>
</div>
<div id="dinnerPrintoutView" class="col-12"></div>
<div id="dishDetailsView" class="row pl-3">
<div class="loader"></div>
<div id="dishDetails-outerBox" class='col-sm-12 col-md-6 p-3'>
<button id="detailsBack" class="btn btn-light">Back to Search</button>
</div>
</div>
<div id="dinnerOverView" class="row w-100 mx-0 my-0">
<div id="dinnerRows" class="row food border border-dark justify-content-center mx-auto w-100"></div>
<div class="row justify-content-center w-100 col-md-12 m-4">
<button id="print-full-recipie" class="btn btn-light align-self-center">
Print Full Recipe
</button>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- jQuery -->
<script src="https://code.jquery.com/jquery.js"></script>
<!-- Bootstrap JavaScript, needed if you want for instance tabs, models, popovers etc. -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<!-- The application JavaScript code -->
<script src="js/app.js"></script>
<script src="js/model/dinnerModel.js"></script>
<script src="js/view/exampleView.js"></script>
<script src="js/view/welcomeView.js"></script>
<script src="js/view/sidebarView.js"></script>
<script src="js/view/dishSearchView.js"></script>
<script src="js/view/dishItemView.js"></script>
<script src="js/view/goBackView.js"></script>
<script src="js/view/dinnerPrintoutView.js"></script>
<script src="js/view/dishDetailsView.js"></script>
<script src="js/view/dinnerOverView.js"></script>
<script src="js/controller/dinnerOverViewController.js"></script>
<script src="js/controller/goBackController.js"></script>
<script src="js/controller/sidebarController.js"></script>
<script src="js/controller/welcomeController.js"></script>
<script src="js/controller/dishItemController.js"></script>
<script src="js/controller/dishDetailsController.js"></script>
<script src="js/controller/dishSearchController.js"></script>
<!-- TODO: Here you should include JS code for your other views -->
</body>
</html>