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

add login/register forms. Restructure pixelapi

Browse Source
This commit is contained in:
Wim Brand
2018-06-20 23:47:47 +02:00
parent 75197310bf
commit ffa9fb3395
18 changed files with 292 additions and 228 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,4 +1,4 @@
/*
/*
Created on : Jun 3, 2015, 9:33:11 AM
Author : Fornax
*/
@@ -72,7 +72,7 @@ html{
margin: 0 4px;
text-decoration: none;
font-family: "Lato", sans-serif;
font-weight: bold;
font-weight: bold;
font-size: 26px;
}
.navigation a:hover {
@@ -123,8 +123,8 @@ html{
.highlight_middle {background-color: #3a3a3a;}
.highlight_dark {background-color: #303030;}
.border-top {border-top: #686868 1px solid;}
.border-bottom {border-bottom: #686868 1px solid;}
.border_top {border-top: #686868 1px solid;}
.border_bottom {border-bottom: #686868 1px solid;}
/* Common elements */
@@ -241,9 +241,13 @@ a:hover{
/* Form fields */
.form_input {
width: 100%;
}
/* BUTTONS */
button,
input[type="submit"],
input[type="submit"],
input[type="button"],
input[type="color"],
select{
@@ -260,19 +264,19 @@ select{
cursor: pointer;
}
button:hover,
input[type="submit"]:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
input[type="color"]:hover,
select:hover,
button:focus,
input[type="submit"]:focus,
input[type="submit"]:focus,
input[type="button"]:focus,
input[type="color"]:focus,
select:focus{
box-shadow: var(--highlight_border), 2px 2px 8px #000000;
}
button:active,
input[type="submit"]:active,
input[type="submit"]:active,
input[type="button"]:active,
input[type="color"]:active,
select:active{
@@ -281,10 +285,10 @@ select:active{
padding: 8px 8px 4px 12px;
}
.button_full_width {width: calc(100% - 4px);}
.button_highlight {background: linear-gradient(var(--highlight_color), var(--highlight_color_dark));}
.button_highlight:active{background: linear-gradient(var(--highlight_color_dark), var(--highlight_color));}
.button_red {background: linear-gradient(#821C40, #61152F);}
.button_red:active {background: linear-gradient(#61152F, #821C40);}
.button_highlight {background: linear-gradient(var(--highlight_color), var(--highlight_color_dark)) !important; color: #000000 !important;}
.button_highlight:active{background: linear-gradient(var(--highlight_color_dark), var(--highlight_color)) !important; color: #000000 !important;}
.button_red {background: linear-gradient(#821C40, #61152F) !important;}
.button_red:active {background: linear-gradient(#61152F, #821C40) !important;}
/* Dropdown list of the select tag */
option{

61
res/template/account/login.html
View File

@@ -1,24 +1,22 @@
{{define "login"}}
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title>Login ~ PixelDrain</title>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link rel="stylesheet" href="/res/style/home.css"/>
<link rel="stylesheet" href="/res/style/season.css"/>
<link rel="stylesheet" href="/res/style/form.css"/>
<link rel="stylesheet" href="/res/style/menu.css"/>
<link rel="stylesheet" href="/global.css"/>
<link rel="stylesheet" href="/res/style/layout.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 th:include="fragments :: background-pattern" th:inline="text"></style>
{{template "bgpattern"}}
<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.
<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" />
@@ -32,49 +30,30 @@
<body>
<div id='body' class="body">
<div th:replace="fragments :: menu"></div>
<br/><br/>
<div id="message" th:switch="${messageType}">
<div th:case="'info'" th:utext="${message}" id="text-info" class="text-info"></div>
<div th:case="'warn'" th:utext="${message}" id="text-warning" class="text-warning"></div>
</div>
Log in to your PixelDrain account
<form action="/login" method="POST">
<table>
{{template "menu"}}
<h1>Log in to your PixelDrain account</h1>
<form action="/login" method="POST" class="highlight_dark border_top border_bottom">
<table style="margin-left: auto; margin-right: auto;">
<tr>
<td>Username</td>
<td><input name="username" type="text" value="" th:value="${form_username}"/></td>
<td><input name="username" type="text" value=""/></td>
</tr>
<tr>
<td>Password</td>
<td><input name="password" type="password"/></td>
</tr>
<tr>
<td colspan=2 style="text-align: right;"><input type="submit" value="Login"/></td>
</tr>
</table>
<input type="submit" value="Login"/>
</form>
<br/><br/>
If you don't have a PixelDrain account, you can <a href="/register">register here</a>.
<br/>
If you don't have a PixelDrain account, you can <a href="/register">register here</a>. No e-mail address required.<br/>
{{template "footer"}}
</div>
<!-- Google Analytics Tracking Code -->
<script>
(function (i, s, o, g, r, a, m) {
i['GoogleAnalyticsObject'] = r;
i[r] = i[r] || function () {
(i[r].q = i[r].q || []).push(arguments)
}, i[r].l = 1 * new Date();
a = s.createElement(o),
m = s.getElementsByTagName(o)[0];
a.async = 1;
a.src = g;
m.parentNode.insertBefore(a, m)
})(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga');
ga('create', 'UA-24463738-4', 'auto');
ga('send', 'pageview');
</script>
{{template "analytics"}}
</body>
</html>
{{end}}

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

@@ -1,26 +1,22 @@
{{define "register"}}
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title>Register ~ PixelDrain</title>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link rel="stylesheet" href="/res/style/home.css"/>
<link rel="stylesheet" href="/res/style/season.css"/>
<link rel="stylesheet" href="/res/style/form.css"/>
<link rel="stylesheet" href="/res/style/menu.css"/>
<link rel="stylesheet" href="/global.css"/>
<link rel="stylesheet" href="/res/style/layout.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 th:include="fragments :: background-pattern" th:inline="text"></style>
{{template "bgpattern"}}
<script src='https://www.google.com/recaptcha/api.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.
<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" />
@@ -30,53 +26,39 @@
<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" />
<script src="https://www.google.com/recaptcha/api.js"></script>
</head>
<body>
<div id='body' class="body">
<div th:replace="fragments :: menu"></div>
<br/>
{{template "menu"}}
<h3>Register a new PixelDrain account</h3>
<div id="message" th:switch="${messageType}">
<div th:case="'info'" th:utext="${message}" id="text-info" class="text-info"></div>
<div th:case="'warn'" th:utext="${message}" id="text-warning" class="text-warning"></div>
</div>
<form action="/register" method="POST">
Username (Used to log in)<br/>
<input name="username" type="text" th:value="${username}"/><br/>
<br/>
Enter your password twice (Why twice? So we can verify that you have not made any typing errors)<br/>
<input name="password1" type="password" th:value="${password1}"/><br/>
<input name="password2" type="password" th:value="${password2}"/><br/>
<br/>
Prove that you're not a robot (Click the white box)
<div class="g-recaptcha" data-theme="dark"
data-sitekey="6LdEeQ0TAAAAALBmDF_k_2LgbpuJM66PGspByViS">
</div><br/>
<br/>
<input type="submit" value="Register"/>
<h1>Register a new Pixeldrain account</h1>
<form action="/login" method="POST" class="highlight_dark border_top border_bottom">
<table style="margin-left: auto; margin-right: auto; text-align: left; max-width: 30em;">
<tr><td>Username (Used to log in)</td></tr>
<tr><td><input name="username" type="text" class="form_input"/></td></tr>
<tr><td>
Enter your password twice:<br/>
(So we can verify that you have not made any typing errors)
</td></tr>
<tr><td><input name="password1" type="password" class="form_input"/></td></tr>
<tr><td><input name="password2" type="password" class="form_input"/></td></tr>
<tr><td>Prove that you're not a robot (Click the white box)</td></tr>
<tr><td style="text-align: center;">
<div class="g-recaptcha" data-theme="dark" data-sitekey="6LdEeQ0TAAAAALBmDF_k_2LgbpuJM66PGspByViS"></div>
</td></tr>
</tr>
<tr><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>
<!-- Google Analytics Tracking Code -->
<script>
(function (i, s, o, g, r, a, m) {
i['GoogleAnalyticsObject'] = r;
i[r] = i[r] || function () {
(i[r].q = i[r].q || []).push(arguments)
}, i[r].l = 1 * new Date();
a = s.createElement(o),
m = s.getElementsByTagName(o)[0];
a.async = 1;
a.src = g;
m.parentNode.insertBefore(a, m)
})(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga');
ga('create', 'UA-24463738-4', 'auto');
ga('send', 'pageview');
</script>
{{template "analytics"}}
</body>
</html>
{{end}}

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

@@ -1,6 +1,6 @@
{{define "footer"}}
<br/>
<div class="highlight_dark border-top border-bottom">
<div class="highlight_dark border_top border_bottom">
Pixeldrain is a product by <a href="//fornaxian.com" target="_blank">Fornaxian Technologies</a>.
</div>
{{end}}
{{end}}

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

@@ -1,8 +1,9 @@
{{define "menu"}}
<div id="navigation" class="highlight_light border-top border-bottom navigation">
<div id="navigation" class="highlight_light border_top border_bottom navigation">
<a href="/">Home</a>
<a href="/history">My&nbsp;Files</a>
<a href="/api">API&nbsp;Documentation</a>
<a href="/user">Account</a>
<a href="javascript:void(0);" class="icon" onclick="expandNavigation()">&#9776;</a>
<script>
function expandNavigation() {
@@ -15,4 +16,4 @@
}
</script>
</div>
{{end}}
{{end}}

4
res/template/home.html
View File

@@ -36,14 +36,14 @@
<br/>
<div id="body" class="body">
{{template "menu"}}
<div class="highlight_middle border-bottom">
<div class="highlight_middle border_bottom">
<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/>
<div id="uploads_queue" class="uploads_queue"></div>
</div>
<div class="highlight_dark border-bottom">
<div class="highlight_dark border_bottom">
<button id="btn_create_list">Create list with uploaded files</button>
</div>