diff options
| author | Peter Stone <thepeterstone@gmail.com> | 2026-06-03 00:17:02 +0000 |
|---|---|---|
| committer | Peter Stone <thepeterstone@gmail.com> | 2026-06-03 00:17:02 +0000 |
| commit | 7133088e8a15007b514d105870ea8b3b9dc69e20 (patch) | |
| tree | 462076d8c0b034a08e6b98e1be4aeb4fbcf482fa /web/templates | |
| parent | 787f0967307062d2a94530f9831c925e5dad6690 (diff) | |
feat: synchronize background image rotation across sessions
Server seeds bg URL from a 5-minute time bucket so all open sessions
show the same image simultaneously. Client-side JS rotates in sync and
prefetches the next image on the same interval.
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Diffstat (limited to 'web/templates')
| -rw-r--r-- | web/templates/index.html | 17 | ||||
| -rw-r--r-- | web/templates/login.html | 3 |
2 files changed, 18 insertions, 2 deletions
diff --git a/web/templates/index.html b/web/templates/index.html index 465e612..8351804 100644 --- a/web/templates/index.html +++ b/web/templates/index.html @@ -24,9 +24,26 @@ .bg-modal { background-color: var(--modal-bg); } .bg-modal-overlay { background-color: var(--modal-overlay); } </style> + <script> + (function() { + var I = 5 * 60 * 1000; + function b() { return Math.floor(Date.now() / I); } + function u(n) { return "url('https://picsum.photos/1920/1080?random=" + n + "')"; } + function apply(n) { document.body.style.setProperty('--bg-url', u(n)); } + function schedule() { + setTimeout(function() { apply(b()); new Image().src = u(b() + 1); schedule(); }, I - (Date.now() % I)); + } + document.addEventListener('DOMContentLoaded', function() { + apply(b()); + new Image().src = u(b() + 1); + schedule(); + }); + })(); + </script> </head> <body class="min-h-screen text-slate-200 bg-body" style="--bg-url: url('{{.BackgroundURL}}')" hx-headers='{"X-CSRF-Token": "{{.CSRFToken}}"}'> + <div class="content-max-width py-3 sm:py-6"> <!-- Minimal Header --> <header class="flex mb-4 sm:mb-6 justify-between items-center no-print text-shadow-sm"> diff --git a/web/templates/login.html b/web/templates/login.html index 19bce00..7ff27ca 100644 --- a/web/templates/login.html +++ b/web/templates/login.html @@ -10,8 +10,7 @@ .text-shadow-sm { text-shadow: 0 1px 2px rgba(0,0,0,0.5); } </style> </head> -<body class="min-h-screen flex items-center justify-center bg-slate-950 text-slate-200"> - <div class="bg-overlay" style="background-image: url('https://picsum.photos/1920/1080?random=login');"></div> +<body class="min-h-screen flex items-center justify-center text-slate-200 bg-body" style="--bg-url: url('https://picsum.photos/1920/1080?random=login')"> <div class="w-full max-w-md p-6 sm:p-8 relative z-10"> <div class="card shadow-2xl"> <h1 class="text-3xl font-light text-white text-center mb-10 tracking-tight text-shadow-sm">Personal Dashboard</h1> |