From c6b51561caa8e240298e7995caae460023a4380d Mon Sep 17 00:00:00 2001
From: Nikita Krupin <krupin.nikita0110@gmail.com>
Date: Sun, 12 Dec 2021 18:32:42 -0500
Subject: [PATCH] files linted, multiword-component rule turned off

---
 Website/.eslintrc.js           |  45 +++++++-------
 Website/README.md              |   7 +--
 Website/layouts/default.vue    |  96 ++++++++++++++++--------------
 Website/layouts/error.vue      |  30 +++++-----
 Website/nuxt.config.js         |  63 ++++++++++----------
 Website/pages/donate.vue       |  44 +++++++-------
 Website/pages/faq.vue          |  80 +++++++++++++------------
 Website/pages/index.vue        | 104 ++++++++++++++++++++-------------
 Website/pages/install.vue      |  87 +++++++++++++++++----------
 Website/pages/links.vue        |  60 ++++++++++---------
 Website/pages/pay/crypto.vue   |  57 ++++++++----------
 Website/pages/pay/yoomoney.vue |  17 ++++--
 12 files changed, 379 insertions(+), 311 deletions(-)

diff --git a/Website/.eslintrc.js b/Website/.eslintrc.js
index 5af2c36..e7109c8 100644
--- a/Website/.eslintrc.js
+++ b/Website/.eslintrc.js
@@ -1,23 +1,24 @@
 module.exports = {
-    root: true,
-    env: {
-      node: true,
-      browser: true,
-    },
-    parserOptions: {
-      parser: 'babel-eslint',
-    },
-    extends: [
-      'prettier',
-      'eslint:recommended',
-      'plugin:vue/recommended',
-      'plugin:prettier/recommended',
-    ],
-    plugins: ['vue'],
-    rules: {
-        // semi: [2, 'never'],
-        // 'prettier/prettier': ['error', { semi: false }],
-        'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
-        'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
-    },
-}
+  root: true,
+  env: {
+    node: true,
+    browser: true,
+  },
+  parserOptions: {
+    parser: "babel-eslint",
+  },
+  extends: [
+    "prettier",
+    "eslint:recommended",
+    "plugin:vue/recommended",
+    "plugin:prettier/recommended",
+  ],
+  plugins: ["vue"],
+  rules: {
+    "vue/multi-word-component-names": 0,
+    "no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
+    "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",
+    // 'prettier/prettier': ['error', { semi: false }],
+    // semi: [2, 'never'],
+  },
+};
diff --git a/Website/README.md b/Website/README.md
index 09493af..cc42b01 100644
--- a/Website/README.md
+++ b/Website/README.md
@@ -29,10 +29,9 @@ For detailed explanation on how things work, check out the [documentation](https
 
 >`Ctrl(Cmd)` + `Shift` + `P` > Open Settings (JSON)
 ```
-"editor.formatOnSave": false,
-"eslint.autoFixOnSave": true,
-"eslint.options: {
-    "extensions": [ ".js", ".vue" ]
+"editor.formatOnSave": true,
+"editor.codeActionsOnSave": {
+    "source.fixAll.eslint": true
 }
 "vetur.validation.template": false,
 ```
diff --git a/Website/layouts/default.vue b/Website/layouts/default.vue
index 90436be..96137d8 100644
--- a/Website/layouts/default.vue
+++ b/Website/layouts/default.vue
@@ -1,6 +1,5 @@
 <template>
   <v-app dark>
-
     <!-- height = 4rem, margin-y = 1rem -->
     <v-app-bar app flat class="topBar fly-in-from-top my-4 mx-auto">
       <v-tabs centered center-active color="primary" router show-arrows>
@@ -9,30 +8,65 @@
         </v-tab>
       </v-tabs>
     </v-app-bar>
-    
-    <!-- abstract background -->
-    <v-img src="/ui/abstract.svg" style="position: absolute; left: 0; right: 0; width: 100%; height: 100%;" />
 
-    <v-main style="padding-top: 4rem !important;">
+    <!-- abstract background -->
+    <v-img
+      src="/ui/abstract.svg"
+      style="position: absolute; left: 0; right: 0; width: 100%; height: 100%"
+    />
+
+    <v-main style="padding-top: 4rem !important">
       <!-- min-height helps keep content centered, use .debug to to see it -->
       <center
         class="py-8 mx-auto d-flex flex-column justify-center items-center"
-        style="width: 90vw; min-height: calc(100vh - 8rem);">
-          <nuxt />
+        style="width: 90vw; min-height: calc(100vh - 8rem)"
+      >
+        <nuxt />
       </center>
     </v-main>
   </v-app>
 </template>
 
+<script>
+export default {
+  data: () => ({
+    links: [
+      {
+        name: "Home",
+        path: "/",
+      },
+      {
+        name: "Install",
+        path: "/install",
+      },
+      {
+        name: "FAQ",
+        path: "/faq",
+      },
+      {
+        name: "Donate",
+        path: "/donate",
+      },
+      {
+        name: "Links",
+        path: "/links",
+      },
+    ],
+  }),
+};
+</script>
+
 <style>
-html, body {
+html,
+body {
   height: 100%;
   background: #111; /* for MacOS/iOS overscroll */
   height: -webkit-fill-available;
   overflow: auto;
 }
 
-.debug { /* usage: add class="debug" to the element */
+.debug {
+  /* usage: add class="debug" to the element */
   outline: 2px solid red;
 }
 
@@ -45,20 +79,23 @@ html, body {
   width: fit-content !important;
   background-color: #222 !important;
   border-radius: 1rem !important;
-  border-radius: .75rem;
+  border-radius: 0.75rem;
   overflow: hidden;
 }
 .title-text {
   font-size: 3rem;
 }
-@media (max-width: 768px) { /* mobile */
+@media (max-width: 768px) {
+  /* mobile */
   .title-text {
     font-size: 2rem;
   }
-  .topBar { 
-    width: calc(100vw - 2rem) !important; /* (2rem = mx-4) 1rem on left, 1rem on right */
+  .topBar {
+    width: calc(
+      100vw - 2rem
+    ) !important; /* (2rem = mx-4) 1rem on left, 1rem on right */
     padding: 0;
-  } 
+  }
 }
 
 /* animations and all that */
@@ -102,7 +139,7 @@ html, body {
 .fly-in-from-top {
   opacity: 0;
   transform: scale(0.8) translateY(-12rem);
-  animation: fly-in-from-top 0.5s .3s ease forwards;
+  animation: fly-in-from-top 0.5s 0.3s ease forwards;
 }
 
 @keyframes fly-in-from-top {
@@ -161,32 +198,3 @@ html, body {
   }
 }
 </style>
-
-<script>
-  export default {
-    data: () => ({
-      links: [
-        {
-          name: 'Home',
-          path: '/'
-        },
-        {
-          name: 'Install',
-          path: '/install'
-        },
-        {
-          name: 'FAQ',
-          path: '/faq'
-        },
-        {
-          name: 'Donate',
-          path: '/donate'
-        },
-        {
-          name: 'Links',
-          path: '/links'
-        },
-      ],
-    }),
-  }
-</script>
\ No newline at end of file
diff --git a/Website/layouts/error.vue b/Website/layouts/error.vue
index ae22f7c..d99a426 100644
--- a/Website/layouts/error.vue
+++ b/Website/layouts/error.vue
@@ -6,35 +6,33 @@
     <h1 v-else>
       {{ otherError }}
     </h1>
-    <NuxtLink to="/">
-      Home page
-    </NuxtLink>
+    <NuxtLink to="/"> Home page </NuxtLink>
   </v-app>
 </template>
 
 <script>
 export default {
-  layout: 'empty',
+  layout: "empty",
   props: {
     error: {
       type: Object,
-      default: null
-    }
+      default: null,
+    },
   },
-  data () {
+  data() {
     return {
-      pageNotFound: '404 Not Found',
-      otherError: 'An error occurred'
-    }
+      pageNotFound: "404 Not Found",
+      otherError: "An error occurred",
+    };
   },
-  head () {
+  head() {
     const title =
-      this.error.statusCode === 404 ? this.pageNotFound : this.otherError
+      this.error.statusCode === 404 ? this.pageNotFound : this.otherError;
     return {
-      title
-    }
-  }
-}
+      title,
+    };
+  },
+};
 </script>
 
 <style scoped>
diff --git a/Website/nuxt.config.js b/Website/nuxt.config.js
index 57e644d..9860f32 100644
--- a/Website/nuxt.config.js
+++ b/Website/nuxt.config.js
@@ -1,39 +1,42 @@
-import colors from 'vuetify/es5/util/colors'
+import colors from "vuetify/es5/util/colors";
 
 export default {
   // Global page headers: https://go.nuxtjs.dev/config-head
   head: {
-    titleTemplate: 'Return YouTube Dislike',
-    title: 'Return YouTube Dislike',
+    titleTemplate: "Return YouTube Dislike",
+    title: "Return YouTube Dislike",
     htmlAttrs: {
-      lang: 'en'
+      lang: "en",
     },
     meta: [
-      { charset: 'utf-8' },
-      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
+      { charset: "utf-8" },
+      { name: "viewport", content: "width=device-width, initial-scale=1" },
 
-      { hid: 'description', name: 'description', content: 'An extension that returns dislike statistics to YouTube. For now, it only works if a video had public display of dislikes enabled before YouTube removed dislike stats. ' },
-      { hid: 'og:image', name: 'og:image', content: '/logo.png' },
-      { hid: 'theme-color', name: 'theme-color', content: '#ff0000' }
+      {
+        hid: "description",
+        name: "description",
+        content:
+          "An extension that returns dislike statistics to YouTube. For now, it only works if a video had public display of dislikes enabled before YouTube removed dislike stats. ",
+      },
+      { hid: "og:image", name: "og:image", content: "/logo.png" },
+      { hid: "theme-color", name: "theme-color", content: "#ff0000" },
     ],
     link: [
-      { rel: 'icon', type: 'image/svg+xml', href: '/logo.svg' },
-      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
-    ]
+      { rel: "icon", type: "image/svg+xml", href: "/logo.svg" },
+      { rel: "icon", type: "image/x-icon", href: "/favicon.ico" },
+    ],
   },
 
-  target: 'static',
+  target: "static",
   css: [],
   plugins: [],
   components: true,
-  buildModules: [
-    '@nuxtjs/vuetify',
-  ],
+  buildModules: ["@nuxtjs/vuetify"],
   modules: [],
 
   // Vuetify module configuration: https://go.nuxtjs.dev/config-vuetify
   vuetify: {
-    customVariables: ['~/assets/variables.scss'],
+    customVariables: ["~/assets/variables.scss"],
     theme: {
       dark: true,
       themes: {
@@ -44,25 +47,23 @@ export default {
           info: colors.teal.lighten1,
           warning: colors.amber.base,
           error: colors.deepOrange.accent4,
-          success: colors.green.accent3
-        }
-      }
-    }
+          success: colors.green.accent3,
+        },
+      },
+    },
   },
 
