fly/A320-family
1
0
Fork 0
Code Activity

Merge branch 'webmcdu-fixes' into dev

Browse source
This commit is contained in:
Inuyaksa 2022-01-16 23:18:35 +01:00
commit b8336d52b2
8 changed files with 279 additions and 378 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
Nasal/MCDU/MCDU.nas
View file

@ -1530,6 +1530,8 @@ var button = func(btn, i, event = "") {
} else { # up with buttonCLRDown[i]>4 } else { # up with buttonCLRDown[i]>4
buttonCLRDown[i] = 0; buttonCLRDown[i] = 0;
} }
} else if (btn == "LONGCLR") {
mcdu_scratchpad.scratchpads[i].empty();
} else if (btn == "DOT") { } else if (btn == "DOT") {
mcdu_scratchpad.scratchpads[i].addChar("."); mcdu_scratchpad.scratchpads[i].addChar(".");
} else if (btn == "PLUSMINUS") { } else if (btn == "PLUSMINUS") {

BIN
WebPanel/WebPanel1/img/icon-192.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 20 KiB

0
WebPanel/WebPanel1/screenshot.jpg → WebPanel/WebPanel1/img/screenshot.jpg
View file

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 181 KiB

After

Width:  |  Height:  |  Size: 181 KiB

254
WebPanel/WebPanel1/index.html
View file

@ -1,6 +1,5 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en" translate="no"> <html lang="en" translate="no">
<head> <head>
<title>A320 MCDU</title> <title>A320 MCDU</title>
<meta charset="utf-8"> <meta charset="utf-8">
@ -8,113 +7,6 @@
<link rel="manifest" href="mcdu_manifest.json" /> <link rel="manifest" href="mcdu_manifest.json" />
<meta name="apple-mobile-web-app-status-bar" content="#db4938" /> <meta name="apple-mobile-web-app-status-bar" content="#db4938" />
<meta name="theme-color" 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> <style>
body { body {
font-size: 5rem; font-size: 5rem;
@ -201,33 +93,32 @@
<table class="enter" style="width: 100%"> <table class="enter" style="width: 100%">
<tr> <tr>
<td><br></td> <td><br></td>
<td rowspan="8" style="vertical-align: top"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABAAAAANgAQMAAACIgIgUAAAAA1BMVEUAAACnej3aAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAAgklEQVR42u3BAQEAAACCIP+vbkhAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA7wazbwABRxu5owAAAABJRU5ErkJggg==" <td rowspan="8" style="vertical-align: top"><img data-element="lcdimage" src="" style="width: 100%" /></td>
style="width: 100%" /></td>
<td><br></td> <td><br></td>
</tr> </tr>
<tr> <tr>
<td button-id="1" button-side="l">—</td> <td data-button="lskbutton:1">—</td>
<td button-id="1" button-side="r">—</td> <td data-button="rskbutton:1">—</td>
</tr> </tr>
<tr> <tr>
<td button-id="2" button-side="l">—</td> <td data-button="lskbutton:2">—</td>
<td button-id="2" button-side="r">—</td> <td data-button="rskbutton:2">—</td>
</tr> </tr>
<tr> <tr>
<td button-id="3" button-side="l">—</td> <td data-button="lskbutton:3">—</td>
<td button-id="3" button-side="r">—</td> <td data-button="rskbutton:3">—</td>
</tr> </tr>
<tr> <tr>
<td button-id="4" button-side="l">—</td> <td data-button="lskbutton:4">—</td>
<td button-id="4" button-side="r">—</td> <td data-button="rskbutton:4">—</td>
</tr> </tr>
<tr> <tr>
<td button-id="5" button-side="l">—</td> <td data-button="lskbutton:5">—</td>
<td button-id="5" button-side="r">—</td> <td data-button="rskbutton:5">—</td>
</tr> </tr>
<tr> <tr>
<td button-id="6" button-side="l">—</td> <td data-button="lskbutton:6">—</td>
<td button-id="6" button-side="r">—</td> <td data-button="rskbutton:6">—</td>
</tr> </tr>
<tr> <tr>
<td><br></td> <td><br></td>
@ -236,107 +127,110 @@
</table> </table>
<table class="menu" style="width: 100%"> <table class="menu" style="width: 100%">
<tr> <tr>
<td class="dirto">DIR</td> <td data-button="pagebutton:dirto" class="dirto">DIR</td>
<td class="prog">PROG</td> <td data-button="pagebutton:prog" class="prog">PROG</td>
<td class="perf">PERF</td> <td data-button="pagebutton:perf" class="perf">PERF</td>
<td class="init">INIT</td> <td data-button="pagebutton:init" class="init">INIT</td>
<td class="data">DATA</td> <td data-button="pagebutton:data" class="data">DATA</td>
<td></td> <td></td>
<td>BRT</td> <td>BRT</td>
</tr> </tr>
<tr> <tr>
<td class="f-pln">F-PLN</td> <td data-button="pagebutton:f-pln" class="f-pln">F-PLN</td>
<td class="radnav">RAD<br>NAV</td> <td data-button="pagebutton:radnav" class="radnav">RAD<br>NAV</td>
<td class="fuel-pred">FUEL<br>PRED</td> <td data-button="pagebutton:fuel-pred" class="fuel-pred">FUEL<br>PRED</td>
<td>SEC<br>F-PLN</td> <td data-button="" >SEC<br>F-PLN</td>
<td class="atc">ATC<br>COMM</td> <td data-button="pagebutton:atc" class="atc">ATC<br>COMM</td>
<td class="mcdu">MCDU<br>MENU</td> <td data-button="pagebutton:mcdu" class="mcdu">MCDU<br>MENU</td>
<td>DIM</td> <td>DIM</td>
</tr> </tr>
</table> </table>
<table class="input" style="float: right; width: 62.5%"> <table class="input" style="float: right; width: 62.5%">
<tr> <tr>
<td>A</td> <td data-button="button:A">A</td>
<td>B</td> <td data-button="button:B">B</td>
<td>C</td> <td data-button="button:C">C</td>
<td>D</td> <td data-button="button:D">D</td>
<td>E</td> <td data-button="button:E">E</td>
</tr> </tr>
<tr> <tr>
<td>F</td> <td data-button="button:F">F</td>
<td>G</td> <td data-button="button:G">G</td>
<td>H</td> <td data-button="button:H">H</td>
<td>I</td> <td data-button="button:I">I</td>
<td>J</td> <td data-button="button:J">J</td>
</tr> </tr>
<tr> <tr>
<td>K</td> <td data-button="button:K">K</td>
<td>L</td> <td data-button="button:L">L</td>
<td>M</td> <td data-button="button:M">M</td>
<td>N</td> <td data-button="button:N">N</td>
<td>O</td> <td data-button="button:O">O</td>
</tr> </tr>
<tr> <tr>
<td>P</td> <td data-button="button:P">P</td>
<td>Q</td> <td data-button="button:Q">Q</td>
<td>R</td> <td data-button="button:R">R</td>
<td>S</td> <td data-button="button:S">S</td>
<td>T</td> <td data-button="button:T">T</td>
</tr> </tr>
<tr> <tr>
<td>U</td> <td data-button="button:U">U</td>
<td>V</td> <td data-button="button:V">V</td>
<td>W</td> <td data-button="button:W">W</td>
<td>X</td> <td data-button="button:X">X</td>
<td>Y</td> <td data-button="button:Y">Y</td>
</tr> </tr>
<tr> <tr>
<td>Z</td> <td data-button="button:Z">Z</td>
<td>/</td> <td data-button="button:SLASH">/</td>
<td style="font-size: 50%">SP</td> <td style="font-size: 50%" data-button="button:SP">SP</td>
<td style="font-size: 33%" class="disabled">OVFY<br>△</td> <td style="font-size: 33%" data-button="button:OVFY">OVFY<br>△</td>
<td style="font-size: 33%">CLR</td> <td style="font-size: 33%" data-button="button:CLR">CLR</td>
</tr> </tr>
</table> </table>
<table class="arrows" style="width: 29.5%"> <table class="arrows" style="width: 29.5%">
<tr> <tr>
<td class="airport">AIR<br>PORT</td> <td data-button="pagebutton:airport" class="airport">AIR<br>PORT</td>
<td></td> <td></td>
</tr> </tr>
<tr> <tr>
<td class="left">←</td> <td data-button="arrowbutton:left" class="left">←</td>
<td class="up">↑</td> <td data-button="arrowbutton:up" class="up">↑</td>
</tr> </tr>
<tr> <tr>
<td class="right">→</td> <td data-button="arrowbutton:right" class="right">→</td>
<td class="down">↓</td> <td data-button="arrowbutton:down" class="down">↓</td>
</tr> </tr>
</table> </table>
<table class="input" style="width: 30%"> <table class="input" style="width: 30%">
<tr> <tr>
<td>1</td> <td data-button="button:1">1</td>
<td>2</td> <td data-button="button:2">2</td>
<td>3</td> <td data-button="button:3">3</td>
</tr> </tr>
<tr> <tr>
<td>4</td> <td data-button="button:4">4</td>
<td>5</td> <td data-button="button:5">5</td>
<td>6</td> <td data-button="button:6">6</td>
</tr> </tr>
<tr> <tr>
<td>7</td> <td data-button="button:7">7</td>
<td>8</td> <td data-button="button:8">8</td>
<td>9</td> <td data-button="button:9">9</td>
</tr> </tr>
<tr> <tr>
<td>.</td> <td data-button="button:DOT">.</td>
<td>0</td> <td data-button="button:0">0</td>
<td <td
style="font-size: 3vw; width: 33.333333333333333333333333333333333333333333333333333333333333333333333%; /* :) */" class="disabled"> style="font-size: 3vw; width: 33.34%;" data-button="button:PLUSMINUS">
+/- +/-
</td> </td>
</tr> </tr>
</table> </table>
<script src="../js/mcdu.js"></script>
</body> </body>
</html> </html>

19
WebPanel/WebPanel1/mcdu_manifest.json Normal file
View file

@ -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": [ ]
}

11
WebPanel/WebPanel2/index.html
View file

@ -1,7 +1,8 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html lang="en" translate="no">
<head> <head>
<title>A320 MCDU</title> <title>A320 MCDU</title>
<meta charset="utf-8">
<meta name="mobile-web-app-capable" content="yes"> <meta name="mobile-web-app-capable" content="yes">
<meta name="apple-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="apple-mobile-web-app-status-bar" content="#333333" />
@ -83,9 +84,9 @@
<div data-button="button:9" class="numberbutton number-col3"></div> <div data-button="button:9" class="numberbutton number-col3"></div>
</div> </div>
<div class="number-row4"> <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: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>
<div class="alphabutton-row1"> <div class="alphabutton-row1">
@ -130,7 +131,7 @@
<div class="alphabutton-row6"> <div class="alphabutton-row6">
<div data-button="button:Z" class="alphabutton alphabutton-col1"></div> <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:SP" class="alphabutton alphabutton-col3"></div>
<div data-button="button:OVFY" class="alphabutton alphabutton-col4"></div> <div data-button="button:OVFY" class="alphabutton alphabutton-col4"></div>
<div data-button="button:CLR" class="alphabutton alphabutton-col5"></div> <div data-button="button:CLR" class="alphabutton alphabutton-col5"></div>
@ -140,7 +141,7 @@
</div> </div>
</div> </div>
</div> </div>
<script src="js/mcdu.js"> <script src="../js/mcdu.js">
</script> </script>
</body> </body>
</html> </html>

351
WebPanel/WebPanel2/js/mcdu.js → WebPanel/js/mcdu.js
View file

@ -1,185 +1,166 @@
const MCDU = (function () { const MCDU = (function () {
const screenImageBaseUrl = '/screenshot?canvasindex=10&type=jpg'; const screenImageBaseUrl = '/screenshot?canvasindex=10&type=jpg';
const refreshInterval = 2000; const refreshInterval = 2000;
const body = document.body; const body = document.body;
let currentCacheBust = 0; let currentCacheBust = 0;
let lastSentText = ''; let lastSentText = '';
init(); init();
return { return {
toggleUsedUniverse toggleUsedUniverse
} }
//////////////////////////////////////////////////////////////// ////////////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////////// ////////////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////////// ////////////////////////////////////////////////////////////////
function init() function init() {
{ body.dataset.lastTouch = 0;
body.dataset.lastTouch = 0; body.addEventListener('touchstart', preventZoomAction, { passive: false });
body.addEventListener('touchstart', preventZoomAction, { passive: false });
registerButtons();
registerButtons(); registerKeyboardInput();
registerKeyboardInput(); setInterval(refreshScreen, refreshInterval);
setInterval(refreshScreen, refreshInterval); refreshScreen();
refreshScreen(); }
}
function refreshScreen() {
function refreshScreen() { loadScreenImage(screenImageBaseUrl)
loadScreenImage(screenImageBaseUrl) .then(setScreenSrc)
.then(setScreenSrc) .catch(setScreenSrc);
.catch(setScreenSrc); }
}
function setScreenSrc(url) {
function setScreenSrc(url) { url = typeof url === 'string' ? url : '';
url = typeof url === 'string' ? url : ''; showScreenImageLoadState(url !== '');
showScreenImageLoadState(url !== ''); document.querySelectorAll('[data-element="lcdimage"]').forEach((imageElement) => {
document.querySelectorAll('[data-element="lcdimage"]').forEach((imageElement) => { imageElement.src = url;
imageElement.src = url; });
}); }
}
function loadScreenImage(baseUrl) {
function loadScreenImage(baseUrl) { currentCacheBust = new Date().getTime();
currentCacheBust = new Date().getTime(); return new Promise((resolve, reject) => {
return new Promise((resolve, reject) => { const url = baseUrl + '?cacheBust=' + currentCacheBust;
const url = baseUrl + '?cacheBust=' + currentCacheBust; const img = new Image;
const img = new Image;
img.addEventListener('error', reject);
img.addEventListener('error', reject);
img.addEventListener('load', (event) => {
img.addEventListener('load', (event) => { showScreenImageLoadState(true);
showScreenImageLoadState(true); resolve(url);
resolve(url); });
}); img.src = url;
img.src = url; });
}); }
}
function showScreenImageLoadState(isOK) {
function showScreenImageLoadState(isOK) { if (!isOK) {
if (!isOK) { console.log('fail');
console.log('fail'); }
} }
}
function toggleUsedUniverse() {
function toggleUsedUniverse() { body.setAttribute('data-used-universe', body.getAttribute('data-used-universe') === '1' ? '0' : '1');
body.setAttribute('data-used-universe', body.getAttribute('data-used-universe') === '1' ? '0' : '1'); }
}
function registerButtons() {
function registerButtons() { document.querySelectorAll('[data-button]').forEach((buttonElement) => {
document.querySelectorAll('[data-button]').forEach((buttonElement) => { const buttonFunction = getButtonFunction(buttonElement);
const buttonFunction = getButtonFunction(buttonElement); if (!(typeof buttonFunction === 'function')) {
if (!(typeof buttonFunction === 'function')) { return;
return; }
} buttonElement.addEventListener('click', buttonFunction);
buttonElement.addEventListener('click', buttonFunction); buttonElement.addEventListener('touchstart', preventZoomAction, true);
buttonElement.addEventListener('touchstart', preventZoomAction, true); });
}); let btn = document.querySelector("[data-button=\"button:CLR\"]");
} if (btn) btn.addEventListener("contextmenu",function(e){
e.preventDefault();
function registerKeyboardInput() { sendButtonpress('button', 'LONGCLR');
const keyTranslation = { });
BACKSPACE: 'CLR' }
};
body.addEventListener('keyup', (event) => { function registerKeyboardInput() {
const key = event.key.toUpperCase(); const keyTranslation = {
if (key.match(/^[A-Z0-9/\-+.\ ]$/)) { BACKSPACE: 'CLR',
if (key === '+' || key === '-') { DELETE: 'LONGCLR',
return sendPlusMinusKey(); '+': 'PLUSMINUS',
} '-': 'PLUSMINUS',
return sendButtonpress('button', key); '/': 'SLASH',
} '.': 'DOT',
'^': 'OVFY',
const translatedKey = keyTranslation[key]; ' ': 'SP'
if (translatedKey) { };
return sendButtonpress('button', translatedKey); body.addEventListener('keyup', (event) => {
} const key = event.key.toUpperCase();
}); if (key.match(/^[A-Z0-9]$/)) {
} return sendButtonpress('button', key);
}
function getButtonFunction(buttonElement) { const translatedKey = keyTranslation[key]||false;
const buttonActions = buttonElement.getAttribute('data-button').split(':'); if (translatedKey) return sendButtonpress('button', translatedKey);
const actionKey = buttonActions[0]; });
const actionValue = buttonActions[1]; }
if(!actionKey) { function getButtonFunction(buttonElement) {
return; const buttonActions = buttonElement.getAttribute('data-button').split(':');
} const actionKey = buttonActions[0];
const actionValue = buttonActions[1];
if (actionKey === 'toggleUsedUniverse') {
return toggleUsedUniverse; if(!actionKey) {
} return;
}
if (actionKey === 'button' && actionValue === '-') {
return sendPlusMinusKey; if (actionKey === 'toggleUsedUniverse') {
} return toggleUsedUniverse;
}
return function () {
sendButtonpress(actionKey, actionValue); return function () {
}; sendButtonpress(actionKey, actionValue);
} };
}
function sendPlusMinusKey() {
if (lastSentText === '-') { function sendButtonpress(type, text) {
sendButtonpress('button', 'CLR') //console.log({ type, text });
.then(() => { let request = new XMLHttpRequest;
sendButtonpress('button', '+'); request.open("POST", "/run.cgi?value=nasal");
}) request.setRequestHeader("Content-Type", "application/json");
return; let body = JSON.stringify({
} "name": "",
"children": [
if (lastSentText === '+') { {
sendButtonpress('button', 'CLR') "name": "script",
.then(() => { "index": 0,
sendButtonpress('button', '-'); "value": "mcdu." + type + "(\"" + text + "\", 0);"
}) }
return; ]
} });
request.send(body);
sendButtonpress('button', '-'); return new Promise((resolve) => {
} request.addEventListener('load', () => {
lastSentText = text;
function sendButtonpress(type, text) { refreshScreen();
// console.log({ type, text }); resolve();
let request = new XMLHttpRequest; }, true);
request.open("POST", "/run.cgi?value=nasal"); });
request.setRequestHeader("Content-Type", "application/json"); }
let body = JSON.stringify({
"name": "", //https://exceptionshub.com/disable-double-tap-zoom-option-in-browser-on-touch-devices.html
"children": [ function preventZoomAction(event) {
{ const t2 = event.timeStamp;
"name": "script", const touchedElement = event.currentTarget;
"index": 0, const t1 = touchedElement.dataset.lastTouch || t2;
"value": "mcdu." + type + "(\"" + text + "\", 0);" const dt = t2 - t1;
} const fingers = event.touches.length;
] touchedElement.dataset.lastTouch = t2;
});
request.send(body); if (!dt || dt > 500 || fingers > 1) {
return new Promise((resolve) => { // no double-tap
request.addEventListener('load', () => { return;
lastSentText = text; }
refreshScreen();
resolve(); event.preventDefault();
}, true); event.target.click();
}); }
} })();
//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();
}
})();

20
WebPanel/mcdu.html
View file

@ -17,12 +17,14 @@
background-color: #005670; background-color: #005670;
text-align: center; text-align: center;
color: #e4e4e4; color: #e4e4e4;
font-size: 16px;
padding: 0;
margin: 0;
} }
body { body {
height: 100vh;
width: 100vw;
color: #8db9ca; color: #8db9ca;
padding-top: 1rem;
} }
h1 { h1 {
@ -55,8 +57,9 @@
.choice { .choice {
display: inline-block; display: inline-block;
position: relative; position: relative;
width: calc(49% - 2vw); width: calc(50% - 40px);
padding: 1vh 1vw 75% 1vw; padding: 15px;
padding-bottom: 75%;
color: inherit; color: inherit;
text-decoration: none; text-decoration: none;
border: 1px solid transparent; border: 1px solid transparent;
@ -69,11 +72,12 @@
.choice img { .choice img {
position: absolute; position: absolute;
top: 0; top: 1rem;
left: 0; left: 0;
right: 0; right: 0;
margin: auto; margin: auto;
max-height: 100%; max-height: auto;
max-width: 100%;
border-radius: 8px; border-radius: 8px;
box-shadow: 4px 4px 6px #00000063; box-shadow: 4px 4px 6px #00000063;
} }
@ -99,9 +103,9 @@
<div class="chooser"> <div class="chooser">
<a href="WebPanel1/index.html" class="choice choice--1"> <a href="WebPanel1/index.html" class="choice choice--1">
<span class="button"> <span class="button">
abstract basic
</span> </span>
<img src="WebPanel1/screenshot.jpg"> <img src="WebPanel1/img/screenshot.jpg">
</a> </a>
<a href="WebPanel2/index.html" class="choice choice--2"> <a href="WebPanel2/index.html" class="choice choice--2">
<span class="button"> <span class="button">