lani/resume
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Cleanup

Browse Source
This commit is contained in:
Lani Aung
2024-08-17 15:50:32 -06:00
parent 6a92399f5b
commit e67eea694d
2 changed files with 195 additions and 100 deletions
Download Patch File Download Diff File Expand all files Collapse all files
arbitrary-time-systems.html
+10 -7
View File
@@ -1,7 +1,10 @@
<!doctype html> <!doctype html>
<html> <html>
<head> <head>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">
<title>Arbitrary time systems</title> <title>Arbitrary time systems</title>
<style> <style>
html, body { html, body {
background-color: #000; background-color: #000;
@@ -50,13 +53,6 @@
</div> </div>
<script> <script>
const base62 = []; 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 cap = "A".charCodeAt(0);
const low = "a".charCodeAt(0); const low = "a".charCodeAt(0);
for (let i = 0; i < 26; i++) { for (let i = 0; i < 26; i++) {
@@ -68,6 +64,13 @@
} }
function getTimes() { 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(); const now = new Date();
document.getElementById("actual_time").textContent = now.toString(); document.getElementById("actual_time").textContent = now.toString();
calendar.html
+185 -93
View File
@@ -4,21 +4,26 @@
<meta content="text/html;charset=utf-8" http-equiv="Content-Type"> <meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding"> <meta content="utf-8" http-equiv="encoding">
<title>Some calendar thing</title> <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> <style>
body { html, body {
background-color: var(--bs-dark); background-color: #000;
color: var(--bs-light); color: #999;
font-family: 'Courier New', Courier, monospace; font-family: "Consolas", monospace;
text-align: center; margin: 0;
padding: 0;
width: 100%;
} }
table { table {
border: 1px solid var(--bs-gray); border: 1px solid #888;
border-collapse: collapse;
margin: 2.5rem auto; margin: 2.5rem auto;
overflow: hidden;
}
tbody tr:hover {
background-color: rgba(128, 64, 0, 0.5);
} }
th { th {
@@ -32,6 +37,8 @@
} }
td { td {
padding: 0.25rem;
text-align: center;
width: 40px; width: 40px;
} }
@@ -40,118 +47,203 @@
} }
.d28, .d29, .d30, .d31 { .d28, .d29, .d30, .d31 {
color: var(--bs-dark); color: #666;
} }
.d28 { .d28 {
background-color: #fcc; background-color: #faa;
} }
.d29 { .d29 {
background-color: #ffc; background-color: #ffa;
} }
.d30 { .d30 {
background-color: #cfc; background-color: #afa;
} }
.d31 { .d31 {
background-color: #ccf; background-color: #aaf;
}
.today {
color: #fff;
}
.today.d28, .today.d29, .today.d30, .today.d31 {
color: #000;
} }
</style> </style>
</head> </head>
<body class="container-fluid"> <body>
<main class="row"> <main id="main">
<div id="calendars-original" class="col"></div> <table>
<div id="calendars-compact" class="col"></div> <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> </main>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script> <script>
$(function() { const today = new Date();
var now = new Date(); const now = new Date();
var currentYear = now.getFullYear(); now.setHours(0, 0, 0);
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() { const currentYear = now.getFullYear();
var tbody = buildOriginalTbody(); const months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
for (var year = 0; year < 10; year++) {
var table = $("<table>");
now.setFullYear(currentYear + year);
var thead = $("<thead>"); let template = document.importNode(document.getElementsByTagName("table")[0], true);
var spacer = $("<th>", {"colspan": numCols, "class":"year"}).text(currentYear + year); 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++) { const future = new Date(now);
var cell = $("<th>"); if (month + 1 >= months.length) {
future.setFullYear(currentYear + 1);
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()); future.setMonth((month + 1) % months.length);
table.append(thead); future.setTime(future.getTime() - 60000); // A minute before
$("#calendars-original").append(table);
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() { main.appendChild(table);
var tbody = $("<tbody>"); }
for (var rows = 0; rows < days.length; rows++) { const todayTable = document.getElementsByTagName("table")[0];
var row = $("<tr>"); todayTable.querySelector(".year").classList.add("today");
const row = todayTable.querySelector(`tbody tr:nth-child(${today.getDate() % 7})`);
for (var dayNumCol = 0; dayNumCol < numCols; dayNumCol++) { const dateColumn = Math.ceil(today.getDate() / 7);
var value = rows + days.length * dayNumCol + 1; row.querySelector(`td:nth-child(${dateColumn})`).classList.add("today");
var cell = $("<td>", { "class": `num d${value}` }); row.querySelector(`.col-${today.getDay()}`).classList.add("today");
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> </script>
</body> </body>
</html> </html>