Merge pull request #259 from rumpelrausch/dev
Second web mcdu with "photorealistic" appearance
This commit is contained in:
legoboyvdlp
GitHub
commit
3712fdf89f
9 changed files with 1069 additions and 341 deletions
342
WebPanel/WebPanel1/index.html
Normal file
342
WebPanel/WebPanel1/index.html
Normal file
|
|
@ -0,0 +1,342 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en" translate="no">
|
||||
|
||||
<head>
|
||||
<title>A320 MCDU</title>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
|
||||
<link rel="manifest" href="mcdu_manifest.json" />
|
||||
<meta name="apple-mobile-web-app-status-bar" content="#db4938" />
|
||||
<meta name="theme-color" content="#db4938" />
|
||||
<script>
|
||||
let screen;
|
||||
let screen_src;
|
||||
let blank_src;
|
||||
let loading = 0;
|
||||
let scheduled_load = 0;
|
||||
function refresh_screen(force) {
|
||||
if (loading && !force) {
|
||||
scheduled_load = 1;
|
||||
}
|
||||
else {
|
||||
loading = 1;
|
||||
screen.src = screen_src + '&random=' + (new Date).getTime()
|
||||
}
|
||||
}
|
||||
function press_button(type, text) {
|
||||
let request = new XMLHttpRequest;
|
||||
request.open(
|
||||
"POST",
|
||||
window.location.protocol + "//" + window.location.host + "/run.cgi?value=nasal"
|
||||
);
|
||||
request.setRequestHeader("Content-Type", "application/json");
|
||||
let body = JSON.stringify({
|
||||
"name": "",
|
||||
"children": [
|
||||
{
|
||||
"name": "script",
|
||||
"index": 0,
|
||||
"value": "mcdu." + type + "(\"" + text + "\", 0);"
|
||||
}
|
||||
]
|
||||
});
|
||||
request.send(body);
|
||||
request.addEventListener('load', function () {
|
||||
refresh_screen();
|
||||
}, true);
|
||||
}
|
||||
|
||||
var preventzoomaction = function(e) { //https://exceptionshub.com/disable-double-tap-zoom-option-in-browser-on-touch-devices.html
|
||||
var t2 = e.timeStamp;
|
||||
var t1 = e.currentTarget.dataset.lastTouch || t2;
|
||||
var dt = t2 - t1;
|
||||
var fingers = e.touches.length;
|
||||
e.currentTarget.dataset.lastTouch = t2;
|
||||
|
||||
if (!dt || dt > 500 || fingers > 1) return; // not double-tap
|
||||
|
||||
e.preventDefault();
|
||||
e.target.click();
|
||||
};
|
||||
|
||||
window.addEventListener('load', function () {
|
||||
|
||||
let tds = document.querySelectorAll('.input td');
|
||||
for (const td of tds) {
|
||||
td.addEventListener('click', function () {
|
||||
if (td.className == "disabled") return;
|
||||
press_button("button", td.textContent);
|
||||
}, true);
|
||||
td.addEventListener('touchstart', preventzoomaction, true);
|
||||
}
|
||||
tds = document.querySelectorAll('.enter td');
|
||||
for (const td of tds) {
|
||||
td.addEventListener('click', function () {
|
||||
press_button(td.getAttribute("button-side") == "l" ? "lskbutton" : "rskbutton", td.getAttribute("button-id"));
|
||||
}, true);
|
||||
td.addEventListener('touchstart', preventzoomaction, true);
|
||||
}
|
||||
tds = document.querySelectorAll('.menu td');
|
||||
for (const td of tds) {
|
||||
td.addEventListener('click', function () {
|
||||
press_button("pagebutton", td.className);
|
||||
}, true);
|
||||
td.addEventListener('touchstart', preventzoomaction, true);
|
||||
}
|
||||
tds = document.querySelectorAll('.arrows td');
|
||||
for (const td of tds) {
|
||||
td.addEventListener('click', function () {
|
||||
press_button(td.className == 'airport' ? "pagebutton" : "arrowbutton", td.className);
|
||||
}, true);
|
||||
td.addEventListener('touchstart', preventzoomaction, true);
|
||||
}
|
||||
screen = document.querySelector('img');
|
||||
screen.addEventListener('load', function () {
|
||||
loading = 0;
|
||||
if (scheduled_load) {
|
||||
scheduled_load = 0;
|
||||
refresh_screen();
|
||||
}
|
||||
});
|
||||
blank_src = screen_src;
|
||||
screen_src = "/screenshot?canvasindex=10&type=png";
|
||||
screen.addEventListener('error', function () {
|
||||
loading = 0;
|
||||
if (scheduled_load) {
|
||||
refresh_screen();
|
||||
}
|
||||
});
|
||||
screen.addEventListener('abort', function () {
|
||||
loading = 0;
|
||||
if (scheduled_load) {
|
||||
refresh_screen();
|
||||
}
|
||||
});
|
||||
setInterval(function () { refresh_screen(true); }, 1000);
|
||||
}, true);
|
||||
</script>
|
||||
<style>
|
||||
body {
|
||||
font-size: 5rem;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background-color: black;
|
||||
color: white;
|
||||
font-family: sans-serif;
|
||||
}
|
||||
|
||||
table {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
word-wrap: normal;
|
||||
overflow-wrap: normal;
|
||||
}
|
||||
|
||||
tr {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
td {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
text-align: center;
|
||||
outline: 1px solid gray;
|
||||
|
||||
-ms-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-webkit-user-select: none;
|
||||
-webkit-touch-callout: none;
|
||||
-khtml-user-select: none;
|
||||
user-select: none;
|
||||
overflow: hidden;
|
||||
text-overflow: clip;
|
||||
}
|
||||
|
||||
td:active {
|
||||
background-color: white;
|
||||
color: black;
|
||||
}
|
||||
|
||||
.enter {
|
||||
font-size: 60%;
|
||||
}
|
||||
|
||||
.enter tr:first-child {
|
||||
font-size: 70%;
|
||||
}
|
||||
|
||||
.enter tr:last-child {
|
||||
font-size: 50%;
|
||||
}
|
||||
|
||||
.enter td:first-child,
|
||||
.enter td:last-child {
|
||||
padding: 0 0.55em;
|
||||
}
|
||||
|
||||
.menu,
|
||||
.arrows .airport {
|
||||
font-size: 40%;
|
||||
line-height: 1em;
|
||||
}
|
||||
|
||||
.menu td {
|
||||
height: 2.5em;
|
||||
}
|
||||
|
||||
.arrows td {
|
||||
width: 50%;
|
||||
padding: 0;
|
||||
font-size: 60%;
|
||||
}
|
||||
|
||||
img {
|
||||
display: block;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body style="width: 100%" oncontextmenu="return false;">
|
||||
<table class="enter" style="width: 100%">
|
||||
<tr>
|
||||
<td><br></td>
|
||||
<td rowspan="8" style="vertical-align: top"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABAAAAANgAQMAAACIgIgUAAAAA1BMVEUAAACnej3aAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAAgklEQVR42u3BAQEAAACCIP+vbkhAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA7wazbwABRxu5owAAAABJRU5ErkJggg=="
|
||||
style="width: 100%" /></td>
|
||||
<td><br></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td button-id="1" button-side="l">—</td>
|
||||
<td button-id="1" button-side="r">—</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td button-id="2" button-side="l">—</td>
|
||||
<td button-id="2" button-side="r">—</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td button-id="3" button-side="l">—</td>
|
||||
<td button-id="3" button-side="r">—</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td button-id="4" button-side="l">—</td>
|
||||
<td button-id="4" button-side="r">—</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td button-id="5" button-side="l">—</td>
|
||||
<td button-id="5" button-side="r">—</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td button-id="6" button-side="l">—</td>
|
||||
<td button-id="6" button-side="r">—</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><br></td>
|
||||
<td><br></td>
|
||||
</tr>
|
||||
</table>
|
||||
<table class="menu" style="width: 100%">
|
||||
<tr>
|
||||
<td class="dirto">DIR</td>
|
||||
<td class="prog">PROG</td>
|
||||
<td class="perf">PERF</td>
|
||||
<td class="init">INIT</td>
|
||||
<td class="data">DATA</td>
|
||||
<td></td>
|
||||
<td>BRT</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="f-pln">F-PLN</td>
|
||||
<td class="radnav">RAD<br>NAV</td>
|
||||
<td class="fuel-pred">FUEL<br>PRED</td>
|
||||
<td>SEC<br>F-PLN</td>
|
||||
<td class="atc">ATC<br>COMM</td>
|
||||
<td class="mcdu">MCDU<br>MENU</td>
|
||||
<td>DIM</td>
|
||||
</tr>
|
||||
</table>
|
||||
<table class="input" style="float: right; width: 62.5%">
|
||||
<tr>
|
||||
<td>A</td>
|
||||
<td>B</td>
|
||||
<td>C</td>
|
||||
<td>D</td>
|
||||
<td>E</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>F</td>
|
||||
<td>G</td>
|
||||
<td>H</td>
|
||||
<td>I</td>
|
||||
<td>J</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>K</td>
|
||||
<td>L</td>
|
||||
<td>M</td>
|
||||
<td>N</td>
|
||||
<td>O</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>P</td>
|
||||
<td>Q</td>
|
||||
<td>R</td>
|
||||
<td>S</td>
|
||||
<td>T</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>U</td>
|
||||
<td>V</td>
|
||||
<td>W</td>
|
||||
<td>X</td>
|
||||
<td>Y</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Z</td>
|
||||
<td>/</td>
|
||||
<td style="font-size: 50%">SP</td>
|
||||
<td style="font-size: 33%" class="disabled">OVFY<br>△</td>
|
||||
<td style="font-size: 33%">CLR</td>
|
||||
</tr>
|
||||
</table>
|
||||
<table class="arrows" style="width: 29.5%">
|
||||
<tr>
|
||||
<td class="airport">AIR<br>PORT</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="left">←</td>
|
||||
<td class="up">↑</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="right">→</td>
|
||||
<td class="down">↓</td>
|
||||
</tr>
|
||||
</table>
|
||||
<table class="input" style="width: 30%">
|
||||
<tr>
|
||||
<td>1</td>
|
||||
<td>2</td>
|
||||
<td>3</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>4</td>
|
||||
<td>5</td>
|
||||
<td>6</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>7</td>
|
||||
<td>8</td>
|
||||
<td>9</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>.</td>
|
||||
<td>0</td>
|
||||
<td
|
||||
style="font-size: 3vw; width: 33.333333333333333333333333333333333333333333333333333333333333333333333%; /* :) */" class="disabled">
|
||||
+/-
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
BIN
WebPanel/WebPanel1/screenshot.jpg
Normal file
BIN
WebPanel/WebPanel1/screenshot.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 181 KiB |
281
WebPanel/WebPanel2/css/mcdu.css
Normal file
281
WebPanel/WebPanel2/css/mcdu.css
Normal file
|
|
@ -0,0 +1,281 @@
|
|||
* {
|
||||
-webkit-touch-callout: none;
|
||||
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
||||
-webkit-text-size-adjust: none;
|
||||
text-size-adjust: none;
|
||||
-webkit-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
html, body {
|
||||
overscroll-behavior-y: none;
|
||||
position: fixed;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
body {
|
||||
width: calc(100vw - 2px);
|
||||
height: calc(100vh - 2px);
|
||||
margin-left: 1px;
|
||||
overflow: hidden;
|
||||
background-color: #000;
|
||||
}
|
||||
|
||||
.mcdu {
|
||||
width: 100vw;
|
||||
height: calc(100vw / .6);
|
||||
max-height: 100vh;
|
||||
max-width: calc(100vh * .6);
|
||||
position: absolute;
|
||||
margin: auto;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.mcdu_case {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.mcdu-glass {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: -1;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.mcdu-glass--dust {
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: 6%;
|
||||
left: 13%;
|
||||
width: 73.5%;
|
||||
opacity: 0.5;
|
||||
transform: scale(1, -1);
|
||||
filter: blur(0.1vh);
|
||||
}
|
||||
|
||||
[data-used-universe="1"] .mcdu-glass--dust {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.screen-img,
|
||||
.screen-glow {
|
||||
position: absolute;
|
||||
top: 7.5%;
|
||||
left: 13.4%;
|
||||
width: 72.8%;
|
||||
}
|
||||
|
||||
.screen-glow {
|
||||
display: none;
|
||||
}
|
||||
|
||||
[data-used-universe="1"] .screen-glow {
|
||||
display: inline-block;
|
||||
filter: brightness(50) blur(0.2vh);
|
||||
opacity: 0.15;
|
||||
}
|
||||
|
||||
|
||||
.mcdu-fg {
|
||||
position: absolute;
|
||||
top: 0.3%;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
[data-button] {
|
||||
position: absolute;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
[data-showbuttons="1"] [data-button] {
|
||||
background-color: red;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.glassbutton {
|
||||
top: 6%;
|
||||
left: 13%;
|
||||
width: 73.5%;
|
||||
height: 40%
|
||||
}
|
||||
|
||||
.skbutton {
|
||||
width: 7.7%;
|
||||
height: 3.3%;
|
||||
border-radius: 0.2vh;
|
||||
}
|
||||
|
||||
.menubutton {
|
||||
width: 9.8%;
|
||||
height: 4%;
|
||||
border-radius: 0.2vh;
|
||||
}
|
||||
|
||||
.numberbutton {
|
||||
width: 7.5%;
|
||||
padding-bottom: 7.5%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.alphabutton {
|
||||
width: 7.4%;
|
||||
padding-bottom: 7.4%;
|
||||
border-radius: 0.2vh;
|
||||
}
|
||||
|
||||
.skbuttons-left .skbutton {
|
||||
left: 1.6%;
|
||||
}
|
||||
|
||||
.skbuttons-right .skbutton {
|
||||
right: 2.1%;
|
||||
}
|
||||
|
||||
.sk-1 {
|
||||
top: 12.3%;
|
||||
}
|
||||
|
||||
.sk-2 {
|
||||
top: 17.34%;
|
||||
}
|
||||
|
||||
.sk-3 {
|
||||
top: 22.4%;
|
||||
}
|
||||
|
||||
.sk-4 {
|
||||
top: 27.4%;
|
||||
}
|
||||
|
||||
.sk-5 {
|
||||
top: 32.5%;
|
||||
}
|
||||
|
||||
.sk-6 {
|
||||
top: 37.6%;
|
||||
}
|
||||
|
||||
.menu-row1 .menubutton {
|
||||
top: 48.2%;
|
||||
}
|
||||
|
||||
.menu-row2 .menubutton {
|
||||
top: 53.04%;
|
||||
}
|
||||
|
||||
.menu-row3 .menubutton {
|
||||
top: 57.9%;
|
||||
}
|
||||
|
||||
.menu-row4 .menubutton {
|
||||
top: 62.8%;
|
||||
}
|
||||
|
||||
.menu-row5 .menubutton {
|
||||
top: 67.6%;
|
||||
}
|
||||
|
||||
.menu-col1 {
|
||||
left: 11.3%;
|
||||
}
|
||||
|
||||
.menu-col2 {
|
||||
left: 23.2%;
|
||||
}
|
||||
|
||||
.menu-col3 {
|
||||
left: 35.1%;
|
||||
}
|
||||
|
||||
.menu-col4 {
|
||||
left: 47%;
|
||||
}
|
||||
|
||||
.menu-col5 {
|
||||
left: 59%;
|
||||
}
|
||||
|
||||
.menu-col6 {
|
||||
left: 70.95%;
|
||||
}
|
||||
|
||||
.number-row1 .numberbutton {
|
||||
top: 73.9%;
|
||||
}
|
||||
|
||||
.number-row2 .numberbutton {
|
||||
top: 79.6%;
|
||||
}
|
||||
|
||||
.number-row3 .numberbutton {
|
||||
top: 85.3%;
|
||||
}
|
||||
|
||||
.number-row4 .numberbutton {
|
||||
top: 91%;
|
||||
}
|
||||
|
||||
.number-col1 {
|
||||
left: 11.5%;
|
||||
}
|
||||
|
||||
.number-col2 {
|
||||
left: 21.1%;
|
||||
}
|
||||
|
||||
.number-col3 {
|
||||
left: 30.6%;
|
||||
}
|
||||
|
||||
.alphabutton-row1 .alphabutton {
|
||||
top: 59.5%;
|
||||
}
|
||||
|
||||
.alphabutton-row2 .alphabutton {
|
||||
top: 65.8%;
|
||||
}
|
||||
|
||||
.alphabutton-row3 .alphabutton {
|
||||
top: 72.1%;
|
||||
}
|
||||
|
||||
.alphabutton-row4 .alphabutton {
|
||||
top: 78.4%;
|
||||
}
|
||||
|
||||
.alphabutton-row5 .alphabutton {
|
||||
top: 84.8%;
|
||||
}
|
||||
|
||||
.alphabutton-row6 .alphabutton {
|
||||
top: 91.1%;
|
||||
}
|
||||
|
||||
.alphabutton-col1 {
|
||||
left: 40.6%;
|
||||
}
|
||||
|
||||
.alphabutton-col2 {
|
||||
left: 50.7%;
|
||||
}
|
||||
|
||||
.alphabutton-col3 {
|
||||
left: 60.7%;
|
||||
}
|
||||
|
||||
.alphabutton-col4 {
|
||||
left: 70.7%;
|
||||
}
|
||||
|
||||
.alphabutton-col5 {
|
||||
left: 80.7%;
|
||||
}
|
||||
BIN
WebPanel/WebPanel2/img/dust2.png
Normal file
BIN
WebPanel/WebPanel2/img/dust2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.8 MiB |
BIN
WebPanel/WebPanel2/img/mcdu-bg.png
Normal file
BIN
WebPanel/WebPanel2/img/mcdu-bg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 773 KiB |
BIN
WebPanel/WebPanel2/img/screenshot.jpg
Normal file
BIN
WebPanel/WebPanel2/img/screenshot.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 94 KiB |
146
WebPanel/WebPanel2/index.html
Normal file
146
WebPanel/WebPanel2/index.html
Normal file
|
|
@ -0,0 +1,146 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>A320 MCDU</title>
|
||||
<meta name="mobile-web-app-capable" content="yes">
|
||||
<meta name="apple-mobile-web-app-capable" content="yes">
|
||||
<meta name="apple-mobile-web-app-status-bar" content="#333333" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0">
|
||||
<link rel="stylesheet" href="css/mcdu.css" />
|
||||
</head>
|
||||
<body data-used-universe="1" data-showbuttons="0">
|
||||
<div class="mcdu">
|
||||
<img src="img/mcdu-bg.png" class="mcdu_case" />
|
||||
<div class="mcdu-glass">
|
||||
<img src="" data-element="lcdimage" class="screen-img" />
|
||||
<img src="" data-element="lcdimage" class="screen-glow" />
|
||||
<img src="img/dust2.png" class="mcdu-glass--dust" />
|
||||
</div>
|
||||
<div class="mcdu-fg">
|
||||
|
||||
<div class="skbuttons-left">
|
||||
<div data-button="lskbutton:1" class="skbutton sk-1"></div>
|
||||
<div data-button="lskbutton:2" class="skbutton sk-2"></div>
|
||||
<div data-button="lskbutton:3" class="skbutton sk-3"></div>
|
||||
<div data-button="lskbutton:4" class="skbutton sk-4"></div>
|
||||
<div data-button="lskbutton:5" class="skbutton sk-5"></div>
|
||||
<div data-button="lskbutton:6" class="skbutton sk-6"></div>
|
||||
</div>
|
||||
|
||||
<div class="skbuttons-right">
|
||||
<div data-button="rskbutton:1" class="skbutton sk-1"></div>
|
||||
<div data-button="rskbutton:2" class="skbutton sk-2"></div>
|
||||
<div data-button="rskbutton:3" class="skbutton sk-3"></div>
|
||||
<div data-button="rskbutton:4" class="skbutton sk-4"></div>
|
||||
<div data-button="rskbutton:5" class="skbutton sk-5"></div>
|
||||
<div data-button="rskbutton:6" class="skbutton sk-6"></div>
|
||||
</div>
|
||||
|
||||
<div class="menu-row1">
|
||||
<div data-button="pagebutton:dirto" class="menubutton menu-col1"></div>
|
||||
<div data-button="pagebutton:prog" class="menubutton menu-col2"></div>
|
||||
<div data-button="pagebutton:perf" class="menubutton menu-col3"></div>
|
||||
<div data-button="pagebutton:init" class="menubutton menu-col4"></div>
|
||||
<div data-button="pagebutton:data" class="menubutton menu-col5"></div>
|
||||
</div>
|
||||
|
||||
<div class="menu-row2">
|
||||
<div data-button="pagebutton:f-pln" class="menubutton menu-col1"></div>
|
||||
<div data-button="pagebutton:radnav" class="menubutton menu-col2"></div>
|
||||
<div data-button="pagebutton:fuel-pred" class="menubutton menu-col3"></div>
|
||||
<div data-button="" class="menubutton menu-col4"></div>
|
||||
<div data-button="pagebutton:atc" class="menubutton menu-col5"></div>
|
||||
<div data-button="pagebutton:mcdu" class="menubutton menu-col6"></div>
|
||||
</div>
|
||||
|
||||
<div class="menu-row3">
|
||||
<div data-button="pagebutton:airport" class="menubutton menu-col1"></div>
|
||||
</div>
|
||||
|
||||
<div class="menu-row4">
|
||||
<div data-button="arrowbutton:left" class="menubutton menu-col1"></div>
|
||||
<div data-button="arrowbutton:up" class="menubutton menu-col2"></div>
|
||||
</div>
|
||||
|
||||
<div class="menu-row5">
|
||||
<div data-button="arrowbutton:right" class="menubutton menu-row5 menu-col1"></div>
|
||||
<div data-button="arrowbutton:down" class="menubutton menu-row5 menu-col2"></div>
|
||||
</div>
|
||||
|
||||
<div class="number-row1">
|
||||
<div data-button="button:1" class="numberbutton number-col1"></div>
|
||||
<div data-button="button:2" class="numberbutton number-col2"></div>
|
||||
<div data-button="button:3" class="numberbutton number-col3"></div>
|
||||
</div>
|
||||
<div class="number-row2">
|
||||
<div data-button="button:4" class="numberbutton number-col1"></div>
|
||||
<div data-button="button:5" class="numberbutton number-col2"></div>
|
||||
<div data-button="button:6" class="numberbutton number-col3"></div>
|
||||
</div>
|
||||
<div class="number-row3">
|
||||
<div data-button="button:7" class="numberbutton number-col1"></div>
|
||||
<div data-button="button:8" class="numberbutton number-col2"></div>
|
||||
<div data-button="button:9" class="numberbutton number-col3"></div>
|
||||
</div>
|
||||
<div class="number-row4">
|
||||
<div data-button="button:." class="numberbutton number-col1"></div>
|
||||
<div data-button="button:0" class="numberbutton number-col2"></div>
|
||||
<div data-button="button:-" class="numberbutton number-col3"></div>
|
||||
</div>
|
||||
|
||||
<div class="alphabutton-row1">
|
||||
<div data-button="button:A" class="alphabutton alphabutton-col1"></div>
|
||||
<div data-button="button:B" class="alphabutton alphabutton-col2"></div>
|
||||
<div data-button="button:C" class="alphabutton alphabutton-col3"></div>
|
||||
<div data-button="button:D" class="alphabutton alphabutton-col4"></div>
|
||||
<div data-button="button:E" class="alphabutton alphabutton-col5"></div>
|
||||
</div>
|
||||
|
||||
<div class="alphabutton-row2">
|
||||
<div data-button="button:F" class="alphabutton alphabutton-col1"></div>
|
||||
<div data-button="button:G" class="alphabutton alphabutton-col2"></div>
|
||||
<div data-button="button:H" class="alphabutton alphabutton-col3"></div>
|
||||
<div data-button="button:I" class="alphabutton alphabutton-col4"></div>
|
||||
<div data-button="button:J" class="alphabutton alphabutton-col5"></div>
|
||||
</div>
|
||||
|
||||
<div class="alphabutton-row3">
|
||||
<div data-button="button:K" class="alphabutton alphabutton-col1"></div>
|
||||
<div data-button="button:L" class="alphabutton alphabutton-col2"></div>
|
||||
<div data-button="button:M" class="alphabutton alphabutton-col3"></div>
|
||||
<div data-button="button:N" class="alphabutton alphabutton-col4"></div>
|
||||
<div data-button="button:O" class="alphabutton alphabutton-col5"></div>
|
||||
</div>
|
||||
|
||||
<div class="alphabutton-row4">
|
||||
<div data-button="button:P" class="alphabutton alphabutton-col1"></div>
|
||||
<div data-button="button:Q" class="alphabutton alphabutton-col2"></div>
|
||||
<div data-button="button:R" class="alphabutton alphabutton-col3"></div>
|
||||
<div data-button="button:S" class="alphabutton alphabutton-col4"></div>
|
||||
<div data-button="button:T" class="alphabutton alphabutton-col5"></div>
|
||||
</div>
|
||||
|
||||
<div class="alphabutton-row5">
|
||||
<div data-button="button:U" class="alphabutton alphabutton-col1"></div>
|
||||
<div data-button="button:V" class="alphabutton alphabutton-col2"></div>
|
||||
<div data-button="button:W" class="alphabutton alphabutton-col3"></div>
|
||||
<div data-button="button:X" class="alphabutton alphabutton-col4"></div>
|
||||
<div data-button="button:Y" class="alphabutton alphabutton-col5"></div>
|
||||
</div>
|
||||
|
||||
<div class="alphabutton-row6">
|
||||
<div data-button="button:Z" class="alphabutton alphabutton-col1"></div>
|
||||
<div data-button="button:/" class="alphabutton alphabutton-col2"></div>
|
||||
<div data-button="button:SP" class="alphabutton alphabutton-col3"></div>
|
||||
<div data-button="button:OVFY" class="alphabutton alphabutton-col4"></div>
|
||||
<div data-button="button:CLR" class="alphabutton alphabutton-col5"></div>
|
||||
</div>
|
||||
|
||||
<div data-button="toggleUsedUniverse" class="glassbutton">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script src="js/mcdu.js">
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
185
WebPanel/WebPanel2/js/mcdu.js
Normal file
185
WebPanel/WebPanel2/js/mcdu.js
Normal file
|
|
@ -0,0 +1,185 @@
|
|||
const MCDU = (function () {
|
||||
const screenImageBaseUrl = '/screenshot?canvasindex=10&type=jpg';
|
||||
const refreshInterval = 2000;
|
||||
|
||||
const body = document.body;
|
||||
let currentCacheBust = 0;
|
||||
let lastSentText = '';
|
||||
|
||||
init();
|
||||
|
||||
return {
|
||||
toggleUsedUniverse
|
||||
}
|
||||
|
||||
////////////////////////////////////////////////////////////////
|
||||
////////////////////////////////////////////////////////////////
|
||||
////////////////////////////////////////////////////////////////
|
||||
|
||||
function init()
|
||||
{
|
||||
body.dataset.lastTouch = 0;
|
||||
body.addEventListener('touchstart', preventZoomAction, { passive: false });
|
||||
|
||||
registerButtons();
|
||||
registerKeyboardInput();
|
||||
setInterval(refreshScreen, refreshInterval);
|
||||
refreshScreen();
|
||||
}
|
||||
|
||||
function refreshScreen() {
|
||||
loadScreenImage(screenImageBaseUrl)
|
||||
.then(setScreenSrc)
|
||||
.catch(setScreenSrc);
|
||||
}
|
||||
|
||||
function setScreenSrc(url) {
|
||||
url = typeof url === 'string' ? url : '';
|
||||
showScreenImageLoadState(url !== '');
|
||||
document.querySelectorAll('[data-element="lcdimage"]').forEach((imageElement) => {
|
||||
imageElement.src = url;
|
||||
});
|
||||
}
|
||||
|
||||
function loadScreenImage(baseUrl) {
|
||||
currentCacheBust = new Date().getTime();
|
||||
return new Promise((resolve, reject) => {
|
||||
const url = baseUrl + '?cacheBust=' + currentCacheBust;
|
||||
const img = new Image;
|
||||
|
||||
img.addEventListener('error', reject);
|
||||
|
||||
img.addEventListener('load', (event) => {
|
||||
showScreenImageLoadState(true);
|
||||
resolve(url);
|
||||
});
|
||||
img.src = url;
|
||||
});
|
||||
}
|
||||
|
||||
function showScreenImageLoadState(isOK) {
|
||||
if (!isOK) {
|
||||
console.log('fail');
|
||||
}
|
||||
}
|
||||
|
||||
function toggleUsedUniverse() {
|
||||
body.setAttribute('data-used-universe', body.getAttribute('data-used-universe') === '1' ? '0' : '1');
|
||||
}
|
||||
|
||||
function registerButtons() {
|
||||
document.querySelectorAll('[data-button]').forEach((buttonElement) => {
|
||||
const buttonFunction = getButtonFunction(buttonElement);
|
||||
if (!(typeof buttonFunction === 'function')) {
|
||||
return;
|
||||
}
|
||||
buttonElement.addEventListener('click', buttonFunction);
|
||||
buttonElement.addEventListener('touchstart', preventZoomAction, true);
|
||||
});
|
||||
}
|
||||
|
||||
function registerKeyboardInput() {
|
||||
const keyTranslation = {
|
||||
BACKSPACE: 'CLR'
|
||||
};
|
||||
body.addEventListener('keyup', (event) => {
|
||||
const key = event.key.toUpperCase();
|
||||
if (key.match(/^[A-Z0-9/\-+.\ ]$/)) {
|
||||
if (key === '+' || key === '-') {
|
||||
return sendPlusMinusKey();
|
||||
}
|
||||
return sendButtonpress('button', key);
|
||||
}
|
||||
|
||||
const translatedKey = keyTranslation[key];
|
||||
if (translatedKey) {
|
||||
return sendButtonpress('button', translatedKey);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function getButtonFunction(buttonElement) {
|
||||
const buttonActions = buttonElement.getAttribute('data-button').split(':');
|
||||
const actionKey = buttonActions[0];
|
||||
const actionValue = buttonActions[1];
|
||||
|
||||
if(!actionKey) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (actionKey === 'toggleUsedUniverse') {
|
||||
return toggleUsedUniverse;
|
||||
}
|
||||
|
||||
if (actionKey === 'button' && actionValue === '-') {
|
||||
return sendPlusMinusKey;
|
||||
}
|
||||
|
||||
return function () {
|
||||
sendButtonpress(actionKey, actionValue);
|
||||
};
|
||||
}
|
||||
|
||||
function sendPlusMinusKey() {
|
||||
if (lastSentText === '-') {
|
||||
sendButtonpress('button', 'CLR')
|
||||
.then(() => {
|
||||
sendButtonpress('button', '+');
|
||||
})
|
||||
return;
|
||||
}
|
||||
|
||||
if (lastSentText === '+') {
|
||||
sendButtonpress('button', 'CLR')
|
||||
.then(() => {
|
||||
sendButtonpress('button', '-');
|
||||
})
|
||||
return;
|
||||
}
|
||||
|
||||
sendButtonpress('button', '-');
|
||||
}
|
||||
|
||||
function sendButtonpress(type, text) {
|
||||
// console.log({ type, text });
|
||||
let request = new XMLHttpRequest;
|
||||
request.open("POST", "/run.cgi?value=nasal");
|
||||
request.setRequestHeader("Content-Type", "application/json");
|
||||
let body = JSON.stringify({
|
||||
"name": "",
|
||||
"children": [
|
||||
{
|
||||
"name": "script",
|
||||
"index": 0,
|
||||
"value": "mcdu." + type + "(\"" + text + "\", 0);"
|
||||
}
|
||||
]
|
||||
});
|
||||
request.send(body);
|
||||
return new Promise((resolve) => {
|
||||
request.addEventListener('load', () => {
|
||||
lastSentText = text;
|
||||
refreshScreen();
|
||||
resolve();
|
||||
}, true);
|
||||
});
|
||||
}
|
||||
|
||||
//https://exceptionshub.com/disable-double-tap-zoom-option-in-browser-on-touch-devices.html
|
||||
function preventZoomAction(event) {
|
||||
const t2 = event.timeStamp;
|
||||
const touchedElement = event.currentTarget;
|
||||
const t1 = touchedElement.dataset.lastTouch || t2;
|
||||
const dt = t2 - t1;
|
||||
const fingers = event.touches.length;
|
||||
touchedElement.dataset.lastTouch = t2;
|
||||
|
||||
if (!dt || dt > 500 || fingers > 1) {
|
||||
// no double-tap
|
||||
return;
|
||||
}
|
||||
|
||||
event.preventDefault();
|
||||
event.target.click();
|
||||
}
|
||||
})();
|
||||
|
|
@ -1,342 +1,116 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en" translate="no">
|
||||
|
||||
<head>
|
||||
<title>A320 MCDU</title>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
|
||||
<link rel="manifest" href="mcdu_manifest.json" />
|
||||
<meta name="apple-mobile-web-app-status-bar" content="#db4938" />
|
||||
<meta name="theme-color" content="#db4938" />
|
||||
<script>
|
||||
let screen;
|
||||
let screen_src;
|
||||
let blank_src;
|
||||
let loading = 0;
|
||||
let scheduled_load = 0;
|
||||
function refresh_screen(force) {
|
||||
if (loading && !force) {
|
||||
scheduled_load = 1;
|
||||
}
|
||||
else {
|
||||
loading = 1;
|
||||
screen.src = screen_src + '&random=' + (new Date).getTime()
|
||||
}
|
||||
}
|
||||
function press_button(type, text) {
|
||||
let request = new XMLHttpRequest;
|
||||
request.open(
|
||||
"POST",
|
||||
window.location.protocol + "//" + window.location.host + "/run.cgi?value=nasal"
|
||||
);
|
||||
request.setRequestHeader("Content-Type", "application/json");
|
||||
let body = JSON.stringify({
|
||||
"name": "",
|
||||
"children": [
|
||||
{
|
||||
"name": "script",
|
||||
"index": 0,
|
||||
"value": "mcdu." + type + "(\"" + text + "\", 0);"
|
||||
}
|
||||
]
|
||||
});
|
||||
request.send(body);
|
||||
request.addEventListener('load', function () {
|
||||
refresh_screen();
|
||||
}, true);
|
||||
}
|
||||
|
||||
var preventzoomaction = function(e) { //https://exceptionshub.com/disable-double-tap-zoom-option-in-browser-on-touch-devices.html
|
||||
var t2 = e.timeStamp;
|
||||
var t1 = e.currentTarget.dataset.lastTouch || t2;
|
||||
var dt = t2 - t1;
|
||||
var fingers = e.touches.length;
|
||||
e.currentTarget.dataset.lastTouch = t2;
|
||||
|
||||
if (!dt || dt > 500 || fingers > 1) return; // not double-tap
|
||||
|
||||
e.preventDefault();
|
||||
e.target.click();
|
||||
};
|
||||
|
||||
window.addEventListener('load', function () {
|
||||
|
||||
let tds = document.querySelectorAll('.input td');
|
||||
for (const td of tds) {
|
||||
td.addEventListener('click', function () {
|
||||
if (td.className == "disabled") return;
|
||||
press_button("button", td.textContent);
|
||||
}, true);
|
||||
td.addEventListener('touchstart', preventzoomaction, true);
|
||||
}
|
||||
tds = document.querySelectorAll('.enter td');
|
||||
for (const td of tds) {
|
||||
td.addEventListener('click', function () {
|
||||
press_button(td.getAttribute("button-side") == "l" ? "lskbutton" : "rskbutton", td.getAttribute("button-id"));
|
||||
}, true);
|
||||
td.addEventListener('touchstart', preventzoomaction, true);
|
||||
}
|
||||
tds = document.querySelectorAll('.menu td');
|
||||
for (const td of tds) {
|
||||
td.addEventListener('click', function () {
|
||||
press_button("pagebutton", td.className);
|
||||
}, true);
|
||||
td.addEventListener('touchstart', preventzoomaction, true);
|
||||
}
|
||||
tds = document.querySelectorAll('.arrows td');
|
||||
for (const td of tds) {
|
||||
td.addEventListener('click', function () {
|
||||
press_button(td.className == 'airport' ? "pagebutton" : "arrowbutton", td.className);
|
||||
}, true);
|
||||
td.addEventListener('touchstart', preventzoomaction, true);
|
||||
}
|
||||
screen = document.querySelector('img');
|
||||
screen.addEventListener('load', function () {
|
||||
loading = 0;
|
||||
if (scheduled_load) {
|
||||
scheduled_load = 0;
|
||||
refresh_screen();
|
||||
}
|
||||
});
|
||||
blank_src = screen_src;
|
||||
screen_src = "/screenshot?canvasindex=10&type=png";
|
||||
screen.addEventListener('error', function () {
|
||||
loading = 0;
|
||||
if (scheduled_load) {
|
||||
refresh_screen();
|
||||
}
|
||||
});
|
||||
screen.addEventListener('abort', function () {
|
||||
loading = 0;
|
||||
if (scheduled_load) {
|
||||
refresh_screen();
|
||||
}
|
||||
});
|
||||
setInterval(function () { refresh_screen(true); }, 1000);
|
||||
}, true);
|
||||
</script>
|
||||
<style>
|
||||
body {
|
||||
font-size: 5rem;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background-color: black;
|
||||
color: white;
|
||||
font-family: sans-serif;
|
||||
}
|
||||
|
||||
table {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
word-wrap: normal;
|
||||
overflow-wrap: normal;
|
||||
}
|
||||
|
||||
tr {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
td {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
text-align: center;
|
||||
outline: 1px solid gray;
|
||||
|
||||
-ms-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-webkit-user-select: none;
|
||||
-webkit-touch-callout: none;
|
||||
-khtml-user-select: none;
|
||||
user-select: none;
|
||||
overflow: hidden;
|
||||
text-overflow: clip;
|
||||
}
|
||||
|
||||
td:active {
|
||||
background-color: white;
|
||||
color: black;
|
||||
}
|
||||
|
||||
.enter {
|
||||
font-size: 60%;
|
||||
}
|
||||
|
||||
.enter tr:first-child {
|
||||
font-size: 70%;
|
||||
}
|
||||
|
||||
.enter tr:last-child {
|
||||
font-size: 50%;
|
||||
}
|
||||
|
||||
.enter td:first-child,
|
||||
.enter td:last-child {
|
||||
padding: 0 0.55em;
|
||||
}
|
||||
|
||||
.menu,
|
||||
.arrows .airport {
|
||||
font-size: 40%;
|
||||
line-height: 1em;
|
||||
}
|
||||
|
||||
.menu td {
|
||||
height: 2.5em;
|
||||
}
|
||||
|
||||
.arrows td {
|
||||
width: 50%;
|
||||
padding: 0;
|
||||
font-size: 60%;
|
||||
}
|
||||
|
||||
img {
|
||||
display: block;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body style="width: 100%" oncontextmenu="return false;">
|
||||
<table class="enter" style="width: 100%">
|
||||
<tr>
|
||||
<td><br></td>
|
||||
<td rowspan="8" style="vertical-align: top"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABAAAAANgAQMAAACIgIgUAAAAA1BMVEUAAACnej3aAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAAgklEQVR42u3BAQEAAACCIP+vbkhAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA7wazbwABRxu5owAAAABJRU5ErkJggg=="
|
||||
style="width: 100%" /></td>
|
||||
<td><br></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td button-id="1" button-side="l">—</td>
|
||||
<td button-id="1" button-side="r">—</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td button-id="2" button-side="l">—</td>
|
||||
<td button-id="2" button-side="r">—</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td button-id="3" button-side="l">—</td>
|
||||
<td button-id="3" button-side="r">—</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td button-id="4" button-side="l">—</td>
|
||||
<td button-id="4" button-side="r">—</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td button-id="5" button-side="l">—</td>
|
||||
<td button-id="5" button-side="r">—</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td button-id="6" button-side="l">—</td>
|
||||
<td button-id="6" button-side="r">—</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><br></td>
|
||||
<td><br></td>
|
||||
</tr>
|
||||
</table>
|
||||
<table class="menu" style="width: 100%">
|
||||
<tr>
|
||||
<td class="dirto">DIR</td>
|
||||
<td class="prog">PROG</td>
|
||||
<td class="perf">PERF</td>
|
||||
<td class="init">INIT</td>
|
||||
<td class="data">DATA</td>
|
||||
<td></td>
|
||||
<td>BRT</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="f-pln">F-PLN</td>
|
||||
<td class="radnav">RAD<br>NAV</td>
|
||||
<td class="fuel-pred">FUEL<br>PRED</td>
|
||||
<td>SEC<br>F-PLN</td>
|
||||
<td class="atc">ATC<br>COMM</td>
|
||||
<td class="mcdu">MCDU<br>MENU</td>
|
||||
<td>DIM</td>
|
||||
</tr>
|
||||
</table>
|
||||
<table class="input" style="float: right; width: 62.5%">
|
||||
<tr>
|
||||
<td>A</td>
|
||||
<td>B</td>
|
||||
<td>C</td>
|
||||
<td>D</td>
|
||||
<td>E</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>F</td>
|
||||
<td>G</td>
|
||||
<td>H</td>
|
||||
<td>I</td>
|
||||
<td>J</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>K</td>
|
||||
<td>L</td>
|
||||
<td>M</td>
|
||||
<td>N</td>
|
||||
<td>O</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>P</td>
|
||||
<td>Q</td>
|
||||
<td>R</td>
|
||||
<td>S</td>
|
||||
<td>T</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>U</td>
|
||||
<td>V</td>
|
||||
<td>W</td>
|
||||
<td>X</td>
|
||||
<td>Y</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Z</td>
|
||||
<td>/</td>
|
||||
<td style="font-size: 50%">SP</td>
|
||||
<td style="font-size: 33%" class="disabled">OVFY<br>△</td>
|
||||
<td style="font-size: 33%">CLR</td>
|
||||
</tr>
|
||||
</table>
|
||||
<table class="arrows" style="width: 29.5%">
|
||||
<tr>
|
||||
<td class="airport">AIR<br>PORT</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="left">←</td>
|
||||
<td class="up">↑</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="right">→</td>
|
||||
<td class="down">↓</td>
|
||||
</tr>
|
||||
</table>
|
||||
<table class="input" style="width: 30%">
|
||||
<tr>
|
||||
<td>1</td>
|
||||
<td>2</td>
|
||||
<td>3</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>4</td>
|
||||
<td>5</td>
|
||||
<td>6</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>7</td>
|
||||
<td>8</td>
|
||||
<td>9</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>.</td>
|
||||
<td>0</td>
|
||||
<td
|
||||
style="font-size: 3vw; width: 33.333333333333333333333333333333333333333333333333333333333333333333333%; /* :) */" class="disabled">
|
||||
+/-
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</body>
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<title>A320 MCDU</title>
|
||||
<meta name="mobile-web-app-capable" content="yes">
|
||||
<meta name="apple-mobile-web-app-capable" content="yes">
|
||||
<meta name="apple-mobile-web-app-status-bar" content="#333333" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0">
|
||||
<style>
|
||||
* {
|
||||
font-family: Helvetica, 'Segoe UI';
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
background-color: #005670;
|
||||
text-align: center;
|
||||
color: #e4e4e4;
|
||||
}
|
||||
|
||||
body {
|
||||
height: 100vh;
|
||||
width: 100vw;
|
||||
color: #8db9ca;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 3rem;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.5rem;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
|
||||
.content {
|
||||
position: relative;
|
||||
margin-top: 5rem;
|
||||
}
|
||||
|
||||
.chooser {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
max-width: 86vh;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.choice {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
width: calc(49% - 2vw);
|
||||
padding: 1vh 1vw 75% 1vw;
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
border: 1px solid transparent;
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
|
||||
.choice:hover .button {
|
||||
transform: scale(1.2);
|
||||
}
|
||||
|
||||
.choice img {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin: auto;
|
||||
max-height: 100%;
|
||||
border-radius: 8px;
|
||||
box-shadow: 4px 4px 6px #00000063;
|
||||
}
|
||||
|
||||
.choice .button {
|
||||
position: relative;
|
||||
top: -3rem;
|
||||
line-height: 1em;
|
||||
background-color: #74d2e7;
|
||||
color: #333;
|
||||
padding: 0.5em 1em;
|
||||
border-radius: 3px;
|
||||
box-shadow: 2px 2px 5px #00000063;
|
||||
display: inline-block;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<h1>Web MCDU</h1>
|
||||
<h2>Please choose:</h2>
|
||||
<div class="content">
|
||||
<div class="chooser">
|
||||
<a href="WebPanel1/index.html" class="choice choice--1">
|
||||
<span class="button">
|
||||
abstract
|
||||
</span>
|
||||
<img src="WebPanel1/screenshot.jpg">
|
||||
</a>
|
||||
<a href="WebPanel2/index.html" class="choice choice--2">
|
||||
<span class="button">
|
||||
realistic
|
||||
</span>
|
||||
<img src="WebPanel2/img/screenshot.jpg">
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Loading…
Reference in a new issue