1 line
36 KiB
Markdown
1 line
36 KiB
Markdown
<div class="flex-1 flex flex-col overflow-hidden select-none daw-bg relative"><div class="flex-1 flex overflow-hidden"><div class="flex-1 flex flex-col overflow-hidden min-w-0"><div class="flex-1 flex overflow-hidden"><div class="w-[300px] shrink-0 z-20 bg-[#262626] overflow-hidden flex flex-col border-r border-zinc-900" style="scrollbar-width: none;"><div class="sticky top-0 z-50 flex items-center justify-between h-10 border-b border-zinc-900 bg-[#242424] px-2 shrink-0"><span class="text-xs font-bold text-zinc-300 flex items-center gap-1.5"><span class="inline-flex items-center shrink-0"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="sliders" aria-hidden="true" class="lucide lucide-sliders w-3.5 h-3.5 text-cyan-400"><path d="M10 8h4"></path><path d="M12 21v-9"></path><path d="M12 8V3"></path><path d="M17 16h4"></path><path d="M19 12V3"></path><path d="M19 21v-5"></path><path d="M3 14h4"></path><path d="M5 10V3"></path><path d="M5 21v-7"></path></svg></span>TRACKS (2)</span><button class="px-2.5 py-1 bg-cyan-600 hover:bg-cyan-500 text-white rounded text-xs font-semibold flex items-center gap-1 shadow transition"><span class="inline-flex items-center shrink-0"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="plus" aria-hidden="true" class="lucide lucide-plus w-3 h-3"><path d="M5 12h14"></path><path d="M12 5v14"></path></svg></span> Add Track</button></div><div class="sticky top-10 z-40 flex h-[40px] border-b border-purple-500/30 bg-[#1a1a2e] p-2 border-l-4 border-purple-500 shrink-0"><div class="flex items-center justify-between w-full"><div class="flex items-center gap-2"><span class="text-xs font-bold text-purple-400 font-mono">TM</span><span class="text-xs font-semibold text-zinc-300">Tempo</span></div><div class="flex items-center gap-1"><input type="number" class="w-12 bg-zinc-800 border border-zinc-700 rounded text-xs text-zinc-300 text-center font-mono focus:outline-none focus:border-purple-500" min="40" max="300" value="120"><span class="text-xs text-zinc-500">BPM</span></div></div></div><div class="flex-1 flex flex-col divide-y divide-[#141414] bg-[#262626]"><div class="shrink-0 relative flex flex-col justify-between p-2.5 bg-[#1e1e1e] border-r border-zinc-900 cursor-pointer border-l-4 border-b border-[#141414] overflow-hidden border-cyan-500 bg-[#252525]" style="height: 128px;"><div class="flex items-start justify-between"><div class="flex items-center gap-2"><span class="text-xs font-bold text-zinc-500 font-mono">01</span><label class="cursor-pointer"><input type="color" class="w-0 h-0 opacity-0 absolute pointer-events-none" value="#0f766e"><div class="w-3 h-3 rounded-full border border-zinc-600 hover:scale-110 transition-transform" style="background-color: rgb(15, 118, 110);"></div></label><span class="text-xs font-semibold text-zinc-300 truncate max-w-[80px] cursor-text hover:text-cyan-300 transition-colors" title="Click to rename">Track 01</span></div><div class="flex flex-wrap gap-0.5 max-w-[100px] mb-0.5"></div><div class="flex items-center gap-1"><button class="px-1.5 py-0.5 text-xs rounded font-mono font-bold border transition bg-zinc-800 text-zinc-400 border-transparent hover:text-zinc-200">M</button><button class="px-1.5 py-0.5 text-xs rounded font-mono font-bold border transition bg-zinc-800 text-zinc-400 border-transparent hover:text-zinc-200">S</button><button class="p-0.5 rounded text-red-500 hover:bg-red-950/40 hover:text-red-400 transition"><span class="inline-flex items-center shrink-0"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="trash-2" aria-hidden="true" class="lucide lucide-trash-2 w-3.5 h-3.5"><path d="M10 11v6"></path><path d="M14 11v6"></path><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6"></path><path d="M3 6h18"></path><path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path></svg></span></button></div></div><div class="flex flex-col gap-0.5 text-xs"><div class="flex items-center gap-1"><span class="w-8 text-right text-zinc-500 text-xs">Vol:</span><input type="range" min="-50" max="7" step="0.5" class="flex-1 h-1 bg-zinc-700 rounded-lg appearance-none cursor-pointer accent-cyan-500" value="0" style="height: 4px;"><span class="w-12 text-right font-mono text-zinc-300 text-xs">0dB</span></div><div class="flex items-center gap-1"><span class="w-8 text-right text-zinc-500 text-xs">Pan:</span><input type="range" min="-100" max="100" step="1" class="flex-1 h-1 bg-zinc-700 rounded-lg appearance-none cursor-pointer accent-purple-500" value="0" style="height: 4px;"><span class="w-12 text-right font-mono text-zinc-300 text-xs">C</span></div></div><div class="flex items-center gap-1.5 mt-1"><input type="file" id="upload-1" accept="audio/*" class="hidden"><label for="upload-1" class="px-2.5 py-1 bg-zinc-800 hover:bg-zinc-700 text-zinc-300 rounded text-xs flex items-center gap-1 cursor-pointer border border-zinc-700 font-medium"><span class="inline-flex items-center shrink-0"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="upload" aria-hidden="true" class="lucide lucide-upload w-3 h-3"><path d="M12 3v12"></path><path d="m17 8-5-5-5 5"></path><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path></svg></span> File</label><button class="px-2.5 py-1 bg-zinc-800 hover:bg-zinc-700 text-purple-400 border border-purple-900 rounded text-xs font-bold flex items-center gap-1"><span class="inline-flex items-center shrink-0"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="wand-2" aria-hidden="true" class="lucide lucide-wand-2 w-3 h-3"><path d="m21.64 3.64-1.28-1.28a1.21 1.21 0 0 0-1.72 0L2.36 18.64a1.21 1.21 0 0 0 0 1.72l1.28 1.28a1.2 1.2 0 0 0 1.72 0L21.64 5.36a1.2 1.2 0 0 0 0-1.72"></path><path d="m14 7 3 3"></path><path d="M5 6v4"></path><path d="M19 14v4"></path><path d="M10 2v2"></path><path d="M7 8H3"></path><path d="M21 16h-4"></path><path d="M11 3H9"></path></svg></span> FX: <span class="text-zinc-500 font-normal">None</span></button><button class="px-2.5 py-1 bg-zinc-800 hover:bg-zinc-700 text-amber-400 border border-amber-800 rounded text-xs font-bold flex items-center gap-1"><span class="inline-flex items-center shrink-0"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="music" aria-hidden="true" class="lucide lucide-music w-3 h-3"><path d="M9 18V5l12-2v13"></path><circle cx="6" cy="18" r="3"></circle><circle cx="18" cy="16" r="3"></circle></svg></span> Synth: <span class="text-zinc-500 font-normal">None</span></button></div><div class="absolute bottom-0 left-0 right-0 h-1 cursor-ns-resize z-30 hover:bg-cyan-500/50 transition-colors"></div></div><div class="shrink-0 relative flex flex-col justify-between p-2.5 bg-[#1e1e1e] border-r border-zinc-900 cursor-pointer border-l-4 border-b border-[#141414] overflow-hidden border-transparent hover:bg-zinc-800/20" style="height: 128px;"><div class="flex items-start justify-between"><div class="flex items-center gap-2"><span class="text-xs font-bold text-zinc-500 font-mono">02</span><label class="cursor-pointer"><input type="color" class="w-0 h-0 opacity-0 absolute pointer-events-none" value="#1d4ed8"><div class="w-3 h-3 rounded-full border border-zinc-600 hover:scale-110 transition-transform" style="background-color: rgb(29, 78, 216);"></div></label><span class="text-xs font-semibold text-zinc-300 truncate max-w-[80px] cursor-text hover:text-cyan-300 transition-colors" title="Click to rename">Track 02</span></div><div class="flex flex-wrap gap-0.5 max-w-[100px] mb-0.5"></div><div class="flex items-center gap-1"><button class="px-1.5 py-0.5 text-xs rounded font-mono font-bold border transition bg-zinc-800 text-zinc-400 border-transparent hover:text-zinc-200">M</button><button class="px-1.5 py-0.5 text-xs rounded font-mono font-bold border transition bg-zinc-800 text-zinc-400 border-transparent hover:text-zinc-200">S</button><button class="p-0.5 rounded text-red-500 hover:bg-red-950/40 hover:text-red-400 transition"><span class="inline-flex items-center shrink-0"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="trash-2" aria-hidden="true" class="lucide lucide-trash-2 w-3.5 h-3.5"><path d="M10 11v6"></path><path d="M14 11v6"></path><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6"></path><path d="M3 6h18"></path><path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path></svg></span></button></div></div><div class="flex flex-col gap-0.5 text-xs"><div class="flex items-center gap-1"><span class="w-8 text-right text-zinc-500 text-xs">Vol:</span><input type="range" min="-50" max="7" step="0.5" class="flex-1 h-1 bg-zinc-700 rounded-lg appearance-none cursor-pointer accent-cyan-500" value="0" style="height: 4px;"><span class="w-12 text-right font-mono text-zinc-300 text-xs">0dB</span></div><div class="flex items-center gap-1"><span class="w-8 text-right text-zinc-500 text-xs">Pan:</span><input type="range" min="-100" max="100" step="1" class="flex-1 h-1 bg-zinc-700 rounded-lg appearance-none cursor-pointer accent-purple-500" value="0" style="height: 4px;"><span class="w-12 text-right font-mono text-zinc-300 text-xs">C</span></div></div><div class="flex items-center gap-1.5 mt-1"><input type="file" id="upload-2" accept="audio/*" class="hidden"><label for="upload-2" class="px-2.5 py-1 bg-zinc-800 hover:bg-zinc-700 text-zinc-300 rounded text-xs flex items-center gap-1 cursor-pointer border border-zinc-700 font-medium"><span class="inline-flex items-center shrink-0"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="upload" aria-hidden="true" class="lucide lucide-upload w-3 h-3"><path d="M12 3v12"></path><path d="m17 8-5-5-5 5"></path><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path></svg></span> File</label><button class="px-2.5 py-1 bg-zinc-800 hover:bg-zinc-700 text-purple-400 border border-purple-900 rounded text-xs font-bold flex items-center gap-1"><span class="inline-flex items-center shrink-0"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="wand-2" aria-hidden="true" class="lucide lucide-wand-2 w-3 h-3"><path d="m21.64 3.64-1.28-1.28a1.21 1.21 0 0 0-1.72 0L2.36 18.64a1.21 1.21 0 0 0 0 1.72l1.28 1.28a1.2 1.2 0 0 0 1.72 0L21.64 5.36a1.2 1.2 0 0 0 0-1.72"></path><path d="m14 7 3 3"></path><path d="M5 6v4"></path><path d="M19 14v4"></path><path d="M10 2v2"></path><path d="M7 8H3"></path><path d="M21 16h-4"></path><path d="M11 3H9"></path></svg></span> FX: <span class="text-zinc-500 font-normal">None</span></button><button class="px-2.5 py-1 bg-zinc-800 hover:bg-zinc-700 text-amber-400 border border-amber-800 rounded text-xs font-bold flex items-center gap-1"><span class="inline-flex items-center shrink-0"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="music" aria-hidden="true" class="lucide lucide-music w-3 h-3"><path d="M9 18V5l12-2v13"></path><circle cx="6" cy="18" r="3"></circle><circle cx="18" cy="16" r="3"></circle></svg></span> Synth: <span class="text-zinc-500 font-normal">None</span></button></div><div class="absolute bottom-0 left-0 right-0 h-1 cursor-ns-resize z-30 hover:bg-cyan-500/50 transition-colors"></div></div></div><div class="h-[48px] border-r border-zinc-900 bg-[#1e1e1e]/50 shrink-0"></div></div><div class="flex-1 relative z-10 overflow-x-auto overflow-y-auto min-w-0"><div class="relative flex flex-col min-h-full" style="width: 1296px;"><div class="sticky top-0 z-45 flex h-10 border-b border-zinc-900 bg-[#242424] shrink-0"><div class="flex-1 relative h-full flex items-center select-none cursor-ew-resize overflow-hidden"><div class="absolute h-full border-l border-zinc-700 pl-1 pt-1 text-[14px] font-mono text-zinc-300 pointer-events-none" style="left: 0px;">0.00s</div><div class="absolute h-full border-l border-zinc-700 pl-1 pt-1 text-[14px] font-mono text-zinc-300 pointer-events-none" style="left: 129.6px;">1.00s</div><div class="absolute h-full border-l border-zinc-700 pl-1 pt-1 text-[14px] font-mono text-zinc-300 pointer-events-none" style="left: 259.2px;">2.00s</div><div class="absolute h-full border-l border-zinc-700 pl-1 pt-1 text-[14px] font-mono text-zinc-300 pointer-events-none" style="left: 388.8px;">3.00s</div><div class="absolute h-full border-l border-zinc-700 pl-1 pt-1 text-[14px] font-mono text-zinc-300 pointer-events-none" style="left: 518.4px;">4.00s</div><div class="absolute h-full border-l border-zinc-700 pl-1 pt-1 text-[14px] font-mono text-zinc-300 pointer-events-none" style="left: 648px;">5.00s</div><div class="absolute h-full border-l border-zinc-700 pl-1 pt-1 text-[14px] font-mono text-zinc-300 pointer-events-none" style="left: 777.6px;">6.00s</div><div class="absolute h-full border-l border-zinc-700 pl-1 pt-1 text-[14px] font-mono text-zinc-300 pointer-events-none" style="left: 907.2px;">7.00s</div><div class="absolute h-full border-l border-zinc-700 pl-1 pt-1 text-[14px] font-mono text-zinc-300 pointer-events-none" style="left: 1036.8px;">8.00s</div><div class="absolute h-full border-l border-zinc-700 pl-1 pt-1 text-[14px] font-mono text-zinc-300 pointer-events-none" style="left: 1166.4px;">9.00s</div></div></div><div class="sticky top-10 z-35 flex h-[40px] border-b border-purple-500/30 bg-[#1a1a2e] shrink-0"><div class="flex-1 relative h-full overflow-hidden bg-[#1a1a2e]"><div style="width: 1296px; height: 1px; pointer-events: none;"></div><canvas class="cursor-crosshair" width="445" height="39" style="position: sticky; left: 0px; image-rendering: pixelated; width: 445px; height: 39px;"></canvas></div></div><div class="flex-1 flex flex-col divide-y divide-[#141414] relative bg-[#111111] min-h-full"><div class="shrink-0 relative border-b border-[#141414] hover:bg-zinc-850/5 transition-colors bg-zinc-800/10" style="height: 128px;"><div style="width: 1296px; height: 1px; pointer-events: none;"></div><canvas class="cursor-crosshair" width="445" height="127" style="position: sticky; left: 0px; image-rendering: pixelated; width: 445px; height: 127px; cursor: crosshair;"></canvas><div class="absolute bottom-0 left-0 right-0 h-1 cursor-ns-resize z-30 hover:bg-cyan-500/50 transition-colors"></div></div><div class="shrink-0 relative border-b border-[#141414] hover:bg-zinc-850/5 transition-colors " style="height: 128px;"><div style="width: 1296px; height: 1px; pointer-events: none;"></div><canvas class="cursor-crosshair" width="445" height="127" style="position: sticky; left: 0px; image-rendering: pixelated; width: 445px; height: 127px; cursor: crosshair;"></canvas><div class="absolute bottom-0 left-0 right-0 h-1 cursor-ns-resize z-30 hover:bg-cyan-500/50 transition-colors"></div></div><div class="h-[48px] flex items-center justify-center text-xs text-zinc-500 hover:bg-zinc-900/20 cursor-pointer select-none border-t border-dashed border-zinc-800"><span class="flex items-center gap-1 text-zinc-400"><span class="inline-flex items-center shrink-0"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="plus" aria-hidden="true" class="lucide lucide-plus w-3.5 h-3.5"><path d="M5 12h14"></path><path d="M12 5v14"></path></svg></span> Kéo clip xuống hoặc Click tạo Track</span></div><div class="absolute top-0 bottom-0 w-[2px] bg-[#ef4444] z-20 pointer-events-none" style="left: 0px;"><div class="w-3 h-3 bg-[#ef4444] rotate-45 transform -translate-x-1/2 -translate-y-1/2 absolute top-0"></div></div></div></div></div></div></div><div class="w-1 cursor-ew-resize hover:bg-cyan-500/50 active:bg-cyan-400 transition-colors shrink-0 z-10"></div><div id="right-sidebar" class="border-l bg-[#1e1e1e] flex flex-col overflow-hidden select-none h-full" style="width: 320px; min-width: 200px; max-width: 600px; flex-shrink: 0;"><div class="flex-1 flex flex-col gap-2 p-2 overflow-hidden h-full"><div class="flex flex-col flex-1 min-h-0 border border-zinc-700 rounded-lg bg-[#262626] shadow-sm p-3"><div class="flex flex-col gap-1.5 flex-1 min-h-0"><div class="flex items-center justify-between shrink-0 cursor-grab active:cursor-grabbing select-none"><h3 class="font-bold text-xs text-zinc-200 flex items-center gap-1"><span class="inline-flex items-center shrink-0"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="grip-vertical" aria-hidden="true" class="lucide lucide-grip-vertical w-3 h-3 text-zinc-500"><circle cx="9" cy="12" r="1"></circle><circle cx="9" cy="5" r="1"></circle><circle cx="9" cy="19" r="1"></circle><circle cx="15" cy="12" r="1"></circle><circle cx="15" cy="5" r="1"></circle><circle cx="15" cy="19" r="1"></circle></svg></span><span class="inline-flex items-center shrink-0"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="cpu" aria-hidden="true" class="lucide lucide-cpu w-3.5 h-3.5 text-purple-400"><path d="M12 20v2"></path><path d="M12 2v2"></path><path d="M17 20v2"></path><path d="M17 2v2"></path><path d="M2 12h2"></path><path d="M2 17h2"></path><path d="M2 7h2"></path><path d="M20 12h2"></path><path d="M20 17h2"></path><path d="M20 7h2"></path><path d="M7 20v2"></path><path d="M7 2v2"></path><rect x="4" y="4" width="16" height="16" rx="2"></rect><rect x="8" y="8" width="8" height="8" rx="1"></rect></svg></span> AI Copilot</h3><div class="flex items-center gap-1"><button class="text-zinc-600 hover:text-zinc-300" title="Clear log"><span class="inline-flex items-center shrink-0"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="trash-2" aria-hidden="true" class="lucide lucide-trash-2 w-3 h-3"><path d="M10 11v6"></path><path d="M14 11v6"></path><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6"></path><path d="M3 6h18"></path><path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path></svg></span></button><button class="text-zinc-600 hover:text-zinc-300"><span class="inline-flex items-center shrink-0"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="x" aria-hidden="true" class="lucide lucide-x w-3 h-3"><path d="M18 6 6 18"></path><path d="m6 6 12 12"></path></svg></span></button></div></div><div class="flex items-center gap-1.5 w-full min-w-0 pb-1"><span class="inline-flex items-center shrink-0"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="cpu" aria-hidden="true" class="lucide lucide-cpu w-3 h-3 text-purple-400"><path d="M12 20v2"></path><path d="M12 2v2"></path><path d="M17 20v2"></path><path d="M17 2v2"></path><path d="M2 12h2"></path><path d="M2 17h2"></path><path d="M2 7h2"></path><path d="M20 12h2"></path><path d="M20 17h2"></path><path d="M20 7h2"></path><path d="M7 20v2"></path><path d="M7 2v2"></path><rect x="4" y="4" width="16" height="16" rx="2"></rect><rect x="8" y="8" width="8" height="8" rx="1"></rect></svg></span><select class="flex-1 min-w-0 max-w-full bg-[#141414] text-zinc-200 border border-zinc-700 rounded px-1 py-0.5 text-xs font-mono focus:outline-none focus:border-purple-600 truncate"><option value="openai_default">OpenAI Official (inactive)</option><option value="openai_compat_default">OpenAI Compatible (Ollama/LocalAI/DeepSeek)</option><option value="anthropic_default">Anthropic Claude (inactive)</option><option value="gemini_default">Google Gemini (inactive)</option></select></div><div class="border-t border-zinc-800 pt-1 mt-1 shrink-0"><button class="w-full text-[10px] text-amber-400 hover:text-amber-300 border border-amber-800 rounded py-0.5"><span class="inline-flex items-center justify-center gap-1"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="rotate-ccw" aria-hidden="true" class="lucide lucide-rotate-ccw w-3 h-3"><path d="M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"></path><path d="M3 3v5h5"></path></svg>Undo</span></button></div><div class="flex-1 min-h-0 flex flex-col overflow-hidden mt-1"><div class="text-[10px] font-bold text-zinc-400 uppercase shrink-0 pb-0.5"><span class="inline-flex items-center gap-1"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="list" aria-hidden="true" class="lucide lucide-list w-3 h-3"><path d="M3 5h.01"></path><path d="M3 12h.01"></path><path d="M3 19h.01"></path><path d="M8 5h13"></path><path d="M8 12h13"></path><path d="M8 19h13"></path></svg> Action Log</span></div><div class="flex-1 overflow-y-auto no-scrollbar bg-[#0f0f0f] rounded border border-zinc-800 select-text"><div class="text-xs text-zinc-600 italic select-text">Chưa có hành động nào.</div></div></div><div class="border-t border-zinc-800 pt-1.5 mt-1 shrink-0"><div class="text-xs font-bold text-zinc-400 uppercase mb-1 flex items-center gap-1"><span class="inline-flex items-center shrink-0"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="message-square" aria-hidden="true" class="lucide lucide-message-square w-3 h-3"><path d="M22 17a2 2 0 0 1-2 2H6.828a2 2 0 0 0-1.414.586l-2.202 2.202A.71.71 0 0 1 2 21.286V5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2z"></path></svg></span> Copilot Prompt</div><textarea placeholder="Nhập lệnh điều khiển DAW... (VD: Tạo track mới tên Beat, đặt BPM 128)" class="w-full bg-[#1e1e1e] text-zinc-200 p-1.5 rounded border border-zinc-700 focus:outline-none focus:border-purple-600 font-mono text-xs resize-none" rows="2"></textarea></div><div class="flex items-center gap-1 mt-1 shrink-0"><button class="flex-1 py-1 bg-purple-700 hover:bg-purple-600 text-white font-bold rounded text-xs border border-purple-500 flex items-center justify-center gap-1"><span class="inline-flex items-center shrink-0"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="send" aria-hidden="true" class="lucide lucide-send w-3 h-3"><path d="M14.536 21.686a.5.5 0 0 0 .937-.024l6.5-19a.496.496 0 0 0-.635-.635l-19 6.5a.5.5 0 0 0-.024.937l7.93 3.18a2 2 0 0 1 1.112 1.11z"></path><path d="m21.854 2.147-10.94 10.939"></path></svg></span> Gửi</button><button class="px-2 py-1 bg-zinc-800 hover:bg-zinc-700 text-zinc-400 rounded text-xs border border-zinc-700">Clear</button></div><div class="text-xs text-zinc-600 shrink-0">Enter để gửi nhanh</div></div></div></div></div></div><div id="daw-bottom" class="shrink-0 border-t bg-[#1e1e1e] flex flex-row p-1.5 gap-3 select-none "><div class="flex-none w-[320px] border border-zinc-700 rounded-lg bg-[#262626] shadow-sm p-2"><div class="flex flex-col h-full gap-1.5"><div class="flex items-center justify-between shrink-0 cursor-grab active:cursor-grabbing select-none"><h3 class="font-bold text-xs text-zinc-200 flex items-center gap-1"><span class="inline-flex items-center shrink-0"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="grip-vertical" aria-hidden="true" class="lucide lucide-grip-vertical w-3 h-3 text-zinc-500"><circle cx="9" cy="12" r="1"></circle><circle cx="9" cy="5" r="1"></circle><circle cx="9" cy="19" r="1"></circle><circle cx="15" cy="12" r="1"></circle><circle cx="15" cy="5" r="1"></circle><circle cx="15" cy="19" r="1"></circle></svg></span><span class="inline-flex items-center shrink-0"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="save" aria-hidden="true" class="lucide lucide-save w-3.5 h-3.5 text-cyan-400"><path d="M15.2 3a2 2 0 0 1 1.4.6l3.8 3.8a2 2 0 0 1 .6 1.4V19a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2z"></path><path d="M17 21v-7a1 1 0 0 0-1-1H8a1 1 0 0 0-1 1v7"></path><path d="M7 3v4a1 1 0 0 0 1 1h7"></path></svg></span> Export</h3><button class="text-zinc-600 hover:text-zinc-300"><span class="inline-flex items-center shrink-0"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="x" aria-hidden="true" class="lucide lucide-x w-3 h-3"><path d="M18 6 6 18"></path><path d="m6 6 12 12"></path></svg></span></button></div><div class="grid grid-cols-2 gap-1"><div><label class="block text-[7px] text-zinc-500 font-bold uppercase mb-0.5">Nguồn</label><select class="w-full bg-[#141414] border border-zinc-800 rounded px-1 py-0.5 text-xs text-zinc-300 focus:outline-none"><option value="project">Project (Mix)</option><option value="track_mix">Track Selection</option><option value="active_clip">Active Clip</option><option value="clip_selection">Clip Selection</option></select></div><div><label class="block text-[7px] text-zinc-500 font-bold uppercase mb-0.5">Định dạng</label><select class="w-full bg-[#141414] border border-zinc-800 rounded px-1 py-0.5 text-xs text-zinc-300 focus:outline-none"><option value="wav">WAV</option><option value="mp3">MP3</option><option value="ogg">OGG</option></select></div></div><div class="grid grid-cols-2 gap-1"><div><label class="block text-[7px] text-zinc-500 font-bold uppercase mb-0.5">SR (Hz)</label><select class="w-full bg-[#141414] border border-zinc-800 rounded px-1 py-0.5 text-xs text-zinc-300 focus:outline-none"><option value="22500">22500</option><option value="44100">44100</option></select></div><div><label class="block text-[7px] text-zinc-500 font-bold uppercase mb-0.5">Bit</label><select class="w-full bg-[#141414] border border-zinc-800 rounded px-1 py-0.5 text-xs text-zinc-300 focus:outline-none"><option value="8">8</option><option value="16">16</option><option value="24">24</option></select></div></div><div class="grid grid-cols-2 gap-1"><div><label class="block text-[7px] text-zinc-500 font-bold uppercase mb-0.5">Kênh</label><select class="w-full bg-[#141414] border border-zinc-800 rounded px-1 py-0.5 text-xs text-zinc-300 focus:outline-none"><option value="mono">Mono</option><option value="stereo">Stereo</option></select></div><div></div></div><button class="w-full py-1 bg-cyan-700 hover:bg-cyan-600 text-zinc-100 font-bold rounded text-xs flex items-center justify-center gap-1"><span class="inline-flex items-center shrink-0"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="download-cloud" aria-hidden="true" class="lucide lucide-download-cloud w-3 h-3"><path d="M12 13v8l-4-4"></path><path d="m12 21 4-4"></path><path d="M4.393 15.269A7 7 0 1 1 15.71 8h1.79a4.5 4.5 0 0 1 2.436 8.284"></path></svg></span>Export</button></div></div><div class="flex-none w-[320px] border border-zinc-700 rounded-lg bg-[#262626] shadow-sm p-2"><div class="flex flex-col h-full gap-1.5"><div class="flex items-center justify-between shrink-0 cursor-grab active:cursor-grabbing select-none"><h3 class="font-bold text-xs text-amber-300 flex items-center gap-1"><span class="inline-flex items-center shrink-0"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="grip-vertical" aria-hidden="true" class="lucide lucide-grip-vertical w-3 h-3 text-zinc-500"><circle cx="9" cy="12" r="1"></circle><circle cx="9" cy="5" r="1"></circle><circle cx="9" cy="19" r="1"></circle><circle cx="15" cy="12" r="1"></circle><circle cx="15" cy="5" r="1"></circle><circle cx="15" cy="19" r="1"></circle></svg></span><span class="inline-flex items-center shrink-0"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="wrench" aria-hidden="true" class="lucide lucide-wrench w-3.5 h-3.5 text-amber-400"><path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.106-3.105c.32-.322.863-.22.983.218a6 6 0 0 1-8.259 7.057l-7.91 7.91a1 1 0 0 1-2.999-3l7.91-7.91a6 6 0 0 1 7.057-8.259c.438.12.54.662.219.984z"></path></svg></span> DSP Tools</h3><button class="text-zinc-600 hover:text-zinc-300"><span class="inline-flex items-center shrink-0"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="x" aria-hidden="true" class="lucide lucide-x w-3 h-3"><path d="M18 6 6 18"></path><path d="m6 6 12 12"></path></svg></span></button></div><div class="p-1.5 bg-[#141414] rounded border border-zinc-800 text-[10px] font-mono text-zinc-400 space-y-0.5 leading-relaxed"><div>Track: Track 01</div><div>Range: Chưa chọn vùng</div><div>Channels: 0</div><div>Peak Vol: N/A</div></div><div class="grid grid-cols-2 gap-1 text-xs"><button class="py-1 bg-amber-950/80 hover:bg-amber-900 text-amber-300 border border-amber-800/80 rounded font-bold flex items-center justify-center gap-1">⚡ Peak Norm (0dB)</button><button class="py-1 bg-zinc-800 hover:bg-zinc-700 text-zinc-200 border border-zinc-700 rounded font-bold flex items-center justify-center gap-1">🔄 Phase Invert</button><button class="py-1 bg-zinc-800 hover:bg-zinc-700 text-zinc-200 border border-zinc-700 rounded font-bold flex items-center justify-center gap-1">🔀 Swap L/R</button><button class="py-1 bg-teal-950/80 hover:bg-teal-900 text-teal-300 border border-teal-800/80 rounded font-bold flex items-center justify-center gap-1">🎹 Gen Synth Tone</button></div></div></div><div class="flex-none w-[320px] border border-zinc-700 rounded-lg bg-[#262626] shadow-sm p-2"><div class="flex flex-col h-full gap-1.5"><div class="flex items-center justify-between shrink-0 cursor-grab active:cursor-grabbing select-none"><span class="text-xs text-zinc-500 font-bold uppercase flex items-center gap-1"><span class="inline-flex items-center shrink-0"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="grip-vertical" aria-hidden="true" class="lucide lucide-grip-vertical w-3 h-3 text-zinc-500"><circle cx="9" cy="12" r="1"></circle><circle cx="9" cy="5" r="1"></circle><circle cx="9" cy="19" r="1"></circle><circle cx="15" cy="12" r="1"></circle><circle cx="15" cy="5" r="1"></circle><circle cx="15" cy="19" r="1"></circle></svg></span> Selection</span><button class="text-zinc-600 hover:text-zinc-300"><span class="inline-flex items-center shrink-0"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="x" aria-hidden="true" class="lucide lucide-x w-3 h-3"><path d="M18 6 6 18"></path><path d="m6 6 12 12"></path></svg></span></button></div><div class="grid grid-cols-3 gap-1 bg-[#141414] p-1.5 rounded border border-zinc-800"><div><span class="block text-[7px] text-zinc-500 font-bold uppercase mb-0.5">Start</span><input type="number" step="0.01" class="w-full bg-[#242424] text-amber-400 text-center font-mono text-xs rounded py-0.5 border border-zinc-700 focus:outline-none" value="0"></div><div><span class="block text-[7px] text-zinc-500 font-bold uppercase mb-0.5">End</span><input type="number" step="0.01" class="w-full bg-[#242424] text-amber-400 text-center font-mono text-xs rounded py-0.5 border border-zinc-700 focus:outline-none" value="0"></div><div class="flex flex-col justify-center"><span class="text-[7px] text-zinc-500 font-bold uppercase">Len</span><span class="text-zinc-200 font-mono text-xs font-semibold mt-0.5">0s</span></div></div><div class="grid grid-cols-3 gap-1 bg-[#141414] p-1.5 rounded border border-zinc-800 mt-1"><div><span class="block text-[7px] text-zinc-500 font-bold uppercase mb-0.5">Begin Bar</span><input type="number" min="1" class="w-full bg-[#242424] text-white text-center font-mono text-xs rounded py-0.5 border border-zinc-700 focus:outline-none" value="1"></div><div><span class="block text-[7px] text-zinc-500 font-bold uppercase mb-0.5">End Bar</span><input type="number" min="1" class="w-full bg-[#242424] text-white text-center font-mono text-xs rounded py-0.5 border border-zinc-700 focus:outline-none" value="1"></div><div class="flex flex-col justify-center"><span class="text-[7px] text-zinc-500 font-bold uppercase"># Bars</span><span class="text-zinc-200 font-mono text-xs font-semibold mt-0.5">1</span></div></div></div></div><div class="flex-none w-[320px] border border-zinc-700 rounded-lg bg-[#262626] shadow-sm p-2"><div class="flex flex-col h-full gap-1.5"><div class="flex items-center justify-between shrink-0 cursor-grab active:cursor-grabbing select-none"><h3 class="font-bold text-xs text-emerald-300 flex items-center gap-1"><span class="inline-flex items-center shrink-0"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="grip-vertical" aria-hidden="true" class="lucide lucide-grip-vertical w-3 h-3 text-zinc-500"><circle cx="9" cy="12" r="1"></circle><circle cx="9" cy="5" r="1"></circle><circle cx="9" cy="19" r="1"></circle><circle cx="15" cy="12" r="1"></circle><circle cx="15" cy="5" r="1"></circle><circle cx="15" cy="19" r="1"></circle></svg></span><span class="inline-flex items-center shrink-0"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="folder-open" aria-hidden="true" class="lucide lucide-folder-open w-3.5 h-3.5 text-emerald-400"><path d="m6 14 1.5-2.9A2 2 0 0 1 9.24 10H20a2 2 0 0 1 1.94 2.5l-1.54 6a2 2 0 0 1-1.95 1.5H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h3.9a2 2 0 0 1 1.69.9l.81 1.2a2 2 0 0 0 1.67.9H18a2 2 0 0 1 2 2v2"></path></svg></span> Media Explorer</h3><button class="text-zinc-600 hover:text-zinc-300"><span class="inline-flex items-center shrink-0"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="x" aria-hidden="true" class="lucide lucide-x w-3 h-3"><path d="M18 6 6 18"></path><path d="m6 6 12 12"></path></svg></span></button></div><div class="flex-1 overflow-y-auto text-xs text-zinc-400 font-mono p-2">// Placeholder: Media files browser</div></div></div></div></div> |