taurus/index.html

<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,viewport-fit=cover">
<title>金牛座 · 慢慢来，也能抵达美好 | 鎏金珍藏卡</title>
<meta name="description" content="金牛座原创动画：最古老的星座、毕宿五与昴星团、北宋天关客星、欧罗巴与白牛，以及一张属于你的鎏金珍藏卡。可在浏览器播放并本地导出 MP4。">
<meta name="theme-color" content="#0c1f1a">
<meta property="og:title" content="金牛座 · 慢慢来，也能抵达美好">
<meta property="og:image" content="covers/cover-bili-16x9.jpg">
<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=Cormorant+Garamond:ital,wght@0,600;0,700;1,700&family=Noto+Sans+SC:wght@400;600;700&family=Noto+Serif+SC:wght@700;900&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
</head>
<body>
<header class="hero">
  <a class="home" href="../index.html">← 返回作品集</a>
  <p class="eyebrow">TAURUS · 4.20 — 5.20 · 星座文化动画</p>
  <h1><span class="sig">♉</span> 金牛座 <small>慢慢来，也能抵达美好</small></h1>
  <p class="lead">一万七千年前的壁画、公牛之眼毕宿五、七姐妹昴星团、北宋天文官笔下的「天关客星」、欧罗巴与白牛——<br>以及最后，一张只属于你的 <b>鎏金珍藏卡</b>。</p>
</header>

<main>
<section class="player" id="player">
  <div class="stage-wrap" id="wrap">
    <canvas id="stage"></canvas>
    <button class="big-play" id="bigPlay" aria-label="播放"><span>▶</span><em>点击播放 · 带旁白与配乐</em></button>
    <div class="loading" id="loading">正在载入音轨…</div>
  </div>
  <div class="controls">
    <button id="play" class="ic" aria-label="播放/暂停">▶</button>
    <span class="time" id="time">0:00 / 4:10</span>
    <div class="bar" id="bar"><div class="fill" id="fill"></div><div class="marks" id="marks"></div></div>
    <div class="seg" role="group" aria-label="画幅">
      <button data-o="landscape" class="on">横屏</button><button data-o="portrait">竖屏</button>
    </div>
    <button id="cc" class="ic on" title="字幕">字</button>
    <button id="fs" class="ic" title="全屏">⛶</button>
  </div>
  <ol class="chapters" id="chapters"></ol>
</section>

<section class="panel card-panel" id="card">
  <div class="panel-head"><h2>金牛座 · 鎏金珍藏卡</h2><p>写上名字与生日，影片第九幕与下载的卡片都会刻上它。</p></div>
  <div class="card-grid">
    <canvas id="cardView" width="900" height="1200"></canvas>
    <form class="card-form" onsubmit="return false">
      <label>珍藏人<input id="name" maxlength="10" placeholder="你的名字或昵称"></label>
      <label>生日<span class="row"><select id="bm"><option value="">月</option><option>4</option><option>5</option></select><select id="bd"><option value="">日</option></select></span></label>
      <p class="hint" id="bhint">金牛座：4 月 20 日 — 5 月 20 日</p>
      <div class="btns">
        <button data-r="9:16">下载壁纸 9:16</button><button data-r="1:1">下载头像 1:1</button><button data-r="3:4">下载卡片 3:4</button>
      </div>
      <button class="ghost" id="flipBtn">翻转看看背面</button>
    </form>
  </div>
</section>

<section class="panel" id="export">
  <div class="panel-head"><h2>本地导出 MP4</h2><p>全部在你的浏览器里逐帧渲染，不上传任何数据。电脑端 Chrome / Edge 体验最佳。</p></div>
  <div class="ex-grid">
    <label>帧率<span class="seg" id="exFps"><button data-v="24">24</button><button data-v="30" class="on">30</button><button data-v="60">60</button></span></label>
    <label>画幅<span class="seg" id="exO"><button data-v="landscape" class="on">横屏 16:9</button><button data-v="portrait">竖屏 9:16</button></span></label>
    <label>分辨率<span class="seg" id="exR"><button data-v="1080" class="on">1080p</button><button data-v="720">720p</button></span></label>
    <label>范围<span class="seg" id="exRange"><button data-v="all" class="on">完整影片</button><button data-v="act">当前幕</button></span></label>
  </div>
  <div class="ex-run"><button class="primary" id="exGo">开始导出</button><button class="ghost" id="exStop" hidden>取消</button>
    <div class="prog"><div id="exFill"></div></div><span id="exMsg" class="msg">导出时会带上你在珍藏卡里填写的名字。</span></div>
  <div id="exOut" class="ex-out"></div>
</section>

<section class="panel" id="publish">
  <div class="panel-head"><h2>四平台发布包</h2><p>标题、简介、话题均已按平台限制校对；每个平台两张封面。</p></div>
  <div class="tabs" id="tabs"></div>
  <div id="pub"></div>
</section>
</main>

<footer>星座是一种有趣、浪漫的文化 · 愿你按照自己的节奏，稳稳地发光 · <a href="README.md">制作说明</a></footer>
<script type="module" src="js/main.js"></script>
</body>
</html>