<!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" />
<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 data-element="lcdimage" src="" style="width: 100%" /></td>
<td><br></td>
</tr>
<tr>
<td data-button="lskbutton:1">—</td>
<td data-button="rskbutton:1">—</td>
</tr>
<tr>
<td data-button="lskbutton:2">—</td>
<td data-button="rskbutton:2">—</td>
</tr>
<tr>
<td data-button="lskbutton:3">—</td>
<td data-button="rskbutton:3">—</td>
</tr>
<tr>
<td data-button="lskbutton:4">—</td>
<td data-button="rskbutton:4">—</td>
</tr>
<tr>
<td data-button="lskbutton:5">—</td>
<td data-button="rskbutton:5">—</td>
</tr>
<tr>
<td data-button="lskbutton:6">—</td>
<td data-button="rskbutton:6">—</td>
</tr>
<tr>
<td><br></td>
<td><br></td>
</tr>
</table>
<table class="menu" style="width: 100%">
<tr>
<td data-button="pagebutton:dirto" class="dirto">DIR</td>
<td data-button="pagebutton:prog" class="prog">PROG</td>
<td data-button="pagebutton:perf" class="perf">PERF</td>
<td data-button="pagebutton:init" class="init">INIT</td>
<td data-button="pagebutton:data" class="data">DATA</td>
<td></td>
<td>BRT</td>
</tr>
<tr>
<td data-button="pagebutton:f-pln" class="f-pln">F-PLN</td>
<td data-button="pagebutton:radnav" class="radnav">RAD<br>NAV</td>
<td data-button="pagebutton:fuel-pred" class="fuel-pred">FUEL<br>PRED</td>
<td data-button="" >SEC<br>F-PLN</td>
<td data-button="pagebutton:atc" class="atc">ATC<br>COMM</td>
<td data-button="pagebutton:mcdu" class="mcdu">MCDU<br>MENU</td>
<td>DIM</td>
</tr>
</table>
<table class="input" style="float: right; width: 62.5%">
<tr>
<td data-button="button:A">A</td>
<td data-button="button:B">B</td>
<td data-button="button:C">C</td>
<td data-button="button:D">D</td>
<td data-button="button:E">E</td>
</tr>
<tr>
<td data-button="button:F">F</td>
<td data-button="button:G">G</td>
<td data-button="button:H">H</td>
<td data-button="button:I">I</td>
<td data-button="button:J">J</td>
</tr>
<tr>
<td data-button="button:K">K</td>
<td data-button="button:L">L</td>
<td data-button="button:M">M</td>
<td data-button="button:N">N</td>
<td data-button="button:O">O</td>
</tr>
<tr>
<td data-button="button:P">P</td>
<td data-button="button:Q">Q</td>
<td data-button="button:R">R</td>
<td data-button="button:S">S</td>
<td data-button="button:T">T</td>
</tr>
<tr>
<td data-button="button:U">U</td>
<td data-button="button:V">V</td>
<td data-button="button:W">W</td>
<td data-button="button:X">X</td>
<td data-button="button:Y">Y</td>
</tr>
<tr>
<td data-button="button:Z">Z</td>
<td data-button="button:SLASH">/</td>
<td style="font-size: 50%" data-button="button:SP">SP</td>
<td style="font-size: 33%" data-button="button:OVFY">OVFY<br>△</td>
<td style="font-size: 33%" data-button="button:CLR">CLR</td>
</tr>
</table>
<table class="arrows" style="width: 29.5%">
<tr>
<td data-button="pagebutton:airport" class="airport">AIR<br>PORT</td>
<td></td>
</tr>
<tr>
<td data-button="arrowbutton:left" class="left">←</td>
<td data-button="arrowbutton:up" class="up">↑</td>
</tr>
<tr>
<td data-button="arrowbutton:right" class="right">→</td>
<td data-button="arrowbutton:down" class="down">↓</td>
</tr>
</table>
<table class="input" style="width: 30%">
<tr>
<td data-button="button:1">1</td>
<td data-button="button:2">2</td>
<td data-button="button:3">3</td>
</tr>
<tr>
<td data-button="button:4">4</td>
<td data-button="button:5">5</td>
<td data-button="button:6">6</td>
</tr>
<tr>
<td data-button="button:7">7</td>
<td data-button="button:8">8</td>
<td data-button="button:9">9</td>
</tr>
<tr>
<td data-button="button:DOT">.</td>
<td data-button="button:0">0</td>
<td
style="font-size: 3vw; width: 33.34%;" data-button="button:PLUSMINUS">
+/-
</td>
</tr>
</table>
<script src="../js/mcdu.js"></script>
</body>
</html>