Files
sxbh.ltd/ai-cover.html
T
Hermes CI FixandHermes AI e1a9b25afa init: sxbh.ltd 官网初始提交
- nginx 安全加固 (CSP, HSTS, 缓存策略)
- 共享 style.css
- 138个页面全部接入

Co-authored-by: Hermes AI <agent@hermes>
2026-07-11 17:29:24 +08:00

220 lines
6.4 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>今日头条封面</title>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
background: #f5f6f7;
font-family: -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
display: flex; justify-content: center; align-items: center;
min-height: 100vh;
}
.cover {
width: 1200px; height: 675px;
background: linear-gradient(160deg, #0b0e1a 0%, #121828 35%, #0d2137 70%, #0a1628 100%);
position: relative; overflow: hidden;
display: flex; flex-direction: column;
padding: 48px 64px;
}
/* 装饰背景元素 */
.orb-1 {
position: absolute; top: -120px; right: -80px;
width: 500px; height: 500px;
background: radial-gradient(circle, rgba(88,166,255,0.12) 0%, transparent 65%);
border-radius: 50%;
}
.orb-2 {
position: absolute; bottom: -150px; left: -60px;
width: 450px; height: 450px;
background: radial-gradient(circle, rgba(126,231,135,0.08) 0%, transparent 65%);
border-radius: 50%;
}
.orb-3 {
position: absolute; top: 180px; right: 200px;
width: 300px; height: 300px;
background: radial-gradient(circle, rgba(255,166,87,0.05) 0%, transparent 60%);
border-radius: 50%;
}
/* 网格线 */
.grid {
position: absolute; top: 0; left: 0; right: 0; bottom: 0;
background-image:
linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px);
background-size: 60px 60px;
}
.top-bar {
display: flex; justify-content: space-between; align-items: center;
margin-bottom: 28px; position: relative; z-index: 1;
}
.badge {
display: inline-flex; align-items: center; gap: 8px;
background: rgba(249,168,37,0.15);
border: 1px solid rgba(249,168,37,0.3);
color: #ffb74d; font-size: 12px; font-weight: 700;
padding: 5px 14px; border-radius: 4px;
letter-spacing: 1.5px;
}
.badge .dot {
width: 6px; height: 6px; background: #ffb74d;
border-radius: 50%; animation: pulse 1.5s infinite;
}
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:0.3} }
.badge-right {
display: flex; gap: 6px;
}
.badge-right span {
background: rgba(255,255,255,0.06);
color: rgba(255,255,255,0.5); font-size: 11px;
padding: 4px 10px; border-radius: 3px;
}
h1 {
font-size: 42px; color: #fff; font-weight: 800;
line-height: 1.25; margin-bottom: 6px;
position: relative; z-index: 1;
letter-spacing: 1px;
}
h1 .hl-grad {
background: linear-gradient(135deg, #58a6ff 0%, #7ee787 100%);
-webkit-background-clip: text; -webkit-text-fill-color: transparent;
background-clip: text;
}
.subtitle {
font-size: 17px; color: rgba(255,255,255,0.6);
line-height: 1.6; margin-top: 6px; margin-bottom: 22px;
position: relative; z-index: 1;
max-width: 700px;
}
/* GitHub 数据卡片 */
.stats {
display: flex; gap: 16px; position: relative; z-index: 1;
margin-bottom: 16px;
}
.stat-card {
background: rgba(255,255,255,0.06);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 8px; padding: 12px 16px;
backdrop-filter: blur(4px); flex: 1;
}
.stat-card .name {
font-size: 11px; color: rgba(255,255,255,0.4);
margin-bottom: 2px; letter-spacing: 0.5px;
}
.stat-card .value {
font-size: 22px; font-weight: 700; color: #fff;
}
.stat-card .value .num-glow {
color: #58a6ff;
}
.stat-card .meta {
font-size: 10px; color: rgba(255,255,255,0.35);
margin-top: 1px;
}
.stat-card .warn {
font-size: 10px; color: #ffb74d; margin-top: 1px;
}
/* 底部 */
.bottom {
position: absolute; bottom: 32px; left: 64px; right: 64px;
display: flex; justify-content: space-between; align-items: center;
z-index: 1;
}
.bottom .left {
display: flex; align-items: center; gap: 12px;
}
.bottom .left .divider {
width: 1px; height: 14px; background: rgba(255,255,255,0.15);
}
.bottom .left span {
color: rgba(255,255,255,0.35); font-size: 12px;
}
.bottom .right {
color: rgba(255,255,255,0.3); font-size: 11px;
letter-spacing: 1px;
}
/* 安全警告标签 */
.security-tag {
position: absolute; bottom: 80px; right: 64px;
background: rgba(255,61,61,0.1); border: 1px solid rgba(255,61,61,0.2);
color: #ff6b6b; font-size: 10px;
padding: 4px 10px; border-radius: 4px;
z-index: 1; letter-spacing: 0.5px;
}
</style>
<link rel="stylesheet" href="/style.css">
</head>
<body>
<div class="cover">
<div class="grid"></div>
<div class="orb-1"></div>
<div class="orb-2"></div>
<div class="orb-3"></div>
<div class="top-bar">
<div class="badge">
<span class="dot"></span>
GITHUB 开源生态 × 企业AI
</div>
<div class="badge-right">
<span>安全性评估</span>
<span>2026.06</span>
</div>
</div>
<h1>
2026年企业AI的<br>
<span class="hl-grad">五个关键词</span>
</h1>
<div class="subtitle">
Loop Engineering · 判断资产 · Agent基础设施<br>
内容架构 · 从表演到价值
</div>
<div class="stats">
<div class="stat-card">
<div class="name">🔥 开源 Agent 框架</div>
<div class="value"><span class="num-glow">obra/superpowers</span></div>
<div class="meta">⭐ 238K · MIT · 2025.10 至今</div>
</div>
<div class="stat-card">
<div class="name">🤖 你正在运行的平台</div>
<div class="value"><span class="num-glow">Hermes Agent</span></div>
<div class="meta">⭐ 203K · #2 AI Agent 项目</div>
</div>
<div class="stat-card">
<div class="name">⚠️ 安全风险警示</div>
<div class="value"><span class="num-glow">54%</span></div>
<div class="meta">社区Skill存在敏感数据暴露</div>
<div class="warn">Snyk 扫描 3,984 个 Skill</div>
</div>
</div>
<div class="bottom">
<div class="left">
<span>多源整合分析</span>
<span class="divider"></span>
<span>5 篇文章串联底层逻辑</span>
<span class="divider"></span>
<span>中欧教授 × 阿里云 × 开源社区</span>
</div>
<div class="right">2026.06.25</div>
</div>
<div class="security-tag">🔒 开源软件安全评估:Apache-2.0 / MIT 主流 · 需警惕 54% Skill 泄露风险</div>
</div>
</body>
</html>