Files
savethedate/rsvp.html
Julien Lengrand-Lambert 8749edca44 Reset yes no messages
2018-03-04 18:34:55 +01:00

593 lines
24 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!DOCTYPE html>
<html lang='eng'>
<head>
<meta charset='UTF-8'>
<meta name="apple-mobile-web-app-capable" content="yes" />
<title>Be there or be square!</title>
<link href="https://fonts.googleapis.com/css?family=Glass+Antiqua" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Dawning+of+a+New+Day" rel="stylesheet">
<link rel='stylesheet' href='rsvp.css'/>
<style type="text/css">
.hero {
font-family: 'Dawning of a New Day', cursive;
}
.details, .location, #login-button, .modal-content, .input-box, #take-me-in-btn, #rsvp-done-btn {
font-family: 'Glass Antiqua', cursive;
}
</style>
<meta name='viewport'
content='width=device-width, initial-scale=1.0, maximum-scale=1.0' />
<link href='img-vid/favicon.png' rel="shortcut icon" type="image/png"/>
<script src="https://www.gstatic.com/firebasejs/4.9.1/firebase.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script>
var config = {
databaseURL: "https://rsvp-dbb88.firebaseio.com"
};
firebase.initializeApp(config);
var database = firebase.database();
</script>
<script>
var accommodation = "";
var params = window.location.search.substr(1);
var visitorCode = params.replace("code=", "");
var visitor = null;
function openModal(modalName) {
document.getElementById(modalName).style.display = "block";
}
function closeModal(modalName) {
document.getElementById(modalName).style.display = "none";
}
function saveAndCloseNav(){
document.getElementById("myNav").style.display = "none";
document.getElementById("rsvpSent").style.display = "block";
save();
}
function save(){
//send firebase data.
visitor["responded"] = true;
visitor["accomodation"] = accommodation;
var songInputs = document.getElementsByClassName("title");
var artistInputs = document.getElementsByClassName("artist");
var songs = [];
for(var i = 0; i < visitor.names.length; i++){
songs.push([songInputs[i].value, artistInputs[i].value]);
}
visitor["songs"] = songs;
var names = [];
for(var i = 0; i < visitor.names.length; i++){
var name = visitor.names[i].name;
var input = document.getElementById(name+" yes");
names.push({"name" : name, "coming": input.checked});
}
visitor.names = names;
visitor.message = document.getElementById("textbox-bummer").value;
visitor.accomodationMessage = document.getElementById("sharingroomwith").value;
console.log(visitor);
database.ref('attendees/' + visitorCode).set(visitor);
}
function changeSongs(trueOrFalse){
var songDiv = document.getElementById("song-request-input");
var songsAndArtists = songDiv.getElementsByTagName("input");
for(var i = 0; i < songsAndArtists.length; i++){
songsAndArtists[i].disabled = trueOrFalse;
}
}
function changeAccomodations(trueOrFalse){
document.getElementById("iWantCamping").disabled = trueOrFalse;
document.getElementById("iWantVenue").disabled = trueOrFalse;
document.getElementById("iWantHotel").disabled = trueOrFalse;
document.getElementById("iWantNothing").disabled = trueOrFalse;
document.getElementById("sharingroomwith").disabled = trueOrFalse;
}
function disableAll(){
changeSongs(true);
changeAccomodations(true);
}
function enableAll(){
changeSongs(false);
changeAccomodations(false);
}
function iWantHotel(){
accommodation = "hotel";
console.log("Hotel it is!");
changeAccomodations(true);
document.getElementById("sharingroomwith").disabled = false;
}
function iWantVenue(){
accommodation = "venue";
console.log("venue it is!");
changeAccomodations(true);
}
function iWantNothing(){
accommodation = "nothing";
console.log("nothing it is!");
changeAccomodations(true);
}
function iWantCamping() {
accommodation = "camping";
console.log("Camping it is!");
changeAccomodations(true);
}
function sorryMessage(){
closeModal("bummer-message");
openModal("coming-thanks");
save();
}
function checkAttendees() {
var listModal = document.getElementById("guest-responses");
var checkBoxes = listModal.getElementsByTagName("input");
var numberCheckboxes = checkBoxes.length;
var numberChecked = 0;
var hasYeses = false;
for (var i = 0; i < numberCheckboxes; i++) {
if (checkBoxes[i].checked) {
numberChecked++;
if (checkBoxes[i].value === "yes") {
hasYeses = true;
}
}
}
//All answered
if (numberChecked * 2 >= numberCheckboxes) {
console.log("Everybody yesnoed!");
closeModal("no-decision");
closeModal("bummer-message");
closeModal("still-curious");
closeModal("so-happy-response");
if (!hasYeses) {
console.log("No yeses");
openModal("bummer-message");
openModal("still-curious");
closeModal("no-decision");
}
else{
console.log("Yeses");
enableAll();
openModal("so-happy-response");
closeModal("no-decision");
}
}
else {
console.log("More to go!");
}
}
function generateSongList(names){
var details = document.getElementById("song-request-input");
for(var i = 1; i < names.length+1; i++){
var mainDiv = document.createElement("div");
mainDiv.setAttribute('class', "request"+i);
var artistInput = document.createElement("input");
artistInput.setAttribute('type', "text");
artistInput.setAttribute('value', "");
artistInput.setAttribute('placeholder', "artist");
artistInput.setAttribute('id', "artist"+i);
artistInput.setAttribute('class', "artist");
var songInput = document.createElement("input");
songInput.setAttribute('type', "text");
songInput.setAttribute('value', "");
songInput.setAttribute('placeholder', "title");
songInput.setAttribute('id', "title"+i);
songInput.setAttribute('class', "title");
mainDiv.appendChild(songInput);
mainDiv.appendChild(artistInput);
details.appendChild(mainDiv);
}
}
function generateAttendeesList(names){
var attendeesList = document.getElementById("guest-responses");
for(var i = 0; i < names.length; i++){
var mainDiv = document.createElement("div");
mainDiv.className = "switch-field";
var nameDiv = document.createElement("div");
nameDiv.className = "switch-title";
nameDiv.innerHTML = names[i].name;
var yesInput = document.createElement("input");
yesInput.setAttribute('type',"radio");
yesInput.setAttribute('name', names[i].name);
yesInput.setAttribute('id', names[i].name+" yes");
yesInput.setAttribute('value', "yes");
yesInput.setAttribute('onClick', "checkAttendees()");
yesInput.innerHTML = "yes";
var yesLabel = document.createElement("label");
yesLabel.setAttribute('for', names[i].name + " yes");
yesLabel.innerHTML = "yes";
var noInput = document.createElement("input");
noInput.setAttribute('type',"radio");
noInput.setAttribute('name', names[i].name);
noInput.setAttribute('id', names[i].name+" no");
noInput.setAttribute('value', "no");
noInput.setAttribute('onClick', "checkAttendees()");
noInput.innerHTML = "no";
var noLabel = document.createElement("label");
noLabel.setAttribute('for', names[i].name+" no");
noLabel.innerHTML = "no";
mainDiv.appendChild(nameDiv);
mainDiv.appendChild(yesInput);
mainDiv.appendChild(yesLabel);
mainDiv.appendChild(noInput);
mainDiv.appendChild(noLabel);
attendeesList.appendChild(mainDiv);
console.log("Done");
}
}
function checkAlreadyRegistered(){
if(visitor.responded !== null && visitor.responded === true) {
var alreadyRegistered = document.getElementById("alreadyRegistered");
var warning = document.createElement("p");
warning.innerHTML = "You have already R.S.V.P.'d</br>You can send a new one if you need to make an update before the deadline.";
alreadyRegistered.appendChild(warning);
}
}
firebase.database().ref('/attendees/' + visitorCode).once('value').then(function(snapshot) {
visitor = snapshot.val();
checkAlreadyRegistered();
generateAttendeesList(visitor.names);
generateSongList(visitor.names);
disableAll();
});
</script>
<script>
$(document).ready(function(){
$('.btn').click(function () {
$('.btn').not(this).removeClass("active");
$(this).addClass("active");
})
});
</script>
</head>
<body class='body'>
<!-- background video -->
<div class="fullscreen-bg">
<video loop muted autoplay poster='img-vid/eng-540p-low-img-bw.jpg'class="fullscreen-bg__video">
<source src="img-vid/eng-540p-low-blast.mp4" type="video/mp4">
</video>
</div>
<!-- modal post login -->
<div id="myNav" class="modal">
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
<!-- background of foreground modal :) -->
<div class="white_background">
<div id="alreadyRegistered"></div>
<div class="modal__header">
<a href=""><img class="logo" href="" src="img-vid/stamp-logo.png"></img></a>
</div>
<div class="modal__content">
<!-- capture guests' decision -->
<div class="greetings-section">
<div class="yay">
<h1>You're invited! Yay!</h1>
<p>Welcome to our wedding website</br>
Now it's time to R.S.V.P.</p>
<h2>June 30th, 2018</h2>
<p>Oldehove, The Netherlands</p>
<h3>Are you coming?</h3>
</div>
<div class="guest-responses">
<div id="guest-responses">
<!-- Generated Yes No list goes here -->
</div>
<div class="no-responses-yet">
<h3>Please continue until the bottom to send your R.S.V.P.</br>
We kindly ask you to respond by April 1, 2018</h3>
</div>
<div class="bummer">
<div id="bummer-message">
<div class="bummer-header">Bummer!
</div>
<div class="bummer-msg">Too bad you cant make it,
well miss you! You can still leave a
message for the guestbook!
</div>
<div class="textbox-bummer-container">
<textarea class="textbox-bummer" id="textbox-bummer" name="sharingroomwith" cols="40" rows="5"
placeholder=""
></textarea>
</div>
<button class="bummer-btn" onclick="sorryMessage()" value="Submit">send</button>
</div>
<div id="coming-thanks">
<div class="thats-sweet-header">That's sweet of you
</div>
<div class="thats-sweet-msg">Thanks again! And visit us soon!
</div>
</div>
</div>
<hr class="greetings-line-break"></hr>
<h4 id="no-decision">Below you'll find more info</h4>
<div id="so-happy-response" class="so-happy-response">
<h1>So happy you're coming!</h1>
<h2>below you'll find all the info you need</h2>
</div>
<div id="still-curious" class="still-curious">
<h1>If you're curious</h1>
<h2>you can still take a peek at our schedule</h2>
</div>
</div>
</div>
<!-- venue section -->
<div class="venue-section">
<div class="venue-header">Venue
<hr class="underline-venue"></hr></div>
<div class="venue-img"><img class="hayemaheerd-pic" src="img-vid/hayemaheerd.jpg"
alt="Hayema Heerd Barn"></div>
<div class="venue-name">Hayema Heerd</div>
<div class="venue-address">Jensemaweg 3</br>9883 TH Oldehove</br>The Netherlands
</div>
<div class="venue-description">Hayema Heerd is a traditional Dutch farm in the beautiful national
landscape called Middag Humsterland in the Groningen province. This former
livestock farm has been turned into a unique wedding venue with a campsite
and a homemade straw hotel with straw igloos, covered wagons, a straw castle
and a barn hostel.
<div class="venue-link"><a href="https://www.hayemaheerd.com" target="_blank">more info</a>
</div>
</div>
</div>
<!-- schedule section -->
<div class="schedule-section">
<div class="schedule-header">Schedule
<hr class="underline-schedule"></hr></div>
<div class="schedule-date">June 30th, 2018</div>
<div class="schedule-img"><img class="svg-schedule" src="img-vid/schedule.svg">
</div>
<div class="schedule-arrivaltime-notes">*Your arrival time depends on whether you have to check-in at
the venue, set up your tent or caravan and whether you would like to attend the tea ceremony.
</br></br>
**In a traditional Chinese marriage ceremony, the bride and groom serve their parents and elder
relatives tea. It is a devout way to show respect and gratitude to their family for all the years of
love and care. This process also symbolizes the joining together of the two families. For those that
are curious to see a tea ceremony (or Nikita in a Chinese dress), youre more than welcome to attend!
</div>
</div>
<!-- accomodation section -->
<div class="accomodation-section">
<div class="accomodation-header">Accomodation
<hr class="underline-accomodation"></hr>
</div>
<div class="accomodation-message">Since our venue is situated in quite a secluded area, we have prepared some
accommodation options for you. There is a big national event nearby during the weekend of our wedding and
because of that, hotel room availability is limited. Therefore we would like to ask you to share the rooms
with family or friends if possible.
</br></br>
Please let us know whether you would like to book any of the accommodations below before February 24th so we
can make sure nobody has to sleep between the cows ;).
</div>
<!-- camping option-->
<div class="accomodation-camp">
<img class="svg-camp" src="img-vid/vector-camp.svg" alt="tent logo">
<div class="camp-title">Camp at the venue
<hr class="underline-camp"></hr>
</div>
<div class="camp-msg">Bring your own tent, caravan or camper!
</div>
<div class="camp-details-container">
<div class="camp-details">
Facilities: Shared bathrooms</br>
Breakfast: Included</br>
Price: €16.00 / person / night
</div>
</div>
<div class="camp-link"><a href="https://www.hayemaheerd.com/farm-campsite/" target="_blank">more info</a>
</div>
<button class="btn" type="button" id="iWantCamping" onClick="iWantCamping()">I'm camping!</button>
</div>
<!-- book a bed on venue option-->
<div class="accomodation-bookbed">
<img class="svg-bookbed" src="img-vid/vector-bed.svg" alt="bed logo">
<div class="bookbed-title">Book a bed at the venue
<hr class="underline-bookbed"></hr>
</div>
<div class="bookbed-msg-container">
<div class="bookbed-msg">Go for a unique experience
and discover how comfortable a bed made of straw
can be. Dont worry, theres a comfortable
mattress pad on top!
</div>
</div>
<div class="bookbed-details-container">
<div class="bookbed-details">
Facilities: Shared bathrooms</br>
Breakfast: Included</br>
Price: €33.00 / person / night
</div>
</div>
<div class="bookbed-link"><a href="https://www.hayemaheerd.com/straw-hotel/" target="_blank">more info</a>
</div>
<button class="btn" id="iWantVenue" onClick="iWantVenue()" type="button">Book me a bed!</button>
</div>
<!-- book a hotel room option-->
<div class="accomodation-hotel">
<img class="svg-hotel" src="img-vid/vector-hotel.svg" alt="hotel logo">
<div class="hotel-title">Best Western Hotel in Aduard
<hr class="underline-hotel"></hr>
</div>
<div class="hotel-msg-container">
<div class="hotel-msg">We made reservations for the
Deluxe Rooms at the Best Western Hotel in Aduard.
Every room can host a maxiumum of 4 people. It is
possible to book a room for 2 nights (Friday 29th
and Saturday 30th).
</br>
</br>
The hotel is a 10 minute drive away from the venue.
</div>
</div>
<div class="hotel-details-container">
<div class="hotel-details">
Facilities: Private bathrooms</br>
Breakfast: Included</br>
Price/room/night:
</div>
</div>
<div class="hotel-prices-container">
<div class="hotel-prices">
1-2 people €76.00</br>
3 people €108.00</br>
4 people €140.00</br>
</div>
</div>
<div class="hotel-link"><a href="https://www.bestwestern.com/en_US/book/hotel-details.92722.html" target="_blank">more info</a>
</div>
<button class="btn" type="button" id="iWantHotel" onClick="iWantHotel()">Book me a room</button>
<div class="textbox-sharingroom-container">
<textarea id="sharingroomwith" class="textbox-sharingroom" name="sharingroomwith" cols="40" rows="5"
placeholder="Please tell us if you'd like only Saturday or both Friday and Saturday. And if you're sharing a room please tell us the names of your roomates..."
></textarea>
</div>
</div>
<div class="accomodation-nothanks">
<div class="or"><hr class="overline-or"></hr>OR
</div>
<button class="btn" id="iWantNothing" onClick="iWantNothing()" type="button">No thanks, I don't need accomodation</button>
</div>
</div>
<!-- meet the team secion -->
<div class="team-section">
<div class="team-header">Meet the team
<hr class="underline-team"></hr>
</div>
<div class="team-msg">We are very pleased to tell you that we have two “ceremoniemeesters”.
In The Netherlands, their role is comparable to the maid of honor. Theyve been super helpful
with our wedding planning and will help to make it an unforgettable day! Charlotte and Eline
will also be available for all of you in case you have any questions or want to gossip ;).
</div>
<div class="team-pics">
<div class="charlotte"><img src="img-vid/charlotte.png">
<h1>Charlotte</h1>
<div class="phone-container">
<img class="whatsapp" src="img-vid/whatsapp.png"><span>+31 62550 2779</span>
</div>
</div>
<div class="eline"><img src="img-vid/eline.png">
<h1>Eline</h1>
<div class="phone-container">
<img class="whatsapp" src="img-vid/whatsapp.png"><span>+31 62550 2779</span>
</div>
</div>
</div>
<div class="team-email">
<a href="mailto:n2ceremoniemeesters@gmail.com?Subject=&#9901;%20Nathan%20%26%20Nikita%27s%20Wedding%20&#9901;">Email: n2ceremoniemeesters@gmail.com</a>
</div>
</div>
<!-- song request section -->
<div class="song-request-section">
<div class="song-request-header">Song request
<hr class="underline-song"></hr>
</div>
<div class="song-request-msg">
We want everyone to enjoy the party and dance the night away.
What better way of doing that than to your favorite song?
</div>
<div id="song-request-input" class="song-request-input">
<!-- List of songs is generated here -->
</div>
</div>
<!-- wedding registry section -->
<div class="wedding-registry-section">
<div class="registry-header">Wedding registry
<hr class="underline-registry"></hr>
</div>
<div class="registry-msg">
We do not have a wedding registry because, besides
the fact that our tiny house is already full, and
the fact that you are coming to our wedding is a
priceless gift by itself!
</br>
</br>
If youre still planning on bringing a present: we
are making an unforgettable trip to a beautiful
honeymoon destination in November 2018, and the
Honeymoon Fund is always happy with new sponsors… ;).
</div>
</div>
<!-- closing section -->
<div class="closing-section">
<div class="closing-msg">
<hr class="linebreak-closing"></hr>
Please feel free to reach out to us if you have any questions. We are super excited to see you all in June, cant wait!
</br>
Lots of love,
</br>
Nathan & Nikita
</div>
<div class="closing-img-container">
<img class="closing-img" src="img-vid/closing-img.jpg"/>
</div>
</div>
</div>
<div class="modal__footer">
<div class="footer">
<button type="button" id="close-end-btn" onclick="saveAndCloseNav()">Send R.S.V.P.</button>
</div>
</div>
</div>
</div>
<div id="rsvpSent" class="confirmation-filter">
<div class="confirmation-content">
<p class="modal-message">Your R.S.V.P. has been sent!</p>
<button id="rsvp-done-btn" onclick="closeNav()">Done</button>
</div>
</div>
<script>
closeModal("bummer-message");
closeModal("coming-thanks");
closeModal("so-happy-response");
closeModal("still-curious");
// closeModal("no-decision");
function closeNav() {
document.getElementById("myNav").style.display = "none";
document.getElementById("rsvpSent").style.display = "none";
window.location.replace("/savethedate.html");
}
</script>
</body>
</html>