162 lines
5.0 KiB
HTML
162 lines
5.0 KiB
HTML
<!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> ·
|
|
<a href="/calendar" style="color:var(--accent);text-decoration:none;font-size:0.85rem;">Calendar</a> ·
|
|
<a href="/decimal" style="color:var(--accent);text-decoration:none;font-size:0.85rem;">Decimal</a> ·
|
|
<a href="/astro" style="color:var(--accent);text-decoration:none;font-size:0.85rem;">Astronomy</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>
|