<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{% block title %}rssume{% endblock %}</title>
<style>
:root {
--canvas: #ffffff;
--canvas-soft: #fafafa;
--canvas-soft-2: #f5f5f5;
--ink: #171717;
--body: #4d4d4d;
--mute: #888888;
--hairline: #ebebeb;
--hairline-strong: #a1a1a1;
--primary: #171717;
--on-primary: #ffffff;
--link: #0070f3;
--link-deep: #0761d1;
--success: #0070f3;
--error: #ee0000;
--warning: #f5a623;
--font-sans: Geist, Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
--font-mono: "JetBrains Mono", "Fira Code", ui-monospace, monospace;
--rounded-sm: 4px;
--rounded-md: 6px;
--rounded-lg: 8px;
--rounded-xl: 12px;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body {
font-family: var(--font-sans);
font-size: 16px;
line-height: 1.5;
color: var(--ink);
background: var(--canvas);
-webkit-font-smoothing: antialiased;
}
header {
background: var(--canvas);
border-bottom: 1px solid var(--hairline);
padding: 0 24px;
height: 56px;
display: flex;
align-items: center;
justify-content: space-between;
position: sticky;
top: 0;
z-index: 100;
}
header .logo {
font-size: 20px;
font-weight: 600;
color: var(--ink);
text-decoration: none;
letter-spacing: -0.5px;
}
header nav { display: flex; gap: 24px; align-items: center; }
header nav a {
color: var(--body);
text-decoration: none;
font-size: 14px;
font-weight: 400;
transition: color 0.15s;
}
header nav a:hover { color: var(--ink); }
header nav a.active { color: var(--ink); font-weight: 500; }
main {
max-width: 1280px;
margin: 0 auto;
padding: 32px 24px;
}
h1 {
font-size: 32px;
font-weight: 600;
line-height: 1.25;
letter-spacing: -0.96px;
margin-bottom: 8px;
}
h2 {
font-size: 24px;
font-weight: 600;
line-height: 1.3;
letter-spacing: -0.5px;
margin-bottom: 16px;
}
h3 {
font-size: 18px;
font-weight: 500;
line-height: 1.4;
margin-bottom: 8px;
}
.subtitle { color: var(--mute); font-size: 16px; margin-bottom: 32px; }
.card {
background: var(--canvas);
border: 1px solid var(--hairline);
border-radius: var(--rounded-lg);
padding: 24px;
margin-bottom: 16px;
}
.card:hover { border-color: var(--hairline-strong); }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.stats-bar {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
margin-bottom: 32px;
}
.stat-card {
background: var(--canvas-soft);
border: 1px solid var(--hairline);
border-radius: var(--rounded-lg);
padding: 20px;
text-align: center;
}
.stat-card .number {
font-size: 32px;
font-weight: 600;
color: var(--ink);
letter-spacing: -0.5px;
}
.stat-card .label {
font-size: 14px;
color: var(--mute);
margin-top: 4px;
}
table {
width: 100%;
border-collapse: collapse;
}
th, td {
text-align: left;
padding: 12px 16px;
border-bottom: 1px solid var(--hairline);
font-size: 14px;
}
th {
font-weight: 500;
color: var(--mute);
font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.5px;
}
tr:hover { background: var(--canvas-soft); }
.btn {
display: inline-flex;
align-items: center;
padding: 8px 14px;
font-family: var(--font-sans);
font-size: 14px;
font-weight: 500;
line-height: 1.2;
border-radius: var(--rounded-md);
border: 1px solid var(--hairline);
background: var(--canvas);
color: var(--ink);
cursor: pointer;
text-decoration: none;
transition: all 0.15s;
}
.btn:hover { border-color: var(--hairline-strong); background: var(--canvas-soft); }
.btn-primary { background: var(--primary); color: var(--on-primary); border-color: var(--primary); }
.btn-primary:hover { background: #333; border-color: #333; }
.badge {
display: inline-flex;
padding: 2px 8px;
font-size: 12px;
font-weight: 400;
border-radius: 9999px;
background: var(--canvas-soft-2);
color: var(--mute);
}
.badge-success { background: #d3e5ff; color: var(--link-deep); }
.badge-warning { background: #ffefcf; color: #ab570a; }
.article-item { margin-bottom: 12px; }
.article-meta { font-size: 12px; color: var(--mute); margin-top: 4px; }
.empty-state {
text-align: center;
padding: 64px 24px;
color: var(--mute);
}
.empty-state h3 { color: var(--ink); margin-bottom: 8px; }
@media (max-width: 768px) {
.stats-bar, .grid-2, .grid-3 { grid-template-columns: 1fr; }
main { padding: 16px; }
h1 { font-size: 24px; }
}
</style>
<script src="https://unpkg.com/htmx.org@2.0.4" defer></script>
</head>
<body>
<header>
<a href="/panel" class="logo">rssume</a>
<nav>
<a href="/panel" class="{% if title and 'Dashboard' in title %}active{% endif %}">Dashboard</a>
<a href="/panel/monitor" class="{% if title and 'Monitor' in title %}active{% endif %}">Monitor</a>
<a href="/panel/settings" class="{% if title and 'Settings' in title %}active{% endif %}">Settings</a>
</nav>
</header>
<main>
{% block content %}{% endblock %}
</main>
</body>
</html>