-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
168 lines (142 loc) · 5.99 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
164
165
166
167
168
<!doctype html>
<html lang="en" manifest="offline.appcache">
<!-- Copyright 2014 Verticon, Inc. all rights reserved. -->
<head>
<title>LB White Heater Estimator</title>
<meta charset="utf-8">
<!-- Prevent scaling
<meta name="viewport" content="user-scalable=no, width=device-width" />
-->
<meta name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<!-- Eliminate url and button bars if added to home screen -->
<meta name="apple-mobile-web-app-capable" content="yes" />
<!-- Choose how to handle the phone status bar -->
<meta name="apple-mobile-web-app-status-bar-style"
content="black-translucent" />
<!-- Start -->
<!-- For iPad with high-resolution Retina display running iOS ≥ 7: -->
<link rel="apple-touch-icon-precomposed" sizes="152x152" href="img/apple-touch-icon-152x152-precomposed.png">
<!-- For iPad with high-resolution Retina display running iOS ≤ 6: -->
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="img/apple-touch-icon-144x144-precomposed.png">
<!-- For iPhone with high-resolution Retina display running iOS ≥ 7: -->
<link rel="apple-touch-icon-precomposed" sizes="120x120" href="img/apple-touch-icon-120x120-precomposed.png">
<!-- For iPhone with high-resolution Retina display running iOS ≤ 6: -->
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="img/apple-touch-icon-114x114-precomposed.png">
<!-- For the iPad mini and the first- and second-generation iPad on iOS ≥ 7: -->
<link rel="apple-touch-icon-precomposed" sizes="76x76" href="img/apple-touch-icon-76x76-precomposed.png">
<!-- For the iPad mini and the first- and second-generation iPad on iOS ≤ 6: -->
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="img/apple-touch-icon-72x72-precomposed.png">
<!-- For non-Retina iPhone, iPod Touch, and Android 2.1+ devices: -->
<link rel="apple-touch-icon-precomposed" href="img/apple-touch-icon-precomposed.png">
<link rel="stylesheet" href="css/main.css">
<script src="js/HeaterCalc.js"></script>
<script src="js/controller.js"></script>
</head>
<body>
<div id=wrapper>
<h1>
<img src="img/LBW_White_Logo.png" alt="L.B. White">
</h1>
<h1>Heater Estimator</h1>
<p id="intro">To determine Btuh heater requirements...</p>
<!--
-- The stuff below is an HTML table inside of an HTML form. It gets tricky!
-- Notice the event handlers on all the form input elements.
-->
<form name="volumecalc_form">
<fieldset class="volumecalc_form">
<legend>Room Measurements</legend>
<ul>
<li><span class="prompt">Find Cubic Measurements of
Area by Entering Room Measurements in <select id="unitSelect">
<option value="ft.">Feet</option>
<option value="m.">Meters</option>
</select>
</span> <span class="required_notification">* Denotes Required
Field</span></li>
<li><label for="height">Height:</label> <input type="number"
name="height" required pattern="^\d*(\.\d*)?$"
title="Numbers with or without decimal points"
onChange="compute()" /> <span class="form_hint">Proper
format "11.2 or 11"</span> <span class="spaceUnits">ft.</span></li>
<li><label for="width">Width:</label> <input type="number"
name="width" required pattern="^\d*(\.\d*)?$"
title="Numbers with or without decimal points"
onChange="compute()" /> <span class="form_hint">Proper
format "11.2 or 11"</span> <span class="spaceUnits">ft.</span></li>
<li><label for="length">Length:</label> <input type="number"
name="length" required pattern="^\d*(\.\d*)?$"
title="Numbers with or without decimal points"
onChange="compute()" /> <span class="form_hint">Proper
format "11.2 or 11"</span> <span class="spaceUnits">ft.</span></li>
<li>Cubic <span class="spaceUnitsName">Feet</span> of the
Area: <span id="volume"></span>
</li>
</ul>
</fieldset>
<div class="desiredRise">
<fieldset>
<legend>Room Temperature</legend>
<ul>
<li><label class="prompt" for="desiredRiseInTemp">Select
Desired Rise in Room Temperature(°<span class="tempUnits">F</span>):
</label> <select id="riseSelect">
<option value="5">°5</option>
<option value="10">°10</option>
<option value="20">°20</option>
<option value="30">°30</option>
<option value="40">°40</option>
<option value="50">°50</option>
<option value="60" selected>°60</option>
<option value="70">°70</option>
<option value="80">°80</option>
<option value="90">°90</option>
<option value="100">°100</option>
</select></li>
<li><label for="btuhReq">Requirement for Room:</label> <span
id="btuhAnswer"> <span id="btuhReqNumber"></span> <span
id="btuhReqWord"></span>
</span></li>
</ul>
</fieldset>
</div>
<!-- end .desiredRise -->
</form>
<div class="suggestions">
<h2>May We Suggest:</h2>
<ul>
<li>
<img src="img/Premier-80.png" alt="Premier80">
<span id="p80"></span> <a
href="http://www.lbwhite.com/products/Tent-Heaters/Premier-Portable-Heater/">Premier
80's</a>
</li>
<li>
<img src="img/Premier-170.png" alt="Premier170">
<span id="p170"></span> <a
href="http://www.lbwhite.com/products/Tent-Heaters/Premier-Portable-Heater/">Premier
170's</a>
</li>
<li>
<img src="img/Premier-350.png" alt="Premier350">
<span id="p350"></span>
<a
href="http://www.lbwhite.com/products/Tent-Heaters/Premier-Portable-Heater/">Premier
350's</a>
</li>
<li>
<img src="img/Director.png" alt="Director300">
<span id="d300"></span>
<a
href="http://www.lbwhite.com/products/Tent-Heaters/Director-Portable-Heater/">Director
300's</a>
</li>
</ul>
</div>
<!-- end .suggestions -->
<p id="lbwhitelink"><a href="http://www.lbwhite.com/products/Tent-Heaters/">www.lbwhite.com</a></p>
</div>
<!-- end #wrapper -->
</body>
</html>