Skip to content

Fix xhs-post responsive scaling on landscape displays #18

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
cola0405 wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Fix xhs-post responsive scaling on landscape displays #18

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
24 changes: 24 additions & 0 deletions templates/full-decks/xhs-dark/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
# xhs-dark — 小红书暗黑科技风模板

竖屏 3:4 比例，深色主题 + 霓虹点缀，适合科技/数码/极客类内容。

## 特点

- 🌙 深色背景 + 霓虹紫/青/粉点缀
- 📱 竖屏 810×1080，完美适配小红书
- ⚡ 科技感贴纸 + 扫描线纹理
- 💡 基于真实神经科学内容

## 使用

直接复制本文件夹，修改 `index.html` 中的内容即可。

## 主题色

| Token | 色值 | 用途 |
|-------|------|------|
| `--accent` | `#c084fc` | 主强调色（紫） |
| `--accent-2` | `#22d3ee` | 次要强调（青） |
| `--accent-3` | `#f472b6` | 第三强调（粉） |
| `--bg` | `#0a0a0f` | 背景 |
| `--surface` | `#1a1a2e` | 卡片背景 |
170 changes: 170 additions & 0 deletions templates/full-decks/xhs-dark/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,170 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">
<title>AI 工具提效实战分享 · 周一晚分享会</title>
<link rel="stylesheet" href="../../../assets/fonts.css">
<link rel="stylesheet" href="../../../assets/base.css">
<link rel="stylesheet" href="../../../assets/animations/animations.css">
<link rel="stylesheet" href="style.css">
</head>
<body class="tpl-xhs-dark">
<div class="deck">

<!-- 1. Cover -->
<section class="slide" data-title="Cover">
<div class="page-dot">1 / 9</div>
<div class="sticker neon-cyan" style="top:120px;left:48px;transform:rotate(-6deg)">周一晚分享</div>
<div class="sticker neon-purple" style="top:140px;right:64px;transform:rotate(5deg)">实战案例</div>
<div style="margin-top:200px">
<p class="lede" style="font-size:24px;color:var(--text-1);font-weight:600">2026.05.16 分享会</p>
<h1 class="h1 mt-s">让 AI 替你<br><span class="cover-title">干活</span><br>的 4 个工具</h1>
</div>
<p class="lede mt-m" style="font-size:20px">Excel 批量处理 · OfficeCLI · HTML-PPT · MarkItDown</p>
<div class="bottom-bar"><div><span class="avatar">分</span> <b style="color:var(--text-1);margin-left:8px">@周一晚分享</b></div><div>← 左滑 查看</div></div>
</section>

<!-- 2. Agenda -->
<section class="slide" data-title="Agenda">
<div class="page-dot">2 / 9</div>
<div class="big-emoji" style="margin-top:60px">🎯</div>
<h2 class="h2 tc mt-l">今晚讲什么</h2>
<div class="stack mt-l" style="gap:16px">
<div class="hand-box"><b style="font-size:22px;color:var(--accent)">01</b> <span style="font-size:20px;margin-left:12px">Excel 批量处理 — 4000+ 份报告自动生成</span></div>
<div class="hand-box"><b style="font-size:22px;color:var(--accent-2)">02</b> <span style="font-size:20px;margin-left:12px">OfficeCLI — AI 专用的 Office 套件</span></div>
<div class="hand-box"><b style="font-size:22px;color:var(--accent-3)">03</b> <span style="font-size:20px;margin-left:12px">HTML-PPT — 47 种动效的智能演示</span></div>
<div class="hand-box"><b style="font-size:22px;color:var(--good)">04</b> <span style="font-size:20px;margin-left:12px">MarkItDown — 万能格式转换器</span></div>
</div>
</section>

