Spaces:
Paused
Paused
File size: 4,089 Bytes
2cb3286 f78f3cd 2cb3286 f78f3cd 2cb3286 f78f3cd 2cb3286 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 | <!DOCTYPE html>
<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> |