added all videos; finished y/n; finished dutch text; english still incomplete;

assets/images/si_mark.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 90.66 90.34"><defs><style>.cls-1{fill:#ffffff;}</style></defs><g id="Layer_7" data-name="Layer 7"><path class="cls-1" d="M53.27.74l.88,1.41a.64.64,0,0,0,.41.29,43.57,43.57,0,1,1-16.64-.35.69.69,0,0,0,.46-.32L39.13.49a.23.23,0,0,0-.24-.35,45.44,45.44,0,0,0-37.56,56,44.63,44.63,0,0,0,33.81,33.1A45.35,45.35,0,1,0,53.49.42.21.21,0,0,0,53.27.74Z"/><path class="cls-1" d="M81,45A35.7,35.7,0,0,1,56.51,78.84a.55.55,0,0,0-.22.14,44.23,44.23,0,0,1-3.53,3.46.55.55,0,0,0,.49.94,39.18,39.18,0,0,0,3.32-75.9.54.54,0,0,0-.6.21L54.48,9.82a.55.55,0,0,0,.31.84A35.7,35.7,0,0,1,81,45Z"/><path class="cls-1" d="M6.16,45A39.19,39.19,0,0,0,30.9,81.44a.55.55,0,0,0,.62-.87c-1.31-1.47-2.6-3-3.89-4.61a.44.44,0,0,0-.15-.12,35.63,35.63,0,0,1,9.33-65.43.54.54,0,0,0,.32-.85L35.6,7.42A.56.56,0,0,0,35,7.21,39.19,39.19,0,0,0,6.16,45Z"/><path class="cls-1" d="M43.07,84.05c11.27-5.87,18.61-19.16,22.46-39H57.15c0,14.06-2.85,29.09-14.08,39"/><path class="cls-1" d="M43.07,84.62a.56.56,0,0,1-.47-.25.57.57,0,0,1,.09-.74C52,75.35,56.59,62.72,56.59,45a.57.57,0,0,1,.56-.57h8.38a.58.58,0,0,1,.44.21.57.57,0,0,1,.12.47c-2,10.05-4.81,18.45-8.52,24.94C53.77,76.73,49,81.61,43.33,84.55A.54.54,0,0,1,43.07,84.62Zm14.65-39C57.63,61,54.11,72.58,47,80.88c8.49-6.5,14.48-18.35,17.86-35.3Z"/><path class="cls-1" d="M43.06,84.62a.54.54,0,0,1-.26-.07,33.57,33.57,0,0,1-12-10.86.57.57,0,0,1,.93-.65A32.54,32.54,0,0,0,43.33,83.55a.57.57,0,0,1,.24.76A.56.56,0,0,1,43.06,84.62Z"/><path class="cls-1" d="M65.53,45.58H25.13a.57.57,0,0,1,0-1.14h40.4a.57.57,0,1,1,0,1.14Z"/><polyline class="cls-1" points="41.88 17.86 31.92 45.01 25.13 45.01 35.98 15.41 41.88 17.86"/><path class="cls-1" d="M31.92,45.58H25.13a.56.56,0,0,1-.47-.25.55.55,0,0,1-.06-.51l10.85-29.6a.56.56,0,0,1,.3-.32.59.59,0,0,1,.45,0l5.9,2.45a.56.56,0,0,1,.31.72l-10,27.15A.56.56,0,0,1,31.92,45.58Zm-6-1.14h5.59l9.63-26.26-4.85-2Z"/><path class="cls-1" d="M61.2,26.44a.54.54,0,0,1-.21-.05L35.76,15.94a.57.57,0,0,1,.44-1L61.42,25.35a.57.57,0,0,1-.22,1.09Z"/><polyline class="cls-1" points="61.2 25.87 57.04 37.22 65.53 27.66 61.2 25.87"/><path class="cls-1" d="M57,37.79a.6.6,0,0,1-.29-.08.58.58,0,0,1-.24-.68l4.16-11.35a.59.59,0,0,1,.31-.33.56.56,0,0,1,.44,0l4.33,1.79a.6.6,0,0,1,.34.4A.57.57,0,0,1,66,28L57.47,37.6A.59.59,0,0,1,57,37.79Zm4.49-11.17-2.93,8,6-6.73Z"/><path class="cls-1" d="M34.81,62.44l-6.05,6.81a45.47,45.47,0,0,0,2.54,4.11l4.36-11.88Z"/><path class="cls-1" d="M31.3,73.93a.57.57,0,0,1-.46-.24,48.45,48.45,0,0,1-2.58-4.16.56.56,0,0,1,.07-.65l6.91-7.78A.57.57,0,0,1,36,61a.55.55,0,0,1,.24.68L31.84,73.56a.58.58,0,0,1-.46.37Zm-1.85-4.6c.55,1,1.12,1.92,1.7,2.8l3-8Z"/><polygon class="cls-1" points="45.98 0.57 50.19 6.65 46.04 13.64 41.83 7.56 45.98 0.57"/><path class="cls-1" d="M46,14.21a.54.54,0,0,1-.46-.25L41.36,7.89a.58.58,0,0,1,0-.62l4.15-7A.56.56,0,0,1,46,0a.57.57,0,0,1,.48.24l4.22,6.08a.58.58,0,0,1,0,.61l-4.15,7a.58.58,0,0,1-.47.28ZM42.5,7.54,46,12.59l3.52-5.92L46,1.61Z"/><path class="cls-1" d="M48.13,26.1h0l-5.67,6.39a.49.49,0,0,0-.13.33V69.76a.49.49,0,0,0,.86.32l.14-.15h0L49,63.54a.51.51,0,0,0,.13-.33V26.27a.5.5,0,0,0-.87-.33Z"/></g></svg>

