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

Colors

Browse Source
This commit is contained in:
Lani Aung
2024-08-17 16:18:50 -06:00
parent e67eea694d
commit 3e9d3b0dc3
1 changed files with 98 additions and 95 deletions
Download Patch File Download Diff File Expand all files Collapse all files
calendar.html
+98 -95
View File
@@ -8,7 +8,7 @@
<style> <style>
html, body { html, body {
background-color: #000; background-color: #000;
color: #999; color: #ccc;
font-family: "Consolas", monospace; font-family: "Consolas", monospace;
margin: 0; margin: 0;
padding: 0; padding: 0;
@@ -42,12 +42,17 @@
width: 40px; width: 40px;
} }
td.num { td.today span {
font-weight: bold; border: 2px solid #fff;
border-radius: 1rem;
padding: 0.25rem;
} }
.d28, .d29, .d30, .d31 { .d28,
color: #666; .d29,
.d30,
.d31 {
color: #000;
} }
.d28 { .d28 {
@@ -55,24 +60,20 @@
} }
.d29 { .d29 {
background-color: #ffa; background-color: #fe8;
} }
.d30 { .d30 {
background-color: #afa; background-color: #8c8;
} }
.d31 { .d31 {
background-color: #aaf; background-color: #88f;
} }
.today { .today {
color: #fff; color: #fff;
} }
.today.d28, .today.d29, .today.d30, .today.d31 {
color: #000;
}
</style> </style>
</head> </head>
<body> <body>
@@ -80,7 +81,7 @@
<table> <table>
<thead> <thead>
<tr> <tr>
<th class="year" colspan="5">Year</th> <th class="year" colspan="5"><span>Year</span></th>
<th class="col-1"></th> <th class="col-1"></th>
<th class="col-2"></th> <th class="col-2"></th>
<th class="col-3"></th> <th class="col-3"></th>
@@ -92,102 +93,102 @@
</thead> </thead>
<tbody> <tbody>
<tr> <tr>
<td>1</td> <td><span>1</span></td>
<td>8</td> <td><span>8</span></td>
<td>15</td> <td><span>15</span></td>
<td>22</td> <td><span>22</span></td>
<td class="d29">29</td> <td class="d29"><span>29</span></td>
<td class="col-1">Mon</td> <td class="col-1"><span>Mon</span></td>
<td class="col-2">Tue</td> <td class="col-2"><span>Tue</span></td>
<td class="col-3">Wed</td> <td class="col-3"><span>Wed</span></td>
<td class="col-4">Thu</td> <td class="col-4"><span>Thu</span></td>
<td class="col-5">Fri</td> <td class="col-5"><span>Fri</span></td>
<td class="col-6">Sat</td> <td class="col-6"><span>Sat</span></td>
<td class="col-0">Sun</td> <td class="col-0"><span>Sun</span></td>
</tr> </tr>
<tr> <tr>
<td>2</td> <td><span>2</span></td>
<td>9</td> <td><span>9</span></td>
<td>16</td> <td><span>16</span></td>
<td>23</td> <td><span>23</span></td>
<td class="d30">30</td> <td class="d30"><span>30</span></td>
<td class="col-2">Tue</td> <td class="col-2"><span>Tue</span></td>
<td class="col-3">Wed</td> <td class="col-3"><span>Wed</span></td>
<td class="col-4">Thu</td> <td class="col-4"><span>Thu</span></td>
<td class="col-5">Fri</td> <td class="col-5"><span>Fri</span></td>
<td class="col-6">Sat</td> <td class="col-6"><span>Sat</span></td>
<td class="col-0">Sun</td> <td class="col-0"><span>Sun</span></td>
<td class="col-1">Mon</td> <td class="col-1"><span>Mon</span></td>
</tr> </tr>
<tr> <tr>
<td>3</td> <td><span>3</span></td>
<td>10</td> <td><span>10</span></td>
<td>17</td> <td><span>17</span></td>
<td>24</td> <td><span>24</span></td>
<td class="d31">31</td> <td class="d31"><span>31</span></td>
<td class="col-3">Wed</td> <td class="col-3"><span>Wed</span></td>
<td class="col-4">Thu</td> <td class="col-4"><span>Thu</span></td>
<td class="col-5">Fri</td> <td class="col-5"><span>Fri</span></td>
<td class="col-6">Sat</td> <td class="col-6"><span>Sat</span></td>
<td class="col-0">Sun</td> <td class="col-0"><span>Sun</span></td>
<td class="col-1">Mon</td> <td class="col-1"><span>Mon</span></td>
<td class="col-2">Tue</td> <td class="col-2"><span>Tue</span></td>
</tr> </tr>
<tr> <tr>
<td>4</td> <td><span>4</span></td>
<td>11</td> <td><span>11</span></td>
<td>18</td> <td><span>18</span></td>
<td>25</td> <td><span>25</span></td>
<td></td> <td></td>
<td class="col-4">Thu</td> <td class="col-4"><span>Thu</span></td>
<td class="col-5">Fri</td> <td class="col-5"><span>Fri</span></td>
<td class="col-6">Sat</td> <td class="col-6"><span>Sat</span></td>
<td class="col-0">Sun</td> <td class="col-0"><span>Sun</span></td>
<td class="col-1">Mon</td> <td class="col-1"><span>Mon</span></td>
<td class="col-2">Tue</td> <td class="col-2"><span>Tue</span></td>
<td class="col-3">Wed</td> <td class="col-3"><span>Wed</span></td>
</tr> </tr>
<tr> <tr>
<td>5</td> <td><span>5</span></td>
<td>12</td> <td><span>12</span></td>
<td>19</td> <td><span>19</span></td>
<td>26</td> <td><span>26</span></td>
<td></td> <td></td>
<td class="col-5">Fri</td> <td class="col-5"><span>Fri</span></td>
<td class="col-6">Sat</td> <td class="col-6"><span>Sat</span></td>
<td class="col-0">Sun</td> <td class="col-0"><span>Sun</span></td>
<td class="col-1">Mon</td> <td class="col-1"><span>Mon</span></td>
<td class="col-2">Tue</td> <td class="col-2"><span>Tue</span></td>
<td class="col-3">Wed</td> <td class="col-3"><span>Wed</span></td>
<td class="col-4">Thu</td> <td class="col-4"><span>Thu</span></td>
</tr> </tr>
<tr> <tr>
<td>6</td> <td><span>6</span></td>
<td>13</td> <td><span>13</span></td>
<td>20</td> <td><span>20</span></td>
<td>27</td> <td><span>27</span></td>
<td></td> <td></td>
<td class="col-6">Sat</td> <td class="col-6"><span>Sat</span></td>
<td class="col-0">Sun</td> <td class="col-0"><span>Sun</span></td>
<td class="col-1">Mon</td> <td class="col-1"><span>Mon</span></td>
<td class="col-2">Tue</td> <td class="col-2"><span>Tue</span></td>
<td class="col-3">Wed</td> <td class="col-3"><span>Wed</span></td>
<td class="col-4">Thu</td> <td class="col-4"><span>Thu</span></td>
<td class="col-5">Fri</td> <td class="col-5"><span>Fri</span></td>
</tr> </tr>
<tr> <tr>
<td>7</td> <td><span>7</span></td>
<td>14</td> <td><span>14</span></td>
<td>21</td> <td><span>21</span></td>
<td class="d28">28</td> <td class="d28"><span>28</span></td>
<td></td> <td></td>
<td class="col-0">Sun</td> <td class="col-0"><span>Sun</span></td>
<td class="col-1">Mon</td> <td class="col-1"><span>Mon</span></td>
<td class="col-2">Tue</td> <td class="col-2"><span>Tue</span></td>
<td class="col-3">Wed</td> <td class="col-3"><span>Wed</span></td>
<td class="col-4">Thu</td> <td class="col-4"><span>Thu</span></td>
<td class="col-5">Fri</td> <td class="col-5"><span>Fri</span></td>
<td class="col-6">Sat</td> <td class="col-6"><span>Sat</span></td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
@@ -208,7 +209,7 @@
for (let year = 0; year < 5; year++) { for (let year = 0; year < 5; year++) {
const table = document.importNode(template, true); // Clone const table = document.importNode(template, true); // Clone
now.setFullYear(currentYear + year); now.setFullYear(currentYear + year);
table.querySelector(".year").textContent = now.getFullYear(); table.querySelector(".year span").textContent = now.getFullYear();
for (let day = 0; day < 7; day++) { for (let day = 0; day < 7; day++) {
for (let month = 0; month < 12; month++) { for (let month = 0; month < 12; month++) {
@@ -225,7 +226,9 @@
if (now.getDay() == day) { if (now.getDay() == day) {
const div = document.createElement("div"); const div = document.createElement("div");
div.textContent = months[month]; const span = document.createElement("span");
span.textContent = months[month];
div.appendChild(span);
table.querySelector(`thead .col-${day}`).appendChild(div); table.querySelector(`thead .col-${day}`).appendChild(div);
div.classList.add(`d${future.getDate()}`); div.classList.add(`d${future.getDate()}`);
div.setAttribute("title", `${future.getDate()} days`); div.setAttribute("title", `${future.getDate()} days`);