-
Notifications
You must be signed in to change notification settings - Fork 8
/
index.html
163 lines (151 loc) · 6.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
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
160
161
162
163
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Leaflet -->
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.5.1/dist/leaflet.css" integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ==" crossorigin="" />
<script src="https://unpkg.com/leaflet@1.5.1/dist/leaflet.js" integrity="sha512-GffPMF3RvMeYyc1LWMHtK8EbPv0iNZ8/oTtHPx9/cc2ILxQ+u905qIwdpULaqDkyBKgOaB57QTMg7ztg8Jm2Og==" crossorigin=""></script>
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<!-- ...Bootstrap -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/toast.css">
<title>nRF Pizza</title>
</head>
<body class="desktop-friendly-size black whole-screen d-flex flex-column">
<!-- Splash view -->
<div id="splashView" class="d-flex flex-column justify-content-center align-items-center flex-fill">
<img id="mainlogo" src="images/nrfPizza_logo.png">
</div>
<!-- Top bar -->
<div class="d-flex flex-row menu align-items-center justify-content-between pr-3 pl-3 fixed-top shadow desktop-friendly-size">
<div class="d-flex flex-row align-items-center">
<div class="pr-1"><img src="images/nrfPizza_icon.svg" class="pizza-icon"></div>
<h5 class="font-weight-bold">nRF Pizza</h5>
</div>
<h6><a id="orderBtn" class="view-btn nrf-light-blue">ORDER</a></h6>
<h6><a id="trackBtn" class="view-btn nrf-light-blue">TRACK</a></h6>
<img id="settingsBtn" src="images/settings_icon.svg" class="view-btn settings-icon">
</div>
<!-- Order view -->
<div id="orderView" class="d-none align-items-center whole-width main flex-fill flex-column">
<div class="card w-75 mb-4 rounded-sm top-card">
<img src="images/pizza_1.png" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Todays Special</h5>
<p class="card-text small text-muted">Tomato sauce, cheese, onion, olives, green bell peppers and pepperoni.</p>
<a data-pizza-name="Todays Special" class="btn btn-block btn-nrf rounded-0">Order now</a>
</div>
</div>
<div class="card w-75 mb-4 rounded-sm">
<img src="images/pizza_4.png" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Pepperoni</h5>
<p class="card-text small text-muted">Tomato sauce, cheese and pepperoni. That's it.</p>
<a data-pizza-name="Pepperoni Pizza" class="btn btn-block btn-nrf rounded-0">Order now</a>
</div>
</div>
<div class="card w-75 mb-4 rounded-sm">
<img src="images/pizza_3.png" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Hawaii</h5>
<p class="card-text small text-muted">Tomato sauce, cheese, delicious pineapple, bacon and ham.</p>
<a data-pizza-name="Hawaii Pizza" class="btn btn-block btn-nrf rounded-0">Order now</a>
</div>
</div>
<div class="card w-75 mb-4 rounded-sm">
<img src="images/pizza_2.png" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Mushroom</h5>
<p class="card-text small text-muted">Tomato sauce, cheese, mushrooms, pepperoni and two types of cheese.</p>
<a data-pizza-name="Mushroom Pizza" class="btn btn-block btn-nrf rounded-0">Order now</a>
</div>
</div>
</div>
<!-- Track view -->
<div id="trackView" class="d-none flex-column flex-even">
<div id="leaflet-map"></div>
<div class="d-flex flex-column flex-even">
<div class="d-flex flex-row flex-even border-bottom">
<div class="d-flex flex-column justify-content-center delivery flex-even border-right">
<div class="align-self-center">
<h6>DELIVERY TIME</h6>
</div>
<div class="align-self-center">
<h1 id="deliveryTime">30:00</h1>
</div>
<div id="deliveryTimeText" class="align-self-center">Pizza is on time</div>
</div>
<div class="d-flex flex-column justify-content-center temperature flex-even">
<div class="align-self-center">
<h6>TEMPERATURE °C</h6>
</div>
<div class="align-self-center">
<h1 id="temperature">-</h1>
</div>
<div class="align-self-center">Pizza is still hot</div>
</div>
</div>
<div class="d-flex flex-row flex-even">
<div class="d-flex flex-column justify-content-center orientation flex-even border-right">
<div class="align-self-center">
<h6>COST</h6>
</div>
<div class="align-self-center">
<h1 id="cost">$18</h1>
</div>
<div id="costText" class="align-self-center">Including delivery</div>
</div>
<div class="d-flex flex-column justify-content-center orientation flex-even">
<div class="align-self-center">
<h6>FLIPPED?</h6>
</div>
<img id="flip-image" src="images/pizzabox.png" class="align-self-center">
<div id="flip" class="align-self-center">No</div>
</div>
</div>
</div>
</div>
<!-- Settings view -->
<div id="settingsView" class="d-none align-items-center whole-width main flex-fill flex-column desktop-friendly-size">
<div class="card w-75 mb-4 rounded-sm top-card">
<div class="card-body">
<h5 class="card-title">Thingy:91 Credentials</h5>
<label for="api-key">API Key</label>
<textarea
id="api-key"
class="form-control mb-3"
aria-label="With textarea"
placeholder="3ce36d0b1b69a0346672a2e9be29a7645688c9f9"
></textarea>
<label for="device-name">Device Name</label>
<div id="device-list" class="list-group" role="tablist"></div>
</div>
</div>
<div class="card w-75 mb-4 rounded-sm ">
<div class="card-body">
<p class="card-text small text-muted">
This web app demonstrates a connection to the nRF Connect for Cloud REST API.
In order to use the app you must find and enter the API Key and Device Name.
</p>
<p class="card-text small text-muted">
Please refer to the <em>Getting Started Guide</em> in the
<a href="https://nrfcloud.com/#/docs" class="nrf-blue">
nRF Connect for Cloud docs
</a>
for more details.
</p>
</div>
</div>
</div>
<!-- App specific JavaScript -->
<script src="js/toast.min.js"></script>
<script src="js/cloud-api.js" crossorigin="anonymous"></script>
<script src="js/app.js"></script>
</body>
</html>