From e67eea694d6095f105b20891c23b1ed21a893e32 Mon Sep 17 00:00:00 2001
From: Lani Aung <github@laniaung.me>
Date: Sat, 17 Aug 2024 15:50:32 -0600
Subject: [PATCH] Cleanup

---
 arbitrary-time-systems.html |  17 ++-
 calendar.html               | 278 ++++++++++++++++++++++++------------
 2 files changed, 195 insertions(+), 100 deletions(-)
diff --git a/arbitrary-time-systems.html b/arbitrary-time-systems.html
index 11b6c30..76e01af 100644
--- a/arbitrary-time-systems.html
+++ b/arbitrary-time-systems.html
@@ -1,7 +1,10 @@
 <!doctype html>
 <html>
 	<head>
+		<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
+        <meta content="utf-8" http-equiv="encoding">
 		<title>Arbitrary time systems</title>
+
 		<style>
 			html, body {
 				background-color: #000;
@@ -50,13 +53,6 @@
 		</div>
 		<script>
 			const base62 = [];
-			const startOfYear = new Date();
-			startOfYear.setMonth(0, 1);
-			startOfYear.setHours(0, 0, 0);
-
-			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++) {
@@ -68,6 +64,13 @@
 			}
 
 			function getTimes() {
+				const startOfYear = new Date();
+				startOfYear.setMonth(0, 1);
+				startOfYear.setHours(0, 0, 0);
+
+				const startOfDay = new Date();
+				startOfDay.setHours(0, 0, 0);
+
 				const now = new Date();
 				document.getElementById("actual_time").textContent = now.toString();
 
diff --git a/calendar.html b/calendar.html
index 6f7e03b..2b8c029 100644
--- a/calendar.html
+++ b/calendar.html
@@ -4,21 +4,26 @@
         <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;
+            html, body {
+                background-color: #000;
+                color: #999;
+                font-family: "Consolas", monospace;
+                margin: 0;
+                padding: 0;
+                width: 100%;
             }
 
             table {
-                border: 1px solid var(--bs-gray);
+                border: 1px solid #888;
+                border-collapse: collapse;
                 margin: 2.5rem auto;
+                overflow: hidden;
+            }
+
+            tbody tr:hover {
+                background-color: rgba(128, 64, 0, 0.5);
             }
 
             th {
@@ -32,6 +37,8 @@
             }
 
             td {
+                padding: 0.25rem;
+                text-align: center;
                 width: 40px;
             }
 
@@ -40,118 +47,203 @@
             }
 
             .d28, .d29, .d30, .d31 {
-                color: var(--bs-dark);
+                color: #666;
             }
 
             .d28 {
-                background-color: #fcc;
+                background-color: #faa;
             }
 
             .d29 {
-                background-color: #ffc;
+                background-color: #ffa;
             }
 
             .d30 {
-                background-color: #cfc;
+                background-color: #afa;
             }
 
             .d31 {
-                background-color: #ccf;
+                background-color: #aaf;
+            }
+
+            .today {
+                color: #fff;
+            }
+
+            .today.d28, .today.d29, .today.d30, .today.d31 {
+                color: #000;
             }
         </style>
     </head>
-    <body class="container-fluid">
-        <main class="row">
-            <div id="calendars-original" class="col"></div>
-            <div id="calendars-compact" class="col"></div>
+    <body>
+        <main id="main">
+            <table>
+                <thead>
+                    <tr>
+                        <th class="year" colspan="5">Year</th>
+                        <th class="col-1"></th>
+                        <th class="col-2"></th>
+                        <th class="col-3"></th>
+                        <th class="col-4"></th>
+                        <th class="col-5"></th>
+                        <th class="col-6"></th>
+                        <th class="col-0"></th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>1</td>
+                        <td>8</td>
+                        <td>15</td>
+                        <td>22</td>
+                        <td class="d29">29</td>
+                        <td class="col-1">Mon</td>
+                        <td class="col-2">Tue</td>
+                        <td class="col-3">Wed</td>
+                        <td class="col-4">Thu</td>
+                        <td class="col-5">Fri</td>
+                        <td class="col-6">Sat</td>
+                        <td class="col-0">Sun</td>
+                    </tr>
+                    <tr>
+                        <td>2</td>
+                        <td>9</td>
+                        <td>16</td>
+                        <td>23</td>
+                        <td class="d30">30</td>
+                        <td class="col-2">Tue</td>
+                        <td class="col-3">Wed</td>
+                        <td class="col-4">Thu</td>
+                        <td class="col-5">Fri</td>
+                        <td class="col-6">Sat</td>
+                        <td class="col-0">Sun</td>
+                        <td class="col-1">Mon</td>
+                    </tr>
+                    <tr>
+                        <td>3</td>
+                        <td>10</td>
+                        <td>17</td>
+                        <td>24</td>
+                        <td class="d31">31</td>
+                        <td class="col-3">Wed</td>
+                        <td class="col-4">Thu</td>
+                        <td class="col-5">Fri</td>
+                        <td class="col-6">Sat</td>
+                        <td class="col-0">Sun</td>
+                        <td class="col-1">Mon</td>
+                        <td class="col-2">Tue</td>
+                    </tr>
+                    <tr>
+                        <td>4</td>
+                        <td>11</td>
+                        <td>18</td>
+                        <td>25</td>
+                        <td></td>
+                        <td class="col-4">Thu</td>
+                        <td class="col-5">Fri</td>
+                        <td class="col-6">Sat</td>
+                        <td class="col-0">Sun</td>
+                        <td class="col-1">Mon</td>
+                        <td class="col-2">Tue</td>
+                        <td class="col-3">Wed</td>
+                    </tr>
+                    <tr>
+                        <td>5</td>
+                        <td>12</td>
+                        <td>19</td>
+                        <td>26</td>
+                        <td></td>
+                        <td class="col-5">Fri</td>
+                        <td class="col-6">Sat</td>
+                        <td class="col-0">Sun</td>
+                        <td class="col-1">Mon</td>
+                        <td class="col-2">Tue</td>
+                        <td class="col-3">Wed</td>
+                        <td class="col-4">Thu</td>
+                    </tr>
+                    <tr>
+                        <td>6</td>
+                        <td>13</td>
+                        <td>20</td>
+                        <td>27</td>
+                        <td></td>
+                        <td class="col-6">Sat</td>
+                        <td class="col-0">Sun</td>
+                        <td class="col-1">Mon</td>
+                        <td class="col-2">Tue</td>
+                        <td class="col-3">Wed</td>
+                        <td class="col-4">Thu</td>
+                        <td class="col-5">Fri</td>
+                    </tr>
+                    <tr>
+                        <td>7</td>
+                        <td>14</td>
+                        <td>21</td>
+                        <td class="d28">28</td>
+                        <td></td>
+                        <td class="col-0">Sun</td>
+                        <td class="col-1">Mon</td>
+                        <td class="col-2">Tue</td>
+                        <td class="col-3">Wed</td>
+                        <td class="col-4">Thu</td>
+                        <td class="col-5">Fri</td>
+                        <td class="col-6">Sat</td>
+                    </tr>
+                </tbody>
+            </table>
         </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"];
