This repository has been archived by the owner on Aug 23, 2023. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 2
/
index.html
140 lines (128 loc) · 7.86 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
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>Elected Officials | USA.gov</title>
<script src="assets/javascript/uswds-init.min.js"></script>
<link rel="stylesheet" href="assets/css/styles.css" />
</head>
<body onload="load()">
<script src="https://maps.googleapis.com/maps/api/js?libraries=places&key=INSERT_API_KEY"></script>
<script src="assets/javascript/autocomplete.js"></script>
<script src="assets/javascript/accessibility.js"></script>
<script src="assets/javascript/uswds.min.js"></script>
<div>
<h1 class="font-serif-xl" style="color: rgb(182, 50, 31)">Elected Officials</h1>
<p class="font-serif-sm">
Get the names and contact information for the people who represent you on the
federal, state, and local levels.
</p>
<div>
<h2 class="font-serif-lg" style="color: rgb(27, 56, 88)">
Enter your address to find your elected officials.
</h2>
<p class="font-serif-xs">All form elements below are required and are marked with a (*) symbol.</p>
<form class="usa-form" action="pages/info.html" autocomplete="off">
<label id="myStreetAddress" class="usa-label" for="input-street">*Street Address</label>
<input
class="usa-input"
id="input-street"
aria-labelledby="myStreetAddress"
name="input-street"
type="text"
onkeypress="return event.keyCode != 13;"
required
autofocus
/>
<label id="myCity" class="usa-label" for="input-city">*City</label>
<input
class="usa-input"
id="input-city"
aria-labelledby="myCity"
name="input-city"
type="text"
onkeypress="return event.keyCode != 13;"
required
/>
<div style="display: flex;">
<div style="padding-right: 20px;">
<label id="myState" class="usa-label" for="input-state">*State</label>
<div class="usa-combo-box">
<select aria-labelledby="myState" class="usa-select" name="input-state" id="input-state" required>
<option id="AL" value="AL">Alabama</option>
<option id="AK" value="AK">Alaska</option>
<option id="AZ" value="AZ">Arizona</option>
<option id="AR" value="AR">Arkansas</option>
<option id="CA" value="CA">California</option>
<option id="CO" value="CO">Colorado</option>
<option id="CT" value="CT">Connecticut</option>
<option id="DE" value="DE">Delaware</option>
<option id="DC" value="DC">District Of Columbia</option>
<option id="FL" value="FL">Florida</option>
<option id="GA" value="GA">Georgia</option>
<option id="HI" value="HI">Hawaii</option>
<option id="ID" value="ID">Idaho</option>
<option id="IL" value="IL">Illinois</option>
<option id="IN" value="IN">Indiana</option>
<option id="IA" value="IA">Iowa</option>
<option id="KS" value="KS">Kansas</option>
<option id="KY" value="KY">Kentucky</option>
<option id="LA" value="LA">Louisiana</option>
<option id="ME" value="ME">Maine</option>
<option id="MD" value="MD">Maryland</option>
<option id="MA" value="MA">Massachusetts</option>
<option id="MI" value="MI">Michigan</option>
<option id="MN" value="MN">Minnesota</option>
<option id="MS" value="MS">Mississippi</option>
<option id="MO" value="MO">Missouri</option>
<option id="MT" value="MT">Montana</option>
<option id="NE" value="NE">Nebraska</option>
<option id="NV" value="NV">Nevada</option>
<option id="NH" value="NH">New Hampshire</option>
<option id="NJ" value="NJ">New Jersey</option>
<option id="NM" value="NM">New Mexico</option>
<option id="NY" value="NY">New York</option>
<option id="NC" value="NC">North Carolina</option>
<option id="ND" value="ND">North Dakota</option>
<option id="OH" value="OH">Ohio</option>
<option id="OK" value="OK">Oklahoma</option>
<option id="OR" value="OR">Oregon</option>
<option id="PA" value="PA">Pennsylvania</option>
<option id="RI" value="RI">Rhode Island</option>
<option id="SC" value="SC">South Carolina</option>
<option id="SD" value="SD">South Dakota</option>
<option id="TN" value="TN">Tennessee</option>
<option id="TX" value="TX">Texas</option>
<option id="UT" value="UT">Utah</option>
<option id="VT" value="VT">Vermont</option>
<option id="VA" value="VA">Virginia</option>
<option id="WA" value="WA">Washington</option>
<option id="WV" value="WV">West Virginia</option>
<option id="WI" value="WI">Wisconsin</option>
<option id="WY" value="WY">Wyoming</option>
</select>
</div>
</div>
<div style="width: 40%">
<label id="myZIP" class="usa-label" for="input-zip">*ZIP Code</label>
<input
class="usa-input"
id="input-zip"
aria-labelledby="myZIP"
name="input-zip"
type="text"
onkeypress="return event.keyCode != 13;"
required
/>
</div>
</div>
<p class="font-serif-3xs">We will never sell your personal information.
<a href="https://www.usa.gov/policies">Learn how USA.gov protects your privacy.</a>
</p>
<button class="usa-button usa-button--accent-cool" style="width: 80%">Find My Elected Officials!</button>
</form>
</div>
</div>
</body>
</html>