-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
371 lines (335 loc) · 15.9 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
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<!-- Fontawesome -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
<title>Alec and Lana's Wedding</title>
<style>
body {
color: #5a5a5a;
}
.divider {
margin: 5rem 0; /* Space out the Bootstrap <hr> more */
}
.bg-image {
/* The image used */
background-image: url("static/engagement_compressed.jpg");
/* Center and scale the image nicely */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
width: 100%;
height: 0;
padding-top: 66.64%; /* (img-height / img-width * container-width) */
/* (853 / 1280 * 100) */
}
.img-responsive {
display: block;
max-width: 100%;
height: auto;
}
</style>
</head>
<body>
<header>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Alec and Lana's Wedding</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#photos">Photos</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#ceremony">Event</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#hotels">Where to Stay</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#other">Everything Else</a>
</li>
</ul>
</div>
</nav>
</header>
<main role="main">
<div class="bg-image"></div>
<div class="container" style="margin-top: 20px; max-width: 650px;">
<div id="photos" class="row">
<div style="width: 100%">
<h1 class="text-center" style="width: 100%">Photos</h1>
</div>
<div style="width: 100%">
<p>
Please upload your photos to the following shared album!
</p>
<div class="container text-center">
<a
class="btn btn-primary btn-md"
role="button"
href="https://photos.app.goo.gl/HKycnrz7fbzMTtuD9"
>
Photos
</a>
</div>
</div>
</div>
<div id="rsvp" class="row" style="display: none;">
<div style="width: 100%">
<h1 class="text-center" style="width: 100%">RSVP</h1>
</div>
<div class="container text-center">
<p>Let us know you're coming! Please RSVP by May 15th, 2019</p>
<div class="container">
<div
class="btn btn-primary btn-md"
role="button"
onclick="beginRSVP();"
>
Click to RSVP
</div>
</div>
<div id="rsvp-form" style="margin-top: 15px; display: none;">
<div id="rsvp_entries"></div>
<div style="width: 100%;">
<div style="display: inline-block;" class="float-right">
<button onclick="addEntry();" class="btn btn-secondary"><i class="fas fa-plus"></i></button>
<button onclick="submitRSVP()" class="btn btn-primary">
<div id="submit-spinner" class="spinner-border spinner-border-sm" role="status" style="display: none;">
<span class="sr-only">Loading...</span>
</div>
<span id="submit-success" style="display: none;"><i class="fas fa-check"></i></span>
Submit
</button>
</div>
</div>
</div>
<div id="rsvp-success-message" style="margin-top: 15px; display: none;">
<div class="alert alert-success" role="alert">
<h4 class="alert-heading">Thanks for RSVPing!</h4>
<p>Your RSVP has been sent safe and sound. That's all we need, thanks for RSVPing!</p>
</div>
</div>
</div>
</div>
<hr class="divider">
<div id="ceremony" class="row">
<div style="width: 100%">
<h1 class="text-center" style="width: 100%">Ceremony and Reception</h1>
</div>
<div>
<dl class="dl-horizontal lead">
<dt>What</dt>
<dd>Celebrate our marriage in the lovely gardens of Howard County Conservancy</dd>
<dt>When</dt>
<dd>Saturday, June 22, at 6:00 pm (sharp)</dd>
<dt>Where</dt>
<dd>
<address>
Howard County Conservancy<br>
<a href="https://goo.gl/maps/fF7e2eGL8w92">
10520 Old Frederick Rd,
Woodstock,
MD 21163</a><br>
Phone: (410) 465-8877
</address>
</dd>
<dt>Attire</dt>
<dd>Cocktail. Be warned: Although much of the reception will be indoors, the gardens and ceremony area require walking on a small gravel path. This may be tricky in heels.
</dd>
<dt>Parking</dt>
<dd>Parking is available on-site at the Conservancy</dd>
<dt>Order of Events</dt>
<dd>
<ul>
<li>Ceremony</li>
<li>Cocktails</li>
<li>Introduction + First Dance</li>
<li>Dinner + Toasts</li>
<li>Father/Daughter + Mother/Son Dances</li>
<li>Dancing!</li>
<li>Cake Cutting + Boquet Toss</li>
<li>Partying/Dancing!</li>
<li>Last Dance</li>
</ul>
</dd>
</dl>
</div>
</div>
<hr class="divider">
<div id="hotels" class="row">
<div style="width: 100%">
<h1 class="text-center" style="width: 100%">Where to Stay</h1>
</div>
<div>
<p>
We have a block of <strong>15</strong> rooms available at the
<a href="https://www.ihg.com/holidayinnexpress/hotels/us/en/find-hotels/hotel/rates?qCiMy=52019&qCiD=21&qCoMy=52019&qCoD=22&qAdlt=1&qChld=0&qRms=1&qRtP=6CBARC&qIta=99801505&qGrpCd=FIS&qSlH=BALER&qSlRc=KNGN&qAkamaiCC=US&qSrt=sBR&qBrs=re.ic.in.vn.cp.vx.hi.ex.rs.cv.sb.cw.ma.ul.ki.va&qAAR=6CBARC&qWch=0&qSmP=1&setPMCookies=true&qRad=30&qRdU=mi&srb_u=1">
<strong>Holiday Inn Express Columbia East</strong>
</a>. The block is guaranteed until <strong>May 22, 2019</strong>, but we expect rooms to go pretty quickly. Transportation to and from the conservancy will be provided for guests staying here.
</p>
<p>
<strong>Update:</strong> The link here only shows for the night of Friday June 21st, 2019.
You should be able to get the same rate calling in and asking for the "Rosenbaum Wedding"
block. We're working on contacting the hotel to fix the link in the mean time.
</p>
<p>
Unfortunately there's some sort of event going on nearby, so we couldn't get a bigger block. There's plenty of hotels nearby, though, so accommodations shouldn't be a problem if you don't mind being a little spread out. Here's where we'd recommend looking:
</p>
<table class="table table-striped">
<tbody class="container">
<tr class="row">
<th class="col-md-2">Hampton Inn and Suites Baltimore/ Woodlawn</th>
<td class="col-md-10">
The <a href="https://hamptoninn3.hilton.com/en/hotels/maryland/hampton-inn-and-suites-baltimore-woodlawn-BALWLHX/index.html">Hampton Inn and Suites Baltimore/Woodlawn</a> is conveniently located just off the highway and isn't too far from the wedding venue.
It is about a 20 minute drive to Howard County Conservancy <a href="https://goo.gl/maps/Aj19kY8icx52">(directions)</a>.
</td>
</tr>
<tr class="row">
<th class="col-md-2">Sonesta ES Suites Columbia</th>
<td class="col-md-10">
The <a href="https://www.sonesta.com/us/maryland/columbia/sonesta-es-suites-columbia-baltimore">Sonesta ES Suites Columbia</a> is conveniently located just off the highway and isn't too far from the wedding venue.
It is about a 15 minute drive to Howard County Conservancy <a href="https://goo.gl/maps/mbGg4qhJvst">(directions)</a>.
</td>
</tr>
<tr class="row">
<th class="col-md-2">Hilton Garden Inn Columbia</th>
<td class="col-md-10">
The <a href="https://hiltongardeninn3.hilton.com/en/hotels/maryland/hilton-garden-inn-columbia-BWICOGI/index.html">Hilton Garden Inn Columbia</a> is conveniently located just off the highway and isn't too far from the wedding venue.
It is about a 16 minute drive to Howard County Conservancy <a href="https://goo.gl/maps/1zJ2weyYu9S2">(directions)</a>.
</td>
</tr>
<tr class="row">
<th class="col-md-2">Turf Valley Resort</th>
<td class="col-md-10">
The <a href="https://www.turfvalley.com/stay">Turf Valley Resort</a> is conveniently located just off the highway and very close to the wedding venue.
It is about a 10 minute drive to Howard County Conservancy <a href="https://goo.gl/maps/Xdku68dVR4E2">(directions)</a>.
</td>
</tr>
<tr class="row">
<th class="col-md-2">Airbnb</th>
<td class="col-md-10">
Airbnb's are available all over the place, and are sometimes significantly less expensive that the local hotels. Check them out <a href="https://www.airbnb.com/s/Howard-County--MD--United-States/homes?refinement_paths%5B%5D=%2Fhomes&query=Howard%20County%2C%20MD%2C%20United%20States&checkin=2019-06-22&checkout=2019-06-23&adults=2&children=0&infants=0&guests=2&toddlers=0&click_referer=t%3ASEE_ALL%7Csid%3A80ad2f48-c3f5-4b41-9c22-9c5310d4f2c1%7Cst%3AMAGAZINE_HOMES&allow_override%5B%5D=&zoom=12&search_by_map=true&sw_lat=39.16550686565662&sw_lng=-77.05544303790714&ne_lat=39.35970586706279&ne_lng=-76.70525382892276&s_tag=TLmIfZAE">here</a>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<hr class="divider">
<div id="other" class="row">
<div style="width: 100%">
<h1 class="text-center" style="width: 100%">Registry</h1>
</div>
<div>
<p>
We have a registry listed online
<a href="https://smile.amazon.com/wedding/share/rosenbaum"><strong>here!</strong></a>
</p>
<p>
We'd be equally appreciative of contributions to our honeymoon fund!
</p>
</div>
</div>
<hr class="divider">
<div id="other" class="row">
<div style="width: 100%">
<h1 class="text-center" style="width: 100%">Save the Dates</h1>
</div>
<div>
<p>
There are two versions of our Save the Dates! Both are displayed below :)
</p>
<div class="container-fluid">
<div class="row no-gutter">
<div class="col-lg-6">
<img src="static/WeddingSaveTheDateV1_compressed.jpg" class="img-responsive center-block">
</div>
<div class="col-lg-6">
<img src="static/WeddingSaveTheDateV2_compressed.jpg" class="img-responsive center-block">
</div>
</div>
</div>
</div>
</div>
</div>
<!-- FOOTER -->
<footer class="container">
<p class="float-right"><a href="#">Back to top</a></p>
</footer>
</main>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"
></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
<script type="text/javascript">
var rsvpCount = 0;
// happens when someone clicks "RSVP"
const beginRSVP = () => {
if ($('#rsvp-form').is(":hidden")) {
// hide the success message if it's shown
$("#rsvp-success-message").hide();
// add the first entry
addEntry();
// show the form
$('#rsvp-form').show();
}
}
// happens when an entry is added
const addEntry = () => {
const template = `
<div class="input-group mb-3 rsvp-entry">
<div class="input-group-prepend">
<div class="input-group-text">
<input id="rsvp_name_${rsvpCount}" onclick="$('#not_${rsvpCount}').toggle(!this.checked)" type="checkbox" checked>
<label for="rsvp_name_${rsvpCount}" class="form-check-label" style="margin-left: 5px;"><span id="not_${rsvpCount}" style="display: none;">Not</span> Attending</label>
</div>
</div>
<input type="text" class="form-control" placeholder="name...">
</div>
`;
rsvpCount += 1;
$("#rsvp_entries").append(template);
}
function sleep(ms) {
return new Promise(resolve => setTimeout(resolve, ms));
}
const submitRSVP = async () => {
$("#submit-spinner").show();
$(".rsvp-entry").toArray().map((val) => {
const name = $(val).find("input[type=text]").val();
const attending = $(val).find("input[type=checkbox]").prop("checked");
$.post('https://8h14xk9vo3.execute-api.us-east-1.amazonaws.com/prod', JSON.stringify([name, attending ? "yes" : "no"]));
}, []);
await sleep(2000);
$("#submit-spinner").hide();
// show the success checkmark
$("#submit-success").show();
setTimeout(() => {$("#submit-success").fadeOut(500);}, 1000);
// cleanup
setTimeout(() => {
$('#rsvp-form').hide();
$("#rsvp_entries").empty();
// show the success message
$("#rsvp-success-message").show();
}, 1500);
}
</script>
</body>
</html>