From 90d50dc84a7b7ef45a4e18d577b2f75b7b2e4664 Mon Sep 17 00:00:00 2001 From: supalerk-ar66 Date: Tue, 27 Jan 2026 11:31:08 +0700 Subject: [PATCH] feat: Implement initial UI design system, theming, and classroom learning page. --- Frontend-Learner/assets/css/main.css | 11 +++-- Frontend-Learner/pages/classroom/learning.vue | 19 ++++---- Frontend-Learner/plugins/theme.client.ts | 23 +++++++--- Frontend-Learner/คู่มืออธิบาย/web-dev-details.md | 46 ++++++++++++++++++- 4 files changed, 78 insertions(+), 21 deletions(-) diff --git a/Frontend-Learner/assets/css/main.css b/Frontend-Learner/assets/css/main.css index c6d8a379..243ccdae 100644 --- a/Frontend-Learner/assets/css/main.css +++ b/Frontend-Learner/assets/css/main.css @@ -58,11 +58,14 @@ /* Dark Mode (applied when `.dark` class is present on ) */ .dark { - --bg-body: #0f172a; - --bg-surface: #1e293b; /* User requested specific color */ + /* 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 */ + --text-main: #f8fafc; /* text-slate-50: Brighter white for main text */ - --text-secondary: #cbd5e1; /* text-slate-300: Lighter grey for secondary text */ - --border-color: #334155; /* border-slate-700: Higher contrast border */ + --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; diff --git a/Frontend-Learner/pages/classroom/learning.vue b/Frontend-Learner/pages/classroom/learning.vue index d2723135..e751a930 100644 --- a/Frontend-Learner/pages/classroom/learning.vue +++ b/Frontend-Learner/pages/classroom/learning.vue @@ -240,10 +240,10 @@ onBeforeUnmount(() => {