Spaces:
Running
Running
| <html lang="zh-CN"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width,initial-scale=1,viewport-fit=cover"> | |
| <title>SOLANA：给区块链装上时钟的人 · 动画史</title> | |
| <meta name="description" content="Solana 从 2017 年一个深夜的灵感，到宕机、FTX 暴雷、Meme 狂欢与 ETF 的完整动画史。网页实时播放，可本地导出 B 站横屏 / 抖音竖屏 MP4。"> | |
| <link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Ccircle cx='32' cy='32' r='30' fill='%2309060f' stroke='%2314F195' stroke-width='4'/%3E%3Cpath d='M32 12v20l12 8' stroke='%239945FF' stroke-width='6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"> | |
| <link rel="stylesheet" href="css/app.css"> | |
| </head> | |
| <body> | |
| <div class="app"> | |
| <header class="top"> | |
| <div class="brand"> | |
| <span class="logo" aria-hidden="true"><i></i><i></i><i></i></span> | |
| <div> | |
| <h1>SOLANA：给区块链装上时钟的人</h1> | |
| <p>一部约 7 分钟的动画史 · 旁白 / 配乐 / 音效 · 全部在你的浏览器里实时生成</p> | |
| </div> | |
| </div> | |
| <a class="back" href="../index.html">← 返回动画工作室</a> | |
| </header> | |
| <main class="layout"> | |
| <section class="stage-col"> | |
| <div class="stage-wrap" id="stageWrap"> | |
| <div class="stage" id="stage"> | |
| <canvas id="view"></canvas> | |
| <button class="big-play" id="bigPlay" aria-label="播放"> | |
| <svg viewBox="0 0 24 24"><path d="M8 5v14l11-7z"/></svg> | |
| <span id="bigPlayText">点击播放（含声音）</span> | |
| </button> | |
| <div class="loading" id="loading"><div class="spin"></div><span id="loadingText">正在准备字体与画面…</span></div> | |
| </div> | |
| </div> | |
| <div class="controls"> | |
| <button class="ctl" id="btnPlay" title="播放 / 暂停（空格）"><svg viewBox="0 0 24 24" id="icoPlay"><path d="M8 5v14l11-7z"/></svg></button> | |
| <div class="time"><span id="tCur">0:00</span><span class="sep">/</span><span id="tTot">0:00</span></div> | |
| <div class="scrub" id="scrub"> | |
| <div class="track"><div class="fill" id="scrubFill"></div></div> | |
| <div class="marks" id="scrubMarks"></div> | |
| <div class="knob" id="scrubKnob"></div> | |
| <div class="tip" id="scrubTip"></div> | |
| </div> | |
| <button class="ctl" id="btnMute" title="静音（M）"><svg viewBox="0 0 24 24" id="icoVol"><path d="M4 9v6h4l5 5V4L8 9H4zm12.5 3A4.5 4.5 0 0 0 14 8v8a4.5 4.5 0 0 0 2.5-4z"/></svg></button> | |
| <button class="ctl" id="btnFull" title="全屏（F）"><svg viewBox="0 0 24 24"><path d="M5 5h5v2H7v3H5V5zm9 0h5v5h-2V7h-3V5zM5 14h2v3h3v2H5v-5zm12 3v-3h2v5h-5v-2h3z"/></svg></button> | |
| </div> | |
| <div class="toggles"> | |
| <div class="seg" id="segOrient" role="tablist" aria-label="画面方向"> | |
| <button data-v="landscape" class="on">▭ 横屏 16:9 · B站</button> | |
| <button data-v="portrait">▯ 竖屏 9:16 · 抖音</button> | |
| </div> | |
| <label class="chk"><input type="checkbox" id="chkSubs" checked> 字幕</label> | |
| <span class="hint">快捷键：空格 播放 · ←/→ 跳 5 秒 · [ / ] 切章节</span> | |
| </div> | |
| </section> | |
| <aside class="side"> | |
| <nav class="tabs" id="tabs"> | |
| <button data-tab="chapters" class="on">章节</button> | |
| <button data-tab="export">导出 MP4</button> | |
| <button data-tab="publish">发布文案</button> | |
| <button data-tab="cover">封面</button> | |
| </nav> | |
| <div class="panel on" data-panel="chapters"> | |
| <ol class="chapters" id="chapters"></ol> | |
| </div> | |
| <div class="panel" data-panel="export"> | |
| <h3>在浏览器里直接导出视频</h3> | |
| <p class="muted">画面逐帧离线渲染，声音一次性合成，全程不上传任何数据。导出时长取决于电脑性能，通常是视频时长的 0.5–3 倍。</p> | |
| <div class="field"> | |
| <span>画面</span> | |
| <div class="seg small" id="segExpOrient"> | |
| <button data-v="landscape" class="on">横屏 1920×1080<br><em>B 站</em></button> | |
| <button data-v="portrait">竖屏 1080×1920<br><em>抖音 / 视频号 / 小红书</em></button> | |
| </div> | |
| </div> | |
| <div class="field"> | |
| <span>帧率</span> | |
| <div class="seg small" id="segFps"> | |
| <button data-v="24">24 fps<br><em>电影感</em></button> | |
| <button data-v="30" class="on">30 fps<br><em>推荐</em></button> | |
| <button data-v="60">60 fps<br><em>最丝滑</em></button> | |
| </div> | |
| </div> | |
| <div class="field"> | |
| <span>清晰度</span> | |
| <div class="seg small" id="segQ"> | |
| <button data-v="std">标准<br><em>体积小</em></button> | |
| <button data-v="high" class="on">高<br><em>推荐</em></button> | |
| <button data-v="max">极高<br><em>体积大</em></button> | |
| </div> | |
| </div> | |
| <label class="chk"><input type="checkbox" id="expSubs" checked> 烧录字幕</label> | |
| <div class="exp-actions"> | |
| <button class="primary" id="btnExport">开始导出 MP4</button> | |
| <button class="ghost" id="btnCancel" hidden>取消</button> | |
| </div> | |
| <div class="progress" id="expProg" hidden> | |
| <div class="bar"><div id="expBar"></div></div> | |
| <div class="ptext"><span id="expStage">准备中…</span><span id="expPct">0%</span></div> | |
| <canvas id="expPreview" class="exp-preview"></canvas> | |
| </div> | |
| <div class="result" id="expResult" hidden></div> | |
| <p class="muted small" id="expSupport"></p> | |
| </div> | |
| <div class="panel" data-panel="publish"> | |
| <div class="seg small" id="segPlat"> | |
| <button data-v="douyin" class="on">抖音</button> | |
| <button data-v="bilibili">B 站</button> | |
| </div> | |
| <div id="publishBox"></div> | |
| </div> | |
| <div class="panel" data-panel="cover"> | |
| <p class="muted">封面由同一套画面引擎实时绘制，可直接下载 PNG。</p> | |
| <div class="covers"> | |
| <figure> | |
| <canvas id="coverL" class="cover-l"></canvas> | |
| <figcaption>横封面 4:3 · 1440×1080<button class="ghost small" data-dl="landscape">下载 PNG</button></figcaption> | |
| </figure> | |
| <figure> | |
| <canvas id="coverP" class="cover-p"></canvas> | |
| <figcaption>竖封面 3:4 · 1080×1440<button class="ghost small" data-dl="portrait">下载 PNG</button></figcaption> | |
| </figure> | |
| </div> | |
| </div> | |
| </aside> | |
| </main> | |
| <footer class="foot"> | |
| 价格数据来自公开行情的每日收盘价快照；画面中标注“示意”的内容为演示性可视化，不代表真实链上数据。本片不构成任何投资建议。 | |
| </footer> | |
| </div> | |
| <div class="toast" id="toast"></div> | |
| <script type="module" src="js/main.js"></script> | |
| </body> | |
| </html> | |