1 files changed, 180 insertions, 0 deletions
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..ee85962
--- /dev/null
+++ b/index.html
@@ -0,0 +1,180 @@
+<html>
+<head>
+<title>Civic Violence</title>
+<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
+<style>
+body {
+  font-family: Helvetica, sans-serif;
+  font-weight: 300;
+	font-size: 13px;
+  transition: background-color 100ms;
+	background-color: #f8fdff;
+}
+div {
+ 	display: inline-block;
+}
+h2 {
+	margin: 10px 0;
+}
+h3 {
+	font-weight: 300;
+	margin-top: 20px;
+}
+#dataset_name {
+	text-transform: capitalize;
+}
+.desktop body {
+  user-select: none;
+}
+.top {
+	display: block;
+	margin-top: 10px;
+	margin-bottom: 10px;
+}
+.tools {
+	padding: 50px 100px;
+	display: flex;
+	flex-direction: column;
+	justify-content: space-between;
+}
+.corner {
+	position: absolute;
+	bottom: 0;
+	margin: 10px;
+	padding: 10px;
+	background: white;
+	display: flex;
+}
+.corner.left {
+	left: 0;
+}
+.corner.right {
+	right: 0;
+}
+body {
+	transition: 0.1s;
+}
+.loading {
+	opacity: 0;
+}
+.row {
+	display: flex;
+	flex-direction: row;
+}
+.column {
+	display: flex;
+	flex-direction: column;
+}
+.block {
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	margin-right: 10px;
+}
+.block > label {
+	font-weight: normal;
+	width: 180px;
+}
+.block > span {
+	display: block;
+}
+.block > .val {
+	margin-left: 10px;
+}
+.radio {
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	margin-top: 20px;
+	margin-bottom: 20px;
+}
+.radio > span {
+	margin-left: 10px;
+}
+.buttons {
+	margin: 10px 0 10px 0;
+}
+select {
+	font-size: 12px;
+	margin-bottom: 10px;
+}
+.ends {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	flex-direction: row;
+	width: 400px;
+}
+#stats {
+	display: flex;
+	flex-direction: column;
+}
+#stats .stat {
+	display: flex;
+	flex-direction: row;
+	justify-content: space-between;
+}
+#stats .key {
+	font-weight: normal;
+}
+#stats .val {
+	width: 40px;
+	white-space: pre;
+}
+canvas {
+	width: calc(100vh - 200px);
+	height: calc(50vh - 100px);
+}
+#log .key {
+	display: none;
+}
+#log .val {
+	margin-left: 10px;
+	margin-top: 40px;
+}
+</style>
+</head>
+<body class='loading'>
+<div>
+<div class='tools'>
+	<div class='row'>
+		<canvas id="canvas"></canvas>
+	</div>
+
+	<div class='row'>
+		<div class='ends'>
+			<h2>Civic Violence</h2>
+			<div class='buttons'>
+				<button id="restart">Restart</button>
+				<button id="pause">Pause</button>
+				<button id="observe">Observe Random Agent</button>
+			</div>
+		</div>
+	</div>
+
+	<div class='row'>
+		<div class='column'>
+			<div>
+				<select id="sim"></select>
+			</div>
+			<div class='column' id="options"></div>
+		</div>
+		<div class='column'>
+			<select id="view"></select>
+			<div id="stats"></div>
+		</div>
+		<div class='column'>
+			<div id="log"></div>
+		</div>
+</div>
+<div class="corner left">
+</div>
+<div class="corner right">
+</div>
+</body>
+<script>
+	var s = document.createElement('script');
+	s.setAttribute('src','bundle.js?' + Date.now());
+	document.body.appendChild(s)
+</script>
+</html>