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>