client.html

<!DOCTYPE HTML>
<html>
	<head>
		<title>CASTER 0.1.1</title>
		<link rel="stylesheet" href="css.css" />

		<script type="text/javascript" src="lib/jquery-1.9.1.js"></script>
		<script type="text/javascript" src="controller.js"></script>
		<script type="text/javascript" src="network.js"></script>
		<script type="text/javascript" src="view.js"></script>
		<script type="text/javascript" src="player.js"></script>
	</head>
	
	<body>
        <div id="header">
            <p class="status"><span>Game status: <span id="game_status" class="val">Logged out</span></span>
                              <span>Connection status: <span id="connection_status" class="val">Disconnected</span></span>
            </p>
            <div id="connect_button_wrapper"><button id="connect_button">Connect</button></div>
            <form id="login_form" method="post">
                <div class="input"><label for="login">Login</label><input type="text" name="login" id="login"></div>
                <div class="input"><label for="passw">Pass</label><input type="text" name="passw" id="passw"></div>
                <div class="input"><button id="login_button">Login</button></div>
            </form>
        </div>
        <div id="middle_div">
            <div id="game_board">
                <div class="block" id="character_info">
                    <p>Name: <span id="character_name"> </span></p>
                    <p>Pos: <span id="character_position"> </span></p>
                    <p>Hp: <span id="character_hp"></span>/<span id="character_max_hp"></span></p>
                </div><div class="block" id="field_wrapper">
                    <table id="field">
                    </table>
                </div><div class="block" id="enemy_info">
                </div>
            </div>
        </div>
        <div id="console_wrapper">
            <div id="console_output"></div>
        </div>
        
	</body>
</html>