You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1109 lines
35 KiB
1109 lines
35 KiB
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>Popi.art SkillHub</title>
|
|
<style>
|
|
:root {
|
|
--bg: #f5f5f7;
|
|
--panel: #ffffff;
|
|
--panel-soft: #fbfbfd;
|
|
--line: rgba(33, 35, 41, 0.08);
|
|
--ink: #202229;
|
|
--muted: #6e7485;
|
|
--primary: #6447f8;
|
|
--primary-deep: #2d243f;
|
|
--primary-soft: rgba(100, 71, 248, 0.1);
|
|
--success: #1ab37a;
|
|
--danger: #ef5a57;
|
|
--shadow: 0 20px 60px rgba(28, 30, 37, 0.08);
|
|
--radius-xl: 32px;
|
|
--radius-lg: 24px;
|
|
--radius-md: 18px;
|
|
}
|
|
|
|
* {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
body {
|
|
margin: 0;
|
|
color: var(--ink);
|
|
font-family: "Inter", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
|
|
background:
|
|
radial-gradient(circle at top right, rgba(100, 71, 248, 0.08), transparent 26%),
|
|
linear-gradient(180deg, #f7f7fa 0%, #f0f1f5 100%);
|
|
}
|
|
|
|
a {
|
|
color: inherit;
|
|
text-decoration: none;
|
|
}
|
|
|
|
button {
|
|
font: inherit;
|
|
}
|
|
|
|
.page-shell {
|
|
min-height: 100vh;
|
|
padding: 20px;
|
|
}
|
|
|
|
.layout {
|
|
display: grid;
|
|
grid-template-columns: 250px minmax(0, 1fr);
|
|
gap: 18px;
|
|
}
|
|
|
|
.sidebar {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
min-height: calc(100vh - 40px);
|
|
padding: 18px 16px 18px;
|
|
border: 1px solid var(--line);
|
|
border-radius: 28px;
|
|
background: rgba(255, 255, 255, 0.82);
|
|
box-shadow: var(--shadow);
|
|
backdrop-filter: blur(18px);
|
|
}
|
|
|
|
.brand {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
padding: 6px 8px 20px;
|
|
font-size: 18px;
|
|
font-weight: 800;
|
|
}
|
|
|
|
.brand-mark {
|
|
display: grid;
|
|
place-items: center;
|
|
width: 38px;
|
|
height: 38px;
|
|
border-radius: 14px;
|
|
background: linear-gradient(135deg, #120f1d 0%, #6447f8 100%);
|
|
color: #fff;
|
|
font-size: 14px;
|
|
letter-spacing: 0.08em;
|
|
}
|
|
|
|
.brand-wordmark {
|
|
font-size: 20px;
|
|
}
|
|
|
|
.brand-wordmark span {
|
|
color: var(--primary);
|
|
}
|
|
|
|
.nav-list {
|
|
display: grid;
|
|
gap: 8px;
|
|
}
|
|
|
|
.nav-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 14px;
|
|
padding: 14px 16px;
|
|
border-radius: 18px;
|
|
color: var(--muted);
|
|
transition: 160ms ease;
|
|
}
|
|
|
|
.nav-item:hover,
|
|
.nav-item.is-active {
|
|
background: #f0f1f4;
|
|
color: var(--ink);
|
|
}
|
|
|
|
.nav-item.is-active {
|
|
box-shadow: inset 0 0 0 1px rgba(100, 71, 248, 0.08);
|
|
}
|
|
|
|
.nav-icon {
|
|
display: grid;
|
|
place-items: center;
|
|
width: 22px;
|
|
height: 22px;
|
|
}
|
|
|
|
.sidebar-footer {
|
|
display: grid;
|
|
gap: 12px;
|
|
}
|
|
|
|
.download-card,
|
|
.profile-card {
|
|
padding: 16px;
|
|
border-radius: 20px;
|
|
background: linear-gradient(145deg, #ffffff 0%, #f7f7fc 100%);
|
|
border: 1px solid var(--line);
|
|
}
|
|
|
|
.download-card h3,
|
|
.profile-card h3 {
|
|
margin: 0 0 6px;
|
|
font-size: 15px;
|
|
}
|
|
|
|
.download-card p,
|
|
.profile-card p {
|
|
margin: 0;
|
|
color: var(--muted);
|
|
font-size: 13px;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
.download-card button {
|
|
margin-top: 14px;
|
|
}
|
|
|
|
.main {
|
|
display: grid;
|
|
gap: 18px;
|
|
}
|
|
|
|
.topbar,
|
|
.hero,
|
|
.content-card,
|
|
.stats-row article,
|
|
.table-card,
|
|
.spotlight-card,
|
|
.cta-card {
|
|
border: 1px solid var(--line);
|
|
border-radius: 28px;
|
|
background: rgba(255, 255, 255, 0.86);
|
|
box-shadow: var(--shadow);
|
|
}
|
|
|
|
.topbar {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
gap: 16px;
|
|
padding: 16px 22px;
|
|
}
|
|
|
|
.crumbs {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 14px;
|
|
color: var(--muted);
|
|
font-size: 14px;
|
|
}
|
|
|
|
.crumbs strong {
|
|
color: var(--ink);
|
|
}
|
|
|
|
.topbar-actions {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
}
|
|
|
|
.pill {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
padding: 12px 16px;
|
|
border-radius: 16px;
|
|
background: #f7f8fb;
|
|
color: var(--muted);
|
|
font-size: 14px;
|
|
}
|
|
|
|
.hero {
|
|
padding: 24px;
|
|
}
|
|
|
|
.hero-stage {
|
|
display: grid;
|
|
grid-template-columns: 1.2fr 0.8fr;
|
|
gap: 22px;
|
|
align-items: stretch;
|
|
padding: 24px;
|
|
border-radius: var(--radius-xl);
|
|
background:
|
|
radial-gradient(circle at top left, rgba(100, 71, 248, 0.14), transparent 28%),
|
|
radial-gradient(circle at bottom right, rgba(255, 209, 178, 0.2), transparent 30%),
|
|
linear-gradient(180deg, #ffffff 0%, #f7f5ff 100%);
|
|
}
|
|
|
|
.hero-visual {
|
|
position: relative;
|
|
overflow: hidden;
|
|
border-radius: 24px;
|
|
min-height: 360px;
|
|
background:
|
|
linear-gradient(180deg, rgba(220, 202, 255, 0.38), rgba(255, 255, 255, 0.06)),
|
|
linear-gradient(145deg, #f6ebff 0%, #fff8f0 100%);
|
|
}
|
|
|
|
.hero-copy {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
padding: 20px 6px 20px 8px;
|
|
}
|
|
|
|
.eyebrow {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
margin-bottom: 12px;
|
|
color: var(--primary);
|
|
font-size: 12px;
|
|
font-weight: 800;
|
|
letter-spacing: 0.14em;
|
|
}
|
|
|
|
.hero-copy h1 {
|
|
margin: 0;
|
|
font-size: clamp(2.6rem, 5vw, 4.5rem);
|
|
line-height: 1;
|
|
letter-spacing: -0.03em;
|
|
}
|
|
|
|
.hero-copy h1 span {
|
|
color: var(--primary);
|
|
}
|
|
|
|
.hero-copy p {
|
|
margin: 20px 0 0;
|
|
max-width: 460px;
|
|
color: var(--muted);
|
|
font-size: 18px;
|
|
line-height: 1.7;
|
|
}
|
|
|
|
.hero-actions {
|
|
display: flex;
|
|
gap: 12px;
|
|
margin-top: 30px;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.hero-meta {
|
|
display: flex;
|
|
gap: 14px;
|
|
margin-top: 22px;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.hero-meta .pill {
|
|
background: #fff;
|
|
}
|
|
|
|
.hero-dots {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
gap: 8px;
|
|
margin-top: 14px;
|
|
}
|
|
|
|
.hero-dot {
|
|
width: 9px;
|
|
height: 9px;
|
|
border-radius: 999px;
|
|
background: rgba(32, 34, 41, 0.18);
|
|
transition: 160ms ease;
|
|
}
|
|
|
|
.hero-dot.is-active {
|
|
width: 24px;
|
|
background: var(--primary);
|
|
}
|
|
|
|
.stats-row {
|
|
display: grid;
|
|
grid-template-columns: repeat(4, minmax(0, 1fr));
|
|
gap: 18px;
|
|
}
|
|
|
|
.stats-row article {
|
|
padding: 20px 22px;
|
|
}
|
|
|
|
.stats-row strong {
|
|
display: block;
|
|
font-size: 30px;
|
|
letter-spacing: -0.04em;
|
|
}
|
|
|
|
.stats-row span {
|
|
display: block;
|
|
margin-top: 8px;
|
|
color: var(--muted);
|
|
font-size: 14px;
|
|
}
|
|
|
|
.content-grid {
|
|
display: grid;
|
|
grid-template-columns: 1.2fr 0.8fr;
|
|
gap: 18px;
|
|
}
|
|
|
|
.content-card {
|
|
padding: 22px;
|
|
}
|
|
|
|
.content-head {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: flex-start;
|
|
gap: 16px;
|
|
margin-bottom: 18px;
|
|
}
|
|
|
|
.content-head h2 {
|
|
margin: 8px 0 0;
|
|
font-size: 28px;
|
|
letter-spacing: -0.03em;
|
|
}
|
|
|
|
.content-head p {
|
|
margin: 8px 0 0;
|
|
color: var(--muted);
|
|
line-height: 1.7;
|
|
}
|
|
|
|
.button {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 8px;
|
|
min-height: 46px;
|
|
padding: 0 18px;
|
|
border: 0;
|
|
border-radius: 16px;
|
|
cursor: pointer;
|
|
font-weight: 700;
|
|
transition: transform 160ms ease, box-shadow 160ms ease;
|
|
}
|
|
|
|
.button:hover {
|
|
transform: translateY(-1px);
|
|
}
|
|
|
|
.button-primary {
|
|
color: #fff;
|
|
background: linear-gradient(90deg, #16131d 0%, var(--primary) 100%);
|
|
box-shadow: 0 12px 28px rgba(100, 71, 248, 0.24);
|
|
}
|
|
|
|
.button-secondary {
|
|
color: var(--ink);
|
|
background: #f1f2f7;
|
|
}
|
|
|
|
.skill-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
gap: 14px;
|
|
}
|
|
|
|
.skill-card {
|
|
padding: 18px;
|
|
border: 1px solid var(--line);
|
|
border-radius: 22px;
|
|
background: linear-gradient(145deg, #ffffff 0%, #fafaff 100%);
|
|
}
|
|
|
|
.skill-card-top {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
gap: 12px;
|
|
align-items: center;
|
|
}
|
|
|
|
.skill-card h3 {
|
|
margin: 12px 0 8px;
|
|
font-size: 18px;
|
|
}
|
|
|
|
.skill-card p {
|
|
margin: 0;
|
|
color: var(--muted);
|
|
font-size: 14px;
|
|
line-height: 1.7;
|
|
}
|
|
|
|
.badge {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
padding: 8px 10px;
|
|
border-radius: 999px;
|
|
font-size: 12px;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.badge-official {
|
|
color: var(--primary);
|
|
background: var(--primary-soft);
|
|
}
|
|
|
|
.badge-live {
|
|
color: var(--success);
|
|
background: rgba(26, 179, 122, 0.12);
|
|
}
|
|
|
|
.badge-beta {
|
|
color: #ef8e25;
|
|
background: rgba(239, 142, 37, 0.14);
|
|
}
|
|
|
|
.skill-meta {
|
|
display: flex;
|
|
gap: 12px;
|
|
margin-top: 16px;
|
|
flex-wrap: wrap;
|
|
color: var(--muted);
|
|
font-size: 13px;
|
|
}
|
|
|
|
.table-card {
|
|
padding: 22px;
|
|
}
|
|
|
|
.table-list {
|
|
display: grid;
|
|
gap: 14px;
|
|
}
|
|
|
|
.table-row {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
gap: 14px;
|
|
padding: 14px 0;
|
|
border-bottom: 1px solid rgba(33, 35, 41, 0.08);
|
|
}
|
|
|
|
.table-row:last-child {
|
|
border-bottom: 0;
|
|
}
|
|
|
|
.table-row strong {
|
|
display: block;
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.table-row span,
|
|
.table-row p {
|
|
margin: 0;
|
|
color: var(--muted);
|
|
font-size: 13px;
|
|
}
|
|
|
|
.stack {
|
|
display: grid;
|
|
gap: 18px;
|
|
}
|
|
|
|
.spotlight-card {
|
|
padding: 22px;
|
|
background:
|
|
radial-gradient(circle at top right, rgba(100, 71, 248, 0.14), transparent 26%),
|
|
linear-gradient(145deg, #ffffff 0%, #f7f4ff 100%);
|
|
}
|
|
|
|
.spotlight-card h2,
|
|
.cta-card h2 {
|
|
margin: 10px 0 8px;
|
|
font-size: 26px;
|
|
letter-spacing: -0.03em;
|
|
}
|
|
|
|
.spotlight-card p,
|
|
.cta-card p {
|
|
margin: 0;
|
|
color: var(--muted);
|
|
line-height: 1.7;
|
|
}
|
|
|
|
.price-box {
|
|
display: flex;
|
|
align-items: flex-end;
|
|
gap: 8px;
|
|
margin-top: 18px;
|
|
}
|
|
|
|
.price-box strong {
|
|
font-size: 42px;
|
|
letter-spacing: -0.05em;
|
|
}
|
|
|
|
.benefit-list {
|
|
display: grid;
|
|
gap: 10px;
|
|
margin-top: 18px;
|
|
}
|
|
|
|
.benefit-item {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: 10px;
|
|
color: var(--muted);
|
|
font-size: 14px;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
.benefit-item svg {
|
|
flex-shrink: 0;
|
|
margin-top: 2px;
|
|
color: var(--primary);
|
|
}
|
|
|
|
.cta-card {
|
|
padding: 22px;
|
|
background: linear-gradient(145deg, #14111d 0%, #433085 100%);
|
|
color: #fff;
|
|
}
|
|
|
|
.cta-card p {
|
|
color: rgba(255, 255, 255, 0.72);
|
|
}
|
|
|
|
.cta-card .button-secondary {
|
|
background: rgba(255, 255, 255, 0.12);
|
|
color: #fff;
|
|
}
|
|
|
|
.footer-note {
|
|
margin-top: 10px;
|
|
color: var(--muted);
|
|
font-size: 13px;
|
|
}
|
|
|
|
.illustration {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
@media (max-width: 1200px) {
|
|
.layout,
|
|
.hero-stage,
|
|
.content-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.sidebar {
|
|
min-height: auto;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 900px) {
|
|
.page-shell {
|
|
padding: 14px;
|
|
}
|
|
|
|
.stats-row,
|
|
.skill-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.topbar {
|
|
flex-direction: column;
|
|
align-items: stretch;
|
|
}
|
|
|
|
.topbar-actions {
|
|
flex-wrap: wrap;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="page-shell">
|
|
<div class="layout">
|
|
<aside class="sidebar">
|
|
<div>
|
|
<div class="brand">
|
|
<div class="brand-mark">PA</div>
|
|
<div class="brand-wordmark">Popi<span>.art</span></div>
|
|
</div>
|
|
|
|
<nav class="nav-list" aria-label="主导航">
|
|
<a class="nav-item is-active" href="#home">
|
|
<span class="nav-icon">
|
|
<svg width="18" height="18" viewBox="0 0 24 24" fill="none">
|
|
<path d="M4 10.5 12 4l8 6.5V20a1 1 0 0 1-1 1h-4.5v-6h-5v6H5a1 1 0 0 1-1-1v-9.5Z" stroke="currentColor" stroke-width="1.8" stroke-linejoin="round"/>
|
|
</svg>
|
|
</span>
|
|
<strong>首页</strong>
|
|
</a>
|
|
<a class="nav-item" href="#skills">
|
|
<span class="nav-icon">
|
|
<svg width="18" height="18" viewBox="0 0 24 24" fill="none">
|
|
<rect x="4" y="4" width="7" height="7" rx="2" stroke="currentColor" stroke-width="1.8"/>
|
|
<rect x="13" y="4" width="7" height="7" rx="2" stroke="currentColor" stroke-width="1.8"/>
|
|
<rect x="4" y="13" width="7" height="7" rx="2" stroke="currentColor" stroke-width="1.8"/>
|
|
<rect x="13" y="13" width="7" height="7" rx="2" stroke="currentColor" stroke-width="1.8"/>
|
|
</svg>
|
|
</span>
|
|
<strong>SkillHub 技能</strong>
|
|
</a>
|
|
<a class="nav-item" href="#keys">
|
|
<span class="nav-icon">
|
|
<svg width="18" height="18" viewBox="0 0 24 24" fill="none">
|
|
<path d="M13.5 7.5a4.5 4.5 0 1 0 0 9h1.5l2 2h2l1.5-1.5-1.5-1.5 1.5-1.5-2-2h-1a4.5 4.5 0 0 0-4-4.5Z" stroke="currentColor" stroke-width="1.8" stroke-linejoin="round"/>
|
|
</svg>
|
|
</span>
|
|
<strong>API 密钥</strong>
|
|
</a>
|
|
<a class="nav-item" href="#billing">
|
|
<span class="nav-icon">
|
|
<svg width="18" height="18" viewBox="0 0 24 24" fill="none">
|
|
<path d="M7 4h10l3 3v13a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h2Z" stroke="currentColor" stroke-width="1.8" stroke-linejoin="round"/>
|
|
<path d="M8 11h8M8 15h8" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/>
|
|
</svg>
|
|
</span>
|
|
<strong>账单</strong>
|
|
</a>
|
|
<a class="nav-item" href="#docs">
|
|
<span class="nav-icon">
|
|
<svg width="18" height="18" viewBox="0 0 24 24" fill="none">
|
|
<path d="M6 5.5A2.5 2.5 0 0 1 8.5 3H20v17H8.5A2.5 2.5 0 0 0 6 22V5.5Z" stroke="currentColor" stroke-width="1.8" stroke-linejoin="round"/>
|
|
<path d="M6 6h10" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/>
|
|
</svg>
|
|
</span>
|
|
<strong>文档</strong>
|
|
</a>
|
|
<a class="nav-item" href="#pricing">
|
|
<span class="nav-icon">
|
|
<svg width="18" height="18" viewBox="0 0 24 24" fill="none">
|
|
<path d="M6 8c0-2.2 2.7-4 6-4s6 1.8 6 4-2.7 4-6 4-6-1.8-6-4Zm0 8c0-2.2 2.7-4 6-4s6 1.8 6 4-2.7 4-6 4-6-1.8-6-4Z" stroke="currentColor" stroke-width="1.8"/>
|
|
</svg>
|
|
</span>
|
|
<strong>定价</strong>
|
|
</a>
|
|
</nav>
|
|
</div>
|
|
|
|
<div class="sidebar-footer">
|
|
<div class="download-card">
|
|
<h3>PopiStudio Desktop</h3>
|
|
<p>下载 PC 客户端后，可以直接复制官方 Skills 一键使用。</p>
|
|
<button class="button button-primary" type="button">立即下载</button>
|
|
</div>
|
|
<div class="profile-card">
|
|
<h3>本地静态预览</h3>
|
|
<p>这是独立版 `skillhub_index.html`，不依赖测试站和后端接口。</p>
|
|
</div>
|
|
</div>
|
|
</aside>
|
|
|
|
<main class="main">
|
|
<header class="topbar">
|
|
<div class="crumbs">
|
|
<span>Popi.art 控制台</span>
|
|
<span>/</span>
|
|
<strong>首页</strong>
|
|
</div>
|
|
<div class="topbar-actions">
|
|
<span class="pill">官方 Skill 平台</span>
|
|
<span class="pill">中 / EN</span>
|
|
<button class="button button-secondary" type="button">查看文档</button>
|
|
<button class="button button-primary" type="button">登录/注册</button>
|
|
</div>
|
|
</header>
|
|
|
|
<section class="hero" id="home">
|
|
<div class="hero-stage">
|
|
<div class="hero-visual">
|
|
<svg class="illustration" viewBox="0 0 760 480" preserveAspectRatio="xMidYMid slice">
|
|
<defs>
|
|
<linearGradient id="sky" x1="0%" y1="0%" x2="100%" y2="100%">
|
|
<stop offset="0%" stop-color="#d5cbff" />
|
|
<stop offset="45%" stop-color="#ffe5d8" />
|
|
<stop offset="100%" stop-color="#f6f8ff" />
|
|
</linearGradient>
|
|
<linearGradient id="coat" x1="0%" y1="0%" x2="0%" y2="100%">
|
|
<stop offset="0%" stop-color="#e6d6ca" />
|
|
<stop offset="100%" stop-color="#c3ab9e" />
|
|
</linearGradient>
|
|
</defs>
|
|
|
|
<rect width="760" height="480" fill="url(#sky)" />
|
|
<circle cx="590" cy="112" r="62" fill="rgba(255,223,185,0.8)" />
|
|
<rect x="0" y="360" width="760" height="120" fill="#f5f7fb" />
|
|
|
|
<g opacity="0.85">
|
|
<rect x="58" y="170" width="68" height="190" rx="18" fill="#8d7e8d" />
|
|
<rect x="72" y="130" width="42" height="46" rx="21" fill="#66545e" />
|
|
<rect x="170" y="140" width="92" height="220" rx="22" fill="#9b8791" />
|
|
<rect x="194" y="96" width="48" height="52" rx="24" fill="#735f66" />
|
|
<rect x="632" y="176" width="58" height="186" rx="18" fill="#7a6f7f" />
|
|
<rect x="646" y="138" width="32" height="44" rx="16" fill="#5f5464" />
|
|
</g>
|
|
|
|
<g opacity="0.18" stroke="#ffffff">
|
|
<path d="M0 220 C180 180 280 320 460 260 S640 180 760 212" stroke-width="14" fill="none" />
|
|
<path d="M0 290 C160 250 340 360 500 310 S650 250 760 286" stroke-width="12" fill="none" />
|
|
</g>
|
|
|
|
<g transform="translate(232 142)">
|
|
<circle cx="88" cy="68" r="34" fill="#f0d6c8" />
|
|
<path d="M60 56c12-24 56-24 64 4v18H58V56Z" fill="#2d243f" />
|
|
<path d="M40 130c18-34 102-34 122 0l10 108H30l10-108Z" fill="url(#coat)" />
|
|
<rect x="66" y="238" width="24" height="80" rx="12" fill="#f2e7dc" />
|
|
<rect x="102" y="238" width="24" height="80" rx="12" fill="#f2e7dc" />
|
|
</g>
|
|
|
|
<g transform="translate(392 114)">
|
|
<circle cx="92" cy="62" r="34" fill="#efd1bd" />
|
|
<path d="M58 44c14-20 64-16 70 16l-2 16H58V44Z" fill="#241f28" />
|
|
<path d="M36 118c18-34 112-34 136 0l18 128H18l18-128Z" fill="url(#coat)" />
|
|
<rect x="76" y="246" width="26" height="94" rx="12" fill="#fafafa" />
|
|
<rect x="114" y="246" width="26" height="94" rx="12" fill="#fafafa" />
|
|
</g>
|
|
|
|
<g fill="#ffffff" opacity="0.92">
|
|
<circle cx="62" cy="56" r="5" />
|
|
<circle cx="118" cy="112" r="3" />
|
|
<circle cx="162" cy="72" r="4" />
|
|
<circle cx="214" cy="124" r="6" />
|
|
<circle cx="268" cy="76" r="3" />
|
|
<circle cx="312" cy="102" r="4" />
|
|
<circle cx="366" cy="62" r="5" />
|
|
<circle cx="426" cy="126" r="3" />
|
|
<circle cx="472" cy="78" r="4" />
|
|
<circle cx="516" cy="110" r="5" />
|
|
<circle cx="586" cy="58" r="4" />
|
|
<circle cx="636" cy="120" r="3" />
|
|
<circle cx="694" cy="84" r="5" />
|
|
<circle cx="730" cy="138" r="4" />
|
|
<circle cx="84" cy="208" r="4" />
|
|
<circle cx="154" cy="228" r="5" />
|
|
<circle cx="226" cy="194" r="4" />
|
|
<circle cx="286" cy="258" r="6" />
|
|
<circle cx="354" cy="214" r="4" />
|
|
<circle cx="422" cy="242" r="3" />
|
|
<circle cx="474" cy="208" r="4" />
|
|
<circle cx="548" cy="234" r="6" />
|
|
<circle cx="602" cy="186" r="4" />
|
|
<circle cx="674" cy="238" r="3" />
|
|
<circle cx="726" cy="216" r="5" />
|
|
<circle cx="98" cy="324" r="4" />
|
|
<circle cx="184" cy="298" r="5" />
|
|
<circle cx="264" cy="346" r="3" />
|
|
<circle cx="352" cy="320" r="4" />
|
|
<circle cx="436" cy="334" r="6" />
|
|
<circle cx="514" cy="312" r="4" />
|
|
<circle cx="604" cy="344" r="5" />
|
|
<circle cx="704" cy="306" r="4" />
|
|
</g>
|
|
</svg>
|
|
</div>
|
|
|
|
<div class="hero-copy">
|
|
<div class="eyebrow">POP I . STUDIO LAUNCH</div>
|
|
<h1 id="hero-title"><span>Popi.Studio</span> 已上线</h1>
|
|
<p id="hero-description">下载 PC 客户端后，可复制官方 Skills 一键使用，并在统一控制台管理 API 密钥、订阅和账单。</p>
|
|
<div class="hero-actions">
|
|
<button class="button button-primary" id="hero-button" type="button">立即下载</button>
|
|
<button class="button button-secondary" type="button">查看控制台</button>
|
|
</div>
|
|
<div class="hero-meta">
|
|
<span class="pill">24+ 官方技能</span>
|
|
<span class="pill">统一账号与计费</span>
|
|
<span class="pill">支持创作者与团队</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="hero-dots" aria-label="轮播切换">
|
|
<span class="hero-dot is-active" data-dot="0"></span>
|
|
<span class="hero-dot" data-dot="1"></span>
|
|
<span class="hero-dot" data-dot="2"></span>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="stats-row">
|
|
<article>
|
|
<strong>24+</strong>
|
|
<span>官方 Skill 数量</span>
|
|
</article>
|
|
<article>
|
|
<strong>12,480</strong>
|
|
<span>本月可用 Credits</span>
|
|
</article>
|
|
<article>
|
|
<strong>6</strong>
|
|
<span>活跃项目</span>
|
|
</article>
|
|
<article>
|
|
<strong>¥412.60</strong>
|
|
<span>当前账单周期支出</span>
|
|
</article>
|
|
</section>
|
|
|
|
<section class="content-grid">
|
|
<div class="content-card" id="skills">
|
|
<div class="content-head">
|
|
<div>
|
|
<div class="eyebrow">OFFICIAL SKILLS</div>
|
|
<h2>SkillHub 技能一览</h2>
|
|
<p>这里展示的是主页上的精选能力卡片，后续可以接真实 skill 列表、标签筛选、搜索和详情页。</p>
|
|
</div>
|
|
<button class="button button-secondary" type="button">查看全部技能</button>
|
|
</div>
|
|
|
|
<div class="skill-grid">
|
|
<article class="skill-card">
|
|
<div class="skill-card-top">
|
|
<span class="badge badge-official">OFFICIAL</span>
|
|
<span class="badge badge-live">LIVE</span>
|
|
</div>
|
|
<h3>文生图</h3>
|
|
<p>从简短 prompt 生成高质量图像，适合概念草图、封面与品牌 KV 初稿。</p>
|
|
<div class="skill-meta">
|
|
<span>Route: image.text2image</span>
|
|
<span>10 Credits / 次</span>
|
|
</div>
|
|
</article>
|
|
|
|
<article class="skill-card">
|
|
<div class="skill-card-top">
|
|
<span class="badge badge-official">OFFICIAL</span>
|
|
<span class="badge badge-live">LIVE</span>
|
|
</div>
|
|
<h3>图像编辑</h3>
|
|
<p>支持参考图编辑、局部重绘、风格转换和多轮修图工作流。</p>
|
|
<div class="skill-meta">
|
|
<span>Route: image.img2img</span>
|
|
<span>18 Credits / 次</span>
|
|
</div>
|
|
</article>
|
|
|
|
<article class="skill-card">
|
|
<div class="skill-card-top">
|
|
<span class="badge badge-official">OFFICIAL</span>
|
|
<span class="badge badge-beta">BETA</span>
|
|
</div>
|
|
<h3>图生视频</h3>
|
|
<p>将静态首帧转为短视频，适合商品动效、角色展示与营销内容。</p>
|
|
<div class="skill-meta">
|
|
<span>Route: video.image2video</span>
|
|
<span>120 Credits / 任务</span>
|
|
</div>
|
|
</article>
|
|
|
|
<article class="skill-card">
|
|
<div class="skill-card-top">
|
|
<span class="badge badge-official">OFFICIAL</span>
|
|
<span class="badge badge-beta">BETA</span>
|
|
</div>
|
|
<h3>抠图与超清</h3>
|
|
<p>面向电商、内容和工作室场景的高频工具类 Skill，适合批量化处理。</p>
|
|
<div class="skill-meta">
|
|
<span>Route: image.utility</span>
|
|
<span>6 Credits / 次</span>
|
|
</div>
|
|
</article>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="stack">
|
|
<div class="table-card" id="keys">
|
|
<div class="content-head">
|
|
<div>
|
|
<div class="eyebrow">API KEYS</div>
|
|
<h2>密钥管理</h2>
|
|
</div>
|
|
</div>
|
|
<div class="table-list">
|
|
<div class="table-row">
|
|
<div>
|
|
<strong>Primary App Key</strong>
|
|
<span>pk_live_****9f2d</span>
|
|
</div>
|
|
<p>skills:read jobs:write</p>
|
|
</div>
|
|
<div class="table-row">
|
|
<div>
|
|
<strong>Automation Key</strong>
|
|
<span>pk_live_****1a70</span>
|
|
</div>
|
|
<p>artifacts:read</p>
|
|
</div>
|
|
<div class="table-row">
|
|
<div>
|
|
<strong>Rotation Status</strong>
|
|
<span>上次更新：2026-03-24</span>
|
|
</div>
|
|
<p style="color: var(--success);">安全</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="spotlight-card" id="pricing">
|
|
<div class="eyebrow">SUBSCRIPTION</div>
|
|
<h2>Pro Subscription</h2>
|
|
<p>适合个人创作者和小团队的标准套餐，统一获得官方 Skills、用量统计和控制台能力。</p>
|
|
<div class="price-box">
|
|
<strong>¥69.99</strong>
|
|
<span>/ 月</span>
|
|
</div>
|
|
<div class="benefit-list">
|
|
<div class="benefit-item">
|
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none">
|
|
<path d="m5 13 4 4L19 7" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
|
</svg>
|
|
<span>每月 12,000 Credits</span>
|
|
</div>
|
|
<div class="benefit-item">
|
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none">
|
|
<path d="m5 13 4 4L19 7" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
|
</svg>
|
|
<span>项目级路由与账单视图</span>
|
|
</div>
|
|
<div class="benefit-item">
|
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none">
|
|
<path d="m5 13 4 4L19 7" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
|
</svg>
|
|
<span>支持叠加充值包</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="content-grid">
|
|
<div class="table-card" id="billing">
|
|
<div class="content-head">
|
|
<div>
|
|
<div class="eyebrow">BILLING</div>
|
|
<h2>近期账单与用量</h2>
|
|
<p>这部分可以直接演进成正式账单页，包括套餐、充值、Credits 消费和发票记录。</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="table-list">
|
|
<div class="table-row">
|
|
<div>
|
|
<strong>文生图</strong>
|
|
<span>682 calls</span>
|
|
</div>
|
|
<p>¥118.20</p>
|
|
</div>
|
|
<div class="table-row">
|
|
<div>
|
|
<strong>图像编辑</strong>
|
|
<span>391 calls</span>
|
|
</div>
|
|
<p>¥94.60</p>
|
|
</div>
|
|
<div class="table-row">
|
|
<div>
|
|
<strong>图生视频</strong>
|
|
<span>77 jobs</span>
|
|
</div>
|
|
<p>¥199.80</p>
|
|
</div>
|
|
</div>
|
|
<div class="footer-note">有效期剩余 18 天，可随时追加 Credits Top-up。</div>
|
|
</div>
|
|
|
|
<div class="stack">
|
|
<div class="table-card" id="docs">
|
|
<div class="content-head">
|
|
<div>
|
|
<div class="eyebrow">DOCS</div>
|
|
<h2>快速开始</h2>
|
|
</div>
|
|
</div>
|
|
<div class="table-list">
|
|
<div class="table-row">
|
|
<div>
|
|
<strong>1. 登录账号</strong>
|
|
<span>获取产品层 token</span>
|
|
</div>
|
|
<p>Auth</p>
|
|
</div>
|
|
<div class="table-row">
|
|
<div>
|
|
<strong>2. 配置 CLI / API</strong>
|
|
<span>统一指向产品后端</span>
|
|
</div>
|
|
<p>Setup</p>
|
|
</div>
|
|
<div class="table-row">
|
|
<div>
|
|
<strong>3. 调用官方 Skills</strong>
|
|
<span>查看 jobs 与 artifacts</span>
|
|
</div>
|
|
<p>Run</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="cta-card">
|
|
<div class="eyebrow" style="color: rgba(255,255,255,0.72);">NEXT STEP</div>
|
|
<h2>继续扩成完整官网</h2>
|
|
<p>这个独立 HTML 已经把首页、技能、API 密钥、账单、文档和订阅的核心模块收在一个页面里，下一步可以拆成正式多页站点。</p>
|
|
<div class="hero-actions">
|
|
<button class="button button-secondary" type="button">拆分为多页</button>
|
|
<button class="button button-primary" type="button">接入真实 API</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
(function () {
|
|
const slides = [
|
|
{
|
|
title: "<span>Popi.Studio</span> 已上线",
|
|
description:
|
|
"下载 PC 客户端后，可复制官方 Skills 一键使用，并在统一控制台管理 API 密钥、订阅和账单。",
|
|
button: "立即下载",
|
|
},
|
|
{
|
|
title: "官方 <span>SkillHub</span> 控制台",
|
|
description:
|
|
"把技能目录、项目级路由、Credits 消费和账单都放在同一个产品层界面中管理。",
|
|
button: "查看技能",
|
|
},
|
|
{
|
|
title: "<span>Billing</span> 与充值一体化",
|
|
description:
|
|
"适合个人创作者和团队的订阅、充值、用量归因视图，为后续正式账单页提供本地稿。",
|
|
button: "管理订阅",
|
|
},
|
|
];
|
|
|
|
const title = document.getElementById("hero-title");
|
|
const description = document.getElementById("hero-description");
|
|
const button = document.getElementById("hero-button");
|
|
const dots = Array.from(document.querySelectorAll(".hero-dot"));
|
|
let index = 0;
|
|
|
|
function renderSlide(nextIndex) {
|
|
index = nextIndex;
|
|
title.innerHTML = slides[index].title;
|
|
description.textContent = slides[index].description;
|
|
button.textContent = slides[index].button;
|
|
dots.forEach(function (dot, dotIndex) {
|
|
dot.classList.toggle("is-active", dotIndex === index);
|
|
});
|
|
}
|
|
|
|
dots.forEach(function (dot) {
|
|
dot.addEventListener("click", function () {
|
|
renderSlide(Number(dot.dataset.dot || 0));
|
|
});
|
|
});
|
|
|
|
setInterval(function () {
|
|
renderSlide((index + 1) % slides.length);
|
|
}, 4200);
|
|
})();
|
|
</script>
|
|
</body>
|
|
</html>
|
|
|