solana-clock: 发布文案 + 横竖屏封面

.gitattributes

@@ -9,3 +9,5 @@ guozu/covers/cover-portrait.png filter=lfs diff=lfs merge=lfs -text
 solana-clock/fonts/sol-sc-900.woff2 filter=lfs diff=lfs merge=lfs -text
 solana-clock/fonts/sol-sc-700.woff2 filter=lfs diff=lfs merge=lfs -text
 solana-clock/fonts/sol-sc-400.woff2 filter=lfs diff=lfs merge=lfs -text
+solana-clock/covers/cover-landscape.png filter=lfs diff=lfs merge=lfs -text
+solana-clock/covers/cover-portrait.png filter=lfs diff=lfs merge=lfs -text

README.md

@@ -24,9 +24,9 @@ pinned: false
 | 3 | 动画引擎 + 全部场景（横屏 16:9 / 竖屏 9:16 双布局 + 烧录字幕 + 安全区）+ 播放器页面 + 字体子集；无头浏览器 90 帧截图 + 逐 0.5 秒排版检查通过 | ✅ 完成 |
 | 4 | 程序化音乐（15 段编曲：和弦垫 / 贝斯 / 琶音 / 鼓 / 时钟滴答）+ 57 种合成音效（258 个触发点）+ 旁白闪避混音 + 混响 + 限幅；按场景分段渲染，约 3 秒即可出声 | ✅ 完成 |
 | 5 | 播放器 UI（章节跳转 / 拖动进度 / 横竖切换 / 安全区显示 / 快捷键）+ 浏览器本地 MP4 导出（24 / 30 / 60 fps，横屏 1920×1080 / 竖屏 1080×1920，H.264 优先，支持边生成边写盘、进度预览与取消） | ✅ 完成 |
-| 6 | 抖音 / B站 发布标题、简介、标签（一键复制） | ⏳ 进行中 |
-| 7 | 横屏 1920×1080 / 竖屏 1080×1920 封面图 | ⬜ 待做 |
-| 8 | 无头浏览器自动化测试 + 修复 + 最终推送 | ⬜ 待做 |
+| 6 | 抖音 / B站 发布标题、简介、标签（一键复制，含章节时间戳与字数统计） | ✅ 完成 |
+| 7 | 横屏 1920×1080 / 竖屏 1080×1920 封面图（页面内可下载 + covers/ 静态 PNG） | ✅ 完成 |
+| 8 | 无头浏览器自动化测试 + 修复 + 最终推送 | ⏳ 进行中 |
 
 ## 1. 创意核心
 

solana-clock/fonts/sol-sc-400.woff2

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:710128990e82a6e9b800590829c4aafc04858adb4e5e7d2c759c52d38b5dca93
-size 129180
+oid sha256:30b9331388c3fb7bf2daab2464a825a2acce436ab7affe32c7c29535d6418a90
+size 137196

solana-clock/fonts/sol-sc-700.woff2

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:7187fcdff06944959bf4237af6c05857fcfee7e2347acf8a90bd6189a7e2c8ef
-size 129048
+oid sha256:2585dfd8acb1283c16ecbdf5470a71cb714de115e5f37c416f6e4ed80cde9c8b
+size 137292

solana-clock/fonts/sol-sc-900.woff2

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:2d88e49addb97e22470ed9f8b25b2fa7d3c574f3765eeba7fd3c34f679586750
-size 127684
+oid sha256:94a8026a83f635762a62180c51575b47a927e87ab306b4955f32c076fab5c736
+size 136976

solana-clock/js/cover.js

