Adding frontend for wedding info and rsvping

2025-06-22 21:58:19 +02:00 · 2025-06-22 21:58:19 +02:00 · b2ad1654d1
commit b2ad1654d1
parent 2581c2d04a
3 changed files with 197 additions and 0 deletions
--- a/client/index.html
+++ b/client/index.html
@ -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>
--- a/client/rsvp.js
+++ b/client/rsvp.js
@ -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
+    }
+}
--- a/client/style.css
+++ b/client/style.css
@ -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 */