Code: Select all
<html>
<head>
<title>Querty</title>
<style>
body {
text-indent: 2px;
font-family: verdana;
font-size: 0.9em;
}
.sect1 {
width: 676px;
border: 1px solid #000;
}
.sect2 {
width: 156px;
border: 1px solid #000;
margin-left: 1em;
}
.sect3 {
width: 208px;
border: 1px solid #000;
margin-left: 1em;
}
.key {
width: 50px;
height: 50px;
border: 1px solid #000;
}
.wide {
width: 102px;
height: 50px;
border: 1px solid #000;
font-size: 2em;
text-indent: 40px;
}
.high {
width: 50px;
height: 102px;
border: 1px solid #000;
font-size: 2em;
text-indent: 15px;
}
.space {
width: 362px;
height: 50px;
border: 1px solid #000;
}
.left {
float: left;
}
.right {
float: right;
}
.alt {
font-size: 0.7em;
margin: 4px;
}
</style>
</head>
<body>
<?php
$keyboard1 =
array(
array('Esc', 'F1', 'F2', 'F3', 'F4', 'F5', 'F6', 'F7', 'F8', 'F9', 'F11', 'F12', 'µ LOCK'),
array('½'=>array('§'), 1=>array('!'), 2=>array('"', '@'), 3=>array('#', '£'), 4=>array('¤', '$'), 5=>array('%'), 6=>array('&'),
7=>array('/','{'), 8=>array('(', '['), 9=>array(')',']'), 0=>array('=', '}'), 'wide'=>'‹'),
array('TAB', 'Q', 'W', 'E'=>array('€'), 'R', 'T', 'Y', 'U', 'I', 'O', 'P', 'Å', 'high'=>'«'),
array('Caps Lock', 'A', 'S', 'D', 'F', 'G', 'H', 'J', 'K', 'L', 'Ö', 'Ä'),
array('SHIFT', '<'=>array('>','|'), 'Z', 'X', 'C', 'V', 'B', 'N', 'M', ','=>array(';'), '.'=>array(':'), '-'=>array('_'), 'SHIFT'),
array('Ctrl', 'Start', 'Alt', 'space'=>'', 'Alt Gr', '♠', 'Ctrl')
);
$keyboard2 =
array(
array('PrtScn', 'ScrLk', 'Pause Break'), array('Insert', 'Home', 'Page Up'),
array('Delete', 'End', 'Page Down'),
array('', '', ''),
array('', '↑', ''),
array('←', '↓', '→')
);
$keyboard3 =
array(
array('=', '(', ')', '←'),
array('Num Lock', '/', '*', '-'),
array(7=>array('Home'), 8=>array('↑'), 9=>array('PgUp'), 'high'=>'+'),
array(4=>array('←'), 5, 6=>array('→')),
array(1=>array('End'), 2=>array('↓'), 3=>array('PgDn'), 'high'=>'«'),
array('wide'=>0, 'Del'=>array(','))
);
function displaySection($keyboard, $width)
{
//Row by Row
foreach($keyboard as $keys)
{
foreach($keys as $id => $key)
{
$style = is_numeric($id) || is_array($key) ? "key" : $id;
$float = !is_numeric($id) && $id == "high" ? " right" : " left";
$sub = "";
if(is_array($key))
{
foreach($key as $k)
{
$sub .= $k." ";
}
$key = $id."<div class=\"alt\">{$sub}</div>";
}
?>
<div class="<?php echo $style.$float; ?>"><?php echo $key; ?></div>
<?php
}
}
}
?>
<div class="sect1 left"><?php displaySection($keyboard1, 676); ?></div>
<div class="sect2 left"><?php displaySection($keyboard2, 156); ?></div>
<div class="sect3 left"><?php displaySection($keyboard3, 208); ?></div>
</body>
</html>