mirror of
https://github.com/wukko/cobalt.git
synced 2024-11-15 12:50:01 +00:00
web/donate: move donation options card to own component
- moved reused variables to parent - added body text
This commit is contained in:
wukko
parent
87b76ec1e2
commit
bf73f512e2
4 changed files with 168 additions and 137 deletions
|
|
@ -1,4 +1,7 @@
|
||||||
{
|
{
|
||||||
"banner.title": "Support a safe\nand open Internet",
|
"banner.title": "Support a safe\nand open Internet",
|
||||||
"banner.subtitle": "donate to imput or share the\njoy of cobalt with a friend"
|
"banner.subtitle": "donate to imput or share the\njoy of cobalt with a friend",
|
||||||
|
|
||||||
|
"body.motivation": "cobalt helps thousands of producers, educators, and other creative people to do what they love. we created cobalt because we believe that internet doesn’t have to be scary. greed and ads have ruined the internet — we are fighting back with friendly and open tools that aren’t made for profit.",
|
||||||
|
"body.keep_going": "you can help us stay motivated & keep creating safe alternatives to unfair and abusive web tools by sharing cobalt with a friend or by donating to us."
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -33,24 +33,14 @@
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
#banner {
|
#banner {
|
||||||
--banner-radius: 28px;
|
|
||||||
--border-opacity: 0.1;
|
|
||||||
--gradient-start: #1a1a1a;
|
|
||||||
--gradient-end: #404040;
|
|
||||||
position: relative;
|
position: relative;
|
||||||
border-radius: var(--banner-radius);
|
border-radius: var(--donate-border-radius);
|
||||||
background: linear-gradient(
|
background: linear-gradient(
|
||||||
180deg,
|
180deg,
|
||||||
var(--gradient-start) 30%,
|
var(--donate-gradient-start) 30%,
|
||||||
var(--gradient-end) 100%
|
var(--donate-gradient-end) 100%
|
||||||
);
|
);
|
||||||
box-shadow: 0 0 0 2px rgba(255, 255, 255, var(--border-opacity)) inset;
|
box-shadow: 0 0 0 2px rgba(255, 255, 255, var(--donate-border-opacity)) inset;
|
||||||
}
|
|
||||||
|
|
||||||
:global([data-theme="dark"]) #banner {
|
|
||||||
--border-opacity: 0.05;
|
|
||||||
--gradient-start: #101010;
|
|
||||||
--gradient-end: #2d2d2d;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
#banner-contents {
|
#banner-contents {
|
||||||
|
|
@ -67,7 +57,7 @@
|
||||||
height: 100%;
|
height: 100%;
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
opacity: 8%;
|
opacity: 8%;
|
||||||
border-radius: var(--banner-radius);
|
border-radius: var(--donate-border-radius);
|
||||||
mask-image: linear-gradient(
|
mask-image: linear-gradient(
|
||||||
150deg,
|
150deg,
|
||||||
rgba(0, 0, 0, 0.7) 0%,
|
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">
|
<script lang="ts">
|
||||||
import "@fontsource/redaction-10/400.css";
|
import "@fontsource/redaction-10/400.css";
|
||||||
|
|
||||||
import { t } from "$lib/i18n/translations";
|
import { t } from "$lib/i18n/translations";
|
||||||
import { donate } from "$lib/env";
|
import DonateBanner from "$components/donate/DonateBanner.svelte";
|
||||||
import DonateBanner from "$components/misc/DonateBanner.svelte";
|
import DonateOptionsCard from "$components/donate/DonateOptionsCard.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);
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<svelte:head>
|
<svelte:head>
|
||||||
|
|
@ -36,120 +13,52 @@
|
||||||
|
|
||||||
<main id="donate-page">
|
<main id="donate-page">
|
||||||
<DonateBanner />
|
<DonateBanner />
|
||||||
<section id="donation-options">
|
<section id="support-options">
|
||||||
{#each {length: 2} as _}
|
<DonateOptionsCard />
|
||||||
<!-- TODO: move this whole thing into a component -->
|
<DonateOptionsCard />
|
||||||
<div class="donation-box">
|
</section>
|
||||||
<div class="donation-info">
|
<section id="donate-text" class="long-text-noto">
|
||||||
<div class="donation-icon"><IconCalendarRepeat /></div>
|
<p>
|
||||||
<div class="donation-title">monthly donation</div>
|
{$t("donate.body.motivation")}
|
||||||
<div class="donation-subtitle">processed by liberapay</div>
|
</p>
|
||||||
</div>
|
<p>
|
||||||
<div class="donation-scrollbox">
|
{$t("donate.body.keep_going")}
|
||||||
{#each {length: 4} as _}
|
</p>
|
||||||
<!-- 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>
|
</section>
|
||||||
</main>
|
</main>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
#donate-page {
|
#donate-page {
|
||||||
|
--donate-border-radius: 24px;
|
||||||
|
--donate-border-opacity: 0.1;
|
||||||
|
--donate-gradient-start: #1a1a1a;
|
||||||
|
--donate-gradient-end: #404040;
|
||||||
|
|
||||||
max-width: 950px;
|
max-width: 950px;
|
||||||
|
width: 900px;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
overflow-x: hidden;
|
overflow-x: hidden;
|
||||||
padding: var(--padding);
|
padding: var(--padding);
|
||||||
}
|
|
||||||
|
|
||||||
#donation-options {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-evenly;
|
|
||||||
padding-top: 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.donation-box {
|
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
border-radius: calc(3 * var(--border-radius));
|
gap: 15px;
|
||||||
padding: 32px;
|
|
||||||
|
|
||||||
background: linear-gradient(
|
|
||||||
rgba(65,65,65,1) 5%,
|
|
||||||
rgba(26,26,26,1)
|
|
||||||
);
|
|
||||||
color: white;
|
|
||||||
gap: 8px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.donation-icon :global(*) {
|
:global([data-theme="dark"]) #donate-page {
|
||||||
width: 28px;
|
--donate-border-opacity: 0.05;
|
||||||
height: 28px;
|
--donate-gradient-start: #101010;
|
||||||
|
--donate-gradient-end: #2d2d2d;
|
||||||
}
|
}
|
||||||
|
|
||||||
.donation-title {
|
#support-options {
|
||||||
font-size: 14.5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.donation-subtitle {
|
|
||||||
font-size: 12px;
|
|
||||||
color: #9a9a9a;
|
|
||||||
}
|
|
||||||
|
|
||||||
.donation-scrollbox {
|
|
||||||
display: flex;
|
display: flex;
|
||||||
overflow-x: scroll;
|
flex-direction: row;
|
||||||
width: 384px;
|
gap: 15px;
|
||||||
gap: 5px;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.donation-option {
|
#donate-text {
|
||||||
display: flex;
|
padding: 0 24px;
|
||||||
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>
|
</style>
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue