Replace CSS classes with semantic HTML
This commit is contained in:
@@ -120,157 +120,156 @@ onMount(() => {
|
||||
})
|
||||
</script>
|
||||
|
||||
<div>
|
||||
{#if loading}
|
||||
<div class="spinner_container">
|
||||
<Spinner />
|
||||
</div>
|
||||
{/if}
|
||||
<div class="limit_width">
|
||||
<h2>Deposit credits</h2>
|
||||
<p>
|
||||
You can deposit credit on your pixeldrain account with Bitcoin,
|
||||
Lightning network (<a
|
||||
href="https://btcpay.pixeldrain.com/embed/uS2mbWjXUuaAqMh8XLjkjwi8oehFuxeBZxekMxv68LN/BTC/ln"
|
||||
target="_blank">node info</a>) and Dogecoin. 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 style="text-align: center;">
|
||||
Deposit amount €
|
||||
<input type="number" bind:value={credit_amount} min="1"/>
|
||||
<br/>
|
||||
Pay with:<br/>
|
||||
<button on:click={() => {checkout("btc")}}>
|
||||
<span class="icon_unicode">₿</span> Bitcoin
|
||||
</button>
|
||||
<button on:click={() => {checkout("btc_lightning")}}>
|
||||
<i class="icon">bolt</i> Lightning network
|
||||
</button>
|
||||
<button on:click={() => {checkout("doge")}}>
|
||||
<span class="icon_unicode">Ð</span> Dogecoin
|
||||
</button>
|
||||
</div>
|
||||
{#if loading}
|
||||
<div class="spinner_container">
|
||||
<Spinner />
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<section>
|
||||
<h2>Deposit credits</h2>
|
||||
<p>
|
||||
You can deposit credit on your pixeldrain account with Bitcoin,
|
||||
Lightning network (<a
|
||||
href="https://btcpay.pixeldrain.com/embed/uS2mbWjXUuaAqMh8XLjkjwi8oehFuxeBZxekMxv68LN/BTC/ln"
|
||||
target="_blank">node info</a>) and Dogecoin. 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 style="text-align: center;">
|
||||
Deposit amount €
|
||||
<input type="number" bind:value={credit_amount} min="1"/>
|
||||
<br/>
|
||||
Pay with:<br/>
|
||||
<button on:click={() => {checkout("btc")}}>
|
||||
<span class="icon_unicode">₿</span> Bitcoin
|
||||
</button>
|
||||
<button on:click={() => {checkout("btc_lightning")}}>
|
||||
<i class="icon">bolt</i> Lightning network
|
||||
</button>
|
||||
<button on:click={() => {checkout("doge")}}>
|
||||
<span class="icon_unicode">Ð</span> Dogecoin
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<h3>Open invoices</h3>
|
||||
<div class="table_scroll">
|
||||
<table style="text-align: left;">
|
||||
<thead>
|
||||
<tr>
|
||||
<td>Created</td>
|
||||
<td>Amount</td>
|
||||
<td>Status</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{#each invoices as row (row.id)}
|
||||
{#if row.status === "New" ||
|
||||
row.status === "InvoiceCreated" ||
|
||||
row.status === "InvoiceProcessing" ||
|
||||
show_expired
|
||||
}
|
||||
<tr>
|
||||
<td>{formatDate(row.time, true, true, false)}</td>
|
||||
<td><Euro amount={row.amount}></Euro></td>
|
||||
<td>
|
||||
{#if row.status === "InvoiceCreated"}
|
||||
New (waiting for payment)
|
||||
{:else if row.status === "InvoiceProcessing"}
|
||||
Payment received, waiting for confirmations
|
||||
{:else if row.status === "InvoiceSettled"}
|
||||
Paid
|
||||
{:else if row.status === "InvoiceExpired"}
|
||||
Expired
|
||||
{:else}
|
||||
{row.status}
|
||||
{/if}
|
||||
</td>
|
||||
<td>
|
||||
{#if row.status === "New" || row.status === "InvoiceCreated"}
|
||||
<a href={row.checkout_url} class="button button_highlight">
|
||||
<i class="icon">paid</i> Pay
|
||||
</a>
|
||||
{/if}
|
||||
</td>
|
||||
</tr>
|
||||
{/if}
|
||||
{/each}
|
||||
</tbody>
|
||||
</table>
|
||||
<div style="text-align: center;">
|
||||
<button on:click={() => {show_expired = !show_expired}}>
|
||||
{#if show_expired}
|
||||
Hide
|
||||
{:else}
|
||||
Show
|
||||
{/if}
|
||||
expired and settled invoices
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<h2>Transaction log</h2>
|
||||
<p>
|
||||
Here is a log of all transactions on your account balance.
|
||||
</p>
|
||||
|
||||
{#each months as month}
|
||||
<h3>{month.month}</h3>
|
||||
<ul>
|
||||
<li>Subscription charge: <Euro amount={month.total_subscription_charge}></Euro></li>
|
||||
<li>Storage charge: <Euro amount={month.total_storage_charge}></Euro></li>
|
||||
<li>Bandwidth charge: <Euro amount={month.total_bandwidth_charge}></Euro></li>
|
||||
<li>Total charge: <Euro amount={month.total_deducted}></Euro></li>
|
||||
<li>Deposited: <Euro amount={month.total_deposited}></Euro></li>
|
||||
</ul>
|
||||
|
||||
<h3>Open invoices</h3>
|
||||
<div class="table_scroll">
|
||||
<table style="text-align: left;">
|
||||
<thead>
|
||||
<tr>
|
||||
<td>Created</td>
|
||||
<td>Amount</td>
|
||||
<td>Status</td>
|
||||
<td>Time</td>
|
||||
<td>Balance</td>
|
||||
<td>Subscription</td>
|
||||
<td colspan="2">Storage</td>
|
||||
<td colspan="2">Bandwidth</td>
|
||||
<td>Deposited</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td>Charged</td>
|
||||
<td>Charged</td>
|
||||
<td>Used</td>
|
||||
<td>Charged</td>
|
||||
<td>Used</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{#each invoices as row (row.id)}
|
||||
{#if row.status === "New" ||
|
||||
row.status === "InvoiceCreated" ||
|
||||
row.status === "InvoiceProcessing" ||
|
||||
show_expired
|
||||
}
|
||||
<tr>
|
||||
<td>{formatDate(row.time, true, true, false)}</td>
|
||||
<td><Euro amount={row.amount}></Euro></td>
|
||||
<td>
|
||||
{#if row.status === "InvoiceCreated"}
|
||||
New (waiting for payment)
|
||||
{:else if row.status === "InvoiceProcessing"}
|
||||
Payment received, waiting for confirmations
|
||||
{:else if row.status === "InvoiceSettled"}
|
||||
Paid
|
||||
{:else if row.status === "InvoiceExpired"}
|
||||
Expired
|
||||
{:else}
|
||||
{row.status}
|
||||
{/if}
|
||||
</td>
|
||||
<td>
|
||||
{#if row.status === "New" || row.status === "InvoiceCreated"}
|
||||
<a href={row.checkout_url} class="button button_highlight">
|
||||
<i class="icon">paid</i> Pay
|
||||
</a>
|
||||
{/if}
|
||||
</td>
|
||||
</tr>
|
||||
{/if}
|
||||
{#each month.rows as row}
|
||||
<tr>
|
||||
<td>{formatDate(row.time, true, true, false)}</td>
|
||||
<td><Euro amount={row.new_balance}></Euro></td>
|
||||
<td><Euro amount={row.subscription_charge} precision="4"></Euro></td>
|
||||
<td><Euro amount={row.storage_charge} precision="4"></Euro></td>
|
||||
<td>{formatDataVolume(row.storage_used, 3)}</td>
|
||||
<td><Euro amount={row.bandwidth_charge} precision="4"></Euro></td>
|
||||
<td>{formatDataVolume(row.bandwidth_used, 3)}</td>
|
||||
<td><Euro amount={row.deposit_amount}></Euro></td>
|
||||
</tr>
|
||||
{/each}
|
||||
</tbody>
|
||||
</table>
|
||||
<div style="text-align: center;">
|
||||
<button on:click={() => {show_expired = !show_expired}}>
|
||||
{#if show_expired}
|
||||
Hide
|
||||
{:else}
|
||||
Show
|
||||
{/if}
|
||||
expired and settled invoices
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<h2>Transaction log</h2>
|
||||
<p>
|
||||
Here is a log of all transactions on your account balance.
|
||||
</p>
|
||||
|
||||
{#each months as month}
|
||||
<h3>{month.month}</h3>
|
||||
<ul>
|
||||
<li>Subscription charge: <Euro amount={month.total_subscription_charge}></Euro></li>
|
||||
<li>Storage charge: <Euro amount={month.total_storage_charge}></Euro></li>
|
||||
<li>Bandwidth charge: <Euro amount={month.total_bandwidth_charge}></Euro></li>
|
||||
<li>Total charge: <Euro amount={month.total_deducted}></Euro></li>
|
||||
<li>Deposited: <Euro amount={month.total_deposited}></Euro></li>
|
||||
</ul>
|
||||
|
||||
<div class="table_scroll">
|
||||
<table style="text-align: left;">
|
||||
<thead>
|
||||
<tr>
|
||||
<td>Time</td>
|
||||
<td>Balance</td>
|
||||
<td>Subscription</td>
|
||||
<td colspan="2">Storage</td>
|
||||
<td colspan="2">Bandwidth</td>
|
||||
<td>Deposited</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td>Charged</td>
|
||||
<td>Charged</td>
|
||||
<td>Used</td>
|
||||
<td>Charged</td>
|
||||
<td>Used</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{#each month.rows as row}
|
||||
<tr>
|
||||
<td>{formatDate(row.time, true, true, false)}</td>
|
||||
<td><Euro amount={row.new_balance}></Euro></td>
|
||||
<td><Euro amount={row.subscription_charge} precision="4"></Euro></td>
|
||||
<td><Euro amount={row.storage_charge} precision="4"></Euro></td>
|
||||
<td>{formatDataVolume(row.storage_used, 3)}</td>
|
||||
<td><Euro amount={row.bandwidth_charge} precision="4"></Euro></td>
|
||||
<td>{formatDataVolume(row.bandwidth_used, 3)}</td>
|
||||
<td><Euro amount={row.deposit_amount}></Euro></td>
|
||||
</tr>
|
||||
{/each}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
{/each}
|
||||
</section>
|
||||
|
||||
<style>
|
||||
.spinner_container {
|
||||
|
||||
Reference in New Issue
Block a user