-
   build: {
-    extend (config, ctx) {
+    extend(config, ctx) {
       // Run ESLint on save (dev-only)
       if (ctx.isDev && ctx.isClient) {
         config.module.rules.push({
-          enforce: 'pre',
+          enforce: "pre",
           test: /\.(js|vue)$/,
-          loader: 'eslint-loader',
-          exclude: /(node_modules)/
-        })
+          loader: "eslint-loader",
+          exclude: /(node_modules)/,
+        });
       }
-    }
-  }
-
-}
+    },
+  },
+};
diff --git a/Website/pages/donate.vue b/Website/pages/donate.vue
index 9a2cefe..eb46ca2 100644
--- a/Website/pages/donate.vue
+++ b/Website/pages/donate.vue
@@ -1,37 +1,39 @@
 <template>
   <div>
-
-    <h1 class="title-text" >Donate</h1>
-    <p style="color: #999; margin-top: .5rem; margin-bottom: 1.5rem;">You can support our efforts to keep the internet free with a donation!</p>
+    <h1 class="title-text">Donate</h1>
+    <p style="color: #999; margin-top: 0.5rem; margin-bottom: 1.5rem">
+      You can support our efforts to keep the internet free with a donation!
+    </p>
     <v-btn class="mainAltButton mb-2" :href="patreonLink" target="_blank">
