diff --git a/res/static/img/header_orbitron.webp b/res/static/img/header_orbitron.webp index 5bac0e6..a2c90d7 100644 Binary files a/res/static/img/header_orbitron.webp and b/res/static/img/header_orbitron.webp differ diff --git a/res/static/img/header_orbitron.xcf b/res/static/img/header_orbitron.xcf index 9d19bd1..9927ab3 100644 Binary files a/res/static/img/header_orbitron.xcf and b/res/static/img/header_orbitron.xcf differ diff --git a/res/static/img/nebula.webp b/res/static/img/nebula.webp new file mode 100644 index 0000000..68d12cc Binary files /dev/null and b/res/static/img/nebula.webp differ diff --git a/res/static/style/layout.css b/res/static/style/layout.css index edb5d68..1dfcd5a 100644 --- a/res/static/style/layout.css +++ b/res/static/style/layout.css @@ -75,8 +75,6 @@ body { transition: opacity 0.2s; } -header, -footer, .checkers { background-image: var(--background_pattern); background-color: var(--background_pattern_color); @@ -85,24 +83,23 @@ footer, header, footer { - border: 2px solid var(--separator); - border-radius: 12px; text-align: center; overflow: hidden; clear: both; } header>h1 { - text-shadow: 1px 1px 4px var(--shadow_color); - margin-top: 80px; - margin-bottom: 80px; + margin-top: 30px; + margin-bottom: 30px; + color: var(--background_text_color); } footer>.footer_content { - background-color: var(--shaded_background); + background-color: var(--body_background); + color: var(--body_text_color); display: inline-block; border-radius: 8px; - margin: 200px 0 60px 0; + margin: 120px 0 60px 0; } /* Page layout elements */ @@ -153,14 +150,17 @@ footer>.footer_content { /* Center the header and body */ overflow-y: auto; overflow-x: hidden; - background: var(--body_background); - border-top-left-radius: 16px; - border-bottom-left-radius: 16px; - padding: 8px; transition: margin-left 0.5s; } -@media (max-width: 1000px) { +.page_content { + background: var(--body_background); + border-top-left-radius: 12px; + border-bottom-left-radius: 12px; + transition: border-top-left-radius 1s, border-bottom-left-radius 1s; +} + +@media (max-width: 1100px) { .page_navigation { left: -18em; } @@ -168,17 +168,27 @@ footer>.footer_content { .page_body { margin-left: 0; width: 100%; - padding: 4px; + } + + .page_content { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + header>h1 { + /* We want the header text to appear below the menu button, so the top + margin needs to be fairly large when the screen is small */ + margin-top: 60px; } } section { position: relative; display: block; + padding: 8px; max-width: 1000px; width: 100%; height: auto; - padding: 0; margin: auto; text-align: initial; clear: both; @@ -192,9 +202,9 @@ section { color: var(--background_text_color); text-align: center; padding: 4px; - margin: 0.3em 15px 0.3em 15px; + margin: 0.2em 15px 0.2em 15px; font-family: 'Open Sans Light', sans-serif; - font-weight: lighter; + font-weight: light; font-size: 1.5em; overflow: hidden; text-overflow: ellipsis; @@ -210,6 +220,7 @@ section { } .highlight_shaded, +.highlight_border, .highlight_green, .highlight_blue, .highlight_yellow, @@ -223,9 +234,12 @@ section { border-radius: 8px; } +.highlight_border { + border: 2px solid var(--separator); +} + .highlight_shaded { - background: var(--background_color); - color: var(--background_text_color); + background: var(--card_color); } .highlight_green { @@ -328,7 +342,7 @@ p { margin-left: auto; margin-right: auto; text-align: initial; - max-width: 500px; + max-width: 600px; width: 100%; } @@ -553,7 +567,6 @@ button>svg, overflow-y: hidden; white-space: nowrap; text-align: center; - box-shadow: inset 0 -10px 8px -12px var(--shadow_color); } .tab_bar>button, diff --git a/res/template/404.html b/res/template/404.html index 0f3b264..64862b0 100644 --- a/res/template/404.html +++ b/res/template/404.html @@ -9,20 +9,22 @@

This page does not exist!

-
-

- If you came here by a link from this very same website you can - tell me about it on - twitter. -

-

- Either way, there's nothing to see here, so you'll have to - head over to the home page. -

-

- Bye! -

-
+
+
+

+ If you came here by a link from this very same website you can + tell me about it on + twitter. +

+

+ Either way, there's nothing to see here, so you'll have to + head over to the home page. +

+

+ Bye! +

+
+
{{template "page_bottom" .}} {{template "analytics"}} diff --git a/res/template/451.html b/res/template/451.html index e8e35d3..462cc77 100644 --- a/res/template/451.html +++ b/res/template/451.html @@ -9,12 +9,14 @@

451, Unavailable For Legal Reasons

-
-

- Hello. This file has received an abuse report and has been taken - down. It cannot be shared anymore. -

-
+
+
+

+ Hello. This file has received an abuse report and has been taken + down. It cannot be shared anymore. +

+
+
{{template "page_bottom" .}} {{template "analytics"}} diff --git a/res/template/500.html b/res/template/500.html index 7e367d4..5425f32 100644 --- a/res/template/500.html +++ b/res/template/500.html @@ -9,21 +9,23 @@

You broke pixeldrain

-
-

- Great job. -

-

- Just kidding, something went wrong on the pixeldrain server and - it's my fault. This can happen when the website is overloaded, - there is a problem with the software or there is a hardware - problem. When there is a large scale outage you can usually find - more info on my twitter @Fornax96. You can - try again in a few minutes (or hours), or go back to the home page and start over. -

-
+
+
+

+ Great job. +

+

+ Just kidding, something went wrong on the pixeldrain server and + it's my fault. This can happen when the website is overloaded, + there is a problem with the software or there is a hardware + problem. When there is a large scale outage you can usually find + more info on my twitter @Fornax96. You can + try again in a few minutes (or hours), or go back to the home page and start over. +

+
+
{{template "page_bottom" .}} {{template "analytics"}} diff --git a/res/template/admin.html b/res/template/admin.html index 8f7c4e7..4fd8672 100644 --- a/res/template/admin.html +++ b/res/template/admin.html @@ -7,14 +7,14 @@ - {{template "page_top" .}} -
- {{template "page_bottom" .}} + {{template "menu" .}} +
{{else}} @@ -22,7 +22,12 @@ {{template "page_top" .}} -
;-)
+
+

Admin Panel

+
+
+ ;-) +
{{template "page_bottom" .}} {{end}} diff --git a/res/template/appearance.html b/res/template/appearance.html index 23c0aad..4d593ce 100644 --- a/res/template/appearance.html +++ b/res/template/appearance.html @@ -10,70 +10,72 @@

Change website appearance

-
-

- You can change how pixeldrain looks! Your theme choice will - be saved in a cookie. -

-

Theme

- - (Inspired by Nord) -
- Dynamic theme, changes based on operating system settings. Here you can choose a specific variant: -
- -
- -
-
- - (Inspired by Solarized) -
- Dynamic theme, changes based on operating system settings. Here you can choose a specific variant: -
- -
- -
- - -
- -
- Classic 2022 style, with purple gradients -
-
- -
- Classic pre-2020 pixeldrain style, dark gray -
-
- Other (experimental) themes -
- -
- -
- - (Inspired by Canta GTK) -
- - (Inspired by Skeuos GTK) -
- +
+
+

+ You can change how pixeldrain looks! Your theme choice will + be saved in a cookie. +

+

Theme

+ + (Inspired by Nord) +
+ Dynamic theme, changes based on operating system settings. Here you can choose a specific variant: +
+ +
+ +
+
+ + (Inspired by Solarized) +
+ Dynamic theme, changes based on operating system settings. Here you can choose a specific variant: +
+ +
+ +
+ + +
+ +
+ Classic 2022 style, with purple gradients +
+
+ +
+ Classic pre-2020 pixeldrain style, dark gray +
+
+ Other (experimental) themes +
+ +
+ +
+ + (Inspired by Canta GTK) +
+ + (Inspired by Skeuos GTK) +
+ -

Hue

-

- Many themes support custom hues. The hue does not change the - contrast of the theme, only the color itself. -

-
-
-
-
-
-
-
+

Hue

+

+ Many themes support custom hues. The hue does not change the + contrast of the theme, only the color itself. +

+
+
+
+
+
+
+
+ {{end}} +{{define "footer"}} + +{{end}} + {{define "page_top"}} -{{template "page_menu" .}} +{{template "menu" .}}
{{end}} {{define "page_bottom"}} - -
+{{template "footer" .}} + {{end}} diff --git a/res/template/history.html b/res/template/history.html index 6db09ef..49c7c05 100644 --- a/res/template/history.html +++ b/res/template/history.html @@ -51,15 +51,16 @@

Upload History

+
+
+

+ 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. +

+
-
-

- 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. -

-
- -
+
+
{{template "page_bottom" .}} - {{template "page_top" .}} - -
- - {{template "page_bottom" .}} + {{template "menu" .}} +
{{template "analytics"}} diff --git a/res/template/user_buckets.html b/res/template/user_buckets.html index c165e2b..af8ff33 100644 --- a/res/template/user_buckets.html +++ b/res/template/user_buckets.html @@ -8,14 +8,8 @@ - {{template "page_top" .}} - -
-

My Buckets

-
-
- - {{template "page_bottom" .}} + {{template "menu" .}} +
{{template "analytics"}} diff --git a/res/template/user_file_manager.html b/res/template/user_file_manager.html index f61acd3..e8de41a 100644 --- a/res/template/user_file_manager.html +++ b/res/template/user_file_manager.html @@ -11,7 +11,7 @@ - {{template "page_menu" .}} + {{template "menu" .}}
{{template "analytics"}} diff --git a/res/template/user_home.html b/res/template/user_home.html index 980f3f4..a1b0505 100644 --- a/res/template/user_home.html +++ b/res/template/user_home.html @@ -6,17 +6,15 @@ - {{template "page_top" .}} - -
- - {{template "page_bottom" .}} + {{template "menu" .}} +
{{template "analytics"}} diff --git a/res/template/user_logout.html b/res/template/user_logout.html index b59eafa..4142d05 100644 --- a/res/template/user_logout.html +++ b/res/template/user_logout.html @@ -8,27 +8,32 @@

Logging out of your pixeldrain account

-
-
- -
-
-
-

Why do I need to confirm my logout?

-

- 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. -

-

- 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. -

-
+
+
+
+ +
+
+
+

Why do I need to confirm my logout?

+

+ 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. +

+

+ 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. +

+
+
{{template "page_bottom" .}} {{template "analytics"}} diff --git a/res/template/widgets.html b/res/template/widgets.html index ea4786b..bb325f7 100644 --- a/res/template/widgets.html +++ b/res/template/widgets.html @@ -6,61 +6,62 @@ {{template "page_top" .}} -

Widget showcase

-
-

Size 2 header

-

Size 3 header

-

Size 4 header

-
Size 5 header
-
Size 6 header
+
+
+

Size 2 header

+

Size 3 header

+

Size 4 header

+
Size 5 header
+
Size 6 header
-
Shaded highlight
-
- Link A link to someplace. -
- Buttons - Width indicator - - Width indicator - -
- Textarea -
- Checkbox -
- Radio - - -
- Text field -
- Password -
- Number -
- Select - -
- Select2 -
- File -
- Color +
Shaded highlight
+
+ Link A link to someplace. +
+ Buttons + Width indicator + + Width indicator + +
+ Textarea +
+ Checkbox +
+ Radio + + +
+ Text field +
+ Password +
+ Number +
+ Select + +
+ Select2 +
+ File +
+ Color -

- -
+

+ +
+ {{template "page_bottom" .}} diff --git a/svelte/src/admin_panel.js b/svelte/src/admin_panel.js index 2a03ca7..3d240f1 100644 --- a/svelte/src/admin_panel.js +++ b/svelte/src/admin_panel.js @@ -1,7 +1,7 @@ import App from './admin_panel/Router.svelte'; const app = new App({ - target: document.getElementById("page_content"), + target: document.getElementById("page_body"), props: {} }); diff --git a/svelte/src/admin_panel/Home.svelte b/svelte/src/admin_panel/Home.svelte index a3d1076..b9879fd 100644 --- a/svelte/src/admin_panel/Home.svelte +++ b/svelte/src/admin_panel/Home.svelte @@ -163,7 +163,7 @@ onDestroy(() => {

Bandwidth usage and file views

-
+
@@ -174,7 +174,7 @@ onDestroy(() => {
-
+
Total usage from {start_time} to {end_time}
{formatDataVolume(total_bandwidth, 3)} bandwidth, {formatDataVolume(total_bandwidth_paid, 3)} paid bandwidth, diff --git a/svelte/src/admin_panel/Router.svelte b/svelte/src/admin_panel/Router.svelte index c5ad2f7..0e4cd41 100644 --- a/svelte/src/admin_panel/Router.svelte +++ b/svelte/src/admin_panel/Router.svelte @@ -6,6 +6,7 @@ import Home from "./Home.svelte" import { onMount } from "svelte"; import BlockFiles from "./BlockFiles.svelte"; import Subscriptions from "./Subscriptions.svelte"; +import Footer from "../layout/Footer.svelte"; let page = "" @@ -79,16 +80,19 @@ onMount(() => {
-{#if page === "status"} - -{:else if page === "block_files"} - -{:else if page === "abuse_reports"} - -{:else if page === "abuse_reporters"} - -{:else if page === "ip_bans"} - -{:else if page === "subscriptions"} - -{/if} +
+ {#if page === "status"} + + {:else if page === "block_files"} + + {:else if page === "abuse_reports"} + + {:else if page === "abuse_reporters"} + + {:else if page === "ip_bans"} + + {:else if page === "subscriptions"} + + {/if} +
+
diff --git a/svelte/src/file_viewer/AdLeaderboard.svelte b/svelte/src/file_viewer/AdLeaderboard.svelte index 919bdb7..c764e53 100644 --- a/svelte/src/file_viewer/AdLeaderboard.svelte +++ b/svelte/src/file_viewer/AdLeaderboard.svelte @@ -14,10 +14,17 @@ onMount(() => { return } - if (Math.random() < 0.1) { + // 10% pixeldrain socials + // 45% nextmillennium + // 45% pixfuture + + let rand = Math.random() + if (rand < 0.1) { set_ad_type("pixeldrain_social") - } else { + } else if (rand < 0.55) { set_ad_type("nextmillennium") + } else { + set_ad_type("pixfuture") } }) diff --git a/svelte/src/file_viewer/EditWindow.svelte b/svelte/src/file_viewer/EditWindow.svelte index b32646c..41044c5 100644 --- a/svelte/src/file_viewer/EditWindow.svelte +++ b/svelte/src/file_viewer/EditWindow.svelte @@ -152,10 +152,10 @@ let delete_list = async e => { {#if list.can_edit}

Edit album

-

Rename

+ Name:
-
@@ -171,10 +171,10 @@ let delete_list = async e => { {#if file.can_edit}

Edit file

-

Rename

+ Name:
-
diff --git a/svelte/src/file_viewer/EmbedWindow.svelte b/svelte/src/file_viewer/EmbedWindow.svelte index 239e0b8..7bc86bd 100644 --- a/svelte/src/file_viewer/EmbedWindow.svelte +++ b/svelte/src/file_viewer/EmbedWindow.svelte @@ -204,4 +204,7 @@ const update_example = () => { width: 100%; overflow: hidden; } +.tab_bar { + border-bottom: 2px solid var(--separator); +} diff --git a/svelte/src/home_page.js b/svelte/src/home_page.js index 247e648..c566f67 100644 --- a/svelte/src/home_page.js +++ b/svelte/src/home_page.js @@ -1,7 +1,7 @@ import App from './home_page/HomePage.svelte'; const app = new App({ - target: document.getElementById("page_content"), + target: document.getElementById("page_body"), props: {} }); diff --git a/svelte/src/home_page/HomePage.svelte b/svelte/src/home_page/HomePage.svelte index ed6ecc3..f119bbb 100644 --- a/svelte/src/home_page/HomePage.svelte +++ b/svelte/src/home_page/HomePage.svelte @@ -1,74 +1,78 @@ -
-
-
- +
+
+
+
-
-

What is pixeldrain?

-
+ -
-

- 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. -

-

- Files can be uploaded by clicking the big green upload - button, or by dragging them onto this page from your file - manager. -

-

Accounts

-

- 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 the registration page. - More about pixeldrain's features below. -

-
-
-

Getting more out of pixeldrain

-
-
-

- 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 prepaid plans if you are interested in more - professional services. -

-
- -
-
- Do you need even more time and space? Check out our other plans -
-
- -
-
+
+

What is pixeldrain?

+
- -
-
+
+

+ 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. +

+

+ Files can be uploaded by clicking the big green upload + button, or by dragging them onto this page from your file + manager. +

+

Accounts

+

+ 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 the registration page. + More about pixeldrain's features below. +

+
+
+

Getting more out of pixeldrain

+
+
+

+ 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 prepaid plans if you are interested in more + professional services. +

+
+ +
+
+ Do you need even more time and space? Check out our other plans +
+
+ +
+
+ + +
+
+
+
diff --git a/svelte/src/layout/Menu.svelte b/svelte/src/layout/Menu.svelte new file mode 100644 index 0000000..ca15a22 --- /dev/null +++ b/svelte/src/layout/Menu.svelte @@ -0,0 +1,84 @@ + + + + + + diff --git a/svelte/src/user_buckets.js b/svelte/src/user_buckets.js index b8f015e..5912a04 100644 --- a/svelte/src/user_buckets.js +++ b/svelte/src/user_buckets.js @@ -1,7 +1,7 @@ import App from './user_buckets/UserBuckets.svelte'; const app = new App({ - target: document.getElementById("page_content"), + target: document.getElementById("page_body"), props: {} }); diff --git a/svelte/src/user_buckets/UserBuckets.svelte b/svelte/src/user_buckets/UserBuckets.svelte index a4b88ef..ec74e53 100644 --- a/svelte/src/user_buckets/UserBuckets.svelte +++ b/svelte/src/user_buckets/UserBuckets.svelte @@ -3,6 +3,7 @@ import { onMount } from "svelte"; import UserBucket from "./UserBucket.svelte"; import { fs_get_buckets, fs_create_bucket } from "../filesystem/FilesystemAPI.svelte"; import LoadingIndicator from "../util/LoadingIndicator.svelte"; +import Footer from "../layout/Footer.svelte"; let loading = true let buckets = [] @@ -43,40 +44,46 @@ onMount(get_buckets); -
-
- -
- {#if creating_bucket} -
-
- - - - - - - - -
- Name - - -
- -
-
+
+

My Buckets

+
+
+
+
+
- {/if} + {#if creating_bucket} +
+
+ + + + + + + + +
+ Name + + +
+ +
+
+
+ {/if} - {#each buckets as bucket (bucket.id)} - - {/each} -
+ {#each buckets as bucket (bucket.id)} + + {/each} +
+
+