diff --git a/Nasal/MCDU/MCDU.nas b/Nasal/MCDU/MCDU.nas
index e3531552..865ead98 100644
--- a/Nasal/MCDU/MCDU.nas
+++ b/Nasal/MCDU/MCDU.nas
@@ -1530,6 +1530,8 @@ var button = func(btn, i, event = "") {
 			} else {  # up with buttonCLRDown[i]>4
 				buttonCLRDown[i] = 0;
 			}
+		} else if (btn == "LONGCLR") {
+			mcdu_scratchpad.scratchpads[i].empty();
 		} else if (btn == "DOT") {
 			mcdu_scratchpad.scratchpads[i].addChar(".");
 		} else if (btn == "PLUSMINUS") {
diff --git a/WebPanel/WebPanel1/img/icon-192.png b/WebPanel/WebPanel1/img/icon-192.png
new file mode 100644
index 00000000..a4e0d381
Binary files /dev/null and b/WebPanel/WebPanel1/img/icon-192.png differ
diff --git a/WebPanel/WebPanel1/screenshot.jpg b/WebPanel/WebPanel1/img/screenshot.jpg
similarity index 100%
rename from WebPanel/WebPanel1/screenshot.jpg
rename to WebPanel/WebPanel1/img/screenshot.jpg
diff --git a/WebPanel/WebPanel1/index.html b/WebPanel/WebPanel1/index.html
index a6ebb489..15fb7eca 100644
--- a/WebPanel/WebPanel1/index.html
+++ b/WebPanel/WebPanel1/index.html
@@ -1,6 +1,5 @@
 <!DOCTYPE html>
 <html lang="en" translate="no">
-
 <head>
 	<title>A320 MCDU</title>
 	<meta charset="utf-8">
@@ -8,113 +7,6 @@
 	<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;
@@ -201,33 +93,32 @@
 	<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 rowspan="8" style="vertical-align: top"><img data-element="lcdimage" src=""	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>
+			<td data-button="lskbutton:1">—</td>
+			<td data-button="rskbutton:1">—</td>
 		</tr>
 		<tr>
-			<td button-id="2" button-side="l">—</td>
-			<td button-id="2" button-side="r">—</td>
+			<td data-button="lskbutton:2">—</td>
+			<td data-button="rskbutton:2">—</td>
 		</tr>
 		<tr>
-			<td button-id="3" button-side="l">—</td>
-			<td button-id="3" button-side="r">—</td>
+			<td data-button="lskbutton:3">—</td>
+			<td data-button="rskbutton:3">—</td>
 		</tr>
 		<tr>
-			<td button-id="4" button-side="l">—</td>
-			<td button-id="4" button-side="r">—</td>
+			<td data-button="lskbutton:4">—</td>
+			<td data-button="rskbutton:4">—</td>
 		</tr>
 		<tr>
-			<td button-id="5" button-side="l">—</td>
-			<td button-id="5" button-side="r">—</td>
+			<td data-button="lskbutton:5">—</td>
+			<td data-button="rskbutton:5">—</td>
 		</tr>
 		<tr>
-			<td button-id="6" button-side="l">—</td>
-			<td button-id="6" button-side="r">—</td>
+			<td data-button="lskbutton:6">—</td>
+			<td data-button="rskbutton:6">—</td>
 		</tr>
 		<tr>
 			<td><br></td>
@@ -236,107 +127,110 @@
 	</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 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 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 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>A</td>
-			<td>B</td>
-			<td>C</td>
-			<td>D</td>
-			<td>E</td>
+			<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>F</td>
-			<td>G</td>
-			<td>H</td>
-			<td>I</td>
-			<td>J</td>
+			<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>K</td>
-			<td>L</td>
-			<td>M</td>
-			<td>N</td>
-			<td>O</td>
+			<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>P</td>
-			<td>Q</td>
-			<td>R</td>
-			<td>S</td>
-			<td>T</td>
+			<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>U</td>
-			<td>V</td>
-			<td>W</td>
-			<td>X</td>
-			<td>Y</td>
+			<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>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>
+			<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 class="airport">AIR<br>PORT</td>
+			<td data-button="pagebutton:airport" class="airport">AIR<br>PORT</td>
 			<td></td>
 		</tr>
 		<tr>
-			<td class="left">←</td>
-			<td class="up">↑</td>
+			<td data-button="arrowbutton:left" class="left">←</td>
+			<td data-button="arrowbutton:up" class="up">↑</td>
 		</tr>
 		<tr>
-			<td class="right">→</td>
-			<td class="down">↓</td>
+			<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>1</td>
-			<td>2</td>
-			<td>3</td>
+			<td data-button="button:1">1</td>
+			<td data-button="button:2">2</td>
+			<td data-button="button:3">3</td>
 		</tr>
 		<tr>
-			<td>4</td>
-			<td>5</td>
-			<td>6</td>
+			<td data-button="button:4">4</td>
+			<td data-button="button:5">5</td>
+			<td data-button="button:6">6</td>
 		</tr>
 		<tr>
-			<td>7</td>
-			<td>8</td>
-			<td>9</td>
+			<td data-button="button:7">7</td>
+			<td data-button="button:8">8</td>
+			<td data-button="button:9">9</td>
 		</tr>
 		<tr>
-			<td>.</td>
-			<td>0</td>
+			<td data-button="button:DOT">.</td>
+			<td data-button="button:0">0</td>
 			<td
-				style="font-size: 3vw; width: 33.333333333333333333333333333333333333333333333333333333333333333333333%; /* :) */" class="disabled">
+				style="font-size: 3vw; width: 33.34%;" data-button="button:PLUSMINUS">
 				+/-
 			</td>
 		</tr>
 	</table>
+
+	<script src="../js/mcdu.js"></script>
+
 </body>
 
 </html>
\ No newline at end of file
diff --git a/WebPanel/WebPanel1/mcdu_manifest.json b/WebPanel/WebPanel1/mcdu_manifest.json
new file mode 100644
index 00000000..fe8d3efe
--- /dev/null
+++ b/WebPanel/WebPanel1/mcdu_manifest.json
@@ -0,0 +1,19 @@
+{
+    "short_name": "A320MCDU",
+    "name": "A320 Remote MCDU for FG",
+    "icons": [
+      {
+        "src": "img/icon-192.png",
+        "type": "image/png",
+        "sizes": "192x192"
+      }
+    ],
+    "start_url": "/aircraft-dir/WebPanel/WebPanel1/?source=home",
+    "background_color": "#000",
+    "display": "standalone",
+    "scope": "/",
+    "theme_color": "#db4938",
+    "shortcuts": [ ],
+    "description": "Airbus 320 Remote MCDU for Flightgear",
+    "screenshots": [ ]
+}
\ No newline at end of file
diff --git a/WebPanel/WebPanel2/index.html b/WebPanel/WebPanel2/index.html
index c3214b3a..c898cc5e 100644
--- a/WebPanel/WebPanel2/index.html
+++ b/WebPanel/WebPanel2/index.html
@@ -1,7 +1,8 @@
 <!DOCTYPE html>
-<html>
+<html lang="en" translate="no">
 	<head>
 		<title>A320 MCDU</title>
+		<meta charset="utf-8">
 		<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" />
@@ -83,9 +84,9 @@
 					<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:DOT" 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 data-button="button:PLUSMINUS" class="numberbutton number-col3"></div>
 				</div>
 	
 				<div class="alphabutton-row1">
@@ -130,7 +131,7 @@
 	
 				<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:SLASH" 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>
@@ -140,7 +141,7 @@
 				</div>
 			</div>
 		</div>
-		<script src="js/mcdu.js">
+		<script src="../js/mcdu.js">
 		</script>
 	</body>
 </html>
diff --git a/WebPanel/WebPanel2/js/mcdu.js b/WebPanel/js/mcdu.js
similarity index 79%
rename from WebPanel/WebPanel2/js/mcdu.js
rename to WebPanel/js/mcdu.js
index 11944742..c68ba5fe 100644
--- a/WebPanel/WebPanel2/js/mcdu.js
+++ b/WebPanel/js/mcdu.js
@@ -1,185 +1,166 @@
-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();
-	}
-})();
+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);
+		});
+		let btn = document.querySelector("[data-button=\"button:CLR\"]");
+		if (btn) btn.addEventListener("contextmenu",function(e){
+			e.preventDefault();
+			sendButtonpress('button', 'LONGCLR');
+		});
+	}
+
+	function registerKeyboardInput() {
+		const keyTranslation = {
+			BACKSPACE: 'CLR',
+			DELETE: 'LONGCLR',
+			'+': 'PLUSMINUS',
+			'-': 'PLUSMINUS',
+			'/': 'SLASH',
+			'.': 'DOT',
+			'^': 'OVFY',
+			' ': 'SP'
+		};
+		body.addEventListener('keyup', (event) => {
+			const key = event.key.toUpperCase();
+			if (key.match(/^[A-Z0-9]$/)) {
+				return sendButtonpress('button', key);
+			}
+			const translatedKey = keyTranslation[key]||false;
+			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;
+		}
+
+		return function () {
+			sendButtonpress(actionKey, actionValue);
+		};
+	}
+
+	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();
+	}
+})();
diff --git a/WebPanel/mcdu.html b/WebPanel/mcdu.html
index 264131af..84ea684f 100644
--- a/WebPanel/mcdu.html
+++ b/WebPanel/mcdu.html
@@ -17,12 +17,14 @@
 			background-color: #005670;
 			text-align: center;
 			color: #e4e4e4;
