Admin/audiobook
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: redesign UI with clean, modern SaaS aesthetic

Browse Source 
- Remove excessive animations and gradients
- Implement clean card-based layout
- Add professional progress stepper with checkmarks
- Simplify color scheme to gray/indigo/purple
- Create minimal, elegant component designs
- Add subtle hover effects and transitions
- Improve typography and spacing
- Remove emoji overload, keep minimal icons
- Create professional button styles
- Implement clean form inputs with focus states
- Add proper visual hierarchy
- Simplify loading states and messages
- Create cohesive, modern user experience
This commit is contained in:
Paul Bailey
2025-12-09 13:24:47 +00:00
parent fb294252c7
commit 2f200aa61b
7 changed files with 222 additions and 406 deletions
Download Patch File Download Diff File Expand all files Collapse all files

97
frontend/src/App.tsx
View File

@@ -158,39 +158,52 @@ function App() {
const allRolesAssigned = roles.length > 0 && roles.every(role => voiceAssignments.has(role.id))
return (
<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-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 className="min-h-screen bg-gradient-to-br from-gray-50 to-gray-100">
<div className="container mx-auto py-8 px-4 sm:py-12 sm:px-6 lg:px-8 max-w-5xl">
{/* Header */}
<div className="text-center mb-12">
<div className="inline-flex items-center justify-center w-16 h-16 bg-gradient-to-br from-indigo-500 to-purple-600 rounded-2xl mb-6 shadow-lg">
<span className="text-3xl">🎧</span>
</div>
<h1 className="text-4xl sm:text-5xl md:text-6xl lg:text-7xl font-extrabold text-white mb-4 drop-shadow-2xl tracking-tight">
<h1 className="text-4xl sm:text-5xl md:text-6xl font-bold text-gray-900 mb-4">
Text to Audiobook
</h1>
<p className="text-white/95 text-base sm:text-lg md:text-xl font-medium max-w-2xl mx-auto leading-relaxed">
<p className="text-lg text-gray-600 max-w-2xl mx-auto">
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>
{/* Progress Steps */}
<div className="mt-10 flex justify-center items-center gap-3">
{['Input', 'Voices', 'Review', 'Done'].map((step, index) => {
const phases = ['input', 'assignment', 'review', 'generated'];
const isActive = phase === phases[index];
const isPast = phases.indexOf(phase) > index;
return (
<div key={step} className="flex items-center">
<div className={`flex items-center justify-center w-10 h-10 rounded-full font-semibold text-sm transition-all ${
isActive ? 'bg-indigo-600 text-white scale-110' :
isPast ? 'bg-green-500 text-white' :
'bg-gray-200 text-gray-500'
}`}>
{isPast ? '✓' : index + 1}
</div>
{index < 3 && (
<div className={`w-12 h-1 mx-2 rounded ${isPast ? 'bg-green-500' : 'bg-gray-200'}`}></div>
)}
</div>
);
})}
</div>
</div>
{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="mb-6 p-4 bg-red-50 border border-red-200 text-red-700 rounded-xl">
<div className="flex items-start gap-3">
<span className="text-2xl">⚠️</span>
<span className="text-xl">⚠️</span>
<div>
<p className="font-bold text-lg mb-1">Error</p>
<p>{error}</p>
<p className="font-semibold mb-1">Error</p>
<p className="text-sm">{error}</p>
</div>
</div>
</div>
@@ -209,10 +222,10 @@ function App() {
{phase === 'assignment' && (
<>
{isLongText && (
<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 className="mb-6 p-4 bg-yellow-50 border border-yellow-200 text-yellow-800 rounded-xl">
<div className="flex items-center gap-2">
<span>⏱️</span>
<p className="text-sm font-medium">Generation may take several minutes for very long content.</p>
</div>
</div>
)}
@@ -236,10 +249,10 @@ function App() {
{phase === 'review' && (
<>
{isLongText && (
<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 className="mb-6 p-4 bg-yellow-50 border border-yellow-200 text-yellow-800 rounded-xl">
<div className="flex items-center gap-2">
<span>⏱️</span>
<p className="text-sm font-medium">Generation may take several minutes for very long content.</p>
</div>
</div>
)}
@@ -262,30 +275,24 @@ function App() {
)}
{isGenerating && isLongText && (
<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 className="mt-6 p-6 bg-blue-50 border border-blue-200 rounded-xl text-center">
<div className="flex flex-col items-center gap-4">
<div className="animate-spin rounded-full h-10 w-10 border-3 border-indigo-600 border-t-transparent"></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>
<p className="font-semibold text-gray-900 mb-1">Generating Your Audiobook</p>
<p className="text-sm text-gray-600">This may take several minutes. Please be patient...</p>
</div>
</div>
</div>
)}
{isGeneratingScript && (
<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 className="mt-6 p-6 bg-purple-50 border border-purple-200 rounded-xl text-center">
<div className="flex flex-col items-center gap-4">
<div className="animate-spin rounded-full h-10 w-10 border-3 border-purple-600 border-t-transparent"></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>
<p className="font-semibold text-gray-900 mb-1">Generating Script Preview</p>
<p className="text-sm text-gray-600">AI is analyzing your text...</p>
</div>
</div>
</div>