-      <v-icon style="margin-right: 0.5em;">mdi-patreon</v-icon>
+      <v-icon style="margin-right: 0.5em">mdi-patreon</v-icon>
       Patreon
     </v-btn>
     <v-btn class="mainAltButton mb-2" :to="yoomoneyLink">
-      <v-icon style="margin-right: 0.5em;">mdi-cash-multiple</v-icon>
+      <v-icon style="margin-right: 0.5em">mdi-cash-multiple</v-icon>
       Yoomoney
     </v-btn>
     <v-btn class="mainAltButton mb-2" :to="cryptoLink">
-      <v-icon style="margin-right: 0.5em;">mdi-bitcoin</v-icon>
+      <v-icon style="margin-right: 0.5em">mdi-bitcoin</v-icon>
       Crypto
     </v-btn>
-
   </div>
 </template>
 
 <script>
-  export default {
-    transition(to, from) {
-      if (!from) return 'swoop-in'
-      let routes = ['index', 'install', 'faq', 'donate', 'links']
-      if (routes.indexOf(to.name) < 0) return 'swoop-out'
-      if (routes.indexOf(from.name) < 0) return 'swoop-in'
-      return routes.indexOf(to.name) > routes.indexOf(from.name) ? 'swoop-left' : 'swoop-right'
-    },
-    data: () => ({
-      patreonLink: "https://www.patreon.com/returnyoutubedislike",
-      yoomoneyLink: "/pay/yoomoney",
-      cryptoLink: "/pay/crypto"
-    })
-  }
+export default {
+  transition(to, from) {
+    if (!from) return "swoop-in";
+    let routes = ["index", "install", "faq", "donate", "links"];
+    if (routes.indexOf(to.name) < 0) return "swoop-out";
+    if (routes.indexOf(from.name) < 0) return "swoop-in";
+    return routes.indexOf(to.name) > routes.indexOf(from.name)
+      ? "swoop-left"
+      : "swoop-right";
+  },
+  data: () => ({
+    patreonLink: "https://www.patreon.com/returnyoutubedislike",
+    yoomoneyLink: "/pay/yoomoney",
+    cryptoLink: "/pay/crypto",
+  }),
+};
 </script>
diff --git a/Website/pages/faq.vue b/Website/pages/faq.vue
index 99d266d..71d2080 100644
--- a/Website/pages/faq.vue
+++ b/Website/pages/faq.vue
@@ -1,54 +1,60 @@
 <template>
   <div>
-
-    <h1 class="title-text" >Frequently Asked Questions</h1>
-    <p style="color: #999; margin-top: .5rem; margin-bottom: 1.5rem;">Still have questions? Feel free to join our Discord!</p>
+    <h1 class="title-text">Frequently Asked Questions</h1>
+    <p style="color: #999; margin-top: 0.5rem; margin-bottom: 1.5rem">
+      Still have questions? Feel free to join our Discord!
+    </p>
 
     <v-expansion-panels class="col-xs-12 col-sm-11 col-md-9 col-lg-7">
-      <v-expansion-panel v-for="(item, i) in items" :key="i" >
+      <v-expansion-panel v-for="(item, i) in items" :key="i">
         <v-expansion-panel-header>
           {{ item.question }}
         </v-expansion-panel-header>
         <v-expansion-panel-content class="text-left">
-          <hr style="border-color: #444;">
-          <br>
+          <hr style="border-color: #444" />
+          <br />
           {{ item.answer }}
         </v-expansion-panel-content>
       </v-expansion-panel>
     </v-expansion-panels>
-
   </div>
 </template>
 
 <script>
-  export default {
-    transition(to, from) {
-      if (!from) return 'swoop-in'
-      let routes = ['index', 'install', 'faq', 'donate', 'links']
-      if (routes.indexOf(to.name) < 0) return 'swoop-out'
-      if (routes.indexOf(from.name) < 0) return 'swoop-in'
-      return routes.indexOf(to.name) > routes.indexOf(from.name) ? 'swoop-left' : 'swoop-right'
-    },
-    data: () => ({
-      items: [
-        { 
-          question: "Where does the extension get its data?",
-          answer: "A combination of Google's API data and scraped data. We save all available data to our DB so it can be made available after Google removes dislike counts from their API."
-        },
-        { 
-          question: "Why isn't the dislike count updating?",
-          answer: "Right now video dislikes are cached and they aren't updated very frequently. Currently this is set to update once every 2–3 days.  This isn't ideal and we are working on improving how often we can update them."
-        },
-        { 
-          question: "How does this work?",
-          answer: "The extension collects the video ID of the video you are watching, fetches the dislike (and other fields like views, likes etc) using our API, if this is the first time the video was fetched by our API, it will use the YouTube API to get the data, then store it in the database for caching (cached for around 2-3 days) and archiving purposes, and returns it to you. The extension then displays the dislike count and ratio on the page."
-        },
-        { 
-          question: "What will happen after the YouTube API stops returning the dislike count?",
-          answer: "The backend will switch to using a combination of archived dislike stats, estimates extrapolated from extension user data, and estimates based on view/like ratios for videos whose dislikes weren't archived as well as outdated dislike count archives."
-        },
-      ],
-    }),
-  
-  }
+export default {
+  transition(to, from) {
+    if (!from) return "swoop-in";
+    let routes = ["index", "install", "faq", "donate", "links"];
+    if (routes.indexOf(to.name) < 0) return "swoop-out";
+    if (routes.indexOf(from.name) < 0) return "swoop-in";
+    return routes.indexOf(to.name) > routes.indexOf(from.name)
+      ? "swoop-left"
+      : "swoop-right";
+  },
+  data: () => ({
+    items: [
+      {
+        question: "Where does the extension get its data?",
+        answer:
+          "A combination of Google's API data and scraped data. We save all available data to our DB so it can be made available after Google removes dislike counts from their API.",
+      },
+      {
+        question: "Why isn't the dislike count updating?",
+        answer:
+          "Right now video dislikes are cached and they aren't updated very frequently. Currently this is set to update once every 2–3 days.  This isn't ideal and we are working on improving how often we can update them.",
+      },
+      {
+        question: "How does this work?",
+        answer:
+          "The extension collects the video ID of the video you are watching, fetches the dislike (and other fields like views, likes etc) using our API, if this is the first time the video was fetched by our API, it will use the YouTube API to get the data, then store it in the database for caching (cached for around 2-3 days) and archiving purposes, and returns it to you. The extension then displays the dislike count and ratio on the page.",
+      },
+      {
+        question:
+          "What will happen after the YouTube API stops returning the dislike count?",
+        answer:
+          "The backend will switch to using a combination of archived dislike stats, estimates extrapolated from extension user data, and estimates based on view/like ratios for videos whose dislikes weren't archived as well as outdated dislike count archives.",
+      },
+    ],
+  }),
+};
 </script>
