From e72efae24df29a8d3d728cbacfeb0eabd0536904 Mon Sep 17 00:00:00 2001
From: dumbmoron <log@riseup.net>
Date: Sun, 4 Aug 2024 13:24:10 +0000
Subject: [PATCH] web/donate: initial re-redesign

---
 pnpm-lock.yaml                     |   8 +
 web/i18n/en/donate.json            |   4 +
 web/package.json                   |   1 +
 web/src/routes/donate/+page.svelte | 338 ++++++++---------------------
 web/static/icons/imput.svg         |   5 +
 5 files changed, 114 insertions(+), 242 deletions(-)
 create mode 100644 web/i18n/en/donate.json
 create mode 100644 web/static/icons/imput.svg

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 39ceaa36..1d6d724e 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -92,6 +92,9 @@ importers:
       '@eslint/js':
         specifier: ^9.5.0
         version: 9.8.0
+      '@fontsource/redaction-10':
+        specifier: ^5.0.2
+        version: 5.0.2
       '@sveltejs/adapter-static':
         specifier: ^3.0.2
         version: 3.0.2(@sveltejs/kit@2.5.19(@sveltejs/vite-plugin-svelte@3.1.1(svelte@4.2.18)(vite@5.3.5(@types/node@20.14.14)))(svelte@4.2.18)(vite@5.3.5(@types/node@20.14.14)))
