--- /dev/null
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>Time Zone Conversion Chart</title>
+<link href="https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Playfair+Display:wght@700&display=swap" rel="stylesheet">
+<style>
+ :root {
+ --bg: #0e0f13;
+ --surface: #16181f;
+ --border: #2a2d38;
+ --accent: #f0b429;
+ --accent2: #5eead4;
+ --accent3: #c084fc;
+ --text: #e8eaf0;
+ --muted: #6b7280;
+ --row-even: #1c1e27;
+ --row-hover: #22253080;
+ --header-bg: #1e2130;
+ --dst-badge: #f59e0b22;
+ --nodst-badge: #0ea5e922;
+ --utc-col: #f0b42922;
+ --ca-col: #5eead422;
+ --ar-col: #c084fc22;
+ --oh-col: #fb923c22;
+ }
+
+ * { margin: 0; padding: 0; box-sizing: border-box; }
+
+ body {
+ background: var(--bg);
+ color: var(--text);
+ font-family: 'DM Mono', monospace;
+ min-height: 100vh;
+ padding: 40px 24px 64px;
+ }
+
+ /* Grain overlay */
+ body::before {
+ content: '';
+ position: fixed;
+ inset: 0;
+ background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
+ pointer-events: none;
+ z-index: 0;
+ opacity: 0.6;
+ }
+
+ .page { position: relative; z-index: 1; max-width: 960px; margin: 0 auto; }
+
+ header {
+ margin-bottom: 24px;
+ border-bottom: 1px solid var(--border);
+ padding-bottom: 20px;
+ }
+
+ .eyebrow {
+ font-size: 11px;
+ letter-spacing: 0.2em;
+ color: var(--muted);
+ text-transform: uppercase;
+ margin-bottom: 10px;
+ }
+
+ h1 {
+ font-family: 'Playfair Display', serif;
+ font-size: clamp(28px, 5vw, 44px);
+ color: var(--text);
+ line-height: 1.1;
+ margin-bottom: 16px;
+ }
+
+ h1 span { color: var(--accent); }
+
+ .meta-row {
+ display: flex;
+ align-items: center;
+ gap: 16px;
+ flex-wrap: wrap;
+ }
+
+ .date-badge {
+ font-size: 12px;
+ color: var(--muted);
+ background: var(--surface);
+ border: 1px solid var(--border);
+ padding: 4px 12px;
+ border-radius: 4px;
+ }
+
+ .date-badge strong { color: var(--text); }
+
+ /* DST Toggle */
+ .toggle-group {
+ display: flex;
+ gap: 8px;
+ background: var(--surface);
+ border: 1px solid var(--border);
+ border-radius: 6px;
+ padding: 4px;
+ }
+
+ .toggle-btn {
+ font-family: 'DM Mono', monospace;
+ font-size: 11px;
+ letter-spacing: 0.08em;
+ padding: 6px 14px;
+ border: none;
+ border-radius: 4px;
+ cursor: pointer;
+ background: transparent;
+ color: var(--muted);
+ transition: all 0.2s;
+ }
+
+ .toggle-btn.active-dst {
+ background: var(--dst-badge);
+ color: var(--accent);
+ border: 1px solid #f0b42955;
+ }
+
+ .toggle-btn.active-nodst {
+ background: var(--nodst-badge);
+ color: var(--accent2);
+ border: 1px solid #5eead455;
+ }
+
+ .auto-label {
+ font-size: 11px;
+ color: var(--muted);
+ display: flex;
+ flex-direction: column;
+ gap: 3px;
+ }
+
+ #auto-label-sub {
+ font-size: 10px;
+ color: var(--muted);
+ opacity: 0.7;
+ line-height: 1.4;
+ max-width: 220px;
+ }
+
+ /* Section */
+ .section { display: none; }
+ .section.visible { display: block; }
+
+ .section-header {
+ display: flex;
+ align-items: center;
+ gap: 12px;
+ margin-bottom: 20px;
+ }
+
+ .season-tag {
+ font-size: 11px;
+ letter-spacing: 0.12em;
+ text-transform: uppercase;
+ padding: 4px 12px;
+ border-radius: 3px;
+ font-weight: 500;
+ }
+
+ .tag-dst { background: var(--dst-badge); color: var(--accent); border: 1px solid #f0b42940; }
+ .tag-nodst{ background: var(--nodst-badge); color: var(--accent2); border: 1px solid #5eead440; }
+
+ .section-desc {
+ font-size: 12px;
+ color: var(--muted);
+ line-height: 1.6;
+ max-width: 600px;
+ margin-bottom: 28px;
+ padding: 12px 16px;
+ border-left: 2px solid var(--border);
+ }
+
+ .section-desc em { color: var(--text); font-style: normal; }
+
+ /* Table */
+ .table-wrap {
+ overflow-x: auto;
+ border: 1px solid var(--border);
+ border-radius: 8px;
+ }
+
+ table {
+ width: 100%;
+ border-collapse: collapse;
+ font-size: 13px;
+ min-width: 560px;
+ }
+
+ thead tr {
+ background: var(--header-bg);
+ }
+
+ th {
+ padding: 14px 18px;
+ text-align: left;
+ font-size: 11px;
+ letter-spacing: 0.12em;
+ text-transform: uppercase;
+ font-weight: 500;
+ border-bottom: 1px solid var(--border);
+ white-space: nowrap;
+ }
+
+ th.col-utc { color: var(--accent); background: var(--utc-col); }
+ th.col-ca { color: var(--accent2); background: var(--ca-col); }
+ th.col-ar { color: var(--accent3); background: var(--ar-col); }
+ th.col-oh { color: #fb923c; background: var(--oh-col); }
+
+ tbody tr {
+ border-bottom: 1px solid var(--border);
+ transition: background 0.15s;
+ }
+
+ tbody tr:nth-child(even) { background: var(--row-even); }
+ tbody tr:last-child { border-bottom: none; }
+ tbody tr:hover { background: var(--row-hover); }
+
+ td {
+ padding: 11px 18px;
+ white-space: nowrap;
+ }
+
+ td.col-utc { color: var(--accent); }
+ td.col-ca { color: var(--accent2); }
+ td.col-ar { color: var(--accent3); }
+ td.col-oh { color: #fb923c; }
+
+ .time-val { font-weight: 500; }
+ .tz-label {
+ font-size: 10px;
+ color: var(--muted);
+ margin-left: 6px;
+ letter-spacing: 0.04em;
+ }
+
+ .day-note {
+ font-size: 10px;
+ color: var(--muted);
+ background: #ffffff08;
+ padding: 1px 6px;
+ border-radius: 3px;
+ margin-left: 6px;
+ }
+
+ /* Legend */
+ .legend {
+ margin-top: 32px;
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+ gap: 12px;
+ }
+
+ .legend-card {
+ background: var(--surface);
+ border: 1px solid var(--border);
+ border-radius: 6px;
+ padding: 14px 16px;
+ }
+
+ .legend-card .lname {
+ font-size: 12px;
+ font-weight: 500;
+ margin-bottom: 4px;
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ }
+
+ .lname-dot { width: 8px; height: 8px; border-radius: 50%; }
+ .dot-utc { background: var(--accent); }
+ .dot-ca { background: var(--accent2); }
+ .dot-ar { background: var(--accent3); }
+ .dot-oh { background: #fb923c; }
+
+ .legend-card .ldetail {
+ font-size: 11px;
+ color: var(--muted);
+ line-height: 1.6;
+ }
+
+ .legend-card .ldetail strong { color: var(--text); }
+
+ footer {
+ margin-top: 48px;
+ font-size: 11px;
+ color: var(--muted);
+ text-align: center;
+ line-height: 1.8;
+ border-top: 1px solid var(--border);
+ padding-top: 20px;
+ }
+</style>
+</head>
+<body>
+<div class="page">
+
+ <header>
+ <div class="meta-row">
+ <span class="date-badge">Today: <strong id="today-display"></strong></span>
+ <div class="toggle-group">
+ <button class="toggle-btn" id="btn-dst">☀️ DST Active</button>
+ <button class="toggle-btn" id="btn-nodst">❄️ Standard Time</button>
+ </div>
+ <div class="auto-label" style="display:none">
+ <span id="auto-label-text">Auto-detected for today</span>
+ <span id="auto-label-sub"></span>
+ </div>
+ </div>
+ </header>
+
+ <!-- DST Section (Mar 2nd Sun → Nov 1st Sun in US) -->
+ <div class="section" id="section-dst">
+ <p class="section-desc" style="display:none">
+ US DST runs from the <em>2nd Sunday of March</em> through the <em>1st Sunday of November</em>.
+ California shifts to <em>PDT (UTC−7)</em> and Ohio to <em>EDT (UTC−4)</em>.
+ Argentina stays fixed at <em>ART (UTC−3)</em> year-round — no DST.
+ </p>
+ <div class="table-wrap">
+ <table id="table-dst"></table>
+ </div>
+ </div>
+
+ <!-- Standard Time Section -->
+ <div class="section" id="section-nodst">
+ <p class="section-desc" style="display:none">
+ Outside DST, California uses <em>PST (UTC−8)</em> and Ohio uses <em>EST (UTC−5)</em>.
+ Argentina remains at <em>ART (UTC−3)</em> — it abolished DST in 2009 and observes a fixed offset year-round.
+ </p>
+ <div class="table-wrap">
+ <table id="table-nodst"></table>
+ </div>
+ </div>
+
+ <div class="legend" style="display:none">
+ <div class="legend-card">
+ <div class="lname"><span class="lname-dot dot-utc"></span>UTC</div>
+ <div class="ldetail">Coordinated Universal Time.<br>The global baseline — <strong>no DST</strong>.</div>
+ </div>
+ <div class="legend-card">
+ <div class="lname"><span class="lname-dot dot-ca"></span>California</div>
+ <div class="ldetail">DST: <strong>PDT (UTC−7)</strong><br>Standard: <strong>PST (UTC−8)</strong></div>
+ </div>
+ <div class="legend-card">
+ <div class="lname"><span class="lname-dot dot-ar"></span>Argentina</div>
+ <div class="ldetail">Always <strong>ART (UTC−3)</strong>.<br>No DST since 2009. Fixed year-round.</div>
+ </div>
+ <div class="legend-card">
+ <div class="lname"><span class="lname-dot dot-oh"></span>Ohio</div>
+ <div class="ldetail">DST: <strong>EDT (UTC−4)</strong><br>Standard: <strong>EST (UTC−5)</strong></div>
+ </div>
+ </div>
+
+ <footer style="display:none">
+ US DST begins 2nd Sunday of March · ends 1st Sunday of November<br>
+ Argentina (ART, UTC−3) does not observe Daylight Saving Time<br>
+ All times shown as 24-hour clock with 12-hour equivalents
+ </footer>
+</div>
+
+<script>
+ // ── DST detection ──────────────────────────────────────────────
+ function usDstActive(date) {
+ const y = date.getFullYear();
+ // 2nd Sunday in March
+ const mar = new Date(y, 2, 1);
+ const dstStart = new Date(y, 2, (14 - mar.getDay()) % 7 + 8); // Day 8-14
+ dstStart.setHours(2, 0, 0, 0);
+ // 1st Sunday in November
+ const nov = new Date(y, 10, 1);
+ const dstEnd = new Date(y, 10, (7 - nov.getDay()) % 7 + 1);
+ dstEnd.setHours(2, 0, 0, 0);
+ return date >= dstStart && date < dstEnd;
+ }
+
+ // ── Build table ────────────────────────────────────────────────
+ // offsets: { ca, ar, oh } relative to UTC (in hours)
+ function fmt12(h) {
+ const d = ((h % 24) + 24) % 24;
+ const ampm = d < 12 ? 'am' : 'pm';
+ let h12 = d % 12; if (h12 === 0) h12 = 12;
+ return `${h12}${ampm}`;
+ }
+
+ function fmtHour(h) {
+ const d = ((h % 24) + 24) % 24;
+ const hh = String(d).padStart(2, '0');
+ return `${hh}:00`;
+ }
+
+ function dayNote(utcH, offset) {
+ const adjusted = utcH + offset;
+ if (adjusted < 0) return '<span class="day-note">prev day</span>';
+ if (adjusted >= 24) return '<span class="day-note">next day</span>';
+ return '';
+ }
+
+ function buildTable(tableEl, caOff, arOff, ohOff, caLabel, ohLabel) {
+ const thead = `<thead><tr>
+ <th class="col-utc">UTC</th>
+ <th class="col-ca">California<br><span style="font-size:10px;font-weight:400;opacity:.7">${caLabel}</span></th>
+ <th class="col-oh">Ohio<br><span style="font-size:10px;font-weight:400;opacity:.7">${ohLabel}</span></th>
+ <th class="col-ar">Argentina<br><span style="font-size:10px;font-weight:400;opacity:.7">ART (UTC−3)</span></th>
+ </tr></thead>`;
+
+ let rows = '';
+ for (let u = 0; u < 24; u++) {
+ const caH = u + caOff;
+ const arH = u + arOff;
+ const ohH = u + ohOff;
+ rows += `<tr>
+ <td class="col-utc"><span class="time-val">${fmtHour(u)}</span><span class="tz-label">${fmt12(u)}</span></td>
+ <td class="col-ca"><span class="time-val">${fmt12(caH)}</span><span class="tz-label">${fmtHour(caH)}</span></td>
+ <td class="col-oh"><span class="time-val">${fmt12(ohH)}</span><span class="tz-label">${fmtHour(ohH)}</span></td>
+ <td class="col-ar"><span class="time-val">${fmtHour(arH)}</span><span class="tz-label">${fmt12(arH)}</span></td>
+ </tr>`;
+ }
+ tableEl.innerHTML = thead + `<tbody>${rows}</tbody>`;
+ }
+
+ // ── Init ───────────────────────────────────────────────────────
+ const now = new Date();
+ const autoDst = usDstActive(now);
+
+ // Display today's date
+ document.getElementById('today-display').textContent =
+ now.toLocaleDateString('en-US', { weekday: 'short', year: 'numeric', month: 'long', day: 'numeric' });
+
+ // Build both tables (offsets from UTC)
+ buildTable(
+ document.getElementById('table-dst'),
+ -7, -3, -4, // CA=PDT, AR=ART, OH=EDT
+ 'PDT (UTC−7)', 'EDT (UTC−4)'
+ );
+ buildTable(
+ document.getElementById('table-nodst'),
+ -8, -3, -5, // CA=PST, AR=ART, OH=EST
+ 'PST (UTC−8)', 'EST (UTC−5)'
+ );
+
+ // ── Mode switching ─────────────────────────────────────────────
+ let currentMode = autoDst ? 'dst' : 'nodst';
+
+ function setMode(mode) {
+ currentMode = mode;
+ document.getElementById('section-dst').classList.toggle('visible', mode === 'dst');
+ document.getElementById('section-nodst').classList.toggle('visible', mode === 'nodst');
+
+ const btnDst = document.getElementById('btn-dst');
+ const btnNodst = document.getElementById('btn-nodst');
+ btnDst.className = 'toggle-btn' + (mode === 'dst' ? ' active-dst' : '');
+ btnNodst.className = 'toggle-btn' + (mode === 'nodst' ? ' active-nodst' : '');
+ }
+
+ setMode(currentMode);
+
+ // Fix auto-dot logic (simpler)
+ function updateAutoLabel() {
+ const lbl = document.getElementById('auto-label-text');
+ const sub = document.getElementById('auto-label-sub');
+ const isAuto = (currentMode === 'dst') === autoDst;
+ if (isAuto) {
+ lbl.textContent = 'Auto-detected for today';
+ sub.textContent = 'Showing the table that matches today\'s date. Click a button above to override.';
+ } else {
+ lbl.textContent = 'Manually selected';
+ sub.textContent = 'This differs from what today\'s date would suggest.';
+ }
+ }
+
+ document.getElementById('btn-dst').addEventListener('click', () => { setMode('dst'); updateAutoLabel(); });
+ document.getElementById('btn-nodst').addEventListener('click', () => { setMode('nodst'); updateAutoLabel(); });
+ updateAutoLabel();
+</script>
+</body>
+</html>
projects / za3k.git / commitdiff