diff --git a/Website/pages/index.vue b/Website/pages/index.vue
index cc9c5d7..4ceda36 100644
--- a/Website/pages/index.vue
+++ b/Website/pages/index.vue
@@ -1,36 +1,75 @@
 <template>
   <div>
-
-    <svg id="thumbslogo" class="mb-4" width="150" height="150" viewBox="0 0 24 24" overflow="visible" >
-      <path d="M14.9 3H6c-.9 0-1.6.5-1.9 1.2l-3 7c-.1.3-.1.5-.1.7v2c0 1.1.9 2 2 2h6.3l-.9 4.5c-.1.5 0 1 .4 1.4l1.1 1.1 6.5-6.6c.4-.4.6-.9.6-1.4V5c-.1-1.1-1-2-2.1-2zm7.4 12.8h-2.9c-.4 0-.7-.3-.7-.7V3.9c0-.4.3-.7.7-.7h2.9c.4 0 .7.3.7.7V15c0 .4-.3.8-.7.8z"/>
-      <path id="plarrow" d="m8 12.5 5.1-2.9L8 6.7v5.8z" fill="#fff" stroke="none"/>
+    <svg
+      id="thumbslogo"
+      class="mb-4"
+      width="150"
+      height="150"
+      viewBox="0 0 24 24"
+      overflow="visible"
+    >
+      <path
+        d="M14.9 3H6c-.9 0-1.6.5-1.9 1.2l-3 7c-.1.3-.1.5-.1.7v2c0 1.1.9 2 2 2h6.3l-.9 4.5c-.1.5 0 1 .4 1.4l1.1 1.1 6.5-6.6c.4-.4.6-.9.6-1.4V5c-.1-1.1-1-2-2.1-2zm7.4 12.8h-2.9c-.4 0-.7-.3-.7-.7V3.9c0-.4.3-.7.7-.7h2.9c.4 0 .7.3.7.7V15c0 .4-.3.8-.7.8z"
+      />
+      <path
+        id="plarrow"
+        d="m8 12.5 5.1-2.9L8 6.7v5.8z"
+        fill="#fff"
+        stroke="none"
+      />
     </svg>
 
-    <h1 class="title-text" >Return YouTube Dislike</h1>
+    <h1 class="title-text">Return YouTube Dislike</h1>
     <div class="mb-4" style="color: #999">
-      <p style="margin-top: 0">Browser extension and an API that show you dislikes on youtube</p>
+      <p style="margin-top: 0">
+        Browser extension and an API that show you dislikes on youtube
+      </p>
     </div>
 
-    <v-btn :to="installLink" color="primary px-6" style="font-size: 1.5em; padding: 1em; margin-bottom: 0.5em;">
+    <v-btn
+      :to="installLink"
+      color="primary px-6"
+      style="font-size: 1.5em; padding: 1em; margin-bottom: 0.5em"
+    >
       <v-icon large class="mr-6">mdi-tray-arrow-down</v-icon>
       Install
     </v-btn>
 
-    <br>
+    <br />
 
     <v-btn class="mainAltButton" :href="githubLink" target="_blank">
-      <v-icon style="margin-right: 0.5em;">mdi-github</v-icon>
+      <v-icon style="margin-right: 0.5em">mdi-github</v-icon>
       GitHub
     </v-btn>
 
     <v-btn class="mainAltButton" :href="discordLink" target="_blank">
-      <v-icon style="margin-right: 0.5em;">mdi-discord</v-icon>
+      <v-icon style="margin-right: 0.5em">mdi-discord</v-icon>
       Discord
     </v-btn>
-
   </div>
 </template>
 
+<script>
+export default {
+  transition(to, from) {
+    if (!from) return "swoop-in";
+    let routes = ["index", "install", "faq", "donate", "links"];
+    if (routes.indexOf(to.name) < 0) return "swoop-out";
+    if (routes.indexOf(from.name) < 0) return "swoop-in";
+    return routes.indexOf(to.name) > routes.indexOf(from.name)
+      ? "swoop-left"
+      : "swoop-right";
+  },
+  data() {
+    return {
+      installLink: "/install",
+      githubLink: "https://github.com/Anarios/return-youtube-dislike",
+      discordLink: "https://discord.gg/mYnESY4Md5",
+    };
+  },
+};
+</script>
+
 <style scoped>
 #thumbslogo {
   opacity: 0;
