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

feat: Implement initial landing pages, authentication flows, and course browsing functionality with i18n.

Browse source
This commit is contained in:
supalerk-ar66 2026-02-02 11:11:25 +07:00
parent 7de5457170
commit b60a3853cd
12 changed files with 822 additions and 606 deletions
Download patch file Download diff file Expand all files Collapse all files

212
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-200 bg-slate-900 transition-colors">
<div class="relative min-h-screen text-slate-600 dark:text-slate-200 bg-slate-50 dark:bg-slate-900 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-white mb-6 tracking-tight slide-up" style="animation-delay: 0.1s;">
<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;">
คอร์สเรียน<span class="text-gradient-cyan">ทั้งหมด</span>
</h1>
<!-- Subtitle -->
@ -94,104 +94,116 @@ const filteredCourses = computed(() => {
<!-- ==========================================
SEARCH & GRID SECTION
========================================== -->
<section class="container mx-auto max-w-6xl px-6 pb-32">
<!-- Search Bar -->
<div class="mb-20 relative max-w-2xl mx-auto slide-up" style="animation-delay: 0.3s;">
<div class="relative group">
<div class="absolute inset-y-0 left-5 flex items-center pointer-events-none">
</div>
<input
v-model="searchQuery"
type="text"
class="w-full h-16 pl-14 pr-6 bg-white/5 border border-white/10 rounded-2xl text-white placeholder-slate-500 focus:outline-none focus:border-blue-500/50 focus:bg-white/10 focus:ring-4 focus:ring-blue-500/10 transition-all font-medium text-lg backdrop-blur-md"
placeholder="ค้นหาบทเรียนที่คุณสนใจ..."
>
<!-- Hover Glow Effect on Input -->
<div class="absolute inset-0 rounded-2xl ring-1 ring-inset ring-transparent group-hover:ring-white/20 pointer-events-none transition-all" />
</div>
</div>
<!-- ==========================================
SEARCH & GRID SECTION
========================================== -->
<section class="container mx-auto max-w-[1440px] px-6 pb-32">
<!-- Content Frame Container -->
<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">
<span class="w-2 h-8 bg-blue-600 rounded-full"/>
รายการคอร์สเรียน
</h2>
<!-- Course Grid -->
<div v-if="filteredCourses.length > 0" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 mb-20">
<div
v-for="(course, index) in filteredCourses"
:key="course.id"
class="glass-card group flex flex-col h-full hover:-translate-y-2 transition-transform duration-500 slide-up"
:style="{ animationDelay: `${0.1 * (index + 1)}s` }"
>
<!-- Card Image -->
<div class="h-56 bg-gradient-to-br from-slate-800 to-slate-900 relative overflow-hidden group-hover:opacity-90 transition-opacity">
<img
v-if="course.thumbnail_url"
:src="course.thumbnail_url"
:alt="getLocalizedText(course.title)"
class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110"
@error="(e) => (e.target as HTMLImageElement).style.display = 'none'"
/>
<!-- Search Bar (Compact) -->
<div class="relative max-w-md w-full">
<div class="relative group">
<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"
placeholder="ค้นหาบทเรียน..."
>
<div class="absolute left-4 top-1/2 -translate-y-1/2 text-slate-400">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
</svg>
</div>
</div>
</div>
</div>
<!-- Course Grid (Updated to 4 cols) -->
<div v-if="filteredCourses.length > 0" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
<div
v-else
class="absolute inset-0 flex items-center justify-center bg-gradient-to-br from-slate-800 to-slate-900"
v-for="(course, index) in filteredCourses"
:key="course.id"
class="glass-card group flex flex-col h-full hover:-translate-y-2 transition-transform duration-500 slide-up"
:style="{ animationDelay: `${0.1 * (index + 1)}s` }"
>
<!-- Card Image -->
<div class="h-48 bg-gradient-to-br from-slate-800 to-slate-900 relative overflow-hidden group-hover:opacity-90 transition-opacity">
<img
v-if="course.thumbnail_url"
:src="course.thumbnail_url"
:alt="getLocalizedText(course.title)"
class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110"
@error="(e) => (e.target as HTMLImageElement).style.display = 'none'"
/>
<div
v-else
class="absolute inset-0 flex items-center justify-center bg-gradient-to-br from-slate-800 to-slate-900"
>
</div>
</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">
{{ getLocalizedText(course.title) }}
</h3>
<p class="text-slate-500 dark:text-slate-400 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-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="flex items-center gap-1.5">
<span>📖</span>
<span>{{ course.lessons || 0 }} บทเรียน</span>
</div>
</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">
{{ 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"
>
ดูรายละเอียด
</NuxtLink>
</div>
</div>
</div>
<!-- Level Badge (Neutral/Warning/Success variants) - Optional based on data -->
<div v-if="course.levelType" class="absolute top-4 right-4">
<!-- Add badge logic if needed -->
</div>
</div>
<!-- Card Content Body -->
<div class="p-8 flex-1 flex flex-col border-t border-white/5">
<h3 class="text-2xl font-bold text-white mb-3 leading-tight group-hover:text-blue-400 transition-colors">
{{ getLocalizedText(course.title) }}
</h3>
<p class="text-slate-400 text-sm mb-8 line-clamp-2 leading-relaxed flex-1">
{{ getLocalizedText(course.description) }}
<!-- 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>
<p class="text-slate-400 mb-8 max-w-md mx-auto">
ลองใช้คำค้นหาอื่น หรือดูคอร์สทั้งหมดที่เรามีให้บริการ
</p>
<!-- Meta Information (Rating, Lessons) -->
<div class="flex items-center gap-6 mb-8 text-sm font-medium text-slate-500">
<div class="flex items-center gap-2">
<span class="text-amber-400">⭐</span>
<span class="text-slate-300">{{ course.rating || 'N/A' }}</span>
</div>
<div class="w-1 h-1 rounded-full bg-slate-700" />
<div class="flex items-center gap-2">
<span class="opacity-70">📖</span>
<span class="text-slate-300">{{ course.lessons || 0 }} บทเรียน</span>
</div>
</div>
<!-- Card Footer (Price & Action) -->
<div class="pt-6 border-t border-white/5 flex items-center justify-between mt-auto">
<span class="text-2xl font-black text-blue-400 tracking-tight">
{{ course.is_free ? 'ฟรี' : course.price }}
</span>
<NuxtLink
:to="`/course/${course.id}`"
class="px-6 py-3 bg-white/10 hover:bg-blue-600 text-white rounded-xl text-sm font-bold transition-all border border-white/10 hover:border-blue-500/50"
>
ดูรายละเอียด
</NuxtLink>
</div>
<button
class="px-6 py-3 bg-blue-600 hover:bg-blue-500 text-white rounded-xl font-bold transition-all shadow-lg shadow-blue-600/20"
@click="searchQuery = ''"
>
แสดงคอร์สทั้งหมด
</button>
</div>
</div>
</div>
<!-- Empty State (No Results) -->
<div v-else class="text-center py-32 glass-premium rounded-[3rem]">
<div class="text-7xl mb-8 opacity-50 animate-bounce">🔭</div>
<h2 class="text-3xl font-black text-white mb-4">ไม่พบคอร์สที่คุณค้นหา</h2>
<p class="text-slate-400 mb-10 max-w-md mx-auto text-lg">
ลองใช้คำค้นหาอื่น หรือดูคอร์สทั้งหมดที่เรามีให้บริการในขณะนี้
</p>
<button
class="px-8 py-4 bg-blue-600 hover:bg-blue-500 text-white rounded-2xl font-black transition-all shadow-lg shadow-blue-600/20 hover:-translate-y-1"
@click="searchQuery = ''"
>
แสดงคอร์สทั้งหมด
</button>
</div>
</div>
</section>
<!-- ==========================================
@ -203,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-white mb-8 tracking-tight">
<h2 class="text-4xl md:text-5xl font-black text-slate-900 dark:text-white mb-8 tracking-tight">
พร้อมจะเริ่มต้นแล้วหรือยัง?
</h2>
<p class="text-slate-400 text-xl mb-12 max-w-2xl mx-auto leading-relaxed">
@ -237,6 +249,11 @@ const filteredCourses = computed(() => {
/* Premium Glass Effect for Containers */
.glass-premium {
background: rgba(255, 255, 255, 0.7);
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);
@ -244,11 +261,18 @@ const filteredCourses = computed(() => {
/* Glass Card Style for Course Items */
.glass-card {
background: white;
border: 1px solid rgba(0, 0, 0, 0.05);
border-radius: 2rem;
overflow: hidden;
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);
border-radius: 2rem;
overflow: hidden;
box-shadow: none;
}
/* Slow Pulse Animation for Background Glows */