Nurfog/openccb
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Implement dark mode support by adjusting background and text colors across various pages and components.

Browse Source
This commit is contained in:
Juan Enrique Allende Cifuentes
2026-02-26 16:57:28 -03:00
parent 947abcb0bc
commit e5373919c9
56 changed files with 536 additions and 517 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/experience/src/app/auth/callback/page.tsx
+1 -1
View File
@@ -45,7 +45,7 @@ function CallbackHandler() {
export default function AuthCallbackPage() {
return (
<div className="min-h-screen bg-slate-950 flex items-center justify-center p-4">
<div className="min-h-screen bg-transparent flex items-center justify-center p-4 transition-colors duration-300">
<Suspense fallback={
<div className="flex flex-col items-center gap-4">
<Loader2 className="w-12 h-12 text-indigo-500 animate-spin" />
web/experience/src/app/auth/register/page.tsx
+1 -1
View File
@@ -11,7 +11,7 @@ export default function RegisterPage() {
}, [router]);
return (
<div className="min-h-screen bg-[#050505] flex items-center justify-center">
<div className="min-h-screen bg-transparent flex items-center justify-center">
<div className="animate-pulse text-gray-500 font-mono text-sm">Redirecting to login...</div>
</div>
);
web/experience/src/app/courses/[id]/lessons/[lessonId]/page.tsx
+28 -28
View File
@@ -67,7 +67,7 @@ export default function LessonPlayerPage({ params }: { params: { id: string, les
fetchAll();
}, [params.id, params.lessonId, user]);
if (loading) return <div className="p-20 text-center animate-pulse text-gray-500 font-bold uppercase tracking-widest">Cargando Experiencia...</div>;
if (loading) return <div className="p-20 text-center animate-pulse text-gray-600 dark:text-gray-500 font-bold uppercase tracking-widest">Cargando Experiencia...</div>;
if (!lesson || !course) return <div className="p-20 text-center text-red-400">Contenido no encontrado.</div>;
const allLessons = course.modules.flatMap(m => m.lessons);
@@ -180,7 +180,7 @@ export default function LessonPlayerPage({ params }: { params: { id: string, les
case 'completed': return 'bg-green-500 shadow-[0_0_10px_rgba(34,197,94,0.5)]';
case 'in-progress': return 'bg-yellow-500 shadow-[0_0_10px_rgba(234,179,8,0.5)]';
case 'repeatable': return 'bg-red-500 shadow-[0_0_10px_rgba(239,68,68,0.5)]';
default: return 'bg-white/10';
default: return 'bg-black/10 dark:bg-white/10';
}
};
@@ -188,18 +188,18 @@ export default function LessonPlayerPage({ params }: { params: { id: string, les
<div className="flex h-[calc(100vh-64px)] overflow-hidden">
{/* Navigation Sidebar */}
<aside
className={`glass border-r border-white/5 transition-all duration-500 bg-black/40 flex flex-col ${sidebarOpen ? 'w-80' : 'w-0 overflow-hidden border-none'}`}
className={`glass border-r border-black/5 dark:border-white/5 transition-all duration-500 bg-black/5 dark:bg-black/40 flex flex-col ${sidebarOpen ? 'w-80' : 'w-0 overflow-hidden border-none'}`}
>
<div className="p-6 border-b border-white/5">
<h2 className="text-xs font-black uppercase tracking-widest text-blue-500 mb-1">Contenido del Curso</h2>
<p className="text-sm font-bold text-white truncate">{course.title}</p>
<div className="p-6 border-b border-black/5 dark:border-white/5">
<h2 className="text-xs font-black uppercase tracking-widest text-blue-600 dark:text-blue-500 mb-1">Contenido del Curso</h2>
<p className="text-sm font-bold text-gray-900 dark:text-white truncate">{course.title}</p>
</div>
<div className="flex-1 overflow-y-auto py-4 px-3 space-y-6">
{course.modules.map((module) => (
<div key={module.id} className="space-y-2">
<div className="flex items-center justify-between px-3 mb-2">
<h4 className="text-[10px] font-black uppercase tracking-widest text-gray-500">{module.title}</h4>
<h4 className="text-[10px] font-black uppercase tracking-widest text-gray-500 dark:text-gray-400">{module.title}</h4>
<div className={`w-1.5 h-1.5 rounded-full ${getStatusColor(getModuleStatus(module))}`} />
</div>
<div className="space-y-1">
@@ -224,14 +224,14 @@ export default function LessonPlayerPage({ params }: { params: { id: string, les
<div className="absolute top-4 left-4 z-10 flex gap-2">
<button
onClick={() => setSidebarOpen(!sidebarOpen)}
className="p-3 rounded-xl glass border-white/10 text-gray-400 hover:text-white transition-all bg-black/40"
className="p-3 rounded-xl glass border-black/10 dark:border-white/10 text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition-all bg-black/5 dark:bg-black/40"
title="Alternar Barra Lateral"
>
<Menu size={20} />
</button>
<button
onClick={handleToggleBookmark}
className={`p-3 rounded-xl glass border-white/10 transition-all bg-black/40 ${isBookmarked ? 'text-yellow-400' : 'text-gray-400 hover:text-white'}`}
className={`p-3 rounded-xl glass border-black/10 dark:border-white/10 transition-all bg-black/5 dark:bg-black/40 ${isBookmarked ? 'text-yellow-600 dark:text-yellow-400' : 'text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white'}`}
title={isBookmarked ? "Quitar Marcador" : "Guardar Marcador"}
>
<Bookmark size={20} fill={isBookmarked ? "currentColor" : "none"} />
@@ -242,7 +242,7 @@ export default function LessonPlayerPage({ params }: { params: { id: string, les
setTranscriptOpen(!transcriptOpen);
if (!transcriptOpen) setNotesOpen(false);
}}
className={`p-3 rounded-xl glass border-white/10 transition-all bg-black/40 ${transcriptOpen ? 'text-blue-400' : 'text-gray-400 hover:text-white'}`}
className={`p-3 rounded-xl glass border-black/10 dark:border-white/10 transition-all bg-black/5 dark:bg-black/40 ${transcriptOpen ? 'text-blue-600 dark:text-blue-400' : 'text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white'}`}
title="Alternar Transcripción"
>
<ListMusic size={20} />
@@ -253,7 +253,7 @@ export default function LessonPlayerPage({ params }: { params: { id: string, les
setNotesOpen(!notesOpen);
if (!notesOpen) setTranscriptOpen(false);
}}
className={`p-3 rounded-xl glass border-white/10 transition-all bg-black/40 ${notesOpen ? 'text-indigo-400' : 'text-gray-400 hover:text-white'}`}
className={`p-3 rounded-xl glass border-black/10 dark:border-white/10 transition-all bg-black/5 dark:bg-black/40 ${notesOpen ? 'text-indigo-600 dark:text-indigo-400' : 'text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white'}`}
title="Alternar Notas"
>
<StickyNote size={20} />
@@ -265,7 +265,7 @@ export default function LessonPlayerPage({ params }: { params: { id: string, les
<div className="max-w-4xl mx-auto space-y-20 pb-40">
<div className="space-y-4">
<div className="flex items-center gap-3">
<div className="flex items-center gap-2 text-[10px] font-black uppercase tracking-widest text-blue-400">
<div className="flex items-center gap-2 text-[10px] font-black uppercase tracking-widest text-blue-600 dark:text-blue-400">
<span>{lesson.content_type === 'activity' ? 'Actividad Interactiva' : 'Lección en Video'}</span>
</div>
<div className={`px-2 py-0.5 rounded-full text-[8px] font-black uppercase tracking-widest text-white ${getStatusColor(getLessonStatus(lesson))}`}>
@@ -275,7 +275,7 @@ export default function LessonPlayerPage({ params }: { params: { id: string, les
{getLessonStatus(lesson) === 'not-started' && "No Iniciada"}
</div>
</div>
<h1 className="text-4xl font-black tracking-tighter text-white">{lesson.title}</h1>
<h1 className="text-4xl font-black tracking-tighter text-gray-900 dark:text-white">{lesson.title}</h1>
</div>
{lesson.summary && (
@@ -448,7 +448,7 @@ export default function LessonPlayerPage({ params }: { params: { id: string, les
/>
);
default:
return <div className="p-4 bg-white/5 border border-white/10 rounded-xl text-xs font-bold text-gray-500 uppercase tracking-widest">Tipo de Bloque Desconocido: {block.type}</div>;
return <div className="p-4 bg-black/5 dark:bg-white/5 border border-black/10 dark:border-white/10 rounded-xl text-xs font-bold text-gray-600 dark:text-gray-500 uppercase tracking-widest">Tipo de Bloque Desconocido: {block.type}</div>;
}
};
@@ -460,14 +460,14 @@ export default function LessonPlayerPage({ params }: { params: { id: string, les
})}
</div>
) : (
<div className="py-20 text-center glass-card border-dashed border-white/10">
<p className="text-gray-500 font-bold uppercase tracking-widest">Actualmente, esta lección no tiene contenido.</p>
<div className="py-20 text-center glass-card border-dashed border-black/10 dark:border-white/10">
<p className="text-gray-600 dark:text-gray-500 font-bold uppercase tracking-widest">Actualmente, esta lección no tiene contenido.</p>
</div>
)
)}
{lesson.is_graded && (
<div className="pt-20 border-t border-white/5 animate-in fade-in slide-in-from-bottom-8 duration-1000">
<div className="pt-20 border-t border-black/5 dark:border-white/5 animate-in fade-in slide-in-from-bottom-8 duration-1000">
{userGrade && lesson.max_attempts && userGrade.attempts_count >= lesson.max_attempts ? null : (
<>
<button
@@ -492,7 +492,7 @@ export default function LessonPlayerPage({ params }: { params: { id: string, les
</span>
</button>
{lesson.max_attempts && (
<p className="mt-4 text-[10px] text-gray-500 font-bold uppercase tracking-widest">
<p className="mt-4 text-[10px] text-gray-500 dark:text-gray-400 font-bold uppercase tracking-widest">
Intento {userGrade ? userGrade.attempts_count : 0} de {lesson.max_attempts} usado
</p>
)}
@@ -505,13 +505,13 @@ export default function LessonPlayerPage({ params }: { params: { id: string, les
{/* Right Side Panels */}
{((hasTranscription && transcriptOpen) || notesOpen) && (
<aside className="w-[400px] border-l border-white/5 bg-black/20 flex flex-col animate-in slide-in-from-right duration-500">
<aside className="w-[400px] border-l border-black/5 dark:border-white/5 bg-black/[0.02] dark:bg-black/20 flex flex-col animate-in slide-in-from-right duration-500">
{/* Panel Tabs */}
<div className="flex border-b border-white/5">
<div className="flex border-b border-black/5 dark:border-white/5">
{hasTranscription && (
<button
onClick={() => setTranscriptOpen(true)}
className={`flex-1 py-3 text-[10px] font-black uppercase tracking-widest transition-all ${transcriptOpen ? 'text-blue-400 bg-white/5' : 'text-gray-500 hover:text-gray-300'}`}
className={`flex-1 py-3 text-[10px] font-black uppercase tracking-widest transition-all ${transcriptOpen ? 'text-blue-600 dark:text-blue-400 bg-black/5 dark:bg-white/5' : 'text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-300'}`}
>
Transcripción
</button>
@@ -521,7 +521,7 @@ export default function LessonPlayerPage({ params }: { params: { id: string, les
setNotesOpen(true);
if (hasTranscription) setTranscriptOpen(false);
}}
className={`flex-1 py-3 text-[10px] font-black uppercase tracking-widest transition-all ${notesOpen && (!transcriptOpen || !hasTranscription) ? 'text-indigo-400 bg-white/5' : 'text-gray-500 hover:text-gray-300'}`}
className={`flex-1 py-3 text-[10px] font-black uppercase tracking-widest transition-all ${notesOpen && (!transcriptOpen || !hasTranscription) ? 'text-indigo-600 dark:text-indigo-400 bg-black/5 dark:bg-white/5' : 'text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-300'}`}
>
Notas
</button>
@@ -545,15 +545,15 @@ export default function LessonPlayerPage({ params }: { params: { id: string, les
</div>
{/* Footer Controls */}
<footer className="h-20 glass border-t border-white/5 px-6 flex items-center justify-between bg-black/60 backdrop-blur-3xl shrink-0">
<footer className="h-20 glass border-t border-black/5 dark:border-white/5 px-6 flex items-center justify-between bg-white/60 dark:bg-black/60 backdrop-blur-3xl shrink-0">
{prevLesson ? (
<Link href={`/courses/${params.id}/lessons/${prevLesson.id}`} className="group flex items-center gap-3">
<div className="w-10 h-10 rounded-xl glass border-white/10 flex items-center justify-center group-hover:bg-white/5 transition-all text-gray-400 group-hover:text-white">
<div className="w-10 h-10 rounded-xl glass border-black/10 dark:border-white/10 flex items-center justify-center group-hover:bg-black/5 dark:group-hover:bg-white/5 transition-all text-gray-500 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white">
<ChevronLeft size={20} />
</div>
<div className="hidden sm:block">
<p className="text-[10px] font-black uppercase tracking-widest text-gray-500">Anterior</p>
<p className="text-xs font-bold text-gray-300 group-hover:text-white truncate max-w-[120px]">{prevLesson.title}</p>
<p className="text-[10px] font-black uppercase tracking-widest text-gray-400 dark:text-gray-500">Anterior</p>
<p className="text-xs font-bold text-gray-700 dark:text-gray-300 group-hover:text-gray-900 dark:group-hover:text-white truncate max-w-[120px]">{prevLesson.title}</p>
</div>
</Link>
) : <div />}
@@ -561,10 +561,10 @@ export default function LessonPlayerPage({ params }: { params: { id: string, les
<div className="hidden lg:flex items-center gap-2">
<div className="flex gap-1">
{allLessons.map((l, i) => (
<div key={l.id} className={`w-8 h-1 rounded-full ${i <= currentIndex ? 'bg-blue-500' : 'bg-white/10'}`} />
<div key={l.id} className={`w-8 h-1 rounded-full ${i <= currentIndex ? 'bg-blue-600 dark:bg-blue-500' : 'bg-black/10 dark:bg-white/10'}`} />
))}
</div>
<span className="text-[10px] font-black uppercase tracking-widest text-gray-500 ml-4">
<span className="text-[10px] font-black uppercase tracking-widest text-gray-400 dark:text-gray-500 ml-4">
{currentIndex + 1} OF {allLessons.length} COMPLETADO
</span>
</div>
web/experience/src/app/courses/[id]/page.tsx
+67 -67
View File
@@ -96,14 +96,14 @@ export default function CourseOutlinePage({ params }: { params: { id: string } }
<div className="h-6 w-1/3 bg-white/5 rounded-xl mb-12"></div>
<div className="space-y-6">
{[1, 2, 3].map(i => (
<div key={i} className="h-32 glass-card bg-white/5 border-white/5"></div>
<div key={i} className="h-32 glass-card bg-black/5 dark:bg-white/5 border-black/5 dark:border-white/5 animate-pulse"></div>
))}
</div>
</div>
);
}
if (!courseData) return <div className="text-center py-20 text-gray-500">Curso no encontrado.</div>;
if (!courseData) return <div className="text-center py-20 text-gray-600 dark:text-gray-500">Curso no encontrado.</div>;
const isLessonLocked = (lessonId: string) => {
if (!isEnrolled) return false;
@@ -124,7 +124,7 @@ export default function CourseOutlinePage({ params }: { params: { id: string } }
}
const grade = userGrades.find((g: UserGrade) => g.lesson_id === lessonId);
if (!grade) {
return <Circle size={18} className="text-white/20" />;
return <Circle size={18} className="text-black/10 dark:text-white/20" />;
}
if (isGraded) {
@@ -141,19 +141,19 @@ export default function CourseOutlinePage({ params }: { params: { id: string } }
}
}
return <CheckCircle2 size={18} className="text-white/40" />;
return <CheckCircle2 size={18} className="text-black/20 dark:text-white/40" />;
};
return (
<div className="max-w-4xl mx-auto px-6 py-20">
<div className="mb-16">
<div className="flex items-center gap-2 mb-6 text-blue-500 font-bold text-xs uppercase tracking-widest">
<Link href="/" className="hover:text-white transition-colors">Catálogo</Link>
<div className="flex items-center gap-2 mb-6 text-blue-600 dark:text-blue-500 font-bold text-xs uppercase tracking-widest">
<Link href="/" className="hover:text-gray-900 dark:hover:text-white transition-colors">Catálogo</Link>
<ChevronRight size={14} className="text-gray-600" />
<span>Detalles del Curso</span>
</div>
<h1 className="text-5xl font-black tracking-tighter mb-6">{courseData.title}</h1>
<p className="text-gray-400 text-lg leading-relaxed max-w-2xl mb-10">
<h1 className="text-5xl font-black tracking-tighter mb-6 text-gray-900 dark:text-white">{courseData.title}</h1>
<p className="text-gray-600 dark:text-gray-400 text-lg leading-relaxed max-w-2xl mb-10">
{courseData.description || "Domina los principios básicos y las técnicas avanzadas en este plan de estudios estructurado. Cada módulo está diseñado para proporcionar conocimientos prácticos y experiencia práctica."}
</p>
@@ -167,11 +167,11 @@ export default function CourseOutlinePage({ params }: { params: { id: string } }
</div>
{courseData.pacing_mode === 'instructor_led' && (courseData.start_date || courseData.end_date) && (
<div className="flex items-center gap-4 text-xs font-bold text-gray-500 uppercase tracking-widest">
<div className="flex items-center gap-4 text-xs font-bold text-gray-600 dark:text-gray-500 uppercase tracking-widest">
<Calendar size={14} />
<span>
{courseData.start_date ? new Date(courseData.start_date).toLocaleDateString() : 'Por Determinar'}
<span className="mx-2 text-gray-700">→</span>
<span className="mx-2 text-gray-300 dark:text-gray-700">→</span>
{courseData.end_date ? new Date(courseData.end_date).toLocaleDateString() : 'Por Determinar'}
</span>
</div>
@@ -183,13 +183,13 @@ export default function CourseOutlinePage({ params }: { params: { id: string } }
<span className="text-[10px] font-black uppercase tracking-[0.2em] text-gray-500 mb-4 block">Equipo docente</span>
<div className="flex flex-wrap gap-6">
{instructors.map((inst) => (
<div key={inst.id} className="flex items-center gap-3 glass border-white/5 px-4 py-2 rounded-2xl hover:bg-white/5 transition-all">
<div className="w-8 h-8 rounded-full bg-blue-500/20 flex items-center justify-center border border-blue-500/30 text-blue-400 font-bold text-xs">
<div key={inst.id} className="flex items-center gap-3 glass border-black/5 dark:border-white/5 px-4 py-2 rounded-2xl hover:bg-black/5 dark:hover:bg-white/5 transition-all">
<div className="w-8 h-8 rounded-full bg-blue-500/10 dark:bg-blue-500/20 flex items-center justify-center border border-blue-500/20 dark:border-blue-500/30 text-blue-600 dark:text-blue-400 font-bold text-xs">
{inst.full_name?.charAt(0) || inst.email?.charAt(0)}
</div>
<div>
<div className="text-xs font-bold text-gray-200">{inst.full_name}</div>
<div className="text-[8px] font-black uppercase tracking-widest text-blue-500/60">{inst.role === 'primary' ? 'Instructor principal' : inst.role}</div>
<div className="text-xs font-bold text-gray-700 dark:text-gray-200">{inst.full_name}</div>
<div className="text-[8px] font-black uppercase tracking-widest text-blue-600 dark:text-blue-500/60">{inst.role === 'primary' ? 'Instructor principal' : inst.role}</div>
</div>
</div>
))}
@@ -200,13 +200,13 @@ export default function CourseOutlinePage({ params }: { params: { id: string } }
<div className="flex items-center justify-between">
<div className="flex items-center gap-8">
<div className="flex flex-col">
<span className="text-[10px] font-black uppercase tracking-widest text-gray-600 mb-1">Módulos</span>
<span className="text-xl font-bold text-white">{courseData.modules.length}</span>
<span className="text-[10px] font-black uppercase tracking-widest text-gray-400 dark:text-gray-600 mb-1">Módulos</span>
<span className="text-xl font-bold text-gray-900 dark:text-white">{courseData.modules.length}</span>
</div>
<div className="w-px h-8 bg-white/10" />
<div className="w-px h-8 bg-black/10 dark:bg-white/10" />
<div className="flex flex-col">
<span className="text-[10px] font-black uppercase tracking-widest text-gray-600 mb-1">Lecciones Totales</span>
<span className="text-xl font-bold text-white">
<span className="text-[10px] font-black uppercase tracking-widest text-gray-400 dark:text-gray-600 mb-1">Lecciones Totales</span>
<span className="text-xl font-bold text-gray-900 dark:text-white">
{courseData.modules.reduce((acc, m) => acc + m.lessons.length, 0)}
</span>
</div>
@@ -248,45 +248,45 @@ export default function CourseOutlinePage({ params }: { params: { id: string } }
{(loadingAI || recommendations.length > 0) && (
<div className="mb-20">
<div className="flex items-center gap-3 mb-8">
<div className="w-10 h-10 rounded-xl glass border-purple-500/20 bg-purple-500/10 flex items-center justify-center">
<Sparkles size={18} className="text-purple-400" />
<div className="w-10 h-10 rounded-xl glass border-purple-500/10 dark:border-purple-500/20 bg-purple-500/5 dark:bg-purple-500/10 flex items-center justify-center">
<Sparkles size={18} className="text-purple-600 dark:text-purple-400" />
</div>
<div>
<h2 className="text-xl font-bold text-white tracking-tight">Tu Ruta de Aprendizaje IA</h2>
<p className="text-[10px] font-bold uppercase tracking-widest text-gray-500">Sugerencias personalizadas basadas en tu rendimiento</p>
<h2 className="text-xl font-bold text-gray-900 dark:text-white tracking-tight">Tu Ruta de Aprendizaje IA</h2>
<p className="text-[10px] font-bold uppercase tracking-widest text-gray-500 dark:text-gray-400">Sugerencias personalizadas basadas en tu rendimiento</p>
</div>
</div>
<div className="grid gap-4">
{loadingAI ? (
<div className="glass-card border-white/5 bg-white/5 animate-pulse p-8">
<div className="h-4 w-1/3 bg-white/10 rounded mb-4"></div>
<div className="h-3 w-2/3 bg-white/10 rounded"></div>
<div className="glass-card border-black/5 dark:border-white/5 bg-black/[0.02] dark:bg-white/5 animate-pulse p-8">
<div className="h-4 w-1/3 bg-black/10 dark:bg-white/10 rounded mb-4"></div>
<div className="h-3 w-2/3 bg-black/10 dark:bg-white/10 rounded"></div>
</div>
) : (
recommendations.map((rec: Recommendation, i: number) => (
<div key={i} className="glass-card border-white/5 hover:border-purple-500/30 transition-all p-6 group">
<div key={i} className="glass-card border-black/5 dark:border-white/5 hover:border-purple-600/30 dark:hover:border-purple-500/30 transition-all p-6 group">
<div className="flex flex-col md:flex-row md:items-center justify-between gap-6">
<div className="space-y-3">
<div className="flex items-center gap-3">
<div className={`px-2 py-0.5 rounded text-[9px] font-black uppercase tracking-widest ${rec.priority === 'high' ? 'bg-red-500/10 text-red-400 border border-red-500/20' :
rec.priority === 'medium' ? 'bg-yellow-500/10 text-yellow-400 border border-yellow-500/20' :
'bg-green-500/10 text-green-400 border border-green-500/20'
<div className={`px-2 py-0.5 rounded text-[9px] font-black uppercase tracking-widest ${rec.priority === 'high' ? 'bg-red-500/10 text-red-600 dark:text-red-400 border border-red-500/20' :
rec.priority === 'medium' ? 'bg-yellow-500/10 text-yellow-600 dark:text-yellow-400 border border-yellow-500/20' :
'bg-green-500/10 text-green-600 dark:text-green-400 border border-green-500/20'
}`}>
Prioridad {rec.priority}
</div>
{rec.priority === 'high' && <AlertTriangle size={12} className="text-red-400" />}
{rec.priority === 'high' && <AlertTriangle size={12} className="text-red-600 dark:text-red-400" />}
</div>
<h3 className="text-lg font-bold text-white">{rec.title}</h3>
<p className="text-sm text-gray-400 leading-relaxed max-w-2xl">{rec.description}</p>
<div className="bg-white/5 rounded-lg p-3 inline-block">
<p className="text-[10px] font-bold text-gray-500 uppercase tracking-widest mb-1 italic">¿Por qué?</p>
<p className="text-xs text-gray-300 font-medium">{rec.reason}</p>
<h3 className="text-lg font-bold text-gray-900 dark:text-white">{rec.title}</h3>
<p className="text-sm text-gray-600 dark:text-gray-400 leading-relaxed max-w-2xl">{rec.description}</p>
<div className="bg-black/5 dark:bg-white/5 rounded-lg p-3 inline-block">
<p className="text-[10px] font-bold text-gray-400 dark:text-gray-500 uppercase tracking-widest mb-1 italic">¿Por qué?</p>
<p className="text-xs text-gray-700 dark:text-gray-300 font-medium">{rec.reason}</p>
</div>
</div>
{rec.lesson_id && (
<Link href={`/courses/${params.id}/lessons/${rec.lesson_id}`}>
<button className="whitespace-nowrap px-6 py-3 rounded-xl bg-purple-500/10 hover:bg-purple-500/20 border border-purple-500/30 text-purple-400 font-bold text-[10px] uppercase tracking-widest flex items-center gap-2 group-hover:gap-4 transition-all">
<button className="whitespace-nowrap px-6 py-3 rounded-xl bg-purple-600/10 dark:bg-purple-500/10 hover:bg-purple-600/20 dark:hover:bg-purple-500/20 border border-purple-600/20 dark:border-purple-500/30 text-purple-600 dark:text-purple-400 font-bold text-[10px] uppercase tracking-widest flex items-center gap-2 group-hover:gap-4 transition-all">
Ir a la Lección <ArrowRight size={14} />
</button>
</Link>
@@ -303,25 +303,25 @@ export default function CourseOutlinePage({ params }: { params: { id: string } }
{meetings.length > 0 && (
<div className="mb-20">
<div className="flex items-center gap-3 mb-8">
<div className="w-10 h-10 rounded-xl glass border-blue-500/20 bg-blue-500/10 flex items-center justify-center">
<Video size={18} className="text-blue-400" />
<div className="w-10 h-10 rounded-xl glass border-blue-500/10 dark:border-blue-500/20 bg-blue-500/5 dark:bg-blue-500/10 flex items-center justify-center">
<Video size={18} className="text-blue-600 dark:text-blue-400" />
</div>
<div>
<h2 className="text-xl font-bold text-white tracking-tight">Sesiones en Vivo</h2>
<p className="text-[10px] font-bold uppercase tracking-widest text-gray-500">Únete a las clases sincrónicas programadas</p>
<h2 className="text-xl font-bold text-gray-900 dark:text-white tracking-tight">Sesiones en Vivo</h2>
<p className="text-[10px] font-bold uppercase tracking-widest text-gray-500 dark:text-gray-400">Únete a las clases sincrónicas programadas</p>
</div>
</div>
<div className="grid gap-3">
{meetings.map((m) => (
<div key={m.id} className="glass-card border-white/5 hover:border-blue-500/30 transition-all p-5 flex items-center justify-between">
<div key={m.id} className="glass-card border-black/5 dark:border-white/5 hover:border-blue-600/30 dark:hover:border-blue-500/30 transition-all p-5 flex items-center justify-between">
<div className="flex items-center gap-4">
<div className="w-10 h-10 rounded-lg bg-blue-500/10 flex items-center justify-center text-blue-400">
<div className="w-10 h-10 rounded-lg bg-blue-500/5 dark:bg-blue-500/10 flex items-center justify-center text-blue-600 dark:text-blue-400">
<Calendar size={18} />
</div>
<div>
<h3 className="font-bold text-sm">{m.title}</h3>
<p className="text-[10px] text-gray-500 uppercase mt-1">
<h3 className="font-bold text-sm text-gray-900 dark:text-gray-100">{m.title}</h3>
<p className="text-[10px] text-gray-500 dark:text-gray-400 uppercase mt-1">
{new Date(m.start_at).toLocaleString()} • {m.duration_minutes} min
</p>
</div>
@@ -349,10 +349,10 @@ export default function CourseOutlinePage({ params }: { params: { id: string } }
{courseData.modules.map((module: Module, idx: number) => (
<div key={module.id} className="relative">
<div className="flex items-center gap-4 mb-6">
<div className="w-10 h-10 rounded-xl glass border-blue-500/20 bg-blue-500/10 flex items-center justify-center">
<span className="text-blue-400 font-black text-xs">{idx + 1}</span>
<div className="w-10 h-10 rounded-xl glass border-blue-500/10 dark:border-blue-500/20 bg-blue-500/5 dark:bg-blue-500/10 flex items-center justify-center">
<span className="text-blue-600 dark:text-blue-400 font-black text-xs">{idx + 1}</span>
</div>
<h2 className="text-xl font-bold text-white tracking-tight">{module.title}</h2>
<h2 className="text-xl font-bold text-gray-900 dark:text-white tracking-tight">{module.title}</h2>
</div>
<div className="grid gap-3 pl-14">
@@ -361,42 +361,42 @@ export default function CourseOutlinePage({ params }: { params: { id: string } }
const isPreviewable = lesson.is_previewable;
return (isEnrolled || isPreviewable) ? (
locked ? (
<div key={lesson.id} className="glass-card !p-4 border-white/5 opacity-60 cursor-not-allowed">
<div key={lesson.id} className="glass-card !p-4 border-black/5 dark:border-white/5 opacity-60 cursor-not-allowed">
<div className="flex items-center justify-between">
<div className="flex items-center gap-4">
<div className="w-10 h-10 rounded-lg bg-white/5 flex items-center justify-center">
<Lock size={18} className="text-gray-600" />
<div className="w-10 h-10 rounded-lg bg-black/5 dark:bg-white/5 flex items-center justify-center">
<Lock size={18} className="text-gray-400 dark:text-gray-600" />
</div>
<div>
<h3 className="text-sm font-bold text-gray-400">{lesson.title}</h3>
<span className="text-[10px] font-bold uppercase tracking-widest text-gray-600">Bloqueado por Prerrequisitos</span>
<h3 className="text-sm font-bold text-gray-500 dark:text-gray-400">{lesson.title}</h3>
<span className="text-[10px] font-bold uppercase tracking-widest text-gray-400 dark:text-gray-600">Bloqueado por Prerrequisitos</span>
</div>
</div>
<div className="flex items-center gap-6">
<Lock size={18} className="text-gray-600" />
<Lock size={18} className="text-gray-400 dark:text-gray-600" />
</div>
</div>
</div>
) : (
<Link key={lesson.id} href={`/courses/${params.id}/lessons/${lesson.id}`}>
<div className="glass-card !p-4 group hover:bg-white/10 border-white/5 active:scale-[0.99] transition-all">
<div className="glass-card !p-4 group hover:bg-black/5 dark:hover:bg-white/10 border-black/5 dark:border-white/5 active:scale-[0.99] transition-all">
<div className="flex items-center justify-between">
<div className="flex items-center gap-4">
<div className="w-10 h-10 rounded-lg bg-white/5 flex items-center justify-center group-hover:bg-blue-500/20 transition-colors">
<div className="w-10 h-10 rounded-lg bg-black/5 dark:bg-white/5 flex items-center justify-center group-hover:bg-blue-600/10 dark:group-hover:bg-blue-500/20 transition-colors">
{lesson.content_type === 'video' ? (
<PlayCircle size={18} className={`${isPreviewable && !isEnrolled ? 'text-green-400' : 'text-gray-400'} group-hover:text-blue-400`} />
<PlayCircle size={18} className={`${isPreviewable && !isEnrolled ? 'text-green-600 dark:text-green-400' : 'text-gray-500 dark:text-gray-400'} group-hover:text-blue-600 dark:group-hover:text-blue-400`} />
) : (
<BookOpen size={18} className={`${isPreviewable && !isEnrolled ? 'text-green-400' : 'text-gray-400'} group-hover:text-blue-400`} />
<BookOpen size={18} className={`${isPreviewable && !isEnrolled ? 'text-green-600 dark:text-green-400' : 'text-gray-500 dark:text-gray-400'} group-hover:text-blue-600 dark:group-hover:text-blue-400`} />
)}
</div>
<div>
<div className="flex items-center gap-2">
<h3 className="text-sm font-bold text-gray-200 group-hover:text-white transition-colors">{lesson.title}</h3>
<h3 className="text-sm font-bold text-gray-700 dark:text-gray-200 group-hover:text-gray-900 dark:group-hover:text-white transition-colors">{lesson.title}</h3>
{isPreviewable && !isEnrolled && (
<span className="text-[8px] font-black uppercase px-1.5 py-0.5 bg-green-500/10 text-green-400 border border-green-500/20 rounded">Vista previa</span>
<span className="text-[8px] font-black uppercase px-1.5 py-0.5 bg-green-500/10 text-green-600 dark:text-green-400 border border-green-500/20 rounded">Vista previa</span>
)}
</div>
<span className="text-[10px] font-bold uppercase tracking-widest text-gray-500">
<span className="text-[10px] font-bold uppercase tracking-widest text-gray-500 dark:text-gray-400">
{lesson.content_type === 'activity' ? 'Actividad Interactiva' : 'Lección en Video'}
</span>
</div>
@@ -420,20 +420,20 @@ export default function CourseOutlinePage({ params }: { params: { id: string } }
</Link>
)
) : (
<div key={lesson.id} onClick={handleEnrollOrBuy} className="glass-card !p-4 group border-white/5 opacity-60 cursor-pointer hover:bg-white/5 transition-all">
<div key={lesson.id} onClick={handleEnrollOrBuy} className="glass-card !p-4 group border-black/5 dark:border-white/5 opacity-60 cursor-pointer hover:bg-black/5 dark:hover:bg-white/5 transition-all">
<div className="flex items-center justify-between">
<div className="flex items-center gap-4">
<div className="w-10 h-10 rounded-lg bg-white/5 flex items-center justify-center">
<Clock size={18} className="text-gray-600" />
<div className="w-10 h-10 rounded-lg bg-black/5 dark:bg-white/5 flex items-center justify-center">
<Clock size={18} className="text-gray-400 dark:text-gray-600" />
</div>
<div>
<h3 className="text-sm font-bold text-gray-500">{lesson.title}</h3>
<span className="text-[10px] font-bold uppercase tracking-widest text-gray-600 flex items-center gap-1">
<h3 className="text-sm font-bold text-gray-500 dark:text-gray-400">{lesson.title}</h3>
<span className="text-[10px] font-bold uppercase tracking-widest text-gray-400 dark:text-gray-600 flex items-center gap-1">
Contenido Protegido
</span>
</div>
</div>
<div className="flex items-center gap-2 text-gray-600 font-bold text-[10px] uppercase tracking-widest">
<div className="flex items-center gap-2 text-gray-400 dark:text-gray-600 font-bold text-[10px] uppercase tracking-widest">
<span>Bloqueado</span>
</div>
</div>
web/experience/src/app/globals.css
+21 -9
View File
@@ -3,9 +3,9 @@
@tailwind utilities;
:root {
--foreground-rgb: 255, 255, 255;
--background-start-rgb: 10, 10, 20;
--background-end-rgb: 0, 0, 0;
--background: 249, 250, 251;
--foreground: 17, 24, 39;
/* gray-900 */
/* Branding Defaults */
--primary-color: #3b82f6;
@@ -13,15 +13,27 @@
--accent-primary: var(--primary-color);
--accent-secondary: var(--secondary-color);
--glass-bg: rgba(255, 255, 255, 0.05);
/* Increased slightly for contrast */
--glass-border: rgba(255, 255, 255, 0.1);
--glass-bg: rgba(255, 255, 255, 0.8);
--glass-border: rgba(0, 0, 0, 0.1);
--glass-blur: blur(16px);
--body-bg: radial-gradient(circle at top left, #f3f4f6, #f9fafb);
}
.dark {
--background: 5, 5, 5;
--foreground: 229, 231, 235;
--glass-bg: rgba(255, 255, 255, 0.05);
--glass-border: rgba(255, 255, 255, 0.1);
--body-bg: radial-gradient(circle at top left, #1a1a2e, #000000);
}
body {
color: rgb(var(--foreground-rgb));
background: radial-gradient(circle at top left, #1a1a2e, #000000);
color: rgb(var(--foreground));
background: var(--body-bg);
background-attachment: fixed;
min-height: 100vh;
}
@@ -77,7 +89,7 @@ body {
}
.sidebar-link-inactive {
@apply text-gray-400 hover:text-white hover:bg-white/5;
@apply text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white hover:bg-black/5 dark:hover:bg-white/5;
}
/* Custom Scrollbar */
web/experience/src/app/layout.tsx
+1 -1
View File
@@ -24,7 +24,7 @@ export default function RootLayout({
}>) {
return (
<html lang="en">
<body className={`${inter.className} bg-white dark:bg-[#050505] text-gray-900 dark:text-[#e5e5e5] min-h-screen flex flex-col transition-colors duration-300`}>
<body className={`${inter.className} min-h-screen flex flex-col transition-colors duration-300`}>
<ThemeProvider>
<BrandingProvider>
<AuthProvider>
web/experience/src/app/page.tsx
+21 -21
View File
@@ -103,15 +103,15 @@ export default function CatalogPage() {
<Star size={14} className="fill-blue-500" />
<span>Currículo Premier</span>
</div>
<h1 className="text-4xl md:text-6xl font-black tracking-tighter leading-tight md:leading-none">
Explorar <span className="block sm:inline text-transparent bg-clip-text bg-gradient-to-r from-blue-400 to-indigo-600">Cursos</span>
<h1 className="text-4xl md:text-6xl font-black tracking-tighter leading-tight md:leading-none text-gray-900 dark:text-white">
Explorar <span className="block sm:inline text-transparent bg-clip-text bg-gradient-to-r from-blue-600 to-indigo-700 dark:from-blue-400 dark:to-indigo-600">Cursos</span>
</h1>
<p className="text-gray-500 font-medium max-w-xl text-base md:text-lg mx-auto md:mx-0">
<p className="text-gray-600 dark:text-gray-500 font-medium max-w-xl text-base md:text-lg mx-auto md:mx-0">
Domina las habilidades del futuro con nuestro contenido educativo de alta fidelidad.
</p>
</div>
{!user && (
<Link href="/auth/register" className="btn-premium !bg-white !text-black shadow-none !px-8 w-full sm:w-auto">
<Link href="/auth/register" className="btn-premium !bg-blue-600 dark:!bg-white !text-white dark:!text-black shadow-none !px-8 w-full sm:w-auto">
Comienza Gratis
</Link>
)}
@@ -120,21 +120,21 @@ export default function CatalogPage() {
{user && gamification && (
<div className="mb-16 grid grid-cols-1 lg:grid-cols-3 gap-8 animate-in fade-in slide-in-from-top-6 duration-700">
<div className="lg:col-span-2 space-y-8">
<div className="glass-card p-10 bg-gradient-to-br from-blue-600/20 via-indigo-700/10 to-transparent border-blue-500/20 rounded-3xl relative overflow-hidden group">
<div className="glass-card p-10 bg-gradient-to-br from-blue-600/10 dark:from-blue-600/20 via-indigo-700/5 dark:via-indigo-700/10 to-transparent border-blue-500/10 dark:border-blue-500/20 rounded-3xl relative overflow-hidden group">
<div className="relative z-10 flex flex-col md:flex-row md:items-center gap-10">
<div className="flex-shrink-0 relative">
<div className="w-24 h-24 rounded-3xl bg-blue-600 flex items-center justify-center shadow-2xl shadow-blue-500/40 rotate-3 group-hover:rotate-0 transition-transform duration-500">
<Zap className="text-white fill-white/20" size={48} />
</div>
<div className="absolute -bottom-2 -right-2 w-10 h-10 rounded-full bg-white text-black flex items-center justify-center font-black text-xs border-4 border-[#050505]">
<div className="absolute -bottom-2 -right-2 w-10 h-10 rounded-full bg-white dark:bg-black text-black dark:text-gray-400 flex items-center justify-center font-black text-xs border-4 border-gray-50 dark:border-[#050505]">
{gamification.level}
</div>
</div>
<div className="flex-1 space-y-4">
<div>
<div className="text-[10px] font-black uppercase tracking-[0.3em] text-blue-400 mb-1">Posición Actual</div>
<h2 className="text-3xl font-black text-white">Nivel {gamification.level} Pionero</h2>
<div className="text-[10px] font-black uppercase tracking-[0.3em] text-blue-600 dark:text-blue-400 mb-1">Posición Actual</div>
<h2 className="text-3xl font-black text-gray-900 dark:text-white">Nivel {gamification.level} Pionero</h2>
</div>
<div className="space-y-2">
@@ -146,9 +146,9 @@ export default function CatalogPage() {
{Math.floor(((gamification.points - Math.pow(gamification.level - 1, 2) * 100) / (Math.pow(gamification.level, 2) * 100 - Math.pow(gamification.level - 1, 2) * 100)) * 100)}% para el Nivel {gamification.level + 1}
</div>
</div>
<div className="h-2 w-full bg-white/5 rounded-full overflow-hidden border border-white/5">
<div className="h-2 w-full bg-black/5 dark:bg-white/5 rounded-full overflow-hidden border border-black/5 dark:border-white/5">
<div
className="h-full bg-gradient-to-r from-blue-500 to-indigo-500 shadow-[0_0_20px_rgba(59,130,246,0.5)] transition-all duration-1000"
className="h-full bg-gradient-to-r from-blue-500 to-indigo-500 shadow-[0_0_20px_rgba(59,130,246,0.3)] dark:shadow-[0_0_20px_rgba(59,130,246,0.5)] transition-all duration-1000"
style={{ width: `${Math.min(100, Math.max(0, ((gamification.points - Math.pow(gamification.level - 1, 2) * 100) / (Math.pow(gamification.level, 2) * 100 - Math.pow(gamification.level - 1, 2) * 100)) * 100))}%` }}
></div>
</div>
@@ -160,7 +160,7 @@ export default function CatalogPage() {
<div className="absolute -bottom-20 -right-20 w-64 h-64 bg-blue-500/10 blur-[120px] rounded-full pointer-events-none group-hover:bg-blue-500/20 transition-colors duration-500"></div>
</div>
<div className="glass-card p-8 bg-white/[0.01] border-white/5 rounded-3xl">
<div className="glass-card p-8 bg-black/[0.01] dark:bg-white/[0.01] border-black/5 dark:border-white/5 rounded-3xl">
<h3 className="text-xs font-black uppercase tracking-widest text-gray-500 mb-6 flex items-center gap-2">
<CheckCircle2 size={14} /> Mis Insignias
</h3>
@@ -201,12 +201,12 @@ export default function CatalogPage() {
{lesson.important_date_type || 'Actividad'}
</div>
<div className="text-right">
<div className="text-xs font-black text-white">{new Date(lesson.due_date!).toLocaleDateString()}</div>
<div className="text-[8px] font-bold text-gray-600 uppercase tracking-widest">Vencimiento</div>
<div className="text-xs font-black text-gray-900 dark:text-white">{new Date(lesson.due_date!).toLocaleDateString()}</div>
<div className="text-[8px] font-bold text-gray-400 dark:text-gray-600 uppercase tracking-widest">Vencimiento</div>
</div>
</div>
<h4 className="font-bold text-sm text-gray-200 mb-1 group-hover:text-white transition-colors line-clamp-1">{lesson.title}</h4>
<p className="text-[10px] text-gray-500 font-bold uppercase tracking-widest">{courseTitle}</p>
<h4 className="font-bold text-sm text-gray-700 dark:text-gray-200 mb-1 group-hover:text-blue-600 dark:group-hover:text-white transition-colors line-clamp-1">{lesson.title}</h4>
<p className="text-[10px] text-gray-400 dark:text-gray-500 font-bold uppercase tracking-widest">{courseTitle}</p>
</div>
</Link>
))}
@@ -215,8 +215,8 @@ export default function CatalogPage() {
)}
{courses.length === 0 ? (
<div className="py-20 text-center glass-card border-dashed border-white/10 rounded-3xl bg-white/[0.01]">
<p className="text-gray-500 font-bold uppercase tracking-widest">Aún no se han publicado cursos.</p>
<div className="py-20 text-center glass-card border-dashed border-black/10 dark:border-white/10 rounded-3xl bg-black/[0.01] dark:bg-white/[0.01]">
<p className="text-gray-500 dark:text-gray-400 font-bold uppercase tracking-widest">Aún no se han publicado cursos.</p>
</div>
) : (
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
@@ -224,7 +224,7 @@ export default function CatalogPage() {
const isEnrolled = enrollments.includes(course.id);
return (
<div key={course.id} className="glass-card group relative overflow-hidden h-full flex flex-col p-8 border-white/5 bg-white/[0.02] hover:bg-white/[0.04] transition-all duration-500 rounded-3xl">
<div key={course.id} className="glass-card group relative overflow-hidden h-full flex flex-col p-8 border-black/5 dark:border-white/5 bg-black/[0.01] dark:bg-white/[0.02] hover:bg-black/[0.03] dark:hover:bg-white/[0.04] transition-all duration-500 rounded-3xl">
<div className="mb-8 flex items-start justify-between">
<div className="w-14 h-14 rounded-2xl bg-gradient-to-br from-blue-600 to-indigo-700 flex items-center justify-center shadow-2xl shadow-blue-500/20 group-hover:scale-110 transition-transform duration-500">
<Rocket size={24} className="text-white fill-white/10" />
@@ -236,17 +236,17 @@ export default function CatalogPage() {
)}
</div>
<h2 className="text-2xl font-black text-white mb-4 leading-tight group-hover:text-blue-400 transition-colors">
<h2 className="text-2xl font-black text-gray-900 dark:text-white mb-4 leading-tight group-hover:text-blue-600 dark:group-hover:text-blue-400 transition-colors">
{course.title}
</h2>
<div className="flex-1">
<p className="text-gray-500 text-sm font-medium line-clamp-3 mb-10 leading-relaxed">
<p className="text-gray-600 dark:text-gray-500 text-sm font-medium line-clamp-3 mb-10 leading-relaxed">
{course.description || "Currículo detallado que cubre desde los principios fundamentales hasta el dominio avanzado, elaborado por veteranos de la industria."}
</p>
</div>
<div className="pt-8 border-t border-white/5 flex items-center justify-between mt-auto">
<div className="pt-8 border-t border-black/5 dark:border-white/5 flex items-center justify-between mt-auto">
{isEnrolled ? (
<Link href={`/courses/${course.id}`} className="btn-premium w-full !bg-blue-600/10 !text-blue-400 border border-blue-500/20 hover:!bg-blue-600/20 !shadow-none gap-2">
Continuar Aprendiendo <ArrowRight size={16} />
web/experience/src/app/profile/[id]/page.tsx
+2 -2
View File
@@ -39,7 +39,7 @@ export default function StudentPortfolioPage() {
if (!profile) return null;
return (
<div className="min-h-screen bg-[#050505] text-white selection:bg-blue-500/30">
<div className="min-h-screen bg-transparent text-gray-900 dark:text-white selection:bg-blue-500/30 transition-colors duration-300">
{/* Hero Section / Profile Header */}
<div className="relative h-64 bg-gradient-to-r from-blue-900/30 to-purple-900/30 border-b border-white/5">
<div className="absolute inset-0 bg-[url('/grid.svg')] opacity-20" />
@@ -47,7 +47,7 @@ export default function StudentPortfolioPage() {
<div className="flex items-end gap-6">
<div className="relative group">
<div className="absolute -inset-1 bg-gradient-to-r from-blue-600 to-purple-600 rounded-2xl blur opacity-30 group-hover:opacity-60 transition duration-1000"></div>
<div className="relative w-32 h-32 rounded-2xl bg-black border-2 border-white/10 overflow-hidden shadow-2xl">
<div className="relative w-32 h-32 rounded-2xl bg-black/5 dark:bg-black border-2 border-black/10 dark:border-white/10 overflow-hidden shadow-2xl">
{profile.avatar_url ? (
<img src={profile.avatar_url} alt={profile.full_name} className="w-full h-full object-cover" />
) : (
web/experience/src/app/profile/page.tsx
+1 -1
View File
@@ -204,7 +204,7 @@ export default function ProfilePage() {
<Award size={24} className="text-gray-600 group-hover:text-yellow-500 transition-colors" />
)}
</div>
<div className="absolute bottom-full left-1/2 -translate-x-1/2 mb-2 p-2 bg-black border border-white/10 rounded-lg text-[10px] font-bold text-white whitespace-nowrap opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none z-10">
<div className="absolute bottom-full left-1/2 -translate-x-1/2 mb-2 p-2 bg-gray-900 dark:bg-black border border-black/10 dark:border-white/10 rounded-lg text-[10px] font-bold text-white whitespace-nowrap opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none z-10">
{badge.name}
</div>
</div>
web/experience/src/components/AITutor.tsx
+15 -15
View File
@@ -73,27 +73,27 @@ export default function AITutor({ lessonId }: { lessonId: string }) {
return (
<div
className="fixed bottom-24 right-6 w-80 md:w-96 h-[500px] glass bg-black/80 backdrop-blur-2xl border border-white/10 rounded-3xl shadow-2xl flex flex-col z-[200] animate-in slide-in-from-bottom-6 duration-500 overflow-hidden"
className="fixed bottom-24 right-6 w-80 md:w-96 h-[500px] glass bg-white/95 dark:bg-black/80 backdrop-blur-2xl border border-black/5 dark:border-white/10 rounded-3xl shadow-2xl flex flex-col z-[200] animate-in slide-in-from-bottom-6 duration-500 overflow-hidden"
role="dialog"
aria-label="Tutor de IA"
>
{/* Header */}
<div className="p-4 border-b border-white/5 bg-blue-600/10 flex items-center justify-between">
<div className="p-4 border-b border-black/5 dark:border-white/5 bg-blue-600/5 dark:bg-blue-600/10 flex items-center justify-between">
<div className="flex items-center gap-3" aria-hidden="true">
<div className="w-10 h-10 rounded-xl bg-blue-500 flex items-center justify-center shadow-lg shadow-blue-500/20">
<div className="w-10 h-10 rounded-xl bg-blue-600 dark:bg-blue-500 flex items-center justify-center shadow-lg shadow-blue-500/20">
<Bot className="w-6 h-6 text-white" />
</div>
<div>
<h3 className="text-sm font-black text-white uppercase tracking-widest">Tutor de IA</h3>
<h3 className="text-sm font-black text-gray-900 dark:text-white uppercase tracking-widest">Tutor de IA</h3>
<div className="flex items-center gap-1.5">
<span className="w-1.5 h-1.5 bg-green-500 rounded-full" />
<span className="text-[10px] font-bold text-gray-400 uppercase tracking-tighter">En Línea</span>
<span className="text-[10px] font-bold text-gray-500 dark:text-gray-400 uppercase tracking-tighter">En Línea</span>
</div>
</div>
</div>
<button
onClick={() => setIsOpen(false)}
className="p-2 hover:bg-white/5 rounded-lg text-gray-400 hover:text-white transition-colors"
className="p-2 hover:bg-black/5 dark:hover:bg-white/5 rounded-lg text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition-colors"
aria-label="Cerrar Tutor de IA"
>
<X size={20} />
@@ -113,14 +113,14 @@ export default function AITutor({ lessonId }: { lessonId: string }) {
className={`flex ${msg.role === 'user' ? 'justify-end' : 'justify-start'}`}
>
<div className={`flex gap-2 max-w-[85%] ${msg.role === 'user' ? 'flex-row-reverse' : 'flex-row'}`}>
<div className={`shrink-0 w-8 h-8 rounded-lg flex items-center justify-center ${msg.role === 'user' ? 'bg-white/5' : 'bg-blue-600/20 text-blue-400'}`} aria-hidden="true">
<div className={`shrink-0 w-8 h-8 rounded-lg flex items-center justify-center ${msg.role === 'user' ? 'bg-black/5 dark:bg-white/5' : 'bg-blue-600/20 text-blue-600 dark:text-blue-400'}`} aria-hidden="true">
{msg.role === 'user' ? <User size={16} /> : <Bot size={16} />}
</div>
<div className={`p-3 rounded-2xl text-xs font-medium leading-relaxed ${msg.role === 'user'
? 'bg-blue-600 text-white rounded-tr-none'
: 'bg-white/5 text-gray-200 border border-white/5 rounded-tl-none'
: 'bg-black/5 dark:bg-white/5 text-gray-800 dark:text-gray-200 border border-black/5 dark:border-white/5 rounded-tl-none'
}`}
aria-label={msg.role === 'user' ? 'Tú dijiste' : 'El tutor dijo'}
aria-label={msg.role === 'user' ? 'Tú dijeste' : 'El tutor dijo'}
>
{msg.content}
</div>
@@ -130,10 +130,10 @@ export default function AITutor({ lessonId }: { lessonId: string }) {
{isLoading && (
<li className="flex justify-start animate-in fade-in duration-300" aria-busy="true">
<div className="flex gap-2 max-w-[85%]">
<div className="shrink-0 w-8 h-8 rounded-lg bg-blue-600/20 text-blue-400 flex items-center justify-center" aria-hidden="true">
<div className="shrink-0 w-8 h-8 rounded-lg bg-blue-600/20 text-blue-600 dark:text-blue-400 flex items-center justify-center" aria-hidden="true">
<Bot size={16} />
</div>
<div className="bg-white/5 text-gray-400 border border-white/5 p-3 rounded-2xl rounded-tl-none flex items-center gap-2">
<div className="bg-black/5 dark:bg-white/5 text-gray-500 dark:text-gray-400 border border-black/5 dark:border-white/5 p-3 rounded-2xl rounded-tl-none flex items-center gap-2">
<Loader2 className="w-3 h-3 animate-spin" />
<span className="text-[10px] font-bold uppercase tracking-widest">El tutor está pensando...</span>
</div>
@@ -143,7 +143,7 @@ export default function AITutor({ lessonId }: { lessonId: string }) {
</ul>
{/* Input */}
<div className="p-4 border-t border-white/5 bg-black/40">
<div className="p-4 border-t border-black/5 dark:border-white/5 bg-black/[0.02] dark:bg-black/40">
<div className="relative">
<input
type="text"
@@ -152,18 +152,18 @@ export default function AITutor({ lessonId }: { lessonId: string }) {
onKeyDown={(e) => e.key === 'Enter' && handleSend()}
placeholder="Escribe tu duda aquí..."
aria-label="Escribe tu duda para el tutor"
className="w-full bg-white/5 border border-white/10 rounded-xl py-3 px-4 pr-12 text-xs font-medium focus:outline-none focus:border-blue-500/50 transition-colors placeholder:text-gray-600"
className="w-full bg-black/5 dark:bg-white/5 border border-black/10 dark:border-white/10 rounded-xl py-3 px-4 pr-12 text-xs font-medium focus:outline-none focus:border-blue-600/50 dark:focus:border-blue-500/50 transition-colors placeholder:text-gray-400 dark:placeholder:text-gray-600 text-gray-900 dark:text-gray-100"
/>
<button
onClick={handleSend}
disabled={isLoading || !input.trim()}
className="absolute right-2 top-1.5 p-1.5 bg-blue-600 text-white rounded-lg disabled:opacity-50 disabled:bg-gray-600 transition-all hover:bg-blue-500"
className="absolute right-2 top-1.5 p-1.5 bg-blue-600 text-white rounded-lg disabled:opacity-50 disabled:bg-gray-400 dark:disabled:bg-gray-600 transition-all hover:bg-blue-500"
aria-label="Enviar mensaje"
>
<Send size={16} aria-hidden="true" />
</button>
</div>
<p className="mt-2 text-[9px] text-gray-600 font-bold uppercase tracking-widest text-center">
<p className="mt-2 text-[9px] text-gray-500 dark:text-gray-600 font-bold uppercase tracking-widest text-center">
IA entrenada con el contenido de esta lección
</p>
</div>
web/experience/src/components/AppHeader.tsx
+13 -13
View File
@@ -23,7 +23,7 @@ export default function AppHeader() {
const platformName = branding?.platform_name || branding?.name || 'OpenCCB';
return (
<header className="h-16 glass sticky top-0 z-[100] px-4 md:px-6 flex items-center justify-between backdrop-blur-xl bg-black/40 border-b border-white/5">
<header className="h-16 glass sticky top-0 z-[100] px-4 md:px-6 flex items-center justify-between backdrop-blur-xl bg-gray-50/70 dark:bg-black/40 border-b border-black/5 dark:border-white/5">
<Link href="/" className="flex items-center gap-2 md:gap-5 group" aria-label={`${platformName} - Dashboard`}>
<div className={`rounded-lg md:rounded-xl bg-blue-600 flex items-center justify-center font-black text-white shadow-lg shadow-blue-500/20 group-hover:scale-105 transition-all overflow-hidden relative border border-white/5 ${branding?.logo_variant === 'wide' ? 'w-36 h-9 md:w-56 md:h-12 px-2 bg-white' : 'w-8 h-8 md:w-12 md:h-12'}`}>
{branding?.logo_url ? (
@@ -36,27 +36,27 @@ export default function AppHeader() {
</div>
{branding?.logo_variant !== 'wide' && (
<div className="flex flex-col -gap-1" aria-hidden="true">
<span className="font-black text-base md:text-xl tracking-tighter text-white leading-none">
<span className="font-black text-base md:text-xl tracking-tighter text-gray-900 dark:text-white leading-none">
{platformName.toUpperCase()}
</span>
<span className="text-[8px] md:text-[10px] font-black tracking-widest text-blue-500 uppercase">EXPERIENCIA</span>
<span className="text-[8px] md:text-[10px] font-black tracking-widest text-blue-600 dark:text-blue-500 uppercase">EXPERIENCIA</span>
</div>
)}
</Link>
<div className="flex items-center gap-4">
<nav className="hidden md:flex items-center gap-8 mr-4" aria-label="Navegación principal">
<Link href="/" className="text-[10px] font-black uppercase tracking-[0.2em] text-gray-400 hover:text-white transition-colors">
<Link href="/" className="text-[10px] font-black uppercase tracking-[0.2em] text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition-colors">
{t('nav.catalog')}
</Link>
<Link href="/my-learning" className="text-[10px] font-black uppercase tracking-[0.2em] text-gray-400 hover:text-white transition-colors">
<Link href="/my-learning" className="text-[10px] font-black uppercase tracking-[0.2em] text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition-colors">
{t('nav.myLearning')}
</Link>
<Link href="/bookmarks" className="text-[10px] font-black uppercase tracking-[0.2em] text-gray-400 hover:text-white transition-colors">
<Link href="/bookmarks" className="text-[10px] font-black uppercase tracking-[0.2em] text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition-colors">
{t('nav.bookmarks')}
</Link>
{user && (
<Link href={`/profile/${user.id}`} className="text-[10px] font-black uppercase tracking-[0.2em] text-blue-400 hover:text-blue-300 transition-colors">
<Link href={`/profile/${user.id}`} className="text-[10px] font-black uppercase tracking-[0.2em] text-blue-600 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300 transition-colors">
MI PORTAFOLIO
</Link>
)}
@@ -74,9 +74,9 @@ export default function AppHeader() {
aria-label={t('nav.selectLanguage') || 'Select Language'}
className="bg-transparent text-[10px] font-black uppercase tracking-widest text-gray-500 hover:text-white transition-colors focus:outline-none cursor-pointer"
>
<option value="en" className="bg-[#0f1115]">EN</option>
<option value="es" className="bg-[#0f1115]">ES</option>
<option value="pt" className="bg-[#0f1115]">PT</option>
<option value="en" className="bg-white dark:bg-[#0f1115]">EN</option>
<option value="es" className="bg-white dark:bg-[#0f1115]">ES</option>
<option value="pt" className="bg-white dark:bg-[#0f1115]">PT</option>
</select>
</div>
@@ -183,9 +183,9 @@ export default function AppHeader() {
aria-label={t('nav.selectLanguage') || 'Select Language'}
className="bg-transparent text-xs font-bold uppercase tracking-widest text-gray-300 focus:outline-none"
>
<option value="en" className="bg-[#0f1115]">English</option>
<option value="es" className="bg-[#0f1115]">Español</option>
<option value="pt" className="bg-[#0f1115]">Português</option>
<option value="en" className="bg-white dark:bg-[#0f1115]">English</option>
<option value="es" className="bg-white dark:bg-[#0f1115]">Español</option>
<option value="pt" className="bg-white dark:bg-[#0f1115]">Português</option>
</select>
</div>
<button
web/experience/src/components/AuthGuard.tsx
+1 -1
View File
@@ -23,7 +23,7 @@ export default function AuthGuard({ children }: { children: React.ReactNode }) {
if (loading) {
return (
<div className="min-h-screen bg-[#050505] flex items-center justify-center">
<div className="min-h-screen bg-transparent flex items-center justify-center">
<div className="w-12 h-12 border-4 border-indigo-500/20 border-t-indigo-500 rounded-full animate-spin"></div>
</div>
);
web/experience/src/components/InteractiveTranscript.tsx
+14 -14
View File
@@ -47,24 +47,24 @@ export default function InteractiveTranscript({ transcription, currentTime, onSe
};
return (
<div className="flex flex-col h-full glass-card overflow-hidden border-white/5 bg-black/20">
<div className="p-6 border-b border-white/5 flex items-center justify-between bg-white/5">
<div className="flex flex-col h-full glass-card overflow-hidden border-black/5 dark:border-white/5 bg-black/[0.02] dark:bg-black/20">
<div className="p-6 border-b border-black/5 dark:border-white/5 flex items-center justify-between bg-black/[0.02] dark:bg-white/5">
<div className="flex items-center gap-3">
<Clock className="w-4 h-4 text-blue-400" />
<h3 className="text-[10px] font-black uppercase tracking-[0.2em] text-gray-400">Transcripción</h3>
</div>
<div className="flex bg-black/40 rounded-lg p-1 border border-white/5">
<div className="flex bg-white/40 dark:bg-black/40 rounded-lg p-1 border border-black/5 dark:border-white/5">
<button
onClick={() => setLang('en')}
aria-pressed={lang === 'en'}
className={`px-3 py-1 text-[10px] font-black rounded-md transition-all ${lang === 'en' ? 'bg-blue-600 text-white' : 'text-gray-500 hover:text-white'}`}
className={`px-3 py-1 text-[10px] font-black rounded-md transition-all ${lang === 'en' ? 'bg-blue-600 text-white' : 'text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white'}`}
>
EN
</button>
<button
onClick={() => setLang('es')}
aria-pressed={lang === 'es'}
className={`px-3 py-1 text-[10px] font-black rounded-md transition-all ${lang === 'es' ? 'bg-blue-600 text-white' : 'text-gray-500 hover:text-white'}`}
className={`px-3 py-1 text-[10px] font-black rounded-md transition-all ${lang === 'es' ? 'bg-blue-600 text-white' : 'text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white'}`}
>
ES
</button>
@@ -81,7 +81,7 @@ export default function InteractiveTranscript({ transcription, currentTime, onSe
{cues.length === 0 ? (
<div className="flex flex-col items-center justify-center h-full text-center p-8">
<span className="text-4xl mb-4">🤐</span>
<p className="text-xs text-gray-500 uppercase tracking-widest font-bold">No hay transcripción disponible</p>
<p className="text-xs text-gray-600 dark:text-gray-500 uppercase tracking-widest font-bold">No hay transcripción disponible</p>
</div>
) : (
cues.map((cue, index) => {
@@ -104,12 +104,12 @@ export default function InteractiveTranscript({ transcription, currentTime, onSe
}
}}
className={`group cursor-pointer p-4 rounded-2xl transition-all border ${active
? 'bg-blue-500/10 border-blue-500/30 text-white translate-x-1'
: 'bg-white/5 border-transparent text-gray-400 hover:bg-white/10 hover:border-white/10'
? 'bg-blue-600/10 dark:bg-blue-500/10 border-blue-600/20 dark:border-blue-500/30 text-gray-900 dark:text-white translate-x-1'
: 'bg-black/5 dark:bg-white/5 border-transparent text-gray-600 dark:text-gray-400 hover:bg-black/10 dark:hover:bg-white/10 hover:border-black/5 dark:hover:border-white/10'
}`}
>
<div className="flex items-start gap-4">
<span className={`text-[10px] font-mono mt-1 ${active ? 'text-blue-400' : 'text-gray-600'}`} aria-hidden="true">
<span className={`text-[10px] font-mono mt-1 ${active ? 'text-blue-600 dark:text-blue-400' : 'text-gray-400 dark:text-gray-600'}`} aria-hidden="true">
{formatTime(cue.start)}
</span>
<p className={`text-sm leading-relaxed ${active ? 'font-medium' : ''}`}>
@@ -122,17 +122,17 @@ export default function InteractiveTranscript({ transcription, currentTime, onSe
)}
{lang === 'es' && transcription.es && cues.length > 0 && (
<div className="mt-8 pt-8 border-t border-white/10">
<h4 className="text-[10px] font-black uppercase tracking-widest text-blue-400 mb-4">Traducción Completa (Beta)</h4>
<p className="text-sm text-gray-400 leading-relaxed italic">
<div className="mt-8 pt-8 border-t border-black/5 dark:border-white/10">
<h4 className="text-[10px] font-black uppercase tracking-widest text-blue-600 dark:text-blue-400 mb-4">Traducción Completa (Beta)</h4>
<p className="text-sm text-gray-600 dark:text-gray-400 leading-relaxed italic">
{transcription.es}
</p>
</div>
)}
</div>
<div className="p-4 bg-white/5 border-t border-white/5 flex items-center justify-between">
<span className="text-[8px] font-bold text-gray-500 uppercase tracking-widest">Haz clic para saltar al tiempo</span>
<div className="p-4 bg-black/[0.02] dark:bg-white/5 border-t border-black/5 dark:border-white/5 flex items-center justify-between">
<span className="text-[8px] font-bold text-gray-600 dark:text-gray-500 uppercase tracking-widest">Haz clic para saltar al tiempo</span>
<div className="flex gap-1">
<div className="w-1 h-1 rounded-full bg-blue-500 animate-pulse"></div>
<div className="w-1 h-1 rounded-full bg-blue-500/50"></div>
web/experience/src/components/StudentNotes.tsx
+7 -7
View File
@@ -63,7 +63,7 @@ export default function StudentNotes({ lessonId }: StudentNotesProps) {
if (loading) {
return (
<div className="flex flex-col items-center justify-center p-8 text-gray-500">
<div className="flex flex-col items-center justify-center p-8 text-gray-600 dark:text-gray-500">
<Loader2 className="w-6 h-6 animate-spin mb-2" />
<span className="text-xs font-bold uppercase tracking-widest">Cargando tus notas...</span>
</div>
@@ -71,11 +71,11 @@ export default function StudentNotes({ lessonId }: StudentNotesProps) {
}
return (
<div className="glass-card flex flex-col h-full bg-white/[0.02] border-white/5 overflow-hidden rounded-2xl">
<div className="p-4 border-b border-white/5 flex items-center justify-between bg-white/[0.03]">
<div className="glass-card flex flex-col h-full bg-black/[0.01] dark:bg-white/[0.02] border-black/5 dark:border-white/5 overflow-hidden rounded-2xl">
<div className="p-4 border-b border-black/5 dark:border-white/5 flex items-center justify-between bg-black/[0.02] dark:bg-white/[0.03]">
<div className="flex items-center gap-2">
<StickyNote size={18} className="text-indigo-400" />
<h3 className="text-sm font-black uppercase tracking-widest text-white">Notas Personales</h3>
<StickyNote size={18} className="text-indigo-600 dark:text-indigo-400" />
<h3 className="text-sm font-black uppercase tracking-widest text-gray-900 dark:text-white">Notas Personales</h3>
</div>
<div className="flex items-center gap-2">
{saving ? (
@@ -98,10 +98,10 @@ export default function StudentNotes({ lessonId }: StudentNotesProps) {
value={note}
onChange={handleChange}
placeholder="Escribe tus apuntes aquí... Se guardan automáticamente."
className="flex-1 w-full p-6 bg-transparent text-gray-200 text-sm leading-relaxed focus:outline-none resize-none placeholder:text-gray-600 custom-scrollbar"
className="flex-1 w-full p-6 bg-transparent text-gray-800 dark:text-gray-200 text-sm leading-relaxed focus:outline-none resize-none placeholder:text-gray-400 dark:placeholder:text-gray-600 custom-scrollbar"
/>
<div className="p-3 bg-white/[0.01] border-t border-white/5 text-[10px] text-gray-500 font-medium text-center italic">
<div className="p-3 bg-black/[0.01] dark:bg-white/[0.01] border-t border-black/5 dark:border-white/5 text-[10px] text-gray-500 font-medium text-center italic">
Solo tú puedes ver estas notas.
</div>
</div>
web/experience/src/components/blocks/AudioResponsePlayer.tsx
+25 -25
View File
@@ -177,18 +177,18 @@ export default function AudioResponsePlayer({
return (
<div className="space-y-6" id={id}>
<div className="p-8 glass border-white/5 rounded-3xl space-y-6">
<div className="p-8 glass border-black/5 dark:border-white/5 rounded-3xl space-y-6 bg-black/[0.02] dark:bg-black/20">
<div className="flex items-start gap-4">
<div className="p-3 bg-purple-500/20 rounded-xl">
<Mic className="w-6 h-6 text-purple-400" />
<div className="p-3 bg-purple-600/10 dark:bg-purple-500/20 rounded-xl">
<Mic className="w-6 h-6 text-purple-600 dark:text-purple-400" />
</div>
<div className="flex-1">
<h3 id={`audio-prompt-${id}`} className="text-xl font-bold text-gray-100">{prompt}</h3>
<h3 id={`audio-prompt-${id}`} className="text-xl font-bold text-gray-900 dark:text-gray-100">{prompt}</h3>
{keywords.length > 0 && !submitted && (
<div className="flex flex-wrap gap-2 mt-3">
<span className="text-xs text-gray-500 uppercase tracking-wider">Expected topics:</span>
<span className="text-xs text-gray-500 dark:text-gray-500 uppercase tracking-wider">Expected topics:</span>
{keywords.map((kw, i) => (
<span key={i} className="px-2 py-1 bg-purple-500/10 border border-purple-500/20 rounded text-xs text-purple-300">
<span key={i} className="px-2 py-1 bg-purple-600/10 dark:bg-purple-500/10 border border-purple-600/20 dark:border-purple-500/20 rounded text-xs text-purple-700 dark:text-purple-300">
{kw}
</span>
))}
@@ -222,9 +222,9 @@ export default function AudioResponsePlayer({
aria-label={`Recording time: ${formatTime(recordingTime)}`}
>
<div className="w-3 h-3 bg-red-500 rounded-full animate-pulse" aria-hidden="true" />
<span className="font-mono text-xl font-bold text-red-400">{formatTime(recordingTime)}</span>
<span className="font-mono text-xl font-bold text-red-600 dark:text-red-400">{formatTime(recordingTime)}</span>
{timeLimit && (
<span className="text-sm text-gray-400">/ {formatTime(timeLimit)}</span>
<span className="text-sm text-gray-500 dark:text-gray-400">/ {formatTime(timeLimit)}</span>
)}
</div>
<button
@@ -250,7 +250,7 @@ export default function AudioResponsePlayer({
</button>
<button
onClick={reset}
className="flex items-center gap-2 px-6 py-3 glass hover:bg-white/10 rounded-xl font-bold text-gray-300 transition-all outline-none focus:ring-2 focus:ring-white/20"
className="flex items-center gap-2 px-6 py-3 glass hover:bg-black/5 dark:hover:bg-white/10 rounded-xl font-bold text-gray-600 dark:text-gray-300 transition-all outline-none focus:ring-2 focus:ring-black/10 dark:focus:ring-white/20 border-black/5 dark:border-white/5"
aria-label="Delete and re-record"
>
<RotateCcw className="w-4 h-4" aria-hidden="true" />
@@ -262,9 +262,9 @@ export default function AudioResponsePlayer({
{/* Transcript Preview */}
{transcript && !submitted && (
<div className="p-4 bg-white/5 border border-white/10 rounded-xl">
<p className="text-xs text-gray-500 uppercase tracking-wider mb-2">Transcript:</p>
<p className="text-sm text-gray-300">{transcript}</p>
<div className="p-4 bg-black/5 dark:bg-white/5 border border-black/5 dark:border-white/10 rounded-xl">
<p className="text-xs text-gray-500 dark:text-gray-500 uppercase tracking-wider mb-2">Transcript:</p>
<p className="text-sm text-gray-700 dark:text-gray-300">{transcript}</p>
</div>
)}
@@ -285,16 +285,16 @@ export default function AudioResponsePlayer({
<div className="space-y-4">
<div
className={`p-6 rounded-2xl border-2 ${evaluation.score >= 70
? 'bg-green-500/10 border-green-500'
? 'bg-green-500/10 border-green-600 dark:border-green-500'
: evaluation.score >= 40
? 'bg-yellow-500/10 border-yellow-500'
: 'bg-red-500/10 border-red-500'
? 'bg-yellow-500/10 border-yellow-600 dark:border-yellow-500'
: 'bg-red-500/10 border-red-600 dark:border-red-500'
}`}
aria-live="assertive"
>
<div className="flex items-center justify-between mb-4">
<span className="text-sm font-bold uppercase tracking-wider text-gray-400">Your Score</span>
<span className="text-3xl font-black">{evaluation.score}%</span>
<span className="text-sm font-bold uppercase tracking-wider text-gray-500 dark:text-gray-400">Your Score</span>
<span className="text-3xl font-black text-gray-900 dark:text-white">{evaluation.score}%</span>
</div>
{keywords.length > 0 && (
@@ -306,9 +306,9 @@ export default function AudioResponsePlayer({
return (
<span
key={i}
className={`px-3 py-1 rounded-lg text-sm font-medium flex items-center gap-1 ${found
? 'bg-green-500/20 border border-green-500/50 text-green-300'
: 'bg-gray-500/20 border border-gray-500/50 text-gray-400'
className={`px-3 py-1 rounded-lg text-sm font-bold flex items-center gap-1 ${found
? 'bg-green-600/10 dark:bg-green-500/20 border border-green-600/20 dark:border-green-500/50 text-green-700 dark:text-green-300'
: 'bg-gray-500/10 dark:bg-gray-500/20 border border-gray-600/20 dark:border-gray-500/50 text-gray-600 dark:text-gray-400'
}`}
>
{found ? <Check className="w-3 h-3" /> : <X className="w-3 h-3" />}
@@ -326,25 +326,25 @@ export default function AudioResponsePlayer({
<div className="absolute top-0 right-0 p-4 opacity-5 group-hover:opacity-10 transition-opacity">
<BrainCircuit className="w-20 h-20 text-blue-400" />
</div>
<div className="flex items-center gap-2 text-xs font-black uppercase tracking-widest text-blue-400">
<div className="flex items-center gap-2 text-xs font-black uppercase tracking-widest text-blue-600 dark:text-blue-400">
<BrainCircuit className="w-4 h-4" />
AI Teacher Feedback
</div>
<p className="text-gray-200 leading-relaxed italic text-lg relative z-10">
<p className="text-gray-800 dark:text-gray-200 leading-relaxed italic text-lg relative z-10">
&quot;{evaluation.feedback}&quot;
</p>
</div>
)}
<div className="p-4 bg-white/5 border border-white/10 rounded-xl">
<div className="p-4 bg-black/5 dark:bg-white/5 border border-black/5 dark:border-white/10 rounded-xl">
<p className="text-xs text-gray-500 uppercase tracking-wider mb-2">Your Transcript:</p>
<p className="text-sm text-gray-300">{transcript}</p>
<p className="text-sm text-gray-700 dark:text-gray-300">{transcript}</p>
</div>
{!isGraded && evaluation.score < 70 && (
<button
onClick={reset}
className="w-full py-4 glass hover:bg-white/10 rounded-xl font-bold text-blue-400 transition-all"
className="w-full py-4 glass hover:bg-black/5 dark:hover:bg-white/10 rounded-xl font-bold text-blue-600 dark:text-blue-400 border-black/5 dark:border-white/5 transition-all"
>
Try Again
</button>
web/experience/src/components/blocks/CodeExercisePlayer.tsx
+10 -10
View File
@@ -58,22 +58,22 @@ export default function CodeExercisePlayer({
return (
<div className="flex flex-col gap-6 animate-in fade-in duration-700">
<div className="glass-card p-6 border-white/5">
<div className="glass-card p-6 border-black/5 dark:border-white/5 bg-black/[0.02] dark:bg-black/20">
<div className="flex items-center gap-3 mb-4">
<div className="p-2 rounded-lg bg-indigo-500/10 text-indigo-400">
<div className="p-2 rounded-lg bg-indigo-600/10 dark:bg-indigo-500/10 text-indigo-600 dark:text-indigo-400">
<Code2 size={24} />
</div>
<h2 className="text-xl font-black tracking-tight">{title}</h2>
<h2 className="text-xl font-black tracking-tight text-gray-900 dark:text-white">{title}</h2>
</div>
<div className="prose prose-invert max-w-none text-gray-400 text-sm leading-relaxed">
<div className="prose dark:prose-invert max-w-none text-gray-600 dark:text-gray-400 text-sm leading-relaxed">
{instructions}
</div>
</div>
<div className="grid grid-cols-1 lg:grid-cols-2 gap-4 h-[500px]">
{/* Editor Area */}
<div className="flex flex-col rounded-2xl overflow-hidden border border-white/5 bg-[#1a1c21]">
<div className="px-4 py-2 bg-white/5 border-b border-white/5 flex items-center justify-between text-[10px] font-black uppercase tracking-widest text-gray-500">
<div className="flex flex-col rounded-2xl overflow-hidden border border-black/5 dark:border-white/5 bg-[#1a1c21]">
<div className="px-4 py-2 bg-black/40 dark:bg-white/5 border-b border-black/5 dark:border-white/5 flex items-center justify-between text-[10px] font-black uppercase tracking-widest text-gray-400 dark:text-gray-500">
<span>main.py</span>
<div className="flex gap-2">
<div className="w-2 h-2 rounded-full bg-red-500/20" />
@@ -87,7 +87,7 @@ export default function CodeExercisePlayer({
className="flex-1 bg-transparent p-6 font-mono text-sm resize-none focus:outline-none text-indigo-100 selection:bg-indigo-500/30"
spellCheck={false}
/>
<div className="p-4 bg-black/20 border-t border-white/5 flex gap-2">
<div className="p-4 bg-black/40 dark:bg-black/20 border-t border-black/5 dark:border-white/5 flex gap-2">
<button
onClick={runCode}
disabled={status === "running"}
@@ -111,12 +111,12 @@ export default function CodeExercisePlayer({
</div>
{/* Console / Results Area */}
<div className="flex flex-col rounded-2xl overflow-hidden border border-white/5 bg-black/40">
<div className="px-4 py-2 bg-white/5 border-b border-white/5 text-[10px] font-black uppercase tracking-widest text-gray-500">
<div className="flex flex-col rounded-2xl overflow-hidden border border-black/5 dark:border-white/5 bg-black/[0.05] dark:bg-black/40">
<div className="px-4 py-2 bg-black/10 dark:bg-white/5 border-b border-black/5 dark:border-white/5 text-[10px] font-black uppercase tracking-widest text-gray-500">
Console Output
</div>
<div className="flex-1 p-6 font-mono text-sm overflow-auto">
{!output && <span className="text-gray-600 italic">Click &quot;Run Code&quot; to execute tests...</span>}
{!output && <span className="text-gray-500 dark:text-gray-600 italic">Click &quot;Run Code&quot; to execute tests...</span>}
{output && (
<pre className={`whitespace-pre-wrap ${status === "success" ? "text-green-400" :
status === "error" ? "text-red-400" :
web/experience/src/components/blocks/DescriptionPlayer.tsx
+2 -2
View File
@@ -13,12 +13,12 @@ export default function DescriptionPlayer({ id, title, content }: DescriptionPla
return (
<div className="space-y-8" id={id}>
<div className="space-y-2">
<h3 className="text-xl font-bold border-l-4 border-blue-500 pl-4 py-1 tracking-tight text-white uppercase tracking-widest text-[10px]">
<h3 className="text-xl font-bold border-l-4 border-blue-600 dark:border-blue-500 pl-4 py-1 tracking-tight text-gray-900 dark:text-white uppercase tracking-widest text-[10px]">
{title || "Resumen"}
</h3>
</div>
<div className="prose prose-invert prose-lg max-w-none prose-p:text-gray-300 prose-p:leading-relaxed prose-p:font-medium prose-headings:text-white prose-a:text-blue-400 prose-img:rounded-2xl prose-img:shadow-2xl">
<div className="prose dark:prose-invert prose-lg max-w-none prose-p:text-gray-700 dark:prose-p:text-gray-300 prose-p:leading-relaxed prose-p:font-medium prose-headings:text-gray-900 dark:prose-headings:text-white prose-a:text-blue-600 dark:prose-a:text-blue-400 prose-img:rounded-2xl prose-img:shadow-2xl">
<ReactMarkdown urlTransform={getImageUrl}>{content}</ReactMarkdown>
</div>
</div>
web/experience/src/components/blocks/DocumentPlayer.tsx
+6 -6
View File
@@ -26,14 +26,14 @@ export default function DocumentPlayer({ id, title, url }: DocumentPlayerProps)
return (
<div className="space-y-6" id={id}>
<div className="flex items-center justify-between">
<h3 className="text-xs font-black uppercase tracking-widest text-gray-400">
<h3 className="text-xs font-black uppercase tracking-widest text-gray-500 dark:text-gray-400">
{title || "Material de Lectura"}
</h3>
</div>
<div className="relative">
{isPdf ? (
<div className="glass-card !p-0 overflow-hidden border-white/5 bg-white/5 aspect-[4/3] w-full group relative">
<div className="glass-card !p-0 overflow-hidden border-black/5 dark:border-white/5 bg-black/[0.02] dark:bg-white/5 aspect-[4/3] w-full group relative">
<iframe
src={`${displayUrl}#view=FitH&toolbar=0`}
className="w-full h-full border-none"
@@ -41,7 +41,7 @@ export default function DocumentPlayer({ id, title, url }: DocumentPlayerProps)
/>
{/* Overlay Controls */}
<div className="absolute bottom-0 inset-x-0 p-4 bg-gradient-to-t from-black to-transparent opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-between">
<div className="absolute bottom-0 inset-x-0 p-4 bg-gradient-to-t from-black/80 to-transparent opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-between">
<span className="text-[10px] font-black uppercase tracking-widest text-white/50 flex items-center gap-2">
<Eye size={12} /> Vista Previa
</span>
@@ -65,13 +65,13 @@ export default function DocumentPlayer({ id, title, url }: DocumentPlayerProps)
</div>
</div>
) : (
<div className="glass-card p-12 flex flex-col items-center text-center gap-6 border-white/5 bg-white/5">
<div className="glass-card p-12 flex flex-col items-center text-center gap-6 border-black/5 dark:border-white/5 bg-black/[0.02] dark:bg-white/5">
<div className="w-20 h-20 rounded-2xl bg-blue-500/10 flex items-center justify-center text-blue-400">
<FileText size={40} />
</div>
<div>
<p className="text-xl font-bold text-white mb-2">Documento Adjunto</p>
<p className="text-sm text-gray-500 max-w-sm mx-auto uppercase tracking-widest font-black leading-relaxed">
<p className="text-xl font-bold text-gray-900 dark:text-white mb-2">Documento Adjunto</p>
<p className="text-sm text-gray-600 dark:text-gray-500 max-w-sm mx-auto uppercase tracking-widest font-black leading-relaxed">
Este archivo no puede previsualizarse. Descárgalo para leerlo.
</p>
</div>
web/experience/src/components/blocks/FillInTheBlanksPlayer.tsx
+6 -6
View File
@@ -45,13 +45,13 @@ export default function FillInTheBlanksPlayer({ id, title, content, allowRetry =
return (
<div className="space-y-8" id={id}>
<div className="space-y-2">
<h3 className="text-xl font-bold border-l-4 border-blue-500 pl-4 py-1 tracking-tight text-white uppercase tracking-widest text-[10px]">
<h3 className="text-xl font-bold border-l-4 border-blue-600 dark:border-blue-500 pl-4 py-1 tracking-tight text-gray-900 dark:text-white uppercase tracking-widest text-[10px]">
{title || "Rellena los Espacios en Blanco"}
</h3>
</div>
<div className="p-8 glass border-white/5 rounded-3xl space-y-8">
<div className="text-lg leading-loose text-gray-100">
<div className="p-8 glass border-black/5 dark:border-white/5 rounded-3xl space-y-8 bg-black/[0.02] dark:bg-black/20">
<div className="text-lg leading-loose text-gray-800 dark:text-gray-100">
{parsed.parts.map((part, i) => (
part.type === 'text' ? (
<span key={i}>{part.value}</span>
@@ -67,8 +67,8 @@ export default function FillInTheBlanksPlayer({ id, title, content, allowRetry =
}}
disabled={submitted}
className={`mx-1 px-2 py-0 border-b-2 bg-transparent transition-all focus:outline-none text-center rounded-t-sm ${submitted
? (isCorrect(part.index!) ? "border-green-500 text-green-400 bg-green-500/10" : "border-red-500 text-red-100 bg-red-500/10")
: "border-blue-500/30 focus:border-blue-500 text-blue-400 focus:bg-blue-500/5"
? (isCorrect(part.index!) ? "border-green-600 dark:border-green-500 text-green-700 dark:text-green-400 bg-green-500/10" : "border-red-600 dark:border-red-500 text-red-700 dark:text-red-100 bg-red-500/10")
: "border-blue-600/30 dark:border-blue-500/30 focus:border-blue-600 dark:focus:border-blue-500 text-blue-700 dark:text-blue-400 focus:bg-blue-600/5 dark:focus:bg-blue-500/5"
}`}
style={{ width: `${Math.max((part.answer?.length || 5) * 12, 60)}px` }}
placeholder="..."
@@ -91,7 +91,7 @@ export default function FillInTheBlanksPlayer({ id, title, content, allowRetry =
{submitted && (
<button
onClick={handleReset}
className="w-full py-5 glass text-blue-400 font-black text-xs uppercase tracking-[0.2em] hover:bg-white/5 transition-all rounded-3xl border-white/5"
className="w-full py-5 glass text-blue-600 dark:text-blue-400 font-black text-xs uppercase tracking-[0.2em] hover:bg-black/5 dark:hover:bg-white/5 transition-all rounded-3xl border-black/5 dark:border-white/5"
>
Intentar de Nuevo
</button>
web/experience/src/components/blocks/HotspotPlayer.tsx
+7 -7
View File
@@ -68,18 +68,18 @@ export default function HotspotPlayer({
return (
<div className="flex flex-col gap-6 animate-in fade-in zoom-in duration-700">
<div className="glass-card p-6 border-indigo-500/20 bg-indigo-500/5">
<div className="glass-card p-6 border-indigo-600/10 dark:border-indigo-500/20 bg-indigo-600/5 dark:bg-indigo-500/5">
<div className="flex items-center justify-between mb-4">
<div className="flex items-center gap-3">
<div className="p-3 rounded-2xl bg-amber-400 text-black shadow-lg shadow-amber-400/20">
<Search size={24} strokeWidth={3} />
</div>
<div>
<h2 className="text-xl font-black tracking-tight text-white">{title}</h2>
<p className="text-xs text-indigo-300 font-bold uppercase tracking-widest">{description}</p>
<h2 className="text-xl font-black tracking-tight text-gray-900 dark:text-white">{title}</h2>
<p className="text-xs text-indigo-600 dark:text-indigo-300 font-bold uppercase tracking-widest">{description}</p>
</div>
</div>
<div className="px-4 py-2 rounded-full bg-white/5 border border-white/10 text-xs font-black">
<div className="px-4 py-2 rounded-full bg-black/5 dark:bg-white/5 border border-black/5 dark:border-white/10 text-xs font-black text-gray-900 dark:text-white">
{found.length} / {hotspots.length} FOUND
</div>
</div>
@@ -88,7 +88,7 @@ export default function HotspotPlayer({
<div
ref={containerRef}
onClick={handleClick}
className="relative aspect-video rounded-3xl overflow-hidden border-4 border-white/10 bg-black cursor-crosshair group select-none shadow-2xl"
className="relative aspect-video rounded-3xl overflow-hidden border-4 border-black/5 dark:border-white/10 bg-black cursor-crosshair group select-none shadow-2xl"
>
<Image
src={getImageUrl(imageUrl)}
@@ -149,8 +149,8 @@ export default function HotspotPlayer({
<div
key={h.id}
className={`px-4 py-2 rounded-xl text-xs font-black tracking-widest uppercase transition-all flex items-center gap-2 ${found.includes(h.id)
? "bg-green-500 text-white translate-y-[-2px] shadow-lg shadow-green-500/20"
: "bg-white/5 text-gray-500 border border-white/5"
? "bg-green-600 dark:bg-green-500 text-white translate-y-[-2px] shadow-lg shadow-green-500/20"
: "bg-black/5 dark:bg-white/5 text-gray-500 dark:text-gray-500 border border-black/5 dark:border-white/5"
}`}
>
{found.includes(h.id) ? <CheckCircle size={14} /> : <div className="w-1 h-1 rounded-full bg-current" />}
web/experience/src/components/blocks/MatchingPlayer.tsx
+13 -13
View File
@@ -40,21 +40,21 @@ export default function MatchingPlayer({ id, title, pairs, allowRetry = true }:
return (
<div className="space-y-8" id={id}>
<div className="space-y-2">
<h3 className="text-xl font-bold border-l-4 border-blue-500 pl-4 py-1 tracking-tight text-white uppercase tracking-widest text-[10px]">
<h3 className="text-xl font-bold border-l-4 border-blue-600 dark:border-blue-500 pl-4 py-1 tracking-tight text-gray-900 dark:text-white uppercase tracking-widest text-[10px]">
{title || "Emparejamiento de Conceptos"}
</h3>
</div>
<div className="grid grid-cols-1 md:grid-cols-2 gap-12 p-8 glass border-white/5 rounded-3xl relative">
<div className="grid grid-cols-1 md:grid-cols-2 gap-12 p-8 glass border-black/5 dark:border-white/5 rounded-3xl relative bg-black/[0.02] dark:bg-black/20">
<div className="space-y-4">
<label className="text-[10px] font-black uppercase tracking-widest text-gray-500 mb-4 block">Término</label>
<label className="text-[10px] font-black uppercase tracking-widest text-gray-500 dark:text-gray-400 mb-4 block">Término</label>
{(pairs || []).map((pair, i) => (
<button
key={i}
onClick={() => !submitted && setSelectedLeft(i)}
className={`w-full p-4 rounded-xl border text-left text-sm font-bold transition-all ${selectedLeft === i ? "border-blue-500 bg-blue-500/10 text-white shadow-lg" :
matches[i] !== undefined ? "border-blue-500/20 bg-blue-500/5 text-blue-400" :
"border-white/5 bg-white/5 text-gray-200 hover:border-white/20"
className={`w-full p-4 rounded-xl border text-left text-sm font-bold transition-all ${selectedLeft === i ? "border-blue-600 dark:border-blue-500 bg-blue-600/10 dark:bg-blue-500/10 text-blue-700 dark:text-white shadow-lg" :
matches[i] !== undefined ? "border-blue-600/20 dark:border-blue-500/20 bg-blue-600/5 dark:bg-blue-500/5 text-blue-700 dark:text-blue-400" :
"border-black/5 dark:border-white/5 bg-black/5 dark:bg-white/5 text-gray-800 dark:text-gray-200 hover:border-black/20 dark:hover:border-white/20"
}`}
>
{pair.left}
@@ -63,7 +63,7 @@ export default function MatchingPlayer({ id, title, pairs, allowRetry = true }:
</div>
<div className="space-y-4">
<label className="text-[10px] font-black uppercase tracking-widest text-gray-500 mb-4 block">Definición</label>
<label className="text-[10px] font-black uppercase tracking-widest text-gray-500 dark:text-gray-400 mb-4 block">Definición</label>
{shuffledRight.map((item, i) => {
const matchedLeftIdx = Object.keys(matches).find(k => matches[parseInt(k)] === item.originalIdx);
const isCorrect = submitted && matchedLeftIdx !== undefined && parseInt(matchedLeftIdx) === item.originalIdx;
@@ -74,11 +74,11 @@ export default function MatchingPlayer({ id, title, pairs, allowRetry = true }:
key={i}
disabled={selectedLeft === null || submitted}
onClick={() => handleMatch(selectedLeft!, item.originalIdx)}
className={`w-full p-4 rounded-xl border text-left text-sm font-bold transition-all ${selectedLeft !== null && matchedLeftIdx === undefined ? "hover:border-blue-500/50 hover:bg-white/5" : ""
} ${isCorrect ? "border-green-500 bg-green-500/20 text-green-400" :
isWrong ? "border-red-500 bg-red-500/20 text-red-100" :
matchedLeftIdx !== undefined ? "border-blue-500/30 bg-blue-500/5 text-blue-400" :
"border-white/5 bg-white/5 text-gray-200"
className={`w-full p-4 rounded-xl border text-left text-sm font-bold transition-all ${selectedLeft !== null && matchedLeftIdx === undefined ? "hover:border-blue-600/50 dark:hover:border-blue-500/50 hover:bg-black/5 dark:hover:bg-white/5" : ""
} ${isCorrect ? "border-green-600 dark:border-green-500 bg-green-500/20 text-green-700 dark:text-green-400" :
isWrong ? "border-red-600 dark:border-red-500 bg-red-500/20 text-red-700 dark:text-red-100" :
matchedLeftIdx !== undefined ? "border-blue-600/30 dark:border-blue-500/30 bg-blue-600/5 dark:bg-blue-500/5 text-blue-700 dark:text-blue-400" :
"border-black/5 dark:border-white/5 bg-black/5 dark:bg-white/5 text-gray-800 dark:text-gray-200"
}`}
>
<div className="flex items-center justify-between">
@@ -104,7 +104,7 @@ export default function MatchingPlayer({ id, title, pairs, allowRetry = true }:
{submitted && (
<button
onClick={handleReset}
className="w-full py-5 glass text-blue-400 font-black text-xs uppercase tracking-[0.2em] hover:bg-white/5 transition-all rounded-2xl border-white/5"
className="w-full py-5 glass text-blue-600 dark:text-blue-400 font-black text-xs uppercase tracking-[0.2em] hover:bg-black/5 dark:hover:bg-white/5 transition-all rounded-2xl border-black/5 dark:border-white/5"
>
Intentar de Nuevo
</button>
web/experience/src/components/blocks/MediaPlayer.tsx
+14 -14
View File
@@ -95,14 +95,14 @@ export default function MediaPlayer({ id, lessonId, title, url, media_type, conf
if (locked) {
return (
<div className="space-y-4" id={id}>
<h3 className="text-xs font-black uppercase tracking-widest text-gray-400">{title || "Contenido Multimedia"}</h3>
<div className="glass-card aspect-video flex flex-col items-center justify-center gap-6 border-red-500/20 bg-red-500/5">
<div className="w-16 h-16 rounded-full bg-red-500/10 flex items-center justify-center text-red-500">
<h3 className="text-xs font-black uppercase tracking-widest text-gray-500 dark:text-gray-400">{title || "Contenido Multimedia"}</h3>
<div className="glass-card aspect-video flex flex-col items-center justify-center gap-6 border-red-500/10 dark:border-red-500/20 bg-red-500/5">
<div className="w-16 h-16 rounded-full bg-red-500/10 flex items-center justify-center text-red-600 dark:text-red-500">
<Lock size={32} />
</div>
<div className="text-center">
<p className="text-xl font-bold text-white mb-2">Contenido Bloqueado</p>
<p className="text-sm text-gray-500 max-w-xs uppercase tracking-widest font-black">
<p className="text-xl font-bold text-gray-900 dark:text-white mb-2">Contenido Bloqueado</p>
<p className="text-sm text-gray-600 dark:text-gray-500 max-w-xs uppercase tracking-widest font-black">
Has alcanzado el límite de {maxPlays} reproducciones para este contenido.
</p>
</div>
@@ -135,9 +135,9 @@ export default function MediaPlayer({ id, lessonId, title, url, media_type, conf
return (
<div className="space-y-6" id={id}>
<div className="flex items-center justify-between">
<h3 className="text-xs font-black uppercase tracking-widest text-gray-400">{title || "Contenido Multimedia"}</h3>
<h3 className="text-xs font-black uppercase tracking-widest text-gray-500 dark:text-gray-400">{title || "Contenido Multimedia"}</h3>
{maxPlays > 0 && (
<span className="text-[10px] font-bold uppercase tracking-widest px-3 py-1 rounded-full bg-white/5 border border-white/5 text-gray-500">
<span className="text-[10px] font-bold uppercase tracking-widest px-3 py-1 rounded-full bg-black/5 dark:bg-white/5 border border-black/5 dark:border-white/5 text-gray-500 dark:text-gray-400">
{playCount} / {maxPlays} REPRODUCCIONES
</span>
)}
@@ -196,9 +196,9 @@ export default function MediaPlayer({ id, lessonId, title, url, media_type, conf
{!isLocalFile && playCount === 0 && (
<div
onClick={handlePlay}
className="absolute inset-0 bg-black/40 flex items-center justify-center cursor-pointer group-hover:bg-black/20 transition-all"
className="absolute inset-0 bg-white/40 dark:bg-black/40 flex items-center justify-center cursor-pointer group-hover:bg-white/20 dark:group-hover:bg-black/20 transition-all"
>
<div className="w-20 h-20 rounded-full bg-blue-500 flex items-center justify-center shadow-2xl shadow-blue-500/40 group-hover:scale-110 transition-transform">
<div className="w-20 h-20 rounded-full bg-blue-600 dark:bg-blue-500 flex items-center justify-center shadow-2xl shadow-blue-500/40 group-hover:scale-110 transition-transform">
<Play size={32} className="text-white fill-white ml-2" />
</div>
</div>
@@ -213,8 +213,8 @@ export default function MediaPlayer({ id, lessonId, title, url, media_type, conf
)}
{/* Question Overlay */}
{activeMarker && (
<div className="absolute inset-0 z-50 flex items-center justify-center p-4 bg-black/60 backdrop-blur-md rounded-xl animate-in fade-in duration-300">
<div className="bg-white text-black p-6 rounded-2xl shadow-2xl max-w-sm w-full space-y-4">
<div className="absolute inset-0 z-50 flex items-center justify-center p-4 bg-white/60 dark:bg-black/60 backdrop-blur-md rounded-xl animate-in fade-in duration-300">
<div className="bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100 p-6 rounded-2xl shadow-2xl max-w-sm w-full space-y-4 border border-black/5 dark:border-white/5">
<div className="flex items-center gap-2 text-blue-600 font-bold text-xs uppercase tracking-widest">
<AlertCircle size={16} />
<span>Quick Check</span>
@@ -259,9 +259,9 @@ export default function MediaPlayer({ id, lessonId, title, url, media_type, conf
}}
className={`px-4 py-3 rounded-xl font-medium transition-all text-left ${feedback
? idx === activeMarker.correctIndex
? "bg-green-500 text-white"
: feedback.isCorrect === false && "bg-red-500 text-white"
: "bg-gray-100 hover:bg-blue-500 hover:text-white"
? "bg-green-600 dark:bg-green-500 text-white"
: feedback.isCorrect === false && "bg-red-600 dark:bg-red-500 text-white"
: "bg-black/5 dark:bg-gray-800 hover:bg-blue-600 dark:hover:bg-blue-500 hover:text-white"
}`}
>
{option}
web/experience/src/components/blocks/MemoryPlayer.tsx
+10 -10
View File
@@ -105,8 +105,8 @@ export default function MemoryPlayer({
<Sparkles size={28} className="animate-pulse" />
</div>
<div>
<h2 className="text-2xl font-black tracking-tight text-white">{title}</h2>
<div className="flex items-center gap-2 text-[10px] font-black uppercase tracking-widest text-indigo-400">
<h2 className="text-2xl font-black tracking-tight text-gray-900 dark:text-white">{title}</h2>
<div className="flex items-center gap-2 text-[10px] font-black uppercase tracking-widest text-indigo-600 dark:text-indigo-400">
<span>Brain Training</span>
<span className="w-1 h-1 rounded-full bg-indigo-800" />
<span>Level: Beginner</span>
@@ -114,16 +114,16 @@ export default function MemoryPlayer({
</div>
</div>
<div className="flex gap-4">
<div className="px-5 py-3 rounded-2xl bg-white/5 border border-white/10 text-center">
<div className="px-5 py-3 rounded-2xl bg-black/5 dark:bg-white/5 border border-black/5 dark:border-white/10 text-center">
<div className="text-[10px] font-black uppercase tracking-widest text-gray-500">Moves</div>
<div className="text-xl font-black text-white">{moves}</div>
<div className="text-xl font-black text-gray-900 dark:text-white">{moves}</div>
</div>
<button
onClick={initializeGame}
className="p-4 rounded-2xl bg-white/5 hover:bg-white/10 border border-white/10 transition-all active:scale-90"
className="p-4 rounded-2xl bg-black/5 dark:bg-white/5 hover:bg-black/10 dark:hover:bg-white/10 border border-black/5 dark:border-white/10 transition-all active:scale-90"
title="Restart"
>
<RotateCcw size={20} className="text-gray-400" />
<RotateCcw size={20} className="text-gray-500 dark:text-gray-400" />
</button>
</div>
</div>
@@ -138,8 +138,8 @@ export default function MemoryPlayer({
<div className={`relative w-full h-full transition-all duration-500 transform-style-3d ${(card.isFlipped || card.isMatched) ? "rotate-y-180" : ""
}`}>
{/* Card Front (Hidden) */}
<div className="absolute inset-0 backface-hidden flex items-center justify-center rounded-2xl bg-[#1a1c21] border-2 border-white/5 hover:border-indigo-500/50 transition-colors shadow-lg">
<HelpCircle size={40} className="text-white/10 group-hover:text-indigo-500/30 transition-colors" />
<div className="absolute inset-0 backface-hidden flex items-center justify-center rounded-2xl bg-gray-100 dark:bg-[#1a1c21] border-2 border-black/5 dark:border-white/5 hover:border-indigo-600 dark:hover:border-indigo-500/50 transition-colors shadow-lg">
<HelpCircle size={40} className="text-black/10 dark:text-white/10 group-hover:text-indigo-600 dark:group-hover:text-indigo-500/30 transition-colors" />
</div>
{/* Card Back (Content) */}
@@ -166,8 +166,8 @@ export default function MemoryPlayer({
<div className="w-16 h-16 rounded-full bg-green-500 text-white flex items-center justify-center mb-4 shadow-lg shadow-green-500/20">
<CheckCircle2 size={32} strokeWidth={3} />
</div>
<h3 className="text-2xl font-black text-white mb-1">BRAVO!</h3>
<p className="text-green-500/80 font-bold uppercase tracking-widest text-xs">
<h3 className="text-2xl font-black text-gray-900 dark:text-white mb-1">BRAVO!</h3>
<p className="text-green-600 dark:text-green-500/80 font-bold uppercase tracking-widest text-xs">
Finished in {moves} moves
</p>
</div>
web/experience/src/components/blocks/OrderingPlayer.tsx
+11 -11
View File
@@ -36,15 +36,15 @@ export default function OrderingPlayer({ id, title, items, allowRetry = true }:
return (
<div className="space-y-8" id={id}>
<div className="space-y-2">
<h3 className="text-xl font-bold border-l-4 border-blue-500 pl-4 py-1 tracking-tight text-white uppercase tracking-widest text-[10px]">
<h3 className="text-xl font-bold border-l-4 border-blue-600 dark:border-blue-500 pl-4 py-1 tracking-tight text-gray-900 dark:text-white uppercase tracking-widest text-[10px]">
{title || "Ordenamiento de Secuencia"}
</h3>
</div>
<div className="space-y-8 p-8 glass border-white/5 rounded-3xl">
<div className="space-y-8 p-8 glass border-black/5 dark:border-white/5 rounded-3xl bg-black/[0.02] dark:bg-black/20">
<div className="grid grid-cols-1 md:grid-cols-2 gap-12">
<div className="space-y-4">
<label className="text-[10px] font-black uppercase tracking-widest text-gray-500 mb-4 block">Elementos Disponibles</label>
<label className="text-[10px] font-black uppercase tracking-widest text-gray-500 dark:text-gray-400 mb-4 block">Elementos Disponibles</label>
<div className="flex flex-wrap gap-3">
{shuffledItems.map((item, i) => {
const isPicked = userOrder.includes(item.originalIdx);
@@ -53,8 +53,8 @@ export default function OrderingPlayer({ id, title, items, allowRetry = true }:
key={i}
disabled={isPicked || submitted}
onClick={() => handlePick(item.originalIdx)}
className={`px-6 py-3 rounded-full border text-sm font-bold transition-all ${isPicked ? "opacity-20 grayscale border-white/5 bg-white/5" :
"border-white/10 bg-white/5 text-gray-200 hover:border-blue-500/50 hover:bg-blue-500/5"
className={`px-6 py-3 rounded-full border text-sm font-bold transition-all ${isPicked ? "opacity-20 grayscale border-black/5 dark:border-white/5 bg-black/5 dark:bg-white/5" :
"border-black/10 dark:border-white/10 bg-black/5 dark:bg-white/5 text-gray-800 dark:text-gray-200 hover:border-blue-600/50 dark:hover:border-blue-500/50 hover:bg-blue-600/5 dark:hover:bg-blue-500/5"
}`}
>
{item.value}
@@ -65,9 +65,9 @@ export default function OrderingPlayer({ id, title, items, allowRetry = true }:
</div>
<div className="space-y-4">
<label className="text-[10px] font-black uppercase tracking-widest text-gray-500 mb-4 block">Tu Secuencia</label>
<label className="text-[10px] font-black uppercase tracking-widest text-gray-500 dark:text-gray-400 mb-4 block">Tu Secuencia</label>
<div className="space-y-3">
{userOrder.length === 0 && <p className="text-xs text-gray-600 italic py-4">Haz clic en los elementos para construir la secuencia...</p>}
{userOrder.length === 0 && <p className="text-xs text-gray-500 dark:text-gray-600 italic py-4">Haz clic en los elementos para construir la secuencia...</p>}
{userOrder.map((idx, i) => {
const isItemCorrect = submitted && idx === i;
const isItemWrong = submitted && idx !== i;
@@ -76,9 +76,9 @@ export default function OrderingPlayer({ id, title, items, allowRetry = true }:
<div
key={i}
onClick={() => !submitted && handlePick(idx)}
className={`flex items-center gap-4 p-4 rounded-xl border text-sm font-bold transition-all cursor-pointer ${isItemCorrect ? "border-green-500 bg-green-500/20 text-green-400" :
isItemWrong ? "border-red-500 bg-red-500/20 text-red-100" :
"border-blue-500/30 bg-blue-500/5 text-blue-400 hover:bg-blue-500/10"
className={`flex items-center gap-4 p-4 rounded-xl border text-sm font-bold transition-all cursor-pointer ${isItemCorrect ? "border-green-600 dark:border-green-500 bg-green-500/20 text-green-700 dark:text-green-400" :
isItemWrong ? "border-red-600 dark:border-red-500 bg-red-500/20 text-red-700 dark:text-red-100" :
"border-blue-600/30 dark:border-blue-500/30 bg-blue-600/5 dark:bg-blue-500/5 text-blue-700 dark:text-blue-400 hover:bg-blue-600/10 dark:hover:bg-blue-500/10"
}`}
>
<span className="opacity-50 text-xs">{i + 1}.</span>
@@ -106,7 +106,7 @@ export default function OrderingPlayer({ id, title, items, allowRetry = true }:
{submitted && (
<button
onClick={handleReset}
className="w-full py-5 glass text-blue-400 font-black text-xs uppercase tracking-[0.2em] hover:bg-white/5 transition-all rounded-2xl border-white/5"
className="w-full py-5 glass text-blue-600 dark:text-blue-400 font-black text-xs uppercase tracking-[0.2em] hover:bg-black/5 dark:hover:bg-white/5 transition-all rounded-2xl border-black/5 dark:border-white/5"
>
Intentar de Nuevo
</button>
web/experience/src/components/blocks/QuizPlayer.tsx
+7 -7
View File
@@ -64,11 +64,11 @@ export default function QuizPlayer({ id, title, quizData, allowRetry = true, max
return (
<div className="space-y-8 notranslate" id={id} translate="no">
<div className="space-y-2">
<h3 className="text-xl font-bold border-l-4 border-blue-500 pl-4 py-1 tracking-tight text-white uppercase tracking-widest text-[10px]">
<h3 className="text-xl font-bold border-l-4 border-blue-600 dark:border-blue-500 pl-4 py-1 tracking-tight text-gray-900 dark:text-white uppercase tracking-widest text-[10px]">
{title || "Verificación de Conocimientos"}
</h3>
{maxAttempts > 0 && (
<span className="text-[10px] font-bold uppercase tracking-widest px-3 py-1 rounded-full bg-white/5 border border-white/5 text-gray-500">
<span className="text-[10px] font-bold uppercase tracking-widest px-3 py-1 rounded-full bg-black/5 dark:bg-white/5 border border-black/5 dark:border-white/5 text-gray-500 dark:text-gray-400">
Intento {attempts} / {maxAttempts}
</span>
)}
@@ -76,8 +76,8 @@ export default function QuizPlayer({ id, title, quizData, allowRetry = true, max
<div className="space-y-8">
{questions.map((q) => (
<fieldset key={q.id} className="space-y-4 p-8 glass border-white/5 rounded-3xl" aria-labelledby={`q-${q.id}-text`}>
<legend id={`q-${q.id}-text`} className="font-bold text-xl text-gray-100 leading-tight mb-4">{q.question}</legend>
<fieldset key={q.id} className="space-y-4 p-8 glass border-black/5 dark:border-white/5 rounded-3xl bg-black/[0.02] dark:bg-black/20" aria-labelledby={`q-${q.id}-text`}>
<legend id={`q-${q.id}-text`} className="font-bold text-xl text-gray-900 dark:text-gray-100 leading-tight mb-4">{q.question}</legend>
<div
className="grid gap-3"
role={q.type === 'multiple-select' ? 'group' : 'radiogroup'}
@@ -90,14 +90,14 @@ export default function QuizPlayer({ id, title, quizData, allowRetry = true, max
const isWrongSelection = !isCorrect && isSelected;
const missedCorrect = isCorrect && !isSelected;
let style = "glass border-white/10 hover:bg-white/5";
let style = "glass border-black/10 dark:border-white/10 hover:bg-black/5 dark:hover:bg-white/5 text-gray-700 dark:text-gray-300";
if (submitted) {
if (isActuallyCorrect) style = "bg-green-500/20 border-green-500 text-green-400";
else if (isWrongSelection) style = "bg-red-500/20 border-red-500 text-red-100";
else if (missedCorrect) style = "border-orange-500/50 text-orange-400 animate-pulse";
else style = "opacity-50 grayscale border-white/5";
} else if (isSelected) {
style = "bg-blue-500/20 border-blue-500 text-white shadow-[0_0_20px_rgba(59,130,246,0.2)]";
style = "bg-blue-600/10 dark:bg-blue-500/20 border-blue-600 dark:border-blue-500 text-blue-700 dark:text-white shadow-[0_0_20px_rgba(59,130,246,0.2)]";
}
return (
@@ -145,7 +145,7 @@ export default function QuizPlayer({ id, title, quizData, allowRetry = true, max
setUserAnswers({});
}}
disabled={maxAttempts > 0 && attempts >= maxAttempts}
className={`w-full py-5 glass text-blue-400 font-black text-xs uppercase tracking-[0.2em] hover:bg-white/5 transition-all rounded-3xl border-white/5 ${maxAttempts > 0 && attempts >= maxAttempts ? 'opacity-50 cursor-not-allowed' : ''}`}
className={`w-full py-5 glass text-blue-600 dark:text-blue-400 font-black text-xs uppercase tracking-[0.2em] hover:bg-black/5 dark:hover:bg-white/5 transition-all rounded-3xl border-black/5 dark:border-white/5 ${maxAttempts > 0 && attempts >= maxAttempts ? 'opacity-50 cursor-not-allowed' : ''}`}
>
{maxAttempts > 0 && attempts >= maxAttempts ? 'Máximo de Intentos Alcanzado' : 'Intentar de Nuevo'}
</button>
web/experience/src/components/blocks/ShortAnswerPlayer.tsx
+7 -7
View File
@@ -24,13 +24,13 @@ export default function ShortAnswerPlayer({ id, title, prompt, correctAnswers, a
return (
<div className="space-y-8" id={id}>
<div className="space-y-2">
<h3 className="text-xl font-bold border-l-4 border-blue-500 pl-4 py-1 tracking-tight text-white uppercase tracking-widest text-[10px]">
<h3 className="text-xl font-bold border-l-4 border-blue-600 dark:border-blue-500 pl-4 py-1 tracking-tight text-gray-900 dark:text-white uppercase tracking-widest text-[10px]">
{title || "Respuesta Corta"}
</h3>
</div>
<div className="p-8 glass border-white/5 rounded-3xl space-y-8">
<p className="text-xl font-bold text-gray-100">{prompt || "Por favor, introduce tu respuesta a continuación:"}</p>
<div className="p-8 glass border-black/5 dark:border-white/5 rounded-3xl space-y-8 bg-black/[0.02] dark:bg-black/20">
<p className="text-xl font-bold text-gray-800 dark:text-gray-100">{prompt || "Por favor, introduce tu respuesta a continuación:"}</p>
<div className="space-y-4">
<input
@@ -38,9 +38,9 @@ export default function ShortAnswerPlayer({ id, title, prompt, correctAnswers, a
value={userAnswer}
onChange={(e) => setUserAnswer(e.target.value)}
disabled={submitted}
className={`w-full bg-white/5 border-2 rounded-2xl px-6 py-4 text-lg transition-all focus:outline-none ${submitted
? (isCorrect ? "border-green-500 bg-green-500/10 text-green-400" : "border-red-500 bg-red-500/10 text-red-100")
: "border-white/10 focus:border-blue-500 text-white"
className={`w-full bg-black/5 dark:bg-white/5 border-2 rounded-2xl px-6 py-4 text-lg transition-all focus:outline-none ${submitted
? (isCorrect ? "border-green-600 dark:border-green-500 bg-green-500/10 text-green-700 dark:text-green-400" : "border-red-600 dark:border-red-500 bg-red-500/10 text-red-700 dark:text-red-100")
: "border-black/10 dark:border-white/10 focus:border-blue-600 dark:focus:border-blue-500 text-gray-900 dark:text-white"
}`}
placeholder="Escribe tu respuesta..."
/>
@@ -68,7 +68,7 @@ export default function ShortAnswerPlayer({ id, title, prompt, correctAnswers, a
{submitted && (
<button
onClick={handleReset}
className="w-full py-5 glass text-blue-400 font-black text-xs uppercase tracking-[0.2em] hover:bg-white/5 transition-all rounded-3xl border-white/5"
className="w-full py-5 glass text-blue-600 dark:text-blue-400 font-black text-xs uppercase tracking-[0.2em] hover:bg-black/5 dark:hover:bg-white/5 transition-all rounded-3xl border-black/5 dark:border-white/5"
>
Intentar de Nuevo
</button>
web/experience/src/context/ThemeContext.tsx
+2 -2
View File
@@ -11,7 +11,7 @@ interface ThemeContextType {
}
const ThemeContext = createContext<ThemeContextType>({
theme: 'dark',
theme: 'light',
toggleTheme: () => { },
setTheme: () => { },
});
@@ -19,7 +19,7 @@ const ThemeContext = createContext<ThemeContextType>({
export const useTheme = () => useContext(ThemeContext);
export const ThemeProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
const [theme, setThemeState] = useState<Theme>('dark');
const [theme, setThemeState] = useState<Theme>('light');
const [mounted, setMounted] = useState(false);
useEffect(() => {