Add og tags for previews

Based on vuejs advanced cropper

package-lock.json

@@ -1752,6 +1752,63 @@
           "integrity": "sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==",
           "dev": true
         },
+        "ansi-styles": {
+          "version": "4.3.0",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "color-convert": "^2.0.1"
+          }
+        },
+        "chalk": {
+          "version": "4.1.2",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+          "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "ansi-styles": "^4.1.0",
+            "supports-color": "^7.1.0"
+          }
+        },
+        "color-convert": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "color-name": "~1.1.4"
+          }
+        },
+        "color-name": {
+          "version": "1.1.4",
+          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+          "dev": true,
+          "optional": true
+        },
+        "has-flag": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+          "dev": true,
+          "optional": true
+        },
+        "loader-utils": {
+          "version": "2.0.2",
+          "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.2.tgz",
+          "integrity": "sha512-TM57VeHptv569d/GKh6TAYdzKblwDNiumOdkFnejjD0XwTH87K90w3O7AiJRqdQoXygvi1VQTJTLGhJl7WqA7A==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "big.js": "^5.2.2",
+            "emojis-list": "^3.0.0",
+            "json5": "^2.1.2"
+          }
+        },
         "ssri": {
           "version": "8.0.1",
           "resolved": "https://registry.npmjs.org/ssri/-/ssri-8.0.1.tgz",
@@ -1760,6 +1817,28 @@
           "requires": {
             "minipass": "^3.1.1"
           }
+        },
+        "supports-color": {
+          "version": "7.2.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "has-flag": "^4.0.0"
+          }
+        },
+        "vue-loader-v16": {
+          "version": "npm:vue-loader@16.8.3",
+          "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-16.8.3.tgz",
+          "integrity": "sha512-7vKN45IxsKxe5GcVCbc2qFU5aWzyiLrYJyUuMz4BQLKctCj/fmCa0w6fGiiQ2cLFetNcek1ppGJQDCup0c1hpA==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "chalk": "^4.1.0",
+            "hash-sum": "^2.0.0",
+            "loader-utils": "^2.0.0"
+          }
         }
       }
     },
@@ -3818,6 +3897,11 @@
         "sha.js": "^2.4.8"
       }
     },
+    "cropperjs": {
+      "version": "1.5.12",
+      "resolved": "https://registry.npmjs.org/cropperjs/-/cropperjs-1.5.12.tgz",
+      "integrity": "sha512-re7UdjE5UnwdrovyhNzZ6gathI4Rs3KGCBSc8HCIjUo5hO42CtzyblmWLj6QWVw7huHyDMfpKxhiO2II77nhDw=="
+    },
     "cross-spawn": {
       "version": "6.0.5",
       "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-6.0.5.tgz",
@@ -5361,6 +5445,11 @@
         "schema-utils": "^2.5.0"
       }
     },
+    "file-saver": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/file-saver/-/file-saver-2.0.5.tgz",
+      "integrity": "sha512-P9bmyZ3h/PRG+Nzga+rbdI4OEpNDzAVyy74uVO9ATgzLK6VtAsYybF/+TOCvrc0MO793d6+42lLyZTw7/ArVzA=="
+    },
     "filesize": {
       "version": "3.6.1",
       "resolved": "https://registry.npmjs.org/filesize/-/filesize-3.6.1.tgz",
@@ -11894,6 +11983,14 @@
         }
       }
     },
+    "vue-cropperjs": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/vue-cropperjs/-/vue-cropperjs-4.2.0.tgz",
+      "integrity": "sha512-dvwCBtjGMiznkNIK2GFd1SQm1x+wmtWg4g4t+NrJSPj/fpHnubXxAUOIvY7lMFeR2lawRLsigCaGZrcXCzuTKA==",
+      "requires": {
+        "cropperjs": "^1.5.6"
+      }
+    },
     "vue-eslint-parser": {
       "version": "7.10.0",
       "resolved": "https://registry.npmjs.org/vue-eslint-parser/-/vue-eslint-parser-7.10.0.tgz",
@@ -11921,6 +12018,11 @@
         }
       }
     },
