|
|
|
|
@ -1,93 +0,0 @@
|
|
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html lang="zh-CN">
|
|
|
|
|
<head>
|
|
|
|
|
<meta charset="UTF-8" />
|
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
|
|
|
<title>DeAudio - 剪辑下载</title>
|
|
|
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&display=swap" rel="stylesheet">
|
|
|
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" />
|
|
|
|
|
<style>
|
|
|
|
|
:root{--bg:#f4f7fb;--card:#ffffff;--primary:#2f80ed;--muted:#6b7280;--radius:12px}
|
|
|
|
|
*{box-sizing:border-box}html,body{height:100%}body{font-family:'Inter',Arial,sans-serif;margin:0;background:var(--bg);color:#0f172a;display:flex;flex-direction:column}
|
|
|
|
|
.topbar{height:64px;background:linear-gradient(90deg,#fff,#f8fbff);display:flex;align-items:center;justify-content:space-between;padding:0 24px;box-shadow:0 1px 0 rgba(15,23,42,0.04);flex:0 0 64px}
|
|
|
|
|
.brand{display:flex;align-items:center;gap:12px;font-weight:700;color:var(--primary)}.brand i{font-size:20px}
|
|
|
|
|
.layout{display:flex;gap:16px;padding:18px;flex:1 1 auto;width:100%;margin:0}
|
|
|
|
|
.sidebar{width:260px;background:linear-gradient(180deg,#ffffff,#fbfdff);padding:18px;border-radius:var(--radius);box-shadow:0 6px 18px rgba(15,23,42,0.06);height:calc(100vh - 64px);overflow:auto;display:flex;flex-direction:column}
|
|
|
|
|
.nav-links{display:flex;flex-direction:column;justify-content:space-around;flex:1;padding:8px 0}.nav-links a{display:block;padding:14px;border-radius:10px;color:#0f172a;text-decoration:none;margin:6px 0;font-weight:700;font-size:15px}.nav-links a.active{background:var(--primary);color:#fff}
|
|
|
|
|
.main{flex:1;min-height:0}.card{background:var(--card);padding:28px;border-radius:var(--radius);box-shadow:0 8px 30px rgba(15,23,42,0.06);height:100%;display:flex;flex-direction:column}h2{margin:0 0 14px 0;font-size:22px}
|
|
|
|
|
.audio-player{margin-bottom:1.5rem;border:1px solid #e0e0e0;border-radius:8px;padding:1rem;background-color:#f8f9fa}.audio-player audio{width:100%}.waveform-container{width:100%;height:150px;background:#f8f9fa;margin:1rem 0;border:1px solid #ddd;display:flex;align-items:center;justify-content:center;color:#666}
|
|
|
|
|
.time-inputs{display:flex;gap:1rem;margin-bottom:1rem;flex-wrap:wrap}.time-inputs .time-group{display:flex;flex-direction:column;flex:1;min-width:120px}.time-inputs label{font-size:0.9rem;margin-bottom:0.25rem}.time-inputs input{padding:0.5rem;border:1px solid #ddd;border-radius:4px}
|
|
|
|
|
.editing-controls h3{margin-top:1rem;margin-bottom:0.5rem;color:#333}.editing-buttons{display:flex;flex-wrap:wrap;gap:0.5rem;margin-bottom:1rem}.editing-buttons button{padding:0.5rem 1rem;background:var(--primary);color:#fff;border:none;border-radius:8px}
|
|
|
|
|
.clip-controls{margin-top:1rem}.clip-controls button{padding:0.75rem 1.5rem;background:#28a745;color:#fff;border:none;border-radius:8px;margin-right:0.5rem}.download-btn{padding:0.75rem 1.5rem;background:#17a2b8;color:#fff;border:none;border-radius:8px;margin-top:1rem}.feedback{margin-top:1rem;padding:0.75rem;background:#e9ecef;border-radius:4px;color:#495057}
|
|
|
|
|
@media(max-width:880px){.layout{flex-direction:column;padding:16px}.sidebar{width:100%;height:auto}.nav-links{justify-content:flex-start}}
|
|
|
|
|
</style>
|
|
|
|
|
</head>
|
|
|
|
|
<body>
|
|
|
|
|
<div class="topbar">
|
|
|
|
|
<div class="brand"><i class="fas fa-music"></i><div>DeAudio</div></div>
|
|
|
|
|
<div class="small">剪辑下载</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="layout">
|
|
|
|
|
<aside class="sidebar card">
|
|
|
|
|
<h3 style="margin-top:0;margin-bottom:10px">导航</h3>
|
|
|
|
|
<div class="nav-links">
|
|
|
|
|
<a href="audio-processing.html">音频处理</a>
|
|
|
|
|
<a href="results-preview.html">结果预览</a>
|
|
|
|
|
<a href="clipping-download.html" class="active">剪辑下载</a>
|
|
|
|
|
</div>
|
|
|
|
|
<div style="margin-top:18px;border-top:1px dashed #eef6ff;padding-top:14px">
|
|
|
|
|
<div style="font-weight:700">欢迎,用户A</div>
|
|
|
|
|
<div style="margin-top:10px"><button class="btn ghost" style="width:100%" onclick="logout()">退出登录</button></div>
|
|
|
|
|
</div>
|
|
|
|
|
</aside>
|
|
|
|
|
|
|
|
|
|
<main class="main">
|
|
|
|
|
<div class="card">
|
|
|
|
|
<h2>剪辑下载</h2>
|
|
|
|
|
<div class="preview-section">
|
|
|
|
|
<div class="audio-player">
|
|
|
|
|
<audio controls>
|
|
|
|
|
<source src="demo-separated.mp3" type="audio/mpeg">
|
|
|
|
|
您的浏览器不支持音频播放。
|
|
|
|
|
</audio>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="waveform-container">波形图区域(可扩展为 Canvas 波形可视化)</div>
|
|
|
|
|
|
|
|
|
|
<div class="time-inputs">
|
|
|
|
|
<div class="time-group">
|
|
|
|
|
<label for="startTime">开始时间 (秒):</label>
|
|
|
|
|
<input type="number" id="startTime" min="0" step="0.1" placeholder="例如 10" />
|
|
|
|
|
</div>
|
|
|
|
|
<div class="time-group">
|
|
|
|
|
<label for="endTime">结束时间 (秒):</label>
|
|
|
|
|
<input type="number" id="endTime" min="0" step="0.1" placeholder="例如 20" />
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="editing-controls">
|
|
|
|
|
<h3>剪辑功能</h3>
|
|
|
|
|
<div class="editing-buttons">
|
|
|
|
|
<button class="clip-btn"><i class="fas fa-cut"></i> 剪切</button>
|
|
|
|
|
<button class="clip-btn"><i class="fas fa-copy"></i> 复制</button>
|
|
|
|
|
<button class="clip-btn"><i class="fas fa-trash"></i> 删除</button>
|
|
|
|
|
<button class="clip-btn"><i class="fas fa-compress"></i> 合并</button>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="clip-controls">
|
|
|
|
|
<button class="clip-btn">执行剪辑</button>
|
|
|
|
|
<button class="download-btn">下载剪辑后的音频</button>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="feedback">提示:输入时间范围,点击剪辑按钮可模拟剪辑操作,然后下载处理后的音频。</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</main>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<script src="plugins/jquery-3.7.1/jquery-3.7.1.js"></script>
|
|
|
|
|
<script src="js/clipping-download.js"></script>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|