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,20 +9,22 @@
 		<header>
 			<h1>This page does not exist!</h1>
 		</header>
-		<section>
+		<div id="page_content" class="page_content">
-			<p>
+			<section>
-				If you came here by a link from this very same website you can
+				<p>
-				tell me about it on
+					If you came here by a link from this very same website you can
-				<a href="https://twitter.com/Fornax96">twitter</a>.
+					tell me about it on
-			</p>
+					<a href="https://twitter.com/Fornax96">twitter</a>.
-			<p>
+				</p>
-				Either way, there's nothing to see here, so you'll have to
+				<p>
-				<a href='/'>head over to the home page</a>.
+					Either way, there's nothing to see here, so you'll have to
-			</p>
+					<a href='/'>head over to the home page</a>.
-			<p>
+				</p>
-				Bye!
+				<p>
-			</p>
+					Bye!
-		</section>
+				</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>
-		<section>
+		<div id="page_content" class="page_content">
-			<p>
+			<section>
-				Hello. This file has received an abuse report and has been taken
+				<p>
-				down. It cannot be shared anymore.
+					Hello. This file has received an abuse report and has been taken
-			</p>
+					down. It cannot be shared anymore.
-		</section>
+				</p>
+			</section>
+		</div>
 		{{template "page_bottom" .}}
 		{{template "analytics"}}
 	</body>

res/template/500.html

@@ -9,21 +9,23 @@
 		<header>
 			<h1>You broke pixeldrain</h1>
 		</header>
-		<section>
+		<div id="page_content" class="page_content">
-			<p>
+			<section>
-				Great job.
+				<p>
-			</p>
+					Great job.
-			<p>
+				</p>
-				Just kidding, something went wrong on the pixeldrain server and
+				<p>
-				it's my fault. This can happen when the website is overloaded,
+					Just kidding, something went wrong on the pixeldrain server and
-				there is a problem with the software or there is a hardware
+					it's my fault. This can happen when the website is overloaded,
-				problem. When there is a large scale outage you can usually find
+					there is a problem with the software or there is a hardware
-				more info on my twitter <a
+					problem. When there is a large scale outage you can usually find
-				href="https://twitter.com/Fornax96"></a>@Fornax96</a>. You can
+					more info on my twitter <a
-				try again in a few minutes (or hours), or go back to the <a
+					href="https://twitter.com/Fornax96"></a>@Fornax96</a>. You can
-				href='/'>home page</a> and start over.
+					try again in a few minutes (or hours), or go back to the <a
-			</p>
+					href='/'>home page</a> and start over.
-		</section>
+				</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,70 +10,72 @@
 		<header>
 			<h1>Change website appearance</h1>
 		</header>