@@ -38,21 +77,23 @@
   stroke: #f44;
   transition-property: opacity, transform;
   transform: scale(0) rotate(180deg);
-  animation: popin 1s .3s ease-in-out 1 forwards, tap .3s 1.7s ease-in-out 1 forwards;
+  animation: popin 1s 0.3s ease-in-out 1 forwards,
+    tap 0.3s 1.7s ease-in-out 1 forwards;
 }
 
 #plarrow {
   opacity: 0;
   transform: translateX(-0.25rem);
   transition-property: opacity, transform;
-  animation: slidin .5s 1.7s ease 1 forwards;
+  animation: slidin 0.5s 1.7s ease 1 forwards;
 }
 
 @keyframes slidin {
   0% {
     opacity: 0;
     transform: translateX(-0.25rem);
-  } 100% {
+  }
+  100% {
     opacity: 1;
     transform: translateX(0);
   }
@@ -62,7 +103,8 @@
   0% {
     transform: rotate(180deg) scale(0);
     opacity: 0;
-  } 100% {
+  }
+  100% {
     transform: rotate(0deg) scale(1);
     opacity: 1;
   }
@@ -71,7 +113,8 @@
 @keyframes fadein {
   0% {
     opacity: 0;
-  } 100% {
+  }
+  100% {
     opacity: 1;
   }
 }
@@ -81,11 +124,13 @@
     fill: transparent;
     stroke: #f44;
     transform: scale(1);
-  } 25% {
+  }
+  25% {
     fill: #f44;
     stroke: none;
-    transform: scale(.85);
-  } 100% {
+    transform: scale(0.85);
+  }
+  100% {
     fill: #f44;
     stroke: none;
     transform: scale(1);
@@ -110,26 +155,7 @@
     opacity: 0;
     transform: none;
     transition-property: opacity;
-    animation: fadein .5s .5s ease 1 forwards;
+    animation: fadein 0.5s 0.5s ease 1 forwards;
   }
 }
 </style>
-
-<script>
-export default {
-  transition(to, from) {
-    if (!from) return 'swoop-in'
-    let routes = ['index', 'install', 'faq', 'donate', 'links']
-    if (routes.indexOf(to.name) < 0) return 'swoop-out'
-    if (routes.indexOf(from.name) < 0) return 'swoop-in'
-    return routes.indexOf(to.name) > routes.indexOf(from.name) ? 'swoop-left' : 'swoop-right'
-  },
-  data() {
-    return {
-      installLink: "/install",
-      githubLink: "https://github.com/Anarios/return-youtube-dislike",
-      discordLink: "https://discord.gg/mYnESY4Md5",
-    }
-  }
-}
-</script>
diff --git a/Website/pages/install.vue b/Website/pages/install.vue
index 6215111..ba84b06 100644
--- a/Website/pages/install.vue
+++ b/Website/pages/install.vue
@@ -1,79 +1,102 @@
 <template>
   <div>
+    <h1 class="title-text">Select Your Platform</h1>
 
-    <h1 class="title-text" >Select Your Platform</h1>
-
-    <div style="color: #999;">
-      <p style=" margin-top: .5rem; margin-bottom: 0;"> This is an <b>ALPHA version!</b> It may be slow. It may be buggy.</p>
-      <p style="margin-bottom: 1rem;">Available for Firefox and all Chromium browsers (Chrome/Edge/Opera/Brave).</p>
+    <div style="color: #999">
+      <p style="margin-top: 0.5rem; margin-bottom: 0">
+        This is an <b>ALPHA version!</b> It may be slow. It may be buggy.
+      </p>
+      <p style="margin-bottom: 1rem">
+        Available for Firefox and all Chromium browsers
+        (Chrome/Edge/Opera/Brave).
+      </p>
     </div>
 
     <v-btn class="mainAltButton mb-2" :href="firefoxLink" target="_blank">
-      <v-icon style="margin-right: 0.5em;">mdi-firefox</v-icon>
+      <v-icon style="margin-right: 0.5em">mdi-firefox</v-icon>
       Firefox
     </v-btn>
 
     <v-btn class="mainAltButton mb-2" :href="chromeLink" target="_blank">
-      <v-icon style="margin-right: 0.5em;">mdi-google-chrome</v-icon>
+      <v-icon style="margin-right: 0.5em">mdi-google-chrome</v-icon>
       Chrome
     </v-btn>
 
     <v-btn class="mainAltButton mb-2" :href="chromeLink" target="_blank">
-      <v-icon style="margin-right: 0.5em;">mdi-microsoft-edge</v-icon>
+      <v-icon style="margin-right: 0.5em">mdi-microsoft-edge</v-icon>
       Edge
     </v-btn>
 
     <v-btn class="mainAltButton mb-2" :href="chromeLink" target="_blank">
-      <v-icon style="margin-right: 0.5em;">mdi-opera</v-icon>
+      <v-icon style="margin-right: 0.5em">mdi-opera</v-icon>
       Opera
     </v-btn>
 
     <v-btn class="mainAltButton mb-2" :href="chromeLink" target="_blank">
       <!-- brave logo icon -->
