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.
137 lines
2.5 KiB
137 lines
2.5 KiB
<template>
|
|
<main>
|
|
<nav>
|
|
<button>home</button>
|
|
<button>links 'n stuff</button>
|
|
</nav>
|
|
<div class="test-links">
|
|
<nuxt-link to="/wrongo-and-peanut"> test 1 </nuxt-link>
|
|
<nuxt-link to="/rayray-and-becs"> test 2 </nuxt-link>
|
|
<nuxt-link to="/brimame"> test 3 </nuxt-link>
|
|
</div>
|
|
<!-- <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
|
|
class="img--bkg"
|
|
playsinline
|
|
autoplay
|
|
muted
|
|
loop
|
|
poster="polina.jpg"
|
|
id="bgvid"
|
|
>
|
|
<!-- <source src="polina.webm" type="video/webm"> -->
|
|
<source
|
|
:src="require(`@/assets/images/bkgs/${this.$route.params.code}.mp4`)"
|
|
type="video/mp4"
|
|
/>
|
|
</video>
|
|
</main>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data: () => ({
|
|
guests: {}
|
|
}),
|
|
async fetch () {
|
|
const res = await fetch(`https://api.airtable.com/v0/appR5dwqGUe1vBaa9/Guest?filterByFormula=(Code='${this.$route.params.code}')`, {
|
|
method: 'GET',
|
|
headers: {
|
|
'Content-Type': 'application/x-www-form-urlencoded',
|
|
Authorization: 'Bearer key8ZVBxVZJL2Wp7y'
|
|
}
|
|
})
|
|
|
|
const json = await res.json()
|
|
console.log(json)
|
|
this.guests = { ...await json && json.records && json.records[0] && json.records[0].fields }
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
html {
|
|
font-size: 2vmin;
|
|
}
|
|
|
|
body {
|
|
margin: 0;
|
|
}
|
|
|
|
main {
|
|
width: 100vw;
|
|
height: 100vh;
|
|
background: tan;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.img--bkg {
|
|
width: 100vw;
|
|
object-fit: cover;
|
|
height: 100vh;
|
|
}
|
|
|
|
.names {
|
|
position: fixed;
|
|
padding: 2rem;
|
|
aspect-ratio: 1;
|
|
background: white;
|
|
color: blue;
|
|
font-size: 2rem;
|
|
border-radius: 999px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.names::before {
|
|
content: "";
|
|
border: 5px dotted blue;
|
|
position: absolute;
|
|
border-radius: 999px;
|
|
width: 90%;
|
|
aspect-ratio: 1;
|
|
}
|
|
|
|
.names::after {
|
|
content: "";
|
|
border: 5px dashed blue;
|
|
position: absolute;
|
|
border-radius: 999px;
|
|
width: 80%;
|
|
aspect-ratio: 1;
|
|
}
|
|
|
|
.test-links {
|
|
position: fixed;
|
|
top: 1rem;
|
|
left: 1rem;
|
|
}
|
|
|
|
nav {
|
|
/* sex */
|
|
position: fixed;
|
|
right: 2rem;
|
|
top: 2rem;
|
|
display: flex;
|
|
gap: 1rem;
|
|
}
|
|
|
|
button {
|
|
color: white;
|
|
background: teal;
|
|
padding: 0.5rem 1rem;
|
|
font-size: 1rem;
|
|
border-radius: 999px;
|
|
border: 0;
|
|
}
|
|
</style>
|