chore: merch banner, anniversary

Author: Miodec

frontend/src/html/header.html

@@ -41,6 +41,8 @@
     <h1 class="text">
       <div class="top">monkey see</div>
       monkeytype
+
+      <div class="bottom">5 year anniversary!</div>
     </h1>
   </a>
   <nav>

frontend/src/styles/nav.scss

@@ -294,10 +294,29 @@ header {
     user-select: none;
 
     .bottom {
-      margin-left: -0.15rem;
+      // margin-left: -0.15rem;
+      // color: var(--main-color);
+      // transition: 0.25s;
+      // cursor: pointer;
+      font-size: 0.4em;
+      position: absolute;
+      right: -10px;
+      bottom: -20px;
       color: var(--main-color);
-      transition: 0.25s;
-      cursor: pointer;
+      transform: rotate(-5deg);
+      animation: pulse 1.5s infinite;
+    }
+
+    @keyframes pulse {
+      0% {
+        transform: rotate(-5deg) scale(1);
+      }
+      50% {
+        transform: rotate(-5deg) scale(1.1);
+      }
+      100% {
+        transform: rotate(-5deg) scale(1);
+      }
     }
     &:focus-visible {
       outline: none;
@@ -392,6 +411,10 @@ header {
       opacity: 0 !important;
     }
 
+    #logo .bottom {
+      opacity: 0 !important;
+    }
+
     .config {
       opacity: 0 !important;
     }

frontend/src/ts/elements/merch-banner.ts

@@ -1,24 +1,24 @@
 import { z } from "zod";
 import { LocalStorageWithSchema } from "../utils/local-storage-with-schema";
-// import * as Notifications from "./notifications";
+import * as Notifications from "./notifications";
 
 const closed = new LocalStorageWithSchema({
-  key: "merchBannerClosed",
+  key: "merchBannerClosed2",
   schema: z.boolean(),
   fallback: false,
 });
 
 export function showIfNotClosedBefore(): void {
   if (!closed.get()) {
-    // Notifications.addBanner(
-    //   `Check out our merchandise, available at <a target="_blank" rel="noopener" href="https://monkeytype.store/">monkeytype.store</a>`,
-    //   1,
-    //   "./images/merch2.png",
-    //   false,
-    //   () => {
-    //     closed.set(true);
-    //   },
-    //   true
-    // );
+    Notifications.addBanner(
+      `New merch store now open, including a limited edition metal keycap! <a target="_blank" rel="noopener" href="https://mktp.co/merch">monkeytype.store</a>`,
+      1,
+      "./images/merch3.png",
+      true,
+      () => {
+        closed.set(true);
+      },
+      true
+    );
   }
 }

frontend/src/ts/test/test-logic.ts

@@ -1461,6 +1461,7 @@ $(".pageTest").on("click", "#testConfig .numbersMode.textButton", () => {
 
 $("header").on("click", "nav #startTestButton, #logo", () => {
   if (ActivePage.get() === "test") restart();
+  Result.showConfetti();
 });
 
 // ===============================