98 lines
2.6 KiB
HTML
98 lines
2.6 KiB
HTML
<!doctype html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<meta name="theme-color" content="#0ea5e9" />
|
|
<title>离线 - 萌芽漂流瓶</title>
|
|
<style>
|
|
:root {
|
|
color-scheme: light dark;
|
|
--bg: #0b1020;
|
|
--fg: #e5e7eb;
|
|
--muted: rgba(229, 231, 235, 0.7);
|
|
--accent: #0ea5e9;
|
|
}
|
|
body {
|
|
margin: 0;
|
|
min-height: 100vh;
|
|
display: grid;
|
|
place-items: center;
|
|
background: radial-gradient(
|
|
1200px 800px at 20% 10%,
|
|
rgba(14, 165, 233, 0.2),
|
|
transparent 60%
|
|
),
|
|
radial-gradient(
|
|
900px 700px at 80% 90%,
|
|
rgba(99, 102, 241, 0.18),
|
|
transparent 55%
|
|
),
|
|
var(--bg);
|
|
color: var(--fg);
|
|
font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto,
|
|
Helvetica, Arial, 'Apple Color Emoji', 'Segoe UI Emoji';
|
|
}
|
|
.card {
|
|
width: min(520px, calc(100vw - 32px));
|
|
padding: 20px 18px;
|
|
border-radius: 16px;
|
|
background: rgba(255, 255, 255, 0.06);
|
|
border: 1px solid rgba(255, 255, 255, 0.12);
|
|
box-shadow: 0 18px 60px rgba(0, 0, 0, 0.35);
|
|
backdrop-filter: blur(10px);
|
|
}
|
|
h1 {
|
|
margin: 0 0 8px;
|
|
font-size: 18px;
|
|
font-weight: 700;
|
|
letter-spacing: 0.2px;
|
|
}
|
|
p {
|
|
margin: 0;
|
|
line-height: 1.6;
|
|
color: var(--muted);
|
|
font-size: 14px;
|
|
}
|
|
.actions {
|
|
margin-top: 14px;
|
|
display: flex;
|
|
gap: 10px;
|
|
flex-wrap: wrap;
|
|
}
|
|
a,
|
|
button {
|
|
appearance: none;
|
|
border: 0;
|
|
border-radius: 999px;
|
|
padding: 10px 14px;
|
|
font-size: 14px;
|
|
cursor: pointer;
|
|
color: #001018;
|
|
background: linear-gradient(180deg, #22c3ff, #0ea5e9);
|
|
font-weight: 700;
|
|
text-decoration: none;
|
|
}
|
|
button.secondary {
|
|
color: var(--fg);
|
|
background: rgba(255, 255, 255, 0.08);
|
|
border: 1px solid rgba(255, 255, 255, 0.14);
|
|
font-weight: 600;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<main class="card">
|
|
<h1>当前处于离线状态</h1>
|
|
<p>网络连接不可用，已为你保留基础页面。恢复网络后可继续使用完整功能。</p>
|
|
<div class="actions">
|
|
<a href="/">返回首页</a>
|
|
<button class="secondary" type="button" onclick="location.reload()">
|
|
重新加载
|
|
</button>
|
|
</div>
|
|
</main>
|
|
</body>
|
|
</html>
|
|
|