aries/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="一支关于白羊座的原创网页动画：黄道第一宫、星空、金羊毛神话、♈ 的秘密，以及专属白羊座的先锋荣耀铭牌。">
<meta name="theme-color" content="#1a0508">
<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=Cinzel:wght@500;600;700;800&family=Noto+Sans+SC:wght@400;600;700&family=Noto+Serif+SC:wght@600;700;900&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
</head>
<body>
<header class="hero">
  <div class="glyph">♈&#xFE0E;</div>
  <h1>白羊座 · 春天从这里出发</h1>
  <p class="sub">ARIES · 黄道第一宫 · 3.21 — 4.19</p>
  <p class="lead">约 3 分 33 秒的原创动画：为什么白羊座排第一？夜空中如何找到它？金羊毛的神话、♈ 符号的秘密——<br>以及一枚只颁给白羊座的 <b>「先锋荣耀铭牌」</b>。</p>
</header>

<main>
  <section class="player">
    <div id="stageBox" class="stagebox" data-o="l">
      <canvas id="stage" aria-label="白羊座动画画面"></canvas>
      <button id="bigPlay" class="bigplay" aria-label="播放"><span>▶</span><em>点击播放 · 建议开启声音</em></button>
      <div class="ctrl">
        <button id="playBtn" class="ic" aria-label="播放">▶</button>
        <input id="seek" type="range" min="0" max="1000" value="0" step="1" aria-label="进度">
        <span id="time" class="time">0:00 / 3:33</span>
        <span class="seg"><button class="o-btn" data-o="l" title="横屏 16:9">横</button><button class="o-btn" data-o="p" title="竖屏 9:16">竖</button></span>
        <button id="fsBtn" class="ic" aria-label="全屏">⛶</button>
      </div>
    </div>
    <p id="loadState" class="loadstate"></p>
    <div id="chaps" class="chaps"></div>
  </section>

  <section class="panel badgep" id="badge">
    <div class="ptitle"><h2>🏅 领取你的白羊座荣耀铭牌</h2><p>写上名字，它会出现在视频第 9 幕的铭牌上，也会写进你导出的 MP4。</p></div>
    <div class="badgewrap">
      <canvas id="badgeCv" width="540" height="960" aria-label="铭牌预览"></canvas>
      <div class="badgeform">
        <label>你的名字 / 昵称 <span id="nameCount" class="cnt">0/12</span></label>
        <input id="nameIn" maxlength="12" placeholder="例如：小羊阿禾">
        <label>生日（选填）</label>
        <input id="bdIn" maxlength="10" placeholder="例如：4.01">
        <div class="btns">
          <button class="btn gold" data-card="wall">⬇ 保存手机壁纸 9:16</button>
          <button class="btn" data-card="avatar">⬇ 保存头像卡 1:1</button>
          <button class="btn" id="toVideo">▶ 在视频里看我的铭牌</button>
        </div>
        <p class="note">铭牌上刻着：守护星 火星 · 元素 火 · 黄道第一宫 · 勇气 / 热情 / 开创。<br>名字只保存在你自己的浏览器里，不会上传。</p>
      </div>
    </div>
  </section>

  <section class="panel" id="export">
    <div class="ptitle"><h2>🎬 导出 MP4（在你的浏览器里本地完成）</h2><p id="exSupport"></p></div>
    <div class="exgrid">
      <label>帧率<select id="exFps"><option value="24">24 fps</option><option value="30" selected>30 fps</option><option value="60">60 fps</option></select></label>
      <label>画幅<select id="exOrient"><option value="l">横屏 16:9（B站 / 视频号）</option><option value="p">竖屏 9:16（抖音 / 小红书）</option></select></label>
      <label>分辨率<select id="exRes"><option value="1080" selected>1080p</option><option value="720">720p（更快）</option></select></label>
      <label class="chk"><input type="checkbox" id="exSubs" checked> 烧录字幕</label>
    </div>
    <button id="exBtn" class="btn gold big">开始导出 MP4</button>
    <div class="bar"><i id="exBar"></i></div>
    <p id="exState" class="exstate"></p>
    <div id="exOut"></div>
  </section>

  <section class="panel" id="publish">
    <div class="ptitle"><h2>📮 四平台发布文案与封面</h2><p>标题字数、话题数量已按平台限制校验，一键复制。</p></div>
    <div id="ptabs" class="ptabs"></div>
    <div id="pubBody"></div>
  </section>
</main>

<footer>
  <p>星座不是科学，却是人类仰望星空几千年留下的一份浪漫文化。<br>献给每一位白羊座：愿你永远保有第一次出发时的那份热血。</p>
  <p class="small">画面、旁白、配乐与音效均为网页原创实时渲染 · <a href="../index.html">返回首页</a></p>
</footer>
<div id="toast" class="toast"></div>
<script type="module" src="src/main.js"></script>
</body>
</html>