Add support for tabs

base.css

@@ -228,6 +228,23 @@ body {
 	font-family: -apple-system, BlinkMacSystemFont, Ubuntu, 'Segoe UI', 'Roboto', Sans-Serif;
 }
 
+.tabs {
+	display: flex;
+	flex-direction: row;
+	justify-content: center;
+}
+
+.tabs h3 {
+	margin: 2px;
+	cursor: pointer;
+}
+
+.tabs h3.selected {
+	border-bottom: #5555ff 2px solid;
+	border-bottom-left-radius: 5%;
+	border-bottom-right-radius: 5%;
+}
+
 @media print {
 	footer, .no-print {
 		display: none !important;

common/tabs.js

@@ -0,0 +1,66 @@
+var selectedTab = 0
+
+/**
+ * @param {number} idx
+ */
+function selectTab(idx) {
+	var tabs = document.querySelectorAll('.tabs h3')
+	var tabViews = document.querySelectorAll('.tab-view')
+	if (tabs.length > 0) {
+		tabs.forEach(function (tab, tIdx) {
+			if (idx == tIdx) {
+				return
+			}
+
+			tab.classList.remove('selected')
+			tabViews[tIdx].classList.add('hidden')
+		})
+		tabs[idx].classList.add('selected')
+		tabViews[idx].classList.remove('hidden')
+	}
+}
+
+/**
+ * @param {number} offset
+ */
+function tabNav(offset) {
+	var items = document.querySelectorAll('.tab-view')
+
+	selectedTab += offset
+	if (selectedTab < 0) {
+		selectedTab += items.length
+	}
+	if (selectedTab >= items.length) {
+		selectedTab -= items.length
+	}
+	selectTab(selectedTab)
+}
+
+function handleTabKeyDown(e) {
+	switch (e.key) {
+		case 'ArrowLeft':
+			e.preventDefault()
+			e.stopPropagation()
+			tabNav(-1)
+			break
+		case 'ArrowRight':
+			e.preventDefault()
+			e.stopPropagation()
+			tabNav(1)
+			break
+	}
+}
+
+window.addEventListener('load', function (e) {
+	// Select first item
+	selectTab(selectedTab)
+	// Add onclick
+	document.querySelectorAll('.tabs h3').forEach(function (tab, tIdx) {
+		tab.addEventListener('click', function (e) {
+			selectedTab = tIdx
+			selectTab(selectedTab)
+		})
+	})
+
+	document.body.addEventListener('keydown', handleTabKeyDown)
+})