+    "vue-google-adsense": {
+      "version": "1.10.1",
+      "resolved": "https://registry.npmjs.org/vue-google-adsense/-/vue-google-adsense-1.10.1.tgz",
+      "integrity": "sha512-F8S6TGK4kyDDvBy7plnWkclz/2bnJNLM2GgPn2K0bzxZi5p5/Nul+NHAkUkXpwdI/eoy+M7ibnkOMhvgd7T9rw=="
+    },
     "vue-hot-reload-api": {
       "version": "2.3.4",
       "resolved": "https://registry.npmjs.org/vue-hot-reload-api/-/vue-hot-reload-api-2.3.4.tgz",
@@ -11948,86 +12050,10 @@
         }
       }
     },
-    "vue-loader-v16": {
-      "version": "npm:vue-loader@16.8.3",
-      "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-16.8.3.tgz",
-      "integrity": "sha512-7vKN45IxsKxe5GcVCbc2qFU5aWzyiLrYJyUuMz4BQLKctCj/fmCa0w6fGiiQ2cLFetNcek1ppGJQDCup0c1hpA==",
-      "dev": true,
-      "optional": true,
-      "requires": {
-        "chalk": "^4.1.0",
-        "hash-sum": "^2.0.0",
-        "loader-utils": "^2.0.0"
-      },
-      "dependencies": {
-        "ansi-styles": {
-          "version": "4.3.0",
-          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
-          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "color-convert": "^2.0.1"
-          }
-        },
-        "chalk": {
-          "version": "4.1.2",
-          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
-          "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "ansi-styles": "^4.1.0",
-            "supports-color": "^7.1.0"
-          }
-        },
-        "color-convert": {
-          "version": "2.0.1",
-          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
-          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "color-name": "~1.1.4"
-          }
-        },
-        "color-name": {
-          "version": "1.1.4",
-          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
-          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
-          "dev": true,
-          "optional": true
-        },
-        "has-flag": {
-          "version": "4.0.0",
-          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
-          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
-          "dev": true,
-          "optional": true
-        },
-        "loader-utils": {
-          "version": "2.0.2",
-          "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.2.tgz",
-          "integrity": "sha512-TM57VeHptv569d/GKh6TAYdzKblwDNiumOdkFnejjD0XwTH87K90w3O7AiJRqdQoXygvi1VQTJTLGhJl7WqA7A==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "big.js": "^5.2.2",
-            "emojis-list": "^3.0.0",
-            "json5": "^2.1.2"
-          }
-        },
-        "supports-color": {
-          "version": "7.2.0",
-          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
-          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "has-flag": "^4.0.0"
-          }
-        }
-      }
+    "vue-script2": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/vue-script2/-/vue-script2-2.1.0.tgz",
+      "integrity": "sha512-EDUOjQBFvhkJXwmWuUR9ijlF7/4JtmvjXSKaHSa/LNTMy9ltjgKgYB68aqlxgq8ORdSxowd5eo24P1syjZJnBA=="
     },
     "vue-style-loader": {
       "version": "4.1.3",

package.json

@@ -9,7 +9,11 @@
   },
   "dependencies": {
     "core-js": "^3.6.5",
+    "file-saver": "^2.0.5",
     "vue": "^2.6.11",
+    "vue-cropperjs": "^4.2.0",
+    "vue-google-adsense": "^1.10.1",
+    "vue-script2": "^2.1.0",
     "vuetify": "^2.4.0"
   },
   "devDependencies": {

public/index.html

@@ -8,8 +8,35 @@
     <title>Midari Profile Stuio</title>
     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900">
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/font@latest/css/materialdesignicons.min.css">
+
+    <!-- Primary Meta Tags -->
+    <title>Midari Profile Studio — Realtime profile and card designer</title>
+    <meta name="title" content="Midari Profile Studio — Realtime profile and card designer">
+    <meta name="description" content="Design your custom profile and cards in a WYSIWYG Web editor. 
+    Realtime preview, convenient copy & paste commands">
+
+    <!-- Open Graph / Facebook -->
+    <meta property="og:type" content="website">
+    <meta property="og:url" content="https://mps.minzkraut.com/">
+    <meta property="og:title" content="Midari Profile Studio — Realtime profile and card designer">
+    <meta property="og:description" content="Design your custom profile and cards in a WYSIWYG Web editor. 
+    Realtime preview, convenient copy & paste commands">
+    <meta property="og:image" content="https://mps.minzkraut.com/assets/mpsbanner.png">
+
+    <!-- Twitter -->
+    <meta property="twitter:card" content="summary_large_image">
+    <meta property="twitter:url" content="https://mps.minzkraut.com/">
+    <meta property="twitter:title" content="Midari Profile Studio — Realtime profile and card designer">
+    <meta property="twitter:description" content="Design your custom profile and cards in a WYSIWYG Web editor. 
+    Realtime preview, convenient copy & paste commands">
+    <meta property="twitter:image" content="https://mps.minzkraut.com/assets/mpsbanner.png">
+
   </head>
   <body>
+    <!-- Google Tag Manager (noscript) -->
+    <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-WBRJ8KX"
+    height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
+    <!-- End Google Tag Manager (noscript) -->
     <noscript>
       <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
     </noscript>

src/App.vue

@@ -33,26 +33,42 @@
     </v-app-bar>
 
     <v-main>
+      <v-tabs centered>
+        <v-tabs-slider color="yellow"></v-tabs-slider>
+
+        <v-tab>
+            Profile Designer
+        </v-tab>
+        <v-tab>
+            Custom Card Designer
+        </v-tab>
+        <v-tab-item>
           <Designer/>
+        </v-tab-item>
+        <v-tab-item>
+          <CardDesigner/>
+        </v-tab-item>
+      </v-tabs>
     </v-main>
-    <v-footer class="footer" 
+    <v-footer fixed class="footer" 
       color="secondary"
       
       elevation="5"
     >
-      MPS v0.0.2 by Minzkraut - Send feedback via <a href="https://mnz.gg/discord" title="Minzkrauts Discord">Discord </a> - Icons made by <a href="https://www.freepik.com" title="Freepik">Freepik</a>
+      MPS v0.0.3 by Minzkraut - Send feedback via <a href="https://mnz.gg/discord" title="Minzkrauts Discord">Discord </a> - Icons made by <a href="https://www.freepik.com" title="Freepik">Freepik</a>
     </v-footer>
   </v-app>
 </template>
 
 <script>
 import Designer from './components/Designer';
+import CardDesigner from './components/CardDesigner';
 
 export default {
   name: 'App',
 
   components: {
-    Designer,
+    Designer, CardDesigner
   },
 
   data: () => ({
@@ -62,6 +78,11 @@ export default {
 <style lang="scss">
 @import './styles/generic.scss';
 
+@font-face {
+  font-family: "Calibri Bold";
+  src: local("Calibri Bold"),url("./assets/fonts/calibrib.ttf") format("truetype");
+}
+
 a, footer.footer a {
   margin: 0 5px;
   color: #52BD6F;

src/components/BadgeSelector.vue

@@ -1,14 +0,0 @@
-<template>
-    <div>
-        <img v-for="badge in badges" :key="badge" :src="require('@/assets/badges/'+badge)" />
-    </div>
-</template>
-
-<script>
-export default {
-    data: ()=>({
-        badges: ["Akame ga kill_badge.png","Alice in Borderland_badge.png","Angel Beats_badge.png","Assassination Classroom_badge.png","Attack on Titan_badge.png","Bakemonogatari_badge.png","Berserk_badge.png","BlazBlue_badge.png","Bleach_badge.png","Blue Exorcist_badge.png","Bungou Stray Dogs_badge.png","Castlevania_badge.png","Chainsaw man_badge.png","Chivalry Of a Failed Knight_badge.png","Clannad_badge.png","Darling in the FranXX_badge.png","Darwins Game_badge.png","Death Note_badge.png","Demon Slayer_badge.png","Devil May Cry_badge.png","Dragon Ball_badge.png","Erased_badge.png","Fate_badge.png","Final Fantasy_badge.png","Fire Force_badge.png","Fullmetal Alchemist_badge.png","Genshin Impact_badge.png","Great Pretender_badge.png","High school of the Dead_badge.png","How a Realist Hero Rebuilt the Kingdom Part 2_badge.png","Hunter x Hunter (2011)_badge.png","Hunter x Hunter_badge.png","Identity V_badge.png","Interviews with Monster Girls_badge.png","Jojo Bizarre Adventure_badge.png","Jujutsu Kaisen_badge.png","Kaguya-sama Love is War_badge.png","Kakegurui_badge.png","Kingdom Hearts_badge.png","Konosuba_badge.png","My Hero Academia_badge.png","Naruto_badge.png","Neon Genesis Evangelion_badge.png","Nichijou_badge.png","Non Non Biyori_badge.png","Noragami_badge.png","Oreshura_badge.png","Overlord_badge.png","Persona_badge.png","Pokemon Trainers_badge.png","Promised Neverland_badge.png","RWBY_badge.png","Rascal Does Not Dream of Bunny Girl Senpai_badge.png","Rent-a-Girlfriend_badge.png","STEINS GATE_badge.png","Soul Eater_badge.png","Sword Art Online _badge.png","Sword Art Online_badge.png","That Time I Got Reincarnated as a Slime_badge.png","Vinland Saga_badge.png","Yuru Camp_badge.png","booster.png","missing.png","mob psycho 100_badge.png","ouran highschool host club_badge.png","tier1-patreon.png","tier2-patreon.png","tier3-patreon.png","violet evergarden_badge.png"],
-
-    })
-}
-</script>

src/components/CardDesigner.vue

@@ -0,0 +1,220 @@
+<template>
+  <div>
+    <Intro header="Card Designer" body="This Tool is currently being built...<br/>Mobile cropper might behave weird. <br/>Known Issues: <br/>- (mobile) Moving cropper to the right changes tabs <br/>- (mobile) Pinch to zoom affects page instead of crop area <br>- Initial crop area doesn't cover the maximum size possible" />
+    <v-row justify="center" class="pa-10">
+      <div class="button-wrapper">
+        <input
+          ref="input"
+          type="file"
+          name="image"
+          accept="image/*"
+          @change="setImage"
+        />
+        <v-btn x-large class="button ma-10" @click="showFileChooser()">
+          Open Image
+          <v-icon right dark>
+            mdi-cloud-upload
+          </v-icon>
+        </v-btn>
+      </div>
+    </v-row>
+    <v-row justify="center">
+      <div class="cropper-area">
+        <div class="img-cropper">
+          <vue-cropper
+            ref="cropper"
+            :src="imgSrc"
+            preview=".custom-preview"
+            :viewMode="2"
+            :zoomable="true"
+            :aspectRatio="3/5"
+          />
+        </div>
+      </div>
+
+      <div class="preview-area">
+        <h3>Card-Preview</h3>
+        <h4>Options</h4>
+        <v-rating
+          v-model="stars"
+          color="yellow"
+          empty-icon="mdi-star-outline"
+          full-icon="mdi-star"
+          @input="updateFrame()"
+          hover
+          length="5"
+          size="25"
+          value="5"
+        ></v-rating>
+        <v-text-field
+          v-model="characterName"
+          label="Character Name"
+        ></v-text-field>
+        <div class="card-container">
+          <img class="card-overlay" id="name-panel" src="../assets/cards/name-panel.png" alt="">
+          <img class="card-overlay" id="frame" src="../assets/cards/1-star.png" alt="">
+          <div class="character-name-container">
+            <span class="character-name" >{{ characterName }}</span>
+          </div>
+          <div class="custom-preview" />
+        </div>
+        <v-btn x-large class="button ma-10" @click="cropImage()">
+          Save Image
+          <v-icon right dark>
+            mdi-cloud-download
+          </v-icon>
+        </v-btn>
+      </div>
+    </v-row>
+    <v-row justify="center" class="pa-10">
+      
+    </v-row>
+  </div>
+</template>
+
+<script>
+
+import { saveAs } from 'file-saver';
+import Intro from './Intro.vue';
+import VueCropper from 'vue-cropperjs';
+import 'cropperjs/dist/cropper.css';
+
+// This function is used to detect the actual image type, 
+
+export default {
+  components: {
+    VueCropper, Intro
+  },
+  data: () => ({
+    imgSrc: require("../assets/cards/akashi_placeholder.jpg"),
+    cropImg: '',
+    data: null,
+    stars: 1,
+    characterName: ""
+  }),
+  methods: {
+    updateFrame() {
+      console.log('Update frame')
+      document.getElementById("frame").src =  require("../assets/cards/" + this.stars + "-star.png");
+    },
+    cropImage() {
+      // get image data for post processing, e.g. upload or setting image src
+      this.cropImg = this.$refs.cropper.getCroppedCanvas().toDataURL();
+      this.$refs.cropper.getCroppedCanvas().toBlob(blob => {
+        let i = new FormData()
+        i.append('picture', blob)    
+        console.log(i)
+        saveAs(blob, "custom-card");
+      })
+
+    },
+    crop() {
+			const { canvas } = this.$refs.cropper.getResult();
+			canvas.toBlob((blob) => {
+				saveAs(blob);
+			}, this.image.type);
+		},
+
+    reset() {
+      this.image = {
+        src: null,
+        type: null
+      }
+    },
+    setImage(e) {
+      const file = e.target.files[0];
+
+      if (file.type.indexOf('image/') === -1) {
+        alert('Please select an image file');
+        return;
+      }
+
+      if (typeof FileReader === 'function') {
+        const reader = new FileReader();
+
+        reader.onload = (event) => {
+          this.imgSrc = event.target.result;
+          // rebuild cropperjs with the updated source
+          this.$refs.cropper.replace(event.target.result);
+        };
+
+        reader.readAsDataURL(file);
+      } else {
+        alert('Sorry, FileReader API not supported');
+      }
+    },
+    showFileChooser() {
+      this.$refs.input.click();
+    },
+  },
+  destroyed() {
+    // Revoke the object URL, to allow the garbage collector to destroy the uploaded before file
+    if (this.image.src) {
+      URL.revokeObjectURL(this.image.src)
+    }
+  },
+  
+}
+</script>
+
+<style scoped lang="scss">
+//FIXME: Outsource styles
+
+.cropper-area {
+  padding-right: 25px;
+}
+
+.img-cropper {
+  max-width: 70%;
+  padding-top: 40px;
+}
+
+input[type="file"] {
+  display: none;
+}
+
+.custom-preview {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+
+.button-wrapper {
+  display: block;
+}
+
+.card-container {
+  height: 500px;
+  width: 300px;
+  position: relative;
+}
+
+.card-overlay {
+  position: absolute;
+  z-index: 1;
+  max-height: 100%;
+}
+
+.character-name-container {
+  position: absolute;
+  display: flex;
+  bottom: 0;
+  height: 115px;
+  width: 100%;
+}
+
+.character-name {
+  z-index: 1;
+  text-align: center;
+  line-height: 29px;
+  font-family: 'Calibri Bold';
+  margin: auto;
+  font-size: 34px;
+}
+
+#card {
+  height: 100%;
+  width: 100%;
+  background-size: contain;
+}
+</style>

src/components/Commands.vue

@@ -13,6 +13,15 @@
           <input type="hidden" id="panel" :value="'/editprofile theme ' + panelColor.substring(1,7)">
           <v-btn @click.stop.prevent="copyColor('panel')">Copy</v-btn>
         </div>
+        <div class="ad-container flex-item" style="">
+        <Adsense
+          data-ad-client="ca-pub-4611357578399674"
+          data-ad-slot="9274429601"
+          data-ad-format="auto"
+          data-full-width-responsive="true"
+        >
+        </Adsense>
+      </div>
     </div>
 </template>
 

src/components/Designer.vue

@@ -1,13 +1,6 @@
 <template>
   <div class="designer">
-    <div id="intro">
-      <h2>Welcome to Midari Profile Studio</h2>
-      <p>
-        Customize your profile and run the commands in any channel that has access to the Midari Bot.<br>
-        Your settings are not saved locally. Refreshing the page will reset all colors!<br>
-        This tool is still work in progress!
-      </p>
-    </div>
+    <Intro header="Welcome to Midari Profile Studio" :body="introBody" />
     <div class="flex-container"> <!-- ToDo: fix container -->
       <Preview :panelColor="panelColor" :backgroundColor="backgroundColor" />
       <div class="flex-item">
@@ -34,7 +27,6 @@
         ></v-color-picker>
       </div>
       <Commands :panelColor="panelColor" :backgroundColor="backgroundColor" />
-      <BadgeSelector />
     </div>
   </div>
 </template>
@@ -42,17 +34,20 @@
 <script>
 import Preview from './Preview.vue';
 import Commands from './Commands.vue';
-import BadgeSelector from './BadgeSelector.vue';
+import Intro from './Intro.vue';
 
 export default {
   name: 'Designer',
-  components: { Preview, Commands, BadgeSelector },
+  components: { Preview, Commands, Intro },
   props: {
     msg: String
   },
   data: ()=>({
     panelColor: '3D985D',
-    backgroundColor: '303144'
+    backgroundColor: '303144',
+    introBody: `Customize your profile and run the commands in any channel that has access to the Midari Bot.<br>
+                Your settings are not saved locally. Refreshing the page will reset all colors!<br>
+                This tool is still work in progress!`
   })
 }
 </script>

src/components/Intro.vue

@@ -0,0 +1,17 @@
+<template>
+  <div id="intro">
+    <h2>{{ header }}</h2>
+    <p v-html="body">
+    </p>
+  </div>
+</template>
+
+<script>
+export default {
+  props: ['header', 'body']
+}
+</script>
+
+<style lang="scss">
+@import url('../styles/intro.scss');
+</style>

src/gtm.js

@@ -0,0 +1,5 @@
+(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
+new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
+j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
+'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
+})(window,document,'script','dataLayer','GTM-WBRJ8KX');

src/main.js

@@ -1,8 +1,12 @@
 import Vue from 'vue'
 import App from './App.vue'
 import vuetify from './plugins/vuetify'
+import './gtm.js'
+import Ads from 'vue-google-adsense'
 
 Vue.config.productionTip = false
+Vue.use(require('vue-script2'))
+Vue.use(Ads.Adsense)
 
 new Vue({
   vuetify,

src/styles/generic.scss

@@ -15,7 +15,7 @@
   }
   
   h3 {
-    margin: 25px 0 0;
+    margin: 15px 0 0;
     text-align: center;
   }
   

src/styles/intro.scss

@@ -0,0 +1,20 @@
+#intro {
+    h2 {
+      text-align: center;
+    }
+  
+    p {
+      padding: 25px;
+      padding-bottom: 0;
+    }
+
+    width: 80%;
+    max-width: 800px;
+    margin: 0 auto;
+    padding: 25px;
+  
+    @media (max-width: 680px) {
+      width: 100%;
+      padding: 25px 0;
+    }  
+}

src/styles/specifics.scss

@@ -1,20 +0,0 @@
-#intro {
-    h2 {
-      text-align: center;
-    }
-  
-    p {
-      padding: 25px;
-      padding-bottom: 0;
-    }
-
-    width: 80%;
-    max-width: 800px;
-    margin: 0 auto;
-    padding: 25px;
-  
-    @media (max-width: 680px) {
-      width: 100%;
-      padding: 25px 0;
-    }  
-}

vue.config.js

@@ -1,5 +1,8 @@
 module.exports = {
   transpileDependencies: [
     'vuetify'
-  ]
+  ],
+  devServer: {
+    disableHostCheck: true
+  }
 }