assets/images/si_mark2.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 90.66 90.34"><defs><style>.cls-1{fill:#b2c6eb;}</style></defs><g id="Layer_7" data-name="Layer 7"><path class="cls-1" d="M53.27.74l.88,1.41a.64.64,0,0,0,.41.29,43.57,43.57,0,1,1-16.64-.35.69.69,0,0,0,.46-.32L39.13.49a.23.23,0,0,0-.24-.35,45.44,45.44,0,0,0-37.56,56,44.63,44.63,0,0,0,33.81,33.1A45.35,45.35,0,1,0,53.49.42.21.21,0,0,0,53.27.74Z"/><path class="cls-1" d="M81,45A35.7,35.7,0,0,1,56.51,78.84a.55.55,0,0,0-.22.14,44.23,44.23,0,0,1-3.53,3.46.55.55,0,0,0,.49.94,39.18,39.18,0,0,0,3.32-75.9.54.54,0,0,0-.6.21L54.48,9.82a.55.55,0,0,0,.31.84A35.7,35.7,0,0,1,81,45Z"/><path class="cls-1" d="M6.16,45A39.19,39.19,0,0,0,30.9,81.44a.55.55,0,0,0,.62-.87c-1.31-1.47-2.6-3-3.89-4.61a.44.44,0,0,0-.15-.12,35.63,35.63,0,0,1,9.33-65.43.54.54,0,0,0,.32-.85L35.6,7.42A.56.56,0,0,0,35,7.21,39.19,39.19,0,0,0,6.16,45Z"/><path class="cls-1" d="M43.07,84.05c11.27-5.87,18.61-19.16,22.46-39H57.15c0,14.06-2.85,29.09-14.08,39"/><path class="cls-1" d="M43.07,84.62a.56.56,0,0,1-.47-.25.57.57,0,0,1,.09-.74C52,75.35,56.59,62.72,56.59,45a.57.57,0,0,1,.56-.57h8.38a.58.58,0,0,1,.44.21.57.57,0,0,1,.12.47c-2,10.05-4.81,18.45-8.52,24.94C53.77,76.73,49,81.61,43.33,84.55A.54.54,0,0,1,43.07,84.62Zm14.65-39C57.63,61,54.11,72.58,47,80.88c8.49-6.5,14.48-18.35,17.86-35.3Z"/><path class="cls-1" d="M43.06,84.62a.54.54,0,0,1-.26-.07,33.57,33.57,0,0,1-12-10.86.57.57,0,0,1,.93-.65A32.54,32.54,0,0,0,43.33,83.55a.57.57,0,0,1,.24.76A.56.56,0,0,1,43.06,84.62Z"/><path class="cls-1" d="M65.53,45.58H25.13a.57.57,0,0,1,0-1.14h40.4a.57.57,0,1,1,0,1.14Z"/><polyline class="cls-1" points="41.88 17.86 31.92 45.01 25.13 45.01 35.98 15.41 41.88 17.86"/><path class="cls-1" d="M31.92,45.58H25.13a.56.56,0,0,1-.47-.25.55.55,0,0,1-.06-.51l10.85-29.6a.56.56,0,0,1,.3-.32.59.59,0,0,1,.45,0l5.9,2.45a.56.56,0,0,1,.31.72l-10,27.15A.56.56,0,0,1,31.92,45.58Zm-6-1.14h5.59l9.63-26.26-4.85-2Z"/><path class="cls-1" d="M61.2,26.44a.54.54,0,0,1-.21-.05L35.76,15.94a.57.57,0,0,1,.44-1L61.42,25.35a.57.57,0,0,1-.22,1.09Z"/><polyline class="cls-1" points="61.2 25.87 57.04 37.22 65.53 27.66 61.2 25.87"/><path class="cls-1" d="M57,37.79a.6.6,0,0,1-.29-.08.58.58,0,0,1-.24-.68l4.16-11.35a.59.59,0,0,1,.31-.33.56.56,0,0,1,.44,0l4.33,1.79a.6.6,0,0,1,.34.4A.57.57,0,0,1,66,28L57.47,37.6A.59.59,0,0,1,57,37.79Zm4.49-11.17-2.93,8,6-6.73Z"/><path class="cls-1" d="M34.81,62.44l-6.05,6.81a45.47,45.47,0,0,0,2.54,4.11l4.36-11.88Z"/><path class="cls-1" d="M31.3,73.93a.57.57,0,0,1-.46-.24,48.45,48.45,0,0,1-2.58-4.16.56.56,0,0,1,.07-.65l6.91-7.78A.57.57,0,0,1,36,61a.55.55,0,0,1,.24.68L31.84,73.56a.58.58,0,0,1-.46.37Zm-1.85-4.6c.55,1,1.12,1.92,1.7,2.8l3-8Z"/><polygon class="cls-1" points="45.98 0.57 50.19 6.65 46.04 13.64 41.83 7.56 45.98 0.57"/><path class="cls-1" d="M46,14.21a.54.54,0,0,1-.46-.25L41.36,7.89a.58.58,0,0,1,0-.62l4.15-7A.56.56,0,0,1,46,0a.57.57,0,0,1,.48.24l4.22,6.08a.58.58,0,0,1,0,.61l-4.15,7a.58.58,0,0,1-.47.28ZM42.5,7.54,46,12.59l3.52-5.92L46,1.61Z"/><path class="cls-1" d="M48.13,26.1h0l-5.67,6.39a.49.49,0,0,0-.13.33V69.76a.49.49,0,0,0,.86.32l.14-.15h0L49,63.54a.51.51,0,0,0,.13-.33V26.27a.5.5,0,0,0-.87-.33Z"/></g></svg>

