diff options
| author | Peter Stone <thepeterstone@gmail.com> | 2026-03-22 09:43:36 +0000 |
|---|---|---|
| committer | Peter Stone <thepeterstone@gmail.com> | 2026-03-22 09:43:36 +0000 |
| commit | 77f4aa8d1f818169490a35bf2ec3eb43e60166b4 (patch) | |
| tree | 15136cca59549a52ac260950b3333484ec2db214 | |
| parent | 7bdc204083c066a89848823bd2dc7fabef4b7f76 (diff) | |
feat: color clock based on build version hash
Embeds the build version as a data attribute on #last-updated and
derives an HSL hue from the first 6 hex chars, matching the
claudomator logo color technique.
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
| -rw-r--r-- | web/static/js/app.js | 10 | ||||
| -rw-r--r-- | web/templates/index.html | 2 |
2 files changed, 11 insertions, 1 deletions
diff --git a/web/static/js/app.js b/web/static/js/app.js index 954dc8c..37d2a30 100644 --- a/web/static/js/app.js +++ b/web/static/js/app.js @@ -3,6 +3,16 @@ // Constants const AUTO_REFRESH_INTERVAL = 5 * 60 * 1000; // 5 minutes in milliseconds +// Color the clock based on the build version hash +(function applyVersionColor() { + const el = document.getElementById('last-updated'); + if (!el) return; + const ver = el.dataset.buildVersion || ''; + const hex = ver.replace(/[^0-9a-f]/gi, '').slice(0, 6).padEnd(6, '0'); + const hue = Math.round((parseInt(hex, 16) / 0xffffff) * 360); + el.style.color = `hsl(${hue}, 70%, 65%)`; +})(); + // Timeline Calendar Initialization function initTimelineCalendar(calendarId, nowLineId, untimedSectionId) { const calendar = document.getElementById(calendarId); diff --git a/web/templates/index.html b/web/templates/index.html index 87be542..1884a77 100644 --- a/web/templates/index.html +++ b/web/templates/index.html @@ -37,7 +37,7 @@ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"></path> </svg> </button> - <span class="text-sm text-white/70 tracking-wider font-light" id="last-updated">{{.LastUpdated.Format "3:04 PM"}}</span> + <span class="text-sm text-white/70 tracking-wider font-light" id="last-updated" data-build-version="{{.BuildVersion}}">{{.LastUpdated.Format "3:04 PM"}}</span> <div class="flex items-center gap-3"> <a href="/settings" class="text-white/70 hover:text-white transition-colors p-1" title="Settings"> <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"> |