mirror of
https://github.com/wukko/cobalt.git
synced 2025-06-12 21:27:39 +02:00
web/donate: move donation options card to own component
- moved reused variables to parent - added body text
This commit is contained in:
wukko
@ -33,24 +33,14 @@
|
||||
|
||||
<style>
|
||||
#banner {
|
||||
--banner-radius: 28px;
|
||||
--border-opacity: 0.1;
|
||||
--gradient-start: #1a1a1a;
|
||||
--gradient-end: #404040;
|
||||
position: relative;
|
||||
border-radius: var(--banner-radius);
|
||||
border-radius: var(--donate-border-radius);
|
||||
background: linear-gradient(
|
||||
180deg,
|
||||
var(--gradient-start) 30%,
|
||||
var(--gradient-end) 100%
|
||||
var(--donate-gradient-start) 30%,
|
||||
var(--donate-gradient-end) 100%
|
||||
);
|
||||
box-shadow: 0 0 0 2px rgba(255, 255, 255, var(--border-opacity)) inset;
|
||||
}
|
||||
|
||||
:global([data-theme="dark"]) #banner {
|
||||
--border-opacity: 0.05;
|
||||
--gradient-start: #101010;
|
||||
--gradient-end: #2d2d2d;
|
||||
box-shadow: 0 0 0 2px rgba(255, 255, 255, var(--donate-border-opacity)) inset;
|
||||
}
|
||||
|
||||
#banner-contents {
|
||||
@ -67,7 +57,7 @@
|
||||
height: 100%;
|
||||
z-index: 1;
|
||||
opacity: 8%;
|
||||
border-radius: var(--banner-radius);
|
||||
border-radius: var(--donate-border-radius);
|
||||
mask-image: linear-gradient(
|
||||
150deg,
|
||||
rgba(0, 0, 0, 0.7) 0%,
|
||||
|
||||
129
web/src/components/donate/DonateOptionsCard.svelte
Normal file
129
web/src/components/donate/DonateOptionsCard.svelte
Normal file
@ -0,0 +1,129 @@
|
||||
<script lang="ts">
|
||||
import IconCalendarRepeat from "@tabler/icons-svelte/IconCalendarRepeat.svelte";
|
||||
import IconCup from "@tabler/icons-svelte/IconCup.svelte";
|
||||
import IconArrowRight from "@tabler/icons-svelte/IconArrowRight.svelte";
|
||||
|
||||
import { donate } from "$lib/env";
|
||||
|
||||
let customAmountOnceInput: HTMLInputElement;
|
||||
let customAmountRecurringInput: HTMLInputElement;
|
||||
|
||||
const donateStripe = (amount: number) => {
|
||||
const url = new URL(donate.stripe);
|
||||
url.searchParams.set('__prefilled_amount', amount.toString());
|
||||
window.open(url, '_blank');
|
||||
}
|
||||
|
||||
const donateLibera = (amount: number) => {
|
||||
const url = new URL(donate.liberapay);
|
||||
url.searchParams.set('currency', 'USD');
|
||||
url.searchParams.set('period', 'monthly');
|
||||
url.searchParams.set('amount', (amount / 100).toString());
|
||||
window.open(url, '_blank');
|
||||
}
|
||||
|
||||
const toClipboard = (text: string) => navigator.clipboard.writeText(text);
|
||||
</script>
|
||||
|
||||
<div class="donation-box">
|
||||
<div class="donation-info">
|
||||
<div class="donation-icon"><IconCalendarRepeat /></div>
|
||||
<div class="donation-title">monthly donation</div>
|
||||
<div class="donation-subtitle">processed by liberapay</div>
|
||||
</div>
|
||||
<div class="donation-scrollbox">
|
||||
{#each { length: 4 } as _}
|
||||
<!-- TODO: maybe move this also into a component -->
|
||||
<button class="donation-option">
|
||||
<div class="donation-amount"><IconCup /> $5</div>
|
||||
<div class="donation-subtitle">cup of coffee</div>
|
||||
</button>
|
||||
{/each}
|
||||
</div>
|
||||
<div class="donation-custom">
|
||||
<input type="number" placeholder="custom amount (from $2)" />
|
||||
<button><IconArrowRight /></button>
|
||||
</div>
|
||||
<div class="donation-footer donation-subtitle">
|
||||
you will be redirected to liberapay
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.donation-box {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
|
||||
padding: var(--donate-border-radius);
|
||||
border-radius: var(--donate-border-radius);
|
||||
gap: calc(var(--donate-border-radius) / 2);
|
||||
|
||||
color: white;
|
||||
background: linear-gradient(
|
||||
180deg,
|
||||
var(--donate-gradient-end) 0%,
|
||||
var(--donate-gradient-start) 80%
|
||||
);
|
||||
box-shadow: 0 0 0 2px rgba(255, 255, 255, var(--donate-border-opacity)) inset;
|
||||
}
|
||||
|
||||
.donation-icon :global(*) {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
}
|
||||
|
||||
.donation-title {
|
||||
font-size: 14.5px;
|
||||
}
|
||||
|
||||
.donation-subtitle {
|
||||
font-size: 12px;
|
||||
color: #9a9a9a;
|
||||
}
|
||||
|
||||
.donation-scrollbox {
|
||||
display: flex;
|
||||
overflow-x: scroll;
|
||||
width: 384px;
|
||||
gap: 5px;
|
||||
}
|
||||
|
||||
.donation-option {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: #3b3b3b;
|
||||
color: white;
|
||||
align-items: start;
|
||||
padding: 15px;
|
||||
border-radius: var(--border-radius);
|
||||
width: 128px;
|
||||
}
|
||||
|
||||
.donation-amount {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
}
|
||||
|
||||
.donation-custom {
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.donation-custom * {
|
||||
border-radius: var(--border-radius);
|
||||
border: none;
|
||||
background-color: #3b3b3b;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.donation-custom input {
|
||||
flex: 1;
|
||||
padding-left: 12px;
|
||||
}
|
||||
|
||||
.donation-footer {
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
@ -1,31 +1,8 @@
|
||||
<script lang="ts">
|
||||
import "@fontsource/redaction-10/400.css";
|
||||
|
||||
import { t } from "$lib/i18n/translations";
|
||||
import { donate } from "$lib/env";
|
||||
import DonateBanner from "$components/misc/DonateBanner.svelte";
|
||||
import IconCalendarRepeat from "@tabler/icons-svelte/IconCalendarRepeat.svelte";
|
||||
import IconCup from "@tabler/icons-svelte/IconCup.svelte";
|
||||
import IconArrowRight from "@tabler/icons-svelte/IconArrowRight.svelte";
|
||||
|
||||
let customAmountOnceInput: HTMLInputElement;
|
||||
let customAmountRecurringInput: HTMLInputElement;
|
||||
|
||||
const donateStripe = (amount: number) => {
|
||||
const url = new URL(donate.stripe);
|
||||
url.searchParams.set('__prefilled_amount', amount.toString());
|
||||
window.open(url, '_blank');
|
||||
}
|
||||
|
||||
const donateLibera = (amount: number) => {
|
||||
const url = new URL(donate.liberapay);
|
||||
url.searchParams.set('currency', 'USD');
|
||||
url.searchParams.set('period', 'monthly');
|
||||
url.searchParams.set('amount', (amount / 100).toString());
|
||||
window.open(url, '_blank');
|
||||
}
|
||||
|
||||
const toClipboard = (text: string) => navigator.clipboard.writeText(text);
|
||||
import DonateBanner from "$components/donate/DonateBanner.svelte";
|
||||
import DonateOptionsCard from "$components/donate/DonateOptionsCard.svelte";
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
@ -36,120 +13,52 @@
|
||||
|
||||
<main id="donate-page">
|
||||
<DonateBanner />
|
||||
<section id="donation-options">
|
||||
{#each {length: 2} as _}
|
||||
<!-- TODO: move this whole thing into a component -->
|
||||
<div class="donation-box">
|
||||
<div class="donation-info">
|
||||
<div class="donation-icon"><IconCalendarRepeat /></div>
|
||||
<div class="donation-title">monthly donation</div>
|
||||
<div class="donation-subtitle">processed by liberapay</div>
|
||||
</div>
|
||||
<div class="donation-scrollbox">
|
||||
{#each {length: 4} as _}
|
||||
<!-- TODO: maybe move this also into a component -->
|
||||
<button class="donation-option">
|
||||
<div class="donation-amount"><IconCup /> $5</div>
|
||||
<div class="donation-subtitle">cup of coffee</div>
|
||||
</button>
|
||||
{/each}
|
||||
</div>
|
||||
<div class="donation-custom">
|
||||
<input type="number" placeholder="custom amount (from $2)">
|
||||
<button><IconArrowRight /></button>
|
||||
</div>
|
||||
<div class="donation-footer donation-subtitle">
|
||||
you will be redirected to liberapay
|
||||
</div>
|
||||
</div>
|
||||
{/each}
|
||||
<section id="support-options">
|
||||
<DonateOptionsCard />
|
||||
<DonateOptionsCard />
|
||||
</section>
|
||||
<section id="donate-text" class="long-text-noto">
|
||||
<p>
|
||||
{$t("donate.body.motivation")}
|
||||
</p>
|
||||
<p>
|
||||
{$t("donate.body.keep_going")}
|
||||
</p>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<style>
|
||||
#donate-page {
|
||||
--donate-border-radius: 24px;
|
||||
--donate-border-opacity: 0.1;
|
||||
--donate-gradient-start: #1a1a1a;
|
||||
--donate-gradient-end: #404040;
|
||||
|
||||
max-width: 950px;
|
||||
width: 900px;
|
||||
margin: 0 auto;
|
||||
overflow-x: hidden;
|
||||
padding: var(--padding);
|
||||
}
|
||||
|
||||
#donation-options {
|
||||
display: flex;
|
||||
justify-content: space-evenly;
|
||||
padding-top: 16px;
|
||||
}
|
||||
|
||||
.donation-box {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
border-radius: calc(3 * var(--border-radius));
|
||||
padding: 32px;
|
||||
|
||||
background: linear-gradient(
|
||||
rgba(65,65,65,1) 5%,
|
||||
rgba(26,26,26,1)
|
||||
);
|
||||
color: white;
|
||||
gap: 8px;
|
||||
gap: 15px;
|
||||
}
|
||||
|
||||
.donation-icon :global(*) {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
:global([data-theme="dark"]) #donate-page {
|
||||
--donate-border-opacity: 0.05;
|
||||
--donate-gradient-start: #101010;
|
||||
--donate-gradient-end: #2d2d2d;
|
||||
}
|
||||
|
||||
.donation-title {
|
||||
font-size: 14.5px;
|
||||
}
|
||||
|
||||
.donation-subtitle {
|
||||
font-size: 12px;
|
||||
color: #9a9a9a;
|
||||
}
|
||||
|
||||
.donation-scrollbox {
|
||||
#support-options {
|
||||
display: flex;
|
||||
overflow-x: scroll;
|
||||
width: 384px;
|
||||
gap: 5px;
|
||||
flex-direction: row;
|
||||
gap: 15px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.donation-option {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: #3b3b3b;
|
||||
color: white;
|
||||
align-items: start;
|
||||
padding: 15px;
|
||||
border-radius: var(--border-radius);
|
||||
width: 128px;
|
||||
}
|
||||
|
||||
.donation-amount {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
}
|
||||
|
||||
.donation-custom {
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.donation-custom * {
|
||||
border-radius: var(--border-radius);
|
||||
border: none;
|
||||
background-color: #3b3b3b;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.donation-custom input {
|
||||
flex: 1;
|
||||
padding-left: 12px;
|
||||
}
|
||||
|
||||
.donation-footer {
|
||||
text-align: center;
|
||||
#donate-text {
|
||||
padding: 0 24px;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user