pages/index.vue

@@ -1,8 +1,13 @@
 <template>
   <main>
     <nav>
-      <button v-if="guests && guests.fields && guests.fields.Language" class="btn btn--header" @click="openPopup">
-        <span>☙</span>
+      <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>
@@ -10,13 +15,13 @@
     <!-- <pre>
       {{ guests }}
     </pre> -->
-    <ul class="test-links">
+    <!-- <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>
+    </ul> -->
     <!-- <div class="names">{{ guests.Names }}</div> -->
     <!-- <img
       class="img--bkg"
@@ -58,21 +63,165 @@
     </video>-->
     <div v-if="isPopupVisible" class="popup-wrapper">
       <div class="popup">
-        <button class="x" @click="openPopup">🞪</button>
-        <h1>this is the header</h1>
-        <p>this is the paragraph</p>
+        <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>
+            It took a while, but we eventually decided to cross our fingers and
+            plan a transatlantic wedding.
+          </p>
+          <p>
+            My fellow Americans, I know that the Netherlands is on the other
+            side of the world, and that this is a huge request. So here's the
+            thing: you're reading this because 1) you're extremely important to
+            me and 2) I would LOVE to show you where I've been living for the
+            last 2 years!
+          </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">
-            <span>🞄</span>
+          <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) }}
-            <span>🞄</span>
           </button>
