forked from m5matthew/Asepsis
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
76 lines (67 loc) · 2.64 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
<!DOCTYPE html>
<html>
<head>
<link rel="shortcut icon" type="image/x-icon" href="images/favicon.ico">
<title>Asepsis</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<!-- STYLESHEETS -->
<link rel='stylesheet' type='text/css' href='css/index.css' />
<link rel='stylesheet' type='text/css' href='css/navbar.css' />
<link rel='stylesheet' type='text/css' href='css/style.css' />
<!-- JAVASCRIPTS -->
<script src="js/index.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAyHe7T4ihQEx_jvFqpq2-5qRZ915G0dnE&callback=initMap" async defer></script>
</head>
<body>
<video autoplay loop id="video-background" muted plays-inline>
<source src="background.mp4" type="video/mp4">
</video>
<!-- NAVBAR -->
<div class='container-fluid myNavbar'>
<div class='container-fluid logo col-sm-3'>
<p class='asepsis'>a · s e p · s i s</p>
<p>breathe safe.</p>
</div>
<div class='nav-list text-right col-sm-9'>
<ul>
<div class='move'>
<li class='tab'> <a href='index.html'> map </a> </li>
</div>
<div class='move'>
<li class='tab'> <a href='views/data.html'> data </a> </li>
</div>
<div class='move'>
<li class='tab'> <a href='views/safety.html'> safety </a> </li>
</div>
<div class='move'>
<li class='tab'> <a href='views/about.html'> about </a> </li>
</div>
</ul>
</div>
</div>
<div class='text-center'>
<h1 class='header'>what's the air quality on your uc campus?</h1>
<p class='caption'> click a marker to find out </p>
</div>
<!-- GOOGLE MAP -->
<form class='container-fluid' id="mapContain">
<div class='container-fluid col-md-6' id="map"></div>
<div align=center class='container-fluid col-md-6' id='mapInfo'>
<br> <br> <br> <br> <br>
<hr class='line'>
<div align= center id="circle">
<br>
<p class='aqi'> AQI </p>
<p id='insertAQI'></p>
</div>
<br>
<p class='condition'>AIR CONDITION:</p>
<p id='insertCOND'></p>
<p class='condition'> PRIMARY POLLUTION: </p>
<p id='insertPOL'></p>
<hr class='line'>
</div>
</form>
</body>
</html>