diff options
| author | Peter Stone <thepeterstone@gmail.com> | 2026-01-22 15:19:00 -1000 |
|---|---|---|
| committer | Peter Stone <thepeterstone@gmail.com> | 2026-01-22 15:19:00 -1000 |
| commit | 068b04c0004e38a760c463589d45c7cfd090eec8 (patch) | |
| tree | 33df66a1fcbdf6a522e15bc85ffad07714a1d368 /web/templates/login.html | |
| parent | 9dd0bc581b25bb7356d091d3a5560dc0af46c2d9 (diff) | |
Complete dark translucent theme for all templates
Update all HTML templates to match terst.org styling:
- Dark semi-transparent backgrounds (bg-black/60)
- White text with opacity variants for hierarchy
- Glass effect with backdrop-blur
- Dark form inputs with subtle borders
- Updated modals and FAB button
- Login page with background image
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Diffstat (limited to 'web/templates/login.html')
| -rw-r--r-- | web/templates/login.html | 21 |
1 files changed, 12 insertions, 9 deletions
diff --git a/web/templates/login.html b/web/templates/login.html index e255de8..ce72dc0 100644 --- a/web/templates/login.html +++ b/web/templates/login.html @@ -6,14 +6,17 @@ <title>Login - Personal Dashboard</title> <link rel="icon" type="image/svg+xml" href="/static/favicon.svg"> <link rel="stylesheet" href="/static/css/output.css"> + <style> + .text-shadow { text-shadow: 0 0 8px black, 0 0 8px black; } + </style> </head> -<body class="min-h-screen flex items-center justify-center bg-gray-50"> +<body class="min-h-screen flex items-center justify-center bg-gray-900" style="background-image: url('https://picsum.photos/1920/1080?random=login'); background-size: cover; background-position: center;"> <div class="w-full max-w-md p-8"> - <div class="bg-white rounded-xl shadow-lg p-8"> - <h1 class="text-2xl font-bold text-gray-900 text-center mb-8">Personal Dashboard</h1> + <div class="bg-black/60 backdrop-blur-sm rounded-xl p-8 text-shadow" style="box-shadow: 0 0 12px black;"> + <h1 class="text-2xl font-light text-white text-center mb-8 tracking-wide">Personal Dashboard</h1> {{if .Error}} - <div class="mb-6 p-4 bg-red-50 border border-red-200 rounded-lg text-red-700 text-sm"> + <div class="mb-6 p-4 bg-red-900/50 border border-red-500/30 rounded-lg text-red-300 text-sm"> {{.Error}} </div> {{end}} @@ -21,7 +24,7 @@ <form method="POST" action="/login" class="space-y-6"> <input type="hidden" name="csrf_token" value="{{.CSRFToken}}"> <div> - <label for="username" class="block text-sm font-medium text-gray-700 mb-2"> + <label for="username" class="block text-sm font-medium text-white/70 mb-2"> Username </label> <input @@ -30,12 +33,12 @@ name="username" required autofocus - class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-primary-500 transition-colors" + class="w-full px-4 py-3 bg-black/40 border border-white/20 rounded-lg text-white placeholder-white/50 focus:ring-2 focus:ring-white/30 focus:border-white/30 transition-colors" placeholder="Enter your username"> </div> <div> - <label for="password" class="block text-sm font-medium text-gray-700 mb-2"> + <label for="password" class="block text-sm font-medium text-white/70 mb-2"> Password </label> <input @@ -43,13 +46,13 @@ id="password" name="password" required - class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-primary-500 transition-colors" + class="w-full px-4 py-3 bg-black/40 border border-white/20 rounded-lg text-white placeholder-white/50 focus:ring-2 focus:ring-white/30 focus:border-white/30 transition-colors" placeholder="Enter your password"> </div> <button type="submit" - class="w-full bg-primary-600 hover:bg-primary-700 text-white font-medium py-3 px-4 rounded-lg transition-colors"> + class="w-full bg-white/20 hover:bg-white/30 text-white font-medium py-3 px-4 rounded-lg transition-colors"> Sign In </button> </form> |