diff --git a/docs/elearning_architecture.md b/docs/elearning_architecture.md index 74029060..46d0cf7d 100644 --- a/docs/elearning_architecture.md +++ b/docs/elearning_architecture.md @@ -28,21 +28,18 @@ ### 2.1 Core Technologies **Nuxt 3 (Vue 3)** - - SSR/SSG capabilities for better SEO - Auto-imports for components and composables - File-based routing - Built-in state management **Quasar Framework** - - Rich component library (250+ components) - Responsive design out of the box - Cross-platform support (Web, Mobile, Desktop) - Material Design compliance **Tailwind CSS** - - Utility-first CSS framework - Custom design system - Dark mode support @@ -107,50 +104,52 @@ frontend/ ### 2.3 Key Configuration Files **nuxt.config.ts** - ```typescript export default defineNuxtConfig({ - modules: ["nuxt-quasar-ui", "@pinia/nuxt", "@nuxtjs/tailwindcss"], - + modules: [ + 'nuxt-quasar-ui', + '@pinia/nuxt', + '@nuxtjs/tailwindcss' + ], + quasar: { - plugins: ["Notify", "Dialog", "Loading"], + plugins: ['Notify', 'Dialog', 'Loading'], config: { brand: { - primary: "#3B82F6", - secondary: "#10B981", - accent: "#F59E0B", - }, - }, + primary: '#3B82F6', + secondary: '#10B981', + accent: '#F59E0B' + } + } }, - + runtimeConfig: { public: { - apiBase: process.env.API_BASE_URL || "http://localhost:3001/api", - }, - }, -}); + apiBase: process.env.API_BASE_URL || 'http://localhost:3001/api' + } + } +}) ``` **tailwind.config.js** - ```javascript module.exports = { content: [ - "./components/**/*.{vue,js,ts}", - "./layouts/**/*.vue", - "./pages/**/*.vue", - "./plugins/**/*.{js,ts}", + './components/**/*.{vue,js,ts}', + './layouts/**/*.vue', + './pages/**/*.vue', + './plugins/**/*.{js,ts}' ], theme: { extend: { colors: { - primary: "#3B82F6", - secondary: "#10B981", - accent: "#F59E0B", - }, - }, - }, -}; + primary: '#3B82F6', + secondary: '#10B981', + accent: '#F59E0B' + } + } + } +} ``` --- @@ -160,21 +159,18 @@ module.exports = { ### 3.1 Core Technologies **Node.js + Express** - - RESTful API design - JWT authentication - Middleware for validation - File upload handling **Prisma ORM** - - Type-safe database queries - Auto-generated migrations - Database introspection - Relation handling **PostgreSQL** - - Relational data integrity - JSONB support for flexibility - Full-text search @@ -224,7 +220,6 @@ backend/ ├── package.json └── tsconfig.json ``` - --- ## 4. Design System & UI Theme @@ -232,7 +227,6 @@ backend/ ### 4.1 Modern Design Principles **Design Philosophy:** - - **Clean & Minimal** - Focus on content, remove unnecessary elements - **Modern & Professional** - Contemporary look suitable for global audience - **Accessible** - WCAG 2.1 AA compliant @@ -242,82 +236,75 @@ backend/ ### 4.2 Color Palette **Primary Colors** - ```css ---primary-50: #eff6ff; ---primary-100: #dbeafe; ---primary-200: #bfdbfe; ---primary-300: #93c5fd; ---primary-400: #60a5fa; ---primary-500: #3b82f6; /* Main primary */ ---primary-600: #2563eb; ---primary-700: #1d4ed8; ---primary-800: #1e40af; ---primary-900: #1e3a8a; +--primary-50: #EFF6FF; +--primary-100: #DBEAFE; +--primary-200: #BFDBFE; +--primary-300: #93C5FD; +--primary-400: #60A5FA; +--primary-500: #3B82F6; /* Main primary */ +--primary-600: #2563EB; +--primary-700: #1D4ED8; +--primary-800: #1E40AF; +--primary-900: #1E3A8A; ``` **Secondary Colors** - ```css ---secondary-500: #10b981; /* Success/Positive */ ---accent-500: #f59e0b; /* Warning/Attention */ ---error-500: #ef4444; /* Error/Danger */ +--secondary-500: #10B981; /* Success/Positive */ +--accent-500: #F59E0B; /* Warning/Attention */ +--error-500: #EF4444; /* Error/Danger */ ``` **Neutral Colors** - ```css ---gray-50: #f9fafb; ---gray-100: #f3f4f6; ---gray-200: #e5e7eb; ---gray-300: #d1d5db; ---gray-400: #9ca3af; ---gray-500: #6b7280; ---gray-600: #4b5563; +--gray-50: #F9FAFB; +--gray-100: #F3F4F6; +--gray-200: #E5E7EB; +--gray-300: #D1D5DB; +--gray-400: #9CA3AF; +--gray-500: #6B7280; +--gray-600: #4B5563; --gray-700: #374151; ---gray-800: #1f2937; +--gray-800: #1F2937; --gray-900: #111827; ``` **Dark Mode** - ```css ---dark-bg-primary: #0f172a; ---dark-bg-secondary: #1e293b; +--dark-bg-primary: #0F172A; +--dark-bg-secondary: #1E293B; --dark-bg-tertiary: #334155; ---dark-text-primary: #f1f5f9; ---dark-text-secondary: #cbd5e1; +--dark-text-primary: #F1F5F9; +--dark-text-secondary: #CBD5E1; ``` ### 4.3 Typography **Font Family** - ```css /* Modern, clean, and widely supported */ -font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", - Arial, sans-serif; +font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', + 'Roboto', 'Helvetica Neue', Arial, sans-serif; /* Thai font support */ -font-family: "Prompt", "Sarabun", "Inter", sans-serif; +font-family: 'Prompt', 'Sarabun', 'Inter', sans-serif; ``` **Font Scale** - ```css ---text-xs: 0.75rem; /* 12px */ ---text-sm: 0.875rem; /* 14px */ ---text-base: 1rem; /* 16px */ ---text-lg: 1.125rem; /* 18px */ ---text-xl: 1.25rem; /* 20px */ ---text-2xl: 1.5rem; /* 24px */ ---text-3xl: 1.875rem; /* 30px */ ---text-4xl: 2.25rem; /* 36px */ ---text-5xl: 3rem; /* 48px */ +--text-xs: 0.75rem; /* 12px */ +--text-sm: 0.875rem; /* 14px */ +--text-base: 1rem; /* 16px */ +--text-lg: 1.125rem; /* 18px */ +--text-xl: 1.25rem; /* 20px */ +--text-2xl: 1.5rem; /* 24px */ +--text-3xl: 1.875rem; /* 30px */ +--text-4xl: 2.25rem; /* 36px */ +--text-5xl: 3rem; /* 48px */ ``` **Font Weights** - ```css --font-normal: 400; --font-medium: 500; @@ -328,41 +315,40 @@ font-family: "Prompt", "Sarabun", "Inter", sans-serif; ### 4.4 Spacing System **8px base unit system** - ```css ---space-1: 0.25rem; /* 4px */ ---space-2: 0.5rem; /* 8px */ ---space-3: 0.75rem; /* 12px */ ---space-4: 1rem; /* 16px */ ---space-5: 1.25rem; /* 20px */ ---space-6: 1.5rem; /* 24px */ ---space-8: 2rem; /* 32px */ ---space-10: 2.5rem; /* 40px */ ---space-12: 3rem; /* 48px */ ---space-16: 4rem; /* 64px */ ---space-20: 5rem; /* 80px */ +--space-1: 0.25rem; /* 4px */ +--space-2: 0.5rem; /* 8px */ +--space-3: 0.75rem; /* 12px */ +--space-4: 1rem; /* 16px */ +--space-5: 1.25rem; /* 20px */ +--space-6: 1.5rem; /* 24px */ +--space-8: 2rem; /* 32px */ +--space-10: 2.5rem; /* 40px */ +--space-12: 3rem; /* 48px */ +--space-16: 4rem; /* 64px */ +--space-20: 5rem; /* 80px */ ``` ### 4.5 Border Radius ```css ---radius-sm: 0.25rem; /* 4px */ ---radius-md: 0.5rem; /* 8px */ ---radius-lg: 0.75rem; /* 12px */ ---radius-xl: 1rem; /* 16px */ ---radius-2xl: 1.5rem; /* 24px */ ---radius-full: 9999px; /* Circle */ +--radius-sm: 0.25rem; /* 4px */ +--radius-md: 0.5rem; /* 8px */ +--radius-lg: 0.75rem; /* 12px */ +--radius-xl: 1rem; /* 16px */ +--radius-2xl: 1.5rem; /* 24px */ +--radius-full: 9999px; /* Circle */ ``` ### 4.6 Shadows ```css ---shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05); ---shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1); ---shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1); ---shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1); +--shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05); +--shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1); +--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1); +--shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1); --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25); ``` **Version:** 1.0 -**Last Updated:** December 2024 +**Last Updated:** December 2024 \ No newline at end of file