@@ -0,0 +1,95 @@
+// Cover art (landscape 1920×1080 for Bilibili, portrait 1080×1920 for Douyin), drawn with the same toolkit as the film.
+import { text, gradText, glow, solLogo, dial, pill, rr, hexA, rng, F_SC, F_GR, F_MONO, PURPLE, GREEN, PINK, GOLD, RED, WHITE } from './draw.js';
+import { drawChart, idx, LAST } from './chart.js';
+
+function bg(ctx, W, H, P) {
+  const g = ctx.createLinearGradient(0, 0, W, H); g.addColorStop(0, '#160a35'); g.addColorStop(.55, '#07040f'); g.addColorStop(1, '#03110c');
+  ctx.fillStyle = g; ctx.fillRect(0, 0, W, H);
+  glow(ctx, W * .18, H * .2, Math.max(W, H) * .55, PURPLE, .5);
+  glow(ctx, W * .9, H * .85, Math.max(W, H) * .5, GREEN, .28);
+  glow(ctx, W * .6, H * .05, Math.max(W, H) * .3, PINK, .18);
+  const r = rng(7); ctx.fillStyle = '#fff';
+  for (let i = 0; i < 220; i++) { ctx.globalAlpha = .15 + r() * .6; const s = r() * 2.2 + .4; ctx.fillRect(r() * W, r() * H, s, s); }
+  ctx.globalAlpha = 1;
+  // perspective grid floor
+  const hy = H * (P ? .78 : .74);
+  ctx.save(); ctx.globalAlpha = .35;
+  const fg = ctx.createLinearGradient(0, hy, 0, H); fg.addColorStop(0, hexA(GREEN, 0)); fg.addColorStop(1, hexA(GREEN, .8));
+  ctx.strokeStyle = fg; ctx.lineWidth = 2;
+  for (let i = -16; i <= 16; i++) { ctx.beginPath(); ctx.moveTo(W / 2 + i * 26, hy); ctx.lineTo(W / 2 + i * W * .2, H); ctx.stroke(); }
+  for (let j = 1; j < 12; j++) { const z = j / 12, y = hy + (H - hy) * z * z; ctx.globalAlpha = .35 * z; ctx.beginPath(); ctx.moveTo(0, y); ctx.lineTo(W, y); ctx.stroke(); }
+  ctx.restore();
+}
+
+function clockMark(ctx, cx, cy, R) {
+  glow(ctx, cx, cy, R * 2.4, PURPLE, .55);
+  ctx.save(); ctx.beginPath(); ctx.arc(cx, cy, R, 0, Math.PI * 2); ctx.fillStyle = 'rgba(10,6,24,.85)'; ctx.fill(); ctx.restore();
+  // gradient rim
+  ctx.save(); const g = ctx.createLinearGradient(cx - R, cy + R, cx + R, cy - R); g.addColorStop(0, PINK); g.addColorStop(.5, PURPLE); g.addColorStop(1, GREEN);
+  ctx.strokeStyle = g; ctx.lineWidth = R * .06; ctx.beginPath(); ctx.arc(cx, cy, R, 0, Math.PI * 2); ctx.stroke(); ctx.restore();
+  dial(ctx, cx, cy, R * .9, { hand: .335, minute: .87, ticks: 60, lw: R * .018, accent: GREEN });
+  solLogo(ctx, cx, cy + R * .36, R * .5, 1, 1);
+  // 400ms arc
+  ctx.save(); ctx.strokeStyle = GREEN; ctx.lineWidth = R * .05; ctx.lineCap = 'round'; ctx.shadowBlur = 30; ctx.shadowColor = GREEN;
+  ctx.beginPath(); ctx.arc(cx, cy, R * 1.12, -Math.PI / 2, -Math.PI / 2 + Math.PI * 2 * .4 / 6); ctx.stroke(); ctx.restore();
+}
+
+function chartBand(ctx, rect, lw) {
+  const r = drawChart(ctx, rect, { from: 0, to: LAST, prog: 1, log: true, grid: false, dates: false, head: false, headLabel: false, lw, yMin: .4, yMax: 420, color: GREEN, color2: PURPLE });
+  const mark = (date, label, color, up) => {
+    const i = idx(date), x = r.X(i), y = r.Y(Math.max(.5, priceAt(i)));
+    glow(ctx, x, y, 46, color, .9); ctx.fillStyle = '#fff'; ctx.beginPath(); ctx.arc(x, y, lw * 1.3, 0, 7); ctx.fill();
+    text(ctx, label, x, y + (up ? -42 : 44), { size: lw * 5.4, fam: F_MONO, weight: 800, color, align: 'center', stroke: 6, strokeColor: 'rgba(0,0,0,.8)' });
+  };
+  return { r, mark };
+}
+import { price as priceAt } from './chart.js';
+
+export function drawCover(ctx, orient) {
+  const P = orient === 'portrait', W = P ? 1080 : 1920, H = P ? 1920 : 1080;
+  ctx.save();
+  bg(ctx, W, H, P);
+  if (!P) {
+    const { mark } = chartBand(ctx, { x: 80, y: 600, w: 1760, h: 360 }, 6);
+    mark('2020-04-10', '$0.74', '#c9b6ff', true);
+    mark('2021-11-06', '$259', GREEN, true);
+    mark('2022-12-29', '$9.6', RED, false);
+    mark('2025-01-19', '$262', GOLD, true);
+    clockMark(ctx, 1500, 330, 210);
+    pill(ctx, '7 分钟动画史 · 2017 → 2026', 110, 120, { size: 32, align: 'left', color: GREEN });
+    gradText(ctx, 'SOLANA', 104, 268, { size: 150, fam: F_GR, weight: 700, ls: 10 });
+    text(ctx, '给区块链装上时钟的人', 108, 420, { size: 104, weight: 900, color: WHITE, shadow: 30, shadowColor: 'rgba(153,69,255,.8)' });
+    text(ctx, '400 毫秒一个块 · 跌 96% 又爬回来', 112, 528, { size: 46, weight: 800, color: hexA(WHITE, .82) });
+  } else {
+    // Douyin grids crop covers to a centered 3:4 area (y ≈ 240…1680) — keep the key text inside it.
+    pill(ctx, '7 分钟动画史', W / 2, 330, { size: 40, color: GREEN });
+    gradText(ctx, 'SOLANA', W / 2, 470, { size: 170, fam: F_GR, weight: 700, ls: 10, align: 'center' });
+    text(ctx, '给区块链', W / 2, 640, { size: 130, weight: 900, color: WHITE, align: 'center', shadow: 30, shadowColor: 'rgba(153,69,255,.85)' });
+    text(ctx, '装上时钟的人', W / 2, 790, { size: 130, weight: 900, color: WHITE, align: 'center', shadow: 30, shadowColor: 'rgba(153,69,255,.85)' });
+    clockMark(ctx, W / 2, 1110, 190);
+    const { mark } = chartBand(ctx, { x: 90, y: 1360, w: 900, h: 250 }, 5);
+    mark('2021-11-06', '$259', GREEN, true);
+    mark('2022-12-29', '$9.6', RED, false);
+    mark('2025-01-19', '$262', GOLD, true);
+    text(ctx, '2017 → 2026 · 九年沉浮全史', W / 2, 1650, { size: 44, weight: 800, color: hexA(WHITE, .85), align: 'center' });
+  }
+  // thin frame
+  ctx.strokeStyle = 'rgba(255,255,255,.08)'; ctx.lineWidth = 4; ctx.strokeRect(2, 2, W - 4, H - 4);
+  ctx.restore();
+}
+
+export function initCoverPanel({ toast }) {
+  const make = (id, o) => {
+    const c = document.querySelector(id); const [W, H] = o === 'portrait' ? [1080, 1920] : [1920, 1080];
+    c.width = W; c.height = H; drawCover(c.getContext('2d'), o); return c;
+  };
+  const cs = { landscape: make('#coverL', 'landscape'), portrait: make('#coverP', 'portrait') };
+  document.querySelectorAll('[data-dl]').forEach(b => b.onclick = () => {
+    const o = b.dataset.dl;
+    cs[o].toBlob(blob => {
+      const a = document.createElement('a'); a.href = URL.createObjectURL(blob);
+      a.download = o === 'portrait' ? 'Solana动画史_抖音竖屏封面_1080x1920.png' : 'Solana动画史_B站横屏封面_1920x1080.png';
+      document.body.appendChild(a); a.click(); a.remove(); toast('封面已下载');
+    }, 'image/png');
+  });
+}

