Merge pull request #145 from PickleNik/main

Website bugfixes & improvements

9 files changed, 90 insertions, 39 deletions

diff --git a/Website/layouts/default.vue b/Website/layouts/default.vue
index ac84a9c..e9da921 100644
--- a/Website/layouts/default.vue
+++ b/Website/layouts/default.vue
@@ -1,30 +1,31 @@
 <template>
   <v-app id="inspire" dark>
-    <v-app-bar app color="lighten-2" flat>
-
-      <v-tabs centered class="ml-n9" color="primary" router>
+    <v-app-bar app flat class="glassy fly-in-from-top"
+      :class="$vuetify.breakpoint.mobile ? 'ma-4' : 'my-4 mx-auto'"
+      :style="$vuetify.breakpoint.mobile ? '' : 'width: 50%'"
+      style="border-radius: 1rem; overflow: hidden;"
+      >
+      <v-tabs centered center-active color="primary" router show-arrows>
         <v-tab v-for="link in links" :key="link.path" :to="link.path">
           {{ link.name }}
         </v-tab>
       </v-tabs>
     </v-app-bar>
+    
+    <v-img src="/ui/abstract.svg" style="position: absolute; left: 0; right: 0; width: 100%; height: 100%;" />
 
-    <v-main>
+    <v-main class="pt-4">
 
-      <v-img src="/ui/abstract.svg" style="position: absolute; top: 0; right: 0; width: 100%; height: 100%;" />
-      
+      <section style="height: calc(100vh - 1rem); padding-top: 5rem; padding-bottom: 5rem; overflow-y: auto;">
+          <center
+            class="mx-auto d-flex flex-column justify-center items-center"
+            style="width: 90vw; min-height: 100%; overflow-y: scroll;">
 
-      <section style="position: relative; height: 100%;">
-        <div class="center" style="width: 90vw;">
-          <center style="width: 90vw">
-            
             <nuxt />
 
           </center>
-        </div>
       </section>
 
-
     </v-main>
   </v-app>
 </template>
@@ -34,18 +35,34 @@ html, body {
   overflow: hidden;
 }
 
-section {
-  height: 90vh;
-  width: 100vw;
-}
 .mainAltButton {
   margin: 0.25em;
 }
