Add background image and overlay to AdminPage: Implement a full-screen background image with a dark overlay for improved readability, enhancing the visual presentation of the admin interface.
All checks were successful
Deploy with Docker Compose / deploy (push) Successful in 2m19s

This commit is contained in:
Julien Froidefond
2025-12-12 16:07:35 +01:00
parent f69fbbd0e1
commit ce0697a908
2 changed files with 10 additions and 0 deletions

View File

@@ -37,6 +37,16 @@ export default async function AdminPage() {
return ( return (
<main className="min-h-screen bg-black relative"> <main className="min-h-screen bg-black relative">
{/* Background Image */}
<div
className="absolute inset-0 bg-cover bg-center bg-no-repeat"
style={{
backgroundImage: `url('/got-light.jpg')`,
}}
>
{/* Dark overlay for readability */}
<div className="absolute inset-0 bg-gradient-to-b from-black/70 via-black/60 to-black/80"></div>
</div>
<NavigationWrapper /> <NavigationWrapper />
<AdminPanel initialPreferences={sitePreferences} /> <AdminPanel initialPreferences={sitePreferences} />
</main> </main>

BIN
public/got-light.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 155 KiB