Update styles

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: 30px;
-	margin-top: 80px;
+	margin-bottom: 30px;
-	margin-bottom: 80px;
+	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);
+	background: var(--card_color);
-	color: var(--background_text_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,

res/template/404.html

@@ -9,6 +9,7 @@
 		<header>
 			<h1>This page does not exist!</h1>
 		</header>
+		<div id="page_content" class="page_content">
 			<section>
 				<p>
 					If you came here by a link from this very same website you can
@@ -23,6 +24,7 @@
 					Bye!
 				</p>
 			</section>
+		</div>
 		{{template "page_bottom" .}}
 		{{template "analytics"}}
 	</body>

res/template/451.html

@@ -9,12 +9,14 @@
 		<header>
 			<h1>451, Unavailable For Legal Reasons</h1>
 		</header>
+		<div id="page_content" class="page_content">
 			<section>
 				<p>
 					Hello. This file has received an abuse report and has been taken
 					down. It cannot be shared anymore.
 				</p>
 			</section>
+		</div>
 		{{template "page_bottom" .}}
 		{{template "analytics"}}
 	</body>

res/template/500.html

@@ -9,6 +9,7 @@
 		<header>
 			<h1>You broke pixeldrain</h1>
 		</header>
+		<div id="page_content" class="page_content">
 			<section>
 				<p>
 					Great job.
@@ -24,6 +25,7 @@
 					href='/'>home page</a> and start over.
 				</p>
 			</section>
+		</div>
 		{{template "page_bottom" .}}
 		{{template "analytics"}}
 	</body>

res/template/admin.html

@@ -7,14 +7,14 @@
 
 			<script>
 			window.api_endpoint = '{{.APIEndpoint}}';
+			window.server_hostname = "{{.Hostname}}";
 			</script>
 			<link rel='stylesheet' href='/res/svelte/admin_panel.css?v{{.CacheID}}'>
 			<script defer src='/res/svelte/admin_panel.js?v{{.CacheID}}'></script>
 		</head>
 		<body>
-			{{template "page_top" .}}
+			{{template "menu" .}}
-			<div id="page_content" class="page_content"></div>
+			<div id="page_body" class="page_body"></div>
-			{{template "page_bottom" .}}
 		</body>
 	{{else}}
 		<head>
@@ -22,7 +22,12 @@
 		</head>
 		<body>
 			{{template "page_top" .}}
-			<div class="page_content">;-)</div>
+			<header>
+				<h1>Admin Panel</h1>
+			</header>
+			<div id="page_content" class="page_content">
+				;-)
+			</div>
 			{{template "page_bottom" .}}
 		</body>
 	{{end}}

res/template/appearance.html

@@ -10,6 +10,7 @@
 		<header>
 			<h1>Change website appearance</h1>
 		</header>
+		<div id="page_content" class="page_content">
 			<section>
 				<p>
 					You can change how pixeldrain looks! Your theme choice will
@@ -74,6 +75,7 @@
 				<input type="radio" id="hue_92" name="hue"><label for="hue_92">Green</label><br/>
 				<input type="radio" id="hue_311" name="hue"><label for="hue_311">Purple</label><br/>
 			</section>
