feat: Enhance UI with improved dark mode styling and color palette adjustments across course pages.
This commit is contained in:
@@ -72,40 +72,40 @@ export default function TeamManagementSection({ courseId }: TeamManagementSectio
|
||||
}
|
||||
|
||||
return (
|
||||
<section className="bg-white/5 border border-white/10 rounded-3xl p-8 space-y-8">
|
||||
<section className="bg-slate-50 dark:bg-white/5 border border-slate-200 dark:border-white/10 rounded-3xl p-8 space-y-8 shadow-sm">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-12 h-12 rounded-2xl bg-blue-500/10 flex items-center justify-center text-blue-400">
|
||||
<div className="w-12 h-12 rounded-2xl bg-blue-600/10 flex items-center justify-center text-blue-600 dark:text-blue-400">
|
||||
<Users size={24} />
|
||||
</div>
|
||||
<div>
|
||||
<h2 className="section-title">Equipo del Curso</h2>
|
||||
<p className="text-sm text-gray-400">Gestiona los instructores y asistentes de este curso</p>
|
||||
<p className="text-sm text-slate-500 dark:text-gray-400">Gestiona los instructores y asistentes de este curso</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Add Member Form */}
|
||||
<form onSubmit={handleAddMember} className="bg-white/5 border border-white/10 rounded-2xl p-6">
|
||||
<h3 className="text-sm font-bold text-gray-300 mb-4 flex items-center gap-2">
|
||||
<UserPlus size={16} /> Add Team Member
|
||||
<form onSubmit={handleAddMember} className="bg-white dark:bg-white/5 border border-slate-200 dark:border-white/10 rounded-2xl p-6 shadow-sm">
|
||||
<h3 className="text-sm font-black text-slate-900 dark:text-gray-300 mb-4 flex items-center gap-2 uppercase tracking-wider">
|
||||
<UserPlus size={16} className="text-blue-600 dark:text-blue-400" /> Add Team Member
|
||||
</h3>
|
||||
<div className="flex flex-col md:flex-row gap-4">
|
||||
<div className="flex-1 relative">
|
||||
<Mail className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-500" />
|
||||
<Mail className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-400 dark:text-gray-500" />
|
||||
<input
|
||||
type="email"
|
||||
value={email}
|
||||
onChange={(e) => setEmail(e.target.value)}
|
||||
placeholder="instructor@example.com"
|
||||
className="w-full bg-black/30 border border-white/10 rounded-xl py-2 pl-10 pr-4 text-sm focus:outline-none focus:border-blue-500 transition-colors"
|
||||
className="w-full bg-slate-50 dark:bg-black/30 border border-slate-200 dark:border-white/10 rounded-xl py-2 pl-10 pr-4 text-sm focus:outline-none focus:border-blue-500 transition-colors text-slate-900 dark:text-white"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<select
|
||||
value={role}
|
||||
onChange={(e) => setRole(e.target.value)}
|
||||
className="bg-black/30 border border-white/10 rounded-xl px-4 py-2 text-sm focus:outline-none focus:border-blue-500 transition-colors"
|
||||
className="bg-slate-50 dark:bg-black/30 border border-slate-200 dark:border-white/10 rounded-xl px-4 py-2 text-sm focus:outline-none focus:border-blue-500 transition-colors text-slate-900 dark:text-white font-bold"
|
||||
>
|
||||
<option value="instructor">Instructor</option>
|
||||
<option value="assistant">Assistant</option>
|
||||
@@ -125,36 +125,36 @@ export default function TeamManagementSection({ courseId }: TeamManagementSectio
|
||||
|
||||
{/* Member List */}
|
||||
<div className="space-y-4">
|
||||
<h3 className="text-sm font-bold text-gray-300">Active Instructors</h3>
|
||||
<h3 className="text-xs font-black text-slate-400 dark:text-gray-500 uppercase tracking-[0.2em]">Active Instructors</h3>
|
||||
<div className="grid grid-cols-1 gap-4">
|
||||
{team.map((member) => (
|
||||
<div key={member.user_id} className="flex items-center justify-between p-4 bg-white/5 border border-white/10 rounded-2xl hover:bg-white/[0.07] transition-colors">
|
||||
<div key={member.user_id} className="flex items-center justify-between p-5 bg-white dark:bg-white/5 border border-slate-200 dark:border-white/10 rounded-2xl hover:bg-slate-50 dark:hover:bg-white/[0.07] transition-all shadow-sm group">
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="w-10 h-10 rounded-full bg-gradient-to-tr from-blue-500 to-indigo-500 flex items-center justify-center text-white font-bold text-sm shadow-lg shadow-blue-500/10">
|
||||
{member.full_name.charAt(0)}
|
||||
</div>
|
||||
<div>
|
||||
<div className="font-bold flex items-center gap-2">
|
||||
<div className="font-bold flex items-center gap-2 text-slate-900 dark:text-white">
|
||||
{member.full_name}
|
||||
{member.role === 'primary' && (
|
||||
<span className="px-2 py-0.5 bg-blue-500/10 border border-blue-500/20 rounded text-[10px] text-blue-400 font-bold uppercase tracking-wider">
|
||||
<span className="px-2 py-0.5 bg-blue-600/10 border border-blue-500/20 rounded text-[9px] text-blue-600 dark:text-blue-400 font-black uppercase tracking-wider">
|
||||
Primary
|
||||
</span>
|
||||
)}
|
||||
{member.role === 'assistant' && (
|
||||
<span className="px-2 py-0.5 bg-gray-500/10 border border-gray-500/20 rounded text-[10px] text-gray-400 font-bold uppercase tracking-wider">
|
||||
<span className="px-2 py-0.5 bg-slate-500/10 border border-slate-500/20 rounded text-[9px] text-slate-600 dark:text-gray-400 font-black uppercase tracking-wider">
|
||||
Assistant
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<div className="text-xs text-gray-500">{member.email}</div>
|
||||
<div className="text-xs text-slate-500 dark:text-gray-500 font-medium">{member.email}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
{member.role !== 'primary' && (
|
||||
<button
|
||||
onClick={() => handleRemoveMember(member.user_id)}
|
||||
className="p-2 text-gray-500 hover:text-red-400 hover:bg-red-400/10 rounded-lg transition-all"
|
||||
className="p-2 text-slate-400 hover:text-red-500 dark:hover:text-red-400 hover:bg-red-500/10 rounded-lg transition-all opacity-0 group-hover:opacity-100"
|
||||
title="Remove member"
|
||||
>
|
||||
<Trash2 size={18} />
|
||||
|
||||
@@ -149,9 +149,9 @@ export default function CourseSettingsPage() {
|
||||
<TeamManagementSection courseId={id} />
|
||||
|
||||
{/* Passing Percentage Section */}
|
||||
<section className="bg-white/5 border border-white/10 rounded-3xl p-8">
|
||||
<section className="bg-slate-50 dark:bg-white/5 border border-slate-200 dark:border-white/10 rounded-3xl p-8 shadow-sm">
|
||||
<div className="flex items-center gap-3 mb-6">
|
||||
<div className="w-12 h-12 rounded-2xl bg-purple-500/10 flex items-center justify-center text-purple-400">
|
||||
<div className="w-12 h-12 rounded-2xl bg-purple-600/10 flex items-center justify-center text-purple-600 dark:text-purple-400">
|
||||
<SettingsIcon size={24} />
|
||||
</div>
|
||||
<h2 className="section-title">Configuración de Calificaciones</h2>
|
||||
@@ -159,7 +159,7 @@ export default function CourseSettingsPage() {
|
||||
|
||||
<div className="space-y-6">
|
||||
<div>
|
||||
<label className="block text-sm font-bold text-gray-300 mb-3">
|
||||
<label className="block text-sm font-black text-slate-700 dark:text-gray-300 mb-3 uppercase tracking-wider">
|
||||
Passing Percentage
|
||||
</label>
|
||||
<div className="flex items-center gap-6">
|
||||
@@ -169,45 +169,45 @@ export default function CourseSettingsPage() {
|
||||
max="100"
|
||||
value={passingPercentage}
|
||||
onChange={(e) => setPassingPercentage(parseInt(e.target.value))}
|
||||
className="flex-1 h-2 bg-white/10 rounded-lg appearance-none cursor-pointer accent-blue-500"
|
||||
className="flex-1 h-2 bg-slate-200 dark:bg-white/10 rounded-lg appearance-none cursor-pointer accent-blue-600 dark:accent-blue-500"
|
||||
/>
|
||||
<div className="text-4xl font-black text-blue-400 w-24 text-right">
|
||||
<div className="text-4xl font-black text-blue-600 dark:text-blue-400 w-24 text-right">
|
||||
{passingPercentage}%
|
||||
</div>
|
||||
</div>
|
||||
<p className="text-xs text-gray-500 mt-3">
|
||||
<p className="text-xs text-slate-500 dark:text-gray-500 mt-3 font-medium">
|
||||
Students must achieve at least this percentage to pass the course.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Performance Tiers Preview */}
|
||||
<div className="bg-white/5 border border-white/10 rounded-2xl p-6">
|
||||
<h3 className="text-sm font-bold text-gray-300 mb-4">Performance Tiers Preview</h3>
|
||||
<div className="bg-white dark:bg-white/5 border border-slate-200 dark:border-white/10 rounded-2xl p-6 shadow-sm">
|
||||
<h3 className="text-xs font-black text-slate-400 dark:text-gray-500 mb-4 uppercase tracking-[0.2em]">Performance Tiers Preview</h3>
|
||||
<div className="space-y-3 text-xs">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-16 h-4 bg-red-500 rounded"></div>
|
||||
<span className="text-red-400 font-bold">Reprobado:</span>
|
||||
<span className="text-gray-400">0% - {Math.max(0, passingPercentage - 1)}%</span>
|
||||
<div className="w-16 h-4 bg-red-500 rounded shadow-sm"></div>
|
||||
<span className="text-red-600 dark:text-red-400 font-bold">Reprobado:</span>
|
||||
<span className="text-slate-500 dark:text-gray-400 font-medium">0% - {Math.max(0, passingPercentage - 1)}%</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-16 h-4 bg-orange-500 rounded"></div>
|
||||
<span className="text-orange-400 font-bold">Rendimiento Bajo:</span>
|
||||
<span className="text-gray-400">{passingPercentage}% - {passingPercentage + 9}%</span>
|
||||
<div className="w-16 h-4 bg-orange-500 rounded shadow-sm"></div>
|
||||
<span className="text-orange-600 dark:text-orange-400 font-bold">Rendimiento Bajo:</span>
|
||||
<span className="text-slate-500 dark:text-gray-400 font-medium">{passingPercentage}% - {passingPercentage + 9}%</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-16 h-4 bg-yellow-500 rounded"></div>
|
||||
<span className="text-yellow-400 font-bold">Rendimiento Medio:</span>
|
||||
<span className="text-gray-400">{passingPercentage + 10}% - {passingPercentage + 15}%</span>
|
||||
<div className="w-16 h-4 bg-yellow-500 rounded shadow-sm"></div>
|
||||
<span className="text-yellow-600 dark:text-yellow-400 font-bold">Rendimiento Medio:</span>
|
||||
<span className="text-slate-500 dark:text-gray-400 font-medium">{passingPercentage + 10}% - {passingPercentage + 15}%</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-16 h-4 bg-green-500 rounded"></div>
|
||||
<span className="text-green-400 font-bold">Buen Rendimiento:</span>
|
||||
<span className="text-gray-400">{passingPercentage + 16}% - 90%</span>
|
||||
<div className="w-16 h-4 bg-green-500 rounded shadow-sm"></div>
|
||||
<span className="text-green-600 dark:text-green-400 font-bold">Buen Rendimiento:</span>
|
||||
<span className="text-slate-500 dark:text-gray-400 font-medium">{passingPercentage + 16}% - 90%</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-16 h-4 bg-blue-500 rounded"></div>
|
||||
<span className="text-blue-400 font-bold">Excelente:</span>
|
||||
<span className="text-gray-400">91% - 100%</span>
|
||||
<div className="w-16 h-4 bg-blue-500 rounded shadow-sm"></div>
|
||||
<span className="text-blue-600 dark:text-blue-400 font-bold">Excelente:</span>
|
||||
<span className="text-slate-500 dark:text-gray-400 font-medium">91% - 100%</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -215,9 +215,9 @@ export default function CourseSettingsPage() {
|
||||
</section>
|
||||
|
||||
{/* Course Pacing Section */}
|
||||
<section className="bg-white/5 border border-white/10 rounded-3xl p-8">
|
||||
<section className="bg-slate-50 dark:bg-white/5 border border-slate-200 dark:border-white/10 rounded-3xl p-8 shadow-sm">
|
||||
<div className="flex items-center gap-3 mb-6">
|
||||
<div className="w-12 h-12 rounded-2xl bg-green-500/10 flex items-center justify-center text-green-400">
|
||||
<div className="w-12 h-12 rounded-2xl bg-emerald-600/10 flex items-center justify-center text-emerald-600 dark:text-green-400">
|
||||
<Clock size={24} />
|
||||
</div>
|
||||
<h2 className="section-title">Ritmo y Calendario del Curso</h2>
|
||||
@@ -225,50 +225,50 @@ export default function CourseSettingsPage() {
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-8">
|
||||
<div className="space-y-4">
|
||||
<label className="block text-sm font-bold text-gray-300">Pacing Mode</label>
|
||||
<label className="block text-sm font-black text-slate-700 dark:text-gray-300 uppercase tracking-wider">Pacing Mode</label>
|
||||
<div className="flex gap-4">
|
||||
<button
|
||||
onClick={() => setPacingMode('self_paced')}
|
||||
className={`flex-1 p-4 rounded-2xl border-2 transition-all text-left ${pacingMode === 'self_paced' ? 'border-blue-500 bg-blue-500/10' : 'border-white/5 bg-white/5 hover:border-white/10'}`}
|
||||
className={`flex-1 p-4 rounded-2xl border-2 transition-all text-left shadow-sm ${pacingMode === 'self_paced' ? 'border-blue-600 bg-blue-100/30' : 'border-slate-200 bg-white dark:border-white/5 dark:bg-white/5 hover:border-slate-300 dark:hover:border-white/10'}`}
|
||||
>
|
||||
<div className="font-bold">Self-Paced</div>
|
||||
<div className="text-xs text-gray-500">Learners go at their own speed.</div>
|
||||
<div className={`font-bold ${pacingMode === 'self_paced' ? 'text-blue-600 dark:text-blue-400' : 'text-slate-700 dark:text-white'}`}>Self-Paced</div>
|
||||
<div className="text-xs text-slate-500 dark:text-gray-500 font-medium">Learners go at their own speed.</div>
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setPacingMode('instructor_led')}
|
||||
className={`flex-1 p-4 rounded-2xl border-2 transition-all text-left ${pacingMode === 'instructor_led' ? 'border-purple-500 bg-purple-500/10' : 'border-white/5 bg-white/5 hover:border-white/10'}`}
|
||||
className={`flex-1 p-4 rounded-2xl border-2 transition-all text-left shadow-sm ${pacingMode === 'instructor_led' ? 'border-purple-600 bg-purple-100/30' : 'border-slate-200 bg-white dark:border-white/5 dark:bg-white/5 hover:border-slate-300 dark:hover:border-white/10'}`}
|
||||
>
|
||||
<div className="font-bold">Instructor-Led</div>
|
||||
<div className="text-xs text-gray-500">Cohort-based with specific dates.</div>
|
||||
<div className={`font-bold ${pacingMode === 'instructor_led' ? 'text-purple-600 dark:text-purple-400' : 'text-slate-700 dark:text-white'}`}>Instructor-Led</div>
|
||||
<div className="text-xs text-slate-500 dark:text-gray-500 font-medium">Cohort-based with specific dates.</div>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{pacingMode === 'instructor_led' && (
|
||||
<div className="space-y-4 animate-in fade-in slide-in-from-top-2">
|
||||
<label className="block text-sm font-bold text-gray-300">Course Schedule</label>
|
||||
<label className="block text-sm font-black text-slate-700 dark:text-gray-300 uppercase tracking-wider">Course Schedule</label>
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div className="space-y-2">
|
||||
<label className="text-xs text-gray-500">Start Date</label>
|
||||
<label className="text-[10px] text-slate-400 dark:text-gray-500 font-black uppercase tracking-widest">Start Date</label>
|
||||
<div className="relative">
|
||||
<Calendar className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-500" />
|
||||
<Calendar className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-400 dark:text-gray-500" />
|
||||
<input
|
||||
type="date"
|
||||
value={startDate}
|
||||
onChange={(e) => setStartDate(e.target.value)}
|
||||
className="w-full bg-black/30 border border-white/10 rounded-xl py-2 pl-10 pr-4 text-sm focus:outline-none focus:border-blue-500"
|
||||
className="w-full bg-slate-100 dark:bg-black/30 border border-slate-200 dark:border-white/10 rounded-xl py-2.5 pl-10 pr-4 text-sm focus:outline-none focus:border-blue-500 text-slate-900 dark:text-white font-bold"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<label className="text-xs text-gray-500">End Date</label>
|
||||
<label className="text-[10px] text-slate-400 dark:text-gray-500 font-black uppercase tracking-widest">End Date</label>
|
||||
<div className="relative">
|
||||
<Calendar className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-500" />
|
||||
<Calendar className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-400 dark:text-gray-500" />
|
||||
<input
|
||||
type="date"
|
||||
value={endDate}
|
||||
onChange={(e) => setEndDate(e.target.value)}
|
||||
className="w-full bg-black/30 border border-white/10 rounded-xl py-2 pl-10 pr-4 text-sm focus:outline-none focus:border-blue-500"
|
||||
className="w-full bg-slate-100 dark:bg-black/30 border border-slate-200 dark:border-white/10 rounded-xl py-2.5 pl-10 pr-4 text-sm focus:outline-none focus:border-blue-500 text-slate-900 dark:text-white font-bold"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
@@ -279,17 +279,17 @@ export default function CourseSettingsPage() {
|
||||
</section>
|
||||
|
||||
{/* Course Pricing Section */}
|
||||
<section className="bg-white/5 border border-white/10 rounded-3xl p-8">
|
||||
<section className="bg-slate-50 dark:bg-white/5 border border-slate-200 dark:border-white/10 rounded-3xl p-8 shadow-sm">
|
||||
<div className="flex items-center gap-3 mb-6">
|
||||
<div className="w-12 h-12 rounded-2xl bg-blue-500/10 flex items-center justify-center text-blue-400">
|
||||
<span className="text-xl font-bold">$</span>
|
||||
<div className="w-12 h-12 rounded-2xl bg-blue-600/10 flex items-center justify-center text-blue-600 dark:text-blue-400">
|
||||
<span className="text-xl font-black">$</span>
|
||||
</div>
|
||||
<h2 className="section-title">Precio del Curso</h2>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-8">
|
||||
<div className="space-y-4">
|
||||
<label className="block text-sm font-bold text-gray-300">Price</label>
|
||||
<label className="block text-sm font-black text-slate-700 dark:text-gray-300 uppercase tracking-wider">Price</label>
|
||||
<div className="relative">
|
||||
<input
|
||||
type="number"
|
||||
@@ -297,22 +297,22 @@ export default function CourseSettingsPage() {
|
||||
min="0"
|
||||
value={price}
|
||||
onChange={(e) => setPrice(parseFloat(e.target.value))}
|
||||
className="w-full bg-black/30 border border-white/10 rounded-xl py-3 px-4 text-gray-900 dark:text-white focus:outline-none focus:border-blue-500 transition-colors"
|
||||
className="w-full bg-slate-100 dark:bg-black/30 border border-slate-200 dark:border-white/10 rounded-xl py-3 px-4 text-slate-900 dark:text-white focus:outline-none focus:border-blue-500 transition-colors font-bold"
|
||||
placeholder="0.00"
|
||||
/>
|
||||
<div className="absolute right-4 top-1/2 -translate-y-1/2 text-gray-500 font-bold">
|
||||
<div className="absolute right-4 top-1/2 -translate-y-1/2 text-slate-400 dark:text-gray-500 font-black">
|
||||
{currency}
|
||||
</div>
|
||||
</div>
|
||||
<p className="text-xs text-gray-500">Set to 0 for a free course.</p>
|
||||
<p className="text-xs text-slate-500 dark:text-gray-500 font-medium">Set to 0 for a free course.</p>
|
||||
</div>
|
||||
|
||||
<div className="space-y-4">
|
||||
<label className="block text-sm font-bold text-gray-300">Currency</label>
|
||||
<label className="block text-sm font-black text-slate-700 dark:text-gray-300 uppercase tracking-wider">Currency</label>
|
||||
<select
|
||||
value={currency}
|
||||
onChange={(e) => setCurrency(e.target.value)}
|
||||
className="w-full bg-black/30 border border-white/10 rounded-xl py-3 px-4 text-gray-900 dark:text-white focus:outline-none focus:border-blue-500 transition-colors appearance-none"
|
||||
className="w-full bg-slate-100 dark:bg-black/30 border border-slate-200 dark:border-white/10 rounded-xl py-3 px-4 text-slate-900 dark:text-white focus:outline-none focus:border-blue-500 transition-colors appearance-none font-bold"
|
||||
>
|
||||
<option value="USD">USD - US Dollar</option>
|
||||
<option value="CLP">CLP - Chilean Peso</option>
|
||||
@@ -326,40 +326,40 @@ export default function CourseSettingsPage() {
|
||||
</section>
|
||||
|
||||
{/* Certificate Template Section */}
|
||||
<section className="bg-white/5 border border-white/10 rounded-3xl p-8">
|
||||
<section className="bg-slate-50 dark:bg-white/5 border border-slate-200 dark:border-white/10 rounded-3xl p-8 shadow-sm">
|
||||
<div className="flex items-center gap-3 mb-6">
|
||||
<div className="w-12 h-12 rounded-2xl bg-indigo-500/10 flex items-center justify-center text-indigo-400">
|
||||
<div className="w-12 h-12 rounded-2xl bg-indigo-600/10 flex items-center justify-center text-indigo-600 dark:text-indigo-400">
|
||||
<BookOpen size={24} />
|
||||
</div>
|
||||
<h2 className="section-title">Plantilla de Certificado</h2>
|
||||
</div>
|
||||
|
||||
<div className="space-y-6">
|
||||
<p className="text-gray-400">
|
||||
<p className="text-slate-500 dark:text-gray-400 font-medium">
|
||||
Design the HTML certificate that students will receive upon passing the course.
|
||||
Available variables: <code className="text-blue-400">{"{{student_name}}"}</code>, <code className="text-blue-400">{"{{course_title}}"}</code>, <code className="text-blue-400">{"{{date}}"}</code>, <code className="text-blue-400">{"{{score}}"}</code>.
|
||||
Available variables: <code className="text-blue-600 dark:text-blue-400 font-black">{"{{student_name}}"}</code>, <code className="text-blue-600 dark:text-blue-400 font-black">{"{{course_title}}"}</code>, <code className="text-blue-600 dark:text-blue-400 font-black">{"{{date}}"}</code>, <code className="text-blue-600 dark:text-blue-400 font-black">{"{{score}}"}</code>.
|
||||
</p>
|
||||
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
|
||||
<div className="space-y-2">
|
||||
<label className="block text-sm font-bold text-gray-300">HTML Template</label>
|
||||
<label className="block text-sm font-black text-slate-700 dark:text-gray-300 uppercase tracking-wider">HTML Template</label>
|
||||
<textarea
|
||||
value={certificateTemplate}
|
||||
onChange={(e) => setCertificateTemplate(e.target.value)}
|
||||
className="w-full h-[400px] bg-black/30 border border-white/10 rounded-xl p-4 font-mono text-sm text-gray-300 focus:outline-none focus:border-blue-500 transition-colors resize-none"
|
||||
className="w-full h-[400px] bg-slate-100 dark:bg-black/30 border border-slate-200 dark:border-white/10 rounded-xl p-6 font-mono text-sm text-slate-700 dark:text-gray-300 focus:outline-none focus:border-blue-500 transition-colors resize-none shadow-inner"
|
||||
placeholder="Enter HTML code here..."
|
||||
/>
|
||||
<button
|
||||
onClick={() => setCertificateTemplate(DEFAULT_CERTIFICATE_TEMPLATE)}
|
||||
className="text-xs text-blue-400 hover:text-blue-300 underline"
|
||||
className="text-[10px] font-black uppercase tracking-widest text-blue-600 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300 transition-colors"
|
||||
>
|
||||
Reset to Default Template
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<label className="block text-sm font-bold text-gray-300">Live Preview</label>
|
||||
<div className="w-full h-[400px] bg-white rounded-xl overflow-hidden relative group">
|
||||
<label className="block text-sm font-black text-slate-700 dark:text-gray-300 uppercase tracking-wider">Live Preview</label>
|
||||
<div className="w-full h-[400px] bg-white rounded-xl overflow-hidden relative group border border-slate-200 shadow-sm">
|
||||
<iframe
|
||||
srcDoc={certificateTemplate
|
||||
.replace(/{{student_name}}/g, "Jane Doe")
|
||||
@@ -377,9 +377,9 @@ export default function CourseSettingsPage() {
|
||||
</div>
|
||||
</section>
|
||||
{/* Course Portability Section */}
|
||||
<section className="bg-white/5 border border-white/10 rounded-3xl p-8">
|
||||
<section className="bg-slate-50 dark:bg-white/5 border border-slate-200 dark:border-white/10 rounded-3xl p-8 shadow-sm">
|
||||
<div className="flex items-center gap-3 mb-6">
|
||||
<div className="w-12 h-12 rounded-2xl bg-amber-500/10 flex items-center justify-center text-amber-400">
|
||||
<div className="w-12 h-12 rounded-2xl bg-amber-600/10 flex items-center justify-center text-amber-600 dark:text-amber-400">
|
||||
<Download size={24} />
|
||||
</div>
|
||||
<h2 className="section-title">Portabilidad del Curso</h2>
|
||||
@@ -387,15 +387,15 @@ export default function CourseSettingsPage() {
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-8">
|
||||
<div className="space-y-4">
|
||||
<h3 className="text-sm font-bold text-gray-300">Export Course</h3>
|
||||
<p className="text-xs text-gray-500">
|
||||
<h3 className="text-sm font-black text-slate-800 dark:text-gray-300 uppercase tracking-wider">Export Course</h3>
|
||||
<p className="text-xs text-slate-500 dark:text-gray-500 font-medium">
|
||||
Download the entire course structure, modules, and lessons as a JSON file.
|
||||
You can use this to backup or move content between organizations.
|
||||
</p>
|
||||
<button
|
||||
onClick={handleExport}
|
||||
disabled={exporting}
|
||||
className="flex items-center gap-2 px-6 py-3 bg-white/5 hover:bg-white/10 border border-white/10 rounded-xl font-bold transition-all active:scale-95 disabled:opacity-50"
|
||||
className="flex items-center gap-2 px-6 py-3 bg-white dark:bg-white/5 hover:bg-slate-50 dark:hover:bg-white/10 border border-slate-200 dark:border-white/10 rounded-xl font-bold transition-all active:scale-95 disabled:opacity-50 shadow-sm text-slate-700 dark:text-white"
|
||||
>
|
||||
<Download size={18} />
|
||||
{exporting ? "Exporting..." : "Download JSON"}
|
||||
@@ -403,8 +403,8 @@ export default function CourseSettingsPage() {
|
||||
</div>
|
||||
|
||||
<div className="space-y-4">
|
||||
<h3 className="text-sm font-bold text-gray-300">Import Course</h3>
|
||||
<p className="text-xs text-gray-500">
|
||||
<h3 className="text-sm font-black text-slate-800 dark:text-gray-300 uppercase tracking-wider">Import Course</h3>
|
||||
<p className="text-xs text-slate-500 dark:text-gray-500 font-medium">
|
||||
Upload a previously exported course JSON file. This will create a NEW course
|
||||
within the current organization based on that data.
|
||||
</p>
|
||||
|
||||
Reference in New Issue
Block a user