Add separate tabs for mollie and crypto payents

svelte/src/home_page/FeatureTable.svelte

@@ -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
+			Used for downloading, sharing and hotlinking. You only pay for what
-			what you use
+			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;
+	max-width: 70em;
-	gap: 6px;
+	gap: 5px;
-	margin: 12px;
+	margin: 10px;
 }
 .grid > div {
 	justify-content: center;
@@ -415,7 +418,4 @@ header > h1 {
 .span3 {
 	grid-column: span 3;
 }
-.vspan2 {
-	grid-row: span 2;
-}
 </style>

svelte/src/home_page/HomePage.svelte

@@ -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;

svelte/src/user_home/DepositCredit.svelte

@@ -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/>
+	<div class="tab_bar">
-
+		<button on:click={() => tab = "mollie"} class:button_highlight={tab === "mollie"}>
-	<h3>Crypto payments</h3>
+			<i class="icon">euro</i>
-	<p>
+			Mollie
-		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
 		</button>
-		<button on:click={() => {checkout("btc_lightning", credit_amount)}}>
+		<button on:click={() => tab = "btcpay"} class:button_highlight={tab === "btcpay"}>
-			<i class="icon">bolt</i> Lightning network
+			<i class="icon">currency_bitcoin</i>
-		</button>
+			Crypto
-		<button on:click={() => {checkout("doge", credit_amount)}}>
-			<span class="icon_unicode">Ð</span> Dogecoin
 		</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>

svelte/src/user_home/HotlinkProgressBar.svelte

@@ -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
+			data runs out the premium features related to downloading will be
-			from the API anymore, ads will be shown on the file viewer and
+			disabled. This means that the download page shows pixeldrain
-			transfer rates will be limited.
+			branding, people who download your files have a daily download limit
+			and hotlinking is disabled.
 		</p>
 
 		{#if window.user.monthly_transfer_cap > 0}