mirror of
https://github.com/Rain-kl/OpenFlare.git
synced 2026-09-28 05:46:36 +08:00
refactor(error-pages): preset templates with OpenFlare branding
This commit is contained in:
@@ -16,78 +16,87 @@ const (
|
||||
defaultOriginErrorPageStatusTag = "500-599"
|
||||
)
|
||||
|
||||
// DefaultOriginErrorPageHTML is the built-in Cloudflare-style origin error page.
|
||||
// DefaultOriginErrorPageHTML is the built-in default (aligned with frontend minimalist).
|
||||
// Placeholders {{status}} and {{host}} are substituted at request time by Lua.
|
||||
const DefaultOriginErrorPageHTML = `<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>{{status}} | 源站暂时无法提供服务</title>
|
||||
<style>
|
||||
:root { color-scheme: light dark; }
|
||||
* { box-sizing: border-box; }
|
||||
body {
|
||||
margin: 0;
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
|
||||
background: #f6f7f9;
|
||||
color: #1f2937;
|
||||
}
|
||||
@media (prefers-color-scheme: dark) {
|
||||
body { background: #0f1419; color: #e5e7eb; }
|
||||
.card { background: #1a2332; border-color: #2d3a4d; box-shadow: none; }
|
||||
.status { color: #f3f4f6; }
|
||||
.muted { color: #9ca3af; }
|
||||
.host { background: #243044; color: #d1d5db; }
|
||||
}
|
||||
.card {
|
||||
width: min(32rem, calc(100% - 2rem));
|
||||
padding: 2.5rem 2rem;
|
||||
border-radius: 12px;
|
||||
background: #fff;
|
||||
border: 1px solid #e5e7eb;
|
||||
box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06);
|
||||
text-align: center;
|
||||
}
|
||||
.status {
|
||||
margin: 0;
|
||||
font-size: clamp(3.5rem, 12vw, 5.5rem);
|
||||
font-weight: 700;
|
||||
letter-spacing: -0.04em;
|
||||
line-height: 1;
|
||||
color: #111827;
|
||||
}
|
||||
h1 {
|
||||
margin: 1rem 0 0.5rem;
|
||||
font-size: 1.25rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
p { margin: 0.4rem 0; line-height: 1.6; }
|
||||
.muted { color: #6b7280; font-size: 0.95rem; }
|
||||
.host {
|
||||
display: inline-block;
|
||||
margin-top: 1.25rem;
|
||||
padding: 0.35rem 0.75rem;
|
||||
border-radius: 999px;
|
||||
background: #f3f4f6;
|
||||
color: #374151;
|
||||
font-size: 0.85rem;
|
||||
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
|
||||
word-break: break-all;
|
||||
}
|
||||
</style>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>{{status}} | OpenFlare</title>
|
||||
<style>
|
||||
* { box-sizing: border-box; margin: 0; padding: 0; }
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
|
||||
background-color: #ffffff;
|
||||
color: #333333;
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
padding: 48px 24px;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
.container {
|
||||
max-width: 600px;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 24px;
|
||||
}
|
||||
.error-code {
|
||||
font-size: 48px;
|
||||
font-weight: 700;
|
||||
color: #333333;
|
||||
line-height: 1.2;
|
||||
letter-spacing: -0.02em;
|
||||
}
|
||||
.error-description {
|
||||
font-size: 20px;
|
||||
line-height: 1.6;
|
||||
color: #666666;
|
||||
max-width: 480px;
|
||||
}
|
||||
.host {
|
||||
font-size: 14px;
|
||||
color: #999999;
|
||||
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
|
||||
word-break: break-all;
|
||||
}
|
||||
.footer {
|
||||
margin-top: 48px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
color: #999999;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
}
|
||||
.brand-icon { width: 24px; height: 24px; fill: currentColor; display: block; }
|
||||
@media (max-width: 480px) {
|
||||
.error-code { font-size: 36px; }
|
||||
.error-description { font-size: 18px; }
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<main class="card" role="main">
|
||||
<p class="status" aria-label="HTTP status">{{status}}</p>
|
||||
<h1>源站暂时无法提供服务</h1>
|
||||
<p class="muted">网关已拦截源站错误响应。请稍后重试;若问题持续,请联系站点管理员。</p>
|
||||
<p class="host">{{host}}</p>
|
||||
</main>
|
||||
<div class="container">
|
||||
<h1 class="error-code" aria-label="HTTP status">{{status}}</h1>
|
||||
<p class="error-description">
|
||||
The upstream server is unreachable. Please try again later or contact the site administrator if the problem persists.
|
||||
</p>
|
||||
<p class="host">{{host}}</p>
|
||||
<div class="footer">
|
||||
<svg class="brand-icon" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
|
||||
<path d="M13 2L3 14H12L11 22L21 10H12L13 2Z" />
|
||||
</svg>
|
||||
<span>OpenFlare</span>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
`
|
||||
|
||||
@@ -112,8 +112,8 @@ func TestRenderOriginErrorPageDefaultsEmptyHTMLAndStatusCodes(t *testing.T) {
|
||||
if !strings.Contains(html, "{{status}}") || !strings.Contains(html, "{{host}}") {
|
||||
t.Fatal("default HTML must include placeholders")
|
||||
}
|
||||
if !strings.Contains(html, "源站暂时无法提供服务") {
|
||||
t.Fatal("default HTML missing neutral copy")
|
||||
if !strings.Contains(html, "OpenFlare") || !strings.Contains(html, "upstream server is unreachable") {
|
||||
t.Fatal("default HTML missing minimalist copy")
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user