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:
+155
@@ -0,0 +1,155 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>SethPC Time Converter</title>
|
||||
<link rel="icon" type="image/png" href="https://storage.googleapis.com/sethfreiberg.com/sethflix/favicon.png">
|
||||
<link rel="stylesheet" href="/style.css">
|
||||
<style>
|
||||
.convert-wrap {
|
||||
width: min(520px, 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%);
|
||||
}
|
||||
|
||||
.converter {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1.5rem;
|
||||
margin-top: 1.5rem;
|
||||
}
|
||||
|
||||
.conv-panel {
|
||||
background: #222;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 8px;
|
||||
padding: 1rem 1.1rem;
|
||||
}
|
||||
|
||||
.conv-label {
|
||||
font-size: 0.72rem;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.08em;
|
||||
text-transform: uppercase;
|
||||
color: var(--accent);
|
||||
margin-bottom: 0.6rem;
|
||||
}
|
||||
|
||||
.time-inputs {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.3rem;
|
||||
font-family: "JetBrains Mono", monospace;
|
||||
font-size: 1.6rem;
|
||||
}
|
||||
|
||||
.time-inputs input {
|
||||
background: transparent;
|
||||
border: none;
|
||||
border-bottom: 2px solid var(--border);
|
||||
color: var(--text);
|
||||
font-family: inherit;
|
||||
font-size: inherit;
|
||||
text-align: center;
|
||||
outline: none;
|
||||
transition: border-color 0.15s;
|
||||
-moz-appearance: textfield;
|
||||
}
|
||||
.time-inputs input::-webkit-outer-spin-button,
|
||||
.time-inputs input::-webkit-inner-spin-button { -webkit-appearance: none; }
|
||||
.time-inputs input:focus { border-color: var(--accent); }
|
||||
.time-inputs input.w2 { width: 2.2ch; }
|
||||
.time-inputs input.w3 { width: 2.6ch; }
|
||||
.time-inputs .sep { color: var(--muted); user-select: none; }
|
||||
|
||||
.conv-sub {
|
||||
font-size: 0.78rem;
|
||||
color: var(--muted);
|
||||
margin-top: 0.5rem;
|
||||
font-family: "JetBrains Mono", monospace;
|
||||
min-height: 1.2em;
|
||||
}
|
||||
|
||||
.arrow {
|
||||
text-align: center;
|
||||
font-size: 1.2rem;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.now-btn {
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
background: #2a2a2a;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 6px;
|
||||
color: var(--muted);
|
||||
padding: 0.3rem 1rem;
|
||||
cursor: pointer;
|
||||
font-size: 0.82rem;
|
||||
transition: all 0.15s;
|
||||
}
|
||||
.now-btn:hover { border-color: var(--accent); color: var(--accent); }
|
||||
|
||||
.ratio-note {
|
||||
font-size: 0.75rem;
|
||||
color: var(--muted);
|
||||
text-align: center;
|
||||
margin-top: 1rem;
|
||||
line-height: 1.5;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<main class="convert-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">Time Converter</span>
|
||||
</div>
|
||||
<p class="kicker">Decimal ↔ Gregorian · <a href="/seth" style="color:var(--accent);text-decoration:none;font-size:0.85rem;">Seth Date →</a></p>
|
||||
|
||||
<button class="now-btn" id="nowBtn">Use current time</button>
|
||||
|
||||
<div class="converter">
|
||||
<div class="conv-panel" id="gregPanel">
|
||||
<div class="conv-label">Gregorian (24h)</div>
|
||||
<div class="time-inputs">
|
||||
<input id="gH" class="w2" type="number" min="0" max="23" placeholder="HH">
|
||||
<span class="sep">:</span>
|
||||
<input id="gM" class="w2" type="number" min="0" max="59" placeholder="MM">
|
||||
<span class="sep">:</span>
|
||||
<input id="gS" class="w2" type="number" min="0" max="59" placeholder="SS">
|
||||
<span class="sep">.</span>
|
||||
<input id="gCs" class="w2" type="number" min="0" max="99" placeholder="cs">
|
||||
</div>
|
||||
<div class="conv-sub" id="gregFrac"></div>
|
||||
</div>
|
||||
|
||||
<div class="arrow">⇅</div>
|
||||
|
||||
<div class="conv-panel" id="decPanel">
|
||||
<div class="conv-label">Decimal (Seth)</div>
|
||||
<div class="time-inputs">
|
||||
<input id="dH" class="w2" type="number" min="0" max="9" placeholder="H">
|
||||
<span class="sep">:</span>
|
||||
<input id="dM" class="w2" type="number" min="0" max="99" placeholder="MM">
|
||||
<span class="sep">:</span>
|
||||
<input id="dS" class="w2" type="number" min="0" max="99" placeholder="SS">
|
||||
<span class="sep">.</span>
|
||||
<input id="dCs" class="w3" type="number" min="0" max="99" placeholder="cs">
|
||||
</div>
|
||||
<div class="conv-sub" id="decFrac"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p class="ratio-note">
|
||||
1 decimal hour = 2h 24m Gregorian ·
|
||||
1 decimal second = 0.864 SI seconds
|
||||
</p>
|
||||
</main>
|
||||
<script src="/convert.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user