-		<section>
+		<div id="page_content" class="page_content">
-			<p>
+			<section>
-				You can change how pixeldrain looks! Your theme choice will
+				<p>
-				be saved in a cookie.
+					You can change how pixeldrain looks! Your theme choice will
-			</p>
+					be saved in a cookie.
-			<h2>Theme</h2>
+				</p>
-			<input type="radio" id="style_nord" name="style"><label for="style_nord">Nord</label>
+				<h2>Theme</h2>
-			(Inspired by <a href="https://www.nordtheme.com/" target="_blank">Nord</a>)
+				<input type="radio" id="style_nord" name="style"><label for="style_nord">Nord</label>
-			<br/>
+				(Inspired by <a href="https://www.nordtheme.com/" target="_blank">Nord</a>)
-			Dynamic theme, changes based on operating system settings. Here you can choose a specific variant:
+				<br/>
-			<br/>
+				Dynamic theme, changes based on operating system settings. Here you can choose a specific variant:
-			<input type="radio" id="style_nord_dark" name="style"><label for="style_nord_dark">Nord dark</label>
+				<br/>
-			<br/>
+				<input type="radio" id="style_nord_dark" name="style"><label for="style_nord_dark">Nord dark</label>
-			<input type="radio" id="style_nord_light" name="style"><label for="style_nord_light">Nord light</label>
+				<br/>
-			<br/>
+				<input type="radio" id="style_nord_light" name="style"><label for="style_nord_light">Nord light</label>
-			<br/>
+				<br/>
-			<input type="radio" id="style_solarized" name="style"><label for="style_solarized">Solarized</label>
+				<br/>
-			(Inspired by <a href="https://ethanschoonover.com/solarized/" target="_blank">Solarized</a>)
+				<input type="radio" id="style_solarized" name="style"><label for="style_solarized">Solarized</label>
-			<br/>
+				(Inspired by <a href="https://ethanschoonover.com/solarized/" target="_blank">Solarized</a>)
-			Dynamic theme, changes based on operating system settings. Here you can choose a specific variant:
+				<br/>
-			<br/>
+				Dynamic theme, changes based on operating system settings. Here you can choose a specific variant:
-			<input type="radio" id="style_solarized_dark" name="style"><label for="style_solarized_dark">Solarized dark</label>
+				<br/>
-			<br/>
+				<input type="radio" id="style_solarized_dark" name="style"><label for="style_solarized_dark">Solarized dark</label>
-			<input type="radio" id="style_solarized_light" name="style"><label for="style_solarized_light">Solarized light</label>
+				<br/>
-			<br/>
+				<input type="radio" id="style_solarized_light" name="style"><label for="style_solarized_light">Solarized light</label>
-			<!-- <br/> -->
+				<br/>
-			<!-- <input type="radio" id="style_adwaita" name="style"><label for="style_adwaita">Adwaita</label><br/> -->
+				<!-- <br/> -->
-			<br/>
+				<!-- <input type="radio" id="style_adwaita" name="style"><label for="style_adwaita">Adwaita</label><br/> -->
-			<input type="radio" id="style_purple_drain" name="style"><label for="style_purple_drain">Purple drain</label>
+				<br/>
-			<br/>
+				<input type="radio" id="style_purple_drain" name="style"><label for="style_purple_drain">Purple drain</label>
-			Classic 2022 style, with purple gradients
+				<br/>
-			<br/>
+				Classic 2022 style, with purple gradients
-			<br/>
+				<br/>
-			<input type="radio" id="style_classic" name="style"><label for="style_classic">Pixeldrain classic (gray)</label>
+				<br/>
-			<br/>
+				<input type="radio" id="style_classic" name="style"><label for="style_classic">Pixeldrain classic (gray)</label>
-			Classic pre-2020 pixeldrain style, dark gray
+				<br/>
-			<br/>
+				Classic pre-2020 pixeldrain style, dark gray
-			<br/>
+				<br/>
-			Other (experimental) themes
+				<br/>
-			<br/>
+				Other (experimental) themes
-			<input type="radio" id="style_maroon" name="style"><label for="style_maroon">Maroon Style</label>
+				<br/>
-			<br/>
+				<input type="radio" id="style_maroon" name="style"><label for="style_maroon">Maroon Style</label>
-			<input type="radio" id="style_hacker" name="style"><label for="style_hacker">Hacker Style</label>
+				<br/>
-			<br/>
+				<input type="radio" id="style_hacker" name="style"><label for="style_hacker">Hacker Style</label>
-			<input type="radio" id="style_canta" name="style"><label for="style_canta">Canta Style</label>
+				<br/>
-			(Inspired by <a href="https://github.com/vinceliuice/Canta-theme" target="_blank">Canta GTK</a>)
+				<input type="radio" id="style_canta" name="style"><label for="style_canta">Canta Style</label>
-			<br/>
+				(Inspired by <a href="https://github.com/vinceliuice/Canta-theme" target="_blank">Canta GTK</a>)
-			<input type="radio" id="style_skeuos" name="style"><label for="style_skeuos">Skeuos Style</label>
+				<br/>
-			(Inspired by <a href="https://www.gnome-look.org/p/1441725/" target="_blank">Skeuos GTK</a>)
+				<input type="radio" id="style_skeuos" name="style"><label for="style_skeuos">Skeuos Style</label>
-			<br/>
+				(Inspired by <a href="https://www.gnome-look.org/p/1441725/" target="_blank">Skeuos GTK</a>)
-			<input type="radio" id="style_sweet" name="style"><label for="style_sweet">Sweet</label>
+				<br/>
+				<input type="radio" id="style_sweet" name="style"><label for="style_sweet">Sweet</label>
 
