1
0
Fork 0
mirror of https://github.com/Ylianst/MeshCentral.git synced 2025-03-09 15:40:18 +00:00

First version of alternate style login page.

This commit is contained in:
Ylian Saint-Hilaire 2020-09-01 11:51:06 -07:00
parent c30d06491b
commit 4f03629274
17 changed files with 400 additions and 118 deletions

View file

@ -48,12 +48,12 @@
<div id="container">
<!-- Begin Masthead -->
<div id="masthead" class=noselect style="background:url(logo.png) 0px 0px;background-color:#036;background-repeat:no-repeat;height:66px;width:100%;overflow:hidden;">
<div style="float:left">{{{titlehtml}}}</div>
<div style="float:left;text-shadow: 1px 1px 2px #000">{{{titlehtml}}}</div>
<div style="float:left; height: 66px; color:#c8c8c8; padding-left:14px; padding-top:7px">
<strong><font style="font-size:46px; font-family: Arial, Helvetica, sans-serif;">{{{title1}}}</font></strong>
<strong><font style="font-size:46px; font-family: Arial, Helvetica, sans-serif;text-shadow: 1px 1px 2px #000">{{{title1}}}</font></strong>
</div>
<div style="float:left; height: 66px; color:#c8c8c8; padding-left:5px; padding-top:14px">
<strong><font style="font-size:14px; font-family: Arial, Helvetica, sans-serif;">{{{title2}}}</font></strong>
<strong><font style="font-size:14px; font-family: Arial, Helvetica, sans-serif;text-shadow: 1px 1px 2px #000">{{{title2}}}</font></strong>
</div>
<p id="logoutControl" style="color:white;font-size:11px;margin: 10px 10px 0;">{{{logoutControl}}}</p>
</div>

View file

