collin/collinenlucy.nl
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Adding frontend for wedding info and rsvping

Browse source
This commit is contained in:
collin 2025-06-30 12:37:32 +02:00
parent 0f84e98c93
commit 6a22668735
No known key found for this signature in database
3 changed files with 197 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

48
client/index.html Normal file
View file

@ -0,0 +1,48 @@
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1 class="title fontXL textCenter backgroundLightGreen colorWhite">Collin and Lucy's Wedding</h1>
<div class="contents fontM">
<div>
<h2 class="textLeft fontL colorLightGreen">When?</h2>
<p>Saturday 16th of May 2026.</p>
<br/>
<h3 class="colorLightGreen fontM">Agenda</h3>
<ul>
<li>14:30 - Guests arrive</li>
<li>15:00 - Ceremony</li>
<li>15:30 - Reception</li>
<li>18:30 - Dinner</li>
</ul>
<br/>
<h2 class="textLeft colorLightGreen fontL">Where?</h2>
<a href="https://www.broekerhuis.nl/">
<p>
Het Broeker Huis <br/>
Leeteinde 16 <br/>
1151AK Broek in Waterland
</p>
</a>
<br/>
<iframe width="425" height="350" src="https://www.openstreetmap.org/export/embed.html?bbox=4.991877973079682%2C52.436195297048144%2C4.994031786918641%2C52.43801523045145&amp;layer=mapnik&amp;marker=52.43710609072568%2C4.992956221103668" style="border: 1px solid black"></iframe><br/>
<a href="https://www.openstreetmap.org/node/2869212621"><h5 class="fontS">View</h5></a>
</div>
</div>
<div class="rsvpButton textCenter backgroundLightGreen hidden">
<p class="colorBlack">
R <br/>
S <br/>
V <br/>
P <br/>
</p>
</div>
<script src="rsvp.js"></script>
</body>
</html>

30
client/rsvp.js Normal file
View file

@ -0,0 +1,30 @@
const COOKIE_NAME = 'hasRsvped'
function hasRsvped() {
const cookies = Object.fromEntries(
document.cookie
.split(';')
.map(x => x.trim().split('='))
)
return cookies[COOKIE_NAME] === 'true'
}
function persistRsvp(hasRsvped = true) {
document.cookie = `${COOKIE_NAME}=${String(hasRsvped)}; path=/`
console.log(document.cookie);
}
function rsvpButtonClicked() {
console.log('here')
persistRsvp(true)
}
window.onload = function () {
if (!hasRsvped()) {
const rsvpButton = document.querySelector('.rsvpButton')
rsvpButton.classList.remove('hidden')
rsvpButton.onclick = rsvpButtonClicked
}
}

119
client/style.css Normal file
View file

@ -0,0 +1,119 @@
/* reset annoying shit */
* {
padding: 0;
margin: 0;
}
a {
text-decoration: underline;
}
a:visited {
color: inherit;
}
ul {
list-style: none;
}
html {
height: 100%;
width: 100%;
}
body {
height: auto;
min-height: 100%;
width: auto;
display: block;
}
/* #region reusable */
.hidden {
visibility: hidden;
}
.textLeft {
text-align: left;
}
.textCenter {
text-align: center;
}
.textRight {
text-align: right;
}
.colorWhite {
color: #ffffff;
}
.colorBlack {
color: #000000;
}
.colorLightGreen {
color: #8cad87;
}
.backgroundWhite {
background-color: #ffffff;
}
.backgroundBlack {
background-color: #000000;
}
.backgroundLightGreen {
background-color: #8cad87;
}
.fontXL {
font-size: 10vmin;
}
.fontL {
font-size: 7.5vmin;
}
.fontM {
font-size: 5vmin;
}
.fontS {
font-size: 2.5vmin;
}
.fontXS {
font-size: 1vmin;
}
/* #endregion */
.title {
padding-left: 100px;
padding-right: 100px;
padding-top: 50px;
padding-bottom: 50px;
}
/* #region contents */
.contents {
height: auto;
padding: 50px;
}
/* #endregion
/* #region rsvp */
.rsvpButton {
position: fixed;
height: 100px;
width: 18px;
top: 25px;
right: 0px;
padding: 16px;
border-radius: 16px 0px 0px 16px;
mix-blend-mode: color-dodge;
cursor: pointer;
}
/* #endregion */