79 lines
2.8 KiB
HTML
79 lines
2.8 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Lingo</title>
|
|
<link rel="stylesheet" href="panes.css">
|
|
<link rel="stylesheet" href="cube-grid.css">
|
|
<link rel="stylesheet" href="client.css">
|
|
</head>
|
|
<body>
|
|
<div id="usernameDiv" class="jumbotron">
|
|
<p>Choose your username<p>
|
|
<form>
|
|
<div class="form-group">
|
|
<input id="username" type="text" class="form-control" maxlength="16" placeholder="Username">
|
|
</div>
|
|
<button id="usernameButton" type="button" class="btn btn-default">Go</button>
|
|
</form>
|
|
</div>
|
|
<div id="appDiv" class="hidden">
|
|
<div class="left col">
|
|
<div class="header row">Lingo</div>
|
|
<div class="body row scroll-y">
|
|
<div id="canvasDiv" class="hidden">
|
|
<canvas id="canvas" class="centered" width="600" height="475" tabindex="1"></canvas>
|
|
</div>
|
|
<div id="waitingDiv" class="hidden">
|
|
<h1>Waiting for Opponent</h1>
|
|
<!-- Based on http://tobiasahlin.com/spinkit -->
|
|
<div class="sk-cube-grid">
|
|
<div class="sk-cube sk-cube1"></div>
|
|
<div class="sk-cube sk-cube2"></div>
|
|
<div class="sk-cube sk-cube3"></div>
|
|
<div class="sk-cube sk-cube4"></div>
|
|
<div class="sk-cube sk-cube5"></div>
|
|
<div class="sk-cube sk-cube6"></div>
|
|
<div class="sk-cube sk-cube7"></div>
|
|
<div class="sk-cube sk-cube8"></div>
|
|
<div class="sk-cube sk-cube9"></div>
|
|
<div class="sk-cube sk-cube10"></div>
|
|
<div class="sk-cube sk-cube11"></div>
|
|
<div class="sk-cube sk-cube12"></div>
|
|
<div class="sk-cube sk-cube13"></div>
|
|
<div class="sk-cube sk-cube14"></div>
|
|
<div class="sk-cube sk-cube15"></div>
|
|
<div class="sk-cube sk-cube16"></div>
|
|
<div class="sk-cube sk-cube17"></div>
|
|
<div class="sk-cube sk-cube18"></div>
|
|
<div class="sk-cube sk-cube19"></div>
|
|
<div class="sk-cube sk-cube20"></div>
|
|
<div class="sk-cube sk-cube21"></div>
|
|
<div class="sk-cube sk-cube22"></div>
|
|
<div class="sk-cube sk-cube23"></div>
|
|
<div class="sk-cube sk-cube24"></div>
|
|
<div class="sk-cube sk-cube25"></div>
|
|
<div class="sk-cube sk-cube26"></div>
|
|
<div class="sk-cube sk-cube27"></div>
|
|
<div class="sk-cube sk-cube28"></div>
|
|
<div class="sk-cube sk-cube29"></div>
|
|
<div class="sk-cube sk-cube30"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="right col">
|
|
<div class="header row">Chat</div>
|
|
<div id="messageList" class="body row scroll-y"></div>
|
|
<div class="footer row">
|
|
<input id="messageInput" placeholder="Chat here..." />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="//cdnjs.cloudflare.com/ajax/libs/sockjs-client/1.1.1/sockjs.min.js"></script>
|
|
<script src="//cdnjs.cloudflare.com/ajax/libs/stomp.js/2.3.3/stomp.min.js"></script>
|
|
<script src="client.js"></script>
|
|
</body>
|
|
</html>
|