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

Make the UI flatter

Browse Source
This commit is contained in:
Fornax
2022-01-03 14:02:50 +01:00
parent bdec963be0
commit 4f17c71b56
30 changed files with 239 additions and 247 deletions
Download Patch File Download Diff File Expand all files Collapse all files

89
res/include/style/layout.css
View File

@@ -7,19 +7,6 @@
--highlight_border: inset 0px 0px 5px 1px var(--highlight_color), 0px 0px 1px 0px var(--highlight_color);
}
/* Fonts */
@font-face {
font-family: 'light';
font-display: fallback;
font-style: normal;
font-weight: normal;
src:
local('Cantarell Light'),
local('Cantarell, Light'),
local('Cantarell-Light'),
url(/res/misc/Cantarell-Light.otf) format("opentype");
}
@font-face {
font-family: 'Material Icons';
font-style: normal;
@@ -65,18 +52,24 @@ body{
font-family: system-ui, sans-serif;
font-size: 17px;
line-height: 1.8em;
color: #b2b2b2; /* Fallback */
color: var(--text_color);
background-color: var(--layer_2_color);
padding: 0;
}
body, .checkers {
.checkers {
background-image: url("{{bgPattern}}");
background-color: #111111; /* Fallback */
background-color: var(--layer_1_color);
background-repeat: repeat;
background-attachment: fixed;
background-blend-mode: luminosity;
}
.inset {
padding-top: 70px;
box-shadow: inset 1px 1px 10px 0 var(--shadow_color);
border-radius: 16px;
text-align: center;
overflow: hidden;
}
/* Page layout elements */
.page_wrapper {
@@ -100,7 +93,7 @@ body, .checkers {
background: var(--input_color);
border-radius: 0;
border-bottom-right-radius: 90%;
box-shadow: 2px 2px 8px -3px var(--shadow_color);
box-shadow: 0 0 6px -2px var(--shadow_color);
}
.button_toggle_navigation:active {
padding: 15px 15px 10px 15px;
@@ -109,23 +102,19 @@ body, .checkers {
.page_navigation {
position: fixed;
backface-visibility: hidden;
z-index: 99;
width: 18em;
height: 100%;
left: 0;
float: left;
background-color: #1c1c1c;
background-color: var(--layer_1_color);
padding: 20px 0 0.5em 0;
background-color: var(--layer_2_color);
padding: 20px 10px 10px 0;
overflow-y: auto;
overflow-x: hidden;
text-align: left;
box-shadow: inset -8px 0px 8px -8px var(--shadow_color);
transition: left 0.5s;
}
.page_body {
position: absolute;
z-index: 200;
right: 0;
height: auto;
left: 18em;
@@ -134,9 +123,8 @@ body, .checkers {
text-align: center; /* Center the header and body */
overflow-y: auto;
overflow-x: hidden;
z-index: 50;
background-color: var(--layer_2_color);
transition: left 0.5s;
padding: 70px 0 100px 0;
}
@media (max-width: 1000px) {
.page_navigation {
@@ -147,18 +135,6 @@ body, .checkers {
width: 100%;
}
}
.page_body > .page_content {
position: relative;
display: inline-block;
width: 100%;
height: auto;
padding: 0 0 20px 0;
background-color: #212121;
background-color: var(--layer_2_color);
box-shadow: 1px 1px 12px 0 var(--shadow_color);
clear: both;
}
.limit_width {
position: relative;
display: inline-block;
@@ -184,8 +160,9 @@ body, .checkers {
text-align: center;
padding: 4px;
margin: 0.3em 15px 0.3em 15px;
font-family: "light", sans-serif;
font-size: 1.6em;
font-family: sans-serif;
font-weight: lighter;
font-size: 1.5em;
overflow: hidden;
text-overflow: ellipsis;
transition: background-color 0.5s;
@@ -200,11 +177,6 @@ body, .checkers {
text-decoration: none;
}
.inset {
box-shadow: inset 1px 1px 20px 0 #000000;
box-shadow: inset 1px 1px 20px 0 var(--shadow_color);
}
.highlight_dark,
.highlight_middle,
.highlight_light,
@@ -223,22 +195,19 @@ body, .checkers {
overflow: hidden;
text-align: center;
padding: 4px;
border-radius: 8px;
}
.highlight_dark, .highlight_1 {
background-color: var(--layer_1_color);
box-shadow: 1px 1px 6px -2px var(--shadow_color);
}
.highlight_middle, .highlight_2 {
background-color: var(--layer_2_color);
box-shadow: 1px 1px 6px -2px var(--shadow_color);
}
.highlight_light, .highlight_3 {
background-color: var(--layer_3_color);
box-shadow: 1px 1px 6px -2px var(--shadow_color);
}
.highlight_lighter, .highlight_4 {
background-color: var(--layer_4_color);
box-shadow: 1px 1px 6px -2px var(--shadow_color);
}
.highlight_green {
background-color: rgba(0, 255, 0, 0.05);
@@ -273,43 +242,40 @@ h1, h2, h3, h4, h5, h6 {
line-height: 1em;
margin: 0.5em 10px;
font-weight: normal;
font-weight: lighter;
font-family: sans-serif;
}
h1 {
font-size: 2.5em;
font-family: "light", sans-serif;
text-align: center;
margin-bottom: 50px;
}
h2 {
font-size: 2em;
font-family: "light", sans-serif;
border-bottom: 1px var(--layer_4_color_border) solid;
}
h3 {
font-size: 1.6em;
font-family: "light", sans-serif;
font-size: 1.75em;
border-bottom: 1px var(--layer_3_color_border) solid;
}
h4 {
font-size: 1.25em;
font-family: "light", sans-serif;
font-size: 1.50em;
border-bottom: 1px var(--layer_2_color_border) solid;
}
h5 {
font-size: 1em;
font-family: sans-serif;
font-size: 1.25em;
border-bottom: 1px var(--layer_1_color_border) solid;
}
h6{
font-size: .75em;
font-family: sans-serif;
h6 {
font-size: 1em;
}
p, .indent {
margin: 10px;
}
hr{
hr {
height: 1px;
border: none;
background-color: var(--input_color);
@@ -513,13 +479,12 @@ select:disabled , select.disabled {
.tab_bar {
display: block;
width: 100%;
margin: 0 0 16px 0;
overflow-x: auto;
overflow-y: hidden;
white-space: nowrap;
text-align: center;
background-color: var(--layer_1_color);
box-shadow: inset 0 -10px 8px -12px var(--shadow_color);
box-shadow: inset 0 -10px 8px -12px var(--shadow_color), 0 0 10px var(--shadow_color);
}
.tab_bar > button,
.tab_bar > .button {

1
res/static/ads.txt
View File

@@ -1407,3 +1407,4 @@ onetag.com, 5cd7fb62fac7ec9, DIRECT
openx.com, 537133236, RESELLER, 6a698e2ec38604c6
pubmatic.com, 158685, RESELLER, 5d62403b186f2ace
rubiconproject.com, 13380, RESELLER, 0bfd66d529a55807
triplelift.com, 10992, RESELLER, 6c33edb13117fd86

8
res/template/404.html
View File

@@ -7,8 +7,10 @@
<body>
{{template "page_top" .}}
<h1>This page does not exist!</h1>
<div class="page_content"><div class="limit_width">
<div class="checkers inset">
<h1>This page does not exist!</h1>
</div>
<div class="limit_width">
<p>
If you came here by a link from this very same website you can
tell me about it on
@@ -21,7 +23,7 @@
<p>
Bye!
</p>
</div></div>
</div>
{{template "page_bottom" .}}
{{template "analytics"}}
</body>

8
res/template/451.html
View File

@@ -7,13 +7,15 @@
<body>
{{template "page_top" .}}
<h1>451, Unavailable For Legal Reasons</h1>
<div class="page_content"><div class="limit_width">
<div class="checkers inset">
<h1>451, Unavailable For Legal Reasons</h1>
</div>
<div class="limit_width">
<p>
Hello. This file has received an abuse report and has been taken
down. It cannot be shared anymore.
</p>
</div></div>
</div>
{{template "page_bottom" .}}
{{template "analytics"}}
</body>

8
res/template/500.html
View File

@@ -7,8 +7,10 @@
<body>
{{template "page_top" .}}
<h1>You broke pixeldrain</h1>
<div class="page_content"><div class="limit_width">
<div class="checkers inset">
<h1>You broke pixeldrain</h1>
</div>
<div class="limit_width">
<p>
Great job.
</p>
@@ -22,7 +24,7 @@
try again in a few minutes (or hours), or go back to the <a
href='/'>home page</a> and start over.
</p>
</div></div>
</div>
{{template "page_bottom" .}}
{{template "analytics"}}
</body>

1
res/template/admin.html
View File

@@ -15,7 +15,6 @@
</head>
<body>
{{template "page_top" .}}
<h1>Admin Panel</h1>
<div id="page_content" class="page_content"></div>
{{template "page_bottom" .}}
</body>

8
res/template/appearance.html
View File

@@ -7,8 +7,10 @@
<body>
{{template "page_top" .}}
<h1>Change website appearance</h1>
<div class="page_content"><div class="limit_width">
<div class="checkers inset">
<h1>Change website appearance</h1>
</div>
<div class="limit_width">
<p>
You can change how pixeldrain looks! Your theme choice will
be saved in a cookie.
@@ -26,7 +28,7 @@
<input type="radio" id="style_deepsea" name="style"><label for="style_deepsea">Deep Sea Style</label><br/>
<!--<input type="radio" id="style_sunny" name="style"><label for="style_sunny">Sunny Style</label>-->
</div>
</div></div>
</div>
<script>
// Style selector

8
res/template/apps.html
View File

@@ -14,8 +14,10 @@
<body>
{{template "page_top" .}}
<h1>Apps</h1>
<div class="page_content"><div class="limit_width">
<div class="checkers inset">
<h1>Apps</h1>
</div>
<div class="limit_width">
<h2>ShareX</h2>
<div class="specs">
Platform: Windows 7, 8.1 and 10 |
@@ -108,7 +110,7 @@
please send them to
<a href="mailto:support@pixeldrain.com">support@pixeldrain.com</a>.
</p>
</div></div>
</div>
{{template "page_bottom" .}}
{{template "analytics"}}
</body>

12
res/template/email_confirm.html
View File

@@ -7,28 +7,26 @@
<body>
{{template "page_top" .}}
<div class="page_content">
<div class="limit_width">
{{if eq .Other "success"}}
<div class="limit_width">
{{if eq .Other "success"}}
<h1>Success!</h1>
<p>
Your account's e-mail address has been updated.
</p>
{{else if eq .Other "not_found"}}
{{else if eq .Other "not_found"}}
<h1>E-mail change failed</h1>
<p>
This e-mail change request does not exist or has expired.
Please try again if you still want to change your e-mail
address.
</p>
{{else}}
{{else}}
<h1>Error</h1>
<p>
Something went wrong while processing this request. Please
try again later.
</p>
{{end}}
</div>
{{end}}
</div>
{{template "page_bottom" .}}
{{template "analytics"}}

30
res/template/file_not_found.html
View File

@@ -7,8 +7,10 @@
<body>
{{template "page_top" .}}
<h1>404, File Not Found!</h1>
<div class="page_content"><div class="limit_width">
<div class="checkers inset">
<h1>404, File Not Found!</h1>
</div>
<div class="limit_width">
<p>
This file does not exist, or it has been removed. Possible
reasons for this are:
@@ -18,7 +20,7 @@
The file has not been viewed for 30 days and has expired
</li>
<li>
The user who uploaded the file has deleted it
The person who uploaded the file has deleted it
</li>
<li>
Something went wrong on the pixeldrain servers causing the
@@ -32,8 +34,7 @@
<p>
I'm sorry for the inconvenience.
</p>
</div></div>
</div>
{{template "page_bottom" .}}
{{template "analytics"}}
</body>
@@ -48,21 +49,28 @@
<body>
{{template "page_top" .}}
<h1>404, List Not Found!</h1>
<div class="page_content"><div class="limit_width">
<div class="checkers inset">
<h1>404, List Not Found!</h1>
</div>
<div class="limit_width">
<p>
This list does not exist, or it has been removed. Possible
reasons for this are:
</p>
<ul>
<li>All files in this list have not been viewed for 30 days and have expired</li>
<li>Something went wrong on the pixeldrain servers causing the list to be temporarily unavailable</li>
<li>
All files in this list have not been viewed for 30 days and
have expired
</li>
<li>
Something went wrong on the pixeldrain servers causing the
list to be temporarily unavailable
</li>
</ul>
<p>
I'm sorry for the inconvenience.
</p>
</div></div>
</div>
{{template "page_bottom" .}}
{{template "analytics"}}
</body>

9
res/template/file_viewer_compat.html
View File

@@ -24,8 +24,11 @@
<body>
{{template "page_top" .}}
<h1>{{.Title}}</h1>
<div class="page_content"><div class="limit_width">
<div class="checkers inset">
<h1>{{.Title}}</h1>
</div>
<div class="limit_width">
{{if eq .Other.Type "file"}}
Download <a href="{{.APIEndpoint}}/file/{{.Other.APIResponse.ID}}?download">{{.Other.APIResponse.Name}}</a> here.
{{else}}
@@ -63,7 +66,7 @@
<li><a href="https://www.apple.com/safari/">Safari</a> (Mac OS)</li>
<li><a href="https://www.microsoft.com/en-us/edge">Edge</a> (Windows)</li>
</ul>
</div></div>
</div>
{{template "analytics"}}
</body>
</html>

9
res/template/fragments/form.html
View File

@@ -1,5 +1,4 @@
{{define "form"}}
<h1>{{.Title}}</h1>
{{.PreFormHTML}}
<form class="highlight_dark" method="POST">
{{if eq .Submitted true}}
@@ -111,10 +110,14 @@
<body>
<div id='body' class="body">
{{template "page_top" .}}
<div class="page_content"><div class="limit_width">
<div class="checkers inset">
<h1>{{.Form.Title}}</h1>
</div>
<br/>
<div class="limit_width">
{{template "form" .Form}}
<br/>
</div></div>
</div>
{{template "page_bottom" .}}
</div>

8
res/template/fragments/markdown_wrapper.html
View File

@@ -7,10 +7,12 @@
<body>
{{template "page_top" .}}
<h1>{{.Title}}</h1>
<div class="page_content"><div class="limit_width">
<div class="checkers inset">
<h1>{{.Title}}</h1>
</div>
<div class="limit_width">
{{.Other}}
</div></div>
</div>
{{template "page_bottom" .}}
{{template "analytics"}}
</body>

4
res/template/fragments/page_wrap.html
View File

@@ -54,7 +54,7 @@ function resetMenu() {
{{end}}
{{define "page_bottom"}}
<div class="highlight_dark">
<div class="inset checkers" style="padding-top: 150px">
<div style="display: inline-block; margin: 0 8px 0 8px;">
Pixeldrain is a product by <a href="//fornaxian.tech" target="_blank">Fornaxian Technologies</a>
</div>
@@ -71,6 +71,8 @@ function resetMenu() {
<span class="small_footer_text" style="font-size: .75em; line-height: .75em;">
page rendered by {{.Hostname}}
</span>
<br/>
<br/>
</div>
</div><!-- end page_body -->
{{end}}

10
res/template/history.html
View File

@@ -7,8 +7,12 @@
<body>
<div id='body' class="body">
{{template "page_top" .}}
<h1>Upload History</h1>
<div class="page_content"><div class="limit_width">
<div class="checkers inset">
<h1>Upload History</h1>
</div>
<div class="limit_width">
<p>
Here are all files you have previously uploaded to pixeldrain using this computer.
This data is saved locally in your web browser and gets updated every time you upload a file through your current browser.
@@ -16,7 +20,7 @@
<br/>
<div id="uploaded_files" class="highlight_dark"></div>
</div></div>
</div>
{{template "page_bottom" .}}
</div>
<script>

25
res/template/home.html
View File

@@ -8,7 +8,7 @@
.header_image{
width: 100%;
max-width: 800px;
margin: 0 auto 50px auto;
margin: auto;
}
.feat_table {
display: flex;
@@ -93,18 +93,21 @@
</head>
<body>
{{template "page_top" .}}
<picture>
<source media="(max-width: 800px)" srcset="/res/img/header_orbitron.png">
<img class="header_image" src="/res/img/header_orbitron_wide.png" alt="Header image">
</picture>
<br/>
<div class="checkers inset" style="padding-bottom: 60px;">
<picture>
<source media="(max-width: 800px)" srcset="/res/img/header_orbitron.png">
<img class="header_image" src="/res/img/header_orbitron_wide.png" alt="Header image">
</picture>
</div>
<!-- Svelte element -->
<div id="uploader" class="page_content" style="margin-bottom: 50px;"></div>
<div id="uploader" class="page_content"></div>
<h1>What is pixeldrain?</h1>
<div class="page_content"><div class="limit_width">
<div class="checkers inset">
<h1>What is pixeldrain?</h1>
</div>
<div class="limit_width">
<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
@@ -472,7 +475,7 @@
logging in head to the <a href="/user/transactions">transactions
page</a> to deposit your coins.
</p>
</div></div>
</div>
<template id="tpl_file_expiry">
<p>

25
res/template/server_status.html
View File

@@ -1,25 +0,0 @@
{{define "server_status"}}<!DOCTYPE html>
<html lang="en">
<head>
{{template "meta_tags" "Server status"}}
{{template "user_style" .}}
<style>
.status_frame {
display: block;
width: 100%;
height: 100%;
border: none;
}
</style>
</head>
<body>
{{template "page_menu" .}}
<div id="page_body" class="page_body" style="padding: 0; top: 0; bottom: 0;">
<iframe src="https://stats.uptimerobot.com/p9v2ktzyjm" class="status_frame"></iframe>
</div>
{{template "analytics"}}
</body>
</html>
{{end}}

5
res/template/user_buckets.html
View File

@@ -9,7 +9,10 @@
</head>
<body>
{{template "page_top" .}}
<h1>My Buckets</h1>
<div class="checkers inset">
<h1>My Buckets</h1>
</div>
<div id="page_content" class="page_content"></div>
{{template "page_bottom" .}}

2
res/template/user_home.html
View File

@@ -16,8 +16,6 @@
<body>
{{template "page_top" .}}
<h1>Welcome home, {{.User.Username}}!</h1>
<div id="page_content" class="page_content"></div>
{{template "page_bottom" .}}

47
res/template/user_logout.html
View File

@@ -6,30 +6,31 @@
</head>
<body>
{{template "page_top" .}}
<h1>Please confirm that you want to log out of your pixeldrain account</h1>
<div class="page_content">
<div class="checkers inset">
<h1>Please confirm that you want to log out of your pixeldrain account</h1>
<br/>
</div>
<br/>
<form method="POST" action="/logout">
<input type="submit" value="I want to log out of pixeldrain on this computer" class="button_highlight"/>
</form>
<div class="limit_width">
<br/>
<h2>Why do I need to confirm my logout?</h2>
<p>
We need you to confirm your action so we can be sure that you
really requested a logout. If we didn't do this, anyone (or any
website) would be able to send you to this page and you would
automatically get logged out of pixeldrain, which would be very
annoying.
</p>
<p>
To prevent this from happening we're verifying that you actually
want to log out by making you click this button. Because this
logout button triggers a different request type than normal
page visit we can confirm that you really want to log out.
</p>
<br/>
<form method="POST" action="/logout">
<input type="submit" value="I want to log out of pixeldrain on this computer" class="button_highlight"/>
</form>
<div class="limit_width">
<br/>
<h2>Why do I need to confirm my logout?</h2>
<p>
We need you to confirm your action so we can be sure that you
really requested a logout. If we didn't do this, anyone (or any
website) would be able to send you to this page and you would
automatically get logged out of pixeldrain, which would be very
annoying.
</p>
<p>
To prevent this from happening we're verifying that you actually
want to log out by making you click this button. Because this
logout button triggers a different request type than normal
page visit we can confirm that you really want to log out.
</p>
</div>
</div>
{{template "page_bottom" .}}
{{template "analytics"}}

11
res/template/widgets.html
View File

@@ -7,10 +7,11 @@
</head>
<body>
{{template "page_top" .}}
<img id="header_image" class="header_image" src="/res/img/header_neuropol.png" alt="Header image"/>
<br/>
<div class="page_content"><div class="limit_width">
<div class="checkers inset">
<h1>Widget showcase</h1>
</div>
<div class="limit_width">
<h2>Size 2 header</h2>
<h3>Size 3 header</h3>
<h4>Size 4 header</h4>
@@ -62,8 +63,8 @@
Color <input type="color" name="favcolor" value="#ff0000">
<br/><br/>
<iframe src="https://pixeldrain.com/u/Nygt1on4?embed" style="border: none; width: 640px; max-width: 100%; height: 480px; border-radius: 6px;"></iframe>
</div></div>
<iframe src="https://pixeldrain.com/u/Nygt1on4?embed" style="border: none; width: 800px; max-width: 100%; height: 600px; max-height: 100%; border-radius: 16px;"></iframe>
</div>
{{template "page_bottom" .}}
</body>
</html>

11
svelte/src/admin_panel/Home.svelte
View File

@@ -10,8 +10,9 @@ let graphTimeout = null
let start_time = ""
let end_time = ""
let total_bandwidth = 0
let total_views = 0
let total_bandwidth_paid = 0
let total_views = 0
let total_downloads = 0
const loadGraph = (minutes, interval, live) => {
if (graphTimeout !== null) { clearTimeout(graphTimeout) }
if (live) {
@@ -51,8 +52,9 @@ const loadGraph = (minutes, interval, live) => {
start_time = resp.views.timestamps[0]
end_time = resp.views.timestamps.slice(-1)[0];
total_bandwidth = resp.bandwidth.amounts.reduce((acc, val) => acc + val)
total_views = resp.views.amounts.reduce((acc, val) => acc + val)
total_bandwidth_paid = resp.bandwidth_paid.amounts.reduce((acc, val) => acc + val)
total_views = resp.views.amounts.reduce((acc, val) => acc + val)
total_downloads = resp.downloads.amounts.reduce((acc, val) => acc + val)
})
}
@@ -176,8 +178,9 @@ onDestroy(() => {
<div class="highlight_dark">
Total usage from {start_time} to {end_time}<br/>
{formatDataVolume(total_bandwidth, 3)} bandwidth,
{formatDataVolume(total_bandwidth_paid, 3)} paid bandwidth and
{formatThousands(total_views, 3)} views
{formatDataVolume(total_bandwidth_paid, 3)} paid bandwidth,
{formatThousands(total_views, 3)} views and
{formatThousands(total_downloads, 3)} downloads
</div>
<br/>

32
svelte/src/admin_panel/Router.svelte
View File

@@ -26,7 +26,9 @@ onMount(() => {
})
</script>
<div>
<div class="checkers inset">
<h1>Admin Panel</h1>
<div class="tab_bar">
<a class="button"
href="/admin"
@@ -75,18 +77,18 @@ onMount(() => {
Update global settings
</a>
</div>
{#if page === "status"}
<Home></Home>
{:else if page === "block_files"}
<BlockFiles></BlockFiles>
{:else if page === "abuse_reports"}
<AbuseReports></AbuseReports>
{:else if page === "abuse_reporters"}
<AbuseReporters></AbuseReporters>
{:else if page === "ip_bans"}
<IpBans></IpBans>
{:else if page === "subscriptions"}
<Subscriptions></Subscriptions>
{/if}
</div>
{#if page === "status"}
<Home></Home>
{:else if page === "block_files"}
<BlockFiles></BlockFiles>
{:else if page === "abuse_reports"}
<AbuseReports></AbuseReports>
{:else if page === "abuse_reporters"}
<AbuseReporters></AbuseReporters>
{:else if page === "ip_bans"}
<IpBans></IpBans>
{:else if page === "subscriptions"}
<Subscriptions></Subscriptions>
{/if}

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

@@ -391,15 +391,14 @@ const keydown = (e) => {
</div>
{/if}
<div class="instruction" style="margin-top: 0;">
<div class="limit_width">
<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
</div>
<div class="instruction limit_width" 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
</div>
<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">
@@ -417,22 +416,21 @@ const keydown = (e) => {
<a href="/about#content-policy">content policy</a>.
<p>
<div class="instruction" style="margin-bottom: 0;">
<div class="limit_width">
<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>
<div class="instruction limit_width" 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>
</div>
<div class="progress_bar_outer" style="margin-bottom: 1.5em;">
<div bind:this={progress_bar_inner} class="progress_bar_inner"></div>
</div>
<br/>
<div id="file_drop_highlight" class="highlight_green" class:hide={!dragging}>
Gimme gimme gimme!<br/>
@@ -443,12 +441,11 @@ const keydown = (e) => {
<UploadProgressBar bind:this={file.component} job={file}></UploadProgressBar>
{/each}
<div class="instruction">
<div class="limit_width">
<span class="big_number">3</span>
<span class="instruction_text">Share the files</span>
</div>
<div class="instruction limit_width">
<span class="big_number">3</span>
<span class="instruction_text">Share the files</span>
</div>
<br/>
{#if upload_queue.length > 1}
You can create an album to group your files together into one link<br/>
@@ -507,8 +504,8 @@ const keydown = (e) => {
<br/>
{#if qr_visible}
<img src="/api/misc/qr?text={encodeURIComponent(share_link)}" alt="QR code" style="width: 300px; max-width: 100%;">
<br/>
{/if}
<br/>
<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>
@@ -521,11 +518,9 @@ const keydown = (e) => {
<br/>
{#if window.user.subscription.name === ""}
<div class="instruction">
<div class="limit_width">
<span class="big_number">4</span>
<span class="instruction_text">Support me on Patreon!</span>
</div>
<div class="instruction limit_width">
<span class="big_number">4</span>
<span class="instruction_text">Support me on Patreon!</span>
</div>
<div class="limit_width">
<p>

4
svelte/src/user_file_manager/DirectoryElement.svelte
View File

@@ -325,7 +325,7 @@ const node_click = (index) => {
{/each}
</div>
</div>
<div id="footer" class="status_bar highlight_1">
<div id="footer">
{statusBar}
</div>
</div>
@@ -382,6 +382,8 @@ const node_click = (index) => {
#footer {
flex-shrink: 0;
text-align: left;
background-color: var(--layer_1_color);
padding: 4px;
}
.node {

19
svelte/src/user_file_manager/FileManager.svelte
View File

@@ -256,8 +256,16 @@ onMount(() => {
<svelte:window on:keydown={keydown} on:hashchange={hashChange} />
<svetle:head>
<style>
#footer {
border-top-left-radius: 16px;
}
</style>
</svetle:head>
<div id="file_manager" class="file_manager">
<div id="nav_bar" class="nav_bar highlight_1">
<div id="nav_bar" class="nav_bar" class:expanded={selecting}>
<button id="btn_menu" onclick="toggleMenu()"><i class="icon">menu</i></button>
<button on:click={toggleSelecting} id="btn_select" class:button_highlight={selecting}>
<i class="icon">select_all</i> Select
@@ -271,7 +279,7 @@ onMount(() => {
</button>
</div>
{#if selecting}
<div class="nav_bar highlight_3">
<div class="nav_bar">
<!-- Buttons to make a list and bulk delete files will show up here soon. Stay tuned ;-) -->
{#if contentType === "files"}
<button on:click={createList}><i class="icon">list</i> Make list</button>
@@ -337,7 +345,6 @@ is collapsed */
#file_manager {
position: absolute;
padding: 0;
background-color: var(--layer_2_color);
width: 100%;
height: 100%;
display: flex;
@@ -347,6 +354,12 @@ is collapsed */
flex-shrink: 0;
display: flex;
flex-direction: row;
border-bottom-left-radius: 16px;
background-color: var(--layer_1_color);
padding: 4px;
}
.nav_bar.expanded {
border-bottom-left-radius: 0;
}
.nav_bar > button {
flex-shrink: 0;

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

@@ -33,7 +33,9 @@ onMount(() => {
<svelte:window on:popstate={get_page} />
<div>
<div class="checkers inset">
<h1>Welcome home, {window.user.username}!</h1>
<div class="tab_bar">
<a class="button"
href="/user"
@@ -73,18 +75,18 @@ onMount(() => {
</a>
{/if}
</div>
{#if page === "home"}
<Home/>
{:else if page === "settings"}
<AccountSettings/>
{:else if page === "api_keys"}
<APIKeys/>
{:else if page === "connect_app"}
<ConnectApp/>
{:else if page === "transactions"}
<Transactions/>
{:else if page === "subscription"}
<Subscription/>
{/if}
</div>
{#if page === "home"}
<Home/>
{:else if page === "settings"}
<AccountSettings/>
{:else if page === "api_keys"}
<APIKeys/>
{:else if page === "connect_app"}
<ConnectApp/>
{:else if page === "transactions"}
<Transactions/>
{:else if page === "subscription"}
<Subscription/>
{/if}

2
svelte/src/util/Modal.svelte
View File

@@ -86,7 +86,7 @@ const keydown = e => {
left: 50%;
transform: translate(-50%, -20%);
padding: 0;
border-radius: 20px 20px 8px 8px;
border-radius: 20px 20px 16px 16px;
overflow: hidden;
text-align: left;
box-shadow: var(--shadow_color) 0px 0px 50px;

2
webcontroller/user_style.go
View File

@@ -241,7 +241,7 @@ var sunnyPixeldrainStyle = pixeldrainStyleSheet{
Layer3Color: hsl{0, 1, 1},
Layer4Color: hsl{0, 1, 1},
ShadowColor: hsl{0, 0, 0.5},
ShadowColor: hsl{0, 0, 0},
}
var solarizedDarkStyle = pixeldrainStyleSheet{

1
webcontroller/web_controller.go
View File

@@ -159,7 +159,6 @@ func New(
{GET, "brave" /* */, wc.serveMarkdown("brave.md", handlerOpts{})},
{GET, "acknowledgements" /**/, wc.serveMarkdown("acknowledgements.md", handlerOpts{})},
{GET, "business" /* */, wc.serveMarkdown("business.md", handlerOpts{})},
{GET, "server_status" /* */, wc.serveTemplate("server_status", handlerOpts{})},
{GET, "apps" /* */, wc.serveTemplate("apps", handlerOpts{})},
// User account pages