<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Teclado en pantalla</title>
<style type="text/css">
body {
	background-color:#141414;
	font-family:sans-serif;
	padding:0;
	margin:0;
}
table {
	table-layout:fixed;
}
.tecla {
	overflow:hidden;
	margin:0;
	font-weight:bold;
	background-color:#2F2E33;
	color:#ECF2F0;
	text-align:center;
	-webkit-touch-callout: none; /* iOS Safari */
	-webkit-user-select: none;   /* Chrome/Safari/Opera */
	-khtml-user-select: none;    /* Konqueror */
	-moz-user-select: none;      /* Firefox */
	-ms-user-select: none;       /* Internet Explorer/Edge */
	user-select: none; 			 /* Genérico */
	cursor:pointer;  
	height:40px;
	line-height:40px;
	font-size:15px;
	border:none;
}
.tecla.alta {
	height:86px;
	line-height:86px;
}
.tecla:active, .tecla:hover {
	color:#3C6186!important;
	background-color:#8C9BA8!important;
}
</style>
<script type="text/javascript">
	var shifted = false;
	var tilde = false;		
	function teclaPulsada(id) {
		if (id == 'tilde') {
			tilde = !tilde;
			if (tilde) {
				document.getElementById('tilde').style.backgroundColor = '#8C9BA8';
				document.getElementById('tilde').style.color = '#3C6186';
			}
			else {
				document.getElementById('tilde').style.backgroundColor = '#2F2E33';
				document.getElementById('tilde').style.color = '#ECF2F0';
			}
		}
		if (id == 'shift') {
			shifted = !shifted;
			if (shifted) {
				document.getElementById('shift').style.backgroundColor = '#8C9BA8';
				document.getElementById('shift').style.color = '#3C6186';
				document.getElementById('1').innerHTML = '!';
				document.getElementById('2').innerHTML = '@';
				document.getElementById('3').innerHTML = '"';
				document.getElementById('4').innerHTML = '#';
				document.getElementById('5').innerHTML = '+';
				document.getElementById('6').innerHTML = '%';
				document.getElementById('7').innerHTML = '&amp;';
				document.getElementById('8').innerHTML = '(';
				document.getElementById('9').innerHTML = ')';
				document.getElementById('0').innerHTML = '=';
				document.getElementById('q').innerHTML = 'Q';
				document.getElementById('w').innerHTML = 'W';
				document.getElementById('e').innerHTML = 'E';
				document.getElementById('r').innerHTML = 'R';
				document.getElementById('t').innerHTML = 'T';
				document.getElementById('y').innerHTML = 'Y';
				document.getElementById('u').innerHTML = 'U';
				document.getElementById('i').innerHTML = 'I';
				document.getElementById('o').innerHTML = 'O';
				document.getElementById('p').innerHTML = 'P';
				document.getElementById('a').innerHTML = 'A';
				document.getElementById('s').innerHTML = 'S';
				document.getElementById('d').innerHTML = 'D';
				document.getElementById('f').innerHTML = 'F';
				document.getElementById('g').innerHTML = 'G';
				document.getElementById('h').innerHTML = 'H';
				document.getElementById('j').innerHTML = 'J';
				document.getElementById('k').innerHTML = 'K';
				document.getElementById('l').innerHTML = 'L';
				document.getElementById('enye').innerHTML = '&Ntilde;';
				document.getElementById('z').innerHTML = 'Z';
				document.getElementById('x').innerHTML = 'X';
				document.getElementById('c').innerHTML = 'C';
				document.getElementById('v').innerHTML = 'V';
				document.getElementById('b').innerHTML = 'B';
				document.getElementById('n').innerHTML = 'N';
				document.getElementById('m').innerHTML = 'M';
				document.getElementById('cedilla').innerHTML = '&Ccedil;';
				document.getElementById('coma').innerHTML = ';';
				document.getElementById('punto').innerHTML = ':';
				document.getElementById('guion').innerHTML = '_';
			}
			else {
				document.getElementById('shift').style.backgroundColor = '#2F2E33';
				document.getElementById('shift').style.color = '#ECF2F0';
				document.getElementById('1').innerHTML = '1';
				document.getElementById('2').innerHTML = '2';
				document.getElementById('3').innerHTML = '3';
				document.getElementById('4').innerHTML = '4';
				document.getElementById('5').innerHTML = '5';
				document.getElementById('6').innerHTML = '6';
				document.getElementById('7').innerHTML = '7';
				document.getElementById('8').innerHTML = '8';
				document.getElementById('9').innerHTML = '9';
				document.getElementById('0').innerHTML = '0';
				document.getElementById('q').innerHTML = 'q';
				document.getElementById('w').innerHTML = 'w';
				document.getElementById('e').innerHTML = 'e';
				document.getElementById('r').innerHTML = 'r';
				document.getElementById('t').innerHTML = 't';
				document.getElementById('y').innerHTML = 'y';
				document.getElementById('u').innerHTML = 'u';
				document.getElementById('i').innerHTML = 'i';
				document.getElementById('o').innerHTML = 'o';
				document.getElementById('p').innerHTML = 'p';
				document.getElementById('a').innerHTML = 'a';
				document.getElementById('s').innerHTML = 's';
				document.getElementById('d').innerHTML = 'd';
				document.getElementById('f').innerHTML = 'f';
				document.getElementById('g').innerHTML = 'g';
				document.getElementById('h').innerHTML = 'h';
				document.getElementById('j').innerHTML = 'j';
				document.getElementById('k').innerHTML = 'k';
				document.getElementById('l').innerHTML = 'l';
				document.getElementById('enye').innerHTML = '&ntilde;';
				document.getElementById('z').innerHTML = 'z';
				document.getElementById('x').innerHTML = 'x';
				document.getElementById('c').innerHTML = 'c';
				document.getElementById('v').innerHTML = 'v';
				document.getElementById('b').innerHTML = 'b';
				document.getElementById('n').innerHTML = 'n';
				document.getElementById('m').innerHTML = 'm';
				document.getElementById('cedilla').innerHTML = '&ccedil;';
				document.getElementById('coma').innerHTML = ',';
				document.getElementById('punto').innerHTML = '.';
				document.getElementById('guion').innerHTML = '-';
			}
		}
		if (id != 'tilde' && tilde) {
			tilde = false;
			document.getElementById('tilde').style.backgroundColor = '#2F2E33';
			document.getElementById('tilde').style.color = '#ECF2F0';
			switch (id) {
				case 'a':
					id = '&aacute;';
					break;
				case 'e':
					id = '&eacute;';
					break;
				case 'i':
					id = '&iacute;';
					break;
				case 'o':
					id = '&oacute;';
					break;
				case 'u':
					id = '&uacute;';
					break;
				default:
					window.external.TeclaPulsada("tilde", shifted);
					break;
			}
		}
		if (id != 'tilde') {
			window.external.TeclaPulsada(id, shifted);
		}
	}