-.center {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
+
+/* Glassmorphism effect */
+.glassy {
+  backdrop-filter: blur(16px) saturate(180%);
+  -webkit-backdrop-filter: blur(16px) saturate(180%);
+  background-color: rgba(42, 42, 42, 0.75) !important;
+  border-radius: 12px;
+  /* border: 1px solid rgba(255, 255, 255, 0.125); */
+}
+
+.fly-in-from-top {
+  opacity: 0;
+  transform: scale(0.8) translateY(-200%);
+  animation: fly-in-from-top 0.5s .3s ease forwards;
+}
+
+@keyframes fly-in-from-top {
+  0% {
+    opacity: 0;
+    transform: scale(0.8) translateY(-200%);
+  }
+  100% {
+    opacity: 1;
+    transform: scale(1) translateY(0);
+  }
 }
 </style>
 
diff --git a/Website/pages/donate.vue b/Website/pages/donate.vue
index 7b5125e..9176f31 100644
--- a/Website/pages/donate.vue
+++ b/Website/pages/donate.vue
@@ -1,8 +1,8 @@
 <template>
   <div>
     
-    <h1 style="font-size: 3em; margin-bottom: 0em;">Donate</h1>
-    <p style="color: #999; margin-bottom: 3em;">You can support our efforts to keep the internet free with a donation!</p>
+    <h1 :style="$vuetify.breakpoint.xs ? 'font-size: 2rem;' : 'font-size: 3rem;'" >Donate</h1>
+    <p style="color: #999; margin-top: .5rem; margin-bottom: 2rem;">You can support our efforts to keep the internet free with a donation!</p>
     <v-btn class="mainAltButton" :href="patreonLink" target="_blank">
       <v-icon style="margin-right: 0.5em;">mdi-patreon</v-icon>
       Patreon
diff --git a/Website/pages/faq.vue b/Website/pages/faq.vue
index 5e40638..8a294e7 100644
--- a/Website/pages/faq.vue
+++ b/Website/pages/faq.vue
@@ -2,8 +2,8 @@
   <div>
     
 
-    <h1 style="font-size: 3em; margin-bottom: 0em;">Frequently Asked Questions</h1>
-    <p style="color: #999; margin-bottom: 3em;">Still have questions? Feel free to join our Discord!</p>
+    <h1 :style="$vuetify.breakpoint.xs ? 'font-size: 2rem;' : 'font-size: 3rem;'" >Frequently Asked Questions</h1>
+    <p style="color: #999; margin-top: .5rem; margin-bottom: 2rem;">Still have questions? Feel free to join our Discord!</p>
 
     <v-expansion-panels focusable>
       <v-expansion-panel v-for="(item, i) in items" :key="i" style="width: 50vw; min-width: 300px;">
diff --git a/Website/pages/index.vue b/Website/pages/index.vue
index 6cf22a2..caa23fc 100644
--- a/Website/pages/index.vue
+++ b/Website/pages/index.vue
@@ -1,13 +1,15 @@
 <template>
   <div>
 
-    <h1 style="font-size: 3em; margin-bottom:0;">Return YouTube Dislike</h1>
-    <div style="color: #999">
+    <svg id="thumbslogo" width="150" height="150" viewBox="0 0 240 240" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;"><path d="M139.113,65.266l-57.339,-0c-5.288,-0 -9.812,3.185 -11.723,7.772l-19.241,44.916c-0.573,1.466 -0.892,2.995 -0.892,4.651l0,12.742c0,7.009 5.734,12.743 12.742,12.743l40.202,-0l-6.053,29.115l-0.191,2.039c0,2.612 1.083,5.033 2.803,6.754l6.754,6.689l41.985,-41.985c2.294,-2.294 3.695,-5.479 3.695,-8.984l0,-63.71c0,-7.009 -5.734,-12.742 -12.742,-12.742Zm25.485,-0l-0,76.452l25.484,0l-0,-76.452l-25.484,-0Z" style="fill:url(#_Linear1);fill-rule:nonzero;"/><g id="Thumb-Down--m.io-" serif:id="Thumb Down (m.io)"></g><defs><linearGradient id="_Linear1" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(152.906,153.295,-153.295,152.906,43.6442,45.958)"><stop offset="0" style="stop-color:#ff4444;stop-opacity:1"/><stop offset="0.56" style="stop-color:#440000;stop-opacity:1"/><stop offset="1" style="stop-color:#000;stop-opacity:1"/></linearGradient></defs></svg>
+
+    <h1 style="font-size: 3rem;" >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>
     </div>
 
-    <v-btn :to="installLink" color="primary lighten-1" style="font-size: 1.5em; padding: 1em; margin-bottom: 0.5em;">
-      <v-icon large style="margin-right: 0.5em;">mdi-tray-arrow-down</v-icon>
+    <v-btn :to="installLink" color="primary lighten-1 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>
 
@@ -26,6 +28,32 @@
   </div>
 </template>
 
+<style scoped>
+#thumbslogo {
+  opacity: 0;
+  transform: scale(0) rotate(180deg);
+  animation: popin 1s 1s ease-in-out 1 forwards, thumbsflip 2s 3s ease-in-out infinite alternate;
+}
+@keyframes popin {
+  0% {
+    transform: rotate(180deg) scale(0.5);
+    opacity: 0;
+  } 100% {
+    transform: rotate(0deg) scale(1);
+    opacity: 1;
+  }
+}
+@keyframes thumbsflip {
+  0% {
+    transform: rotate(0deg) scale(1);
+  } 50% {
+    transform: rotate(0) scale(1);
+  } 100% {
+    transform: rotate(180deg) scale(.9);
+  }
+}
+</style>
+
 <script>
 export default {
   data() {
diff --git a/Website/pages/install.vue b/Website/pages/install.vue
index 0af080f..580a459 100644
--- a/Website/pages/install.vue
+++ b/Website/pages/install.vue
@@ -1,11 +1,11 @@
 <template>
   <div>
 
-    <h1 style="font-size: 3em; margin-bottom: 0;">Select Your Platform</h1>
+    <h1 :style="$vuetify.breakpoint.xs ? 'font-size: 2rem;' : 'font-size: 3rem;'" >Select Your Platform</h1>
 
-    <div style="color: #999">
-      <p style="margin-bottom: 0;"> This is an <b>ALPHA version!</b> It may be slow. It may be buggy.</p>
-      <p style="margin-bottom: 1em;">Available for Firefox and all Chromium browsers (Chrome/Edge/Opera/Brave).</p>
+    <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>
 
     <v-btn class="mainAltButton" :href="firefoxLink" target="_blank">
@@ -28,9 +28,14 @@
       Opera
     </v-btn>
 
+    <v-btn class="mainAltButton" :href="chromeLink" target="_blank">
+      <v-img style="margin-right: 1rem;" src="ui/brave-mono.svg" height="20" width="20" />
+      Brave
+    </v-btn>
+
     <h3 style="margin-top: 3em; margin-bottom:0">Other Platforms</h3>
     <div style="color: #999">
-      <p style="margin-top: 0em; margin-bottom:0;">If your browser is not yet supported, try this UserScript.</p>
+      <p style="margin-top: .5rem; margin-bottom:.5rem;">If your browser is not yet supported, try this UserScript.</p>
     </div>
 
     <v-btn class="mainAltButton" :href="scriptLink" target="_blank">
@@ -39,8 +44,8 @@
     </v-btn>
 
     <h3 style="margin-top: 3em;">Third Party Implementations</h3>
-    <div style="color: #999">
-      <p style="margin-bottom: 0;">No liability on our side, use at your own risk.</p>
+    <div style="color: #999;">
+      <p style="margin-top: .5rem; margin-bottom: .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>
diff --git a/Website/pages/links.vue b/Website/pages/links.vue
index d8ac074..54e655c 100644
--- a/Website/pages/links.vue
+++ b/Website/pages/links.vue
@@ -1,10 +1,10 @@
 <template>
   <div style="height: 100%">
     
-    <h1 style="font-size: 3em; margin-bottom: 0;">Project Links</h1>
+    <h1 :style="$vuetify.breakpoint.xs ? 'font-size: 2rem;' : 'font-size: 3rem;'" >Project Links</h1>
           
     <div style="color: #999">
-      <p style="margin-bottom: 1em;">Links to the project and it's developers</p>
+      <p style="margin-top: .5rem; margin-bottom: .5em;">Links to the project and it's developers</p>
     </div>
 
     <v-btn class="mainAltButton" :href="githubLink" target="_blank">
diff --git a/Website/static/ui/abstract.svg b/Website/static/ui/abstract.svg
index 326744c..6298c42 100644
--- a/Website/static/ui/abstract.svg
+++ b/Website/static/ui/abstract.svg
@@ -1 +1 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg width="100%" height="100%" viewBox="0 0 1920 1080" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;"><path d="M3098.2,648.023c-547.817,-67.245 -984.192,-310.19 -1296.6,-748.589l-7.548,13.073c316.01,439.548 753.34,680.685 1296.6,748.589l7.547,-13.073Z" style="fill:url(#_Linear1);"/><path d="M3026.72,639.089c-547.817,-67.245 -984.192,-310.19 -1296.6,-748.589l-7.548,13.073c316.01,439.548 753.34,680.685 1296.6,748.589l7.547,-13.073Z" style="fill:url(#_Linear2);"/><path d="M2955.25,630.155c-547.817,-67.245 -984.192,-310.19 -1296.6,-748.59l-7.547,13.073c316.009,439.549 753.339,680.686 1296.6,748.59l7.547,-13.073Z" style="fill:url(#_Linear3);"/><path d="M2883.77,621.221c-547.817,-67.245 -984.192,-310.19 -1296.6,-748.59l-7.547,13.073c316.009,439.549 753.339,680.686 1296.6,748.59l7.547,-13.073Z" style="fill:url(#_Linear4);"/><path d="M2812.3,612.287c-547.817,-67.246 -984.193,-310.191 -1296.6,-748.59l-7.547,13.073c316.009,439.548 753.339,680.685 1296.6,748.589l7.548,-13.072Z" style="fill:url(#_Linear5);"/><path d="M2740.83,603.352c-547.817,-67.245 -984.193,-310.19 -1296.6,-748.589l-7.547,13.073c316.009,439.548 753.34,680.685 1296.6,748.589l7.548,-13.073Z" style="fill:url(#_Linear6);"/><path d="M2669.35,594.418c-547.817,-67.245 -984.192,-310.19 -1296.6,-748.59l-7.547,13.073c316.009,439.549 753.34,680.686 1296.6,748.59l7.548,-13.073Z" style="fill:url(#_Linear7);"/><path d="M2597.88,585.484c-547.817,-67.245 -984.192,-310.19 -1296.6,-748.59l-7.548,13.073c316.009,439.549 753.34,680.686 1296.6,748.59l7.548,-13.073Z" style="fill:url(#_Linear8);"/><path d="M2526.4,576.55c-547.817,-67.246 -984.192,-310.19 -1296.6,-748.59l-7.548,13.073c316.009,439.548 753.34,680.685 1296.6,748.589l7.548,-13.072Z" style="fill:url(#_Linear9);"/><path d="M2454.93,567.615c-547.817,-67.245 -984.192,-310.19 -1296.6,-748.589l-7.548,13.073c316.01,439.548 753.34,680.685 1296.6,748.589l7.548,-13.073Z" style="fill:url(#_Linear10);"/><defs><linearGradient id="_Linear1" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(1291.84,745.845,-745.845,1291.84,1801.23,-94.44)"><stop offset="0" style="stop-color:#c40c0c;stop-opacity:1"/><stop offset="1" style="stop-color:#663737;stop-opacity:1"/></linearGradient><linearGradient id="_Linear2" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(1291.84,745.845,-745.845,1291.84,1729.76,-103.374)"><stop offset="0" style="stop-color:#c40c0c;stop-opacity:1"/><stop offset="1" style="stop-color:#663737;stop-opacity:1"/></linearGradient><linearGradient id="_Linear3" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(1291.84,745.845,-745.845,1291.84,1658.28,-112.308)"><stop offset="0" style="stop-color:#c40c0c;stop-opacity:1"/><stop offset="1" style="stop-color:#663737;stop-opacity:1"/></linearGradient><linearGradient id="_Linear4" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(1291.84,745.845,-745.845,1291.84,1586.81,-121.243)"><stop offset="0" style="stop-color:#c40c0c;stop-opacity:1"/><stop offset="1" style="stop-color:#663737;stop-opacity:1"/></linearGradient><linearGradient id="_Linear5" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(1291.84,745.845,-745.845,1291.84,1515.34,-130.177)"><stop offset="0" style="stop-color:#c40c0c;stop-opacity:1"/><stop offset="1" style="stop-color:#663737;stop-opacity:1"/></linearGradient><linearGradient id="_Linear6" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(1291.84,745.845,-745.845,1291.84,1443.86,-139.111)"><stop offset="0" style="stop-color:#c40c0c;stop-opacity:1"/><stop offset="1" style="stop-color:#663737;stop-opacity:1"/></linearGradient><linearGradient id="_Linear7" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(1291.84,745.845,-745.845,1291.84,1372.39,-148.045)"><stop offset="0" style="stop-color:#c40c0c;stop-opacity:1"/><stop offset="1" style="stop-color:#663737;stop-opacity:1"/></linearGradient><linearGradient id="_Linear8" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(1291.84,745.845,-745.845,1291.84,1300.91,-156.98)"><stop offset="0" style="stop-color:#c40c0c;stop-opacity:1"/><stop offset="1" style="stop-color:#663737;stop-opacity:1"/></linearGradient><linearGradient id="_Linear9" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(1291.84,745.845,-745.845,1291.84,1229.44,-165.914)"><stop offset="0" style="stop-color:#c40c0c;stop-opacity:1"/><stop offset="1" style="stop-color:#663737;stop-opacity:1"/></linearGradient><linearGradient id="_Linear10" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(1291.84,745.845,-745.845,1291.84,1157.97,-174.848)"><stop offset="0" style="stop-color:#c40c0c;stop-opacity:1"/><stop offset="1" style="stop-color:#663737;stop-opacity:1"/></linearGradient></defs></svg>
\ No newline at end of file
+<?xml version="1.0" encoding="UTF-8" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg width="100%" height="100%" viewBox="0 0 1920 1080" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;"><path d="M3098.2,648.023c-547.817,-67.245 -984.192,-310.19 -1296.6,-748.589l-7.548,13.073c316.01,439.548 753.34,680.685 1296.6,748.589l7.547,-13.073Z" style="fill:url(#_Linear1);"/><path d="M3026.72,639.089c-547.817,-67.245 -984.192,-310.19 -1296.6,-748.589l-7.548,13.073c316.01,439.548 753.34,680.685 1296.6,748.589l7.547,-13.073Z" style="fill:url(#_Linear2);"/><path d="M2955.25,630.155c-547.817,-67.245 -984.192,-310.19 -1296.6,-748.59l-7.547,13.073c316.009,439.549 753.339,680.686 1296.6,748.59l7.547,-13.073Z" style="fill:url(#_Linear3);"/><path d="M2883.77,621.221c-547.817,-67.245 -984.192,-310.19 -1296.6,-748.59l-7.547,13.073c316.009,439.549 753.339,680.686 1296.6,748.59l7.547,-13.073Z" style="fill:url(#_Linear4);"/><path d="M2812.3,612.287c-547.817,-67.246 -984.193,-310.191 -1296.6,-748.59l-7.547,13.073c316.009,439.548 753.339,680.685 1296.6,748.589l7.548,-13.072Z" style="fill:url(#_Linear5);"/><path d="M2740.83,603.352c-547.817,-67.245 -984.193,-310.19 -1296.6,-748.589l-7.547,13.073c316.009,439.548 753.34,680.685 1296.6,748.589l7.548,-13.073Z" style="fill:url(#_Linear6);"/><path d="M2669.35,594.418c-547.817,-67.245 -984.192,-310.19 -1296.6,-748.59l-7.547,13.073c316.009,439.549 753.34,680.686 1296.6,748.59l7.548,-13.073Z" style="fill:url(#_Linear7);"/><path d="M2597.88,585.484c-547.817,-67.245 -984.192,-310.19 -1296.6,-748.59l-7.548,13.073c316.009,439.549 753.34,680.686 1296.6,748.59l7.548,-13.073Z" style="fill:url(#_Linear8);"/><path d="M2526.4,576.55c-547.817,-67.246 -984.192,-310.19 -1296.6,-748.59l-7.548,13.073c316.009,439.548 753.34,680.685 1296.6,748.589l7.548,-13.072Z" style="fill:url(#_Linear9);"/><path d="M2454.93,567.615c-547.817,-67.245 -984.192,-310.19 -1296.6,-748.589l-7.548,13.073c316.01,439.548 753.34,680.685 1296.6,748.589l7.548,-13.073Z" style="fill:url(#_Linear10);"/><defs><linearGradient id="_Linear1" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(1291.84,745.845,-745.845,1291.84,1801.23,-94.44)"><stop offset="0" style="stop-color:#c40c0c;stop-opacity:1"/><stop offset="1" style="stop-color:#ff4444;stop-opacity:1"/></linearGradient><linearGradient id="_Linear2" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(1291.84,745.845,-745.845,1291.84,1729.76,-103.374)"><stop offset="0" style="stop-color:#c40c0c;stop-opacity:1"/><stop offset="1" style="stop-color:#ff4444;stop-opacity:1"/></linearGradient><linearGradient id="_Linear3" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(1291.84,745.845,-745.845,1291.84,1658.28,-112.308)"><stop offset="0" style="stop-color:#c40c0c;stop-opacity:1"/><stop offset="1" style="stop-color:#ff4444;stop-opacity:1"/></linearGradient><linearGradient id="_Linear4" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(1291.84,745.845,-745.845,1291.84,1586.81,-121.243)"><stop offset="0" style="stop-color:#c40c0c;stop-opacity:1"/><stop offset="1" style="stop-color:#ff4444;stop-opacity:1"/></linearGradient><linearGradient id="_Linear5" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(1291.84,745.845,-745.845,1291.84,1515.34,-130.177)"><stop offset="0" style="stop-color:#c40c0c;stop-opacity:1"/><stop offset="1" style="stop-color:#ff4444;stop-opacity:1"/></linearGradient><linearGradient id="_Linear6" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(1291.84,745.845,-745.845,1291.84,1443.86,-139.111)"><stop offset="0" style="stop-color:#c40c0c;stop-opacity:1"/><stop offset="1" style="stop-color:#ff4444;stop-opacity:1"/></linearGradient><linearGradient id="_Linear7" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(1291.84,745.845,-745.845,1291.84,1372.39,-148.045)"><stop offset="0" style="stop-color:#c40c0c;stop-opacity:1"/><stop offset="1" style="stop-color:#ff4444;stop-opacity:1"/></linearGradient><linearGradient id="_Linear8" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(1291.84,745.845,-745.845,1291.84,1300.91,-156.98)"><stop offset="0" style="stop-color:#c40c0c;stop-opacity:1"/><stop offset="1" style="stop-color:#ff4444;stop-opacity:1"/></linearGradient><linearGradient id="_Linear9" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(1291.84,745.845,-745.845,1291.84,1229.44,-165.914)"><stop offset="0" style="stop-color:#c40c0c;stop-opacity:1"/><stop offset="1" style="stop-color:#ff4444;stop-opacity:1"/></linearGradient><linearGradient id="_Linear10" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(1291.84,745.845,-745.845,1291.84,1157.97,-174.848)"><stop offset="0" style="stop-color:#c40c0c;stop-opacity:1"/><stop offset="1" style="stop-color:#ff4444;stop-opacity:1"/></linearGradient></defs></svg>
\ No newline at end of file
diff --git a/Website/static/ui/brave-logo.png b/Website/static/ui/brave-logo.png
new file mode 100644
index 0000000..91bb05f
--- /dev/null
+++ b/Website/static/ui/brave-logo.png
diff --git a/Website/static/ui/brave-mono.svg b/Website/static/ui/brave-mono.svg
new file mode 100644
index 0000000..a71807f
--- /dev/null
+++ b/Website/static/ui/brave-mono.svg
@@ -0,0 +1 @@
+<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="#fff"><title>Brave</title><path d="M15.68 0l2.096 2.38s1.84-.512 2.709.358c.868.87 1.584 1.638 1.584 1.638l-.562 1.381.715 2.047s-2.104 7.98-2.35 8.955c-.486 1.919-.818 2.66-2.198 3.633-1.38.972-3.884 2.66-4.293 2.916-.409.256-.92.692-1.38.692-.46 0-.97-.436-1.38-.692a185.796 185.796 0 01-4.293-2.916c-1.38-.973-1.712-1.714-2.197-3.633-.247-.975-2.351-8.955-2.351-8.955l.715-2.047-.562-1.381s.716-.768 1.585-1.638c.868-.87 2.708-.358 2.708-.358L8.321 0h7.36zm-3.679 14.936c-.14 0-1.038.317-1.758.69-.72.373-1.242.637-1.409.742-.167.104-.065.301.087.409.152.107 2.194 1.69 2.393 1.866.198.175.489.464.687.464.198 0 .49-.29.688-.464.198-.175 2.24-1.759 2.392-1.866.152-.108.254-.305.087-.41-.167-.104-.689-.368-1.41-.741-.72-.373-1.617-.69-1.757-.69zm0-11.278s-.409.001-1.022.206-1.278.46-1.584.46c-.307 0-2.581-.434-2.581-.434S4.119 7.152 4.119 7.849c0 .697.339.881.68 1.243l2.02 2.149c.192.203.59.511.356 1.066-.235.555-.58 1.26-.196 1.977.384.716 1.042 1.194 1.464 1.115.421-.08 1.412-.598 1.776-.834.364-.237 1.518-1.19 1.518-1.554 0-.365-1.193-1.02-1.413-1.168-.22-.15-1.226-.725-1.247-.95-.02-.227-.012-.293.284-.851.297-.559.831-1.304.742-1.8-.089-.495-.95-.753-1.565-.986-.615-.232-1.799-.671-1.947-.74-.148-.068-.11-.133.339-.175.448-.043 1.719-.212 2.292-.052.573.16 1.552.403 1.632.532.079.13.149.134.067.579-.081.445-.5 2.581-.541 2.96-.04.38-.12.63.288.724.409.094 1.097.256 1.333.256s.924-.162 1.333-.256c.408-.093.329-.344.288-.723-.04-.38-.46-2.516-.541-2.961-.082-.445-.012-.45.067-.579.08-.129 1.059-.372 1.632-.532.573-.16 1.845.009 2.292.052.449.042.487.107.339.175-.148.069-1.332.508-1.947.74-.615.233-1.476.49-1.565.986-.09.496.445 1.241.742 1.8.297.558.304.624.284.85-.02.226-1.026.802-1.247.95-.22.15-1.413.804-1.413 1.169 0 .364 1.154 1.317 1.518 1.554.364.236 1.355.755 1.776.834.422.079 1.08-.4 1.464-1.115.384-.716.039-1.422-.195-1.977-.235-.555.163-.863.355-1.066l2.02-2.149c.341-.362.68-.546.68-1.243 0-.697-2.695-3.96-2.695-3.96s-2.274.436-2.58.436c-.307 0-.972-.256-1.585-.461-.613-.205-1.022-.206-1.022-.206z"/></svg>
\ No newline at end of file