mirror of
https://codeberg.org/ashley/poke
synced 2025-05-30 02:59:43 +00:00
181 lines
6.1 KiB
Plaintext
181 lines
6.1 KiB
Plaintext
<!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 rel="icon" href="css/yt-ukraine.svg" type="image/svg+xml">
|
|
<meta name="theme-color" content="#101010">
|
|
<meta name="description" content="Poke! Calendar — Sleek, zero-JS dark calendar">
|
|
<meta property="og:title" content="Poke! Calendar">
|
|
<meta property="og:description" content="Navigate months seamlessly with a minimalist dark glass UI—no JavaScript needed.">
|
|
<meta property="og:image" content="https://cdn.glitch.global/d68d17bb-f2c0-4bc3-993f-50902734f652/aa70111e-5bcd-4379-8b23-332a33012b78.image.png?v=1701898829884">
|
|
<meta property="og:type" content="website">
|
|
<meta property="og:url" content="https://yourdomain.com/calendar">
|
|
<meta name="twitter:card" content="summary_large_image">
|
|
<meta name="twitter:site" content="@PokeCalendar">
|
|
<meta name="twitter:creator" content="@YourHandle">
|
|
<meta name="twitter:title" content="Poke! Calendar">
|
|
<meta name="twitter:image" content="https://cdn.glitch.global/d68d17bb-f2c0-4bc3-993f-50902734f652/aa70111e-5bcd-4379-8b23-332a33012b78.image.png?v=1701898829884">
|
|
|
|
<title>Poke! Calendar</title>
|
|
|
|
<style>
|
|
:root {
|
|
--bg: #101010;
|
|
--panel: #1a1a1a;
|
|
--border: #2a2a2a;
|
|
--accent: #bb86fc;
|
|
--accent-light: #ce9eff;
|
|
--text: #e0e0e0;
|
|
--today: #3700b3;
|
|
--weekend: #121212;
|
|
}
|
|
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
|
body {
|
|
background: var(--bg) url('/css/background.jpg') center/cover fixed no-repeat;
|
|
color: var(--text);
|
|
font-family: 'Inter', sans-serif;
|
|
min-height: 100vh;
|
|
line-height: 1.5;
|
|
}
|
|
body::before {
|
|
content: '';
|
|
position: fixed; inset: 0;
|
|
background: inherit;
|
|
filter: blur(16px) brightness(0.4);
|
|
z-index: -1;
|
|
}
|
|
.navbar {
|
|
position: sticky; top: 0;
|
|
display: flex; align-items: center; justify-content: space-between;
|
|
padding: 1rem 2rem;
|
|
background: rgba(26,26,26,0.8);
|
|
border-bottom: 1px solid var(--border);
|
|
}
|
|
.navbar img { width: 8em; }
|
|
.years { display: flex; gap: 1.5rem; flex-wrap: wrap; }
|
|
.years h2 { font-size: 0.95rem; color: var(--accent); }
|
|
.container {
|
|
width: 90%; max-width: 900px;
|
|
margin: 2rem auto;
|
|
padding: 2rem;
|
|
background: var(--panel);
|
|
border: 1px solid var(--border);
|
|
border-radius: 12px;
|
|
}
|
|
.header-row {
|
|
display: flex; flex-wrap: wrap;
|
|
align-items: center; justify-content: space-between;
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
.month-title { font-size: 2rem; color: var(--accent); }
|
|
.month-picker {
|
|
padding: 0.4rem 0.8rem;
|
|
font-size: 1rem;
|
|
color: var(--text);
|
|
background: var(--panel);
|
|
border: 1px solid var(--border);
|
|
border-radius: 8px;
|
|
}
|
|
.month-button {
|
|
margin-left: 0.5rem;
|
|
padding: 0.5rem 1rem;
|
|
background: var(--accent);
|
|
color: #fff;
|
|
border: none;
|
|
border-radius: 8px;
|
|
cursor: pointer;
|
|
}
|
|
.calendar-table {
|
|
width: 100%; border-collapse: collapse; table-layout: fixed;
|
|
}
|
|
.calendar-table th, .calendar-table td {
|
|
padding: 1rem; border: 1px solid var(--border);
|
|
text-align: center;
|
|
}
|
|
.calendar-table th {
|
|
background: var(--panel);
|
|
color: var(--accent-light);
|
|
font-weight: 500;
|
|
}
|
|
.calendar-table td {
|
|
background: var(--panel);
|
|
color: var(--text);
|
|
}
|
|
.calendar-table td:nth-child(1),
|
|
.calendar-table td:nth-child(7) {
|
|
background: var(--weekend);
|
|
}
|
|
.calendar-table td.today {
|
|
background: var(--today) !important;
|
|
color: #fff;
|
|
border-color: var(--accent);
|
|
}
|
|
.nav-links {
|
|
display: flex; justify-content: center; gap: 1rem;
|
|
margin-top: 2rem;
|
|
}
|
|
.button {
|
|
padding: 0.75rem 1.5rem;
|
|
background: var(--accent);
|
|
color: #fff;
|
|
text-decoration: none;
|
|
border-radius: 8px;
|
|
border: 1px solid var(--accent-light);
|
|
cursor: pointer;
|
|
font-weight: 500;
|
|
}
|
|
@media (max-width: 768px) {
|
|
.container { padding: 1rem; }
|
|
.month-title { font-size: 1.5rem; }
|
|
.calendar-table th, .calendar-table td { padding: 0.75rem; font-size: 0.85rem; }
|
|
.nav-links { flex-direction: column; }
|
|
.button { width: 100%; }
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="navbar">
|
|
<a href="/143"><img src="/css/logo-poke.svg?v=5" alt="Poke Calendar Logo"></a>
|
|
<div class="years">
|
|
<h2>Gregorian Year: <%= year %></h2>
|
|
<h2>Islamic Year: <%= islamicYear %></h2>
|
|
<h2>Persian Year: <%= persianYear %></h2>
|
|
</div>
|
|
</div>
|
|
<div class="container">
|
|
<div class="header-row">
|
|
<h2 class="month-title"><%= queryDate.toLocaleString('default', { month: 'long' }) %> <%= year %></h2>
|
|
<form action="/calendar" method="get" style="display:flex; align-items:center;">
|
|
<input type="month" name="date" value="<%= currentDate.toISOString().slice(0,7) %>" class="month-picker">
|
|
<button type="submit" class="month-button">Go</button>
|
|
</form>
|
|
</div>
|
|
<table class="calendar-table">
|
|
<thead>
|
|
<tr>
|
|
<th>Sun</th><th>Mon</th><th>Tue</th><th>Wed</th><th>Thu</th><th>Fri</th><th>Sat</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<% days.forEach((day, idx) => { %>
|
|
<% if (idx % 7 === 0) { %><tr><% } %>
|
|
<% const today = new Date(); %>
|
|
<% const isToday = day &&
|
|
day.getDate() === today.getDate() &&
|
|
day.getMonth() === today.getMonth() &&
|
|
day.getFullYear() === today.getFullYear(); %>
|
|
<td class="<%= isToday ? 'today' : '' %>"><%= day ? day.getDate() : '' %></td>
|
|
<% if (idx % 7 === 6) { %></tr><% } %>
|
|
<% }); %>
|
|
</tbody>
|
|
</table>
|
|
<div class="nav-links">
|
|
<a href="/calendar?date=<%= new Date(year, month - 1, 1).toISOString() %>" class="button">← Prev</a>
|
|
<a href="/calendar?date=<%= new Date(year, month + 1, 1).toISOString() %>" class="button">Next →</a>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>
|