chamomind/elearning
7
0
Fork 0
Code Issues 4 Pull requests Projects Releases Packages 3 Wiki Activity Actions

feat: implement initial e-learning frontend UI, including course details, layout, navigation, and dashboard components.

Browse source
This commit is contained in:
supalerk-ar66 2026-02-09 17:26:58 +07:00
parent a54251f11e
commit a8339ed0ab
8 changed files with 99 additions and 105 deletions
Download patch file Download diff file Expand all files Collapse all files

58
Frontend-Learner/assets/css/main.css
View file

@ -9,9 +9,10 @@
/* Colors - Light Mode Default */
--bg-body: #f8fafc;
--bg-surface: #ffffff;
--text-main: #000000; /* ดำสนิทสำหรับหัวข้อ */
--text-secondary: #111827; /* เทาเข้มมากสำหรับคำอธิบาย */
--primary: #3b82f6; /* Primary Blue */
--bg-elevated: #ffffff;
--text-main: #0f172a; /* text-slate-900: More natural than pure black */
--text-secondary: #475569; /* text-slate-600: Muted subtext */
--primary: #3b82f6; /* Primary Blue */
/* Semantic mappings */
--border-color: #e2e8f0;
@ -58,36 +59,29 @@
/* Dark Mode (applied when `.dark` class is present on <html>) */
.dark {
/* Deep Oceanic 3-Level Surfaces */
--bg-body: #020617; /* Slate 950: Deep Sea */
--bg-surface: #0f172a; /* Slate 900: Sidebar/Main Cards */
--bg-elevated: #1e293b; /* Slate 800: Inner Cards/Highlights */
/* Oceanic Palette: Standardized for entire App */
--bg-body: #020617; /* Slate-950: Main Background */
--bg-surface: #0f172a; /* Slate-900: Sidebar & Header */
--bg-elevated: #1e293b; /* Slate-800: Cards & Hover states */
--text-main: #f8fafc; /* Slate-50: Brightest for titles */
--text-secondary: #94a3b8; /* Slate-400: Muted for subtext */
--border-color: rgba(255, 255, 255, 0.06);
--primary-light: rgba(59, 130, 246, 0.15);
/* Neutral scale for dark mode utility usage */
--neutral-100: #1e293b;
--neutral-200: #334155;
--neutral-800: #0f172a;
--neutral-900: #020617;
--text-main: #f8fafc; /* text-slate-50: Brighter white for main text */
--text-secondary: #94a3b8; /* text-slate-300: Lighter grey for secondary text */
--border-color: rgba(
255,
255,
255,
0.08
); /* White with low opacity for subtle borders */
--neutral-50: #1e293b;
--neutral-100: #334155;
--neutral-200: #475569;
--neutral-300: #64748b;
--neutral-400: #94a3b8;
--neutral-500: #cbd5e1;
--neutral-600: #f1f5f9;
--neutral-700: #f8fafc;
--neutral-800: #1e293b;
--neutral-900: #0f172a;
--shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
--shadow-md:
0 4px 12px -2px rgb(0 0 0 / 0.12), 0 2px 6px -2px rgb(0 0 0 / 0.08);
--shadow-lg:
0 12px 24px -4px rgb(0 0 0 / 0.15), 0 8px 16px -4px rgb(0 0 0 / 0.1);
--shadow-xl: 0 20px 40px -8px rgb(0 0 0 / 0.25);
/* Deep shadows for dark elements to prevent "glowing" effect */
--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.4);
--shadow-md: 0 4px 12px -2px rgba(0, 0, 0, 0.6);
--shadow-lg: 0 12px 24px -4px rgba(0, 0, 0, 0.7);
--shadow-xl: 0 20px 40px -8px rgba(0, 0, 0, 0.8);
}
* {