diff --git a/res/static/img/header_2019.png b/res/static/img/header_2019.png new file mode 100644 index 0000000..4874dbd Binary files /dev/null and b/res/static/img/header_2019.png differ diff --git a/res/static/img/header_2019.xcf b/res/static/img/header_2019.xcf new file mode 100644 index 0000000..58137fe Binary files /dev/null and b/res/static/img/header_2019.xcf differ diff --git a/res/static/script/Viewer.js b/res/static/script/Viewer.js index d871af5..8af345b 100644 --- a/res/static/script/Viewer.js +++ b/res/static/script/Viewer.js @@ -42,12 +42,14 @@ var Viewer = { this.currentFile = file.id; var title = ""; 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 { - 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){ $("#filepreview").html(response); diff --git a/res/static/script/compiled/home.js b/res/static/script/compiled/home.js index f39a63f..08150c8 100644 --- a/res/static/script/compiled/home.js +++ b/res/static/script/compiled/home.js @@ -151,11 +151,6 @@ document.addEventListener('drop', function (e) { 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) { // Create a textarea to copy the text from var ta = document.createElement("textarea"); diff --git a/res/static/style/layout.css b/res/static/style/layout.css index f255443..9190e05 100644 --- a/res/static/style/layout.css +++ b/res/static/style/layout.css @@ -70,15 +70,6 @@ body{ /* Page layout elements */ -.page_wrapper { - position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 0; - overflow: hidden; -} - .button_toggle_navigation { position: absolute; z-index: 300; @@ -92,23 +83,24 @@ body{ border-bottom-right-radius: 90%; box-shadow: 2px 2px 8px -3px var(--shadow_color); } -.page_wrapper > .page_navigation { +.page_navigation { position: absolute; z-index: 100; width: 250px; + top: 0; + bottom: 0; + left: 0; float: left; background-color: var(--layer_1_color); - left: 0; - bottom: 0; - top: 0; padding: 20px 0 0.5em 0; + box-sizing: border-box; overflow-y: auto; overflow-x: hidden; text-align: left; box-shadow: inset -10px 0px 10px -10px var(--shadow_color); transition: left 0.5s; } -.page_wrapper > .page_body { +.page_body { position: absolute; z-index: 200; top: 0; @@ -122,20 +114,18 @@ body{ overflow-x: hidden; z-index: 50; transition: left 0.5s; - padding-top: 40px; - background-image: var(--background_pattern); - background-attachment: local; + padding: 50px 0 50px 0; } @media (max-width: 600px) { - .page_wrapper > .page_navigation { + .page_navigation { left: -250px; } - .page_wrapper > .page_body { + .page_body { left: 0; } } -.page_wrapper > .page_body > .page_content { +.page_body > .page_content { position: relative; display: inline-block; width: 100%; @@ -146,7 +136,7 @@ body{ box-sizing: border-box; clear: both; } -.page_wrapper > .page_body > .page_content > .limit_width { +.page_body > .page_content > .limit_width { position: relative; display: inline-block; max-width: 1000px; @@ -158,7 +148,7 @@ body{ word-break: break-word; clear: both; } -.page_wrapper > .page_body > h1 { +.page_body > h1 { text-shadow: 1px 1px 25px #000000; } @@ -166,12 +156,12 @@ body{ .header_image{ width: 100%; - max-width: 1000px; + max-width: 1200px; margin-top: 30px; margin-bottom: 30px; } -.page_wrapper > .page_navigation a { +.page_navigation a { float: none; display: block; box-sizing: border-box; @@ -188,8 +178,9 @@ body{ transition: background-color 0.5s; border-radius: 5px; } -.page_wrapper > .page_navigation a:hover { +.page_navigation a:hover { background-color: var(--input_color); + color: var(--input_text_color); text-decoration: none; } @@ -286,6 +277,9 @@ hr{ border-radius: 0.5em; 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);} a {color: var(--highlight_color); text-decoration: none;} diff --git a/res/static/style/viewer.css b/res/static/style/viewer.css index 3699ca2..ddae3b3 100644 --- a/res/static/style/viewer.css +++ b/res/static/style/viewer.css @@ -36,12 +36,29 @@ .file_viewer > .highlight_headerbar > .file_viewer_headerbar_title { flex-grow: 1; flex-shrink: 1; + display: flex; + flex-direction: column; overflow: hidden; white-space: nowrap; line-height: 2em; 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) */ .file_viewer > .list_navigator { flex-grow: 0; @@ -60,7 +77,7 @@ } .file_viewer > .list_navigator > .list_item{ height: 2.6em !important; - width: 250px !important; + width: 220px !important; } /* File preview area (row 3) */ @@ -244,7 +261,7 @@ flex-direction: column; opacity: 0; transition: visibility .5s, opacity .5s; - background-color: var(--body_color); + background-color: var(--layer_1_color); border-color: var(--layer_1_color_border); max-height: 100%; max-width: 100%; diff --git a/res/static/typescript/home/home.ts b/res/static/typescript/home/home.ts index 9d17c36..1b9b2ba 100644 --- a/res/static/typescript/home/home.ts +++ b/res/static/typescript/home/home.ts @@ -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 { // Create a textarea to copy the text from var ta = document.createElement("textarea"); diff --git a/res/template/about.html b/res/template/about.html index 273b4fe..ebbdaf2 100644 --- a/res/template/about.html +++ b/res/template/about.html @@ -7,7 +7,7 @@ {{template "page_top" .}} -

About Pixeldrain

+

About pixeldrain

Questions and Answers

@@ -94,7 +94,7 @@ appearance of the website for you.

-

Legality

+

Legality

I cannot be held liable for any illegal and / or copyrighted material that's uploaded by the users of this application. diff --git a/res/template/account/user_files.html b/res/template/account/user_files.html index abab0f8..e080576 100644 --- a/res/template/account/user_files.html +++ b/res/template/account/user_files.html @@ -44,7 +44,7 @@ {{end}} -
+

{{if ne $page 0}} 🡄 4 Pages diff --git a/res/template/account/user_home.html b/res/template/account/user_home.html index 21c6fba..e84361f 100644 --- a/res/template/account/user_home.html +++ b/res/template/account/user_home.html @@ -20,7 +20,7 @@

Your most recently uploaded files:

- {{$files := .PixelAPI.UserFiles 0 18}} + {{$files := .PixelAPI.UserFiles 0 15}} {{range $files.Files}} {{.Name}} @@ -34,7 +34,7 @@

Your most recently created lists:

- {{$lists := .PixelAPI.UserLists 0 18}} + {{$lists := .PixelAPI.UserLists 0 15}} {{range $lists.Lists}} {{.Title}} diff --git a/res/template/account/user_lists.html b/res/template/account/user_lists.html index 9545d2e..fc95810 100644 --- a/res/template/account/user_lists.html +++ b/res/template/account/user_lists.html @@ -38,7 +38,7 @@ {{end}} -
+

{{if ne $page 0}} 🡄 4 Pages diff --git a/res/template/apidoc.html b/res/template/apidoc.html index 34d1810..18a3c83 100644 --- a/res/template/apidoc.html +++ b/res/template/apidoc.html @@ -31,7 +31,7 @@ {{template "page_top" .}} -

Pixeldrain API Documentation

+

Pixeldrain API documentation

@@ -80,10 +80,10 @@ {{template "api-list-post"}} {{template "api-list-get"}} -

Filesystem Methods

- {{template "api-filesystem-path-post"}} - {{template "api-filesystem-path-get"}} - {{template "api-filesystem-path-delete"}} + + {{/*template "api-filesystem-path-post"*/}} + {{/*template "api-filesystem-path-get"*/}} + {{/*template "api-filesystem-path-delete"*/}}
{{template "page_bottom" .}} {{template "analytics"}} diff --git a/res/template/appearance.html b/res/template/appearance.html new file mode 100644 index 0000000..867af40 --- /dev/null +++ b/res/template/appearance.html @@ -0,0 +1,46 @@ +{{define "appearance"}} + + + {{template "meta_tags" "Appearance settings"}} + {{template "user_style" .}} + + + + {{template "page_top" .}} +

Change website appearance

+
+

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

+
+
+
+
+
+ + (Inspired by Canta GTK)
+ + (Inspired by Arc GTK)
+
+ +
+
+ + + {{template "page_bottom"}} + {{template "analytics"}} + + +{{end}} diff --git a/res/template/file_viewer.html b/res/template/file_viewer.html index 6de9a03..3a66df0 100644 --- a/res/template/file_viewer.html +++ b/res/template/file_viewer.html @@ -26,10 +26,15 @@
- Back to the Home page + Back to the Home page - {{.Title}} -
+
+
+
{{.Title}}
+
+
diff --git a/res/template/fragments/meta_tags.html b/res/template/fragments/meta_tags.html index d8392bb..d984b93 100644 --- a/res/template/fragments/meta_tags.html +++ b/res/template/fragments/meta_tags.html @@ -9,9 +9,8 @@ +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."/> diff --git a/res/template/fragments/page_wrap.html b/res/template/fragments/page_wrap.html index ef425d9..b27cfcb 100644 --- a/res/template/fragments/page_wrap.html +++ b/res/template/fragments/page_wrap.html @@ -1,37 +1,34 @@ {{define "page_top"}} -
- - -
- Home -
- {{if .Authenticated}}{{.Username}} - My Files - My Lists - Log out - {{else}} - Login - Register - Upload History - {{end}} -
- About - - API -
-
+ +
+ Home +
+ {{if .Authenticated}}{{.Username}} + My Files + My Lists + Log out + {{else}} + Login + Register + Upload History + {{end}} +
+ About + + API + Appearance +
+
{{end}} {{define "page_bottom"}} -
-
- Pixeldrain is a product by Fornaxian Technologies | - Twitter: @Fornax96 - Reddit: /r/pixeldrain - Medium: Pixeldrain -
-
-
+
+ Pixeldrain is a product by Fornaxian Technologies | + Twitter: @Fornax96 + Reddit: /r/pixeldrain + Medium: Pixeldrain +
+
diff --git a/res/template/home.html b/res/template/home.html index f3f4ae5..9ca7e06 100644 --- a/res/template/home.html +++ b/res/template/home.html @@ -9,7 +9,7 @@ {{template "page_top" .}} - Header image + Header image
@@ -30,7 +30,7 @@
-

What is Pixeldrain?

+

What is pixeldrain?

Pixeldrain is a file sharing website built for speed and ease of use. Pixeldrain does not cost any money, though @@ -60,23 +60,6 @@ For more information see the about page.

- -

Style selector

-

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

-
-
-
-
-
- - (Inspired by Canta GTK)
- - (Inspired by Arc GTK)
- -
diff --git a/webcontroller/user_style.go b/webcontroller/user_style.go index 561c35a..1d6ede6 100644 --- a/webcontroller/user_style.go +++ b/webcontroller/user_style.go @@ -25,6 +25,8 @@ func userStyle(r *http.Request) (style template.CSS) { selectedStyle = cantaPixeldrainStyle case "arc": selectedStyle = arcPixeldrainStyle + case "deepsea": + selectedStyle = deepseaPixeldrainStyle case "default": fallthrough // use default case default: @@ -45,6 +47,7 @@ func userStyle(r *http.Request) (style template.CSS) { --danger_color_dark: %s; --file_background_color: %s; --scrollbar_foreground_color: %s; + --scrollbar_hover_color: %s; --scrollbar_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.FileBackgroundColor.cssString(), selectedStyle.ScrollbarForegroundColor.cssString(), + selectedStyle.ScrollbarHoverColor.cssString(), selectedStyle.ScrollbarBackgroundColor.cssString(), selectedStyle.BackgroundColor.cssString(), selectedStyle.BodyColor.cssString(), @@ -100,6 +104,7 @@ type pixeldrainStyleSheet struct { DangerColor hsl FileBackgroundColor hsl ScrollbarForegroundColor hsl + ScrollbarHoverColor hsl ScrollbarBackgroundColor hsl BackgroundColor hsl @@ -173,21 +178,22 @@ var defaultPixeldrainStyle = pixeldrainStyleSheet{ DangerColor: hsl{339, .65, .31}, FileBackgroundColor: hsl{0, 0, .20}, ScrollbarForegroundColor: hsl{0, 0, .35}, + ScrollbarHoverColor: hsl{0, 0, .45}, ScrollbarBackgroundColor: hsl{0, 0, 0}, BackgroundColor: hsl{0, 0, 0}, BodyColor: hsl{0, 0, .07}, Layer1Color: hsl{0, 0, .11}, - Layer1Shadow: 4, + Layer1Shadow: 3, Layer2Color: hsl{0, 0, .13}, - Layer2Shadow: 7, + Layer2Shadow: 5, Layer3Color: hsl{0, 0, .14}, - Layer3Shadow: 10, + Layer3Shadow: 7, Layer4Color: hsl{0, 0, .14}, - Layer4Shadow: 13, + Layer4Shadow: 9, ShadowColor: hsl{0, 0, 0}, - ShadowSpread: 10, + ShadowSpread: 7, ShadowIntensity: 0, } @@ -200,21 +206,22 @@ var sunnyPixeldrainStyle = pixeldrainStyleSheet{ DangerColor: hsl{339, .65, .31}, FileBackgroundColor: hsl{0, 0, 1}, ScrollbarForegroundColor: hsl{0, 0, .30}, + ScrollbarHoverColor: hsl{0, 0, .40}, ScrollbarBackgroundColor: hsl{0, 0, 0}, BackgroundColor: hsl{0, 0, 0}, BodyColor: hsl{0, 0, 1}, Layer1Color: hsl{0, 0, 1}, - Layer1Shadow: 4, + Layer1Shadow: 3, Layer2Color: hsl{0, 0, 1}, Layer2Shadow: 5, Layer3Color: hsl{0, 0, 1}, Layer3Shadow: 6, Layer4Color: hsl{0, 0, 1}, - Layer4Shadow: 7, + Layer4Shadow: 5, ShadowColor: hsl{0, 0, 0}, - ShadowSpread: 10, + ShadowSpread: 7, ShadowIntensity: 0, } @@ -227,21 +234,22 @@ var solarizedDarkStyle = pixeldrainStyleSheet{ DangerColor: hsl{343, .63, .42}, FileBackgroundColor: hsl{192, .87, .05}, ScrollbarForegroundColor: hsl{192, .95, .30}, + ScrollbarHoverColor: hsl{192, .95, .40}, ScrollbarBackgroundColor: hsl{0, 0, 0}, BackgroundColor: hsl{192, 1, .05}, BodyColor: hsl{192, .81, .14}, // hsl(192, 81%, 14%) Layer1Color: hsl{192, .87, .09}, - Layer1Shadow: 4, + Layer1Shadow: 3, Layer2Color: hsl{192, .81, .14}, - Layer2Shadow: 7, + Layer2Shadow: 5, Layer3Color: hsl{192, .95, .17}, - Layer3Shadow: 10, + Layer3Shadow: 7, Layer4Color: hsl{192, 1, .11}, // hsl(192, 100%, 11%) - Layer4Shadow: 13, + Layer4Shadow: 9, ShadowColor: hsl{0, 0, 0}, - ShadowSpread: 10, + ShadowSpread: 7, ShadowIntensity: 0, } @@ -254,21 +262,22 @@ var maroonStyle = pixeldrainStyleSheet{ DangerColor: hsl{0, .1, .1}, FileBackgroundColor: hsl{0, 1, .03}, ScrollbarForegroundColor: hsl{0, .75, .3}, + ScrollbarHoverColor: hsl{0, .75, .4}, ScrollbarBackgroundColor: hsl{0, 0, 0}, BackgroundColor: hsl{0, 1, .05}, BodyColor: hsl{0, .6, .1}, Layer1Color: hsl{0, .5, .07}, - Layer1Shadow: 4, + Layer1Shadow: 3, Layer2Color: hsl{0, .6, .1}, // hsl{0, .8, .15}, - Layer2Shadow: 7, + Layer2Shadow: 5, Layer3Color: hsl{0, .9, .2}, - Layer3Shadow: 10, + Layer3Shadow: 7, Layer4Color: hsl{0, .5, .07}, - Layer4Shadow: 13, + Layer4Shadow: 9, ShadowColor: hsl{0, 0, 0}, - ShadowSpread: 10, + ShadowSpread: 7, ShadowIntensity: 0, } @@ -281,21 +290,22 @@ var hackerStyle = pixeldrainStyleSheet{ DangerColor: hsl{0, .65, .31}, FileBackgroundColor: hsl{120, .8, .06}, ScrollbarForegroundColor: hsl{120, .5, .25}, + ScrollbarHoverColor: hsl{120, .5, .35}, ScrollbarBackgroundColor: hsl{0, 0, 0}, BackgroundColor: hsl{0, 0, 0}, BodyColor: hsl{0, 0, 0}, Layer1Color: hsl{120, .1, .05}, - Layer1Shadow: 4, + Layer1Shadow: 3, Layer2Color: hsl{120, .2, .10}, - Layer2Shadow: 7, + Layer2Shadow: 5, Layer3Color: hsl{120, .3, .15}, - Layer3Shadow: 10, + Layer3Shadow: 7, Layer4Color: hsl{0, 0, .14}, - Layer4Shadow: 13, + Layer4Shadow: 9, ShadowColor: hsl{0, 0, 0}, - ShadowSpread: 10, + ShadowSpread: 7, ShadowIntensity: 0, } @@ -308,21 +318,22 @@ var cantaPixeldrainStyle = pixeldrainStyleSheet{ DangerColor: hsl{40, 1, .5}, FileBackgroundColor: hsl{170, .04, .29}, ScrollbarForegroundColor: hsl{150, .02, .78}, + ScrollbarHoverColor: hsl{150, .02, .88}, ScrollbarBackgroundColor: hsl{170, .05, .26}, BackgroundColor: hsl{0, 0, 0}, BodyColor: hsl{172, .06, .25}, Layer1Color: hsl{170, .06, .21}, - Layer1Shadow: 4, + Layer1Shadow: 3, Layer2Color: hsl{160, .04, .31}, - Layer2Shadow: 7, + Layer2Shadow: 5, Layer3Color: hsl{170, .02, .47}, - Layer3Shadow: 10, + Layer3Shadow: 7, Layer4Color: hsl{172, .06, .25}, // hsl(172, 6%, 25%) - Layer4Shadow: 13, + Layer4Shadow: 9, ShadowColor: hsl{0, 0, 0}, - ShadowSpread: 10, + ShadowSpread: 7, ShadowIntensity: 0, } @@ -335,20 +346,49 @@ var arcPixeldrainStyle = pixeldrainStyleSheet{ DangerColor: hsl{357, .53, .57}, // hsl(357, 53%, 57%) FileBackgroundColor: hsl{219, .1, .2}, 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%) BackgroundColor: hsl{0, 0, 0}, BodyColor: hsl{223, .12, .29}, Layer1Color: hsl{215, .17, .19}, - Layer1Shadow: 4, + Layer1Shadow: 3, Layer2Color: hsl{227, .14, .25}, // hsl(227, 14%, 25%) - Layer2Shadow: 7, + Layer2Shadow: 5, Layer3Color: hsl{223, .12, .29}, - Layer3Shadow: 10, + Layer3Shadow: 7, Layer4Color: hsl{219, .15, .22}, // hsl(219, 15%, 22%) - Layer4Shadow: 13, + Layer4Shadow: 9, 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, } diff --git a/webcontroller/web_controller.go b/webcontroller/web_controller.go index 22f99d8..e2567f0 100644 --- a/webcontroller/web_controller.go +++ b/webcontroller/web_controller.go @@ -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+"/widgets" /* */, wc.serveTemplate("widgets", false)) r.GET(p+"/about" /* */, wc.serveTemplate("about", false)) + r.GET(p+"/appearance" /* */, wc.serveTemplate("appearance", false)) // User account pages r.GET(p+"/register" /* */, wc.serveForm(wc.registerForm, false))