-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
94 lines (93 loc) · 5.12 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
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<!-- set the viewport -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Reservoir Levels</title>
<!-- Latest compiled and minified CSS for bootstrap 3.3.7 -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- roboto font link -->
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<!-- link to css file -->
<link rel="stylesheet" href="css/styles.css">
<!-- link to tab icon picture -->
<link rel="icon" href="water_res.ico" type="image/x-icon" />
</head>
<body>
<!-- background images to be placed in span tags. the style tag is backup, in case the css isn't supported -->
<ul class="cb-slideshow" style="list-style-type: none;">
<li><span></span></li>
<li><span></span></li>
<li><span></span></li>
<li><span></span></li>
<li><span></span></li>
<li><span></span></li>
<li><span></span></li>
</ul>
<div class="container">
<div class="header clearfix">
<nav>
<!-- div to hold the menu bars. these are placed after the nav tag and before the ul -->
<div class="menu-container">
<!-- set up the three menu bars -->
<div class="b1"></div>
<div class="b2"></div>
<div class="b3"></div>
</div> <!-- ends menu-container div -->
<ul class="nav nav-pills pull-right list-inline" id="buttons">
<!-- buttons to switch between north and south -->
<li role="presentation" class="active north_button" id="north_button"><a href="#">North Reservoirs</a></li>
<li role="presentation" class="south_button" id="south_button"><a href="#">South Reservoirs</a></li>
</ul>
</nav>
</div> <!-- closes header clearfix div -->
<!-- jumbotron theme -->
<div class="jumbotron">
<!-- fade alert for empty input field -->
<div id="alert_message" class="alert alert-danger alert-dismissible fade in">
<a href="#" class="close" data-dismiss="alert" aria-label="close">×</a>
Please enter a reading
</div>
<h1 class="page-title">Check Water Level</h1>
<label class="control-label col-sm-2">Reservoir:</label>
<div class="form-group col-sm-10">
<!-- this is filled in with options in js file -->
<select id='res_dropdown' class="lead"></select>
</div> <!-- closes form-group div -->
<div class="form-group">
<label class="control-label col-sm-2">Reading:</label>
<div class="col-sm-10 sc_level_div">
<!-- user types the reservoir level from SmartCover website -->
<!-- placing the button in the p tag gives the input its own line -->
<p><input id='sc_level' type="number" placeholder='SmartCover Level'></p>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<p><button id='submit_button' class="btn btn-md btn-success">Feet Down</button></p>
</div>
</div>
<!-- the word result is always displayed -->
<h3 id='result_text' class="text-center">Result:</h3>
<!-- actual feet down shown underneath the word Result: -->
<h1 id='result' class="text-center"></h1>
</div> <!-- closes jumbotron div -->
</div> <!-- container -->
<!-- jQuery CDN -->
<script src="https://code.jquery.com/jquery-3.2.1.js" integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE=" crossorigin="anonymous"></script>
<!-- Latest compiled and minified JavaScript for bootstrap 3.3.7 -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<!-- link to main js file -->
<script src="js/main.js"></script>
</body>
</html>
<!--
TODO:
since there are 12 inches in 1 foot, might want to consider converting a noninteger output to feet + inches. maybe...
stretch: as a user, I can view the feet down values of multiple reservoirs at once
add checks on each res which act as boundaries for levels entered which are too low or high for a particular res, as a front-end validation? better to check values on the backend
fix alert pushing elements down. this is typically done with setting a css rule of position: absolute. but in my case, it then overlaps content, which is arguably worse
check js for adding options. this is already in place for the south res; i should be able to remove the options for the north and bind those to js as well
consider placing entire jumbotron as collapsed by default, perhaps as a nav button. clicking it restores it as it is now on load. the only reason i'm thinking about this is to shwo the entire css backgrounds, which are now actual res. could add to the navbar: 'Check Levels' button
-->