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

feat: scaffold Nuxt 3 application with initial core pages, components, and comprehensive 'My Courses' view.

Browse source
This commit is contained in:
supalerk-ar66 2026-01-26 10:06:22 +07:00
parent af7890cc8f
commit 0c0121eac7
7 changed files with 308 additions and 238 deletions
Download patch file Download diff file Expand all files Collapse all files

77
Frontend-Learner/pages/dashboard/my-courses.vue
View file

@ -94,25 +94,23 @@ const downloadCertificate = () => {
<!-- Filter Tabs -->
<div class="flex gap-2">
<button
<q-btn
v-for="filter in ['all', 'progress', 'completed']"
:key="filter"
@click="activeFilter = filter as any"
class="px-8 py-2.5 rounded-full text-base font-bold transition-all"
:class="activeFilter === filter
? 'bg-blue-600 text-white shadow-lg shadow-blue-500/30'
: 'text-slate-500 dark:text-slate-400 hover:text-slate-900 dark:hover:text-white hover:bg-slate-100 dark:hover:bg-slate-800'"
>
{{ $t(`myCourses.filter${filter.charAt(0).toUpperCase() + filter.slice(1)}`) }}
</button>
rounded
unelevated
:color="activeFilter === filter ? 'primary' : 'white'"
:text-color="activeFilter === filter ? 'white' : 'grey-8'"
class="font-bold px-6"
:label="$t(`myCourses.filter${filter.charAt(0).toUpperCase() + filter.slice(1)}`)"
/>
</div>
</div>
<!-- Courses Grid -->
<div v-if="isLoading" class="flex justify-center py-20">
<div class="spinner-border animate-spin inline-block w-8 h-8 border-4 border-blue-500 rounded-full border-t-transparent" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<q-spinner size="3rem" color="primary" />
</div>
<div v-else class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
<template v-for="course in enrolledCourses" :key="course.id">
@ -149,11 +147,8 @@ const downloadCertificate = () => {
</div>
<!-- MODAL: Enrollment Success -->
<div
v-if="showEnrollModal"
class="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/60 backdrop-blur-sm"
>
<div class="bg-white dark:bg-slate-800 rounded-3xl shadow-2xl p-8 max-w-sm w-full text-center relative overflow-hidden">
<q-dialog v-model="showEnrollModal" backdrop-filter="blur(4px)">
<q-card class="rounded-[1.5rem] shadow-2xl p-8 max-w-sm w-full text-center relative overflow-hidden bg-white dark:bg-slate-800">
<div class="absolute top-0 left-0 w-full h-2 bg-gradient-to-r from-green-400 to-emerald-600"></div>
<div class="w-16 h-16 bg-green-100 dark:bg-green-900/30 text-green-600 dark:text-green-400 rounded-full flex items-center justify-center text-3xl mx-auto mb-6">
✓
@ -161,24 +156,31 @@ const downloadCertificate = () => {
<h2 class="text-2xl font-bold mb-2 text-slate-900 dark:text-white">{{ $t('enrollment.successTitle') }}</h2>
<p class="text-slate-500 dark:text-slate-400 mb-8">{{ $t('enrollment.successDesc') }}</p>
<div class="flex flex-col gap-3">
<NuxtLink :to="`/classroom/learning?course_id=${route.query.course_id}`" class="w-full py-3 bg-blue-600 text-white rounded-xl font-bold hover:bg-blue-700 transition-colors shadow-lg shadow-blue-500/30">
{{ $t('enrollment.startNow') }}
</NuxtLink>
<button class="w-full py-3 text-slate-500 font-bold hover:bg-slate-50 dark:hover:bg-slate-700/50 rounded-xl transition-colors" @click="showEnrollModal = false">
{{ $t('enrollment.later') }}
</button>
<q-btn
:to="`/classroom/learning?course_id=${route.query.course_id}`"
unelevated
rounded
color="primary"
class="w-full py-3 text-lg font-bold shadow-lg"
:label="$t('enrollment.startNow')"
/>
<q-btn
flat
rounded
color="grey-7"
class="w-full py-3 font-bold"
:label="$t('enrollment.later')"
@click="showEnrollModal = false"
/>
</div>
</div>
</div>
</q-card>
</q-dialog>
<!-- MODAL: Certificate Preview -->
<div
v-if="showCertModal"
class="fixed inset-0 z-[100] flex items-center justify-center p-4 bg-black/80 backdrop-blur-md"
>
<div class="relative bg-white text-slate-900 w-full max-w-2xl aspect-[1.414/1] shadow-2xl rounded-sm p-12 flex flex-col items-center text-center overflow-hidden">
<q-dialog v-model="showCertModal" backdrop-filter="blur(8px)" full-width full-height>
<div class="relative bg-white text-slate-900 w-full max-w-5xl aspect-[1.414/1] shadow-2xl rounded-sm p-12 flex flex-col items-center text-center overflow-hidden m-auto">
<!-- Close Button -->
<button class="absolute top-4 right-4 text-slate-400 hover:text-slate-600 text-3xl leading-none" @click="showCertModal = false">&times;</button>
<q-btn icon="close" flat round dense class="absolute top-4 right-4 text-slate-400" @click="showCertModal = false" />
<!-- Border Decoration -->
<div class="absolute inset-4 border-4 border-double border-slate-200 pointer-events-none"></div>
@ -216,13 +218,18 @@ const downloadCertificate = () => {
</div>
<div class="absolute bottom-6 left-0 w-full text-center">
<button class="bg-blue-600 text-white px-6 py-2 rounded-full shadow-lg hover:bg-blue-700 font-bold transition-transform hover:scale-105 active:scale-95 flex items-center gap-2 mx-auto" @click="downloadCertificate">
<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="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" /></svg>
{{ $t('certificate.downloadPDF') }}
</button>
<q-btn
unelevated
rounded
color="primary"
icon="download"
:label="$t('certificate.downloadPDF')"
class="font-bold px-6"
@click="downloadCertificate"
/>
</div>
</div>
</div>
</q-dialog>
</div>
</template>