diff options
| author | Jules Laplace <julescarbon@gmail.com> | 2018-08-22 17:35:49 +0200 |
|---|---|---|
| committer | Jules Laplace <julescarbon@gmail.com> | 2018-08-22 17:35:49 +0200 |
| commit | acf03a89ea16bfa49db8c1175be8f0cf1e021ab3 (patch) | |
| tree | b0ece3cd3f67e5db7cbeed6d58600835f75e5d59 /index.html | |
civic violence simulator
Diffstat (limited to 'index.html')
| -rw-r--r-- | index.html | 180 |
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> |