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

Start of new menu

Browse Source
This commit is contained in:
Wim Brand
2019-09-16 23:50:57 +02:00
parent 09509367aa
commit b1107236cd
11 changed files with 303 additions and 152 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -56,11 +56,10 @@ html{height: 100%;}
body{
background-color: #0d0d0d; /* Fallback */
background-color: var(--background_color);
background-color: var(--body_color);
background-repeat: repeat;
font-family: 'Ubuntu';
margin: 0;
text-align: center; /* Center the header and body */
line-height: 1.5em;
overflow-x: hidden;
color: #bfbfbf; /* Fallback */
@@ -71,45 +70,111 @@ body{
/* Page layout elements */
.header_image{
width: 100%;
max-width: 1000px;
margin-top: 15px;
.page_wrapper {
position: absolute;
display: flex;
flex-direction: column;
top: 0;
right: 0;
bottom: 0;
left: 0;
overflow: hidden;
}
.page_wrapper > .page_header {
flex-grow: 0;
flex-shrink: 0;
display: flex;
flex-direction: row;
line-height: 2em;
z-index: 101;
}
.page_wrapper > .page_header > span {
margin: 0 0.5em 0 0.5em;
}
.page_wrapper > .page_content_wrapper {
flex-grow: 1;
flex-shrink: 1;
position: relative;
display: inline-block;
width: auto;
height: auto;
margin: 0;
}
.body{
.page_wrapper > .page_content_wrapper > .page_navigation {
position: absolute;
width: 200px;
z-index: 100;
float: left;
background-color: var(--layer_1_color);
left: 0;
bottom: 0;
top: 0;
padding: 0.5em 0 0.5em 0;
text-align: left;
box-shadow: 2px 2px 8px var(--shadow_color);
transition: left 0.5s;
}
.page_wrapper > .page_content_wrapper > .page_content {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 200px;
min-width: 300px;
display: inline-block;
text-align: center; /* Center the header and body */
overflow-y: scroll;
z-index: 50;
transition: left 0.5s;
}
@media (max-width: 500px) {
.page_wrapper > .page_content_wrapper > .page_navigation {
left: -210px;
}
.page_wrapper > .page_content_wrapper > .page_content {
left: 0;
}
}
.page_wrapper > .page_content_wrapper > .page_content > .centered {
position: relative;
display: inline-block;
max-width: 1000px;
min-width: 300px;
width: 100%;
height: auto;
padding: 0;
margin: 30px 0 30px 0;
box-sizing: border-box;
background-color: var(--body_color);
text-align: left;
box-shadow: #000000 0 0 10px, 5px;
box-shadow: var(--shadow_color) 0 0 var(--shadow_spread) var(--shadow_intensity);
z-index: 1;
word-break: break-word;
clear: both;
}
.navigation a {
/* Page contents */
.header_image{
width: 100%;
max-width: 1000px;
margin-top: 30px;
margin-bottom: 30px;
}
.page_wrapper > .page_content_wrapper > .page_navigation a {
float: none;
display: inline-block;
box-sizing: border-box;
color: #bfbfbf; /* Fallback */
color: var(--text_color);
text-align: center;
padding: 4px 6px;
margin: 0 4px;
margin: 0.1em 0 0.1em 0;
width: 100%;
text-decoration: none;
font-family: "Lato Thin", sans-serif;
font-weight: bold;
font-size: 1.8em;
transition: box-shadow 5s;
}
.navigation a:hover {
.page_wrapper > .page_content_wrapper > .page_navigation a:hover {
background: linear-gradient(#82c13e, #6da234);
background: linear-gradient(var(--highlight_color), var(--highlight_color_dark));
box-shadow: #82c13e, 1px 1px 4px #000000;
@@ -119,7 +184,7 @@ body{
transition: box-shadow 0.5s;
text-decoration: none;
}
.navigation .icon {
.page_wrapper > .page_content_wrapper > .page_navigation .icon {
display: none;
}
@media screen and (max-width: 35em) {
@@ -141,10 +206,17 @@ body{
}
}
.highlight_headerbar,
.inset {
box-shadow: inset 1px 1px 10px -1px var(--shadow_color);
}
.checkers {
text-shadow: 0 0 20px #000000;
}
.highlight_dark,
.highlight_middle,
.highlight_light,
.highlight_headerbar,
.highlight_green,
.highlight_blue,
.highlight_red {
@@ -156,20 +228,19 @@ body{
overflow: hidden;
text-align: center;
padding: .5em;
z-index: 101;
}
.highlight_headerbar {
background-color: var(--accent_color_headerbar);
box-shadow: 1px 1px 3px -1px var(--shadow_color);}
.highlight_dark {
background-color: var(--accent_color_dark);
box-shadow: inset 1px 1px 8px -1px var(--shadow_color);}
background-color: var(--layer_1_color);
box-shadow: 1px 1px var(--layer_1_shadow) -2px var(--shadow_color);}
.highlight_middle {
background-color: var(--accent_color_medium);
box-shadow: inset 1px 1px 6px -1px var(--shadow_color);}
background-color: var(--layer_2_color);
box-shadow: 1px 1px var(--layer_2_shadow) -2px var(--shadow_color);}
.highlight_light {
background-color: var(--accent_color_light);
box-shadow: 1px 1px 4px var(--shadow_color);}
background-color: var(--layer_3_color);
box-shadow: 1px 1px var(--layer_3_shadow) -2px var(--shadow_color);}
.highlight_headerbar {
background-color: var(--layer_4_color);
box-shadow: 1px 1px var(--layer_4_shadow) -2px var(--shadow_color);}
.highlight_green {
background-color: rgba(0, 255, 0, 0.05);
border-color: #00d000;}
@@ -202,7 +273,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, h2{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(--layer_3_color_border) solid;} /* Differentiate it a bit, else it just looks like bold text */
p, .indent {
margin: 10px;
@@ -211,7 +282,7 @@ p, .indent {
hr{
height: 8px;
border: none;
background: linear-gradient(var(--accent_color_dark), var(--accent_color_light));
background: linear-gradient(var(--layer_1_color), var(--layer_3_color));
margin: 16px 0 16px 0;
}
@@ -239,7 +310,7 @@ a:hover {color: var(--highlight_color); text-decoration: underline;}
max-width: 35em;
}
table:not(.form) {border-collapse: collapse; width: 100%;}
tr:not(.form) {border-bottom: 1px var(--accent_color_medium_border) solid;}
tr:not(.form) {border-bottom: 1px var(--layer_2_color_border) solid;}
tr > td {padding: 0.5em;}
@media(max-width: 30em) {
tr > td {
@@ -252,7 +323,7 @@ tr > td {padding: 0.5em;}
pre{
padding: 2px;
border-bottom: 1px var(--accent_color_medium_border) solid;
border-bottom: 1px var(--layer_2_color_border) solid;
overflow-x: scroll;
}

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

@@ -49,7 +49,7 @@
position: relative;
display: none; /* Becomes visible if the page is a list */
width: 100%;
background-color: var(--accent_color_dark);
background-color: var(--layer_1_color);
box-shadow: 0 0 8px var(--shadow_color);
text-align: center;
line-height: 1em;
@@ -95,7 +95,7 @@
z-index: 49;
overflow: hidden;
float: left;
background-color: var(--accent_color_dark);
background-color: var(--layer_1_color);
left: -9em;
bottom: 0;
top: 0;
@@ -113,7 +113,7 @@
overflow-y: scroll;
overflow-x: hidden;
float: left;
background-color: var(--accent_color_dark);
background-color: var(--layer_1_color);
box-shadow: 2px 2px 8px var(--shadow_color);
text-align: center;
z-index: 48;
@@ -245,7 +245,7 @@
opacity: 0;
transition: visibility .5s, opacity .5s;
background-color: var(--body_color);
border-color: var(--accent_color_dark_border);
border-color: var(--layer_1_color_border);
max-height: 100%;
max-width: 100%;
top: 20%;

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

@@ -7,12 +7,15 @@
</head>
<body>
{{template "menu" .}}
<div class="highlight_middle">
{{template "page_top" .}}
<br/>
<div class="centered">
These files were uploaded while logged in to your pixeldrain account,
<a href="/history">click here</a> to view files uploaded anonymously
in this browser.
</div>
<br/>
<br/>
{{$limit := 200}}
{{$page := .URLQuery.Get "page" | pageNr}}
@@ -56,6 +59,8 @@
{{end}}
</div>
{{template "page_bottom" .}}
{{template "analytics"}}
</body>
</html>

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

@@ -7,10 +7,13 @@
</head>
<body>
<div id='body' class="body">
{{template "menu" .}}
{{template "page_top" .}}
<h1 class="highlight_middle">Welcome home, {{.Username}}!</h1>
<div class="checkers inset highlight_dark">
<h1>Welcome home, {{.Username}}!</h1>
</div>
<div class="centered">
<h2>Actions</h2>
<ul>
@@ -47,8 +50,10 @@
<br/>
<a href="/user/lists" class="button">...All my lists</a>
</div>
{{template "footer"}}
</div>
{{template "page_bottom" .}}
{{template "analytics"}}
</body>
</html>

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

@@ -1,3 +1,3 @@
{{define "bgpattern"}}
<style>body, .checkers{background-image: url("/res/img/{{bgPattern}}");}</style>
<style>.checkers{background-image: url("/res/img/{{bgPattern}}");}</style>
{{end}}

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

@@ -1,9 +0,0 @@
{{define "footer"}}
<br/>
<div class="highlight_dark">
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>
Reddit:&nbsp;<a href="https://reddit.com/r/pixeldrain" target="_blank">/r/pixeldrain</a>
Medium:&nbsp;<a href="https://medium.com/pixeldrain" target="_blank">Pixeldrain</a>
</div>
{{end}}

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

@@ -1,24 +0,0 @@
{{define "menu"}}
<div id="navigation" class="highlight_headerbar navigation">
<a href="/">Home</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}}
<a href="/api">API</a>
{{if .Authenticated}}<a href="/user">{{.Username}}</a>
<a href="/logout" style="vertical-align: 0.6em; font-size: 0.9em; padding: 1px;">(Log out)</a>{{else}}
<a href="/login">Login</a>
<a href="/register">Register</a>
{{end}}
<a href="javascript:void(0);" class="icon" onclick="expandNavigation()">&#9776;</a>
<script>
function expandNavigation() {
var x = document.getElementById("navigation");
if (!x.className.includes("responsive")) {
x.className += " responsive";
} else {
x.className = x.className.replace(" responsive", "");
}
}
</script>
</div>
{{end}}

56
res/template/fragments/page_wrap.html Normal file
View File

@@ -0,0 +1,56 @@
{{define "page_top"}}
<div id="page_wrapper" class="page_wrapper">
<div id="page_header" class="page_header highlight_headerbar navigation">
<button id="button_toggle_toolbar" class="button_toggle_toolbar" onClick="toggleMenu();">☰</button>
<span>Pixeldrain ~ Free file sharing</span>
</div>
<div id="page_content_wrapper" class="page_content_wrapper">
<div id="page_navigation" class="page_navigation">
<a href="/">Home</a>
<hr/>
{{if .Authenticated}}<a href="/user">{{.Username}}</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}}
<a href="/logout" style="vertical-align: 0.6em; font-size: 0.9em; padding: 1px;">(Log out)</a>{{else}}
<a href="/login">Login</a>
<a href="/register">Register</a>
{{end}}
<hr/>
<a href="/api">API</a>
</div>
<div id="page_content" class="page_content">
{{end}}
{{define "page_bottom"}}
<br/>
<div class="checkers inset" style="height: 100px;"></div>
<div class="highlight_dark">
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>
Reddit:&nbsp;<a href="https://reddit.com/r/pixeldrain" target="_blank">/r/pixeldrain</a>
Medium:&nbsp;<a href="https://medium.com/pixeldrain" target="_blank">Pixeldrain</a>
</div>
</div><!-- end page_content -->
</div><!-- end page_content_wrapper -->
</div><!-- end page_wrapper-->
<script>
var nav = document.getElementById("page_navigation");
var content = document.getElementById("page_content");
function toggleMenu() {
if (nav.offsetLeft === 0) {
// Menu is visible
nav.style.left = -nav.clientWidth - 10 + "px";
content.style.left = "0";
} else {
// Menu is hidden
nav.style.left = "0";
content.style.left = nav.clientWidth + "px";
}
}
</script>
{{end}}

41
res/template/home.html
View File

@@ -6,27 +6,30 @@
{{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"/>
{{template "page_top" .}}
<div class="checkers highlight_dark">
<img id="header_image" class="header_image" src="/res/img/header_neuropol.png" alt="Header image"/>
</div>
<br/>
<div id="body" class="body">
{{template "menu" .}}
<div class="highlight_middle">
<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="text_button" class="big_button button_highlight" onClick="window.location.href = '/t/'">Upload Text</button><br/>
By uploading files to Pixeldrain you accept that a cookie will
be placed in your web browser. More information below.
<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="text_button" class="big_button button_highlight" onClick="window.location.href = '/t/'">Upload Text</button>
<br/><br/>
<div id="uploads_queue"></div>
</div>
<div class="highlight_dark">
<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_bbcode">Copy BBCode to clipboard</button>
</div>
By uploading files to Pixeldrain you accept that a cookie will be
placed in your web browser. More information below.
<br/><br/>
<div id="uploads_queue"></div>
<br/>
<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_bbcode">Copy BBCode to clipboard</button>
<br/>
<div class="centered">
<h1>What is Pixeldrain?</h1>
<p>
Pixeldrain is a file sharing website built for speed and ease of
@@ -47,6 +50,7 @@
(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>
(Inspired by <a href="https://github.com/horst3180/Arc-theme" target="_blank">Arc GTK</a>)<br/>
<input type="radio" id="style_sunny" name="style"><label for="style_sunny">Sunny Style</label>
</div>
<h2>Questions and Answers</h2>
@@ -152,9 +156,10 @@
<a href="mailto:support@pixeldrain.com">support@pixeldrain.com</a>
</p>
{{template "footer"}}
</div>
{{template "page_bottom"}}
<script src="/res/script/jquery-2.1.4.min.js"></script>
<script type="text/javascript">var API_URL = "/api";</script>
<script src="/res/script/compiled/home.js"></script>

4
res/template/paste.html
View File

@@ -11,7 +11,7 @@
position: absolute;
width: 8em;
height: 100%;
background-color: var(--accent_color_medium)
background-color: var(--layer_2_color)
}
.textarea_container {
position: absolute;
@@ -26,7 +26,7 @@
height: 100%;
width: 100%;
/* border: none !important; */
background: var(--accent_color_dark);
background: var(--layer_1_color);
}
.toolbar_button{