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

Add Maroon style

Browse Source
This commit is contained in:
Wim Brand
2019-02-18 22:42:20 +01:00
parent 88bcb13bf2
commit b5c165b9d3
9 changed files with 183 additions and 206 deletions
Download Patch File Download Diff File Expand all files Collapse all files

116
res/static/misc/widgets.html
View File

@@ -1,116 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<title>PixelDrain ~ Free file sharing service</title>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link rel="stylesheet" href="/global.css"/>
<link rel="stylesheet" href="/res/style/home.css"/>
<link rel="stylesheet" href="/res/style/layout.css"/>
<link rel="stylesheet" href="/res/style/history.css"/>
<link href='https://fonts.googleapis.com/css?family=Ubuntu' rel='stylesheet' type='text/css'/>
<link href="https://fonts.googleapis.com/css?family=Lato:100" rel="stylesheet" type="text/css"/>
<link rel="shortcut icon" href="/res/img/tray32.png"/>
<meta name="theme-color" content="#9FCF6C"/>
<link rel="icon" sizes="180x180" href="/res/img/pixeldrain.png"/>
<link rel="icon" sizes="256x256" href="/res/img/pixeldrain_big.png"/>
<style>
body, .checkers{
background-image: url("/res/img/checker9.png");
background-attachment: fixed;
}
</style>
<script src="/res/script/jquery-2.1.4.min.js"></script>
<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.
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:title" content="Home ~ PixelDrain" />
<meta property="og:site_name" content="PixelDrain" />
<meta property="og:description" content="Instant file and screenshot sharing." />
<meta property="og:url" content="http://pixeldra.in/" />
<meta property="og:image" content="/res/img/pixeldrain_big.png" />
<meta property="og:image:type" content="image/png" />
</head>
<body>
<img id="header-image" src="/res/img/header_blackchancery.png" alt="Header image"/>
<div id="body" class="body">
<div class="highlight_light border-top border-bottom menu">
<a href="/">Home</a> ~
<a href="/history">My&nbsp;Files</a> ~
<a href="/api">API&nbsp;Documentation</a>
</div>
<div class="highlight_middle border-bottom">
<input id="fileInputField" type="file" name="file" multiple='multiple'/>
<button id="selectFileButton" class="big_button button_highlight">Upload Files</button>
<button id="textButton" class="big_button button_highlight" onClick="window.location.href = '/t/'">Upload Text</button><br/>
<div id="progress-bar" class="progress-bar">
<span class="progress-text"></span>
<div id="upload-progress" class="progressbar-inner">
<span class="progress-text"></span>
</div>
</div>
<div id="uploads-completed"></div>
</div>
<div class="highlight_dark border-bottom">
<button id="btnCreateList">Create list with uploaded files</button>
</div>
<h1>Widgets testing page</h1>
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/>
<div class="highlight_dark border-top border-bottom">
Pixeldrain is a product by <a href="//fornaxian.com" target="_blank">Fornaxian Technologies</a>.
</div>
</div>
</body>
</html>

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

