diff options
| -rw-r--r-- | internal/handlers/handlers.go | 5 | ||||
| -rw-r--r-- | web/templates/index.html | 17 | ||||
| -rw-r--r-- | web/templates/login.html | 3 |
3 files changed, 20 insertions, 5 deletions
diff --git a/internal/handlers/handlers.go b/internal/handlers/handlers.go index bd14e65..19d26be 100644 --- a/internal/handlers/handlers.go +++ b/internal/handlers/handlers.go @@ -92,9 +92,8 @@ func (h *Handler) HandleDashboard(w http.ResponseWriter, r *http.Request) { return } - // Generate random background URL (Lorem Picsum - CORS-friendly) - // Add random seed to get different image each load - backgroundURL := fmt.Sprintf("https://picsum.photos/1920/1080?random=%d", time.Now().UnixNano()) + // Background URL: seed from 5-minute time bucket so all sites show the same image simultaneously + backgroundURL := fmt.Sprintf("https://picsum.photos/1920/1080?random=%d", time.Now().Unix()/300) // Wrap dashboard data with active tab for template data := struct { 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> |