add donation link

bcheidemann · Dec 16, 2023 · 5fd458a · 5fd458a
1 parent 3270699
commit 5fd458a
Show file tree

Hide file tree

Showing 4 changed files with 88 additions and 5 deletions.
diff --git a/public/outright-donation-qr.png b/public/outright-donation-qr.png
diff --git a/src/components/outright/Schedule.tsx b/src/components/outright/Schedule.tsx
@@ -74,7 +74,8 @@ const Schedule = () => {
                   )}
                 </div>
                 <span className={streamTime}>
-                  {item.start}{item.end && ` - ${item.end}`}
+                  {item.start}
+                  {item.end && ` - ${item.end}`}
                 </span>
                 {item.info && <p style={{ margin: 0 }}>{item.info}</p>}
               </li>

diff --git a/src/pages/outright.astro b/src/pages/outright.astro
@@ -5,12 +5,46 @@
     <meta name="viewport" content="width=device-width" />
     <link rel="icon" type="image/png" href="/favicon.png" />
     <meta name="generator" content={Astro.generator} />
-    <title>Outright SMP</title>
+    <title>Outright Charity Event</title>
   </head>
   <body>
+    <div
+      style="
+        position: fixed;
+        bottom: 16px;
+        right: 16px;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        background-color: #eee;
+        padding: 16px;
+        border-radius: 16px;
+        box-shadow: rgba(0, 0, 0, 0.2) 0px 4px 12px;
+      "
+    >
+      <img
+        src="/outright-donation-qr.png"
+        alt="Outright Donation QR Code"
+        width="140"
+        height="140"
+        class="donation-qr"
+      />
+      <a
+        href="https://tiltify.com/outright-action-international/streaming-with-pride-the-chosen-family-fundraising-campaign"
+        target="_blank"
+        style="
+          color: black;
+          font-size: 24px;
+          font-weight: 600;
+          cursor: pointer;
+        "
+      >
+        Donate!
+      </a>
+    </div>
     <section>
       <div class="header">
-        <h1>Outright SMP</h1>
+        <h1>Outright Charity Event</h1>
       </div>
       <div class="content">
         <h2>Server Details</h2>
@@ -141,5 +175,12 @@
     li {
       margin-block-end: 16px;
     }
+    .donation-qr {
+      margin-block-end: 8px;
+
+      @media screen and (max-width: 600px) {
+        display: none;
+      }
+    }
   </style>
 </html>
diff --git a/src/pages/outright/schedule.astro b/src/pages/outright/schedule.astro
@@ -9,12 +9,46 @@ import { OutrightSchedule } from "../../components/outright/Schedule";
     <meta name="viewport" content="width=device-width" />
     <link rel="icon" type="image/png" href="/favicon.png" />
     <meta name="generator" content={Astro.generator} />
-    <title>Outright SMP</title>
+    <title>Outright Charity Event</title>
   </head>
   <body>
+    <div
+      style="
+        position: fixed;
+        bottom: 16px;
+        right: 16px;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        background-color: #eee;
+        padding: 16px;
+        border-radius: 16px;
+        box-shadow: rgba(0, 0, 0, 0.2) 0px 4px 12px;
+      "
+    >
+      <img
+        src="/outright-donation-qr.png"
+        alt="Outright Donation QR Code"
+        width="140"
+        height="140"
+        class="donation-qr"
+      />
+      <a
+        href="https://tiltify.com/outright-action-international/streaming-with-pride-the-chosen-family-fundraising-campaign"
+        target="_blank"
+        style="
+          color: black;
+          font-size: 24px;
+          font-weight: 600;
+          cursor: pointer;
+        "
+      >
+        Donate!
+      </a>
+    </div>
     <section>
       <div class="header">
-        <h1>Outright SMP</h1>
+        <h1>Outright Charity Event</h1>
       </div>
       <div class="content">
         <h2>Outright Stream Schedule</h2>
@@ -78,4 +112,11 @@ import { OutrightSchedule } from "../../components/outright/Schedule";
   li {
     margin-block-end: 16px;
   }
+  .donation-qr {
+    margin-block-end: 8px;
+
+    @media screen and (max-width: 600px) {
+      display: none;
+    }
+  }
 </style>