Hugging Face's logo

Spaces:
AdronX
/
Dubbed
Running

App Files Community
Dubbed / index.html
AdronX's picture
AdronX
Update index.html
e10693a verified
Raw History Blame Contribute Delete
23.3 kB
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>VoiceSync Studio - Dubbing Manager</title>
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://cdn.jsdelivr.net/npm/lucide@0.263.1/dist/umd/lucide.min.js"></script>
<style>
/* Custom scrollbar for a cleaner look */
::-webkit-scrollbar {
width: 8px;
}
::-webkit-scrollbar-track {
background: #1e293b;
}
::-webkit-scrollbar-thumb {
background: #475569;
border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
background: #64748b;
}
.timeline-range::-webkit-slider-thumb {
background: #6366f1;
height: 20px;
width: 20px;
border-radius: 50%;
cursor: pointer;
transition: background .15s ease-in-out;
}
.timeline-range::-webkit-slider-runnable-track {
width: 100%;
height: 6px;
cursor: pointer;
background: #334155;
border-radius: 5px;
}
</style>
</head>
<body class="bg-slate-950 text-slate-200 font-sans h-screen flex flex-col overflow-hidden">
<!-- Header -->
<header class="h-16 border-b border-slate-800 bg-slate-900 flex items-center px-6 justify-between shrink-0">
<div class="flex items-center gap-3">
<div class="bg-indigo-600 p-2 rounded-lg">
<i data-lucide="mic" class="w-6 h-6 text-white"></i>
</div>
<h1 class="text-xl font-bold tracking-tight text-white">VoiceSync <span class="text-indigo-400">Studio</span></h1>
</div>
<div class="flex items-center gap-4">
<div class="relative group">
<i data-lucide="search" class="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-500"></i>
<input type="text" placeholder="Search projects..." class="bg-slate-800 border border-slate-700 text-sm rounded-full pl-9 pr-4 py-1.5 focus:outline-none focus:ring-2 focus:ring-indigo-500 w-64 transition-all">
</div>
<button class="p-2 rounded-full hover:bg-slate-800 transition-colors relative">
<i data-lucide="bell" class="w-5 h-5"></i>
<span class="absolute top-1.5 right-1.5 w-2 h-2 bg-rose-500 rounded-full border-2 border-slate-900"></span>
</button>
<div class="h-8 w-8 rounded-full bg-gradient-to-br from-indigo-500 to-purple-600 flex items-center justify-center text-sm font-bold border-2 border-slate-700 cursor-pointer">
JD
</div>
</div>
</header>
<!-- Main Layout -->
<div class="flex flex-1 overflow-hidden">
<!-- Sidebar -->
<aside class="w-64 bg-slate-900 border-r border-slate-800 flex flex-col shrink-0 hidden md:flex">
<nav class="flex-1 px-3 py-4 space-y-1">
<a href="#" class="flex items-center gap-3 px-3 py-2 bg-indigo-600/10 text-indigo-400 rounded-lg transition-colors">
<i data-lucide="layout-dashboard" class="w-5 h-5"></i>
<span class="text-sm font-medium">Dashboard</span>
</a>
<a href="#" class="flex items-center gap-3 px-3 py-2 text-slate-400 hover:bg-slate-800 hover:text-slate-100 rounded-lg transition-colors">
<i data-lucide="film" class="w-5 h-5"></i>
<span class="text-sm font-medium">Projects</span>
</a>
<a href="#" class="flex items-center gap-3 px-3 py-2 text-slate-400 hover:bg-slate-800 hover:text-slate-100 rounded-lg transition-colors">
<i data-lucide="users" class="w-5 h-5"></i>
<span class="text-sm font-medium">Voice Actors</span>
</a>
<a href="#" class="flex items-center gap-3 px-3 py-2 text-slate-400 hover:bg-slate-800 hover:text-slate-100 rounded-lg transition-colors">
<i data-lucide="globe" class="w-5 h-5"></i>
<span class="text-sm font-medium">Languages</span>
</a>
<div class="pt-4 mt-4 border-t border-slate-800">
<p class="px-3 text-xs font-semibold text-slate-500 uppercase tracking-wider mb-2">Recent Projects</p>
<div class="space-y-1">
<a href="#" class="flex items-center gap-3 px-3 py-2 text-slate-400 hover:text-indigo-400 text-sm truncate">
<i data-lucide="video" class="w-4 h-4"></i>
<span class="truncate">Travel Vlog Eps 42</span>
</a>
<a href="#" class="flex items-center gap-3 px-3 py-2 text-slate-400 hover:text-indigo-400 text-sm truncate">
<i data-lucide="video" class="w-4 h-4"></i>
<span class="truncate">Product Demo (ES)</span>
</a>
<a href="#" class="flex items-center gap-3 px-3 py-2 text-slate-400 hover:text-indigo-400 text-sm truncate">
<i data-lucide="video" class="w-4 h-4"></i>
<span class="truncate">Animated Tutorial</span>
</a>
</div>
</div>
</nav>
<div class="p-4 border-t border-slate-800">
<button class="w-full bg-indigo-600 hover:bg-indigo-700 text-white text-sm font-medium py-2 rounded-lg transition-colors flex items-center justify-center gap-2">
<i data-lucide="plus" class="w-4 h-4"></i>
New Project
</button>
</div>
</aside>
<!-- Content Area -->
<main class="flex-1 flex flex-col bg-slate-950 overflow-hidden">
<!-- Top Stats Bar -->
<div class="px-6 py-4 grid grid-cols-1 md:grid-cols-3 gap-4 border-b border-slate-800 bg-slate-900/50">
<div class="bg-slate-900 p-4 rounded-xl border border-slate-800">
<div class="flex items-center gap-3 mb-2">
<div class="p-2 bg-blue-500/10 rounded-lg text-blue-400">
<i data-lucide="film" class="w-5 h-5"></i>
</div>
<div>
<p class="text-xs text-slate-500 uppercase font-semibold">Active Project</p>
<p class="text-lg font-bold text-white">Travel Vlog Eps 42</p>
</div>
</div>
<div class="mt-2 text-sm text-slate-400">
<span class="text-emerald-500 flex items-center gap-1">
<i data-lucide="circle-check" class="w-4 h-4"></i> 85% Completed
</span>
</div>
</div>
<div class="bg-slate-900 p-4 rounded-xl border border-slate-800">
<div class="flex items-center gap-3 mb-2">
<div class="p-2 bg-purple-500/10 rounded-lg text-purple-400">
<i data-lucide="globe" class="w-5 h-5"></i>
</div>
<div>
<p class="text-xs text-slate-500 uppercase font-semibold">Target Language</p>
<p class="text-lg font-bold text-white">Spanish (Latam)</p>
</div>
</div>
<div class="mt-2 flex gap-2">
<span class="px-2 py-1 bg-slate-800 rounded text-xs text-slate-300">Dubbed</span>
<span class="px-2 py-1 bg-slate-800 rounded text-xs text-slate-300">Synced</span>
</div>
</div>
<div class="bg-slate-900 p-4 rounded-xl border border-slate-800 flex items-center justify-between">
<div>
<p class="text-xs text-slate-500 uppercase font-semibold">Credits</p>
<p class="text-lg font-bold text-white">240 / 500</p>
<button class="text-xs text-indigo-400 hover:underline mt-1">Upgrade Plan</button>
</div>
<div class="h-10 w-10 bg-indigo-600/20 rounded-full flex items-center justify-center text-indigo-400">
<i data-lucide="wallet" class="w-6 h-6"></i>
</div>
</div>
</div>
<!-- Studio Workspace -->
<div class="flex-1 flex flex-col p-4 md:p-6 gap-6 overflow-y-auto">
<!-- Video Player Area -->
<div class="w-full aspect-video bg-black rounded-2xl shadow-2xl relative overflow-hidden group ring-1 ring-slate-800">
<!-- Simulated Video Content -->
<img src="https://static.photos/nature/640x360/101" alt="Video Placeholder" class="w-full h-full object-cover opacity-50">
<!-- Play Overlay -->
<div class="absolute inset-0 flex items-center justify-center pointer-events-none">
<button class="w-16 h-16 bg-white/20 backdrop-blur-sm rounded-full flex items-center justify-center hover:bg-white/30 transition-all transform hover:scale-110 pointer-events-auto group-hover:scale-105">
<i data-lucide="play" class="w-8 h-8 text-white ml-1"></i>
</button>
</div>
<!-- Timeline -->
<div class="absolute bottom-0 left-0 right-0 h-16 bg-gradient-to-t from-black/90 to-transparent p-4">
<div class="flex items-center gap-4 mb-2">
<button class="text-white hover:text-indigo-400 transition-colors"><i data-lucide="skip-back" class="w-5 h-5"></i></button>
<button class="w-10 h-10 bg-white text-black rounded-full flex items-center justify-center hover:scale-105 transition-transform">
<i data-lucide="play" class="w-5 h-5"></i>
</button>
<button class="text-white hover:text-indigo-400 transition-colors"><i data-lucide="skip-forward" class="w-5 h-5"></i></button>
<div class="flex-1 text-center">
<span class="text-xs font-mono text-slate-300">01:24 / 04:30</span>
</div>
<div class="w-12 text-right">
<i data-lucide="volume-2" class="w-5 h-5 text-white"></i>
</div>
</div>
<!-- Custom Range Slider -->
<div class="relative w-full h-1">
<input type="range" min="0" max="100" value="20" class="timeline-range w-full absolute top-1/2 -translate-y-1/2 z-20 appearance-none pointer-events-none">
<div class="absolute top-1/2 -translate-y-1/2 w-full h-1 bg-slate-700 rounded-full z-10"></div>
<div class="absolute top-1/2 -translate-y-1/2 w-[20%] h-1 bg-indigo-500 rounded-full z-10"></div>
<div class="absolute top-1/2 -translate-y-1/2 w-[20%] h-1 bg-indigo-500 rounded-full z-10 left-0 opacity-30 animate-pulse"></div>
</div>
</div>
<!-- Audio Waveform Visualizer (Simulated) -->
<div class="absolute bottom-16 left-4 right-4 h-12 flex items-end gap-[2px] opacity-50 pointer-events-none">
<div class="w-1 bg-indigo-500 rounded-t h-2"></div>
<div class="w-1 bg-indigo-500 rounded-t h-4"></div>
<div class="w-1 bg-indigo-500 rounded-t h-6"></div>
<div class="w-1 bg-indigo-500 rounded-t h-4"></div>
<div class="w-1 bg-indigo-500 rounded-t h-8"></div>
<div class="w-1 bg-indigo-500 rounded-t h-6"></div>
<div class="w-1 bg-indigo-500 rounded-t h-4"></div>
<div class="w-1 bg-indigo-500 rounded-t h-8"></div>
<div class="w-1 bg-indigo-500 rounded-t h-12"></div>
<div class="w-1 bg-indigo-500 rounded-t h-8"></div>
<div class="w-1 bg-indigo-500 rounded-t h-6"></div>
<div class="w-1 bg-indigo-500 rounded-t h-4"></div>
<div class="w-1 bg-indigo-500 rounded-t h-6"></div>
<div class="w-1 bg-indigo-500 rounded-t h-8"></div>
<div class="w-1 bg-indigo-500 rounded-t h-12"></div>
<div class="w-1 bg-indigo-500 rounded-t h-8"></div>
<div class="w-1 bg-indigo-500 rounded-t h-4"></div>
<div class="w-1 bg-indigo-500 rounded-t h-2"></div>
<div class="w-1 bg-indigo-500 rounded-t h-4"></div>
<div class="w-1 bg-indigo-500 rounded-t h-6"></div>
<div class="w-1 bg-indigo-500 rounded-t h-4"></div>
<div class="w-1 bg-indigo-500 rounded-t h-8"></div>
<div class="w-1 bg-indigo-500 rounded-t h-6"></div>
<div class="w-1 bg-indigo-500 rounded-t h-4"></div>
</div>
</div>
<!-- Script & Translation Panel -->
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6 flex-1">
<!-- Original Script -->
<div class="bg-slate-900 rounded-xl border border-slate-800 flex flex-col overflow-hidden">
<div class="p-4 border-b border-slate-800 bg-slate-900">
<div class="flex justify-between items-center">
<h3 class="font-semibold text-slate-200 flex items-center gap-2">
<i data-lucide="file-text" class="w-4 h-4 text-slate-500"></i>
Original Script (English)
</h3>
<span class="text-xs px-2 py-1 bg-slate-800 rounded text-slate-400">Auto-Synced</span>
</div>
</div>
<div class="flex-1 p-4 overflow-y-auto max-h-60 space-y-4 custom-scrollbar">
<div class="space-y-2">
<div class="text-xs text-indigo-400 font-mono mb-1">00:00:02</div>
<p class="text-sm text-slate-300 leading-relaxed">"Welcome back to our channel! Today we're exploring the beautiful landscapes of the Swiss Alps."</p>
</div>
<div class="space-y-2">
<div class="text-xs text-indigo-400 font-mono mb-1">00:00:06</div>
<p class="text-sm text-slate-300 leading-relaxed">"You can see how the sunlight reflects off the snow peaks, creating an absolutely magical scene."</p>
</div>
<div class="space-y-2">
<div class="text-xs text-indigo-400 font-mono mb-1">00:00:12</div>
<p class="text-sm text-slate-300 leading-relaxed">"In this episode, we'll be hiking to the summit, so make sure you have proper gear!"</p>
</div>
<div class="space-y-2">
<div class="text-xs text-indigo-400 font-mono mb-1">00:00:18</div>
<p class="text-sm text-slate-300 leading-relaxed">"But first, let's stop by the local village for some traditional Swiss cheese fondue."</p>
</div>
</div>
</div>
<!-- Dubbed Script -->
<div class="bg-slate-900 rounded-xl border border-slate-800 flex flex-col overflow-hidden relative group">
<div class="p-4 border-b border-slate-800 bg-slate-900">
<div class="flex justify-between items-center">
<h3 class="font-semibold text-white flex items-center gap-2">
<i data-lucide="mic" class="w-4 h-4 text-indigo-500"></i>
Dubbed Script (Spanish)
</h3>
<div class="flex gap-2">
<button class="p-1.5 hover:bg-slate-800 rounded-lg text-slate-400 hover:text-white transition-colors" title="Text-to-Speech">
<i data-lucide="volume-2" class="w-4 h-4"></i>
</button>
<button class="p-1.5 hover:bg-slate-800 rounded-lg text-slate-400 hover:text-white transition-colors" title="Export Audio">
<i data-lucide="download" class="w-4 h-4"></i>
</button>
</div>
</div>
</div>
<!-- Active Syncing Highlight -->
<div class="absolute top-0 right-0 p-2">
<span class="flex items-center gap-1 text-xs font-bold text-emerald-500 animate-pulse bg-emerald-500/10 px-2 py-1 rounded-full border border-emerald-500/20">
<span class="w-2 h-2 bg-emerald-500 rounded-full"></span>
Recording Active
</span>
</div>
<div class="flex-1 p-4 overflow-y-auto max-h-60 space-y-4">
<div class="space-y-2 p-3 rounded-lg bg-indigo-500/5 border border-indigo-500/20">
<div class="text-xs text-indigo-400 font-mono mb-1 flex justify-between">
<span>00:00:02</span>
<span class="text-emerald-400 font-bold">● Recorded</span>
</div>
<p class="text-sm text-emerald-100 leading-relaxed font-medium">"¡Bienvenidos de nuevo a nuestro canal! Hoy exploraremos los hermosos paisajes de los Alpes Suizos."</p>
<div class="mt-2 flex gap-2">
<input type="text" placeholder="Translate here..." class="bg-slate-800 border border-slate-700 text-xs rounded p-2 w-full focus:outline-none focus:border-indigo-500 text-slate-300">
<button class="bg-indigo-600 hover:bg-indigo-700 text-white px-3 rounded text-xs">Sync</button>
</div>
</div>
<div class="space-y-2">
<div class="text-xs text-slate-500 font-mono mb-1">00:00:06</div>
<p class="text-sm text-slate-500 italic leading-relaxed">"Awaiting voice actor input..."</p>
</div>
<div class="space-y-2">
<div class="text-xs text-slate-500 font-mono mb-1">00:00:12</div>
<p class="text-sm text-slate-500 italic leading-relaxed">"Awaiting voice actor input..."</p>
</div>
</div>
</div>
</div>
<!-- Action Bar -->
<div class="flex flex-col sm:flex-row items-center justify-between gap-4 pt-4 border-t border-slate-800">
<div class="flex items-center gap-4">
<div class="flex -space-x-2">
<div class="h-8 w-8 rounded-full bg-pink-500 border-2 border-slate-900 flex items-center justify-center text-xs text-white font-bold" title="John Doe">JD</div>
<div class="h-8 w-8 rounded-full bg-blue-500 border-2 border-slate-900 flex items-center justify-center text-xs text-white font-bold" title="Maria Garcia">MG</div>
<div class="h-8 w-8 rounded-full bg-slate-700 border-2 border-slate-900 flex items-center justify-center text-xs text-white font-bold">+2</div>
</div>
<div class="text-sm text-slate-400">
<span class="text-white font-medium">2</span> Voice Actors online
</div>
</div>
<div class="flex gap-3">
<button class="flex items-center gap-2 px-4 py-2 bg-slate-800 hover:bg-slate-700 text-white rounded-lg transition-colors text-sm font-medium">
<i data-lucide="rewind" class="w-4 h-4"></i>
Undo
</button>
<button class="flex items-center gap-2 px-4 py-2 bg-slate-800 hover:bg-slate-700 text-white rounded-lg transition-colors text-sm font-medium">
<i data-lucide="repeat" class="w-4 h-4"></i>
Redo
</button>
<button class="flex items-center gap-2 px-6 py-2 bg-indigo-600 hover:bg-indigo-700 text-white rounded-lg transition-all shadow-lg shadow-indigo-600/20 text-sm font-bold">
<i data-lucide="share-2" class="w-4 h-4"></i>
Export Video
</button>
</div>
</div>
</div>
</main>
</div>
<script>
// Initialize Lucide icons with retry logic for reliability
function initLucideIcons() {
if (typeof lucide !== 'undefined' && lucide.createIcons) {
try {
lucide.createIcons();
console.log('✓ Lucide icons initialized');
} catch (e) {
console.error('Error creating icons:', e);
}
} else {
// Retry after 100ms if library hasn't loaded yet
setTimeout(initLucideIcons, 100);
}
}
// Run when DOM is ready
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', initLucideIcons);
} else {
initLucideIcons();
}
</script>
</body>
</html>