<!-- index.html -->
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8" />
<title>quietstone.xyz</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
:root {
color-scheme: dark light;
--bg: #050816;
--fg: #e5e7eb;
--accent: #38bdf8;
--accent-soft: rgba(56, 189, 248, 0.12);
}
* {
box-sizing: border-box;
}
body {
margin: 0;
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
font-family: system-ui, -apple-system, BlinkMacSystemFont, "SF Pro Text",
"PingFang SC", "Segoe UI", sans-serif;
background: radial-gradient(circle at top, #0f172a 0, var(--bg) 55%);
color: var(--fg);
}
.card {
max-width: 640px;
width: 92%;
background: rgba(15, 23, 42, 0.85);
border-radius: 24px;
padding: 28px 24px 22px;
border: 1px solid rgba(148, 163, 184, 0.35);
box-shadow:
0 20px 60px rgba(15, 23, 42, 0.8),
0 0 0 1px rgba(15, 23, 42, 0.8);
backdrop-filter: blur(18px);
}
.pill {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 10px;
border-radius: 999px;
font-size: 11px;
letter-spacing: 0.12em;
text-transform: uppercase;
background: rgba(15, 23, 42, 0.9);
border: 1px solid rgba(148, 163, 184, 0.5);
color: #9ca3af;
}
.pill-dot {
width: 6px;
height: 6px;
border-radius: 999px;
background: #22c55e;
box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.25);
}
h1 {
margin: 14px 0 8px;
font-size: 26px;
letter-spacing: 0.02em;
}
.domain {
font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo,
Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
padding: 3px 8px;
border-radius: 999px;
background: rgba(15, 23, 42, 0.9);
border: 1px dashed rgba(148, 163, 184, 0.6);
font-size: 12px;
color: #e5e7eb;
}
p {
margin: 10px 0 14px;
font-size: 14px;
line-height: 1.7;
color: #9ca3af;
}
.tags {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin: 12px 0 18px;
}
.tag {
padding: 4px 9px;
border-radius: 999px;
background: rgba(15, 23, 42, 0.9);
border: 1px solid rgba(55, 65, 81, 0.9);
font-size: 11px;
color: #9ca3af;
}
.tag span {
color: var(--accent);
}
.footer {
display: flex;
justify-content: space-between;
align-items: center;
gap: 10px;
font-size: 11px;
color: #6b7280;
border-top: 1px solid rgba(31, 41, 55, 0.9);
padding-top: 10px;
margin-top: 6px;
}
.status {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 3px 8px;
border-radius: 999px;
background: var(--accent-soft);
color: var(--accent);
font-size: 11px;
}
.status-dot {
width: 7px;
height: 7px;
border-radius: 999px;
background: var(--accent);
}
@media (max-width: 480px) {
.card {
padding: 22px 18px 18px;
border-radius: 18px;
}
h1 {
font-size: 22px;
}
}
</style>
</head>
<body>
<main class="card">
<div class="pill">
<span class="pill-dot"></span>
<span>静态站已部署到 Cloudflare Pages</span>
</div>
<h1>quietstone.xyz</h1>
<div class="domain">https://quietstone.xyz</div>
<p>
这里是一个托管在 Cloudflare Pages 上的
<strong>静态 HTML</strong> 站点示例。你可以在本地编辑
<code>index.html</code> 文件，重新上传后立即生效。
</p>
<div class="tags">
<div class="tag"><span>Cloudflare</span> · Pages</div>
<div class="tag"><span>静态站点</span> · HTML/CSS</div>
<div class="tag"><span>China</span> · 优化访问</div>
</div>
<div class="footer">
<div class="status">
<span class="status-dot"></span>
<span>Online · via Cloudflare</span>
</div>
<div>更新这个页面，只需要重新部署即可。</div>
</div>
</main>
</body>
</html>