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

Replace some shadows with borders

Browse Source
This commit is contained in:
Fornax
2022-06-21 14:00:03 +02:00
parent 75f56decbb
commit 467e92c7a3
13 changed files with 275 additions and 241 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
res/static/style/layout.css
View File

@@ -85,7 +85,7 @@ footer,
header, header,
footer { footer {
box-shadow: inset 0 0 3px -1px var(--shadow_color); border: 2px solid var(--separator);
border-radius: 12px; border-radius: 12px;
text-align: center; text-align: center;
overflow: hidden; overflow: hidden;
@@ -101,7 +101,7 @@ footer>.footer_content {
background-color: var(--shaded_background); background-color: var(--shaded_background);
display: inline-block; display: inline-block;
border-radius: 8px; border-radius: 8px;
margin: 300px 0 69px 0; margin: 200px 0 60px 0;
} }
/* Page layout elements */ /* Page layout elements */
@@ -173,11 +173,12 @@ footer>.footer_content {
section { section {
position: relative; position: relative;
display: inline-block; display: block;
max-width: 1000px; max-width: 1000px;
width: 100%; width: 100%;
height: auto; height: auto;
padding: 0; padding: 0;
margin: auto;
text-align: initial; text-align: initial;
clear: both; clear: both;
} }
@@ -367,46 +368,6 @@ pre {
overflow-x: auto; overflow-x: auto;
} }
.file_button {
position: relative;
width: 400px;
max-width: 90%;
height: 3.6em;
margin: 8px;
padding: 0;
overflow: hidden;
border-radius: 6px;
background: var(--input_background);
color: var(--body_text_color);
word-break: break-all;
text-align: left;
line-height: 1.2em;
display: inline-block;
transition: box-shadow 0.3s, opacity 2s, background 0.2s;
white-space: normal;
text-overflow: ellipsis;
text-decoration: none;
vertical-align: top;
cursor: pointer;
}
.file_button:hover {
text-decoration: none;
background: var(--input_hover_background);
}
.file_button>img {
max-height: 100%;
max-width: 25%;
margin-right: 5px;
float: left;
display: block;
}
.file_button>.file_button_title {
color: var(--link_color);
}
/* API documentation markup */ /* API documentation markup */
details { details {

2
res/template/appearance.html
View File

@@ -25,8 +25,6 @@
<br/> <br/>
<input type="radio" id="style_nord_light" name="style"><label for="style_nord_light">Nord light</label> <input type="radio" id="style_nord_light" name="style"><label for="style_nord_light">Nord light</label>
<br/> <br/>
Hue:
<br/>
<br/> <br/>
<input type="radio" id="style_solarized" name="style"><label for="style_solarized">Solarized</label> <input type="radio" id="style_solarized" name="style"><label for="style_solarized">Solarized</label>
(Inspired by <a href="https://ethanschoonover.com/solarized/" target="_blank">Solarized</a>) (Inspired by <a href="https://ethanschoonover.com/solarized/" target="_blank">Solarized</a>)

42
res/template/history.html
View File

@@ -2,6 +2,48 @@
<html lang="en"> <html lang="en">
<head> <head>
{{template "meta_tags" "Upload History"}} {{template "meta_tags" "Upload History"}}
<style>
.file_button {
position: relative;
width: 400px;
max-width: 90%;
height: 3.6em;
margin: 8px;
padding: 0;
overflow: hidden;
border-radius: 6px;
background: var(--input_background);
color: var(--body_text_color);
word-break: break-all;
text-align: left;
line-height: 1.2em;
display: inline-block;
transition: box-shadow 0.3s, opacity 2s, background 0.2s;
white-space: normal;
text-overflow: ellipsis;
text-decoration: none;
vertical-align: top;
cursor: pointer;
}
.file_button:hover {
text-decoration: none;
background: var(--input_hover_background);
}
.file_button>img {
max-height: 100%;
max-width: 25%;
margin-right: 5px;
float: left;
display: block;
}
.file_button>.file_button_title {
color: var(--link_color);
}
</style>
</head> </head>
<body> <body>
{{template "page_top" .}} {{template "page_top" .}}

2
res/template/home.html
View File

@@ -15,6 +15,8 @@
background-position: center top; background-position: center top;
background-size: cover; background-size: cover;
color: #ffffff; color: #ffffff;
box-shadow: inset 0 0 2px 0 var(--shadow_color);
border: none;
} }
</style> </style>

18
svelte/src/file_viewer/FileViewer.svelte
View File

@@ -429,7 +429,7 @@ const keyboard_event = evt => {
<div id="toolbar" class="toolbar" class:toolbar_visible> <div id="toolbar" class="toolbar" class:toolbar_visible>
{#if view === "file"} {#if view === "file"}
<FileStats file={file}></FileStats> <FileStats file={file}></FileStats>
<hr/> <div class="separator"></div>
{/if} {/if}
{#if file.abuse_type === "" && view === "file"} {#if file.abuse_type === "" && view === "file"}
@@ -514,7 +514,7 @@ const keyboard_event = evt => {
</button> </button>
{/if} {/if}
<hr/> <div class="separator"></div>
{#if file.can_edit || list.can_edit} {#if file.can_edit || list.can_edit}
<button <button
@@ -690,8 +690,8 @@ const keyboard_event = evt => {
} }
.file_preview { .file_preview {
position: absolute; position: absolute;
left: 4px; left: 0;
right: 4px; right: 0;
top: 0; top: 0;
bottom: 0; bottom: 0;
display: block; display: block;
@@ -700,8 +700,8 @@ const keyboard_event = evt => {
transition: left 0.5s; transition: left 0.5s;
overflow: auto; overflow: auto;
text-align: center; text-align: center;
box-shadow: inset 0 0 3px -1px var(--shadow_color); border-radius: 12px;
border-radius: 16px; border: 2px solid var(--separator);
} }
.file_preview.toolbar_visible { left: 8em; } .file_preview.toolbar_visible { left: 8em; }
.file_preview.skyscraper_visible { right: 160px; } .file_preview.skyscraper_visible { right: 160px; }
@@ -737,4 +737,10 @@ const keyboard_event = evt => {
.toolbar_button > span { .toolbar_button > span {
vertical-align: middle; vertical-align: middle;
} }
.toolbar > .separator {
height: 2px;
width: 100%;
margin: 10px 0;
background-color: var(--separator);
}
</style> </style>

12
svelte/src/file_viewer/GalleryView.svelte
View File

@@ -162,7 +162,6 @@ const drop = (e, index) => {
<style> <style>
.gallery{ .gallery{
padding: 16px;
width: 100%; width: 100%;
max-height: 100%; max-height: 100%;
overflow: auto; overflow: auto;
@@ -171,15 +170,12 @@ const drop = (e, index) => {
justify-content: center; justify-content: center;
} }
.file{ .file{
position: relative;
width: 200px; width: 200px;
max-width: 45%; max-width: 42%;
height: 200px; height: 200px;
margin: 8px; margin: 8px;
padding: 0;
overflow: hidden; overflow: hidden;
border-radius: 8px; border-radius: 8px;
box-shadow: 1px 1px 3px -1px var(--shadow_color);
background: var(--input_background); background: var(--input_background);
word-break: break-all; word-break: break-all;
text-align: center; text-align: center;
@@ -194,13 +190,15 @@ const drop = (e, index) => {
.file:hover { .file:hover {
background: var(--input_hover_background); background: var(--input_hover_background);
} }
.highlight { .highlight {
box-shadow: 0 0 2px 2px var(--highlight_color); box-shadow: 0 0 2px 2px var(--highlight_color);
text-decoration: none; text-decoration: none;
} }
.icon_container { .icon_container {
width: 100%; margin: 3px;
height: 136px; height: 154px;
border-radius: 6px;
background-position: center; background-position: center;
background-size: contain; background-size: contain;
background-repeat: no-repeat; background-repeat: no-repeat;

51
svelte/src/file_viewer/ListNavigator.svelte
View File

@@ -81,9 +81,9 @@ export const set_item = idx => {
<a <a
href="#item={index}" href="#item={index}"
title="Open {file.name}" title="Open {file.name}"
class="list_item file_button" class="file_button"
class:file_selected={file.selected}> class:file_selected={file.selected}>
<img src={file.icon_href+"?width=48&height=48"} alt={file.name} class="list_item_thumbnail" loading="lazy"/> <img src={file.icon_href+"?width=64&height=64"} alt={file.name} class="list_item_thumbnail" loading="lazy"/>
{file.name} {file.name}
</a> </a>
{/each} {/each}
@@ -97,7 +97,7 @@ export const set_item = idx => {
display: flex; display: flex;
position: relative; position: relative;
width: 100%; width: 100%;
border-top: 1px solid var(--separator); border-top: 2px solid var(--separator);
text-align: center; text-align: center;
line-height: 1em; line-height: 1em;
@@ -105,13 +105,9 @@ export const set_item = idx => {
.nav_button{ .nav_button{
flex-grow: 0; flex-grow: 0;
flex-shrink: 0; flex-shrink: 0;
margin-top: 8px; margin: 6px;
} }
.list_item {
height: 2.6em !important;
width: 220px !important;
}
.list_navigator { .list_navigator {
flex-grow: 1; flex-grow: 1;
flex-shrink: 1; flex-shrink: 1;
@@ -120,8 +116,43 @@ export const set_item = idx => {
white-space: nowrap; white-space: nowrap;
} }
.file_selected { .file_button {
box-shadow: 0 0 2px 2px var(--highlight_color); position: relative;
height: 50px;
width: 220px;
margin: 6px;
padding: 0;
overflow: hidden;
border-radius: 6px;
background: var(--input_background);
color: var(--body_text_color);
word-break: break-all;
text-align: left;
line-height: 1.2em;
display: inline-block;
transition: background 0.2s;
white-space: normal;
text-decoration: none; text-decoration: none;
vertical-align: top;
cursor: pointer;
border-width: 2px;
border-style: solid;
border-color: var(--input_background);
}
.file_button:hover {
text-decoration: none;
background: var(--input_hover_background);
}
.file_button>img {
height: 100%;
margin-right: 5px;
float: left;
display: block;
}
.file_selected {
text-decoration: none;
border-color: var(--highlight_color);
} }
</style> </style>

2
svelte/src/file_viewer/viewers/Image.svelte
View File

@@ -85,7 +85,7 @@ const mouseup = (e) => {
top: 50%; top: 50%;
cursor: pointer; cursor: pointer;
transform: translateY(-50%); transform: translateY(-50%);
box-shadow: 1px 1px 6px var(--shadow_color); box-shadow: 0 0 4px var(--shadow_color);
} }
.image.zoom { .image.zoom {
max-width: none; max-width: none;

6
svelte/src/file_viewer/viewers/Text.svelte
View File

@@ -104,13 +104,9 @@ const code = async file => {
<style> <style>
.container { .container {
background: var(--body_color); background: var(--body_color);
border: 2px solid var(--separator);
border-radius: 16px;
position: relative;
text-align: left; text-align: left;
height: 100%; height: 100%;
width: 100%; width: 100%;
font-size: 0.9em;
line-height: 1.5em; line-height: 1.5em;
overflow-y: auto; overflow-y: auto;
overflow-x: hidden; overflow-x: hidden;
@@ -121,10 +117,12 @@ const code = async file => {
white-space: pre-wrap; white-space: pre-wrap;
overflow: hidden; overflow: hidden;
border: none; border: none;
font-size: 0.9em;
} }
.container > .md { .container > .md {
display: block; display: block;
padding: 10px; padding: 10px;
margin: auto; margin: auto;
text-align: justify;
} }
</style> </style>

3
svelte/src/file_viewer/viewers/Video.svelte
View File

@@ -194,7 +194,6 @@ h1 {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
background-color: var(--shaded_background); background-color: var(--shaded_background);
box-shadow: 1px 1px 6px var(--shadow_color);
padding: 0 2px 2px 2px; padding: 0 2px 2px 2px;
align-items: center; align-items: center;
} }
@@ -212,7 +211,7 @@ h1 {
max-height: 100%; max-height: 100%;
top: 50%; top: 50%;
transform: translateY(-50%); transform: translateY(-50%);
box-shadow: 1px 1px 6px var(--shadow_color); box-shadow: 0 0 4px var(--shadow_color);
} }
.video_icon { .video_icon {
display: inline-block; display: inline-block;

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

@@ -390,173 +390,171 @@ const keydown = (e) => {
<Konami></Konami> <Konami></Konami>
<div> <!-- If the user is logged in and has used more than 50% of their storage space we will show a progress bar -->
<!-- If the user is logged in and has used more than 50% of their storage space we will show a progress bar --> {#if window.user.username !== "" && window.user.storage_space_used/window.user.subscription.storage_space > 0.5}
{#if window.user.username !== "" && window.user.storage_space_used/window.user.subscription.storage_space > 0.5} <section>
<section> <StorageProgressBar used={window.user.storage_space_used} total={window.user.subscription.storage_space}></StorageProgressBar>
<StorageProgressBar used={window.user.storage_space_used} total={window.user.subscription.storage_space}></StorageProgressBar>
</section>
{/if}
<section class="instruction" style="margin-top: 0; border-top: none;">
<span class="big_number">1</span>
<span class="instruction_text">Select files to upload</span>
<br/>
You can also drop files on this page from your file manager or
paste an image from your clipboard
</section> </section>
{/if}
<section class="instruction" style="border-top: none;">
<span class="big_number">1</span>
<span class="instruction_text">Select files to upload</span>
<br/> <br/>
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"/> <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"> <button on:click={() => { file_input_field.click() }} class="big_button button_highlight">
<i class="icon small">cloud_upload</i> <i class="icon small">cloud_upload</i>
<u>U</u>pload Files <u>U</u>pload Files
</button> </button>
<a bind:this={btn_upload_text} href="/t" id="upload_text_button" class="button big_button button_highlight"> <a bind:this={btn_upload_text} href="/t" id="upload_text_button" class="button big_button button_highlight">
<i class="icon small">text_fields</i> <i class="icon small">text_fields</i>
Upload <u>T</u>ext Upload <u>T</u>ext
</a> </a>
<br/>
<p>
By uploading files to pixeldrain you acknowledge and accept our
<a href="/about#content-policy">content policy</a>.
<p>
<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>
<br/> <br/>
<p> <div class="stats_box">
By uploading files to pixeldrain you acknowledge and accept our <div>Size {formatDataVolume(total_size, 3)}</div>
<a href="/about#content-policy">content policy</a>. <div>Progress {(total_progress*100).toPrecision(3)}%</div>
<p> <div>ETA {formatDuration(remaining_time, 0)}</div>
<div>Rate {formatDataVolume(total_rate, 3)}/s</div>
<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>
<br/>
<div class="stats_box">
<div>Size {formatDataVolume(total_size, 3)}</div>
<div>Progress {(total_progress*100).toPrecision(3)}%</div>
<div>ETA {formatDuration(remaining_time, 0)}</div>
<div>Rate {formatDataVolume(total_rate, 3)}/s</div>
</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> </div>
<br/>
{#each upload_queue as file} <ProgressBar total={total_size} used={total_loaded} animation="linear" speed={stats_interval_ms}/>
<UploadProgressBar bind:this={file.component} job={file}></UploadProgressBar> </section>
{/each}
<br/> <div id="file_drop_highlight" class="highlight_green" class:hide={!dragging}>
<section class="instruction"> Gimme gimme gimme!<br/>
<span class="big_number">3</span> Drop your files to upload them
<span class="instruction_text">Share the files</span>
</section>
<br/>
{#if upload_queue.length > 1}
You can create an album to group your files together into one link<br/>
Name:
<form class="album_name_form" on:submit|preventDefault={create_album}>
<input bind:value={input_album_name} type="text" disabled={state !== "finished"} placeholder="My album"/>
<button type="submit" disabled={state !== "finished"}>
<i class="icon">create_new_folder</i> Create
</button>
</form>
<br/><br/>
Other sharing methods:
<br/>
{/if}
<div class="social_buttons" class:hide={!navigator_share}>
<button id="btn_social_share" on:click={share_navigator} class="social_buttons" disabled={state !== "finished"}>
<i class="icon">share</i><br/>
Share
</button>
</div>
<button bind:this={btn_copy_link} on:click={copy_link} class="social_buttons" disabled={state !== "finished"}>
<i class="icon">content_copy</i><br/>
<span><u>C</u>opy link</span>
</button>
<button bind:this={btn_open_link} on:click={open_link} class="social_buttons" disabled={state !== "finished"}>
<i class="icon">open_in_new</i><br/>
<span><u>O</u>pen link</span>
</button>
<button bind:this={btn_show_qr} on:click={show_qr_code} class="social_buttons" disabled={state !== "finished"} class:button_highlight={qr_visible}>
<i class="icon">qr_code</i><br/>
<span><u>Q</u>R code</span>
</button>
<div class="social_buttons" class:hide={navigator_share}>
<button bind:this={btn_share_email} on:click={share_mail} class="social_buttons" disabled={state !== "finished"}>
<i class="icon">email</i><br/>
<u>E</u>-Mail
</button>
<button bind:this={btn_share_twitter} on:click={share_twitter} class="social_buttons" disabled={state !== "finished"}>
<Twitter style="width: 40px; height: 40px; margin: 5px 15px;"></Twitter><br/>
T<u>w</u>itter
</button>
<button bind:this={btn_share_facebook} on:click={share_facebook} class="social_buttons" disabled={state !== "finished"}>
<Facebook style="width: 40px; height: 40px; margin: 5px 15px;"></Facebook><br/>
<u>F</u>acebook
</button>
<button bind:this={btn_share_reddit} on:click={share_reddit} class="social_buttons" disabled={state !== "finished"}>
<Reddit style="width: 40px; height: 40px; margin: 5px 15px;"></Reddit><br/>
<u>R</u>eddit
</button>
<button bind:this={btn_share_tumblr} on:click={share_tumblr} class="social_buttons" disabled={state !== "finished"}>
<Tumblr style="width: 40px; height: 40px; margin: 5px 15px;"></Tumblr><br/>
Tu<u>m</u>blr
</button>
</div>
<br/>
{#if qr_visible}
<img src="/api/misc/qr?text={encodeURIComponent(share_link)}" alt="QR code" style="width: 300px; max-width: 100%;">
<br/>
{/if}
<button bind:this={btn_copy_links} on:click={copy_links} disabled={state !== "finished"}>
<i class="icon">content_copy</i> Copy <u>a</u>ll links to clipboard
</button>
<button bind:this={btn_copy_markdown} on:click={copy_markdown} disabled={state !== "finished"}>
<i class="icon">content_copy</i> Copy mark<u>d</u>own to clipboard
</button>
<button bind:this={btn_copy_bbcode} on:click={copy_bbcode} disabled={state !== "finished"}>
<i class="icon">content_copy</i> Copy <u>B</u>BCode to clipboard
</button>
<br/>
{#if window.user.subscription.name === ""}
<section>
<div class="instruction">
<span class="big_number">4</span>
<span class="instruction_text">Support me on Patreon!</span>
</div>
<p>
Pixeldrain is struggling to get by financially. Because anyone
can upload anything it's hard to find reputable advertisers who
want to advertise on pixeldrain. Every month the ad revenue just
barely covers the bandwidth costs. If this continues I will have
to reduce the file size and bandwidth limits even more. That's
not something I would like to do.
</p>
<p>
Pro costs only <b>€20 per year</b> or €2 per month. You will get
some nice benefits and more features are on the way. You can
help with making pixeldrain the easiest and fastest way to share
files online!
</p>
<br/>
<div style="text-align: center;">
<a href="#pro" class="button big_button" style="min-width: 350px;">
<i class="icon">arrow_downward</i>
Check out Pro
<i class="icon">arrow_downward</i>
</a>
</div>
</section>
{/if}
<br/>
</div> </div>
<br/>
{#each upload_queue as file}
<UploadProgressBar bind:this={file.component} job={file}></UploadProgressBar>
{/each}
<br/>
<section class="instruction">
<span class="big_number">3</span>
<span class="instruction_text">Share the files</span>
</section>
<br/>
{#if upload_queue.length > 1}
You can create an album to group your files together into one link<br/>
Name:
<form class="album_name_form" on:submit|preventDefault={create_album}>
<input bind:value={input_album_name} type="text" disabled={state !== "finished"} placeholder="My album"/>
<button type="submit" disabled={state !== "finished"}>
<i class="icon">create_new_folder</i> Create
</button>
</form>
<br/><br/>
Other sharing methods:
<br/>
{/if}
<div class="social_buttons" class:hide={!navigator_share}>
<button id="btn_social_share" on:click={share_navigator} class="social_buttons" disabled={state !== "finished"}>
<i class="icon">share</i><br/>
Share
</button>
</div>
<button bind:this={btn_copy_link} on:click={copy_link} class="social_buttons" disabled={state !== "finished"}>
<i class="icon">content_copy</i><br/>
<span><u>C</u>opy link</span>
</button>
<button bind:this={btn_open_link} on:click={open_link} class="social_buttons" disabled={state !== "finished"}>
<i class="icon">open_in_new</i><br/>
<span><u>O</u>pen link</span>
</button>
<button bind:this={btn_show_qr} on:click={show_qr_code} class="social_buttons" disabled={state !== "finished"} class:button_highlight={qr_visible}>
<i class="icon">qr_code</i><br/>
<span><u>Q</u>R code</span>
</button>
<div class="social_buttons" class:hide={navigator_share}>
<button bind:this={btn_share_email} on:click={share_mail} class="social_buttons" disabled={state !== "finished"}>
<i class="icon">email</i><br/>
<u>E</u>-Mail
</button>
<button bind:this={btn_share_twitter} on:click={share_twitter} class="social_buttons" disabled={state !== "finished"}>
<Twitter style="width: 40px; height: 40px; margin: 5px 15px;"></Twitter><br/>
T<u>w</u>itter
</button>
<button bind:this={btn_share_facebook} on:click={share_facebook} class="social_buttons" disabled={state !== "finished"}>
<Facebook style="width: 40px; height: 40px; margin: 5px 15px;"></Facebook><br/>
<u>F</u>acebook
</button>
<button bind:this={btn_share_reddit} on:click={share_reddit} class="social_buttons" disabled={state !== "finished"}>
<Reddit style="width: 40px; height: 40px; margin: 5px 15px;"></Reddit><br/>
<u>R</u>eddit
</button>
<button bind:this={btn_share_tumblr} on:click={share_tumblr} class="social_buttons" disabled={state !== "finished"}>
<Tumblr style="width: 40px; height: 40px; margin: 5px 15px;"></Tumblr><br/>
Tu<u>m</u>blr
</button>
</div>
<br/>
{#if qr_visible}
<img src="/api/misc/qr?text={encodeURIComponent(share_link)}" alt="QR code" style="width: 300px; max-width: 100%;">
<br/>
{/if}
<button bind:this={btn_copy_links} on:click={copy_links} disabled={state !== "finished"}>
<i class="icon">content_copy</i> Copy <u>a</u>ll links to clipboard
</button>
<button bind:this={btn_copy_markdown} on:click={copy_markdown} disabled={state !== "finished"}>
<i class="icon">content_copy</i> Copy mark<u>d</u>own to clipboard
</button>
<button bind:this={btn_copy_bbcode} on:click={copy_bbcode} disabled={state !== "finished"}>
<i class="icon">content_copy</i> Copy <u>B</u>BCode to clipboard
</button>
<br/>
{#if window.user.subscription.name === ""}
<section>
<div class="instruction">
<span class="big_number">4</span>
<span class="instruction_text">Support me on Patreon!</span>
</div>
<p>
Pixeldrain is struggling to get by financially. Because anyone
can upload anything it's hard to find reputable advertisers who
want to advertise on pixeldrain. Every month the ad revenue just
barely covers the bandwidth costs. If this continues I will have
to reduce the file size and bandwidth limits even more. That's
not something I would like to do.
</p>
<p>
Pro costs only <b>€20 per year</b> or €2 per month. You will get
some nice benefits and more features are on the way. You can
help with making pixeldrain the easiest and fastest way to share
files online!
</p>
<br/>
<div style="text-align: center;">
<a href="#pro" class="button big_button" style="min-width: 350px;">
<i class="icon">arrow_downward</i>
Check out Pro
<i class="icon">arrow_downward</i>
</a>
</div>
</section>
{/if}
<br/>
<style> <style>
.big_button{ .big_button{
@@ -569,7 +567,7 @@ const keydown = (e) => {
} }
.instruction { .instruction {
border-top: 1px solid var(--separator); border-top: 1px solid var(--separator);
margin: 1.5em 0; margin: 1em auto;
padding: 5px; padding: 5px;
} }
.big_number { .big_number {

5
webcontroller/filesystem.go
View File

@@ -14,6 +14,11 @@ func (wc *WebController) serveDirectory(w http.ResponseWriter, r *http.Request,
var td = wc.newTemplateData(w, r) var td = wc.newTemplateData(w, r)
var path = strings.TrimPrefix(p.ByName("path"), "/") var path = strings.TrimPrefix(p.ByName("path"), "/")
if path == "" {
wc.templates.Get().ExecuteTemplate(w, "404", td)
return
}
node, err := td.PixelAPI.GetFilesystemPath(path) node, err := td.PixelAPI.GetFilesystemPath(path)
if err != nil { if err != nil {
if err.Error() == "not_found" || err.Error() == "path_not_found" { if err.Error() == "not_found" || err.Error() == "path_not_found" {

10
webcontroller/style.go
View File

@@ -123,7 +123,7 @@ type styleSheet struct {
BodyColor HSL BodyColor HSL
BodyBackground CSS BodyBackground CSS
BodyText HSL BodyText HSL
Separator CSS Separator HSL
CardColor HSL CardColor HSL
CardText HSL CardText HSL
@@ -161,7 +161,7 @@ func (s styleSheet) withDefaults() styleSheet {
defaultCSS(&s.Navigation, RawCSS("none")) defaultCSS(&s.Navigation, RawCSS("none"))
defaultCSS(&s.BodyBackground, s.BodyColor) defaultCSS(&s.BodyBackground, s.BodyColor)
defaultHSL(&s.BackgroundText, s.BodyText) defaultHSL(&s.BackgroundText, s.BodyText)
defaultCSS(&s.Separator, s.BodyColor.Add(0, 0, .05)) defaultHSL(&s.Separator, s.BodyColor.Add(0, 0, .03))
return s return s
} }
@@ -193,7 +193,7 @@ func (s styleSheet) withHue(hue int) styleSheet {
s.BodyColor.Hue = hue s.BodyColor.Hue = hue
s.BodyBackground = setHue(s.BodyBackground) s.BodyBackground = setHue(s.BodyBackground)
s.BodyText.Hue = hue s.BodyText.Hue = hue
s.Separator = setHue(s.Separator) s.Separator.Hue = hue
s.CardColor.Hue = hue s.CardColor.Hue = hue
s.CardText.Hue = hue s.CardText.Hue = hue
s.Shadow.Hue = hue s.Shadow.Hue = hue
@@ -484,7 +484,6 @@ var sweetPixeldrainStyle = styleSheet{
BackgroundColor: HSL{225, .25, .06}, // hsl(225, 25%, 6%) BackgroundColor: HSL{225, .25, .06}, // hsl(225, 25%, 6%)
BodyColor: HSL{228, .25, .12}, // hsl(228, 25%, 12%) BodyColor: HSL{228, .25, .12}, // hsl(228, 25%, 12%)
BodyText: HSL{223, .13, .79}, // hsl(223, 13%, 79%) BodyText: HSL{223, .13, .79}, // hsl(223, 13%, 79%)
Separator: RGBA{255, 255, 255, 0.05},
CardColor: HSL{229, .25, .14}, // hsl(229, 25%, 14%) CardColor: HSL{229, .25, .14}, // hsl(229, 25%, 14%)
Shadow: HSL{0, 0, 0}, Shadow: HSL{0, 0, 0},
@@ -502,7 +501,6 @@ var adwaitaDarkStyle = styleSheet{
BackgroundColor: HSL{0, 0, .19}, BackgroundColor: HSL{0, 0, .19},
BodyColor: HSL{0, 0, .14}, BodyColor: HSL{0, 0, .14},
BodyText: HSL{0, 0, 1}, BodyText: HSL{0, 0, 1},
Separator: RGBA{255, 255, 255, 0.04},
CardColor: HSL{0, 0, .08}, CardColor: HSL{0, 0, .08},
Shadow: HSL{0, 0, 0}, Shadow: HSL{0, 0, 0},
@@ -537,7 +535,6 @@ var solarizedDarkStyle = styleSheet{
BackgroundColor: HSL{192, 1, .11}, //hsl(192, 100%, 11%) BackgroundColor: HSL{192, 1, .11}, //hsl(192, 100%, 11%)
BodyColor: HSL{192, .81, .14}, // hsl(192, 81%, 14%) BodyColor: HSL{192, .81, .14}, // hsl(192, 81%, 14%)
BodyText: HSL{180, .07, .60}, // hsl(180, 7%, 60%) BodyText: HSL{180, .07, .60}, // hsl(180, 7%, 60%)
Separator: RGBA{255, 255, 255, 0.05},
CardColor: HSL{192, .81, .16}, CardColor: HSL{192, .81, .16},
Shadow: HSL{0, 0, 0}, Shadow: HSL{0, 0, 0},
@@ -555,7 +552,6 @@ var solarizedLightStyle = styleSheet{
BackgroundColor: HSL{46, .42, .88}, // hsl(46, 42%, 88%) BackgroundColor: HSL{46, .42, .88}, // hsl(46, 42%, 88%)
BodyColor: HSL{44, .87, .94}, // hsl(44, 87%, 94%) BodyColor: HSL{44, .87, .94}, // hsl(44, 87%, 94%)
BodyText: HSL{194, .14, .40}, // hsl(194, 14%, 40%) BodyText: HSL{194, .14, .40}, // hsl(194, 14%, 40%)
Separator: RGBA{0, 0, 0, 0.05},
CardColor: HSL{44, .87, .96}, CardColor: HSL{44, .87, .96},
Shadow: HSL{0, 0, 0.36}, Shadow: HSL{0, 0, 0.36},