Website Structure
This commit is contained in:
supalerk-ar66
parent
62812f2090
commit
71f0676a62
22365 changed files with 4265753 additions and 791 deletions
142
Frontend-Learner/pages/dashboard/announcements.vue
Normal file
142
Frontend-Learner/pages/dashboard/announcements.vue
Normal file
|
|
@ -0,0 +1,142 @@
|
|||
<script setup lang="ts">
|
||||
/**
|
||||
* @file announcements.vue
|
||||
* @description Page displaying system and course-related announcements.
|
||||
* Uses the default layout and requires authentication.
|
||||
*/
|
||||
|
||||
// Define page metadata: usage of 'default' layout and 'auth' middleware
|
||||
definePageMeta({
|
||||
layout: 'default',
|
||||
middleware: 'auth'
|
||||
})
|
||||
|
||||
// Set page title for SEO
|
||||
useHead({
|
||||
title: 'ประกาศ - e-Learning'
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<!-- Page Header -->
|
||||
<h1 style="font-size: 28px; font-weight: 700; margin-bottom: 24px;">ประกาศ</h1>
|
||||
|
||||
<!--
|
||||
Main Layout: 12-column Grid
|
||||
- Left Column (span-8): Main announcements content
|
||||
- Right Column (span-4): Categories/Filter sidebar
|
||||
-->
|
||||
<div class="grid-12">
|
||||
|
||||
<!-- ==========================================
|
||||
MAIN CONTENT AREA (Left)
|
||||
========================================== -->
|
||||
<div class="col-span-8">
|
||||
|
||||
<!-- Feature 1: Critical System Announcement -->
|
||||
<div class="card mb-6">
|
||||
<div class="flex items-center gap-2 mb-2">
|
||||
<span class="status-pill status-warning">สำคัญ</span>
|
||||
<span class="text-sm text-slate-600 dark:text-slate-400">24 ธ.ค. 2024</span>
|
||||
</div>
|
||||
<h2 class="font-bold mb-4" style="font-size: 1.25rem;">แจ้งปิดปรับปรุงระบบ</h2>
|
||||
<p class="mb-4">เราจะทำการปิดปรับปรุงระบบในวันที่ 25 ธ.ค. เวลา 02:00 - 04:00 น. ขออภัยในความไม่สะดวก</p>
|
||||
<!-- Attachment Block -->
|
||||
<div class="flex items-center gap-2 p-3 rounded" style="background: var(--neutral-50); border: 1px solid var(--border-color); width: fit-content;">
|
||||
<span>📎</span> <span class="text-sm font-bold">ตารางการปิดปรับปรุง.pdf</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Announcement: UX/UI Course Update -->
|
||||
<div class="card mb-4" style="border-left: 4px solid var(--primary);">
|
||||
<div class="flex justify-between items-start mb-2" style="flex-wrap: wrap; gap: 8px;">
|
||||
<div>
|
||||
<span class="status-pill status-neutral mb-2">เบื้องต้นการออกแบบ UX/UI</span>
|
||||
<h3 class="font-bold">เริ่มเปิดหลักสูตรเดือนมกราคมแล้ว!</h3>
|
||||
</div>
|
||||
<span class="text-sm text-slate-600 dark:text-slate-400">23 ธ.ค. 2024</span>
|
||||
</div>
|
||||
<p class="text-slate-700 dark:text-slate-300 mb-2">นักเรียนที่ลงทะเบียนไว้ สามารถเริ่มเข้าเรียนบทนำได้ตั้งแต่วันนี้เป็นต้นไป...</p>
|
||||
<NuxtLink to="/browse/discovery" class="text-sm" style="color: var(--primary);">ดูรายละเอียดคอร์ส</NuxtLink>
|
||||
</div>
|
||||
|
||||
<!-- Announcement: Accessibility (WCAG) Material -->
|
||||
<div class="card mb-4" style="border-left: 4px solid var(--success);">
|
||||
<div class="flex justify-between items-start mb-2" style="flex-wrap: wrap; gap: 8px;">
|
||||
<div>
|
||||
<span class="status-pill status-neutral mb-2">การเข้าถึงเว็บ (WCAG)</span>
|
||||
<h3 class="font-bold">ดาวน์โหลดเอกสารประกอบการเรียนได้แล้ว</h3>
|
||||
</div>
|
||||
<span class="text-sm text-slate-600 dark:text-slate-400">22 ธ.ค. 2024</span>
|
||||
</div>
|
||||
<p class="text-slate-700 dark:text-slate-300 mb-2">เราได้เพิ่มไฟล์ PDF สรุปเกณฑ์ WCAG 2.2 ในส่วนของเอกสารประกอบการเรียนแล้ว...</p>
|
||||
<!-- Small Attachment -->
|
||||
<div class="flex items-center gap-2 p-2 rounded mt-2" style="background: var(--neutral-50); border: 1px dotted var(--border-color); width: fit-content;">
|
||||
<span>📄</span> <span class="text-xs">WCAG_2.2_Summary.pdf</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Announcement: React Course Update -->
|
||||
<div class="card mb-4" style="border-left: 4px solid var(--warning);">
|
||||
<div class="flex justify-between items-start mb-2" style="flex-wrap: wrap; gap: 8px;">
|
||||
<div>
|
||||
<span class="status-pill status-neutral mb-2">รูปแบบ React ขั้นสูง</span>
|
||||
<h3 class="font-bold">อัปเดตบทเรียนใหม่: React Server Components</h3>
|
||||
</div>
|
||||
<span class="text-sm text-slate-600 dark:text-slate-400">21 ธ.ค. 2024</span>
|
||||
</div>
|
||||
<p class="text-slate-700 dark:text-slate-300 mb-2">เพิ่มเนื้อหาการใช้งาน RSC และการจัดการ State ใน Next.js 14...</p>
|
||||
<NuxtLink to="/classroom/learning" class="btn btn-secondary text-sm" style="width: fit-content;">เข้าสู่บทเรียน</NuxtLink>
|
||||
</div>
|
||||
|
||||
<!-- Announcement: General New Course -->
|
||||
<div class="card mb-4">
|
||||
<div class="flex justify-between items-start mb-2" style="flex-wrap: wrap; gap: 8px;">
|
||||
<h3 class="font-bold">คอร์สใหม่: Advanced Python</h3>
|
||||
<span class="text-sm text-slate-600 dark:text-slate-400">20 ธ.ค. 2024</span>
|
||||
</div>
|
||||
<p class="text-slate-700 dark:text-slate-300 mb-2">พบกับคอร์สใหม่ล่าสุด เรียนรู้โครงสร้างข้อมูล Python...</p>
|
||||
<a href="#" class="text-sm" style="color: var(--primary);">อ่านเพิ่มเติม</a>
|
||||
</div>
|
||||
|
||||
<!-- Announcement: Platform Update -->
|
||||
<div class="card mb-4">
|
||||
<div class="flex justify-between items-start mb-2" style="flex-wrap: wrap; gap: 8px;">
|
||||
<h3 class="font-bold">ยินดีต้อนรับสู่ดีไซน์ใหม่!</h3>
|
||||
<span class="text-sm text-slate-600 dark:text-slate-400">15 ธ.ค. 2024</span>
|
||||
</div>
|
||||
<p class="text-slate-700 dark:text-slate-300 mb-2">เราปรับโฉมใหม่ไฉไลกว่าเดิม เพื่อการใช้งานที่ดียิ่งขึ้น...</p>
|
||||
<a href="#" class="text-sm" style="color: var(--primary);">อ่านเพิ่มเติม</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ==========================================
|
||||
SIDEBAR (Right)
|
||||
Category Filters
|
||||
========================================== -->
|
||||
<div class="col-span-4">
|
||||
<div class="card">
|
||||
<h3 class="font-bold mb-4">หมวดหมู่</h3>
|
||||
<ul class="flex flex-col gap-2">
|
||||
<!-- Filter Option: All -->
|
||||
<li class="flex justify-between items-center p-2 rounded cursor-pointer" style="background: var(--neutral-50);">
|
||||
<span>ทั้งหมด</span>
|
||||
<span class="text-muted">15</span>
|
||||
</li>
|
||||
<!-- Filter Option: System Updates -->
|
||||
<li class="flex justify-between items-center p-2 rounded cursor-pointer">
|
||||
<span>อัปเดตระบบ</span>
|
||||
<span class="text-muted">3</span>
|
||||
</li>
|
||||
<!-- Filter Option: Course News -->
|
||||
<li class="flex justify-between items-center p-2 rounded cursor-pointer">
|
||||
<span>ข่าวสารคอร์ส</span>
|
||||
<span class="text-muted">11</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
209
Frontend-Learner/pages/dashboard/index.vue
Normal file
209
Frontend-Learner/pages/dashboard/index.vue
Normal file
|
|
@ -0,0 +1,209 @@
|
|||
<script setup lang="ts">
|
||||
/**
|
||||
* @file home.vue
|
||||
* @description Dashboard / Home Page.
|
||||
* Displays the user's dashboard with a welcome message, current learning progress, and course recommendations.
|
||||
*/
|
||||
|
||||
definePageMeta({
|
||||
layout: 'default',
|
||||
middleware: 'auth'
|
||||
})
|
||||
|
||||
useHead({
|
||||
title: 'Dashboard - e-Learning'
|
||||
})
|
||||
|
||||
// Mock data: Recent Course Progress
|
||||
const recentCourse = {
|
||||
title: 'เบื้องต้นการออกแบบ UX/UI',
|
||||
lesson: 'บทที่ 3: พื้นฐานการวาดโครงร่าง (Wireframing Basics)',
|
||||
progress: 65,
|
||||
image: 'https://images.unsplash.com/photo-1586717791821-3f44a563de4c?w=400&auto=format&fit=crop&q=60'
|
||||
}
|
||||
|
||||
// Mock data: Recommended Courses
|
||||
const recommendedCourses = [
|
||||
{
|
||||
title: 'Advanced React Patterns',
|
||||
category: 'Development',
|
||||
duration: '4h 30m',
|
||||
image: 'https://images.unsplash.com/photo-1633356122544-f134324a6cee?w=400&auto=format&fit=crop&q=60',
|
||||
badge: 'New',
|
||||
badgeType: 'success'
|
||||
},
|
||||
{
|
||||
title: 'Data Science Fundamentals',
|
||||
category: 'Data Science',
|
||||
duration: '12h 0m',
|
||||
image: 'https://images.unsplash.com/photo-1551288049-bbda38a0617f?w=400&auto=format&fit=crop&q=60',
|
||||
badge: 'Popular',
|
||||
badgeType: 'warning'
|
||||
}
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="dashboard-container">
|
||||
<!-- Welcome Header Section -->
|
||||
<div class="welcome-section mb-10 overflow-hidden relative rounded-[2.5rem] p-10 md:p-14 text-white shadow-lg dark:shadow-2xl dark:shadow-blue-900/20 transition-all">
|
||||
<div class="relative z-10 flex flex-col md:flex-row justify-between items-center gap-8">
|
||||
<div>
|
||||
<h1 class="text-4xl md:text-5xl font-black mb-3 slide-up tracking-tight text-white dark:text-white">ยินดีต้อนรับกลับ, สมชาย!</h1>
|
||||
<p class="text-lg slide-up font-medium text-blue-100" style="animation-delay: 0.1s;">วันนี้เป็นวันที่ดีสำหรับการเรียนรู้สิ่งใหม่ๆ มาเก็บความรู้เพิ่มกันเถอะ</p>
|
||||
</div>
|
||||
<div class="stats-mini flex gap-6 slide-up" style="animation-delay: 0.2s;"/>
|
||||
</div>
|
||||
<!-- Decorative Background elements -->
|
||||
<div class="absolute inset-0 bg-gradient-to-br from-blue-500 via-blue-600 to-indigo-700 dark:from-blue-600 dark:via-blue-700 dark:to-indigo-900 -z-0"/>
|
||||
<div class="absolute -top-20 -right-20 w-80 h-80 bg-white/10 blur-[100px] rounded-full"/>
|
||||
<div class="absolute -bottom-20 -left-20 w-80 h-80 bg-blue-400/20 blur-[100px] rounded-full"/>
|
||||
</div>
|
||||
|
||||
<!-- Main Content Area -->
|
||||
<div class="lg:col-span-12">
|
||||
<!-- Section: Continue Learning -->
|
||||
<div class="flex items-center justify-between mb-8">
|
||||
<h2 class="text-2xl font-black flex items-center gap-3 tracking-tight text-slate-900 dark:text-white">
|
||||
<span class="w-1.5 h-8 bg-blue-500 rounded-full shadow-[0_0_15px_rgba(59,130,246,0.5)]"/>
|
||||
เรียนต่อจากเดิม
|
||||
</h2>
|
||||
<NuxtLink to="/classroom/learning" class="text-sm font-black text-blue-600 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300 transition-colors uppercase tracking-widest">เข้าสู่บทเรียนเต็มตัว →</NuxtLink>
|
||||
</div>
|
||||
|
||||
<!-- Featured Current Course Card -->
|
||||
<div class="p-0 overflow-hidden group mb-12 border border-slate-200 dark:border-white/5 rounded-3xl shadow-sm dark:shadow-2xl transition-all hover:-translate-y-1 dark:hover:-translate-y-1" style="background-color: var(--bg-surface);">
|
||||
<div class="flex flex-col md:flex-row">
|
||||
<!-- Course Image -->
|
||||
<div class="md:w-2/5 aspect-video md:aspect-auto overflow-hidden relative rounded-t-3xl md:rounded-l-3xl md:rounded-tr-none">
|
||||
<img :src="recentCourse.image" :alt="recentCourse.title" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-700" >
|
||||
<div class="absolute inset-0 bg-gradient-to-t from-slate-900/30 via-transparent to-transparent opacity-40 dark:opacity-60 dark:from-[#0f172a]"/>
|
||||
</div>
|
||||
<!-- Course Details & Progress -->
|
||||
<div class="p-8 md:p-10 flex-1 flex flex-col justify-center" style="background-color: var(--bg-surface);">
|
||||
<span class="text-[10px] font-black uppercase tracking-[0.2em] text-blue-700 dark:text-blue-400 mb-3">Currently Learning</span>
|
||||
<h3 class="text-3xl font-black mb-2 leading-tight text-slate-900 dark:text-white group-hover:text-blue-700 dark:group-hover:text-blue-400 transition-colors">{{ recentCourse.title }}</h3>
|
||||
<p class="text-slate-700 dark:text-slate-400 text-base mb-8 font-medium">{{ recentCourse.lesson }}</p>
|
||||
|
||||
<!-- Progress Bar -->
|
||||
<div class="mt-auto bg-slate-100 dark:bg-slate-900/50 p-6 rounded-3xl border border-slate-200 dark:border-white/5">
|
||||
<div class="flex justify-between items-center mb-3">
|
||||
<span class="text-xs font-black text-slate-800 dark:text-slate-500 uppercase tracking-widest">Progress</span>
|
||||
<span class="text-sm font-black text-blue-700 dark:text-blue-400">{{ recentCourse.progress }}%</span>
|
||||
</div>
|
||||
<div class="h-2.5 w-full bg-slate-300 dark:bg-slate-700 rounded-full overflow-hidden shadow-inner">
|
||||
<div class="h-full bg-gradient-to-r from-blue-600 to-blue-500 rounded-full shadow-[0_0_10px_rgba(59,130,246,0.3)] transition-all duration-1000" :style="{ width: `${recentCourse.progress}%` }"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Section: Recommended Courses -->
|
||||
<div class="mb-8">
|
||||
<h2 class="text-2xl font-black flex items-center gap-3 tracking-tight text-black dark:text-white">
|
||||
<span class="w-1.5 h-8 bg-emerald-500 rounded-full shadow-[0_0_15px_rgba(16,185,129,0.5)]"/>
|
||||
คอร์สเรียนแนะนำ
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<!-- Recommended Grid -->
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
|
||||
<div v-for="(course, idx) in recommendedCourses" :key="idx" class="p-0 overflow-hidden group border border-slate-200 dark:border-white/5 rounded-3xl shadow-sm dark:shadow-xl transition-all hover:-translate-y-1 dark:hover:-translate-y-1" style="background-color: var(--bg-surface);">
|
||||
<div class="h-48 overflow-hidden relative rounded-t-3xl">
|
||||
<img :src="course.image" :alt="course.title" class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-700" >
|
||||
<span v-if="course.badge" :class="`absolute top-5 left-5 status-pill status-${course.badgeType} shadow-lg font-black text-[9px]`">{{ course.badge }}</span>
|
||||
<div class="absolute inset-x-0 bottom-0 h-1/2 bg-gradient-to-t from-slate-900/20 dark:from-[#1e293b] to-transparent"/>
|
||||
</div>
|
||||
<div class="p-7" style="background-color: var(--bg-surface);">
|
||||
<div class="text-[10px] font-black text-slate-700 dark:text-slate-500 uppercase tracking-[0.2em] mb-2">{{ course.category }}</div>
|
||||
<h4 class="font-black text-xl mb-6 text-slate-900 dark:text-white group-hover:text-blue-700 dark:group-hover:text-blue-400 transition-colors">{{ course.title }}</h4>
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="text-xs font-bold text-slate-700 dark:text-slate-400 flex items-center gap-2">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-slate-600 dark:text-slate-500" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
|
||||
{{ course.duration }}
|
||||
</span>
|
||||
<button class="text-[11px] font-black text-blue-700 dark:text-blue-500 uppercase tracking-widest hover:text-blue-800 dark:hover:text-blue-400 transition-colors">ดูรายละเอียด</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.dashboard-container {
|
||||
max-width: 1400px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.card-premium {
|
||||
background: #ffffff;
|
||||
border-radius: 2.5rem;
|
||||
transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
|
||||
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.card-premium:hover {
|
||||
transform: translateY(-6px);
|
||||
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
:global(.dark) .card-premium {
|
||||
background: #1e293b;
|
||||
box-shadow: 0 20px 50px -12px rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
:global(.dark) .card-premium:hover {
|
||||
box-shadow: 0 30px 60px -12px rgba(0, 0, 0, 0.6);
|
||||
}
|
||||
|
||||
:global(.app-main) {
|
||||
background-color: #ffffff;
|
||||
color: #1e293b;
|
||||
transition: background-color 0.2s, color 0.2s;
|
||||
}
|
||||
|
||||
:global(.dark) :global(.app-main) {
|
||||
background-color: #0f172a;
|
||||
color: #f1f5f9;
|
||||
}
|
||||
|
||||
.glass-bright {
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
backdrop-filter: blur(20px);
|
||||
}
|
||||
|
||||
@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;
|
||||
}
|
||||
|
||||
.status-pill {
|
||||
@apply px-4 py-1.5 rounded-full font-black uppercase tracking-widest border;
|
||||
}
|
||||
.status-success {
|
||||
@apply bg-emerald-500/10 text-emerald-400 border-emerald-500/30;
|
||||
}
|
||||
.status-warning {
|
||||
@apply bg-amber-500/10 text-amber-400 border-amber-500/30;
|
||||
}
|
||||
|
||||
:global(.app-main) {
|
||||
background-color: #ffffff;
|
||||
color: #1e293b;
|
||||
min-height: 100vh;
|
||||
transition: background-color 0.2s, color 0.2s;
|
||||
}
|
||||
|
||||
:global(.dark) :global(.app-main) {
|
||||
background-color: #0f172a;
|
||||
color: #f1f5f9;
|
||||
}
|
||||
</style>
|
||||
213
Frontend-Learner/pages/dashboard/my-courses.vue
Normal file
213
Frontend-Learner/pages/dashboard/my-courses.vue
Normal file
|
|
@ -0,0 +1,213 @@
|
|||
<script setup lang="ts">
|
||||
/**
|
||||
* @file my-courses.vue
|
||||
* @description My Courses Page.
|
||||
* Displays enrolled courses with filters for progress/completed.
|
||||
* Handles enrollment success modals and certificate downloads.
|
||||
*/
|
||||
|
||||
definePageMeta({
|
||||
layout: 'default',
|
||||
middleware: 'auth'
|
||||
})
|
||||
|
||||
useHead({
|
||||
title: 'คอร์สของฉัน - e-Learning'
|
||||
})
|
||||
|
||||
const route = useRoute()
|
||||
const showEnrollModal = ref(false)
|
||||
const showCertModal = ref(false)
|
||||
const activeFilter = ref<'all' | 'progress' | 'completed'>('all')
|
||||
|
||||
// Check URL query parameters to show 'Enrollment Success' modal
|
||||
onMounted(() => {
|
||||
if (route.query.enrolled) {
|
||||
showEnrollModal.value = true
|
||||
}
|
||||
})
|
||||
|
||||
// Mock Enrolled Courses Data
|
||||
const courses = [
|
||||
{
|
||||
id: 1,
|
||||
title: 'เบื้องต้นการออกแบบ UX/UI',
|
||||
progress: 65,
|
||||
category: 'progress'
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
title: 'การเข้าถึงเว็บ (WCAG)',
|
||||
progress: 10,
|
||||
category: 'progress'
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
title: 'HTML5 พื้นฐาน',
|
||||
progress: 100,
|
||||
completed: true,
|
||||
category: 'completed'
|
||||
}
|
||||
]
|
||||
|
||||
// Computed property to filter courses
|
||||
const filteredCourses = computed(() => {
|
||||
if (activeFilter.value === 'all') return courses
|
||||
return courses.filter(c => c.category === activeFilter.value)
|
||||
})
|
||||
|
||||
const filterCourses = (filter: 'all' | 'progress' | 'completed') => {
|
||||
activeFilter.value = filter
|
||||
}
|
||||
|
||||
// Mock certificate download action
|
||||
const downloadCertificate = () => {
|
||||
showCertModal.value = false
|
||||
alert('เริ่มดาวน์โหลด PDF...')
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<!-- Page Header & Filters -->
|
||||
<div class="flex justify-between items-center mb-6 mobile-stack">
|
||||
<h1 style="font-size: 28px; font-weight: 700;">คอร์สของฉัน</h1>
|
||||
<!-- Filter Tabs -->
|
||||
<div class="flex gap-2" style="overflow-x: auto; padding-bottom: 4px; width: 100%; justify-content: flex-start;">
|
||||
<button
|
||||
:class="activeFilter === 'all' ? 'btn btn-primary' : 'btn btn-secondary'"
|
||||
style="white-space: nowrap;"
|
||||
@click="filterCourses('all')"
|
||||
>
|
||||
ทั้งหมด
|
||||
</button>
|
||||
<button
|
||||
:class="activeFilter === 'progress' ? 'btn btn-primary' : 'btn btn-secondary'"
|
||||
style="white-space: nowrap;"
|
||||
@click="filterCourses('progress')"
|
||||
>
|
||||
กำลังเรียน
|
||||
</button>
|
||||
<button
|
||||
:class="activeFilter === 'completed' ? 'btn btn-primary' : 'btn btn-secondary'"
|
||||
style="white-space: nowrap;"
|
||||
@click="filterCourses('completed')"
|
||||
>
|
||||
เรียนจบแล้ว
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Courses Grid -->
|
||||
<div class="my-courses-grid">
|
||||
<template v-for="course in filteredCourses" :key="course.id">
|
||||
<!-- In Progress Course Card -->
|
||||
<CourseCard
|
||||
v-if="!course.completed"
|
||||
:title="course.title"
|
||||
:progress="course.progress"
|
||||
show-continue
|
||||
/>
|
||||
<!-- Completed Course Card -->
|
||||
<CourseCard
|
||||
v-else
|
||||
:title="course.title"
|
||||
:completed="true"
|
||||
show-certificate
|
||||
show-study-again
|
||||
@view-certificate="showCertModal = true"
|
||||
/>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
<!-- Empty State -->
|
||||
<div v-if="filteredCourses.length === 0" class="empty-state">
|
||||
<div class="empty-state-icon">📚</div>
|
||||
<h3 class="empty-state-title">ยังไม่มีคอร์สในหมวดหมู่นี้</h3>
|
||||
<p class="empty-state-description">คุณยังไม่มีคอร์สเรียนในส่วนนี้ ลองเลือกดูคอร์สที่น่าสนใจในระบบของเรา</p>
|
||||
<NuxtLink to="/browse/discovery" class="btn btn-primary">ไปที่รายการคอร์ส</NuxtLink>
|
||||
</div>
|
||||
|
||||
<!-- MODAL: Enrollment Success -->
|
||||
<div
|
||||
v-if="showEnrollModal"
|
||||
style="display: flex; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 100; align-items: center; justify-content: center; padding: 20px;"
|
||||
>
|
||||
<div class="card" style="width: 400px; text-align: center; max-width: 90%;">
|
||||
<div style="width: 64px; height: 64px; background: var(--success); color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 32px; margin: 0 auto 24px;">
|
||||
✓
|
||||
</div>
|
||||
<h2 class="font-bold mb-2">ลงทะเบียนสำเร็จ!</h2>
|
||||
<p class="text-muted mb-6">คุณได้ลงทะเบียนคอร์ส <strong>เบื้องต้นการออกแบบ UX/UI</strong> เรียบร้อยแล้ว</p>
|
||||
<div class="flex flex-col gap-2">
|
||||
<NuxtLink to="/classroom/learning" class="btn btn-primary w-full">เริ่มเรียนทันที</NuxtLink>
|
||||
<button class="btn btn-secondary w-full" @click="showEnrollModal = false">ไว้ทีหลัง</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- MODAL: Certificate Preview -->
|
||||
<div
|
||||
v-if="showCertModal"
|
||||
style="display: flex; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.8); z-index: 1000; align-items: center; justify-content: center; padding: 20px;"
|
||||
>
|
||||
<div class="cert-container">
|
||||
<!-- Close Button -->
|
||||
<button style="position: absolute; top: 15px; right: 20px; border: none; background: none; font-size: 32px; cursor: pointer; color: #1E293B; z-index: 10;" @click="showCertModal = false">×</button>
|
||||
|
||||
<div class="cert-inner">
|
||||
<h1 class="cert-title">ใบประกาศนียบัตรจบหลักสูตร</h1>
|
||||
<div style="width: 100px; height: 2px; background: #D4AF37; margin: 0 auto 24px;"/>
|
||||
|
||||
<p style="color: #64748B; margin-bottom: 16px; font-size: 16px;">ขอมอบใบประกาศนี้เพื่อแสดงว่า</p>
|
||||
|
||||
<h2 class="cert-name">สมชาย ใจดี</h2>
|
||||
|
||||
<p style="color: #64748B; margin-bottom: 16px; font-size: 16px;">ได้ผ่านการอบรมและทดสอบความรู้ในหลักสูตร</p>
|
||||
|
||||
<h3 style="font-size: 24px; font-weight: 700; color: #3B82F6; margin-bottom: 30px;">HTML5 พื้นฐาน</h3>
|
||||
|
||||
<!-- Signature Section -->
|
||||
<div class="cert-footer">
|
||||
<div style="text-align: center;">
|
||||
<div style="width: 150px; border-bottom: 1px solid #1E293B; margin-bottom: 8px; padding-bottom: 8px; font-style: italic; margin-left: auto; margin-right: auto;">Somchai K.</div>
|
||||
<div style="font-size: 12px; color: #64748B;">ลายเซ็นผู้อำนวยการ</div>
|
||||
</div>
|
||||
|
||||
<!-- Golden Seal -->
|
||||
<div style="width: 80px; height: 80px; background: #D4AF37; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; color: white; border: 4px double white; box-shadow: 0 0 0 4px #D4AF37; transform: rotate(-5deg); flex-shrink: 0;">
|
||||
<div style="font-size: 10px; font-weight: bold;">Certified</div>
|
||||
<div style="font-size: 16px; font-weight: 900;">ผ่าน</div>
|
||||
</div>
|
||||
|
||||
<div style="text-align: center;">
|
||||
<div style="width: 150px; border-bottom: 1px solid #1E293B; margin-bottom: 8px; padding-bottom: 8px; margin-left: auto; margin-right: auto;">15 ธันวาคม 2024</div>
|
||||
<div style="font-size: 12px; color: #64748B;">วันที่ออกใบประกาศ</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Download Button -->
|
||||
<div style="margin-top: 32px; text-align: center;">
|
||||
<button class="btn btn-primary" @click="downloadCertificate">
|
||||
⬇ ดาวน์โหลด PDF
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.my-courses-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.my-courses-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
259
Frontend-Learner/pages/dashboard/profile.vue
Normal file
259
Frontend-Learner/pages/dashboard/profile.vue
Normal file
|
|
@ -0,0 +1,259 @@
|
|||
<script setup lang="ts">
|
||||
/**
|
||||
* @file profile.vue
|
||||
* @description User Profile & Settings Page.
|
||||
* Allows users to view their profile details and toggle an edit mode to update information.
|
||||
* Features a premium design with glassmorphism and gradient effects.
|
||||
*/
|
||||
|
||||
definePageMeta({
|
||||
layout: 'default',
|
||||
middleware: 'auth'
|
||||
})
|
||||
|
||||
useHead({
|
||||
title: 'ตั้งค่าบัญชี - e-Learning'
|
||||
})
|
||||
|
||||
const { currentUser } = useAuth()
|
||||
const isEditing = ref(false)
|
||||
|
||||
// User Profile Data Management
|
||||
const userData = ref({
|
||||
firstName: currentUser.value.firstName,
|
||||
lastName: currentUser.value.lastName,
|
||||
email: currentUser.value.email,
|
||||
phone: '081-234-5678',
|
||||
joinDate: '12 ธ.ค. 2024',
|
||||
studentId: 'STU 68203',
|
||||
photoURL: '', // Added missing property
|
||||
prefix: 'นาย' // Added missing property
|
||||
})
|
||||
|
||||
const fileInput = ref<HTMLInputElement | null>(null)
|
||||
|
||||
const toggleEdit = (edit: boolean) => {
|
||||
isEditing.value = edit
|
||||
}
|
||||
|
||||
const triggerUpload = () => {
|
||||
fileInput.value?.click()
|
||||
}
|
||||
|
||||
const handleFileUpload = (event: Event) => {
|
||||
const target = event.target as HTMLInputElement
|
||||
if (target.files && target.files[0]) {
|
||||
// Mock upload logic
|
||||
const reader = new FileReader()
|
||||
reader.onload = (e) => {
|
||||
userData.value.photoURL = e.target?.result as string
|
||||
}
|
||||
reader.readAsDataURL(target.files[0])
|
||||
}
|
||||
}
|
||||
|
||||
// Save Profile Updates (Mock Implementation)
|
||||
const saveProfile = () => {
|
||||
currentUser.value.firstName = userData.value.firstName
|
||||
currentUser.value.lastName = userData.value.lastName
|
||||
currentUser.value.email = userData.value.email
|
||||
isEditing.value = false
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="profile-page max-w-4xl mx-auto px-4 py-8">
|
||||
<!-- Header: Title and Edit action -->
|
||||
<div class="flex items-center justify-between mb-10">
|
||||
<h1 class="text-3xl font-black text-main">โปรไฟล์ของฉัน</h1>
|
||||
<div class="flex items-center gap-6">
|
||||
<button v-if="!isEditing" class="btn-premium-edit" @click="toggleEdit(true)">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z" />
|
||||
</svg>
|
||||
แก้ไขโปรไฟล์
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Profile View Card -->
|
||||
<!-- VIEW MODE: Display Profile Information -->
|
||||
<div v-if="!isEditing" class="card-premium overflow-hidden">
|
||||
<!-- Cover Banner -->
|
||||
<div class="bg-gradient-to-r from-blue-600 to-indigo-600 h-32 w-full"/>
|
||||
<div class="px-8 pb-10 -mt-16">
|
||||
<div class="flex flex-col md:flex-row items-end gap-6 mb-10">
|
||||
<div class="relative flex-shrink-0">
|
||||
<UserAvatar
|
||||
:photo-u-r-l="userData.photoURL"
|
||||
:first-name="userData.firstName"
|
||||
:last-name="userData.lastName"
|
||||
size="128"
|
||||
class="border-4 border-[#1e293b] shadow-2xl bg-slate-800"
|
||||
/>
|
||||
<div class="absolute bottom-2 right-2 bg-emerald-500 w-5 h-5 rounded-full border-4 border-[#1e293b]"/>
|
||||
</div>
|
||||
<div class="pb-2">
|
||||
<h2 class="text-3xl font-black text-slate-900 dark:text-white mb-1">{{ userData.firstName }} {{ userData.lastName }}</h2>
|
||||
<p class="text-slate-700 dark:text-slate-400 font-bold uppercase tracking-widest text-[10px]">Student ID: STU-88293</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Info Grid -->
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
|
||||
<div class="info-group">
|
||||
<span class="label">อีเมล</span>
|
||||
<p class="value">{{ userData.email }}</p>
|
||||
</div>
|
||||
<div class="info-group">
|
||||
<span class="label">เบอร์โทรศัพท์</span>
|
||||
<p class="value">{{ userData.phone }}</p>
|
||||
</div>
|
||||
<div class="info-group">
|
||||
<span class="label">สมัครสมาชิกเมื่อ</span>
|
||||
<p class="value">{{ userData.joinDate }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Edit Profile Card -->
|
||||
<!-- EDIT MODE: Edit Profile Form -->
|
||||
<div v-else class="card-premium p-8 md:p-12">
|
||||
<div class="flex items-center gap-4 mb-10">
|
||||
<button class="p-2 hover:bg-white/5 rounded-xl transition-colors" @click="toggleEdit(false)">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-slate-400" 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>
|
||||
</button>
|
||||
<h2 class="text-2xl font-black text-slate-900 dark:text-white">แก้ไขข้อมูลส่วนตัว</h2>
|
||||
</div>
|
||||
|
||||
<!-- Avatar Upload Section -->
|
||||
<div class="flex flex-col md:flex-row items-center gap-8 mb-12">
|
||||
<div class="relative group cursor-pointer" @click="triggerUpload">
|
||||
<UserAvatar
|
||||
:photo-u-r-l="userData.photoURL"
|
||||
:first-name="userData.firstName"
|
||||
:last-name="userData.lastName"
|
||||
size="112"
|
||||
class="rounded-3xl border-2 border-white/5 bg-slate-800 group-hover:opacity-50 transition-all"
|
||||
/>
|
||||
<div class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 9a2 2 0 012-2h.93a2 2 0 001.664-.89l.812-1.22A2 2 0 0110.07 4h3.86a2 2 0 011.664.89l.812 1.22A2 2 0 0018.07 7H19a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V9z" />
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 13a3 3 0 11-6 0 3 3 0 016 0z" />
|
||||
</svg>
|
||||
</div>
|
||||
<input ref="fileInput" type="file" class="hidden" accept="image/*" @change="handleFileUpload" >
|
||||
</div>
|
||||
<div class="text-center md:text-left">
|
||||
<h3 class="font-black text-slate-900 dark:text-white mb-2">รูปโปรไฟล์ของคุณ</h3>
|
||||
<p class="text-xs text-slate-500 mb-4 uppercase tracking-widest font-bold">Recommended: Square image, max 2MB</p>
|
||||
<button class="btn-upload" @click="triggerUpload">อัปโหลดรูปใหม่</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Form Inputs -->
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-10">
|
||||
<div class="space-y-2">
|
||||
<label class="text-xs font-black uppercase tracking-widest text-slate-500">คำนำหน้า</label>
|
||||
<select v-model="userData.prefix" class="premium-input w-full">
|
||||
<option>นาย</option>
|
||||
<option>นาง</option>
|
||||
<option>นางสาว</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="grid grid-cols-2 gap-4">
|
||||
<div class="space-y-2">
|
||||
<label class="text-xs font-black uppercase tracking-widest text-slate-500">ชื่อ</label>
|
||||
<input v-model="userData.firstName" type="text" class="premium-input w-full">
|
||||
</div>
|
||||
<div class="space-y-2">
|
||||
<label class="text-xs font-black uppercase tracking-widest text-slate-500">นามสกุล</label>
|
||||
<input v-model="userData.lastName" type="text" class="premium-input w-full">
|
||||
</div>
|
||||
</div>
|
||||
<div class="space-y-2">
|
||||
<label class="text-xs font-black uppercase tracking-widest text-slate-500">อีเมล</label>
|
||||
<input v-model="userData.email" type="email" class="premium-input w-full">
|
||||
</div>
|
||||
<div class="space-y-2">
|
||||
<label class="text-xs font-black uppercase tracking-widest text-slate-500">เบอร์โทรศัพท์</label>
|
||||
<input v-model="userData.phone" type="text" class="premium-input w-full">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Security Section -->
|
||||
<div class="border-t border-white/5 pt-10 mb-10">
|
||||
<h3 class="text-lg font-black text-slate-900 dark:text-white mb-6">ความปลอดภัย</h3>
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||
<div class="space-y-2">
|
||||
<label class="text-xs font-black uppercase tracking-widest text-slate-500">รหัสผ่านปัจจุบัน</label>
|
||||
<input type="password" class="premium-input w-full" placeholder="••••••••">
|
||||
</div>
|
||||
<div class="space-y-2">
|
||||
<label class="text-xs font-black uppercase tracking-widest text-slate-500">รหัสผ่านใหม่</label>
|
||||
<input type="password" class="premium-input w-full">
|
||||
</div>
|
||||
<div class="space-y-2">
|
||||
<label class="text-xs font-black uppercase tracking-widest text-slate-500">ยืนยันรหัสผ่านใหม่</label>
|
||||
<input type="password" class="premium-input w-full">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Actions -->
|
||||
<div class="flex flex-col md:flex-row gap-4 pt-6 border-t border-white/5">
|
||||
<button class="btn-save-premium flex-1" @click="saveProfile">บันทึกข้อมูล</button>
|
||||
<button class="btn-cancel-premium md:w-32" @click="toggleEdit(false)">ยกเลิก</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.text-main {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.card-premium {
|
||||
background: #1e293b;
|
||||
border-radius: 2.5rem;
|
||||
border: 1px solid rgba(255, 255, 255, 0.05);
|
||||
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
.info-group .label {
|
||||
@apply text-xs font-black uppercase tracking-widest text-slate-700 dark:text-slate-500 block mb-2;
|
||||
}
|
||||
.info-group .value {
|
||||
@apply text-lg font-bold text-slate-900 dark:text-slate-200;
|
||||
}
|
||||
|
||||
.premium-input {
|
||||
@apply bg-slate-100 dark:bg-slate-800/50 border border-slate-300 dark:border-white/5 rounded-2xl px-6 py-3.5 text-slate-900 dark:text-white focus:border-blue-500 outline-none transition-all;
|
||||
}
|
||||
|
||||
.btn-premium-edit {
|
||||
@apply flex items-center px-6 py-3 bg-blue-100 dark:bg-blue-600/10 text-blue-700 dark:text-blue-400 rounded-2xl text-sm font-black hover:bg-blue-600 hover:text-white transition-all border border-blue-300 dark:border-blue-500/20;
|
||||
}
|
||||
|
||||
.btn-upload {
|
||||
@apply px-6 py-2.5 bg-white dark:bg-white text-slate-900 dark:text-slate-900 rounded-xl text-xs font-black hover:bg-blue-50 transition-all;
|
||||
}
|
||||
|
||||
.btn-save-premium {
|
||||
@apply bg-blue-600 text-white rounded-2xl py-4 font-black hover:bg-blue-500 transition-all shadow-lg dark:shadow-blue-600/20;
|
||||
}
|
||||
|
||||
.btn-cancel-premium {
|
||||
@apply bg-slate-200 dark:bg-slate-800 text-slate-900 dark:text-slate-400 rounded-2xl py-4 font-black hover:bg-slate-300 dark:hover:bg-slate-700 dark:hover:text-white transition-all;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.card-premium {
|
||||
@apply rounded-[2rem];
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
Add table
Add a link
Reference in a new issue