mirror of
https://github.com/R0m1k3/podcastic.git
synced 2026-10-11 17:26:20 +02:00
feat: implement authentication routing, episode details slide-over, and success notification modal
This commit is contained in:
Michael committed
1 parent
90ee8df9df
commit
3bb2dfc009
4 files changed
+34
-30
No files matched your search
@@ -27,7 +27,7 @@ function ProtectedRoute({ children }: { children: React.ReactNode }) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="flex bg-obsidian min-h-screen">
|
<div className="flex min-h-screen">
|
||||||
<Navigation />
|
<Navigation />
|
||||||
<main className="flex-1 lg:ml-80 lg:mr-8 pb-32 pt-8 px-4 lg:px-0">
|
<main className="flex-1 lg:ml-80 lg:mr-8 pb-32 pt-8 px-4 lg:px-0">
|
||||||
<div className="reveal">
|
<div className="reveal">
|
||||||
|
|||||||
@@ -109,7 +109,7 @@ export default function EpisodeDetails({ episode, isOpen, onClose, onPlay }: Epi
|
|||||||
<div className="space-y-6">
|
<div className="space-y-6">
|
||||||
<h3 className="text-xl font-display font-black">À propos de cet épisode</h3>
|
<h3 className="text-xl font-display font-black">À propos de cet épisode</h3>
|
||||||
<div
|
<div
|
||||||
className="prose prose-invert max-w-none text-[var(--text-secondary)] leading-relaxed text-lg"
|
className="prose dark:prose-invert max-w-none text-[var(--text-secondary)] leading-relaxed text-lg"
|
||||||
dangerouslySetInnerHTML={{ __html: episode.description }}
|
dangerouslySetInnerHTML={{ __html: episode.description }}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -24,43 +24,43 @@ export default function SuccessModal({
|
|||||||
<div className="fixed inset-0 z-[110] flex items-center justify-center p-4">
|
<div className="fixed inset-0 z-[110] flex items-center justify-center p-4">
|
||||||
{/* Backdrop */}
|
{/* Backdrop */}
|
||||||
<div
|
<div
|
||||||
className="absolute inset-0 bg-obsidian/60 backdrop-blur-md animate-fade-in"
|
className="absolute inset-0 bg-black/60 backdrop-blur-md animate-fade-in"
|
||||||
onClick={onClose}
|
onClick={onClose}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
{/* Modal Content */}
|
{/* Modal Content */}
|
||||||
<div className="relative premium-glass rounded-[3.5rem] w-full max-w-sm overflow-hidden animate-slide-up shadow-[0_0_50px_rgba(0,0,0,0.5)] border-white/10">
|
<div className="relative premium-glass rounded-[3.5rem] w-full max-w-sm overflow-hidden animate-slide-up shadow-2xl border-[var(--border-color)]">
|
||||||
{/* Decorative Aura */}
|
{/* Decorative Aura */}
|
||||||
<div className="absolute -top-24 -right-24 w-48 h-48 bg-accent-indigo/20 blur-[60px] rounded-full" />
|
<div className="absolute -top-24 -right-24 w-48 h-48 bg-[var(--accent-glow)] blur-[60px] rounded-full" />
|
||||||
|
|
||||||
<div className="p-10 flex flex-col items-center text-center relative z-10">
|
<div className="p-10 flex flex-col items-center text-center relative z-10">
|
||||||
{/* Header Actions */}
|
{/* Header Actions */}
|
||||||
<button onClick={onClose} className="absolute top-0 right-0 p-6 text-slate-500 hover:text-white transition-colors">
|
<button onClick={onClose} className="absolute top-0 right-0 p-6 text-[var(--text-secondary)] hover:text-[var(--text-primary)] transition-colors">
|
||||||
<X className="w-5 h-5" />
|
<X className="w-5 h-5" />
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
{/* Icon */}
|
{/* Icon */}
|
||||||
<div className="w-20 h-20 bg-accent-cyan/10 rounded-3xl flex items-center justify-center mb-8 shadow-glow-cyan border border-accent-cyan/20">
|
<div className="w-20 h-20 bg-[var(--accent-glow)] rounded-3xl flex items-center justify-center mb-8 shadow-glow-indigo border border-[var(--border-color)]">
|
||||||
<Sparkles className="w-8 h-8 text-accent-cyan animate-pulse" />
|
<Sparkles className="w-8 h-8 text-[var(--accent-primary)] animate-pulse" />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<h3 className="text-2xl font-display font-black text-white mb-2 leading-tight">
|
<h3 className="text-2xl font-display font-black mb-2 leading-tight">
|
||||||
{message}
|
{message}
|
||||||
</h3>
|
</h3>
|
||||||
<p className="text-[10px] font-bold text-slate-500 uppercase tracking-widest mb-8">Nouveau membre de votre univers</p>
|
<p className="text-[10px] font-bold text-[var(--text-secondary)] uppercase tracking-widest mb-8">Nouveau membre de votre univers</p>
|
||||||
|
|
||||||
<div className="w-full bg-white/[0.03] rounded-[2rem] p-5 mb-10 flex items-center gap-5 border border-white/5">
|
<div className="w-full bg-[var(--bg-secondary)] rounded-[2rem] p-5 mb-10 flex items-center gap-5 border border-[var(--border-color)]">
|
||||||
<div className="w-20 h-20 rounded-2xl overflow-hidden shadow-2xl border border-white/10 shrink-0">
|
<div className="w-20 h-20 rounded-2xl overflow-hidden shadow-2xl border border-[var(--border-color)] shrink-0">
|
||||||
{podcastImage ? (
|
{podcastImage ? (
|
||||||
<img src={podcastImage} alt={podcastTitle} className="w-full h-full object-cover" />
|
<img src={podcastImage} alt={podcastTitle} className="w-full h-full object-cover" />
|
||||||
) : (
|
) : (
|
||||||
<div className="w-full h-full bg-gradient-to-br from-accent-indigo to-accent-rose flex items-center justify-center text-2xl">🎙️</div>
|
<div className="w-full h-full bg-gradient-to-br from-[var(--accent-primary)] to-[var(--accent-secondary)] flex items-center justify-center text-2xl">🎙️</div>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
<div className="text-left flex-1 min-w-0">
|
<div className="text-left flex-1 min-w-0">
|
||||||
<p className="text-lg font-bold text-white truncate mb-1">{podcastTitle}</p>
|
<p className="text-lg font-bold truncate mb-1">{podcastTitle}</p>
|
||||||
{podcastAuthor && (
|
{podcastAuthor && (
|
||||||
<p className="text-xs font-bold text-accent-indigo truncate uppercase tracking-widest">{podcastAuthor}</p>
|
<p className="text-xs font-bold text-[var(--accent-primary)] truncate uppercase tracking-widest">{podcastAuthor}</p>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -78,7 +78,7 @@ export default function SuccessModal({
|
|||||||
|
|
||||||
<button
|
<button
|
||||||
onClick={onClose}
|
onClick={onClose}
|
||||||
className="w-full py-4 rounded-2xl bg-white/5 text-slate-400 text-xs font-black uppercase tracking-widest hover:bg-white/10 hover:text-white transition-all"
|
className="w-full py-4 rounded-2xl bg-[var(--bg-secondary)] text-[var(--text-secondary)] text-xs font-black uppercase tracking-widest hover:bg-[var(--accent-primary)]/10 hover:text-[var(--text-primary)] transition-all border border-[var(--border-color)]"
|
||||||
>
|
>
|
||||||
Continuer
|
Continuer
|
||||||
</button>
|
</button>
|
||||||
|
|||||||
@@ -47,31 +47,33 @@ export default function Login() {
|
|||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="min-h-screen bg-obsidian flex items-center justify-center px-4 relative overflow-hidden font-sans">
|
<div className="min-h-screen flex items-center justify-center px-4 relative overflow-hidden font-sans">
|
||||||
{/* Background Auras */}
|
{/* Background Auras */}
|
||||||
<div className="absolute top-0 left-0 w-full h-full bg-[radial-gradient(circle_at_20%_20%,rgba(99,102,241,0.15),transparent_40%),radial-gradient(circle_at_80%_80%,rgba(6,182,212,0.15),transparent_40%)]" />
|
<div className="absolute top-0 left-0 w-full h-full bg-[radial-gradient(circle_at_20%_20%,var(--accent-glow),transparent_40%),radial-gradient(circle_at_80%_80%,rgba(6,182,212,0.1),transparent_40%)]" />
|
||||||
<div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[600px] h-[600px] bg-accent-indigo/5 blur-[120px] rounded-full animate-aura" />
|
<div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[600px] h-[600px] bg-[var(--accent-glow)] blur-[120px] rounded-full animate-aura" />
|
||||||
|
|
||||||
<div className="w-full max-w-lg relative z-10 reveal">
|
<div className="w-full max-w-lg relative z-10 reveal">
|
||||||
{/* Logo & Header */}
|
{/* Logo & Header */}
|
||||||
<div className="text-center mb-10">
|
<div className="text-center mb-10">
|
||||||
<div className="w-20 h-20 rounded-3xl bg-gradient-to-br from-accent-indigo to-accent-rose flex items-center justify-center text-4xl mx-auto mb-6 shadow-glow-indigo transform hover:scale-110 transition-transform duration-500">
|
<div className="w-20 h-20 rounded-3xl bg-gradient-to-br from-[var(--accent-primary)] to-[var(--accent-secondary)] flex items-center justify-center text-4xl mx-auto mb-6 shadow-glow-indigo transform hover:scale-110 transition-transform duration-500">
|
||||||
🎙️
|
🎙️
|
||||||
</div>
|
</div>
|
||||||
<h1 className="text-5xl font-display font-black text-white mb-3 tracking-tighter">PODCASTIC</h1>
|
<h1 className="text-5xl font-display font-black mb-3 tracking-tighter">PODCASTIC</h1>
|
||||||
<div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-white/5 border border-white/10 text-[10px] font-black text-accent-indigo uppercase tracking-[0.2em]">
|
<div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-[var(--bg-secondary)] border border-[var(--border-color)] text-[10px] font-black text-[var(--accent-primary)] uppercase tracking-[0.2em]">
|
||||||
<Sparkles className="w-3 h-3" />
|
<Sparkles className="w-3 h-3" />
|
||||||
Expérience Audio Premium
|
Expérience Audio Premium
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Form Card */}
|
{/* Form Card */}
|
||||||
<div className="premium-glass p-8 lg:p-12 rounded-[3rem] shadow-2xl border-white/10">
|
<div className="premium-glass p-8 lg:p-12 rounded-[3rem] shadow-2xl">
|
||||||
<div className="flex p-1.5 rounded-2xl bg-white/[0.03] border border-white/5 mb-10">
|
<div className="flex p-1.5 rounded-2xl bg-[var(--bg-secondary)] border border-[var(--border-color)] mb-10">
|
||||||
<button
|
<button
|
||||||
onClick={() => { setIsLogin(true); setError(null); }}
|
onClick={() => { setIsLogin(true); setError(null); }}
|
||||||
className={`flex-1 py-3 rounded-xl text-xs font-black uppercase tracking-widest transition-all ${
|
className={`flex-1 py-3 rounded-xl text-xs font-black uppercase tracking-widest transition-all ${
|
||||||
isLogin ? 'bg-white text-obsidian shadow-lg' : 'text-slate-500 hover:text-slate-300'
|
isLogin
|
||||||
|
? 'bg-[var(--accent-primary)] text-white shadow-lg'
|
||||||
|
: 'text-[var(--text-secondary)] hover:text-[var(--text-primary)]'
|
||||||
}`}
|
}`}
|
||||||
>
|
>
|
||||||
Connexion
|
Connexion
|
||||||
@@ -79,7 +81,9 @@ export default function Login() {
|
|||||||
<button
|
<button
|
||||||
onClick={() => { setIsLogin(false); setError(null); }}
|
onClick={() => { setIsLogin(false); setError(null); }}
|
||||||
className={`flex-1 py-3 rounded-xl text-xs font-black uppercase tracking-widest transition-all ${
|
className={`flex-1 py-3 rounded-xl text-xs font-black uppercase tracking-widest transition-all ${
|
||||||
!isLogin ? 'bg-white text-obsidian shadow-lg' : 'text-slate-500 hover:text-slate-300'
|
!isLogin
|
||||||
|
? 'bg-[var(--accent-primary)] text-white shadow-lg'
|
||||||
|
: 'text-[var(--text-secondary)] hover:text-[var(--text-primary)]'
|
||||||
}`}
|
}`}
|
||||||
>
|
>
|
||||||
Inscription
|
Inscription
|
||||||
@@ -89,7 +93,7 @@ export default function Login() {
|
|||||||
<form onSubmit={handleSubmit} className="space-y-6">
|
<form onSubmit={handleSubmit} className="space-y-6">
|
||||||
{!isLogin && (
|
{!isLogin && (
|
||||||
<div className="relative group">
|
<div className="relative group">
|
||||||
<UserIcon className="absolute left-5 top-1/2 -translate-y-1/2 w-5 h-5 text-slate-500 group-focus-within:text-accent-indigo transition-colors" />
|
<UserIcon className="absolute left-5 top-1/2 -translate-y-1/2 w-5 h-5 text-[var(--text-secondary)] group-focus-within:text-[var(--accent-primary)] transition-colors" />
|
||||||
<input
|
<input
|
||||||
type="text"
|
type="text"
|
||||||
name="username"
|
name="username"
|
||||||
@@ -103,7 +107,7 @@ export default function Login() {
|
|||||||
)}
|
)}
|
||||||
|
|
||||||
<div className="relative group">
|
<div className="relative group">
|
||||||
<Mail className="absolute left-5 top-1/2 -translate-y-1/2 w-5 h-5 text-slate-500 group-focus-within:text-accent-indigo transition-colors" />
|
<Mail className="absolute left-5 top-1/2 -translate-y-1/2 w-5 h-5 text-[var(--text-secondary)] group-focus-within:text-[var(--accent-primary)] transition-colors" />
|
||||||
<input
|
<input
|
||||||
type="email"
|
type="email"
|
||||||
name="email"
|
name="email"
|
||||||
@@ -116,7 +120,7 @@ export default function Login() {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="relative group">
|
<div className="relative group">
|
||||||
<Lock className="absolute left-5 top-1/2 -translate-y-1/2 w-5 h-5 text-slate-500 group-focus-within:text-accent-indigo transition-colors" />
|
<Lock className="absolute left-5 top-1/2 -translate-y-1/2 w-5 h-5 text-[var(--text-secondary)] group-focus-within:text-[var(--accent-primary)] transition-colors" />
|
||||||
<input
|
<input
|
||||||
type="password"
|
type="password"
|
||||||
name="password"
|
name="password"
|
||||||
@@ -152,7 +156,7 @@ export default function Login() {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Footer */}
|
{/* Footer */}
|
||||||
<p className="mt-8 text-center text-[10px] font-bold text-slate-600 uppercase tracking-[0.3em]">
|
<p className="mt-8 text-center text-[10px] font-bold text-[var(--text-secondary)] uppercase tracking-[0.3em]">
|
||||||
Podcastic High-Fidelity Audio © 2026
|
Podcastic High-Fidelity Audio © 2026
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Reference in new issue
Block a user