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

Finish new style

Browse Source
This commit is contained in:
Wim Brand
2019-09-18 22:23:12 +02:00
parent 9f836801f2
commit 3bbf51a490
19 changed files with 217 additions and 144 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
res/static/img/header_2019.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 72 KiB

BIN
res/static/img/header_2019.xcf Normal file
View File

Binary file not shown.

10
res/static/script/Viewer.js
View File

@@ -42,12 +42,14 @@ var Viewer = {
this.currentFile = file.id; this.currentFile = file.id;
var title = ""; var title = "";
if (this.isList) { if (this.isList) {
title = this.title + " ~ " + file.name; document.getElementById("file_viewer_headerbar_title").style.lineHeight = "1em";
document.getElementById("file_viewer_list_title").innerText = this.title;
document.getElementById("file_viewer_file_title").innerText = file.name;
document.title = this.title + " ~ " + file.name + " ~ PixelDrain";
} else { } else {
title = file.name; document.getElementById("file_viewer_file_title").innerText = file.name;
document.title = file.name + " ~ PixelDrain";
} }
document.title = title + " ~ PixelDrain";
document.getElementById("file_viewer_headerbar_title").innerText = title;
$.get("/u/" + file.id + "/preview", function(response){ $.get("/u/" + file.id + "/preview", function(response){
$("#filepreview").html(response); $("#filepreview").html(response);

5
res/static/script/compiled/home.js
View File

@@ -151,11 +151,6 @@ document.addEventListener('drop', function (e) {
handleUploads(e.dataTransfer.files); handleUploads(e.dataTransfer.files);
} }
}); });
// Style selector
$("input[name=style]").change(function (evt) {
Cookie.write("style", evt.target.id.substring(6));
location.reload();
});
function copyText(text) { function copyText(text) {
// Create a textarea to copy the text from // Create a textarea to copy the text from
var ta = document.createElement("textarea"); var ta = document.createElement("textarea");

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

@@ -70,15 +70,6 @@ body{
/* Page layout elements */ /* Page layout elements */
.page_wrapper {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
overflow: hidden;
}
.button_toggle_navigation { .button_toggle_navigation {
position: absolute; position: absolute;
z-index: 300; z-index: 300;
@@ -92,23 +83,24 @@ body{
border-bottom-right-radius: 90%; border-bottom-right-radius: 90%;
box-shadow: 2px 2px 8px -3px var(--shadow_color); box-shadow: 2px 2px 8px -3px var(--shadow_color);
} }
.page_wrapper > .page_navigation { .page_navigation {
position: absolute; position: absolute;
z-index: 100; z-index: 100;
width: 250px; width: 250px;
top: 0;
bottom: 0;
left: 0;
float: left; float: left;
background-color: var(--layer_1_color); background-color: var(--layer_1_color);
left: 0;
bottom: 0;
top: 0;
padding: 20px 0 0.5em 0; padding: 20px 0 0.5em 0;
box-sizing: border-box;
overflow-y: auto; overflow-y: auto;
overflow-x: hidden; overflow-x: hidden;
text-align: left; text-align: left;
box-shadow: inset -10px 0px 10px -10px var(--shadow_color); box-shadow: inset -10px 0px 10px -10px var(--shadow_color);
transition: left 0.5s; transition: left 0.5s;
} }
.page_wrapper > .page_body { .page_body {
position: absolute; position: absolute;
z-index: 200; z-index: 200;
top: 0; top: 0;
@@ -122,20 +114,18 @@ body{
overflow-x: hidden; overflow-x: hidden;
z-index: 50; z-index: 50;
transition: left 0.5s; transition: left 0.5s;
padding-top: 40px; padding: 50px 0 50px 0;
background-image: var(--background_pattern);
background-attachment: local;
} }
@media (max-width: 600px) { @media (max-width: 600px) {
.page_wrapper > .page_navigation { .page_navigation {
left: -250px; left: -250px;
} }
.page_wrapper > .page_body { .page_body {
left: 0; left: 0;
} }
} }
.page_wrapper > .page_body > .page_content { .page_body > .page_content {
position: relative; position: relative;
display: inline-block; display: inline-block;
width: 100%; width: 100%;
@@ -146,7 +136,7 @@ body{
box-sizing: border-box; box-sizing: border-box;
clear: both; clear: both;
} }
.page_wrapper > .page_body > .page_content > .limit_width { .page_body > .page_content > .limit_width {
position: relative; position: relative;
display: inline-block; display: inline-block;
max-width: 1000px; max-width: 1000px;
@@ -158,7 +148,7 @@ body{
word-break: break-word; word-break: break-word;
clear: both; clear: both;
} }
.page_wrapper > .page_body > h1 { .page_body > h1 {
text-shadow: 1px 1px 25px #000000; text-shadow: 1px 1px 25px #000000;
} }
@@ -166,12 +156,12 @@ body{
.header_image{ .header_image{
width: 100%; width: 100%;
max-width: 1000px; max-width: 1200px;
margin-top: 30px; margin-top: 30px;
margin-bottom: 30px; margin-bottom: 30px;
} }
.page_wrapper > .page_navigation a { .page_navigation a {
float: none; float: none;
display: block; display: block;
box-sizing: border-box; box-sizing: border-box;
@@ -188,8 +178,9 @@ body{
transition: background-color 0.5s; transition: background-color 0.5s;
border-radius: 5px; border-radius: 5px;
} }
.page_wrapper > .page_navigation a:hover { .page_navigation a:hover {
background-color: var(--input_color); background-color: var(--input_color);
color: var(--input_text_color);
text-decoration: none; text-decoration: none;
} }
@@ -286,6 +277,9 @@ hr{
border-radius: 0.5em; border-radius: 0.5em;
border: 0.22em solid var(--scrollbar_background_color); border: 0.22em solid var(--scrollbar_background_color);
} }
::-webkit-scrollbar-thumb:hover {
background-color: var(--scrollbar_hover_color);
}
::-webkit-scrollbar-corner{background: var(--scrollbar_background_color);} ::-webkit-scrollbar-corner{background: var(--scrollbar_background_color);}
a {color: var(--highlight_color); text-decoration: none;} a {color: var(--highlight_color); text-decoration: none;}

23
res/static/style/viewer.css
View File

@@ -36,12 +36,29 @@
.file_viewer > .highlight_headerbar > .file_viewer_headerbar_title { .file_viewer > .highlight_headerbar > .file_viewer_headerbar_title {
flex-grow: 1; flex-grow: 1;
flex-shrink: 1; flex-shrink: 1;
display: flex;
flex-direction: column;
overflow: hidden; overflow: hidden;
white-space: nowrap; white-space: nowrap;
line-height: 2em; line-height: 2em;
text-overflow: ellipsis; text-overflow: ellipsis;
} }
.file_viewer > .highlight_headerbar > .button_home::after {
content: "pixeldrain";
}
@media (max-width: 500px) {
.file_viewer > .highlight_headerbar > .button_home::after {
content: "pd";
}
.file_viewer > .highlight_headerbar > .list_navigator_buttons {
display: none;
}
}
.file_viewer > .highlight_headerbar > .file_viewer_headerbar_title > span {
flex-grow: 0;
flex-shrink: 0;
margin-right: 1em;
}
/* List Navigator (row 2) */ /* List Navigator (row 2) */
.file_viewer > .list_navigator { .file_viewer > .list_navigator {
flex-grow: 0; flex-grow: 0;
@@ -60,7 +77,7 @@
} }
.file_viewer > .list_navigator > .list_item{ .file_viewer > .list_navigator > .list_item{
height: 2.6em !important; height: 2.6em !important;
width: 250px !important; width: 220px !important;
} }
/* File preview area (row 3) */ /* File preview area (row 3) */
@@ -244,7 +261,7 @@
flex-direction: column; flex-direction: column;
opacity: 0; opacity: 0;
transition: visibility .5s, opacity .5s; transition: visibility .5s, opacity .5s;
background-color: var(--body_color); background-color: var(--layer_1_color);
border-color: var(--layer_1_color_border); border-color: var(--layer_1_color_border);
max-height: 100%; max-height: 100%;
max-width: 100%; max-width: 100%;

6
res/static/typescript/home/home.ts
View File

@@ -183,12 +183,6 @@ document.addEventListener('drop', function(e: DragEvent){
} }
}) })
// Style selector
$("input[name=style]").change(function(evt){
Cookie.write("style", evt.target.id.substring(6))
location.reload()
})
function copyText(text: string) : boolean { function copyText(text: string) : boolean {
// Create a textarea to copy the text from // Create a textarea to copy the text from
var ta = document.createElement("textarea"); var ta = document.createElement("textarea");

4
res/template/about.html
View File

@@ -7,7 +7,7 @@
<body> <body>
{{template "page_top" .}} {{template "page_top" .}}
<h1>About Pixeldrain</h1> <h1>About pixeldrain</h1>
<div class="page_content"><div class="limit_width"> <div class="page_content"><div class="limit_width">
<h2>Questions and Answers</h2> <h2>Questions and Answers</h2>
@@ -94,7 +94,7 @@
appearance of the website for you. appearance of the website for you.
</p> </p>
<h2>Legality</h2> <h2 id="legality">Legality</h2>
<p> <p>
I cannot be held liable for any illegal and / or copyrighted I cannot be held liable for any illegal and / or copyrighted
material that's uploaded by the users of this application. material that's uploaded by the users of this application.

2
res/template/account/user_files.html
View File

@@ -44,7 +44,7 @@
</a><!-- </a><!--
-->{{end}} -->{{end}}
<br/> <br/><br/>
<div class="highlight_dark"> <div class="highlight_dark">
{{if ne $page 0}} {{if ne $page 0}}
<a href="?page={{sub $page 4}}" class="button">🡄 4 Pages</a> <a href="?page={{sub $page 4}}" class="button">🡄 4 Pages</a>

4
res/template/account/user_home.html
View File

@@ -20,7 +20,7 @@
<h2>Your most recently uploaded files:</h2> <h2>Your most recently uploaded files:</h2>
<div class="highlight_dark"> <div class="highlight_dark">
{{$files := .PixelAPI.UserFiles 0 18}} {{$files := .PixelAPI.UserFiles 0 15}}
{{range $files.Files}}<!-- {{range $files.Files}}<!--
--><a class="file_button" href="/u/{{.ID}}" target="_blank"> --><a class="file_button" href="/u/{{.ID}}" target="_blank">
<img src="{{$.APIEndpoint}}/file/{{.ID}}/thumbnail" alt="{{.Name}}" /> <img src="{{$.APIEndpoint}}/file/{{.ID}}/thumbnail" alt="{{.Name}}" />
@@ -34,7 +34,7 @@
</div> </div>
<h2>Your most recently created lists:</h2> <h2>Your most recently created lists:</h2>
<div class="highlight_dark"> <div class="highlight_dark">
{{$lists := .PixelAPI.UserLists 0 18}} {{$lists := .PixelAPI.UserLists 0 15}}
{{range $lists.Lists}}<!-- {{range $lists.Lists}}<!--
--><a class="file_button" href="/l/{{.ID}}" target="_blank"> --><a class="file_button" href="/l/{{.ID}}" target="_blank">
<img src="{{$.APIEndpoint}}/list/{{.ID}}/thumbnail" alt="{{.Title}}" /> <img src="{{$.APIEndpoint}}/list/{{.ID}}/thumbnail" alt="{{.Title}}" />

2
res/template/account/user_lists.html
View File

@@ -38,7 +38,7 @@
</a><!-- </a><!--
-->{{end}} -->{{end}}
<br/> <br/><br/>
<div class="highlight_dark"> <div class="highlight_dark">
{{if ne $page 0}} {{if ne $page 0}}
<a href="?page={{sub $page 4}}" class="button">🡄 4 Pages</a> <a href="?page={{sub $page 4}}" class="button">🡄 4 Pages</a>

10
res/template/apidoc.html
View File

@@ -31,7 +31,7 @@
<body> <body>
{{template "page_top" .}} {{template "page_top" .}}
<h1>Pixeldrain API Documentation</h1> <h1>Pixeldrain API documentation</h1>
<div class="page_content"><div class="limit_width"> <div class="page_content"><div class="limit_width">
<p> <p>
@@ -80,10 +80,10 @@
{{template "api-list-post"}} {{template "api-list-post"}}
{{template "api-list-get"}} {{template "api-list-get"}}
<h2>Filesystem Methods</h2> <!--<h2>Filesystem Methods</h2>-->
{{template "api-filesystem-path-post"}} {{/*template "api-filesystem-path-post"*/}}
{{template "api-filesystem-path-get"}} {{/*template "api-filesystem-path-get"*/}}
{{template "api-filesystem-path-delete"}} {{/*template "api-filesystem-path-delete"*/}}
</div></div> </div></div>
{{template "page_bottom" .}} {{template "page_bottom" .}}
{{template "analytics"}} {{template "analytics"}}

46
res/template/appearance.html Normal file
View File

@@ -0,0 +1,46 @@
{{define "appearance"}}<!DOCTYPE html>
<html>
<head>
{{template "meta_tags" "Appearance settings"}}
{{template "user_style" .}}
</head>
<body>
{{template "page_top" .}}
<h1>Change website appearance</h1>
<div class="page_content"><div class="limit_width">
<p>
You can change how pixeldrain looks! Your theme choice will
be saved in a cookie.
</p>
<div class="indent">
<input type="radio" id="style_default" name="style"><label for="style_default">Pixeldrain Style</label><br/>
<input type="radio" id="style_solarized_dark" name="style"><label for="style_solarized_dark">Solarized Dark Style</label><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_arc" name="style"><label for="style_arc">Arc Style</label>
(Inspired by <a href="https://github.com/horst3180/Arc-theme" target="_blank">Arc GTK</a>)<br/>
<input type="radio" id="style_deepsea" name="style"><label for="style_deepsea">Deep Sea Style</label><br/>
<!--<input type="radio" id="style_sunny" name="style"><label for="style_sunny">Sunny Style</label>-->
</div>
</div></div>
<script>
// Style selector
document.getElementsByName("style").forEach(function(elem) {
elem.addEventListener("change", function(evt){
var date = new Date();
date.setTime(date.getTime() + (10 * 365 * 24 * 60 * 60 * 1000));
document.cookie = "style=" + evt.target.id.substring(6) + "; expires=" + date.toUTCString() + "; path=/";
location.reload();
})
});
</script>
{{template "page_bottom"}}
{{template "analytics"}}
</body>
</html>
{{end}}

11
res/template/file_viewer.html
View File

@@ -26,10 +26,15 @@
<div id="file_viewer_headerbar" class="highlight_headerbar"> <div id="file_viewer_headerbar" class="highlight_headerbar">
<button id="button_toggle_toolbar" class="button_toggle_toolbar" onClick="Toolbar.toggle();">☰</button> <button id="button_toggle_toolbar" class="button_toggle_toolbar" onClick="Toolbar.toggle();">☰</button>
<a href="/" id="button_home" class="button button_home"> <a href="/" id="button_home" class="button button_home">
<img src="/res/img/pixeldrain_transparent.png" alt="Back to the Home page" style="height: 1.5em; margin: -0.3em;"/> <img src="/res/img/pixeldrain_transparent.png"
alt="Back to the Home page"
style="height: 1.5em; margin: -0.2em; margin-right: 0.2em;"/>
</a> </a>
<span id="file_viewer_headerbar_title" class="file_viewer_headerbar_title">{{.Title}}</span> <div id="file_viewer_headerbar_title" class="file_viewer_headerbar_title">
<div id="list_navigator_buttons" class="button_group"></div> <div id="file_viewer_list_title"></div>
<div id="file_viewer_file_title">{{.Title}}</div>
</div>
<div id="list_navigator_buttons" class="button_group list_navigator_buttons"></div>
<button id="button_close_file_viewer" class="button_close_file_viewer button_red" onClick="window.close();">🞫</button> <button id="button_close_file_viewer" class="button_close_file_viewer button_red" onClick="window.close();">🞫</button>
</div> </div>
<div id="list_navigator" class="list_navigator"></div> <div id="list_navigator" class="list_navigator"></div>

5
res/template/fragments/meta_tags.html
View File

@@ -9,9 +9,8 @@
<link rel="icon" sizes="256x256" href="/res/img/pixeldrain_big.png"/> <link rel="icon" sizes="256x256" href="/res/img/pixeldrain_big.png"/>
<meta name="description" content="Pixeldrain is a free file sharing service, you <meta name="description" content="Pixeldrain is a free file sharing service, you
can upload any file and you will be given a shareable link right away. can upload any file and you will be given a shareable link right away.
PixelDrain also supports previews for images, videos, audio, PDFs and much more. pixeldrain also supports previews for images, videos, audio, PDFs and much more."/>
Uncensored, unmonitored and unmoderated."/>
<meta property="og:type" content="website" /> <meta property="og:type" content="website" />
<meta property="og:title" content="{{.}} ~ pixeldrain" /> <meta property="og:title" content="{{.}} ~ pixeldrain" />
<meta property="og:site_name" content="pixeldrain" /> <meta property="og:site_name" content="pixeldrain" />

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

@@ -1,37 +1,34 @@
{{define "page_top"}} {{define "page_top"}}
<div id="page_wrapper" class="page_wrapper"> <button id="button_toggle_navigation" class="button_toggle_navigation" onclick="toggleMenu();">☰</button>
<button id="button_toggle_navigation" class="button_toggle_navigation" onClick="toggleMenu();">☰</button> <div id="page_navigation" class="page_navigation">
<a href="/">Home</a>
<div id="page_navigation" class="page_navigation"> <hr/>
<a href="/">Home</a> {{if .Authenticated}}<a href="/user">{{.Username}}</a>
<hr/> <a href="/user/files">My Files</a>
{{if .Authenticated}}<a href="/user">{{.Username}}</a> <a href="/user/lists">My Lists</a>
<a href="/user/files">My Files</a> <a href="/logout">Log out</a>
<a href="/user/lists">My Lists</a> {{else}}
<a href="/logout">Log out</a> <a href="/login">Login</a>
{{else}} <a href="/register">Register</a>
<a href="/login">Login</a> <a href="/history">Upload History</a>
<a href="/register">Register</a> {{end}}
<a href="/history">Upload History</a> <hr/>
{{end}} <a href="/about">About</a>
<hr/> <!--<a href="/technology">Technology</a>-->
<a href="/about">About</a> <a href="/api">API</a>
<!--<a href="/technology">Technology</a>--> <a href="/appearance">Appearance</a>
<a href="/api">API</a> </div>
</div> <div id="page_body" class="page_body">
<div id="page_body" class="page_body">
{{end}} {{end}}
{{define "page_bottom"}} {{define "page_bottom"}}
<br/> <div class="highlight_dark">
<div class="highlight_dark" style="margin-bottom: 100px;"> Pixeldrain is a product by <a href="//fornaxian.com" target="_blank">Fornaxian Technologies</a> |
Pixeldrain is a product by <a href="//fornaxian.com" target="_blank">Fornaxian Technologies</a> | Twitter:&nbsp;<a href="https://twitter.com/Fornax96" target="_blank">@Fornax96</a>
Twitter:&nbsp;<a href="https://twitter.com/Fornax96" target="_blank">@Fornax96</a> Reddit:&nbsp;<a href="https://reddit.com/r/pixeldrain" target="_blank">/r/pixeldrain</a>
Reddit:&nbsp;<a href="https://reddit.com/r/pixeldrain" target="_blank">/r/pixeldrain</a> Medium:&nbsp;<a href="https://medium.com/pixeldrain" target="_blank">Pixeldrain</a>
Medium:&nbsp;<a href="https://medium.com/pixeldrain" target="_blank">Pixeldrain</a> </div>
</div> </div><!-- end page_body -->
</div><!-- end page_body -->
</div><!-- end page_wrapper-->
<script> <script>
var nav = document.getElementById("page_navigation"); var nav = document.getElementById("page_navigation");
@@ -41,13 +38,13 @@ function toggleMenu() {
if (nav.offsetLeft === 0) { if (nav.offsetLeft === 0) {
// Menu is visible // Menu is visible
nav.style.left = -nav.clientWidth + "px"; nav.style.left = -nav.offsetWidth + "px";
body.style.left = "0"; body.style.left = "0";
} else { } else {
// Menu is hidden // Menu is hidden
nav.style.left = "0"; nav.style.left = "0";
body.style.left = nav.clientWidth + "px"; body.style.left = nav.offsetWidth + "px";
} }
} }
</script> </script>

21
res/template/home.html
View File

@@ -9,7 +9,7 @@
<body> <body>
{{template "page_top" .}} {{template "page_top" .}}
<img id="header_image" class="header_image" src="/res/img/header_neuropol.png" alt="Header image"/> <img id="header_image" class="header_image" src="/res/img/header_2019.png" alt="Header image"/>
<br/> <br/>
<div class="page_content"> <div class="page_content">
<input id="file_input_field" type="file" name="file" multiple="multiple"/> <input id="file_input_field" type="file" name="file" multiple="multiple"/>
@@ -30,7 +30,7 @@
<br/> <br/>
<div class="limit_width"> <div class="limit_width">
<h1>What is Pixeldrain?</h1> <h1>What is pixeldrain?</h1>
<p> <p>
Pixeldrain is a file sharing website built for speed and Pixeldrain is a file sharing website built for speed and
ease of use. Pixeldrain does not cost any money, though ease of use. Pixeldrain does not cost any money, though
@@ -60,23 +60,6 @@
For more information see the <a href="/about">about</a> For more information see the <a href="/about">about</a>
page. page.
</p> </p>
<h2>Style selector</h2>
<p>
You can change how pixeldrain looks! Your theme choice will
be saved in a cookie.
</p>
<div class="indent">
<input type="radio" id="style_default" name="style"><label for="style_default">Pixeldrain Style</label><br/>
<input type="radio" id="style_solarized_dark" name="style"><label for="style_solarized_dark">Solarized Dark Style</label><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_arc" name="style"><label for="style_arc">Arc Style</label>
(Inspired by <a href="https://github.com/horst3180/Arc-theme" target="_blank">Arc GTK</a>)<br/>
<input type="radio" id="style_sunny" name="style"><label for="style_sunny">Sunny Style</label>
</div>
</div> </div>
</div> </div>

106
webcontroller/user_style.go
View File

@@ -25,6 +25,8 @@ func userStyle(r *http.Request) (style template.CSS) {
selectedStyle = cantaPixeldrainStyle selectedStyle = cantaPixeldrainStyle
case "arc": case "arc":
selectedStyle = arcPixeldrainStyle selectedStyle = arcPixeldrainStyle
case "deepsea":
selectedStyle = deepseaPixeldrainStyle
case "default": case "default":
fallthrough // use default case fallthrough // use default case
default: default:
@@ -45,6 +47,7 @@ func userStyle(r *http.Request) (style template.CSS) {
--danger_color_dark: %s; --danger_color_dark: %s;
--file_background_color: %s; --file_background_color: %s;
--scrollbar_foreground_color: %s; --scrollbar_foreground_color: %s;
--scrollbar_hover_color: %s;
--scrollbar_background_color: %s; --scrollbar_background_color: %s;
--background_color: %s; --background_color: %s;
@@ -74,6 +77,7 @@ func userStyle(r *http.Request) (style template.CSS) {
selectedStyle.DangerColor.add(0, 0, -.03).cssString(), selectedStyle.DangerColor.add(0, 0, -.03).cssString(),
selectedStyle.FileBackgroundColor.cssString(), selectedStyle.FileBackgroundColor.cssString(),
selectedStyle.ScrollbarForegroundColor.cssString(), selectedStyle.ScrollbarForegroundColor.cssString(),
selectedStyle.ScrollbarHoverColor.cssString(),
selectedStyle.ScrollbarBackgroundColor.cssString(), selectedStyle.ScrollbarBackgroundColor.cssString(),
selectedStyle.BackgroundColor.cssString(), selectedStyle.BackgroundColor.cssString(),
selectedStyle.BodyColor.cssString(), selectedStyle.BodyColor.cssString(),
@@ -100,6 +104,7 @@ type pixeldrainStyleSheet struct {
DangerColor hsl DangerColor hsl
FileBackgroundColor hsl FileBackgroundColor hsl
ScrollbarForegroundColor hsl ScrollbarForegroundColor hsl
ScrollbarHoverColor hsl
ScrollbarBackgroundColor hsl ScrollbarBackgroundColor hsl
BackgroundColor hsl BackgroundColor hsl
@@ -173,21 +178,22 @@ var defaultPixeldrainStyle = pixeldrainStyleSheet{
DangerColor: hsl{339, .65, .31}, DangerColor: hsl{339, .65, .31},
FileBackgroundColor: hsl{0, 0, .20}, FileBackgroundColor: hsl{0, 0, .20},
ScrollbarForegroundColor: hsl{0, 0, .35}, ScrollbarForegroundColor: hsl{0, 0, .35},
ScrollbarHoverColor: hsl{0, 0, .45},
ScrollbarBackgroundColor: hsl{0, 0, 0}, ScrollbarBackgroundColor: hsl{0, 0, 0},
BackgroundColor: hsl{0, 0, 0}, BackgroundColor: hsl{0, 0, 0},
BodyColor: hsl{0, 0, .07}, BodyColor: hsl{0, 0, .07},
Layer1Color: hsl{0, 0, .11}, Layer1Color: hsl{0, 0, .11},
Layer1Shadow: 4, Layer1Shadow: 3,
Layer2Color: hsl{0, 0, .13}, Layer2Color: hsl{0, 0, .13},
Layer2Shadow: 7, Layer2Shadow: 5,
Layer3Color: hsl{0, 0, .14}, Layer3Color: hsl{0, 0, .14},
Layer3Shadow: 10, Layer3Shadow: 7,
Layer4Color: hsl{0, 0, .14}, Layer4Color: hsl{0, 0, .14},
Layer4Shadow: 13, Layer4Shadow: 9,
ShadowColor: hsl{0, 0, 0}, ShadowColor: hsl{0, 0, 0},
ShadowSpread: 10, ShadowSpread: 7,
ShadowIntensity: 0, ShadowIntensity: 0,
} }
@@ -200,21 +206,22 @@ var sunnyPixeldrainStyle = pixeldrainStyleSheet{
DangerColor: hsl{339, .65, .31}, DangerColor: hsl{339, .65, .31},
FileBackgroundColor: hsl{0, 0, 1}, FileBackgroundColor: hsl{0, 0, 1},
ScrollbarForegroundColor: hsl{0, 0, .30}, ScrollbarForegroundColor: hsl{0, 0, .30},
ScrollbarHoverColor: hsl{0, 0, .40},
ScrollbarBackgroundColor: hsl{0, 0, 0}, ScrollbarBackgroundColor: hsl{0, 0, 0},
BackgroundColor: hsl{0, 0, 0}, BackgroundColor: hsl{0, 0, 0},
BodyColor: hsl{0, 0, 1}, BodyColor: hsl{0, 0, 1},
Layer1Color: hsl{0, 0, 1}, Layer1Color: hsl{0, 0, 1},
Layer1Shadow: 4, Layer1Shadow: 3,
Layer2Color: hsl{0, 0, 1}, Layer2Color: hsl{0, 0, 1},
Layer2Shadow: 5, Layer2Shadow: 5,
Layer3Color: hsl{0, 0, 1}, Layer3Color: hsl{0, 0, 1},
Layer3Shadow: 6, Layer3Shadow: 6,
Layer4Color: hsl{0, 0, 1}, Layer4Color: hsl{0, 0, 1},
Layer4Shadow: 7, Layer4Shadow: 5,
ShadowColor: hsl{0, 0, 0}, ShadowColor: hsl{0, 0, 0},
ShadowSpread: 10, ShadowSpread: 7,
ShadowIntensity: 0, ShadowIntensity: 0,
} }
@@ -227,21 +234,22 @@ var solarizedDarkStyle = pixeldrainStyleSheet{
DangerColor: hsl{343, .63, .42}, DangerColor: hsl{343, .63, .42},
FileBackgroundColor: hsl{192, .87, .05}, FileBackgroundColor: hsl{192, .87, .05},
ScrollbarForegroundColor: hsl{192, .95, .30}, ScrollbarForegroundColor: hsl{192, .95, .30},
ScrollbarHoverColor: hsl{192, .95, .40},
ScrollbarBackgroundColor: hsl{0, 0, 0}, ScrollbarBackgroundColor: hsl{0, 0, 0},
BackgroundColor: hsl{192, 1, .05}, BackgroundColor: hsl{192, 1, .05},
BodyColor: hsl{192, .81, .14}, // hsl(192, 81%, 14%) BodyColor: hsl{192, .81, .14}, // hsl(192, 81%, 14%)
Layer1Color: hsl{192, .87, .09}, Layer1Color: hsl{192, .87, .09},
Layer1Shadow: 4, Layer1Shadow: 3,
Layer2Color: hsl{192, .81, .14}, Layer2Color: hsl{192, .81, .14},
Layer2Shadow: 7, Layer2Shadow: 5,
Layer3Color: hsl{192, .95, .17}, Layer3Color: hsl{192, .95, .17},
Layer3Shadow: 10, Layer3Shadow: 7,
Layer4Color: hsl{192, 1, .11}, // hsl(192, 100%, 11%) Layer4Color: hsl{192, 1, .11}, // hsl(192, 100%, 11%)
Layer4Shadow: 13, Layer4Shadow: 9,
ShadowColor: hsl{0, 0, 0}, ShadowColor: hsl{0, 0, 0},
ShadowSpread: 10, ShadowSpread: 7,
ShadowIntensity: 0, ShadowIntensity: 0,
} }
@@ -254,21 +262,22 @@ var maroonStyle = pixeldrainStyleSheet{
DangerColor: hsl{0, .1, .1}, DangerColor: hsl{0, .1, .1},
FileBackgroundColor: hsl{0, 1, .03}, FileBackgroundColor: hsl{0, 1, .03},
ScrollbarForegroundColor: hsl{0, .75, .3}, ScrollbarForegroundColor: hsl{0, .75, .3},
ScrollbarHoverColor: hsl{0, .75, .4},
ScrollbarBackgroundColor: hsl{0, 0, 0}, ScrollbarBackgroundColor: hsl{0, 0, 0},
BackgroundColor: hsl{0, 1, .05}, BackgroundColor: hsl{0, 1, .05},
BodyColor: hsl{0, .6, .1}, BodyColor: hsl{0, .6, .1},
Layer1Color: hsl{0, .5, .07}, Layer1Color: hsl{0, .5, .07},
Layer1Shadow: 4, Layer1Shadow: 3,
Layer2Color: hsl{0, .6, .1}, // hsl{0, .8, .15}, Layer2Color: hsl{0, .6, .1}, // hsl{0, .8, .15},
Layer2Shadow: 7, Layer2Shadow: 5,
Layer3Color: hsl{0, .9, .2}, Layer3Color: hsl{0, .9, .2},
Layer3Shadow: 10, Layer3Shadow: 7,
Layer4Color: hsl{0, .5, .07}, Layer4Color: hsl{0, .5, .07},
Layer4Shadow: 13, Layer4Shadow: 9,
ShadowColor: hsl{0, 0, 0}, ShadowColor: hsl{0, 0, 0},
ShadowSpread: 10, ShadowSpread: 7,
ShadowIntensity: 0, ShadowIntensity: 0,
} }
@@ -281,21 +290,22 @@ var hackerStyle = pixeldrainStyleSheet{
DangerColor: hsl{0, .65, .31}, DangerColor: hsl{0, .65, .31},
FileBackgroundColor: hsl{120, .8, .06}, FileBackgroundColor: hsl{120, .8, .06},
ScrollbarForegroundColor: hsl{120, .5, .25}, ScrollbarForegroundColor: hsl{120, .5, .25},
ScrollbarHoverColor: hsl{120, .5, .35},
ScrollbarBackgroundColor: hsl{0, 0, 0}, ScrollbarBackgroundColor: hsl{0, 0, 0},
BackgroundColor: hsl{0, 0, 0}, BackgroundColor: hsl{0, 0, 0},
BodyColor: hsl{0, 0, 0}, BodyColor: hsl{0, 0, 0},
Layer1Color: hsl{120, .1, .05}, Layer1Color: hsl{120, .1, .05},
Layer1Shadow: 4, Layer1Shadow: 3,
Layer2Color: hsl{120, .2, .10}, Layer2Color: hsl{120, .2, .10},
Layer2Shadow: 7, Layer2Shadow: 5,
Layer3Color: hsl{120, .3, .15}, Layer3Color: hsl{120, .3, .15},
Layer3Shadow: 10, Layer3Shadow: 7,
Layer4Color: hsl{0, 0, .14}, Layer4Color: hsl{0, 0, .14},
Layer4Shadow: 13, Layer4Shadow: 9,
ShadowColor: hsl{0, 0, 0}, ShadowColor: hsl{0, 0, 0},
ShadowSpread: 10, ShadowSpread: 7,
ShadowIntensity: 0, ShadowIntensity: 0,
} }
@@ -308,21 +318,22 @@ var cantaPixeldrainStyle = pixeldrainStyleSheet{
DangerColor: hsl{40, 1, .5}, DangerColor: hsl{40, 1, .5},
FileBackgroundColor: hsl{170, .04, .29}, FileBackgroundColor: hsl{170, .04, .29},
ScrollbarForegroundColor: hsl{150, .02, .78}, ScrollbarForegroundColor: hsl{150, .02, .78},
ScrollbarHoverColor: hsl{150, .02, .88},
ScrollbarBackgroundColor: hsl{170, .05, .26}, ScrollbarBackgroundColor: hsl{170, .05, .26},
BackgroundColor: hsl{0, 0, 0}, BackgroundColor: hsl{0, 0, 0},
BodyColor: hsl{172, .06, .25}, BodyColor: hsl{172, .06, .25},
Layer1Color: hsl{170, .06, .21}, Layer1Color: hsl{170, .06, .21},
Layer1Shadow: 4, Layer1Shadow: 3,
Layer2Color: hsl{160, .04, .31}, Layer2Color: hsl{160, .04, .31},
Layer2Shadow: 7, Layer2Shadow: 5,
Layer3Color: hsl{170, .02, .47}, Layer3Color: hsl{170, .02, .47},
Layer3Shadow: 10, Layer3Shadow: 7,
Layer4Color: hsl{172, .06, .25}, // hsl(172, 6%, 25%) Layer4Color: hsl{172, .06, .25}, // hsl(172, 6%, 25%)
Layer4Shadow: 13, Layer4Shadow: 9,
ShadowColor: hsl{0, 0, 0}, ShadowColor: hsl{0, 0, 0},
ShadowSpread: 10, ShadowSpread: 7,
ShadowIntensity: 0, ShadowIntensity: 0,
} }
@@ -335,20 +346,49 @@ var arcPixeldrainStyle = pixeldrainStyleSheet{
DangerColor: hsl{357, .53, .57}, // hsl(357, 53%, 57%) DangerColor: hsl{357, .53, .57}, // hsl(357, 53%, 57%)
FileBackgroundColor: hsl{219, .1, .2}, FileBackgroundColor: hsl{219, .1, .2},
ScrollbarForegroundColor: hsl{222, .08, .44}, // hsl(222, 8%, 44%) ScrollbarForegroundColor: hsl{222, .08, .44}, // hsl(222, 8%, 44%)
ScrollbarHoverColor: hsl{222, .08, .54}, // hsl(222, 8%, 44%)
ScrollbarBackgroundColor: hsl{223, .12, .2}, // hsl(223, 12%, 29%) ScrollbarBackgroundColor: hsl{223, .12, .2}, // hsl(223, 12%, 29%)
BackgroundColor: hsl{0, 0, 0}, BackgroundColor: hsl{0, 0, 0},
BodyColor: hsl{223, .12, .29}, BodyColor: hsl{223, .12, .29},
Layer1Color: hsl{215, .17, .19}, Layer1Color: hsl{215, .17, .19},
Layer1Shadow: 4, Layer1Shadow: 3,
Layer2Color: hsl{227, .14, .25}, // hsl(227, 14%, 25%) Layer2Color: hsl{227, .14, .25}, // hsl(227, 14%, 25%)
Layer2Shadow: 7, Layer2Shadow: 5,
Layer3Color: hsl{223, .12, .29}, Layer3Color: hsl{223, .12, .29},
Layer3Shadow: 10, Layer3Shadow: 7,
Layer4Color: hsl{219, .15, .22}, // hsl(219, 15%, 22%) Layer4Color: hsl{219, .15, .22}, // hsl(219, 15%, 22%)
Layer4Shadow: 13, Layer4Shadow: 9,
ShadowColor: hsl{0, 0, 0}, ShadowColor: hsl{0, 0, 0},
ShadowSpread: 10, ShadowSpread: 7,
ShadowIntensity: 0,
}
var deepseaPixeldrainStyle = pixeldrainStyleSheet{
TextColor: hsl{0, 0, .7},
InputColor: hsl{41, .58, .47}, // hsl(0, 0%, 11%)
InputTextColor: hsl{0, 0, 0},
HighlightColor: hsl{5, .77, .55},
HighlightTextColor: hsl{0, 0, 0},
DangerColor: hsl{5, .77, .55},
FileBackgroundColor: hsl{159, .27, .17},
ScrollbarForegroundColor: hsl{162, .28, .23}, // hsl(162, 28%, 23%)
ScrollbarHoverColor: hsl{12, .38, .26}, // hsl(12, 38%, 26%)
ScrollbarBackgroundColor: hsl{0, 0, .11}, // hsl(0, 0%, 11%)
BackgroundColor: hsl{0, 0, 0},
BodyColor: hsl{0, 0, .07},
Layer1Color: hsl{160, .27, .09},
Layer1Shadow: 3,
Layer2Color: hsl{163, .26, .11}, // hsl(163, 26%, 11%)
Layer2Shadow: 5,
Layer3Color: hsl{161, .28, .14}, // hsl(161, 28%, 14%)
Layer3Shadow: 7,
Layer4Color: hsl{159, .27, .17}, // hsl(159, 27%, 17%)
Layer4Shadow: 9,
ShadowColor: hsl{0, 0, 0},
ShadowSpread: 7,
ShadowIntensity: 0, ShadowIntensity: 0,
} }

1
webcontroller/web_controller.go
View File

@@ -71,6 +71,7 @@ func New(r *httprouter.Router, prefix string, conf *conf.PixelWebConfig) *WebCon
r.GET(p+"/donation" /* */, wc.serveTemplate("donation", false)) r.GET(p+"/donation" /* */, wc.serveTemplate("donation", false))
r.GET(p+"/widgets" /* */, wc.serveTemplate("widgets", false)) r.GET(p+"/widgets" /* */, wc.serveTemplate("widgets", false))
r.GET(p+"/about" /* */, wc.serveTemplate("about", false)) r.GET(p+"/about" /* */, wc.serveTemplate("about", false))
r.GET(p+"/appearance" /* */, wc.serveTemplate("appearance", false))
// User account pages // User account pages
r.GET(p+"/register" /* */, wc.serveForm(wc.registerForm, false)) r.GET(p+"/register" /* */, wc.serveForm(wc.registerForm, false))