pixeldrain/fnx_web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update some confusing wording around the prepaid plan

Browse Source
This commit is contained in:
Wim Brand
2025-03-27 13:45:40 +01:00
parent c8d22f534a
commit 0de8754d9b
8 changed files with 59 additions and 172 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
svelte/src/home_page/FeatureTable.svelte
View File

@@ -6,9 +6,11 @@ import OtherPlans from "./OtherPlans.svelte";
<section> <section>
<p> <p>
Pixeldrain features two different payment modes. We offer a monthly Pixeldrain features two different payment modes. We offer a monthly
subscription which is managed by Patreon, and a prepaid service which subscription which is managed by Patreon, and a Prepaid subscription
supports a dozen different payment providers. For low usage Prepaid is which supports a dozen different payment providers. With Prepaid you pay
usually better as there's no monthly fee. in advance to charge your credit, then usage will be subtracted from
your account credit. For low usage Prepaid is usually better as the
monthly fee is much lower.
</p> </p>
</section> </section>
@@ -26,10 +28,10 @@ import OtherPlans from "./OtherPlans.svelte";
</div> </div>
<div class="left_col"> <div class="left_col">
Price Recurring price
</div> </div>
<div class="feature_cell free_feat"> <div class="feature_cell free_feat">
<span class="bold">Free</span> <span class="bold">None</span>
</div> </div>
<div class="feature_cell pro_feat"> <div class="feature_cell pro_feat">
<span class="bold">€4 / month</span> or <span class="bold">€4 / month</span> or
@@ -38,7 +40,7 @@ import OtherPlans from "./OtherPlans.svelte";
</div> </div>
<div class="feature_cell prepaid_feat"> <div class="feature_cell prepaid_feat">
<span class="bold">€1 / month minimum</span><br/> <span class="bold">€1 / month minimum</span><br/>
Only charged when total usage is below €1 Only charged when usage is less than €1
</div> </div>
<div class="left_col"> <div class="left_col">
@@ -50,7 +52,7 @@ import OtherPlans from "./OtherPlans.svelte";
<div class="feature_cell free_feat"> <div class="feature_cell free_feat">
<span class="bold">6 GB per day</span><br/> <span class="bold">6 GB per day</span><br/>
Download speed is reduced to 1 MiB/s when exceeded. Max 5 concurrent Download speed is reduced to 1 MiB/s when exceeded. Max 3 concurrent
downloads downloads
</div> </div>
<div class="feature_cell pro_feat"> <div class="feature_cell pro_feat">
@@ -108,7 +110,7 @@ import OtherPlans from "./OtherPlans.svelte";
</div> </div>
<div class="feature_cell prepaid_feat"> <div class="feature_cell prepaid_feat">
<span class="bold">Files do not expire</span><br/> <span class="bold">Files do not expire</span><br/>
While prepaid plan is active While prepaid subscription plan is active
</div> </div>
<div class="left_col"> <div class="left_col">
@@ -128,12 +130,13 @@ import OtherPlans from "./OtherPlans.svelte";
<span class="bold">None</span> <span class="bold">None</span>
</div> </div>
<div class="feature_cell pro_feat"> <div class="feature_cell pro_feat">
<span class="bold">PayPal</span>, <span class="bold">Credit card</span> <span class="bold">PayPal</span>, <span class="bold">Credit/debit</span>
</div> </div>
<div class="feature_cell prepaid_feat"> <div class="feature_cell prepaid_feat">
<span class="bold">PayPal</span>, <span class="bold">SEPA</span>, <span class="bold">PayPal</span>,
<span class="bold">Credit card</span><br/> <span class="bold">Credit/debit</span>,
And many more <span class="bold">iDEAL</span><br/>
And many regional providers
</div> </div>
<div></div> <div></div>
@@ -162,12 +165,12 @@ import OtherPlans from "./OtherPlans.svelte";
{#if window.user.username === ""} {#if window.user.username === ""}
<!-- User is not logged in --> <!-- User is not logged in -->
Account required<br/> Account required<br/>
<a href="/login?redirect=checkout" class="button button_highlight round"> <a href="/login?redirect=/user/prepaid/deposit" class="button button_highlight round">
<i class="icon">login</i> <i class="icon">login</i>
Log in Log in
</a> </a>
or or
<a href="/register?redirect=checkout" class="button button_highlight round"> <a href="/register?redirect=/user/prepaid/deposit" class="button button_highlight round">
<i class="icon">how_to_reg</i> <i class="icon">how_to_reg</i>
Register Register
</a> </a>
@@ -184,7 +187,7 @@ import OtherPlans from "./OtherPlans.svelte";
{:else if window.user.subscription.type === "patreon"} {:else if window.user.subscription.type === "patreon"}
Patreon subscription active. Prepaid cannot be activated Patreon subscription active. Prepaid cannot be activated
{:else if window.user.subscription.type === "prepaid"} {:else if window.user.subscription.type === "prepaid"}
Prepaid plan is active.<br/> Prepaid subscription is active<br/>
Current balance <Euro amount={window.user.balance_micro_eur}/> Current balance <Euro amount={window.user.balance_micro_eur}/>
<br/> <br/>
<a href="/user/prepaid/deposit#deposit" class="button button_highlight round"> <a href="/user/prepaid/deposit#deposit" class="button button_highlight round">
@@ -224,6 +227,7 @@ import OtherPlans from "./OtherPlans.svelte";
.grid > div { .grid > div {
justify-content: center; justify-content: center;
align-items: center; align-items: center;
align-content: center;
text-align: center; text-align: center;
padding: 0.25em; padding: 0.25em;
min-height: 3em; min-height: 3em;

121
svelte/src/home_page/ForCreators.svelte
View File

@@ -1,121 +0,0 @@
<script>
import MollieDeposit from "../user_home/MollieDeposit.svelte";
import Euro from "../util/Euro.svelte";
</script>
<header id="prepaid">
<div class="header_image_container"></div>
</header>
<section>
<h2>Prepaid</h2>
<p>
Whether you're working with large video files, high quality photography
or a different kind of media. Pixeldrain is the best way to transfer
files to your customers! With prepaid you only pay for what you use. No
money wasted.
</p>
<br/>
<img src="/res/img/misc/sunrise.webp" class="float_right" alt="Sunrise">
<h2>Simple and affordable pricing</h2>
<ul>
<li><span class="keyword">€4.00 per TB per month</span> for storage</li>
<li><span class="keyword">€1.00 per TB</span> for downloading and sharing files</li>
</ul>
<br style="clear: right;"/>
<br/>
<img src="/res/img/misc/branding.webp" class="float_left" alt="Download page branding">
<h2 style="clear: right;">Customizable</h2>
<p>
<span class="keyword">Downloading files doesn't have to be
dull.</span> Pixeldrain allows you to customize the look of
your download pages. Transfer files to your customers in
style! We also allow you to link directly to the file itself
and circumvent the download page completely.
</p>
<br style="clear: both;"/>
<h2>Get started</h2>
{#if window.user.username !== ""}
{#if window.user.subscription.type === "patreon"}
<p>
You already have a Patreon subscription active. You cannot use
Prepaid while that subscription is active.
</p>
{:else if window.user.subscription.type === "prepaid"}
<p>
You already have a Prepaid subscription active. Your account
balance is <Euro amount={window.user.balance_micro_eur}/>. Use
the form below to top up your balance.
</p>
<MollieDeposit/>
{:else}
<p>
You are currently logged in as {window.user.username}. Use the
form below to activate a prepaid subscription on this account.
</p>
<MollieDeposit/>
{/if}
{:else}
<p>
You are currently not logged in to a pixeldrain account. Log in to
get started.
</p>
<p style="text-align: center;">
<a href="/login?redirect=checkout" class="button button_highlight" style="font-size: 1.2em">
<i class="icon">login</i>
Log in
</a>
or
<a href="/register?redirect=checkout" class="button button_highlight" style="font-size: 1.2em">
<i class="icon">how_to_reg</i>
Register
</a>
</p>
{/if}
</section>
<style>
/* Override the default background with something spectacular */
header {
background-image: url("/res/img/servers.webp");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
background-size: cover;
background-blend-mode: normal;
}
.header_image_container {
margin: auto;
height: 250px;
width: 750px;
max-width: 100%;
background-image: url("/res/img/professional_header.webp");
background-repeat: no-repeat;
background-size: contain;
background-position: center;
}
.keyword {
font-weight: bold;
}
h2 {
border-bottom: none;
}
.float_left, .float_right {
max-width: 45%;
margin: 4px;
border-radius: 12px;
}
.float_left {
float: left;
margin-right: 16px;
}
.float_right {
float: right;
margin-left: 16px;
}
</style>

7
svelte/src/home_page/HomePage.svelte
View File

@@ -83,13 +83,12 @@ let upload_widget
<div>€ 1 / TB</div> <div>€ 1 / TB</div>
</div> </div>
<div> <div>
<div>Account inactivity</div> <div>Minimum fee *</div>
<div>€1 / month</div> <div>€1 / month</div>
</div> </div>
</div> </div>
<p style="text-align: center;"> <p style="text-align: center;">
Inactivity pricing is only applied when monthly usage is less than * The minimum fee is only charged when usage is less than €1
€1
</p> </p>
<h2>What you get</h2> <h2>What you get</h2>
@@ -150,7 +149,7 @@ let upload_widget
<GetStarted/> <GetStarted/>
<header id="pro"> <header id="pro">
<h1>Premium plans</h1> <h1>Subscription plans</h1>
</header> </header>
<div class="page_content"> <div class="page_content">
<FeatureTable/> <FeatureTable/>

8
svelte/src/user_home/BandwidthSharing.svelte
View File

@@ -118,10 +118,10 @@ onMount(() => {
</p> </p>
<ProgressBar used={transfer_used} total={transfer_cap*1e9}></ProgressBar> <ProgressBar used={transfer_used} total={transfer_cap*1e9}></ProgressBar>
<p> <p>
The billshock limit limits how much bandwidth your account can use The billshock limit limits how much bandwidth your account can use in a
in a 30 day window. When this limit is reached files will show ads 30 day window. When this limit is reached hotlinking will be disabled
again and can only be downloaded from the file viewer page. This is and you will no longer be charged for bandwidth usage. This is mostly
mostly useful for prepaid plans, but it works for patreon plans too. useful for the Prepaid subscription, but it works for Patreon plans too.
Set to 0 to disable the limit. Set to 0 to disable the limit.
</p> </p>

13
svelte/src/user_home/DepositCredit.svelte
View File

@@ -81,13 +81,12 @@ onMount(() => {
<section> <section>
<h2 id="deposit">Deposit credit</h2> <h2 id="deposit">Deposit credit</h2>
<p> <p>
Pixeldrain credit can be used for our prepaid plans, which are different Pixeldrain credit can be used for our Prepaid subscription plan, which
from the Patreon plans. With prepaid you only pay for what you use, at a is different from the Patreon plans. Instead of monthly limits, with
rate of €4 per TB per month for storage and €1 per TB for data transfer. Prepaid there are no limits. You pay for what you use, at a rate of €4
See the Subscriptions tab for more information about the perks. per TB per month for storage and €1 per TB for data transfer. Your
</p> current account balance is <Euro
<p> amount={window.user.balance_micro_eur}/>
Current account balance: <Euro amount={window.user.balance_micro_eur}></Euro>
</p> </p>
<div class="tab_bar"> <div class="tab_bar">

28
svelte/src/user_home/OTPSetup.svelte
View File

@@ -11,17 +11,21 @@ let uri = ""
let qr = "" let qr = ""
let reveal_key = false let reveal_key = false
const generate_key = async () => { const generate_key = async () => {
let form = new FormData() try {
form.set("action", "generate") let form = new FormData()
const resp = await check_response(await fetch( form.set("action", "generate")
get_endpoint() + "/user/totp", const resp = await check_response(await fetch(
{method: "POST", body: form}, get_endpoint() + "/user/totp",
)) {method: "POST", body: form},
))
secret = resp.secret secret = resp.secret
uri = resp.uri uri = resp.uri
qr = get_endpoint()+"/misc/qr?text=" +encodeURIComponent(resp.uri) qr = get_endpoint()+"/misc/qr?text=" +encodeURIComponent(resp.uri)
console.log(resp) console.log(resp)
} catch (err) {
alert("Verification failed: "+err.value+"\n"+err.message)
}
} }
let otp = "" let otp = ""
@@ -34,7 +38,7 @@ const verify = async (e: SubmitEvent) => {
form.set("secret", secret) form.set("secret", secret)
try { try {
const resp = await check_response(await fetch( await check_response(await fetch(
get_endpoint() + "/user/totp", get_endpoint() + "/user/totp",
{method: "POST", body: form}, {method: "POST", body: form},
)) ))
@@ -51,6 +55,8 @@ const verify = async (e: SubmitEvent) => {
"might be incorrect. Please enable time synchronization in "+ "might be incorrect. Please enable time synchronization in "+
"your operating system." "your operating system."
) )
} else {
alert("Verification failed: "+err.value+"\n"+err.message)
} }
} }
} }

4
svelte/src/user_home/Router.svelte
View File

@@ -42,12 +42,12 @@ let pages: Tab[] = [
subpages: [ subpages: [
{ {
path: "/user/subscription", path: "/user/subscription",
title: "Manage subscription", title: "Manage",
icon: "shopping_cart", icon: "shopping_cart",
component: Subscription, component: Subscription,
}, { }, {
path: "/user/prepaid/deposit", path: "/user/prepaid/deposit",
title: "Prepaid", title: "Deposit Credit",
icon: "account_balance_wallet", icon: "account_balance_wallet",
component: DepositCredit, component: DepositCredit,
}, { }, {

16
svelte/src/user_home/Subscription.svelte
View File

@@ -94,12 +94,12 @@ onMount(() => {
target="_blank">on Patreon</a>. target="_blank">on Patreon</a>.
</p> </p>
<p> <p>
The Prepaid plan is charged daily based on usage. When you reach The Prepaid subscription is charged daily based on usage. When you reach
negative balance the subscription will automatically end. Need at least negative balance the subscription will automatically end. You need at
<Euro amount="1e6"/> account credit to activate prepaid. Your current least <Euro amount="1e6"/> account credit to activate prepaid. Your
prepaid credit is <Euro amount={window.user.balance_micro_eur}/>. You current credit amount is <Euro
can deposit credit on the <a href="/user/prepaid/deposit">credit deposit amount={window.user.balance_micro_eur}/>. You can deposit credit on the
page</a>. <a href="/user/prepaid/deposit">credit deposit page</a>.
</p> </p>
<h3>Available subscription plans</h3> <h3>Available subscription plans</h3>
@@ -165,8 +165,8 @@ onMount(() => {
</p> </p>
<ul> <ul>
<li> <li>
€1 / month minimum price (only charged when monthly €1 / month minimum price (only charged when usage is
total is below €1) below €1)
</li> </li>
<li> <li>
€4 per TB per month for storage €4 per TB per month for storage