Add BadgeSelector

Added badge assets and added a component that lists all badge items

package-lock.json

@@ -1752,63 +1752,6 @@
           "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",
@@ -1817,28 +1760,6 @@
           "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"
-          }
         }
       }
     },
@@ -3897,11 +3818,6 @@
         "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",
@@ -5445,11 +5361,6 @@
         "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",
@@ -11983,14 +11894,6 @@
         }
       }
     },
-    "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",
@@ -12018,11 +11921,6 @@
         }
       }
     },
-    "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",
@@ -12050,10 +11948,86 @@
         }
       }
     },
-    "vue-script2": {
+    "vue-loader-v16": {
-      "version": "2.1.0",
+      "version": "npm:vue-loader@16.8.3",
-      "resolved": "https://registry.npmjs.org/vue-script2/-/vue-script2-2.1.0.tgz",
+      "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-16.8.3.tgz",
-      "integrity": "sha512-EDUOjQBFvhkJXwmWuUR9ijlF7/4JtmvjXSKaHSa/LNTMy9ltjgKgYB68aqlxgq8ORdSxowd5eo24P1syjZJnBA=="
+      "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-style-loader": {
       "version": "4.1.3",

package.json

@@ -9,11 +9,7 @@
   },
   "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,35 +8,8 @@
     <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,42 +33,26 @@
     </v-app-bar>
 
     <v-main>
-      <v-tabs centered>
+      <Designer/>
-        <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 fixed class="footer" 
+    <v-footer class="footer" 
       color="secondary"
       
       elevation="5"
     >
-      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>
+      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>
     </v-footer>
   </v-app>
 </template>
 
 <script>
 import Designer from './components/Designer';
-import CardDesigner from './components/CardDesigner';
 
 export default {
   name: 'App',
 
   components: {
-    Designer, CardDesigner
+    Designer,
   },
 
   data: () => ({
@@ -78,11 +62,6 @@ 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

@@ -0,0 +1,14 @@
+<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

@@ -1,220 +0,0 @@
-<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,15 +13,6 @@
           <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,6 +1,13 @@
 <template>
   <div class="designer">
-    <Intro header="Welcome to Midari Profile Studio" :body="introBody" />
+    <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>
     <div class="flex-container"> <!-- ToDo: fix container -->
       <Preview :panelColor="panelColor" :backgroundColor="backgroundColor" />
       <div class="flex-item">
@@ -27,6 +34,7 @@
         ></v-color-picker>
       </div>
       <Commands :panelColor="panelColor" :backgroundColor="backgroundColor" />
+      <BadgeSelector />
     </div>
   </div>
 </template>
@@ -34,20 +42,17 @@
 <script>
 import Preview from './Preview.vue';
 import Commands from './Commands.vue';
-import Intro from './Intro.vue';
+import BadgeSelector from './BadgeSelector.vue';
 
 export default {
   name: 'Designer',
-  components: { Preview, Commands, Intro },
+  components: { Preview, Commands, BadgeSelector },
   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

@@ -1,17 +0,0 @@
-<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

@@ -1,5 +0,0 @@
-(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,12 +1,8 @@
 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: 15px 0 0;
+    margin: 25px 0 0;
     text-align: center;
   }
   

src/styles/intro.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;
-    }  
-}

src/styles/specifics.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;
+    }  
+}

vue.config.js

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