Browse Source

portal page updated - pxcom-like

master
barry 6 years ago
parent
commit
d8b942b3e5
6 changed files with 283 additions and 34 deletions
  1. 1
      src/portal-srv/index.js
  2. BIN
      srv/webapp/portal/clouds.jpg
  3. BIN
      srv/webapp/portal/din-regular.ttf
  4. 170
      srv/webapp/portal/index.html
  5. BIN
      srv/webapp/portal/logos.png
  6. 146
      srv/webapp/portal/ready.html

1
src/portal-srv/index.js

@ -77,7 +77,6 @@ app.use(function (req, res, next) {
function findMacAddress (pIp, pCallback) {
exec(CFG.arpCmd, function (pCode, pStdout) {
console.log(pCode, pStdout)
let lines = pStdout.split('\n')
if (!lines.length) {
return pCallback('NotFound')

BIN
srv/webapp/portal/clouds.jpg

Before After
Width: 459  |  Height: 425  |  Size: 26 KiB

BIN
srv/webapp/portal/din-regular.ttf

170
srv/webapp/portal/index.html

@ -1,15 +1,155 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Portal Captif</title>
</head>
<body>
<h1>Hello World</h1>
<form action="/ready.html">
<button type="submit">OKAY!!!</button>
</form>
</body>
</html>
<html>
<head>
<title>PXCom Authentication</title>
<meta http-equiv="Cache-control" content="no-cache">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Expires" content="-1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style type="text/css">
form {
margin: 0;
}
a {
text-decoration: none !important;
color: black !important;
}
@font-face {
font-family: "Din";
src: url('din-regular.ttf');
}
.main {
font-family:Din;
height: 100%;
width: 100%;
background-color: #002857;
}
.message {
height: 40%;
line-height:100%;
background-image: url('clouds.jpg');
background-position: center;
background-size: cover;
vertical-align: middle;
text-align: center;
color: white;
font-size: 200%;
position: relative;
}
.message > * {
width: 100%;
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%);
}
.connect {
height: 40%;
padding: 20px;
box-sizing: border-box;
font-weight: bold;
}
.connectButton {
width: 100%;
text-align: center;
background-color:white;
color:black;
cursor: pointer;
height: 40%;
line-height:100%;
vertical-align: middle;
text-align: center;
font-size: 100%;
position: relative;
}
.connectButton > * {
width: 100%;
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%);
}
.powered {
height: 5%;
width:100%;
vertical-align: middle;
text-align: center;
color: white;
}
.logos {
height: 15%;
width: 100%;
text-align: center;
}
.logos > * {
max-width: 80%;
max-height: 100%;
}
</style>
</head>
<body style="background-color: white" text="#000000" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" >
<FORM>
<INPUT TYPE="hidden" NAME="buttonClicked" SIZE="16" MAXLENGTH="15" VALUE="0">
<INPUT TYPE="hidden" NAME="err_flag" SIZE="16" MAXLENGTH="15" VALUE="0">
<INPUT TYPE="hidden" NAME="err_msg" SIZE="32" MAXLENGTH="31" VALUE="">
<INPUT TYPE="hidden" NAME="info_flag" SIZE="16" MAXLENGTH="15" VALUE="0">
<INPUT TYPE="hidden" NAME="info_msg" SIZE="32" MAXLENGTH="31" VALUE="">
<INPUT TYPE="hidden" NAME="redirect_url" SIZE="255" MAXLENGTH="255" VALUE="">
<INPUT TYPE="hidden" NAME="network_name" SIZE="64" MAXLENGTH="64" VALUE="Guest Network">
<div class="main">
<div class="message"><span>We connect you simply!</span></div>
<div class="connect">
<div class="connectButton" onclick="submitAction();">
<span>Connect</span>
</div>
</div>
<div class="powered">Powered by</div>
<div class="logos">
<img src="logos.png" />
</div>
</div>
</FORM>
</body>
</html>
<script>
var K_NB_TRY = 4
var K_HOME_URL = 'http://eca.aero'
var K_VALIDATE_URL = 'http://192.168.8.102:8889/validate'
function submitAction () {
sendValidate(0)
}
function goToHome () {
window.location = K_HOME_URL
}
function sendValidate (pNbTry) {
var xhttp = new XMLHttpRequest()
xhttp.onreadystatechange = function (event) {
if (this.readyState === XMLHttpRequest.DONE) {
console.log("Response: %d (%s)", this.status, this.statusText)
if (this.status < 400 || pNbTry >= K_NB_TRY) {
goToHome()
} else {
setTimeout(function () {
pNbTry++
sendValidate(pNbTry)
}, 200)
}
}
}
xhttp.open('GET', K_VALIDATE_URL)
xhttp.send(null)
}
</script>

BIN
srv/webapp/portal/logos.png

Before After
Width: 993  |  Height: 181  |  Size: 22 KiB

146
srv/webapp/portal/ready.html

@ -1,25 +1,135 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Portal Captif</title>
</head>
<body>
<h1>Ready to navigate!</h1>
<a href="http://eca.aero" target="_blank">Go!!!</a>
</body>
<html>
<head>
<title>PXCom Authentication</title>
<meta http-equiv="Cache-control" content="no-cache">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Expires" content="-1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style type="text/css">
form {
margin: 0;
}
a {
text-decoration: none !important;
color: black !important;
}
@font-face {
font-family: "Din";
src: url('din-regular.ttf');
}
.main {
font-family:Din;
height: 100%;
width: 100%;
background-color: #002857;
}
.message {
height: 40%;
line-height:100%;
background-image: url('clouds.jpg');
background-position: center;
background-size: cover;
vertical-align: middle;
text-align: center;
color: white;
font-size: 200%;
position: relative;
}
.message > * {
width: 100%;
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%);
}
.connect {
height: 40%;
padding: 20px;
box-sizing: border-box;
font-weight: bold;
}
.connectButton {
width: 100%;
text-align: center;
background-color:white;
color:black;
height: 40%;
line-height:100%;
vertical-align: middle;
text-align: center;
font-size: 100%;
position: relative;
}
.connectButton > * {
width: 100%;
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%);
}
.powered {
height: 5%;
width:100%;
vertical-align: middle;
text-align: center;
color: white;
}
.logos {
height: 15%;
width: 100%;
text-align: center;
}
.logos > * {
max-width: 80%;
max-height: 100%;
}
</style>
</head>
<body style="background-color: white" text="#000000" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" >
<FORM>
<INPUT TYPE="hidden" NAME="buttonClicked" SIZE="16" MAXLENGTH="15" VALUE="0">
<INPUT TYPE="hidden" NAME="err_flag" SIZE="16" MAXLENGTH="15" VALUE="0">
<INPUT TYPE="hidden" NAME="err_msg" SIZE="32" MAXLENGTH="31" VALUE="">
<INPUT TYPE="hidden" NAME="info_flag" SIZE="16" MAXLENGTH="15" VALUE="0">
<INPUT TYPE="hidden" NAME="info_msg" SIZE="32" MAXLENGTH="31" VALUE="">
<INPUT TYPE="hidden" NAME="redirect_url" SIZE="255" MAXLENGTH="255" VALUE="">
<INPUT TYPE="hidden" NAME="network_name" SIZE="64" MAXLENGTH="64" VALUE="Guest Network">
<div class="main">
<div class="message"><span>We connect you simply!</span></div>
<div class="connect">
<a href="http://google.com">
<div class="connectButton"><span>Open portal</span></div>
</a>
</div>
<div class="powered">Powered by</div>
<div class="logos">
<img src="logos.png" />
</div>
</div>
</FORM>
</body>
</html>
<script>
var xhttp = new XMLHttpRequest()
xhttp.onreadystatechange = function(event) {
if (this.readyState === XMLHttpRequest.DONE) {
console.log("Response: %d (%s)", this.status, this.statusText)
function sendValidate () {
var xhttp = new XMLHttpRequest()
xhttp.onreadystatechange = function(event) {
if (this.readyState === XMLHttpRequest.DONE) {
console.log("Response: %d (%s)", this.status, this.statusText)
}
}
xhttp.open('GET', 'http://captive.eca.aero/validate')
xhttp.send(null)
}
xhttp.open('GET', 'http://captive.eca.aero/validate')
xhttp.send(null)
setTimeout(sendValidate, 2000)
</script>
Loading…
Cancel
Save