<!-- 3. Excel -->
<section class="slide" data-title="Excel">
<div class="page-dot">3 / 9</div>
<div class="sticker neon-pink" style="top:100px;right:48px;transform:rotate(4deg)">效率爆炸</div>
<p class="lede" style="color:var(--accent);font-weight:700">01 / Excel 批量处理</p>
<h2 class="h2 mt-s">4000+ 份验收报告<br>原来要几天，<br>现在只要<span style="color:var(--accent)">几分钟</span>。</h2>
<div class="stack mt-l" style="gap:12px">
<div class="hand-box">
<p style="font-size:18px;margin:0;color:var(--text-2)"><b style="color:var(--text-1)">痛点：</b>人工逐份修改模板，重复性强、易出错、格式不统一</p>
</div>
<div class="hand-box" style="background:var(--surface-2)">
<p style="font-size:18px;margin:0;color:var(--text-2)"><b style="color:var(--accent)">方案：</b>30-40 分钟训练 Agent，自动拆分数据、填充模板、统一格式</p>
</div>
<div class="hand-box">
<p style="font-size:18px;margin:0;color:var(--text-2)"><b style="color:var(--good)">结果：</b>数分钟完成数百份报告，零差错、标准化输出</p>
</div>
</div>
</section>

<!-- 4. OfficeCLI -->
<section class="slide" data-title="OfficeCLI">
<div class="page-dot">4 / 9</div>
<p class="lede" style="color:var(--accent-2);font-weight:700">02 / OfficeCLI</p>
<h2 class="h2 mt-s">全球首个<br>为 AI 设计的<br>Office 套件。</h2>
<div class="hand-box mt-l">
<p style="font-size:22px;margin:0;color:var(--text-1);font-weight:700">🚀 一行代码，完全掌控 Word / Excel / PPT</p>
<p style="font-size:18px;margin:10px 0 0;color:var(--text-2);line-height:1.7">开源免费 · 单一可执行文件 · 无需安装 Office · 零依赖 · 全平台</p>
</div>
<div class="hand-box mt-m" style="background:var(--surface-2)">
<p style="font-size:20px;margin:0;color:var(--text-1);font-weight:700">✨ 内置 Agent 友好渲染引擎</p>
<p style="font-size:18px;margin:8px 0 0;color:var(--text-2);line-height:1.6">"渲染 → 看 → 改" 循环，Agent 能"看见"自己创建的内容</p>
</div>
<div class="sticker neon-cyan" style="bottom:180px;right:60px;transform:rotate(8deg)">表格美化神器</div>
</section>

<!-- 5. OfficeCLI 表格美化 -->
<section class="slide" data-title="Table Beautify">
<div class="page-dot">5 / 9</div>
<div class="num-circle" style="background:var(--accent-2)">2</div>
<h2 class="h2 mt-m">纯数据 → 专业表格<br>一键搞定。</h2>
<div class="stack mt-l" style="gap:12px">
<div class="hand-box">
<p style="font-size:18px;margin:0;color:var(--text-2)"><b style="color:var(--text-1)">自动识别：</b>适配 1-N 任意列数，无需手动框选</p>
</div>
<div class="hand-box">
<p style="font-size:18px;margin:0;color:var(--text-2)"><b style="color:var(--text-1)">批量处理：</b>一键美化多个文件，替代人工排版</p>
</div>
<div class="hand-box" style="background:var(--surface-2)">
<p style="font-size:18px;margin:0;color:var(--text-2)"><b style="color:var(--accent-2)">应用场景：</b>验收汇报、资料归档、正式汇报</p>
</div>
</div>
<p class="lede mt-m" style="font-size:18px">原始数据无样式 → OfficeCLI → 规整美观的专业表格</p>
</section>

<!-- 6. HTML-PPT -->
<section class="slide" data-title="HTML-PPT">
<div class="page-dot">6 / 9</div>
<p class="lede" style="color:var(--accent-3);font-weight:700">03 / HTML-PPT</p>
<h2 class="h2 mt-s">47 种动效，<br>让 PPT 自己<br><span style="color:var(--accent-3)">动</span>起来。</h2>
<div class="grid g2 mt-l">
<div class="hand-box">
<h4 style="font-size:22px;color:var(--text-1);margin:0 0 8px">🎨 36 套主题</h4>
<p style="font-size:16px;color:var(--text-2);margin:0">一键切换风格，无需手动调配色</p>
</div>
<div class="hand-box">
<h4 style="font-size:22px;color:var(--text-1);margin:0 0 8px">📐 31 种布局</h4>
<p style="font-size:16px;color:var(--text-2);margin:0">覆盖封面、目录、数据、对比等场景</p>
</div>
<div class="hand-box">
<h4 style="font-size:22px;color:var(--text-1);margin:0 0 8px">✨ 27 种 CSS 动效</h4>
<p style="font-size:16px;color:var(--text-2);margin:0">淡入、滑入、3D 翻转等细腻过渡</p>
</div>
<div class="hand-box">
<h4 style="font-size:22px;color:var(--text-1);margin:0 0 8px">🌟 20 种 Canvas 特效</h4>
<p style="font-size:16px;color:var(--text-2);margin:0">粒子、烟花、知识图谱等光影效果</p>
</div>
</div>
</section>

