-
Notifications
You must be signed in to change notification settings - Fork 5
Expand file tree
/
Copy pathapplication.html
More file actions
370 lines (363 loc) · 31.1 KB
/
Copy pathapplication.html
File metadata and controls
370 lines (363 loc) · 31.1 KB
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
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
<!DOCTYPE html>
<html lang="en">
<head>
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-10896062-3"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-10896062-3');
</script>
<title>Healthy Living</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vide/0.5.1/jquery.vide.min.js"></script>
<script src="js/application.js"></script>
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:200,300,400,600,700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
<link rel="stylesheet" href="https://use.typekit.net/hgq1zqp.css">
<link rel="stylesheet" href="css/application.css" />
<link rel="stylesheet" href="css/nav.css" />
</head>
<body data-vide-bg="mp4: img/application/landing/landing2.mp4">
<!-- Help Modal -->
<div class="modal fade" id="helpModal">
<div class="modal-dialog modal-xl">
<div class="modal-content help-menu-content">
<div class="container-fluid m-0 p-0">
<div class="row h-100 mh-100">
<div class="col-md-3">
<ul class="help-menu-list">
<li data-value="intro" class="help-menu-list-item active"><h3 class="help-menu-list-title">Introduction</h3></li>
<li data-value="selection" class="help-menu-list-item"><h3 class="help-menu-list-title">Selection Process</h3></li>
<li data-value="breadcrumb" class="help-menu-list-item"><h3 class="help-menu-list-title">Breadcrumb</h3></li>
<li data-value="render" class="help-menu-list-item"><h3 class="help-menu-list-title">Render</h3></li>
<li data-value="plan" class="help-menu-list-item"><h3 class="help-menu-list-title">Plan</h3></li>
<li data-value="graph" class="help-menu-list-item"><h3 class="help-menu-list-title">CS Graph</h3></li>
<li data-value="chart" class="help-menu-list-item"><h3 class="help-menu-list-title">CS Chart</h3></li>
<li data-value="rightpanel" class="help-menu-list-item"><h3 class="help-menu-list-title">Right Panel</h3></li>
</ul>
</div>
<div class="col-md-9">
<div class="help-section" id="help-intro">
<div class="modal-header">
<h4 class="modal-title">Introduction to the Application Help Menu</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body help-body">
<p class="help-menu-p">
The <b>help menu</b> exists to provide you with information about how to <b>use this website most effectively</b>. This specific help menu is targeted at the <b>application</b> portion of the healthy buildings website. If you need help regarding the background portion of the healthy buildings website, or simply want to learn more about the fundamentals of circadian lighting, click <a href="index.html"> here </a> to navigate to the background page. Click "help" in the top navigation bar again to access the background page's respective help menu.
</p>
<figure class="w-95 text-center"><img src="img/help/application/intro/1.png" class="w-85 my-4 rounded drop-shadow" alt=""></figure>
</div>
</div>
<div class="help-section d-none" id="help-selection">
<div class="modal-header">
<h4 class="modal-title">Selection Process</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body help-body">
<p class="help-menu-p">
When first arriving on the <b>application page</b> you will be met with the <i>Designing in a New Light</i> title, a short description, and the <b>begin</b> button. Clicking the <b>begin</b> button will initiate you into the selection process.
</p>
<figure class="w-95 text-center"><img src="img/help/application/selection_process/1.png" class="w-85 my-4 rounded drop-shadow" alt=""></figure>
<p class="help-menu-p">
Once you begin the <b>selection process</b> you will be tasked with choosing a single selection from the <b>six</b> different categories. In order, the categories are <b>Facility</b> -> <b>Room</b> -> <b>Fixtures</b> -> <b>Target CS</b> -> <b>CCT System</b> -> <b>CCT</b>. Each selection is represented by a card with an image and a description, going into more detail about that selection and why you may want to select it. To <b>choose a selection</b> simply click anywhere on the card and you will automatically be brought to the next selection category.
</p>
<figure class="text-center"><img src="img/help/application/selection_process/2.png" class="w-85 my-4 rounded drop-shadow" alt=""></figure>
<p class="help-menu-p">
You may also click the <b>modal title</b> (i.e. "Choose a Room"), to activate a drop down that will give <b>more information</b> on how that specific category can affect the lighting.
</p>
<figure class="text-center"><img src="img/help/application/selection_process/3.png" class="w-85 my-4 rounded drop-shadow" alt=""></figure>
<p class="help-menu-p">
The selection process modal has a <b>breadcrumb trail</b> along the top, similiar to one you will you will see once you have finished the selection process. The <b>breadcrumb trail</b> allows you to see all the <b>selections you've chosen</b> thus far in the selection process. You may also <b>click</b> on of any of the selections you've made to <b>jump back</b> to that point in the selection process. Click <a href="#" id="help-breadcrumb-jump">here</a>, or select the <b>Breadcrumb</b> tab to learn more about the breadcrumb trail.
</p>
<figure class="text-center"><img src="img/help/application/selection_process/4.png" class="w-85 my-4 rounded drop-shadow" alt=""></figure>
<p class="help-menu-p">
Once you've chosen a selection for all six categories, you will be presented with a page that looks similiar to the one below. The image below is a <b>guide</b> for how to use the help menu for each of the <b>labeled portions</b> on the image.
</p>
<figure class="text-center"><img src="img/help/application/selection_process/5.png" class="w-85 my-4 rounded drop-shadow" alt=""></figure>
</div>
</div>
<div class="help-section d-none" id="help-breadcrumb">
<div class="modal-header">
<h4 class="modal-title">Breadcrumb</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body help-body">
<p class="help-menu-p">
The <b>breadcrumb</b> or <b>breadcrumb trail</b> is the horizontal bar that appears at the top of the application page, post selection process. It serves to remind you of the choices you made <b>during</b> the selection process, and allows you to <b>change your selections</b> after the initial selection process.
</p>
<figure class="w-95 text-center"><img src="img/help/application/breadcrumb/1.png" class="w-85 my-4 rounded drop-shadow" alt=""></figure>
<p class="help-menu-p">
The <b>breadcrumb trail</b> is divided into <b>six</b> sections, one for every selection you made, and are labeled accordingly. To <b>change</b> one of your selections, simply click on that selection (i.e. 'Senior Care'), not the label (i.e. 'Facility'). You will see the selection turn blue when you hover your cursor over that selection.
</p>
<figure class="w-95 text-center"><img src="img/help/application/breadcrumb/2.png" class="w-85 my-4 rounded drop-shadow" alt=""></figure>
<p class="help-menu-p">
Once you click on the selection you wish to change, you will <b>re-enter</b> into the <b>selection process</b> starting at that point. You will then need to complete the <b>entirety</b> of the selection process <b>after</b> that point, as each set of selections following a given selection changes based on that selection.
</p>
<figure class="w-95 text-center"><img src="img/help/application/breadcrumb/3.png" class="w-85 my-4 rounded drop-shadow" alt=""></figure>
</div>
</div>
<div class="help-section d-none" id="help-render">
<div class="modal-header">
<h4 class="modal-title">Render</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body help-body">
<p class="help-menu-p">
The <b>render</b> gives you a general idea of how your <b>unique selections</b> of facility, room, fixture types, etc. might look in <b>real 3D space</b>. It's useful to know not only if the space is providing the occupants enough circadian stimulus, but also how the space could look <b>aesthetically</b>, which is what the render aims to achieve. Note that the render is only a single layout designed from generic room layouts, and <b>many different combinations</b> of furniture, fixture, and occupant layouts are possible to achieve the correct CS. <b>These designs are only a single example created for you to follow the steps and fill in the blanks of the components needed for you to complete your own circadian design</b>.
</p>
<figure class="w-95 text-center"><img src="img/help/application/render/1.png" class="w-85 my-4 rounded drop-shadow" alt=""></figure>
<p class="help-menu-p">
Below the render you will see either one or two rows of buttons depending on whether you choose a <b>static</b> or <b>tunable CCT system</b>.
</p>
<p class="help-menu-p">
<b>Static</b> renders will have two rows of buttons, the <b>top</b> for selecting which specific <b>CCT</b> you wish to see (this is the same as choosing a CCT in the selection process), and the <b>bottom</b> for selecting which <b>time of day</b> you wish to show in the render. There is no <b>time of day</b> category in the selection process as it will only change how the render appears on your screen; the <b>CS chart</b> and <b>CS graph</b> will always provide information for the different times of day, <b>regardless</b> of what you have <b>selected</b>. <b>Tunable</b> renders will show how the lighting changes in the space over the different times of day, thus there is no need for time of day buttons. Consequently there are only CCT buttons. The CCT buttons for the tunable renders are labeled by the individual CCT's at each time of day (i.e. "6500 K -> 5000 K -> 4000 K -> 3000 K" indicates the fixtures will have a CCT of 6500 K in the morning, 5000 K in the afternoon, 4000 K in the evening, and 3000 K at night).
</p>
<p class="help-menu-p">
<b>Tunable</b> renders will show how the lighting changes in the space over the different times of day, thus there is no need for time of day buttons. Consequently there are only CCT buttons. The CCT buttons for the tunable renders are labeled by the individual CCT's at each time of day (i.e. "6500 K -> 5000 K -> 4000 K -> 3000 K" indicates the fixtures will have a CCT of 6500 K in the morning, 5000 K in the afternoon, 4000 K in the evening, and 3000 K at night).
</p>
<figure class="w-95 text-center"><img src="img/help/application/render/2.png" class="w-85 my-4 rounded drop-shadow" alt=""></figure>
<p class="help-menu-p">
The <b>blue line</b> underneath the <b>CCT</b> and <b>time of day</b> buttons indicates which of the options you have <b>selected</b>. Immediately following the selection process, the underlined CCT button will be the <b>CCT you chose</b> during the selection process and the <b>left most</b> time of day button will by default be selected. Simply click a different button to select that CCT or time of day.
</p>
<figure class="w-95 text-center"><img src="img/help/application/render/3.png" class="w-85 my-4 rounded drop-shadow" alt=""></figure>
<p class="help-menu-p">
On some renders you may see a <b>blue button</b> in the top right corner labeled <b>Toggle View</b>. This button indicates that there are <b>multiple different angles</b> of the same space. Clicking this button will toggle between the views on the <b>render</b> as well as the <b>plan</b>. Click <a href="#" id="help-plan-jump">here</a>, or select the <b>Lighting layout</b> tab to learn more about the <b>lighting plan</b>.
</p>
<figure class="w-95 text-center"><img src="img/help/application/render/4.png" class="w-85 my-4 rounded drop-shadow" alt=""></figure>
</div>
</div>
<div class="help-section d-none" id="help-plan">
<div class="modal-header">
<h4 class="modal-title">Lighting layout</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body help-body">
<p class="help-menu-p">
The <b>lighting layout</b> or <b>lightinging plan</b> can help the user further understand the locations of all objects in the space, including lighting fixtures, furniture, and occupants. The plan also provides the user information regarding <b>vertical</b> and <b>horizontal illuminance</b>.
</p>
<figure class="w-95 text-center"><img src="img/help/application/plan/1.png" class="w-85 my-4 rounded drop-shadow" alt=""></figure>
<p class="help-menu-p">
The lighting plan <b>legend</b> is as follows:
</p>
<div class="row mb-3">
<div class="col">
<img src="img/help/application/plan/2.png" class="float-left w-12 mx-4 rounded drop-shadow" alt="">
<p class="help-menu-p h-100 m-0 p-vertical">
The location and direction at which the corresponding render was taken is indicated by the occupant and the arrow. Click <a id="help-render-jump" href="#">here</a> or select the <b>Render</b> tab to learn more about changing the view.
</p>
</div>
</div>
<div class="row mb-3">
<div class="col">
<img src="img/help/application/plan/3.png" class="float-left w-12 mx-4 rounded drop-shadow" alt="">
<p class="help-menu-p h-100 m-0 p-vertical">
Fixture locations are indicated by red-stroked icons that correspond to the icon(s) shown on the fixture buttons below the plan. More information about mounting height can be found in the <b>fixture tab</b> in the <b>right panel</b>.
</p>
</div>
</div>
<div class="row mb-3">
<div class="col">
<img src="img/help/application/plan/4.png" class="float-left w-12 mx-4 rounded drop-shadow" alt="">
<p class="help-menu-p h-100 m-0 p-vertical">
Vertical illuminance was measured at points along the blue line. The arrow indicates the direction in which the illuminance meter was facing (i.e. the direction an occupant's eye is looking).
</p>
</div>
</div>
<div class="row mb-3">
<div class="col">
<img src="img/help/application/plan/5.png" class="float-left w-12 mx-4 rounded drop-shadow" alt="">
<p class="help-menu-p h-100 m-0 p-vertical">
Vertical illuminance was measured at this location and facing in four directions. Points were placed evenly throughout room to determine overall average vertical illuminance.
</p>
</div>
</div>
<div class="row mb-3">
<div class="col">
<img src="img/help/application/plan/6.png" class="float-left w-12 mx-4 rounded drop-shadow" alt="">
<p class="help-menu-p h-100 m-0 p-vertical">
Horizontal illuminance was measured at points within the associated area. The illuimnance meter faces towards the ceiling to determine how much light is falling on the work plane. Horizontal illuminance is either taken as an average throughout the space, or specifically at known workspace areas such as a desk or table.
</p>
</div>
</div>
<div class="row mb-3">
<div class="col">
<img src="img/help/application/plan/7.png" class="float-left w-12 mx-4 rounded drop-shadow" alt="">
<p class="help-menu-p h-100 m-0 p-vertical">
Scale for reference
</p>
</div>
</div>
<p class="help-menu-p">
Below the plan are <b>buttons</b> for each of the different lighting <b>fixtures</b> you chose during the selection process. Each button contains an <b>image</b> of that fixture, followed by the fixture <b>name</b>, and <b>icon</b> that corresponds to the icons on the lighting layout.
</p>
<figure class="w-95 text-center"><img src="img/help/application/plan/8.png" class="w-85 my-4 rounded drop-shadow" alt=""></figure>
<p class="help-menu-p">
Clicking one of these fixture buttons will open up a dropdown in the right panel menu corresponding to that fixture. This menu will you give you more information about that fixture type, including a larger fixture <b>image</b>, a <b>candela plot</b>, along with many important <b>measurements</b> and a <b>description</b>. To learn more about the fixtures menu in the right panel, or the right panel in general, click <a id="help-rightpanel-jump" href="#">here</a> or select the <b>Right Panel</b> tab.
</p>
<figure class="w-95 text-center"><img src="img/help/application/plan/9.png" class="w-85 my-4 rounded drop-shadow" alt=""></figure>
</div>
</div>
<div class="help-section d-none" id="help-graph">
<div class="modal-header">
<h4 class="modal-title">CS Graph</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body help-body">
<p class="help-menu-p">
The <b>CS graph</b> acts as an <b>intermediate stage</b> between the selections you chose and the CS chart. It should help you understand the <b>CS and CCT</b> of each <b>time frame</b> based on the selections you chose. This information should help you to better understand the <b>CS chart</b>.
</p>
<figure class="w-95 text-center"><img src="img/help/application/graph/1.png" class="w-85 my-4 rounded drop-shadow" alt=""></figure>
<p class="help-menu-p">
The <b>CS graph</b> has x and y axes <b>Time of Day</b> and <b>CS</b>, respectively. This will show you the CS that is obtained in the room at each time interval throughout the day.
</p>
<figure class="w-95 text-center"><img src="img/help/application/graph/2.png" class="w-85 my-4 rounded drop-shadow" alt=""></figure>
<p class="help-menu-p">
The color of the graph represents what CCT corresponds to that time of day. <b>Static</b> selections will result in a graph that is entirely the same color with light levels that dim throughout the day, whereas <b>tunable</b> selection will result in a gradient of color across the <b>CS graph</b>, symbolizing the changing CCT through the day.
</p>
<figure class="w-95 text-center"><img src="img/help/application/graph/3.png" class="w-85 my-4 rounded drop-shadow" alt=""></figure>
</div>
</div>
<div class="help-section d-none" id="help-chart">
<div class="modal-header">
<h4 class="modal-title">CS Chart</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body help-body">
<p class="help-menu-p">
The <b>CS chart</b> is a table that shows the <b>CS</b>, <b>CCT</b>, <b>E<sub>V</sub></b>, and <b>E<sub>H</sub></b> at all time frames in the room you've chosen, based on your selections.
</p>
<figure class="w-95 text-center"><img src="img/help/application/chart/1.png" class="w-85 my-4 rounded drop-shadow" alt=""></figure>
<p class="help-menu-p">
The <b>CS chart</b> is dependent on almost all selection
categories in the selection process and will change as your selections
change. The <b>12-hour clock</b> time is displayed as a range;
note that <b>EOD</b> stands for <b>end of day</b>. The CS
metric can be displayed as <b>CS<sub>1</sub> -> CS<sub>2</sub></b>,
denoting a transition in CS during the respective time period.
<b>CCT</b> is displayed in kelvin and the background color of its table cell
is representative of that CCT. <b>E<sub>V</sub></b> and <b>E<sub>H</sub></b>
are both displayed in lux.
</p>
<figure class="w-95 text-center"><img src="img/help/application/chart/2.png" class="w-85 my-4 rounded drop-shadow" alt=""></figure>
<p class="help-menu-p">
<b>CS charts</b> for tunable lighting solutions are very similar to
those in static solutions and follow the same guidelines. In tunable
solutions, you will see the CCT changing with time.
</p>
<figure class="w-95 text-center"><img src="img/help/application/chart/3.png" class="w-85 my-4 rounded drop-shadow" alt=""></figure>
</div>
</div>
<div class="help-section d-none" id="help-rightpanel">
<div class="modal-header">
<h4 class="modal-title">Right Panel</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body help-body">
<p class="help-menu-p">
The <b>right panel</b> is a collection of <b>extra information</b>. The extra information is split into the categories: <b>Room Description</b>, <b>Assumptions</b>, <b>Lighting Solution</b>, <b>Luminaires</b>, <b>Charts</b>, and <b>Disclaimers</b>. Simply click on any of the titles to learn more about that category.
</p>
<figure class="w-95 text-center"><img src="img/help/application/rightpanel/1.png" class="w-85 my-4 rounded drop-shadow" alt=""></figure>
<p class="help-menu-p">
The <b>Room Description</b> is a short paragraph providing the user with a little extra information about the room they selected. This information may include its size, purpose, types of occupants, etc.
</p>
<figure class="w-95 text-center"><img src="img/help/application/rightpanel/2.png" class="w-40 my-4 rounded drop-shadow" alt=""></figure>
<p class="help-menu-p">
The <b>Assumptions</b> tab is independent of any of the user's selections and aims to provide the user with some of the assumptions the LRC took in calculating the CS.Use these assumptions as a <b>guideline</b> to decisions you will make when creating circadian designs.
</p>
<figure class="w-95 text-center"><img src="img/help/application/rightpanel/3.png" class="w-40 my-4 rounded drop-shadow" alt=""></figure>
<p class="help-menu-p">
The <b>Lighting Solution</b> is dependent on the facility, room, fixtures, and target CS you choose, and aims to provide the user with a set of distinct criteria we at the LRC considered when designing this specific solution. These solutions provide information that should be kept in mind when doing designs.
</p>
<figure class="w-95 text-center"><img src="img/help/application/rightpanel/4.png" class="w-40 my-4 rounded drop-shadow" alt=""></figure>
<p class="help-menu-p">
The <b>Luminaires</b> tab is dependent on the fixtures you chose,
and will provide the user with extra information regarding
those fixtures. This information includes: an <b>image</b>
of the fixture, <b>candela plot</b>, <b>quantity of fixtures</b>
in the solution, <b>mounting type</b>, <b>mounting height</b>,
<b>orientation</b>, <b>dimensions</b>, <b>initial lumens per source</b>,
<b>initial wattage per source</b>, a <b>lumen output vs. CCT</b>
chart, and a short <b>description</b>. At the footer of the
<b>luminaire</b> tab you can select any of the numbered tabs
to toggle between the different fixtures types.
</p>
<figure class="w-95 text-center"><img src="img/help/application/rightpanel/5.png" class="w-40 my-4 rounded drop-shadow" alt=""></figure>
<p class="help-menu-p">
The <b>charts</b> tab contains a collection of charts that contain
more specific numbers regarding the calculations in the space.
These charts include <b>E<sub>V</sub></b> to reach target CS for each CCT, <b>E<sub>V</sub>:E<sub>H</sub></b> ratio, <b>LPD</b> vs. CCT, <b>energy</b> vs. CCT, and <b>SPD</b>.
</p>
<figure class="w-95 text-center"><img src="img/help/application/rightpanel/6.png" class="w-90 my-4 rounded" alt=""></figure>
<p class="help-menu-p">
The <b>disclaimers</b> tab is static and not dependent on any selection choices.
</p>
<figure class="w-95 text-center"><img src="img/help/application/rightpanel/7.png" class="w-40 my-4 rounded drop-shadow" alt=""></figure>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Help Modal -->
<!-- Selection Modal -->
<div class="modal fade" id="application-modal" tabindex="-1" role="dialog" data-backdrop="static" data-keyboard="false" aria-labelledby="application-modal-label" aria-hidden="true">
<div id="modalSize" class="modal-dialog modal-xl modal-dialog-centered" role="document">
<div class="modal-content">
<div>
<nav aria-label="breadcrumb">
<ol class="breadcrumb m-0" id ="application-modal-breadcrumb">
</ol>
</nav>
</div>
<div class="modal-header">
<h5 class="modal-title" id="application-modal-label" data-toggle="collapse" href="#application-modal-desc" aria-expanded="false" aria-controls="application-modal-desc"></h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div id="application-modal-deck" class="card-deck"></div>
</div>
</div>
</div>
</div>
<!--Selection Modal -->
<!-- Navbar -->
<div id="navbar" class="position-fixed bb">
<script>
$('#navbar').load('navbar.html',function(){
$('#application-tab').addClass('active');
$('#background-tab').attr("href", "index.html");
});
</script>
</div>
<!-- Navbar -->
<div id="landing-content" class="container-fluid h-100 mh-100 overflow-hidden sticky">
<!-- Banner -->
<div class="row banner">
<div class="col">
<div class="banner-text text-center">
<div class="middle">
<h1 class="banner-title d-none d-sm-block">Designing in a New Light</h1>
<h1 class="banner-title d-block d-sm-none">Design<br />in a<br />New Light</h1>
<p class="box-text mb-4 d-none d-lg-block">Welcome to the Lighting for Healthy Buildings Application page! Click "<b>Begin</b>" to navigate the LRC’s framework for circadian-effective lighting design in various facilities, rooms, and user populations. (Healthcare and School facilities coming soon). Refer to the '<b>Help</b>' menu in the top right to learn how to navigate the Application page.<br /></br/>For more detailed information about the fundamentals in lighting, refer to the <b>Background</b> page.</p></br/>
<button id="begin" class="btn btn-lg btn-primary" data-toggle="modal" data-target="#application-modal" disabled>Begin</button>
</div>
</div>
<footer class="fixed-footer">
<p class="footer-p">© <script>document.write(new Date().getFullYear())</script> Lighting Research Center All Rights Reserved</p>
</footer>
</div>
</div>
<!-- Banner -->
</div>
</body>
</html>