-			<h2>Hue</h2>
+				<h2>Hue</h2>
-			<p>
+				<p>
-				Many themes support custom hues. The hue does not change the
+					Many themes support custom hues. The hue does not change the
-				contrast of the theme, only the color itself.
+					contrast of the theme, only the color itself.
-			</p>
+				</p>
-			<input type="radio" id="hue_default" name="hue"><label for="hue_default">Default</label><br/>
+				<input type="radio" id="hue_default" name="hue"><label for="hue_default">Default</label><br/>
-			<input type="radio" id="hue_354" name="hue"><label for="hue_354">Red</label><br/>
+				<input type="radio" id="hue_354" name="hue"><label for="hue_354">Red</label><br/>
-			<input type="radio" id="hue_14" name="hue"><label for="hue_14">Orange</label><br/>
+				<input type="radio" id="hue_14" name="hue"><label for="hue_14">Orange</label><br/>
-			<input type="radio" id="hue_40" name="hue"><label for="hue_40">Yellow</label><br/>
+				<input type="radio" id="hue_40" name="hue"><label for="hue_40">Yellow</label><br/>
-			<input type="radio" id="hue_92" name="hue"><label for="hue_92">Green</label><br/>
+				<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/>
+				<input type="radio" id="hue_311" name="hue"><label for="hue_311">Purple</label><br/>
-		</section>
+			</section>
+		</div>
 
 		<script>
 		function get_cookie(cname) {

res/template/apps.html

@@ -16,117 +16,119 @@
 		<header>
 			<h1>Apps</h1>
 		</header>
-		<section>
+		<div id="page_content" class="page_content">
-			<h2>ShareX</h2>
+			<section>
-			<div class="specs">
+				<h2>ShareX</h2>
-				Platform: Windows 7, 8.1 and 10 |
+				<div class="specs">
-				License: GPL-3.0 |
+					Platform: Windows 7, 8.1 and 10 |
-				<a href="https://getsharex.com" target="_blank">Website</a> |
+					License: GPL-3.0 |
-				<a href="https://github.com/ShareX/ShareX" target="_blank">GitHub</a>
+					<a href="https://getsharex.com" target="_blank">Website</a> |
-			</div>
+					<a href="https://github.com/ShareX/ShareX" target="_blank">GitHub</a>
-			<p>
+				</div>
-				<img src="/res/img/sharex.png" style="float: right; height: 6em; margin: 0.5em;" />
+				<p>
-			</p>
+					<img src="/res/img/sharex.png" style="float: right; height: 6em; margin: 0.5em;" />
-			<p>
+				</p>
-				ShareX is a Screen capture, file sharing and productivity tool.
+				<p>
-				Pixeldrain is supported as a custom uploader. You can <a
+					ShareX is a Screen capture, file sharing and productivity tool.
-				href="https://getsharex.com/" target="_blank">get ShareX
+					Pixeldrain is supported as a custom uploader. You can <a
-				here</a>.
+					href="https://getsharex.com/" target="_blank">get ShareX
-			</p>
+					here</a>.
-			<p>
+				</p>
-				Here you can download our custom ShareX uploader which uses
+				<p>
-				pixeldrain to upload your files.
+					Here you can download our custom ShareX uploader which uses
-			</p>
+					pixeldrain to upload your files.
+				</p>
 
-			<div class="highlight_shaded" style="clear: right;">
+				<div class="highlight_shaded" style="clear: right;">
-				<a href="/misc/sharex/pixeldrain.com.sxcu" class="button button_highlight">
+					<a href="/misc/sharex/pixeldrain.com.sxcu" class="button button_highlight">
-					<i class="icon small">save</i>
+						<i class="icon small">save</i>
-					Download ShareX Uploader
+						Download ShareX Uploader
-				</a><br/>
+					</a><br/>
 
-				{{if .Authenticated}}
+					{{if .Authenticated}}
-				This uploader is configured to upload files to your personal
+					This uploader is configured to upload files to your personal
-				pixeldrain account. Do not share the configuration file with
+					pixeldrain account. Do not share the configuration file with
-				anyone, it contains your account credentials.
+					anyone, it contains your account credentials.
-				{{else}}
+					{{else}}
-				<a href="/login">Log in</a> to use ShareX with your own
+					<a href="/login">Log in</a> to use ShareX with your own
-				pixeldrain account. {{end}}
+					pixeldrain account. {{end}}
-			</div>
+				</div>
 
-			<h3>Setting pixeldrain as default uploader</h3>
+				<h3>Setting pixeldrain as default uploader</h3>
-			<p>
+				<p>
-				Download the uploader config and choose 'Open file'<br/>
+					Download the uploader config and choose 'Open file'<br/>
-				<img src="/res/img/sharex_download.png" style="max-width: 100%;" /><br/>
+					<img src="/res/img/sharex_download.png" style="max-width: 100%;" /><br/>
-				Set pixeldrain.com as active uploader. Choose Yes<br/>
+					Set pixeldrain.com as active uploader. Choose Yes<br/>
-				<img src="/res/img/sharex_default.png" style="max-width: 100%;" /><br/>
+					<img src="/res/img/sharex_default.png" style="max-width: 100%;" /><br/>
-			</p>
+				</p>
 
-			<h2>Pixeldrain Android</h2>
+				<h2>Pixeldrain Android</h2>
-			<div class="specs">
+				<div class="specs">
-				Platform: Android |
+					Platform: Android |
-				License: None |
+					License: None |
-				<a href="https://github.com/wimvdputten/Pixeldrain_android" target="_blank">GitHub</a>
+					<a href="https://github.com/wimvdputten/Pixeldrain_android" target="_blank">GitHub</a>
-			</div>
+				</div>
-			<p>
+				<p>
-				An Android app for uploading and sharing files on pixeldrain.
+					An Android app for uploading and sharing files on pixeldrain.
-				You can get a compiled APK package from the <a
+					You can get a compiled APK package from the <a
-				href="https://github.com/wimvdputten/Pixeldrain_android/releases"
+					href="https://github.com/wimvdputten/Pixeldrain_android/releases"
-				target="_blank">GitHub releases page</a>.
+					target="_blank">GitHub releases page</a>.
-			</p>
+				</p>
 
-			<h2>go-pd</h2>
+				<h2>go-pd</h2>
-			<div class="specs">
+				<div class="specs">
-				Platform: Linux, Mac OS, Windows (CLI) |
+					Platform: Linux, Mac OS, Windows (CLI) |
-				License: MIT |
+					License: MIT |
-				<a href="https://github.com/ManuelReschke/go-pd" target="_blank">GitHub</a>
+					<a href="https://github.com/ManuelReschke/go-pd" target="_blank">GitHub</a>
-			</div>
+				</div>
-			<p>
+				<p>
-				go-pd is a command line interface and client library for
+					go-pd is a command line interface and client library for
-				pixeldrain created by Manuel Reschke. The CLI supports uploading
+					pixeldrain created by Manuel Reschke. The CLI supports uploading
-				files anonymously, and uploading to user accounts. The client
+					files anonymously, and uploading to user accounts. The client
-				library supports uploading, downloading and deleting files,
+					library supports uploading, downloading and deleting files,
-				creating and viewing lists and user accounts. Compiled binaries
+					creating and viewing lists and user accounts. Compiled binaries
-				are available on the <a
+					are available on the <a
-				href="https://github.com/ManuelReschke/go-pd/releases"
+					href="https://github.com/ManuelReschke/go-pd/releases"
-				target="_blank">GitHub releases page</a>.
+					target="_blank">GitHub releases page</a>.
-			</p>
+				</p>
 
-			<h2>go-pixeldrain</h2>
+				<h2>go-pixeldrain</h2>
-			<div class="specs">
+				<div class="specs">
-				Platform: Linux, Mac OS, Windows (CLI) |
+					Platform: Linux, Mac OS, Windows (CLI) |
-				License: MIT |
+					License: MIT |
-				<a href="https://jkawamoto.github.io/go-pixeldrain/" target="_blank">Website</a> |
+					<a href="https://jkawamoto.github.io/go-pixeldrain/" target="_blank">Website</a> |
-				<a href="https://github.com/jkawamoto/go-pixeldrain" target="_blank">GitHub</a>
+					<a href="https://github.com/jkawamoto/go-pixeldrain" target="_blank">GitHub</a>
-			</div>
+				</div>
-			<p>
+				<p>
-				go-pixeldrain is a command line interface for pixeldrain created
+					go-pixeldrain is a command line interface for pixeldrain created
-				by Junpei Kawamoto. You can use it to upload and download files
+					by Junpei Kawamoto. You can use it to upload and download files
-				and directories from your terminal. Compiled binaries are
+					and directories from your terminal. Compiled binaries are
-				available on the <a
+					available on the <a
-				href="https://github.com/jkawamoto/go-pixeldrain/releases"
+					href="https://github.com/jkawamoto/go-pixeldrain/releases"
-				target="_blank">GitHub releases page</a>.
+					target="_blank">GitHub releases page</a>.
-			</p>
+				</p>
 
-			<h2>pdup</h2>
+				<h2>pdup</h2>
-			<div class="specs">
+				<div class="specs">
-				Platform: Linux, BSD, Mac OS (CLI) |
+					Platform: Linux, BSD, Mac OS (CLI) |
-				License: None |
+					License: None |
-				<a href="https://github.com/Fornax96/pdup" target="_blank">GitHub</a>
+					<a href="https://github.com/Fornax96/pdup" target="_blank">GitHub</a>
-			</div>
+				</div>
-			<p>
+				<p>
-				pdup is a little bash script for uploading files to pixeldrain
+					pdup is a little bash script for uploading files to pixeldrain
-				from the terminal. It's available <a
+					from the terminal. It's available <a
-				href="https://github.com/Fornax96/pdup" target="_blank">from
+					href="https://github.com/Fornax96/pdup" target="_blank">from
-				GitHub</a>.
+					GitHub</a>.
-			</p>
+				</p>
 
-			<h2>More apps</h2>
+				<h2>More apps</h2>
-			<p>
+				<p>
-				If you know more open source apps which work with pixeldrain
+					If you know more open source apps which work with pixeldrain
-				please send them to
+					please send them to
-				<a href="mailto:support@pixeldrain.com">support@pixeldrain.com</a>.
+					<a href="mailto:support@pixeldrain.com">support@pixeldrain.com</a>.
-			</p>
+				</p>
-		</section>
+			</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,32 +10,38 @@
 			<header>
 				<h1>Success!</h1>
 			</header>
-			<section>
+			<div id="page_content" class="page_content">
-				<p>
+				<section>
-					Your account's e-mail address has been updated.
+					<p>
-				</p>
+						Your account's e-mail address has been updated.
-			</section>
+					</p>
+				</section>
+			</div>
 		{{else if eq .Other "not_found"}}
 			<header>
 				<h1>E-mail change failed</h1>
 			</header>
-			<section>
+			<div id="page_content" class="page_content">
-				<p>
+				<section>
-					This e-mail change request does not exist or has expired.
+					<p>
-					Please try again if you still want to change your e-mail
+						This e-mail change request does not exist or has expired.
-					address.
+						Please try again if you still want to change your e-mail
-				</p>
+						address.
-			</section>
+					</p>
+				</section>
+			</div>
 		{{else}}
 			<header>
 				<h1>Error</h1>
 			</header>
-			<section>
+			<div id="page_content" class="page_content">
-				<p>
+				<section>
-					Something went wrong while processing this request. Please
+					<p>
-					try again later.
+						Something went wrong while processing this request. Please
-				</p>
+						try again later.
-			</section>
+					</p>
+				</section>
+			</div>
 		{{end}}
 
 		{{template "page_bottom" .}}

res/template/file_not_found.html

@@ -9,23 +9,25 @@
 		<header>
 			<h1>404, File Not Found!</h1>
 		</header>
-		<section>
+		<div id="page_content" class="page_content">
-			<p>
+			<section>
-				This file does not exist, or it has been removed. Possible
+				<p>
-				reasons for this are:
+					This file does not exist, or it has been removed. Possible
-			</p>
+					reasons for this are:
-			<ul>
+				</p>
-				<li>
+				<ul>
-					The file has not been viewed for 60 days and has expired
+					<li>
-				</li>
+						The file has not been viewed for 60 days and has expired
-				<li>
+					</li>
-					The person who uploaded the file has deleted it
+					<li>
-				</li>
+						The person who uploaded the file has deleted it
-			</ul>
+					</li>
-			<p>
+				</ul>
-				I'm sorry for the inconvenience.
+				<p>
-			</p>
+					I'm sorry for the inconvenience.
-		</section>
+				</p>
+			</section>
+		</div>
 		{{template "page_bottom" .}}
 		{{template "analytics"}}
 	</body>
@@ -42,24 +44,26 @@
 		<header>
 			<h1>404, List Not Found!</h1>
 		</header>
-		<section>
+		<div id="page_content" class="page_content">
-			<p>
+			<section>
-				This list does not exist, or it has been removed. Possible
+				<p>
-				reasons for this are:
+					This list does not exist, or it has been removed. Possible
-			</p>
+					reasons for this are:
-			<ul>
+				</p>
-				<li>
+				<ul>
-					All files in this list have not been viewed for 60 days and
+					<li>
-					have expired
+						All files in this list have not been viewed for 60 days and
-				</li>
+						have expired
-				<li>
+					</li>
-					The person who created the list has deleted it
+					<li>
-				</li>
+						The person who created the list has deleted it
-			</ul>
+					</li>
-			<p>
+				</ul>
-				I'm sorry for the inconvenience.
+				<p>
-			</p>
+					I'm sorry for the inconvenience.
-		</section>
+				</p>
+			</section>
+		</div>
 		{{template "page_bottom" .}}
 		{{template "analytics"}}
 	</body>

res/template/file_viewer_compat.html

@@ -30,45 +30,47 @@
 		<header>
 			<h1>{{.Title}}</h1>
 		</header>
-		<section>
+		<div id="page_content" class="page_content">
-			{{if eq .Other.Type "file"}}
+			<section>
-				Download <a href="{{.APIEndpoint}}/file/{{.Other.APIResponse.ID}}?download">{{.Other.APIResponse.Name}}</a> here.
+				{{if eq .Other.Type "file"}}
-			{{else}}
+					Download <a href="{{.APIEndpoint}}/file/{{.Other.APIResponse.ID}}?download">{{.Other.APIResponse.Name}}</a> here.
+				{{else}}
+					<ul>
+					{{$totalSize := 0}}
+					{{range $file := .Other.APIResponse.Files}}
+						{{$totalSize = add $totalSize $file.Size}}
+						<li><a href="{{$.APIEndpoint}}/file/{{$file.ID}}?download">{{$file.Name}}</a> ({{formatData $file.Size}})</li>
+					{{end}}
+					</ul>
+					{{if ne .Other.APIResponse.ID ""}}
+						<a href="{{.APIEndpoint}}/list/{{.Other.APIResponse.ID}}/zip">Download all files</a> (~{{formatData $totalSize}})
+					{{end}}
+				{{end}}
+				<h2>Compatibility file viewer</h2>
+				<p>
+					Welcome to the compatibility version of the file viewer. This
+					page is only shown to web browsers which can't properly display
+					the regular file viewer.
+				</p>
+				<p>
+					This page only allows you to download the linked files. If you
+					want more features like online video / audio players, an image
+					viewer, a PDF viewer or a text file viewer, please download any
+					of the supported web browsers:
+				</p>
 				<ul>
-				{{$totalSize := 0}}
+					<li><a href="https://brave.com/pix009">Brave</a> (Linux, Mac OS, Windows)</li>
-				{{range $file := .Other.APIResponse.Files}}
+					<li><a href="https://www.mozilla.org/en-US/firefox/">Firefox</a> (Linux, Mac OS, Windows)</li>
-					{{$totalSize = add $totalSize $file.Size}}
+					<li><a href="https://www.google.com/chrome/">Chrome</a> / <a href="https://www.chromium.org/Home">Chromium</a> (Linux, Mac OS, Windows)</li>
-					<li><a href="{{$.APIEndpoint}}/file/{{$file.ID}}?download">{{$file.Name}}</a> ({{formatData $file.Size}})</li>
+					<li><a href="https://vivaldi.com/">Vivaldi</a> (Linux, Mac OS, Windows)</li>
-				{{end}}
+					<li><a href="https://www.opera.com/">Opera</a> (Linux, Mac OS, Windows)</li>
+					<li><a href="https://wiki.gnome.org/Apps/Web/">GNOME Web</a> (Linux)</li>
+					<li><a href="https://www.palemoon.org/">Pale Moon</a> (Linux, Windows)</li>
+					<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>
-				{{if ne .Other.APIResponse.ID ""}}
+			</section>
-					<a href="{{.APIEndpoint}}/list/{{.Other.APIResponse.ID}}/zip">Download all files</a> (~{{formatData $totalSize}})
+		</div>
-				{{end}}
-			{{end}}
-			<h2>Compatibility file viewer</h2>
-			<p>
-				Welcome to the compatibility version of the file viewer. This
-				page is only shown to web browsers which can't properly display
-				the regular file viewer.
-			</p>
-			<p>
-				This page only allows you to download the linked files. If you
-				want more features like online video / audio players, an image
-				viewer, a PDF viewer or a text file viewer, please download any
-				of the supported web browsers:
-			</p>
-			<ul>
-				<li><a href="https://brave.com/pix009">Brave</a> (Linux, Mac OS, Windows)</li>
-				<li><a href="https://www.mozilla.org/en-US/firefox/">Firefox</a> (Linux, Mac OS, Windows)</li>
-				<li><a href="https://www.google.com/chrome/">Chrome</a> / <a href="https://www.chromium.org/Home">Chromium</a> (Linux, Mac OS, Windows)</li>
-				<li><a href="https://vivaldi.com/">Vivaldi</a> (Linux, Mac OS, Windows)</li>
-				<li><a href="https://www.opera.com/">Opera</a> (Linux, Mac OS, Windows)</li>
-				<li><a href="https://wiki.gnome.org/Apps/Web/">GNOME Web</a> (Linux)</li>
-				<li><a href="https://www.palemoon.org/">Pale Moon</a> (Linux, Windows)</li>
-				<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>
-		</section>
 		{{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>
-			<br/>
+
-			<section>
+			<div id="page_content" class="page_content">
-				{{template "form" .Form}}
 				<br/>
-			</section>
+				<section>
+					{{template "form" .Form}}
+					<br/>
+				</section>
+			</div>
 			{{template "page_bottom" .}}
 		</div>
 

res/template/fragments/markdown_wrapper.html

@@ -6,12 +6,14 @@
 
 	<body>
 		{{template "page_top" .}}
-		<header>
+			<header>
-			<h1>{{.Title}}</h1>
+				<h1>{{.Title}}</h1>
-		</header>
+			</header>
-		<section>
+			<div id="page_content" class="page_content">
-			{{.Other}}
+				<section>
-		</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,31 +51,35 @@ function resetMenu() {
 </script>
 {{end}}
 
+{{define "footer"}}
+<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">{{template `patreon.svg` .}} Patreon</a> |
+			<a href="https://twitter.com/Fornax96" target="_blank">{{template `twitter.svg` .}} Twitter</a> |
+			<a href="https://reddit.com/r/pixeldrain" target="_blank">{{template `reddit.svg` .}} Reddit</a> |
+			<a href="https://github.com/Fornaxian" target="_blank">{{template `github.svg` .}} GitHub</a> |
+			<a href="https://mastodon.social/web/@fornax" target="_blank">{{template `mastodon.svg` .}} Mastodon</a>
+			)
+		</div>
+		<br/>
+		<span class="small_footer_text" style="font-size: .75em; line-height: .75em;">
+			page rendered by {{.Hostname}}
+		</span>
+	</div>
+</footer>
+{{end}}
+
 {{define "page_top"}}
-{{template "page_menu" .}}
+{{template "menu" .}}
 <div id="page_body" class="page_body">
 {{end}}
 
 {{define "page_bottom"}}
-	<footer>
+{{template "footer" .}}
-		<div class="footer_content">
+</div>
-			<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">{{template `patreon.svg` .}} Patreon</a> |
-				<a href="https://twitter.com/Fornax96" target="_blank">{{template `twitter.svg` .}} Twitter</a> |
-				<a href="https://reddit.com/r/pixeldrain" target="_blank">{{template `reddit.svg` .}} Reddit</a> |
-				<a href="https://github.com/Fornaxian" target="_blank">{{template `github.svg` .}} GitHub</a> |
-				<a href="https://mastodon.social/web/@fornax" target="_blank">{{template `mastodon.svg` .}} Mastodon</a>
-				)
-			</div>
-			<br/>
-			<span class="small_footer_text" style="font-size: .75em; line-height: .75em;">
-				page rendered by {{.Hostname}}
-			</span>
-		</div>
-	</footer>
-</div><!-- end page_body -->
 {{end}}

res/template/history.html

@@ -51,15 +51,16 @@
 		<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.
+				This data is saved locally in your web browser and gets updated every time you upload a file through your current browser.
+				</p>
+			</section>
 
-		<section>
+			<div id="uploaded_files"></div>
-			<p>
+		</div>
-			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.
-			</p>
-		</section>
-
-		<div id="uploaded_files"></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,27 +8,32 @@
 		<header>
 			<h1>Logging out of your pixeldrain account</h1>
 		</header>
-		<br/>
+		<div id="page_content" class="page_content">
-		<form method="POST" action="/logout">
+			<br/>
-			<input type="submit" value="I want to log out of pixeldrain on this computer" class="button_highlight"/>
+			<form method="POST" action="/logout">
-		</form>
+				<button role="submit" class="button_highlight">
-		<br/>
+					<i class="icon">logout</i>
-		<section>
+					Log out of pixeldrain on this computer
-			<h2>Why do I need to confirm my logout?</h2>
+				</button>
-			<p>
+			</form>
-				We need you to confirm your action so we can be sure that you
+			<br/>
-				really requested a logout. If we didn't do this, anyone (or any
+			<section>
-				website) would be able to send you to this page and you would
+				<h2>Why do I need to confirm my logout?</h2>
-				automatically get logged out of pixeldrain, which would be very
+				<p>
-				annoying.
+					We need you to confirm your action so we can be sure that you
-			</p>
+					really requested a logout. If we didn't do this, anyone (or any
-			<p>
+					website) would be able to send you to this page and you would
-				To prevent this from happening we're verifying that you actually
+					automatically get logged out of pixeldrain, which would be very
-				want to log out by making you click this button. Because this
+					annoying.
-				logout button triggers a different request type than normal
+				</p>
-				page visit we can confirm that you really want to log out.
+				<p>
-			</p>
+					To prevent this from happening we're verifying that you actually
-		</section>
+					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>
+			</section>
+		</div>
 		{{template "page_bottom" .}}
 		{{template "analytics"}}
 	</body>

