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";}
h5{font-size: 1em; 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{
height: 8px;

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

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

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

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

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

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

1
res/template/home.html
View File

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