@@ -324,6 +327,9 @@ packages:
   '@fontsource/ibm-plex-mono@5.0.13':
     resolution: {integrity: sha512-gtlMmvk//2AgDEZDFsoL5z9mgW3ZZg/9SC7pIfDwNKp5DtZpApgqd1Fua3HhPwYRIHrT76IQ1tMTzQKLEGtJGQ==}
 
+  '@fontsource/redaction-10@5.0.2':
+    resolution: {integrity: sha512-PODxYvb06YrNxdUBGcygiMibpgcZihzmvkmlX/TQAA2F7BUU/anfSKQi/VnLdJ/8LIK81/bUY+i7L/GP27FkVw==}
+
   '@humanwhocodes/config-array@0.11.14':
     resolution: {integrity: sha512-3T8LkOmg45BV5FICb15QQMsyUSWrQ8AygVfC7ZG32zOalnqrilm018ZVCw0eapXux8FtA33q8PSRSstjee3jSg==}
     engines: {node: '>=10.10.0'}
@@ -1945,6 +1951,8 @@ snapshots:
 
   '@fontsource/ibm-plex-mono@5.0.13': {}
 
+  '@fontsource/redaction-10@5.0.2': {}
+
   '@humanwhocodes/config-array@0.11.14':
     dependencies:
       '@humanwhocodes/object-schema': 2.0.3
diff --git a/web/i18n/en/donate.json b/web/i18n/en/donate.json
new file mode 100644
index 00000000..687be9ec
--- /dev/null
+++ b/web/i18n/en/donate.json
@@ -0,0 +1,4 @@
+{
+    "title": "Support a safe\nand open Internet",
+    "subtitle": "donate to imput or share the\njoy of cobalt with a friend"
+}
\ No newline at end of file
diff --git a/web/package.json b/web/package.json
index 7d486620..b50062e4 100644
--- a/web/package.json
+++ b/web/package.json
@@ -25,6 +25,7 @@
     "homepage": "https://cobalt.tools/",
     "devDependencies": {
         "@eslint/js": "^9.5.0",
+        "@fontsource/redaction-10": "^5.0.2",
         "@sveltejs/adapter-static": "^3.0.2",
         "@sveltejs/kit": "^2.0.0",
         "@sveltejs/vite-plugin-svelte": "^3.0.0",
diff --git a/web/src/routes/donate/+page.svelte b/web/src/routes/donate/+page.svelte
index efd65747..c977368b 100644
--- a/web/src/routes/donate/+page.svelte
+++ b/web/src/routes/donate/+page.svelte
@@ -1,13 +1,11 @@
 <script lang="ts">
+    import "@fontsource/redaction-10/400.css";
+
     import { t } from "$lib/i18n/translations";
     import { donate } from "$lib/env";
 
-    import IconCoin from "@tabler/icons-svelte/IconCoin.svelte";
-    import IconCoffee from "@tabler/icons-svelte/IconCoffee.svelte";
-    import IconPizza from "@tabler/icons-svelte/IconPizza.svelte";
-    import IconQuestionMark from "@tabler/icons-svelte/IconQuestionMark.svelte";
-    import IconRepeat from "@tabler/icons-svelte/IconRepeat.svelte";
-    import IconWallet from "@tabler/icons-svelte/IconWallet.svelte";
+    import IconHeart from "@tabler/icons-svelte/IconHeart.svelte";
+    import Meowbalt from "$components/misc/Meowbalt.svelte";
 
     let customAmountOnceInput: HTMLInputElement;
     let customAmountRecurringInput: HTMLInputElement;
@@ -36,271 +34,127 @@
 </svelte:head>
 
 <main id="donate-page">
-    <h1>support cobalt</h1>
-    <p>
-        cobalt doesn't shove ads in your face and doesn't sell your personal data, meaning that
-        it's <em>completely free to use</em> for everyone. but development and maintenance of a media-heavy
-        service used by over 1 million people is quite costly. both in terms of time and money.
-    </p>
-
-    <p>
-        if cobalt helped you in the past and you want to keep it growing and evolving, you can
-        return the favor by making a donation!
-    </p>
-
-    <p>
-        your donation will help all cobalt users: educators, students, content creators, artists,
-        musicians, and many, many more!
-    </p>
-
-    <p>
-        in past, donations have let cobalt:
-    </p>
-    <ul>
-        <li>increase stability and uptime to nearly 100%.</li>
-        <li>speed up ALL downloads, especially heavier ones.</li>
-        <li>open the api for free public use.</li>
-        <li>withstand several huge user influxes with 0 downtime.</li>
-        <li>add resource-intensive features (such as gif conversion).</li>
-        <li>continue improving our infrastructure.</li>
-        <li>keep developers happy.</li>
-    </ul>
-
-    <p>
-        <em>every cent matters and is extremely appreciated</em>, you can truly make a difference!
-    </p>
-    <p>
-        if you can't donate, share cobalt with a friend! we don't get ads anywhere, so cobalt
-        is spread by word of mouth.
-    </p>
-    <p>
-        sharing is the easiest way to help achieve the goal of better internet for everyone.
-    </p>
-
-    <section>
-        <h3><IconCoin /> make a one-time donation via stripe</h3>
-        <div class="donation-options">
-            <button
-                class="donation-option"
-                on:click={() => donateStripe(500)}
-            >
-                <h3 class="amount">$5</h3>
-                <div class="donate-description">
-                    <IconCoffee class="description-icon" />
-                    <p>a cup of coffee</p>
-                </div>
-            </button>
-            <button
-                class="donation-option"
-                on:click={() => donateStripe(1000)}
-            >
-                <h3 class="amount">$10</h3>
-                <div class="donate-description">
-                    <IconPizza class="description-icon" />
-                    <p>a pizza</p>
-                </div>
-            </button>
-            <button
-                class="donation-option"
-                on:click={(e) => {
-                    if (e.target !== customAmountOnceInput) {
-                        if (!customAmountOnceInput.reportValidity()) {
-                            return;
-                        }
-
-                        const amount = Number(customAmountOnceInput.value);
-                        donateStripe(amount * 100);
-                    }
-                }}
-            >
-                <h3 class="amount" id="donation-custom">
-                    $ <input
-                        type="number"
-                        placeholder="20"
-                        min="2"
-                        max="10000"
-                        required
-                        bind:this={customAmountOnceInput}
-                    >
-                </h3>
-                <div class="donate-description">
-                    <IconQuestionMark class="description-icon" />
-                    <p>whatever you like!</p>
-                </div>
-            </button>
+    <header id="banner">
+        <div id="banner-contents">
+            <div id="banner-left">
+                <img id="imput-logo" src="/icons/imput.svg" alt="imput logo" />
+                <div id="banner-title">{$t('donate.title')}</div>
+                <div id="banner-subtitle">{$t('donate.subtitle')}</div>
+            </div>
+            <div id="banner-right">
+                <Meowbalt emotion="fast" />
+            </div>
         </div>
-    </section>
-
-    <section>
-        <h3><IconRepeat /> make a recurring donation via liberapay</h3>
-        <div class="donation-options">
-            <button
-                class="donation-option"
-                on:click={() => donateLibera(200)}
-            >
-                <h3 class="amount">$2/month</h3>
-                <div class="donate-description">
-                    <p>idk</p>
+        <div id="banner-background">
+            <div id="banner-background-animation">
+                <div id="banner-background-inner">
+                    {#each {length: 144} as _}
+                        <IconHeart class="heart-icon" />
+                    {/each}
                 </div>
-            </button>
-            <button
-                class="donation-option"
-                on:click={() => donateLibera(500)}
-            >
-                <h3 class="amount">$5/month</h3>
-                <div class="donate-description">
-                    <IconCoffee class="description-icon" />
-                    <p>a cup of coffee</p>
-                </div>
-            </button>
-            <button
-                class="donation-option"
-                on:click={(e) => {
-                    if (e.target !== customAmountRecurringInput) {
-                        if (!customAmountRecurringInput.reportValidity()) {
-                            return;
-                        }
-
-                        const amount = Number(customAmountRecurringInput.value);
-                        donateLibera(amount * 100);
-                    }
-                }}
-            >
-                <h3 class="amount" id="donation-custom">
-                    $ <input
-                        type="number"
-                        placeholder="10"
-                        min="5"
-                        max="1000"
-                        required
-                        bind:this={customAmountRecurringInput}
-                    >
-                </h3>
-                <div class="donate-description">
-                    <IconQuestionMark class="description-icon" />
-                    <p>whatever you like!</p>
-                </div>
-            </button>
+            </div>
         </div>
-    </section>
-
-    <section>
-        <h3><IconWallet /> donate with cryptocurrencies</h3>
-        <div class="crypto-wallets">
-            {#each Object.entries(donate.crypto) as [ name, address ]}
-                <div class="wallet">
-                    <div class="wallet-name">{ name } (press to copy)</div>
-                    <button
-                        class="wallet-address"
-                        on:click={() => toClipboard(address)}
-                    >
-                        { address }
-                    </button>
-                </div>
-            {/each}
-        </div>
-    </section>
+    </header>
 </main>
 
 <style>
     #donate-page {
-        max-width: 850px;
+        max-width: 950px;
         margin: 0 auto;
         overflow-x: hidden;
         padding: var(--padding);
     }
 
-    em {
-        font-style: italic;
-        border-bottom: 2px dotted var(--secondary);
+    #banner {
+        position: relative;
+        border-radius: calc(3 * var(--border-radius));
+        background: linear-gradient(
+            190deg,
+            #1a1a1a 30%,
+            #3c3c3c 100%
+        );
     }
 
-    section h3 > :global(*) {
-        vertical-align: middle;
-    }
-
-    section > h3 {
-        padding: var(--padding) 0;
-    }
-
-    .donation-options {
+    #banner-contents {
+        position: relative;
         display: flex;
-        justify-content: space-evenly;
-    }
-
-    .donation-option {
-        display: flex;
-        flex-direction: column;
-        width: 15rem;
-        padding: 1em;
-    }
-
-    .amount {
-        font-size: 2em;
-    }
-
-    .donate-description {
-        color: var(--gray);
-        padding-top: .5em;
-    }
-
-    .donate-description p {
-        margin: 0;
-    }
-
-    #donation-custom {
-        display: flex;
-    }
-
-    #donation-custom input {
-        background: transparent;
-        font-size: inherit;
-        border: none;
-        border-bottom: 4px dotted var(--secondary);
-        width: 2.5em;
-        text-align: center;
-        appearance: textfield;
-        color: var(--secondary);
-    }
-
-    .wallet-address {
         width: 100%;
-        display: block;
-        text-align: left;
-        font-size: .75em;
-        overflow: hidden;
-        text-overflow: ellipsis;
+        z-index: 2;
     }
 
-    .crypto-wallets {
+    #banner-background {
+        position: absolute;
+        top: 0;
+        width: 100%;
+        height: 100%;
+        z-index: 1;
+        opacity: 10%;
+        mask-image: linear-gradient(
+            145deg,
+            rgba(0,0,0,1) 0%,
+            rgba(255,255,255,0) 60%
+        );
+    }
+
+    #banner-background-inner {
+        color: white;
+        transform: rotate(-8deg) scale(1.5) translateY(-4em);
+    }
+
+    #banner-background-inner :global(.heart-icon) {
+        height: 3em;
+        width: 3em;
+        stroke-width: 1.5px;
+        margin: -.15em;
+    }
+
+    #banner-right :global(.meowbalt) {
+        height: 40vmin;
+        margin-top: -2em;
+        margin-left: -4em;
+    }
+
+    #banner-right {
+        transform: translate(12px, 48px);
+        display: flex;
+        align-items: center;
+    }
+
+    #imput-logo {
+        width: 3em;
+    }
+
+    #banner-left {
         display: flex;
         flex-direction: column;
