added donate section

components/ButtonInput.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="field-container flex mt-6">
     <div
-      class="p-3 flex-shrink-0 bg-gray-900 mr-3 rounded-full shadow"
+      class="p-3 flex-shrink-0 bg-gray-900 mr-3 rounded-full"
       :style="{
         backgroundColor: `${name == 'socialLinks' ? item.color : buttonBg}`,
       }"
@@ -23,12 +23,12 @@
       />
     </div>
     <button
-      class="p-4 flex-shrink-0 outline-none"
+      class="p-3 flex-shrink-0 outline-none"
       @click="removeAction(name, index)"
       :aria-label="'Remove ' + item.label"
     >
       <div
-        class="w-4 h-4"
+        class="w-6 h-6"
         v-html="require(`~/assets/icons/remove.svg?include`)"
       ></div>
     </button>

components/CheckListItem.vue

@@ -0,0 +1,24 @@
+<template>
+  <div class="checklistItem mt-6 flex items-center">
+    <div class="relative" style="line-height: 0;">
+      <input
+        v-model="downloadCheckList[index].checked"
+        class="checkbox cursor-pointer appearance-none h-12 w-12 border-gray-900 border-4 rounded-lg shadow"
+        type="checkbox"
+        :id="'check' + index"
+      />
+      <img
+        v-if="item.checked"
+        src="~/assets/icons/check.svg"
+        class="absolute top-0 left-0 m-3 z-10 pointer-events-none select-none"
+      />
+    </div>
+    <label class="ml-3" :for="'check' + index">{{ item.label }}</label>
+  </div>
+</template>
+
+<script>
+export default {
+  props: ['downloadCheckList', 'item', 'index'],
+}
+</script>

components/CryptoField.vue

@@ -0,0 +1,90 @@
+<template>
+  <div class="crypto flex mt-6 relative">
+    <div
+      class="p-3 flex-shrink-0 bg-gray-900 mr-3 rounded-full"
+      :style="{ backgroundColor: `${crypto.bg}` }"
+      :title="crypto.title"
+    >
+      <div
+        class="w-6 h-6"
+        v-html="require(`~/assets/icons/${crypto.name}.svg?include`)"
+      ></div>
+    </div>
+    <div class="w-full">
+      <input
+        class="px-4 w-full h-12 bg-gray-200 placeholder-gray-600 rounded focus:outline-none"
+        type="text"
+        :value="crypto.address"
+        @click="(e) => e.target.select()"
+        readonly
+      />
+    </div>
+    <transition name="showQR">
+      <div
+        ref="cryptoQR"
+        v-show="showCrypto"
+        v-on-clickaway="() => closeCryptoQR()"
+        class="absolute right-0 bottom-0 w-48 bg-white shadow-xs z-10 rounded m-12 p-4"
+      ></div>
+    </transition>
+    <button
+      v-if="!isMobile"
+      class="p-3 flex-shrink-0"
+      @click="showCrypto = !showCrypto"
+    >
+      <div
+        class="w-6 h-6"
+        v-html="require(`~/assets/icons/qrcodeb.svg?include`)"
+      ></div>
+    </button>
+  </div>
+</template>
+
+<script>
+import { directive as onClickaway } from 'vue-clickaway2'
+export default {
+  props: ['crypto'],
+  directives: {
+    onClickaway: onClickaway,
+  },
+  computed: {
+    isMobile() {
+      return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
+        navigator.userAgent
+      )
+        ? true
+        : false
+    },
+  },
+  data() {
+    return {
+      showCrypto: false,
+    }
+  },
+  methods: {
+    closeCryptoQR() {
+      this.showCrypto = false
+    },
+  },
+  mounted() {
+    this.$refs.cryptoQR.innerHTML = new QRCode({
+      content: this.crypto.address,
+      container: 'svg-viewbox',
+      join: !0,
+      ecl: 'L',
+      padding: 0,
+    }).svg()
+  },
+}
+</script>
+<style lang="scss">
+.showQR-enter-active,
+.showQR-leave-active {
+  transition: transform 0.1s ease;
+  transform-origin: right bottom;
+}
+.showQR-enter,
+.showQR-leave-to {
+  transform: scale(0);
+}
+</style>

components/Donate.vue

