Add separate tabs for mollie and crypto payents
This commit is contained in:
@@ -57,21 +57,25 @@ onMount(() => {
|
||||
</div>
|
||||
|
||||
<div class="left_col">
|
||||
Download limit
|
||||
Downloading
|
||||
</div>
|
||||
<div class="feature_cell free_feat">
|
||||
<span class="bold">10 GB per day</span><br/>
|
||||
Download speed is reduced to 1 MiB/s when exceeded
|
||||
|
||||
Download speed is reduced to 1 MiB/s when exceeded. Max 3 concurrent
|
||||
downloads
|
||||
</div>
|
||||
<div class="feature_cell pro_feat">
|
||||
<span class="bold">2 TB per month</span><br/>
|
||||
Transfer limit is used for downloading, sharing and hotlinking files
|
||||
|
||||
Transfer limit is used for downloading, sharing and hotlinking. No
|
||||
connection limit
|
||||
</div>
|
||||
<div class="feature_cell prepaid_feat">
|
||||
<span class="bold">€2 per TB transferred</span><br/>
|
||||
|
||||
Used for downloading, sharing and hotlinking files. You only pay for
|
||||
what you use
|
||||
Used for downloading, sharing and hotlinking. You only pay for what
|
||||
you use. No connection limit
|
||||
</div>
|
||||
|
||||
<div class="left_col">
|
||||
@@ -82,7 +86,7 @@ onMount(() => {
|
||||
</div>
|
||||
<div class="feature_cell free_feat">
|
||||
Only <span class="bold">image files</span> below <span
|
||||
class="bold">1 MB</span> in size
|
||||
class="bold">1 MB</span> in size can be hotlinked
|
||||
</div>
|
||||
<div class="feature_cell span2 pro_feat">
|
||||
<span class="bold">Any file type</span><br/>
|
||||
@@ -94,7 +98,7 @@ onMount(() => {
|
||||
</div>
|
||||
<div class="feature_cell span2 pro_feat">
|
||||
<span class="bold">No limit</span><br/>
|
||||
But files expire when they are not downloaded
|
||||
Files expire when they are not downloaded
|
||||
</div>
|
||||
<div class="feature_cell prepaid_feat">
|
||||
<span class="bold">€4 / TB / month</span><br/>
|
||||
@@ -345,7 +349,6 @@ header {
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
background-blend-mode: normal;
|
||||
box-shadow: inset 0 0 10px -4px var(--shadow_color);
|
||||
}
|
||||
header > h1 {
|
||||
margin-top: 60px;
|
||||
@@ -369,9 +372,9 @@ header > h1 {
|
||||
grid-auto-flow: row;
|
||||
grid-template-columns: 9em 1fr 1fr 1fr;
|
||||
min-width: 40em;
|
||||
max-width: 65em;
|
||||
gap: 6px;
|
||||
margin: 12px;
|
||||
max-width: 70em;
|
||||
gap: 5px;
|
||||
margin: 10px;
|
||||
}
|
||||
.grid > div {
|
||||
justify-content: center;
|
||||
@@ -415,7 +418,4 @@ header > h1 {
|
||||
.span3 {
|
||||
grid-column: span 3;
|
||||
}
|
||||
.vspan2 {
|
||||
grid-row: span 2;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -74,7 +74,6 @@ header {
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
background-blend-mode: normal;
|
||||
box-shadow: inset 0 0 10px -4px var(--shadow_color);
|
||||
}
|
||||
header > h1 {
|
||||
margin-top: 60px;
|
||||
|
||||
@@ -7,6 +7,7 @@ import MollieDeposit from "./MollieDeposit.svelte";
|
||||
|
||||
let loading = false
|
||||
let credit_amount = 10
|
||||
let tab = "mollie"
|
||||
|
||||
const checkout = async (network = "", amount = 0, country = "") => {
|
||||
loading = true
|
||||
@@ -40,6 +41,7 @@ const checkout = async (network = "", amount = 0, country = "") => {
|
||||
}
|
||||
|
||||
let invoices = []
|
||||
let unpaid_invoice = false
|
||||
const load_invoices = async () => {
|
||||
loading = true
|
||||
try {
|
||||
@@ -49,8 +51,13 @@ const load_invoices = async () => {
|
||||
}
|
||||
|
||||
let invoices_tmp = await resp.json()
|
||||
unpaid_invoice = false
|
||||
invoices_tmp.forEach(row => {
|
||||
row.time = new Date(row.time)
|
||||
|
||||
if (row.payment_method === "mollie" && row.status === "open") {
|
||||
unpaid_invoice = true
|
||||
}
|
||||
})
|
||||
invoices_tmp.sort((a, b) => {
|
||||
return b.time - a.time
|
||||
@@ -80,36 +87,59 @@ onMount(() => {
|
||||
transfer.
|
||||
</p>
|
||||
|
||||
<MollieDeposit/>
|
||||
|
||||
<h3>Crypto payments</h3>
|
||||
<p>
|
||||
Alternatively you can use Bitcoin, Lightning network (<a
|
||||
href="https://btcpay.pixeldrain.com/embed/uS2mbWjXUuaAqMh8XLjkjwi8oehFuxeBZxekMxv68LN/BTC/ln"
|
||||
target="_blank" rel="noreferrer">node info</a>) and Dogecoin to deposit
|
||||
credits on your pixeldrain account. You must pay the full amount as
|
||||
stated on the invoice, else your payment will fail.
|
||||
</p>
|
||||
<p>
|
||||
Do note that it is not possible to withdraw coins from your
|
||||
pixeldrain account. It's not a wallet. Any amount of money you
|
||||
deposit has to be used up.
|
||||
</p>
|
||||
<div class="highlight_border">
|
||||
Deposit amount €
|
||||
<input type="number" bind:value={credit_amount} min="10"/>
|
||||
<br/>
|
||||
Choose payment method:<br/>
|
||||
<button on:click={() => {checkout("btc", credit_amount)}}>
|
||||
<span class="icon_unicode">₿</span> Bitcoin
|
||||
<div class="tab_bar">
|
||||
<button on:click={() => tab = "mollie"} class:button_highlight={tab === "mollie"}>
|
||||
<i class="icon">euro</i>
|
||||
Mollie
|
||||
</button>
|
||||
<button on:click={() => {checkout("btc_lightning", credit_amount)}}>
|
||||
<i class="icon">bolt</i> Lightning network
|
||||
</button>
|
||||
<button on:click={() => {checkout("doge", credit_amount)}}>
|
||||
<span class="icon_unicode">Ð</span> Dogecoin
|
||||
<button on:click={() => tab = "btcpay"} class:button_highlight={tab === "btcpay"}>
|
||||
<i class="icon">currency_bitcoin</i>
|
||||
Crypto
|
||||
</button>
|
||||
</div>
|
||||
{#if tab === "mollie"}
|
||||
{#if unpaid_invoice}
|
||||
<div class="highlight_yellow">
|
||||
<p>
|
||||
You still have an unpaid invoice open. Please pay that one
|
||||
before requesting a new invoice. You can find unpaid
|
||||
invoices at the bottom of this page. You can cancel an
|
||||
invoice by clicking Pay, and then clicking the Back link at
|
||||
the bottom of the page.
|
||||
</p>
|
||||
</div>
|
||||
{:else}
|
||||
<MollieDeposit/>
|
||||
{/if}
|
||||
{:else if tab === "btcpay"}
|
||||
<div class="highlight_border">
|
||||
<p style="text-align: initial">
|
||||
Alternatively you can use Bitcoin, Lightning network (<a
|
||||
href="https://btcpay.pixeldrain.com/embed/uS2mbWjXUuaAqMh8XLjkjwi8oehFuxeBZxekMxv68LN/BTC/ln"
|
||||
target="_blank" rel="noreferrer">node info</a>) and Dogecoin to deposit
|
||||
credits on your pixeldrain account. You must pay the full amount as
|
||||
stated on the invoice, else your payment will fail.
|
||||
</p>
|
||||
<p style="text-align: initial">
|
||||
Do note that it is not possible to withdraw coins from your
|
||||
pixeldrain account. It's not a wallet. Any amount of money you
|
||||
deposit has to be used up.
|
||||
</p>
|
||||
Deposit amount €
|
||||
<input type="number" bind:value={credit_amount} min="10"/>
|
||||
<br/>
|
||||
Choose payment method:<br/>
|
||||
<button on:click={() => {checkout("btc", credit_amount)}}>
|
||||
<i class="icon">currency_bitcoin</i> Bitcoin
|
||||
</button>
|
||||
<button on:click={() => {checkout("btc_lightning", credit_amount)}}>
|
||||
<i class="icon">bolt</i> Lightning network
|
||||
</button>
|
||||
<button on:click={() => {checkout("doge", credit_amount)}}>
|
||||
<span class="icon_unicode">Ð</span> Dogecoin
|
||||
</button>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<h3 id="invoices">Past invoices</h3>
|
||||
<p>
|
||||
|
||||
@@ -34,9 +34,10 @@ $: frac = used / total
|
||||
<div class="highlight_blue">
|
||||
<p>
|
||||
You have used {(frac*100).toFixed(0)}% of your data cap. If your
|
||||
data runs out people won't be able to download your files directly
|
||||
from the API anymore, ads will be shown on the file viewer and
|
||||
transfer rates will be limited.
|
||||
data runs out the premium features related to downloading will be
|
||||
disabled. This means that the download page shows pixeldrain
|
||||
branding, people who download your files have a daily download limit
|
||||
and hotlinking is disabled.
|
||||
</p>
|
||||
|
||||
{#if window.user.monthly_transfer_cap > 0}
|
||||
|
||||
Reference in New Issue
Block a user