Add a donate page

src/alu.d.ts

@@ -6,6 +6,7 @@ export declare global {
 
   namespace Alu {
     let store: AluStore;
+    let eventList: Record<string, EventListener>;
     let settings: {
       loadedContentStorage: Record<string, string>;
       currentTab: string;

src/components/ProxyRegistrar.astro

@@ -2,14 +2,15 @@
   import { TransportMgr, initTransport } from "./ts/TransportManager";
   import "notyf/notyf.min.css";
   import { Notyf } from "notyf";
+  import EventMgr from "./ts/EventMgr";
 
   const form = document.querySelector("form");
   let input = document.querySelector("input")!;
-  document.addEventListener("astro:after-swap", initForm);
+  EventMgr.listen("astro:after-swap", initForm);
   function initForm() {
     const formEle = document.querySelector("form") as HTMLFormElement;
     input = document.querySelector("input") as HTMLInputElement;
-    if (formEle) formEle.addEventListener("submit", formEventListener);
+    if (formEle) EventMgr.listen("submit", formEventListener, formEle);
   }
   if (form) {
     form.addEventListener("submit", formEventListener);

src/components/UI/Header.astro

@@ -10,9 +10,10 @@ const t = i18n.useTranslations(lang);
       <a href={`/${lang}/`} class="header-item flex-item"><img class="nav-img" src="/favicon.svg" alt="Alu Logo" /><span>{t("nav.brand")}</span></a>
     </div>
     <div class="right">
+      <a href={`/${lang}/donate/`}      class="header-item">Donate</a>
       <a href={`/${lang}/marketplace/`} class="header-item">Marketplace</a>
-      <a href={`/${lang}/games/`} class="header-item">{t("nav.games")}</a>
+      <a href={`/${lang}/games/`}       class="header-item">{t("nav.games")}</a>
-      <a href={`/${lang}/settings/`} class="header-item">{t("nav.settings")}</a>
+      <a href={`/${lang}/settings/`}    class="header-item">{t("nav.settings")}</a>
     </div>
   </div>
 </nav>
@@ -37,9 +38,12 @@ const t = i18n.useTranslations(lang);
     box-shadow: -2px 5px 10px 0 var(--accent-color);
   }
 
-  @media (max-width: 425px) {
+  @media (max-width: 600px) {
     .title-background {
-      padding-inline: 1.5rem;
+      padding-inline: 0.5rem;
+    }
+    .right > a:first-child {
+      display: none;
     }
   }
 
@@ -47,7 +51,7 @@ const t = i18n.useTranslations(lang);
   .right {
     display: flex;
     align-items: center;
-    gap: 20px;
+    gap: 10px;
   }
 
   .header-item {

src/components/ts/Alu.ts

@@ -4,6 +4,7 @@ function instantiateAlu() {
   if (globalThis.Alu) return;
   globalThis.Alu = {
     store: new AluStore(),
+    eventList: {},
     settings: {
       loadedContentStorage: {},
       currentTab: "",

src/components/ts/EventMgr.ts

@@ -0,0 +1,21 @@
+class EventMgr {
+    static listen(name: string, listener: EventListener, target?: EventTarget, opts: AddEventListenerOptions = {}) {
+        window.Alu.eventList[name] = listener;
+        (target || document).addEventListener(name, listener, opts);
+
+        return {
+            name: name,
+            listener: listener
+        };
+    }
+
+    static remove(event: { name: string, listener: EventListener }, target?: EventTarget) {
+        (target || document).removeEventListener(event.name, event.listener);
+    }
+
+    static dispatch(name: string, detail?: any, target?: EventTarget) {
+        (target || document).dispatchEvent(new CustomEvent(name, { detail: detail }));
+    }
+}
+
+export default EventMgr;

src/components/ts/settings.ts

@@ -1,3 +1,5 @@
+import EventMgr from "./EventMgr";
+
 // Alu.settings.loadedContentStorage = {};
 document.addEventListener("astro:before-swap", () => {
   Alu.settings.currentTab = "";
@@ -28,7 +30,7 @@ function loadContent(tabID: string) {
     setTimeout(() => {
       currentContent.innerHTML = Alu.settings.loadedContentStorage[tabID];
       currentContent.style.opacity = "1";
-      document.dispatchEvent(new CustomEvent("setting-tabLoad", { detail: tabID }));
+      EventMgr.dispatch("setting-tabLoad", tabID);
     }, 250);
   }
 }

src/layouts/Layout.astro

@@ -147,6 +147,12 @@ const DESCRIPTION =
           conic-gradient(from 60deg at calc(200% / 3), var(--c3) 60deg, var(--c2) 0 120deg, #0000 0), conic-gradient(from 180deg at calc(100% / 3), var(--c1) 60deg, var(--_g)),
           linear-gradient(90deg, var(--c1) calc(100% / 6), var(--c2) 0 50%, var(--c1) 0 calc(500% / 6), var(--c2) 0);
         background-size: calc(1.732 * var(--s)) var(--s);
+
+        scrollbar-width: none;
+
+        &::-webkit-scrollbar {
+          display: none;
+        }
       }
 
       html[data-theme="macchiato"],
@@ -209,9 +215,6 @@ const DESCRIPTION =
         color: var(--text-color);
         text-align: center;
       }
-      ::-webkit-scrollbar {
-        display: none;
-      }
       #proxy-frame {
         display: block;
         position: absolute;

src/pages/[lang]/donate.astro

@@ -0,0 +1,69 @@
+---
+import Link from "@components/UI/Link.astro";
+import { STATIC_PATHS } from "@i18n/utils";
+import Layout from "src/layouts/Layout.astro";
+
+// const t = i18n.inferLangUseTranslations(Astro.url);
+
+export const prerender = true;
+
+export function getStaticPaths() {
+  return STATIC_PATHS;
+}
+---
+
+<Layout title="Donate | Alu">
+    <main id="main-content">
+        <h1 class="title-text">Donating to Alu</h1>
+        <section id="donate">
+            <h3 class="thank-you-title">Thank you for your interest in donating to Alu! All support helps grow Alu into a better proxy for everyone!</h3>
+
+            <h2>Donate through Patreon:</h2>
+            <p>Alu is on Patreon! You can donate to Alu through Patreon and get some cool perks in return. Check out our Patreon page <Link href="https://www.patreon.com/wearr/membership" newTab>here!</Link></p>
+            
+            <h2>Donate through Cryptocurrencies</h2>
+            <p>Alu accepts donations through cryptocurrencies. You can donate to Alu using the following addresses:</p>
+            <div class="wallet-list-item"><span class="wallet-list-title">Bitcoin: </span> bc1q4znsy2uz3zxcg8djgrur7fcs6t0gek9pckpztu</div>
+            <div class="wallet-list-item"><span class="wallet-list-title">Monero:  </span> 4BAuZm7PqC4NHvjrhVLmksLG7Y1j9jePMUVR1bVrgaNEW2eWL9Ffpugidi5QWs4ofV8NtDUN3qLUZE6NHPA1dkmQFnE4g1C</div>
+            <div class="wallet-list-item"><span class="wallet-list-title">Ethereum:</span> 0x1D954D78aC53757348eD73793579241390d8A120</div>
+            <div class="wallet-list-item"><span class="wallet-list-title">Litecoin:</span> LgXYv3MK8WkMSDGQ3XM3usJ3DAdTy4amSV</div>
+            <p>Click on any address to copy it to your clipboard!</p>
+        </section>
+
+        <script>
+            import Toast from "@components/ts/toast";
+            Toast.setDuration(2000);
+            
+            const wallets = document.getElementsByClassName("wallet-list-item");
+
+            Array.from(wallets).forEach((wallet) => {
+                wallet!.addEventListener("click", () => {
+                    if (wallet) {
+                        navigator.clipboard.writeText(wallet.childNodes[1].textContent!);
+                        Toast.success("Copied to clipboard!");
+                    }
+
+                });
+            });
+        </script>
+
+        <style>
+            .thank-you-title {
+                padding-top: 0.5rem;
+                padding-bottom: 0.5rem;
+            }
+            .wallet-list-item {
+                cursor: pointer;
+                font-size: 18px;
+                height: 2rem;
+                white-space: nowrap;
+                overflow: hidden;
+            }
+            .wallet-list-title {
+                width: 6rem;
+                display: inline-block;
+                font-weight: bold;
+            }
+        </style>
+    </main>
+</Layout>