nycki/nycki.net
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

generator and explanation
All checks were successful
/ build (push) Successful in 43s
Details

Browse source
This commit is contained in:
Nycki 2025-11-14 17:37:16 -08:00
parent 05ea905494
commit c3a6b7ef55
1 changed files with 34 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

48
static/papermod/index.html
View file

@ -118,7 +118,10 @@
.week tr { .week tr {
border: thin solid black; border: thin solid black;
} }
.week tr:nth-child(odd) { .week tr:nth-child(odd) td {
text-align: left;
padding-left: 2mm;
font-size: 4mm;
height: 4mm; height: 4mm;
} }
@ -146,21 +149,32 @@
</head> </head>
<body> <body>
<div id="settings"> <div id="settings">
<h1>settings</h1> <h1>PaperMod</h1>
<h2>the analog organizer</h2>
<p>I used to use this thing called PocketMod to lay out my paper organizer every week. It's <a href="https://pocketmod.com/v2/">defunct</a> unless you can get Silverlight running somehow, so I made my own version with HTML and CSS.</p>
<p>Just fill out the form, click "update", and use your browser's "print" function to get an 8 page document. To convert it into a booklet, I recommend using <a href="https://nashhigh.itch.io/zinearranger">The Zine Arranger</a> by Nash High.</p>
<div> <div>
<label for="date">date:</label> <label for="date">date:</label>
<input id="settings-date" type="date" name="date"> <input id="settings-date" type="date" name="date">
</div> </div>
<button id="settings-update">update</button> <div>
<label for="name">name:</label>
<input id="settings-name" type="text" name="name">
</div>
<div>
<label for="contact">contact (email, phone, etc):</label>
<input id="settings-contact" type="text" name="contact">
</div>
<button id="settings-update">generate</button>
</div> </div>
<div id="document"> <div id="document">
<div class="page"> <div class="page">
<div class="year" contenteditable> </div> <div class="year" contenteditable> </div>
<div class="week" contenteditable> </div> <div class="week" contenteditable> </div>
<div class="date" contenteditable>11-09 ... 11-15</div> <div class="date" contenteditable> </div>
<div class="return-addr" contenteditable> <div class="return-addr" contenteditable>
<p>Your Name Here</p> <p id="user-name">papermod</p>
<p>email@example.com</p> <p id="user-contact"></p>
</div> </div>
<div class="footer">nycki.net/papermod</div> <div class="footer">nycki.net/papermod</div>
</div> </div>
@ -188,21 +202,23 @@
</div> </div>
<div class="page week"> <div class="page week">
<table> <table>
<tr><td>monday</td></tr>
<tr><td></td></tr> <tr><td></td></tr>
<tr><td>tuesday</td></tr>
<tr><td></td></tr> <tr><td></td></tr>
<tr><td>wednesday</td></tr>
<tr><td></td></tr> <tr><td></td></tr>
<tr><td></td></tr> <tr><td>thursday</td></tr>
<tr><td></td></tr>
<tr><td></td></tr> <tr><td></td></tr>
</table> </table>
</div> </div>
<div class="page week"> <div class="page week">
<table> <table>
<tr><td>friday</td></tr>
<tr><td></td></tr> <tr><td></td></tr>
<tr><td>saturday</td></tr>
<tr><td></td></tr> <tr><td></td></tr>
<tr><td></td></tr> <tr><td>sunday</td></tr>
<tr><td></td></tr>
<tr><td></td></tr>
<tr><td></td></tr> <tr><td></td></tr>
</table> </table>
</div> </div>
@ -304,16 +320,20 @@
document.querySelector('.week').textContent = "W" + getWeek(date); document.querySelector('.week').textContent = "W" + getWeek(date);
const monday = new Date(date); const monday = new Date(date);
monday.setDate(date.getDate() - date.getDay()); monday.setDate(date.getDate() - date.getDay() + 1);
const mm1 = monday.getMonth() + 1; const mm1 = monday.getMonth() + 1;
const dd1 = monday.getDate(); const dd1 = monday.getDate();
const sunday = new Date(monday); const sunday = new Date(monday);
sunday.setDate(dd1 + 6); sunday.setDate(monday.getDate() + 6);
const mm2 = sunday.getMonth() + 1; const mm2 = sunday.getMonth() + 1;
const dd2 = sunday.getDate(); const dd2 = sunday.getDate();
document.querySelector('.date').textContent = `${mm1}-${dd1} ... ${mm2}-${dd2}` 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;
} }
elButton.onclick = update; elButton.onclick = update;
</script> </script>
</body> </body>