优化服务入口页面风格
This commit is contained in:
+91
-46
@@ -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>
|
||||
<p class="eyebrow">Private Service Gateway</p>
|
||||
<h1 id="site-title">sumi.work</h1>
|
||||
<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>
|
||||
<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>
|
||||
|
||||
<p class="subtitle">服务入口 · HTTPS 已启用</p>
|
||||
|
||||
<div class="status-row" aria-label="服务状态">
|
||||
<span class="status-dot"></span>
|
||||
<strong>安全连接</strong>
|
||||
<span>在线</span>
|
||||
</div>
|
||||
|
||||
<p class="intro">
|
||||
一个简洁的内部服务导航页。常用入口集中展示，减少记忆路径，打开即用。
|
||||
</p>
|
||||
<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="服务入口">
|
||||
<a class="service-card accent-blue" href="/frp/" aria-label="进入 FRP 面板">
|
||||
<span class="service-icon">🚀</span>
|
||||
<span class="service-title">FRP 面板</span>
|
||||
<span class="service-desc">内网穿透管理</span>
|
||||
</a>
|
||||
<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>
|
||||
|
||||
<a class="service-card accent-coral" href="/git/" aria-label="进入 Git 服务">
|
||||
<span class="service-icon">🧑💻</span>
|
||||
<span class="service-title">Git 服务</span>
|
||||
<span class="service-desc">代码仓库</span>
|
||||
</a>
|
||||
<div class="services">
|
||||
<a class="service-card accent-blue" href="/frp/" aria-label="进入 FRP 面板">
|
||||
<span class="service-icon">FRP</span>
|
||||
<span class="service-title">FRP 面板</span>
|
||||
<span class="service-desc">内网穿透管理</span>
|
||||
</a>
|
||||
|
||||
<a class="service-card accent-mint" href="/sync/" aria-label="进入 Syncthing">
|
||||
<span class="service-icon">🔄</span>
|
||||
<span class="service-title">Syncthing</span>
|
||||
<span class="service-desc">文件同步</span>
|
||||
</a>
|
||||
<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 service-card-wide accent-gemini"
|
||||
href="https://gemini.google.com/app"
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
aria-label="打开 Gemini 外部链接"
|
||||
>
|
||||
<span class="service-icon">✨</span>
|
||||
<span class="service-title">Gemini</span>
|
||||
<span class="service-desc">Google AI 助手 · 外部链接</span>
|
||||
</a>
|
||||
<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 accent-purple"
|
||||
href="https://gemini.google.com/app"
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
aria-label="打开 Gemini 外部链接"
|
||||
>
|
||||
<span class="service-icon">AI</span>
|
||||
<span class="service-title">Gemini</span>
|
||||
<span class="service-desc">Google AI 助手 · 外部链接</span>
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user