diff --git a/html/calendar.ejs b/html/calendar.ejs index 7d4c4486..88dd93d8 100644 --- a/html/calendar.ejs +++ b/html/calendar.ejs @@ -3,8 +3,8 @@ - - + + Poke! Calendar @@ -13,10 +13,6 @@ body { background-color: #121212; color: #ffffff; font-family: Arial, sans-serif; - display: flex; - justify-content: center; - align-items: center; - height: 100vh; margin: 0; } @@ -28,9 +24,29 @@ body { box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); width: 90%; max-width: 800px; + margin: auto; } -h1, h2, h3 { +.navbar { + background-color: #333333; + padding: 10px; + display: flex; + justify-content: space-between; /* Aligns items on both ends */ + align-items: center; /* Centers items vertically */ +} + +.navbar h1 { + margin: 0; + color: #bb86fc; +} + +.navbar .years { + color: #bb86fc; /* Year text color */ + display: flex; /* Use flexbox for alignment */ + gap: 20px; /* Space between year elements */ +} + +h2, h3 { color: #bb86fc; } @@ -72,40 +88,48 @@ h1, h2, h3 { .button:hover { background-color: #9c62f3; } - -
+ +
+

Poke Calendar!! woaww

-

Gregorian Year: <%= year %>

-

Islamic Year: <%= islamicYear %>

-

Persian Year: <%= persianYear %>

-

Week of <%= currentDate.toDateString() %>

- - - - - - - - - - - - - - - - <% days.forEach(day => { %> - - <% }) %> - - -
Sunday!!!!Monday :cTuesdayWednesdayThursdayFridaySaturday
<%= day.getDate() %> - <%= day.toDateString() %>
- -
- Previous Week - Next Week +
+

Gregorian Year: <%= year %>

+

Islamic Year: <%= islamicYear %>

+

Persian Year: <%= persianYear %>

+ + + + + + + + + + + + + + + <% for (let i = 0; i < 6; i++) { %> + + <% for (let j = 0; j < 7; j++) { %> + + <% } %> + + <% } %> + +
SundayMondayTuesdayWednesdayThursdayFridaySaturday
+ <% const day = days[i * 7 + j]; %> + <%= day ? day.getDate() : '' %> +
+ +
+ Previous Month + Next Month +
+