-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathdrinks.html
159 lines (153 loc) · 5.45 KB
/
drinks.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
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="themes/313_Ass1_theme.css" />
<link rel="stylesheet" href="themes/jquery.mobile.icons.min.css" />
<link rel="stylesheet" href="css/appetizer.css" />
<!--http://jqmdesigner.appspot.com/designer.html#&id=1439553481841-->
<link href="http://jqmdesigner.appspot.com/gk/lib/jquery.mobile/1.4.5/jquery.mobile-1.4.5.min.css" rel="stylesheet" type="text/css" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>
<body>
<!--The drink1 page-->
<div data-role="page" id="drink1" data-theme="d">
<!--header: Back menu icon: go back to the menu.html
bar list icon: show more dishes in this category in the right(right-menu)
shopping icon: jump to recipe.html to see ordered dishes
-->
<div data-role="header">
<a href="menu.html" class="ui-btn ui-btn-icon-left ui-icon-carat-l ui-btn-icon-notext ui-corner-all">Back Menu</a>
<h5>Desserts</h5>
<a href="#right-menu" class="ui-btn ui-btn-right ui-icon-bars ui-btn-icon-notext ui-corner-all" style="margin-right: 30px;">Bar</a>
<a href="recipe.html" class="ui-btn ui-btn-right ui-icon-carat-l ui-btn-icon-notext ui-corner-all" s tyle="margin-right: 30px;">Recipe</a>
</div>
<!-- right-menu -->
<div id="right-menu" data-role="panel" data-position="left" data-theme="b" data-position-fixed="false" data-display="overlay">
<span>Drinks</span>
<a href="#drink1"
class="ui-btn ui-btn-active" data-theme="b" data-rel="close">Drink1</a>
<a href="#drink2"
class="ui-btn" data-theme="b" data-rel="close">Drink2</a>
</div>
<!--main-->
<div data-role="main" class="ui-content">
<img id="menuImag" src="img/appetizer1.jpg" />
<table data-role="table" id="table-column-toggle" data-mode="columntoggle" class="ui-responsive table-stroke">
<thead>
<tr>
<th>Drink1</th>
</tr>
</thead>
<tbody>
<tr>
<td>Small</td>
<td>$5.00</td>
</tr>
<tr>
<td>Medium</td>
<td>$10.00</td>
</tr>
<tr>
<td>Medium</td>
<td>$15.00</td>
</tr>
</tbody>
</table>
</div>
<!--footer-->
<div data-role="footer">
<!--Two columns:
One form with two colums: choose size and quatity
One submit button: add the pervious form into the recipe.html
-->
<div data-role="navbar" style="margin:0 0 -5px;">
<form id="formDrn1" method="post">
<label for="select-size">Size</label>
<select name="select-size" id="select-size" data-native-menu="false">
<option value="s">small</option>
<option value="m">Medium</option>
<option value="b">Big</option>
</select>
<label for="select-qty">Qty</label>
<select name="select-qty" id="select-qty" data-native-menu="false">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<input type="submit" value="Add" />
</div>
</div>
</div>
<!--End of drink1 page-->
<!--The drink2 page-->
<div data-role="page" id="drink2" data-theme="d">
<!--header: Back menu icon: go back to the menu.html
bar list icon: show more dishes in this category in the right(right-menu)
shopping icon: jump to recipe.html to see ordered dishes
-->
<div data-role="header">
<a href="menu.html" class="ui-btn ui-btn-icon-left ui-icon-carat-l ui-btn-icon-notext ui-corner-all">Back Menu</a>
<h5>Drinks</h5>
<a href="#right-menu" class="ui-btn ui-btn-right ui-icon-bars ui-btn-icon-notext ui-corner-all" style="margin-right: 30px;">Bar</a>
<a href="recipe.html" class="ui-btn ui-btn-right ui-icon-carat-l ui-btn-icon-notext ui-corner-all" s tyle="margin-right: 30px;">Recipe</a>
</div>
<!-- right-menu -->
<div id="right-menu" data-role="panel" data-position="left" data-theme="b" data-position-fixed="false" data-display="overlay">
<span>Drinks</span>
<a href="#drink1"
class="ui-btn ui-btn-active" data-theme="b" data-rel="close">Drink1</a>
<a href="#drink2"
class="ui-btn" data-theme="b" data-rel="close">Drink2</a>
</div>
<!--main-->
<div data-role="main" class="ui-content">
<img id="menuImag" src="img/appetizer1.jpg" />
<table data-role="table" id="table-column-toggle" data-mode="columntoggle" class="ui-responsive table-stroke">
<thead>
<tr>
<th>Drink2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Small</td>
<td>$5.00</td>
</tr>
<tr>
<td>Medium</td>
<td>$10.00</td>
</tr>
<tr>
<td>Medium</td>
<td>$15.00</td>
</tr>
</tbody>
</table>
</div>
<!--footer-->
<div data-role="footer">
<!--Two columns:
One form with two colums: choose size and quatity
One submit button: add the pervious form into the recipe.html
-->
<form id="formDrn2" method="post">
<label for="select-size">Size</label>
<select name="select-size" id="select-size" data-native-menu="false">
<option value="s">small</option>
<option value="m">Medium</option>
<option value="b">Big</option>
</select>
<label for="select-qty">Qty</label>
<select name="select-qty" id="select-qty" data-native-menu="false">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<input type="submit" value="Add" />
</form>
</div>
</div>
</body>
</html>