torin
b8d3cb4644
Some checks are pending
Build and Push Docker Images / changes (push) Waiting to run
Build and Push Docker Images / build-backend (push) Blocked by required conditions
Build and Push Docker Images / build-frontend (push) Blocked by required conditions
Build and Push Docker Images / build-admin-frontend (push) Blocked by required conditions
74 lines
2.8 KiB
HTML
74 lines
2.8 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>故事详情</title>
|
|
<link rel="stylesheet" href="style.css" />
|
|
</head>
|
|
<body>
|
|
<div class="page">
|
|
<header class="nav">
|
|
<div class="container nav__inner">
|
|
<div class="nav__left">
|
|
<div class="nav__logo">
|
|
<span class="nav__logo-badge"></span>
|
|
DreamWeaver
|
|
</div>
|
|
<span class="badge">Web 原型</span>
|
|
</div>
|
|
<div class="nav__center">
|
|
<a class="nav__item active" href="home.html">生成故事</a>
|
|
<a class="nav__item" href="my-stories.html">我的故事</a>
|
|
<a class="nav__item" href="child-profiles.html">孩子档案</a>
|
|
<a class="nav__item" href="universes.html">故事宇宙</a>
|
|
<a class="nav__item" href="push-settings.html">推送设置</a>
|
|
<a class="nav__item" href="account-settings.html">账户设置</a>
|
|
<a class="nav__item" href="admin-providers.html">管理后台</a>
|
|
</div>
|
|
<div class="nav__right">
|
|
<input class="input" style="width: 200px;" placeholder="搜索故事" />
|
|
<div class="avatar">家</div>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
<div class="container" style="padding: 28px 0 60px;">
|
|
<div class="section">
|
|
<div class="cover-hero"></div>
|
|
<h2 style="margin-top: 16px;">星际冒险 · 勇气的种子</h2>
|
|
<div class="card-meta">小明 · 星际冒险宇宙 · 2025/01/12</div>
|
|
<div class="hero-actions section">
|
|
<button class="btn btn--secondary">重新生成封面</button>
|
|
<button class="btn btn--primary">生成语音</button>
|
|
<button class="btn btn--ghost">分享</button>
|
|
</div>
|
|
</div>
|
|
<div class="split section">
|
|
<div class="card">
|
|
<h3>故事正文</h3>
|
|
<p>夜空像一条温柔的河流，小明驾驶着飞船穿过星光……</p>
|
|
<p>他握紧操纵杆，鼓起勇气，向未知的星球靠近。</p>
|
|
<p>最终，小明发现了新的朋友，也学会了如何面对黑暗。</p>
|
|
</div>
|
|
<div class="card">
|
|
<h3>成就</h3>
|
|
<div class="chips section">
|
|
<span class="chip selected">勇气</span>
|
|
<span class="chip selected">友谊</span>
|
|
</div>
|
|
<div class="callout section">“克服了黑暗的恐惧”</div>
|
|
<div class="callout">“帮助了迷路的小伙伴”</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="section audio-player">
|
|
<button class="btn btn--ghost">播放</button>
|
|
<div class="audio-bar"><div class="audio-progress"></div></div>
|
|
<button class="btn btn--ghost">1.0x</button>
|
|
</div>
|
|
<div class="footer-note">语音未生成时，显示“生成语音”按钮作为主操作。</div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>
|