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

feat: Implement dark mode styling across UI components and update README with roadmap and system requirements.

Browse Source
This commit is contained in:
Juan Enrique Allende Cifuentes
2026-03-02 11:29:55 -03:00
parent 8c6cba6d2e
commit 81e1830563
15 changed files with 555 additions and 374 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/experience/src/app/page.tsx
+7 -7
View File
@@ -126,7 +126,7 @@ export default function CatalogPage() {
<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 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]">
<div className="absolute -bottom-2 -right-2 w-10 h-10 rounded-full bg-white dark:bg-black text-slate-900 dark:text-gray-400 flex items-center justify-center font-black text-xs border-4 border-slate-50 dark:border-[#050505]">
{gamification.level}
</div>
</div>
@@ -134,19 +134,19 @@ export default function CatalogPage() {
<div className="flex-1 space-y-4">
<div>
<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>
<h2 className="text-3xl font-black text-slate-900 dark:text-white">Nivel {gamification.level} Pionero</h2>
</div>
<div className="space-y-2">
<div className="flex justify-between items-end">
<div className="text-[10px] font-bold text-gray-500 uppercase tracking-widest">
<div className="text-[10px] font-bold text-slate-500 uppercase tracking-widest">
{gamification.points} / {Math.pow(gamification.level, 2) * 100} XP
</div>
<div className="text-[10px] font-black text-blue-400 uppercase tracking-widest">
<div className="text-[10px] font-black text-blue-500 dark:text-blue-400 uppercase tracking-widest">
{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-black/5 dark:bg-white/5 rounded-full overflow-hidden border border-black/5 dark:border-white/5">
<div className="h-2 w-full bg-slate-100 dark:bg-white/5 rounded-full overflow-hidden border border-slate-200 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.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))}%` }}
@@ -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-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 key={course.id} className="glass-card group relative overflow-hidden h-full flex flex-col p-8 border-slate-200 dark:border-white/5 bg-white dark:bg-white/[0.02] hover:bg-slate-50 dark:hover:bg-white/[0.04] transition-all duration-500 rounded-3xl shadow-sm hover:shadow-xl hover:shadow-slate-200/50 dark:hover:shadow-none">
<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" />
@@ -246,7 +246,7 @@ export default function CatalogPage() {
</p>
</div>
<div className="pt-8 border-t border-black/5 dark:border-white/5 flex items-center justify-between mt-auto">
<div className="pt-8 border-t border-slate-100 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/components/Leaderboard.tsx
+9 -9
View File
@@ -31,7 +31,7 @@ export default function Leaderboard() {
}
return (
<div className="glass-card p-8 border-white/5 bg-white/[0.01] rounded-3xl overflow-hidden relative">
<div className="glass-card p-8 border-slate-200 dark:border-white/5 bg-white dark:bg-white/[0.01] rounded-3xl overflow-hidden relative shadow-sm">
<h3 className="text-xs font-black uppercase tracking-widest text-gray-500 mb-6 flex items-center gap-2">
<Trophy size={14} className="text-amber-500" aria-hidden="true" /> Tabla de Clasificación
</h3>
@@ -41,24 +41,24 @@ export default function Leaderboard() {
<li
key={user.id}
className={`flex items-center gap-4 p-4 rounded-2xl transition-all ${index === 0 ? 'bg-gradient-to-r from-amber-500/10 to-transparent border border-amber-500/20 shadow-lg shadow-amber-500/5' :
'bg-white/5 border border-white/5 hover:bg-white/10'
'bg-slate-50 dark:bg-white/5 border border-slate-100 dark:border-white/5 hover:bg-slate-100 dark:hover:bg-white/10'
}`}
>
<div className="flex-shrink-0 w-8 text-center font-black text-xs text-gray-600" aria-label={`Posición ${index + 1}`}>
<div className="flex-shrink-0 w-8 text-center font-black text-xs text-slate-400 dark:text-gray-600" aria-label={`Posición ${index + 1}`}>
{index === 0 ? <Medal className="text-amber-500 mx-auto" size={18} aria-hidden="true" /> :
index === 1 ? <Medal className="text-gray-400 mx-auto" size={18} aria-hidden="true" /> :
index === 2 ? <Medal className="text-amber-700 mx-auto" size={18} aria-hidden="true" /> :
index === 1 ? <Medal className="text-slate-400 dark:text-gray-400 mx-auto" size={18} aria-hidden="true" /> :
index === 2 ? <Medal className="text-amber-700 dark:text-amber-700 mx-auto" size={18} aria-hidden="true" /> :
index + 1}
</div>
<div className="flex-1">
<div className="text-sm font-bold text-gray-200 line-clamp-1">{user.full_name}</div>
<div className="text-[10px] font-bold text-gray-500 uppercase tracking-widest">Nivel {user.level || 1}</div>
<div className="text-sm font-bold text-slate-900 dark:text-gray-200 line-clamp-1">{user.full_name}</div>
<div className="text-[10px] font-bold text-slate-500 dark:text-gray-500 uppercase tracking-widest">Nivel {user.level || 1}</div>
</div>
<div className="text-right">
<div className="text-sm font-black text-white">{user.xp || 0}</div>
<div className="text-[8px] font-black text-blue-500 uppercase tracking-widest">XP</div>
<div className="text-sm font-black text-slate-900 dark:text-white">{user.xp || 0}</div>
<div className="text-[8px] font-black text-blue-600 dark:text-blue-500 uppercase tracking-widest">XP</div>
</div>
</li>
))}