feat: Implement core user profile, dashboard, course browsing pages, common components, and internationalization.
This commit is contained in:
supalerk-ar66
parent
01978f9438
commit
11d714c632
10 changed files with 289 additions and 99 deletions
|
|
@ -71,7 +71,7 @@ const downloadCertificate = () => {
|
|||
<div>
|
||||
<!-- Page Header & Filters -->
|
||||
<div class="flex justify-between items-center mb-6 mobile-stack">
|
||||
<h1 class="text-[28px] font-bold text-slate-900 dark:text-white">คอร์สของฉัน</h1>
|
||||
<h1 class="text-[28px] font-bold text-slate-900 dark:text-white">{{ $t('sidebar.myCourses') }}</h1>
|
||||
<!-- Filter Tabs -->
|
||||
<div class="flex gap-2" style="overflow-x: auto; padding-bottom: 4px; width: 100%; justify-content: flex-start;">
|
||||
<button
|
||||
|
|
@ -79,21 +79,21 @@ const downloadCertificate = () => {
|
|||
style="white-space: nowrap;"
|
||||
@click="filterCourses('all')"
|
||||
>
|
||||
ทั้งหมด
|
||||
{{ $t('myCourses.filterAll') }}
|
||||
</button>
|
||||
<button
|
||||
:class="activeFilter === 'progress' ? 'btn btn-primary' : 'btn btn-secondary'"
|
||||
style="white-space: nowrap;"
|
||||
@click="filterCourses('progress')"
|
||||
>
|
||||
กำลังเรียน
|
||||
{{ $t('myCourses.filterProgress') }}
|
||||
</button>
|
||||
<button
|
||||
:class="activeFilter === 'completed' ? 'btn btn-primary' : 'btn btn-secondary'"
|
||||
style="white-space: nowrap;"
|
||||
@click="filterCourses('completed')"
|
||||
>
|
||||
เรียนจบแล้ว
|
||||
{{ $t('myCourses.filterCompleted') }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -123,9 +123,9 @@ const downloadCertificate = () => {
|
|||
<!-- 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>
|
||||
<h3 class="empty-state-title">{{ $t('myCourses.emptyTitle') }}</h3>
|
||||
<p class="empty-state-description">{{ $t('myCourses.emptyDesc') }}</p>
|
||||
<NuxtLink to="/browse/discovery" class="btn btn-primary">{{ $t('myCourses.goToDiscovery') }}</NuxtLink>
|
||||
</div>
|
||||
|
||||
<!-- MODAL: Enrollment Success -->
|
||||
|
|
@ -137,11 +137,11 @@ const downloadCertificate = () => {
|
|||
<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>
|
||||
<h2 class="font-bold mb-2">{{ $t('enrollment.successTitle') }}</h2>
|
||||
<p class="text-muted mb-6">{{ $t('enrollment.successDesc') }}</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>
|
||||
<NuxtLink to="/classroom/learning" class="btn btn-primary w-full">{{ $t('enrollment.startNow') }}</NuxtLink>
|
||||
<button class="btn btn-secondary w-full" @click="showEnrollModal = false">{{ $t('enrollment.later') }}</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -156,14 +156,14 @@ const downloadCertificate = () => {
|
|||
<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>
|
||||
<h1 class="cert-title">{{ $t('certificate.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>
|
||||
<p style="color: #64748B; margin-bottom: 16px; font-size: 16px;">{{ $t('certificate.presentedTo') }}</p>
|
||||
|
||||
<h2 class="cert-name">สมชาย ใจดี</h2>
|
||||
<h2 class="cert-name">{{ $t('userMenu.home') === 'Home' ? 'Somchai Jaidee' : 'สมชาย ใจดี' }}</h2>
|
||||
|
||||
<p style="color: #64748B; margin-bottom: 16px; font-size: 16px;">ได้ผ่านการอบรมและทดสอบความรู้ในหลักสูตร</p>
|
||||
<p style="color: #64748B; margin-bottom: 16px; font-size: 16px;">{{ $t('certificate.completedDesc') }}</p>
|
||||
|
||||
<h3 style="font-size: 24px; font-weight: 700; color: #3B82F6; margin-bottom: 30px;">HTML5 พื้นฐาน</h3>
|
||||
|
||||
|
|
@ -171,25 +171,25 @@ const downloadCertificate = () => {
|
|||
<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 style="font-size: 12px; color: #64748B;">{{ $t('certificate.directorSignature') }}</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 style="font-size: 16px; font-weight: 900;">{{ $t('certificate.passed') }}</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 style="width: 150px; border-bottom: 1px solid #1E293B; margin-bottom: 8px; padding-bottom: 8px; margin-left: auto; margin-right: auto;">15/12/2026</div>
|
||||
<div style="font-size: 12px; color: #64748B;">{{ $t('certificate.issueDate') }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Download Button -->
|
||||
<div style="margin-top: 32px; text-align: center;">
|
||||
<button class="btn btn-primary" @click="downloadCertificate">
|
||||
⬇ ดาวน์โหลด PDF
|
||||
⬇ {{ $t('certificate.downloadPDF') }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue