diff options
| -rw-r--r-- | web/index.html | 18 | ||||
| -rw-r--r-- | web/style.css | 12 |
2 files changed, 26 insertions, 4 deletions
diff --git a/web/index.html b/web/index.html index 53fbf3c..484bbfb 100644 --- a/web/index.html +++ b/web/index.html @@ -7,8 +7,24 @@ <meta name="base-path" content="/claudomator"> <link rel="stylesheet" href="style.css" /> <link rel="icon" href="data:,"> + <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> +<body class="bg-body"> <header> <h1>Claudomator</h1> <div class="header-actions"> diff --git a/web/style.css b/web/style.css index c7e82ae..34395a4 100644 --- a/web/style.css +++ b/web/style.css @@ -10,9 +10,9 @@ --state-budget-exceeded: #fb923c; --state-blocked: #818cf8; - --bg: #0f172a; - --surface: #1e293b; - --border: #334155; + --bg: rgba(15, 23, 42, 0.8); + --surface: rgba(30, 41, 59, 0.75); + --border: rgba(51, 65, 85, 0.7); --text: #e2e8f0; --text-muted: #94a3b8; --accent: #38bdf8; @@ -32,6 +32,12 @@ body { min-height: 100dvh; } +body.bg-body { + background-image: linear-gradient(rgba(2, 6, 23, 0.65), rgba(2, 6, 23, 0.65)), var(--bg-url, none); + background-size: cover; + background-position: center; +} + /* Header */ header { background: var(--surface); |