wehub-resource-sync
542 lines
15 KiB
HTML
542 lines
15 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<title>HTML Anything · Cover</title>
|
|
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
|
<link href="https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;0,9..144,600;0,9..144,700;1,9..144,500;1,9..144,600;1,9..144,700&family=Inter:wght@300;400;500;600&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet" />
|
|
<style>
|
|
:root {
|
|
--bg: #14100c;
|
|
--bg-soft: #1c1712;
|
|
--ink: #efe7d6;
|
|
--ink-mute: #b9ad97;
|
|
--ink-faint: #6f6555;
|
|
--rule: #2a2219;
|
|
--accent: #e87d3e;
|
|
--accent-soft: #d96b2c;
|
|
}
|
|
|
|
* { box-sizing: border-box; }
|
|
|
|
html, body { margin: 0; padding: 0; }
|
|
|
|
body {
|
|
background: var(--bg);
|
|
color: var(--ink);
|
|
font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
min-height: 100vh;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.cover {
|
|
width: 1920px;
|
|
height: 1080px;
|
|
flex: 0 0 auto;
|
|
transform: scale(min(calc(100vw / 1920), calc(100vh / 1080)));
|
|
transform-origin: center center;
|
|
position: relative;
|
|
background:
|
|
radial-gradient(1100px 700px at 78% 38%, rgba(232,125,62,0.10) 0%, rgba(232,125,62,0.02) 40%, transparent 70%),
|
|
radial-gradient(900px 600px at 12% 80%, rgba(232,125,62,0.05) 0%, transparent 60%),
|
|
linear-gradient(180deg, #181208 0%, #14100c 45%, #100b07 100%);
|
|
overflow: hidden;
|
|
isolation: isolate;
|
|
}
|
|
|
|
/* faint grid texture */
|
|
.cover::before {
|
|
content: "";
|
|
position: absolute;
|
|
inset: 0;
|
|
background-image:
|
|
linear-gradient(to right, rgba(255,236,200,0.025) 1px, transparent 1px),
|
|
linear-gradient(to bottom, rgba(255,236,200,0.025) 1px, transparent 1px);
|
|
background-size: 80px 80px;
|
|
pointer-events: none;
|
|
z-index: 0;
|
|
}
|
|
|
|
/* grain / film noise */
|
|
.cover::after {
|
|
content: "";
|
|
position: absolute;
|
|
inset: 0;
|
|
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 0.95 0 0 0 0 0.85 0 0 0 0.10 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
|
|
mix-blend-mode: overlay;
|
|
opacity: 0.45;
|
|
pointer-events: none;
|
|
z-index: 0;
|
|
}
|
|
|
|
/* ── top bar ──────────────────────────────────────────────── */
|
|
.topbar {
|
|
position: absolute;
|
|
top: 56px;
|
|
left: 80px;
|
|
right: 80px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
font-family: "JetBrains Mono", ui-monospace, monospace;
|
|
font-size: 13px;
|
|
letter-spacing: 0.18em;
|
|
color: var(--ink-mute);
|
|
text-transform: uppercase;
|
|
z-index: 2;
|
|
}
|
|
.topbar .center {
|
|
color: var(--ink);
|
|
letter-spacing: 0.14em;
|
|
}
|
|
.topbar .dot {
|
|
display: inline-block;
|
|
width: 8px;
|
|
height: 8px;
|
|
border-radius: 50%;
|
|
background: var(--accent);
|
|
box-shadow: 0 0 12px rgba(232,125,62,0.6);
|
|
margin-right: 10px;
|
|
vertical-align: middle;
|
|
}
|
|
.topbar .right span + span { margin-left: 6px; }
|
|
.topbar .sep { color: var(--ink-faint); margin: 0 8px; }
|
|
|
|
.hairline {
|
|
position: absolute;
|
|
top: 96px;
|
|
left: 80px;
|
|
right: 80px;
|
|
height: 1px;
|
|
background: linear-gradient(to right, transparent, var(--rule) 8%, var(--rule) 92%, transparent);
|
|
z-index: 1;
|
|
}
|
|
|
|
/* ── left column ──────────────────────────────────────────── */
|
|
.left {
|
|
position: absolute;
|
|
top: 160px;
|
|
left: 80px;
|
|
width: 880px;
|
|
z-index: 3;
|
|
}
|
|
|
|
.badges {
|
|
display: flex;
|
|
gap: 14px;
|
|
margin-bottom: 40px;
|
|
}
|
|
.badge {
|
|
font-family: "JetBrains Mono", ui-monospace, monospace;
|
|
font-size: 13px;
|
|
letter-spacing: 0.16em;
|
|
text-transform: uppercase;
|
|
padding: 8px 18px;
|
|
border-radius: 999px;
|
|
color: var(--ink);
|
|
border: 1px solid var(--rule);
|
|
background: rgba(40,30,20,0.5);
|
|
}
|
|
.badge.accent {
|
|
color: var(--accent);
|
|
border-color: rgba(232,125,62,0.5);
|
|
background: rgba(232,125,62,0.10);
|
|
}
|
|
.badge::before {
|
|
content: "•";
|
|
color: var(--accent);
|
|
margin-right: 8px;
|
|
}
|
|
|
|
h1.headline {
|
|
font-family: "Fraunces", "Playfair Display", Georgia, serif;
|
|
font-weight: 500;
|
|
font-size: 88px;
|
|
line-height: 1.02;
|
|
letter-spacing: -0.025em;
|
|
color: var(--ink);
|
|
margin: 0 0 32px 0;
|
|
font-variation-settings: "opsz" 144;
|
|
}
|
|
h1.headline em {
|
|
font-style: italic;
|
|
color: var(--accent);
|
|
font-weight: 600;
|
|
}
|
|
h1.headline .ul {
|
|
display: inline-block;
|
|
position: relative;
|
|
}
|
|
h1.headline .ul::after {
|
|
content: "";
|
|
position: absolute;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 8px;
|
|
height: 4px;
|
|
background: var(--accent);
|
|
border-radius: 2px;
|
|
}
|
|
|
|
.lede {
|
|
max-width: 680px;
|
|
font-size: 17px;
|
|
line-height: 1.6;
|
|
color: var(--ink-mute);
|
|
font-weight: 300;
|
|
letter-spacing: 0.005em;
|
|
}
|
|
.lede + .lede { margin-top: 14px; }
|
|
.lede b {
|
|
color: var(--ink);
|
|
font-weight: 600;
|
|
}
|
|
.lede em {
|
|
font-style: italic;
|
|
color: var(--accent);
|
|
font-weight: 500;
|
|
}
|
|
|
|
/* ── stats (inside left column) ───────────────────────────── */
|
|
.stats {
|
|
margin-top: 44px;
|
|
z-index: 3;
|
|
}
|
|
.stats-rule {
|
|
height: 1px;
|
|
background: linear-gradient(to right, var(--rule) 0%, var(--rule) 90%, transparent);
|
|
margin-bottom: 24px;
|
|
}
|
|
.stats-row {
|
|
display: flex;
|
|
gap: 56px;
|
|
}
|
|
.stat .num {
|
|
font-family: "Fraunces", serif;
|
|
font-weight: 500;
|
|
font-size: 52px;
|
|
line-height: 1;
|
|
letter-spacing: -0.02em;
|
|
color: var(--ink);
|
|
font-variation-settings: "opsz" 144;
|
|
}
|
|
.stat.zero .num { color: var(--accent); font-style: italic; }
|
|
.stat .label {
|
|
margin-top: 10px;
|
|
font-family: "JetBrains Mono", monospace;
|
|
font-size: 10px;
|
|
letter-spacing: 0.22em;
|
|
text-transform: uppercase;
|
|
color: var(--ink-mute);
|
|
line-height: 1.4;
|
|
}
|
|
|
|
/* ── bottom hairline ──────────────────────────────────────── */
|
|
.bottom-rule {
|
|
position: absolute;
|
|
left: 80px;
|
|
right: 80px;
|
|
bottom: 56px;
|
|
height: 1px;
|
|
background: linear-gradient(to right, transparent, var(--rule) 8%, var(--rule) 92%, transparent);
|
|
z-index: 1;
|
|
}
|
|
.bottom-meta {
|
|
position: absolute;
|
|
left: 80px;
|
|
right: 80px;
|
|
bottom: 30px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
font-family: "JetBrains Mono", monospace;
|
|
font-size: 11px;
|
|
letter-spacing: 0.2em;
|
|
text-transform: uppercase;
|
|
color: var(--ink-faint);
|
|
z-index: 2;
|
|
}
|
|
|
|
/* ── right column · floating screenshots ──────────────────── */
|
|
.stage {
|
|
position: absolute;
|
|
top: 160px;
|
|
right: 60px;
|
|
width: 1200px;
|
|
height: 760px;
|
|
z-index: 2;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.card {
|
|
position: absolute;
|
|
border-radius: 14px;
|
|
overflow: hidden;
|
|
background: #221b14;
|
|
box-shadow:
|
|
0 30px 60px -16px rgba(0,0,0,0.7),
|
|
0 14px 30px -8px rgba(0,0,0,0.55),
|
|
0 0 0 1px rgba(255,236,200,0.06) inset;
|
|
}
|
|
.card .chrome {
|
|
position: absolute;
|
|
top: 0; left: 0; right: 0;
|
|
height: 30px;
|
|
background: linear-gradient(180deg, rgba(28,22,16,0.92), rgba(20,15,11,0.88));
|
|
border-bottom: 1px solid rgba(255,236,200,0.05);
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 0 12px;
|
|
z-index: 2;
|
|
}
|
|
.card .chrome .tag {
|
|
font-family: "JetBrains Mono", monospace;
|
|
font-size: 9px;
|
|
letter-spacing: 0.22em;
|
|
text-transform: uppercase;
|
|
color: var(--ink-mute);
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
.card .chrome .tag .sep { color: var(--ink-faint); margin: 0 6px; }
|
|
.card .chrome .dots {
|
|
display: flex; gap: 5px; margin-right: 10px;
|
|
flex-shrink: 0;
|
|
}
|
|
.card .chrome .dots i {
|
|
width: 7px; height: 7px; border-radius: 50%;
|
|
background: #3a2e22;
|
|
display: inline-block;
|
|
}
|
|
.card img {
|
|
display: block;
|
|
object-fit: cover;
|
|
object-position: center top;
|
|
margin-top: 30px;
|
|
width: 100%;
|
|
height: calc(100% - 30px);
|
|
}
|
|
|
|
/* individual placements — 3 cards, spread across full right half */
|
|
.card-1 { /* deck-guizang-editorial — back, top-right */
|
|
top: 0;
|
|
right: 100px;
|
|
width: 540px;
|
|
height: 335px;
|
|
transform: rotate(-4deg);
|
|
z-index: 1;
|
|
}
|
|
.card-2 { /* deck-swiss-international — front, mid, leftmost-reaching */
|
|
top: 200px;
|
|
right: 380px;
|
|
width: 600px;
|
|
height: 375px;
|
|
transform: rotate(2.5deg);
|
|
z-index: 3;
|
|
}
|
|
.card-3 { /* video-hyperframes — bottom-right */
|
|
top: 420px;
|
|
right: 30px;
|
|
width: 540px;
|
|
height: 335px;
|
|
transform: rotate(-2deg);
|
|
z-index: 2;
|
|
}
|
|
|
|
/* ── orange "open source" sphere ──────────────────────────── */
|
|
.sphere {
|
|
position: absolute;
|
|
top: 150px;
|
|
right: 110px;
|
|
width: 86px;
|
|
height: 86px;
|
|
border-radius: 50%;
|
|
background:
|
|
radial-gradient(circle at 32% 28%, #ffb988 0%, #ec8c4b 30%, #c95f24 65%, #8c3d12 100%);
|
|
box-shadow:
|
|
0 0 60px 8px rgba(232,125,62,0.35),
|
|
0 0 120px 20px rgba(232,125,62,0.12),
|
|
inset -8px -10px 24px rgba(0,0,0,0.35);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
z-index: 5;
|
|
}
|
|
.sphere span {
|
|
font-family: "JetBrains Mono", monospace;
|
|
font-size: 11px;
|
|
font-weight: 500;
|
|
letter-spacing: 0.16em;
|
|
line-height: 1.15;
|
|
color: #1a0e06;
|
|
text-align: center;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
/* mid-canvas pull quote bridging headline & cards */
|
|
.pullquote {
|
|
position: absolute;
|
|
left: 980px;
|
|
top: 760px;
|
|
width: 360px;
|
|
z-index: 4;
|
|
transform: rotate(-1.5deg);
|
|
}
|
|
.pullquote .mark {
|
|
font-family: "Fraunces", serif;
|
|
font-style: italic;
|
|
font-size: 96px;
|
|
line-height: 0.6;
|
|
color: var(--accent);
|
|
opacity: 0.55;
|
|
margin-bottom: -10px;
|
|
}
|
|
.pullquote .q {
|
|
font-family: "Fraunces", serif;
|
|
font-style: italic;
|
|
font-weight: 500;
|
|
font-size: 22px;
|
|
line-height: 1.35;
|
|
color: var(--ink);
|
|
letter-spacing: 0.005em;
|
|
}
|
|
.pullquote .attr {
|
|
margin-top: 14px;
|
|
font-family: "JetBrains Mono", monospace;
|
|
font-size: 10px;
|
|
letter-spacing: 0.2em;
|
|
text-transform: uppercase;
|
|
color: var(--ink-faint);
|
|
}
|
|
|
|
/* watermark serial number on left edge */
|
|
.serial {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 28px;
|
|
transform: translateY(-50%) rotate(-90deg);
|
|
transform-origin: left center;
|
|
font-family: "JetBrains Mono", monospace;
|
|
font-size: 11px;
|
|
letter-spacing: 0.4em;
|
|
color: var(--ink-faint);
|
|
text-transform: uppercase;
|
|
z-index: 2;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="cover">
|
|
|
|
<!-- top metadata bar -->
|
|
<div class="topbar">
|
|
<div class="left-meta">HTML ANYTHING · MANIFESTO · 2026 EDITION</div>
|
|
<div class="center"><span class="dot"></span>html.anything</div>
|
|
<div class="right">
|
|
<span>COVER</span><span class="sep">·</span><span>01 / 09</span><span class="sep">·</span><span>LOCAL AI · ZERO API KEY</span>
|
|
</div>
|
|
</div>
|
|
<div class="hairline"></div>
|
|
|
|
<!-- LEFT column -->
|
|
<div class="left">
|
|
<div class="badges">
|
|
<div class="badge accent">Apache 2.0</div>
|
|
<div class="badge">Local-first · Zero API key</div>
|
|
</div>
|
|
|
|
<h1 class="headline">
|
|
Markdown is the draft.<br/>
|
|
<em>HTML</em> is what humans <span class="ul">read</span>.
|
|
</h1>
|
|
|
|
<p class="lede">
|
|
The <b>agentic HTML editor</b> — in the agentic era, you don't hand-edit
|
|
docs anymore, so your local <b>Claude Code</b> (and 7 other agent CLIs)
|
|
should write the format the reader actually wants: <em>HTML</em>, not
|
|
Markdown. One file, ready to paste into <b>WeChat · X · Zhihu</b>.
|
|
</p>
|
|
|
|
<div class="stats">
|
|
<div class="stats-rule"></div>
|
|
<div class="stats-row">
|
|
<div class="stat">
|
|
<div class="num">75</div>
|
|
<div class="label">Composable<br/>Skills</div>
|
|
</div>
|
|
<div class="stat">
|
|
<div class="num">09</div>
|
|
<div class="label">Surface<br/>Modes</div>
|
|
</div>
|
|
<div class="stat">
|
|
<div class="num">08</div>
|
|
<div class="label">Coding<br/>Agents</div>
|
|
</div>
|
|
<div class="stat zero">
|
|
<div class="num">0</div>
|
|
<div class="label">API Key /<br/>Vendor Cloud</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- RIGHT column · floating cards -->
|
|
<div class="stage">
|
|
|
|
<!-- back: deck-guizang-editorial -->
|
|
<div class="card card-1">
|
|
<div class="chrome">
|
|
<div class="dots"><i></i><i></i><i></i></div>
|
|
<div class="tag">DECK<span class="sep">·</span>GUIZANG EDITORIAL</div>
|
|
</div>
|
|
<img src="screenshots/skills/deck-guizang-editorial.png" alt="" />
|
|
</div>
|
|
|
|
<!-- front-middle: deck-swiss-international -->
|
|
<div class="card card-2">
|
|
<div class="chrome">
|
|
<div class="dots"><i></i><i></i><i></i></div>
|
|
<div class="tag">DECK<span class="sep">·</span>SWISS INTERNATIONAL</div>
|
|
</div>
|
|
<img src="screenshots/skills/deck-swiss-international.png" alt="" />
|
|
</div>
|
|
|
|
<!-- bottom-right: video-hyperframes -->
|
|
<div class="card card-3">
|
|
<div class="chrome">
|
|
<div class="dots"><i></i><i></i><i></i></div>
|
|
<div class="tag">VIDEO<span class="sep">·</span>HYPERFRAMES STORYBOARD</div>
|
|
</div>
|
|
<img src="screenshots/skills/video-hyperframes.png" alt="" />
|
|
</div>
|
|
</div>
|
|
|
|
<!-- mid-canvas pull quote bridging headline & right cards -->
|
|
<div class="pullquote">
|
|
<div class="mark">“</div>
|
|
<div class="q">Markdown is good for the writer.<br/>HTML is good for the reader.</div>
|
|
<div class="attr">— Claude Code Team · 2026</div>
|
|
</div>
|
|
|
|
<!-- "open source" sphere -->
|
|
<div class="sphere"><span>OPEN<br/>SOURCE</span></div>
|
|
|
|
<!-- bottom hairline + meta -->
|
|
<div class="bottom-rule"></div>
|
|
<div class="bottom-meta">
|
|
<div>GITHUB.COM/PFTOM/HTML-EVERYTHING</div>
|
|
<div>MARKDOWN → HTML · DECK · POSTER · VIDEO FRAME</div>
|
|
<div>APACHE-2.0 · 2026</div>
|
|
</div>
|
|
|
|
<div class="serial">HE-2026 · COVER · 0001</div>
|
|
</div>
|
|
</body>
|
|
</html>
|