Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| <title>Sign In - VPS Linux</title> | |
| <style> | |
| :root { | |
| --bg-color: #0a0a0a; | |
| --card-bg: #111111; | |
| --text-color: #ffffff; | |
| --accent-color: #ff4d4d; /* Reddish accent similar to OpenClaw logo */ | |
| --border-color: #333; | |
| --button-bg: #222; | |
| --button-hover: #333; | |
| } | |
| body { | |
| background-color: var(--bg-color); | |
| color: var(--text-color); | |
| font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| height: 100vh; | |
| margin: 0; | |
| } | |
| .login-container { | |
| background-color: var(--card-bg); | |
| border: 1px solid var(--border-color); | |
| border-radius: 12px; | |
| padding: 40px; | |
| width: 100%; | |
| max-width: 360px; | |
| text-align: center; | |
| box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5); | |
| } | |
| .logo { | |
| width: 64px; | |
| height: 64px; | |
| margin-bottom: 24px; | |
| margin-top: 10px; /* 位置下移 */ | |
| /* Filled red robot icon */ | |
| background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23ff4d4d" d="M12 2a2 2 0 0 1 2 2c0 .74-.4 1.39-1 1.73V7h1a7 7 0 0 1 7 7h1a1 1 0 0 1 1 1v3a1 1 0 0 1-1 1h-1v1a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-1H2a1 1 0 0 1-1-1v-3a1 1 0 0 1 1-1h1a7 7 0 0 1 7-7V5.73C9.4 5.39 9 4.74 9 4a2 2 0 0 1 2-2M4.5 11a5.5 5.5 0 0 0 5.5 5.5 5.5 5.5 0 0 0 5.5-5.5H11v2h2v-2h2.5z"/></svg>'); | |
| background-repeat: no-repeat; | |
| background-position: center; | |
| display: inline-block; | |
| } | |
| h1 { | |
| font-size: 24px; | |
| font-weight: 600; | |
| margin-bottom: 8px; | |
| } | |
| p { | |
| color: #888; | |
| margin-bottom: 32px; | |
| font-size: 14px; | |
| } | |
| .btn { | |
| display: block; | |
| width: 100%; | |
| padding: 12px; | |
| margin-bottom: 12px; | |
| border-radius: 6px; | |
| border: 1px solid var(--border-color); | |
| background-color: var(--button-bg); | |
| color: var(--text-color); | |
| font-size: 14px; | |
| font-weight: 500; | |
| cursor: pointer; | |
| text-decoration: none; | |
| transition: background-color 0.2s, transform 0.1s; | |
| box-sizing: border-box; | |
| } | |
| .btn:hover { | |
| background-color: var(--button-hover); | |
| } | |
| .btn:active { | |
| transform: scale(0.98); | |
| } | |
| .btn-github { | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| gap: 10px; | |
| } | |
| .btn-google { | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| gap: 10px; | |
| } | |
| .footer { | |
| margin-top: 32px; | |
| font-size: 12px; | |
| color: #444; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="login-container"> | |
| <div class="logo"></div> | |
| <h1>Welcome Back</h1> | |
| <p>Sign in to access your VPS Linux environment</p> | |
| <!-- OAuth2 Proxy automatically injects the sign-in URL here, | |
| but since we are customizing the page, we need to point to the start endpoint. | |
| The default template uses a form or simple links. --> | |
| <!-- Assuming we configured GitHub --> | |
| <form method="GET" action="/oauth2/start"> | |
| <input type="hidden" name="rd" value="/"> | |
| <button type="submit" class="btn btn-github"> | |
| Sign in with Github | |
| </button> | |
| </form> | |
| <div class="footer"> | |
| </div> | |
| </div> | |
| </body> | |
| </html> |