res/template/widgets.html

@@ -6,61 +6,62 @@
 	</head>
 	<body>
 		{{template "page_top" .}}
-
 		<header>
 			<h1>Widget showcase</h1>
 		</header>
-		<section>
+		<div id="page_content" class="page_content">
-			<h2>Size 2 header</h2>
+			<section>
-			<h3>Size 3 header</h3>
+				<h2>Size 2 header</h2>
-			<h4>Size 4 header</h4>
+				<h3>Size 3 header</h3>
-			<h5>Size 5 header</h5>
+				<h4>Size 4 header</h4>
-			<h6>Size 6 header</h6>
+				<h5>Size 5 header</h5>
+				<h6>Size 6 header</h6>
 
-			<div class="highlight_shaded">Shaded highlight</div>
+				<div class="highlight_shaded">Shaded highlight</div>
-			<br/>
+				<br/>
-			Link <a href="#">A link to someplace</a>.
+				Link <a href="#">A link to someplace</a>.
-			<hr/>
+				<hr/>
-			Buttons <button>Regular ol' button!</button>
+				Buttons <button>Regular ol' button!</button>
-			Width indicator
+				Width indicator
-			<button class="button_highlight">Important button!</button>
+				<button class="button_highlight">Important button!</button>
-			Width indicator
+				Width indicator
-			<button class="button_red">Dangerous button!</button>
+				<button class="button_red">Dangerous button!</button>
-			<hr/>
+				<hr/>
-			Textarea <textarea>Hello!</textarea>
+				Textarea <textarea>Hello!</textarea>
-			<hr/>
+				<hr/>
-			Checkbox <input type="checkbox"/>
+				Checkbox <input type="checkbox"/>
-			<hr/>
+				<hr/>
-			Radio
+				Radio
-			<input name="radioform" type="radio"/>
+				<input name="radioform" type="radio"/>
-			<input name="radioform" type="radio"/>
+				<input name="radioform" type="radio"/>
-			<hr/>
+				<hr/>
-			Text field <input type="text"/>
+				Text field <input type="text"/>
-			<hr/>
+				<hr/>
-			Password <input type="password"/>
+				Password <input type="password"/>
-			<hr/>
+				<hr/>
-			Number <input type="number"/>
+				Number <input type="number"/>
-			<hr/>
+				<hr/>
-			Select
+				Select
-			<select name="select">
+				<select name="select">
-				<option>cherry</option>
+					<option>cherry</option>
-				<option>orange</option>
+					<option>orange</option>
-				<option>apple</option>
+					<option>apple</option>
-			</select>
+				</select>
-			<hr/>
+				<hr/>
-			Select2 <select name="select2" size="3">
+				Select2 <select name="select2" size="3">
-				<option>cherry</option>
+					<option>cherry</option>
-				<option>orange</option>
+					<option>orange</option>
-				<option>apple</option>
+					<option>apple</option>
-			</select>
+				</select>
-			<hr/>
+				<hr/>
-			File <input type="file" name="file">
+				File <input type="file" name="file">
-			<hr/>
+				<hr/>
-			Color <input type="color" name="favcolor" value="#ff0000">
+				Color <input type="color" name="favcolor" value="#ff0000">
 