<!-- 7. HTML-PPT 优势 -->
<section class="slide" data-title="HTML-PPT Pros">
<div class="page-dot">7 / 9</div>
<div class="sticker neon-green" style="top:100px;right:48px;transform:rotate(4deg)">Agent 一键生成</div>
<h2 class="h2 mt-l">传统 PPT vs HTML-PPT</h2>
<div class="stack mt-l" style="gap:16px">
<div class="hand-box" style="border-color:var(--bad)">
<p style="font-size:18px;margin:0;color:var(--text-2)"><b style="color:var(--bad)">传统 PPT：</b>人工选版式、排内容、调字体、对齐格式，细碎繁琐</p>
</div>
<div class="hand-box" style="border-color:var(--good);background:var(--surface-2)">
<p style="font-size:18px;margin:0;color:var(--text-2)"><b style="color:var(--good)">HTML-PPT：</b>输入需求 → Agent 套模板 → 一键生成整套演示文稿</p>
</div>
</div>
<p class="lede mt-l" style="font-size:20px">动效老旧单一 → <b style="color:var(--accent-3)">47 种高阶动效，流畅丝滑</b></p>
<p class="lede mt-s" style="font-size:20px">同质化严重 → <b style="color:var(--accent-3)">精致高级，适配专业场景</b></p>
</section>

<!-- 8. MarkItDown -->
<section class="slide" data-title="MarkItDown">
<div class="page-dot">8 / 9</div>
<p class="lede" style="color:var(--good);font-weight:700">04 / MarkItDown</p>
<h2 class="h2 mt-s">微软出的<br>万能格式<br>转换器。</h2>
<div class="hand-box mt-l">
<p style="font-size:20px;margin:0;color:var(--text-1);font-weight:700">📄 文档 → PDF / Word / PPT / Excel</p>
<p style="font-size:20px;margin:8px 0 0;color:var(--text-1);font-weight:700">🌐 网页 → HTML</p>
<p style="font-size:20px;margin:8px 0 0;color:var(--text-1);font-weight:700">🖼️ 图片 → OCR 文字</p>
<p style="font-size:20px;margin:8px 0 0;color:var(--text-1);font-weight:700">🎵 音频 → 语音转录</p>
</div>
<div class="hand-box mt-m" style="background:var(--surface-2)">
<p style="font-size:18px;margin:0;color:var(--text-2)"><b style="color:var(--good)">核心优势：</b>保留文档结构、LLM 友好、Token 效率高、支持插件扩展</p>
</div>
</section>

<!-- 9. CTA -->
<section class="slide" data-title="CTA">
<div class="page-dot">9 / 9</div>
<div class="big-emoji" style="margin-top:60px">🚀</div>
<h2 class="h2 tc mt-l">工具不是目的</h2>
<h1 class="h1 tc mt-s" style="color:var(--accent);font-size:60px">提效才是</h1>
<p class="lede tc mt-l" style="padding:0 30px">4 个工具，解决 4 类重复劳动：<br><b style="color:var(--text-1)">表格处理 · 文档生成 · 演示制作 · 格式转换</b></p>
<div class="tag-row" style="justify-content:center;margin-top:36px">
<span class="ht">#AI提效</span>
<span class="ht">#办公自动化</span>
<span class="ht">#Agent实战</span>
<span class="ht">#周一晚分享</span>
</div>
<div class="bottom-bar"><div><span class="avatar">分</span> <b style="color:var(--text-1);margin-left:8px">@周一晚分享</b></div><div>💜 收藏关注</div></div>
</section>