-      <svg style="margin-right: 1rem;" height="20" width="20" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="#fff"><path d="m15.68 0 2.1 2.38s1.84-.51 2.7.36c.87.87 1.59 1.64 1.59 1.64l-.56 1.38.71 2.04-2.35 8.96c-.48 1.92-.82 2.66-2.2 3.63-1.38.97-3.88 2.66-4.29 2.92-.4.25-.92.69-1.38.69-.46 0-.97-.44-1.38-.7a185.8 185.8 0 0 1-4.3-2.9c-1.37-.98-1.7-1.72-2.19-3.64L1.78 7.8l.71-2.04-.56-1.38s.72-.77 1.59-1.64c.87-.87 2.7-.36 2.7-.36L8.33 0h7.36zM12 14.94c-.14 0-1.04.31-1.76.69-.72.37-1.24.63-1.4.74-.17.1-.07.3.08.4.15.11 2.2 1.7 2.4 1.87.2.18.48.47.68.47.2 0 .5-.3.69-.47.2-.17 2.24-1.76 2.4-1.86.14-.11.24-.3.08-.41l-1.41-.74a8.18 8.18 0 0 0-1.76-.7zm0-11.28s-.4 0-1.02.2-1.28.46-1.59.46c-.3 0-2.58-.43-2.58-.43s-2.7 3.26-2.7 3.96c0 .7.35.88.69 1.24l2.02 2.15c.2.2.59.51.35 1.07-.23.55-.58 1.26-.2 1.97.4.72 1.05 1.2 1.47 1.12.42-.08 1.42-.6 1.78-.83.36-.24 1.52-1.2 1.52-1.56 0-.36-1.2-1.02-1.42-1.17-.22-.15-1.22-.72-1.24-.95-.02-.22-.02-.29.28-.85.3-.56.83-1.3.74-1.8-.09-.5-.95-.75-1.56-.98-.62-.24-1.8-.67-1.95-.74-.15-.07-.1-.14.34-.18.45-.04 1.72-.21 2.3-.05.57.16 1.54.4 1.62.53.08.13.15.14.07.58-.08.45-.5 2.58-.54 2.96-.04.38-.12.63.29.72.4.1 1.1.26 1.33.26s.93-.16 1.33-.26c.41-.09.33-.34.3-.72-.05-.38-.47-2.51-.55-2.96-.08-.45-.01-.45.07-.58.08-.13 1.06-.37 1.63-.53.57-.16 1.85 0 2.3.05.44.04.48.1.33.18-.15.07-1.33.5-1.95.74-.61.23-1.47.49-1.56.98-.1.5.44 1.24.74 1.8s.3.63.29.85c-.02.23-1.03.8-1.25.95-.22.15-1.41.8-1.41 1.17 0 .37 1.15 1.32 1.51 1.56.37.23 1.36.75 1.78.83.42.08 1.08-.4 1.46-1.12.39-.71.04-1.42-.2-1.97-.23-.56.17-.87.36-1.07L19.2 9.1c.34-.36.68-.54.68-1.24s-2.7-3.96-2.7-3.96-2.27.43-2.57.43c-.3 0-.97-.25-1.59-.46-.61-.2-1.02-.2-1.02-.2z"/></svg>
+      <svg
+        style="margin-right: 1rem"
+        height="20"
+        width="20"
+        viewBox="0 0 24 24"
+        xmlns="http://www.w3.org/2000/svg"
+        fill="#fff"
+      >
+        <path
+          d="m15.68 0 2.1 2.38s1.84-.51 2.7.36c.87.87 1.59 1.64 1.59 1.64l-.56 1.38.71 2.04-2.35 8.96c-.48 1.92-.82 2.66-2.2 3.63-1.38.97-3.88 2.66-4.29 2.92-.4.25-.92.69-1.38.69-.46 0-.97-.44-1.38-.7a185.8 185.8 0 0 1-4.3-2.9c-1.37-.98-1.7-1.72-2.19-3.64L1.78 7.8l.71-2.04-.56-1.38s.72-.77 1.59-1.64c.87-.87 2.7-.36 2.7-.36L8.33 0h7.36zM12 14.94c-.14 0-1.04.31-1.76.69-.72.37-1.24.63-1.4.74-.17.1-.07.3.08.4.15.11 2.2 1.7 2.4 1.87.2.18.48.47.68.47.2 0 .5-.3.69-.47.2-.17 2.24-1.76 2.4-1.86.14-.11.24-.3.08-.41l-1.41-.74a8.18 8.18 0 0 0-1.76-.7zm0-11.28s-.4 0-1.02.2-1.28.46-1.59.46c-.3 0-2.58-.43-2.58-.43s-2.7 3.26-2.7 3.96c0 .7.35.88.69 1.24l2.02 2.15c.2.2.59.51.35 1.07-.23.55-.58 1.26-.2 1.97.4.72 1.05 1.2 1.47 1.12.42-.08 1.42-.6 1.78-.83.36-.24 1.52-1.2 1.52-1.56 0-.36-1.2-1.02-1.42-1.17-.22-.15-1.22-.72-1.24-.95-.02-.22-.02-.29.28-.85.3-.56.83-1.3.74-1.8-.09-.5-.95-.75-1.56-.98-.62-.24-1.8-.67-1.95-.74-.15-.07-.1-.14.34-.18.45-.04 1.72-.21 2.3-.05.57.16 1.54.4 1.62.53.08.13.15.14.07.58-.08.45-.5 2.58-.54 2.96-.04.38-.12.63.29.72.4.1 1.1.26 1.33.26s.93-.16 1.33-.26c.41-.09.33-.34.3-.72-.05-.38-.47-2.51-.55-2.96-.08-.45-.01-.45.07-.58.08-.13 1.06-.37 1.63-.53.57-.16 1.85 0 2.3.05.44.04.48.1.33.18-.15.07-1.33.5-1.95.74-.61.23-1.47.49-1.56.98-.1.5.44 1.24.74 1.8s.3.63.29.85c-.02.23-1.03.8-1.25.95-.22.15-1.41.8-1.41 1.17 0 .37 1.15 1.32 1.51 1.56.37.23 1.36.75 1.78.83.42.08 1.08-.4 1.46-1.12.39-.71.04-1.42-.2-1.97-.23-.56.17-.87.36-1.07L19.2 9.1c.34-.36.68-.54.68-1.24s-2.7-3.96-2.7-3.96-2.27.43-2.57.43c-.3 0-.97-.25-1.59-.46-.61-.2-1.02-.2-1.02-.2z"
+        />
+      </svg>
       Brave
     </v-btn>
 
-    <h3 style="margin-top: 3em; margin-bottom:0">Other Platforms</h3>
+    <h3 style="margin-top: 3em; margin-bottom: 0">Other Platforms</h3>
     <div style="color: #999">
