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

Update styles

Browse Source
This commit is contained in:
Fornax
2022-10-11 14:21:06 +02:00
parent 2ed58774b7
commit 14df7e8a70
49 changed files with 900 additions and 662 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
res/static/img/header_orbitron.webp
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 54 KiB

After

Width:  |  Height:  |  Size: 38 KiB

BIN
res/static/img/header_orbitron.xcf
View File

Binary file not shown.

BIN
res/static/img/nebula.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 298 KiB

57
res/static/style/layout.css
View File

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

30
res/template/404.html
View File

@@ -9,20 +9,22 @@
<header>
<h1>This page does not exist!</h1>
</header>
<section>
<p>
If you came here by a link from this very same website you can
tell me about it on
<a href="https://twitter.com/Fornax96">twitter</a>.
</p>
<p>
Either way, there's nothing to see here, so you'll have to
<a href='/'>head over to the home page</a>.
</p>
<p>
Bye!
</p>
</section>
<div id="page_content" class="page_content">
<section>
<p>
If you came here by a link from this very same website you can
tell me about it on
<a href="https://twitter.com/Fornax96">twitter</a>.
</p>
<p>
Either way, there's nothing to see here, so you'll have to
<a href='/'>head over to the home page</a>.
</p>
<p>
Bye!
</p>
</section>
</div>
{{template "page_bottom" .}}
{{template "analytics"}}
</body>

14
res/template/451.html
View File

@@ -9,12 +9,14 @@
<header>
<h1>451, Unavailable For Legal Reasons</h1>
</header>
<section>
<p>
Hello. This file has received an abuse report and has been taken
down. It cannot be shared anymore.
</p>
</section>
<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>

32
res/template/500.html
View File

@@ -9,21 +9,23 @@
<header>
<h1>You broke pixeldrain</h1>
</header>
<section>
<p>
Great job.
</p>
<p>
Just kidding, something went wrong on the pixeldrain server and
it's my fault. This can happen when the website is overloaded,
there is a problem with the software or there is a hardware
problem. When there is a large scale outage you can usually find
more info on my twitter <a
href="https://twitter.com/Fornax96"></a>@Fornax96</a>. You can
try again in a few minutes (or hours), or go back to the <a
href='/'>home page</a> and start over.
</p>
</section>
<div id="page_content" class="page_content">
<section>
<p>
Great job.
</p>
<p>
Just kidding, something went wrong on the pixeldrain server and
it's my fault. This can happen when the website is overloaded,
there is a problem with the software or there is a hardware
problem. When there is a large scale outage you can usually find
more info on my twitter <a
href="https://twitter.com/Fornax96"></a>@Fornax96</a>. You can
try again in a few minutes (or hours), or go back to the <a
href='/'>home page</a> and start over.
</p>
</section>
</div>
{{template "page_bottom" .}}
{{template "analytics"}}
</body>

13
res/template/admin.html
View File

@@ -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" .}}
<div id="page_content" class="page_content"></div>
{{template "page_bottom" .}}
{{template "menu" .}}
<div id="page_body" class="page_body"></div>
</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}}

128
res/template/appearance.html
View File

