diff --git a/static/papermod/index.html b/static/papermod/index.html
index 2389c65..761e6e3 100644
--- a/static/papermod/index.html
+++ b/static/papermod/index.html
@@ -64,16 +64,12 @@
}
/* page 1 */
- .year {
- font-weight: bold;
- font-size: 20mm;
- }
.week {
font-weight: bold;
- font-size: 20mm;
+ font-size: 14mm;
}
.date {
- font-size: 10mm;
+ font-size: 8mm;
}
.return-addr {
font-weight: bold;
@@ -107,6 +103,11 @@
.month td {
border: thin solid black;
}
+ .month tbody td {
+ font-size: small;
+ text-align: left;
+ vertical-align: top;
+ }
/* page 4-5 */
.week table {
@@ -154,7 +155,7 @@
I used to use this thing called PocketMod to lay out my paper organizer every week. It's defunct unless you can get Silverlight running somehow, so I made my own version with HTML and CSS.
Just fill out the form, click "generate", and use your browser's "print" function to get an 8 page document. To convert it into a booklet, I recommend using The Zine Arranger by Nash High.
or Pocketverter by Laur401 .
- date:
+ start date:
@@ -169,12 +170,11 @@
@@ -308,30 +308,51 @@
const elDate = document.querySelector('#settings-date');
const elButton = document.querySelector('#settings-update');
+ const weekday = [
+ 'sunday', 'monday', 'tuesday', 'wednesday', 'thursday', 'friday', 'saturday',
+ ];
+
function getWeek(date) {
const januaryFirst = new Date(date.getFullYear(), 0, 1);
return Math.ceil((((date - januaryFirst) / 86_400_000) + januaryFirst.getDay()+1) / 7);
}
function update() {
- const date = new Date(elDate.value);
- date.setHours(12); // I don't care about the time zone
- document.querySelector('.year').textContent = date.getFullYear();
- document.querySelector('.week').textContent = "W" + getWeek(date);
-
- const monday = new Date(date);
- monday.setDate(date.getDate() - date.getDay() + 1);
- const mm1 = monday.getMonth() + 1;
- const dd1 = monday.getDate();
- const sunday = new Date(monday);
- sunday.setDate(monday.getDate() + 6);
- const mm2 = sunday.getMonth() + 1;
- const dd2 = sunday.getDate();
- document.querySelector('.date').textContent = `${mm1}-${dd1} ... ${mm2}-${dd2}`
-
document.querySelector('#user-name').textContent = document.querySelector('#settings-name').value;
-
document.querySelector('#user-contact').textContent = document.querySelector('#settings-contact').value;
+
+ let startDate = new Date(elDate.value);
+ if (isNaN(startDate)) startDate = new Date();
+ let d;
+
+ startDate.setHours(12); // I don't care about the time zone
+ document.querySelector('.week').textContent = startDate.getFullYear() + "W" + getWeek(startDate);
+
+ const mm1 = startDate.getMonth() + 1;
+ const dd1 = startDate.getDate();
+ d = new Date(startDate);
+ d.setDate(d.getDate() + 6);
+ const mm2 = d.getMonth() + 1;
+ const dd2 = d.getDate();
+ document.querySelector('.date').textContent = `${mm1}-${dd1} ⋯ ${mm2}-${dd2}`
+
+ /* set up month */
+ const startDay = startDate.getDay();
+ for (const [i, el] of document.querySelectorAll('.month thead td').entries()) {
+ el.textContent = weekday[(startDay + i) % 7].slice(0,3);
+ }
+ d = new Date(startDate);
+ for (const el of document.querySelectorAll('.month tbody td')) {
+ el.textContent = d.getDate();
+ d.setDate(d.getDate() + 1);
+ }
+
+ /* set up week */
+ d = new Date(startDate);
+ for (const [i, el] of document.querySelectorAll('.week tr:nth-child(odd) td').entries()) {
+ el.textContent = `${d.getMonth()+1}-${d.getDate()} ${weekday[d.getDay()]}`
+ d.setDate(d.getDate() + 1);
+ }
}
elButton.onclick = update;