<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="manifest" href="/manifest.json"> <link href="css/yt-ukraine.svg" rel="icon"> <title>Poke! Calendar</title> <meta content="PokeCalendar" property="og:title"> <meta content="Worlds first no js web calendar :3" property="twitter:description"> <meta content="https://cdn.glitch.global/d68d17bb-f2c0-4bc3-993f-50902734f652/aa70111e-5bcd-4379-8b23-332a33012b78.image.png?v=1701898829884" property="og:image" /> <meta content=summary_large_image name=twitter:card> <meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline'"> <meta name="referrer" content="no-referrer"> <style> body { background-color: #121212; color: #ffffff; font-family: Arial, sans-serif; margin: 0; } .navbar { background-color: #333333; padding: 10px; display: flex; align-items: center; /* Center items vertically */ justify-content: space-between; /* Space items evenly */ } .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 */ flex-wrap: wrap; /* Allow wrapping on smaller screens */ justify-content: center; /* Center items on smaller screens */ } .container { text-align: center; padding: 20px; background-color: #1e1e1e; border-radius: 10px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); width: 90%; max-width: 800px; margin: auto; } h2, h3 { color: #bb86fc; margin: 10px 0; /* Margin between h2 elements */ } .month-title { font-size: 1.5em; /* Adjust the size as needed */ margin: 20px 0; /* Spacing above and below */ color: #bb86fc; /* Month title color */ } .calendar-table { width: 100%; border-collapse: collapse; margin-top: 20px; } .calendar-table th, .calendar-table td { padding: 15px; text-align: center; border: 1px solid #333333; font-size: 0.9em; /* Smaller font size for better fit */ } .calendar-table th { background-color: #333333; } .calendar-table td { background-color: #2c2c2c; color: #ffffff; } .nav-links { margin-top: 20px; } .button { text-decoration: none; color: #ffffff; background-color: #bb86fc; padding: 10px 20px; border-radius: 5px; margin: 0 10px; transition: background-color 0.3s; } .button:hover { background-color: #9c62f3; } /* Responsive styles */ @media (max-width: 768px) { .navbar { flex-direction: column; /* Stack navbar items vertically on small screens */ align-items: center; /* Center items horizontally */ } .container { width: 100%; /* Full width on small screens */ height: 100vh; /* Full height of the viewport */ border-radius: 0; /* Remove border-radius for full-screen effect */ box-shadow: none; /* Remove shadow for a flatter design */ padding: 10px; /* Adjust padding for mobile */ } .calendar-table th, .calendar-table td { padding: 10px; /* Reduced padding for smaller screens */ font-size: 0.8em; /* Smaller font size */ } .month-title { font-size: 1.2em; /* Smaller month title */ } .button { padding: 8px 15px; /* Smaller button size */ margin: 5px 0; /* Vertical spacing */ display: block; /* Stack buttons vertically */ width: 100%; /* Full width */ } } </style> </head> <body> <div class="navbar"> <a class="class" href="/143" style="font-family: Inter, sans-serif; color: #fff"> <img style="transform: scale(1.3); padding-left: 0.9em; width: 8.5em; display: block; margin-left: auto; margin-right: auto;" src="/css/logo-poke.svg?v=5"> </a> <div class="years"> <h2>Gregorian Year: <%= year %></h2> <h2>Islamic Year: <%= islamicYear %></h2> <h2>Persian Year: <%= persianYear %></h2> </div> </div> <div class="container" style="margin-top: 1em;"> <h2 class="month-title"><%= queryDate.toLocaleString('default', { month: 'long' }) %> <%= year %></h2> <!-- Month and Year Display --> <table class="calendar-table"> <thead> <tr> <th>Sunday</th> <th>Monday</th> <th>Tuesday</th> <th>Wednesday</th> <th>Thursday</th> <th>Friday</th> <th>Saturday</th> </tr> </thead> <tbody> <% for (let i = 0; i < 6; i++) { %> <tr> <% for (let j = 0; j < 7; j++) { %> <td> <% const day = days[i * 7 + j]; %> <%= day ? day.getDate() : '' %> </td> <% } %> </tr> <% } %> </tbody> </table> <div class="nav-links"> <a href="/calendar?date=<%= new Date(currentDate.getFullYear(), month - 1, 1).toISOString() %>" class="button">Previous Month</a> <a href="/calendar?date=<%= new Date(currentDate.getFullYear(), month + 1, 1).toISOString() %>" class="button">Next Month</a> </div> </div> </body> </html>