feat: ✨ add NSFW confirm alert

src/components/Header.vue

@@ -5,7 +5,11 @@
         <div>
           If you wish to see NSFW content on this page flip this switch.
         </div>
-        <nsfw-switch v-model="$parent.nsfw" />
+        <nsfw-switch
+          id="nsfw-switch-top"
+          v-model="$parent.nsfw"
+          @change="$parent.showWarning()"
+        />
       </div>
     </div>
 

src/components/NsfwSwitch.vue

@@ -1,5 +1,5 @@
 <template>
-  <label class="nsfw-switch" for="nsfw-switch">
+  <label class="nsfw-switch" :for="id">
     <div>😇</div>
     <div class="toggle-wrap">
       <input
@@ -7,7 +7,7 @@
         @change="$emit('change', $event.target.checked)"
         type="checkbox"
         name="nsfw"
-        id="nsfw-switch"
+        :id="id"
       />
       <div class="toggle"></div>
     </div>
@@ -22,7 +22,8 @@ export default {
     event: "change"
   },
   props: {
-    checked: Boolean
+    checked: Boolean,
+    id: { type: String, required: true }
   }
 };
 </script>

src/components/NsfwWarning.vue

@@ -0,0 +1,120 @@
+<template>
+  <div class="nsfw-warning">
+    <div class="nsfw-warning__background"></div>
+    <div class="nsfw-warning__message">
+      <div>
+        <h2>⚠️ Whoa, Nelly! ⚠️</h2>
+        <p>
+          By enabling NSFW mode you confirm that you are of legal age to view
+          adult content.
+        </p>
+
+        <div class="btn-container">
+          <a href="#" class="btn positive" @click.prevent="confirmNsfw(true)">
+            Yes, show me the goods 👀
+          </a>
+          <a href="#" class="btn negative" @click.prevent="confirmNsfw(false)">
+            NO, STAHP 😱
+          </a>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  methods: {
+    confirmNsfw(input) {
+      this.$parent.nsfw = input;
+      this.$parent.isConfirmedHorny = input;
+      this.$parent.isWarn = false;
+    }
+  }
+};
+</script>
+
+<style lang="scss">
+@import "@scss/_variables.scss";
+@import "@scss/_mixins.scss";
+
+.nsfw-warning {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+
+  z-index: 9001;
+
+  backdrop-filter: blur(1em);
+  background-color: rgba(#000, 0.5);
+
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: center;
+
+  padding: 2em;
+  text-align: center;
+
+  &__background {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+  }
+
+  &__message {
+    flex: 0 1 30em;
+
+    display: flex;
+    flex-flow: row wrap;
+    justify-content: center;
+    align-content: center;
+
+    margin: auto;
+    border: 0.25em solid $bg-color-warning;
+    border-radius: 1em;
+    padding: 1em;
+
+    z-index: 9002;
+
+    background-color: $bg-color-dark;
+
+    > * {
+      flex: 0 1 100%;
+    }
+  }
+}
+
+.btn-container {
+  display: flex;
+  flex-flow: row wrap;
+  justify-content: space-around;
+  align-items: center;
+}
+
+.btn {
+  flex: 0 1 100%;
+  background-color: $bg-color-light;
+  border-radius: 0.25em;
+  font-size: 1.5em;
+  font-weight: bold;
+  padding: 0.25em 0.5em;
+  margin: 0 0 1em 0;
+  text-decoration: none;
+
+  @include mq-desktop {
+    flex: 0 1 100%;
+  }
+
+  &.positive {
+    background-color: green;
+  }
+
+  &.negative {
+    background-color: red;
+  }
+}
+</style>