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

feat: Implement initial e-learning platform frontend including landing page, course discovery, dashboard, and foundational UI components with i18n.

Browse source
This commit is contained in:
supalerk-ar66 2026-02-26 15:20:44 +07:00
parent 5b9cf72046
commit 3a9da1007b
17 changed files with 1631 additions and 1524 deletions
Download patch file Download diff file Expand all files Collapse all files

42
Frontend-Learner/components/classroom/CurriculumSidebar.vue
View file

@ -102,20 +102,20 @@ watch(() => props.courseData, (newData) => {
side="right"
:width="300"
:breakpoint="1024"
class="bg-slate-50 dark:bg-slate-900 shadow-xl"
class="bg-slate-50 dark:!bg-slate-900 shadow-xl"
>
<!-- Main Container: Enforce Column Layout and Full Width -->
<div v-if="courseData" class="flex flex-col w-full h-full overflow-hidden text-slate-900 dark:text-white relative">
<div v-if="courseData" class="flex flex-col w-full h-full overflow-hidden text-slate-900 dark:!text-white relative bg-slate-50 dark:!bg-slate-900">
<!-- 1. Header Section (Fixed at Top) -->
<div class="flex-none p-5 border-b border-slate-200 dark:border-white/10 bg-white dark:bg-slate-900 z-10 w-full">
<h2 class="text-sm font-bold mb-4 line-clamp-2 leading-snug block w-full">{{ getLocalizedText(courseData.course.title) }}</h2>
<div class="flex-none p-5 border-b border-slate-200 dark:border-white/10 bg-white dark:!bg-slate-900 z-10 w-full">
<h2 class="text-sm font-bold mb-4 line-clamp-2 leading-snug block w-full text-slate-900 dark:!text-white">{{ getLocalizedText(courseData.course.title) }}</h2>
<div class="flex justify-between items-center mb-2 w-full">
<span class="text-xs font-black uppercase tracking-widest text-slate-500 dark:text-slate-400">{{ $t('course.progress') }}</span>
<span class="text-sm font-black text-blue-600 dark:text-blue-400">{{ progressPercentage }}%</span>
<span class="text-xs font-black uppercase tracking-widest text-slate-500 dark:!text-slate-400">{{ $t('course.progress') }}</span>
<span class="text-sm font-black text-blue-600 dark:!text-blue-400">{{ progressPercentage }}%</span>
</div>
<div class="h-2 w-full bg-slate-100 dark:bg-slate-800 rounded-full overflow-hidden">
<div class="h-2 w-full bg-slate-100 dark:!bg-slate-800 rounded-full overflow-hidden">
<div
class="h-full bg-blue-600 dark:bg-blue-500 rounded-full transition-all duration-700 ease-out"
:style="{ width: `${progressPercentage}%` }"
@ -124,24 +124,24 @@ watch(() => props.courseData, (newData) => {
</div>
<!-- 2. Curriculum List (Scrollable Area) -->
<div class="flex-1 overflow-y-auto bg-slate-50 dark:bg-[#0f1219] w-full p-4 space-y-3">
<div class="flex-1 overflow-y-auto bg-slate-50 dark:!bg-slate-900 w-full p-4 space-y-3">
<q-list class="block w-full">
<div v-for="(chapter, idx) in courseData.chapters" :key="chapter.id" class="block w-full mb-3">
<!-- Chapter Accordion -->
<q-expansion-item
v-model="chapterOpenState[chapter.id]"
class="bg-white dark:bg-[#1a1e29] rounded-xl overflow-hidden shadow-sm border border-slate-200 dark:border-slate-800 w-full"
header-class="rounded-t-xl w-full"
expand-icon-class="text-slate-400"
class="bg-white dark:!bg-slate-800 rounded-xl overflow-hidden shadow-sm border border-slate-200 dark:border-slate-700 w-full"
header-class="rounded-t-xl w-full text-slate-900 dark:!text-white"
expand-icon-class="text-slate-400 dark:!text-slate-300"
>
<template v-slot:header>
<div class="flex items-center w-full py-3 text-slate-900 dark:text-white">
<div class="flex items-center w-full py-3 text-slate-900 dark:!text-white">
<div class="mr-3 flex-shrink-0">
<!-- Chapter Indicator (Check or Number) -->
<div class="w-7 h-7 rounded-full border-2 flex items-center justify-center transition-colors font-bold"
:class="chapterCompletionStatus[chapter.id]
? 'border-green-500 text-green-500 bg-green-50 dark:bg-green-500/10'
: 'border-slate-300 dark:border-slate-600 text-slate-500 dark:text-slate-400 bg-slate-100 dark:bg-slate-800'">
? 'border-green-500 text-green-500 bg-green-50 dark:!bg-green-500/10'
: 'border-slate-300 dark:!border-slate-600 text-slate-500 dark:!text-slate-400 bg-slate-100 dark:!bg-slate-700'">
<q-icon v-if="chapterCompletionStatus[chapter.id]" name="check" size="14px" class="font-bold" />
<span v-else class="text-[10px]">{{ Number(idx) + 1 }}</span>
</div>
@ -149,7 +149,7 @@ watch(() => props.courseData, (newData) => {
<!-- Explicitly handle text overflow -->
<div class="flex-1 min-w-0 pr-2 overflow-hidden">
<div class="font-bold text-sm leading-tight mb-0.5 truncate block w-full">{{ getLocalizedText(chapter.title) }}</div>
<div class="text-[10px] text-slate-500 dark:text-slate-400 font-normal truncate block w-full">
<div class="text-[10px] text-slate-500 dark:!text-slate-400 font-normal truncate block w-full">
{{ chapter.lessons.length }} {{ $t('course.lessonsUnit') }}
</div>
</div>
@ -157,13 +157,13 @@ watch(() => props.courseData, (newData) => {
</template>
<!-- Lessons List -->
<div class="bg-slate-50 dark:bg-[#0f1219]/50 border-t border-slate-100 dark:border-slate-800 w-full">
<div class="bg-slate-50 dark:!bg-slate-800/50 border-t border-slate-100 dark:border-slate-700 w-full">
<div
v-for="(lesson, lIdx) in chapter.lessons"
:key="lesson.id"
class="flex items-center px-4 py-3 cursor-pointer transition-all border-l-4 hover:bg-slate-100 dark:hover:bg-slate-800/50 w-full"
class="flex items-center px-4 py-3 cursor-pointer transition-all border-l-4 hover:bg-slate-100 dark:hover:!bg-slate-700/50 w-full"
:class="currentLessonId === lesson.id
? 'border-blue-600 bg-blue-50 dark:bg-blue-900/10'
? 'border-blue-600 bg-blue-50 dark:!bg-blue-900/40'
: 'border-transparent'"
@click="!lesson.is_locked && emit('select-lesson', lesson.id)"
>
@ -178,13 +178,13 @@ watch(() => props.courseData, (newData) => {
<!-- Active/Playing (If not completed) -->
<q-icon v-else-if="currentLessonId === lesson.id"
name="play_circle_filled"
class="text-blue-600 dark:text-blue-400 animate-pulse"
class="text-blue-600 dark:!text-blue-400 animate-pulse"
size="20px"
/>
<!-- Locked -->
<q-icon v-else-if="lesson.is_locked"
name="lock"
class="text-slate-400 opacity-70"
class="text-slate-400 dark:!text-slate-500 opacity-70"
size="18px"
/>
<!-- Not Started -->
@ -193,7 +193,7 @@ watch(() => props.courseData, (newData) => {
<div class="flex-1 min-w-0 overflow-hidden">
<div class="text-xs font-bold truncate leading-snug block w-full"
:class="currentLessonId === lesson.id ? 'text-blue-700 dark:text-blue-300' : 'text-slate-600 dark:text-slate-300'"
:class="currentLessonId === lesson.id ? 'text-blue-700 dark:!text-blue-300' : 'text-slate-600 dark:!text-slate-300'"
>
{{ getLocalizedText(lesson.title) }}
</div>

5
Frontend-Learner/components/discovery/CourseDetailView.vue
View file

@ -66,11 +66,6 @@ const instructorData = computed(() => {
<template>
<div class="animate-fade-in-up">
<div class="flex items-center gap-2 mb-8 group cursor-pointer" @click="emit('back')">
<q-icon name="arrow_back" size="20px" class="text-slate-400 group-hover:text-blue-600 transition-colors" />
<span class="text-sm font-bold text-slate-500 group-hover:text-blue-600 transition-colors uppercase tracking-widest">{{ $t('common.back') }}</span>
</div>
<div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
<!-- Left: Content Detail -->
<div class="lg:col-span-2 space-y-8">

206
Frontend-Learner/components/layout/AppHeader.vue
View file

@ -1,168 +1,116 @@
<script setup lang="ts">
/**
* @file AppHeader.vue
* @description The main header for the authenticated application dashboard.
* Uses Quasar QToolbar.
* @description The main header for the EduLearn application dashboard.
*/
import { ref, computed } from "vue";
const props = defineProps<{
/** Controls visibility of the sidebar toggle button */
showSidebarToggle?: boolean;
/** Type of navigation links to display */
navType?: "public" | "learner";
}>();
const emit = defineEmits<{
/** Emitted when the hamburger menu is clicked */
toggleSidebar: [];
/** Emitted when the mobile menu toggle is clicked */
toggleRightDrawer: [];
}>();
const { t } = useI18n();
const route = useRoute();
// Automatically determine navType based on route if not explicitly passed
const navTypeComputed = computed(() => {
if (props.navType) return props.navType;
// Show learner nav for dashboard, browse, classroom, and course details
const learnerRoutes = ["/dashboard", "/browse", "/classroom", "/course"];
return learnerRoutes.some((r) => route.path.startsWith(r))
? "learner"
: "public";
});
const { currentUser } = useAuth();
const { locale, setLocale } = useI18n();
const { isDark, set: setTheme } = useThemeMode();
const toggleLanguage = () => {
setLocale(locale.value === 'th' ? 'en' : 'th');
};
const toggleTheme = () => {
setTheme(!isDark.value);
};
</script>
<template>
<q-toolbar class="bg-white dark:!bg-[#0f172a] text-slate-900 dark:!text-white h-16 border-none p-0 overflow-visible">
<div class="w-full px-4 md:px-12 flex items-center h-full no-wrap relative">
<q-toolbar class="bg-white dark:!bg-[#020617] text-slate-900 dark:!text-white h-20 border-b border-slate-50 dark:border-slate-800/50 px-6">
<!-- Left: Hamburger Toggle -->
<q-btn
flat
round
dense
icon="menu"
class="text-slate-400 hover:text-blue-600 transition-colors"
size="16px"
@click="$emit('toggleSidebar')"
/>
<q-space />
<!-- Right Section -->
<div class="flex items-center gap-2 sm:gap-4 md:gap-6 no-wrap">
<!-- Mobile Sidebar Toggle (For non-learner routes) -->
<!-- Theme Toggle -->
<q-btn
v-if="showSidebarToggle !== false && navTypeComputed !== 'learner' && $q.screen.lt.md"
flat
round
dense
icon="menu"
class="mr-2 text-gray-500"
@click="$emit('toggleSidebar')"
/>
<!-- Branding: Logo + Name -->
<div
class="flex items-center gap-3 cursor-pointer group flex-shrink-0"
@click="navigateTo('/dashboard')"
:icon="isDark ? 'dark_mode' : 'light_mode'"
:class="isDark ? 'text-blue-400' : 'text-amber-500'"
class="transition-all active:scale-90"
size="12px"
@click="toggleTheme"
>
<div class="w-10 h-10 rounded-xl bg-blue-600 flex items-center justify-center text-white font-black shadow-lg shadow-blue-600/30 group-hover:scale-110 transition-transform flex-shrink-0">
E
<q-tooltip>{{ isDark ? 'โหมดกลางคืน' : 'โหมดกลางวัน' }}</q-tooltip>
</q-btn>
<!-- Language Switcher (Pill Style) -->
<div
@click="toggleLanguage"
class="flex items-center bg-slate-50 dark:bg-slate-800/50 border border-slate-100 dark:border-slate-800 rounded-xl p-0.5 sm:p-1 cursor-pointer hover:bg-slate-100 transition-all font-bold text-[11px] sm:text-[13px] select-none"
>
<div :class="locale === 'th' ? 'bg-white dark:bg-slate-700 shadow-sm text-blue-600' : 'text-slate-400'" class="px-2 sm:px-3 py-1 rounded-lg transition-all">TH</div>
<div class="w-[1px] h-3 bg-slate-200 dark:bg-slate-700 mx-0.5"></div>
<div :class="locale === 'en' ? 'bg-white dark:bg-slate-700 shadow-sm text-blue-600' : 'text-slate-400'" class="px-2 sm:px-3 py-1 rounded-lg transition-all">EN</div>
</div>
<!-- Divider -->
<div class="hidden sm:block w-[1px] h-8 bg-slate-100 dark:bg-slate-800"></div>
<!-- ส่วนข้อมูลผู้ใช้งาน (User Profile) -->
<div class="flex items-center gap-3 cursor-pointer group" @click="navigateTo('/dashboard/profile')">
<!-- ชื่อและบทบาท (แสดงเฉพาะบนจอที่ใหญ่กว่า 600px) -->
<div class="user-info-text flex flex-col items-end text-right">
<span class="text-[15px] font-bold text-slate-900 dark:text-white leading-tight">
{{ currentUser?.firstName || 'User' }} {{ currentUser?.lastName || '' }}
</span>
<span class="text-[11px] text-slate-500 font-medium">{{ $t('common.student') }}</span>
</div>
<div class="flex flex-col text-left">
<span class="font-black text-[15px] md:text-lg leading-none tracking-tight text-slate-900 dark:text-white group-hover:text-blue-600 transition-colors">E-Learning</span>
<span class="text-[9px] md:text-[10px] font-bold uppercase tracking-[0.2em] leading-none mt-1 text-slate-500">Platform</span>
<!-- รูปโปรไฟล์พร้อมวงแหวน Gradient นุ่มนวล -->
<div class="relative p-[3px] rounded-full bg-gradient-to-tr from-[#FFD1D1] via-[#E2E8FF] to-[#D1F7FF] dark:from-slate-800 dark:to-slate-700 transition-transform group-hover:scale-105">
<div class="bg-white dark:bg-[#020617] p-[1.5px] rounded-full shadow-sm">
<UserAvatar
:photoURL="currentUser?.photoURL"
:firstName="currentUser?.firstName"
:lastName="currentUser?.lastName"
size="40"
class="w-[40px] h-[40px]"
/>
</div>
</div>
</div>
<!-- Desktop Navigation -->
<nav class="header-desktop items-center gap-6 lg:gap-8 text-[14px] font-bold ml-12 flex-shrink-0 h-full">
<NuxtLink to="/dashboard" class="nav-link" exact-active-class="active">{{ $t("sidebar.overview") }}</NuxtLink>
<NuxtLink to="/browse/discovery" class="nav-link" active-class="active">{{ $t("landing.allCourses") }}</NuxtLink>
<NuxtLink to="/dashboard/my-courses" class="nav-link" exact-active-class="active">{{ $t("sidebar.myCourses") || 'คอร์สเรียนของฉัน' }}</NuxtLink>
</nav>
<q-space />
<!-- Right Section: Tools -->
<div class="flex items-center gap-2 flex-shrink-0 no-wrap">
<!-- Desktop Only Tools -->
<div class="header-desktop items-center gap-4 flex-shrink-0">
<LanguageSwitcher />
<UserMenu />
</div>
<!-- Mobile/Tablet Tools Hidden (Moved to Drawer) -->
<!-- Just keep space between logo and hamburger -->
<!-- Mobile/Tablet Hamburger -->
<q-btn
flat
round
dense
icon="menu"
class="header-mobile text-slate-700 dark:text-white bg-slate-100 dark:bg-slate-800 flex-shrink-0"
style="width: 40px; height: 40px; min-width: 40px;"
@click="$emit('toggleRightDrawer')"
/>
</div>
</div>
</q-toolbar>
</template>
<style scoped>
/* High Priority Visibility Logic */
@media (max-width: 1023px) {
.header-desktop {
/* Ensure toolbar height is consistent */
:deep(.q-toolbar) {
min-height: 80px;
}
/* Hide user name only on small mobile screens */
@media (max-width: 600px) {
.user-info-text {
display: none !important;
}
.header-mobile {
display: flex !important;
}
}
@media (min-width: 1024px) {
.header-mobile {
display: none !important;
}
.header-desktop {
display: flex !important;
}
}
.nav-link {
color: #64748b; /* slate-500 */
text-decoration: none;
transition: all 0.3s ease;
text-transform: uppercase;
letter-spacing: 0.05em;
white-space: nowrap;
position: relative;
height: 100%;
display: flex;
align-items: center;
padding: 0 4px;
}
.nav-link:hover {
color: #2563eb; /* blue-600 */
}
.nav-link.active {
color: #2563eb; /* blue-600 */
}
.nav-link::after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
width: 0;
height: 3px;
background-color: #2563eb;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
transition: all 0.3s ease;
transform: translateX(-50%);
}
.nav-link.active::after {
width: 100%;
}
.router-link-active {
color: #2563eb !important;
}
</style>

164
Frontend-Learner/components/layout/AppSidebar.vue
View file

@ -1,79 +1,145 @@
<script setup lang="ts">
/**
* @file AppSidebar.vue
* @description Sidebar navigation for the authenticated dashboard.
* Uses Quasar QList for structure.
* @description เมนูด้านข้างสำหรับการนำทาง (Sidebar Navigation)
*/
const { sidebarItems } = useNavItems()
// 1. นำเข้า Composables และไลบรารี
import { useQuasar } from 'quasar'
const { t } = useI18n()
const navItems = sidebarItems
const route = useRoute()
const $q = useQuasar()
const { logout } = useAuth()
const { isDark } = useThemeMode()
// 2. กำหนดข้อมูลเมนูหลัก (Main Navigation)
const menuItems = computed(() => [
{ to: '/dashboard', icon: 'grid_view', label: t('sidebar.overview') },
{ to: '/dashboard/my-courses', icon: 'book', label: t('sidebar.myCourses') }
])
const handleNavigate = (path: string) => {
if (import.meta.client) {
window.location.href = path
}
// 3. กำหนดข้อมูลเมนูบัญชี (Account Navigation)
const accountItems = computed(() => [
{ to: '/dashboard/profile', icon: 'settings', label: t('userMenu.settings') }
])
// 4. ฟังก์ชันการออกจากระบบ (Logout Function)
const handleLogout = () => {
$q.dialog({
title: t('auth.logoutConfirmTitle'),
message: t('auth.logoutConfirmMessage'),
cancel: {
flat: true,
color: isDark.value ? 'grey-4' : 'grey-7',
label: t('common.cancel')
},
ok: {
flat: false,
color: 'red-500',
label: t('auth.logout'),
unelevated: true
},
dark: isDark.value,
class: 'p-4 rounded-2xl text-slate-900 dark:text-white',
persistent: true
}).onOk(async () => {
await logout()
})
}
</script>
<template>
<div class="flex flex-col h-full bg-transparent border-r border-slate-200 dark:border-slate-800">
<div class="flex flex-col h-full bg-white dark:!bg-[#04091a] px-4 py-6 border-r border-slate-100 dark:border-slate-800">
<!-- Logo Section -->
<div class="flex items-center gap-3 px-2 mb-10 transition-transform active:scale-95 cursor-pointer" @click="navigateTo('/dashboard')">
<div class="w-10 h-10 rounded-xl bg-blue-600 flex items-center justify-center shadow-lg shadow-blue-500/20">
<q-icon name="school" color="white" size="24px" />
</div>
<span class="text-[22px] font-black tracking-tight text-slate-800 dark:text-white">EduLearn</span>
</div>
<!-- Navigation Items -->
<q-list padding class="text-slate-600 dark:text-slate-400 flex-grow px-3 pt-6">
<q-item
v-for="item in navItems"
<!-- Main Navigation -->
<div class="space-y-1 mb-8">
<NuxtLink
v-for="item in menuItems"
:key="item.to"
clickable
v-ripple
@click="handleNavigate(item.to)"
class="rounded-xl mb-1 text-slate-700 dark:text-slate-200 hover:bg-slate-100 dark:hover:bg-white/5"
:class="{ 'sidebar-item--active': $route.path === item.to || ($route.path === '/dashboard' && item.to === '/dashboard') }"
:to="item.to"
class="flex items-center gap-4 px-4 py-3 rounded-2xl transition-all group relative nav-item"
:class="route.path === item.to ? 'active' : 'text-slate-500 hover:bg-slate-50 dark:hover:bg-slate-800 hover:text-slate-900 dark:hover:text-slate-200'"
>
<q-item-section avatar>
<q-icon :name="item.icon" size="22px" />
</q-item-section>
<q-icon :name="item.icon" size="24px" class="transition-colors" />
<span class="font-bold text-[15px]">{{ item.label }}</span>
<q-item-section>
<q-item-label class="font-bold text-sm">{{ $t(item.labelKey) }}</q-item-label>
</q-item-section>
</q-item>
</q-list>
<!-- Active Indicator -->
<div v-if="route.path === item.to" class="absolute left-0 top-1/2 -translate-y-1/2 w-1.5 h-6 bg-blue-600 rounded-r-full shadow-[2px_0_8px_rgba(37,99,235,0.4)]"></div>
</NuxtLink>
</div>
<!-- Account Section -->
<div class="px-4 mb-4">
<span class="text-[12px] font-bold text-slate-400 uppercase tracking-widest">{{ $t('sidebar.accountGroup') }}</span>
</div>
<div class="space-y-1">
<NuxtLink
v-for="item in accountItems"
:key="item.to"
:to="item.to"
class="flex items-center gap-4 px-4 py-3 rounded-2xl transition-all group nav-item"
:class="route.path === item.to ? 'active' : 'text-slate-500 hover:bg-slate-50 dark:hover:bg-slate-800 hover:text-slate-900 dark:hover:text-slate-200'"
>
<q-icon :name="item.icon" size="24px" />
<span class="font-bold text-[15px]">{{ item.label }}</span>
</NuxtLink>
<!-- Logout Button -->
<button
@click="handleLogout"
class="w-full flex items-center gap-4 px-4 py-3 rounded-2xl transition-all text-red-500 hover:bg-red-50 dark:hover:bg-red-900/10 font-bold text-[15px] group"
>
<q-icon name="logout" size="24px" class="group-hover:translate-x-1 transition-transform" />
<span>{{ $t('userMenu.logout') }}</span>
</button>
</div>
<q-space />
<!-- Promo Card -->
<div class="mt-auto p-5 rounded-[2rem] bg-slate-50 dark:bg-slate-800/50 border border-slate-100 dark:border-slate-800 relative overflow-hidden group">
<div class="relative z-10">
<h4 class="font-black text-slate-800 dark:text-white text-sm mb-1">{{ $t('sidebar.promoTitle') }}</h4>
<p class="text-[11px] text-slate-500 dark:text-slate-400 mb-4">{{ $t('sidebar.promoSubtitle') }}</p>
<q-btn
unelevated
class="full-width rounded-xl bg-blue-600 hover:bg-blue-700 text-white font-bold py-2.5 no-caps transition-all active:scale-95 text-xs shadow-md shadow-blue-500/20"
@click="navigateTo('/browse/discovery')"
>
{{ $t('sidebar.learnMore') }}
</q-btn>
</div>
<!-- Subtle background decoration -->
<div class="absolute -right-2 -bottom-2 w-16 h-16 bg-blue-500/5 rounded-full blur-xl"></div>
</div>
</div>
</template>
<style scoped>
.sidebar-item--active {
background: #eff6ff !important; /* blue-50 */
color: #1d4ed8 !important; /* blue-700 */
position: relative;
.nav-item.active {
background: #EFF6FF;
color: #2563EB;
}
.sidebar-item--active::before {
content: '';
position: absolute;
left: 0;
top: 15%;
height: 70%;
width: 4px;
background: #2563eb;
border-radius: 0 4px 4px 0;
.dark .nav-item.active {
background: rgba(37,99,235,0.1);
color: #60A5FA;
}
/* Dark Mode Active State Enhancement */
.dark .sidebar-item--active {
background: rgba(59, 130, 246, 0.12) !important;
color: #60a5fa !important; /* blue-400 */
.nav-item.active .q-icon {
color: #2563EB;
}
.dark .sidebar-item--active .q-icon {
color: #60a5fa !important; /* blue-400 */
}
.dark .sidebar-item--active::before {
background: #3b82f6;
.dark .nav-item.active .q-icon {
color: #60A5FA;
}
</style>

56
Frontend-Learner/components/layout/LandingFooter.vue
View file

@ -6,30 +6,34 @@
</script>
<template>
<footer class="bg-slate-50 pt-16 pb-8 border-t border-slate-200">
<footer class="bg-white pt-16 pb-8 border-t border-slate-200">
<div class="container mx-auto px-6 md:px-12">
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8 mb-12 text-left">
<!-- Brand -->
<div class="space-y-6">
<div class="flex items-center gap-3">
<div class="w-12 h-12 rounded-xl bg-blue-600 flex items-center justify-center text-white font-black shadow-lg shadow-blue-600/30 shrink-0">
E
</div>
<div class="flex flex-col">
<span class="font-black text-lg leading-none tracking-tight text-slate-900">E-Learning</span>
<span class="text-[10px] font-bold uppercase tracking-[0.2em] leading-none mt-1 text-slate-500">Platform</span>
</div>
</div>
<p class="text-slate-500 text-sm leading-relaxed max-w-xs">
แพลตฟอร์มการเรียนรู้ออนไลน์ที่มุ่งเน้นการพัฒนาทักษะดิจิทัลสำหรับคนรุ่นใหม่ เรียนรู้ได้ทุกที่ ทุกเวลา กับผู้เชี่ยวชาญตัวจริง
</p>
<NuxtLink to="/" class="flex items-center gap-3 group">
<div class="bg-blue-600 text-white font-black rounded-full px-6 w-10 h-10 flex items-center justify-center group-hover:scale-110 transition-transform">
<q-icon name="o_school" size="24px" />
</div>
<div class="flex flex-col">
<span class="font-bold text-lg leading-none tracking-tight transition-colors text-slate-900">
EduLearn
</span>
<span class="text-[10px] text-slate-500 font-semibold uppercase tracking-[0.4em] leading-none mt-0.5 transition-colors">
Platform
</span>
</div>
</NuxtLink>
<p class="text-slate-500 text-sm leading-relaxed max-w-xs">
แพลตฟอร์มการเรียนรู้ออนไลน์ที่มุ่งเน้นการพัฒนาทักษะดิจิทัลสำหรับคนรุ่นใหม่ เรียนรู้ได้ทุกที่ ทุกเวลา กับผู้เชี่ยวชาญตัวจริง
</p>
</div>
<!-- Links -->
<div class="lg:pl-8">
<h4 class="font-bold text-slate-900 mb-6 text-base">คอร์สเรียน</h4>
<ul class="space-y-3 text-sm text-slate-500">
<li><NuxtLink to="/browse" class="hover:text-blue-600 transition-colors inline-block">คอร์สทั้งหมด</NuxtLink></li>
<h4 class="font-bold text-slate-900 mb-6 text-base tracking-tight">คอร์สเรียน</h4>
<ul class="space-y-3 text-sm text-slate-500 flex flex-col gap-2">
<li class=""><NuxtLink to="/browse" class="hover:text-blue-600 transition-colors inline-block">คอร์สทั้งหมด</NuxtLink></li>
<li><NuxtLink to="/browse/recommended" class="hover:text-blue-600 transition-colors inline-block">คอร์สแนะนำ</NuxtLink></li>
<li><a href="#" class="hover:text-blue-600 transition-colors inline-block">โปรโมชั่น</a></li>
<li><a href="#" class="hover:text-blue-600 transition-colors inline-block">สำหรับองค์กร</a></li>
@ -39,7 +43,7 @@
<!-- Support -->
<div>
<h4 class="font-bold text-slate-900 mb-6 text-base">ช่วยเหลือ</h4>
<ul class="space-y-3 text-sm text-slate-500">
<ul class="space-y-3 text-sm text-slate-500 flex flex-col gap-2">
<li><a href="#" class="hover:text-blue-600 transition-colors inline-block">คำถามที่พบบ่อย (FAQ)</a></li>
<li><a href="#" class="hover:text-blue-600 transition-colors inline-block">วิธีการใช้งาน</a></li>
<li><a href="#" class="hover:text-blue-600 transition-colors inline-block">เงื่อนไขการใช้งาน</a></li>
@ -53,11 +57,9 @@
<div class="flex flex-col gap-5">
<!-- Location -->
<div class="flex flex-row items-start gap-4 flex-nowrap">
<div class="w-10 h-10 rounded-xl bg-blue-50 flex items-center justify-center shrink-0 text-blue-600 shadow-sm">
<q-icon name="location_on" size="20px" />
</div>
<q-icon name="o_location_on" size="20px" color="slate-800" />
<div class="flex flex-col gap-1 min-w-0">
<span class="font-bold text-slate-900 text-sm leading-tight pt-1">Bronco Hourse</span>
<span class="font-semibold text-slate-800 text-sm leading-tight">Bronco Hourse</span>
<p class="text-slate-500 text-[11px] leading-relaxed">
74/2 Wiang Kaew Road, Tambon Si Phum, Amphoe Mueang Chiang Mai, Chang Wat Chiang Mai 50200
</p>
@ -66,20 +68,16 @@
<!-- Phone -->
<div class="flex flex-row items-center gap-4 flex-nowrap">
<div class="w-10 h-10 rounded-xl bg-blue-50 flex items-center justify-center shrink-0 text-blue-600 shadow-sm">
<q-icon name="phone" size="18px" />
</div>
<a href="tel:052-076-025" class="text-slate-600 hover:text-blue-600 font-semibold text-sm transition-colors truncate">
<q-icon name="o_phone" size="18px" color="slate-800" />
<a href="tel:052-076-025" class="font-semibold text-slate-800 text-sm hover:text-blue-600 font-semibold text-sm transition-colors truncate">
052-076-025
</a>
</div>
<!-- Email -->
<div class="flex flex-row items-center gap-4 flex-nowrap">
<div class="w-10 h-10 rounded-xl bg-blue-50 flex items-center justify-center shrink-0 text-blue-600 shadow-sm">
<q-icon name="email" size="18px" />
</div>
<a href="mailto:info@chamomind.com" class="text-slate-600 hover:text-blue-600 font-semibold text-sm transition-colors truncate">
<q-icon name="o_email" size="18px" color="slate-800" />
<a href="mailto:info@chamomind.com" class="font-semibold text-slate-800 text-sm hover:text-blue-600 font-semibold text-sm transition-colors truncate">
info@chamomind.com
</a>
</div>

46
Frontend-Learner/components/layout/LandingHeader.vue
View file

@ -5,6 +5,7 @@
* Features a transparent background that becomes solid/glass upon scrolling.
* Responsive: Collapses into a drawer on mobile (md breakpoint).
*/
const text = ref('');
// Track scrolling state to adjust header styling
const isScrolled = ref(false)
@ -41,24 +42,24 @@ onUnmounted(() => {
- Transitions between transparent and glass effect based on scroll.
-->
<header
class="fixed top-0 left-0 right-0 z-[100] transition-all duration-300"
:class="[isScrolled ? 'h-16 glass-nav shadow-lg' : 'h-24 bg-transparent']"
class="fixed top-0 left-0 right-0 z-[100] transition-all"
:class="[isScrolled ? 'h-20 glass-nav shadow-lg' : 'h-20 bg-transparent duration-300 border-b border-b-grey-7 ']"
>
<div class="container mx-auto px-6 md:px-12 h-full flex items-center justify-start">
<div class="container mx-auto px-6 md:px-12 h-full flex items-center justify-between">
<!-- Left Section: Logo -->
<NuxtLink to="/" class="flex items-center gap-3 group">
<div class="bg-blue-600 text-white font-black rounded-xl w-10 h-10 flex items-center justify-center shadow-lg shadow-blue-600/30 group-hover:scale-110 transition-transform">
E
<div class="bg-blue-600 text-white font-black rounded-full px-6 w-10 h-10 flex items-center justify-center group-hover:scale-110 transition-transform">
<q-icon name="o_school" size="24px" />
</div>
<div class="flex flex-col">
<span
class="font-black text-lg leading-none tracking-tight transition-colors"
class="font-bold text-lg leading-none tracking-tight transition-colors"
:class="[isScrolled ? 'text-white' : 'text-slate-900 group-hover:text-blue-600']"
>
E-Learning
EduLearn
</span>
<span
class="text-[10px] font-bold uppercase tracking-[0.2em] leading-none mt-1 transition-colors"
class="text-[10px] font-semibold uppercase tracking-[0.4em] leading-none mt-0.5 transition-colors"
:class="[isScrolled ? 'text-slate-400' : 'text-slate-500']"
>
Platform
@ -67,11 +68,11 @@ onUnmounted(() => {
</NuxtLink>
<!-- Desktop Navigation (Visible by default, hidden on mobile via CSS 'desktop-nav') -->
<nav class="flex desktop-nav items-center gap-8 text-sm font-bold ml-12">
<!-- <nav class="flex desktop-nav items-center gap-8 text-[16px] font-medium">
<NuxtLink
to="/browse"
class="transition-colors relative group py-2"
:class="[isScrolled ? 'text-slate-300 hover:text-white' : 'text-slate-600 hover:text-blue-600']"
:class="[isScrolled ? 'text-white hover:text-white' : 'text-grey-8 hover:text-blue-600']"
>
{{ $t('sidebar.onlineCourses') }}
<span class="absolute bottom-0 left-0 w-0 h-0.5 bg-blue-600 transition-all group-hover:w-full"/>
@ -79,21 +80,32 @@ onUnmounted(() => {
<NuxtLink
to="/browse/recommended"
class="transition-colors relative group py-2"
:class="[isScrolled ? 'text-slate-300 hover:text-white' : 'text-slate-600 hover:text-blue-600']"
:class="[isScrolled ? 'text-white hover:text-white' : 'text-grey-8 hover:text-blue-600']"
>
{{ $t('sidebar.recommendedCourses') }}
<span class="absolute bottom-0 left-0 w-0 h-0.5 bg-blue-600 transition-all group-hover:w-full"/>
</NuxtLink>
</nav>
</nav> -->
<!-- Desktop Action Buttons (Visible by default, hidden on mobile via CSS 'desktop-nav') -->
<div class="flex desktop-nav items-center gap-4 ml-auto">
<div class="flex desktop-nav items-center gap-4">
<q-input v-model="text" label="ค้นหาคอร์สเรียน..." rounded
standout="bg-black text-white"
:dark="isScrolled ? true : false"
>
<template v-slot:prepend>
<q-icon name="search" class="pl-3" color="grey-6"/>
</template>
</q-input>
<template v-if="!isAuthenticated">
<!-- Login Button -->
<NuxtLink
to="/auth/login"
class="px-6 py-2.5 rounded-xl font-bold text-sm border-2 transition-all hover:-translate-y-0.5"
:class="[isScrolled ? 'border-white/20 text-white hover:bg-white/10' : 'border-blue-100 text-blue-600 bg-blue-50 hover:bg-blue-100 hover:border-blue-200']"
class="px-5 py-4 rounded-full text-slate-700 font-semibold text-sm transition-all hover:-translate-y-0.5"
:class="[isScrolled ? 'border-white/20 text-white hover:bg-white/10' : 'border-white text-grey-9 bg-white hover:bg-blue-100 hover:border-blue-200']"
>
{{ $t('auth.login') }}
</NuxtLink>
@ -101,7 +113,7 @@ onUnmounted(() => {
<!-- Register Button -->
<NuxtLink
to="/auth/register"
class="px-6 py-2.5 rounded-xl font-bold text-sm text-white bg-gradient-to-br from-blue-600 to-indigo-600 shadow-lg shadow-blue-600/20 hover:shadow-blue-600/40 hover:-translate-y-0.5 transition-all"
class="px-5 py-4 rounded-full bg-blue-600 text-white font-semibold text-sm hover:shadow-blue-600/40 hover:-translate-y-0.5 transition-all"
>
{{ $t('auth.getStarted') }}
</NuxtLink>
@ -110,7 +122,7 @@ onUnmounted(() => {
<template v-else>
<NuxtLink
to="/dashboard"
class="px-6 py-2.5 rounded-xl font-bold text-sm text-white bg-gradient-to-br from-blue-600 to-indigo-600 shadow-lg shadow-blue-600/20 hover:shadow-blue-600/40 hover:-translate-y-0.5 transition-all"
class="bg-blue-600 text-white font-semibold text-sm px-5 py-4 rounded-full hover:shadow-blue-600/40 hover:-translate-y-0.5 transition-all"
>
{{ $t('landing.goToDashboard') }}
</NuxtLink>