-      <p style="margin-top: .5rem; margin-bottom:.5rem;">If your browser is not yet supported, try this UserScript.</p>
+      <p style="margin-top: 0.5rem; margin-bottom: 0.5rem">
+        If your browser is not yet supported, try this UserScript.
+      </p>
     </div>
 
     <v-btn class="mainAltButton" :href="scriptLink" target="_blank">
-      <v-icon style="margin-right: 0.5em;">mdi-script-text-outline</v-icon>
-      Userscript &nbsp;<div style="font-size: .55rem;"> (Tampermonkey)</div>
+      <v-icon style="margin-right: 0.5em">mdi-script-text-outline</v-icon>
+      Userscript &nbsp;
+      <div style="font-size: 0.55rem">(Tampermonkey)</div>
     </v-btn>
 
-    <h3 style="margin-top: 3em;">Third Party Implementations</h3>
-    <div style="color: #999;">
-      <p style="margin-top: .5rem; margin-bottom: .5rem;">No liability on our side, use at your own risk.</p>
+    <h3 style="margin-top: 3em">Third Party Implementations</h3>
+    <div style="color: #999">
+      <p style="margin-top: 0.5rem; margin-bottom: 0.5rem">
+        No liability on our side, use at your own risk.
+      </p>
     </div>
     <v-btn class="mainAltButton" :href="iosJailbreakLink" target="_blank">
-      <v-icon style="margin-right: 0.5em;">mdi-apple</v-icon>
+      <v-icon style="margin-right: 0.5em">mdi-apple</v-icon>
       iOS (Jailbroken)
     </v-btn>
-
-
   </div>
 </template>
 
 <script>
 export default {
   transition(to, from) {
-    if (!from) return 'swoop-in'
-    let routes = ['index', 'install', 'faq', 'donate', 'links']
-    if (routes.indexOf(to.name) < 0) return 'swoop-out'
-    if (routes.indexOf(from.name) < 0) return 'swoop-in'
-    return routes.indexOf(to.name) > routes.indexOf(from.name) ? 'swoop-left' : 'swoop-right'
+    if (!from) return "swoop-in";
+    let routes = ["index", "install", "faq", "donate", "links"];
+    if (routes.indexOf(to.name) < 0) return "swoop-out";
+    if (routes.indexOf(from.name) < 0) return "swoop-in";
+    return routes.indexOf(to.name) > routes.indexOf(from.name)
+      ? "swoop-left"
+      : "swoop-right";
   },
   data() {
     return {
-      chromeLink: "https://chrome.google.com/webstore/detail/youtube-dislike-button/gebbhagfogifgggkldgodflihgfeippi/",
-      firefoxLink: "https://addons.mozilla.org/en-US/firefox/addon/return-youtube-dislikes/",
-      scriptLink: "https://github.com/Anarios/return-youtube-dislike/raw/main/Extensions/UserScript/Return%20Youtube%20Dislike.user.js",
+      chromeLink:
+        "https://chrome.google.com/webstore/detail/youtube-dislike-button/gebbhagfogifgggkldgodflihgfeippi/",
+      firefoxLink:
+        "https://addons.mozilla.org/en-US/firefox/addon/return-youtube-dislikes/",
+      scriptLink:
+        "https://github.com/Anarios/return-youtube-dislike/raw/main/Extensions/UserScript/Return%20Youtube%20Dislike.user.js",
 
-      iosJailbreakLink: "https://repo.lillieweeb001.xyz/"
-    }
-  }
-}
+      iosJailbreakLink: "https://repo.lillieweeb001.xyz/",
+    };
+  },
+};
 </script>
diff --git a/Website/pages/links.vue b/Website/pages/links.vue
index 16c1f34..35df9ed 100644
--- a/Website/pages/links.vue
+++ b/Website/pages/links.vue
@@ -1,61 +1,67 @@
 <template>
   <div style="height: 100%">
-    
-    <h1 class="title-text" >Project Links</h1>
-          
+    <h1 class="title-text">Project Links</h1>
+
     <div style="color: #999">
-      <p style="margin-top: .5rem; margin-bottom: 1rem;">Links to the project and its developers</p>
+      <p style="margin-top: 0.5rem; margin-bottom: 1rem">
+        Links to the project and its developers
+      </p>
     </div>
 
     <v-btn class="mainAltButton" :href="githubLink" target="_blank">
-      <v-icon style="margin-right: 0.5em;">mdi-github</v-icon>
+      <v-icon style="margin-right: 0.5em">mdi-github</v-icon>
       GitHub
     </v-btn>
 
     <v-btn class="mainAltButton" :href="discordLink" target="_blank">
-      <v-icon style="margin-right: 0.5em;">mdi-discord</v-icon>
+      <v-icon style="margin-right: 0.5em">mdi-discord</v-icon>
       Discord
     </v-btn>
 
-    <h1 style="margin-top: 1em;">Contact Me</h1>
+    <h1 style="margin-top: 1em">Contact Me</h1>
 
     <v-btn class="mainAltButton" :href="emailLink" target="_blank">
-      <v-icon style="margin-right: 0.5em;">mdi-email</v-icon>
+      <v-icon style="margin-right: 0.5em">mdi-email</v-icon>
       Email
     </v-btn>
 
     <p id="credits" class="flex-row no-wrap">
       Site by <v-icon color="#555">mdi-discord</v-icon> Front#2990
-      <br>
-      <span style="color: #444; font-size: 0.75rem">& <v-icon color="#333" size="1rem">mdi-discord</v-icon> PickleNik#0864</span>
+      <br />
+      <span style="color: #444; font-size: 0.75rem"
+        >&
+        <v-icon color="#333" size="1rem">mdi-discord</v-icon>
+        PickleNik#0864</span
+      >
     </p>
-
   </div>
 </template>
 