-          <button v-if="guests && guests.fields && guests.fields.Language" @click="sayNo" class="btn btn--popup">
-            <span>🞄</span>
+          <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) }}
-            <span>🞄</span>
           </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>
@@ -131,46 +280,47 @@ export default {
       if (lang === 'en') {
         return 'Sorry, ' + (count > 1 ? 'we' : 'I') + ' definitely can\'t make it. 😞'
       } else {
-        return 'Helaas, ' + (count > 1 ? 'wij zijn' : 'I') + ' er zeker weten niet bij. 😞'
+        return 'Helaas, ' + (count > 1 ? 'wij zijn' : 'ik ben') + ' er zeker weten niet bij. 😞'
       }
     },
-    sayYes () {
+    async sayYes () {
       const updates =
       {
         fields: {
           Status: 'Maybe'
         }
       }
-      fetch(`https://api.airtable.com/v0/appR5dwqGUe1vBaa9/Guest/${this.guests.id}`, {
+
+      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)
-      }).then((response) => {
-        console.log(response.status)
-        return response.json()
-      }).then(data => console.log(data))
+      })
+
+      const json = await res.json()
+      this.guests = { ...await json }
     },
-    sayNo () {
+    async sayNo () {
       const updates =
       {
         fields: {
           Status: 'No'
         }
       }
-      fetch(`https://api.airtable.com/v0/appR5dwqGUe1vBaa9/Guest/${this.guests.id}`, {
+      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)
-      }).then((response) => {
-        console.log(response.status)
-        return response.json()
-      }).then(data => console.log(data))
+      })
+
+      const json = await res.json()
+      this.guests = { ...await json }
     }
   }
 }
@@ -178,7 +328,7 @@ export default {
 
 <style>
 html {
-  font-size: 2vmin;
+  font-size: max(2vmin, 12pt);
   font-family: "Times New Roman", Times, serif;
   color: var(--blue);
 }
@@ -215,10 +365,14 @@ main {
 h1 {
   font-size: 3rem;
   font-family: "kingthings_petrockregular", "Times New Roman", Times, serif;
+  margin: 1rem 0 0 0;
+  text-align: center;
 }
 
 p {
   font-size: 1.5rem;
+  margin-left: 2rem;
+  margin-right: 2rem;
 }
 
 .img--bkg {
@@ -268,11 +422,13 @@ p {
 
 nav {
   position: fixed;
+  left: 2rem;
   right: 2rem;
   top: 2rem;
   display: flex;
   gap: 1rem;
   z-index: 2;
+  justify-content: space-between;
 }
 
 .popup-wrapper {
@@ -305,6 +461,12 @@ nav {
   z-index: 4;
   display: flex;
   flex-direction: column;
+  max-width: 60ch;
+  align-items: center;
+}
+
+small {
+  font-size: 1rem;
 }
 
 .popup::before {
@@ -332,6 +494,15 @@ nav {
   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 {
@@ -350,12 +521,27 @@ nav {
 }
 
 .buttons {
+  margin: 2rem 0 2rem 0;
   display: flex;
   flex-direction: column;
-  align-items: center;
+  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;
@@ -368,6 +554,13 @@ nav {
   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 {
@@ -380,6 +573,22 @@ nav {
   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;
@@ -388,7 +597,7 @@ nav {
   align-self: flex-end;
   margin-right: -1.5rem;
   transition: all 0.2s;
-  line-height: 1;
+  line-height: 0;
   border-radius: 999px;
 }
 
@@ -399,8 +608,9 @@ nav {
 
 ul {
   display: flex;
-  flex-direction: column;
   gap: 0.25rem;
+  flex-flow: column wrap;
+  height: 90vh;
 }
 
 li {
@@ -418,4 +628,15 @@ li a {
   font-size: 0.75rem;
   line-height: 1;
 }
+
+.mark {
+  height: 3rem;
+  width: 3rem;
+  opacity: 0.5;
+}
+
+.popup .mark {
+  margin-top: 2rem;
+  opacity: 1;
+}
 </style>