</div>
<script src="../../../assets/runtime.js"></script>
</body></html>
66 changes: 66 additions & 0 deletions templates/full-decks/xhs-dark/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,66 @@
/* xhs-dark — 小红书暗黑科技风 3:4 */
.tpl-xhs-dark{
--bg:#0a0a0f;--bg-soft:#12121a;--surface:#1a1a2e;--surface-2:#16213e;
--border:rgba(139,92,246,.15);--border-strong:rgba(139,92,246,.3);
--text-1:#e2e8f0;--text-2:#94a3b8;--text-3:#64748b;
--accent:#c084fc;--accent-2:#22d3ee;--accent-3:#f472b6;
--grad:linear-gradient(135deg,#c084fc,#22d3ee 50%,#f472b6);
--good:#4ade80;--warn:#fbbf24;--bad:#f87171;
--radius:24px;--radius-lg:32px;
--shadow:0 14px 36px rgba(0,0,0,.4),0 0 0 1px rgba(139,92,246,.1);
font-family:'Inter','Noto Sans SC','PingFang SC',sans-serif;
}
/* 竖屏适配：在横屏显示器上自动缩放 */
.tpl-xhs-dark{background:#050508;display:flex;align-items:center;justify-content:center;min-height:100vh;overflow:hidden}
.tpl-xhs-dark .deck{
width:810px;height:1080px;position:relative;background:transparent;
transform-origin:center center;
}
/* 当视口高度不足以容纳 1080px 时，按比例缩放 */
@media (max-height:1120px){
.tpl-xhs-dark .deck{
transform:scale(calc(100vh / 1120));
}
}
/* 当视口宽度不足以容纳 810px 时，按比例缩放 */
@media (max-width:850px){
.tpl-xhs-dark .deck{
transform:scale(calc(100vw / 850));
}
}
.tpl-xhs-dark .slide{
position:absolute;inset:0;width:810px;height:1080px;aspect-ratio:3/4;
padding:70px 64px;border-radius:28px;overflow:hidden;
background:var(--bg);
}
.tpl-xhs-dark .slide::before{content:"";position:absolute;inset:0;background:
radial-gradient(45% 30% at 80% 10%,rgba(192,132,252,.15),transparent 70%),
radial-gradient(50% 35% at 10% 95%,rgba(34,211,238,.1),transparent 70%),
radial-gradient(40% 30% at 90% 85%,rgba(244,114,182,.08),transparent 70%);
pointer-events:none;z-index:0}
.tpl-xhs-dark .slide::after{content:"";position:absolute;inset:0;background:
repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(139,92,246,.03) 2px,rgba(139,92,246,.03) 4px);
pointer-events:none;z-index:0}
.tpl-xhs-dark .slide > *{position:relative;z-index:1}
.tpl-xhs-dark .h1{font-size:72px;line-height:1.1;font-weight:900;letter-spacing:-.02em;color:var(--text-1)}
.tpl-xhs-dark .h2{font-size:54px;line-height:1.15;font-weight:800;letter-spacing:-.015em;color:var(--text-1)}
.tpl-xhs-dark .h3{font-size:36px;font-weight:800;color:var(--text-1)}
.tpl-xhs-dark .page-dot{position:absolute;top:40px;right:48px;background:var(--surface);color:var(--accent);border:1px solid var(--border);border-radius:999px;padding:6px 14px;font-family:'JetBrains Mono',monospace;font-size:14px;font-weight:700;z-index:2}
.tpl-xhs-dark .sticker{position:absolute;padding:10px 18px;background:var(--surface);border:1.5px solid var(--border-strong);border-radius:18px;font-weight:800;font-size:18px;color:var(--text-1);transform:rotate(-3deg);box-shadow:0 0 20px rgba(192,132,252,.2),0 4px 12px rgba(0,0,0,.3)}
.tpl-xhs-dark .sticker.neon-pink{border-color:var(--accent-3);color:var(--accent-3);box-shadow:0 0 20px rgba(244,114,182,.25),0 4px 12px rgba(0,0,0,.3)}
.tpl-xhs-dark .sticker.neon-cyan{border-color:var(--accent-2);color:var(--accent-2);box-shadow:0 0 20px rgba(34,211,238,.25),0 4px 12px rgba(0,0,0,.3)}
.tpl-xhs-dark .sticker.neon-purple{border-color:var(--accent);color:var(--accent);box-shadow:0 0 20px rgba(192,132,252,.25),0 4px 12px rgba(0,0,0,.3)}
.tpl-xhs-dark .sticker.neon-green{border-color:var(--good);color:var(--good);box-shadow:0 0 20px rgba(74,222,128,.25),0 4px 12px rgba(0,0,0,.3)}
.tpl-xhs-dark .hand-box{background:var(--surface);border:1.5px solid var(--border);border-radius:22px;padding:24px 28px;box-shadow:var(--shadow)}
.tpl-xhs-dark .lede{color:var(--text-2);font-size:26px;line-height:1.55}
.tpl-xhs-dark .big-emoji{font-size:180px;line-height:1;text-align:center;filter:drop-shadow(0 0 30px rgba(192,132,252,.3))}
.tpl-xhs-dark .num-circle{display:inline-flex;align-items:center;justify-content:center;width:72px;height:72px;border-radius:50%;background:var(--accent);color:var(--bg);font-weight:900;font-size:36px;border:2px solid var(--accent);box-shadow:0 0 30px rgba(192,132,252,.4)}
.tpl-xhs-dark .step-card{background:var(--surface);border:1.5px solid var(--border);border-radius:22px;padding:26px 28px;box-shadow:var(--shadow);margin-bottom:24px}
.tpl-xhs-dark .step-card h4{font-size:28px;font-weight:800;margin:0 0 6px}
.tpl-xhs-dark .step-card p{font-size:18px;color:var(--text-2);margin:0}
.tpl-xhs-dark .tag-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}
.tpl-xhs-dark .ht{background:var(--surface);color:var(--accent);border:1.5px solid var(--border);padding:6px 14px;border-radius:999px;font-weight:700;font-size:16px}
.tpl-xhs-dark .cover-title{background:linear-gradient(180deg,transparent 60%,var(--accent) 60%,var(--accent) 92%,transparent 92%);padding:0 10px;color:var(--text-1)}
.tpl-xhs-dark .heart{color:var(--accent-3);font-size:28px}
.tpl-xhs-dark .bottom-bar{position:absolute;bottom:40px;left:64px;right:64px;display:flex;justify-content:space-between;align-items:center;font-size:15px;color:var(--text-3);font-family:'JetBrains Mono',monospace;z-index:2}
.tpl-xhs-dark .avatar{width:54px;height:54px;border-radius:50%;background:var(--grad);border:2px solid var(--accent);box-shadow:0 0 20px rgba(192,132,252,.3);display:inline-flex;align-items:center;justify-content:center;font-weight:900;font-size:20px;color:var(--bg)}
20 changes: 18 additions & 2 deletions templates/full-decks/xhs-post/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,8 +10,24 @@
--shadow:0 14px 36px rgba(90,40,30,.08);
font-family:'Inter','Noto Sans SC','PingFang SC',sans-serif;
}
.tpl-xhs-post{background:#f0eae2;display:flex;align-items:center;justify-content:center;min-height:100vh}
.tpl-xhs-post .deck{width:810px;height:1080px;position:relative;background:transparent}
/* 竖屏适配：在横屏显示器上自动缩放 */
.tpl-xhs-post{background:#f0eae2;display:flex;align-items:center;justify-content:center;min-height:100vh;overflow:hidden}
.tpl-xhs-post .deck{
width:810px;height:1080px;position:relative;background:transparent;
transform-origin:center center;
}
/* 当视口高度不足以容纳 1080px 时，按比例缩放 */
@media (max-height:1120px){
.tpl-xhs-post .deck{
transform:scale(calc(100vh / 1120));
}
}
/* 当视口宽度不足以容纳 810px 时，按比例缩放 */
@media (max-width:850px){
.tpl-xhs-post .deck{
transform:scale(calc(100vw / 850));
}
}
.tpl-xhs-post .slide{
position:absolute;inset:0;width:810px;height:1080px;aspect-ratio:3/4;
padding:70px 64px;border-radius:28px;overflow:hidden;
Expand Down