+        justify-content: center;
+        padding: 2.5em 3.5em;
+        color: white;
         gap: 1em;
-        padding-left: calc(2 * var(--padding));
+        white-space: pre-wrap;
     }
 
-    .wallet {
-        display: flex;
-        flex-direction: column;
-        gap: .25em;
+    #banner-title {
+        font-family: 'Redaction 10', serif;
+        font-size: 3em;
+        font-weight: 400;
+        line-height: 0.95;
     }
 
-    input::-webkit-outer-spin-button,
-    input::-webkit-inner-spin-button {
-        -webkit-appearance: none;
-        margin: 0;
+    #banner-subtitle {
+        color: var(--gray);
+    }
+    #banner-background-animation {
+        animation: heart-move 5s infinite linear;
     }
 
-    @media screen and (max-width: 750px) {
-        .donation-options {
-            flex-direction: column;
-            gap: 1em;
-            align-items: center;
+    @keyframes heart-move {
+        from {
+            transform: translateX(0) translateY(0);
         }
 
-        .crypto-wallets {
-            padding-left: 0;
+        to {
+            transform: translate(74px) translateY(61px);
         }
     }
-
 </style>
diff --git a/web/static/icons/imput.svg b/web/static/icons/imput.svg
new file mode 100644
index 00000000..edb6c101
--- /dev/null
+++ b/web/static/icons/imput.svg
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 532 283">
+  <path fill="#fff" d="M0 282.717v-62.5886h531.441v62.5886z"/>
+  <path fill="#fff" d="m103.176 35.2625 54.20331759-31.2943 139.958 242.41436693-54.20331759 31.2943z"/>
+  <path fill="#fff" d="m368.95 0 54.20331759 31.2943-134.6 233.1340387L234.35 233.1340387z"/>
+</svg>
\ No newline at end of file