-			<br/><br/>
+				<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>
+				<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>
+			</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,16 +80,19 @@ onMount(() => {
 	</div>
 </header>
 
-{#if page === "status"}
+<div id="page_content" class="page_content">
-	<Home></Home>
+	{#if page === "status"}
-{:else if page === "block_files"}
+		<Home></Home>
-	<BlockFiles></BlockFiles>
+	{:else if page === "block_files"}
-{:else if page === "abuse_reports"}
+		<BlockFiles></BlockFiles>
-	<AbuseReports></AbuseReports>
+	{:else if page === "abuse_reports"}
-{:else if page === "abuse_reporters"}
+		<AbuseReports></AbuseReports>
-	<AbuseReporters></AbuseReporters>
+	{:else if page === "abuse_reporters"}
-{:else if page === "ip_bans"}
+		<AbuseReporters></AbuseReporters>
-	<IpBans></IpBans>
+	{:else if page === "ip_bans"}
-{:else if page === "subscriptions"}
+		<IpBans></IpBans>
-	<Subscriptions></Subscriptions>
+	{:else if page === "subscriptions"}
-{/if}
+		<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,74 +1,78 @@
 <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>
-<header>
-	<div class="header_image_container"></div>
-</header>
 
-<UploadWidget></UploadWidget>
+<div id="page_content" class="page_content">
+	<header>
+		<div class="header_image_container"></div>
+	</header>
 
-<header>
+	<UploadWidget></UploadWidget>
-	<h1>What is pixeldrain?</h1>
-</header>
 
-<section>
+	<header>
-	<p>
+		<h1>What is pixeldrain?</h1>
-		Pixeldrain is a file sharing website built for speed and ease of
+	</header>
-		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.
-	</p>
-	<p>
-		Files can be uploaded by clicking the big green upload
-		button, or by dragging them onto this page from your file
-		manager.
-	</p>
-	<h2>Accounts</h2>
-	<p>
-		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 <a href="/register">the registration page</a>.
-		More about pixeldrain's features below.
-	</p>
-</section>
-<header>
-	<h1 id="pro">Getting more out of pixeldrain</h1>
-</header>
-<section>
-	<p>
-		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 <a
-		href="#prepaid">prepaid plans</a> if you are interested in more
-		professional services.
-	</p>
-	<br/>
-	<FeatureTable></FeatureTable>
-	<br/>
-	<div style="text-align: center;">
-		Do you need even more time and space? Check out our other plans
-	</div>
-	<br/>
-	<OtherPlans></OtherPlans>
-	<br/>
-</section>
 
-<ForCreators/>
+	<section>
-<br/>
+		<p>
-<br/>
+			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.
+		</p>
+		<p>
+			Files can be uploaded by clicking the big green upload
+			button, or by dragging them onto this page from your file
+			manager.
+		</p>
+		<h2>Accounts</h2>
+		<p>
+			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 <a href="/register">the registration page</a>.
+			More about pixeldrain's features below.
+		</p>
+	</section>
+	<header>
+		<h1 id="pro">Getting more out of pixeldrain</h1>
+	</header>
+	<section>
+		<p>
+			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 <a
+			href="#prepaid">prepaid plans</a> if you are interested in more
+			professional services.
+		</p>
+		<br/>
+		<FeatureTable></FeatureTable>
+		<br/>
+		<div style="text-align: center;">
+			Do you need even more time and space? Check out our other plans
+		</div>
+		<br/>
+		<OtherPlans></OtherPlans>
+		<br/>
+	</section>
+
+	<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}>
+	<div id="file_drop_highlight" class="highlight_green" class:hide={!dragging}>
-	Gimme gimme gimme!<br/>
+		Gimme gimme gimme!<br/>
-	Drop your files to upload them
+		Drop your files to upload them
-</div>
+	</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,40 +44,46 @@ onMount(get_buckets);
 
 <LoadingIndicator loading={loading}/>
 
-<section>
+<header>
-	<div class="toolbar" style="text-align: right;">
+	<h1>My Buckets</h1>
-		<button
+</header>
-			class:button_highlight={creating_bucket}
+<div id="page_content" class="page_content">
-			on:click={() => {creating_bucket = !creating_bucket}}
+	<section>
-		>
+		<div class="toolbar" style="text-align: right;">
-			<i class="icon">create_new_folder</i> New bucket
+			<button
-		</button>
+				class:button_highlight={creating_bucket}
-	</div>
+				on:click={() => {creating_bucket = !creating_bucket}}
-	{#if creating_bucket}
+			>
-		<div class="highlight_shaded">
+				<i class="icon">create_new_folder</i> New bucket
-			<form on:submit|preventDefault={create_bucket}>
+			</button>
-				<table class="form">
-					<tr>
-						<td>
-							Name
-						</td>
-						<td>
-							<input type="text" bind:this={new_bucket_name}/>
-						</td>
-					</tr>
-					<tr>
-						<td colspan="2">
-							<button class="button_highlight" type="submit" style="float: right;">
-								<i class="icon">save</i> Save
-							</button>
-						</td>
-					</tr>
-				</table>
-			</form>
 		</div>
-	{/if}
+		{#if creating_bucket}
+			<div class="highlight_shaded">
+				<form on:submit|preventDefault={create_bucket}>
+					<table class="form">
+						<tr>
+							<td>
+								Name
+							</td>
+							<td>
+								<input type="text" bind:this={new_bucket_name}/>
+							</td>
+						</tr>
+						<tr>
+							<td colspan="2">
+								<button class="button_highlight" type="submit" style="float: right;">
+									<i class="icon">save</i> Save
+								</button>
+							</td>
+						</tr>
+					</table>
+				</form>
+			</div>
+		{/if}
 
-	{#each buckets as bucket (bucket.id)}
+		{#each buckets as bucket (bucket.id)}
-		<UserBucket bucket={bucket} on:refresh={get_buckets}></UserBucket>
+			<UserBucket bucket={bucket} on:refresh={get_buckets}></UserBucket>
-	{/each}
+		{/each}
-</section>
+	</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,22 +100,23 @@ onMount(() => {
 		{/if}
 	</div>
 </header>
-<br/>
+<div id="page_content" class="page_content">
-
+	{#if page === "home"}
-{#if page === "home"}
+		<Home/>
-	<Home/>
+	{:else if page === "settings"}
-{:else if page === "settings"}
+		<AccountSettings/>
-	<AccountSettings/>
+	{:else if page === "sharing"}
-{:else if page === "sharing"}
+		<SharingSettings/>
-	<SharingSettings/>
+	{:else if page === "api_keys"}
-{:else if page === "api_keys"}
+		<APIKeys/>
-	<APIKeys/>
+	{:else if page === "activity"}
-{:else if page === "activity"}
+		<ActivityLog/>
-	<ActivityLog/>
+	{:else if page === "connect_app"}
-{:else if page === "connect_app"}
+		<ConnectApp/>
-	<ConnectApp/>
+	{:else if page === "transactions"}
-{:else if page === "transactions"}
+		<Transactions/>
-	<Transactions/>
+	{:else if page === "subscription"}
-{:else if page === "subscription"}
+		<Subscription/>
-	<Subscription/>
+	{/if}
-{/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%)
+	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

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