-
Notifications
You must be signed in to change notification settings - Fork 2
/
index.html
152 lines (132 loc) · 6.72 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Discover Your Elected Officials</title>
<meta name="description" content="It is important to know your elected your officials. Take a moment to find and contact them.">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta property="og:image" content="public/img/flag-hero-image.jpg">
<link rel="shortcut icon" href="public/img/favicons/favicon.ico" type="image/x-icon">
<link rel="stylesheet" href="public/css/main.min.css">
</head>
<body>
<header class="usa-header">
<h1 class="usa-logo-text">Discover Your Elected Officials</h1>
</header>
<div class="landing-page">
<section class="usa-hero">
<div class="usa-grid">
<div class="usa-hero-callout usa-section-dark">
<h2>Knowing your elected officials is important</h2>
</div>
</div>
</section>
<section class="usa-grid usa-section">
<div class="usa-width-one-third">
<h3>Contacting elected officials</h3>
</div>
<div class="usa-width-two-thirds">
<p>Elected officials work for their constituents and need to know what their constituents think. Since they work for you, they want to know how you feel about the issues and what you want done on specific legislation. Do not underestimate the power of calling, writing, and visiting elected officials. </p>
</div>
</section>
<div class="button-div">
<button class="usa-button-primary" id="start-link" type="button" name="button">Find Your Officials</button>
</div>
</div>
<div hidden class="geo-results-error-page error usa-grid-full">
<h2>Error: Browser does not support geolocation. Please enter your address manually.</h2>
<div class="button-div">
<button class="usa-button-secondary" id="geo-error-btn" type="button" name="button">Enter Address</button>
</div>
</div>
<div hidden class="invalid-address-page error usa-grid-full">
<h2>Error: Invalid Address. Please re-enter your address.</h2>
<div class="button-div">
<button class="usa-button-secondary" id="invalid-address-btn" type="button" name="button">Enter Address</button>
</div>
</div>
<div hidden class="address-page usa-grid-full">
<div class="button-div">
<button class="usa-button-gray" id="geolocate-btn" type="button" name="button">Use current location*</button>
</div>
<div class="geo-results-loading">
<div class="loader">Loading...</div>
</div>
<form id="address-form" class="usa-form-large" action="index.html" method="post">
<fieldset class="adr">
<legend>Address Form</legend>
<label for="street-input">Street</label>
<input class="street-address" id="street-input" type="text" name="street" street-address placeholder="1600 Pennsylvania Avenue NW" required>
<label for="city-input">City</label>
<input class="locality" id="city-input" type="text" name="city" placeholder="Washington" required>
<label for="state-select">State</label>
<select class="region" id="state-select" required>
<option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<option value="AZ">Arizona</option>
<option value="AR">Arkansas</option>
<option value="CA">California</option>
<option value="CO">Colorado</option>
<option value="CT">Connecticut</option>
<option value="DE">Delaware</option>
<option value="DC" selected>District Of Columbia</option>
<option value="FL">Florida</option>
<option value="GA">Georgia</option>
<option value="HI">Hawaii</option>
<option value="ID">Idaho</option>
<option value="IL">Illinois</option>
<option value="IN">Indiana</option>
<option value="IA">Iowa</option>
<option value="KS">Kansas</option>
<option value="KY">Kentucky</option>
<option value="LA">Louisiana</option>
<option value="ME">Maine</option>
<option value="MD">Maryland</option>
<option value="MA">Massachusetts</option>
<option value="MI">Michigan</option>
<option value="MN">Minnesota</option>
<option value="MS">Mississippi</option>
<option value="MO">Missouri</option>
<option value="MT">Montana</option>
<option value="NE">Nebraska</option>
<option value="NV">Nevada</option>
<option value="NH">New Hampshire</option>
<option value="NJ">New Jersey</option>
<option value="NM">New Mexico</option>
<option value="NY">New York</option>
<option value="NC">North Carolina</option>
<option value="ND">North Dakota</option>
<option value="OH">Ohio</option>
<option value="OK">Oklahoma</option>
<option value="OR">Oregon</option>
<option value="PA">Pennsylvania</option>
<option value="RI">Rhode Island</option>
<option value="SC">South Carolina</option>
<option value="SD">South Dakota</option>
<option value="TN">Tennessee</option>
<option value="TX">Texas</option>
<option value="UT">Utah</option>
<option value="VT">Vermont</option>
<option value="VA">Virginia</option>
<option value="WA">Washington</option>
<option value="WV">West Virginia</option>
<option value="WI">Wisconsin</option>
<option value="WY">Wyoming</option>
</select>
<label for="postal-code-input">Zip Code</label>
<input class="postal-code" id="postal-code-input" type="number" name="postal-code" postal-code placeholder="20500" max="99999" min="1" required>
</fieldset>
<div class="button-div">
<button class="usa-button-primary" id="address-submit" type="submit" name="address-submit-btn">Submit</button>
</div>
</form>
<p>* For accuracy of results, only use this function if you are currently located at the address of your voter registration.</p>
</div>
<div hidden class="contact-page"></div>
<script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyC2UWTFpmkltPpI6xIiBMpiGIk5HZwZh_M">
</script>
<script async type="text/javascript" src="public/js/main.min.js"></script>
</body>
</html>