@@ -0,0 +1,137 @@
+<template>
+  <div id="donate" class="mt-16 px-4">
+    <h2 class="font-extrabold text-2xl">Please donate</h2>
+    <div class="field-container mt-6">
+      <p>
+        If you find this service valuable to your
+        business, please consider donating. Your donation will encourage me to
+        better this service and develop more free services like this.
+      </p>
+      <div class="donateBtns">
+        <div class="donateBtn flex items-center mt-6">
+          <a
+            href="https://www.paypal.com/paypalme/vishnuraghav"
+            target="_blank"
+            class="inline-block p-3 flex-shrink-0 mr-3 rounded-full cursor-pointer shadow focus:shadow-none"
+            title="Donate via PayPal"
+            style="background: #003087;"
+          >
+            <div
+              class="w-6 h-6 action"
+              v-html="require(`~/assets/icons/paypal.svg?include`)"
+            ></div>
+          </a>
+          <p>PayPal</p>
+        </div>
+        <div class="donateBtn relative flex items-center mt-6">
+          <transition name="showUPI">
+            <div
+              v-show="showUPI"
+              v-on-clickaway="() => closeUPIQR()"
+              class="absolute text-center left-0 bottom-0 w-48 bg-white shadow-xs z-10 rounded m-12 p-4"
+            >
+              <div ref="upiQR"></div>
+              <p class="mt-2 font-extrabold">Scan to donate via UPI</p>
+            </div>
+          </transition>
+          <a
+            @click="triggerUPI()"
+            @keydown.space="triggerUPI()"
+            @keydown.enter="triggerUPI()"
+            tabindex="0"
+            ref="upiLink"
+            target="_blank"
+            class="inline-block p-3 bg-gray-200 flex-shrink-0 mr-3 rounded-full cursor-pointer shadow"
+            title="Donate via UPI"
+          >
+            <div
+              class="w-6 h-6 action"
+              v-html="require(`~/assets/icons/upi.svg?include`)"
+            ></div>
+          </a>
+          <p>UPI</p>
+        </div>
+      </div>
+      <div class="cryptocurrencies mt-6 max-w-lg">
+        <p>You may also donate via the cryptocurrencies below.</p>
+        <CryptoField
+          v-for="(crypto, index) in cryptocurrencies"
+          :key="index"
+          :crypto="crypto"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { directive as onClickaway } from 'vue-clickaway2'
+import CryptoField from './CryptoField'
+export default {
+  components: {
+    CryptoField,
+  },
+  directives: {
+    onClickaway: onClickaway,
+  },
+  data() {
+    return {
+      cryptocurrencies: [
+        {
+          name: 'bitcoin',
+          title: 'Bitcoin',
+          address: 'bc1qjxwecmmajnl7qvyzwqqka60tfvcyj9qhy2lpq8',
+          bg: '#f7931a',
+        },
+        {
+          name: 'monero',
+          title: 'Monero',
+          address:
+            '4BH5LiYgX4rUoEpTkekokzKXLSJSYoRUKiZdbXNgeQTZgobU4JFVrKgRQecLc4aZBQDDq3ABss2kGX5HYHuZz8anV514a5A',
+          bg: '#EDF2F7',
+        },
+      ],
+      showUPI: false,
+      UPIurl:
+        'upi://pay?pa=vishnuraghav@icici&pn=Vishnu%20Raghav%20B&cu=INR&mode=00&tn=Donation%20for%20Digital%20Business%20Card%20Generator',
+    }
+  },
+  methods: {
+    triggerUPI() {
+      let upiLink = this.$refs.upiLink
+      if (
+        /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
+          navigator.userAgent
+        )
+      ) {
+        upiLink.setAttribute('href', this.UPIurl)
+      } else {
+        this.showUPI = !this.showUPI
+      }
+    },
+    closeUPIQR() {
+      this.showUPI = false
+    },
+  },
+  mounted() {
+    this.$refs.upiQR.innerHTML = new QRCode({
+      content: this.UPIurl,
+      container: 'svg-viewbox',
+      join: !0,
+      ecl: 'L',
+      padding: 0,
+    }).svg()
+  },
+}
+</script>
+<style lang="scss">
+.showUPI-enter-active,
+.showUPI-leave-active {
+  transition: transform 0.1s ease;
+  transform-origin: left bottom;
+}
+.showUPI-enter,
+.showUPI-leave-to {
+  transform: scale(0);
+}
+</style>

components/ImageLoader.vue

@@ -19,7 +19,7 @@
       />
       <button
         v-if="!imageAttached"
-        class="p-2 border-4 rounded-full border-gray-900 cursor-pointer"
+        class="p-2 border-4 rounded-full border-gray-900 cursor-pointer shadow"
         @click="loadImage(type)" :aria-label="label"
       >
         <input

nuxt.config.js

@@ -67,7 +67,7 @@ export default {
         href: '/safari-pinned-tab.svg',
       },
     ],
-    script: [],
+    script: [{src:'/qrcode.min.js'}],
   },
   manifest: {
     name: 'Digital Business Card Generator - Free & Open-Source',

package.json

@@ -16,7 +16,6 @@
     "file-saver": "^2.0.2",
     "id3-parser": "^2.0.0",
     "jszip": "^3.5.0",
-    "mp3tag.js": "^2.3.1",
     "nuxt": "^2.13.0",
     "vue-clickaway2": "^2.3.2"
   },