view index-rlg.html @ 77:f8bb37f48d58

Make font resizing affect the keyboard too. The keyboard font size now changes along with the terminal font size. This allows the keyboard to work at page widths down at least to 600px.
author John "Elwin" Edwards <elwin@sdf.org>
date Sat, 23 Jun 2012 17:41:27 -0700
parents a497ecd116d9
children 3fd410c52a61
line wrap: on
line source

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>RLG-Web β2</title>
<script type="text/javascript" src="termemu.js"></script>
<script type="text/javascript" src="termemu-keys.js"></script>
<script type="text/javascript" src="rlgterm.js"></script>
<link rel="stylesheet" type="text/css" href="tty.css">
<link rel="stylesheet" type="text/css" href="style-rlg.css">
</head>
<body onload="setup()" onkeydown="sendkey(event)">
<h1>RLG-Web β2</h1>
<div id ="top">
  <span id="ttitle"></span>
  <img src="/bell.png" alt="bell" id="bell">
</div>
<div id="termwrap">TERM</div>
<div class="modal" id="keyboard">
<div id="keys">
<div class="keyrow">
  <div class="key" onclick="vkey('`')">`</div>
  <div class="key" onclick="vkey('1')">1</div>
  <div class="key" onclick="vkey('2')">2</div>
  <div class="key" onclick="vkey('3')">3</div>
  <div class="key" onclick="vkey('4')">4</div>
  <div class="key" onclick="vkey('5')">5</div>
  <div class="key" onclick="vkey('6')">6</div>
  <div class="key" onclick="vkey('7')">7</div>
  <div class="key" onclick="vkey('8')">8</div>
  <div class="key" onclick="vkey('9')">9</div>
  <div class="key" onclick="vkey('0')">0</div>
  <div class="key" onclick="vkey('-')">-</div>
  <div class="key" onclick="vkey('=')">=</div>
  <div class="key" onclick="vkey('\b')" style="width: 2.5em">Bksp</div>
  <div class="rkey" onclick="vkey('KP9')">↗</div>
  <div class="rkey" onclick="vkey('KP8')">↑</div>
  <div class="rkey" onclick="vkey('KP7')">↖</div>
</div>
<div class="keyrow">
  <div class="key" onclick="vkey('\t')" style="width: 2.5em">Tab</div>
  <div class="key" onclick="vkey('q')">Q</div>
  <div class="key" onclick="vkey('w')">W</div>
  <div class="key" onclick="vkey('e')">E</div>
  <div class="key" onclick="vkey('r')">R</div>
  <div class="key" onclick="vkey('t')">T</div>
  <div class="key" onclick="vkey('y')">Y</div>
  <div class="key" onclick="vkey('u')">U</div>
  <div class="key" onclick="vkey('i')">I</div>
  <div class="key" onclick="vkey('o')">O</div>
  <div class="key" onclick="vkey('p')">P</div>
  <div class="key" onclick="vkey('[')">[</div>
  <div class="key" onclick="vkey(']')">]</div>
  <div class="key" onclick="vkey('\\')">\</div>
  <div class="rkey" onclick="vkey('KP6')">→</div>
  <div class="rkey" onclick="vkey('KP5')">·</div>
  <div class="rkey" onclick="vkey('KP4')">←</div>
</div>
<div class="keyrow">
  <div class="key" onclick="togglectrl()" id="ctrlkey">Ctrl</div>
  <div class="key" onclick="vkey('a')">A</div>
  <div class="key" onclick="vkey('s')">S</div>
  <div class="key" onclick="vkey('d')">D</div>
  <div class="key" onclick="vkey('f')">F</div>
  <div class="key" onclick="vkey('g')">G</div>
  <div class="key" onclick="vkey('h')">H</div>
  <div class="key" onclick="vkey('j')">J</div>
  <div class="key" onclick="vkey('k')">K</div>
  <div class="key" onclick="vkey('l')">L</div>
  <div class="key" onclick="vkey(';')">;</div>
  <div class="key" onclick="vkey('\'')">'</div>
  <div class="key" onclick="vkey('\n')" style="width: 4em">Ret</div>
  <div class="rkey" onclick="vkey('KP3')">↘</div>
  <div class="rkey" onclick="vkey('KP2')">↓</div>
  <div class="rkey" onclick="vkey('KP1')">↙</div>
</div>
<div class="keyrow">
  <div class="key" onclick="toggleshift()" id="shiftkey">Shift</div>
  <div class="key" onclick="vkey('z')">Z</div>
  <div class="key" onclick="vkey('x')">X</div>
  <div class="key" onclick="vkey('c')">C</div>
  <div class="key" onclick="vkey('v')">V</div>
  <div class="key" onclick="vkey('b')">B</div>
  <div class="key" onclick="vkey('n')">N</div>
  <div class="key" onclick="vkey('m')">M</div>
  <div class="key" onclick="vkey(',')">,</div>
  <div class="key" onclick="vkey('.')">.</div>
  <div class="key" onclick="vkey('/')">/</div>
</div>
<div class="keyrow">
  <div class="key" onclick="vkey(' ')" id="spacebar"></div>
</div>
</div>
<div class="centerb"><span class="ibutton" onclick="toggleBlock('keys')">Keyboard</span></div>
<div class="rfloat"><span class="ibutton" onclick="stop()">Stop</span></div>
<div class="rfloat">Font:
<span onclick="textsize(false)" class="ibutton">Smaller</span>
<span onclick="textsize(true)" class="ibutton">Larger</span>
</div>
</div>
<div class="modal" id="current">
<div id="gametable" class="formtable">
 <div class="tcapt">Games in Progress</div>
 <div><div>Player</div><div>Game</div><div>Idle time</div><div>Actions</div></div>
</div>
<div id="nogames">No one is playing right now.</div>
</div>
<div class="modal" id="startgame">
<div id="opttable" class="formtable"><div><div>Game</div><div>Actions</div></div></div>
</div>
<div class="modal" id="login">
<div class="formtable">
<div><div>Name:</div><div><input type="text" name="name" id="input_name"></div></div>
<div><div>Password:</div><div><input type="password" name="pw" id="input_pw"></div></div>
<div><div><span class="ibutton" onclick="formlogin(event)">Log in</span></div></div>
</div>
<div class="rfloat"><span class="ibutton" onclick="setmode('register')">New name</span></div>
</div>
<div class="modal" id="register">
<div class="formtable">
<div><div>Name:</div><div><input type="text" name="name" id="regin_name" maxlength="10"></div></div>
<div><div>Password:</div><div><input type="password" name="pw" id="regin_pw"></div></div>
<div><div>E-mail (optional):</div><div><input type="text" name="email" id="regin_email"></div></div>
<div>
<div><span class="ibutton" onclick="formreg(event)">Sign up</span></div>
<div><span class="ibutton" onclick="setmode('login')">Cancel</span></div>
</div>
</div>
</div>
<div class="modal" id="misc">
<div class="centerb"><span class="ibutton" onclick="toggleBlock('debug')">Messages</span></div>
</div>
<div id="debug">
</div>
</body>
</html>