-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
227 lines (217 loc) · 16.4 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
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta content="width=device-width, initial-scale=1" name="viewport" />
<meta charset="utf-8">
<meta name="twitter:title" content="Pledge to Vote for Jaime!">
<meta name="twitter:description" content="Help bring hope back to South Carolina by pledging to vote for Jaime Harrison.">
<meta name="twitter:image" content="images/PledgePreview.png">
<meta name="og:title" content="Pledge to Vote for Jaime!">
<meta name="og:description" content="Help bring hope back to South Carolina by pledging to vote for Jaime Harrison.">
<meta name="og:image" content="images/PledgePreview.png">
<meta name="og:url" content="https://galenwinsor.com/pledge-to-vote">
<title>Pledge to Vote for Jaime</title>
<link rel="stylesheet" href="styles/styles.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js" integrity="sha512-bLT0Qm9VnAYZDflyKcBaQ2gg0hSYNQrJ8RilYldYQ1FxQYoCLtUjuuRuZo+fjqhx/qtq/1itJ0C2ejDxltZVFg==" crossorigin="anonymous"></script>
<script src="scripts/main.min.js"></script>
</head>
<body>
<div id="initial-display-box">
<h1 id="voice-header">Your <span id="voice" style="color:var(--strong-red)">Voice</span></h1>
<h1 id="vote-header">Your <span id="vote" style="color:var(--strong-red)">Vote</span></h1>
<h1 id="hope-header">Our <span id="hope" style="color:var(--strong-red)">Hope</span></h1>
<img id="state-outline" src="images/south-carolina.png" alt="">
<div id="begin-box">
<button class="flex align" id="begin" type="button" name="begin-button" disabled>
Pledge to vote now
<svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-arrow-right" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M1 8a.5.5 0 0 1 .5-.5h11.793l-3.147-3.146a.5.5 0 0 1 .708-.708l4 4a.5.5 0 0 1 0 .708l-4 4a.5.5 0 0 1-.708-.708L13.293 8.5H1.5A.5.5 0 0 1 1 8z"/>
</svg>
</button>
</div>
</div>
<div class="background">
</div>
<!-- header -->
<div id="header" class="flex align left-aligned">
<a href="https://jaimeharrison.com" target="_blank">
<img src="images/HeaderLogo.png" alt="">
</a>
</div>
<div id="loading" class="flex align center">
<div>
<h1>Your graphic is loading...</h1>
<h3>This may take a few moments.</h3>
</div>
</div>
<div class="container">
<!-- form -->
<form id="visible-form" class="flex column center align" action="index.html" method="post" onsubmit="return false">
<div id="sec-name" class="form-section flex column center align">
<h2 id="instructions">Pledge to vote for Jaime and generate your own pledge-to-vote graphic for social media.</h2>
<div id="name-card" class="form-card">
<span class="flex align no-wrap" style="width:100%">
<svg class="check-box" width="3em" height="3em" viewBox="0 0 16 16" class="bi bi-square" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path id="check-name" class="check" fill-rule="evenodd" d="M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0z"/>
<path fill-rule="evenodd" d="M14 1H2a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1zM2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2z"/>
</svg>
<h1 id="im-voting">I'm <span id="red-vote" style="color:var(--strong-red)">voting</span> for Jaime Harrison</h1>
</span>
<input id="first-name" type="text" maxlength="20" name="firstname" placeholder="First Name..." required>
<input id="last-name" type="text" maxlength="20" name="lastname" placeholder="Last Name..." required>
<input id="zip" name="zip" type="text" inputmode="numeric" placeholder="Zip Code..." required>
<input type="checkbox" id="voted" name="voted" value="true" style="display:none">
<label id="voted-label" for="voted">
<span class="radio-control">
<svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-check-circle" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
<path fill-rule="evenodd" d="M10.97 4.97a.75.75 0 0 1 1.071 1.05l-3.992 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.236.236 0 0 1 .02-.022z"/>
</svg>
</span>
I already voted!
</label>
<button id="next-1" class="next-button flex align" type="button" name="next-1" onclick="next('#sec-reason','#check-name')" disabled>
Next
<svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-arrow-90deg-down" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M4.854 14.854a.5.5 0 0 1-.708 0l-4-4a.5.5 0 0 1 .708-.708L4 13.293V3.5A2.5 2.5 0 0 1 6.5 1h8a.5.5 0 0 1 0 1h-8A1.5 1.5 0 0 0 5 3.5v9.793l3.146-3.147a.5.5 0 0 1 .708.708l-4 4z"/>
</svg>
</button>
</div>
</div>
<div id="sec-reason" class="form-section flex column center align">
<div id="reason-card" class="form-card">
<span class="flex align no-wrap">
<svg class="check-box" width="3em" height="3em" viewBox="0 0 16 16" class="bi bi-square" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path id="check-reason" class="check" fill-rule="evenodd" d="M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0z"/>
<path fill-rule="evenodd" d="M14 1H2a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1zM2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2z"/>
</svg>
<h1 id="because">I'm voting for Jaime because...</h1>
</span>
<input id="jaime-reason" type="radio" name="custom-3694" value="South Carolina deserves a Senator who cares about our state" required>
<label name="reason-label" for="jaime-reason">
<span class="radio-control">
<svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-check-circle" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
<path fill-rule="evenodd" d="M10.97 4.97a.75.75 0 0 1 1.071 1.05l-3.992 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.236.236 0 0 1 .02-.022z"/>
</svg>
</span> South Carolina deserves a Senator who cares about our state
</label>
<input id="lindsey-reason" type="radio" name="custom-3694" value="Lindsey Graham doesn't represent me and my values">
<label name="reason-label" for="lindsey-reason">
<span class="radio-control">
<svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-check-circle" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
<path fill-rule="evenodd" d="M10.97 4.97a.75.75 0 0 1 1.071 1.05l-3.992 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.236.236 0 0 1 .02-.022z"/>
</svg>
</span> Lindsey Graham doesn't represent me and my values
</label>
<input id="changed-reason" type="radio" name="custom-3694" value="Lindsey Graham has changed">
<label name="reason-label" for="changed-reason">
<span class="radio-control">
<svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-check-circle" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
<path fill-rule="evenodd" d="M10.97 4.97a.75.75 0 0 1 1.071 1.05l-3.992 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.236.236 0 0 1 .02-.022z"/>
</svg>
</span> Lindsey Graham has changed
</label>
<input id="issues-reason" type="radio" name="custom-3694" value="Jaime will fight for the issues that matter to me">
<label name="reason-label" for="issues-reason">
<span class="radio-control">
<svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-check-circle" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
<path fill-rule="evenodd" d="M10.97 4.97a.75.75 0 0 1 1.071 1.05l-3.992 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.236.236 0 0 1 .02-.022z"/>
</svg>
</span> Jaime will fight for the issues that matter to me
</label>
<input id="other-reason" type="radio" name="custom-3694" value="other">
<label name="reason-label" for="other-reason">
<span class="radio-control">
<svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-check-circle" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
<path fill-rule="evenodd" d="M10.97 4.97a.75.75 0 0 1 1.071 1.05l-3.992 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.236.236 0 0 1 .02-.022z"/>
</svg>
</span> Other: <input id="other-input" type="text" maxlength="100" name="other-input" placeholder="My reason..." disabled>
</label>
<button id="next-2" class="next-button flex align" type="button" name="next-2" onclick="next('#sec-how','#check-reason')" disabled>
Next
<svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-arrow-90deg-down" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M4.854 14.854a.5.5 0 0 1-.708 0l-4-4a.5.5 0 0 1 .708-.708L4 13.293V3.5A2.5 2.5 0 0 1 6.5 1h8a.5.5 0 0 1 0 1h-8A1.5 1.5 0 0 0 5 3.5v9.793l3.146-3.147a.5.5 0 0 1 .708.708l-4 4z"/>
</svg>
</button>
</div>
</div>
<div id="sec-how" class="form-section flex column center align">
<div id="how-card" class="form-card">
<span class="flex align no-wrap">
<svg class="check-box" width="3em" height="3em" viewBox="0 0 16 16" class="bi bi-square" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path id="check-how" class="check" fill-rule="evenodd" d="M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0z"/>
<path fill-rule="evenodd" d="M14 1H2a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1zM2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2z"/>
</svg>
<h1 id="i-pledge">I pledge to vote...</h1>
</span>
<label name="how-label" for="mail-in">
<span class="radio-control">
<svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-check-circle" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
<path fill-rule="evenodd" d="M10.97 4.97a.75.75 0 0 1 1.071 1.05l-3.992 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.236.236 0 0 1 .02-.022z"/>
</svg>
</span>
<input id="mail-in" type="radio" name="custom-3695" value="by mail" required> Absentee by mail
</label>
<label name="how-label" for="abs-inperson">
<span class="radio-control">
<svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-check-circle" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
<path fill-rule="evenodd" d="M10.97 4.97a.75.75 0 0 1 1.071 1.05l-3.992 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.236.236 0 0 1 .02-.022z"/>
</svg>
</span>
<input id="abs-inperson" type="radio" name="custom-3695" value="absentee in person"> Absentee in person
</label>
<label name="how-label" for="inperson">
<span class="radio-control">
<svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-check-circle" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
<path fill-rule="evenodd" d="M10.97 4.97a.75.75 0 0 1 1.071 1.05l-3.992 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.236.236 0 0 1 .02-.022z"/>
</svg>
</span>
<input id="inperson" type="radio" name="custom-3695" value="in person"> Safely in person
</label>
<button id="next-3" class="next-button flex align" type="button" name="next-3" onclick="next('#sec-address','#check-how')" disabled>
Next
<svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-arrow-90deg-down" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M4.854 14.854a.5.5 0 0 1-.708 0l-4-4a.5.5 0 0 1 .708-.708L4 13.293V3.5A2.5 2.5 0 0 1 6.5 1h8a.5.5 0 0 1 0 1h-8A1.5 1.5 0 0 0 5 3.5v9.793l3.146-3.147a.5.5 0 0 1 .708.708l-4 4z"/>
</svg>
</button>
</div>
</div>
<div id="sec-address" class="form-section flex column center align">
<div id="address-card" class="form-card">
<span class="flex align no-wrap">
<svg class="check-box" width="3em" height="3em" viewBox="0 0 16 16" class="bi bi-square" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path id="check-address" class="check" fill-rule="evenodd" d="M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0z"/>
<path fill-rule="evenodd" d="M14 1H2a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1zM2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2z"/>
</svg>
<h1 id="remind">How can we remind you?</h1>
</span>
<input id="email-address" type="email" name="email" placeholder="Email Address..." required>
<input id="phone" type="tel" name="phone" placeholder="Phone Number...">
<button id="submit" type="submit" name="submit-button">
Submit Pledge
<svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-arrow-right" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M1 8a.5.5 0 0 1 .5-.5h11.793l-3.147-3.146a.5.5 0 0 1 .708-.708l4 4a.5.5 0 0 1 0 .708l-4 4a.5.5 0 0 1-.708-.708L13.293 8.5H1.5A.5.5 0 0 1 1 8z"/>
</svg>
</button>
<p id="mobile-policy">By providing your mobile number, you consent to receive periodic campaign updates from Jaime Harrison for U.S. Senate. Txt HELP for help, STOP to end. Msg & Data rates may apply. <a href="https://jaimeharrison.com/privacy-policy/" target="_blank">Privacy Policy.</a></p>
</div>
</div>
</form>
<div id="footer" class="flex column center align">
<img src="images/FooterLogo.png" alt="">
<div id="paid-footer" class="flex center align">
<p>PAID FOR BY JAIME HARRISON FOR U.S. SENATE</p>
</div>
</div>
<!-- container ends -->
</div>
</body>
</html>