Paul Bailey
fb294252c7
- 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
78 lines
3.3 KiB
TypeScript
78 lines
3.3 KiB
TypeScript
interface AudioPlayerSectionProps {
|
||
audioUrl: string;
|
||
onDownload: () => void;
|
||
}
|
||
|
||
export default function AudioPlayerSection({
|
||
audioUrl,
|
||
onDownload
|
||
}: AudioPlayerSectionProps) {
|
||
return (
|
||
<div className="w-full max-w-4xl mx-auto p-6 sm:p-8 glass-effect rounded-3xl shadow-glow-strong card-hover">
|
||
{/* Success Header */}
|
||
<div className="text-center mb-8">
|
||
<div className="inline-block mb-6">
|
||
<div className="w-24 h-24 sm:w-28 sm:h-28 mx-auto bg-gradient-to-br from-green-400 via-emerald-500 to-teal-600 rounded-3xl shadow-2xl flex items-center justify-center animate-bounce shadow-green-500/50">
|
||
<span className="text-5xl sm:text-6xl">🎉</span>
|
||
</div>
|
||
</div>
|
||
<h2 className="text-3xl sm:text-4xl md:text-5xl font-extrabold gradient-text-animated mb-3">
|
||
Your Audiobook is Ready!
|
||
</h2>
|
||
<p className="text-gray-700 text-base sm:text-lg font-medium">
|
||
Listen below or download to enjoy offline
|
||
</p>
|
||
</div>
|
||
|
||
{/* Audio Player Card */}
|
||
<div className="bg-gradient-to-br from-purple-50 via-indigo-50 to-pink-50 rounded-3xl shadow-2xl p-6 sm:p-10 mb-8 border-2 border-purple-300 hover:shadow-3xl transition-all">
|
||
<div className="flex items-center gap-4 mb-6">
|
||
<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>
|
||
<h3 className="text-xl sm:text-2xl font-extrabold text-gray-800">Listen Now</h3>
|
||
<p className="text-sm text-gray-600">Your personalized audiobook</p>
|
||
</div>
|
||
</div>
|
||
|
||
<audio
|
||
controls
|
||
src={audioUrl}
|
||
className="w-full min-h-[54px] rounded-2xl shadow-xl"
|
||
preload="metadata"
|
||
style={{
|
||
filter: 'drop-shadow(0 8px 16px rgba(0, 0, 0, 0.15))'
|
||
}}
|
||
>
|
||
Your browser does not support the audio element.
|
||
</audio>
|
||
</div>
|
||
|
||
{/* Download Button */}
|
||
<div className="flex justify-center mb-6">
|
||
<button
|
||
onClick={onDownload}
|
||
className="px-12 py-6 min-h-[60px] 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 text-white font-extrabold rounded-2xl transition-all cursor-pointer touch-manipulation shadow-2xl text-lg sm:text-xl shadow-green-500/50 relative overflow-hidden"
|
||
>
|
||
<span className="flex items-center justify-center gap-4 relative z-10">
|
||
<span className="text-2xl">⬇️</span>
|
||
Download Audiobook
|
||
</span>
|
||
</button>
|
||
</div>
|
||
|
||
{/* Success Message */}
|
||
<div className="p-6 bg-gradient-to-r from-green-50 via-emerald-50 to-teal-50 border-2 border-green-300 text-green-900 rounded-2xl shadow-lg text-center text-sm sm:text-base">
|
||
<div className="flex items-center justify-center gap-3 mb-2">
|
||
<span className="text-3xl">✅</span>
|
||
<p className="font-extrabold text-lg">Success!</p>
|
||
</div>
|
||
<p className="font-medium">
|
||
Your audiobook has been successfully generated with AI-powered voices!
|
||
</p>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|