diff options
Diffstat (limited to 'web/static')
| -rw-r--r-- | web/static/login.html | 151 |
1 files changed, 131 insertions, 20 deletions
diff --git a/web/static/login.html b/web/static/login.html index ab3e781..c7d0a03 100644 --- a/web/static/login.html +++ b/web/static/login.html @@ -1,23 +1,134 @@ <!DOCTYPE html> -<html xmlns="http://www.w3.org/1999/xhtml"> - <head> - <title>neko rss mode</title> - <link rel="stylesheet" href="/static/style.css" /> - <meta name="viewport" content="width=device-width" /> - <meta name="viewport" content="initial-scale=1.0" /> - </head> - <body> - - <form action="/login/" method="post"> - <h3>username</h3> - <input type="text" name="username"> - - <h3>password</h3> - <input type="password" name="password"> - <input type="submit" name="login"> - - </form> - - </body> +<html lang="en"> +<head> + <meta charset="UTF-8"> + <meta name="viewport" content="width=device-width, initial-scale=1.0"> + <title>Neko Reader Login</title> + <style> + :root { + --bg-color: #f5f5f7; + --card-bg: #ffffff; + --text-color: #1d1d1f; + --border-color: #d2d2d7; + --primary-color: #0071e3; + --primary-hover: #0077ed; + --error-color: #ff3b30; + } + body { + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; + background-color: var(--bg-color); + color: var(--text-color); + display: flex; + justify-content: center; + align-items: center; + height: 100vh; + margin: 0; + padding: 20px; + } + + .login-card { + background-color: var(--card-bg); + padding: 40px; + border-radius: 12px; + box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); + width: 100%; + max-width: 360px; + text-align: center; + } + + h1 { + font-size: 24px; + font-weight: 600; + margin-bottom: 24px; + margin-top: 0; + } + + .input-group { + margin-bottom: 16px; + text-align: left; + } + + label { + display: block; + margin-bottom: 8px; + font-size: 14px; + font-weight: 500; + color: #86868b; + } + + input[type="text"], + input[type="password"] { + width: 100%; + padding: 12px; + border: 1px solid var(--border-color); + border-radius: 8px; + font-size: 16px; + box-sizing: border-box; + transition: border-color 0.2s ease; + } + + input[type="text"]:focus, + input[type="password"]:focus { + outline: none; + border-color: var(--primary-color); + box-shadow: 0 0 0 3px rgba(0, 113, 227, 0.2); + } + + button { + width: 100%; + padding: 12px; + background-color: var(--primary-color); + color: white; + border: none; + border-radius: 8px; + font-size: 16px; + font-weight: 600; + cursor: pointer; + transition: background-color 0.2s ease; + margin-top: 8px; + } + + button:hover { + background-color: var(--primary-hover); + } + + .footer { + margin-top: 24px; + font-size: 12px; + color: #86868b; + } + + /* Dark mode support */ + @media (prefers-color-scheme: dark) { + :root { + --bg-color: #000000; + --card-bg: #1c1c1e; + --text-color: #f5f5f7; + --border-color: #38383a; + --primary-color: #0a84ff; + --primary-hover: #409cff; + } + } + </style> +</head> +<body> + <div class="login-card"> + <h1>Welcome Back</h1> + <form action="/login/" method="post"> + <div class="input-group"> + <label for="username">Username</label> + <input type="text" id="username" name="username" required autofocus autocomplete="username"> + </div> + <div class="input-group"> + <label for="password">Password</label> + <input type="password" id="password" name="password" required autocomplete="current-password"> + </div> + <button type="submit">Sign In</button> + </form> + <div class="footer"> + Neko RSS Reader + </div> + </div> +</body> </html> |