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

feat: implement initial e-learning frontend UI, including course details, layout, navigation, and dashboard components.

Browse source
This commit is contained in:
supalerk-ar66 2026-02-09 17:26:58 +07:00
parent a54251f11e
commit a8339ed0ab
8 changed files with 99 additions and 105 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -55,20 +55,25 @@ onMounted(async () => {
<template>
<div class="page-container">
<!-- Welcome Header Section -->
<div class="welcome-section mb-8 overflow-hidden relative rounded-3xl p-8 md:p-10 text-white shadow-lg dark:shadow-2xl dark:shadow-blue-900/20 transition-all">
<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-all border border-white/5">
<div class="relative z-10 flex flex-col md:flex-row justify-between items-center gap-8">
<div>
<div class="text-center md:text-left">
<ClientOnly>
<h1 class="text-4xl md:text-5xl font-black mb-3 slide-up tracking-tight text-white dark:text-white">{{ $t('dashboard.welcomeTitle') }}, {{ currentUser?.firstName }}!</h1>
<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 slide-up font-medium text-blue-100" style="animation-delay: 0.1s;">{{ $t('dashboard.welcomeSubtitle') }}</p>
<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>
<!-- 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 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/20 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 -->