Compare commits
No commits in common. "c3a6b7ef55677a4352a7445994f7717c93abb74c" and "3180b6406e03086afdd90a05840b3bf2f60a4be8" have entirely different histories.
c3a6b7ef55
...
3180b6406e
1 changed files with 46 additions and 234 deletions
|
|
@ -9,26 +9,10 @@
|
||||||
}
|
}
|
||||||
body {
|
body {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
/* break after fourth page on large monitors */
|
|
||||||
max-width: calc((74mm + 8mm) * 4);
|
|
||||||
}
|
|
||||||
|
|
||||||
#settings {
|
|
||||||
width: calc(100% - 12mm);
|
|
||||||
margin: 4mm;
|
|
||||||
padding: 4mm;
|
|
||||||
background-color: white;
|
|
||||||
}
|
|
||||||
#settings * {
|
|
||||||
margin: 2mm 0;
|
|
||||||
}
|
|
||||||
#settings :first-child {
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
#document {
|
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
|
/* break after fourth page on large monitors */
|
||||||
|
max-width: calc((74mm + 8mm) * 4);
|
||||||
}
|
}
|
||||||
.page {
|
.page {
|
||||||
background-color: white;
|
background-color: white;
|
||||||
|
|
@ -49,13 +33,9 @@
|
||||||
html {
|
html {
|
||||||
background-color: white;
|
background-color: white;
|
||||||
}
|
}
|
||||||
#settings {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
.page {
|
.page {
|
||||||
max-height: 100%;
|
height: 100%;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
break-inside: avoid;
|
|
||||||
break-after: page;
|
break-after: page;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -104,26 +84,11 @@
|
||||||
.month thead {
|
.month thead {
|
||||||
height: 0.01%;
|
height: 0.01%;
|
||||||
}
|
}
|
||||||
.month td {
|
.month td:not(:last-child) {
|
||||||
border: thin solid black;
|
border: thin solid black;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* page 4-5 */
|
/* page 4-5 */
|
||||||
.week table {
|
|
||||||
height: 100%;
|
|
||||||
width: 100%;
|
|
||||||
border: thin dashed black;
|
|
||||||
border-collapse: collapse;
|
|
||||||
}
|
|
||||||
.week tr {
|
|
||||||
border: thin solid black;
|
|
||||||
}
|
|
||||||
.week tr:nth-child(odd) td {
|
|
||||||
text-align: left;
|
|
||||||
padding-left: 2mm;
|
|
||||||
font-size: 4mm;
|
|
||||||
height: 4mm;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* page 6-7 */
|
/* page 6-7 */
|
||||||
.page:has(img) {
|
.page:has(img) {
|
||||||
|
|
@ -131,210 +96,57 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
/* page 8 */
|
/* page 8 */
|
||||||
.sudoku table:has(table) {
|
|
||||||
width: fit-content;
|
|
||||||
margin: auto;
|
|
||||||
padding-top: 12mm;
|
|
||||||
border-collapse: separate;
|
|
||||||
}
|
|
||||||
.sudoku table table {
|
|
||||||
border-collapse: collapse;
|
|
||||||
}
|
|
||||||
.sudoku table table td {
|
|
||||||
width: 5mm;
|
|
||||||
height: 5mm;
|
|
||||||
border: thin solid black;
|
|
||||||
}
|
|
||||||
</style>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div id="settings">
|
<div class="page">
|
||||||
<h1>PaperMod</h1>
|
<div class="year" contenteditable>2025</div>
|
||||||
<h2>the analog organizer</h2>
|
<div class="week" contenteditable>W46</div>
|
||||||
<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>
|
<div class="date" contenteditable>11-09 ... 11-15</div>
|
||||||
<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 class="return-addr" contenteditable>
|
||||||
<div>
|
<p>Your Name Here</p>
|
||||||
<label for="date">date:</label>
|
<p>email@example.com</p>
|
||||||
<input id="settings-date" type="date" name="date">
|
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div class="footer">nycki.net/papermod</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 class="page month">
|
||||||
<div class="page">
|
<div class="landscape">
|
||||||
<div class="year" contenteditable> </div>
|
<table contenteditable>
|
||||||
<div class="week" contenteditable> </div>
|
<thead><td>mon</td><td>tue</td><td>wed</td><td>thu</td><td>fri</td><td>sat</td><td>sun</td><td></td></thead>
|
||||||
<div class="date" contenteditable> </div>
|
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
|
||||||
<div class="return-addr" contenteditable>
|
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
|
||||||
<p id="user-name">papermod</p>
|
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
|
||||||
<p id="user-contact"></p>
|
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
|
||||||
</div>
|
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
|
||||||
<div class="footer">nycki.net/papermod</div>
|
</table>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
<div class="page month">
|
<div class="page month">
|
||||||
<div class="landscape">
|
<div class="landscape">
|
||||||
<table contenteditable>
|
<table contenteditable>
|
||||||
<thead><td>mon</td><td>tue</td><td>wed</td><td>thu</td><td>fri</td><td>sat</td><td>sun</td></thead>
|
<thead><td>mon</td><td>tue</td><td>wed</td><td>thu</td><td>fri</td><td>sat</td><td>sun</td><td></td></thead>
|
||||||
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
|
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
|
||||||
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
|
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
|
||||||
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
|
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
|
||||||
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
|
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
|
||||||
</table>
|
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="page month">
|
|
||||||
<div class="landscape">
|
|
||||||
<table contenteditable>
|
|
||||||
<thead><td>mon</td><td>tue</td><td>wed</td><td>thu</td><td>fri</td><td>sat</td><td>sun</td></thead>
|
|
||||||
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
|
|
||||||
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
|
|
||||||
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
|
|
||||||
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
|
|
||||||
</table>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="page week">
|
|
||||||
<table>
|
|
||||||
<tr><td>monday</td></tr>
|
|
||||||
<tr><td></td></tr>
|
|
||||||
<tr><td>tuesday</td></tr>
|
|
||||||
<tr><td></td></tr>
|
|
||||||
<tr><td>wednesday</td></tr>
|
|
||||||
<tr><td></td></tr>
|
|
||||||
<tr><td>thursday</td></tr>
|
|
||||||
<tr><td></td></tr>
|
|
||||||
</table>
|
</table>
|
||||||
</div>
|
</div>
|
||||||
<div class="page week">
|
|
||||||
<table>
|
|
||||||
<tr><td>friday</td></tr>
|
|
||||||
<tr><td></td></tr>
|
|
||||||
<tr><td>saturday</td></tr>
|
|
||||||
<tr><td></td></tr>
|
|
||||||
<tr><td>sunday</td></tr>
|
|
||||||
<tr><td></td></tr>
|
|
||||||
</table>
|
|
||||||
</div>
|
|
||||||
<div class="page">
|
|
||||||
<img src="dots.svg">
|
|
||||||
</div>
|
|
||||||
<div class="page">
|
|
||||||
<img src="dots.svg">
|
|
||||||
</div>
|
|
||||||
<div class="page">
|
|
||||||
<div class="sudoku">
|
|
||||||
<table>
|
|
||||||
<tr>
|
|
||||||
<td>
|
|
||||||
<table>
|
|
||||||
<tr><td></td><td></td><td></td></tr>
|
|
||||||
<tr><td></td><td></td><td></td></tr>
|
|
||||||
<tr><td></td><td></td><td></td></tr>
|
|
||||||
</table>
|
|
||||||
</td>
|
|
||||||
<td>
|
|
||||||
<table>
|
|
||||||
<tr><td></td><td></td><td></td></tr>
|
|
||||||
<tr><td></td><td></td><td></td></tr>
|
|
||||||
<tr><td></td><td></td><td></td></tr>
|
|
||||||
</table>
|
|
||||||
</td>
|
|
||||||
<td>
|
|
||||||
<table>
|
|
||||||
<tr><td></td><td></td><td></td></tr>
|
|
||||||
<tr><td></td><td></td><td></td></tr>
|
|
||||||
<tr><td></td><td></td><td></td></tr>
|
|
||||||
</table>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>
|
|
||||||
<table>
|
|
||||||
<tr><td></td><td></td><td></td></tr>
|
|
||||||
<tr><td></td><td></td><td></td></tr>
|
|
||||||
<tr><td></td><td></td><td></td></tr>
|
|
||||||
</table>
|
|
||||||
</td>
|
|
||||||
<td>
|
|
||||||
<table>
|
|
||||||
<tr><td></td><td></td><td></td></tr>
|
|
||||||
<tr><td></td><td></td><td></td></tr>
|
|
||||||
<tr><td></td><td></td><td></td></tr>
|
|
||||||
</table>
|
|
||||||
</td>
|
|
||||||
<td>
|
|
||||||
<table>
|
|
||||||
<tr><td></td><td></td><td></td></tr>
|
|
||||||
<tr><td></td><td></td><td></td></tr>
|
|
||||||
<tr><td></td><td></td><td></td></tr>
|
|
||||||
</table>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>
|
|
||||||
<table>
|
|
||||||
<tr><td></td><td></td><td></td></tr>
|
|
||||||
<tr><td></td><td></td><td></td></tr>
|
|
||||||
<tr><td></td><td></td><td></td></tr>
|
|
||||||
</table>
|
|
||||||
</td>
|
|
||||||
<td>
|
|
||||||
<table>
|
|
||||||
<tr><td></td><td></td><td></td></tr>
|
|
||||||
<tr><td></td><td></td><td></td></tr>
|
|
||||||
<tr><td></td><td></td><td></td></tr>
|
|
||||||
</table>
|
|
||||||
</td>
|
|
||||||
<td>
|
|
||||||
<table>
|
|
||||||
<tr><td></td><td></td><td></td></tr>
|
|
||||||
<tr><td></td><td></td><td></td></tr>
|
|
||||||
<tr><td></td><td></td><td></td></tr>
|
|
||||||
</table>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
</table>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
<script>
|
<div class="page">
|
||||||
const elDate = document.querySelector('#settings-date');
|
<h1>page 4</h1>
|
||||||
const elButton = document.querySelector('#settings-update');
|
</div>
|
||||||
|
<div class="page">
|
||||||
function getWeek(date) {
|
<h1>page 5</h1>
|
||||||
const januaryFirst = new Date(date.getFullYear(), 0, 1);
|
</div>
|
||||||
return Math.ceil((((date - januaryFirst) / 86_400_000) + januaryFirst.getDay()+1) / 7);
|
<div class="page">
|
||||||
}
|
<img src="dots.svg">
|
||||||
|
</div>
|
||||||
function update() {
|
<div class="page">
|
||||||
const date = new Date(elDate.value);
|
<img src="dots.svg">
|
||||||
date.setHours(12); // I don't care about the time zone
|
</div>
|
||||||
document.querySelector('.year').textContent = date.getFullYear();
|
<div class="page">
|
||||||
document.querySelector('.week').textContent = "W" + getWeek(date);
|
<h1>page 8</h1>
|
||||||
|
</div>
|
||||||
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;
|
|
||||||
}
|
|
||||||
|
|
||||||
elButton.onclick = update;
|
|
||||||
</script>
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
Loading…
Add table
Reference in a new issue