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

79
frontend/src/components/VoiceAssignmentSection.tsx
View File

@@ -159,22 +159,29 @@ export default function VoiceAssignmentSection({
const isGenerateDisabled = !allRolesAssigned || isGenerating;
return (
<div className="w-full max-w-4xl mx-auto p-4 sm:p-6">
<h2 className="text-xl sm:text-2xl font-bold mb-4 sm:mb-6">Assign voices to roles</h2>
<div className="w-full max-w-4xl mx-auto p-4 sm:p-6 glass-effect rounded-2xl shadow-glow">
<div className="flex items-center gap-3 mb-6">
<div className="w-10 h-10 bg-gradient-to-br from-purple-500 to-indigo-600 rounded-xl flex items-center justify-center shadow-lg">
<span className="text-xl">🎤</span>
</div>
<h2 className="text-xl sm:text-2xl font-bold gradient-text">Assign Voices to Roles</h2>
</div>
{/* Role-to-Voice Mapping Section */}
<div className="mb-6 sm:mb-8">
<h3 className="text-lg sm:text-xl font-semibold mb-3 sm:mb-4">Voice Assignments</h3>
<h3 className="text-lg sm:text-xl font-semibold mb-4 text-gray-800 flex items-center gap-2">
<span>👥</span> Voice Assignments
</h3>
<div className="space-y-3 sm:space-y-4">
{roles.map((role) => (
<div key={role.id} className="flex flex-col sm:flex-row sm:items-center gap-2 sm:gap-4">
<label className="font-medium text-gray-700 text-sm sm:text-base sm:w-40">
<div key={role.id} className="flex flex-col sm:flex-row sm:items-center gap-2 sm:gap-4 bg-white p-4 rounded-xl shadow-sm border-2 border-purple-100 hover:border-purple-300 transition-all">
<label className="font-semibold text-gray-700 text-sm sm:text-base sm:w-40">
{role.label}:
</label>
<select
value={voiceAssignments.get(role.id) || ''}
onChange={(e) => handleVoiceSelect(role.id, e.target.value)}
className="flex-1 p-3 sm:p-2 min-h-[44px] border-2 border-gray-300 rounded-lg focus:border-blue-500 focus:outline-none text-sm sm:text-base touch-manipulation"
className="flex-1 p-3 min-h-[44px] border-2 border-purple-200 rounded-xl focus:border-purple-500 focus:ring-4 focus:ring-purple-200 focus:outline-none text-sm sm:text-base touch-manipulation bg-white shadow-sm"
>
<option value="">Select a voice...</option>
{KOKORO_VOICES.map((voice) => (
@@ -189,12 +196,14 @@ export default function VoiceAssignmentSection({
</div>
{/* Language Selector */}
<div className="mb-6">
<h3 className="text-lg sm:text-xl font-semibold mb-3 sm:mb-4">Language</h3>
<div className="mb-6 bg-white p-4 rounded-xl shadow-sm border-2 border-purple-100">
<h3 className="text-lg sm:text-xl font-semibold mb-3 text-gray-800 flex items-center gap-2">
<span>🌍</span> Language
</h3>
<select
value={language}
onChange={handleLanguageSelect}
className="w-full p-3 sm:p-2 min-h-[44px] border-2 border-gray-300 rounded-lg focus:border-blue-500 focus:outline-none text-sm sm:text-base touch-manipulation"
className="w-full p-3 min-h-[44px] border-2 border-purple-200 rounded-xl focus:border-purple-500 focus:ring-4 focus:ring-purple-200 focus:outline-none text-sm sm:text-base touch-manipulation bg-white shadow-sm"
>
{LANGUAGES.map((lang) => (
<option key={lang.code} value={lang.code}>
@@ -205,10 +214,12 @@ export default function VoiceAssignmentSection({
</div>
{/* Speed Slider */}
<div className="mb-6 sm:mb-8">
<h3 className="text-lg sm:text-xl font-semibold mb-3 sm:mb-4">Playback Speed</h3>
<div className="flex items-center gap-2 sm:gap-4">
<span className="text-xs sm:text-sm text-gray-600 w-10 sm:w-12">0.5x</span>
<div className="mb-6 sm:mb-8 bg-white p-4 rounded-xl shadow-sm border-2 border-purple-100">
<h3 className="text-lg sm:text-xl font-semibold mb-4 text-gray-800 flex items-center gap-2">
<span>⚡</span> Playback Speed
</h3>
<div className="flex items-center gap-3 sm:gap-4">
<span className="text-xs sm:text-sm text-gray-600 w-10 sm:w-12 font-medium">0.5x</span>
<input
type="range"
min="0.5"
@@ -218,10 +229,12 @@ export default function VoiceAssignmentSection({
onChange={handleSpeedChange}
className="flex-1 h-8 sm:h-auto touch-manipulation"
/>
<span className="text-xs sm:text-sm text-gray-600 w-10 sm:w-12">1.5x</span>
<span className="font-semibold text-gray-800 w-12 sm:w-16 text-center text-sm sm:text-base">
{speed.toFixed(1)}x
</span>
<span className="text-xs sm:text-sm text-gray-600 w-10 sm:w-12 font-medium">1.5x</span>
<div className="w-16 sm:w-20 text-center">
<span className="font-bold text-purple-600 text-base sm:text-lg bg-purple-50 px-3 py-1 rounded-lg">
{speed.toFixed(1)}x
</span>
</div>
</div>
</div>
@@ -230,34 +243,46 @@ export default function VoiceAssignmentSection({
<button
onClick={onGenerate}
disabled={isGenerateDisabled}
className={`w-full sm:w-auto px-8 py-3 min-h-[44px] rounded-lg font-semibold text-white transition-colors touch-manipulation ${
className={`w-full sm:w-auto px-8 py-4 min-h-[44px] rounded-xl font-semibold text-white transition-all touch-manipulation shadow-lg ${
isGenerateDisabled
? 'bg-gray-400 cursor-not-allowed'
: 'bg-blue-600 hover:bg-blue-700 active:bg-blue-800 cursor-pointer'
? 'bg-gray-400 cursor-not-allowed opacity-60'
: 'bg-gradient-to-r from-purple-600 to-indigo-600 hover:from-purple-700 hover:to-indigo-700 cursor-pointer'
}`}
>
{isGenerating ? 'Generating Script...' : 'Next: Review Script'}
{isGenerating ? (
<span className="flex items-center justify-center gap-2">
<div className="animate-spin rounded-full h-5 w-5 border-b-2 border-white"></div>
Generating Script...
</span>
) : (
<span className="flex items-center justify-center gap-2">
Next: Review Script
<span>→</span>
</span>
)}
</button>
{onSkipReview && (
<button
onClick={onSkipReview}
disabled={isGenerateDisabled}
className={`w-full sm:w-auto px-8 py-3 min-h-[44px] rounded-lg font-semibold text-white transition-colors touch-manipulation ${
className={`w-full sm:w-auto px-8 py-4 min-h-[44px] rounded-xl font-semibold text-white transition-all touch-manipulation shadow-lg ${
isGenerateDisabled
? 'bg-gray-400 cursor-not-allowed'
: 'bg-green-600 hover:bg-green-700 active:bg-green-800 cursor-pointer'
? 'bg-gray-400 cursor-not-allowed opacity-60'
: 'bg-gradient-to-r from-green-500 to-emerald-600 hover:from-green-600 hover:to-emerald-700 cursor-pointer'
}`}
>
Skip Review & Generate
<span className="flex items-center justify-center gap-2">
⚡ Skip Review & Generate
</span>
</button>
)}
</div>
{/* Validation Message */}
{!allRolesAssigned && !isGenerating && (
<div className="mt-4 p-3 bg-yellow-100 border border-yellow-400 text-yellow-800 rounded text-center text-sm sm:text-base">
Please assign voices to all roles before generating the audiobook.
<div className="mt-4 p-4 bg-yellow-50 border-2 border-yellow-300 text-yellow-800 rounded-xl text-center text-sm sm:text-base shadow-sm">
<span className="font-semibold">⚠️</span> Please assign voices to all roles before generating the audiobook.
</div>
)}
</div>