1 files changed, 91 insertions, 0 deletions
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..7371a95
--- /dev/null
+++ b/index.html
@@ -0,0 +1,91 @@
+<style>
+body.loading { opacity: 0 }
+body { font-size: 20px; transition: opacity 0.1s; }
+label { min-width: 50px; display: inline-block; text-align: right; }
+input { text-align: right; }
+#numbers, #buttons { float: left; margin: 20px; }
+#buttons { margin: 20px; }
+button { font-size: 200%; }
+</style>
+
+<body class="loading">
+
+  <div id="numbers">
+	  <script type="text/html" id="number-template">
+		  <div>
+			  <label for="base-{{base}}">{{base}}</label>
+				<input id="base-{{base}}" type="text">
+			</div>
+		</script>
+	</div>
+
+  <div id="buttons">
+	  <button id="add">+</button>
+	  <button id="sub">-</button>
+	  <button id="inv">(-)</button>
+	</div>
+</body>
+<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
+<script src="./index.js"></script>
+<script>
+var MAX_BASE = 16
+var $inputs = {}
+var template = $("#number-template").html()
+function init () {
+  iter(build)
+	bind()
+	rebuild(0)
+  $("body").removeClass("loading")
+}
+function bind () {
+  $("#add").click(add)
+  $("#sub").click(sub)
+  $("#inv").click(inv)
+}
+function build (base) {
+  var $div, $input
+	$div = $(template.replace(/{{base}}/g, base))
+	$input = $div.find("input")
+	$input.on("input", function(){
+	  var n = basic.toNumber( $input.val(), base )
+	  if (isNaN(n)) {
+		  return
+		}
+		rebuild(n, base)
+	})
+	$inputs[base] = $input
+  $("#numbers").prepend($div)
+}
+function rebuild (n, base) {
+  iter(function(i){
+		if (i == base) return
+		var $i = $inputs[i]
+		var v = basic.toString(n, i)
+		$i.val(v)
+  })
+}
+function iter (f) {
+  for (var i = -MAX_BASE; i <= MAX_BASE; i++) {
+    if (basic.validate_base(i)) {
+	    f(i)
+	  }
+	}
+}
+function current () {
+  var n = basic.toNumber( $inputs[2].val(), 2 )
+	if (isNaN(n)) n = 2
+	return n
+}
+function add () {
+	rebuild( current() + 1 )
+}
+function sub () {
+	rebuild( current() - 1 )
+}
+function inv () {
+	rebuild( current() * -1 )
+}
+
+init()
+</script>
+