From 6a226687354e5ee5b7fd861b447afbbac7068a22 Mon Sep 17 00:00:00 2001 From: collin Date: Mon, 30 Jun 2025 12:37:32 +0200 Subject: [PATCH] Adding frontend for wedding info and rsvping --- client/index.html | 48 +++++++++++++++++++ client/rsvp.js | 30 ++++++++++++ client/style.css | 119 ++++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 197 insertions(+) create mode 100644 client/index.html create mode 100644 client/rsvp.js create mode 100644 client/style.css diff --git a/client/index.html b/client/index.html new file mode 100644 index 0000000..1750750 --- /dev/null +++ b/client/index.html @@ -0,0 +1,48 @@ + + + + + + +

Collin and Lucy's Wedding

+
+
+

When?

+

Saturday 16th of May 2026.

+ +
+ +

Agenda

+
    +
  • 14:30 - Guests arrive
    • +
  • 15:00 - Ceremony
    • +
  • 15:30 - Reception
    • +
  • 18:30 - Dinner
    • +
+ +
+ +

Where?

+ +

+ Het Broeker Huis
+ Leeteinde 16
+ 1151AK Broek in Waterland +

+ +
+
+
View
 +
+
+ + + + \ No newline at end of file diff --git a/client/rsvp.js b/client/rsvp.js new file mode 100644 index 0000000..af206d9 --- /dev/null +++ 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 + } +} \ No newline at end of file diff --git a/client/style.css b/client/style.css new file mode 100644 index 0000000..9919255 --- /dev/null +++ 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 */ \ No newline at end of file