You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
671 lines
16 KiB
671 lines
16 KiB
<template>
|
|
<main>
|
|
<nav v-if="guests">
|
|
<img class="mark" :src="require(`@/assets/images/si_mark.svg`)" alt="">
|
|
<button
|
|
v-if="guests && guests.fields && guests.fields.Language"
|
|
class="btn btn--header"
|
|
@click="openPopup"
|
|
>
|
|
<span style="transform: scaleX(-1);">❧</span>
|
|
{{ guests.fields.Language == "en" ? "click here" : "klik hier" }}
|
|
<span>❧</span>
|
|
</button>
|
|
</nav>
|
|
<!-- <pre>
|
|
{{ guests }}
|
|
</pre> -->
|
|
<!-- <ul class="test-links">
|
|
<li v-for="guest in allGuests" :key="guest.code">
|
|
<nuxt-link :to="'/' + guest.code">{{
|
|
guest.names.join(" & ")
|
|
}}</nuxt-link>
|
|
</li>
|
|
</ul> -->
|
|
<!-- <div class="names">{{ guests.Names }}</div> -->
|
|
<!-- <img
|
|
class="img--bkg"
|
|
:src="require(`@/assets/images/bkgs/${this.$route.params.code}.gif`)"
|
|
alt="wrongo-and-peanut"
|
|
/> -->
|
|
<video
|
|
v-if="!!guests"
|
|
class="img--bkg"
|
|
playsinline
|
|
autoplay
|
|
loop
|
|
muted
|
|
id="bgvid"
|
|
:poster="require(`@/assets/images/bkgs/poster.png`)"
|
|
>
|
|
<!-- :poster="require(`@/assets/images/bkgs/poster.png`)" -->
|
|
<!-- <source src="polina.webm" type="video/webm"> -->
|
|
<source
|
|
v-if="!!guests"
|
|
:src="require(`@/assets/images/bkgs/${this.$route.params.code}.mp4`)"
|
|
type="video/mp4"
|
|
/>
|
|
</video>
|
|
|
|
<!-- :src="require(`@/assets/images/bkgs/${(guests && guests.fields && guests.fields.Code) ? guests.fields.Code + '.mp4' : 'pim.mp4'}`)" -->
|
|
|
|
<div class="empty" v-if="!guests">
|
|
What's the password?
|
|
</div>
|
|
|
|
<div v-if="isPopupVisible && this.$route.params.code" class="popup-wrapper">
|
|
<div class="popup">
|
|
<button class="x" @click="openPopup">
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
class="icon icon-tabler icon-tabler-x"
|
|
width="40"
|
|
height="40"
|
|
viewBox="0 0 24 24"
|
|
stroke-width="3"
|
|
stroke="var(--lightblue)"
|
|
fill="none"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
>
|
|
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
|
|
<line x1="18" y1="6" x2="6" y2="18" />
|
|
<line x1="6" y1="6" x2="18" y2="18" />
|
|
</svg>
|
|
</button>
|
|
<h1
|
|
v-if="
|
|
guests &&
|
|
guests.fields &&
|
|
guests.fields.Language &&
|
|
guests.fields.Language === 'en'
|
|
"
|
|
>
|
|
At long last, we have a date!
|
|
</h1>
|
|
<div
|
|
v-if="
|
|
guests &&
|
|
guests.fields &&
|
|
guests.fields.Language &&
|
|
guests.fields.Language === 'en'
|
|
"
|
|
>
|
|
<p>
|
|
<strong>It took a while, but we eventually decided to cross our fingers and
|
|
plan a transatlantic wedding.</strong>
|
|
</p>
|
|
<p>
|
|
My fellow Americans, <br><br>The Netherlands is on the other
|
|
side of the world, and air travel is no walk-in-the-park these days.
|
|
Nonetheless: you're reading this because you're extremely important to
|
|
me, and we would LOVE to share this beautiful little country with you, if only for a few days!
|
|
<br><br>
|
|
-S
|
|
</p>
|
|
<p>
|
|
Mark your calendars: <em>August 18th, 2022</em>. Stay tuned for lots more details.
|
|
</p>
|
|
</div>
|
|
<h1
|
|
v-if="
|
|
guests &&
|
|
guests.fields &&
|
|
guests.fields.Language &&
|
|
guests.fields.Language !== 'en'
|
|
"
|
|
>
|
|
Wij gaan de liefde vieren
|
|
</h1>
|
|
<div
|
|
v-if="
|
|
guests &&
|
|
guests.fields &&
|
|
guests.fields.Language &&
|
|
guests.fields.Language !== 'en'
|
|
"
|
|
>
|
|
<p
|
|
v-if="
|
|
guests &&
|
|
guests.fields &&
|
|
guests.fields.Names &&
|
|
guests.fields.Names.length > 1
|
|
"
|
|
>
|
|
Kunnen we met jullie proosten op onze bruiloft op 18 augustus 2022?
|
|
</p>
|
|
<p
|
|
v-if="
|
|
guests &&
|
|
guests.fields &&
|
|
guests.fields.Names &&
|
|
guests.fields.Names.length === 1
|
|
"
|
|
>
|
|
Kunnen we met jou proosten op onze bruiloft op 18 augustus 2022?
|
|
</p>
|
|
</div>
|
|
<div class="buttons">
|
|
<button
|
|
v-if="guests && guests.fields && guests.fields.Language"
|
|
@click="sayYes"
|
|
:class="[
|
|
'btn',
|
|
'btn--popup',
|
|
'btn--yes',
|
|
{ 'btn--selected': guests.fields.Status === 'Maybe' },
|
|
]"
|
|
>
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
class="icon icon-tabler icon-tabler-check"
|
|
width="40"
|
|
height="40"
|
|
viewBox="0 0 24 24"
|
|
stroke-width="3"
|
|
stroke="#ffffff"
|
|
fill="none"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
>
|
|
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
|
|
<path d="M5 12l5 5l10 -10" />
|
|
</svg>
|
|
{{ yesText(guests.fields.Language, guests.fields.Names.length) }}
|
|
</button>
|
|
<button
|
|
v-if="guests && guests.fields && guests.fields.Language"
|
|
@click="sayNo"
|
|
:class="[
|
|
'btn',
|
|
'btn--popup',
|
|
'btn--no',
|
|
{ 'btn--selected': guests.fields.Status === 'No' },
|
|
]"
|
|
>
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
class="icon icon-tabler icon-tabler-x"
|
|
width="40"
|
|
height="40"
|
|
viewBox="0 0 24 24"
|
|
stroke-width="3"
|
|
stroke="#ffffff"
|
|
fill="none"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
>
|
|
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
|
|
<line x1="18" y1="6" x2="6" y2="18" />
|
|
<line x1="6" y1="6" x2="18" y2="18" />
|
|
</svg>
|
|
{{ noText(guests.fields.Language, guests.fields.Names.length) }}
|
|
</button>
|
|
</div>
|
|
<small
|
|
v-if="
|
|
guests &&
|
|
guests.fields &&
|
|
guests.fields.Language &&
|
|
guests.fields.Language === 'en'
|
|
"> ~ official invitation to follow ~ </small>
|
|
<small
|
|
v-if="
|
|
guests &&
|
|
guests.fields &&
|
|
guests.fields.Language &&
|
|
guests.fields.Language !== 'en'
|
|
"> ~ de officiële uitnodiging volgt later ~ </small>
|
|
<img class="mark" :src="require(`@/assets/images/si_mark2.svg`)" alt="">
|
|
</div>
|
|
</div>
|
|
</main>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data: () => ({
|
|
guests: null,
|
|
allGuests: [],
|
|
isPopupVisible: false,
|
|
fetchFields: [
|
|
'Names',
|
|
'Language',
|
|
'Status',
|
|
'Code'
|
|
]
|
|
}),
|
|
async fetch () {
|
|
if (this.$route.params.code) {
|
|
const res = await fetch(`https://api.airtable.com/v0/appR5dwqGUe1vBaa9/Guest?filterByFormula=(Code='${this.$route.params.code}')${this.fetchFieldsString}`, {
|
|
method: 'GET',
|
|
headers: {
|
|
'Content-Type': 'application/x-www-form-urlencoded',
|
|
Authorization: 'Bearer key8ZVBxVZJL2Wp7y'
|
|
}
|
|
})
|
|
|
|
const json = await res.json()
|
|
|
|
if (await json.records[0]) {
|
|
this.guests = { ...await json.records[0] }
|
|
console.log(this.guests)
|
|
}
|
|
}
|
|
|
|
// const res2 = await fetch('https://api.airtable.com/v0/appR5dwqGUe1vBaa9/Guest?filterByFormula=(IsActive=1)&sort[0][field]=Code&sort[0][direction]=asc', {
|
|
// method: 'GET',
|
|
// headers: {
|
|
// 'Content-Type': 'application/x-www-form-urlencoded',
|
|
// Authorization: 'Bearer key8ZVBxVZJL2Wp7y'
|
|
// }
|
|
// })
|
|
|
|
// const json2 = await res2.json()
|
|
// console.log(json2)
|
|
// const guestData = [...await json2 && json2.records]
|
|
// this.allGuests = await guestData.map((guest) => {
|
|
// return {
|
|
// code: guest.fields.Code,
|
|
// names: guest.fields.Names
|
|
// }
|
|
// })
|
|
},
|
|
methods: {
|
|
openPopup () {
|
|
this.isPopupVisible = !this.isPopupVisible
|
|
},
|
|
yesText (lang, count) {
|
|
if (lang === 'en') {
|
|
return (count > 1 ? 'We' : 'I') + ' will try to make it! 🥳'
|
|
} else {
|
|
return (count > 1 ? 'Wij zijn ' : 'Ik ben') + ' er (waarschijnlijk) bij! 🥳'
|
|
}
|
|
},
|
|
noText (lang, count) {
|
|
if (lang === 'en') {
|
|
return 'Sorry, ' + (count > 1 ? 'we' : 'I') + ' definitely can\'t make it. 😞'
|
|
} else {
|
|
return 'Helaas, ' + (count > 1 ? 'wij zijn' : 'ik ben') + ' er zeker weten niet bij. 😞'
|
|
}
|
|
},
|
|
async sayYes () {
|
|
const updates =
|
|
{
|
|
fields: {
|
|
Status: 'Maybe'
|
|
}
|
|
}
|
|
|
|
const res = await fetch(`https://api.airtable.com/v0/appR5dwqGUe1vBaa9/Guest/${this.guests.id}`, {
|
|
method: 'PATCH',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
Authorization: 'Bearer key8ZVBxVZJL2Wp7y'
|
|
},
|
|
body: JSON.stringify(updates)
|
|
})
|
|
|
|
const json = await res.json()
|
|
this.guests = { ...await json }
|
|
},
|
|
async sayNo () {
|
|
const updates =
|
|
{
|
|
fields: {
|
|
Status: 'No'
|
|
}
|
|
}
|
|
const res = await fetch(`https://api.airtable.com/v0/appR5dwqGUe1vBaa9/Guest/${this.guests.id}`, {
|
|
method: 'PATCH',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
Authorization: 'Bearer key8ZVBxVZJL2Wp7y'
|
|
},
|
|
body: JSON.stringify(updates)
|
|
})
|
|
|
|
const json = await res.json()
|
|
this.guests = { ...await json }
|
|
}
|
|
},
|
|
computed: {
|
|
fetchFieldsString () {
|
|
const vm = this
|
|
const array = vm.fetchFields.map((field) => {
|
|
return '&fields[]=' + field
|
|
})
|
|
return array.join('')
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
html {
|
|
font-size: max(2vmin, 12pt);
|
|
font-family: "Times New Roman", Times, serif;
|
|
color: var(--blue);
|
|
}
|
|
|
|
:root {
|
|
--b1: #648bc8;
|
|
--b2: #5b6ba6;
|
|
--blue: var(--b2);
|
|
--lightblue: #b2c6eb;
|
|
--bkg: #dfebfe;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: "kingthings_petrockregular";
|
|
src: url("~assets/fonts/Kingthings_Petrock-webfont.woff") format("woff");
|
|
font-weight: normal;
|
|
font-style: normal;
|
|
}
|
|
|
|
body {
|
|
margin: 0;
|
|
}
|
|
|
|
main {
|
|
width: 100vw;
|
|
height: 100vh;
|
|
background: var(--bkg);
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
h1 {
|
|
font-size: 2.5rem;
|
|
font-family: "kingthings_petrockregular", "Times New Roman", Times, serif;
|
|
margin: 1rem 0 0 0;
|
|
text-align: center;
|
|
}
|
|
|
|
p {
|
|
font-size: 1rem;
|
|
}
|
|
|
|
.img--bkg {
|
|
width: 100vw;
|
|
object-fit: cover;
|
|
height: 100vh;
|
|
}
|
|
|
|
.empty {
|
|
width: 100vw;
|
|
height: 100vh;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background: var(--bkg);
|
|
color: var(--blue);
|
|
position: absolute;
|
|
}
|
|
|
|
.names {
|
|
position: fixed;
|
|
padding: 2rem;
|
|
aspect-ratio: 1;
|
|
background: var(--bkg);
|
|
color: var(--blue);
|
|
font-size: 2rem;
|
|
border-radius: 999px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.names::before {
|
|
content: "";
|
|
border: 5px dotted var(--blue);
|
|
position: absolute;
|
|
border-radius: 999px;
|
|
width: 90%;
|
|
aspect-ratio: 1;
|
|
}
|
|
|
|
.names::after {
|
|
content: "";
|
|
border: 5px dashed var(--blue);
|
|
position: absolute;
|
|
border-radius: 999px;
|
|
width: 80%;
|
|
aspect-ratio: 1;
|
|
}
|
|
|
|
.test-links {
|
|
position: fixed;
|
|
top: 1rem;
|
|
left: 1rem;
|
|
z-index: 2;
|
|
}
|
|
|
|
nav {
|
|
position: fixed;
|
|
left: 2rem;
|
|
right: 2rem;
|
|
top: 2rem;
|
|
display: flex;
|
|
gap: 1rem;
|
|
z-index: 2;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.popup-wrapper {
|
|
position: fixed;
|
|
z-index: 2;
|
|
width: 100vw;
|
|
height: 100vh;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: start;
|
|
overflow-y: auto;
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
.popup-wrapper::after {
|
|
content: "";
|
|
position: absolute;
|
|
z-index: 3;
|
|
width: calc(100vw + 20px);
|
|
height: calc(100vh + 20px);
|
|
backdrop-filter: blur(10px);
|
|
pointer-events: none;
|
|
}
|
|
|
|
.popup {
|
|
background: linear-gradient(to right bottom, var(--bkg), var(--lightblue));
|
|
border-radius: 0.5rem;
|
|
position: relative;
|
|
padding: 1rem 3rem 3rem 3rem;
|
|
border: 1.5px solid var(--blue);
|
|
z-index: 4;
|
|
display: flex;
|
|
flex-direction: column;
|
|
max-width: 60ch;
|
|
align-items: center;
|
|
margin-top: 10vh;
|
|
}
|
|
|
|
small {
|
|
font-size: 1rem;
|
|
}
|
|
|
|
.popup::before {
|
|
content: "";
|
|
position: absolute;
|
|
border-radius: 0.5rem;
|
|
border: 2px dotted var(--blue);
|
|
top: calc(0.2em);
|
|
left: 0.2em;
|
|
bottom: calc(0.2em);
|
|
right: 0.2em;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.btn--header {
|
|
background: linear-gradient(to right bottom, var(--bkg), var(--lightblue));
|
|
color: var(--blue);
|
|
padding: 0.5rem 1rem;
|
|
font-size: 1.5rem;
|
|
border-radius: 0.2em 1em 0.2em 1em;
|
|
font-family: "kingthings_petrockregular", "Times New Roman", Times, serif;
|
|
font-weight: 800;
|
|
border: 1.5px solid var(--blue);
|
|
transition: all 0.3s;
|
|
cursor: pointer;
|
|
position: relative;
|
|
text-transform: capitalize;
|
|
line-height: 1.4;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.25em;
|
|
}
|
|
|
|
.btn--header span {
|
|
font-size: 1.5rem;
|
|
font-family: 'Times New Roman', Times, serif;
|
|
}
|
|
|
|
.btn--header:hover {
|
|
background: linear-gradient(to right bottom, var(--bkg), var(--blue));
|
|
}
|
|
|
|
.btn--header::before {
|
|
content: "";
|
|
position: absolute;
|
|
border-radius: 0.2em 0.9em 0.2em 0.9em;
|
|
border: 2px dotted var(--blue);
|
|
top: calc(0.2em);
|
|
left: 0.2em;
|
|
bottom: calc(0.2em);
|
|
right: 0.2em;
|
|
}
|
|
|
|
.buttons {
|
|
margin: 2rem 0 2rem 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: stretch;
|
|
gap: 1rem;
|
|
}
|
|
|
|
/* .btn--popup {
|
|
padding: 0.5em 1em;
|
|
font-size: 1.5rem;
|
|
border-radius: 999rem;
|
|
border: none;
|
|
color: var(--bkg);
|
|
background: linear-gradient(to right bottom, var(--b1), var(--b2));
|
|
display: flex;
|
|
align-items: center;
|
|
font-family: "kingthings_petrockregular", "Times New Roman", Times, serif;
|
|
line-height: 1;
|
|
cursor: pointer;
|
|
} */
|
|
|
|
.btn--popup {
|
|
padding: 0.5em 1em;
|
|
font-size: 1.5rem;
|
|
border-radius: 999rem;
|
|
border: none;
|
|
color: var(--bkg);
|
|
background: linear-gradient(to right bottom, var(--b1), var(--b2));
|
|
display: flex;
|
|
align-items: center;
|
|
font-family: "kingthings_petrockregular", "Times New Roman", Times, serif;
|
|
line-height: 1;
|
|
cursor: pointer;
|
|
gap: 1rem;
|
|
text-align: left;
|
|
}
|
|
|
|
.btn--popup svg {
|
|
height: 2rem;
|
|
width: 2rem;
|
|
}
|
|
|
|
.btn--popup span:first-child {
|
|
display: inline-block;
|
|
margin-right: 0.8em;
|
|
}
|
|
|
|
.btn--popup span:last-child {
|
|
display: inline-block;
|
|
margin-left: 0.8em;
|
|
}
|
|
|
|
.btn--yes:hover {
|
|
background: green;
|
|
}
|
|
|
|
.btn--no:hover {
|
|
background: darkred;
|
|
}
|
|
|
|
.btn--selected.btn--yes {
|
|
background: green;
|
|
}
|
|
|
|
.btn--selected.btn--no {
|
|
background: darkred;
|
|
}
|
|
|
|
.x {
|
|
background: transparent;
|
|
border: 0;
|
|
color: var(--b1);
|
|
font-size: 2rem;
|
|
align-self: flex-end;
|
|
margin-right: -1.5rem;
|
|
transition: all 0.2s;
|
|
line-height: 0;
|
|
border-radius: 999px;
|
|
}
|
|
|
|
.x:hover {
|
|
color: var(--b2);
|
|
background: var(--b1);
|
|
}
|
|
|
|
ul {
|
|
display: flex;
|
|
gap: 0.25rem;
|
|
flex-flow: column wrap;
|
|
height: 90vh;
|
|
}
|
|
|
|
li {
|
|
display: inline-block;
|
|
list-style-type: none;
|
|
}
|
|
|
|
li a {
|
|
background: var(--bkg);
|
|
color: var(--blue);
|
|
padding: 0.25em 1em;
|
|
border-radius: 999px;
|
|
border: 0;
|
|
display: inline-block;
|
|
font-size: 0.75rem;
|
|
line-height: 1;
|
|
}
|
|
|
|
.mark {
|
|
height: 3rem;
|
|
width: 3rem;
|
|
opacity: 0.5;
|
|
}
|
|
|
|
.popup .mark {
|
|
margin-top: 2rem;
|
|
opacity: 1;
|
|
}
|
|
</style>
|