+		</div>
 
 		<script>
 		function get_cookie(cname) {

res/template/apps.html

@@ -16,6 +16,7 @@
 		<header>
 			<h1>Apps</h1>
 		</header>
+		<div id="page_content" class="page_content">
 			<section>
 				<h2>ShareX</h2>
 				<div class="specs">
@@ -127,6 +128,7 @@
 					<a href="mailto:support@pixeldrain.com">support@pixeldrain.com</a>.
 				</p>
 			</section>
+		</div>
 		{{template "page_bottom" .}}
 		{{template "analytics"}}
 	</body>

res/template/directory_upload.html

@@ -14,6 +14,9 @@
 	<body>
 		{{template "page_top" .}}
 
+		<header>
+			<h1>Directory upload</h1>
+		</header>
 		<div id="page_content" class="page_content"></div>
 
 		{{template "page_bottom" .}}

res/template/email_confirm.html

@@ -10,15 +10,18 @@
 			<header>
 				<h1>Success!</h1>
 			</header>
+			<div id="page_content" class="page_content">
 				<section>
 					<p>
 						Your account's e-mail address has been updated.
 					</p>
 				</section>
+			</div>
 		{{else if eq .Other "not_found"}}
 			<header>
 				<h1>E-mail change failed</h1>
 			</header>
+			<div id="page_content" class="page_content">
 				<section>
 					<p>
 						This e-mail change request does not exist or has expired.
@@ -26,16 +29,19 @@
 						address.
 					</p>
 				</section>
+			</div>
 		{{else}}
 			<header>
 				<h1>Error</h1>
 			</header>
+			<div id="page_content" class="page_content">
 				<section>
 					<p>
 						Something went wrong while processing this request. Please
 						try again later.
 					</p>
 				</section>
+			</div>
 		{{end}}
 
 		{{template "page_bottom" .}}

res/template/file_not_found.html

@@ -9,6 +9,7 @@
 		<header>
 			<h1>404, File Not Found!</h1>
 		</header>
+		<div id="page_content" class="page_content">
 			<section>
 				<p>
 					This file does not exist, or it has been removed. Possible
@@ -26,6 +27,7 @@
 					I'm sorry for the inconvenience.
 				</p>
 			</section>
+		</div>
 		{{template "page_bottom" .}}
 		{{template "analytics"}}
 	</body>
@@ -42,6 +44,7 @@
 		<header>
 			<h1>404, List Not Found!</h1>
 		</header>
+		<div id="page_content" class="page_content">
 			<section>
 				<p>
 					This list does not exist, or it has been removed. Possible
@@ -60,6 +63,7 @@
 					I'm sorry for the inconvenience.
 				</p>
 			</section>
+		</div>
 		{{template "page_bottom" .}}
 		{{template "analytics"}}
 	</body>

res/template/file_viewer_compat.html

@@ -30,6 +30,7 @@
 		<header>
 			<h1>{{.Title}}</h1>
 		</header>
+		<div id="page_content" class="page_content">
 			<section>
 				{{if eq .Other.Type "file"}}
 					Download <a href="{{.APIEndpoint}}/file/{{.Other.APIResponse.ID}}?download">{{.Other.APIResponse.Name}}</a> here.
@@ -69,6 +70,7 @@
 					<li><a href="https://www.microsoft.com/en-us/edge">Edge</a> (Windows)</li>
 				</ul>
 			</section>
+		</div>
 		{{template "analytics"}}
 	</body>
 </html>

res/template/fragments/form.html

@@ -1,6 +1,6 @@
 {{define "form"}}
 	{{.PreFormHTML}}
-	<form class="highlight_shaded" method="POST">
+	<form class="highlight_border" method="POST">
 		{{if eq .Submitted true}}
 			{{if eq .SubmitSuccess true}}
 				<div id="submit_result" class="highlight_green">
@@ -91,11 +91,14 @@
 			<header>
 				<h1>{{.Form.Title}}</h1>
 			</header>
+
+			<div id="page_content" class="page_content">
 				<br/>
 				<section>
 					{{template "form" .Form}}
 					<br/>
 				</section>
+			</div>
 			{{template "page_bottom" .}}
 		</div>
 

res/template/fragments/markdown_wrapper.html

@@ -9,9 +9,11 @@
 			<header>
 				<h1>{{.Title}}</h1>
 			</header>
+			<div id="page_content" class="page_content">
 				<section>
 					{{.Other}}
 				</section>
+			</div>
 		{{template "page_bottom" .}}
 		{{template "analytics"}}
 	</body>

res/template/fragments/page_wrap.html

@@ -1,4 +1,4 @@
-{{define "page_menu"}}
+{{define "menu"}}
 <button id="button_toggle_navigation" class="button_toggle_navigation" onclick="toggleMenu();">☰</button>
 <nav id="page_navigation" class="page_navigation">
 	<a href="/#">Home</a>
@@ -29,14 +29,19 @@
 function toggleMenu() {
 	var nav  = document.getElementById("page_navigation");
 	var body = document.getElementById("page_body");
+	var content = document.getElementById("page_content");
 	if (nav.offsetLeft === 0) {
 		// Menu is visible, hide it
 		nav.style.left = -nav.offsetWidth + "px";
 		body.style.marginLeft = "0";
+		content.style.borderTopLeftRadius = "0"
+		content.style.borderBottomLeftRadius = "0"
 	} else {
 		// Menu is hidden, show it
 		nav.style.left = "0";
 		body.style.marginLeft = nav.offsetWidth + "px";
+		content.style.borderTopLeftRadius = "12px"
+		content.style.borderBottomLeftRadius = "12px"
 	}
 }
 function resetMenu() {
@@ -46,12 +51,7 @@ function resetMenu() {
 </script>
 {{end}}
 
-{{define "page_top"}}
+{{define "footer"}}
-{{template "page_menu" .}}
-<div id="page_body" class="page_body">
-{{end}}
-
-{{define "page_bottom"}}
 <footer>
 	<div class="footer_content">
 		<div style="display: inline-block; margin: 0 8px 0 8px;">
@@ -72,5 +72,14 @@ function resetMenu() {
 		</span>
 	</div>
 </footer>
-</div><!-- end page_body -->
+{{end}}
+
+{{define "page_top"}}
+{{template "menu" .}}
+<div id="page_body" class="page_body">
+{{end}}
+
+{{define "page_bottom"}}
+{{template "footer" .}}
+</div>
 {{end}}

res/template/history.html

@@ -51,7 +51,7 @@
 		<header>
 			<h1>Upload History</h1>
 		</header>
-
+		<div id="page_content" class="page_content">
 			<section>
 				<p>
 				Here are all files you have previously uploaded to pixeldrain using this computer.
@@ -60,6 +60,7 @@
 			</section>
 
 			<div id="uploaded_files"></div>
+		</div>
 		{{template "page_bottom" .}}
 
 		<script>

res/template/home.html

@@ -7,32 +7,29 @@
 		<style>
 		/* Override the default background with something spectacular */
 		header, footer, .checkers {
-			background-image: url("/res/img/horsehead.webp");
+			background-image: url("/res/img/nebula.webp");
-			background-color: var(--parallax_slider_color);
+			background-color: var(--background_color);
-			background-repeat: no-repeat;
 			background-blend-mode: luminosity;
-			background-attachment: fixed;
-			background-position: center top;
-			background-size: cover;
 			color: #ffffff;
 			box-shadow: inset 0 0 2px 0 var(--shadow_color);
 			border: none;
 		}
+		header>h1 {
+			color: #ffffff;
+		}
 		</style>
 
 		<script>
 			window.api_endpoint = '{{.APIEndpoint}}';
 			window.user = {{.User}};
+			window.server_hostname = "{{.Hostname}}";
 		</script>
 		<link rel='stylesheet' href='/res/svelte/home_page.css?v{{.CacheID}}'>
 		<script defer src='/res/svelte/home_page.js?v{{.CacheID}}'></script>
 	</head>
 	<body>
-		{{template "page_top" .}}
+		{{template "menu" .}}
-
+		<div id="page_body" class="page_body"></div>
-		<div id="page_content" class="page_content"></div>
-
-		{{template "page_bottom" .}}
 		{{template "analytics"}}
 	</body>
 </html>

res/template/user_buckets.html

@@ -8,14 +8,8 @@
 		<script defer src='/res/svelte/user_buckets.js?v{{.CacheID}}'></script>
 	</head>
 	<body>
-		{{template "page_top" .}}
+		{{template "menu" .}}
-
+		<div id="page_body" class="page_body"></div>
-		<header>
-			<h1>My Buckets</h1>
-		</header>
-		<div id="page_content" class="page_content"></div>
-
-		{{template "page_bottom" .}}
 		{{template "analytics"}}
 	</body>
 </html>

res/template/user_file_manager.html

@@ -11,7 +11,7 @@
 	</head>
 
 	<body>
-		{{template "page_menu" .}}
+		{{template "menu" .}}
 		<div id="page_body" class="page_body"></div>
 		{{template "analytics"}}
 	</body>

res/template/user_home.html

@@ -6,17 +6,15 @@
 		<script>
 		window.api_endpoint = '{{.APIEndpoint}}';
 		window.user = {{.User}};
+		window.server_hostname = "{{.Hostname}}";
 		</script>
 		<link rel='stylesheet' href='/res/svelte/user_home.css?v{{.CacheID}}'>
 		<script defer src='/res/svelte/user_home.js?v{{.CacheID}}'></script>
 	</head>
 
 	<body>
-		{{template "page_top" .}}
+		{{template "menu" .}}
-
+		<div id="page_body" class="page_body"></div>
-		<div id="page_content" class="page_content"></div>
-
-		{{template "page_bottom" .}}
 		{{template "analytics"}}
 	</body>
 </html>

res/template/user_logout.html

@@ -8,9 +8,13 @@
 		<header>
 			<h1>Logging out of your pixeldrain account</h1>
 		</header>
+		<div id="page_content" class="page_content">
 			<br/>
 			<form method="POST" action="/logout">
-			<input type="submit" value="I want to log out of pixeldrain on this computer" class="button_highlight"/>
+				<button role="submit" class="button_highlight">
+					<i class="icon">logout</i>
+					Log out of pixeldrain on this computer
+				</button>
 			</form>
 			<br/>
 			<section>
@@ -29,6 +33,7 @@
 					page visit we can confirm that you really want to log out.
 				</p>
 			</section>
+		</div>
 		{{template "page_bottom" .}}
 		{{template "analytics"}}
 	</body>

res/template/widgets.html

@@ -6,10 +6,10 @@
 	</head>
 	<body>
 		{{template "page_top" .}}
-
 		<header>
 			<h1>Widget showcase</h1>
 		</header>
+		<div id="page_content" class="page_content">
 			<section>
 				<h2>Size 2 header</h2>
 				<h3>Size 3 header</h3>
@@ -61,6 +61,7 @@
 				<br/><br/>
 				<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>
 			</section>
+		</div>
 		{{template "page_bottom" .}}
 	</body>
 </html>

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: {}
 });
 

svelte/src/admin_panel/Home.svelte

@@ -163,7 +163,7 @@ onDestroy(() => {
 <section>
 	<h3>Bandwidth usage and file views</h3>
 </section>
-<div class="highlight_shaded" style="margin-bottom: 6px;">
+<div class="highlight_border" style="margin-bottom: 6px;">
 	<button on:click={() => loadGraph(1440, 1, true)}>Day 1m</button>
 	<button on:click={() => loadGraph(10080, 10, true)}>Week 10m</button>
 	<button on:click={() => loadGraph(43200, 60, true)}>Month 1h</button>
@@ -174,7 +174,7 @@ onDestroy(() => {
 </div>
 <Chart bind:this={graphBandwidth} data_type="bytes" legend={false} />
 <Chart bind:this={graphViews} data_type="number" legend={false} />
-<div class="highlight_shaded">
+<div class="highlight_border">
 	Total usage from {start_time} to {end_time}<br/>
 	{formatDataVolume(total_bandwidth, 3)} bandwidth,
 	{formatDataVolume(total_bandwidth_paid, 3)} paid bandwidth,

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,6 +80,7 @@ onMount(() => {
 	</div>
 </header>
 
+<div id="page_content" class="page_content">
 	{#if page === "status"}
 		<Home></Home>
 	{:else if page === "block_files"}
@@ -92,3 +94,5 @@ onMount(() => {
 	{:else if page === "subscriptions"}
 		<Subscriptions></Subscriptions>
 	{/if}
+</div>
+<Footer/>

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")
 	}
 })
 

svelte/src/file_viewer/EditWindow.svelte

@@ -152,10 +152,10 @@ let delete_list = async e => {
 
 	{#if list.can_edit}
 		<h3>Edit album</h3>
-		<h4>Rename</h4>
+		Name:<br/>
 		<form on:submit={rename_list} style="display: flex;">
 			<input bind:value={list_name} type="text" style="flex: 1 1 auto"/>
-			<button type="submit" style="flex: 0 0 auto">
+			<button type="submit" style="flex: 0 0 auto" class="button_highlight">
 				<i class="icon">save</i> Save
 			</button>
 		</form>
@@ -171,10 +171,10 @@ let delete_list = async e => {
 
 	{#if file.can_edit}
 		<h3>Edit file</h3>
-		<h4>Rename</h4>
+		Name:<br/>
 		<form on:submit={rename_file} style="display: flex;">
 			<input bind:value={file_name} type="text" style="flex: 1 1 auto"/>
-			<button type="submit" style="flex: 0 0 auto">
+			<button type="submit" style="flex: 0 0 auto" class="button_highlight">
 				<i class="icon">save</i> Save
 			</button>
 		</form>

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);
+}
 </style>

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: {}
 });
 

svelte/src/home_page/HomePage.svelte

@@ -1,10 +1,12 @@
 <script>
+import Footer from "../layout/Footer.svelte";
 import FeatureTable from "./FeatureTable.svelte";
 import ForCreators from "./ForCreators.svelte";
 import OtherPlans from "./OtherPlans.svelte";
 import UploadWidget from "./UploadWidget.svelte";
-
 </script>
+
+<div id="page_content" class="page_content">
 	<header>
 		<div class="header_image_container"></div>
 	</header>
@@ -64,11 +66,13 @@ import UploadWidget from "./UploadWidget.svelte";
 	<ForCreators/>
 	<br/>
 	<br/>
+	<Footer></Footer>
+</div>
 
 <style>
 .header_image_container {
 	margin: auto;
-	height: 300px;
+	height: 200px;
 	width: 750px;
 	max-width: 100%;
 	background-image: url("/res/img/header_orbitron_wide.webp");
@@ -76,9 +80,8 @@ import UploadWidget from "./UploadWidget.svelte";
 	background-size: contain;
 	background-position: center;
 }
-@media (max-width: 700px) {
+@media (max-width: 600px) {
 	.header_image_container {
-		height: 250px;
 		background-image: url("/res/img/header_orbitron.webp");
 	}
 }

svelte/src/home_page/UploadProgressBar.svelte

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

svelte/src/home_page/UploadWidget.svelte

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

svelte/src/icons/Github.svelte

@@ -0,0 +1,6 @@
+<script>export let style;</script>
+
+<svg style={style} role="img" viewBox="0 0 24 24" width="24" height="24" xmlns="http://www.w3.org/2000/svg">
+	<title>GitHub</title>
+	<path fill="currentColor" d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/>
+</svg>

svelte/src/icons/Mastodon.svelte

@@ -0,0 +1,6 @@
+<script>export let style;</script>
+
+<svg style={style} xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 216.4144 232.00976">
+	<path fill="currentColor" d="M211.80734 139.0875c-3.18125 16.36625-28.4925 34.2775-57.5625 37.74875-15.15875 1.80875-30.08375 3.47125-45.99875 2.74125-26.0275-1.1925-46.565-6.2125-46.565-6.2125 0 2.53375.15625 4.94625.46875 7.2025 3.38375 25.68625 25.47 27.225 46.39125 27.9425 21.11625.7225 39.91875-5.20625 39.91875-5.20625l.8675 19.09s-14.77 7.93125-41.08125 9.39c-14.50875.7975-32.52375-.365-53.50625-5.91875C9.23234 213.82 1.40609 165.31125.20859 116.09125c-.365-14.61375-.14-28.39375-.14-39.91875 0-50.33 32.97625-65.0825 32.97625-65.0825C49.67234 3.45375 78.20359.2425 107.86484 0h.72875c29.66125.2425 58.21125 3.45375 74.8375 11.09 0 0 32.975 14.7525 32.975 65.0825 0 0 .41375 37.13375-4.59875 62.915"/>
+	<!-- <path fill="#000000" d="M177.50984 80.077v60.94125h-24.14375v-59.15c0-12.46875-5.24625-18.7975-15.74-18.7975-11.6025 0-17.4175 7.5075-17.4175 22.3525v32.37625H96.20734V85.42325c0-14.845-5.81625-22.3525-17.41875-22.3525-10.49375 0-15.74 6.32875-15.74 18.7975v59.15H38.90484V80.077c0-12.455 3.17125-22.3525 9.54125-29.675 6.56875-7.3225 15.17125-11.07625 25.85-11.07625 12.355 0 21.71125 4.74875 27.8975 14.2475l6.01375 10.08125 6.015-10.08125c6.185-9.49875 15.54125-14.2475 27.8975-14.2475 10.6775 0 19.28 3.75375 25.85 11.07625 6.36875 7.3225 9.54 17.22 9.54 29.675"/> -->
+</svg>

svelte/src/icons/Patreon.svelte

@@ -0,0 +1,8 @@
+<script>export let style;</script>
+
+<svg style={style} xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 100 100">
+	<g fill="currentColor" fill-rule="evenodd">
+		<path d="M64.1102,0.1004 C44.259,0.1004 28.1086,16.2486 28.1086,36.0986 C28.1086,55.8884 44.259,71.989 64.1102,71.989 C83.9,71.989 100,55.8884 100,36.0986 C100,16.2486 83.9,0.1004 64.1102,0.1004"/>
+		<polygon points=".012 95.988 17.59 95.988 17.59 .1 .012 .1"/>
+	</g>
+</svg>

svelte/src/layout/Footer.svelte

@@ -0,0 +1,48 @@
+<script>
+    import Github from "../icons/Github.svelte";
+    import Mastodon from "../icons/Mastodon.svelte";
+import Patreon from "../icons/Patreon.svelte";
+import Reddit from "../icons/Reddit.svelte";
+import Twitter from "../icons/Twitter.svelte";
+</script>
+
+<footer>
+	<div class="footer_content">
+		<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>
+		<div style="display: inline-block; margin: 0 8px 0 8px;">
+			(
+			<a href="https://www.patreon.com/pixeldrain" target="_blank">
+				<Patreon style="color: var(--body_text_color);"/> Patreon
+			</a> |
+			<a href="https://twitter.com/Fornax96" target="_blank">
+				<Twitter style="color: var(--body_text_color);"/> Twitter
+			</a> |
+			<a href="https://reddit.com/r/pixeldrain" target="_blank">
+				<Reddit style="color: var(--body_text_color);"/> Reddit
+			</a> |
+			<a href="https://github.com/Fornaxian" target="_blank">
+				<Github style="color: var(--body_text_color);"/> GitHub
+			</a> |
+			<a href="https://mastodon.social/web/@fornax" target="_blank">
+				<Mastodon style="color: var(--body_text_color);"/> Mastodon
+			</a>
+			)
+		</div>
+		<br/>
+		<span class="small_footer_text" style="font-size: .75em; line-height: .75em;">
+			page rendered by {window.server_hostname}
+		</span>
+	</div>
+</footer>
+
+<style>
+.footer_content {
+	background-color: var(--body_background);
+	color: var(--body_text_color);
+	display: inline-block;
+	border-radius: 8px;
+	margin: 160px 0 60px 0;
+}
+</style>

svelte/src/layout/Menu.svelte

@@ -0,0 +1,84 @@
+<script>
+let nav;
+
+export const toggle = () => {
+	var body = document.getElementById("page_body");
+	if (nav.offsetLeft === 0) {
+		// Menu is visible, hide it
+		nav.style.left = -nav.offsetWidth + "px";
+		body.style.marginLeft = "0";
+	} else {
+		// Menu is hidden, show it
+		nav.style.left = "0";
+		body.style.marginLeft = nav.offsetWidth + "px";
+	}
+}
+export const reset = () => {
+	nav.style.left = "";
+	document.getElementById("page_body").style.marginLeft = "";
+}
+</script>
+
+<button id="button_toggle_navigation" class="button_toggle_navigation" on:click={toggle}>☰</button>
+<nav bind:this={nav} id="page_navigation" class="page_navigation">
+	<a href="/#">Home</a>
+	<a href="/#prepaid">For Creators</a>
+	<hr />
+	{#if window.user !== ""}
+		<a href="/user">{window.user.username}</a>
+		<a href="/user/filemanager#files">My Files</a>
+		<a href="/user/filemanager#lists">My Albums</a>
+		{#if window.user.is_admin}
+			<a href="/user/buckets">Buckets</a>
+			<a href="/admin">Admin Panel</a>
+		{/if}
+		<a href="/logout">Log out</a>
+	{:else}
+		<a href="/login">Login</a>
+		<a href="/register">Register</a>
+		<a href="/history">Upload History</a>
+	{/if}
+	<hr />
+	<a href="/about">About</a>
+	<a href="/apps">Apps</a>
+	<a href="/appearance">Theme</a>
+	<a href="/api">API</a>
+	<a href="/acknowledgements">Acknowledgements</a>
+	<a href="https://stats.uptimerobot.com/p9v2ktzyjm" target="_blank">Server Status</a>
+</nav>
+
+<style>
+.button_toggle_navigation {
+	position: fixed;
+	backface-visibility: hidden;
+	z-index: 10;
+	top: 0;
+	left: 0;
+	padding: 10px 20px 15px 10px;
+	font-size: 2em;
+	margin: 0;
+	background: #3f3f3f;
+	background: var(--input_background);
+	border-radius: 0;
+	border-bottom-right-radius: 90%;
+}
+
+.button_toggle_navigation:active {
+	padding: 15px 15px 10px 15px;
+}
+
+.page_navigation {
+	position: fixed;
+	backface-visibility: hidden;
+	background: var(--navigation_background);
+	width: 17em;
+	height: 100%;
+	left: 0;
+	float: left;
+	padding: 20px 10px 10px 0;
+	overflow-y: auto;
+	overflow-x: hidden;
+	text-align: left;
+	transition: left 0.5s;
+}
+</style>

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: {}
 });
 

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,6 +44,10 @@ onMount(get_buckets);
 
 <LoadingIndicator loading={loading}/>
 
+<header>
+	<h1>My Buckets</h1>
+</header>
+<div id="page_content" class="page_content">
 	<section>
 		<div class="toolbar" style="text-align: right;">
 			<button
@@ -80,3 +85,5 @@ onMount(get_buckets);
 			<UserBucket bucket={bucket} on:refresh={get_buckets}></UserBucket>
 		{/each}
 	</section>
+</div>
+<Footer/>

svelte/src/user_home.js

@@ -1,7 +1,7 @@
 import App from './user_home/Router.svelte';
 
 const app = new App({
-	target: document.getElementById("page_content"),
+	target: document.getElementById("page_body"),
 	props: {}
 });
 

svelte/src/user_home/APIKeys.svelte

@@ -157,6 +157,7 @@ const logout = async (key) => {
 			</tr>
 		{/each}
 	</table>
+	<br/>
 </div>
 
 <style>

svelte/src/user_home/AccountSettings.svelte

@@ -142,26 +142,26 @@ let delete_account = {
 </script>
 
 <section>
-	<h2>Account settings</h2>
+	<br/>
-	<div class="highlight_shaded">
+	<div class="highlight_border">
 		<h3>Change password</h3>
 		<Form config={password_change}></Form>
 	</div>
 	<br/>
 
-	<div class="highlight_shaded">
+	<div class="highlight_border">
 		<h3>Change e-mail address</h3>
 		<Form config={email_change}></Form>
 	</div>
 	<br/>
 
-	<div class="highlight_shaded">
+	<div class="highlight_border">
 		<h3>Change name</h3>
 		<Form config={name_change}></Form>
 	</div>
 	<br/>
 
-	<div class="highlight_shaded">
+	<div class="highlight_border">
 		<h3>Delete account</h3>
 		<Form config={delete_account}></Form>
 	</div>

svelte/src/user_home/Home.svelte

@@ -280,7 +280,7 @@ onDestroy(() => {
 		the timeframe.
 	</p>
 
-	<div class="highlight_shaded">
+	<div class="highlight_border">
 		<button
 			on:click={() => update_graphs(1440, 1, true)}
 			class:button_highlight={graph_timespan == 1440}>
@@ -335,7 +335,7 @@ onDestroy(() => {
 <Chart bind:this={graph_bandwidth} data_type="bytes"/>
 
 <section>
-	<div class="highlight_shaded">
+	<div class="highlight_border">
 		Total usage from {time_start} to {time_end}<br/>
 		{formatDataVolume(total_bandwidth, 3)} bandwidth,
 		{formatDataVolume(total_transfer_paid, 3)} paid transfers
@@ -356,7 +356,7 @@ onDestroy(() => {
 <Chart bind:this={graph_views_downloads} data_type="number"/>
 
 <section>
-	<div class="highlight_shaded">
+	<div class="highlight_border">
 		Total usage from {time_start} to {time_end}<br/>
 		{formatThousands(total_views)} views and
 		{formatThousands(total_downloads)} downloads

svelte/src/user_home/Router.svelte

@@ -8,6 +8,7 @@ import Subscription from "./Subscription.svelte";
 import ConnectApp from "./ConnectApp.svelte";
 import ActivityLog from "./ActivityLog.svelte";
 import SharingSettings from "./SharingSettings.svelte";
+import Footer from "../layout/Footer.svelte";
 
 let page = ""
 
@@ -99,8 +100,7 @@ onMount(() => {
 		{/if}
 	</div>
 </header>
-<br/>
+<div id="page_content" class="page_content">
-
 	{#if page === "home"}
 		<Home/>
 	{:else if page === "settings"}
@@ -118,3 +118,5 @@ onMount(() => {
 	{:else if page === "subscription"}
 		<Subscription/>
 	{/if}
+</div>
+<Footer/>

svelte/src/util/Modal.svelte

@@ -52,7 +52,7 @@ const keydown = e => {
 		<div class="header">
 			<slot name="title">
 				<div class="title">{title}</div>
-				<button class="button button_red round" on:click={hide}>
+				<button class="button round" on:click={hide}>
 					<i class="icon">close</i>
 				</button>
 			</slot>

webcontroller/style.go

@@ -118,7 +118,6 @@ type styleSheet struct {
 	Background        CSS
 	BackgroundText    HSL
 	BackgroundPattern CSS
-	ParallaxSlider    CSS
 	Navigation        CSS
 	BodyColor         HSL
 	BodyBackground    CSS
@@ -157,7 +156,6 @@ func (s styleSheet) withDefaults() styleSheet {
 	defaultCSS(&s.HighlightBackground, s.Highlight)
 	defaultCSS(&s.Background, s.BackgroundColor)
 	defaultCSS(&s.BackgroundPattern, s.BackgroundColor)
-	defaultCSS(&s.ParallaxSlider, s.BackgroundColor)
 	defaultCSS(&s.Navigation, RawCSS("none"))
 	defaultCSS(&s.BodyBackground, s.BodyColor)
 	defaultHSL(&s.BackgroundText, s.BodyText)
@@ -188,7 +186,6 @@ func (s styleSheet) withHue(hue int) styleSheet {
 	s.Background = setHue(s.Background)
 	s.BackgroundText.Hue = hue
 	s.BackgroundPattern = setHue(s.BackgroundPattern)
-	s.ParallaxSlider = setHue(s.ParallaxSlider)
 	s.Navigation = setHue(s.Navigation)
 	s.BodyColor.Hue = hue
 	s.BodyBackground = setHue(s.BodyBackground)
@@ -223,7 +220,6 @@ func (s styleSheet) String() string {
 	--background_text_color:    %s;
 	--background_pattern:       url("%s");
 	--background_pattern_color: %s;
-	--parallax_slider_color:    %s;
 	--navigation_background:    %s;
 	--body_color:               %s;
 	--body_background:          %s;
@@ -255,7 +251,6 @@ func (s styleSheet) String() string {
 		s.BackgroundText.CSS(),
 		BackgroundTiles(),
 		s.BackgroundPattern.CSS(),
-		s.ParallaxSlider.CSS(),
 		s.Navigation.CSS(),
 		s.BodyColor.CSS(),
 		s.BodyBackground.CSS(),
@@ -301,7 +296,6 @@ func BackgroundTiles() template.URL {
 	} else if month == time.December && (day == 25 || day == 26 || day == 27) {
 		file = "checker_christmas"
 	} else {
-		// file = "checker_ukraine"
 		file = fmt.Sprintf("checker%d", now.UnixNano()%18)
 	}
 
@@ -311,8 +305,8 @@ func BackgroundTiles() template.URL {
 // Following are all the available styles
 
 var purpleDrainStyle = styleSheet{
-	Input:               HSL{266, .85, .24},
+	Input:               HSL{266, .85, .26},
-	InputHover:          HSL{266, .85, .28},
+	InputHover:          HSL{266, .85, .30},
 	InputText:           HSL{0, 0, .9},
 	InputDisabledText:   HSL{266, .85, .4},
 	HighlightBackground: NewGradient(150, HSL{150, .84, .39}, HSL{85, .85, .35}),
@@ -322,13 +316,12 @@ var purpleDrainStyle = styleSheet{
 	ScrollbarForeground: HSL{266, .85, .40},
 	ScrollbarHover:      HSL{266, .85, .50},
 
-	BackgroundColor:   HSL{273, .93, .12},
+	BackgroundColor:   HSL{260, .90, .12},
-	Background:        NewGradient(120, HSL{250, .9, .14}, HSL{300, .9, .10}),
+	Background:        NewGradient(120, HSL{250, .84, .18}, HSL{300, .9, .16}),
 	BackgroundPattern: RawCSS("none"),
-	ParallaxSlider:    HSL{275, .8, .1},
+	Navigation:        RawCSS("none"),
-	Navigation:        RGBA{0, 0, 0, 0.1},
 	BodyColor:         HSL{274, .9, .14},
-	BodyBackground:    RawCSS("none"),
+	BodyBackground:    RGBA{255, 255, 255, 0.02},
 	BodyText:          HSL{0, 0, .8},
 	CardColor:         HSL{275, .8, .18},
 
@@ -430,44 +423,58 @@ var skeuosPixeldrainStyle = styleSheet{
 	Shadow: HSL{0, 0, 0},
 }
 
-var nordDarkStyle = styleSheet{
+var (
-	Input:               HSL{220, .16, .36}, // nord3
+	nord0  = HSL{220, .16, .22} // Dark
-	InputHover:          HSL{220, .16, .40},
+	nord1  = HSL{222, .16, .28} // Dark
-	InputText:           HSL{218, .27, .92}, // nord5 hsl(218, 27%, 92%)
+	nord2  = HSL{220, .17, .32} // Dark
-	InputDisabledText:   HSL{220, .16, .22}, // nord0 hsl(220, 16%, 22%)
+	nord3  = HSL{220, .16, .36} // Light
-	Highlight:           HSL{92, .28, .65},  // nord14 hsl(92, 28%, 65%)
+	nord4  = HSL{219, .28, .88} // Light
-	HighlightText:       HSL{220, .16, .22}, // nord0
+	nord5  = HSL{218, .27, .92} // Light
-	Danger:              HSL{354, .42, .56}, // nord11 hsl(354, 42%, 56%)
+	nord6  = HSL{218, .27, .94} // Light
-	ScrollbarForeground: HSL{179, .25, .65}, // nord7 hsl(179, 25%, 65%)
+	nord7  = HSL{179, .25, .65} // Teal
-	ScrollbarHover:      HSL{193, .43, .67}, // nord8 hsl(193, 43%, 67%)
+	nord8  = HSL{193, .43, .67} // Light blue
+	nord11 = HSL{354, .42, .56} // Red
+	nord14 = HSL{92, .28, .65}  // Green
+)
 
-	BackgroundColor: HSL{220, .16, .22}, // nord0
+var nordDarkStyle = styleSheet{
-	BodyColor:       HSL{222, .16, .28}, // nord1
+	Input:               nord3.Add(0, 0, 0.01),
-	BodyText:        HSL{219, .28, .88}, // nord4 hsl(219, 28%, 88%)
+	InputHover:          nord3.Add(0, 0, 0.03),
-	CardColor:       HSL{220, .17, .32}, // nord2
+	InputText:           nord5,
+	InputDisabledText:   nord0,
+	Highlight:           nord14,
+	HighlightText:       nord0,
+	Danger:              nord11,
+	ScrollbarForeground: nord7,
+	ScrollbarHover:      nord8,
+
+	BackgroundColor: nord0,
+	BodyColor:       nord1,
+	BodyText:        nord4,
+	CardColor:       nord2,
 
 	Shadow: HSL{0, 0, 0},
 }
 
 var nordLightStyle = styleSheet{
 	Link:                HSL{92, .40, .32},
-	Input:               HSL{218, .27, .94}, // nord6 hsl(218, 27%, 94%)
+	Input:               nord4.Add(0, 0, -0.04),
-	InputHover:          HSL{218, .27, .98},
+	InputHover:          nord4.Add(0, 0, -0.06),
-	InputText:           HSL{222, .16, .28}, // nord1 hsl(222, 16%, 28%)
+	InputText:           nord0,
-	InputDisabledText:   HSL{219, .28, .88}, // nord4 hsl(219, 28%, 88%)
+	InputDisabledText:   nord6,
-	Highlight:           HSL{92, .28, .65},  // nord14 hsl(92, 28%, 65%)
+	Highlight:           nord14,
-	HighlightText:       HSL{222, .16, .28}, // nord3 hsl(220, 16%, 36%)
+	HighlightText:       nord1,
-	Danger:              HSL{354, .42, .56}, // nord11 hsl(354, 42%, 56%)
+	Danger:              nord11,
-	ScrollbarForeground: HSL{179, .25, .65}, // nord7 hsl(179, 25%, 65%)
+	ScrollbarForeground: nord7,
-	ScrollbarHover:      HSL{193, .43, .67}, // nord8 hsl(193, 43%, 67%)
+	ScrollbarHover:      nord8,
 
-	BackgroundColor:   HSL{220, .16, .36}, // nord3 hsl(220, 16%, 36%)
+	BackgroundColor:   nord4,
-	BackgroundText:    HSL{219, .28, .88}, // nord4 hsl(219, 28%, 88%)
+	BackgroundText:    nord0,
-	ParallaxSlider:    HSL{220, .16, .22}, // nord0 hsl(220, 16%, 22%)
+	BodyColor:         nord6,
-	BodyColor:         HSL{219, .28, .88}, // nord4 hsl(219, 28%, 88%)
+	BodyText:          nord2,
-	BodyText:          HSL{220, .17, .32}, // nord2 hsl(220, 17%, 32%)
+	Separator:         nord4,
-	BackgroundPattern: HSL{219, .28, .88}, // hsl(219, 28%, 88%)
+	BackgroundPattern: nord4,
-	CardColor:         HSL{218, .27, .92}, // nord5 hsl(218, 27%, 92%)
+	CardColor:         nord5,
 
 	Shadow: HSL{220, .16, .36},
 }
@@ -541,18 +548,20 @@ var solarizedDarkStyle = styleSheet{
 }
 
 var solarizedLightStyle = styleSheet{
-	Input:             HSL{46, .42, .84}, //hsl(180, 7%, 60%)
+	Input:             HSL{46, .42, .84},
-	InputHover:        HSL{46, .42, .88},
+	InputHover:        HSL{46, .42, .82},
 	InputText:         HSL{194, .14, .20}, // hsl(192, 81%, 14%)
-	InputDisabledText: HSL{194, .14, .80},
+	InputDisabledText: HSL{44, .87, .94},
 	Highlight:         HSL{68, 1, .30}, // hsl(68, 100%, 30%)
 	HighlightText:     HSL{44, .87, .94},
 	Danger:            HSL{1, .71, .52}, // hsl(1, 71%, 52%)
 
 	BackgroundColor: HSL{46, .42, .88}, // hsl(46, 42%, 88%)
+	BackgroundText:  HSL{192, .81, .14},
 	BodyColor:       HSL{44, .87, .94},  // hsl(44, 87%, 94%)
 	BodyText:        HSL{194, .14, .40}, // hsl(194, 14%, 40%)
-	CardColor:       HSL{44, .87, .96},
+	Separator:       HSL{46, .42, .88},
+	CardColor:       HSL{44, .87, .92},
 
 	Shadow: HSL{0, 0, 0.36},
 }

webcontroller/user_account.go

@@ -130,7 +130,6 @@ func (wc *WebController) registerForm(td *TemplateData, r *http.Request) (f Form
 			},
 		},
 		SubmitLabel: "Register",
-		PostFormHTML: template.HTML("<p>Welcome to the club!</p>"),
 	}
 
 	if f.ReadInput(r) {