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

Update styles

Browse Source
This commit is contained in:
Fornax
2022-10-11 14:21:06 +02:00
parent 2ed58774b7
commit 14df7e8a70
49 changed files with 900 additions and 662 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,74 +1,78 @@
<script>
import Footer from "../layout/Footer.svelte";
import FeatureTable from "./FeatureTable.svelte";
import ForCreators from "./ForCreators.svelte";
import OtherPlans from "./OtherPlans.svelte";
import UploadWidget from "./UploadWidget.svelte";
</script>
<header>
<div class="header_image_container"></div>
</header>
<UploadWidget></UploadWidget>
<div id="page_content" class="page_content">
<header>
<div class="header_image_container"></div>
</header>
<header>
<h1>What is pixeldrain?</h1>
</header>
<UploadWidget></UploadWidget>
<section>
<p>
Pixeldrain is a file sharing 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 a month. 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>
<p>
Files can be uploaded by clicking the big green upload
button, or by dragging them onto this page from your file
manager.
</p>
<h2>Accounts</h2>
<p>
An account is not required to use pixeldrain, but it enables some useful
features. With a pixeldrain account you can access your files and albums
on all your devices. You can also rename and delete files you have
uploaded. And create and reorder albums you have created. Sign up for a
pixeldrain account on <a href="/register">the registration page</a>.
More about pixeldrain's features below.
</p>
</section>
<header>
<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>
<header>
<h1>What is pixeldrain?</h1>
</header>
<ForCreators/>
<br/>
<br/>
<section>
<p>
Pixeldrain is a file sharing 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 a month. 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>
<p>
Files can be uploaded by clicking the big green upload
button, or by dragging them onto this page from your file
manager.
</p>
<h2>Accounts</h2>
<p>
An account is not required to use pixeldrain, but it enables some useful
features. With a pixeldrain account you can access your files and albums
on all your devices. You can also rename and delete files you have
uploaded. And create and reorder albums you have created. Sign up for a
pixeldrain account on <a href="/register">the registration page</a>.
More about pixeldrain's features below.
</p>
</section>
<header>
<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>
<ForCreators/>
<br/>
<br/>
<Footer></Footer>
</div>
<style>
.header_image_container {
margin: auto;
height: 300px;
height: 200px;
width: 750px;
max-width: 100%;
background-image: url("/res/img/header_orbitron_wide.webp");
@@ -76,9 +80,8 @@ import UploadWidget from "./UploadWidget.svelte";
background-size: contain;
background-position: center;
}
@media (max-width: 700px) {
@media (max-width: 600px) {
.header_image_container {
height: 250px;
background-image: url("/res/img/header_orbitron.webp");
}
}

2
svelte/src/home_page/UploadProgressBar.svelte
View File

@@ -229,7 +229,7 @@ export const start = () => {
width: 440px;
max-width: 95%;
height: 4em;
margin: 10px;
margin: 6px;
padding: 0;
overflow: hidden;
border-radius: 6px;

16
svelte/src/home_page/UploadWidget.svelte
View File

@@ -404,7 +404,6 @@ const keydown = (e) => {
You can also drop files on this page from your file manager or
paste an image from your clipboard
</section>
<br/>
<input bind:this={file_input_field} on:change={file_input_change} type="file" name="file" multiple="multiple"/>
<button on:click={() => { file_input_field.click() }} class="big_button button_highlight">
@@ -421,7 +420,7 @@ const keydown = (e) => {
By uploading files to pixeldrain you acknowledge and accept our
<a href="/about#content-policy">content policy</a>.
<p>
<br/>
<section class="instruction" style="margin-bottom: 0;">
<span class="big_number">2</span>
<span class="instruction_text">Wait for the files to finish uploading</span>
@@ -434,13 +433,12 @@ const keydown = (e) => {
</div>
<ProgressBar total={total_size} used={total_loaded} animation="linear" speed={stats_interval_ms}/>
</section>
<div id="file_drop_highlight" class="highlight_green" class:hide={!dragging}>
Gimme gimme gimme!<br/>
Drop your files to upload them
</div>
<br/>
<div id="file_drop_highlight" class="highlight_green" class:hide={!dragging}>
Gimme gimme gimme!<br/>
Drop your files to upload them
</div>
</section>
{#each upload_queue as file}
<UploadProgressBar bind:this={file.component} job={file}></UploadProgressBar>
@@ -559,7 +557,7 @@ const keydown = (e) => {
<style>
.big_button{
width: 40%;
min-width: 250px;
min-width: 300px;
max-width: 400px;
margin: 10px !important;
border-radius: 32px;