Skip to content

Commit 8d2713a

Browse files
jconlonjconlon
committed
Add all LBWhite artifacts.
1 parent 91b7ffd commit 8d2713a

15 files changed

+694
-0
lines changed

‎README.md

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
LBWhite-heater-estimator
2+
========================
3+
4+
L.B. White Heater Estimator Web Application
5+
6+
Introduction
7+
------------
8+
9+
For questions contact John Conlon ([email protected])
10+
11+
Thanks.

‎css/main.css

Lines changed: 209 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,209 @@
1+
@CHARSET "UTF-8";
2+
3+
body {
4+
padding : 0;
5+
margin : 0;
6+
text-align : left;
7+
font-family: Arial, Helvetica, sans-serif;
8+
}
9+
10+
/* Using a variant of our font-size formula to define the maximum width of our design.
11+
By dividing the comp’s width of 460px by our base font-size of 16px, we can set a max-width
12+
in ems to approximate the pixel-based width from our targeted mockup, which will prevent the page from
13+
exceeding our ideal of 460px. But since we’ve used ems to set this upper limit, the max-width
14+
will scale up as the user increases the browser’s text size.*/
15+
#wrapper {
16+
padding : 1em 1.5625em; /* 15px / 16px = 1em, 25px / 16px = 1.5625em*/
17+
background-color: #002868;
18+
text-align: left;
19+
max-width: 28.75em; /* 460px / 16px = 28.75em */
20+
color : white;
21+
margin-left: auto;
22+
margin-right: auto;
23+
border : thin solid blue;
24+
}
25+
26+
h1{
27+
text-align: center;
28+
font-size: 1.5em; /* 24px / 16px = 1.5em */
29+
30+
}
31+
32+
.suggestions label{
33+
font-weight: bold;
34+
font-style: italic;
35+
}
36+
37+
#intro, #p80, #p170, #p350, #d300, #volume {
38+
font-weight: bold;
39+
}
40+
41+
.prompt {
42+
font-style: italic;
43+
}
44+
45+
46+
#unitSelect {
47+
font-weight: bold;
48+
}
49+
50+
#riseSelect {
51+
font-weight: bold;
52+
background: yellow;
53+
color: red;
54+
box-shadow: 0 0 .3125em #5cd053; /* 5px / 16px = 0.3125em */
55+
}
56+
57+
#btuhAnswer{
58+
font-weight: Bold;
59+
color: red;
60+
background-color: yellow;
61+
text-align: right;
62+
63+
}
64+
65+
/* Styling for the form */
66+
.form_hint, .required_notification {font-size: .6875em;} /* 11px / 16px = .6875em */
67+
68+
/* Webkit automatically adds some styling to input elements when they are in focus.
69+
Since we'll be adding our own styles, we want to override these defaults:*/
70+
*:focus {outline: none;}
71+
72+
73+
/* Style sturcture of input list elements*/
74+
.volumecalc_form ul, .desiredRise ul {
75+
list-style-type:none;
76+
list-style-position:outside;
77+
margin:0px;
78+
padding:0px;
79+
}
80+
.volumecalc_form li, .desiredRise li {
81+
padding: .75em; /* 12px / 16px = .75em */
82+
/* border-bottom:.0625em solid #eee; 1px / 16px = .0625em */
83+
position:relative;
84+
}
85+
86+
/* Style sturcture of input list elements*/
87+
.suggestions ul {
88+
list-style-type:none;
89+
list-style-position:outside;
90+
}
91+
.suggestions li {
92+
position:relative;
93+
line-height:
94+
}
95+
a { color: inherit; }
96+
97+
#lbwhitelink {
98+
text-align: right;
99+
}
100+
101+
.suggestions img{
102+
vertical-align:middle;
103+
padding-right: .7em;
104+
}
105+
.suggestions a{
106+
vertical-align:middle;
107+
}
108+
109+
/* Second Level */
110+
ul ul{
111+
margin-left: .9375em; /* 15px / 16px = 0.9375em */
112+
}
113+
114+
115+
/* style the notification that informs users that the asterisk (*) indicates required fields.*/
116+
.required_notification {
117+
color:#d45252;
118+
margin: .3125em 0 0 0; /* 5px / 16px = .3125em */
119+
display:inline;
120+
float:right;
121+
}
122+
123+
/*style all of our core form elements, the ones used to collect user information.*/
124+
.volumecalc_form label {
125+
width:6.25em; /* 100px / 16px = 6.25em */
126+
margin-top: 0.1875em; /* 3px / 16px = 0.1875em */
127+
display:inline-block;
128+
float:left;
129+
padding:0.1875em; /* 3px / 16px = 0.1875em */
130+
}
131+
.volumecalc_form input {
132+
height:1.25em; /* 20px / 16px = 1.25em */
133+
text-align: right;
134+
max-width:6.25em; /* 100px / 16px = 6.25em */
135+
padding:.3125em .5em; /* 5px / 16px = .3125em 8px / 16px = .5em*/
136+
}
137+
.volumecalc_form textarea {padding:.5em; width:200px;} /* 8px / 16px = .5em*/
138+
139+
/* extra visual CSS styles */
140+
.volumecalc_form input, .volumecalc_form textarea {
141+
border:0.0625em solid #aaa; /*1px / 16px = 0.0625em*/
142+
box-shadow: 0px 0px 0.1875em #ccc, 0 10px 15px #eee inset; /* 3px / 16px = 0.1875em */
143+
border-radius: 0.125em; /*2px / 16px = 0.125em */
144+
}
145+
.volumecalc_form input:focus, .volumecalc_form textarea:focus {
146+
background: #fff;
147+
border:0.0625em solid #555; /*1px / 16px = 0.0625em*/
148+
box-shadow: 0 0 0.1875em #aaa; /* 3px / 16px = 0.1875em */
149+
}
150+
151+
/* Interactivity - make the field that is currently selected expand by adding some padding */
152+
.volumecalc_form input:focus, .volumecalc_form textarea:focus { /* add this to the already existing style */
153+
padding-right:3.125em; /* 50px / 16px = 3.125em */
154+
}
155+
156+
/* For browsers that support it, let's make the expansion of the field a smooth transition using CSS3 */
157+
.volumecalc_form input, .volumecalc_form textarea { /* add this to the already existing style */
158+
-moz-transition: padding .25s;
159+
-webkit-transition: padding .25s;
160+
-o-transition: padding .25s;
161+
transition: padding .25s;
162+
}
163+
164+
/* add a red asterisk as a background image in each required field. To accomplish this, we will want to first add some padding on the right side of our input where the
165+
background image will be (this will prevent text overlap if the field entry is a long string):*/
166+
.volumecalc_form input, .volumecalc_form textarea {
167+
padding-right:1.875em; /*30px / 16px = 1.875em*/
168+
}
169+
/*use the CSS pseudo selector :required to target all the form elements with a required attribute. */
170+
input:required, textarea:required {
171+
background: #fff url(../img/red_asterisk.png) no-repeat 98% center;
172+
}
173+
174+
175+
/* HTML5 validation */
176+
.volumecalc_form input:focus:invalid, .volumecalc_form textarea:focus:invalid { /* when a field is considered invalid by the browser */
177+
background: #fff url(../img/invalid.png) no-repeat 98% center;
178+
box-shadow: 0 0 0.3125em #d45252; /* 5px / 16px = 0.3125em */
179+
border-color: #b03535
180+
}
181+
.volumecalc_form input:required:valid, .volumecalc_form textarea:required:valid { /* when a field is considered valid by the browser */
182+
background: #fff url(../img/valid.png) no-repeat 98% center;
183+
box-shadow: 0 0 0.3125em #5cd053; /* 5px / 16px = 0.3125em */
184+
border-color: #28921f;
185+
}
186+
187+
/* Hints */
188+
.form_hint {
189+
background: #d45252;
190+
border-radius: 0.1875em 0.1875em 0.1875em 0.1875em; /* 3px / 16px = 0.1875em */
191+
color: white;
192+
margin-left: .5em; /* 8px / 16px = .5em*/
193+
padding: .0625em 0.375em; /* 1px / 16px = .0625em 6px / 16px = 0.375em*/
194+
z-index: 999; /* hints stay above all other elements */
195+
position: absolute; /* allows proper formatting if hint is two lines */
196+
display: none;
197+
}
198+
.form_hint::before {
199+
content: "\25C0"; /* left point triangle in escaped unicode */
200+
color:#d45252;
201+
position: absolute;
202+
top: .0625em; /* 1px / 16px = .0625em */
203+
left:-0.375em; /* 6px / 16px = 0.375em*/
204+
}
205+
.volumecalc_form input:focus + .form_hint {display: inline;}
206+
.volumecalc_form input:required:valid + .form_hint {background: #28921f;} /* change form hint color when valid */
207+
.volumecalc_form input:required:valid + .form_hint::before {color:#28921f;} /* change form hint arrow color when valid */
208+
209+

‎img/Director.png

3.27 KB
Loading

‎img/LBW_White_Logo.png

11.1 KB
Loading

‎img/Premier-170.png

3.74 KB
Loading

‎img/Premier-350.png

4.02 KB
Loading

‎img/Premier-80.png

3.4 KB
Loading

‎img/apple-touch-icon-precomposed.png

1.87 KB
Loading

‎img/invalid.png

424 Bytes
Loading

‎img/red_asterisk.png

223 Bytes
Loading

‎img/valid.png

389 Bytes
Loading

‎index.html

Lines changed: 164 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,164 @@
1+
<!doctype html>
2+
<html lang="en" manifest="offline.appcache">
3+
4+
<!-- Copyright 2014 Verticon, Inc. all rights reserved. -->
5+
<head>
6+
<title>LB White Heater Estimator</title>
7+
<meta charset="utf-8">
8+
9+
<!-- Prevent scaling
10+
<meta name="viewport" content="user-scalable=no, width=device-width" />
11+
-->
12+
<meta name="viewport"
13+
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
14+
15+
<!-- Eliminate url and button bars if added to home screen -->
16+
<meta name="apple-mobile-web-app-capable" content="yes" />
17+
18+
<!-- Choose how to handle the phone status bar -->
19+
<meta name="apple-mobile-web-app-status-bar-style"
20+
content="black-translucent" />
21+
22+
<!-- TODO Specify a 320x460 start-up image.
23+
<link rel="apple-touch-startup-image" href="./startup.png" />
24+
-->
25+
26+
<!-- TODO Choose a 57x57 image for the icon
27+
<link rel="apple-touch-icon" href="./apple-touch-icon.png" />
28+
-->
29+
<!--TODO For Android bookmark icons See: http://stackoverflow.com/questions/1951381/configuring-android-web-applications
30+
and http://www.mollerus.net/tom/blog/2010/06/web_app_homescreen_icons_in_android.html
31+
-->
32+
<link rel="apple-touch-icon-precomposed"
33+
href="img/apple-touch-icon-precomposed.png" />
34+
35+
<link rel="stylesheet" href="css/main.css">
36+
<script src="js/HeaterCalc.js"></script>
37+
<script src="js/controller.js"></script>
38+
</head>
39+
<body>
40+
<div id=wrapper>
41+
<h1>
42+
<img src="img/LBW_White_Logo.png" alt="L.B. White">
43+
</h1>
44+
<h1>Heater Estimator</h1>
45+
<p id="intro">To determine Btuh heater requirements...</p>
46+
47+
48+
<!--
49+
-- The stuff below is an HTML table inside of an HTML form. It gets tricky!
50+
-- Notice the event handlers on all the form input elements.
51+
-->
52+
<form name="volumecalc_form">
53+
<fieldset class="volumecalc_form">
54+
<legend>Room Measurements</legend>
55+
<ul>
56+
<li><span class="prompt">Find Cubic Measurements of
57+
Tent by Entering Room Measurements in <select id="unitSelect">
58+
<option value="ft.">Feet</option>
59+
<option value="m.">Meters</option>
60+
</select>
61+
</span> <span class="required_notification">* Denotes Required
62+
Field</span></li>
63+
<li><label for="height">Height:</label> <input type="number"
64+
name="height" required pattern="^\d*(\.\d*)?$"
65+
title="Numbers with or without decimal points"
66+
onChange="compute()" /> <span class="form_hint">Proper
67+
format "11.2 or 11"</span> <span class="spaceUnits">ft.</span></li>
68+
<li><label for="width">Width:</label> <input type="number"
69+
name="width" required pattern="^\d*(\.\d*)?$"
70+
title="Numbers with or without decimal points"
71+
onChange="compute()" /> <span class="form_hint">Proper
72+
format "11.2 or 11"</span> <span class="spaceUnits">ft.</span></li>
73+
<li><label for="length">Length:</label> <input type="number"
74+
name="length" required pattern="^\d*(\.\d*)?$"
75+
title="Numbers with or without decimal points"
76+
onChange="compute()" /> <span class="form_hint">Proper
77+
format "11.2 or 11"</span> <span class="spaceUnits">ft.</span></li>
78+
<li>Cubic <span class="spaceUnitsName">Feet</span> of the
79+
Tent/Marquee: <span id="volume"></span>
80+
</li>
81+
82+
</ul>
83+
</fieldset>
84+
85+
<div class="desiredRise">
86+
<fieldset>
87+
<legend>Room Temperature</legend>
88+
<ul>
89+
<li><label class="prompt" for="desiredRiseInTemp">Select
90+
Desired Rise in Room Temperature(°<span class="tempUnits">F</span>):
91+
</label> <select id="riseSelect">
92+
<option value="5">°5</option>
93+
<option value="10">°10</option>
94+
<option value="20">°20</option>
95+
<option value="30">°30</option>
96+
<option value="40">°40</option>
97+
<option value="50">°50</option>
98+
<option value="60" selected>°60</option>
99+
<option value="70">°70</option>
100+
<option value="80">°80</option>
101+
<option value="90">°90</option>
102+
<option value="100">°100</option>
103+
</select></li>
104+
<li><label for="btuhReq">Btuh Requirement for Room:</label> <span
105+
id="btuhAnswer"> <span id="btuhReqNumber"></span> <span
106+
id="btuhReqWord"></span>
107+
</span></li>
108+
109+
</ul>
110+
</fieldset>
111+
</div>
112+
<!-- end .desiredRise -->
113+
</form>
114+
<div class="suggestions">
115+
<h2>May We Suggest:</h2>
116+
<ul>
117+
118+
<li>
119+
<img src="img/Premier-80.png" alt="Premier80">
120+
121+
<span id="p80"></span> <a
122+
href="http://www.lbwhite.com/products/Tent-Heaters/Premier-Portable-Heater/">Premier
123+
80's</a>
124+
</li>
125+
126+
<li>
127+
<img src="img/Premier-170.png" alt="Premier170">
128+
129+
<span id="p170"></span> <a
130+
href="http://www.lbwhite.com/products/Tent-Heaters/Premier-Portable-Heater/">Premier
131+
170's</a>
132+
</li>
133+
134+
<li>
135+
<img src="img/Premier-350.png" alt="Premier350">
136+
137+
<span id="p350"></span>
138+
<a
139+
href="http://www.lbwhite.com/products/Tent-Heaters/Premier-Portable-Heater/">Premier
140+
350's</a>
141+
</li>
142+
143+
<li>
144+
<img src="img/Director.png" alt="Director300">
145+
146+
<span id="d300"></span>
147+
<a
148+
href="http://www.lbwhite.com/products/Tent-Heaters/Director-Portable-Heater/">Director
149+
300's</a>
150+
</li>
151+
152+
</ul>
153+
154+
</div>
155+
<!-- end .suggestions -->
156+
157+
158+
159+
<p id="lbwhitelink"><a href="http://www.lbwhite.com/">http://www.lbwhite.com</a></p>
160+
161+
</div>
162+
<!-- end #wrapper -->
163+
</body>
164+
</html>

0 commit comments

Comments
 (0)