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

Lots of style fixes

Browse Source
This commit is contained in:
Wim Brand
2019-07-17 23:19:57 +02:00
parent 67824d617d
commit 177219feb7
20 changed files with 360 additions and 448 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
res/static/script/ListNavigator.js
View File

@@ -67,13 +67,13 @@ var ListNavigator = {
this.addToHistory(index); this.addToHistory(index);
$("#listNavigatorItems").find("*").css("border-color", "#333"); $("#listNavigatorItems").find("*").removeClass("list_item_selected");
$("#listNavigatorItems div").eq(this.position).css("border-color", "#fff"); $("#listNavigatorItems div").eq(this.position).addClass("list_item_selected");
// This centers the scroll bar exactly on the selected item // This centers the scroll bar exactly on the selected item
$("#listNavigatorItems").animate( $("#listNavigatorItems").animate(
{ {
scrollLeft: (this.position * 109) - (($("#listNavigatorItems").width() / 2) - 55) scrollLeft: ((this.position * 109) + (109/2)) - ($("#listNavigator").width() / 2)
}, { }, {
duration: 1000, duration: 1000,
queue: false queue: false
@@ -110,8 +110,8 @@ var ListNavigator = {
}, },
loadThumbnails: function(index){ loadThumbnails: function(index){
var startPos = +index - 30; var startPos = +index - 50;
var endPos = +index + 30; var endPos = +index + 50;
// fyi, the + is to let javascript know it's actually a number instead of a string // fyi, the + is to let javascript know it's actually a number instead of a string
if(startPos < 0){ if(startPos < 0){
@@ -126,12 +126,17 @@ var ListNavigator = {
var navigatorItems = document.getElementById("listNavigatorItems").children var navigatorItems = document.getElementById("listNavigatorItems").children
for (i = startPos; i <= endPos; i++){ for (i = startPos; i <= endPos; i++){
if (navigatorItems[i].innerHTML.includes("listItemThumbnail")) {
console.log("skip");
continue;
}
var thumb = "/api/file/" + this.data[i].id + "/thumbnail"; var thumb = "/api/file/" + this.data[i].id + "/thumbnail";
var name = this.data[i].name; var name = this.data[i].name;
var itemHtml = escapeHTML(name) + "<br>" var itemHtml = escapeHTML(name) + "<br>"
+ "<img src=\"" + thumb + "\" " + "<img src=\"" + thumb + "\" "
+ "class=\"listItemThumbnail lazy\" alt=\"" + escapeHTML(name) + "\"/>"; + "class=\"listItemThumbnail\" alt=\"" + escapeHTML(name) + "\"/>";
navigatorItems[i].innerHTML = itemHtml; navigatorItems[i].innerHTML = itemHtml;
} }
@@ -165,6 +170,22 @@ var ListNavigator = {
this.setItem(0); this.setItem(0);
} }
var btnLastItem = document.createElement("button");
btnLastItem.innerText = "◀";
btnLastItem.setAttribute("id", "button_last_item");
btnLastItem.setAttribute("class", "button_highlight");
btnLastItem.setAttribute("onClick", "ListNavigator.previousItem();");
var btnNextItem = document.createElement("button");
btnNextItem.innerText = "▶";
btnNextItem.setAttribute("id", "button_next_item");
btnNextItem.setAttribute("class", "button_highlight");
btnNextItem.setAttribute("onClick", "ListNavigator.nextItem();");
var headerbar = document.getElementById("list_navigator_buttons");
headerbar.appendChild(btnLastItem);
headerbar.appendChild(btnNextItem);
// Add the list download button to the toolbar // Add the list download button to the toolbar
var btnDownloadList = document.createElement("button"); var btnDownloadList = document.createElement("button");
btnDownloadList.setAttribute("id", "btnDownloadList"); btnDownloadList.setAttribute("id", "btnDownloadList");
@@ -199,16 +220,8 @@ var ListNavigator = {
btnShuffle.appendChild(btnShuffleText); btnShuffle.appendChild(btnShuffleText);
document.getElementById("btnShare").after(btnShuffle); document.getElementById("btnShare").after(btnShuffle);
// We need to adjust the height of some elements to make the navigation bar fit // Make the navigator visible
var navHeight = $("#listNavigator").height() + 2; document.getElementById("listNavigator").style.display = "inline-block";
window.setTimeout(function(){
document.getElementById("listNavigator").style.top = "0px";
document.getElementById("filepreview").style.top = navHeight+"px";
document.getElementById("toolbar").style.top = navHeight+"px";
document.getElementById("button-expand-toolbar").style.top = navHeight+"px";
document.getElementById("sharebar").style.top = navHeight+"px";
}, 200);
} }
}; };

4
res/static/script/Toolbar.js
View File

@@ -9,7 +9,7 @@
/* global Viewer */ /* global Viewer */
var Toolbar = { var Toolbar = {
visible: true, visible: false,
toggle: function () { toggle: function () {
if (this.visible) { if (this.visible) {
if (Sharebar.visible) { if (Sharebar.visible) {
@@ -18,11 +18,13 @@ var Toolbar = {
document.getElementById("toolbar").style.left = "-9em"; document.getElementById("toolbar").style.left = "-9em";
document.getElementById("filepreview").style.left = "0px"; document.getElementById("filepreview").style.left = "0px";
document.getElementById("button_toggle_toolbar").classList.remove("button_highlight");
this.visible = false; this.visible = false;
} else { } else {
document.getElementById("toolbar").style.left = "0px"; document.getElementById("toolbar").style.left = "0px";
document.getElementById("filepreview").style.left = "8em"; document.getElementById("filepreview").style.left = "8em";
document.getElementById("button_toggle_toolbar").classList.add("button_highlight");
this.visible = true; this.visible = true;
} }

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

@@ -14,7 +14,7 @@ var Viewer = {
} }
// On small screens the toolbar takes too much space, so it collapses automatically // On small screens the toolbar takes too much space, so it collapses automatically
if($("#filepreview").width() < 400 && Toolbar.visible){ if($("#filepreview").width() > 400 && !Toolbar.visible){
Toolbar.toggle(); Toolbar.toggle();
} }
@@ -34,7 +34,14 @@ var Viewer = {
}, },
setFile: function(file){ setFile: function(file){
this.currentFile = file.id; this.currentFile = file.id;
document.title = file.name + " ~ PixelDrain"; var title = "";
if (this.isList) {
title = this.title + " ~ " + file.name;
} else {
title = file.name;
}
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);

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

@@ -141,6 +141,7 @@ body{
} }
} }
.highlight_headerbar,
.highlight_dark, .highlight_dark,
.highlight_middle, .highlight_middle,
.highlight_light, .highlight_light,
@@ -157,17 +158,17 @@ body{
padding: .5em; padding: .5em;
z-index: 101; z-index: 101;
} }
.highlight_headerbar {
background-color: var(--accent_color_headerbar);
box-shadow: 1px 1px 3px -1px var(--shadow_color);}
.highlight_dark { .highlight_dark {
background-color: var(--accent_color_dark); background-color: var(--accent_color_dark);
border-color: var(--accent_color_dark_border);
box-shadow: inset 1px 1px 8px -1px var(--shadow_color);} box-shadow: inset 1px 1px 8px -1px var(--shadow_color);}
.highlight_middle { .highlight_middle {
background-color: var(--accent_color_medium); background-color: var(--accent_color_medium);
border-color: var(--accent_color_medium_border);
box-shadow: inset 1px 1px 6px -1px var(--shadow_color);} box-shadow: inset 1px 1px 6px -1px var(--shadow_color);}
.highlight_light { .highlight_light {
background-color: var(--accent_color_light); background-color: var(--accent_color_light);
border-color: var(--accent_color_light_border);
box-shadow: 1px 1px 4px var(--shadow_color);} box-shadow: 1px 1px 4px var(--shadow_color);}
.highlight_green { .highlight_green {
background-color: rgba(0, 255, 0, 0.05); background-color: rgba(0, 255, 0, 0.05);
@@ -179,18 +180,15 @@ body{
background-color: rgba(255, 0, 0, 0.1); background-color: rgba(255, 0, 0, 0.1);
border-color: #B00000;} border-color: #B00000;}
body > .highlight_dark, .highlight_green,
body > .highlight_middle, .highlight_blue,
body > .highlight_light, .highlight_red {
body > .highlight_green, border-top-width: 1px;
body > .highlight_blue, border-top-style: solid;
body > .highlight_red { border-bottom-width: 1px;
margin: 0; border-bottom-style: solid;
} }
.border_top {border-top-width: 1px; border-top-style: solid;}
.border_bottom {border-bottom-width: 1px; border-bottom-style: solid;}
/* Common elements */ /* Common elements */
h1, h2, h3, h4, h5, h6 { h1, h2, h3, h4, h5, h6 {
@@ -261,7 +259,7 @@ pre{
min-width: 200px; min-width: 200px;
max-width: 400px; max-width: 400px;
margin: 10px !important; margin: 10px !important;
border-radius: 10px; border-radius: 5px;
font-size: 1.9em; font-size: 1.9em;
font-weight: normal; font-weight: normal;
line-height: 8px; line-height: 8px;
@@ -303,8 +301,8 @@ pre{
margin: 6px; margin: 6px;
padding: 0; padding: 0;
overflow: hidden; overflow: hidden;
border-radius: 0.4em; border-radius: 5px;
box-shadow: 2px 2px 8px -1px var(--shadow_color); box-shadow: 2px 2px 8px -3px var(--shadow_color);
/* border: 1px solid var(--accent_color_dark); */ /* border: 1px solid var(--accent_color_dark); */
background-color: var(--file_background_color); background-color: var(--file_background_color);
color: #bfbfbf; /* Fallback */ color: #bfbfbf; /* Fallback */
@@ -342,12 +340,12 @@ input[type="color"],
select{ select{
display: inline-block; display: inline-block;
box-sizing: border-box; box-sizing: border-box;
border-radius: 4px; border-radius: 2px;
border: none; border: none;
margin: 2px; margin: 3px;
background: linear-gradient(var(--input_color), var(--input_color_dark)); background: linear-gradient(var(--input_color), var(--input_color_dark));
padding: 6px 8px 6px 8px; padding: 6px 8px 6px 8px;
box-shadow: 2px 2px 6px -2px var(--shadow_color); box-shadow: 2px 2px 6px -3px var(--shadow_color);
font-weight: bold; font-weight: bold;
font-size: 0.85em; font-size: 0.85em;
overflow: hidden; overflow: hidden;
@@ -375,7 +373,7 @@ select:focus{
color: #bfbfbf; /* Fallback */ color: #bfbfbf; /* Fallback */
color: var(--input_text_color); color: var(--input_text_color);
text-decoration: none; text-decoration: none;
box-shadow: var(--highlight_border), 2px 2px 6px -2px var(--shadow_color); box-shadow: var(--highlight_border), 2px 2px 6px -3px var(--shadow_color);
} }
button:active, button:active,
.button:active, .button:active,
@@ -385,13 +383,13 @@ input[type="color"]:active,
select:active{ select:active{
background: linear-gradient(var(--input_color_dark), var(--input_color)); background: linear-gradient(var(--input_color_dark), var(--input_color));
box-shadow: inset 4px 4px 8px var(--shadow_color); box-shadow: inset 4px 4px 8px var(--shadow_color);
padding: 11px 3px 1px 13px; /* Exactly 5px offset compared to the inactive padding to give a depth effect */ padding: 10px 4px 2px 12px; /* Exactly 4px offset compared to the inactive padding to give a depth effect */
} }
.button_full_width {width: calc(100% - 4px);} .button_full_width {width: calc(100% - 6px);}
.button_highlight {background: linear-gradient(var(--highlight_color), var(--highlight_color_dark)) !important; color: var(--highlight_text_color) !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: var(--highlight_text_color) !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(var(--danger_color), var(--danger_color_dark)) !important;} .button_red {background: linear-gradient(var(--danger_color), var(--danger_color_dark)) !important; color: var(--highlight_text_color) !important;}
.button_red:active {background: linear-gradient(var(--danger_color_dark), var(--danger_color)) !important;} .button_red:active {background: linear-gradient(var(--danger_color_dark), var(--danger_color)) !important; color: var(--highlight_text_color) !important;}
/* Dropdown list of the select tag */ /* Dropdown list of the select tag */
option{ option{
@@ -411,7 +409,7 @@ input[type="number"]{
box-sizing: border-box; box-sizing: border-box;
border-radius: 4px; border-radius: 4px;
background: linear-gradient(var(--input_color_dark), var(--input_color)); background: linear-gradient(var(--input_color_dark), var(--input_color));
box-shadow: inset 2px 2px 6px -2px var(--shadow_color); box-shadow: inset 2px 2px 6px -3px var(--shadow_color);
padding: 3px 5px; padding: 3px 5px;
color: var(--input_text_color); color: var(--input_text_color);
height: 26px; height: 26px;
@@ -431,7 +429,7 @@ input[type="text"]:focus,
input[type="password"]:focus, input[type="password"]:focus,
input[type="email"]:focus, input[type="email"]:focus,
input[type="number"]:focus{ input[type="number"]:focus{
box-shadow: var(--highlight_border), inset 3px 3px 6px -2px var(--shadow_color); box-shadow: var(--highlight_border), inset 3px 3px 6px -3px var(--shadow_color);
} }
input[type=file]{ input[type=file]{

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

@@ -7,13 +7,82 @@ body{
overflow: hidden; overflow: hidden;
} }
#filepreview{ .file_viewer {
position: absolute; position: absolute;
display: flex;
flex-direction: column;
top: 0;
right: 0;
bottom: 0;
left: 0;
overflow: hidden;
}
.file_viewer > .highlight_headerbar {
flex-grow: 0;
flex-shrink: 0;
display: flex;
flex-direction: row;
line-height: 1.9em;
text-align: left;
font-size: 1.2em;
}
.file_viewer > .highlight_headerbar > .button_toggle_toolbar {
flex-grow: 0;
flex-shrink: 0;
}
.file_viewer > .highlight_headerbar > .button_home {
flex-grow: 0;
flex-shrink: 0;
margin-right: .5em;
}
.file_viewer > .highlight_headerbar > .file_viewer_headerbar_title {
flex-grow: 1;
flex-shrink: 1;
overflow: hidden;
white-space: nowrap;
font-size: 0.8em;
}
.file_viewer > .highlight_headerbar > .list_navigator_buttons {
flex-grow: 0;
flex-shrink: 0;
display: inline-flex;
}
.file_viewer > .highlight_headerbar > .button_close_file_viewer {
flex-grow: 0;
flex-shrink: 0;
margin-left: .5em;
}
.file_viewer > .list_navigator{
flex-grow: 0;
flex-shrink: 0;
position: relative;
display: none; /* Becomes visible if the page is a list */
width: 100%;
height: 100px;
background-color: var(--accent_color_dark);
box-shadow: 2px 2px 8px var(--shadow_color);
text-align: center;
overflow-x: hidden;
overflow-y: hidden;
z-index: 50;
transition: top 1.5s;
}
.file_viewer > .file_viewer_window {
flex-grow: 1;
flex-shrink: 1;
position: relative;
display: inline-block;
width: auto;
height: auto;
margin: 0;
}
.file_viewer > .file_viewer_window > .file_viewer_file_preview {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
display: inline-block; display: inline-block;
top: 0px;
left: 8em;
right: 0px;
bottom: 0px;
min-height: 100px; min-height: 100px;
min-width: 100px; min-width: 100px;
text-align: center; text-align: center;
@@ -21,11 +90,44 @@ body{
transition: left 1s, top 1.5s; transition: left 1s, top 1.5s;
} }
/* Toolbars */
.file_viewer > .file_viewer_window > .file_viewer_toolbar {
position: absolute;
width: 8em;
z-index: 49;
overflow: hidden;
float: left;
background-color: var(--accent_color_dark);
left: -9em;
bottom: 0;
top: 0;
padding: 0;
text-align: left;
box-shadow: 2px 2px 8px var(--shadow_color);
transition: left 1s, top 1.5s;
}
.file_viewer > .file_viewer_window > .file_viewer_sharebar{
position: absolute;
width: 7em;
left: -8em;
bottom: 0;
top: 0;
overflow-y: scroll;
overflow-x: hidden;
float: left;
background-color: var(--accent_color_dark);
box-shadow: 2px 2px 8px var(--shadow_color);
text-align: center;
z-index: 48;
overflow: hidden;
transition: left 1s, top 1.5s;
}
/* ===================== /* =====================
== FILE CONTAINERS == == FILE CONTAINERS ==
=====================*/ =====================*/
.image-container{ .image-container{
position: absolute; position: relative;
top: 0px; top: 0px;
left: 0px; left: 0px;
right: 0px; right: 0px;
@@ -46,7 +148,7 @@ body{
.text-container{ .text-container{
background: #333 none; background: #333 none;
position: absolute; position: relative;
overflow-y: scroll; overflow-y: scroll;
overflow-x: auto; overflow-x: auto;
text-align: left; text-align: left;
@@ -94,22 +196,6 @@ body{
|| TOOLBAR COMPONENTS || || TOOLBAR COMPONENTS ||
======================== */ ======================== */
#toolbar {
position: absolute;
width: 8em;
z-index: 52;
overflow: hidden;
float: left;
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 var(--shadow_color);
transition: left 1s, top 1.5s;
}
/* Workaround to hide the scrollbar in non webkit browsers, it's really ugly' */ /* Workaround to hide the scrollbar in non webkit browsers, it's really ugly' */
#toolbar > div { #toolbar > div {
@@ -129,14 +215,6 @@ body{
height: auto; height: auto;
} }
#button-expand-toolbar{
position: absolute;
left: 0;
top: 0;
cursor: pointer;
z-index: 51;
}
.toolbar_button{ .toolbar_button{
text-align: left; text-align: left;
} }
@@ -153,38 +231,13 @@ body{
padding-left: 10px; padding-left: 10px;
font-size: 0.8em; font-size: 0.8em;
line-height: 0.7em; line-height: 0.7em;
} margin-top: 0.5em;
#sponsors{
position: relative;
height: 600px;
width: 8em;
margin: 0;
border: none;
z-index: 9;
} }
/* ========================= /* =========================
|| SHAREBAR COMPONENTS || || SHAREBAR COMPONENTS ||
========================= */ ========================= */
#sharebar{
position: absolute;
width: 7em;
left: -8em;
bottom: 0;
top: 0;
overflow-y: scroll;
overflow-x: hidden;
float: left;
background-color: var(--background_color);
box-shadow: 2px 2px 8px var(--shadow_color);
text-align: center;
border-right: 2px ridge var(--highlight_color);
z-index: 50;
overflow: hidden;
transition: left 1s, top 1.5s;
}
.sharebar-button {text-align: center;} .sharebar-button {text-align: center;}
/* ===================== /* =====================
@@ -192,7 +245,7 @@ body{
===================== */ ===================== */
.popup { .popup {
position: fixed; position: absolute;
visibility: hidden; visibility: hidden;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@@ -202,9 +255,9 @@ body{
border-color: var(--accent_color_dark_border); border-color: var(--accent_color_dark_border);
max-height: 100%; max-height: 100%;
max-width: 100%; max-width: 100%;
top: 10%; top: 20%;
left: 50%; left: 50%;
transform: translate(-50%, -10%); transform: translate(-50%, -20%);
padding: 0; padding: 0;
box-sizing: border-box; box-sizing: border-box;
text-align: left; text-align: left;
@@ -222,12 +275,12 @@ body{
.details_popup{ .details_popup{
width: 1500px; width: 1500px;
height: 800px; height: 800px;
z-index: 100; z-index: 200;
} }
.captcha_popup{ .captcha_popup{
height: auto; height: auto;
width: 450px; width: 450px;
z-index: 101; z-index: 201;
} }
#captcha_popup_captcha > div { #captcha_popup_captcha > div {
display: inline-block; display: inline-block;
@@ -287,24 +340,9 @@ table > tbody > tr {border: none !important;}
border: none; border: none;
} }
#listNavigator{
position: absolute;
left: 0;
right: 0;
top: -100px;
height: 98px;
background-color: #000;
box-shadow: 2px 2px 8px #000000;
border-bottom: 2px ridge var(--highlight_color);
text-align: center;
overflow-x: hidden;
overflow-y: hidden;
z-index: 50;
transition: top 1.5s;
}
#listNavigatorItems{ #listNavigatorItems{
position: absolute; position: relative;
top: 0; top: 0;
left: 0; left: 0;
right: 0; right: 0;
@@ -313,7 +351,7 @@ table > tbody > tr {border: none !important;}
overflow-x: scroll; overflow-x: scroll;
overflow-y: hidden; overflow-y: hidden;
border: none; border: none;
padding: 0 40px; padding: 0;
} }
.listItem{ .listItem{
@@ -323,11 +361,15 @@ table > tbody > tr {border: none !important;}
width: 100px; width: 100px;
margin-right: 5px; margin-right: 5px;
text-align: center; text-align: center;
border: #333 solid 2px; border: var(--input_color) solid 2px;
border-radius: 2px;
font-size: 12px; font-size: 12px;
overflow: hidden; overflow: hidden;
cursor: pointer; cursor: pointer;
} }
.list_item_selected{
border: var(--highlight_color) solid 2px;
}
.listItemThumbnail{ .listItemThumbnail{
position: relative; position: relative;
@@ -335,23 +377,3 @@ table > tbody > tr {border: none !important;}
max-height: 84%; max-height: 84%;
margin: 0; margin: 0;
} }
#arrow-left,
#arrow-right{
position: absolute;
display: block;
border-top: 30px solid transparent;
border-bottom: 30px solid transparent;
height: 0;
width: 0;
top: 20px;
cursor: pointer;
}
#arrow-left{
border-right: 40px solid var(--highlight_color);
left: 10px;
}
#arrow-right{
border-left: 40px solid var(--highlight_color);
right: 10px;
}

8
res/template/account/file_manager.html
View File

@@ -7,7 +7,7 @@
<style> <style>
.file_manager { .file_manager {
position: absolute; position: absolute;
padding: 0px 8px 0px 8px; padding: 0;
background-color: var(--body_color); background-color: var(--body_color);
box-shadow: #000000 8px 8px 50px 5px; box-shadow: #000000 8px 8px 50px 5px;
left:100px; left:100px;
@@ -25,7 +25,7 @@
.file_manager > .nav_bar > .breadcrumbs {flex: 1; margin: 1px 10px; min-width: 100px;} .file_manager > .nav_bar > .breadcrumbs {flex: 1; margin: 1px 10px; min-width: 100px;}
.file_manager > .status_bar {text-align: left;} .file_manager > .status_bar {text-align: left;}
.file_manager > .directory_area { .file_manager > .directory_area {
margin: 0 -8px 0 -8px; margin: 0;
padding: 5px; padding: 5px;
max-height: 500px; max-height: 500px;
overflow-x: hidden; overflow-x: hidden;
@@ -47,7 +47,7 @@
{{template "menu" .}} {{template "menu" .}}
<br/> <br/>
<div class="file_manager"> <div class="file_manager">
<div class="nav_bar highlight_light border_top border_bottom"> <div class="nav_bar highlight_light">
<button>⇐</button> <button>⇐</button>
<button>⇑</button> <button>⇑</button>
<button style="margin-right: 16px;">⇒</button> <button style="margin-right: 16px;">⇒</button>
@@ -68,7 +68,7 @@
</a> </a>
{{end}} {{end}}
</div> </div>
<div class="status_bar highlight_light border_top border_bottom"> <div class="status_bar highlight_light">
13 items (5 directories, 7 files). Total size: 1.23 GB 13 items (5 directories, 7 files). Total size: 1.23 GB
</div> </div>
</div> </div>

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

@@ -9,7 +9,7 @@
{{template "menu" .}} {{template "menu" .}}
<h1>Please confirm that you want to log out of your pixeldrain account</h1> <h1>Please confirm that you want to log out of your pixeldrain account</h1>
<form method="POST" action="/logout" class="highlight_light border_top border_bottom"> <form method="POST" action="/logout" class="highlight_light">
<input type="submit" value="I want to log out of pixeldrain on this computer" class="button_highlight"/> <input type="submit" value="I want to log out of pixeldrain on this computer" class="button_highlight"/>
</form> </form>
<br/> <br/>

137
res/template/account/register.html
View File

@@ -1,137 +0,0 @@
{{define "register"}}<!DOCTYPE html>
<html>
<head>
{{template "meta_tags" "Register"}}
{{template "user_style" .}}
<script type="text/javascript">var apiEndpoint = '{{.APIEndpoint}}';</script>
<script src='https://www.google.com/recaptcha/api.js'></script>
</head>
<body>
<div id='body' class="body">
{{template "menu" .}}
<h1>Register a new Pixeldrain account</h1>
<div id="submit_result"></div>
<form onSubmit="return submitForm();" class="highlight_dark border_top border_bottom">
<table style="margin-left: auto; margin-right: auto; text-align: left; max-width: 30em;">
<tr class="form">
<td>Username</td>
<td><input id="register_username" type="text" autocomplete="username" class="form_input"/></td>
</tr>
<tr class="form"><td colspan="2">used for logging into your account<br/><hr/></td></tr>
<tr class="form">
<td>E-mail address</td>
<td><input id="register_email" type="text" autocomplete="email" class="form_input"/></td>
</tr>
<tr class="form"><td colspan="2">
not required. your e-mail address will only be used for
password resets and important account notifications<br/>
<hr/>
</td></tr>
<tr class="form">
<td>Password</td>
<td><input id="register_password1" type="password" autocomplete="new-password" class="form_input"/></td>
</tr>
<tr class="form">
<td>Password verification</td>
<td><input id="register_password2" type="password" autocomplete="new-password" class="form_input"/></td>
</tr>
<tr class="form">
<td colspan="2">
you need to enter your password twice so we can
verify that you have not made any typing errors<br/>
<hr/>
</td>
</tr>
{{if ne .Other "none"}}<tr class="form">
<td>
Turing test<br/>
(Click the white box)
</td>
<td style="text-align: center;">
<div class="g-recaptcha" data-theme="dark" data-sitekey="{{.Other}}"></div>
</td>
</tr>
<tr class="form">
<td colspan="2">
the reCaptcha turing test verifies that you are not
an evil robot that is trying to flood the website
with fake accounts<br/><hr/>
</td>
</tr>{{end}}
<tr class="form">
<td colspan="2" style="text-align: right;">
<input type="submit" value="Register" class="button_highlight"/>
</td>
</tr>
</table>
</form>
<br/>
Welcome to the club!<br/>
{{template "footer"}}
</div>
<script type="text/javascript">
function submitForm(){
var uname = document.getElementById("register_username").value;
var email = document.getElementById("register_email").value;
var passwd1 = document.getElementById("register_password1").value;
var passwd2 = document.getElementById("register_password2").value;
var capt;
try {
capt = grecaptcha.getResponse();
} catch (err) {
console.log("Error occurred while reading captcha: "+err);
}
if (passwd1 !== passwd2) {
alert("Passwords do not match! Good thing we checked.");
return false;
}
var req = new XMLHttpRequest();
req.onreadystatechange = function(){
if (this.readyState === 4) {
var response = JSON.parse(req.responseText);
var resultDiv = document.getElementById("submit_result");
if (response.success) {
resultDiv.className = "border_top border_bottom highlight_green";
resultDiv.innerHTML = 'Registration completed! You can now <a href="/login">log in to your account</a>.<br/>'
+ "We're glad to have you on board, have fun sharing!";
} else {
resultDiv.className = "border_top border_bottom highlight_red";
var resultHtml = "Something went wrong, please correct these problems and try again:<br/><ul>";
for (err in response.errors) {
resultHtml += "<li>"+ response.errors[err].message +"</li>";
}
resultHtml += "</ul>";
resultDiv.innerHTML = resultHtml;
}
// On small screens the whole form won't fit on the screen,
// so we need to scroll up to show the user the result of
// the form submission
window.scrollTo(0, 0);
console.log(response);
}
}
req.open("POST", apiEndpoint+"/user/register", true);
var data = new FormData();
data.append("username", uname);
data.append("email", email);
data.append("password", passwd1);
data.append("recaptcha_response", capt);
req.send(data);
return false;
}
</script>
{{template "analytics"}}
</body>
</html>
{{end}}

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

@@ -8,7 +8,7 @@
<body> <body>
{{template "menu" .}} {{template "menu" .}}
<div class="highlight_middle border_bottom"> <div class="highlight_middle">
These files were uploaded while logged in to your pixeldrain account, These files were uploaded while logged in to your pixeldrain account,
<a href="/history">click here</a> to view files uploaded anonymously <a href="/history">click here</a> to view files uploaded anonymously
in this browser. in this browser.

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

@@ -10,7 +10,7 @@
<div id='body' class="body"> <div id='body' class="body">
{{template "menu" .}} {{template "menu" .}}
<h1 class="highlight_middle border_bottom">Welcome home, {{.Username}}!</h1> <h1 class="highlight_middle">Welcome home, {{.Username}}!</h1>
<h2>Actions</h2> <h2>Actions</h2>
<ul> <ul>
@@ -19,7 +19,7 @@
</ul> </ul>
<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">
{{$files := .PixelAPI.UserFiles 0 18}} {{$files := .PixelAPI.UserFiles 0 18}}
{{range $files.Files}} {{range $files.Files}}
<a class="file_button" href="/u/{{.ID}}" target="_blank"> <a class="file_button" href="/u/{{.ID}}" target="_blank">
@@ -33,7 +33,7 @@
<a href="/user/files" class="button">...All my files</a> <a href="/user/files" class="button">...All my files</a>
</div> </div>
<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">
{{$lists := .PixelAPI.UserLists 0 18}} {{$lists := .PixelAPI.UserLists 0 18}}
{{range $lists.Lists}} {{range $lists.Lists}}
<a class="file_button" href="/l/{{.ID}}" target="_blank"> <a class="file_button" href="/l/{{.ID}}" target="_blank">

1
res/template/admin.html
View File

@@ -112,7 +112,6 @@
); );
function setData(){ function setData(){
this.class = "button_highlight";
$.get(apiEndpoint+"/admin/files/timeseries?days="+days+"&interval="+interval, function(response){ $.get(apiEndpoint+"/admin/files/timeseries?days="+days+"&interval="+interval, function(response){
console.log(response); console.log(response);
if (response.success) { if (response.success) {

165
res/template/file_viewer.html
View File

@@ -6,15 +6,13 @@
<meta charset="UTF-8"/> <meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/> <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
{{template "user_style" .}} {{template "user_style" .}}
<link rel="stylesheet" href="/res/style/viewer.css?v2"/> <link rel="stylesheet" href="/res/style/viewer.css?v3"/>
<link rel="stylesheet" href="/res/style/layout.css?v2"/> <link rel="stylesheet" href="/res/style/layout.css?v3"/>
<link rel="shortcut icon" href="/res/img/tray32.png"/> <link rel="shortcut icon" href="/res/img/tray32.png"/>
<link rel="icon" sizes="180x180" href="/res/img/pixeldrain.png"/> <link rel="icon" sizes="180x180" href="/res/img/pixeldrain.png"/>
<link rel="icon" sizes="256x256" href="/res/img/pixeldrain_big.png"/> <link rel="icon" sizes="256x256" href="/res/img/pixeldrain_big.png"/>
<meta name="theme-color" content="#75AD38"/> <meta name="theme-color" content="#75AD38"/>
<!-- <link rel="alternate" type="application/json+oembed" th:href="*{oEmbedHref}" th:title="*{ogTitle}" /> OEmbed will return soon -->
{{template "bgpattern"}} {{template "bgpattern"}}
{{.OGData}} {{.OGData}}
@@ -26,81 +24,90 @@
</head> </head>
<body> <body>
<div id="listNavigator"> <div id="file_viewer" class="file_viewer">
<div id="listNavigatorItems"></div> <div id="file_viewer_headerbar" class="highlight_headerbar">
<div id="arrow-left" alt="Previous Item" onClick="ListNavigator.previousItem();"></div> <button id="button_toggle_toolbar" class="button_toggle_toolbar" onClick="Toolbar.toggle();">☰</button>
<div id="arrow-right" alt="Next Item" onClick="ListNavigator.nextItem();"></div> <a href="/" id="button_home" class="button button_home">
</div> <img src="/res/img/tray32.png" alt="Back to the Home page" style="height: 1em;"/>
<button id="button-expand-toolbar" onClick="Toolbar.toggle();">Show Toolbar</button> <!-- Yo -->
<div id="toolbar"> </a>
<!-- Ugly workaround to get rid of the scrollbar in non-webkit browsers --> <span id="file_viewer_headerbar_title" class="file_viewer_headerbar_title">{{.Title}}</span>
<div> <div id="list_navigator_buttons" class="list_navigator_buttons"></div>
<div> <button id="button_close_file_viewer" class="button_close_file_viewer button_red" onClick="window.close();">X</button>
<button class="toolbar_button button_full_width" onClick="Toolbar.toggle();">Hide Toolbar</button> </div>
<div id="listNavigator" class="list_navigator">
<div id="listNavigatorItems"></div>
</div>
<div id="file_viewer_window" class="file_viewer_window">
<div id="toolbar" class="file_viewer_toolbar">
<!-- Ugly workaround to get rid of the scrollbar in non-webkit browsers -->
<div>
<div>
<div id="stat_views_label" class="toolbar_label">Views</div>
<div id="stat_views" style="text-align: center;">N/A</div>
<div id="stat_downloads_label" class="toolbar_label">Downloads</div>
<div id="stat_downloads" style="text-align: center;">N/A</div>
<div id="stat_views_label" class="toolbar_label">Views</div> <button id="btnDownload" class="toolbar_button button_full_width" onClick="Toolbar.download();">
<div id="stat_views" style="text-align: center;">N/A</div> <img src="/res/img/floppy_small.png" alt="Download this file"/>
<div id="stat_downloads_label" class="toolbar_label">Downloads</div> <span>Download</span>
<div id="stat_downloads" style="text-align: center;">N/A</div> </button>
<button id="btnCopy" class="toolbar_button button_full_width" onClick="Toolbar.copyUrl();">
<img src="/res/img/clipboard_small.png" alt="Copy file URL to clipboard"/>
<span>Copy</span>
</button>
<button id="btnShare" class="toolbar_button button_full_width" onClick="Sharebar.toggle();">
<img src="/res/img/share_small.png" alt="Share this file on social media"/>
<span>Share</span>
</button>
<button id="btnDetails" class="toolbar_button button_full_width" onClick="DetailsWindow.toggle();">
<img src="/res/img/info_small.png" alt="Help"/>
<span>Details</span>
</button>
{{template "advertisement" .}}
<a href="/" id="btnHome" class="toolbar_button button_full_width button"> <!-- This frame will load the download URL when a download button is pressed -->
<img src="/res/img/pixeldrain_small.png" alt="Back to the Home page"/> <iframe id="download_frame" style="display: none; width: 1px; height: 1px;"></iframe>
<span>Home</span> </div>
</a> </div>
<button id="btnDownload" class="toolbar_button button_full_width" onClick="Toolbar.download();"> </div>
<img src="/res/img/floppy_small.png" alt="Download this file"/>
<span>Download</span>
</button>
<button id="btnCopy" class="toolbar_button button_full_width" onClick="Toolbar.copyUrl();">
<img src="/res/img/clipboard_small.png" alt="Copy file URL to clipboard"/>
<span>Copy</span>
</button>
<button id="btnShare" class="toolbar_button button_full_width" onClick="Sharebar.toggle();">
<img src="/res/img/share_small.png" alt="Share this file on social media"/>
<span>Share</span>
</button>
<button id="btnDetails" class="toolbar_button button_full_width" onClick="DetailsWindow.toggle();">
<img src="/res/img/info_small.png" alt="Help"/>
<span>Details</span>
</button>
{{template "advertisement" .}}
<!-- This frame will load the download URL when a download button is pressed --> <div id="sharebar" class="file_viewer_sharebar">
<iframe id="download_frame" style="display: none; width: 1px; height: 1px;"></iframe> Share on:<br/>
<button class="sharebar-button button_full_width" onClick="window.open('mailto:please@set.address?subject=File%20on%20PixelDrain&body=You%20can%20view%20it%20here%20' + window.location.href);">
<img src="/res/img/social_email.png" alt="Share on E-Mail" style="width:40px; height: 40px;"/>
<br/>E-Mail
</button>
<button class="sharebar-button button_full_width" onclick="window.open('https://www.reddit.com/submit?url=' + window.location.href);">
<img src="/res/img/social_reddit.png" alt="Share on Reddit" style="width:40px; height: 40px;"/>
<br/>Reddit
</button>
<button class="sharebar-button button_full_width" onClick="window.open('https://twitter.com/share?text=Check%20out%20this%20file%20on%20%23Pixeldrain&url=' + window.location.href);">
<img src="/res/img/social_twitter.png" alt="Share on Twitter" style="width:40px; height: 40px;"/>
<br/>Twitter
</button>
<button class="sharebar-button button_full_width" onClick="window.open('http://www.facebook.com/sharer.php?u=' + window.location.href);">
<img src="/res/img/social_facebook.png" alt="Share on Facebook" style="width:40px; height: 40px;"/>
<br/>Facebook
</button>
<button class="sharebar-button button_full_width" onClick="window.open('http://www.tumblr.com/share/link?url=' + window.location.href);">
<img src="/res/img/social_tumblr.png" alt="Share on Tumblr" style="width:40px; height: 40px;"/>
<br/>Tumblr
</button>
<button class="sharebar-button button_full_width" onClick="window.open('https://voat.co/submit?linkpost=true&url=' + window.location.href);">
<img src="/res/img/social_voat.png" alt="Share on Voat" style="width:40px; height: 40px;"/>
<br/>Voat
</button>
</div>
<div id="filepreview" class="file_viewer_file_preview">
<img src="/res/img/misc/loadthink.gif" style="margin-top: 20%; width: 200px; height: 200px;" />
</div> </div>
</div> </div>
</div> </div>
<div id="sharebar" class="sidebar"> <div id="details_popup" class="popup details_popup">
Share on:<br/> <div id="details_popup_title" class="highlight_headerbar">
<button class="sharebar-button button_full_width" onClick="window.open('mailto:please@set.address?subject=File%20on%20PixelDrain&body=You%20can%20view%20it%20here%20' + window.location.href);">
<img src="/res/img/social_email.png" alt="Share on E-Mail" style="width:40px; height: 40px;"/>
<br/>E-Mail
</button>
<button class="sharebar-button button_full_width" onclick="window.open('https://www.reddit.com/submit?url=' + window.location.href);">
<img src="/res/img/social_reddit.png" alt="Share on Reddit" style="width:40px; height: 40px;"/>
<br/>Reddit
</button>
<button class="sharebar-button button_full_width" onClick="window.open('https://twitter.com/share?text=Check%20out%20this%20file%20on%20%23Pixeldrain&url=' + window.location.href);">
<img src="/res/img/social_twitter.png" alt="Share on Twitter" style="width:40px; height: 40px;"/>
<br/>Twitter
</button>
<button class="sharebar-button button_full_width" onClick="window.open('http://www.facebook.com/sharer.php?u=' + window.location.href);">
<img src="/res/img/social_facebook.png" alt="Share on Facebook" style="width:40px; height: 40px;"/>
<br/>Facebook
</button>
<button class="sharebar-button button_full_width" onClick="window.open('http://www.tumblr.com/share/link?url=' + window.location.href);">
<img src="/res/img/social_tumblr.png" alt="Share on Tumblr" style="width:40px; height: 40px;"/>
<br/>Tumblr
</button>
<button class="sharebar-button button_full_width" onClick="window.open('https://voat.co/submit?linkpost=true&url=' + window.location.href);">
<img src="/res/img/social_voat.png" alt="Share on Voat" style="width:40px; height: 40px;"/>
<br/>Voat
</button>
</div>
<div id="details_popup" class="popup details_popup border_bottom">
<div id="details_popup_title" class="highlight_light border_top border_bottom">
File Info File Info
<button style="position: absolute; top: 3px; right: 3px;" class="button_red" onclick="DetailsWindow.toggle();">X</button> <button style="position: absolute; top: 3px; right: 3px;" class="button_red" onclick="DetailsWindow.toggle();">X</button>
</div> </div>
@@ -147,23 +154,19 @@
</span> </span>
</div> </div>
</div> </div>
<div id="captcha_popup" class="popup captcha_popup border_bottom"> <div id="captcha_popup" class="popup captcha_popup">
<div id="captcha_popup_title" class="highlight_light border_top border_bottom"></div> <div id="captcha_popup_title" class="highlight_headerbar"></div>
<div id="captcha_popup_content" class="content_area"></div> <div id="captcha_popup_content" class="content_area"></div>
<br/> <br/>
<div id="captcha_popup_captcha" style="text-align: center;"></div> <div id="captcha_popup_captcha" style="text-align: center;"></div>
</div> </div>
<div id="filepreview">
<img src="/res/img/misc/loadthink.gif" style="margin-top: 20%; width: 200px; height: 200px;" />
</div>
<script src="/res/misc/chartjs/Chart.min.js"></script> <script src="/res/misc/chartjs/Chart.min.js"></script>
<script src="/res/script/jquery.js"></script> <script src="/res/script/jquery.js"></script>
<script src="/res/script/Keyboard.js"></script> <script src="/res/script/Keyboard.js"></script>
<script src="/res/script/Toolbar.js?v1"></script> <script src="/res/script/Toolbar.js?v2"></script>
<script src="/res/script/Viewer.js?v1"></script> <script src="/res/script/Viewer.js?v2"></script>
<script src="/res/script/ListNavigator.js"></script> <script src="/res/script/ListNavigator.js?v2"></script>
<script> <script>
// This info gets filled in on the server side to prevent having to make an API call right after the page loads. // This info gets filled in on the server side to prevent having to make an API call right after the page loads.

2
res/template/fragments/footer.html
View File

@@ -1,6 +1,6 @@
{{define "footer"}} {{define "footer"}}
<br/> <br/>
<div class="highlight_dark border_top border_bottom"> <div class="highlight_dark">
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>

6
res/template/fragments/form.html
View File

@@ -3,11 +3,11 @@
{{.PreFormHTML}} {{.PreFormHTML}}
{{if eq .Submitted true}} {{if eq .Submitted true}}
{{if eq .SubmitSuccess true}} {{if eq .SubmitSuccess true}}
<div id="submit_result" class="highlight_green border_top border_bottom"> <div id="submit_result" class="highlight_green">
{{index .SubmitMessages 0}} {{index .SubmitMessages 0}}
</div> </div>
{{else}} {{else}}
<div id="submit_result" class="highlight_red border_top border_bottom"> <div id="submit_result" class="highlight_red">
Something went wrong, please correct these errors before continuing:<br/> Something went wrong, please correct these errors before continuing:<br/>
<ul> <ul>
{{range $msg := .SubmitMessages}} {{range $msg := .SubmitMessages}}
@@ -18,7 +18,7 @@
{{end}} {{end}}
{{end}} {{end}}
<form class="highlight_dark border_top border_bottom" method="POST"> <form class="highlight_dark" method="POST">
<input type="text" name="form" value="{{.Name}}" style="display: none;" readonly="readonly"/> <input type="text" name="form" value="{{.Name}}" style="display: none;" readonly="readonly"/>
{{if ne .Username ""}} {{if ne .Username ""}}
<!-- The invisible username field is so browsers know which user the form was for --> <!-- The invisible username field is so browsers know which user the form was for -->

2
res/template/fragments/menu.html
View File

@@ -1,5 +1,5 @@
{{define "menu"}} {{define "menu"}}
<div id="navigation" class="highlight_light border_top border_bottom navigation"> <div id="navigation" class="highlight_headerbar navigation">
<a href="/">Home</a> <a href="/">Home</a>
<a href="{{if .Authenticated}}/user/files{{else}}/history{{end}}">My&nbsp;Files</a> <a href="{{if .Authenticated}}/user/files{{else}}/history{{end}}">My&nbsp;Files</a>
{{if .Authenticated}}<a href="/user/lists">My&nbsp;Lists</a>{{end}} {{if .Authenticated}}<a href="/user/lists">My&nbsp;Lists</a>{{end}}

7
res/template/history.html
View File

@@ -12,12 +12,13 @@
<body> <body>
<div id='body' class="body"> <div id='body' class="body">
{{template "menu" .}} {{template "menu" .}}
<br/> <p>
Here are all files you have previously uploaded to PixelDrain using this computer. Here are all files you have previously uploaded to PixelDrain using this computer.
This data is saved locally in your web browser and gets updated every time you upload a file through your current browser. This data is saved locally in your web browser and gets updated every time you upload a file through your current browser.
<br/><br/> </p>
<br/>
<div id="uploadedFiles" class="highlight_dark border_top border_bottom"></div> <div id="uploadedFiles" class="highlight_dark"></div>
{{template "footer"}} {{template "footer"}}
</div> </div>
<script src="/res/script/history.js"></script> <script src="/res/script/history.js"></script>

8
res/template/home.html
View File

@@ -22,7 +22,7 @@
<br/> <br/>
<div id="body" class="body"> <div id="body" class="body">
{{template "menu" .}} {{template "menu" .}}
<div class="highlight_middle border_bottom"> <div class="highlight_middle">
<input id="file_input_field" type="file" name="file" multiple="multiple"/> <input id="file_input_field" type="file" name="file" multiple="multiple"/>
<button id="select_file_button" class="big_button button_highlight">Upload Files</button> <button id="select_file_button" class="big_button button_highlight">Upload Files</button>
<button id="text_button" class="big_button button_highlight" onClick="window.location.href = '/t/'">Upload Text</button><br/> <button id="text_button" class="big_button button_highlight" onClick="window.location.href = '/t/'">Upload Text</button><br/>
@@ -31,7 +31,7 @@
<div id="uploads_queue"></div> <div id="uploads_queue"></div>
</div> </div>
<div class="highlight_dark border_bottom"> <div class="highlight_dark">
<button id="btn_create_list">Create list with uploaded files</button> <button id="btn_create_list">Create list with uploaded files</button>
<button id="btn_copy_links">Copy links to clipboard</button> <button id="btn_copy_links">Copy links to clipboard</button>
<button id="btn_copy_bbcode">Copy BBCode to clipboard</button> <button id="btn_copy_bbcode">Copy BBCode to clipboard</button>
@@ -55,8 +55,8 @@
<input type="radio" id="style_hacker" name="style"><label for="style_hacker">Hacker 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> <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/> (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> <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/>--> (Inspired by <a href="https://github.com/horst3180/Arc-theme" target="_blank">Arc GTK</a>)<br/>
</div> </div>
<h2>Questions and Answers</h2> <h2>Questions and Answers</h2>

2
res/template/maintenance.html
View File

@@ -9,7 +9,7 @@
<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_neuropol.png" alt="Header image"/>
<br/> <br/>
<div id='body' class="body"> <div id='body' class="body">
<div id="header" class="highlight_light border_top border_bottom" style="font-size: 2em; line-height: 1.2em;"> <div id="header" class="highlight_light" style="font-size: 2em; line-height: 1.2em;">
Pixeldrain is under maintenanace Pixeldrain is under maintenanace
</div> </div>
<p> <p>

10
res/template/widgets.html
View File

@@ -19,13 +19,13 @@
<h5>Size 5 header</h5> <h5>Size 5 header</h5>
<h6>Size 6 header</h6> <h6>Size 6 header</h6>
<div class="highlight_light border_top">Light highlight</div> <div class="highlight_light">Light highlight</div>
<div class="highlight_middle">Middle highlight</div> <div class="highlight_middle">Middle highlight</div>
<div class="highlight_dark border_bottom">Dark highlight</div> <div class="highlight_dark">Dark highlight</div>
<br/> <br/>
<div class="highlight_light border_bottom border_top">Light highlight with borders</div> <div class="highlight_light">Light highlight with borders</div>
<div class="highlight_middle border_bottom border_top">Middle highlight with borders</div> <div class="highlight_middle">Middle highlight with borders</div>
<div class="highlight_dark border_bottom border_top">Dark highlight with borders</div> <div class="highlight_dark ">Dark highlight with borders</div>
<br/> <br/>
Link <a href="#">A link to someplace</a>. Link <a href="#">A link to someplace</a>.
<hr/> <hr/>

118
webcontroller/user_style.go
View File

@@ -49,12 +49,10 @@ func userStyle(r *http.Request) (style template.CSS) {
--background_color: %s; --background_color: %s;
--body_color: %s; --body_color: %s;
--accent_color_headerbar: %s;
--accent_color_dark: %s; --accent_color_dark: %s;
--accent_color_dark_border: %s;
--accent_color_medium: %s; --accent_color_medium: %s;
--accent_color_medium_border: %s;
--accent_color_light: %s; --accent_color_light: %s;
--accent_color_light_border: %s;
--shadow_color: %s; --shadow_color: %s;
--shadow_spread: %s; --shadow_spread: %s;
@@ -62,24 +60,22 @@ func userStyle(r *http.Request) (style template.CSS) {
}`, }`,
selectedStyle.TextColor.cssString(), selectedStyle.TextColor.cssString(),
selectedStyle.InputColor.cssString(), selectedStyle.InputColor.cssString(),
selectedStyle.InputColor.add(0, 0, -.05).cssString(), selectedStyle.InputColor.add(0, 0, -.03).cssString(),
selectedStyle.InputTextColor.cssString(), selectedStyle.InputTextColor.cssString(),
selectedStyle.HighlightColor.cssString(), selectedStyle.HighlightColor.cssString(),
selectedStyle.HighlightColor.add(0, 0, -.05).cssString(), selectedStyle.HighlightColor.add(0, 0, -.03).cssString(),
selectedStyle.HighlightTextColor.cssString(), selectedStyle.HighlightTextColor.cssString(),
selectedStyle.DangerColor.cssString(), selectedStyle.DangerColor.cssString(),
selectedStyle.DangerColor.add(0, 0, -.05).cssString(), selectedStyle.DangerColor.add(0, 0, -.03).cssString(),
selectedStyle.FileBackgroundColor.cssString(), selectedStyle.FileBackgroundColor.cssString(),
selectedStyle.ScrollbarForegroundColor.cssString(), selectedStyle.ScrollbarForegroundColor.cssString(),
selectedStyle.ScrollbarBackgroundColor.cssString(), selectedStyle.ScrollbarBackgroundColor.cssString(),
selectedStyle.BackgroundColor.cssString(), selectedStyle.BackgroundColor.cssString(),
selectedStyle.BodyColor.cssString(), selectedStyle.BodyColor.cssString(),
selectedStyle.AccentColorHeaderbar.cssString(),
selectedStyle.AccentColorDark.cssString(), selectedStyle.AccentColorDark.cssString(),
selectedStyle.AccentColorDark.add(0, 0, .1).cssString(),
selectedStyle.AccentColorMedium.cssString(), selectedStyle.AccentColorMedium.cssString(),
selectedStyle.AccentColorMedium.add(0, 0, .1).cssString(),
selectedStyle.AccentColorLight.cssString(), selectedStyle.AccentColorLight.cssString(),
selectedStyle.AccentColorLight.add(0, 0, .1).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),
@@ -97,11 +93,12 @@ type pixeldrainStyleSheet struct {
ScrollbarForegroundColor hsl ScrollbarForegroundColor hsl
ScrollbarBackgroundColor hsl ScrollbarBackgroundColor hsl
BackgroundColor hsl BackgroundColor hsl
BodyColor hsl BodyColor hsl
AccentColorDark hsl AccentColorHeaderbar hsl
AccentColorMedium hsl AccentColorDark hsl
AccentColorLight hsl AccentColorMedium hsl
AccentColorLight hsl
ShadowColor hsl ShadowColor hsl
ShadowSpread int // Pixels ShadowSpread int // Pixels
@@ -164,11 +161,12 @@ var defaultPixeldrainStyle = pixeldrainStyleSheet{
ScrollbarForegroundColor: hsl{0, 0, .30}, ScrollbarForegroundColor: hsl{0, 0, .30},
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},
AccentColorDark: hsl{0, 0, .11}, AccentColorHeaderbar: hsl{0, 0, .14},
AccentColorMedium: hsl{0, 0, .13}, AccentColorDark: hsl{0, 0, .11},
AccentColorLight: hsl{0, 0, .14}, AccentColorMedium: hsl{0, 0, .13},
AccentColorLight: hsl{0, 0, .14},
ShadowColor: hsl{0, 0, 0}, ShadowColor: hsl{0, 0, 0},
ShadowSpread: 10, ShadowSpread: 10,
@@ -186,11 +184,12 @@ var sunnyPixeldrainStyle = pixeldrainStyleSheet{
ScrollbarForegroundColor: hsl{0, 0, .30}, ScrollbarForegroundColor: hsl{0, 0, .30},
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},
AccentColorDark: hsl{0, 0, 1}, AccentColorHeaderbar: hsl{0, 0, .14},
AccentColorMedium: hsl{0, 0, 1}, AccentColorDark: hsl{0, 0, 1},
AccentColorLight: hsl{0, 0, 1}, AccentColorMedium: hsl{0, 0, 1},
AccentColorLight: hsl{0, 0, 1},
ShadowColor: hsl{0, 0, 0}, ShadowColor: hsl{0, 0, 0},
ShadowSpread: 10, ShadowSpread: 10,
@@ -208,11 +207,12 @@ var solarizedDarkStyle = pixeldrainStyleSheet{
ScrollbarForegroundColor: hsl{192, .95, .30}, ScrollbarForegroundColor: hsl{192, .95, .30},
ScrollbarBackgroundColor: hsl{0, 0, 0}, ScrollbarBackgroundColor: hsl{0, 0, 0},
BackgroundColor: hsl{192, 1, .05}, BackgroundColor: hsl{192, 1, .05},
BodyColor: hsl{192, 1, .11}, BodyColor: hsl{192, .81, .14}, // hsl(192, 81%, 14%)
AccentColorDark: hsl{192, .87, .09}, AccentColorHeaderbar: hsl{192, 1, .11}, // hsl(192, 100%, 11%)
AccentColorMedium: hsl{192, .81, .14}, AccentColorDark: hsl{192, .87, .09},
AccentColorLight: hsl{192, .95, .17}, AccentColorMedium: hsl{192, .81, .14},
AccentColorLight: hsl{192, .95, .17},
ShadowColor: hsl{0, 0, 0}, ShadowColor: hsl{0, 0, 0},
ShadowSpread: 10, ShadowSpread: 10,
@@ -230,11 +230,12 @@ var maroonStyle = pixeldrainStyleSheet{
ScrollbarForegroundColor: hsl{0, .75, .2}, ScrollbarForegroundColor: hsl{0, .75, .2},
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},
AccentColorDark: hsl{0, .5, .07}, AccentColorHeaderbar: hsl{0, .5, .07},
AccentColorMedium: hsl{0, .8, .15}, AccentColorDark: hsl{0, .5, .07},
AccentColorLight: hsl{0, .9, .2}, AccentColorMedium: hsl{0, .8, .15},
AccentColorLight: hsl{0, .9, .2},
ShadowColor: hsl{0, 0, 0}, ShadowColor: hsl{0, 0, 0},
ShadowSpread: 10, ShadowSpread: 10,
@@ -252,11 +253,12 @@ var hackerStyle = pixeldrainStyleSheet{
ScrollbarForegroundColor: hsl{0, 0, .25}, ScrollbarForegroundColor: hsl{0, 0, .25},
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},
AccentColorDark: hsl{120, .1, .05}, AccentColorHeaderbar: hsl{0, 0, .14},
AccentColorMedium: hsl{120, .2, .10}, AccentColorDark: hsl{120, .1, .05},
AccentColorLight: hsl{120, .3, .15}, AccentColorMedium: hsl{120, .2, .10},
AccentColorLight: hsl{120, .3, .15},
ShadowColor: hsl{0, 0, 0}, ShadowColor: hsl{0, 0, 0},
ShadowSpread: 10, ShadowSpread: 10,
@@ -274,11 +276,12 @@ var cantaPixeldrainStyle = pixeldrainStyleSheet{
ScrollbarForegroundColor: hsl{150, .02, .78}, ScrollbarForegroundColor: hsl{150, .02, .78},
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},
AccentColorDark: hsl{170, .06, .21}, AccentColorHeaderbar: hsl{172, .06, .25}, // hsl(172, 6%, 25%)
AccentColorMedium: hsl{160, .04, .31}, AccentColorDark: hsl{170, .06, .21},
AccentColorLight: hsl{170, .02, .47}, AccentColorMedium: hsl{160, .04, .31},
AccentColorLight: hsl{170, .02, .47},
ShadowColor: hsl{0, 0, 0}, ShadowColor: hsl{0, 0, 0},
ShadowSpread: 10, ShadowSpread: 10,
@@ -286,21 +289,22 @@ var cantaPixeldrainStyle = pixeldrainStyleSheet{
} }
var arcPixeldrainStyle = pixeldrainStyleSheet{ var arcPixeldrainStyle = pixeldrainStyleSheet{
TextColor: hsl{0, 0, .9}, TextColor: hsl{0, 0, 1},
InputColor: hsl{219, .1, .27}, InputColor: hsl{218, .16, .30},
InputTextColor: hsl{0, 0, 1}, InputTextColor: hsl{215, .19, .75},
HighlightColor: hsl{212, .54, .58}, HighlightColor: hsl{212, .71, .60},
HighlightTextColor: hsl{0, 0, 1}, HighlightTextColor: hsl{215, .19, .9},
DangerColor: hsl{357, .41, .55}, DangerColor: hsl{357, .53, .57}, // hsl(357, 53%, 57%)
FileBackgroundColor: hsl{219, .1, .2}, FileBackgroundColor: hsl{219, .1, .2},
ScrollbarForegroundColor: hsl{150, .02, .78}, ScrollbarForegroundColor: hsl{222, .08, .44}, // hsl(222, 8%, 44%)
ScrollbarBackgroundColor: hsl{170, .05, .26}, ScrollbarBackgroundColor: hsl{223, .12, .29}, // hsl(223, 12%, 29%)
BackgroundColor: hsl{0, 0, 0}, BackgroundColor: hsl{0, 0, 0},
BodyColor: hsl{223, .08, .33}, BodyColor: hsl{223, .12, .29},
AccentColorDark: hsl{219, .1, .27}, AccentColorHeaderbar: hsl{219, .15, .22}, // hsl(219, 15%, 22%)
AccentColorMedium: hsl{223, .09, .3}, AccentColorDark: hsl{215, .17, .19},
AccentColorLight: hsl{223, .08, .33}, AccentColorMedium: hsl{227, .14, .25}, // hsl(227, 14%, 25%)
AccentColorLight: hsl{223, .12, .29},
ShadowColor: hsl{0, 0, 0}, ShadowColor: hsl{0, 0, 0},
ShadowSpread: 10, ShadowSpread: 10,