-<style scoped>
-#credits {
-  transform: translate(0,100%);
-  color: #555;
-}
-</style>
-
 <script>
 export default {
   transition(to, from) {
-    if (!from) return 'swoop-in'
-    let routes = ['index', 'install', 'faq', 'donate', 'links']
-    if (routes.indexOf(to.name) < 0) return 'swoop-out'
-    if (routes.indexOf(from.name) < 0) return 'swoop-in'
-    return routes.indexOf(to.name) > routes.indexOf(from.name) ? 'swoop-left' : 'swoop-right'
+    if (!from) return "swoop-in";
+    let routes = ["index", "install", "faq", "donate", "links"];
+    if (routes.indexOf(to.name) < 0) return "swoop-out";
+    if (routes.indexOf(from.name) < 0) return "swoop-in";
+    return routes.indexOf(to.name) > routes.indexOf(from.name)
+      ? "swoop-left"
+      : "swoop-right";
   },
   data() {
     return {
       githubLink: "https://github.com/Anarios/return-youtube-dislike",
       discordLink: "https://discord.gg/mYnESY4Md5",
 
-      emailLink: "mailto:selivano.d@gmail.com "
-    }
-  }
-}
+      emailLink: "mailto:selivano.d@gmail.com ",
+    };
+  },
+};
 </script>
+
+<style scoped>
+#credits {
+  transform: translate(0, 100%);
+  color: #555;
+}
+</style>
diff --git a/Website/pages/pay/crypto.vue b/Website/pages/pay/crypto.vue
index c944c11..b450588 100644
--- a/Website/pages/pay/crypto.vue
+++ b/Website/pages/pay/crypto.vue
@@ -1,27 +1,15 @@
 <template>
   <v-container>
     <v-row dense>
-      <v-col
-          v-for="card in cards"
-          :key="card.title"
-          :lg="4"
-          :sm="12"
-      >
+      <v-col v-for="card in cards" :key="card.title" :lg="4" :sm="12">
         <v-card height="100%">
-
           <v-card-title>
             {{ card.title }}
           </v-card-title>
           <v-card-text style="height: 80px">
             {{ card.address }}
           </v-card-text>
-          <v-img
-              :src="card.img"
-              :contain=true
-              height="400px"
-              position="top"
-          >
-
+          <v-img :src="card.img" :contain="true" height="400px" position="top">
           </v-img>
         </v-card>
       </v-col>
@@ -31,27 +19,30 @@
 
 <script>
 export default {
-  transition (to, from) {
-    return to.name == 'crypto' ? 'swoop-in' : 'swoop-out';
+  transition(to) {
+    return to.name == "crypto" ? "swoop-in" : "swoop-out";
   },
   data: () => ({
-    cards: [{
-      title: 'Bitcoin',
-      address: 'bitcoin:bc1q90v030fu4z2hzz3x6a4zcwxuzauxkt8gjv8pws',
-      img: '/qrs/bitcoin.jpg'
-    }, {
-      title: 'Monero',
-      address: 'monero:431SM1vExRbdiq5jArCMkhey1g8kYhLYkbgkXYU4kgL6UrXNRzcXtz3HJDayph6Dcb3ErTg8ZAVqJGtS1Ya7Rr9URJ24Tbe',
-      img: '/qrs/monero.jpg'
-    }, {
-      title: 'Ethereum',
-      address: 'ethereum:0x981A99cDE3f4E1Ad49Ad84FB62Eca3606007eBEc',
-      img: '/qrs/ethereum.jpg'
-    }]
-  })
+    cards: [
+      {
+        title: "Bitcoin",
+        address: "bitcoin:bc1q90v030fu4z2hzz3x6a4zcwxuzauxkt8gjv8pws",
+        img: "/qrs/bitcoin.jpg",
+      },
+      {
+        title: "Monero",
+        address:
+          "monero:431SM1vExRbdiq5jArCMkhey1g8kYhLYkbgkXYU4kgL6UrXNRzcXtz3HJDayph6Dcb3ErTg8ZAVqJGtS1Ya7Rr9URJ24Tbe",
+        img: "/qrs/monero.jpg",
+      },
+      {
+        title: "Ethereum",
+        address: "ethereum:0x981A99cDE3f4E1Ad49Ad84FB62Eca3606007eBEc",
+        img: "/qrs/ethereum.jpg",
+      },
+    ],
+  }),
 };
 </script>
 
-<style>
-
-</style>
+<style></style>
diff --git a/Website/pages/pay/yoomoney.vue b/Website/pages/pay/yoomoney.vue
index 7f1686e..95fccc0 100644
--- a/Website/pages/pay/yoomoney.vue
+++ b/Website/pages/pay/yoomoney.vue
@@ -1,13 +1,20 @@
 <template>
   <div>
-    <iframe src="https://yoomoney.ru/quickpay/shop-widget?writer=seller&amp;targets=For%20returnyoutubedislike.com&amp;targets-hint=&amp;default-sum=&amp;button-text=13&amp;hint=&amp;successURL=&amp;quickpay=shop&amp;account=410015901550027&amp;" allowtransparency="true" scrolling="no" width="423" height="222" frameborder="0" />
+    <iframe
+      src="https://yoomoney.ru/quickpay/shop-widget?writer=seller&amp;targets=For%20returnyoutubedislike.com&amp;targets-hint=&amp;default-sum=&amp;button-text=13&amp;hint=&amp;successURL=&amp;quickpay=shop&amp;account=410015901550027&amp;"
+      allowtransparency="true"
+      scrolling="no"
+      width="423"
+      height="222"
+      frameborder="0"
+    />
   </div>
 </template>
 
 <script>
 export default {
-  transition(to, from) {
-    return to.name == 'yoomoney' ? 'swoop-in' : 'swoop-out'
+  transition(to) {
+    return to.name == "yoomoney" ? "swoop-in" : "swoop-out";
   },
-}
-</script>
\ No newline at end of file
+};
+</script>