solana-clock/js/publish.js

@@ -0,0 +1,97 @@
+// Publish copy for Douyin / Bilibili with one-click copy. Chapter timestamps are computed from the live timeline.
+import { TL } from './engine.js';
+
+const fmt = s => { s = Math.floor(s); return `${String(Math.floor(s / 60)).padStart(2, '0')}:${String(s % 60).padStart(2, '0')}`; };
+const len = s => Array.from(s).length;
+const chapters = () => TL.scenes.map(s => `${fmt(s.start)} ${s.chapter}${s.year ? `（${s.year}）` : ''}`).join('\n');
+
+export function buildCopy() {
+  const dur = `${Math.floor(TL.total / 60)} 分 ${Math.round(TL.total % 60)} 秒`;
+  return {
+    douyin: {
+      label: '抖音',
+      titles: [
+        '400 毫秒一个块！Solana 凭什么这么快？7 分钟看懂它的九年',
+        '给区块链装上时钟的人：Solana 从深夜灵感到华尔街 ETF',
+        '跌掉 96% 被宣判死刑，它又爬回来了｜Solana 动画史',
+        '一杯啤酒想出的点子，造出了最快的公链之一',
+      ],
+      titleMax: 55,
+      desc: `2017 年一个深夜，两杯咖啡加一杯啤酒，一位高通工程师想到：如果给区块链装上一个时钟呢？
+从「历史证明」到 312 逆风上线，从 2021 狂飙 170 倍、宕机 17 小时，到 FTX 暴雷跌去 96%，再到 Meme 狂欢、历史新高与华尔街 ETF——
+${dur}动画，带你看完 Solana 的完整故事。
+
+📌 仅为科普回顾，不构成任何投资建议
+👉 你觉得 Solana 下一个十年会怎样？评论区聊聊`,
+      descMax: 1000,
+      tags: ['Solana', 'SOL', '区块链', '加密货币', '比特币', '科普动画', 'Web3', '币圈故事', '涨知识', '财经'],
+      tagFmt: t => `#${t}`,
+      tagJoin: ' ',
+      tips: ['竖屏 1080×1920 导出后直接上传，画面关键内容已避开顶部状态栏、右侧按钮和底部文案区。', '封面请选「封面」页里的竖屏封面，标题建议选第 1 条（带数字更容易点开）。', '发布时间推荐工作日 12:00 或 20:00–22:00。'],
+    },
+    bilibili: {
+      label: 'B 站',
+      titles: [
+        '【动画科普】给区块链装上时钟的人：Solana 九年沉浮全史（2017–2026）',
+        '400 毫秒一个块，跌 96% 又爬回来：一口气看懂 Solana 的前世今生',
+        '从一杯啤酒到华尔街 ETF：Solana 是怎么成为“最快公链”的？【加密史动画】',
+      ],
+      titleMax: 80,
+      desc: `用 ${dur}的动画，讲完 Solana（SOL）从 2017 年一个深夜的灵感，到 2026 年的完整发展史。
+
+⏱ 章节
+${chapters()}
+
+📊 价格数据：SOL 日线收盘价（2020-04 至 2026-10）；画面中标注“示意”的为演示性可视化。
+🎙 旁白、配乐、音效与画面均为程序实时生成。
+⚠️ 本视频仅为科普回顾，不构成任何投资建议。
+
+如果觉得有帮助，一键三连支持一下～ 你还想看哪条链的故事？评论区告诉我！`,
+      descMax: 2000,
+      tags: ['Solana', 'SOL', '区块链', '加密货币', '科普', '动画', '历史证明', 'FTX', 'Meme币', '比特币'],
+      tagFmt: t => t,
+      tagJoin: ',',
+      tips: ['分区建议：知识 → 财经商业（或 科学科普）；类型选「自制」。', '横屏 1920×1080 导出后上传；简介里的章节时间点会自动显示为可点击跳转。', 'B 站标签最多 10 个，每个不超过 20 字，已按此准备好。'],
+    },
+  };
+}
+
+const esc = s => s.replace(/[&<>]/g, c => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;' }[c]));
+
+async function copyText(str, toast) {
+  try { await navigator.clipboard.writeText(str); }
+  catch {
+    const ta = document.createElement('textarea'); ta.value = str; ta.style.position = 'fixed'; ta.style.opacity = '0';
+    document.body.appendChild(ta); ta.select(); document.execCommand('copy'); ta.remove();
+  }
+  toast('已复制到剪贴板');
+}
+
+export function initPublishPanel({ toast }) {
+  const C = buildCopy();
+  const box = document.querySelector('#publishBox');
+  let plat = 'douyin';
+  const store = {};
+  function render() {
+    const c = C[plat];
+    const tagStr = c.tags.map(c.tagFmt).join(c.tagJoin);
+    const all = `${c.titles[0]}\n\n${c.desc}\n\n${plat === 'douyin' ? tagStr : '标签：' + tagStr}`;
+    Object.assign(store, { all, desc: c.desc, tags: tagStr });
+    c.titles.forEach((t, i) => store['t' + i] = t);
+    box.innerHTML = `
+      <div class="pub-block"><div class="pub-head"><b>标题（任选一条）</b><span class="count">上限 ${c.titleMax} 字</span></div>
+        <div class="pub-alt">${c.titles.map((t, i) => `<div class="row"><span>${esc(t)} <em class="count ${len(t) > c.titleMax ? 'over' : ''}">${len(t)}字</em></span><button class="copy" data-k="t${i}">复制</button></div>`).join('')}</div></div>
+      <div class="pub-block"><div class="pub-head"><b>简介</b><span><span class="count ${len(c.desc) > c.descMax ? 'over' : ''}">${len(c.desc)} / ${c.descMax}</span> <button class="copy" data-k="desc">复制</button></span></div>
+        <div class="pub-text">${esc(c.desc)}</div></div>
+      <div class="pub-block"><div class="pub-head"><b>标签 / 话题</b><button class="copy" data-k="tags">复制</button></div>
+        <div class="tags">${c.tags.map(t => `<span>${esc(c.tagFmt(t))}</span>`).join('')}</div></div>
+      <div class="pub-block"><button class="primary" data-k="all" style="width:100%">一键复制全部（标题 + 简介 + 标签）</button></div>
+      <div class="pub-block"><div class="pub-head"><b>发布小贴士</b></div><ul class="muted" style="padding-left:18px;margin:0">${c.tips.map(t => `<li>${esc(t)}</li>`).join('')}</ul></div>`;
+  }
+  box.addEventListener('click', e => { const b = e.target.closest('[data-k]'); if (b) copyText(store[b.dataset.k], toast); });
+  document.querySelector('#segPlat').addEventListener('click', e => {
+    const b = e.target.closest('button'); if (!b) return;
+    plat = b.dataset.v; document.querySelectorAll('#segPlat button').forEach(x => x.classList.toggle('on', x === b)); render();
+  });
+  render();
+}

solana-clock/tools/covers.py

@@ -0,0 +1,18 @@
+#!/usr/bin/env python3
+"""Render covers/cover-landscape.png and covers/cover-portrait.png with headless Chromium."""
+import asyncio, base64, pathlib, sys
+from playwright.async_api import async_playwright
+ROOT = pathlib.Path(__file__).resolve().parent.parent
+base = sys.argv[1] if len(sys.argv) > 1 else 'http://localhost:8765/solana-clock/index.html'
+async def main():
+    async with async_playwright() as p:
+        b = await p.chromium.launch(); pg = await b.new_page(viewport={'width': 1500, 'height': 950})
+        errs = []; pg.on('pageerror', lambda e: errs.append(str(e)))
+        await pg.goto(base + '?nomix=1&tab=cover', wait_until='networkidle')
+        await pg.wait_for_function('window.__ready'); await pg.wait_for_timeout(1200)
+        for o, sel in [('landscape', '#coverL'), ('portrait', '#coverP')]:
+            d = await pg.evaluate(f'(async()=>{{const m=await import("./js/cover.js");const c=document.querySelector("{sel}");m.drawCover(c.getContext("2d"),"{o}");return c.toDataURL("image/png")}})()')
+            (ROOT / 'covers' / f'cover-{o}.png').write_bytes(base64.b64decode(d.split(',')[1]))
+        await pg.screenshot(path='/tmp/ui-cover.png')
+        print('errors:', errs or 'none'); await b.close()
+asyncio.run(main())