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

Redesign home page

Browse Source
This commit is contained in:
Wim Brand
2024-11-18 17:09:27 +01:00
parent e56fa4d4da
commit b5b5caa329
18 changed files with 299 additions and 179 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
svelte/src/filesystem/filemanager/FileManager.svelte
View File

@@ -414,8 +414,8 @@ onMount(() => {
width: 100%;
max-width: 1000px;
margin: auto;
padding-top: 4px;
padding-bottom: 4px;
padding-top: 2px;
padding-bottom: 2px;
justify-content: center;
align-items: center;
}

9
svelte/src/filesystem/filemanager/SearchBar.svelte
View File

@@ -220,8 +220,8 @@ const window_keydown = (e) => {
margin: auto;
width: 1000px;
max-width: 100%;
padding-top: 4px;
padding-bottom: 4px;
padding-top: 2px;
padding-bottom: 2px;
border-bottom: 1px solid var(--separator);
}
@@ -230,7 +230,10 @@ const window_keydown = (e) => {
flex-direction: row;
align-items: center;
}
.term {
.search_form > * {
flex: 0 0 auto;
}
.search_form > .term {
flex: 1 1 auto;
}

2
svelte/src/filesystem/viewers/File.svelte
View File

@@ -22,7 +22,7 @@ export let nav
</button>
</IconBlock>
{#if $nav.base.path === "/me/.search_index.gz"}
{#if $nav.base.name === ".search_index.gz"}
<TextBlock>
<p>
Congratulations! You have found the search index. One of the

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

@@ -14,16 +14,12 @@ onMount(() => {
})
</script>
<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.
Pixeldrain features two different payment modes. We offer a monthly
subscription which is managed by Patreon, and a prepaid service which
supports a dozen different payment providers. For low usage Prepaid is
usually better as there's no monthly fee.
</p>
</section>
@@ -101,7 +97,7 @@ onMount(() => {
</div>
<div class="feature_cell prepaid_feat">
<span class="bold">€4 / TB / month</span><br/>
There is no limit. You only pay for what you use
No limit, you only pay for what you use
</div>
<div class="left_col">
@@ -111,16 +107,15 @@ onMount(() => {
</button>
</div>
<div class="feature_cell free_feat">
<span class="bold">120 days</span> (4 months)<br/>
After last download or view
<span class="bold">120 days</span> (4 months)
</div>
<div class="feature_cell pro_feat">
<span class="bold">240 days</span> (8 months)<br/>
After last download or view. Plans without expiry are available on Patreon
Plans without expiry are available
</div>
<div class="feature_cell prepaid_feat">
<span class="bold">Never</span><br/>
While subscription is active
<span class="bold">Files do not expire</span><br/>
While prepaid plan is active
</div>
<div class="left_col">
@@ -209,15 +204,8 @@ onMount(() => {
</div>
<section>
<br/>
<br/>
<br/>
<div style="text-align: center;">
These plans can also be subscribed to through Patreon:
</div>
<br/>
<h2>Other plans available on Patreon</h2>
<OtherPlans/>
<br/>
</section>
<Modal bind:this={file_expiry} title="File Expiry Postponing" padding>
@@ -316,21 +304,6 @@ onMount(() => {
</Modal>
<style>
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;
}
header > h1 {
margin-top: 60px;
margin-bottom: 60px;
color: #ffffff;
text-shadow: 0 0 3px #000000;
}
.bold {
font-weight: bold;
}

41
svelte/src/home_page/GetStarted.svelte Normal file
View File

@@ -0,0 +1,41 @@
<script>
import LoginRegister from "../login/LoginRegister.svelte";
import MollieDeposit from "../user_home/MollieDeposit.svelte";
import Euro from "../util/Euro.svelte";
</script>
{#if window.user.username !== ""}
<div class="page_content">
<section>
{#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 prepaid on this account.
</p>
<MollieDeposit/>
{/if}
</section>
</div>
{:else}
<LoginRegister/>
{/if}
<style>
.page_content {
margin-top: 16px;
margin-bottom: 16px;
}
</style>

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

@@ -1,67 +1,163 @@
<script>
import Menu from "../filesystem/Menu.svelte";
import Footer from "../layout/Footer.svelte";
import { drop_target } from "../lib/DropTarget";
import AddressReputation from "./AddressReputation.svelte";
import FeatureTable from "./FeatureTable.svelte";
import ForCreators from "./ForCreators.svelte";
import UploadLoginWall from "./UploadLoginWall.svelte";
import GetStarted from "./GetStarted.svelte";
import UploadWidget from "./UploadWidget.svelte";
let upload_widget
</script>
<header class="logo_header">
<div class="menu_button_container">
<Menu no_login_label="Not logged in" hide_name={false} hide_logo style="border-radius: 0 0 0 8px; margin: 0"/>
</div>
<div class="header_image_container"></div>
</header>
<AddressReputation/>
<div class="page_content">
<header class="header" style="text-align: initial">
<div class="menu_button_container">
<Menu no_login_label="Not logged in" hide_name={false} hide_logo style="border-radius: 0 0 0 8px; margin: 0"/>
{#if window.user && window.user.username && window.user.username !== ""}
<div
class="drop_target"
use:drop_target={{
upload: (files) => upload_widget.upload_files(files),
shadow: "var(--highlight_color) 0 0 10px 2px inset",
}}
>
<UploadWidget bind:this={upload_widget}/>
</div>
<div class="header_image_container"></div>
</header>
<AddressReputation/>
<UploadLoginWall/>
{:else}
<section>
<p>
Pixeldrain offers services for efficiently moving and storing
digital files on the internet.
</p>
<h2>What pixeldrain is good at</h2>
<ul>
<li>
Serving large files to millions of people worldwide
</li>
<li>
Storing files for less money than all the competition
</li>
</ul>
<h2>Things we take very seriously</h2>
<ul>
<li>
<b>Performance</b> - Slow software is a waste of time. We
don't want to make you wait, so pixeldrain is completely
tuned for maximum performance
</li>
<li>
<b>Privacy</b> - There is too much tracking on the web
nowadays. Pixeldrain goes in the other direction, this site
does not contain any advertisements or third party tracking
scripts. We don't even require you to enter an e-mail
address to register an account
</li>
<li>
Bullet lists
</li>
</ul>
</section>
{/if}
</div>
<header>
<h1>Our pricing!</h1>
<span>We're not afraid to say it</span>
</header>
<div class="page_content">
<header>
<h1>What is pixeldrain?</h1>
</header>
<section>
<p>
Pixeldrain is a file hosting website built for speed and ease of
use. You can upload files you want to share online to our servers
and we will hold on to them for at least four months. During this
time anyone with the link will be able to download your files.
Pixeldrain is built to be as fast as possible, so you don't have to
do any unnecessary waiting when downloading files.
</p>
<h2>Privacy</h2>
<p>
Privacy is an important value for pixeldrain. There is too much
tracking on the web nowadays. Pixeldrain goes in the other
direction, this site does not contain any advertisements or third
party tracking scripts. We don't even require you to enter an e-mail
address to register an account.
</p>
<p>
Not running ads does mean that we miss out on a lot of revenue of
course. Running a site like this is a very expensive endeavour.
Please consider supporting the project with one of the premium plans
below.
</p>
<h2>Prepaid plan</h2>
<ul>
<li>
Storage<br/>
<span class="bold">€ 4 per TB per month</span>
</li>
<li>
Data egress (downloading and sharing files)<br/>
<span class="bold">€ 2 per TB</span>
</li>
<li>
No other charges!
</li>
</ul>
<h3>What you get</h3>
<ul>
<li>
<span class="bold">Unlimited</span> storage space
</li>
<li>
Cloud storage with <a href="/filesystem#toc_7">rclone</a> and <a
href="/filesystem#toc_10">FTPS</a> support
</li>
<li>
<span class="bold">Customizable</span> download pages (custom
branding colours, header and background images)
</li>
<li>
<span class="bold">Fault tolerance</span> for up to four storage
server failures
</li>
<li>
Total bandwidth capacity of <span class="bold">900
Gigabits</span> per second
</li>
<li>
Nine high-performance caching servers optimized for data
transfer over long distances
</li>
<li>
File caching in
<span class="bold">Frankfurt</span>,
<span class="bold">Singapore</span> and
<span class="bold">Portland</span>
</li>
</ul>
<img class="image" src="/res/img/map.webp" alt="A globe showing datacenter locations"/>
<h3>What you don't get</h3>
<ul>
<li>
Data backups - Please keep a local copy of everything you store
in case of emergency
</li>
<li>
Commercial support - If you have a question, please check the <a
href="/about">Q&A page</a> first. If that doesn't answer it, try
the <a href="https://discord.gg/UDjaBGwr4p"
target="_blank">support channel</a> on Discord.
</li>
</ul>
</section>
</div>
<header>
<h1>Get started</h1>
</header>
<GetStarted/>
<header id="pro">
<h1>Premium plans</h1>
</header>
<div class="page_content">
<FeatureTable/>
</div>
<div class="page_content">
<ForCreators/>
</div>
<Footer/>
<Footer nobg/>
<style>
:global(.page_body) {
background-image: url("/res/img/inflating_star.webp");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
background-size: cover;
}
.page_content {
margin-top: 16px;
margin-bottom: 16px;
@@ -73,18 +169,20 @@ import UploadLoginWall from "./UploadLoginWall.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;
padding-top: 20px;
padding-bottom: 20px;
}
header > h1 {
margin-top: 60px;
margin-bottom: 60px;
.logo_header {
text-align: initial;
padding-top: 0;
padding-bottom: 0;
}
header > h1,
header > span {
color: #ffffff;
text-shadow: 0 0 3px #000000;
text-shadow: 0 0 4px #000000;
margin-top: 30px;
margin-bottom: 30px;
}
.header_image_container {
@@ -103,4 +201,16 @@ header > h1 {
display: flex;
justify-content: end;
}
.image {
max-width: 100%;
border-radius: 12px;
}
.drop_target {
border-radius: 8px;
}
.bold {
font-weight: bold;
color: var(--highlight_color);
text-shadow: 1px 1px 3px var(--shadow_color);
}
</style>

73
svelte/src/home_page/UploadLoginWall.svelte
View File

@@ -1,73 +0,0 @@
<script>
import Login from "../login/Login.svelte";
import Register from "../login/Register.svelte";
import UploadWidget from "./UploadWidget.svelte";
import { drop_target } from "../lib/DropTarget.ts"
const finish_login = async e => {
location.reload()
}
let upload_widget
let page = "login"
</script>
{#if window.user && window.user.username && window.user.username !== ""}
<div
class="drop_target"
use:drop_target={{
upload: (files) => upload_widget.upload_files(files),
shadow: "var(--highlight_color) 0 0 10px 2px inset",
}}
>
<UploadWidget bind:this={upload_widget}/>
</div>
{:else}
<section>
<p>
Pixeldrain requires an account to upload files to. If you already
have an account use the login form below to log in to your account.
If not, use the right tab button to register a new account.
</p>
</section>
<div class="tab_bar">
<button on:click={() => page = "login"} class:button_highlight={page === "login"}>
<i class="icon small">login</i>
<span>Login</span>
</button>
<button on:click={() => page = "register"} class:button_highlight={page === "register"}>
<i class="icon small">how_to_reg</i>
<span>Register</span>
</button>
</div>
{#if page === "login"}
<section class="highlight_border">
<Login on:login={finish_login}/>
<p>
If you have lost your password, you can <a
href="password_reset">request a new password here</a>.
</p>
</section>
{:else if page === "register"}
<section class="highlight_border">
<Register on:login={finish_login}/>
</section>
{/if}
<br/>
{/if}
<style>
.drop_target {
border-radius: 8px;
}
.tab_bar > button {
width: 40%;
max-width: 10em;
font-size: 1.3em;
justify-content: center;
}
</style>

11
svelte/src/layout/Footer.svelte
View File

@@ -7,6 +7,7 @@ import Patreon from "../icons/Patreon.svelte";
import Reddit from "../icons/Reddit.svelte";
import { formatDataVolumeBits } from "../util/Formatting.svelte";
export let nobg = false
let server_tx = 0
let cache_tx = 0
let storage_tx = 0
@@ -26,7 +27,7 @@ onMount(async () => {
})
</script>
<footer>
<footer class:nobg>
<div class="footer_content">
<div style="display: inline-block; margin: 0 8px;">
Pixeldrain is a product by
@@ -62,3 +63,11 @@ onMount(async () => {
</span>
</div>
</footer>
<style>
.nobg {
background-image: none;
background-color: unset;
box-shadow: none;
}
</style>

42
svelte/src/login/LoginRegister.svelte Normal file
View File

@@ -0,0 +1,42 @@
<script>
import Login from "./Login.svelte";
import Register from "./Register.svelte";
const finish_login = async e => {
location.reload()
}
let page = "login"
</script>
<div class="tab_bar">
<button on:click={() => page = "login"} class:button_highlight={page === "login"}>
<i class="icon small">login</i>
<span>Login</span>
</button>
<button on:click={() => page = "register"} class:button_highlight={page === "register"}>
<i class="icon small">how_to_reg</i>
<span>Register</span>
</button>
</div>
<div class="page_content">
{#if page === "login"}
<Login on:login={finish_login}/>
<p>
If you have lost your password, you can <a
href="password_reset">request a new password here</a>.
</p>
{:else if page === "register"}
<Register on:login={finish_login}/>
{/if}
</div>
<style>
.tab_bar > button {
width: 40%;
max-width: 10em;
font-size: 1.3em;
justify-content: center;
}
</style>

2
svelte/src/login/Register.svelte
View File

@@ -16,7 +16,7 @@ let form = {
name: "email",
label: "E-mail address",
type: "email",
description: "Your e-mail address is only used for recovering lost passwords",
description: "Your e-mail address is only used for recovering lost passwords and billing notifications",
}, {
name: "password",
label: "Password",

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

@@ -87,4 +87,4 @@ let pages = [
]
</script>
<TabMenu pages={pages} title="Welcome home, {window.user.username}!"/>
<TabMenu pages={pages} title="Welcome, {window.user.username}!"/>