chuck.js/static/html/index.html
2014-06-07 16:40:07 +02:00

85 lines
No EOL
2.1 KiB
HTML

<!DOCTYPE html>
<html>
<head>
<title>Chuck Lobby</title>
<style type="text/css">
body { background: #222; color: #ccc; font-family: "Lucida Grande", sans-serif; }
input, button { background: black; color: #ccc; border: 0; padding: 0.3em 0.6em; font-size: 1em; }
#createform, #customjoinform { display: none; }
article { margin: 4em auto; background: #1a1a1a; padding: 2em; max-width: 30em; }
table, th, td { border: 1px solid #777; border-collapse: collapse; }
th, td { padding: 0.5em 1em; }
ul { list-style-type: none; padding-left: 0; }
#link { width: 100%; }
.offline { background: #ccc; }
</style>
</head>
<body>
<article>
<h1>Chuck</h1>
<p>
<label>
Nickname:<br>
<input id="nick" name="nick" type="text">
</label>
</p>
<form action="#" id="createform">
<div>
<h2>Create your own!</h2>
<p><label>Name:<br> <input id="customname"></label></p>
<p><label>Score limit:<br> <input id="scoreLimit" type="number" value="5"></label></p>
<fieldset>
<legend>Maps</legend>
<ul>
<li>
<label><input name="maps" value="debug" type="checkbox" checked> Debug</label>
</li>
<li>
<label><input name="maps" value="stones2" type="checkbox" checked> Stones2</label>
</li>
</ul>
</fieldset>
<p>
<button>Run</button>
<button onclick="show('#listform'); return false;">Cancel</button>
</p>
</div>
</form>
<form action="#" method="GET" id="customjoinform">
<p>
<label>
Link to share with your friends<br>
<input id="link">
</label>
</p>
<p>
<button>Join</button>
<span id="timeout"></span>
</p>
</form>
<form action="#" method="GET" id="listform">
<h2>Channel list</h2>
<table>
<thead>
<tr>
<th>Name</th>
<th>Type</th>
</tr>
</thead>
<tbody id="list"></tbody>
</table>
<p>
<button>Join</button>
<button id="refresh">Refresh list</button>
<button onclick="show('#createform'); return false;">Create</button>
<button onclick="quickstart(); return false;">Quickstart</button>
</p>
</form>
</article>
<script type="text/javascript" src="/static/js/menu.js"></script>
</body>
</html>