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

3
Frontend-Learner/pages/auth/login.vue
View file

@ -95,10 +95,11 @@ const handleLogin = async () => {
isLoading.value = false
if (result.success) {
// REMEMBER ME LOGIC
// จดจำฉัน: บันทึกอีเมลลงเครื่องเฉพาะตอนติ๊กถูกเท่านั้น
if (rememberMe.value) {
localStorage.setItem('remembered_email', loginForm.email)
} else {
// ถ้าไม่ได้ติ๊ก ให้ลบทิ้งเพื่อความปลอดภัย
localStorage.removeItem('remembered_email')
}

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 {

69
Frontend-Learner/pages/index.vue
View file

@ -15,7 +15,7 @@ useHead({
</script>
<template>
<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">
<!-- Premium Background -->
<div class="fixed inset-0 overflow-hidden pointer-events-none -z-10">
<!-- Animated Glows -->
@ -27,7 +27,7 @@ useHead({
<section class="hero-section min-h-[95vh] flex items-center relative overflow-hidden pt-32 pb-20">
<div class="container relative z-10 w-full">
<!-- Hero Card Container -->
<div class="bg-white/60 dark:bg-slate-800/60 backdrop-blur-3xl rounded-[3rem] p-8 md:p-16 shadow-2xl shadow-blue-900/5 border border-white/50 dark:border-white/10 relative overflow-hidden">
<div class="bg-white/60 backdrop-blur-3xl rounded-[3rem] p-8 md:p-16 shadow-2xl shadow-blue-900/5 border border-white/50 relative overflow-hidden">
<!-- Decorative background inside card -->
<div class="absolute top-0 right-0 w-[500px] h-[500px] bg-blue-500/5 rounded-full blur-[100px] -translate-y-1/2 translate-x-1/2 pointer-events-none"/>
@ -37,16 +37,16 @@ useHead({
<!-- Left Content -->
<div class="hero-content">
<div class="mb-10 slide-up">
<span class="px-5 py-2 rounded-full glass border border-blue-400/20 text-blue-400 text-[11px] font-black tracking-[0.25em] uppercase shadow-[0_0_20px_rgba(59,130,246,0.15)] bg-white dark:bg-slate-900">
<span class="px-5 py-2 rounded-full glass border border-blue-400/20 text-blue-400 text-[11px] font-black tracking-[0.25em] uppercase shadow-[0_0_20px_rgba(59,130,246,0.15)] bg-white ">
เริ่มต้นเส้นทางความสำเร็จใหม่ที่นี่
</span>
</div>
<h1 class="hero-title leading-[1.05] mb-8 slide-up" style="animation-delay: 0.1s;">
ยกระดับทักษะ <br>
<span class="text-slate-900 dark:text-white">แห่งอนาคต</span> <span class="text-gradient-cyan">ไปพร้อมกับเรา</span>
<span class="text-slate-900 ">แห่งอนาคต</span> <span class="text-gradient-cyan">ไปพร้อมกับเรา</span>
</h1>
<h2 class="hero-subtitle text-slate-600 dark:text-slate-300 font-medium mb-12 text-xl leading-relaxed slide-up max-w-[640px]" style="animation-delay: 0.2s;">
<h2 class="hero-subtitle text-slate-600 font-medium mb-12 text-xl leading-relaxed slide-up max-w-[640px]" style="animation-delay: 0.2s;">
แหล่งรวมความรู้ออนไลน์ที่เข้าถึงง่ายที่สุด พัฒนาโดยผู้เชี่ยวชาญ <br class="hidden-mobile" >
เพื่อช่วยให้คุณก้าวสู่เป้าหมายที่ตั้งไว้ได้อย่างมั่นใจ
</h2>
@ -69,15 +69,15 @@ useHead({
<!-- Right Content (Visual) - Redesigned as a Preview/Showcase -->
<div class="hero-visual flex justify-center items-center relative slide-up" style="animation-delay: 0.2s;">
<!-- Preview Snapshot Container -->
<div class="platform-preview-card glass-premium rotate-[-1deg] shadow-2xl dark:shadow-[0_50px_100px_rgba(0,0,0,0.6)] border border-slate-200 dark:border-white/10">
<div class="platform-preview-card glass-premium rotate-[-1deg] shadow-2xl border border-slate-200 ">
<!-- Browser-like header -->
<div class="preview-header border-b border-slate-200 dark:border-white/5 py-4 bg-slate-100 dark:bg-white/5 flex items-center px-6">
<div class="preview-header border-b border-slate-200 py-4 bg-slate-100 flex items-center px-6">
<div class="dots flex gap-2">
<span class="w-2.5 h-2.5 rounded-full bg-slate-600"/>
<span class="w-2.5 h-2.5 rounded-full bg-slate-600"/>
<span class="w-2.5 h-2.5 rounded-full bg-slate-600"/>
</div>
<div class="mx-auto bg-slate-200 dark:bg-white/5 px-4 py-1 rounded-full text-[10px] text-slate-500 tracking-wider">www.elearning.com</div>
<div class="mx-auto bg-slate-200 px-4 py-1 rounded-full text-[10px] text-slate-500 tracking-wider">www.elearning.com</div>
</div>
<!-- Showcase Content -->
@ -97,12 +97,12 @@ useHead({
<!-- Course List Preview -->
<div class="space-y-4">
<div class="grid grid-cols-2 gap-4">
<div class="p-4 bg-slate-50 dark:bg-white/[0.03] rounded-2xl border border-slate-200 dark:border-white/5">
<div class="p-4 bg-slate-50 rounded-2xl border border-slate-200 ">
<div class="w-full h-20 bg-blue-400/10 rounded-xl mb-3"/>
<div class="h-3 bg-white/10 rounded w-3/4 mb-2"/>
<div class="h-2 bg-white/5 rounded w-1/2"/>
</div>
<div class="p-4 bg-slate-50 dark:bg-white/[0.03] rounded-2xl border border-slate-200 dark:border-white/5">
<div class="p-4 bg-slate-50 rounded-2xl border border-slate-200 ">
<div class="w-full h-20 bg-indigo-400/10 rounded-xl mb-3"/>
<div class="h-3 bg-white/10 rounded w-3/4 mb-2"/>
<div class="h-2 bg-white/5 rounded w-1/2"/>
@ -114,7 +114,7 @@ useHead({
<!-- Floating Feature Highlights (Marketing focused) -->
<div class="absolute top-[10%] -right-8 glass-tag-premium px-8 py-5 rounded-3xl shadow-[0_20px_50px_rgba(0,0,0,0.1)] dark:shadow-[0_20px_50px_rgba(0,0,0,0.3)] animate-float">
<div class="absolute top-[10%] -right-8 glass-tag-premium px-8 py-5 rounded-3xl shadow-[0_20px_50px_rgba(0,0,0,0.1)] animate-float">
<div class="flex items-center gap-4">
<div class="w-12 h-12 bg-emerald-500 text-white rounded-2xl flex items-center justify-center shadow-lg shadow-emerald-500/30">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
@ -122,13 +122,13 @@ useHead({
</svg>
</div>
<div>
<div class="text-slate-900 dark:text-white font-black text-sm mb-0.5">รับใบประกาศนียบัตร</div>
<div class="text-slate-500 dark:text-slate-400 text-[10px] font-bold">เมื่อเรียนจบหลักสูตร</div>
<div class="text-slate-900 font-black text-sm mb-0.5">รับใบประกาศนียบัตร</div>
<div class="text-slate-500 text-[10px] font-bold">เมื่อเรียนจบหลักสูตร</div>
</div>
</div>
</div>
<div class="absolute bottom-[10%] -left-8 glass-tag-premium px-8 py-5 rounded-3xl shadow-[0_20px_50px_rgba(0,0,0,0.1)] dark:shadow-[0_20px_50px_rgba(0,0,0,0.3)] animate-float" style="animation-delay: -3s;">
<div class="absolute bottom-[10%] -left-8 glass-tag-premium px-8 py-5 rounded-3xl shadow-[0_20px_50px_rgba(0,0,0,0.1)] animate-float" style="animation-delay: -3s;">
<div class="flex items-center gap-4">
<div class="w-12 h-12 bg-blue-600 text-white rounded-2xl flex items-center justify-center shadow-lg shadow-blue-600/30">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
@ -136,8 +136,8 @@ useHead({
</svg>
</div>
<div>
<div class="text-slate-900 dark:text-white font-black text-sm mb-0.5">เรียนได้ทุกที่</div>
<div class="text-slate-500 dark:text-slate-400 text-[10px] font-bold">รองรับทุกอุปกรณ์</div>
<div class="text-slate-900 font-black text-sm mb-0.5">เรียนได้ทุกที่</div>
<div class="text-slate-500 text-[10px] font-bold">รองรับทุกอุปกรณ์</div>
</div>
</div>
</div>
@ -149,14 +149,14 @@ useHead({
</section>
<!-- Platform Info Section: ส่วนแสดงจุดเด่นของแพลตฟอร์ม (Features) -->
<section class="info-section py-40 bg-slate-50 dark:bg-slate-900 relative transition-colors">
<section class="info-section py-40 bg-slate-50 relative transition-colors">
<!-- Background detail -->
<div class="absolute top-0 inset-x-0 h-px bg-gradient-to-r from-transparent via-white/10 to-transparent"/>
<div class="container relative z-10">
<div class="text-center mb-28">
<span class="text-blue-500 font-black tracking-[0.4em] text-[11px] uppercase mb-5 block">Why Choose Us</span>
<h2 class="section-title text-5xl font-black mb-8 text-slate-900 dark:text-white tracking-tight">ออกแบบมาเพื่อความสำเร็จของคุณ</h2>
<h2 class="section-title text-5xl font-black mb-8 text-slate-900 tracking-tight">ออกแบบมาเพื่อความสำเร็จของคุณ</h2>
<p class="section-desc max-w-2xl mx-auto text-slate-500 text-xl leading-relaxed">
เราไม่ใช่แค่แพลตฟอร์มการเรียนรู้ แต่เราคือคู่หูที่จะช่วยพาคุณไปสู่จุดหมายที่ต้องการ
</p>
@ -170,7 +170,7 @@ useHead({
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M15 10l4.553-2.276A1 1 0 0121 8.618v6.764a1 1 0 01-1.447.894L15 14M5 18h8a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z" />
</svg>
</div>
<h3 class="text-2xl font-black mb-5 text-slate-900 dark:text-white">สื่อการเรียนระดับสูง</h3>
<h3 class="text-2xl font-black mb-5 text-slate-900 ">สื่อการเรียนระดับสูง</h3>
<p class="text-slate-500 text-base leading-relaxed">วิดีโอคุณภาพคมชัด พร้อมเอกสารประกอบการเรียนที่คัดสรรมาอย่างดีเพื่อความเข้าใจง่าย</p>
</div>
@ -181,7 +181,7 @@ useHead({
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01" />
</svg>
</div>
<h3 class="text-2xl font-black mb-5 text-slate-900 dark:text-white">วัดผลแบบอัจฉริยะ</h3>
<h3 class="text-2xl font-black mb-5 text-slate-900 ">วัดผลแบบอัจฉริยะ</h3>
<p class="text-slate-500 text-base leading-relaxed">ระบบ Quizz ออนไลน์ที่ช่วยประเมินความเข้าใจได้ทันที พร้อมวิเคราะห์จุดที่ควรปรับปรุง</p>
</div>
@ -192,7 +192,7 @@ useHead({
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M7 12l3-3 3 3 4-4M8 21l4-4 4 4M3 4h18M4 4h16v12a1 1 0 01-1 1H5a1 1 0 01-1-1V4z" />
</svg>
</div>
<h3 class="text-2xl font-black mb-5 text-slate-900 dark:text-white">ระบบติดตามผล</h3>
<h3 class="text-2xl font-black mb-5 text-slate-900 ">ระบบติดตามผล</h3>
<p class="text-slate-500 text-base leading-relaxed">ดูความก้าวหน้าของตัวเองได้ทุกที่ทุกเวลา ผ่าน Dashboard ที่สรุปภาพรวมไว้อย่างลงตัว</p>
</div>
</div>
@ -213,9 +213,7 @@ useHead({
font-weight: 900;
color: #0f172a;
}
:global(.dark) .hero-title {
color: white;
}
.text-gradient-cyan {
background: linear-gradient(135deg, #22d3ee 0%, #3b82f6 100%);
@ -231,12 +229,7 @@ useHead({
box-shadow: 0 20px 40px rgba(0,0,0,0.05);
}
:global(.dark) .glass-premium {
background: rgba(255, 255, 255, 0.02);
backdrop-filter: blur(40px);
border: 1px solid rgba(255, 255, 255, 0.05);
box-shadow: none;
}
.glass-tag-premium {
@ -245,10 +238,7 @@ useHead({
border: 1px solid rgba(0, 0, 0, 0.05);
}
:global(.dark) .glass-tag-premium {
background: rgba(15, 23, 42, 0.85);
border: 1px solid rgba(255, 255, 255, 0.1);
}
.btn-cta-premium {
background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
@ -279,11 +269,7 @@ useHead({
font-size: 1.125rem;
}
:global(.dark) .btn-outline-glass {
background: rgba(255, 255, 255, 0.04);
color: white;
border: 1px solid rgba(255, 255, 255, 0.1);
}
.btn-outline-glass:hover {
background: #ffffff;
@ -293,10 +279,7 @@ useHead({
box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.1);
}
:global(.dark) .btn-outline-glass:hover {
background: rgba(255, 255, 255, 0.1);
border-color: rgba(255, 255, 255, 0.3);
}
.platform-preview-card {
width: 100%;