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

feat: Initialize e-learning frontend with course browsing, landing, and authentication pages, along with core layouts and composables.

Browse source
This commit is contained in:
supalerk-ar66 2026-02-04 16:57:25 +07:00
parent a0b93978a7
commit a201c4285b
8 changed files with 129 additions and 198 deletions
Download patch file Download diff file Expand all files Collapse all files

41
Frontend-Learner/pages/browse/index.vue
View file

@ -57,7 +57,7 @@ const filteredCourses = computed(() => {
<template>
<!-- Main Container: Dark Theme Base -->
<div class="relative min-h-screen text-slate-600 dark:text-slate-200 bg-slate-50 dark:bg-slate-900 transition-colors">
<div class="relative min-h-screen text-slate-600 bg-slate-50 transition-colors">
<!-- ==========================================
BACKGROUND EFFECTS
@ -81,7 +81,7 @@ const filteredCourses = computed(() => {
</span>
</div>
<!-- Main Title -->
<h1 class="text-4xl md:text-6xl font-black text-slate-900 dark:text-white mb-6 tracking-tight slide-up" style="animation-delay: 0.1s;">
<h1 class="text-4xl md:text-6xl font-black text-slate-900 mb-6 tracking-tight slide-up" style="animation-delay: 0.1s;">
คอร์สเรียน<span class="text-gradient-cyan">ทั้งหมด</span>
</h1>
<!-- Subtitle -->
@ -103,7 +103,7 @@ const filteredCourses = computed(() => {
<div class="glass-premium rounded-[3rem] p-8 md:p-12 shadow-xl shadow-blue-900/5">
<div class="flex flex-col md:flex-row md:items-center justify-between gap-8 mb-12">
<h2 class="text-2xl font-black text-slate-900 dark:text-white flex items-center gap-3">
<h2 class="text-2xl font-black text-slate-900 flex items-center gap-3">
<span class="w-2 h-8 bg-blue-600 rounded-full"/>
รายการคอร์สเรียน
</h2>
@ -114,7 +114,7 @@ const filteredCourses = computed(() => {
<input
v-model="searchQuery"
type="text"
class="w-full pl-12 pr-6 py-3 bg-slate-100 dark:bg-white/5 border border-slate-200 dark:border-white/10 rounded-xl text-slate-900 dark:text-white placeholder-slate-400 dark:placeholder-slate-500 focus:outline-none focus:bg-white focus:dark:bg-white/10 focus:ring-2 focus:ring-blue-500/50 transition-all font-medium"
class="w-full pl-12 pr-6 py-3 bg-slate-100 border border-slate-200 rounded-xl text-slate-900 placeholder-slate-400 focus:outline-none focus:bg-white focus: focus:ring-2 focus:ring-blue-500/50 transition-all font-medium"
placeholder="ค้นหาบทเรียน..."
>
<div class="absolute left-4 top-1/2 -translate-y-1/2 text-slate-400">
@ -151,21 +151,21 @@ const filteredCourses = computed(() => {
</div>
<!-- Card Content Body -->
<div class="p-6 flex-1 flex flex-col border-t border-slate-100 dark:border-white/5">
<h3 class="text-xl font-bold text-slate-900 dark:text-white mb-2 leading-snug group-hover:text-blue-600 dark:group-hover:text-blue-400 transition-colors line-clamp-2">
<div class="p-6 flex-1 flex flex-col border-t border-slate-100 ">
<h3 class="text-xl font-bold text-slate-900 mb-2 leading-snug group-hover:text-blue-600 transition-colors line-clamp-2">
{{ getLocalizedText(course.title) }}
</h3>
<p class="text-slate-500 dark:text-slate-400 text-xs mb-6 line-clamp-2 leading-relaxed flex-1">
<p class="text-slate-500 text-xs mb-6 line-clamp-2 leading-relaxed flex-1">
{{ getLocalizedText(course.description) }}
</p>
<!-- Meta Information -->
<div class="flex items-center gap-4 mb-6 text-xs font-medium text-slate-500 dark:text-slate-400">
<div class="flex items-center gap-4 mb-6 text-xs font-medium text-slate-500 ">
<div class="flex items-center gap-1.5">
<span class="text-amber-400">⭐</span>
<span>{{ course.rating || 'N/A' }}</span>
</div>
<div class="w-1 h-1 rounded-full bg-slate-300 dark:bg-slate-600" />
<div class="w-1 h-1 rounded-full bg-slate-300 " />
<div class="flex items-center gap-1.5">
<span>📖</span>
<span>{{ course.lessons || 0 }} บทเรียน</span>
@ -173,13 +173,13 @@ const filteredCourses = computed(() => {
</div>
<!-- Card Footer -->
<div class="pt-4 border-t border-slate-100 dark:border-white/5 flex items-center justify-between mt-auto">
<span class="text-lg font-black text-blue-600 dark:text-blue-400 tracking-tight">
<div class="pt-4 border-t border-slate-100 flex items-center justify-between mt-auto">
<span class="text-lg font-black text-blue-600 tracking-tight">
{{ course.is_free ? 'ฟรี' : course.price }}
</span>
<NuxtLink
:to="`/course/${course.id}`"
class="px-4 py-2 bg-slate-50 dark:bg-white/5 hover:bg-blue-600 text-slate-600 dark:text-slate-300 hover:text-white rounded-lg text-xs font-bold transition-all border border-slate-200 dark:border-white/10 hover:border-blue-500/50"
class="px-4 py-2 bg-slate-50 hover:bg-blue-600 text-slate-600 hover:text-white rounded-lg text-xs font-bold transition-all border border-slate-200 hover:border-blue-500/50"
>
ดูรายละเอียด
</NuxtLink>
@ -191,7 +191,7 @@ const filteredCourses = computed(() => {
<!-- Empty State (No Results) -->
<div v-else class="text-center py-20">
<div class="text-6xl mb-6 opacity-50 animate-bounce">🔭</div>
<h2 class="text-2xl font-black text-slate-900 dark:text-white mb-3">ไม่พบคอร์สที่คุณค้นหา</h2>
<h2 class="text-2xl font-black text-slate-900 mb-3">ไม่พบคอร์สที่คุณค้นหา</h2>
<p class="text-slate-400 mb-8 max-w-md mx-auto">
ลองใช้คำค้นหาอื่น หรือดูคอร์สทั้งหมดที่เรามีให้บริการ
</p>
@ -215,7 +215,7 @@ const filteredCourses = computed(() => {
<div class="absolute inset-0 bg-gradient-to-t from-black/40 to-transparent pointer-events-none"/>
<div class="container mx-auto max-w-4xl text-center relative z-10 px-6">
<h2 class="text-4xl md:text-5xl font-black text-slate-900 dark:text-white mb-8 tracking-tight">
<h2 class="text-4xl md:text-5xl font-black text-slate-900 mb-8 tracking-tight">
พร้อมจะเริ่มต้นแล้วหรือยัง?
</h2>
<p class="text-slate-400 text-xl mb-12 max-w-2xl mx-auto leading-relaxed">
@ -253,11 +253,7 @@ const filteredCourses = computed(() => {
backdrop-filter: blur(40px);
border: 1px solid rgba(255, 255, 255, 0.5);
}
:global(.dark) .glass-premium {
background: rgba(255, 255, 255, 0.02);
backdrop-filter: blur(40px);
border: 1px solid rgba(255, 255, 255, 0.05);
}
/* Glass Card Style for Course Items */
.glass-card {
@ -268,12 +264,7 @@ const filteredCourses = computed(() => {
box-shadow: 0 10px 30px rgba(0,0,0,0.05);
}
:global(.dark) .glass-card {
background: rgba(30, 41, 59, 0.4); /* Slate-800 with opacity */
backdrop-filter: blur(20px);
border: 1px solid rgba(255, 255, 255, 0.05);
box-shadow: none;
}
/* Slow Pulse Animation for Background Glows */
@keyframes pulse-slow {