index.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>The Barbarian Steppe</title>
		<link rel="icon" type="image/png" href="img/logo.png">

		<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
		<link href='http://fonts.googleapis.com/css?family=Roboto:400,700,300,100' rel='stylesheet' type='text/css'>
		<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">

		<link rel="stylesheet" type="text/css" href="css/mycss.css">
		<link rel="stylesheet" type="text/css" href="css/codemirror.css">
		<link rel="stylesheet" type="text/css" href="css/show-hint.css">
		<link rel="stylesheet" type="text/css" href="css/lint.css">
		<link rel="stylesheet" type="text/css" href="css/introjs.css">

		<script type="text/javascript" src="js/jquery-3.1.0.min.js"></script>
		<script type="text/javascript" src="js/bootstrap.js"></script>
		<script type="text/javascript" src="js/intro.js"></script>
		<script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/jshint/r07/jshint.js"></script>

		<script type="text/javascript" src="js/CodeMirror/codemirror.js"></script>
		<script type="text/javascript" src="js/CodeMirror/javascript.js"></script>
		<script type="text/javascript" src="js/CodeMirror/addon/active-line.js"></script>
		<script type="text/javascript" src="js/CodeMirror/addon/closebrackets.js"></script>
		<script type="text/javascript" src="js/CodeMirror/addon/matchbrackets.js"></script>
		<script type="text/javascript" src="js/CodeMirror/addon/trailingspace.js"></script>
		<script type="text/javascript" src="js/CodeMirror/addon/show-hint.js"></script>
		<script type="text/javascript" src="js/CodeMirror/addon/javascript-hint.js"></script>
		<script type="text/javascript" src="js/CodeMirror/addon/lint.js"></script>
		<script type="text/javascript" src="js/CodeMirror/addon/javascript-lint.js"></script>
		<script type="text/javascript" src="js/CodeMirror/addon/panel.js"></script>
		<script type="text/javascript" src="https://cdn.jsdelivr.net/jquery.typeit/4.2.3/typeit.min.js"></script>
	</head>

	<body>
		<!-- navbar -->
		<nav class="navbar navbar-default navbar-inverse">
			<div class="container" style="width: auto; height: 100%;">
				<div class="navbar-header">
					<a class="navbar-brand" href="index">
						<img class="logo "alt="Logo" src="img/logo.png">
                        <span class="nav-title">The Barbarian Steppe</span>
					</a>
				</div>

				<ul class="nav navbar-nav">
                    <li>
                        <a href="#" data-toggle="modal" data-target="#levelsModal" id="levels">
                            <i class="fa fa-puzzle-piece" aria-hidden="true"></i>
                            <span>Levels</span>
                        </a>
                    </li>
					<li>
						<a href="#" data-toggle="modal" data-target="#accountModal" id="user" >
							<i class="fa fa-user" aria-hidden="true"></i>
                            <span>Profile</span>
						</a>
					</li>
					</ul>
					<hr style="margin-right: 20px;">
					<ul class="nav navbar-nav" style="margin: 0; padding: 0">
				    <li>
                        <a href="#" onclick="startTutorial();">
                            <i class="fa fa-book" aria-hidden="true" ></i>
                            <span>Tutorial</span>
                        </a>
                    </li>
					<li>
						<a href="/logout">
							<i class="fa fa-sign-out" aria-hidden="true" ></i>
                            <span>Logout</span>
						</a>
					</li>
				</ul>
			</div>
		</nav>

		<!-- BADGES Modal -->
		<div id="badgesModal" class="modal fade" role="document">
			<div class="modal-dialog">
				<!-- Modal content-->
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal">&times;</button>
						<h4 class="modal-title">Badge Unlocked</h4>
					</div>

					<div class="modal-body" id="badge-div">
						<h3>Congratulations</h3>
						<p>You Received a Badge for your achievement!</p>
						<div class="well">
							<img style="width: 150px; height: auto;" src="/img/badge.png">
							<h4 id="badge-description"><h4>
						</div>
					</div>

					<div class="modal-footer">
						<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
					</div>
				</div>
			</div>
		</div>

		<!-- LEVELS Modal -->
		<div id="levelsModal" class="modal fade" role="document">
			<div class="modal-dialog">
				<!-- Modal content-->
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal">&times;</button>
						<h4 class="modal-title">Level selection</h4>
					</div>

					<div class="modal-body" id="level-selector">
						<div class="btn-group btn-group-justified" role="group" aria-label="Livello"></div>

						<div class="level-description well">
							<h3></h3>
							<p>Select the level you want to play</p>
						</div>
					</div>

					<div class="modal-footer">
						<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
						<button type="button" class="btn btn-success" data-dismiss="modal" id="load-level-btn">Play</button>
					</div>
				</div>
			</div>
		</div>

        <!-- ACCOUNT Modal -->
		<div id="accountModal" class="modal fade" role="document">
			<div class="modal-dialog modal-lg" >
			<!-- Modal content-->
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal">&times;</button>
						<h4 class="modal-title">Profile</h4>
					</div>

					<div class="modal-body">
						<div class="row">
							<div class="col-md-6">
								<div class="panel panel-default">
									<div class="panel-body">
										<div class="row">
											<div class="col-md-8" style="text-align:center;">
												<img class="avatar-circle" id="imgAvatar" src="img/avatars/<%= username %>" onerror="src='img/recruit.png'"><br>

												<form class="imgform" id="formUpdateAvatar" enctype="multipart/form-data">
													<label class="btn btn-primary" data-toggle="tooltip" data-placement="bottom" title="Upload avatar">
														<i class="fa fa-folder-open" aria-hidden="true"></i>
														<input type="file" id="inputAvatarFile" name="avatar" style="display: none;">
													</label>
												</form>
												<button id="buttonDeleteAvatar" class="btn btn-danger" data-toggle="tooltip" data-placement="bottom" title="Delete avatar">
													<i class="fa fa-remove" aria-hidden="true"></i>
												</button>

												<div class="" role="alert" id="imgAlert" hidden="true">
													<button type="button" class="close" data-hide="alert" aria-label="Close">
														<span aria-hidden="true">&times;</span>
													</button>
													<p></p>
												</div>
											</div>
											<div class="col-md-4">
												<h4 name="username"><%= username %></h4>
												<p name="score"></p>
											</div>
										</div>
									</div>
								</div>
							</div>
                            <div class="col-md-6">
                                <p>Overall progress:</p>
                                <div class="progress">
                                    <div class="progress-bar" role="progressbar" aria-valuenow="" aria-valuemin="0" aria-valuemax="100">

                                    </div>
                                </div>
                            </div>
						</div>


						<p>Badges obtained:</p>
						<table class="table table-bordered badge-table">
							<tbody>
								<tr>
									<td class="col-md-3 badge-lock" name="Debug">
										<img class="mybadge" src="img/badge.png"><br>
										<p><b>Debug</b></p>
										<p>All debug levels completed.</p>
									</td>
									<td class="col-md-3 badge-lock" name="Refactoring">
										<img class="mybadge" src="img/badge.png">
										<p><b>Refactoring</b></p>
										<p>All refactoring levels completed.</p>
									</td>
									<td class="col-md-3 badge-lock" name="Design">
										<img class="mybadge" src="img/badge.png">
										<p><b>Design</b><p>
										<p>All design levels completed.</p>
									</td>
									<td class="col-md-3 badge-lock" name="Level-10">
										<img class="mybadge" src="img/badge.png">
										<p><b>War Is Over!</b></p>
										<p>Won level 10.</p>
									</td>
								</tr>
								<tr>
									<td class="col-md-3 badge-lock" name="Tutorial">
										<img class="mybadge" src="img/badge.png">
										<p><b>Neophyte</b></p>
										<p>Tutorial completed.</p>
									</td>
									<td class="col-md-3 badge-lock" name="Destroy-bonus-missiles">
										<img class="mybadge" src="img/badge.png">
										<p><b>Jackpot</b></p>
										<p>Destroyed all bonus missiles.</p>
									</td>
									<td class="col-md-3 badge-lock" name="Win-25-missiles">
										<img class="mybadge" src="img/badge.png">
										<p><b>Sniper</b></p>
										<p>Won a level keeping more than 25 missiles.</p>
									</td>
									<td class="col-md-3 badge-lock" name="Upload-photo">
										<img class="mybadge" src="img/badge.png">
										<p><b>Good Looking</b></p>
										<p>Dashboard completed with a personal photo.</p>
									</td>
								</tr>
							</tbody>
						</table>

						<p>Leaderboard:</p>
						<table class="table table-striped" id="leaderboard">
							<thead>
								<tr>
									<th>#</th>
									<th>Username</th>
									<th>Overall score</th>
								</tr>
							</thead>
							<tbody>

							</tbody>
						</table>
					</div>

					<div class="modal-footer">
						<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
					</div>
				</div>
			</div>
		</div>

		<!-- main page -->
		<div class="container">
			<div class="row" style="margin-top: 1em;">
				<!-- Parte sx -->
				<div class="col-lg-6">
                    <div class="panel panel-default" id="chat-panel">
                        <div class="panel-heading">Level 1</div>
                        <div class="panel-body" id="chat-body">
                            	<div class="msg">
    	                            <!--<img class="portrait" src="img/general.png">-->
                            		<span class="type-it"></span>
                            	</div>
                        </div>
                    </div>


					<div class="row" id="mc-container">
						<canvas id="miscom" class="game center-block" width="510" height="460">
							Missile Command
						</canvas>
					</div>
				</div>

				<!-- Parte dx -->
				<div class="col-lg-6">
					<div class="row">
						<div class="panel panel-default" id="code-panel">

                       		<div class="panel-heading">Editor
                       			<!-- Buttons -->
		                       	<div class="floating-buttons">
									<button type="button" id="ButtonExecCode" class="btn btn-success btn-lg" data-toggle="tooltip" data-placement="bottom" title="Execute code">
										<i class="fa fa-check" aria-hidden="true"></i>
									</button>

									<button type="button" id="ButtonResetCode" class="btn btn-danger btn-lg" data-toggle="tooltip" data-placement="bottom" title="Reset code">
										<i class="fa fa-undo" aria-hidden="true"></i>
									</button>

		                            <button type="button" id="ButtonGetHelp" class="btn btn-info btn-lg"
											data-toggle="tooltip" data-placement="bottom" title="Ask the mechanic"
											onclick="loadHints()">
		                                <i class="fa fa-question-circle" aria-hidden="true"></i>
		                            </button>
								</div>

                       		</div>
                       		<!-- panel body -->
                        	<div class="panel-body" id="code-body">
								<div class="col-lg-12" id="editor-container">
									<!-- editor -->
									<textarea class="hidden" id="code" name="code">Game code</textarea>
								</div>
							</div>
						</div>


					</div>
				</div>
			</div>
		</div>

		<footer class="footer">
            <h4>The Barbarian Steppe</h4>
			<span>Alice Valentini, Lorenzo Cazzoli, Luca Casini, Manfredi Giordano</span>
			<br>
			<span>Project for <em>Interazione Persona-Computer</em> exam, University of Bologna, academic year 2015-2016</span>
		</footer>

		<!-- script  -->
		<script type="text/javascript" src="/missile_command.js"></script>
		<script type="text/javascript" src="js/editor.js"></script>
		<script type="text/javascript" src="js/app.js"></script>

		<noscript>You need to turn JavaScript on.</noscript>
	</body>
</html>