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/> <span class="bold">Hotlinking not supported</span><br/>
Hotlinked files get blocked Hotlinked files get blocked
</div> </div>
<div class="feature_cell span2 pro_feat"> <div class="feature_cell span2 right pro_feat">
<span class="bold">Hotlinking supported</span><br/> <span class="bold">Hotlinking supported</span><br/>
Hotlinking uses your transfer limit Hotlinking uses your transfer limit
</div> </div>
@@ -91,7 +91,7 @@ onMount(() => {
<div class="left_col"> <div class="left_col">
Storage Storage
</div> </div>
<div class="feature_cell span2 pro_feat"> <div class="feature_cell span2 left pro_feat">
<span class="bold">No limit</span><br/> <span class="bold">No limit</span><br/>
Files expire when they are not downloaded Files expire when they are not downloaded
</div> </div>
@@ -124,7 +124,7 @@ onMount(() => {
<div class="feature_cell free_feat"> <div class="feature_cell free_feat">
<span class="bold">20 GB</span> per file <span class="bold">20 GB</span> per file
</div> </div>
<div class="feature_cell span2 pro_feat"> <div class="feature_cell span2 right pro_feat">
<span class="bold">100 GB</span> per file <span class="bold">100 GB</span> per file
</div> </div>
@@ -362,4 +362,10 @@ onMount(() => {
.span2 { .span2 {
grid-column: span 2; 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> </style>

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

@@ -68,26 +68,27 @@ let upload_widget
</div> </div>
<header> <header>
<h1>Our pricing!</h1> <h1>Pricing</h1>
<span>We're not afraid to say it</span> <span>(Prepaid plan. For monthly subscriptions, look further below)</span>
</header> </header>
<div class="page_content"> <div class="page_content">
<section> <section>
<h2>Prepaid plan</h2> <div class="prices">
<ul> <div>
<li> <div>Storage pricing</div>
Storage<br/> <div>€ 4 / TB / month</div>
<span class="bold">€ 4 per TB per month</span> </div>
</li> <div>
<li> <div>Egress pricing</div>
Data egress (downloading and sharing files)<br/> <div>€ 2 / TB</div>
<span class="bold">€ 2 per TB</span> </div>
</li> <div>
<li> <div>That's it!</div>
No other charges! <div>No other charges</div>
</li> </div>
</ul> </div>
<h3>What you get</h3>
<h2>What you get</h2>
<ul> <ul>
<li> <li>
<span class="bold">Unlimited</span> storage space <span class="bold">Unlimited</span> storage space
@@ -213,4 +214,29 @@ header > span {
color: var(--highlight_color); color: var(--highlight_color);
text-shadow: 1px 1px 3px var(--shadow_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> </style>