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

feat: Implement core e-learning platform features including quiz, dashboard, course discovery, and classroom learning with i18n support.
All checks were successful
Build and Deploy Frontend Learner / Build Frontend Learner Docker Image (push) Successful in 35s
Details
Build and Deploy Frontend Learner / Deploy E-learning Frontend Learner to Dev Server (push) Successful in 4s
Details
Build and Deploy Frontend Learner / Notify Deployment Status (push) Successful in 1s
Details

Browse source
This commit is contained in:
supalerk-ar66 2026-02-12 12:01:37 +07:00
parent d787412036
commit a0ca6f7e6b
13 changed files with 429 additions and 246 deletions
Download patch file Download diff file Expand all files Collapse all files

52
Frontend-Learner/pages/dashboard/index.vue
View file

@ -53,27 +53,28 @@ onMounted(async () => {
</script>
<template>
<div class="page-container">
<!-- Welcome Header Section -->
<div class="welcome-section mb-10 overflow-hidden relative rounded-[2.5rem] p-8 md:p-12 text-white shadow-xl dark:shadow-2xl dark:shadow-blue-950/40 transition border border-white/5">
<div class="relative z-10 flex flex-col md:flex-row justify-between items-center gap-8">
<div class="text-center md:text-left">
<ClientOnly>
<h1 class="text-4xl md:text-6xl font-black mb-4 slide-up tracking-tight text-white drop-shadow-sm">
{{ $t('dashboard.welcomeTitle') }}, {{ currentUser?.firstName }}!
</h1>
</ClientOnly>
<p class="text-lg md:text-xl slide-up font-medium text-blue-100/90 max-w-xl" style="animation-delay: 0.1s;">
{{ $t('dashboard.welcomeSubtitle') }}
</p>
</div>
<div class="stats-mini flex gap-6 slide-up" style="animation-delay: 0.2s;"/>
<div class="page-container !pt-4">
<!-- Welcome Header Section (Minimalist) -->
<div class="flex items-center gap-6 mb-10 py-2 animate-fade-in">
<!-- Avatar with premium shadow -->
<div class="relative group cursor-pointer" @click="$router.push('/dashboard/profile')">
<div class="absolute -inset-1 bg-gradient-to-r from-blue-600 to-indigo-600 rounded-full blur opacity-25 group-hover:opacity-50 transition duration-1000 group-hover:duration-200"></div>
<q-avatar size="84px" class="relative shadow-2xl ring-4 ring-white dark:ring-slate-900 transition-all duration-500 overflow-hidden">
<img
:src="currentUser?.photoURL || 'https://www.gravatar.com/avatar/00000000000000000000000000000000?d=mp&f=y'"
class="object-cover"
/>
</q-avatar>
</div>
<div class="flex flex-col">
<h1 class="text-2xl md:text-4xl font-black text-slate-900 dark:text-white tracking-tight leading-tight mb-1">
{{ $t('dashboard.welcomeTitle') }}, {{ currentUser?.firstName }}!
</h1>
<div class="flex items-center gap-2">
<span class="text-slate-500 dark:text-slate-400 text-sm font-medium">{{ $t('dashboard.welcomeSubtitle') }}</span>
</div>
</div>
<!-- Decorative Background elements -->
<div class="absolute inset-0 bg-gradient-to-br from-blue-500 via-blue-600 to-indigo-700 dark:from-[#1e293b] dark:via-[#0f172a] dark:to-[#1e3a8a] -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/10 blur-[100px] rounded-full"/>
<div class="absolute inset-0 bg-[url('https://www.transparenttextures.com/patterns/cubes.png')] opacity-[0.03] mix-blend-overlay"></div>
</div>
<!-- Main Content Area -->
@ -104,13 +105,12 @@ onMounted(async () => {
</template>
<style scoped>
@keyframes slide-up {
from { opacity: 0; transform: translateY(30px); }
to { opacity: 1; transform: translateY(0); }
@keyframes fade-in {
from { opacity: 0; transform: translateX(-20px); }
to { opacity: 1; transform: translateX(0); }
}
.slide-up {
animation: slide-up 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
opacity: 0;
.animate-fade-in {
animation: fade-in 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}
</style>