135 lines
6.2 KiB
HTML
135 lines
6.2 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<link rel="icon" href="/favicon.ico">
|
|
<title>RDP</title>
|
|
<script type="text/javascript" src="mstsc.js"></script>
|
|
<script type="text/javascript" src="keyboard.js"></script>
|
|
<script type="text/javascript" src="rle.js"></script>
|
|
<script type="text/javascript" src="client.js"></script>
|
|
<script type="text/javascript" src="canvas.js"></script>
|
|
<style>
|
|
body {
|
|
font-family:sans-serif;
|
|
margin: 0;
|
|
xoverflow: hidden;
|
|
background-color: black;
|
|
}
|
|
|
|
.container {
|
|
background-color:cadetblue;
|
|
background: linear-gradient(to bottom right, #003366, #0055AA);
|
|
}
|
|
|
|
.middleContainer {
|
|
color: lightgray;
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
-moz-transform: translateX(-50%) translateY(-50%);
|
|
-webkit-transform: translateX(-50%) translateY(-50%);
|
|
transform: translateX(-50%) translateY(-50%);
|
|
}
|
|
|
|
.signinform {
|
|
width: 330px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.formLabel { }
|
|
|
|
.formControl {
|
|
width: 210px;
|
|
font-size: 17px;
|
|
border-radius: 5px;
|
|
}
|
|
|
|
.connectButton {
|
|
margin-top: 6px;
|
|
width: 100%;
|
|
padding: 6px;
|
|
font-size: 16px;
|
|
border-radius: 5px;
|
|
cursor:pointer;
|
|
}
|
|
|
|
.mainCanvas {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
-moz-transform: translateX(-50%) translateY(-50%);
|
|
-webkit-transform: translateX(-50%) translateY(-50%);
|
|
transform: translateX(-50%) translateY(-50%);
|
|
}
|
|
</style>
|
|
<script language="javascript">
|
|
var client = null;
|
|
var canvas = null;
|
|
var urlargs = parseUriArgs();
|
|
if (urlargs.name) { document.title = urlargs.name + ' - ' + document.title; }
|
|
|
|
function load() {
|
|
if (urlargs.name) { QH('computerName', urlargs.name); }
|
|
client = MstscClient.create(Q('myCanvas'));
|
|
Q('inputDomain').focus();
|
|
canvas = Q('myCanvas');
|
|
}
|
|
|
|
function connect(domain, username, password) {
|
|
var domain = Q('inputDomain').value;
|
|
var username = Q('inputUsername').value;
|
|
var password = Q('inputPassword').value;
|
|
QV('myCanvas', true);
|
|
QV('main', false);
|
|
canvas.width = window.innerWidth;
|
|
canvas.height = window.innerHeight;
|
|
console.log('CanvasSize', canvas.width, canvas.height);
|
|
client.connect(urlargs.ws, domain, username, password, function (err) { QV('myCanvas', false); QV('main', true); });
|
|
return false;
|
|
}
|
|
|
|
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 parseUriArgs() { var href = window.document.location.href; if (href.endsWith('#')) { href = href.substring(0, href.length - 1); } var name, r = {}, parsedUri = href.split(/[\?&|\=]/); parsedUri.splice(0, 1); for (x in parsedUri) { switch (x % 2) { case 0: { name = decodeURIComponent(parsedUri[x]); break; } case 1: { r[name] = decodeURIComponent(parsedUri[x]); var x = parseInt(r[name]); if (x == r[name]) { r[name] = x; } break; } default: { break; } } } return r; }
|
|
function EscapeHtml(x) { if (typeof x == 'string') return x.replace(/&/g, '&').replace(/>/g, '>').replace(/</g, '<').replace(/"/g, '"').replace(/'/g, '''); if (typeof x == 'boolean') return x; if (typeof x == 'number') return x; }
|
|
function EscapeHtmlBreaks(x) { if (typeof x == 'string') return x.replace(/&/g, '&').replace(/>/g, '>').replace(/</g, '<').replace(/"/g, '"').replace(/'/g, ''').replace(/\r/g, '<br />').replace(/\n/g, '').replace(/\t/g, ' '); if (typeof x == 'boolean') return x; if (typeof x == 'number') return x; }
|
|
</script>
|
|
</head>
|
|
<body onload='load()' style="position:absolute;top:0px;right:0;left:0;bottom:0px">
|
|
<div id="main" class="container" style="position:absolute;top:0px;right:0;left:0;bottom:0px">
|
|
<div class="middleContainer">
|
|
<div id="computerName" style="width:100%;text-align:center;font-size:24px"></div>
|
|
<table class="signinform">
|
|
<tr>
|
|
<td colspan="2"><hr style="color:gray;border:1px solid;" /></td>
|
|
</tr>
|
|
<tr>
|
|
<td><label for="inputDomain" class="formLabel">Domain</label></td>
|
|
<td style="text-align:right"><input type="text" id="inputDomain" class="formControl" placeholder="Domain"></td>
|
|
</tr>
|
|
<tr>
|
|
<td><label for="inputUsername" class="formLabel">Username</label></td>
|
|
<td style="text-align:right"><input type="text" id="inputUsername" class="formControl" placeholder="Username"></td>
|
|
</tr>
|
|
<tr>
|
|
<td><label for="inputPassword" class="formLabel">Password</label></td>
|
|
<td style="text-align:right"><input type="password" id="inputPassword" class="formControl" placeholder="Password"></td>
|
|
</tr>
|
|
<tr>
|
|
<td colspan="2"><button class="connectButton" onclick="return connect()">Connect</button></td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
<canvas id="myCanvas" class="mainCanvas" style="display:none" />
|
|
</body>
|
|
</html>
|