Spaces:
Running
Running
File size: 5,017 Bytes
d789176 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 |
class AppSidebar extends HTMLElement {
constructor() {
super();
}
connectedCallback() {
this.innerHTML = `
<aside class="w-64 bg-slate-900 border-r border-slate-800 h-full overflow-y-auto">
<div class="p-4 space-y-6">
<!-- Pipeline Steps -->
<div>
<h3 class="text-xs font-semibold text-slate-500 uppercase tracking-wider mb-3 px-2">Etapas do Pipeline</h3>
<nav class="space-y-1">
<a href="#" class="flex items-center gap-3 px-3 py-2.5 text-sm font-medium rounded-lg bg-primary-500/10 text-primary-400 border border-primary-500/20">
<i data-feather="upload-cloud" class="w-4 h-4"></i>
Upload
<span class="ml-auto w-2 h-2 rounded-full bg-primary-500"></span>
</a>
<a href="#" class="flex items-center gap-3 px-3 py-2.5 text-sm font-medium rounded-lg text-slate-400 hover:bg-slate-800 hover:text-slate-200 transition-colors">
<i data-feather="scissors" class="w-4 h-4"></i>
Remoção de Silêncio
</a>
<a href="#" class="flex items-center gap-3 px-3 py-2.5 text-sm font-medium rounded-lg text-slate-400 hover:bg-slate-800 hover:text-slate-200 transition-colors">
<i data-feather="mic" class="w-4 h-4"></i>
Transcrição
</a>
<a href="#" class="flex items-center gap-3 px-3 py-2.5 text-sm font-medium rounded-lg text-slate-400 hover:bg-slate-800 hover:text-slate-200 transition-colors">
<i data-feather="align-left" class="w-4 h-4"></i>
Divisão de Texto
</a>
<a href="#" class="flex items-center gap-3 px-3 py-2.5 text-sm font-medium rounded-lg text-slate-400 hover:bg-slate-800 hover:text-slate-200 transition-colors">
<i data-feather="anchor" class="w-4 h-4"></i>
Alinhamento
</a>
<a href="#" class="flex items-center gap-3 px-3 py-2.5 text-sm font-medium rounded-lg text-slate-400 hover:bg-slate-800 hover:text-slate-200 transition-colors">
<i data-feather="type" class="w-4 h-4"></i>
Exportar SRT
</a>
</nav>
</div>
<!-- Quick Stats -->
<div>
<h3 class="text-xs font-semibold text-slate-500 uppercase tracking-wider mb-3 px-2">Estatísticas Rápidas</h3>
<div class="space-y-3 px-2">
<div class="flex justify-between items-center text-sm">
<span class="text-slate-400">Threshold</span>
<span class="text-slate-200 font-mono">-70dB</span>
</div>
<div class="flex justify-between items-center text-sm">
<span class="text-slate-400">Modelo</span>
<span class="text-secondary-400 font-mono text-xs">small</span>
</div>
<div class="flex justify-between items-center text-sm">
<span class="text-slate-400">Max Block</span>
<span class="text-slate-200 font-mono">14</span>
</div>
</div>
</div>
<!-- Help Card -->
<div class="p-3 rounded-xl bg-gradient-to-br from-slate-800 to-slate-900 border border-slate-700">
<div class="flex items-start gap-3">
<div class="w-8 h-8 rounded-lg bg-secondary-500/20 flex items-center justify-center flex-shrink-0">
<i data-feather="help-circle" class="w-4 h-4 text-secondary-400"></i>
</div>
<div>
<h4 class="text-sm font-medium text-slate-200 mb-1">Dica CapCut</h4>
<p class="text-xs text-slate-400 leading-relaxed">
Use Advance de 70ms e Preroll de 40ms para sincronização perfeita com vídeos verticais.
</p>
</div>
</div>
</div>
</div>
</aside>
`;
}
}
customElements.define('app-sidebar', AppSidebar); |