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

Redesign home page to show new subscription plans

Browse Source
This commit is contained in:
Fornax
2023-09-14 21:11:41 +02:00
parent 97bd3462b1
commit f0f4951911
7 changed files with 265 additions and 164 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
res/static/img/inflating_star.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 86 KiB

2
res/template/fragments/page_wrap.html
View File

@@ -3,7 +3,7 @@
<nav id="page_navigation" class="page_navigation"> <nav id="page_navigation" class="page_navigation">
<a href="/#">Home</a> <a href="/#">Home</a>
<a href="/#pro">Subscriptions</a> <a href="/#pro">Subscriptions</a>
<a href="/#prepaid">Prepaid plans</a> <a href="/#prepaid">For creators</a>
<hr /> <hr />
{{if .Authenticated}}<a href="/user">{{.User.Username}}</a> {{if .Authenticated}}<a href="/user">{{.User.Username}}</a>
<a href="/user/filemanager#files">My Files</a> <a href="/user/filemanager#files">My Files</a>

12
res/template/home.html
View File

@@ -4,18 +4,6 @@
<head> <head>
{{template "meta_tags" "Free file sharing service"}} {{template "meta_tags" "Free file sharing service"}}
<style>
/* Override the default background with something spectacular */
header, footer, .checkers {
background-image: url("/res/img/nebula.webp");
background-color: var(--background_color);
background-blend-mode: luminosity;
color: #ffffff;
box-shadow: inset 0 0 10px -4px var(--shadow_color);
border: none;
}
</style>
<script> <script>
window.api_endpoint = '{{.APIEndpoint}}'; window.api_endpoint = '{{.APIEndpoint}}';
window.user = {{.User}}; window.user = {{.User}};

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

