feature: the beginnings of chat working

public/tabs/tabs.html

@@ -0,0 +1,131 @@
+<script>
+	window.addEventListener("locationchange", () => {
+		const hash = window.location.hash?.slice(1);
+		if (hash) {
+			const target_tab = document.querySelector(`[data-hash="${hash}"]`);
+			if (target_tab) {
+				target_tab.click();
+			}
+		}
+	});
+
+	document.addEventListener("DOMContentLoaded", () => {
+		const tab_switchers = document.querySelectorAll(".tab-switch");
+		for (const tab_switch of tab_switchers) {
+			tab_switch.addEventListener("input", (event) => {
+				const tab_selector = event.target;
+				const hash = tab_selector.dataset.hash;
+				if (hash) {
+					window.location.hash = hash;
+				}
+			});
+		}
+	});
+</script>
+<style>
+	.tabs-container {
+		position: relative;
+		height: 100%;
+	}
+
+	.tabs {
+		position: relative;
+		height: 100%;
+		width: 100%;
+	}
+
+	.tabs::before,
+	.tabs::after {
+		content: "";
+		display: table;
+	}
+
+	.tabs::after {
+		clear: both;
+	}
+
+	.tab {
+		float: left;
+	}
+
+	.tab-switch {
+		display: none;
+	}
+
+	.tab-label {
+		position: relative;
+		width: 8rem;
+		height: 5rem;
+		cursor: pointer;
+		transition: all 0.25s;
+
+		display: flex;
+		align-items: center;
+		justify-content: end;
+		flex-direction: column;
+	}
+
+	.tab-label .label {
+		margin: 0.75rem 0;
+	}
+
+	.tab-content {
+		position: absolute;
+		z-index: 1;
+		top: 5rem;
+		left: 0;
+		right: 0;
+		bottom: 0;
+		padding: 1rem 1rem 0 1rem;
+		opacity: 0;
+		transition: all 0.35s;
+		border-top: 1px solid var(--border-subtle);
+		margin-top: 1px;
+	}
+
+	.tab-switch,
+	.tab-switch + .tab-label {
+		transition: none;
+	}
+
+	.tab-switch:checked + .tab-label {
+		margin-top: 1px;
+		border-bottom: 1px solid var(--border-highlight);
+		z-index: 1;
+	}
+
+	.tab-switch:checked + label + .tab-content {
+		z-index: 2;
+		opacity: 1;
+	}
+
+	@media screen and (max-width: 800px) {
+		.tab-label {
+			width: 4rem;
+		}
+
+		.tab-label .label {
+			font-size: small;
+		}
+	}
+
+	@media screen and (max-width: 480px) {
+		.tab-label {
+			width: 2.75rem;
+		}
+
+		.tab-label .label {
+			font-size: x-small;
+		}
+	}
+</style>
+
+<div class="tabs">
+	<!-- #include file="./home.html" -->
+	<!-- #include file="./talk.html" -->
+	<!-- #include file="./exchange.html" -->
+	<!-- #include file="./work.html" -->
+	<!-- #include file="./resources.html" -->
+	<!-- #include file="./calendar.html" -->
+	<!-- #include file="./user.html" -->
+</div>