diff --git a/.gitignore b/.gitignore
index 9c32455..7904443 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,3 +1,5 @@
+/assets/*.js
+/assets/*.map
/data/
/node_modules/
/config.ini
diff --git a/Makefile b/Makefile
new file mode 100644
index 0000000..2055c83
--- /dev/null
+++ b/Makefile
@@ -0,0 +1,22 @@
+CC=node_modules/.bin/coffee
+ASSETDIR=assets
+
+SRC=$(wildcard $(ASSETDIR)/*.coffee)
+BUILD=$(SRC:%.coffee=%.js)
+
+all: coffee
+
+# coffeescript files
+
+coffee: $(BUILD)
+
+$(ASSETDIR)/%.js: $(ASSETDIR)/%.coffee
+ $(CC) -m -c $<
+
+# cleanup
+
+.PHONY: clean
+clean:
+ -rm $(BUILD)
+
+
diff --git a/assets/main.coffee b/assets/main.coffee
new file mode 100644
index 0000000..ae7a85e
--- /dev/null
+++ b/assets/main.coffee
@@ -0,0 +1,25 @@
+window.mdc.autoInit()
+window.tabBar = new mdc.tabs.MDCTabBar document.querySelector '#tab-bar'
+
+# Hide all panels but the selected one
+activatePanel = (panelId) ->
+ allPanels = document.querySelectorAll '.panel'
+ for panel, i in allPanels
+ if panel.id is panelId
+ tabBar.activeTabIndex = i
+ panel.style.display = if panel.id is panelId then 'block' else 'none'
+
+# React to clicking the tabs
+window.tabBar.listen 'MDCTabBar:change', (t) ->
+ nthChildIndex = t.detail.activeTabIndex
+ tabId = t.srcElement.id
+ tab = document.querySelector "##{tabId} .mdc-tab:nth-child(#{nthChildIndex + 1})"
+ panelId = tab.dataset.panel
+ activatePanel panelId
+
+# If specific tab/panel given in URL, e.g. #motion, switch to that
+hash = location.hash
+if hash.length > 1
+ activatePanel 'family-' + hash.substring 1
+else
+ activatePanel 'family-keyone'
diff --git a/index_main.php b/index_main.php
index 560a487..649f423 100644
--- a/index_main.php
+++ b/index_main.php
@@ -91,36 +91,6 @@ foreach ($allVars as $family => $models) {
?>
-
+