224 lines
11 KiB
HTML
224 lines
11 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<link rel="icon" type="image/svg+xml" href="logo/favicon.svg">
|
||
<title>画个标 · 动态表情设计</title>
|
||
<link rel="stylesheet" href="css/style.css?v=20260815h">
|
||
<script>window.HGB_WORKSPACE = 'emoji';</script>
|
||
<style>
|
||
/* ===== 动态表情工作区专用样式（独立模块，不混入 style.css） ===== */
|
||
.plan-preview-emoji { display: flex; align-items: center; justify-content: center; background: #fff; }
|
||
.plan-preview-emoji svg { width: 84%; height: 84%; object-fit: contain; }
|
||
/* 选中图标芯片 */
|
||
.design-icon { position: relative; width: 54px; height: 54px; border: 1px solid var(--border); border-radius: 9px;
|
||
display: flex; align-items: center; justify-content: center; background: #fff; }
|
||
.design-icon svg { width: 26px; height: 26px; color: var(--text); }
|
||
.design-icon:hover { border-color: #a5b4fc; }
|
||
.icon-del { position: absolute; top: -7px; right: -7px; width: 19px; height: 19px; border-radius: 50%;
|
||
border: none; background: #ef4444; color: #fff; font-size: 11px; line-height: 1; cursor: pointer;
|
||
display: flex; align-items: center; justify-content: center; padding: 0; }
|
||
.icon-del:hover { background: #dc2626; }
|
||
/* 预览弹窗内动画类型切换 */
|
||
#plan-anim { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 4px; }
|
||
/* 导出表单 */
|
||
.export-emoji { display: flex; flex-direction: column; gap: 10px; margin-top: 10px;
|
||
border: 1px dashed var(--border); border-radius: 10px; padding: 12px 14px; background: #fafafa; }
|
||
.ee-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
|
||
.ee-label { font-size: 12px; color: var(--text-dim); flex: 0 0 40px; }
|
||
.ee-fps { width: 76px; }
|
||
.ee-row .size-row, .ee-row .bg-opt-row { flex: 1; }
|
||
</style>
|
||
</head>
|
||
<body class="emoji-mode">
|
||
<!-- ===== 顶部工具栏 ===== -->
|
||
<header class="topbar">
|
||
<div class="topbar-left">
|
||
<div class="brand">
|
||
<img class="brand-icon" src="logo/logo-mark.svg" alt="画个标" width="20" height="20">
|
||
<span class="brand-name">画个标</span>
|
||
<span class="brand-tag">😀 动态表情设计</span>
|
||
</div>
|
||
<input id="project-name" class="project-name" value="我的表情" maxlength="30" title="项目名称">
|
||
</div>
|
||
<div class="topbar-right">
|
||
<a class="tb-btn" href="index.html" title="LOGO 设计工作台：图形标识 + 品牌组合，AI 生成多套 LOGO 方案">🎨 LOGO 设计</a>
|
||
<div class="tb-divider"></div>
|
||
<a class="tb-btn" href="avatar.html" title="头像设计工作台：纯图形标识，平台规格一键导出">👤 头像设计</a>
|
||
<div class="tb-divider"></div>
|
||
<a class="tb-btn" href="poster.html" title="海报设计工作台：多规格画布 · AI 生成多套海报方案">📰 海报设计</a>
|
||
<div class="tb-divider"></div>
|
||
<a class="tb-btn primary" href="emoji.html" title="动态表情设计工作台：GIF/WebM 动图导出">😀 表情设计</a>
|
||
<div class="tb-divider"></div>
|
||
<a class="tb-btn" href="skills.html" title="技能中心：集中整合所有设计技能的学习来源、详细说明与调用参数">🧩 技能中心</a>
|
||
<div class="tb-divider"></div>
|
||
<a class="tb-btn" href="sources.html" title="素材中心：分类管理图标/表情/品牌素材，来源、协议与构建信息可查">📚 素材中心</a>
|
||
</div>
|
||
</header>
|
||
|
||
<!-- ===== 智能设计工作台 ===== -->
|
||
<div class="design-workspace">
|
||
|
||
<!-- 左：配置区 -->
|
||
<aside class="design-config">
|
||
<div class="dc-group">
|
||
<div class="modal-label">🏭 选择行业</div>
|
||
<div id="design-industry" class="industry-tabs"></div>
|
||
</div>
|
||
|
||
<div class="dc-group">
|
||
<div class="modal-label">😊 选择情绪（影响动画动效，AI 与内置引擎均按情绪匹配）</div>
|
||
<div id="design-mood" class="industry-tabs"></div>
|
||
</div>
|
||
|
||
<div class="dc-group">
|
||
<div class="modal-label">🎨 选择图标（1-5 个，不选则 AI 从行业与内置库自动选用）</div>
|
||
<div id="design-icons" class="design-icons"></div>
|
||
<button class="tb-btn w-full import-more-btn" id="btn-builtin-icons" title="浏览并选择内置的 32 万+ 开源图标，供表情设计使用">
|
||
📦 内置库浏览选择（32 万+）
|
||
</button>
|
||
</div>
|
||
|
||
<div class="dc-group dc-row">
|
||
<div class="dc-col dc-gen-btn">
|
||
<button class="tb-btn primary w-full" id="btn-generate">🚀 生成表情包</button>
|
||
</div>
|
||
<div class="dc-col dc-gen-btn">
|
||
<button class="tb-btn w-full" id="btn-regenerate" title="重新生成一张底图（同参数换布局/配色/图标），整组动画同步更新">🎲 换一张底图</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="dc-group">
|
||
<div class="modal-label">💡 智能提示</div>
|
||
<p class="pane-tip" id="design-tip">动态表情包 = 一张静态头像/图形底图 × 全部动画类型（弹跳/脉冲/摇摆/漂浮/旋转/闪烁/旋摆），微信/QQ 表情包正是这种「同图多动效」形态。🎯 点「🚀 生成表情包」出一张底图并自动展开全部动效；不满意点「🎲 换一张底图」；每张卡片自动播放动画，点「预览」可切换动效并导出 GIF（微信 240 / QQ 320，透明背景）或 WebM（Telegram 512）。</p>
|
||
</div>
|
||
</aside>
|
||
|
||
<!-- 右：方案库 -->
|
||
<div class="design-plans-wrap">
|
||
<div class="plans-head">
|
||
<span id="plans-title">😀 表情包（共 0 张）</span>
|
||
<span class="plans-tip">同一张底图 × 全部动画类型 · 卡片自动播放 · 点「预览」切换动效并导出 GIF / WebM</span>
|
||
</div>
|
||
<div id="plans-grid" class="plans-grid"></div>
|
||
<div id="plans-empty" class="plans-empty">
|
||
🎯 配置左侧参数，点击「🚀 生成表情包」——一张底图自动展开全部动画动效（弹跳/脉冲/摇摆/漂浮/旋转/闪烁/旋摆）
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ===== 方案预览弹窗 ===== -->
|
||
<div id="plan-modal" class="modal-mask hidden">
|
||
<div class="modal plan-modal">
|
||
<div class="modal-head">
|
||
<span class="modal-title">😀 表情预览</span>
|
||
<span class="modal-title-sub" id="plan-modal-sub"></span>
|
||
<button class="modal-close" data-plan-close>✕</button>
|
||
</div>
|
||
<div class="modal-body plan-modal-body">
|
||
<div class="plan-areas">
|
||
<div class="plan-area">
|
||
<div class="plan-area-label">🔷 动态图形 <span class="plan-area-en">Mark + Motion</span></div>
|
||
<div class="plan-big" id="plan-mark"></div>
|
||
</div>
|
||
</div>
|
||
<div class="modal-label" style="margin-top:6px">🎬 动画类型（预览内切换）</div>
|
||
<div id="plan-anim"></div>
|
||
<div id="plan-concept" class="plan-concept-big"></div>
|
||
<div id="plan-audit" class="plan-audit"></div>
|
||
<div class="plan-variants">
|
||
<div class="modal-label">🎨 换底图变体（整组动画同步更新）</div>
|
||
<div class="variant-row">
|
||
<button class="tb-btn" id="btn-var-color" title="切换到下一套配色/风格">🎨 换配色</button>
|
||
<button class="tb-btn" id="btn-var-layout" title="切换到下一个布局模板">🅰 换布局</button>
|
||
</div>
|
||
<div class="export-emoji">
|
||
<div class="ee-row">
|
||
<span class="ee-label">尺寸</span>
|
||
<div class="size-row">
|
||
<label class="size-opt"><input type="radio" name="em-size" value="240" checked> 240<span class="size-note">微信</span></label>
|
||
<label class="size-opt"><input type="radio" name="em-size" value="320"> 320<span class="size-note">QQ</span></label>
|
||
<label class="size-opt"><input type="radio" name="em-size" value="512"> 512<span class="size-note">Telegram</span></label>
|
||
</div>
|
||
</div>
|
||
<div class="ee-row">
|
||
<span class="ee-label">帧率</span>
|
||
<input type="number" id="em-fps" class="skill-search ee-fps" value="12" min="6" max="24" step="1">
|
||
<span class="size-note">fps（GIF/WebM 共用）</span>
|
||
</div>
|
||
<div class="ee-row">
|
||
<span class="ee-label">背景</span>
|
||
<div class="bg-opt-row">
|
||
<label class="size-opt"><input type="radio" name="em-bg" value="design" checked> 方案背景</label>
|
||
<label class="size-opt"><input type="radio" name="em-bg" value="white"> 纯白</label>
|
||
<label class="size-opt"><input type="radio" name="em-bg" value="transparent"> 透明</label>
|
||
</div>
|
||
</div>
|
||
<div class="variant-row">
|
||
<button class="tb-btn" id="btn-export-png" title="导出当前静态帧为 PNG">导出 PNG</button>
|
||
<button class="tb-btn primary" id="btn-export-gif" title="导出 GIF 动图（微信/QQ 表情主流格式，透明背景）">导出 GIF ⬇</button>
|
||
<button class="tb-btn" id="btn-export-webm" title="导出 WebM 视频（Telegram 贴纸格式）">导出 WebM</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="modal-foot">
|
||
<button class="tb-btn" data-plan-close>关闭</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ===== 内置图标库浏览弹窗 ===== -->
|
||
<div id="builtin-modal" class="modal-mask hidden">
|
||
<div class="modal builtin-modal">
|
||
<div class="modal-head">
|
||
<span class="modal-title">📦 内置图标库（离线 32 万+）</span>
|
||
<span class="modal-title-sub">点击选择图标（最多 5 个），用于表情方案</span>
|
||
<button class="modal-close" data-builtin-close>✕</button>
|
||
</div>
|
||
<div class="modal-body">
|
||
<div class="builtin-toolbar">
|
||
<div class="builtin-search-row">
|
||
<input type="text" id="builtin-search" class="skill-search" placeholder="🔍 搜索图标名称（英文），留空浏览已加载源…" autocomplete="off">
|
||
<span id="builtin-count" class="gh-count"></span>
|
||
</div>
|
||
</div>
|
||
<div id="builtin-grid" class="gh-grid"></div>
|
||
<div id="builtin-more-wrap" class="gh-more-wrap">
|
||
<button class="tb-btn" id="builtin-load-more">加载更多</button>
|
||
</div>
|
||
</div>
|
||
<div class="modal-foot">
|
||
<span class="gh-foot-info">已选图标会立即反映到左侧「选择图标」区</span>
|
||
<button class="tb-btn" data-builtin-close>关闭</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="toast" class="toast hidden"></div>
|
||
|
||
<!-- 脚本（表情模块：core → 数据 → 生成 → 动画 → 编码 → 技能 → 图标库 → UI） -->
|
||
<script src="js/data/icons.js"></script>
|
||
<script src="js/data/industries.js"></script>
|
||
<script src="js/data/styles.js?v=20260813"></script>
|
||
<script src="js/data/palettes.js"></script>
|
||
<script src="js/data/fonts.js"></script>
|
||
<script src="js/data/decorations.js"></script>
|
||
<script src="js/core/store.js?v=20260816"></script>
|
||
<script src="js/core/ai.js?v=20260927a"></script>
|
||
<script src="js/core/exporter.js?v=20260812h"></script>
|
||
<script src="js/core/generator.js?v=20260815c"></script>
|
||
<script src="js/core/avatarGen.js?v=20260815c"></script>
|
||
<script src="js/core/motion.js?v=20260823h"></script>
|
||
<script src="js/core/gifEncoder.js?v=20260823e"></script>
|
||
<script src="js/core/emojiGen.js?v=20260824a"></script>
|
||
<script src="js/core/emojiAi.js?v=20260824a"></script>
|
||
<script src="js/sticker-skills/core.js?v=20260823e"></script>
|
||
<script src="js/sticker-skills/skills.js?v=20260824a"></script>
|
||
<script src="js/data/builtin-icons.js?v=20260823g"></script>
|
||
<script src="js/core/iconlib.js?v=20260823g"></script>
|
||
<script src="js/ui/emoji.js?v=20260824a"></script>
|
||
</body>
|
||
</html>
|