Seth
a6b3f039d8
Pages: /, /simple, /decimal, /seth, /calendar, /astro, /convert, /timegov Features: Seth Calendar (10×36 + holidays), decimal time, moon phases, astronomy (sun/moon), bidirectional time converter, Seth date display, leap day split cell in calendar grid.
291 lines
7.8 KiB
HTML
291 lines
7.8 KiB
HTML
<!doctype html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
<title>SethPC Calendar</title>
|
||
<link rel="icon" type="image/png" href="https://storage.googleapis.com/sethfreiberg.com/sethflix/favicon.png">
|
||
<link rel="stylesheet" href="/style.css">
|
||
<style>
|
||
.cal-wrap {
|
||
width: min(860px, 100%);
|
||
background: var(--panel);
|
||
border: 1px solid var(--border);
|
||
border-radius: 12px;
|
||
padding: clamp(1rem, 2.5vw, 2rem);
|
||
box-shadow: 0 10px 28px rgb(0 0 0 / 42%);
|
||
}
|
||
|
||
/* Nav row */
|
||
.cal-nav {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
margin-bottom: 1.2rem;
|
||
gap: 0.5rem;
|
||
}
|
||
.cal-nav h2 {
|
||
margin: 0;
|
||
font-size: clamp(1rem, 2.5vw, 1.4rem);
|
||
text-align: center;
|
||
flex: 1;
|
||
}
|
||
.cal-nav .sub {
|
||
font-size: 0.78rem;
|
||
color: var(--muted);
|
||
font-weight: 400;
|
||
display: block;
|
||
}
|
||
.nav-btn {
|
||
background: #2a2a2a;
|
||
border: 1px solid var(--border);
|
||
border-radius: 8px;
|
||
color: var(--text);
|
||
padding: 0.4rem 0.8rem;
|
||
cursor: pointer;
|
||
font-size: 1rem;
|
||
line-height: 1;
|
||
transition: border-color 0.15s;
|
||
}
|
||
.nav-btn:hover { border-color: var(--accent); color: var(--accent); }
|
||
|
||
/* Month tabs */
|
||
.month-tabs {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 0.3rem;
|
||
margin-bottom: 1rem;
|
||
}
|
||
.month-tab {
|
||
background: #2a2a2a;
|
||
border: 1px solid var(--border);
|
||
border-radius: 6px;
|
||
color: var(--muted);
|
||
padding: 0.25rem 0.6rem;
|
||
cursor: pointer;
|
||
font-size: 0.82rem;
|
||
transition: all 0.15s;
|
||
}
|
||
.month-tab:hover { border-color: var(--accent); color: var(--accent); }
|
||
.month-tab.active {
|
||
background: var(--accent);
|
||
border-color: var(--accent);
|
||
color: #fff;
|
||
}
|
||
.month-tab.holiday-tab {
|
||
font-style: italic;
|
||
}
|
||
|
||
/* Grid */
|
||
.cal-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(6, 1fr);
|
||
gap: 4px;
|
||
margin-bottom: 1rem;
|
||
}
|
||
.cal-grid.holiday-grid {
|
||
grid-template-columns: repeat(3, 1fr);
|
||
}
|
||
.col-header {
|
||
text-align: center;
|
||
font-size: 0.72rem;
|
||
color: var(--accent);
|
||
font-weight: 600;
|
||
letter-spacing: 0.05em;
|
||
padding: 0.2rem 0;
|
||
text-transform: uppercase;
|
||
}
|
||
.cal-cell {
|
||
background: #2a2a2a;
|
||
border: 1px solid var(--border);
|
||
border-radius: 6px;
|
||
padding: 0.35rem 0.4rem;
|
||
min-height: 56px;
|
||
cursor: default;
|
||
transition: border-color 0.15s;
|
||
position: relative;
|
||
}
|
||
.cal-cell:hover { border-color: #555; }
|
||
.cal-cell.today {
|
||
border-color: var(--accent);
|
||
background: #2e1f15;
|
||
}
|
||
.cal-cell.holiday-cell {
|
||
grid-column: span 1;
|
||
background: #1e1e2e;
|
||
border-color: #444;
|
||
text-align: center;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
min-height: 70px;
|
||
}
|
||
.seth-day {
|
||
font-size: 1.1rem;
|
||
font-weight: 700;
|
||
color: var(--text);
|
||
line-height: 1;
|
||
}
|
||
.greg-date {
|
||
font-size: 0.7rem;
|
||
color: var(--muted);
|
||
margin-top: 0.25rem;
|
||
line-height: 1.2;
|
||
}
|
||
.holiday-name {
|
||
font-size: 0.75rem;
|
||
color: var(--muted);
|
||
margin-top: 0.2rem;
|
||
}
|
||
.moon-link {
|
||
position: absolute;
|
||
top: 3px;
|
||
right: 4px;
|
||
opacity: 0.5;
|
||
text-decoration: none;
|
||
transition: opacity 0.15s;
|
||
display: block;
|
||
line-height: 0;
|
||
}
|
||
.moon-link:hover { opacity: 1; }
|
||
.moon-link canvas { display: block; border-radius: 50%; }
|
||
.cal-cell.seth-weekend {
|
||
border-color: #1a2a4a;
|
||
background: #1c2130;
|
||
}
|
||
.cal-cell.greg-weekend {
|
||
border-color: #1a3a35;
|
||
background: #1c2a28;
|
||
}
|
||
.cal-cell.seth-weekend.greg-weekend {
|
||
border-color: #2a3a4a;
|
||
background: #1c2530;
|
||
}
|
||
.cal-cell.today.seth-weekend,
|
||
.cal-cell.today.greg-weekend {
|
||
border-color: var(--accent);
|
||
background: #2e1f15;
|
||
}
|
||
.cal-cell.has-holiday {
|
||
border-color: #5a4a2a;
|
||
}
|
||
/* The outer wrapper for the split cell: transparent, no own border/bg */
|
||
.cal-cell.has-leap-split {
|
||
padding: 0;
|
||
gap: 4px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
background: transparent;
|
||
border-color: transparent;
|
||
box-shadow: none;
|
||
}
|
||
.cal-cell.has-leap-split:hover {
|
||
border-color: transparent;
|
||
}
|
||
/* Each half is its own independent mini-cell — same color as Seth weekend */
|
||
.leap-top,
|
||
.leap-bottom {
|
||
position: relative;
|
||
padding: 0.25rem 0.4rem;
|
||
flex: 1;
|
||
border: 1px solid #1a2a4a;
|
||
border-radius: 6px;
|
||
background: #1c2130;
|
||
min-height: 0;
|
||
overflow: hidden;
|
||
cursor: default;
|
||
transition: border-color 0.15s;
|
||
}
|
||
.leap-top:hover,
|
||
.leap-bottom:hover {
|
||
border-color: #555;
|
||
}
|
||
/* Today highlights on each half independently */
|
||
.leap-top.leap-top-today {
|
||
border-color: var(--accent);
|
||
background: #2e1f15;
|
||
}
|
||
.leap-bottom.leap-today {
|
||
border-color: var(--accent);
|
||
background: #1a2e40;
|
||
}
|
||
.hol-label {
|
||
font-size: 0.62rem;
|
||
color: #c8a060;
|
||
margin-top: 0.2rem;
|
||
line-height: 1.2;
|
||
white-space: normal;
|
||
overflow-wrap: break-word;
|
||
}
|
||
.hol-label a {
|
||
color: inherit;
|
||
text-decoration: underline;
|
||
text-underline-offset: 2px;
|
||
}
|
||
.hol-label a:hover {
|
||
color: #e0b878;
|
||
}
|
||
|
||
/* Legend */
|
||
.legend {
|
||
display: flex;
|
||
gap: 1rem;
|
||
font-size: 0.78rem;
|
||
color: var(--muted);
|
||
align-items: center;
|
||
flex-wrap: wrap;
|
||
}
|
||
.legend-dot {
|
||
width: 8px; height: 8px;
|
||
background: var(--accent);
|
||
border-radius: 50%;
|
||
display: inline-block;
|
||
margin-right: 4px;
|
||
}
|
||
.legend-box {
|
||
width: 12px; height: 12px;
|
||
background: #1e1e2e;
|
||
border: 1px solid #444;
|
||
border-radius: 3px;
|
||
display: inline-block;
|
||
margin-right: 4px;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<main class="cal-wrap">
|
||
<div class="brand-row">
|
||
<img class="logo-img" src="https://storage.googleapis.com/sethfreiberg.com/sethflix/favicon.png" alt="SethPC logo">
|
||
<span class="brand-text">SethPC Calendar</span>
|
||
</div>
|
||
|
||
<div class="cal-nav">
|
||
<button class="nav-btn" id="prevYear">≪</button>
|
||
<button class="nav-btn" id="prevMonth">‹</button>
|
||
<h2 id="navTitle">-<span class="sub" id="navSub"></span></h2>
|
||
<button class="nav-btn" id="nextMonth">›</button>
|
||
<button class="nav-btn" id="nextYear">≫</button>
|
||
</div>
|
||
|
||
<div class="month-tabs" id="monthTabs"></div>
|
||
<div id="calGrid"></div>
|
||
|
||
<div class="legend">
|
||
<span><span class="legend-dot"></span><a id="todayLink" href="#" style="color:inherit;text-decoration:underline;text-underline-offset:2px;">Today</a></span>
|
||
<span><span class="legend-box"></span>Holiday days</span>
|
||
<span style="display:inline-flex;align-items:center;gap:4px;">
|
||
<span style="width:12px;height:12px;border-radius:3px;background:#1c2130;border:1px solid #1a2a4a;display:inline-block;"></span>Seth weekend (D4–D5)
|
||
</span>
|
||
<span style="display:inline-flex;align-items:center;gap:4px;">
|
||
<span style="width:12px;height:12px;border-radius:3px;background:#1c2a28;border:1px solid #1a3a35;display:inline-block;"></span>Gregorian weekend
|
||
</span>
|
||
<span style="display:inline-flex;align-items:center;gap:4px;">
|
||
<canvas id="legendMoon" width="12" height="12" style="border-radius:50%;vertical-align:middle;"></canvas>Moon phase (click for astronomy)
|
||
</span>
|
||
</div>
|
||
</main>
|
||
<script src="/calendar.js"></script>
|
||
</body>
|
||
</html>
|