Seth/clock-site
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add persistent location controls to astronomy page (ZIP, geolocation, manual)

Browse Source
This commit is contained in:
Seth
2026-03-09 02:41:35 +00:00
parent 196cf7557f
commit b0012d68d3
2 changed files with 139 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
astro.html
+54
View File
@@ -117,6 +117,44 @@
font-size: 0.77rem;
}
.event-dual span:first-child { color: var(--text); }
.loc-wrap {
border: 1px solid var(--border);
border-radius: 10px;
padding: 0.7rem;
margin: 0.2rem 0 1rem;
background: #171717;
}
.loc-head {
font-size: 0.72rem;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--accent);
margin-bottom: 0.45rem;
font-weight: 700;
}
.loc-row {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 0.4rem;
margin-bottom: 0.4rem;
}
.loc-input {
background: #111;
border: 1px solid var(--border);
border-radius: 6px;
color: var(--text);
padding: 0.35rem 0.5rem;
font-size: 0.82rem;
min-width: 0;
}
.loc-status {
font-size: 0.76rem;
color: var(--muted);
min-height: 1.1em;
}
@media (max-width: 640px) {
.loc-row { grid-template-columns: 1fr 1fr; }
}
</style>
</head>
<body>
@@ -132,6 +170,22 @@
<button class="nav-btn" id="nextDay">&#8250;</button>
</div>
<div class="loc-wrap">
<div class="loc-head">Astronomy Location</div>
<div class="loc-row">
<input id="locLabel" class="loc-input" type="text" placeholder="Label (Home)" maxlength="64">
<input id="locZip" class="loc-input" type="text" placeholder="ZIP" inputmode="numeric" maxlength="10">
<button class="nav-btn" id="locUseZip" type="button">Use ZIP</button>
</div>
<div class="loc-row">
<input id="locLat" class="loc-input" type="number" step="0.0001" min="-90" max="90" placeholder="Latitude">
<input id="locLon" class="loc-input" type="number" step="0.0001" min="-180" max="180" placeholder="Longitude">
<button class="nav-btn" id="locGeo" type="button">Use Current</button>
<button class="nav-btn" id="locSave" type="button">Save</button>
</div>
<div id="locStatus" class="loc-status">Using default location.</div>
</div>
<div class="moon-display">
<span class="moon-glyph" id="moonGlyph">🌑</span>
<div class="moon-name" id="moonName">—</div>