Initial commit — Seth Calendar & Decimal Time clock site
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.
This commit is contained in:
+290
@@ -0,0 +1,290 @@
|
||||
<!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>
|
||||
Reference in New Issue
Block a user