Skip to content
Permalink
07341eb590
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

Wello/html-ONLY-site/form.html

Go to file
 
 
Cannot retrieve contributors at this time
321 lines (258 sloc) 10.9 KB
Raw Blame
<!doctype html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="apple-touch-icon" href="apple-touch-icon.png">
<!-- Place favicon.ico in the root directory -->
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css">
<script src="js/vendor/modernizr-2.8.3.min.js"></script>
</head>
<body>
<!--[if lt IE 8]>
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
<![endif]-->
<!-- Add your site or application content here -->
<nav class="top-nav">
<button><a href="index.html">Cancel</a></button>
<button>Save Draft</button>
</nav>
<form>
<label for="well-picture">
<img src="img/add-img-icon.png"/>
</label>
<input type="file" id="well-picture" accept="image/*">
<ul class="inputs" id="report-metadata">
<li><label for="well-completion-date">Date well completed</label>
<input type="date" id="well-completion-date"></li>
<li>
<label for="report-completion-date">Date of report</label>
<input type="date" id="report-completion-date">
</li>
<li>
<label for="permit-number">Permit number</label>
<input type="number" min="1" id="permit-number" class="long-num">
</li>
<li>
<label for="registrant-number">Registrant number</label>
<input type="number" min="1" id="registrant-number" class="long-num">
</li>
<li>
<label for="state-well-number">State well number</label>
<input type="number" min="1" id="state-well-number" class="long-num">
</li>
<li>
<label for="other-number">Other number</label>
<input type="number" min="1" id="other-number" class="long-num">
</li>
</ul>
<h2>Owner Info</h2>
<ul class="inputs" id="owner-info">
<li><label for="name">Name</label>
<input type="text" id="name"></li>
<li>
<label for="address">Address</label>
<input type="text" id="address">
</li>
<li>
<label for="town">Town</label>
<input type="text" id="town">
</li>
<li>
<label for="zip-code">Zip code</label>
<input type="number" min="1" id="zip-code" class="med-num">
</li>
</ul>
<h2>Well location</h2>
<ul class="inputs" id="owner-info">
<li>
<label for="address">Address</label>
<input type="text" id="address">
</li>
<li>
<label for="town">Town</label>
<input type="text" id="town">
</li>
<li>
<label for="zip-code">Zip code</label>
<input type="number" min="1" id="zip-code" class="med-num">
</li>
<li>
<label for="lot-number">Lot number</label>
<input type="number" min="1" id="lot-number" class="med-num">
</li>
<li id="get-gps-local">
<label for="gps-coordinates">GPS coordinates</label>
<input type="text" id="gps-coordinates">
<button onclick="getLocation()"><img alt="get location" src="img/gps.svg"></button>
</li>
<li>
<label for="relative-location">Location relative to three permanent landmarks</label>
<textarea id="relative-location"></textarea>
</li>
<li>
<label for="use">Use</label>
<select id="use" onchange='showOther(this.value, this);'>
<option value="Domestic">Domestic</option>
<option value="Buisness Establishment">Buisness Establishment</option>
<option value="Farm">Farm</option>
<option value="Test Well">Test Well</option>
<option value="Public Supply">Public Supply</option>
<option value="Industrial">Industrial</option>
<option value="Air Conditioning">Air Conditioning</option>
<option value="Other">Other</option>
</select>
<input type="text" id="other-use-case" class="other">
</li>
<li>
<label for="drilling-equipment">Drilling equipment</label>
<select id="drilling-equipment">
<option value="Rotary">Rotary</option>
<option value="Compressed Air Percussion">Compressed Air Percussion</option>
<option value="Cable Percussion">Cable Percussion</option>
<option value="Other">Other</option>
</select>
<input type="text" id="other-equipment" class="other">
</li>
</ul>
<h2>Casing Details</h2>
<ul class="inputs" id="casing-details">
<li>
<label for="length">Length</label>
<input type="number" min="1" id="length"> feet
</li>
<li>
<label for="diameter">Diameter</label>
<input type="number" min="1" id="diameter"> inches
</li>
<li>
<label for="weight">Weight per foot</label>
<input type="number" min="1" id="weight"> lbs/feet
</li>
<li>
<input type="radio" name="threaded-vs-welded" value="Threaded"> Threaded
<input type="radio" name="threaded-vs-welded" value="Welded"> Welded
</li>
<li>
<label for="drive-shoe">Drive shoe</label>
<input type="radio" name="drive-show" value="yes"> yes
<input type="radio" name="drive-show" value="no"> no
</li>
<li>
<label for="casing-grouting">Was casing grouted</label>
<input type="radio" name="casing-grouting" value="yes"> yes
<input type="radio" name="casing-grouting" value="no"> no
</li>
</ul>
<h2>Yield Test</h2>
<ul class="inputs" id="yield-test">
<li>
<label for="method">Method</label>
<select id="method">
<option value="bailed">Bailed</option>
<option value="Compressed Air">Compressed Air</option>
<option value="Cable Percussion">Pumped</option>
</select>
</li>
<li>
<label for="yield-hours">Test duration</label>
<input type="number" min="1" id="yield-hours"> hours
</li>
<li>
<label for="yield-gpm">Yield</label>
<input type="number" min="1" id="yeld-gpm"> gallons per minute
</li>
</ul>
<h2>Water Level</h2>
<ul class="inputs" id="yield-test">
<li>
<label for="water-from-surface">From land surface</label>
<input type="number" min="1" id="water-from-surface"> feet
</li>
<li>
<label for="water-level-during-yield-test">During yield test</label>
<input type="number" min="1" id="water-level-during-yield-test"> feet
</li>
<li>
<label for="depth-of-well">Depth of complete well</label>
<input type="number" min="1" id="water-from-surface"> feet
</li>
</ul>
<h2>Screen Details</h2>
<ul class="inputs" id="screen-details">
<li>
<label for="make">Make</label>
<input type="text" id="make">
</li>
<li>
<label for="length-open-to-aquifier">Length open to aquifier</label>
<input type="number" min="1" id="length-open-to-aquifier"> feet
</li>
<li>
<label for="slot-size">Slot size</label>
<input type="number" min="1" id="slot-size">
</li>
<li>
<label for="diameter">Diameter</label>
<input type="number" min="1" id="diameter"> inches
</li>
<li>
<label for="gravel">Gravel</label>
<input type="radio" name="gravel" value="Packed"> Packed
<input type="radio" name="gravel" value="Unpacked"> Unpacked
</li>
<li>
<label for="diameter-including-gravel-pack">Diameter including gravel pack</label>
<input type="number" min="1" id="diameter-including-gravel-pack"> inches
</li>
<li>
<label for="gravel-size">Gravel size</label>
<input type="number" min="1" id="gravel-size"> inches
</li>
<li>
<label for="gravel-pack-location">Gravel pack location</label>
<input type="number" min="1" id="gravel-pack-location-from"> feet
<br>to<br>
<input type="number" min="1" id="gravel-pack-location-to"> feet
</li>
</ul>
<h2>Depth From Land To Surface</h2>
<ul class="inputs" id="depth-from-surface">
<li>
<input type="number" min="1"> feet
<input type="text">
<input type="number" min="1"> feet
<input type="text">
<input type="number" min="1"> feet
</li>
</ul>
<input type="submit" value="Submit">
</form>
<script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
<script>
window.jQuery || document.write('<script src="js/vendor/jquery-1.12.0.min.js"><\/script>')
</script>
<script src="js/plugins.js"></script>
<script src="js/main.js"></script>
<!-- Google Analytics: change UA-XXXXX-X to be your site's ID. -->
<script>
(function (b, o, i, l, e, r) {
b.GoogleAnalyticsObject = l;
b[l] || (b[l] = function () {
(b[l].q = b[l].q || []).push(arguments)
});
b[l].l = +new Date;
e = o.createElement(i);
r = o.getElementsByTagName(i)[0];
e.src = 'https://www.google-analytics.com/analytics.js';
r.parentNode.insertBefore(e, r)
}(window, document, 'script', 'ga'));
ga('create', 'UA-XXXXX-X', 'auto');
ga('send', 'pageview');
</script>
</body>
</html>