libra-scales: 第5-7步 MP4导出(24/30/60fps 横竖屏)+四平台文案+8张封面+首页入口+移动端适配

.gitattributes

@@ -20,3 +20,12 @@ libra-scales/audio/seg-02.mp3 filter=lfs diff=lfs merge=lfs -text
 libra-scales/audio/seg-01.mp3 filter=lfs diff=lfs merge=lfs -text
 libra-scales/audio/seg-00.mp3 filter=lfs diff=lfs merge=lfs -text
 libra-scales/audio/music.mp3 filter=lfs diff=lfs merge=lfs -text
+libra-scales/covers/cover-xhs-3x4.jpg filter=lfs diff=lfs merge=lfs -text
+libra-scales/covers/cover-xhs-4x3.jpg filter=lfs diff=lfs merge=lfs -text
+libra-scales/covers/cover-landscape.jpg filter=lfs diff=lfs merge=lfs -text
+libra-scales/covers/cover-bilibili-16x9-space.jpg filter=lfs diff=lfs merge=lfs -text
+libra-scales/covers/cover-wechat-3x4.jpg filter=lfs diff=lfs merge=lfs -text
+libra-scales/covers/cover-wechat-4x3.jpg filter=lfs diff=lfs merge=lfs -text
+libra-scales/covers/cover-bilibili-4x3.jpg filter=lfs diff=lfs merge=lfs -text
+libra-scales/covers/cover-douyin-4x3.jpg filter=lfs diff=lfs merge=lfs -text
+libra-scales/covers/cover-douyin-3x4.jpg filter=lfs diff=lfs merge=lfs -text

index.html

