feat: ✨ add NSFW confirm alert

src/App.vue

@@ -1,5 +1,7 @@
 <template>
   <div id="app">
+    <nsfw-warning v-show="isWarn"></nsfw-warning>
+
     <ref-header
       mainHeading="Sebin Nyshkim"
       subHeading="Character Reference Page"
@@ -189,14 +191,23 @@
 
         <h3>Additional Muscle References</h3>
         <div class="prose" v-show="!nsfw">
-          <p class="nsfw-bar">
-            <strong>
-              Some of these additional references are NSFW. Click
-              <a href="#" @click.prevent="nsfw = !nsfw">here</a> to enable NSFW
-              mode.
-            </strong>
-          </p>
+          <div class="nsfw-bar">
+            <div class="nsfw-bar__content flex flex--row flex--nowrap">
+              <div>
+                <strong>
+                  Some of these additional references are NSFW. Please enable
+                  NSFW mode to reveal them.
+                </strong>
+              </div>
+              <nsfw-switch
+                id="nsfw-switch-muscle"
+                v-model="nsfw"
+                @change="showWarning()"
+              />
+            </div>
+          </div>
         </div>
+
         <gallery v-show="nsfw">
           <ul>
             <li>
@@ -628,6 +639,8 @@ import Gallery from "@components/Gallery.vue";
 import RefFigure from "@components/Figure.vue";
 import RefHeader from "@components/Header.vue";
 import RefFooter from "@components/Footer.vue";
+import NsfwSwitch from "@components/NsfwSwitch.vue";
+import NsfwWarning from "@components/NsfwWarning.vue";
 
 import Sebin from "@mixins/Sebin.js";
 import Helper from "@mixins/Helper.js";
@@ -640,15 +653,30 @@ export default {
     Gallery,
     RefFigure,
     RefHeader,
-    RefFooter
+    RefFooter,
+    NsfwSwitch,
+    NsfwWarning
   },
   data() {
     return {
       nsfw: false,
+      isWarn: false,
+      isConfirmedHorny: false,
       version: require("../package.json").version
     };
   },
-  mixins: [Sebin, Helper]
+  mixins: [Sebin, Helper],
+  methods: {
+    showWarning() {
+      if (!this.isConfirmedHorny) {
+        this.isWarn = true;
+
+        setTimeout(() => {
+          this.nsfw = false;
+        }, 1);
+      }
+    }
+  }
 };
 </script>
 

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>