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

Add pixeldrain for creators offer

Browse Source
This commit is contained in:
Fornax
2022-03-30 00:32:27 +02:00
parent d1326af557
commit e18e4303b3
20 changed files with 156 additions and 143 deletions
Download Patch File Download Diff File Expand all files Collapse all files

97
svelte/src/home_page/ForCreators.svelte Normal file
View File

@@ -0,0 +1,97 @@
<header id="prepaid">
<div class="header_image_container"></div>
</header>
<section>
<p style="text-align: center; font-size: 1.2em;">
We have a special offer for content creators and businesses
</p>
<p style="text-align: center; font-size: 1.2em;">
Whether you're working with large video files, high quality
photography or a different kind of media. Pixeldrain is the
best way to transfer data to your customers!
</p>
<br/>
<img src="/res/img/misc/sunrise.webp" class="float_right" alt="Sunrise">
<h2>Simple and affordable</h2>
<span class="keyword">€4 per TB per month for storage</span><br/>
<span class="keyword">€2 per TB for data transfer</span><br/>
<p>
You are only charged for what you use. And it's only 1.4% the price of
Amazon AWS. Yea, seriously, you could save 98% on your bandwidth bill by
switching!
</p>
<p>
Cheaper storage is also available with file expiry enabled.
</p>
<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>Interested?</h2>
<p>
To get started we will need the name and address of your business, and
the name of your pixeldrain account. We will prepare an invoice for you.
Your deposit needs to be at least €100 to save on administrative work.
We accept SEPA, PayPal and Bitcoin.
</p>
<p style="text-align: center;">
<a href="mailto:sales@pixeldrain.com" class="button button_highlight round" style="font-size: 1.4em">
<i class="icon">mail</i>
Contact sales@pixeldrain.com
</a>
</p>
</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: 300px;
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-size: 1.1em;
text-shadow: 1px 1px 3px var(--shadow_color);
}
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>

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