@@ -12,6 +12,7 @@ a.card div{padding:14px 16px}a.card b{font-size:19px}a.card span{display:block;o
 </style></head><body>
 <h1>知识动画工作室</h1><p>网页即播 · 浏览器本地导出 MP4 · 横屏 B站 / 竖屏抖音</p>
 <div class="grid">
+<a class="card" href="libra-scales/index.html"><img src="libra-scales/covers/cover-landscape.jpg" alt="天秤座 · 星空中的一杆秤" onerror="this.style.visibility='hidden'"><div><b>♎ 天秤座：星空中的一杆秤</b><span>星座动画解说 · 全新制作 · 金色星图风 · 约 3 分 37 秒 · 横竖屏 · 24/30/60fps 导出</span></div></a>
 <a class="card" href="solana-clock/index.html"><img src="solana-clock/covers/cover-landscape.png" alt="SOLANA 给区块链装上时钟的人" onerror="this.style.visibility='hidden'"><div><b>⏱️ SOLANA：给区块链装上时钟的人</b><span>2017 → 2026 · 全新制作 · 时间之链霓虹风 · 约 7 分钟</span></div></a>
 <a class="card" href="ethereum/index.html"><img src="ethereum/covers/cover-landscape.png" alt="以太坊简史" onerror="this.style.visibility='hidden'"><div><b>⟠ 以太坊简史：从一份白皮书到世界计算机</b><span>2013 → 2026 · 深空光之晶体风格 · 约 7 分钟</span></div></a>
 <a class="card" href="guozu/index.html"><img src="guozu/covers/cover-landscape.png" alt="国足投注模拟器" onerror="this.style.visibility='hidden'"><div><b>⚽ 国足投注模拟器：每场押 ¥100，23 年后还剩多少？</b><span>2002 → 2026.10 · 149 场正式比赛 + 8 场友谊赛彩蛋 · 8-bit 像素街机风 · 约 5 分 50 秒 · 数据模拟，远离赌博</span></div></a>

libra-scales/README.md

@@ -17,9 +17,9 @@
 | 2 | 旁白文案定稿（10 幕）+ TTS 配音（总长 217 秒）+ 时间轴 timeline.js | ✅ 完成 |
 | 3 | 动画引擎 engine.js + 10 个场景 scenes.js（横屏 16:9 / 竖屏 9:16 自适应，逐场景截图自检） | ✅ 完成 |
 | 4 | 程序化音乐 + 40 余处音效（WebAudio）+ 旁白闪避；预渲染 music.mp3 加速加载，缺失时现场合成 | ✅ 完成 |
-| 5 | 浏览器本地导出 MP4（WebCodecs + mp4-muxer，24/30/60fps，横/竖） | ⏳ |
-| 6 | 四平台标题/描述/标签 + 8 张封面生成与下载 | ⏳ |
-| 7 | 首页入口、自检、最终推送 | ⏳ |
+| 5 | 浏览器本地导出 MP4（WebCodecs H.264 + AAC/Opus + mp4-muxer，24/30/60fps，横/竖，1080p/720p，进度/取消；无 WebCodecs 时降级实时录制） | ✅ 完成（无头 Chrome 实测 3 种帧率 × 横竖屏导出成功） |
+| 6 | 四平台标题/描述/话题（实时字数校验 + 一键复制）+ 8 张封面实时生成/下载（另存 covers/*.jpg） | ✅ 完成 |
+| 7 | 首页卡片入口、全片逐帧扫描无报错、手机竖屏适配、最终推送 | ✅ 完成 |
 
 ---
 
@@ -102,3 +102,19 @@ libra-scales/
   - 星图使用真实赤经/赤纬：天秤座 α/β/γ/σ/υ/τ/θ，室女座（含角宿一），天蝎座（含心宿二）。
 - **audio.js**：D 大调 Pad（Dmaj9 – Bm11 – Gmaj7♯11 – A6sus）+ 竖琴式琶音（带延迟）+ 低音 + 高音星光；音效：嗖声转场、低频轰鸣、钟铃、星光琶音、钳子咔嚓、印章闷响、计数滴答、上升噪声；旁白出现时音乐自动压低。
 - 合成整轨约需十几秒，所以用 `tools/render_music.js` 把**同一套代码**离线渲染成 `audio/music.mp3`，页面优先加载它，加载失败时自动回退为浏览器现场合成。
+
+## 7. 使用说明
+
+1. 打开 `libra-scales/index.html`（需通过 http(s) 访问，如 Hugging Face Space 或 `python3 -m http.server`）。
+2. **播放**：点击画面或 ▶；空格暂停，←/→ 快退快进 5 秒；下方章节按钮可跳转。手机竖屏会自动切换为 9:16 竖版，也可手动选择“横屏 16:9 / 竖屏 9:16”。
+3. **导出 MP4**：选择帧率（24 / 30 / 60 fps）、画幅（横屏 1920×1080 / 竖屏 1080×1920）、清晰度（1080p / 720p）→ “开始导出”。
+   全程在浏览器本地逐帧渲染 + 编码，旁白、配乐、音效一起混入。推荐桌面版 Chrome / Edge（AAC 音轨）；Firefox 等会用 Opus 音轨，仍是 .mp4。
+4. **发布文案**：四个平台的标题 / 描述 / 话题，带字数与话题数校验，可分别复制或一键复制全部。
+5. **封面**：8 张平台封面在页面实时绘制，可单张或全部下载 PNG；`covers/` 下另存了一份 JPG。
+
+| 平台 | 封面 | 标题（字数） | 话题数 |
+|---|---|---|---|
+| 小红书 | 横 4:3 1440×1080 / 竖 3:4 1080×1440 | 天秤座为什么是一杆秤？3分钟动画讲透（18/20） | 10/10 |
+| 抖音 | 横 4:3 / 竖 3:4 | 天秤座竟是唯一的“器物”星座？3分钟动画看懂它的秘密（26/30） | 5/5 |
+| 哔哩哔哩 | 视频封面 4:3 / 个人空间 16:9 1920×1080 | 【星座动画】天秤座：星空中的一杆秤｜…（56/80） | 10/10 |
+| 微信视频号 | 主页卡片 3:4 / 分享卡片 4:3 | 天秤座：星空里的一杆秤（11/16） | 8（不限） |

libra-scales/index.html

@@ -32,7 +32,7 @@
       </div>
       <label class="tg"><input id="tglVoice" type="checkbox" checked> 旁白</label>
       <label class="tg"><input id="tglMusic" type="checkbox" checked> 音乐/音效</label>
-      <button id="btnFull" class="pbtn" aria-label="全屏">⛶</button>
+      <button id="btnFull" class="pbtn" aria-label="全屏" title="全屏"><svg viewBox="0 0 24 24"><path d="M4 9V4h5M20 9V4h-5M4 15v5h5M20 15v5h-5"/></svg></button>
     </div>
     <div id="chapters" class="chapters"></div>
   </section>

libra-scales/js/meta.js

@@ -33,7 +33,8 @@
     E.background(ctx, 12, W, H, { nebula: 1 });
     E.meteors(ctx, 2.4, W, H, 5, .9, 1);
     // 主光
-    const sx = P ? W / 2 : W * (wide ? .3 : .32), sy = P ? H * .32 : H * .46;
+    const sx = P ? W / 2 : W * (wide ? .27 : .25), sy = P ? H * .32 : H * .44;
+    const ks = P ? .95 : wide ? .92 : .78;
     E.glow(ctx, sx, sy, 640 * S, 'rgba(246,180,110,1)', .55);
     E.glow(ctx, sx, sy, 300 * S, 'rgba(255,220,170,1)', .35);
     // 天秤座星图暗纹
@@ -41,17 +42,17 @@
     const pr = view(W, H, 15.25, -19, Math.min(W, H) / 34, P ? 0 : W * .22, P ? H * .1 : 0);
     ctx.save(); ctx.globalAlpha = .55; drawFigure(ctx, LIB, LIB_LINES, pr, 1, 'rgba(246,213,142,.6)', 2.4 * S, 1, 'rgba(255,225,160,1)'); ctx.restore();
     // 天平
-    E.scales(ctx, sx, sy - 120 * S * (P ? .95 : 1.05), (P ? .95 : 1.05) * S, { tilt: -.12,
+    E.scales(ctx, sx, sy - 120 * S * ks, ks * S, { tilt: -.12,
       leftLoad: (c, x, y, s) => E.glow(c, x, y - 12 * s, 60 * s, 'rgba(255,235,200,1)', 1),
       rightLoad: (c, x, y, s) => E.glow(c, x, y - 12 * s, 60 * s, 'rgba(255,180,210,1)', 1) });
     // 文本
-    const tx = P ? W / 2 : W * (wide ? .69 : .68), al = 'center';
+    const tx = P ? W / 2 : W * (wide ? .68 : .69), al = 'center';
     let ty = P ? H * .66 : H * .3;
     E.libraGlyph(ctx, tx, ty - 40 * S, .55 * S, 1);
     ty += 110 * S;
-    const big = (P ? 190 : wide ? 175 : 160) * S;
+    const big = (P ? 190 : wide ? 175 : 150) * S;
     E.text(ctx, '天秤座', tx, ty, { size: big, align: al, weight: 900, gradient: ['#fff6dc', '#f6d58e', '#f4a9c4'], glow: 'rgba(246,190,110,.6)', blur: 40 * S, spacing: 14 * S });
-    ty += big * .78;
+    ty += big * .84;
     E.text(ctx, '星空中的一杆秤', tx, ty, { size: 64 * S, align: al, color: '#fff3dc', weight: 700, spacing: 8 * S, glow: 'rgba(0,0,0,.7)', blur: 16 * S });
     ty += 92 * S;
     // 钩子胶囊

libra-scales/js/player.js

@@ -61,7 +61,14 @@
     document.querySelectorAll('[data-orient]').forEach(b => b.onclick = () => { st.orient = b.dataset.orient; document.querySelectorAll('[data-orient]').forEach(x => x.classList.toggle('on', x === b)); resize(); });
     $('#tglMusic').onchange = e => { st.vol.music = e.target.checked ? 1 : 0; if (st.gM) st.gM.gain.value = st.vol.music; };
     $('#tglVoice').onchange = e => { st.vol.voice = e.target.checked ? 1 : 0; if (st.gV) st.gV.gain.value = st.vol.voice * 1.05; };
-    $('#btnFull').onclick = () => { const el = stage; (document.fullscreenElement ? document.exitFullscreen() : (el.requestFullscreen || el.webkitRequestFullscreen).call(el)); };
+    $('#btnFull').onclick = () => {
+      const el = stage, req = el.requestFullscreen || el.webkitRequestFullscreen;
+      if (document.fullscreenElement || document.webkitFullscreenElement) { (document.exitFullscreen || document.webkitExitFullscreen).call(document); return; }
+      if (stage.classList.contains('fs')) { stage.classList.remove('fs'); resize(); return; }
+      if (req) { try { const r = req.call(el); if (r && r.catch) r.catch(() => { stage.classList.add('fs'); resize(); }); } catch (e) { stage.classList.add('fs'); resize(); } }
+      else { stage.classList.add('fs'); resize(); } // iOS Safari：伪全屏
+    };
+    document.addEventListener('keydown', e => { if (e.key === 'Escape' && stage.classList.contains('fs')) { stage.classList.remove('fs'); resize(); } });
     const chaps = $('#chapters');
     TL.scenes.forEach((s, i) => { const b = document.createElement('button'); b.className = 'chap'; b.textContent = (i + 1) + ' · ' + s.title; b.onclick = () => seek(s.start + .01); chaps.appendChild(b); });
     window.addEventListener('keydown', e => { if (e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA' || e.target.tagName === 'SELECT') return;

libra-scales/style.css

@@ -1,6 +1,7 @@
 :root{--gold:#f6d58e;--rose:#f4a9c4;--ink:#070a1e;--card:rgba(255,255,255,.05);--line:rgba(246,213,142,.22)}
 *{box-sizing:border-box}
-html,body{margin:0;background:radial-gradient(1200px 800px at 75% -10%,#2a1a5c 0,#0b1030 45%,#05060f 100%) fixed;color:#efeaff;font-family:"Noto Sans SC","PingFang SC","Microsoft YaHei",sans-serif}
+html{background:#05060f}
+body{margin:0;min-height:100vh;background:radial-gradient(1200px 800px at 75% -10%,#2a1a5c 0,#0b1030 45%,#05060f 100%) no-repeat,#05060f;color:#efeaff;font-family:"Noto Sans SC","PingFang SC","Microsoft YaHei",sans-serif}
 button,select,input,textarea{font:inherit;color:inherit}
 .top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px clamp(12px,3vw,36px)}
 .brand{display:flex;align-items:center;gap:14px}
@@ -12,6 +13,7 @@ main{max-width:1280px;margin:0 auto;padding:0 clamp(8px,2vw,24px) 40px}
 .player{margin-bottom:22px}
 .stage{position:relative;width:100%;aspect-ratio:16/9;background:#03040c;border-radius:18px;overflow:hidden;box-shadow:0 30px 90px rgba(0,0,0,.6),0 0 0 1px var(--line);margin:0 auto}
 .stage.portrait{aspect-ratio:9/16;width:min(100%,calc((100vh - 170px) * 9 / 16));min-width:280px}
+.stage.fs{position:fixed;inset:0;z-index:50;border-radius:0;width:100vw!important;height:100vh;height:100dvh;aspect-ratio:auto;min-width:0}
 .stage:fullscreen{border-radius:0;width:100vw;height:100vh;aspect-ratio:auto}
 #screen{width:100%;height:100%;display:block;cursor:pointer}
 .loader{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:rgba(3,4,14,.72);gap:14px;transition:opacity .5s}
@@ -62,8 +64,10 @@ button:disabled{opacity:.4;cursor:not-allowed}
 .cover button{background:rgba(246,213,142,.14);border:1px solid var(--line);border-radius:8px;padding:7px;cursor:pointer;color:var(--gold)}
 footer{text-align:center;opacity:.5;font-size:12px;line-height:1.8;margin-top:26px}
 @media (max-width:640px){
-  .top{padding:12px}.glyph{font-size:32px}.back{font-size:12px}
+  .top{padding:12px;align-items:flex-start}.glyph{font-size:30px}.back{font-size:12px}.top h1{font-size:18px;letter-spacing:1px}.top p{font-size:11px}
   .stage{border-radius:12px}
   .stage.portrait{width:100%;min-width:0}
   .controls{gap:8px;padding:8px}.time{min-width:auto}
 }
+
+.pbtn svg{width:18px;height:18px;display:block;margin:auto;fill:none;stroke:currentColor;stroke-width:2}