<!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>