Enhance: More polished single-user login page
Enhance: More polished single-user login page
Wabifocus committed
Sep 1, 2025 at 02:12 UTC
b1b6a594d57746d18f74d11ec939282b506aa0d1
2 files changed
+111
webui/login.css
new
+81
@@ -0,0 +1,81 @@
1
+body {
2
+ background-color: #131313;
3
+ color: #d4d4d4;
4
+ font-family: "Rubik", Arial, Helvetica, sans-serif;
5
+ display: flex;
6
+ justify-content: center;
7
+ align-items: center;
8
+ height: 100vh;
9
+ margin: 0;
10
+}
11
+
12
+.login-container {
13
+ display: flex;
14
+ justify-content: center;
15
+ align-items: center;
16
+ width: 100%;
17
+}
18
+
19
+.login-form {
20
+ background-color: #1a1a1a;
21
+ padding: 2rem;
22
+ border-radius: 1.125rem;
23
+ box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
24
+ width: 100%;
25
+ max-width: 400px;
26
+ text-align: center;
27
+}
28
+
29
+.logo {
30
+ width: 80px;
31
+ height: 80px;
32
+ border-radius: 0.3125rem; /* Match the main page logo style */
33
+ margin-bottom: 1rem;
34
+}
35
+
36
+h2 {
37
+ margin-bottom: 2rem;
38
+}
39
+
40
+.input-group {
41
+ margin-bottom: 1.5rem;
42
+ text-align: left;
43
+}
44
+
45
+.input-group label {
46
+ display: block;
47
+ margin-bottom: 0.5rem;
48
+ color: #737a81;
49
+}
50
+
51
+.input-group input {
52
+ width: 100%;
53
+ padding: 0.75rem;
54
+ border: 1px solid #444444a8;
55
+ border-radius: 0.5rem;
56
+ background-color: #131313;
57
+ color: #d4d4d4;
58
+ font-size: 1rem;
59
+ box-sizing: border-box; /* Added for consistent padding */
60
+}
61
+
62
+button {
63
+ width: 100%;
64
+ padding: 0.75rem;
65
+ border: none;
66
+ border-radius: 0.5rem;
67
+ background-color: #4248f1;
68
+ color: white;
69
+ font-size: 1rem;
70
+ cursor: pointer;
71
+ transition: background-color 0.3s ease;
72
+}
73
+
74
+button:hover {
75
+ background-color: #353bc5;
76
+}
77
+
78
+.error {
79
+ color: #cf6679;
80
+ margin-top: 1rem;
81
+}
webui/login.html
new
+30
@@ -0,0 +1,30 @@
1
+<!DOCTYPE html>
2
+<html lang="en">
3
+<head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Login - Agent Zero</title>
7
+ <link rel="stylesheet" href="/login.css">
8
+ <link rel="icon" type="image/svg+xml" href="/public/favicon.svg">
9
+</head>
10
+<body>
11
+ <div class="login-container">
12
+ <form class="login-form" method="POST" action="/login">
13
+ <img src="/public/splash.jpg" alt="Agent Zero Logo" class="logo">
14
+ <h2>Agent Zero</h2>
15
+ <div class="input-group">
16
+ <label for="username">Username</label>
17
+ <input type="text" id="username" name="username" required>
18
+ </div>
19
+ <div class="input-group">
20
+ <label for="password">Password</label>
21
+ <input type="password" id="password" name="password" required>
22
+ </div>
23
+ <button type="submit">Login</button>
24
+ {% if error %}
25
+ <p class="error">{{ error }}</p>
26
+ {% endif %}
27
+ </form>
28
+ </div>
29
+</body>
30
+</html>
\ No newline at end of file