Files
savethedate/rsvp-dutch.html
2018-04-03 21:10:42 +02:00

615 lines
26 KiB
HTML
Raw Permalink 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);
document.getElementById("sharingroomwith").disabled = true;
}
function iWantNothing(){
accommodation = "nothing";
console.log("nothing it is!");
// changeAccomodations(true);
document.getElementById("sharingroomwith").disabled = true;
}
function iWantCamping() {
accommodation = "camping";
console.log("Camping it is!");
// changeAccomodations(true);
document.getElementById("sharingroomwith").disabled = 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 = "Je hebt al gerageerd!</br>Je kunt je reactie nog wijzigen tot 10 mei 2018.";
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 ontouchstart="" class='body'>
<!-- background video -->
<div class="fullscreen-bg">
<video loop muted autoplay poster='img-vid/eng-540p-low-blast.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="scroll" class="arrow bounce"><img class="down-arrow" src="img-vid/down-arrow.svg"></div>
<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>Je bent uitgenodigd! Yay!</h1>
<p>Welkom op onze website</p>
<h2>30 juni 2018</h2>
<p>Oldehove, Nederland</p>
<h3>Ben je erbij?</h3>
</div>
<div class="guest-responses">
<div id="guest-responses">
<!-- Generated Yes No list goes here -->
</div>
<div class="no-responses-yet">
<h3>Scroll naar beneden voor het invullen van je reactie, onderaan de pagina kun je je reactie verzenden</br>
We vragen je vriendelijk om te reageren vóór 10 mei 2018</h3>
</div>
<div class="bummer">
<div id="bummer-message">
<div class="bummer-header">Bummer!
</div>
<div class="bummer-msg">Jammer dat je er niet bij kan zijn,
we zullen je missen! Je kunt hieronder een berichtje achterlaten
voor het gastenboek!
</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">Dat is lief van je!
</div>
<div class="thats-sweet-msg">Dankjewel!
</div>
</div>
</div>
<hr class="greetings-line-break"></hr>
<h4 id="no-decision">Hieronder vind je alle informatie</h4>
<div id="so-happy-response" class="so-happy-response">
<h1>Super leuk dat je komt!</h1>
<h2>Hieronder vind je alle informatie</h2>
</div>
<div id="still-curious" class="still-curious">
<h1>Toch nieuwsgierig?</h1>
<h2>Je kunt hieronder het programma bekijken</h2>
</div>
</div>
</div>
<!-- venue section -->
<div class="venue-section">
<div class="venue-header">Locatie
<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>Nederland
</div>
<div class="venue-description">Hayema Heerd is een traditionele boerderij in het prachtige nationale
landschap Middag Humsterland in de provincie Groningen. Deze voormalige veehouderij is omgetoverd
tot een unieke feestlocatie met een camping en een stro-hotel met stro-iglos, een stro-kasteel,
huifkarren en een hostel in de oude schuur.
<div class="getting-there">Hayema Heerd is het best bereikbaar met de auto en er is voldoende
parkeerplek. Een alternatief is de trein naar station Groningen gevolgd door de bus naar bushalte
Jensemaweg. Vanaf de bushalte is het 9 minuten lopen naar Hayema Heerd. Een taxirit vanaf station
Groningen duurt ongeveer 25 minuten.</div>
<div class="venue-link"><a href="https://www.hayemaheerd.com" target="_blank">Ga naar de website van Hayema Heerd</a>
</div>
</div>
</div>
<!-- schedule section -->
<div class="schedule-section">
<div class="schedule-header">Dagprogramma
<hr class="underline-schedule"></hr></div>
<div class="schedule-date">30 juni 2018</div>
<div class="schedule-img"><img class="png-schedule" src="img-vid/schedule.png">
</div>
<div class="schedule-arrivaltime-notes">*Je aankomsttijd hangt af van of je moet inchecken bij Hayema Heerd, je een tent,
caravan of camper moet neerzetten en of je de theeceremonie wil bijwonen.
</br></br>
**Bij een traditionele Chinese huwelijksceremonie serveren de bruid en bruidegom thee aan hun ouders en de oudere
familieleden. Op deze manier tonen zij respect en dankbaarheid voor alle jaren van liefde en zorg. De theeceremonie
symboliseert ook het samenkomen van de twee families. Voor iedereen die het leuk vindt om een theeceremonie te zien
(of Nikita in een Chinese jurk): jullie zijn meer dan welkom om hierbij aanwezig te zijn!
</div>
</div>
<!-- accomodation section -->
<div class="accomodation-section">
<div class="accomodation-header">Accomodatie
<hr class="underline-accomodation"></hr>
</div>
<div class="accomodation-message">Omdat Hayema Heerd zich een eindje van de bewoonde wereld bevindt, vind je hieronder
een aantal opties om een overnachting te boeken. Omdat de TT in Assen in hetzelfde weekend plaatsvindt, is er een
beperkt aantal hotelkamers beschikbaar. Om die reden vragen we je om hotelkamers indien mogelijk te delen met familie
of vrienden, zodat zoveel mogelijk gasten hiervan gebruik kunnen maken. Op de locatie zijn de strobedden beschikbaar
gesteld aan de buitenlandse gasten, maar op de camping is plek genoeg!
</br></br>
We vragen jullie om ons vóór 10 mei 2018 te laten weten of je een overnachting wil boeken, zodat we zeker weten dat
niemand tussen de koeien hoeft te slapen ;).
</div>
<!-- camping option-->
<div class="accomodation-camp">
<img class="svg-camp" src="img-vid/vector-camp.svg" alt="tent logo">
<div class="camp-title">Kamperen op de locatie
<hr class="underline-camp"></hr>
</div>
<div class="camp-msg">Kom met je eigen tent, caravan of camper!
</div>
<div class="camp-details-container">
<div class="camp-details">
Faciliteiten: Gedeeld sanitair</br>
Inclusief: Ontbijt</br>
Kosten: €16.00 / persoon / nacht
</div>
</div>
<div class="camp-link"><a href="https://www.hayemaheerd.com/farm-campsite/" target="_blank">meer informatie</a>
</div>
<button class="btn" type="button" id="iWantCamping" onClick="iWantCamping()">Ik wil kamperen!</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 hebben een aantal Deluxe kamers gereserveerd in
het Best Western Hotel in Aduard. Elke kamer is geschikt voor maximaal
4 personen. Het is mogelijk de hotelkamers te boeken voor 1 of 2 nachten
(vrijdag 29 en zaterdag 30 juni).
</br>
</br>
Het hotel bevindt zich op 10 minuten rijden van de locatie.
</div>
</div>
<div class="hotel-details-container">
<div class="hotel-details">
Faciliteiten: Eigen badkamer</br>
Inclusief: Ontbijt</br>
Prijs/kamer/nacht:
</div>
</div>
<div class="hotel-prices-container">
<div class="hotel-prices">
1-2 personen €76.00</br>
3 personen €108.00</br>
4 personen €140.00</br>
</div>
</div>
<div class="hotel-link"><a href="https://www.bestwestern.com/en_US/book/hotel-details.92722.html" target="_blank">meer informatie</a>
</div>
<button class="btn" type="button" id="iWantHotel" onClick="iWantHotel()">Boek een hotelkamer</button>
<div class="textbox-sharingroom-container">
<textarea id="sharingroomwith" class="textbox-sharingroom" name="sharingroomwith" cols="40" rows="5"
placeholder="Laat ons weten of je de hotelkamer voor 1 nacht (zaterdag) of 2 nachten (vrijdag en zaterdag) wil boeken. We horen ook graag met wie je de kamer deelt, alvast bedankt!"
></textarea>
</div>
</div>
<div class="accomodation-nothanks">
<div class="or"><hr class="overline-or"></hr>OF
</div>
<button class="btn" id="iWantNothing" onClick="iWantNothing()" type="button">Ik heb geen accommodatie nodig</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 stellen jullie graag voor aan onze ceremoniemeesters. Charlotte en Eline hebben ons super
goed geholpen met de planning en organisatie; mede dankzij hen wordt het een fantastische dag! Ze zijn op onderstaande
e-mailadres en telefoonnummers beschikbaar voor vragen of voor het geval jullie over ons willen roddelen ;).
</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 62348 7020</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">Vraag je favoriete liedje aan!
<hr class="underline-song"></hr>
</div>
<div class="song-request-msg">
We willen natuurlijk dat iedereen volop geniet van het feest en
het dak eraf danst. Geen betere manier om dat te doen dan op je
favoriete nummer… Vraag hem hier vast aan!
</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">Cadeautjes
<hr class="underline-registry"></hr>
</div>
<div class="registry-msg">
We hebben geen cadeauwensen, omdat er niets meer bij kan in ons
kleine huisje. En belangrijker nog: het feit dat je aanwezig bent
is op zichzelf al een onbetaalbaar cadeau!
</br>
</br>
Mocht je toch graag iets willen geven; we maken eind 2018 een
onvergetelijke reis naar een nog onbekende bestemming en het
Fonds Huwelijksreizen is <em>altijd</em> blij met nieuwe sponsors… ;)
</div>
</div>
<!-- closing section -->
<div class="closing-section">
<div class="closing-msg">
<hr class="linebreak-closing"></hr>
Bel, app, mail, fax of sms ons gerust als je vragen hebt. We hebben
er mega veel zin in en kijken uit naar een onvergetelijk feest met jullie!
</br>
Veel liefs,
</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()">Verstuur reactie</button>
</div>
</div>
</div>
</div>
<div id="rsvpSent" class="confirmation-filter">
<div class="confirmation-content">
<p class="modal-message">Je reactie is verzonden!</p>
<button id="rsvp-done-btn" onclick="closeNav()">Sluiten</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");
}
function handleScroll(event) {
if (event.target.scrollTop > 100) {
// Remove arrow here
console.log('Remove arrow');
$('#scroll').fadeOut();
// Remove the event listener to not flood memory
$('.white_background').off('scroll', handleScroll);
}
}
$(document).ready(function(){
$('.white_background').on('scroll', handleScroll);
});
</script>
</body>
</html>