+            const today = new Date();
+            const now = new Date();
+            now.setHours(0, 0, 0);
 
-                function generateOriginal() {
-                    var tbody = buildOriginalTbody();
-                    
-                    for (var year = 0; year < 10; year++) {
-                        var table = $("<table>");
-                        now.setFullYear(currentYear + year);
+            const currentYear = now.getFullYear();
+            const months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
 
-                        var thead = $("<thead>");
-                        var spacer = $("<th>", {"colspan": numCols, "class":"year"}).text(currentYear + year);
+            let template = document.importNode(document.getElementsByTagName("table")[0], true);
+            const main = document.getElementById("main");
+            main.removeChild(main.firstElementChild);
 
-                        thead.append(spacer);
+            for (let year = 0; year < 5; year++) {
+                const table = document.importNode(template, true); // Clone
+                now.setFullYear(currentYear + year);
+                table.querySelector(".year").textContent = now.getFullYear();
+                
+                for (let day = 0; day < 7; day++) {
+                    for (let month = 0; month < 12; month++) {
+                        now.setDate(1);
+                        now.setMonth(month);
 
-                        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);
+                        const future = new Date(now);
+                        if (month + 1 >= months.length) {
+                            future.setFullYear(currentYear + 1);
                         }
 
-                        table.append(tbody.clone());
-                        table.append(thead);
-                        $("#calendars-original").append(table);
+                        future.setMonth((month + 1) % months.length);
+                        future.setTime(future.getTime() - 60000); // A minute before
+
+                        if (now.getDay() == day) {
+                            const div = document.createElement("div");
+                            div.textContent = months[month];
+                            table.querySelector(`thead .col-${day}`).appendChild(div);
+                            div.classList.add(`d${future.getDate()}`);
+                            div.setAttribute("title", `${future.getDate()} days`);
+
+                            if (now.getFullYear() == today.getFullYear() && month == today.getMonth()) div.classList.add("today");
+                        }
                     }
                 }
 
-                function buildOriginalTbody() {
-                    var tbody = $("<tbody>");
+                main.appendChild(table);
+            }
 
-                    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();
-            });
+            const todayTable = document.getElementsByTagName("table")[0];
+            todayTable.querySelector(".year").classList.add("today");
+            const row = todayTable.querySelector(`tbody tr:nth-child(${today.getDate() % 7})`);
+            const dateColumn = Math.ceil(today.getDate() / 7);
+            row.querySelector(`td:nth-child(${dateColumn})`).classList.add("today");
+            row.querySelector(`.col-${today.getDay()}`).classList.add("today");
         </script>
     </body>
 </html>
\ No newline at end of file

Year
1	8	15	22	29	Mon	Tue	Wed	Thu	Fri	Sat	Sun
2	9	16	23	30	Tue	Wed	Thu	Fri	Sat	Sun	Mon
3	10	17	24	31	Wed	Thu	Fri	Sat	Sun	Mon	Tue
4	11	18	25		Thu	Fri	Sat	Sun	Mon	Tue	Wed
5	12	19	26		Fri	Sat	Sun	Mon	Tue	Wed	Thu
6	13	20	27		Sat	Sun	Mon	Tue	Wed	Thu	Fri
7	14	21	28		Sun	Mon	Tue	Wed	Thu	Fri	Sat