diff --git a/arbitrary-time-systems.html b/arbitrary-time-systems.html
new file mode 100644
index 0000000..2f96e4b
--- /dev/null
+++ b/arbitrary-time-systems.html
@@ -0,0 +1,83 @@
+<!doctype html>
+<html>
+	<head>
+		<title>Arbitrary time systems</title>
+		<style>
+			html, body {
+				background-color: #000;
+				color: #fff;
+				font-family: "Consolas", monospace;
+				height: 100vh;
+				margin: 0;
+				padding: 0;
+				width: 100vw;
+			}
+
+			table {
+				font-size: 48px;
+				margin: 0 auto;
+			}
+
+			td {
+				padding: 1rem;
+			}
+		</style>
+	</head>
+	<body>
+		<div>
+			<table>
+				<thead>
+					<tr>
+						<th>System</th>
+						<th>Value</th>
+					</tr>
+				</thead>
+				<tbody>
+					<tr>
+						<td>Actual time</td>
+						<td id="actual_time">Now</td>
+					</tr>
+					<tr>
+						<td>Base 62</td>
+						<td id="base62_time">Now</td>
+					</tr>
+					<tr>
+						<td>Percentage of day</td>
+						<td id="percentage_time">Now</td>
+					</tr>
+				</tbody>
+			</table>
+		</div>
+		<script>
+			const base62 = [];
+			const startOfDay = new Date();
+			startOfDay.setHours(0, 0, 0);
+
+			const cap = "A".charCodeAt(0);
+			const low = "a".charCodeAt(0);
+			for (let i = 0; i < 26; i++) {
+				base62[i] = String.fromCharCode(cap + i);
+				base62[i + 26] = String.fromCharCode(low + i);
+				if (i < 10) {
+					base62[i + 52] = i;
+				}
+			}
+
+			function getTimes() {
+				const now = new Date();
+				document.getElementById("actual_time").textContent = now.toLocaleTimeString();
+
+				const base62h = base62[now.getHours()];
+				const base62m = base62[now.getMinutes()];
+				const base62s = base62[now.getSeconds()];
+				document.getElementById("base62_time").textContent = `${base62h}:${base62m}:${base62s}`;
+
+				const per = (now.getTime() - startOfDay.getTime()) / (24 * 60 * 60 * 10);
+				document.getElementById("percentage_time").textContent = `${per.toFixed(2)}%`;
+			}
+
+			getTimes();
+			setInterval(getTimes, 500);
+		</script>
+	</body>
+</html>
\ No newline at end of file
diff --git a/calendar.html b/calendar.html
new file mode 100644
index 0000000..6f7e03b
--- /dev/null
+++ b/calendar.html
@@ -0,0 +1,157 @@
+<!doctype html>
+<html lang="en_US">
+    <head>
+        <meta content="text/html;charset=utf-8" http-equiv="Content-Type">
+        <meta content="utf-8" http-equiv="encoding">
+        <title>Some calendar thing</title>
+        
+        <!-- CSS only -->
+        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
+
+        <style>
+            body {
+                background-color: var(--bs-dark);
+                color: var(--bs-light);
+                font-family: 'Courier New', Courier, monospace;
+                text-align: center;
+            }
+
+            table {
+                border: 1px solid var(--bs-gray);
+                margin: 2.5rem auto;
+            }
+
+            th {
+                vertical-align: bottom;
+            }
+
+            th.year {
+                font-size: x-large;
+                font-weight: bold;
+                vertical-align: middle;
+            }
+
+            td {
+                width: 40px;
+            }
+
+            td.num {
+                font-weight: bold;
+            }
+
+            .d28, .d29, .d30, .d31 {
+                color: var(--bs-dark);
+            }
+
+            .d28 {
+                background-color: #fcc;
+            }
+
+            .d29 {
+                background-color: #ffc;
+            }
+
+            .d30 {
+                background-color: #cfc;
+            }
+
+            .d31 {
+                background-color: #ccf;
+            }
+        </style>
+    </head>
+    <body class="container-fluid">
+        <main class="row">
+            <div id="calendars-original" class="col"></div>
+            <div id="calendars-compact" class="col"></div>
+        </main>
+
+        <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
+        <script>
+            $(function() {
+                var now = new Date();
+                var currentYear = now.getFullYear();
+                const days = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"];
+                const numCols = Math.ceil(31/7);
+                const months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
+
+                function generateOriginal() {
+                    var tbody = buildOriginalTbody();
+                    
+                    for (var year = 0; year < 10; year++) {
+                        var table = $("<table>");
+                        now.setFullYear(currentYear + year);
+
+                        var thead = $("<thead>");
+                        var spacer = $("<th>", {"colspan": numCols, "class":"year"}).text(currentYear + year);
+
+                        thead.append(spacer);
+
+                        for (var day = 0; day < days.length; day++) {
+                            var cell = $("<th>");
+
+                            for (var month = 0; month < months.length; month++) {
+                                now.setMonth(month);
+                                now.setDate(1);
+                                // javascript starts the week on Sunday
+                                var actualDay = (day + 1) % days.length;
+                                if (now.getDay() != actualDay) continue;
+
+                                var monthDiv = $("<div>").text(months[month]);
+                                cell.append(monthDiv);
+
+                                var future = new Date(now);
+                                var next = month + 1;
+                                if (next == months.length) {
+                                    future.setFullYear(now.getFullYear() + 1);
+                                }
+
+                                future.setMonth(next % months.length);
+                                var lastDayMs = future.getTime() - 1000 * 60 * 60 * 24;
+                                future = new Date(lastDayMs);
+                                monthDiv.attr("class", `d${future.getDate()}`)
+                            }
+
+                            thead.append(cell);
+                        }
+
+                        table.append(tbody.clone());
+                        table.append(thead);
+                        $("#calendars-original").append(table);
+                    }
+                }
+
+                function buildOriginalTbody() {
+                    var tbody = $("<tbody>");
+
+                    for (var rows = 0; rows < days.length; rows++) {
+                        var row = $("<tr>");
+                        
+                        for (var dayNumCol = 0; dayNumCol < numCols; dayNumCol++) {
+                            var value = rows + days.length * dayNumCol + 1;
+                            var cell = $("<td>", { "class": `num d${value}` });
+
+                            row.append(cell);
+                            
+                            if (value > 31) break;
+
+                            cell.text(value);
+                        }
+
+                        for (var day = 0; day < days.length; day++) {
+                            var cell = $("<td>");
+                            cell.text(days[(day + rows) % days.length]);
+                            row.append(cell);
+                        }
+
+                        tbody.append(row);
+                    }
+
+                    return tbody;
+                }
+
+                generateOriginal();
+            });
+        </script>
+    </body>
+</html>
\ No newline at end of file
