76 lines
2.7 KiB
HTML
76 lines
2.7 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Lingo</title>
|
|
<link rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css">
|
|
<link rel="stylesheet" href="multiplayer.css">
|
|
<link rel="stylesheet" href="cube-grid.css">
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<div id="usernameDiv">
|
|
<div 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>
|
|
<div id="canvasDiv" class="hidden">
|
|
<canvas id="canvas" 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 id="messageDiv" class="hidden panel panel-default">
|
|
<div class="panel-heading">
|
|
<h3 class="panel-title">Chat</h3>
|
|
</div>
|
|
<div id="messageList" class="list-group"></div>
|
|
<input id="messageInput" placeholder="Type here..." />
|
|
</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="multiplayer.js"></script>
|
|
</body>
|
|
</html>
|