add style engine

res/static/res/script/compiled/home.js

@@ -78,6 +78,11 @@ 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();
+});
 var Cookie;
 (function (Cookie) {
     function read(name) {

res/static/res/style/layout.css

@@ -10,7 +10,7 @@
 html{height: 100%;}
 
 body{
-	background-color: #111;
+	background-color: var(--background_color);
 	background-repeat: repeat;
 	font-size: 16px;
 	font-family: 'Ubuntu', sans-serif;
@@ -20,6 +20,7 @@ body{
 	height: 100%;
 	overflow-x: hidden;
 	color: var(--text_color);
+	filter: hue-rotate(160);
 }
 
 /* Page layout elements */
@@ -39,11 +40,11 @@ body{
 	height: auto;
 	padding: 0px 8px 0px 8px;
 	box-sizing: border-box;
-	background-color: hsl(20, 5%, 14%);;
+	background-color: var(--body_color);
 	margin-top: 30px;
 	margin-bottom: 30px;
 	text-align: left;
-	box-shadow: #000000 8px 8px 50px 5px;
+	box-shadow: var(--shadow_color) 8px 8px var(--shadow_spread) var(--shadow_intensity);
 	z-index: 1;
 	word-break: break-word;
 }
@@ -62,8 +63,8 @@ body{
 }
 .navigation a:hover {
 	background: linear-gradient(var(--highlight_color), var(--highlight_color_dark));
-	box-shadow: var(--highlight_border), 2px 2px 8px #000000;
+	box-shadow: var(--highlight_border), 2px 2px 8px var(--shadow_color);
-	color: #000000;
+	color: var(--highlight_text_color);
 	text-decoration: none;
 }
 .navigation .icon {
@@ -104,9 +105,9 @@ body{
 	padding: 4px 0px 4px 0px;
 	z-index: 101;
 }
-.highlight_light  {background-color: #484848;                border-color: #686868;}
+.highlight_dark   {background-color: var(--accent_color_dark);   border-color: var(--accent_color_dark_border);}
-.highlight_middle {background-color: #3a3a3a;                border-color: #686868;}
+.highlight_middle {background-color: var(--accent_color_medium); border-color: var(--accent_color_medium_border);}
-.highlight_dark   {background-color: #303030;                border-color: #686868;}
+.highlight_light  {background-color: var(--accent_color_light);  border-color: var(--accent_color_light_border);}
 .highlight_green  {background-color: rgba(0, 255, 0, 0.05);  border-color: #00d000;}
 .highlight_blue   {background-color: rgba(32, 32, 255, 0.2); border-color: rgb(54, 54, 255);}
 .highlight_red    {background-color: rgba(255, 0, 0, 0.05);  border-color: #B00000;}
@@ -116,12 +117,12 @@ body{
 
 /* Common elements */
 
-h3{border-bottom: 1px #777 solid;} /* Differentiate it a bit, else it just looks like bold text */
+h3{border-bottom: 1px var(--accent_color_light_border) solid;} /* Differentiate it a bit, else it just looks like bold text */
 
 hr{
 	height: 8px;
 	border: none;
-	background: linear-gradient(#101010, #303030);
+	background: linear-gradient(var(--accent_color_dark), var(--accent_color_light));
 	margin: 16px -8px 16px -8px;
 }
 
@@ -129,8 +130,8 @@ hr{
 	width: 12px;  /* for vertical scrollbars */
 	height: 12px; /* for horizontal scrollbars */
 }
-::-webkit-scrollbar-track {background: rgba(0, 0, 0, 0);}
+::-webkit-scrollbar-track {background: var(--accent_color_dark);}
-::-webkit-scrollbar-thumb {background-color: #555;}
+::-webkit-scrollbar-thumb {background-color: var(--accent_color_light);}
 ::-webkit-scrollbar-corner{background: transparent;}
 
 a       {color: var(--highlight_color); text-decoration: none;}
@@ -143,12 +144,12 @@ a:hover {color: var(--highlight_color); text-decoration: underline;}
 	max-width: 30em;
 }
 table:not(.form) {border-collapse: collapse; width: 100%;}
-tr:not(.form)    {border-bottom: 1px #333 solid;}
+tr:not(.form)    {border-bottom: 1px var(--accent_color_medium_border) solid;}
 tr > td          {padding: 6px;}
 
 pre{
 	padding: 2px;
-	border-bottom: 1px #333 solid;
+	border-bottom: 1px var(--accent_color_medium_border) solid;
 	overflow-x: scroll;
 }
 
@@ -215,8 +216,8 @@ pre{
 	margin: 6px;
 	padding: 0;
 	overflow: hidden;
-	box-shadow: 0px 0px 10px 4px #111;
+	box-shadow: 0px 0px 10px 4px var(--shadow_color);
-	background-color: #111;
+	background-color: var(--file_background_color);
 	color: var(--text_color);
 	word-break: break-all;
 	text-align: left;
@@ -247,14 +248,14 @@ select{
 	border-radius: 4px;
 	border: none;
 	margin: 2px;
-	background: linear-gradient(#606060, #404040);
+	background: linear-gradient(var(--input_color), var(--input_color_dark));
 	padding: 6px 10px 6px 10px;
-	box-shadow: 2px 2px 8px #000000;
+	box-shadow: 2px 2px 8px var(--shadow_color);
 	font-weight: bold;
 	font-size: 0.85em;
 	line-height: 1;
 	text-decoration: none;
-	color: #FFFFFF;
+	color: var(--input_text_color);
 	outline: 0;
 	vertical-align: middle;
 	cursor: pointer;
@@ -272,9 +273,9 @@ input[type="submit"]:focus,
 input[type="button"]:focus,
 input[type="color"]:focus,
 select:focus{
-	color: #FFFFFF;
+	color: var(--input_text_color);
 	text-decoration: none;
-	box-shadow: var(--highlight_border), 2px 2px 8px #000000;
+	box-shadow: var(--highlight_border), 2px 2px 8px var(--shadow_color);
 }
 button:active,
 .button:active,
@@ -282,18 +283,18 @@ input[type="submit"]:active,
 input[type="button"]:active,
 input[type="color"]:active,
 select:active{
-	background: linear-gradient(#404040, #606060);
+	background: linear-gradient(var(--input_color_dark), var(--input_color));
-	box-shadow: inset 3px 3px 6px #000000;
+	box-shadow: inset 3px 3px 6px var(--shadow_color);
 	padding: 8px 8px 4px 12px;
 }
 .button_full_width      {width: calc(100% - 4px);}
-.button_highlight       {background: linear-gradient(var(--highlight_color),      var(--highlight_color_dark)) !important; color: #000000 !important;}
+.button_highlight       {background: linear-gradient(var(--highlight_color),      var(--highlight_color_dark)) !important; color: var(--highlight_text_color) !important;}
-.button_highlight:active{background: linear-gradient(var(--highlight_color_dark), var(--highlight_color)) !important;      color: #000000 !important;}
+.button_highlight:active{background: linear-gradient(var(--highlight_color_dark), var(--highlight_color)) !important;      color: var(--highlight_text_color) !important;}
-.button_red             {background: linear-gradient(#821C40, #61152F) !important;}
+.button_red             {background: linear-gradient(var(--danger_color),         var(--danger_color_dark)) !important;}
-.button_red:active      {background: linear-gradient(#61152F, #821C40) !important;}
+.button_red:active      {background: linear-gradient(var(--danger_color_dark),    var(--danger_color)) !important;}
 
 /* Dropdown list of the select tag */
-option{background-color: #404040; color: #FFFFFF;}
+option{background-color: var(--input_color_dark); color: var(--text_color)}
 
 /* TEXT FIELDS */
 textarea,
@@ -305,10 +306,10 @@ input[type="number"]{
 	border: none;
 	box-sizing: border-box;
 	border-radius: 4px;
-	background: linear-gradient(#404040, #606060);
+	background: linear-gradient(var(--input_color_dark), var(--input_color));
-	box-shadow: inset 3px 3px 6px #000000;
+	box-shadow: inset 3px 3px 6px var(--shadow_color);
 	padding: 3px 5px;
-	color: var(--text_color);
+	color: var(--input_text_color);
 	height: 26px;
 	font-size: 18px;
 	font-family: 'Ubuntu', sans-serif;
@@ -325,7 +326,7 @@ input[type="text"]:focus,
 input[type="password"]:focus,
 input[type="email"]:focus,
 input[type="number"]:focus{
-	box-shadow: var(--highlight_border), inset 3px 3px 6px #000000;
+	box-shadow: var(--highlight_border), inset 3px 3px 6px var(--shadow_color);
 }
 
 input[type=file]{

res/static/res/style/viewer.css

@@ -1,4 +1,4 @@
-/* 
+/*
     Created on : May 22, 2015, 1:20:02 PM
     Author     : Fornax
 */
@@ -86,7 +86,7 @@ body{
 }
 
 .drop-shadow{
-	box-shadow: #000 10px 10px 50px;
+	box-shadow: var(--shadow_color) 10px 10px 50px;
 }
 
 /* ========================
@@ -99,14 +99,14 @@ body{
 	z-index: 52;
 	overflow: hidden;
 	float: left;
-	background-color: #000;
+	background-color: var(--background_color);
 	left: 0;
 	bottom: 0;
 	top: 0;
 	padding: 0;
 	text-align: left;
 	border-right: 2px ridge var(--highlight_color);
-	box-shadow: 2px 2px 8px #000000;
+	box-shadow: 2px 2px 8px var(--shadow_color);
 }
 
 /* Workaround to hide the scrollbar in non webkit browsers, it's really ugly' */
@@ -140,7 +140,7 @@ body{
 	text-align: left;
 }
 .toolbar_button > img {
-	width: 24px; 
+	width: 24px;
 	height: 24px;
 }
 .toolbar_button > span {
@@ -169,8 +169,8 @@ body{
 	overflow-y: scroll;
 	overflow-x: hidden;
 	float: left;
-	background-color: #000;
+	background-color: var(--background_color);
-	box-shadow: 2px 2px 8px #000000;
+	box-shadow: 2px 2px 8px var(--shadow_color);
 	text-align: center;
 	border-right: 2px ridge var(--highlight_color);
 	z-index: 50;
@@ -185,7 +185,7 @@ body{
 .full-popup{
 	position: fixed;
 	display: none;
-	background-color: #000;
+	background-color: var(--background_color);
 	left: 142px;
 	right: 20px;
 	bottom: 20px;
@@ -194,13 +194,16 @@ body{
 	padding: 10px;
 	box-sizing: border-box;
 	text-align: left;
-	box-shadow: #eee 0px 0px 50px;
+	box-shadow: var(--shadow_color) 0px 0px 50px;
 	z-index: 100;
 }
 
+table {width: auto !important;}
+table > tbody > tr {border: none !important;}
+
 .corner-popup{
 	position: fixed;
-	background-color: #000;
+	background-color: var(--background_color);
 	right: 20px;
 	bottom: 20px;
 	width: fit-content;
@@ -208,7 +211,7 @@ body{
 	overflow: hidden;
 	padding: 5px;
 
-	box-shadow: #eee 0px 0px 50px;
+	box-shadow: var(--shadow_color) 0px 0px 50px;
 	z-index: 200;
 }
 
@@ -227,7 +230,7 @@ body{
 }
 
 .bytecounter{
-	color: #eeeeee;
+	color: var(--text_color);
 	font-size: 16px;
 	font-family: 'Ubuntu', sans-serif;
 	text-align: right;
@@ -239,4 +242,4 @@ body{
 	height: 36px;
 	padding: 0;
 	padding-right: 1px;
-}
+}

res/static/res/typescript/home/home.ts

@@ -111,3 +111,9 @@ document.addEventListener('drop', function(e: DragEvent){
 		handleUploads(e.dataTransfer.files)
 	}
 })
+
+// Style selector
+$("input[name=style]").change(function(evt){
+	Cookie.write("style", evt.target.id.substring(6))
+	location.reload()
+})

res/template/account/file_manager.html

@@ -7,7 +7,7 @@
 			.file_manager {
 				position: absolute;
 				padding: 0px 8px 0px 8px;
-				background-color: #252525;
+				background-color: var(--body_color);
 				box-shadow: #000000 8px 8px 50px 5px;
 				left:100px;
 				top:100px;

res/template/account/user_settings.html

@@ -0,0 +1,20 @@
+{{define "user_settings"}}<!DOCTYPE html>
+<html>
+	<head>
+		{{template "meta_tags" .Username}}
+		<script type="text/javascript">var apiEndpoint = '{{.APIEndpoint}}';</script>
+	</head>
+
+	<body>
+		<div id='body' class="body">
+			{{template "menu" .}}
+			<h1>User configuration</h1>
+
+
+
+			{{template "footer"}}
+		</div>
+		{{template "analytics"}}
+	</body>
+</html>
+{{end}}

res/template/home.html

@@ -111,6 +111,14 @@
 				<li>Files are replicated to the Sia network</li>
 				<li>New API and documentation (<a href="/api">Check it out!</a>)</li>
 				<li>Overhauled design, no ugly white glow around the site body</li>
+				<li>Directory management API</li>
+				<li>Multiple complete website styles</li>
+			</ul>
+			<h3>Completed</h3>
+			<ul>
+				<li>File upload / Text upload</li>
+				<li>List creation</li>
+				<li>Registration / Login system</li>
 			</ul>
 			<h3>Upcoming</h3>
 			<ul>
@@ -120,7 +128,7 @@
 				<li>Pasting files from the clipboard</li>
 				<li>Current viewer count on files/lists</li>
 				<li>File revisions (update a file without changing the URL)</li>
-				<li>Proper file manager with directories (still far away)</li>
+				<li>Proper file manager with directories (upcoming)</li>
 				<li>Plenty more!</li>
 			</ul>
 			<h3>Missing</h3>
@@ -133,11 +141,15 @@
 			<ul>
 				<li>Zip explorer</li>
 				<li>Some video formats (mime type detection is not complete)</li>
-				<li>Registration / Login system</li>
 				<li>Bandwidth Tracker</li>
 				<li>View counter</li>
-				<li>Seasonal themes</li>
+				<li>Seasonal themes (thou shalt celebrate christmas!)</li>
 			</ul>
+
+			<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/>
+
 			{{template "footer"}}
 		</div>
 

res/template/paste.html

@@ -13,7 +13,7 @@
 				height: 100%;
 				width: 100%;
 				border: none !important;
-				background: #202020;
+				background: var(--accent_color_dark);
 			}
 		</style>
 	</head>

webcontroller/style.go

@@ -11,11 +11,22 @@ import (
 func (wc *WebController) globalCSSHandler(w http.ResponseWriter, r *http.Request, _ httprouter.Params) {
 	w.Header().Add("Content-Type", "text/css; charset=utf-8")
 
-	var textColor = "hsl(0, 0%, 75%)"
+	var selectedStyle PixeldrainStyleSheet
 
-	// Originals
+	if cookie, err := r.Cookie("style"); err != nil {
-	var highlightColor = "hsl(89, 51%, 50%)"
+		selectedStyle = DefaultPixeldrainStyle
-	var highlightColorDark = "hsl(89, 51%, 40%)"
+	} else {
+		switch cookie.Value {
+		case "solarized_dark":
+			selectedStyle = SolarizedDarkStyle
+			break
+		case "default":
+			fallthrough // use default case
+		default:
+			selectedStyle = DefaultPixeldrainStyle
+			break
+		}
+	}
 
 	// Purple scheme
 	// var highlightColor = "843384"
@@ -23,15 +34,161 @@ func (wc *WebController) globalCSSHandler(w http.ResponseWriter, r *http.Request
 
 	var response = fmt.Sprintf(
 		`:root {
-	--text_color: %s;
+	--text_color:            %s;
-	--highlight_color: %s;
+	--input_color:           %s;
-	--highlight_color_dark: %s;
+	--input_color_dark:      %s;
+	--input_text_color:      %s;
+	--highlight_color:       %s;
+	--highlight_color_dark:  %s;
+	--highlight_text_color:  %s;
+	--danger_color:          %s;
+	--danger_color_dark:     %s;
+	--file_background_color: %s;
+
+	--background_color:           %s;
+	--body_color:                 %s;
+	--accent_color_dark:          %s;
+	--accent_color_dark_border:   %s;
+	--accent_color_medium:        %s;
+	--accent_color_medium_border: %s;
+	--accent_color_light:         %s;
+	--accent_color_light_border:  %s;
+
+	--shadow_color:     %s;
+	--shadow_spread:    %s;
+	--shadow_intensity: %s;
 }
 `,
-		textColor,
+		selectedStyle.TextColor.CSSString(),
-		highlightColor,
+		selectedStyle.InputColor.CSSString(),
-		highlightColorDark,
+		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(),
+		fmt.Sprintf("%dpx", selectedStyle.ShadowSpread),
+		fmt.Sprintf("%dpx", selectedStyle.ShadowIntensity),
 	)
 
 	strings.NewReader(response).WriteTo(w)
 }
+
+type PixeldrainStyleSheet struct {
+	TextColor           HSL
+	InputColor          HSL
+	InputTextColor      HSL
+	HighlightColor      HSL
+	HighlightTextColor  HSL
+	DangerColor         HSL
+	DangerColorDark     HSL
+	FileBackgroundColor HSL
+
+	BackgroundColor   HSL
+	BodyColor         HSL
+	AccentColorDark   HSL
+	AccentColorMedium HSL
+	AccentColorLight  HSL
+
+	ShadowColor     HSL
+	ShadowSpread    int // Pixels
+	ShadowIntensity int // Pixels
+}
+type HSL struct {
+	Hue        int
+	Saturation float64
+	Lightness  float64
+}
+
+func (hsl HSL) CSSString() string {
+	return fmt.Sprintf(
+		"hsl(%d, %.3f%%, %.3f%%)",
+		hsl.Hue,
+		hsl.Saturation*100,
+		hsl.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,
+	}
+	// Hue bounds correction
+	if new.Hue < 0 {
+		new.Hue += 360
+	} else if new.Hue > 360 {
+		new.Hue -= 360
+	}
+	// Saturation bounds check
+	if new.Saturation < 0 {
+		new.Saturation = 0
+	} else if new.Saturation > 1 {
+		new.Saturation = 1
+	}
+	// Lightness bounds check
+	if new.Lightness < 0 {
+		new.Lightness = 0
+	} else if new.Lightness > 1 {
+		new.Lightness = 1
+	}
+
+	return new
+}
+
+// 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},
+
+	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},
+	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},
+
+	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, .05},
+	ShadowSpread:    50,
+	ShadowIntensity: 5,
+}