Website Structure
This commit is contained in:
supalerk-ar66
parent
62812f2090
commit
71f0676a62
22365 changed files with 4265753 additions and 791 deletions
283
Frontend-Learner/pages/browse/discovery.vue
Normal file
283
Frontend-Learner/pages/browse/discovery.vue
Normal file
|
|
@ -0,0 +1,283 @@
|
|||
<script setup lang="ts">
|
||||
/**
|
||||
* @file discovery.vue
|
||||
* @description Course Discovery / Catalog Page.
|
||||
* Allows users to browse, filter, and view details of available courses.
|
||||
* Includes a toggleable detailed view for course previews.
|
||||
*/
|
||||
|
||||
definePageMeta({
|
||||
layout: 'default',
|
||||
middleware: 'auth'
|
||||
})
|
||||
|
||||
useHead({
|
||||
title: 'รายการคอร์ส - e-Learning'
|
||||
})
|
||||
|
||||
// UI State
|
||||
const showDetail = ref(false)
|
||||
const searchQuery = ref('')
|
||||
const isCategoryOpen = ref(true)
|
||||
|
||||
// Mock Course Data
|
||||
const courses = [
|
||||
{
|
||||
id: 1,
|
||||
title: 'เบื้องต้นการออกแบบ UX/UI',
|
||||
levelType: 'neutral' as const,
|
||||
price: 'ฟรี',
|
||||
description: 'เรียนรู้พื้นฐานการวาดโครงร่าง...',
|
||||
rating: '4.8',
|
||||
lessons: '12'
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
title: 'รูปแบบ React ขั้นสูง',
|
||||
levelType: 'warning' as const,
|
||||
price: 'ฟรี',
|
||||
description: 'เจาะลึก HOC, Hooks และอื่นๆ...',
|
||||
rating: '4.9',
|
||||
lessons: '24'
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
title: 'การตลาดดิจิทัล 101',
|
||||
levelType: 'success' as const,
|
||||
price: 'ฟรี',
|
||||
description: 'คู่มือสมบูรณ์ SEO/SEM...',
|
||||
rating: '4.7',
|
||||
lessons: '18'
|
||||
}
|
||||
]
|
||||
|
||||
// Categories Data
|
||||
const categories = [
|
||||
'การตลาดออนไลน์',
|
||||
'ธุรกิจ',
|
||||
'การเงิน & ลงทุน',
|
||||
'การพัฒนาตนเอง',
|
||||
'Office Productivity',
|
||||
'Data',
|
||||
'เขียนโปรแกรม',
|
||||
'การพัฒนาซอฟต์แวร์',
|
||||
'การออกแบบ',
|
||||
'Art & Craft',
|
||||
'การเขียน',
|
||||
'ถ่ายภาพ & วิดีโอ',
|
||||
'ภาษา',
|
||||
'Lifestyles',
|
||||
'คอร์สฟรี'
|
||||
]
|
||||
|
||||
// Category Visibility State
|
||||
const showAllCategories = ref(false)
|
||||
|
||||
const visibleCategories = computed(() => {
|
||||
return showAllCategories.value ? categories : categories.slice(0, 8)
|
||||
})
|
||||
|
||||
// Filter Logic based on search query
|
||||
const filteredCourses = computed(() => {
|
||||
if (!searchQuery.value) return courses
|
||||
const query = searchQuery.value.toLowerCase()
|
||||
return courses.filter(c =>
|
||||
c.title.toLowerCase().includes(query) ||
|
||||
c.description.toLowerCase().includes(query)
|
||||
)
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<!-- CATALOG VIEW: Browse courses -->
|
||||
<div v-if="!showDetail">
|
||||
<!-- Search & Filters Header -->
|
||||
<div class="flex justify-between items-center mb-6" style="flex-wrap: wrap; gap: 16px;">
|
||||
<h1 style="font-size: 28px; font-weight: 700; color: #000000;">รายการคอร์สทั้งหมด</h1>
|
||||
<div class="flex gap-3" style="flex-wrap: wrap;">
|
||||
<!-- Search Input -->
|
||||
<div class="relative">
|
||||
<input
|
||||
v-model="searchQuery"
|
||||
type="text"
|
||||
class="input-field text-slate-900 dark:text-white bg-white dark:bg-slate-800"
|
||||
placeholder="ค้นหาคอร์ส..."
|
||||
style="padding-left: 36px; width: 240px;"
|
||||
>
|
||||
</div>
|
||||
<!-- Sorting Select -->
|
||||
<select class="input-field text-slate-900 dark:text-white bg-white dark:bg-slate-800" style="width: auto;">
|
||||
<option>เรียงตาม: ล่าสุด</option>
|
||||
<option>ยอดนิยม</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Main Grid Layout -->
|
||||
<div class="grid-12">
|
||||
<!-- Sidebar Filters -->
|
||||
<div class="col-span-3">
|
||||
<div class="card">
|
||||
<div class="mb-6">
|
||||
<div class="flex items-center justify-between mb-4 cursor-pointer" @click="isCategoryOpen = !isCategoryOpen">
|
||||
<h4 class="text-lg font-bold text-slate-900 dark:text-white">หมวดหมู่ ({{ categories.length }})</h4>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="h-5 w-5 text-slate-400 transition-transform duration-200"
|
||||
:class="{ 'rotate-180': !isCategoryOpen }"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
>
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 15l7-7 7 7" />
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<div v-show="isCategoryOpen" class="flex flex-col gap-1">
|
||||
<div v-for="cat in visibleCategories" :key="cat" class="flex items-center justify-between py-3 border-b border-slate-100 dark:border-slate-700/50 group cursor-pointer hover:bg-slate-50 dark:hover:bg-slate-800/50 -mx-4 px-4 transition-colors">
|
||||
<label class="flex items-center gap-3 text-slate-700 dark:text-slate-300 cursor-pointer w-full">
|
||||
<input type="checkbox" class="w-4 h-4 rounded border-slate-300 text-primary focus:ring-primary">
|
||||
{{ cat }}
|
||||
</label>
|
||||
</div>
|
||||
<button
|
||||
class="text-primary text-sm mt-4 font-medium hover:underline flex items-center gap-1"
|
||||
@click="showAllCategories = !showAllCategories"
|
||||
>
|
||||
{{ showAllCategories ? 'แสดงน้อยลง' : 'แสดงเพิ่มเติม' }}
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="h-4 w-4 transition-transform duration-200"
|
||||
:class="{ 'rotate-180': showAllCategories }"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
>
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Course List -->
|
||||
<div class="col-span-9" style="min-width: 0;">
|
||||
<div class="course-grid">
|
||||
<CourseCard
|
||||
v-for="course in filteredCourses"
|
||||
:key="course.id"
|
||||
:title="course.title"
|
||||
:price="course.price"
|
||||
:description="course.description"
|
||||
:rating="course.rating"
|
||||
:lessons="course.lessons"
|
||||
show-view-details
|
||||
@view-details="showDetail = true"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Empty State -->
|
||||
<div v-if="filteredCourses.length === 0" class="empty-state" style="grid-column: 1 / -1;">
|
||||
<h3 class="empty-state-title">ไม่พบผลการค้นหา</h3>
|
||||
<p class="empty-state-description">ลองใช้คำค้นหาอื่น หรือตรวจดูความถูกต้องของตัวอักษรอีกครั้ง</p>
|
||||
<button class="btn btn-secondary" @click="searchQuery = ''">แสดงทั้งหมด</button>
|
||||
</div>
|
||||
|
||||
<!-- Pagination / Load More -->
|
||||
<div class="load-more-wrap">
|
||||
<button class="btn btn-secondary" style="border-color: #64748b; color: white; background: rgba(255,255,255,0.05);">โหลดเพิ่มเติม</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- COURSE DETAIL VIEW: Detailed information about a specific course -->
|
||||
<div v-else>
|
||||
<button class="btn btn-secondary mb-6" @click="showDetail = false">← กลับหน้ารายการ</button>
|
||||
|
||||
<div class="grid-12">
|
||||
<!-- Main Content (Left Column) -->
|
||||
<div class="col-span-8">
|
||||
<!-- Hero Video Placeholder -->
|
||||
<div
|
||||
style="width: 100%; height: 400px; background: var(--neutral-900); border-radius: var(--radius-xl); display: flex; align-items: center; justify-content: center; margin-bottom: 24px; position: relative; border: 1px solid var(--border-color);"
|
||||
>
|
||||
<!-- Play Button -->
|
||||
<div
|
||||
style="width: 80px; height: 80px; background: var(--primary); border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);"
|
||||
>
|
||||
<div style="width: 0; height: 0; border-top: 15px solid transparent; border-bottom: 15px solid transparent; border-left: 25px solid white; margin-left: 6px;"/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h1 style="font-size: 32px; font-weight: 700; margin-bottom: 16px; color: #000000;">เบื้องต้นการออกแบบ UX/UI</h1>
|
||||
<p class="text-slate-700 dark:text-slate-400 mb-6" style="font-size: 1.1em; line-height: 1.7;">
|
||||
เนื้อหาครอบคลุมทุกอย่างตั้งแต่การวิจัยผู้ใช้ (User Research) ไปจนถึงการทำต้นแบบความละเอียดสูง (High-fidelity Prototyping)
|
||||
เหมาะสำหรับผู้เริ่มต้นที่ต้องการเข้าสู่สายงานออกแบบผลิตภัณฑ์
|
||||
</p>
|
||||
|
||||
<!-- Learning Objectives -->
|
||||
<div class="card mb-6">
|
||||
<h3 class="font-bold mb-4" style="color: #000000;">สิ่งที่คุณจะได้เรียนรู้</h3>
|
||||
<ul class="grid-12" style="grid-template-columns: 1fr 1fr; gap: 12px;">
|
||||
<li class="flex gap-2 text-sm"><span style="color: var(--success);">✓</span> วิธีการวิจัยผู้ใช้ (User Research)</li>
|
||||
<li class="flex gap-2 text-sm"><span style="color: var(--success);">✓</span> การวาดโครงร่างและทำต้นแบบ</li>
|
||||
<li class="flex gap-2 text-sm"><span style="color: var(--success);">✓</span> ระบบการออกแบบ (Design Systems)</li>
|
||||
<li class="flex gap-2 text-sm"><span style="color: var(--success);">✓</span> การทดสอบการใช้งาน (Usability Testing)</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- Course Syllabus / Outline -->
|
||||
<div class="card">
|
||||
<h3 class="font-bold mb-4" style="color: #000000;">เนื้อหาในคอร์ส</h3>
|
||||
<!-- Chapter 1 -->
|
||||
<div class="mb-4">
|
||||
<div class="flex justify-between p-4 rounded mb-2" style="background: #f3f4f6; border: 1px solid #e5e7eb;">
|
||||
<span class="font-bold" style="color: #000000;">01. บทนำ</span>
|
||||
<span class="text-sm text-slate-600 dark:text-slate-400">3 บทเรียน</span>
|
||||
</div>
|
||||
<div style="padding-left: 16px;">
|
||||
<div class="flex justify-between py-2 border-b" style="border-color: var(--neutral-100);">
|
||||
<span class="text-sm">1.1 การออกแบบ UX คืออะไร?</span>
|
||||
<span class="text-sm text-slate-600 dark:text-slate-400">10:00</span>
|
||||
</div>
|
||||
<div class="flex justify-between py-2 border-b" style="border-color: var(--neutral-100);">
|
||||
<span class="text-sm">1.2 กระบวนการคิดเชิงออกแบบ (Design Thinking)</span>
|
||||
<span class="text-sm text-slate-600 dark:text-slate-400">15:30</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Sidebar (Right Column): Sticky CTA -->
|
||||
<div class="col-span-4">
|
||||
<div class="card" style="position: sticky; top: 88px;">
|
||||
<div class="mb-6">
|
||||
<span class="text-sm text-slate-600 dark:text-slate-400" style="text-decoration: line-through;">฿3,500</span>
|
||||
<h2 class="text-primary font-bold" style="font-size: 32px; margin: 0;">ฟรี</h2>
|
||||
<span class="status-pill status-success">ระยะเวลาจำกัด</span>
|
||||
</div>
|
||||
|
||||
<NuxtLink to="/dashboard/my-courses?enrolled=true" class="btn btn-primary w-full mb-4" style="height: 48px; font-size: 16px;">
|
||||
ลงทะเบียนเรียนทันที
|
||||
</NuxtLink>
|
||||
|
||||
<div class="text-sm text-slate-600 dark:text-slate-400 mb-4">
|
||||
<div class="flex justify-between py-2 border-b" style="border-color: var(--neutral-100);">
|
||||
<span>ระยะเวลา</span>
|
||||
<span class="font-bold">4.5 ชั่วโมง</span>
|
||||
</div>
|
||||
<div class="flex justify-between py-2 border-b" style="border-color: var(--neutral-100);">
|
||||
<span>ใบประกาศ</span>
|
||||
<span class="font-bold">มี</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
291
Frontend-Learner/pages/browse/index.vue
Normal file
291
Frontend-Learner/pages/browse/index.vue
Normal file
|
|
@ -0,0 +1,291 @@
|
|||
<script setup lang="ts">
|
||||
/**
|
||||
* @file courses.vue
|
||||
* @description Page displaying all available courses in a public catalog format.
|
||||
* Matches the premium dark theme of the landing page.
|
||||
*/
|
||||
|
||||
// Define page metadata using the landing layout (dark theme default)
|
||||
definePageMeta({
|
||||
layout: 'landing'
|
||||
})
|
||||
|
||||
// Set the HTML head title for SEO
|
||||
useHead({
|
||||
title: 'คอร์สทั้งหมด - E-Learning System'
|
||||
})
|
||||
|
||||
// Reactive state for the search input
|
||||
const searchQuery = ref('')
|
||||
|
||||
/**
|
||||
* @const courses
|
||||
* @description Mock data for available courses. In a real app, this would be fetched from an API.
|
||||
* Each course object contains: id, title, level, levelType (for badge color), price, description, rating, lessons.
|
||||
*/
|
||||
const courses = [
|
||||
{
|
||||
id: 1,
|
||||
title: 'เบื้องต้นการออกแบบ UX/UI',
|
||||
price: 'ฟรี',
|
||||
description: 'เรียนรู้พื้นฐานการวาดโครงร่างและการใช้งานเครื่องมือออกแบบยุคใหม่',
|
||||
rating: '4.8',
|
||||
lessons: '12'
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
title: 'รูปแบบ React ขั้นสูง',
|
||||
price: 'ฟรี',
|
||||
description: 'เจาะลึก HOC, Hooks และการจัดการ State ขนาดใหญ่ในแอปพลิเคชัน',
|
||||
rating: '4.9',
|
||||
lessons: '24'
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
title: 'การตลาดดิจิทัล 101',
|
||||
price: 'ฟรี',
|
||||
description: 'คู่มือสมบูรณ์สำหรับการทำ SEO/SEM และการวิเคราะห์ข้อมูลผู้ใช้',
|
||||
rating: '4.7',
|
||||
lessons: '18'
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
title: 'Full-stack Node.js Developer',
|
||||
price: 'ฟรี',
|
||||
description: 'สร้าง API ที่ยืดหยุ่นและมีประสิทธิภาพด้วย Node.js และ Express',
|
||||
rating: '4.9',
|
||||
lessons: '32'
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
title: 'Full-stack Node.js Developer',
|
||||
price: 'ฟรี',
|
||||
description: 'สร้าง API ที่ยืดหยุ่นและมีประสิทธิภาพด้วย Node.js และ Express',
|
||||
rating: '4.9',
|
||||
lessons: '32'
|
||||
}
|
||||
]
|
||||
|
||||
/**
|
||||
* @computed filteredCourses
|
||||
* @description Filters the courses list based on the search query.
|
||||
* Checks both the course title and description (case-insensitive).
|
||||
*/
|
||||
const filteredCourses = computed(() => {
|
||||
if (!searchQuery.value) return courses
|
||||
const query = searchQuery.value.toLowerCase()
|
||||
return courses.filter(c =>
|
||||
c.title.toLowerCase().includes(query) ||
|
||||
c.description.toLowerCase().includes(query)
|
||||
)
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<!-- Main Container: Dark Theme Base -->
|
||||
<div class="relative min-h-screen text-slate-200 bg-slate-900 transition-colors">
|
||||
|
||||
<!-- ==========================================
|
||||
BACKGROUND EFFECTS
|
||||
Ambient glows matching the index.vue theme
|
||||
========================================== -->
|
||||
<div class="fixed inset-0 overflow-hidden pointer-events-none -z-10">
|
||||
<div class="absolute top-[-20%] right-[-10%] w-[60%] h-[60%] rounded-full bg-blue-600/10 blur-[140px] animate-pulse-slow"/>
|
||||
<div class="absolute bottom-[-20%] left-[-10%] w-[60%] h-[60%] rounded-full bg-indigo-600/10 blur-[140px] animate-pulse-slow" style="animation-delay: 3s;"/>
|
||||
</div>
|
||||
|
||||
<!-- ==========================================
|
||||
HERO SECTION
|
||||
Title and subtitle area
|
||||
========================================== -->
|
||||
<section class="relative pt-32 pb-20 px-6 overflow-hidden">
|
||||
<div class="container mx-auto max-w-6xl text-center relative z-10">
|
||||
<!-- Tagline Badge -->
|
||||
<div class="mb-6 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)]">
|
||||
EXPLORE COURSES
|
||||
</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;">
|
||||
คอร์สเรียน<span class="text-gradient-cyan">ทั้งหมด</span>
|
||||
</h1>
|
||||
<!-- Subtitle -->
|
||||
<p class="text-slate-400 text-xl max-w-2xl mx-auto leading-relaxed slide-up" style="animation-delay: 0.2s;">
|
||||
เริ่มต้นอัปสกิลของคุณวันนี้ด้วยหลักสูตรคุณภาพที่ออกแบบโดยผู้เชี่ยวชาญในอุตสาหกรรม
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ==========================================
|
||||
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">
|
||||
<span class="text-xl opacity-50">🔍</span>
|
||||
</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>
|
||||
|
||||
<!-- 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 / Placeholder Area -->
|
||||
<div class="h-56 bg-gradient-to-br from-slate-800 to-slate-900 relative overflow-hidden group-hover:opacity-90 transition-opacity">
|
||||
<div class="absolute inset-0 flex items-center justify-center">
|
||||
<div class="w-20 h-20 rounded-2xl bg-white/5 flex items-center justify-center text-5xl group-hover:scale-110 transition-transform duration-500 shadow-inner border border-white/5">
|
||||
📚
|
||||
</div>
|
||||
</div>
|
||||
<!-- Level Badge (Neutral/Warning/Success variants) -->
|
||||
|
||||
</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">
|
||||
{{ course.title }}
|
||||
</h3>
|
||||
<p class="text-slate-400 text-sm mb-8 line-clamp-2 leading-relaxed flex-1">
|
||||
{{ course.description }}
|
||||
</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 }}</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 }} บทเรียน</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.price }}
|
||||
</span>
|
||||
<NuxtLink
|
||||
to="/browse/opencovery"
|
||||
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>
|
||||
</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>
|
||||
</section>
|
||||
|
||||
<!-- ==========================================
|
||||
CTA SECTION
|
||||
Call to action to register
|
||||
========================================== -->
|
||||
<section class="py-32 relative overflow-hidden">
|
||||
<!-- Gradient Overlay -->
|
||||
<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>
|
||||
<p class="text-slate-400 text-xl mb-12 max-w-2xl mx-auto leading-relaxed">
|
||||
ลงทะเบียนฟรีวันนี้เพื่อเข้าถึงบทเรียนพื้นฐาน และติดตามความคืบหน้าการเรียนของคุณได้ทันที ไม่มีค่าใช้จ่ายแอบแฝง
|
||||
</p>
|
||||
<NuxtLink
|
||||
to="/auth/register"
|
||||
class="inline-flex items-center gap-3 px-10 py-5 bg-gradient-to-r from-blue-600 to-indigo-600 hover:from-blue-500 hover:to-indigo-500 text-white rounded-2xl text-lg font-black shadow-2xl shadow-blue-900/40 hover:scale-105 transition-all duration-300"
|
||||
>
|
||||
<span>🚀</span>
|
||||
<span>สมัครสมาชิกฟรี</span>
|
||||
</NuxtLink>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
/*
|
||||
MATCHING INDEX.VUE STYLES
|
||||
These styles ensure consistency with the landing page theme.
|
||||
*/
|
||||
|
||||
/* Gradient Text Effect (Cyan to Blue) */
|
||||
.text-gradient-cyan {
|
||||
background: linear-gradient(135deg, #22d3ee 0%, #3b82f6 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
|
||||
/* Premium Glass Effect for Containers */
|
||||
.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 {
|
||||
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;
|
||||
}
|
||||
|
||||
/* Slow Pulse Animation for Background Glows */
|
||||
@keyframes pulse-slow {
|
||||
0%, 100% { opacity: 0.1; transform: scale(1); }
|
||||
50% { opacity: 0.15; transform: scale(1.15); }
|
||||
}
|
||||
|
||||
.animate-pulse-slow {
|
||||
animation: pulse-slow 10s linear infinite;
|
||||
}
|
||||
|
||||
/* Slide Up Entrance Animation */
|
||||
@keyframes slide-up {
|
||||
from { opacity: 0; transform: translateY(30px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
|
||||
.slide-up {
|
||||
animation: slide-up 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
|
||||
opacity: 0;
|
||||
}
|
||||
</style>
|
||||
175
Frontend-Learner/pages/browse/opencovery.vue
Normal file
175
Frontend-Learner/pages/browse/opencovery.vue
Normal file
|
|
@ -0,0 +1,175 @@
|
|||
<script setup lang="ts">
|
||||
/**
|
||||
* @file opencovery.vue
|
||||
* @description Public Course Detail Page.
|
||||
* Displays detailed information about a specific course without requiring authentication.
|
||||
*/
|
||||
|
||||
definePageMeta({
|
||||
layout: 'landing',
|
||||
auth: false // Explicitly public
|
||||
})
|
||||
|
||||
useHead({
|
||||
title: 'รายละเอียดคอร์ส - E-Learning System'
|
||||
})
|
||||
|
||||
// Mock Data (Static for now, ideally would fetch based on ID)
|
||||
const course = {
|
||||
title: 'เบื้องต้นการออกแบบ UX/UI',
|
||||
price: 'ฟรี',
|
||||
originalPrice: '',
|
||||
description: 'เนื้อหาครอบคลุมทุกอย่างตั้งแต่การวิจัยผู้ใช้ (User Research) ไปจนถึงการทำต้นแบบความละเอียดสูง (High-fidelity Prototyping) เหมาะสำหรับผู้เริ่มต้นที่ต้องการเข้าสู่สายงานออกแบบผลิตภัณฑ์',
|
||||
duration: '4.5 ชั่วโมง',
|
||||
lessons: 12,
|
||||
certificate: true,
|
||||
objectives: [
|
||||
'วิธีการวิจัยผู้ใช้ (User Research)',
|
||||
'การวาดโครงร่างและทำต้นแบบ',
|
||||
'ระบบการออกแบบ (Design Systems)',
|
||||
'การทดสอบการใช้งาน (Usability Testing)'
|
||||
],
|
||||
syllabus: [
|
||||
{
|
||||
title: '01. บทนำ',
|
||||
lessonCount: 3,
|
||||
lessons: [
|
||||
{ title: '1.1 การออกแบบ UX คืออะไร?', duration: '10:00' },
|
||||
{ title: '1.2 กระบวนการคิดเชิงออกแบบ (Design Thinking)', duration: '15:30' },
|
||||
{ title: '1.3 เครื่องมือที่ต้องใช้', duration: '05:00' }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: '02. การวิจัยผู้ใช้',
|
||||
lessonCount: 4,
|
||||
lessons: [
|
||||
{ title: '2.1 การสัมภาษณ์ผู้ใช้', duration: '12:00' },
|
||||
{ title: '2.2 การสร้าง Persona', duration: '18:00' }
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="relative min-h-screen text-slate-200 bg-slate-900 transition-colors pt-32 pb-20">
|
||||
|
||||
<!-- Background Effects -->
|
||||
<div class="fixed inset-0 overflow-hidden pointer-events-none -z-10">
|
||||
<div class="absolute top-[-20%] right-[-10%] w-[60%] h-[60%] rounded-full bg-blue-600/10 blur-[140px] animate-pulse-slow"/>
|
||||
<div class="absolute bottom-[-20%] left-[-10%] w-[60%] h-[60%] rounded-full bg-indigo-600/10 blur-[140px] animate-pulse-slow" style="animation-delay: 3s;"/>
|
||||
</div>
|
||||
|
||||
<div class="container mx-auto max-w-6xl px-6">
|
||||
|
||||
<!-- Back Button -->
|
||||
<NuxtLink to="/browse/discovery" class="inline-flex items-center gap-2 text-slate-400 hover:text-white mb-8 transition-colors">
|
||||
<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="M10 19l-7-7m0 0l7-7m-7 7h18" />
|
||||
</svg>
|
||||
กลับหน้ารายการคอร์ส
|
||||
</NuxtLink>
|
||||
|
||||
<div class="grid grid-cols-1lg lg:grid-cols-12 gap-10">
|
||||
|
||||
<!-- Main Content (Left Column) -->
|
||||
<div class="lg:col-span-8">
|
||||
<!-- Hero Video Placeholder -->
|
||||
<div class="relative aspect-video bg-slate-800 rounded-3xl overflow-hidden border border-white/5 shadow-2xl mb-8 group cursor-pointer">
|
||||
<div class="absolute inset-0 bg-gradient-to-br from-slate-800 to-slate-900 flex items-center justify-center">
|
||||
<div class="w-20 h-20 rounded-full bg-blue-600 flex items-center justify-center shadow-[0_0_30px_rgba(37,99,235,0.5)] group-hover:scale-110 transition-transform duration-300">
|
||||
<div class="ml-1 w-0 h-0 border-t-[12px] border-t-transparent border-l-[20px] border-l-white border-b-[12px] border-b-transparent"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h1 class="text-4xl font-black text-white mb-6 leading-tight">{{ course.title }}</h1>
|
||||
<p class="text-slate-400 text-lg leading-relaxed mb-10">
|
||||
{{ course.description }}
|
||||
</p>
|
||||
|
||||
<!-- Learning Objectives -->
|
||||
<div class="p-8 rounded-3xl bg-white/5 border border-white/5 mb-10">
|
||||
<h3 class="font-bold text-xl text-white mb-6">สิ่งที่คุณจะได้เรียนรู้</h3>
|
||||
<ul class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<li v-for="(obj, idx) in course.objectives" :key="idx" class="flex gap-3 text-slate-300">
|
||||
<span class="text-emerald-400 font-bold">✓</span> {{ obj }}
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- Course Syllabus -->
|
||||
<div class="p-8 rounded-3xl bg-white/5 border border-white/5">
|
||||
<h3 class="font-bold text-xl text-white mb-6">เนื้อหาในคอร์ส</h3>
|
||||
<div class="space-y-4">
|
||||
<div v-for="(chapter, idx) in course.syllabus" :key="idx">
|
||||
<div class="flex justify-between items-center p-4 bg-white/5 rounded-2xl mb-2 border border-white/5">
|
||||
<span class="font-bold text-white">{{ chapter.title }}</span>
|
||||
<span class="text-sm text-slate-500">{{ chapter.lessonCount }} บทเรียน</span>
|
||||
</div>
|
||||
<div class="pl-4 space-y-1">
|
||||
<div v-for="(lesson, lIdx) in chapter.lessons" :key="lIdx" class="flex justify-between py-3 px-4 border-b border-white/5 last:border-0 text-slate-400 hover:bg-white/5 rounded-xl transition-colors">
|
||||
<span class="text-sm">
|
||||
<span class="mr-2 opacity-50">🎥</span> {{ lesson.title }}
|
||||
</span>
|
||||
<span class="text-sm opacity-60">{{ lesson.duration }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Sidebar (Right Column): Sticky CTA -->
|
||||
<div class="lg:col-span-4">
|
||||
<div class="sticky top-28 p-8 rounded-3xl bg-slate-800/80 backdrop-blur-xl border border-white/10 shadow-2xl">
|
||||
<div class="mb-8 text-center lg:text-left">
|
||||
<span class="text-lg text-slate-500 line-through mr-4">{{ course.originalPrice }}</span>
|
||||
<span class="text-5xl font-black text-white tracking-tight">{{ course.price }}</span>
|
||||
<div class="mt-4">
|
||||
<span class="inline-block px-3 py-1 rounded-lg bg-emerald-500/10 text-emerald-400 text-xs font-bold border border-emerald-500/20 uppercase tracking-wider">
|
||||
ระยะเวลาจำกัด
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<NuxtLink to="/auth/register" class="flex items-center justify-center w-full py-4 bg-blue-600 hover:bg-blue-500 text-white rounded-xl font-bold text-lg shadow-lg shadow-blue-600/30 transition-all hover:-translate-y-1 mb-6">
|
||||
ลงทะเบียนเรียนทันที
|
||||
</NuxtLink>
|
||||
|
||||
<div class="space-y-4 text-sm text-slate-400">
|
||||
<div class="flex justify-between py-3 border-b border-white/5">
|
||||
<span>ระยะเวลาเรียน</span>
|
||||
<span class="font-bold text-white">{{ course.duration }}</span>
|
||||
</div>
|
||||
<div class="flex justify-between py-3 border-b border-white/5">
|
||||
<span>จำนวนบทเรียน</span>
|
||||
<span class="font-bold text-white">{{ course.lessons }} บท</span>
|
||||
</div>
|
||||
<div class="flex justify-between py-3 border-b border-white/5">
|
||||
<span>ใบประกาศนียบัตร</span>
|
||||
<span class="font-bold text-white">{{ course.certificate ? 'มี' : 'ไม่มี' }}</span>
|
||||
</div>
|
||||
<div class="flex justify-between py-3 border-b border-white/5">
|
||||
<span>ระดับ</span>
|
||||
<span class="font-bold text-white">เหมาะสำหรับทุกคน</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
@keyframes pulse-slow {
|
||||
0%, 100% { opacity: 0.1; transform: scale(1); }
|
||||
50% { opacity: 0.15; transform: scale(1.15); }
|
||||
}
|
||||
|
||||
.animate-pulse-slow {
|
||||
animation: pulse-slow 10s linear infinite;
|
||||
}
|
||||
</style>
|
||||
Loading…
Add table
Add a link
Reference in a new issue