@@ -1,6 +1,8 @@
<script> <script>
import { onMount } from "svelte"; import { onMount } from "svelte";
import Euro from "../util/Euro.svelte";
import Modal from "../util/Modal.svelte"; import Modal from "../util/Modal.svelte";
import OtherPlans from "./OtherPlans.svelte";
let file_expiry let file_expiry
let direct_linking let direct_linking
@@ -11,123 +13,167 @@ onMount(() => {
} }
}) })
</script> </script>
<div class="feat_table">
<div> <header id="pro">
<h1>Getting more out of pixeldrain</h1>
</header>
<section>
<p>
By purchasing a subscription you support pixeldrain on its mission
to make content sharing easier, safer and faster for everyone. If
you're on mobile the feature table might be easier to read
horizontally.
</p>
</section>
<div class="vertical_scroll">
<div class="grid">
<div></div> <div></div>
<div class="feat_normal round_tl">Free</div> <div class="top_row">
<div class="feat_pro round_tr pro_header">Pro</div> Free
</div> </div>
<div> <div class="top_row pro_feat">
<div class="feat_label">Size limit per file</div> Pro
<div class="feat_normal">20 GB per file (18.63 GiB)</div>
<div class="feat_pro">
<span class="text_highlight">50 GB</span> per file (46.57 GiB)
</div> </div>
<div class="top_row pro_feat">
Prepaid
</div> </div>
<div>
<div class="feat_label"> <div class="left_col">
Data transfer limit Price
</div> </div>
<div class="feat_normal"> <div class="feature_cell">
Download limit of <span class="text_highlight">10 GB</span> per day <span class="bold">Free</span>
(24 hours). When this threshold is reached your download speed will
be reduced to 1 MiB/s
</div> </div>
<div class="feat_pro"> <div class="feature_cell pro_feat">
Transfer limit of <span class="text_highlight">2 terabytes</span> <span class="bold">€4 / month</span> or
per month. If the transfer limit is exceeded the restrictions of the <span class="bold">€40 / year</span><br/>
free plan will apply Charged through Patreon
</div> </div>
<div class="feature_cell pro_feat">
<span class="bold">€2 / month</span><br/>
From account credit
</div> </div>
<div>
<div class="feat_label"> <div class="left_col">
File expiry Max file size
</div> </div>
<div class="feat_normal"> <div class="feature_cell">
60 days after the last time it is viewed <span class="bold">20 GB</span> per file
</div> </div>
<div class="feat_pro"> <div class="feature_cell span2 pro_feat">
<span class="text_highlight">240 days</span> after the last time it is viewed <span class="bold">50 GB</span> per file
<br/>
<button class="round" on:click={file_expiry.toggle}>
<i class="icon">info</i>
More information
</button>
</div> </div>
<div class="left_col">
Download limit
</div> </div>
<div> <div class="feature_cell">
<div class="feat_label"> <span class="bold">10 GB</span> per day<br/>
Storage space Download speed is reduced to 1 MiB/s when exceeded
</div> </div>
<div class="feat_pro"> <div class="feature_cell vspan2 pro_feat">
<span class="text_highlight">No storage limit</span> <span class="bold">2 TB per month</span><br/>
Transfer limit used for downloading and sharing files
</div> </div>
<div class="feature_cell vspan2 pro_feat">
<span class="bold">€2.00 per TB</span><br/>
Used for downloading and sharing files. There is no limit. You only
pay for what you use
</div> </div>
<div>
<div class="feat_label"> <div class="left_col">
Hotlinking / embedding files
</div>
<div class="feat_normal">
Hotlinking is not allowed, files which are being hotlinked will be
blocked
</div>
<div class="feat_pro">
<span class="text_highlight">Hotlinking is allowed</span> within
your data cap
<br/>
<button class="round" on:click={direct_linking.toggle}> <button class="round" on:click={direct_linking.toggle}>
<i class="icon">info</i> <i class="icon">info</i>
More information Hotlinking
</button> </button>
</div> </div>
<div class="feature_cell">
No
</div> </div>
<div>
<div class="feat_label"> <div class="left_col">
Adver&shy;tise&shy;ments <button class="round" on:click={file_expiry.toggle}>
<i class="icon">info</i>
File expiry
</button>
</div> </div>
<!-- <div class="feat_normal"> <div class="feature_cell">
Banner advertisements on the file viewer page <span class="bold">60 days</span><br/>
</div> --> After last download
<div class="feat_pro">
<span class="text_highlight">No ads</span> on files
you share. No ads when viewing files uploaded by
other users
</div> </div>
<div class="feature_cell pro_feat">
<span class="bold">240 days</span><br/>
After last download
</div> </div>
<div> <div class="feature_cell pro_feat">
<div class="feat_label">Privacy</div> <span class="bold">Never</span><br/>
<!-- <div class="feat_normal"> While subscription is active
No trackers, but advertisers can see your IP address
and browser fingerprint
</div> -->
<div class="feat_pro">
<span class="text_highlight">Completely private</span>. No third
party tracking scripts and no logging
</div> </div>
<div class="left_col">
Storage
</div> </div>
<div> <div class="feature_cell span2 pro_feat">
<div class="feat_label"> <span class="bold">No limit</span><br/>
But files expire when they are not downloaded
</div>
<div class="feature_cell pro_feat">
<span class="bold">€2 / TB / month</span><br/>
There is no limit. You only pay for what you use
</div>
<div class="left_col">
Advertising
</div>
<div class="feature_cell span3 pro_feat">
<span class="bold">None</span>. Pixeldrain does not have third-party
advertising. Though we do promote our own product on the free plan
</div>
<div class="left_col">
Privacy
</div>
<div class="feature_cell span3 pro_feat">
<span class="bold">Completely private</span>.
No third party tracking scripts and no logging
</div>
<div class="left_col">
Download page customization
</div>
<div class="feature_cell span2">
No customization
</div>
<div class="feature_cell pro_feat">
Custom <span class="bold">colour theme</span>,
<span class="bold">background</span> and
<span class="bold">banner images</span>
</div>
<div class="left_col">
Online file previews Online file previews
</div> </div>
<div class="feat_normal"> <div class="feature_cell">
View image, audio, PDF and text files directly in your <span class="bold">Image, audio, PDF and text files</span><br/>
web browser Can all be viewed in the browser
</div> </div>
<div class="feat_pro"> <div class="feature_cell span2 pro_feat">
<span class="text_highlight">Video streaming</span> in <span class="bold">Video streaming</span><br/>
your web browser. Free users will also be able to watch Plus the free previews of course
videos you uploaded
</div> </div>
</div>
<div>
<div></div> <div></div>
<div class="feat_normal round_bl">Free</div> <div class="bottom_row">
<div class="feat_pro round_br"> Free
</div>
<div class="bottom_row pro_feat">
{#if window.user.subscription.id === "patreon_1"} {#if window.user.subscription.id === "patreon_1"}
You have this plan<br/> You have this plan<br/>
Thank you for supporting pixeldrain! Thank you for supporting pixeldrain!
{:else} {:else}
Only
<a href="https://www.patreon.com/join/pixeldrain/checkout?rid=5736701&cadence=1" class="button button_highlight round"> <a href="https://www.patreon.com/join/pixeldrain/checkout?rid=5736701&cadence=1" class="button button_highlight round">
€ 4 per month € 4 per month
</a> </a>
@@ -141,8 +187,55 @@ onMount(() => {
Subscription managed by Patreon Subscription managed by Patreon
{/if} {/if}
</div> </div>
<div class="bottom_row pro_feat">
{#if window.user.username === ""}
<!-- User is not logged in -->
Account required<br/>
<a href="/login?redirect=checkout" class="button button_highlight round">
<i class="icon">login</i>
Log in
</a>
or
<a href="/register?redirect=checkout" class="button button_highlight round">
<i class="icon">how_to_reg</i>
Register
</a>
<br/>
Payments processed by Mollie<br/>
No recurring payments
{:else}
<!-- User is logged in -->
{#if window.user.subscription.type === ""}
<a href="/user/prepaid/deposit?deposit" class="button button_highlight round">
Deposit credit
</a>
to activate Prepaid
{:else if window.user.subscription.type === "patreon"}
Patreon subscription active. Prepaid cannot be activated
{:else if window.user.subscription.type === "prepaid"}
Prepaid plan is active.<br/>
Current balance <Euro amount={window.user.balance_micro_eur}/>
<br/>
<a href="/user/prepaid/deposit?deposit" class="button button_highlight round">
Top up my credit
</a>
{/if}
{/if}
</div> </div>
</div> </div>
</div>
<section>
<br/>
<br/>
<br/>
<div style="text-align: center;">
These plans can also be subscribed to through Patreon:
</div>
<br/>
<OtherPlans/>
<br/>
</section>
<Modal bind:this={file_expiry} title="File Expiry Postponing" padding> <Modal bind:this={file_expiry} title="File Expiry Postponing" padding>
<p> <p>
@@ -240,52 +333,80 @@ onMount(() => {
</Modal> </Modal>
<style> <style>
.feat_table { header {
display: flex; background-image: url("/res/img/inflating_star.webp");
flex-direction: column; background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
background-size: cover;
background-blend-mode: normal;
box-shadow: inset 0 0 10px -4px var(--shadow_color);
} }
.feat_table > div { header > h1 {
display: flex; margin-top: 70px;
flex-direction: row; margin-bottom: 70px;
color: #ffffff;
text-shadow: 0 0 3px #000000;
} }
.feat_table > div > div:first-child {
flex: 0 0 20%; .bold {
max-width: 20%; font-weight: bold;
} }
.feat_table > div > div {
flex: 1 1 0; .vertical_scroll {
margin: 0.2em; overflow-x: scroll;
padding: 0.5em; overflow-y: hidden;
width: 100%;
}
.grid {
display: inline-grid;
grid-auto-flow: row;
grid-template-columns: 9em 1fr 1fr 1fr;
min-width: 40em;
max-width: 70em;
gap: 8px;
margin: 0.5em;
}
.grid > div {
justify-content: center;
align-items: center;
text-align: center; text-align: center;
word-wrap: break-word; padding: 0.5em;
hyphens: auto; min-height: 3em;
} }
.feat_table > div > .feat_label {
.left_col {
border-top-left-radius: 0.5em; border-top-left-radius: 0.5em;
border-bottom-left-radius: 0.5em; border-bottom-left-radius: 0.5em;
border: 1px solid var(--separator); border: 1px solid var(--separator);
} }
.feat_table > div > .feat_normal { .top_row {
background-color: var(--card_color); border-top-left-radius: 0.5em;
border-top-right-radius: 0.5em;
border: 1px solid var(--separator); border: 1px solid var(--separator);
}
.feat_table > div > .feat_pro {
background-color: var(--card_color);
border: 1px solid var(--highlight_color);
}
.text_highlight {
font-weight: bold; font-weight: bold;
} }
.feat_table > div > .pro_header { .bottom_row {
background-image: url("/res/img/benefit_1.webp"); border-bottom-left-radius: 0.5em;
background-size: cover; border-bottom-right-radius: 0.5em;
font-size: 1.2em; border: 1px solid var(--separator);
text-shadow: 1px 1px 2px #000000; font-weight: bold;
color: #ffffff; }
.feature_cell {
background-color: var(--card_color);
border: 1px solid var(--background_color);
}
.pro_feat {
border: 1px solid var(--highlight_color);
}
.span2 {
grid-column: span 2;
}
.span3 {
grid-column: span 3;
}
.vspan2 {
grid-row: span 2;
} }
.feat_table > div > div.round_tl { border-top-left-radius: 0.5em; }
.feat_table > div > div.round_tr { border-top-right-radius: 0.5em; }
.feat_table > div > div.round_br { border-bottom-right-radius: 0.5em; }
.feat_table > div > div.round_bl { border-bottom-left-radius: 0.5em; }
</style> </style>

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

@@ -6,6 +6,7 @@ import Euro from "../util/Euro.svelte";
<header id="prepaid"> <header id="prepaid">
<div class="header_image_container"></div> <div class="header_image_container"></div>
</header> </header>
<section> <section>
<h2>Prepaid</h2> <h2>Prepaid</h2>
<p> <p>

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

@@ -3,7 +3,6 @@ import Footer from "../layout/Footer.svelte";
import AddressReputation from "./AddressReputation.svelte"; import AddressReputation from "./AddressReputation.svelte";
import FeatureTable from "./FeatureTable.svelte"; import FeatureTable from "./FeatureTable.svelte";
import ForCreators from "./ForCreators.svelte"; import ForCreators from "./ForCreators.svelte";
import OtherPlans from "./OtherPlans.svelte";
import UploadWidget from "./UploadWidget.svelte"; import UploadWidget from "./UploadWidget.svelte";
</script> </script>
@@ -48,27 +47,7 @@ import UploadWidget from "./UploadWidget.svelte";
</div> </div>
<div class="page_content"> <div class="page_content">
<header> <FeatureTable/>
<h1 id="pro">Getting more out of pixeldrain</h1>
</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 are
interested in more professional services.
</p>
<br/>
<FeatureTable></FeatureTable>
<br/>
<div style="text-align: center;">
Do you need even more time and space? Check out our other plans
</div>
<br/>
<OtherPlans></OtherPlans>
<br/>
</section>
</div> </div>
<div class="page_content"> <div class="page_content">
@@ -88,6 +67,22 @@ import UploadWidget from "./UploadWidget.svelte";
} }
} }
header {
background-image: url("/res/img/inflating_star.webp");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
background-size: cover;
background-blend-mode: normal;
box-shadow: inset 0 0 10px -4px var(--shadow_color);
}
header > h1 {
margin-top: 70px;
margin-bottom: 70px;
color: #ffffff;
text-shadow: 0 0 3px #000000;
}
.header_image_container { .header_image_container {
margin: auto; margin: auto;
height: 200px; height: 200px;
@@ -103,8 +98,4 @@ import UploadWidget from "./UploadWidget.svelte";
background-image: url("/res/img/header_orbitron.webp"); background-image: url("/res/img/header_orbitron.webp");
} }
} }
header>h1{
color: #ffffff;
margin: 40px 10px 40px 10px;
}
</style> </style>

2
svelte/src/user_home/MollieDeposit.svelte
View File

@@ -158,7 +158,7 @@ const checkout = async () => {
<style> <style>
.countries { .countries {
display: grid; display: grid;
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
} }
.countries > button { .countries > button {
display: flex; display: flex;