added support popup

src/js/script.js

@@ -4405,6 +4405,41 @@ $(document.body).on("click", "#versionHistoryWrapper", (event) => {
     });
 });
 
+$(document.body).on("click", "#supportMeButton", (event) => {
+  $("#supportMeWrapper")
+    .css("opacity", 0)
+    .removeClass("hidden")
+    .animate({ opacity: 1 }, 125);
+});
+
+$(document.body).on("click", "#supportMeWrapper", (event) => {
+  $("#supportMeWrapper")
+    .css("opacity", 1)
+    .animate({ opacity: 0 }, 125, () => {
+      $("#supportMeWrapper").addClass("hidden");
+    });
+});
+
+
+$(document.body).on("click", "#supportMeWrapper .button.ads", (event) => {
+  currentCommands.push(commandsEnableAds);
+  showCommandLine();
+  $("#supportMeWrapper")
+    .css("opacity", 1)
+    .animate({ opacity: 0 }, 125, () => {
+      $("#supportMeWrapper").addClass("hidden");
+    });
+});
+
+$(document.body).on("click", "#supportMeWrapper a.button", (event) => {
+  $("#supportMeWrapper")
+    .css("opacity", 1)
+    .animate({ opacity: 0 }, 125, () => {
+      $("#supportMeWrapper").addClass("hidden");
+    });
+});
+
+
 $("#wordsInput").keypress((event) => {
   event.preventDefault();
 });

src/sass/style.scss

@@ -687,6 +687,68 @@ a:hover {
   }
 }
 
+#supportMeWrapper {
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.75);
+  position: fixed;
+  left: 0;
+  top: 0;
+  z-index: 1000;
+  display: grid;
+  justify-content: center;
+  align-items: center;
+  padding: 5rem 0;
+
+  #supportMe {
+    width: 900px;
+    // height: 400px;
+    background: var(--bg-color);
+    border-radius: var(--roundness);
+    padding: 2rem;
+    display: grid;
+    grid-template-rows: 2rem auto auto;
+    gap: 2rem;
+    @extend .ffscroll;
+
+    .title{
+      font-size: 2rem;
+      line-height: 2rem;
+      color: var(--main-color);
+    }
+
+    .text{
+      color: var(--text-color);
+    }
+
+    .buttons{
+      display: grid;
+      grid-template-columns: 1fr 1fr 1fr 1fr;
+      gap: 1rem;
+
+      .button{
+        display: block;
+        width: 100%;
+        padding: 2rem 0;
+        display: grid;
+        gap: 1rem;
+        text-decoration: none;
+        .text{
+          transform: .25s;
+        }
+        &:hover .text{
+          color: var(--bg-color);
+        }
+        .icon{
+          font-size: 5rem;
+          line-height: 5rem;
+        }
+      }
+    }
+
+  }
+}
+
 #commandLineWrapper {
   width: 100%;
   height: 100%;
@@ -1261,6 +1323,14 @@ key {
     margin-bottom: 1rem;
   }
 
+  #supportMeButton{
+    transition: .25s;
+    &:hover{
+      color: var(--main-color);
+      cursor: pointer;
+    }
+  }
+
   .leftright {
     display: grid;
     grid-template-columns: 1fr 1fr;

static/index.html

@@ -762,6 +762,34 @@
         </div>
       </div>
     </div>
+    <div id="supportMeWrapper" class="hidden">
+      <div id="supportMe">
+        <div class="title">Support Monkeytype</div>
+        <div class="text">
+          Thank you so much for thinking about supporting this project.
+          It would not be possible without you and your continued support.
+          <i class="fas fa-heart"></i>
+        </div>
+        <div class="buttons">
+          <div class="button ads">
+            <div class="icon"><i class="fas fa-ad"></i></div>
+            <div class="text">Enable Ads</div>
+          </div>
+          <a class="button" href="https://www.paypal.me/jackbartnik" target="_blank">
+            <div class="icon"><i class="fab fa-paypal"></i></div>
+            <div class="text">Donate</div>
+          </a>
+          <a class="button" href="https://www.patreon.com/monkeytype" target="_blank">
+            <div class="icon"><i class="fab fa-patreon"></i></div>
+            <div class="text">Become a Patron</div>
+          </a>
+          <a class="button" href="https://monkeytype.store" target="_blank">
+            <div class="icon"><i class="fas fa-tshirt"></i></div>
+            <div class="text">Buy Merch</div>
+          </a>
+        </div>
+      </div>
+    </div>
     <div id="commandLineWrapper" class="hidden">
       <div id="commandLine">
         <input type="text" class="input" placeholder="Type to search" />
@@ -3512,14 +3540,15 @@
                 <i class="fab fa-fw fa-discord"></i>
                 Join the
                 <a href="https://www.discord.gg/monkeytype" class="discordLink">
-                  Discord
+                  Discord server
                 </a>
-                server
               </div>
               <div>
                 <i class="fas fa-fw fa-donate"></i>
-                Support on
-                <a href="https://www.patreon.com/monkeytype">Patreon</a>
+                <span id="supportMeButton">
+                  Support this project
+                </span>
+                <!-- <a href="https://www.patreon.com/monkeytype">Patreon</a>
                 , via
                 <a href="https://www.paypal.me/jackbartnik" target="_blank">
                   PayPal
@@ -3527,7 +3556,7 @@
                 or by
                 <a href="https://monkeytype.store" target="_blank">
                   buying merch
-                </a>
+                </a> -->
               </div>
             </div>
             <div class="right">
@@ -3538,7 +3567,7 @@
                   aria-label="Shift-click to toggle custom theme"
                   data-balloon-pos="left"
                 >
-                  current theme
+                  serika dark
                 </span>
               </div>
               <div>