+			font-size: 16px;
+			padding: 0;
+			margin: 0;
 		}
 
 		body {
-			height: 100vh;
-			width: 100vw;
 			color: #8db9ca;
+			padding-top: 1rem;
 		}
 
 		h1 {
@@ -55,8 +57,9 @@
 		.choice {
 			display: inline-block;
 			position: relative;
-			width: calc(49% - 2vw);
-			padding: 1vh 1vw 75% 1vw;
+			width: calc(50% - 40px);
+			padding: 15px;			
+			padding-bottom: 75%;
 			color: inherit;
 			text-decoration: none;
 			border: 1px solid transparent;
@@ -69,11 +72,12 @@
 
 		.choice img {
 			position: absolute;
-			top: 0;
+			top: 1rem;
 			left: 0;
 			right: 0;
 			margin: auto;
-			max-height: 100%;
+			max-height: auto;
+			max-width: 100%;
 			border-radius: 8px;
 			box-shadow: 4px 4px 6px #00000063;
 		}
@@ -99,9 +103,9 @@
 		<div class="chooser">
 			<a href="WebPanel1/index.html" class="choice choice--1">
 				<span class="button">
-					abstract
+					basic
 				</span>
-				<img src="WebPanel1/screenshot.jpg">
+				<img src="WebPanel1/img/screenshot.jpg">
 			</a>
 			<a href="WebPanel2/index.html" class="choice choice--2">
 				<span class="button">