@@ -168,7 +168,7 @@ h3{font-size: 1.5em; font-family: "Lato Thin";}
h4{font-size: 1.25em; font-family: "Lato";} h4{font-size: 1.25em; font-family: "Lato";}
h5{font-size: 1em; font-family: "Lato";} h5{font-size: 1em; font-family: "Lato";}
h6{font-size: .75em; font-family: "Lato";} h6{font-size: .75em; font-family: "Lato";}
h3{border-bottom: 1px var(--accent_color_light_border) solid;} /* Differentiate it a bit, else it just looks like bold text */ h3, h2{border-bottom: 1px var(--accent_color_light_border) solid;} /* Differentiate it a bit, else it just looks like bold text */
hr{ hr{
height: 8px; height: 8px;

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

@@ -14,7 +14,7 @@
in this browser. in this browser.
</div> </div>
{{$limit := 100}} {{$limit := 200}}
{{$page := .URLQuery.Get "page" | pageNr}} {{$page := .URLQuery.Get "page" | pageNr}}
{{$files := .PixelAPI.UserFiles $page $limit}} {{$files := .PixelAPI.UserFiles $page $limit}}
<div class="highlight_dark"> <div class="highlight_dark">

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

@@ -9,8 +9,8 @@
<body> <body>
<div id='body' class="body"> <div id='body' class="body">
{{template "menu" .}} {{template "menu" .}}
<h1>Welcome home, {{.Username}}!</h1>
<hr/> <h1 class="highlight_middle border_bottom">Welcome home, {{.Username}}!</h1>
<h2>Your most recently uploaded files:</h2> <h2>Your most recently uploaded files:</h2>
<div class="highlight_dark border_top border_bottom"> <div class="highlight_dark border_top border_bottom">
{{$files := .PixelAPI.UserFiles 0 18}} {{$files := .PixelAPI.UserFiles 0 18}}
@@ -25,7 +25,6 @@
<br/> <br/>
<a href="/user/files" class="button">...All my files</a> <a href="/user/files" class="button">...All my files</a>
</div> </div>
<br/>
<h2>Your most recently created lists:</h2> <h2>Your most recently created lists:</h2>
<div class="highlight_dark border_top border_bottom"> <div class="highlight_dark border_top border_bottom">
{{$lists := .PixelAPI.UserLists 0 18}} {{$lists := .PixelAPI.UserLists 0 18}}
@@ -41,8 +40,6 @@
<br/> <br/>
<a href="/user/lists" class="button">...All my lists</a> <a href="/user/lists" class="button">...All my lists</a>
</div> </div>
<hr/>
{{template "footer"}} {{template "footer"}}
</div> </div>
{{template "analytics"}} {{template "analytics"}}

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

@@ -8,7 +8,7 @@
<body> <body>
{{template "menu" .}} {{template "menu" .}}
{{$limit := 100}} {{$limit := 200}}
{{$page := .URLQuery.Get "page" | pageNr}} {{$page := .URLQuery.Get "page" | pageNr}}
{{$lists := .PixelAPI.UserLists $page $limit}} {{$lists := .PixelAPI.UserLists $page $limit}}
<div class="highlight_dark"> <div class="highlight_dark">

1
res/template/home.html
View File

@@ -128,6 +128,7 @@
<h2>Style selector</h2> <h2>Style selector</h2>
<input type="radio" id="style_default" name="style"><label for="style_default">Default Pixeldrain Style</label><br/> <input type="radio" id="style_default" name="style"><label for="style_default">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_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/>
{{template "footer"}} {{template "footer"}}
</div> </div>

74
res/template/widgets.html Normal file
View File

@@ -0,0 +1,74 @@
{{define "widgets"}}
<!DOCTYPE html>
<html>
<head>
{{template "meta_tags" "Widget showcase"}}
{{template "user_style" .}}
<script type="text/javascript">var apiEndpoint = '{{.APIEndpoint}}';</script>
</head>
<body>
<img id="header_image" class="header_image" src="/res/img/header_neuropol.png" alt="Header image"/>
<br/>
<div id="body" class="body">
{{template "menu" .}}
<h1>Widget showcase</h1>
<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_light border_top">Light highlight</div>
<div class="highlight_middle">Middle highlight</div>
<div class="highlight_dark border_bottom">Dark highlight</div>
<br/>
<div class="highlight_light border_bottom border_top">Light highlight with borders</div>
<div class="highlight_middle border_bottom border_top">Middle highlight with borders</div>
<div class="highlight_dark border_bottom border_top">Dark highlight with borders</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/>
{{template "footer"}}
</div>
</body>
</html>
{{end}}

184
webcontroller/user_style.go
View File

@@ -7,27 +7,26 @@ import (
) )
func userStyle(r *http.Request) (style template.CSS) { func userStyle(r *http.Request) (style template.CSS) {
var selectedStyle PixeldrainStyleSheet var selectedStyle pixeldrainStyleSheet
if cookie, err := r.Cookie("style"); err != nil { if cookie, err := r.Cookie("style"); err != nil {
selectedStyle = DefaultPixeldrainStyle selectedStyle = defaultPixeldrainStyle
} else { } else {
switch cookie.Value { switch cookie.Value {
case "solarized_dark": case "solarized_dark":
selectedStyle = SolarizedDarkStyle selectedStyle = solarizedDarkStyle
break
case "maroon":
selectedStyle = maroonStyle
break break
case "default": case "default":
fallthrough // use default case fallthrough // use default case
default: default:
selectedStyle = DefaultPixeldrainStyle selectedStyle = defaultPixeldrainStyle
break break
} }
} }
// Purple scheme
// var highlightColor = "843384"
// var highlightColorDark = "672867"
return template.CSS(fmt.Sprintf( return template.CSS(fmt.Sprintf(
`:root { `:root {
--text_color: %s; --text_color: %s;
@@ -54,71 +53,71 @@ func userStyle(r *http.Request) (style template.CSS) {
--shadow_spread: %s; --shadow_spread: %s;
--shadow_intensity: %s; --shadow_intensity: %s;
}`, }`,
selectedStyle.TextColor.CSSString(), selectedStyle.TextColor.cssString(),
selectedStyle.InputColor.CSSString(), selectedStyle.InputColor.cssString(),
selectedStyle.InputColor.Add(0, 0, -.1).CSSString(), selectedStyle.InputColor.add(0, 0, -.08).cssString(),
selectedStyle.InputTextColor.CSSString(), selectedStyle.InputTextColor.cssString(),
selectedStyle.HighlightColor.CSSString(), selectedStyle.HighlightColor.cssString(),
selectedStyle.HighlightColor.Add(0, 0, -.1).CSSString(), selectedStyle.HighlightColor.add(0, 0, -.08).cssString(),
selectedStyle.HighlightTextColor.CSSString(), selectedStyle.HighlightTextColor.cssString(),
selectedStyle.DangerColor.CSSString(), selectedStyle.DangerColor.cssString(),
selectedStyle.DangerColorDark.CSSString(), selectedStyle.DangerColorDark.cssString(),
selectedStyle.FileBackgroundColor.CSSString(), selectedStyle.FileBackgroundColor.cssString(),
selectedStyle.BackgroundColor.CSSString(), selectedStyle.BackgroundColor.cssString(),
selectedStyle.BodyColor.CSSString(), selectedStyle.BodyColor.cssString(),
selectedStyle.AccentColorDark.CSSString(), selectedStyle.AccentColorDark.cssString(),
selectedStyle.AccentColorDark.Add(0, 0, .15).CSSString(), selectedStyle.AccentColorDark.add(0, 0, .15).cssString(),
selectedStyle.AccentColorMedium.CSSString(), selectedStyle.AccentColorMedium.cssString(),
selectedStyle.AccentColorMedium.Add(0, 0, .15).CSSString(), selectedStyle.AccentColorMedium.add(0, 0, .15).cssString(),
selectedStyle.AccentColorLight.CSSString(), selectedStyle.AccentColorLight.cssString(),
selectedStyle.AccentColorLight.Add(0, 0, .15).CSSString(), selectedStyle.AccentColorLight.add(0, 0, .15).cssString(),
selectedStyle.ShadowColor.CSSString(), selectedStyle.ShadowColor.cssString(),
fmt.Sprintf("%dpx", selectedStyle.ShadowSpread), fmt.Sprintf("%dpx", selectedStyle.ShadowSpread),
fmt.Sprintf("%dpx", selectedStyle.ShadowIntensity), fmt.Sprintf("%dpx", selectedStyle.ShadowIntensity),
)) ))
} }
type PixeldrainStyleSheet struct { type pixeldrainStyleSheet struct {
TextColor HSL TextColor hsl
InputColor HSL InputColor hsl // Buttons, text fields
InputTextColor HSL InputTextColor hsl
HighlightColor HSL HighlightColor hsl // Links, highlighted buttons, list navigation
HighlightTextColor HSL HighlightTextColor hsl // Text on buttons
DangerColor HSL DangerColor hsl
DangerColorDark HSL DangerColorDark hsl
FileBackgroundColor HSL FileBackgroundColor hsl
BackgroundColor HSL BackgroundColor hsl
BodyColor HSL BodyColor hsl
AccentColorDark HSL AccentColorDark hsl
AccentColorMedium HSL AccentColorMedium hsl
AccentColorLight HSL AccentColorLight hsl
ShadowColor HSL ShadowColor hsl
ShadowSpread int // Pixels ShadowSpread int // Pixels
ShadowIntensity int // Pixels ShadowIntensity int // Pixels
} }
type HSL struct { type hsl struct {
Hue int Hue int
Saturation float64 Saturation float64
Lightness float64 Lightness float64
} }
func (hsl HSL) CSSString() string { func (h hsl) cssString() string {
return fmt.Sprintf( return fmt.Sprintf(
"hsl(%d, %.3f%%, %.3f%%)", "hsl(%d, %.3f%%, %.3f%%)",
hsl.Hue, h.Hue,
hsl.Saturation*100, h.Saturation*100,
hsl.Lightness*100, h.Lightness*100,
) )
} }
// Add returns a NEW HSL struct, it doesn't modify the current one // Add returns a NEW HSL struct, it doesn't modify the current one
func (hsl HSL) Add(hue int, saturation float64, lightness float64) HSL { func (h hsl) add(hue int, saturation float64, lightness float64) hsl {
var new = HSL{ var new = hsl{
hsl.Hue + hue, h.Hue + hue,
hsl.Saturation + saturation, h.Saturation + saturation,
hsl.Lightness + lightness, h.Lightness + lightness,
} }
// Hue bounds correction // Hue bounds correction
if new.Hue < 0 { if new.Hue < 0 {
@@ -144,44 +143,65 @@ func (hsl HSL) Add(hue int, saturation float64, lightness float64) HSL {
// Following are all the available styles // Following are all the available styles
var DefaultPixeldrainStyle = PixeldrainStyleSheet{ var defaultPixeldrainStyle = pixeldrainStyleSheet{
TextColor: HSL{0, 0, .75}, TextColor: hsl{0, 0, .75},
InputColor: HSL{0, 0, .38}, InputColor: hsl{0, 0, .38},
InputTextColor: HSL{0, 0, 1}, InputTextColor: hsl{0, 0, 1},
HighlightColor: HSL{89, .51, .5}, HighlightColor: hsl{89, .51, .5},
HighlightTextColor: HSL{0, 0, 0}, HighlightTextColor: hsl{0, 0, 0},
DangerColor: HSL{339, .65, .31}, DangerColor: hsl{339, .65, .31},
DangerColorDark: HSL{339, .64, .23}, DangerColorDark: hsl{339, .64, .23},
FileBackgroundColor: HSL{0, 0, 0}, FileBackgroundColor: hsl{0, 0, 0},
BackgroundColor: HSL{0, 0, .05}, BackgroundColor: hsl{0, 0, .05},
BodyColor: HSL{20, .05, .14}, BodyColor: hsl{20, .05, .14},
AccentColorDark: HSL{0, 0, .19}, AccentColorDark: hsl{0, 0, .19},
AccentColorMedium: HSL{0, 0, .23}, AccentColorMedium: hsl{0, 0, .23},
AccentColorLight: HSL{0, 0, .28}, AccentColorLight: hsl{0, 0, .28},
ShadowColor: HSL{0, 0, 0}, ShadowColor: hsl{0, 0, 0},
ShadowSpread: 50, ShadowSpread: 50,
ShadowIntensity: 5, ShadowIntensity: 5,
} }
var SolarizedDarkStyle = PixeldrainStyleSheet{ var solarizedDarkStyle = pixeldrainStyleSheet{
TextColor: HSL{0, 0, .75}, TextColor: hsl{0, 0, .75},
InputColor: HSL{192, .95, .30}, InputColor: hsl{192, .95, .30},
InputTextColor: HSL{0, 0, 1}, InputTextColor: hsl{0, 0, 1},
HighlightColor: HSL{145, .63, .42}, HighlightColor: hsl{145, .63, .42},
HighlightTextColor: HSL{0, 0, 1}, HighlightTextColor: hsl{0, 0, 1},
DangerColor: HSL{343, .63, .42}, DangerColor: hsl{343, .63, .42},
DangerColorDark: HSL{343, .63, .36}, DangerColorDark: hsl{343, .63, .36},
FileBackgroundColor: HSL{192, .87, .05}, FileBackgroundColor: hsl{192, .87, .05},
BackgroundColor: HSL{192, 1, .05}, BackgroundColor: hsl{192, 1, .05},
BodyColor: HSL{192, 1, .11}, BodyColor: hsl{192, 1, .11},
AccentColorDark: HSL{192, .87, .09}, AccentColorDark: hsl{192, .87, .09},
AccentColorMedium: HSL{192, .81, .14}, AccentColorMedium: hsl{192, .81, .14},
AccentColorLight: HSL{192, .95, .17}, AccentColorLight: hsl{192, .95, .17},
ShadowColor: HSL{192, .87, 0}, ShadowColor: hsl{192, .87, 0},
ShadowSpread: 50,
ShadowIntensity: 5,
}
var maroonStyle = pixeldrainStyleSheet{
TextColor: hsl{0, 0, .7},
InputColor: hsl{0, .75, .2},
InputTextColor: hsl{0, 0, 1},
HighlightColor: hsl{0, 1, .4},
HighlightTextColor: hsl{0, 0, 1},
DangerColor: hsl{0, .1, .1},
DangerColorDark: hsl{0, 0, 0},
FileBackgroundColor: hsl{0, 1, .03},
BackgroundColor: hsl{0, 1, .05},
BodyColor: hsl{0, .6, .1},
AccentColorDark: hsl{0, .5, .07},
AccentColorMedium: hsl{0, .8, .15},
AccentColorLight: hsl{0, .9, .2},
ShadowColor: hsl{192, .87, 0},
ShadowSpread: 50, ShadowSpread: 50,
ShadowIntensity: 5, ShadowIntensity: 5,
} }

1
webcontroller/web_controller.go
View File

@@ -56,6 +56,7 @@ func New(r *httprouter.Router, prefix string, conf *conf.PixelWebConfig) *WebCon
r.GET(p+"/l/:id" /* */, wc.serveListViewer) r.GET(p+"/l/:id" /* */, wc.serveListViewer)
r.GET(p+"/t" /* */, wc.serveTemplate("paste", false)) r.GET(p+"/t" /* */, wc.serveTemplate("paste", false))
r.GET(p+"/donation" /* */, wc.serveTemplate("donation", false)) r.GET(p+"/donation" /* */, wc.serveTemplate("donation", false))
r.GET(p+"/widgets" /* */, wc.serveTemplate("widgets", false))
// User account pages // User account pages
r.GET(p+"/register" /* */, wc.serveRegister) r.GET(p+"/register" /* */, wc.serveRegister)