hz4th_coder
3a6d4fc683
- 多轨道时间线: 视频/图片/音频/文字, 拖拽/修剪/分割/复制/删除 - 12款滤镜特效 + 4种转场 + 4种文字动画 - 6款程序化原创配乐(Web Audio 实时合成, 零版权风险) - Canvas 合成 + MediaRecorder 实时导出 WebM(VP9+Opus) - 账号体系 + 每日导出额度 + 企业/AI短剧付费升级 + 管理后台 - 项目自动保存/缩略图, 移动端自适应 - 个人免费每天30次导出, 企业¥299/月 不限量, AI短剧¥499/月 不限量
116 lines
4.9 KiB
HTML
116 lines
4.9 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
|
||
<title>FreeCut 自由剪辑 · 编辑器</title>
|
||
<link rel="stylesheet" href="/css/style.css">
|
||
<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>✂️</text></svg>">
|
||
</head>
|
||
<body>
|
||
<div class="editor">
|
||
<!-- 顶栏 -->
|
||
<div class="ed-top">
|
||
<a class="logo" href="/">✂️ FreeCut</a>
|
||
<input name="projname" id="projname" value="未命名项目" maxlength="40">
|
||
<span id="quota-badge" style="font-size:12px"></span>
|
||
<span class="spacer" style="flex:1"></span>
|
||
<button class="btn small ghost" id="btn-back">← 返回</button>
|
||
<button class="btn small" id="btn-export">⬇ 导出</button>
|
||
</div>
|
||
|
||
<div class="ed-main">
|
||
<!-- 素材面板 -->
|
||
<div class="ed-left">
|
||
<div class="tabs">
|
||
<div class="tab active" data-tab="asset-tab">素材</div>
|
||
<div class="tab" data-tab="music-tab">配乐</div>
|
||
<div class="tab" data-tab="filter-tab">特效</div>
|
||
<div class="tab" data-tab="trans-tab">转场</div>
|
||
</div>
|
||
<div class="body">
|
||
<div id="asset-tab" class="tab-body">
|
||
<div class="upload-drop" id="upload-drop">📁 点击上传 / 拖入文件<br><small>视频 · 图片 · 音频</small>
|
||
<input type="file" id="file-input" multiple accept="video/*,image/*,audio/*">
|
||
</div>
|
||
<div class="asset-grid" id="asset-grid"></div>
|
||
</div>
|
||
<div id="music-tab" class="tab-body hidden"><div id="music-list"></div></div>
|
||
<div id="filter-tab" class="tab-body hidden"><div id="filter-list"></div></div>
|
||
<div id="trans-tab" class="tab-body hidden"><div id="trans-list"></div></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 预览区 -->
|
||
<div class="ed-center">
|
||
<div class="preview-wrap">
|
||
<canvas id="preview"></canvas>
|
||
<div class="ratio-toggle">
|
||
<button data-r="1080x1920" class="active">9:16</button>
|
||
<button data-r="1920x1080">16:9</button>
|
||
<button data-r="1080x1080">1:1</button>
|
||
</div>
|
||
</div>
|
||
<div class="play-bar">
|
||
<button class="btn-play" id="btn-play">▶</button>
|
||
<span class="time"><span id="cur-time">00:00</span> / <span id="tot-time">00:00</span></span>
|
||
<input type="range" id="seekbar" min="0" max="1" step="0.001" value="0">
|
||
<button class="btn small ghost" id="zoom-out">−</button>
|
||
<button class="btn small ghost" id="zoom-in">＋</button>
|
||
<button class="btn small ghost" id="btn-split" title="在播放头分割">✂ 分割</button>
|
||
<button class="btn small danger" id="btn-del" title="删除选中">🗑</button>
|
||
</div>
|
||
<!-- 时间线 -->
|
||
<div class="timeline">
|
||
<div class="tl-head">
|
||
<span class="lbl">时间线</span>
|
||
<button class="btn small ghost" id="add-text">＋ 文字</button>
|
||
<span class="muted" style="font-size:12px;margin-left:auto">点选片段 · 拖动调整 · 左右端修剪</span>
|
||
</div>
|
||
<div class="inner tl-inner">
|
||
<div class="tl-ruler"></div>
|
||
<div class="tl-tracks"></div>
|
||
<div class="tl-playhead"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 属性面板 -->
|
||
<div class="ed-right" id="props"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 导出对话框 -->
|
||
<div class="modal-mask hidden" id="export-modal">
|
||
<div class="modal">
|
||
<h3>⬇ 导出视频</h3>
|
||
<div class="row"><label>输出分辨率（画布尺寸）</label><div><span id="ex-w"></span> × <span id="ex-h"></span></div></div>
|
||
<div class="row"><label>帧率</label>
|
||
<select id="ex-fps"><option value="24">24 fps</option><option value="30" selected>30 fps</option><option value="60">60 fps</option></select>
|
||
</div>
|
||
<div class="row"><label>格式</label><div>WebM（VP9 视频 + 混音音轨）· 浏览器本地编码，无需服务器</div></div>
|
||
<div class="row muted" id="ex-info" style="font-size:12px"></div>
|
||
<div style="display:flex;gap:10px;justify-content:flex-end">
|
||
<button class="btn ghost" id="ex-close">取消</button>
|
||
<button class="btn" id="ex-start">开始导出</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 导出进度 -->
|
||
<div class="modal-mask hidden" id="export-progress">
|
||
<div class="modal" style="max-width:420px">
|
||
<h3>🛠 正在导出</h3>
|
||
<div class="progress-wrap" style="width:100%;height:14px"><div class="bar" id="ex-progress-bar"></div></div>
|
||
<p class="muted" id="ex-progress-text" style="margin-top:12px;font-size:13px"></p>
|
||
<p class="muted" style="font-size:12px">导出为实时编码：请保持此页面在前台，渲染期间不要切换标签页。</p>
|
||
</div>
|
||
</div>
|
||
|
||
<script src="/js/common.js"></script>
|
||
<script src="/js/music.js"></script>
|
||
<script src="/js/renderer.js"></script>
|
||
<script src="/js/editor.js"></script>
|
||
</body>
|
||
</html>
|