@@ -10,70 +10,72 @@
<header>
<h1>Change website appearance</h1>
</header>
<section>
<p>
You can change how pixeldrain looks! Your theme choice will
be saved in a cookie.
</p>
<h2>Theme</h2>
<input type="radio" id="style_nord" name="style"><label for="style_nord">Nord</label>
(Inspired by <a href="https://www.nordtheme.com/" target="_blank">Nord</a>)
<br/>
Dynamic theme, changes based on operating system settings. Here you can choose a specific variant:
<br/>
<input type="radio" id="style_nord_dark" name="style"><label for="style_nord_dark">Nord dark</label>
<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>
(Inspired by <a href="https://ethanschoonover.com/solarized/" target="_blank">Solarized</a>)
<br/>
Dynamic theme, changes based on operating system settings. Here you can choose a specific variant:
<br/>
<input type="radio" id="style_solarized_dark" name="style"><label for="style_solarized_dark">Solarized dark</label>
<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/>
<input type="radio" id="style_purple_drain" name="style"><label for="style_purple_drain">Purple drain</label>
<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/>
Classic pre-2020 pixeldrain style, dark gray
<br/>
<br/>
Other (experimental) themes
<br/>
<input type="radio" id="style_maroon" name="style"><label for="style_maroon">Maroon Style</label>
<br/>
<input type="radio" id="style_hacker" name="style"><label for="style_hacker">Hacker Style</label>
<br/>
<input type="radio" id="style_canta" name="style"><label for="style_canta">Canta Style</label>
(Inspired by <a href="https://github.com/vinceliuice/Canta-theme" target="_blank">Canta GTK</a>)
<br/>
<input type="radio" id="style_skeuos" name="style"><label for="style_skeuos">Skeuos Style</label>
(Inspired by <a href="https://www.gnome-look.org/p/1441725/" target="_blank">Skeuos GTK</a>)
<br/>
<input type="radio" id="style_sweet" name="style"><label for="style_sweet">Sweet</label>
<div id="page_content" class="page_content">
<section>
<p>
You can change how pixeldrain looks! Your theme choice will
be saved in a cookie.
</p>
<h2>Theme</h2>
<input type="radio" id="style_nord" name="style"><label for="style_nord">Nord</label>
(Inspired by <a href="https://www.nordtheme.com/" target="_blank">Nord</a>)
<br/>
Dynamic theme, changes based on operating system settings. Here you can choose a specific variant:
<br/>
<input type="radio" id="style_nord_dark" name="style"><label for="style_nord_dark">Nord dark</label>
<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>
(Inspired by <a href="https://ethanschoonover.com/solarized/" target="_blank">Solarized</a>)
<br/>
Dynamic theme, changes based on operating system settings. Here you can choose a specific variant:
<br/>
<input type="radio" id="style_solarized_dark" name="style"><label for="style_solarized_dark">Solarized dark</label>
<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/>
<input type="radio" id="style_purple_drain" name="style"><label for="style_purple_drain">Purple drain</label>
<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/>
Classic pre-2020 pixeldrain style, dark gray
<br/>
<br/>
Other (experimental) themes
<br/>
<input type="radio" id="style_maroon" name="style"><label for="style_maroon">Maroon Style</label>
<br/>
<input type="radio" id="style_hacker" name="style"><label for="style_hacker">Hacker Style</label>
<br/>
<input type="radio" id="style_canta" name="style"><label for="style_canta">Canta Style</label>
(Inspired by <a href="https://github.com/vinceliuice/Canta-theme" target="_blank">Canta GTK</a>)
<br/>
<input type="radio" id="style_skeuos" name="style"><label for="style_skeuos">Skeuos Style</label>
(Inspired by <a href="https://www.gnome-look.org/p/1441725/" target="_blank">Skeuos GTK</a>)
<br/>
<input type="radio" id="style_sweet" name="style"><label for="style_sweet">Sweet</label>
<h2>Hue</h2>
<p>
Many themes support custom hues. The hue does not change the
contrast of the theme, only the color itself.
</p>
<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_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_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>
<h2>Hue</h2>
<p>
Many themes support custom hues. The hue does not change the
contrast of the theme, only the color itself.
</p>
<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_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_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) {

208
res/template/apps.html
View File

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

3
res/template/directory_upload.html
View File

@@ -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" .}}

42
res/template/email_confirm.html
View File

@@ -10,32 +10,38 @@
<header>
<h1>Success!</h1>
</header>
<section>
<p>
Your account's e-mail address has been updated.
</p>
</section>
<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>
<section>
<p>
This e-mail change request does not exist or has expired.
Please try again if you still want to change your e-mail
address.
</p>
</section>
<div id="page_content" class="page_content">
<section>
<p>
This e-mail change request does not exist or has expired.
Please try again if you still want to change your e-mail
address.
</p>
</section>
</div>
{{else}}
<header>
<h1>Error</h1>
</header>
<section>
<p>
Something went wrong while processing this request. Please
try again later.
</p>
</section>
<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" .}}

74
res/template/file_not_found.html
View File

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

76
res/template/file_viewer_compat.html
View File

@@ -30,45 +30,47 @@
<header>
<h1>{{.Title}}</h1>
</header>
<section>
{{if eq .Other.Type "file"}}
Download <a href="{{.APIEndpoint}}/file/{{.Other.APIResponse.ID}}?download">{{.Other.APIResponse.Name}}</a> here.
{{else}}
<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.
{{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}}
{{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}}
<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>
{{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>
<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>
</section>
</div>
{{template "analytics"}}
</body>
</html>

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

@@ -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>
{{template "form" .Form}}
<div id="page_content" class="page_content">
<br/>
</section>
<section>
{{template "form" .Form}}
<br/>
</section>
</div>
{{template "page_bottom" .}}
</div>

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

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

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

@@ -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>
<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>
</div><!-- end page_body -->
{{template "footer" .}}
</div>
{{end}}

17
res/template/history.html
View File

@@ -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>
<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>
<div id="uploaded_files"></div>
<div id="uploaded_files"></div>
</div>
{{template "page_bottom" .}}
<script>

19
res/template/home.html
View File

@@ -7,32 +7,29 @@
<style>
/* Override the default background with something spectacular */
header, footer, .checkers {
background-image: url("/res/img/horsehead.webp");
background-color: var(--parallax_slider_color);
background-repeat: no-repeat;
background-image: url("/res/img/nebula.webp");
background-color: var(--background_color);
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" .}}
<div id="page_content" class="page_content"></div>
{{template "page_bottom" .}}
{{template "menu" .}}
<div id="page_body" class="page_body"></div>
{{template "analytics"}}
</body>
</html>

10
res/template/user_buckets.html
View File

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

2
res/template/user_file_manager.html
View File

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

8
res/template/user_home.html
View File

@@ -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" .}}
<div id="page_content" class="page_content"></div>
{{template "page_bottom" .}}
{{template "menu" .}}
<div id="page_body" class="page_body"></div>
{{template "analytics"}}
</body>
</html>

47
res/template/user_logout.html
View File

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

101
res/template/widgets.html
View File

@@ -6,61 +6,62 @@
</head>
<body>
{{template "page_top" .}}
<header>
<h1>Widget showcase</h1>
</header>
<section>
<h2>Size 2 header</h2>
<h3>Size 3 header</h3>
<h4>Size 4 header</h4>
<h5>Size 5 header</h5>
<h6>Size 6 header</h6>
<div id="page_content" class="page_content">
<section>
<h2>Size 2 header</h2>
<h3>Size 3 header</h3>
<h4>Size 4 header</h4>
<h5>Size 5 header</h5>
<h6>Size 6 header</h6>
<div class="highlight_shaded">Shaded highlight</div>
<br/>
Link <a href="#">A link to someplace</a>.
<hr/>
Buttons <button>Regular ol' button!</button>
Width indicator
<button class="button_highlight">Important button!</button>
Width indicator
<button class="button_red">Dangerous button!</button>
<hr/>
Textarea <textarea>Hello!</textarea>
<hr/>
Checkbox <input type="checkbox"/>
<hr/>
Radio
<input name="radioform" type="radio"/>
<input name="radioform" type="radio"/>
<hr/>
Text field <input type="text"/>
<hr/>
Password <input type="password"/>
<hr/>
Number <input type="number"/>
<hr/>
Select
<select name="select">
<option>cherry</option>
<option>orange</option>
<option>apple</option>
</select>
<hr/>
Select2 <select name="select2" size="3">
<option>cherry</option>
<option>orange</option>
<option>apple</option>
</select>
<hr/>
File <input type="file" name="file">
<hr/>
Color <input type="color" name="favcolor" value="#ff0000">
<div class="highlight_shaded">Shaded highlight</div>
<br/>
Link <a href="#">A link to someplace</a>.
<hr/>
Buttons <button>Regular ol' button!</button>
Width indicator
<button class="button_highlight">Important button!</button>
Width indicator
<button class="button_red">Dangerous button!</button>
<hr/>
Textarea <textarea>Hello!</textarea>
<hr/>
Checkbox <input type="checkbox"/>
<hr/>
Radio
<input name="radioform" type="radio"/>
<input name="radioform" type="radio"/>
<hr/>
Text field <input type="text"/>
<hr/>
Password <input type="password"/>
<hr/>
Number <input type="number"/>
<hr/>
Select
<select name="select">
<option>cherry</option>
<option>orange</option>
<option>apple</option>
</select>
<hr/>
Select2 <select name="select2" size="3">
<option>cherry</option>
<option>orange</option>
<option>apple</option>
</select>
<hr/>
File <input type="file" name="file">
<hr/>
Color <input type="color" name="favcolor" value="#ff0000">
<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>
<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>

2
svelte/src/admin_panel.js
View File

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

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

@@ -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,

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

@@ -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"}
<Home></Home>
{:else if page === "block_files"}
<BlockFiles></BlockFiles>
{:else if page === "abuse_reports"}
<AbuseReports></AbuseReports>
{:else if page === "abuse_reporters"}
<AbuseReporters></AbuseReporters>
{:else if page === "ip_bans"}
<IpBans></IpBans>
{:else if page === "subscriptions"}
<Subscriptions></Subscriptions>
{/if}
<div id="page_content" class="page_content">
{#if page === "status"}
<Home></Home>
{:else if page === "block_files"}
<BlockFiles></BlockFiles>
{:else if page === "abuse_reports"}
<AbuseReports></AbuseReports>
{:else if page === "abuse_reporters"}
<AbuseReporters></AbuseReporters>
{:else if page === "ip_bans"}
<IpBans></IpBans>
{:else if page === "subscriptions"}
<Subscriptions></Subscriptions>
{/if}
</div>
<Footer/>

11
svelte/src/file_viewer/AdLeaderboard.svelte
View File

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

8
svelte/src/file_viewer/EditWindow.svelte
View File

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

3
svelte/src/file_viewer/EmbedWindow.svelte
View File

@@ -204,4 +204,7 @@ const update_example = () => {
width: 100%;
overflow: hidden;
}
.tab_bar {
border-bottom: 2px solid var(--separator);
}
</style>

2
svelte/src/home_page.js
View File

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

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

@@ -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>
<h1>What is pixeldrain?</h1>
</header>
<UploadWidget></UploadWidget>
<section>
<p>
Pixeldrain is a file sharing website built for speed and ease of
use. You can upload files you want to share online to our
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>
<header>
<h1>What is pixeldrain?</h1>
</header>
<ForCreators/>
<br/>
<br/>
<section>
<p>
Pixeldrain is a file sharing website built for speed and ease of
use. You can upload files you want to share online to our
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");
}
}

2
svelte/src/home_page/UploadProgressBar.svelte
View File

@@ -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;

16
svelte/src/home_page/UploadWidget.svelte
View File

@@ -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/>
<div id="file_drop_highlight" class="highlight_green" class:hide={!dragging}>
Gimme gimme gimme!<br/>
Drop your files to upload them
</div>
</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;

6
svelte/src/icons/Github.svelte Normal file
View File

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

6
svelte/src/icons/Mastodon.svelte Normal file
View File

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

8
svelte/src/icons/Patreon.svelte Normal file
View File

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

48
svelte/src/layout/Footer.svelte Normal file
View File

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

84
svelte/src/layout/Menu.svelte Normal file
View File

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

2
svelte/src/user_buckets.js
View File

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

77
svelte/src/user_buckets/UserBuckets.svelte
View File

@@ -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>
<div class="toolbar" style="text-align: right;">
<button
class:button_highlight={creating_bucket}
on:click={() => {creating_bucket = !creating_bucket}}
>
<i class="icon">create_new_folder</i> New bucket
</button>
</div>
{#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>
<header>
<h1>My Buckets</h1>
</header>
<div id="page_content" class="page_content">
<section>
<div class="toolbar" style="text-align: right;">
<button
class:button_highlight={creating_bucket}
on:click={() => {creating_bucket = !creating_bucket}}
>
<i class="icon">create_new_folder</i> New bucket
</button>
</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)}
<UserBucket bucket={bucket} on:refresh={get_buckets}></UserBucket>
{/each}
</section>
{#each buckets as bucket (bucket.id)}
<UserBucket bucket={bucket} on:refresh={get_buckets}></UserBucket>
{/each}
</section>
</div>
<Footer/>

2
svelte/src/user_home.js
View File

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

1
svelte/src/user_home/APIKeys.svelte
View File

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

10
svelte/src/user_home/AccountSettings.svelte
View File

@@ -142,26 +142,26 @@ let delete_account = {
</script>
<section>
<h2>Account settings</h2>
<div class="highlight_shaded">
<br/>
<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>

6
svelte/src/user_home/Home.svelte
View File

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

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

@@ -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/>
{#if page === "home"}
<Home/>
{:else if page === "settings"}
<AccountSettings/>
{:else if page === "sharing"}
<SharingSettings/>
{:else if page === "api_keys"}
<APIKeys/>
{:else if page === "activity"}
<ActivityLog/>
{:else if page === "connect_app"}
<ConnectApp/>
{:else if page === "transactions"}
<Transactions/>
{:else if page === "subscription"}
<Subscription/>
{/if}
<div id="page_content" class="page_content">
{#if page === "home"}
<Home/>
{:else if page === "settings"}
<AccountSettings/>
{:else if page === "sharing"}
<SharingSettings/>
{:else if page === "api_keys"}
<APIKeys/>
{:else if page === "activity"}
<ActivityLog/>
{:else if page === "connect_app"}
<ConnectApp/>
{:else if page === "transactions"}
<Transactions/>
{:else if page === "subscription"}
<Subscription/>
{/if}
</div>
<Footer/>

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

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

105
webcontroller/style.go
View File

@@ -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},
InputHover: HSL{266, .85, .28},
Input: HSL{266, .85, .26},
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},
Background: NewGradient(120, HSL{250, .9, .14}, HSL{300, .9, .10}),
BackgroundColor: HSL{260, .90, .12},
Background: NewGradient(120, HSL{250, .84, .18}, HSL{300, .9, .16}),
BackgroundPattern: RawCSS("none"),
ParallaxSlider: HSL{275, .8, .1},
Navigation: RGBA{0, 0, 0, 0.1},
Navigation: RawCSS("none"),
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{
Input: HSL{220, .16, .36}, // nord3
InputHover: HSL{220, .16, .40},
InputText: HSL{218, .27, .92}, // nord5 hsl(218, 27%, 92%)
InputDisabledText: HSL{220, .16, .22}, // nord0 hsl(220, 16%, 22%)
Highlight: HSL{92, .28, .65}, // nord14 hsl(92, 28%, 65%)
HighlightText: HSL{220, .16, .22}, // nord0
Danger: HSL{354, .42, .56}, // nord11 hsl(354, 42%, 56%)
ScrollbarForeground: HSL{179, .25, .65}, // nord7 hsl(179, 25%, 65%)
ScrollbarHover: HSL{193, .43, .67}, // nord8 hsl(193, 43%, 67%)
var (
nord0 = HSL{220, .16, .22} // Dark
nord1 = HSL{222, .16, .28} // Dark
nord2 = HSL{220, .17, .32} // Dark
nord3 = HSL{220, .16, .36} // Light
nord4 = HSL{219, .28, .88} // Light
nord5 = HSL{218, .27, .92} // Light
nord6 = HSL{218, .27, .94} // Light
nord7 = HSL{179, .25, .65} // Teal
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
BodyColor: HSL{222, .16, .28}, // nord1
BodyText: HSL{219, .28, .88}, // nord4 hsl(219, 28%, 88%)
CardColor: HSL{220, .17, .32}, // nord2
var nordDarkStyle = styleSheet{
Input: nord3.Add(0, 0, 0.01),
InputHover: nord3.Add(0, 0, 0.03),
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%)
InputHover: HSL{218, .27, .98},
InputText: HSL{222, .16, .28}, // nord1 hsl(222, 16%, 28%)
InputDisabledText: HSL{219, .28, .88}, // nord4 hsl(219, 28%, 88%)
Highlight: HSL{92, .28, .65}, // nord14 hsl(92, 28%, 65%)
HighlightText: HSL{222, .16, .28}, // nord3 hsl(220, 16%, 36%)
Danger: HSL{354, .42, .56}, // nord11 hsl(354, 42%, 56%)
ScrollbarForeground: HSL{179, .25, .65}, // nord7 hsl(179, 25%, 65%)
ScrollbarHover: HSL{193, .43, .67}, // nord8 hsl(193, 43%, 67%)
Input: nord4.Add(0, 0, -0.04),
InputHover: nord4.Add(0, 0, -0.06),
InputText: nord0,
InputDisabledText: nord6,
Highlight: nord14,
HighlightText: nord1,
Danger: nord11,
ScrollbarForeground: nord7,
ScrollbarHover: nord8,
BackgroundColor: HSL{220, .16, .36}, // nord3 hsl(220, 16%, 36%)
BackgroundText: HSL{219, .28, .88}, // nord4 hsl(219, 28%, 88%)
ParallaxSlider: HSL{220, .16, .22}, // nord0 hsl(220, 16%, 22%)
BodyColor: HSL{219, .28, .88}, // nord4 hsl(219, 28%, 88%)
BodyText: HSL{220, .17, .32}, // nord2 hsl(220, 17%, 32%)
BackgroundPattern: HSL{219, .28, .88}, // hsl(219, 28%, 88%)
CardColor: HSL{218, .27, .92}, // nord5 hsl(218, 27%, 92%)
BackgroundColor: nord4,
BackgroundText: nord0,
BodyColor: nord6,
BodyText: nord2,
Separator: nord4,
BackgroundPattern: nord4,
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%)
InputHover: HSL{46, .42, .88},
Input: HSL{46, .42, .84},
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},
}

3
webcontroller/user_account.go
View File

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