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:
@@ -159,31 +159,44 @@ export default function VoiceAssignmentSection({
|
||||
const isGenerateDisabled = !allRolesAssigned || isGenerating;
|
||||
|
||||
return (
|
||||
<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 className="w-full max-w-4xl mx-auto p-6 sm:p-8 glass-effect rounded-3xl shadow-glow card-hover">
|
||||
<div className="flex items-center gap-4 mb-8">
|
||||
<div className="w-14 h-14 bg-gradient-to-br from-purple-500 via-purple-600 to-indigo-600 rounded-2xl flex items-center justify-center shadow-lg shadow-purple-500/50">
|
||||
<span className="text-2xl">🎤</span>
|
||||
</div>
|
||||
<div>
|
||||
<h2 className="text-2xl sm:text-3xl font-extrabold gradient-text-animated">Assign Voices to Roles</h2>
|
||||
<p className="text-gray-600 text-sm mt-1">Choose the perfect voice for each character</p>
|
||||
</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-4 text-gray-800 flex items-center gap-2">
|
||||
<span>👥</span> Voice Assignments
|
||||
<div className="mb-8">
|
||||
<h3 className="text-xl font-bold mb-5 text-gray-800 flex items-center gap-3">
|
||||
<span className="text-2xl">👥</span>
|
||||
<span>Voice Assignments</span>
|
||||
</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 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>
|
||||
<div className="space-y-4">
|
||||
{roles.map((role, index) => (
|
||||
<div
|
||||
key={role.id}
|
||||
className="flex flex-col sm:flex-row sm:items-center gap-3 sm:gap-5 bg-gradient-to-r from-white to-purple-50/50 p-5 rounded-2xl shadow-md border-2 border-purple-200 hover:border-purple-400 hover:shadow-xl transition-all card-hover"
|
||||
style={{ animationDelay: `${index * 0.1}s` }}
|
||||
>
|
||||
<div className="flex items-center gap-3 sm:w-48">
|
||||
<div className="w-10 h-10 bg-gradient-to-br from-indigo-500 to-purple-600 rounded-xl flex items-center justify-center text-white font-bold shadow-md">
|
||||
{index + 1}
|
||||
</div>
|
||||
<label className="font-bold text-gray-800 text-base sm:text-lg">
|
||||
{role.label}
|
||||
</label>
|
||||
</div>
|
||||
<select
|
||||
value={voiceAssignments.get(role.id) || ''}
|
||||
onChange={(e) => handleVoiceSelect(role.id, e.target.value)}
|
||||
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"
|
||||
className="flex-1 p-4 min-h-[52px] border-2 border-purple-300 rounded-xl focus:border-purple-600 focus:ring-4 focus:ring-purple-300 focus:outline-none text-sm sm:text-base touch-manipulation bg-white shadow-sm font-medium"
|
||||
>
|
||||
<option value="">Select a voice...</option>
|
||||
<option value="">🎭 Select a voice...</option>
|
||||
{KOKORO_VOICES.map((voice) => (
|
||||
<option key={voice.id} value={voice.id}>
|
||||
{voice.label}
|
||||
@@ -195,43 +208,46 @@ export default function VoiceAssignmentSection({
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Language Selector */}
|
||||
<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 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}>
|
||||
{lang.label}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
{/* Language and Speed Settings */}
|
||||
<div className="grid sm:grid-cols-2 gap-6 mb-8">
|
||||
{/* Language Selector */}
|
||||
<div className="bg-gradient-to-br from-white to-indigo-50/50 p-6 rounded-2xl shadow-md border-2 border-indigo-200 hover:shadow-xl transition-all">
|
||||
<h3 className="text-xl font-bold mb-4 text-gray-800 flex items-center gap-3">
|
||||
<span className="text-2xl">🌍</span> Language
|
||||
</h3>
|
||||
<select
|
||||
value={language}
|
||||
onChange={handleLanguageSelect}
|
||||
className="w-full p-4 min-h-[52px] border-2 border-indigo-300 rounded-xl focus:border-indigo-600 focus:ring-4 focus:ring-indigo-300 focus:outline-none text-sm sm:text-base touch-manipulation bg-white shadow-sm font-medium"
|
||||
>
|
||||
{LANGUAGES.map((lang) => (
|
||||
<option key={lang.code} value={lang.code}>
|
||||
{lang.label}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
{/* Speed Slider */}
|
||||
<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"
|
||||
max="1.5"
|
||||
step="0.1"
|
||||
value={speed}
|
||||
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 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 Slider */}
|
||||
<div className="bg-gradient-to-br from-white to-purple-50/50 p-6 rounded-2xl shadow-md border-2 border-purple-200 hover:shadow-xl transition-all">
|
||||
<h3 className="text-xl font-bold mb-4 text-gray-800 flex items-center gap-3">
|
||||
<span className="text-2xl">⚡</span> Playback Speed
|
||||
</h3>
|
||||
<div className="flex items-center gap-4">
|
||||
<span className="text-sm text-gray-600 font-semibold">0.5x</span>
|
||||
<input
|
||||
type="range"
|
||||
min="0.5"
|
||||
max="1.5"
|
||||
step="0.1"
|
||||
value={speed}
|
||||
onChange={handleSpeedChange}
|
||||
className="flex-1 h-8 touch-manipulation"
|
||||
/>
|
||||
<span className="text-sm text-gray-600 font-semibold">1.5x</span>
|
||||
</div>
|
||||
<div className="mt-4 text-center">
|
||||
<span className="inline-block font-extrabold text-purple-700 text-2xl bg-gradient-to-r from-purple-100 to-indigo-100 px-6 py-2 rounded-xl shadow-inner">
|
||||
{speed.toFixed(1)}x
|
||||
</span>
|
||||
</div>
|
||||
@@ -239,25 +255,28 @@ export default function VoiceAssignmentSection({
|
||||
</div>
|
||||
|
||||
{/* Action Buttons */}
|
||||
<div className="flex flex-col sm:flex-row justify-center gap-3 sm:gap-4">
|
||||
<div className="flex flex-col sm:flex-row justify-center gap-4 sm:gap-5">
|
||||
<button
|
||||
onClick={onGenerate}
|
||||
disabled={isGenerateDisabled}
|
||||
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 ${
|
||||
className={`px-10 py-5 min-h-[56px] rounded-2xl font-bold text-white text-lg transition-all touch-manipulation shadow-2xl relative overflow-hidden ${
|
||||
isGenerateDisabled
|
||||
? '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'
|
||||
: 'bg-gradient-to-r from-purple-600 via-purple-700 to-indigo-600 hover:from-purple-700 hover:via-purple-800 hover:to-indigo-700 cursor-pointer shadow-purple-500/50'
|
||||
}`}
|
||||
>
|
||||
{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>
|
||||
<span className="flex items-center justify-center gap-3 relative z-10">
|
||||
<div className="relative">
|
||||
<div className="animate-spin rounded-full h-6 w-6 border-3 border-white/30"></div>
|
||||
<div className="animate-spin rounded-full h-6 w-6 border-3 border-white border-t-transparent absolute top-0 left-0"></div>
|
||||
</div>
|
||||
Generating Script...
|
||||
</span>
|
||||
) : (
|
||||
<span className="flex items-center justify-center gap-2">
|
||||
<span className="flex items-center justify-center gap-3 relative z-10">
|
||||
Next: Review Script
|
||||
<span>→</span>
|
||||
<span className="text-xl">→</span>
|
||||
</span>
|
||||
)}
|
||||
</button>
|
||||
@@ -266,14 +285,15 @@ export default function VoiceAssignmentSection({
|
||||
<button
|
||||
onClick={onSkipReview}
|
||||
disabled={isGenerateDisabled}
|
||||
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 ${
|
||||
className={`px-10 py-5 min-h-[56px] rounded-2xl font-bold text-white text-lg transition-all touch-manipulation shadow-2xl relative overflow-hidden ${
|
||||
isGenerateDisabled
|
||||
? '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'
|
||||
: 'bg-gradient-to-r from-green-500 via-emerald-600 to-teal-600 hover:from-green-600 hover:via-emerald-700 hover:to-teal-700 cursor-pointer shadow-green-500/50'
|
||||
}`}
|
||||
>
|
||||
<span className="flex items-center justify-center gap-2">
|
||||
⚡ Skip Review & Generate
|
||||
<span className="flex items-center justify-center gap-3 relative z-10">
|
||||
<span className="text-xl">⚡</span>
|
||||
Skip Review & Generate
|
||||
</span>
|
||||
</button>
|
||||
)}
|
||||
@@ -281,8 +301,11 @@ export default function VoiceAssignmentSection({
|
||||
|
||||
{/* Validation Message */}
|
||||
{!allRolesAssigned && !isGenerating && (
|
||||
<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 className="mt-6 p-5 bg-gradient-to-r from-yellow-50 to-orange-50 border-2 border-yellow-400 text-yellow-900 rounded-2xl text-center text-sm sm:text-base shadow-lg">
|
||||
<div className="flex items-center justify-center gap-3">
|
||||
<span className="text-2xl">⚠️</span>
|
||||
<p className="font-bold">Please assign voices to all roles before generating the audiobook.</p>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user