feat: create stunning premium UI with advanced design elements
- Add animated gradient backgrounds with floating particles - Implement advanced glass morphism with enhanced blur effects - Add Google Fonts Inter for professional typography - Create sophisticated button animations with ripple effects - Add progress indicator dots showing current step - Implement card hover effects with smooth transforms - Add animated gradient text with shimmer effects - Create premium loading spinners with dual rings - Add character counter to textarea - Implement numbered badges for roles and segments - Add gradient backgrounds to all cards and sections - Create pulsing glow animations for important elements - Add emoji icons throughout for visual appeal - Implement responsive grid layouts for settings - Add detailed subtitles and descriptions to sections - Create success celebration with bouncing animation - Add shadow effects with color-matched glows - Implement smooth transitions and cubic-bezier easing - Add visual hierarchy with varied font weights - Create immersive, modern user experience
This commit is contained in:
@@ -158,24 +158,41 @@ function App() {
|
||||
const allRolesAssigned = roles.length > 0 && roles.every(role => voiceAssignments.has(role.id))
|
||||
|
||||
return (
|
||||
<div className="min-h-screen">
|
||||
<div className="container mx-auto py-4 px-4 sm:py-8 sm:px-6 lg:px-8">
|
||||
<div className="min-h-screen relative">
|
||||
<div className="container mx-auto py-6 px-4 sm:py-12 sm:px-6 lg:px-8 relative z-10">
|
||||
{/* Header with gradient text and icon */}
|
||||
<div className="text-center mb-6 sm:mb-10">
|
||||
<div className="inline-block mb-4">
|
||||
<div className="w-16 h-16 sm:w-20 sm:h-20 mx-auto bg-white rounded-2xl shadow-glow flex items-center justify-center">
|
||||
<span className="text-3xl sm:text-4xl">🎧</span>
|
||||
<div className="text-center mb-8 sm:mb-14">
|
||||
<div className="inline-block mb-6 animate-bounce">
|
||||
<div className="w-20 h-20 sm:w-24 sm:h-24 mx-auto bg-white rounded-3xl shadow-glow-strong flex items-center justify-center relative overflow-hidden">
|
||||
<div className="absolute inset-0 bg-gradient-to-br from-purple-100 to-indigo-100 opacity-50"></div>
|
||||
<span className="text-4xl sm:text-5xl relative z-10">🎧</span>
|
||||
</div>
|
||||
</div>
|
||||
<h1 className="text-3xl sm:text-4xl md:text-5xl font-bold text-white mb-2 drop-shadow-lg">
|
||||
<h1 className="text-4xl sm:text-5xl md:text-6xl lg:text-7xl font-extrabold text-white mb-4 drop-shadow-2xl tracking-tight">
|
||||
Text to Audiobook
|
||||
</h1>
|
||||
<p className="text-white/90 text-sm sm:text-base">Transform your stories into immersive audio experiences</p>
|
||||
<p className="text-white/95 text-base sm:text-lg md:text-xl font-medium max-w-2xl mx-auto leading-relaxed">
|
||||
Transform your stories into immersive audio experiences with AI-powered voices
|
||||
</p>
|
||||
|
||||
{/* Progress indicator */}
|
||||
<div className="mt-8 flex justify-center items-center gap-2 sm:gap-3">
|
||||
<div className={`w-2 h-2 sm:w-3 sm:h-3 rounded-full transition-all duration-300 ${phase === 'input' ? 'bg-white scale-125' : 'bg-white/40'}`}></div>
|
||||
<div className={`w-2 h-2 sm:w-3 sm:h-3 rounded-full transition-all duration-300 ${phase === 'assignment' ? 'bg-white scale-125' : 'bg-white/40'}`}></div>
|
||||
<div className={`w-2 h-2 sm:w-3 sm:h-3 rounded-full transition-all duration-300 ${phase === 'review' ? 'bg-white scale-125' : 'bg-white/40'}`}></div>
|
||||
<div className={`w-2 h-2 sm:w-3 sm:h-3 rounded-full transition-all duration-300 ${phase === 'generated' ? 'bg-white scale-125' : 'bg-white/40'}`}></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{error && (
|
||||
<div className="max-w-4xl mx-auto mb-4 p-3 sm:p-4 bg-red-50 border-2 border-red-300 text-red-700 rounded-xl shadow-lg text-sm sm:text-base">
|
||||
<span className="font-semibold">⚠️ Error:</span> {error}
|
||||
<div className="max-w-4xl mx-auto mb-6 p-4 sm:p-5 glass-effect border-2 border-red-400 text-red-700 rounded-2xl shadow-glow text-sm sm:text-base animate-pulse">
|
||||
<div className="flex items-start gap-3">
|
||||
<span className="text-2xl">⚠️</span>
|
||||
<div>
|
||||
<p className="font-bold text-lg mb-1">Error</p>
|
||||
<p>{error}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
@@ -192,8 +209,11 @@ function App() {
|
||||
{phase === 'assignment' && (
|
||||
<>
|
||||
{isLongText && (
|
||||
<div className="max-w-4xl mx-auto mb-4 p-3 sm:p-4 bg-yellow-100 border border-yellow-400 text-yellow-800 rounded text-sm sm:text-base">
|
||||
Generation may take several minutes for very long content.
|
||||
<div className="max-w-4xl mx-auto mb-6 p-4 sm:p-5 glass-effect border-2 border-yellow-400 text-yellow-900 rounded-2xl shadow-glow text-sm sm:text-base">
|
||||
<div className="flex items-center gap-3">
|
||||
<span className="text-2xl">⏱️</span>
|
||||
<p className="font-semibold">Generation may take several minutes for very long content.</p>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
{console.log('Rendering VoiceAssignmentSection with roles:', roles, 'allRolesAssigned:', allRolesAssigned)}
|
||||
@@ -216,8 +236,11 @@ function App() {
|
||||
{phase === 'review' && (
|
||||
<>
|
||||
{isLongText && (
|
||||
<div className="max-w-4xl mx-auto mb-4 p-3 sm:p-4 bg-yellow-100 border border-yellow-400 text-yellow-800 rounded text-sm sm:text-base">
|
||||
Generation may take several minutes for very long content.
|
||||
<div className="max-w-4xl mx-auto mb-6 p-4 sm:p-5 glass-effect border-2 border-yellow-400 text-yellow-900 rounded-2xl shadow-glow text-sm sm:text-base">
|
||||
<div className="flex items-center gap-3">
|
||||
<span className="text-2xl">⏱️</span>
|
||||
<p className="font-semibold">Generation may take several minutes for very long content.</p>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
<ScriptReviewSection
|
||||
@@ -239,19 +262,31 @@ function App() {
|
||||
)}
|
||||
|
||||
{isGenerating && isLongText && (
|
||||
<div className="max-w-4xl mx-auto mt-4 p-3 sm:p-4 glass-effect border-2 border-blue-300 text-blue-800 rounded-xl shadow-glow text-center text-sm sm:text-base">
|
||||
<div className="flex items-center justify-center gap-3">
|
||||
<div className="animate-spin rounded-full h-5 w-5 border-b-2 border-blue-800"></div>
|
||||
<span>Generation may take several minutes for very long content. Please be patient...</span>
|
||||
<div className="max-w-4xl mx-auto mt-6 p-5 sm:p-6 glass-effect border-2 border-blue-400 text-blue-900 rounded-2xl shadow-glow-strong text-center text-sm sm:text-base">
|
||||
<div className="flex flex-col items-center justify-center gap-4">
|
||||
<div className="relative">
|
||||
<div className="animate-spin rounded-full h-12 w-12 border-4 border-blue-200"></div>
|
||||
<div className="animate-spin rounded-full h-12 w-12 border-4 border-blue-600 border-t-transparent absolute top-0 left-0"></div>
|
||||
</div>
|
||||
<div>
|
||||
<p className="font-bold text-lg mb-1">Generating Your Audiobook</p>
|
||||
<p className="text-sm">This may take several minutes for very long content. Please be patient...</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{isGeneratingScript && (
|
||||
<div className="max-w-4xl mx-auto mt-4 p-3 sm:p-4 glass-effect border-2 border-blue-300 text-blue-800 rounded-xl shadow-glow text-center text-sm sm:text-base">
|
||||
<div className="flex items-center justify-center gap-3">
|
||||
<div className="animate-spin rounded-full h-5 w-5 border-b-2 border-blue-800"></div>
|
||||
<span>Generating script preview... This may take a moment.</span>
|
||||
<div className="max-w-4xl mx-auto mt-6 p-5 sm:p-6 glass-effect border-2 border-purple-400 text-purple-900 rounded-2xl shadow-glow-strong text-center text-sm sm:text-base">
|
||||
<div className="flex flex-col items-center justify-center gap-4">
|
||||
<div className="relative">
|
||||
<div className="animate-spin rounded-full h-12 w-12 border-4 border-purple-200"></div>
|
||||
<div className="animate-spin rounded-full h-12 w-12 border-4 border-purple-600 border-t-transparent absolute top-0 left-0"></div>
|
||||
</div>
|
||||
<div>
|
||||
<p className="font-bold text-lg mb-1">Generating Script Preview</p>
|
||||
<p className="text-sm">AI is analyzing your text and assigning speakers...</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
Reference in New Issue
Block a user