</script>
</head>
<body>
<table width="100%" border="0" cellspacing="6">
  <tr>
    <td><div class="tecla" id="1" onclick="teclaPulsada(this.id);">1</div></td>
    <td><div class="tecla" id="2" onclick="teclaPulsada(this.id);">2</div></td>
    <td><div class="tecla" id="3" onclick="teclaPulsada(this.id);">3</div></td>
    <td><div class="tecla" id="4" onclick="teclaPulsada(this.id);">4</div></td>
    <td><div class="tecla" id="5" onclick="teclaPulsada(this.id);">5</div></td>
    <td><div class="tecla" id="6" onclick="teclaPulsada(this.id);">6</div></td>
    <td><div class="tecla" id="7" onclick="teclaPulsada(this.id);">7</div></td>
    <td><div class="tecla" id="8" onclick="teclaPulsada(this.id);">8</div></td>
    <td><div class="tecla" id="9" onclick="teclaPulsada(this.id);">9</div></td>
    <td><div class="tecla" id="0" onclick="teclaPulsada(this.id);">0</div></td>
    <td colspan="2"><div class="tecla" id="back" onclick="teclaPulsada(this.id);">&larr; Retr.</div></td>
  </tr>
  <tr>
    <td><div class="tecla" id="q" onclick="teclaPulsada(this.id);">q</div></td>
    <td><div class="tecla" id="w" onclick="teclaPulsada(this.id);">w</div></td>
    <td><div class="tecla" id="e" onclick="teclaPulsada(this.id);">e</div></td>
    <td><div class="tecla" id="r" onclick="teclaPulsada(this.id);">r</div></td>
    <td><div class="tecla" id="t" onclick="teclaPulsada(this.id);">t</div></td>
    <td><div class="tecla" id="y" onclick="teclaPulsada(this.id);">y</div></td>
    <td><div class="tecla" id="u" onclick="teclaPulsada(this.id);">u</div></td>
    <td><div class="tecla" id="i" onclick="teclaPulsada(this.id);">i</div></td>
    <td><div class="tecla" id="o" onclick="teclaPulsada(this.id);">o</div></td>
    <td><div class="tecla" id="p" onclick="teclaPulsada(this.id);">p</div></td>
    <td><div class="tecla" id="cedilla" onclick="teclaPulsada(this.id);">&ccedil;</div></td>
    <td rowspan="2"><div class="tecla alta" id="enter" onclick="teclaPulsada(this.id);">Enter</div></td>
  </tr>
  <tr>
    <td><div class="tecla" id="a" onclick="teclaPulsada(this.id);">a</div></td>
    <td><div class="tecla" id="s" onclick="teclaPulsada(this.id);">s</div></td>
    <td><div class="tecla" id="d" onclick="teclaPulsada(this.id);">d</div></td>
    <td><div class="tecla" id="f" onclick="teclaPulsada(this.id);">f</div></td>
    <td><div class="tecla" id="g" onclick="teclaPulsada(this.id);">g</div></td>
    <td><div class="tecla" id="h" onclick="teclaPulsada(this.id);">h</div></td>
    <td><div class="tecla" id="j" onclick="teclaPulsada(this.id);">j</div></td>
    <td><div class="tecla" id="k" onclick="teclaPulsada(this.id);">k</div></td>
    <td><div class="tecla" id="l" onclick="teclaPulsada(this.id);">l</div></td>
    <td><div class="tecla" id="enye" onclick="teclaPulsada(this.id);">&ntilde;</div></td>
    <td><div class="tecla" id="tilde" onclick="teclaPulsada(this.id);">&acute;</div></td>
  </tr>
  <tr>
    <td colspan="2"><div class="tecla" id="shift" onclick="teclaPulsada(this.id);">May&uacute;s.</div></td>
    <td><div class="tecla" id="z" onclick="teclaPulsada(this.id);">z</div></td>
    <td><div class="tecla" id="x" onclick="teclaPulsada(this.id);">x</div></td>
    <td><div class="tecla" id="c" onclick="teclaPulsada(this.id);">c</div></td>
    <td><div class="tecla" id="v" onclick="teclaPulsada(this.id);">v</div></td>
    <td><div class="tecla" id="b" onclick="teclaPulsada(this.id);">b</div></td>
    <td><div class="tecla" id="n" onclick="teclaPulsada(this.id);">n</div></td>
    <td><div class="tecla" id="m" onclick="teclaPulsada(this.id);">m</div></td>
    <td><div class="tecla" id="coma" onclick="teclaPulsada(this.id);">,</div></td>
    <td><div class="tecla" id="punto" onclick="teclaPulsada(this.id);">.</div></td>
    <td><div class="tecla" id="guion" onclick="teclaPulsada(this.id);">&ndash;</div></td>
  </tr>
  <tr>
    <td colspan="12"><div class="tecla" id="espacio" onclick="teclaPulsada(this.id);">&nbsp;</div></td>
  </tr>
</table>
</body>
</html>
