<!DOCTYPE html>

<html>
<head>
	<meta charset="utf-8">
	<title>pong visualization</title>


	<!-- FAVICON -->
	<link rel="apple-touch-icon" sizes="57x57" href="{{ static_url("favicon/apple-icon-57x57.png") }}">
	<link rel="apple-touch-icon" sizes="60x60" href="{{ static_url("favicon/apple-icon-60x60.png") }}">
	<link rel="apple-touch-icon" sizes="72x72" href="{{ static_url("favicon/apple-icon-72x72.png") }}">
	<link rel="apple-touch-icon" sizes="76x76" href="{{ static_url("favicon/apple-icon-76x76.png") }}">
	<link rel="apple-touch-icon" sizes="114x114" href="{{ static_url("favicon/apple-icon-114x114.png") }}">
	<link rel="apple-touch-icon" sizes="120x120" href="{{ static_url("favicon/apple-icon-120x120.png") }}">
	<link rel="apple-touch-icon" sizes="144x144" href="{{ static_url("favicon/apple-icon-144x144.png") }}">
	<link rel="apple-touch-icon" sizes="152x152" href="{{ static_url("favicon/apple-icon-152x152.png") }}">
	<link rel="apple-touch-icon" sizes="180x180" href="{{ static_url("favicon/apple-icon-180x180.png") }}">
	<link rel="icon" type="image/png" sizes="192x192"  href="{{ static_url("favicon/android-icon-192x192.png") }}">
	<link rel="icon" type="image/png" sizes="32x32" href="{{ static_url("favicon/favicon-32x32.png") }}">
	<link rel="icon" type="image/png" sizes="96x96" href="{{ static_url("favicon/favicon-96x96.png") }}">
	<link rel="icon" type="image/png" sizes="16x16" href="{{ static_url("favicon/favicon-16x16.png") }}">
	<link rel="manifest" href="{{ static_url("favicon/manifest.json") }}">
	<meta name="msapplication-TileColor" content="#ffffff">
	<meta name="msapplication-TileImage" content="{{ static_url("favicon/ms-icon-144x144.png") }}">
	<meta name="theme-color" content="#ffffff">

	<!-- Load JS (JQuery, Bootstrap, D3, ColorBrwer, and D3-tip) -->
	<script src="{{ static_url("dependencies/jquery-2.1.4.min.js") }}" type="text/javascript"></script>
 	<script src="{{ static_url("dependencies/jquery-ui.min.js") }}" type="text/javascript"></script>

	


	<script src="{{ static_url("dependencies/bootstrap-3.3.5-dist/js/bootstrap.min.js") }}" type="text/javascript"></script>
	<script src="{{ static_url("dependencies/d3.v3.min.js") }}" type="text/javascript"></script>
	<script src="{{ static_url("dependencies/colorbrewer.v1.min.js") }}" type="text/javascript"></script>
	<script src="{{ static_url("dependencies/d3.tip.v0.6.3.js") }}" type="text/javascript"></script>
	<script src="{{ static_url("dependencies/modernizr-custom.js") }}" type="text/javascript"></script>
	<script src="{{ static_url("dependencies/d3-path.v0.2.min.js") }}" type="text/javascript"></script>
	<script src="{{ static_url("dependencies/d3-shape.v0.7.min.js") }}" type="text/javascript"></script>
	
	<!-- Load online scripts instead of local versions
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
	<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
	<script type="text/javascript" src="http://d3js.org/d3.v3.min.js"></script>
	<script type="text/javascript" src="http://d3js.org/colorbrewer.v1.min.js"></script>  
	<script src="http://labratrevenge.com/d3-tip/javascripts/d3.tip.v0.6.3.js"></script>
	-->
	
	
	<!-- Load CSS (jquery-slider, Bootstrap, Font Awesome) -->
	<link rel="stylesheet" href="{{ static_url("dependencies/jquery-ui.min.css") }}" type="text/css" />
	<link rel="stylesheet" href="{{ static_url("dependencies/bootstrap-3.3.5-dist/css/bootstrap.min.css") }}" type="text/css" />
	<link rel="stylesheet" href="{{ static_url("dependencies/font-awesome-4.4.0/css/font-awesome.min.css") }}" type="text/css" /> <!-- Font Awesome by Dave Gandy - http://fontawesome.io -->

	<!-- Load online styles instead of local versions
	<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css"/>
	<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"/>
	-->

	<!-- Load custom JS and CSS -->
	<script src="{{ static_url("pong.js") }}" type="text/javascript"></script>
	<link rel="stylesheet" href="{{ static_url("pong.css") }}" type="text/css" />

</head>
<body>

<nav class="navbar navbar-default navbar-fixed-top alert-danger" id="resize-warning-nav">
	<div class="container">
		<div class="row">
			<div class="col-md-1"></div>
			<div class="col-md-10">
				<table id="resize-warning-text">
					<tr>
						<td><i class="fa fa-exclamation-triangle fa-2x"></i></td>
						<td>It looks like you've changed your browser width. Please refresh your browser to optimize the visualization for this window size.</td>
						<td></td>
						<td><div id="resize-warning-exit"><i class="fa fa-times-circle fa-lg"></i></div></td>
					</tr>
				</table>					
			</div>
			<div class="col-md-1"></div>
		</div>
	</div>
</nav>


<section id="loading">
	<div class="jumbotron">
		<div class="container">
			<div class="row"><br/></div>
			<div class="row"><br/></div>
			<div class="row">
				<div class="col-md-12">
					<h1 class="pong-title">pong</h1>
					<br/>
					<svg id="loadbar" width="300" height="50">
						<rect width="280" height="20" stroke="white"/>
						<rect id="progress-bar" width="0" height="20" fill="white"/>
					</svg>
				</div>
			</div>
		</div>
	</div>
</section>



<div class="container">
	<div class="row">
		<div class="col-md-1"></div>
		<div class="col-md-10">
			<div class="page-header">
				<h1 class="text-center pong-title">pong</h1>
			</div>
		</div>
		<div class="col-md-1"></div>
	</div>
</div>

<div class="container-fluid">
	<div id="visualization"></div>
</div>




<div class="container">
	<div class="row">
		<div class="text-center">
			<br>
			<button class="btn btn-default" type="submit" id="printAllPlots">Print all barplots</button>
			<div class="dropdown dropdown-toggle" id="downloadAllDiv">
				<a data-toggle="dropdown" aria-expanded="false"><div class="btn btn-default" id="downloadAllDropdownLink">Download all barplots</div></a>
			</div>
		</div>
	</div>
	<div class="row">
		<div class="col-md-1"></div>
		<div class="col-md-10"><hr /></div>
		<div class="col-md-1"></div>
		
	</div>
	<div class="row">
		<div class="col-md-12">
			<p class="text-center"><a href="mailto:aaron_behr@alumni.brown.edu?Subject=pong">A. Behr</a>, K. Liu, T. D. Devlin, G. Liu-Fang, <a href="mailto:sramachandran@brown.edu?Subject=pong">S. Ramachandran</a></p>
			<p class="text-center">To share your experience as a pong user, visit <a href="https://groups.google.com/forum/#!forum/pong-app" target="_blank">our Google group</a>.</p>
		</div>
	</div>
</div>

</body>
</html>
