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

feat: modernize UI with gradient design, glass morphism, and enhanced visual appeal

Browse Source 
- Add purple/indigo gradient background throughout app
- Implement glass morphism effects on all cards
- Add gradient buttons with smooth hover animations
- Integrate emoji icons for better visual communication
- Enhance typography with improved font stack
- Add loading spinners and smooth transitions
- Improve color scheme with modern purple/indigo palette
- Add glowing shadows and depth effects
- Maintain responsive design and touch-friendly interactions
This commit is contained in:
Paul Bailey
2025-12-09 12:29:40 +00:00
parent 63bdf57593
commit 706ada866c
17 changed files with 731 additions and 93 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
frontend/src/App.tsx
View File

@@ -32,6 +32,7 @@ function App() {
try {
// Detect roles in the text
const response = await detectRoles(text)
console.log('Detected roles:', response.roles)
setRoles(response.roles)
// Initialize voice assignments map (empty initially)
@@ -157,15 +158,24 @@ function App() {
const allRolesAssigned = roles.length > 0 && roles.every(role => voiceAssignments.has(role.id))
return (
<div className="min-h-screen bg-gray-50">
<div className="min-h-screen">
<div className="container mx-auto py-4 px-4 sm:py-8 sm:px-6 lg:px-8">
<h1 className="text-2xl sm:text-3xl md:text-4xl font-bold text-center mb-4 sm:mb-6 md:mb-8">
Text to Audiobook
</h1>
{/* 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>
</div>
<h1 className="text-3xl sm:text-4xl md:text-5xl font-bold text-white mb-2 drop-shadow-lg">
Text to Audiobook
</h1>
<p className="text-white/90 text-sm sm:text-base">Transform your stories into immersive audio experiences</p>
</div>
{error && (
<div className="max-w-4xl mx-auto mb-4 p-3 sm:p-4 bg-red-100 border border-red-400 text-red-700 rounded text-sm sm:text-base">
{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>
)}
@@ -186,6 +196,7 @@ function App() {
Generation may take several minutes for very long content.
</div>
)}
{console.log('Rendering VoiceAssignmentSection with roles:', roles, 'allRolesAssigned:', allRolesAssigned)}
<VoiceAssignmentSection
roles={roles}
voiceAssignments={voiceAssignments}
@@ -228,14 +239,20 @@ function App() {
)}
{isGenerating && isLongText && (
<div className="max-w-4xl mx-auto mt-4 p-3 sm:p-4 bg-blue-100 border border-blue-400 text-blue-800 rounded text-center text-sm sm:text-base">
Generation may take several minutes for very long content. Please be patient...
<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>
</div>
)}
{isGeneratingScript && (
<div className="max-w-4xl mx-auto mt-4 p-3 sm:p-4 bg-blue-100 border border-blue-400 text-blue-800 rounded text-center text-sm sm:text-base">
Generating script preview... This may take a moment.
<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>
</div>
)}
</div>