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

Add pricing table to home page

Browse Source
This commit is contained in:
Wim Brand
2025-02-03 16:30:05 +01:00
parent 091df332d8
commit d22ee2fad0
2 changed files with 52 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -83,7 +83,7 @@ onMount(() => {
<span class="bold">Hotlinking not supported</span><br/>
Hotlinked files get blocked
</div>
<div class="feature_cell span2 pro_feat">
<div class="feature_cell span2 right pro_feat">
<span class="bold">Hotlinking supported</span><br/>
Hotlinking uses your transfer limit
</div>
@@ -91,7 +91,7 @@ onMount(() => {
<div class="left_col">
Storage
</div>
<div class="feature_cell span2 pro_feat">
<div class="feature_cell span2 left pro_feat">
<span class="bold">No limit</span><br/>
Files expire when they are not downloaded
</div>
@@ -124,7 +124,7 @@ onMount(() => {
<div class="feature_cell free_feat">
<span class="bold">20 GB</span> per file
</div>
<div class="feature_cell span2 pro_feat">
<div class="feature_cell span2 right pro_feat">
<span class="bold">100 GB</span> per file
</div>
@@ -362,4 +362,10 @@ onMount(() => {
.span2 {
grid-column: span 2;
}
.span2.left {
border-image: linear-gradient(to right, #ebcb8b 0%, var(--highlight_color) 100%) 1;
}
.span2.right {
border-image: linear-gradient(to right, var(--highlight_color) 0%, #ec2cfa 100%) 1;
}
</style>

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

@@ -68,26 +68,27 @@ let upload_widget
</div>
<header>
<h1>Our pricing!</h1>
<span>We're not afraid to say it</span>
<h1>Pricing</h1>
<span>(Prepaid plan. For monthly subscriptions, look further below)</span>
</header>
<div class="page_content">
<section>
<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>
<div class="prices">
<div>
<div>Storage pricing</div>
<div>€ 4 / TB / month</div>
</div>
<div>
<div>Egress pricing</div>
<div>€ 2 / TB</div>
</div>
<div>
<div>That's it!</div>
<div>No other charges</div>
</div>
</div>
<h2>What you get</h2>
<ul>
<li>
<span class="bold">Unlimited</span> storage space
@@ -213,4 +214,29 @@ header > span {
color: var(--highlight_color);
text-shadow: 1px 1px 3px var(--shadow_color);
}
.prices {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
gap: 10px;
}
.prices > div {
flex: 1 0 200px;
min-width: 200px;
display: flex;
flex-direction: column;
text-align: center;
border-radius: 6px;
overflow: hidden;
border: 2px solid var(--card_color);
}
.prices > div > div {
padding: 4px;
}
.prices > div > div:nth-child(2) {
background: var(--card_color);
font-size: 1.3em;
}
</style>