@ -14,18 +14,18 @@
<div id=container style=max-height:100vh>
<div id=mastheadx></div>
<div id=masthead style="background:url(logo.png) 0px 0px;background-color:#036;background-repeat:no-repeat;height:66px;width:100%;overflow:hidden">
<div style="float:left">{{{titlehtml}}}</div>
<div style="float:left;text-shadow: 1px 1px 2px #000">{{{titlehtml}}}</div>
<div style=float:left;height:66px;color:#c8c8c8;padding-left:14px;padding-top:7px>
<strong><font style="font-size:46px;font-family:Arial,Helvetica,sans-serif">{{{title1}}}</font></strong>
<strong><font style="font-size:46px;font-family:Arial,Helvetica,sans-serif;text-shadow: 1px 1px 2px #000">{{{title1}}}</font></strong>
</div>
<div style=float:left;height:66px;color:#c8c8c8;padding-left:5px;padding-top:14px>
<strong><font style="font-size:14px;font-family:Arial,Helvetica,sans-serif">{{{title2}}}</font></strong>
<strong><font style="font-size:14px;font-family:Arial,Helvetica,sans-serif;text-shadow: 1px 1px 2px #000">{{{title2}}}</font></strong>
</div>
</div>
<div id=page_content style=max-height:calc(100vh-138px)>
<div id=column_l>
<h1>Download</h1>
<p style=margin-left:20px>{{{message}}}</p>
<p id="message" style=margin-left:20px></p>
<br />
</div>
<div id=footer>
@ -41,5 +41,29 @@
</div>
</div>
</div>
<script>
var messageid = parseInt('{{{messageid}}}');
var fileurl = '{{{fileurl}}}';
var filename = '{{{filename}}}';
var filesize = parseInt('{{{filesize}}}');
// Quick UI functions, a bit of a replacement for jQuery
function Q(x) { return document.getElementById(x); } // "Q"
function QS(x) { try { return Q(x).style; } catch (x) { } } // "Q" style
function QE(x, y) { try { Q(x).disabled = !y; } catch (x) { } } // "Q" enable
function QV(x, y) { try { QS(x).display = (y ? '' : 'none'); } catch (x) { } } // "Q" visible
function QA(x, y) { Q(x).innerHTML += y; } // "Q" append
function QH(x, y) { Q(x).innerHTML = y; } // "Q" html
function QC(x) { try { return Q(x).classList; } catch (x) { } } // "Q" class
function format(format) { var args = Array.prototype.slice.call(arguments, 1); return format.replace(/{(\d+)}/g, function (match, number) { return typeof args[number] != 'undefined' ? args[number] : match; }); };
function EscapeHtml(x) { if (typeof x == 'string') return x.replace(/&/g, '&amp;').replace(/>/g, '&gt;').replace(/</g, '&lt;').replace(/"/g, '&quot;').replace(/'/g, '&apos;'); if (typeof x == 'boolean') return x; if (typeof x == 'number') return x; }
if (messageid == 1) {
var lenstr = (filesize == 1)?format("1 byte"):format("{0} bytes", filesize);
QH('message', '<a href="' + fileurl + '">' + EscapeHtml(filename) + '</a>, ' + lenstr);
} else if (messageid == 2) {
QH('message', "Invalid file link");
}
</script>
</body>
</html>

View file

@ -0,0 +1,88 @@
<!DOCTYPE html>
<html lang="en" dir="ltr" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv=X-UA-Compatible content="IE=edge" />
<meta content="text/html;charset=utf-8" http-equiv=Content-Type />
<meta name=viewport content="user-scalable=1.0,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0" />
<meta name=apple-mobile-web-app-capable content=yes />
<meta name=format-detection content="telephone=no" />
<link type=text/css href="/styles/style.css" media="screen" rel="stylesheet" title="CSS" />
<link rel="apple-touch-icon" href="/favicon-303x303.png" />
<title>{{{title1}}} - Download</title>
<style>
body {
background-color: cadetblue;
background: linear-gradient(to bottom right, #369, #036);
height:100%;
overflow:hidden;
}
a:link { color: #c8c8c8; }
a:visited { color: #c8c8c8; }
a:hover { color: #c8c8c8; }
a:active { color: #c8c8c8; }
</style>
</head>
<body>
<img style="position:absolute;left:0;bottom:0;z-index:-1;height:60%;opacity:0.1" src="../../images/login/back.png" />
<table id="centralTable" class="container" style="height:100%;z-index:1">
<tr>
<td style="width:100%;text-align:center">
<div id="message" style="display:none;color:#c8c8c8;font-size:20px"></div>
<table id="filetable" style="margin: 0 auto;color:#c8c8c8">
<tr>
<td>
<a id=fileimagelink>
<img id=fileimage src="../../images/login/file48.png" title="File" loading="lazy" width="48" height="48" style="margin-left:3px;margin-right:3px;border-radius:3px;box-shadow:2px 2px 5px black;cursor:pointer;background-color:#FFF;margin-right:8px" />
</a>
</td>
<td style="text-align:left">
<div id="flink" style="font-size:22px">
<a id="filelink"></a>
</div>
<div id="filesize" style="font-size:16px"></div>
</td>
</tr>
</table>
</td>
</tr>
<tr style="height:20px">
<td>
<div>
<div id="flink" style="margin-left:4px">{{{footer}}}</div>
<div id="flink" style="float:right;margin-right:4px">{{{rootCertLink}}}&nbsp;<a href=../../terms>Terms &amp; Privacy</a></div>
</div>
</td>
</tr>
</table>
<script>
var messageid = parseInt('{{{messageid}}}');
var fileurl = '{{{fileurl}}}';
var filename = '{{{filename}}}';
var filesize = parseInt('{{{filesize}}}');
// Quick UI functions, a bit of a replacement for jQuery
function Q(x) { return document.getElementById(x); } // "Q"
function QS(x) { try { return Q(x).style; } catch (x) { } } // "Q" style
function QE(x, y) { try { Q(x).disabled = !y; } catch (x) { } } // "Q" enable
function QV(x, y) { try { QS(x).display = (y ? '' : 'none'); } catch (x) { } } // "Q" visible
function QA(x, y) { Q(x).innerHTML += y; } // "Q" append
function QH(x, y) { Q(x).innerHTML = y; } // "Q" html
function QC(x) { try { return Q(x).classList; } catch (x) { } } // "Q" class
function format(format) { var args = Array.prototype.slice.call(arguments, 1); return format.replace(/{(\d+)}/g, function (match, number) { return typeof args[number] != 'undefined' ? args[number] : match; }); };
function EscapeHtml(x) { if (typeof x == 'string') return x.replace(/&/g, '&amp;').replace(/>/g, '&gt;').replace(/</g, '&lt;').replace(/"/g, '&quot;').replace(/'/g, '&apos;'); if (typeof x == 'boolean') return x; if (typeof x == 'number') return x; }
QV('filetable', messageid == 1);
QV('message', messageid == 2);
if (messageid == 1) {
QH('filelink', EscapeHtml(filename));
Q('filelink').href = fileurl;
Q('fileimagelink').href = fileurl;
if (filesize == 1) { QH('filesize', format("1 byte")); } else { QH('filesize', format("{0} bytes", filesize)); }
} else if (messageid == 2) {
QH('message', "Invalid file link");
}
</script>
</body>
</html>

View file

@ -14,12 +14,12 @@
<div id="container">
<!-- Begin Masthead -->
<div id="masthead" class=noselect style="background:url(logo.png) 0px 0px;background-color:#036;background-repeat:no-repeat;height:66px;width:100%;overflow:hidden;">
<div style="float:left">{{{titlehtml}}}</div>
<div style="float:left;text-shadow: 1px 1px 2px #000">{{{titlehtml}}}</div>
<div style="float:left; height: 66px; color:#c8c8c8; padding-left:16px; padding-top:7px">
<strong><font style="font-size:46px; font-family: Arial, Helvetica, sans-serif;">{{{title1}}}</font></strong>
<strong><font style="font-size:46px; font-family: Arial, Helvetica, sans-serif;text-shadow: 1px 1px 2px #000">{{{title1}}}</font></strong>
</div>
<div style="float:left; height: 66px; color:#c8c8c8; padding-left:5px; padding-top:14px">
<strong><font style="font-size:14px; font-family: Arial, Helvetica, sans-serif;">{{{title2}}}</font></strong>
<strong><font style="font-size:14px; font-family: Arial, Helvetica, sans-serif;text-shadow: 1px 1px 2px #000">{{{title2}}}</font></strong>
</div>
</div>
<div id="page_leftbar">

View file

@ -0,0 +1,46 @@
<!DOCTYPE html>
<html lang="en" dir="ltr" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv=X-UA-Compatible content="IE=edge" />
<meta content="text/html;charset=utf-8" http-equiv=Content-Type />
<meta name=viewport content="user-scalable=1.0,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0" />
<meta name=apple-mobile-web-app-capable content=yes />
<meta name=format-detection content="telephone=no" />
<link type=text/css href="/styles/style.css" media="screen" rel="stylesheet" title="CSS" />
<link rel="apple-touch-icon" href="/favicon-303x303.png" />
<title>{{{title1}}} - Download</title>
<style>
body {
background-color: cadetblue;
background: linear-gradient(to bottom right, #369, #036);
height: 100%;
overflow: hidden;
}
a:link { color: #c8c8c8; }
a:visited { color: #c8c8c8; }
a:hover { color: #c8c8c8; }
a:active { color: #c8c8c8; }
</style>
</head>
<body>
<img style="position:absolute;left:0;bottom:0;z-index:-1;height:60%;opacity:0.1" src="../../images/login/back.png" />
<table id="centralTable" class="container" style="height:100%;z-index:1">
<tr>
<td style="width:100%;text-align:center">
<div style="text-align:center;padding-top:30px;font-size:160px;font-family:Arial;color:#bbb"><b>404</b></div>
<div style="text-align:center;font-size:20px;font-family:Arial;color:#999">This page does not exist</div>
<div style="text-align:center;padding-top:20px;font-size:20px;font-family:Arial;color:#999"><a href="/"><b>Go to main site</b></a></div>
</td>
</tr>
<tr style="height:20px">
<td>
<div>
<div id="flink" style="margin-left:4px">{{{footer}}}</div>
<div id="flink" style="float:right;margin-right:4px">{{{rootCertLink}}}&nbsp;<a href=../../terms>Terms &amp; Privacy</a></div>
</div>
</td>
</tr>
</table>
</body>
</html>

View file

@ -48,12 +48,12 @@
<div id="container">
<!-- Begin Masthead -->
<div id="masthead" class=noselect style="background:url(logo.png) 0px 0px;background-color:#036;background-repeat:no-repeat;height:66px;width:100%;overflow:hidden;">
<div style="float:left">{{{titlehtml}}}</div>
<div style="float:left;text-shadow: 1px 1px 2px #000">{{{titlehtml}}}</div>
<div style="float:left; height: 66px; color:#c8c8c8; padding-left:14px; padding-top:7px">
<strong><font style="font-size:46px; font-family: Arial, Helvetica, sans-serif;">{{{title1}}}</font></strong>
<strong><font style="font-size:46px; font-family: Arial, Helvetica, sans-serif;text-shadow: 1px 1px 2px #000">{{{title1}}}</font></strong>
</div>
<div style="float:left; height: 66px; color:#c8c8c8; padding-left:5px; padding-top:14px">
<strong><font style="font-size:14px; font-family: Arial, Helvetica, sans-serif;">{{{title2}}}</font></strong>
<strong><font style="font-size:14px; font-family: Arial, Helvetica, sans-serif;text-shadow: 1px 1px 2px #000">{{{title2}}}</font></strong>
</div>
<p id="logoutControl" style="color:white;font-size:11px;margin: 10px 10px 0;">{{{logoutControl}}}</p>
</div>

View file

@ -18,21 +18,10 @@
background: linear-gradient(to bottom right, #369, #036);
}
#flink a:link {
color: #c8c8c8;
}
#flink a:visited {
color: #c8c8c8;
}
#flink a:hover {
color: #c8c8c8;
}
#flink a:active {
color: #c8c8c8;
}
#flink a:link { color: #c8c8c8; }
#flink a:visited { color: #c8c8c8; }
#flink a:hover { color: #c8c8c8; }
#flink a:active { color: #c8c8c8; }
</style>
</head>
<body id="body" onload="if (typeof(startup) !== 'undefined') startup();" class="arg_hide login">
@ -140,15 +129,15 @@
<div>
<b>Account Reset</b>
</div>
<table>
<table style="width:100%;margin-top:4px;margin-bottom:4px">
<tr>
<td align=right width=100>Email:</td>
<td><input id=remail type=text inputmode="email" name=email maxlength=256 onchange=validateReset() onkeyup=validateReset(event) /></td>
<td>
<input id=remail title="Email" style="width:250px;border:0;border-radius:8px;padding:8px;background-color:#FFF8CC" autocomplete="username" placeholder="Email" type=text maxlength=256 name=email onchange=validateReset() onkeyup=validateReset(event) />
</td>
</tr>
<tr>
<td colspan=2>
<div style=float:right><input id=eresetButton type=submit value="Reset Account" disabled="disabled" /></div>
<div id=passWarning style="padding-top:6px"></div>
<td>
<input id=eresetButton style="width:250px;border:0;border-radius:4px;padding:6px" type=submit value="Reset Account" disabled="disabled" />
</td>
</tr>
</table>

View file

@ -15,12 +15,12 @@
<div id=container style=max-height:100vh>
<div id=mastheadx></div>
<div id=masthead style="background:url(logo.png) 0px 0px;background-color:#036;background-repeat:no-repeat;height:66px;width:100%;overflow:hidden">
<div style="float:left">{{{titlehtml}}}</div>
<div style="float:left;text-shadow: 1px 1px 2px #000">{{{titlehtml}}}</div>
<div style=float:left;height:66px;color:#c8c8c8;padding-left:14px;padding-top:7px>
<strong><font style="font-size:46px;font-family:Arial,Helvetica,sans-serif">{{{title1}}}</font></strong>
<strong><font style="font-size:46px;font-family:Arial,Helvetica,sans-serif;text-shadow: 1px 1px 2px #000">{{{title1}}}</font></strong>
</div>
<div style=float:left;height:66px;color:#c8c8c8;padding-left:5px;padding-top:14px>
<strong><font style="font-size:14px;font-family:Arial,Helvetica,sans-serif">{{{title2}}}</font></strong>
<strong><font style="font-size:14px;font-family:Arial,Helvetica,sans-serif;text-shadow: 1px 1px 2px #000">{{{title2}}}</font></strong>
</div>
</div>
<div id=page_content style=max-height:calc(100vh-138px)>

View file

@ -15,12 +15,12 @@
<div id="container">
<!-- Begin Masthead -->
<div id="masthead" class=noselect style="background:url(logo.png) 0px 0px;background-color:#036;background-repeat:no-repeat;height:66px;width:100%;overflow:hidden;">
<div style="float:left">{{{titlehtml}}}</div>
<div style="float:left;text-shadow: 1px 1px 2px #000">{{{titlehtml}}}</div>
<div style="float:left; height: 66px; color:#c8c8c8; padding-left:14px; padding-top:7px">
<strong><font style="font-size:46px; font-family: Arial, Helvetica, sans-serif;">{{{title1}}}</font></strong>
<strong><font style="font-size:46px; font-family: Arial, Helvetica, sans-serif;text-shadow: 1px 1px 2px #000">{{{title1}}}</font></strong>
</div>
<div style="float:left; height: 66px; color:#c8c8c8; padding-left:5px; padding-top:14px">
<strong><font style="font-size:14px; font-family: Arial, Helvetica, sans-serif;">{{{title2}}}</font></strong>
<strong><font style="font-size:14px; font-family: Arial, Helvetica, sans-serif;text-shadow: 1px 1px 2px #000">{{{title2}}}</font></strong>
</div>
<p id="logoutControl" style="color:white;font-size:11px;margin: 10px 10px 0;"></p>
</div>