From a8339ed0abd030054963ef23f005f2a9c6234875 Mon Sep 17 00:00:00 2001 From: supalerk-ar66 Date: Mon, 9 Feb 2026 17:26:58 +0700 Subject: [PATCH] feat: implement initial e-learning frontend UI, including course details, layout, navigation, and dashboard components. --- Frontend-Learner/assets/css/main.css | 58 +++++++++---------- .../components/course/CourseCard.vue | 16 ++--- .../components/discovery/CategorySidebar.vue | 12 ++-- .../components/discovery/CourseDetailView.vue | 50 ++++++++-------- .../components/layout/AppSidebar.vue | 29 ++++------ Frontend-Learner/components/user/UserMenu.vue | 16 ++--- Frontend-Learner/layouts/default.vue | 6 +- Frontend-Learner/pages/dashboard/index.vue | 17 ++++-- 8 files changed, 99 insertions(+), 105 deletions(-) diff --git a/Frontend-Learner/assets/css/main.css b/Frontend-Learner/assets/css/main.css index 186b68ed..100765f6 100644 --- a/Frontend-Learner/assets/css/main.css +++ b/Frontend-Learner/assets/css/main.css @@ -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 ) */ .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); } * { diff --git a/Frontend-Learner/components/course/CourseCard.vue b/Frontend-Learner/components/course/CourseCard.vue index 2768822d..08b6673a 100644 --- a/Frontend-Learner/components/course/CourseCard.vue +++ b/Frontend-Learner/components/course/CourseCard.vue @@ -50,7 +50,7 @@ const displayDescription = computed(() => getLocalizedText(props.description))