lwt/sumi.work
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

优化服务入口页面风格

Browse Source
This commit is contained in:
lwt
2026-05-08 23:08:01 +08:00
parent 8f063aa289
commit 9848a5cdb4
3 changed files with 522 additions and 281 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+73 -28
View File
@@ -4,64 +4,109 @@
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="description" content="sumi.work 服务入口，提供 FRP、Git、Syncthing 与 Gemini 等常用服务导航。" />
<meta name="theme-color" content="#161a35" />
<meta name="theme-color" content="#f5f8ff" />
<title>sumi.work - 服务入口</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<main class="shell" aria-labelledby="site-title">
<section class="hero-panel">
<div class="brand-area">
<div class="brand-mark" aria-hidden="true">✦</div>
<div>
<header class="site-header" data-header>
<a class="brand" href="#" aria-label="sumi.work 首页">
<span class="brand-mark" aria-hidden="true">S</span>
<span>sumi.work</span>
</a>
<nav class="nav-links" aria-label="主导航">
<a href="#services">服务入口</a>
<a href="#status">连接状态</a>
<a href="https://gemini.google.com/app" target="_blank" rel="noreferrer">Gemini</a>
</nav>
</header>
<main>
<section class="hero" aria-labelledby="site-title">
<div class="hero-copy">
<p class="eyebrow">Private Service Gateway</p>
<h1 id="site-title">sumi.work</h1>
</div>
</div>
<p class="subtitle">服务入口 · HTTPS 已启用</p>
<div class="status-row" aria-label="服务状态">
<span class="status-dot"></span>
<strong>安全连接</strong>
<span>在线</span>
</div>
<p class="intro">
一个简洁的内部服务导航页。常用入口集中展示，减少记忆路径，打开即用。
<h1 id="site-title">一个更清爽的 sumi.work 服务入口</h1>
<p class="subtitle">
聚合常用内部服务与外部工具，保持入口清晰、状态明确、访问路径简单。
</p>
<div class="hero-actions">
<a class="button primary" href="#services">查看服务</a>
<a class="button secondary" href="https://gemini.google.com/app" target="_blank" rel="noreferrer">打开 Gemini</a>
</div>
<div class="status-row" id="status" aria-label="服务状态">
<span class="status-dot"></span>
<strong>HTTPS 已启用</strong>
<span>安全连接 · 在线</span>
</div>
</div>
<aside class="hero-visual" aria-label="服务概览">
<div class="visual-topbar">
<span></span>
<span></span>
<span></span>
</div>
<div class="visual-screen">
<div class="screen-heading">
<span>Service Console</span>
<strong>Online</strong>
</div>
<div class="screen-grid" aria-hidden="true">
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<div class="screen-chart" aria-hidden="true">
<i></i>
<i></i>
<i></i>
<i></i>
</div>
</div>
</aside>
</section>
<section class="services" aria-label="服务入口">
<section class="services-section" id="services" aria-labelledby="services-title">
<div class="section-heading">
<p class="eyebrow">Quick Access</p>
<h2 id="services-title">常用服务</h2>
</div>
<div class="services">
<a class="service-card accent-blue" href="/frp/" aria-label="进入 FRP 面板">
<span class="service-icon">🚀</span>
<span class="service-icon">FRP</span>
<span class="service-title">FRP 面板</span>
<span class="service-desc">内网穿透管理</span>
</a>
<a class="service-card accent-coral" href="/git/" aria-label="进入 Git 服务">
<span class="service-icon">🧑‍💻</span>
<a class="service-card accent-green" href="/git/" aria-label="进入 Git 服务">
<span class="service-icon">Git</span>
<span class="service-title">Git 服务</span>
<span class="service-desc">代码仓库</span>
</a>
<a class="service-card accent-mint" href="/sync/" aria-label="进入 Syncthing">
<span class="service-icon">🔄</span>
<a class="service-card accent-orange" href="/sync/" aria-label="进入 Syncthing">
<span class="service-icon">Sync</span>
<span class="service-title">Syncthing</span>
<span class="service-desc">文件同步</span>
</a>
<a
class="service-card service-card-wide accent-gemini"
class="service-card accent-purple"
href="https://gemini.google.com/app"
target="_blank"
rel="noreferrer"
aria-label="打开 Gemini 外部链接"
>
<span class="service-icon">✨</span>
<span class="service-icon">AI</span>
<span class="service-title">Gemini</span>
<span class="service-desc">Google AI 助手 · 外部链接</span>
</a>
</div>
</section>
</main>
script.js
+10
View File
@@ -1,5 +1,15 @@
const year = document.querySelector("#year");
const header = document.querySelector("[data-header]");
if (year) {
year.textContent = new Date().getFullYear();
}
if (header) {
const updateHeader = () => {
header.classList.toggle("is-scrolled", window.scrollY > 8);
};
updateHeader();
window.addEventListener("scroll", updateHeader, { passive: true });
}
styles.css
+421 -235
View File
@@ -1,19 +1,17 @@
:root {
color-scheme: dark;
--bg-1: #6679e2;
--bg-2: #7856b8;
--card: rgba(255, 255, 255, 0.16);
--card-strong: rgba(255, 255, 255, 0.22);
--card-line: rgba(255, 255, 255, 0.24);
--text: #ffffff;
--muted: rgba(255, 255, 255, 0.74);
--soft: rgba(255, 255, 255, 0.1);
--green: #35d69d;
--blue: #76c8ff;
--coral: #ff9b83;
--gold: #ffd35d;
--mint: #7ff0cf;
--shadow: 0 32px 90px rgba(32, 27, 81, 0.34);
color-scheme: light;
--bg: #f5f8ff;
--panel: #ffffff;
--panel-soft: #f7faff;
--text: #17233d;
--muted: #63708a;
--line: #e5ebf5;
--blue: #246bfe;
--blue-dark: #1554d1;
--green: #19b982;
--orange: #ff8a3d;
--purple: #7864f6;
--shadow: 0 22px 60px rgba(57, 83, 132, 0.13);
font-family:
Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
"PingFang SC", "Microsoft YaHei", sans-serif;
@@ -25,6 +23,7 @@
html {
min-height: 100%;
scroll-behavior: smooth;
}
body {
@@ -33,35 +32,8 @@ body {
margin: 0;
color: var(--text);
background:
radial-gradient(circle at 20% 15%, rgba(255, 255, 255, 0.2), transparent 28rem),
radial-gradient(circle at 80% 20%, rgba(87, 224, 207, 0.14), transparent 24rem),
linear-gradient(135deg, var(--bg-1), var(--bg-2));
overflow-x: hidden;
}
body::before,
body::after {
position: fixed;
z-index: -1;
pointer-events: none;
content: "";
}
body::before {
inset: 0;
background-image:
linear-gradient(rgba(255, 255, 255, 0.055) 1px, transparent 1px),
linear-gradient(90deg, rgba(255, 255, 255, 0.055) 1px, transparent 1px);
background-size: 58px 58px;
mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.75), transparent 72%);
}
body::after {
width: 42rem;
height: 42rem;
right: -14rem;
bottom: -18rem;
background: radial-gradient(circle, rgba(255, 210, 105, 0.18), transparent 68%);
radial-gradient(circle at 82% 18%, rgba(36, 107, 254, 0.13), transparent 24rem),
linear-gradient(180deg, #f7fbff 0%, var(--bg) 52%, #ffffff 100%);
}
a {
@@ -69,251 +41,432 @@ a {
text-decoration: none;
}
.shell {
display: grid;
grid-template-columns: minmax(0, 1.05fr) minmax(360px, 0.95fr);
gap: clamp(22px, 4vw, 42px);
align-items: stretch;
width: min(980px, calc(100% - 40px));
min-height: 100svh;
margin: 0 auto;
padding: clamp(34px, 8vh, 110px) 0 92px;
}
.hero-panel,
.services {
position: relative;
border: 1px solid var(--card-line);
background:
linear-gradient(145deg, rgba(255, 255, 255, 0.19), rgba(255, 255, 255, 0.1)),
var(--card);
box-shadow: var(--shadow);
backdrop-filter: blur(22px);
}
.hero-panel {
.site-header {
position: sticky;
top: 0;
z-index: 20;
display: flex;
min-height: 470px;
flex-direction: column;
justify-content: center;
padding: clamp(32px, 5vw, 54px);
border-radius: 28px;
overflow: hidden;
}
.hero-panel::after {
position: absolute;
right: -80px;
bottom: -100px;
width: 260px;
height: 260px;
border: 1px solid rgba(255, 255, 255, 0.22);
border-radius: 999px;
content: "";
}
.brand-area {
display: flex;
gap: 18px;
align-items: center;
margin-bottom: 26px;
justify-content: space-between;
width: min(1180px, calc(100% - 40px));
min-height: 72px;
margin: 0 auto;
transition:
background 180ms ease,
border-color 180ms ease,
box-shadow 180ms ease;
}
.site-header.is-scrolled {
width: 100%;
padding: 0 max(20px, calc((100% - 1180px) / 2));
background: rgba(255, 255, 255, 0.88);
border-bottom: 1px solid rgba(229, 235, 245, 0.9);
box-shadow: 0 10px 36px rgba(42, 67, 112, 0.08);
backdrop-filter: blur(18px);
}
.brand,
.nav-links,
.hero-actions,
.status-row,
.record {
display: flex;
align-items: center;
}
.brand {
gap: 10px;
color: #14233f;
font-size: 1.04rem;
font-weight: 850;
}
.brand-mark {
display: grid;
width: 68px;
height: 68px;
width: 34px;
height: 34px;
place-items: center;
flex: 0 0 auto;
color: #573e91;
font-size: 2.2rem;
background: linear-gradient(135deg, #ffe26b, #ffc23f);
border-radius: 20px;
box-shadow: 0 18px 38px rgba(255, 198, 63, 0.3);
color: #fff;
background: linear-gradient(135deg, var(--blue), #48a8ff);
border-radius: 9px;
box-shadow: 0 10px 24px rgba(36, 107, 254, 0.24);
}
.nav-links {
gap: 30px;
color: #3f4b62;
font-size: 0.95rem;
font-weight: 650;
}
.nav-links a {
transition: color 160ms ease;
}
.nav-links a:hover,
.nav-links a:focus-visible {
color: var(--blue);
}
.hero,
.services-section,
.record {
width: min(1180px, calc(100% - 40px));
margin-inline: auto;
}
.hero {
display: grid;
grid-template-columns: minmax(0, 0.95fr) minmax(360px, 1.05fr);
gap: clamp(34px, 6vw, 84px);
align-items: center;
min-height: calc(100svh - 72px);
padding: 54px 0 74px;
}
.eyebrow {
margin: 0 0 8px;
color: rgba(255, 255, 255, 0.68);
font-size: 0.76rem;
font-weight: 800;
margin: 0 0 12px;
color: var(--blue);
font-size: 0.78rem;
font-weight: 850;
letter-spacing: 0.12em;
text-transform: uppercase;
}
h1,
h2,
p {
margin-top: 0;
}
h1 {
margin: 0;
font-size: clamp(3.4rem, 8vw, 6rem);
line-height: 0.95;
max-width: 620px;
margin-bottom: 22px;
font-size: clamp(2.8rem, 6vw, 5.55rem);
line-height: 1.03;
letter-spacing: 0;
}
.subtitle {
margin: 0 0 28px;
color: rgba(255, 255, 255, 0.84);
font-size: clamp(1.08rem, 2.2vw, 1.35rem);
font-weight: 700;
max-width: 580px;
margin-bottom: 30px;
color: var(--muted);
font-size: clamp(1.06rem, 1.6vw, 1.24rem);
line-height: 1.8;
}
.hero-actions {
flex-wrap: wrap;
gap: 14px;
margin-bottom: 28px;
}
.button {
display: inline-flex;
min-height: 48px;
align-items: center;
justify-content: center;
padding: 0 22px;
border: 1px solid transparent;
border-radius: 8px;
font-weight: 800;
transition:
transform 160ms ease,
box-shadow 160ms ease,
background 160ms ease;
}
.button:hover,
.button:focus-visible {
transform: translateY(-2px);
}
.button.primary {
color: #fff;
background: var(--blue);
box-shadow: 0 14px 30px rgba(36, 107, 254, 0.24);
}
.button.primary:hover,
.button.primary:focus-visible {
background: var(--blue-dark);
}
.button.secondary {
color: var(--blue);
background: #fff;
border-color: #dbe6ff;
}
.status-row {
display: inline-flex;
width: fit-content;
align-items: center;
gap: 9px;
margin-bottom: 28px;
padding: 12px 16px;
color: #fff;
background: rgba(17, 28, 52, 0.22);
border: 1px solid rgba(53, 214, 157, 0.72);
padding: 10px 14px;
color: #2f456b;
background: rgba(255, 255, 255, 0.8);
border: 1px solid #dce7f8;
border-radius: 999px;
box-shadow: 0 12px 32px rgba(57, 83, 132, 0.08);
}
.status-row strong {
color: #143055;
font-weight: 850;
}
.status-row span:last-child {
color: rgba(255, 255, 255, 0.68);
}
.status-dot {
width: 10px;
height: 10px;
background: var(--green);
border-radius: 999px;
box-shadow: 0 0 0 7px rgba(53, 214, 157, 0.14);
box-shadow: 0 0 0 6px rgba(25, 185, 130, 0.13);
}
.intro {
max-width: 34rem;
margin: 0;
color: var(--muted);
font-size: 1rem;
line-height: 1.8;
.hero-visual {
position: relative;
min-height: 460px;
padding: 20px;
background:
linear-gradient(135deg, rgba(255, 255, 255, 0.88), rgba(238, 245, 255, 0.72)),
#fff;
border: 1px solid rgba(222, 232, 248, 0.9);
border-radius: 28px;
box-shadow: var(--shadow);
}
.hero-visual::before {
position: absolute;
inset: auto 38px 32px auto;
width: 190px;
height: 190px;
background: linear-gradient(135deg, rgba(36, 107, 254, 0.16), rgba(25, 185, 130, 0.12));
border-radius: 999px;
content: "";
}
.visual-topbar {
display: flex;
gap: 8px;
padding: 10px 8px 18px;
}
.visual-topbar span {
width: 10px;
height: 10px;
background: #d5dfef;
border-radius: 999px;
}
.visual-screen {
position: relative;
min-height: 370px;
padding: clamp(22px, 4vw, 34px);
overflow: hidden;
background:
linear-gradient(140deg, #ffffff 0%, #edf5ff 100%);
border: 1px solid #e0e9f7;
border-radius: 22px;
}
.screen-heading {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
margin-bottom: 28px;
color: #4e607b;
font-weight: 780;
}
.screen-heading strong {
color: var(--green);
}
.screen-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 16px;
max-width: 360px;
}
.screen-grid span {
min-height: 92px;
background: #fff;
border: 1px solid #e0e9f7;
border-radius: 16px;
box-shadow: 0 16px 34px rgba(57, 83, 132, 0.08);
}
.screen-grid span:nth-child(1) {
border-top: 4px solid var(--blue);
}
.screen-grid span:nth-child(2) {
border-top: 4px solid var(--green);
}
.screen-grid span:nth-child(3) {
border-top: 4px solid var(--orange);
}
.screen-grid span:nth-child(4) {
border-top: 4px solid var(--purple);
}
.screen-chart {
position: absolute;
right: 34px;
bottom: 34px;
display: flex;
align-items: end;
gap: 10px;
height: 96px;
}
.screen-chart i {
display: block;
width: 18px;
background: linear-gradient(180deg, #74a5ff, var(--blue));
border-radius: 999px 999px 6px 6px;
}
.screen-chart i:nth-child(1) {
height: 42px;
}
.screen-chart i:nth-child(2) {
height: 72px;
}
.screen-chart i:nth-child(3) {
height: 58px;
}
.screen-chart i:nth-child(4) {
height: 92px;
}
.services-section {
padding: 10px 0 86px;
}
.section-heading {
display: flex;
align-items: end;
justify-content: space-between;
gap: 24px;
margin-bottom: 22px;
}
h2 {
margin-bottom: 0;
font-size: clamp(1.9rem, 3vw, 3rem);
line-height: 1.08;
letter-spacing: 0;
}
.services {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 16px;
align-content: center;
padding: clamp(22px, 3vw, 30px);
border-radius: 28px;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 18px;
}
.service-card {
position: relative;
display: flex;
min-height: 168px;
min-height: 206px;
flex-direction: column;
justify-content: flex-end;
padding: 22px;
padding: 24px;
overflow: hidden;
background: rgba(255, 255, 255, 0.15);
border: 1px solid rgba(255, 255, 255, 0.16);
border-radius: 22px;
background: var(--panel);
border: 1px solid var(--line);
border-radius: 18px;
box-shadow: 0 16px 34px rgba(57, 83, 132, 0.08);
transition:
transform 180ms ease,
background 180ms ease,
border-color 180ms ease,
box-shadow 180ms ease;
}
.service-card::before {
.service-card::after {
position: absolute;
inset: 0;
opacity: 0;
right: -34px;
bottom: -34px;
width: 112px;
height: 112px;
border-radius: 999px;
opacity: 0.12;
content: "";
transition: opacity 180ms ease;
}
.service-card:hover,
.service-card:focus-visible {
transform: translateY(-5px);
background: var(--card-strong);
border-color: rgba(255, 255, 255, 0.36);
box-shadow: 0 20px 44px rgba(32, 27, 81, 0.2);
transform: translateY(-6px);
border-color: rgba(36, 107, 254, 0.28);
box-shadow: 0 22px 52px rgba(57, 83, 132, 0.16);
outline: none;
}
.service-card:hover::before,
.service-card:focus-visible::before {
opacity: 1;
}
.accent-blue::before {
background: linear-gradient(135deg, rgba(118, 200, 255, 0.22), transparent 62%);
}
.accent-coral::before {
background: linear-gradient(135deg, rgba(255, 155, 131, 0.24), transparent 62%);
}
.accent-gold::before {
background: linear-gradient(135deg, rgba(255, 211, 93, 0.24), transparent 62%);
}
.accent-mint::before {
background: linear-gradient(135deg, rgba(127, 240, 207, 0.24), transparent 62%);
}
.accent-gemini::before {
background:
radial-gradient(circle at 18% 20%, rgba(118, 200, 255, 0.3), transparent 28%),
radial-gradient(circle at 76% 24%, rgba(255, 155, 131, 0.26), transparent 34%),
linear-gradient(135deg, rgba(186, 140, 255, 0.26), transparent 64%);
}
.service-card-wide {
min-height: 168px;
}
.service-card-wide .service-icon {
margin-bottom: auto;
}
.service-icon,
.service-title,
.service-desc {
position: relative;
}
.service-icon {
display: grid;
width: 48px;
height: 48px;
place-items: center;
display: inline-flex;
width: fit-content;
min-width: 48px;
min-height: 36px;
align-items: center;
justify-content: center;
padding: 0 12px;
margin-bottom: auto;
font-size: 1.62rem;
background: rgba(255, 255, 255, 0.13);
border: 1px solid rgba(255, 255, 255, 0.15);
border-radius: 15px;
border-radius: 10px;
font-size: 0.82rem;
font-weight: 900;
}
.service-title {
margin-top: 26px;
font-size: 1.16rem;
margin-top: 42px;
color: #14233f;
font-size: 1.18rem;
font-weight: 900;
}
.service-desc {
margin-top: 7px;
color: rgba(255, 255, 255, 0.72);
font-size: 0.92rem;
font-weight: 650;
margin-top: 8px;
color: var(--muted);
font-size: 0.94rem;
line-height: 1.55;
}
.accent-blue .service-icon,
.accent-blue::after {
color: var(--blue);
background: rgba(36, 107, 254, 0.1);
}
.accent-green .service-icon,
.accent-green::after {
color: var(--green);
background: rgba(25, 185, 130, 0.12);
}
.accent-orange .service-icon,
.accent-orange::after {
color: var(--orange);
background: rgba(255, 138, 61, 0.12);
}
.accent-purple .service-icon,
.accent-purple::after {
color: var(--purple);
background: rgba(120, 100, 246, 0.12);
}
.record {
position: fixed;
right: 28px;
bottom: 22px;
left: 28px;
display: flex;
align-items: center;
justify-content: center;
gap: 16px;
color: rgba(255, 255, 255, 0.58);
font-size: 0.86rem;
padding: 24px 0 34px;
color: #7a8598;
font-size: 0.88rem;
border-top: 1px solid var(--line);
}
.record a {
@@ -322,50 +475,82 @@ h1 {
.record a:hover,
.record a:focus-visible {
color: rgba(255, 255, 255, 0.92);
color: var(--blue);
}
@media (max-width: 820px) {
.shell {
grid-template-columns: 1fr;
width: min(620px, calc(100% - 28px));
padding-top: 26px;
@media (max-width: 960px) {
.nav-links {
display: none;
}
.hero-panel {
.hero {
grid-template-columns: 1fr;
min-height: auto;
}
.hero-visual {
min-height: 390px;
}
.services {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 520px) {
.shell {
padding-bottom: 110px;
@media (max-width: 560px) {
.site-header,
.hero,
.services-section,
.record {
width: min(100% - 28px, 1180px);
}
.brand-area {
align-items: flex-start;
flex-direction: column;
}
.brand-mark {
width: 58px;
height: 58px;
border-radius: 17px;
.site-header {
min-height: 64px;
}
h1 {
font-size: clamp(3rem, 16vw, 4.1rem);
font-size: clamp(2.55rem, 13vw, 4rem);
}
.button {
width: 100%;
}
.status-row {
align-items: flex-start;
flex-direction: column;
border-radius: 14px;
}
.hero-visual {
min-height: auto;
padding: 14px;
border-radius: 22px;
}
.visual-screen {
min-height: 310px;
}
.screen-grid {
grid-template-columns: 1fr;
}
.screen-grid span {
min-height: 54px;
}
.screen-chart {
display: none;
}
.services {
grid-template-columns: 1fr;
}
.service-card {
min-height: 132px;
}
.record {
align-items: center;
flex-direction: column;
gap: 6px;
text-align: center;
@@ -376,6 +561,7 @@ h1 {
*,
*::before,
*::after {
scroll-behavior: auto !important;
transition-duration: 0.01ms !important;
}
}