41 lines
2.2 KiB
HTML
41 lines
2.2 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="#ea580c">
|
|
<title>离线</title>
|
|
<style>
|
|
:root { color-scheme: light; --bg: #fff7ed; --card: #ffffff; --text: #1e293b; --muted: #64748b; --brand: #ea580c; }
|
|
* { box-sizing: border-box; }
|
|
body { margin: 0; min-height: 100vh; display: grid; place-items: center; padding: 24px;
|
|
background: linear-gradient(145deg, var(--bg) 0%, #ffedd5 50%, #fed7aa 100%);
|
|
font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Segoe UI", system-ui, sans-serif;
|
|
color: var(--text); }
|
|
.panel { width: min(520px, 100%); background: var(--card); border-radius: 10px;
|
|
box-shadow: 0 10px 30px rgba(2, 6, 23, 0.12); padding: 28px 24px; text-align: center; }
|
|
.logo { width: 72px; height: 72px; border-radius: 10px; margin: 0 auto 14px;
|
|
background: linear-gradient(145deg, #fb923c, #ea580c); display: grid; place-items: center;
|
|
color: #fff; font-size: 34px; font-weight: 700; }
|
|
h1 { margin: 0 0 8px; font-size: 1.4rem; }
|
|
p { margin: 0; color: var(--muted); line-height: 1.6; font-size: 0.95rem; }
|
|
.actions { margin-top: 18px; display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; }
|
|
button { border: none; border-radius: 10px; padding: 10px 16px; font-size: 0.9rem; cursor: pointer; transition: all 0.2s ease; }
|
|
.retry { background: var(--brand); color: white; box-shadow: 0 6px 16px rgba(234, 88, 12, 0.25); }
|
|
.retry:hover { transform: translateY(-1px); }
|
|
.back { background: #e2e8f0; color: #0f172a; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<main class="panel">
|
|
<div class="logo" id="offline-logo">萌</div>
|
|
<h1 id="offline-title">当前离线，已切换离线页面</h1>
|
|
<p>网络恢复后，刷新页面即可继续访问最新数据。已缓存的页面资源可以继续使用。</p>
|
|
<div class="actions">
|
|
<button class="retry" type="button" onclick="window.location.reload()">重新尝试</button>
|
|
<button class="back" type="button" onclick="window.history.back()">返回上页</button>
|
|
</div>
|
|
</main>
|
|
</body>
|
|
</html>
|