@@ -1,5 +1,6 @@
<script>
import FeatureTable from "./FeatureTable.svelte";
import ForCreators from "./ForCreators.svelte";
import OtherPlans from "./OtherPlans.svelte";
import UploadWidget from "./UploadWidget.svelte";
@@ -42,18 +43,11 @@ import UploadWidget from "./UploadWidget.svelte";
</header>
<section>
<p>
By purchasing a subscription you support pixeldrain on its
mission to make content sharing easier, safer and faster for
everyone. The standard subscription plans use Patreon for
payment processing. Check out our <a href="#prepaid">prepaid
plans</a> if you would like to pay using cryptocurrencies.
</p>
<p>
Pixeldrain uses
<a href="https://en.wikipedia.org/wiki/Byte#Multiple-byte_units"
target="_blank">SI standard units</a> for measuring file sizes.
If you are using Microsoft Windows your files may appear smaller
than they actually are.
By purchasing a subscription you support pixeldrain on its mission to
make content sharing easier, safer and faster for everyone. The standard
subscription plans use Patreon for payment processing. Check out our <a
href="#prepaid">prepaid plans</a> if you are interested in more
professional services.
</p>
<br/>
<FeatureTable></FeatureTable>
@@ -63,32 +57,13 @@ import UploadWidget from "./UploadWidget.svelte";
</div>
<br/>
<OtherPlans></OtherPlans>
<h2 id="prepaid">Prepaid plans</h2>
<p>
You you need more bandwidth or storage space there's also
prepaid plans. For prepaid we charge a base rate of €1 per
month, the rest of the charges are usage based. We charge €4 per
TB per month for storage space and €2 per TB for bandwidth
usage. We accept Bitcoin, Lightning Network and Dogecoin
payments.
</p>
<p>
If €4 per TB of storage is too much we also have plans with
cheaper storage and file expiry enabled. Your files will not
expire as long as they generate traffic, so this can be a viable
option if your files are accessed often.
</p>
<div style="text-align: center;">
<img src="/res/img/coins.webp" alt="supported coins" style="width: 250px; height: 96px;"/>
</div>
<p>
To use prepaid you need to register a pixeldrain account. After
logging in head to the <a href="/user/transactions">transactions
page</a> to deposit your coins.
</p>
<br/>
</section>
<ForCreators/>
<br/>
<br/>
<style>
.header_image_container {
margin: auto;

104
svelte/src/home_page/OtherPlans.svelte
View File

@@ -9,6 +9,7 @@
<a href="https://www.patreon.com/join/pixeldrain/checkout?rid=5736701" class="button button_highlight round">
€ 4
</a>
/ month
{/if}
</div>
<div class="feat_pro features_cell round_tr">
@@ -25,7 +26,10 @@
You have this plan<br/>
Thank you for supporting pixeldrain!
{:else}
<a href="https://www.patreon.com/join/pixeldrain/checkout?rid=5291482" class="button button_highlight round">€ 8</a>
<a href="https://www.patreon.com/join/pixeldrain/checkout?rid=5291482" class="button button_highlight round">
€ 8
</a>
/ month
{/if}
</div>
<div class="feat_pro features_cell">
@@ -48,7 +52,10 @@
You have this plan<br/>
Thank you for supporting pixeldrain!
{:else}
<a href="https://www.patreon.com/join/pixeldrain/checkout?rid=5291516" class="button button_highlight round">€ 16</a>
<a href="https://www.patreon.com/join/pixeldrain/checkout?rid=5291516" class="button button_highlight round">
€ 16
</a>
/ month
{/if}
</div>
<div class="feat_pro features_cell">
@@ -66,7 +73,10 @@
You have this plan<br/>
Thank you for supporting pixeldrain!
{:else}
<a href="https://www.patreon.com/join/pixeldrain/checkout?rid=5291528" class="button button_highlight round">€ 32</a>
<a href="https://www.patreon.com/join/pixeldrain/checkout?rid=5291528" class="button button_highlight round">
€ 32
</a>
/ month
{/if}
</div>
<div class="feat_pro features_cell">
@@ -84,94 +94,17 @@
You have this plan<br/>
Thank you for supporting pixeldrain!
{:else}
<a href="https://www.patreon.com/join/pixeldrain/checkout?rid=6573749" class="button button_highlight round">€ 64</a>
{/if}
</div>
<div class="feat_pro features_cell">
<div><span class="text_highlight">20 GB</span> max file size</div>
<div><span class="text_highlight">Files never expire</span></div>
<div><span class="text_highlight">32 TB</span> transfer limit</div>
<div><span class="text_highlight">32 TB</span> storage space</div>
<div><span class="text_highlight">File viewer branding</span></div>
</div>
</div>
<div>
<div class="cell_background" style="background-image: url('/res/img/benefit_7.webp');">
Omnipotence<br/>
{#if window.user.subscription.id === "patreon_7"}
You have this plan<br/>
Thank you for supporting pixeldrain!
{:else}
<a href="https://www.patreon.com/join/pixeldrain/checkout?rid=7732256" class="button button_highlight round">
€ 96
</a>
{/if}
</div>
<div class="feat_pro features_cell">
<div><span class="text_highlight">20 GB</span> max file size</div>
<div><span class="text_highlight">Files never expire</span></div>
<div><span class="text_highlight">48 TB</span> transfer limit</div>
<div><span class="text_highlight">48 TB</span> storage space</div>
<div><span class="text_highlight">File viewer branding</span></div>
</div>
</div>
<div>
<div class="cell_background" style="background-image: url('/res/img/benefit_8.webp');">
Omnipresence<br/>
{#if window.user.subscription.id === "patreon_8"}
You have this plan<br/>
Thank you for supporting pixeldrain!
{:else}
<a href="https://www.patreon.com/join/pixeldrain/checkout?rid=7732262" class="button button_highlight round">
€ 128
</a>
{/if}
</div>
<div class="feat_pro features_cell">
<div><span class="text_highlight">20 GB</span> max file size</div>
<div><span class="text_highlight">Files never expire</span></div>
<div><span class="text_highlight">64 TB</span> transfer limit</div>
<div><span class="text_highlight">64 TB</span> storage space</div>
<div><span class="text_highlight">File viewer branding</span></div>
</div>
</div>
<div>
<div class="cell_background" style="background-image: url('/res/img/benefit_9.webp');">
Omniscience<br/>
{#if window.user.subscription.id === "patreon_9"}
You have this plan<br/>
Thank you for supporting pixeldrain!
{:else}
<a href="https://www.patreon.com/join/pixeldrain/checkout?rid=7732266" class="button button_highlight round">
€ 192
</a>
{/if}
</div>
<div class="feat_pro features_cell">
<div><span class="text_highlight">20 GB</span> max file size</div>
<div><span class="text_highlight">Files never expire</span></div>
<div><span class="text_highlight">96 TB</span> transfer limit</div>
<div><span class="text_highlight">96 TB</span> storage space</div>
<div><span class="text_highlight">File viewer branding</span></div>
</div>
</div>
<div>
<div class="cell_background" style="background-image: url('/res/img/benefit_10.webp');">
Trinity<br/>
{#if window.user.subscription.id === "patreon_10"}
You have this plan<br/>
Thank you for supporting pixeldrain!
{:else}
<a href="https://www.patreon.com/join/pixeldrain/checkout?rid=7732271" class="button button_highlight round">
€ 256
<a href="https://www.patreon.com/join/pixeldrain/checkout?rid=6573749" class="button button_highlight round">
€ 64
</a>
/ month
{/if}
</div>
<div class="feat_pro features_cell round_br">
<div><span class="text_highlight">20 GB</span> max file size</div>
<div><span class="text_highlight">Files never expire</span></div>
<div><span class="text_highlight">128 TB</span> transfer limit</div>
<div><span class="text_highlight">128 TB</span> storage space</div>
<div><span class="text_highlight">32 TB</span> transfer limit</div>
<div><span class="text_highlight">32 TB</span> storage space</div>
<div><span class="text_highlight">File viewer branding</span></div>
</div>
</div>
@@ -185,6 +118,7 @@
.feat_table > div {
display: flex;
flex-direction: row;
min-height: 8em;
}
.feat_table > div > div:first-child {
flex: 0 0 20%;

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

@@ -7,8 +7,6 @@ import { formatDataVolume } from "../util/Formatting.svelte";
let loading = false
let subscription = window.user.subscription.id
let hotlinking = window.user.hotlinking_enabled
let transfer_cap = window.user.monthly_transfer_cap / 1e9
let result = ""
let result_success = false
@@ -41,15 +39,16 @@ const update = async (update_field) => {
result_success = true
result = "Subscription updated"
setTimeout(() => {location.reload()}, 1000)
} catch (err) {
result_success = false
result = "Failed to update subscription: "+err
} finally {
loading = false
}
}
let hotlinking = window.user.hotlinking_enabled
let transfer_cap = window.user.monthly_transfer_cap / 1e9
let transfer_used = 0
let load_tranfer_used = () => {
let today = new Date()
@@ -79,7 +78,6 @@ onMount(load_tranfer_used)
<Spinner />
</div>
{/if}
<section>
<h2>Manage subscription</h2>
{#if window.user.subscription.type !== "patreon"}
@@ -143,7 +141,7 @@ onMount(load_tranfer_used)
</button>
{/if}
</div>
<div class="feat_normal">
<div class="feat_normal" class:feat_highlight={subscription === "prepaid_temp_storage_120d"}>
<ul>
<li>Base price of €1 per month</li>
<li>€1 per TB per month for storage</li>
@@ -164,7 +162,7 @@ onMount(load_tranfer_used)
</button>
{/if}
</div>
<div class="feat_normal">
<div class="feat_normal" class:feat_highlight={subscription === "prepaid_temp_storage_60d"}>
<ul>
<li>Base price of €1 per month</li>
<li>€0.50 per TB per month for storage</li>
@@ -185,7 +183,7 @@ onMount(load_tranfer_used)
</button>
{/if}
</div>
<div class="feat_normal round_br">
<div class="feat_normal round_br" class:feat_highlight={subscription === ""}>
<ul>
<li>Standard free plan, files expire after 30 days.</li>
</ul>
@@ -239,6 +237,27 @@ onMount(load_tranfer_used)
</section>
<style>
.spinner_container {
position: absolute;
top: 10px;
left: 10px;
height: 100px;
width: 100px;
z-index: 1000;
}
.green {
color: var(--highlight_color);
}
.red {
color: var(--danger_color);
}
.billshock_container {
display: flex;
flex-direction: row;
align-items: center;
}
.spinner_container {
position: absolute;
top: 10px;
@@ -281,17 +300,4 @@ onMount(load_tranfer_used)
.feat_table > div > div.round_tr { border-top-right-radius: 0.5em; }
.feat_table > div > div.round_br { border-bottom-right-radius: 0.5em; }
.green {
color: var(--highlight_color);
}
.red {
color: var(--danger_color);
}
.billshock_container {
display: flex;
flex-direction: row;
align-items: center;
}
</style>