feat: implement initial e-learning frontend UI, including course details, layout, navigation, and dashboard components.
This commit is contained in:
supalerk-ar66
parent
a54251f11e
commit
a8339ed0ab
8 changed files with 99 additions and 105 deletions
|
|
@ -9,9 +9,10 @@
|
|||
/* Colors - Light Mode Default */
|
||||
--bg-body: #f8fafc;
|
||||
--bg-surface: #ffffff;
|
||||
--text-main: #000000; /* ดำสนิทสำหรับหัวข้อ */
|
||||
--text-secondary: #111827; /* เทาเข้มมากสำหรับคำอธิบาย */
|
||||
--primary: #3b82f6; /* Primary Blue */
|
||||
--bg-elevated: #ffffff;
|
||||
--text-main: #0f172a; /* text-slate-900: More natural than pure black */
|
||||
--text-secondary: #475569; /* text-slate-600: Muted subtext */
|
||||
--primary: #3b82f6; /* Primary Blue */
|
||||
|
||||
/* Semantic mappings */
|
||||
--border-color: #e2e8f0;
|
||||
|
|
@ -58,36 +59,29 @@
|
|||
|
||||
/* Dark Mode (applied when `.dark` class is present on <html>) */
|
||||
.dark {
|
||||
/* Deep Oceanic 3-Level Surfaces */
|
||||
--bg-body: #020617; /* Slate 950: Deep Sea */
|
||||
--bg-surface: #0f172a; /* Slate 900: Sidebar/Main Cards */
|
||||
--bg-elevated: #1e293b; /* Slate 800: Inner Cards/Highlights */
|
||||
/* Oceanic Palette: Standardized for entire App */
|
||||
--bg-body: #020617; /* Slate-950: Main Background */
|
||||
--bg-surface: #0f172a; /* Slate-900: Sidebar & Header */
|
||||
--bg-elevated: #1e293b; /* Slate-800: Cards & Hover states */
|
||||
|
||||
--text-main: #f8fafc; /* Slate-50: Brightest for titles */
|
||||
--text-secondary: #94a3b8; /* Slate-400: Muted for subtext */
|
||||
|
||||
--border-color: rgba(255, 255, 255, 0.06);
|
||||
|
||||
--primary-light: rgba(59, 130, 246, 0.15);
|
||||
|
||||
/* Neutral scale for dark mode utility usage */
|
||||
--neutral-100: #1e293b;
|
||||
--neutral-200: #334155;
|
||||
--neutral-800: #0f172a;
|
||||
--neutral-900: #020617;
|
||||
|
||||
--text-main: #f8fafc; /* text-slate-50: Brighter white for main text */
|
||||
--text-secondary: #94a3b8; /* text-slate-300: Lighter grey for secondary text */
|
||||
--border-color: rgba(
|
||||
255,
|
||||
255,
|
||||
255,
|
||||
0.08
|
||||
); /* White with low opacity for subtle borders */
|
||||
--neutral-50: #1e293b;
|
||||
--neutral-100: #334155;
|
||||
--neutral-200: #475569;
|
||||
--neutral-300: #64748b;
|
||||
--neutral-400: #94a3b8;
|
||||
--neutral-500: #cbd5e1;
|
||||
--neutral-600: #f1f5f9;
|
||||
--neutral-700: #f8fafc;
|
||||
--neutral-800: #1e293b;
|
||||
--neutral-900: #0f172a;
|
||||
|
||||
--shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
|
||||
--shadow-md:
|
||||
0 4px 12px -2px rgb(0 0 0 / 0.12), 0 2px 6px -2px rgb(0 0 0 / 0.08);
|
||||
--shadow-lg:
|
||||
0 12px 24px -4px rgb(0 0 0 / 0.15), 0 8px 16px -4px rgb(0 0 0 / 0.1);
|
||||
--shadow-xl: 0 20px 40px -8px rgb(0 0 0 / 0.25);
|
||||
/* Deep shadows for dark elements to prevent "glowing" effect */
|
||||
--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.4);
|
||||
--shadow-md: 0 4px 12px -2px rgba(0, 0, 0, 0.6);
|
||||
--shadow-lg: 0 12px 24px -4px rgba(0, 0, 0, 0.7);
|
||||
--shadow-xl: 0 20px 40px -8px rgba(0, 0, 0, 0.8);
|
||||
}
|
||||
|
||||
* {
|
||||
|
|
|
|||
|
|
@ -50,7 +50,7 @@ const displayDescription = computed(() => getLocalizedText(props.description))
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<div class="group relative flex flex-col bg-white dark:bg-[#1e293b] rounded-3xl overflow-hidden border border-slate-100 dark:border-slate-800 shadow-sm hover:shadow-xl dark:shadow-none hover:-translate-y-1 transition-all duration-300 h-full">
|
||||
<div class="group relative flex flex-col bg-white dark:bg-[#1e293b] rounded-3xl overflow-hidden border border-slate-200 dark:border-slate-800 shadow-sm hover:shadow-xl dark:shadow-none hover:-translate-y-1 transition-all duration-300 h-full">
|
||||
|
||||
<!-- Thumbnail Section -->
|
||||
<div class="relative w-full aspect-video overflow-hidden">
|
||||
|
|
@ -60,12 +60,12 @@ const displayDescription = computed(() => getLocalizedText(props.description))
|
|||
:alt="displayTitle"
|
||||
class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-105"
|
||||
>
|
||||
<div v-else class="w-full h-full bg-slate-200 dark:bg-slate-800 flex items-center justify-center">
|
||||
<q-icon name="image" size="48px" class="text-slate-300 dark:text-slate-700" />
|
||||
<div v-else class="w-full h-full bg-slate-100 dark:bg-slate-800 flex items-center justify-center">
|
||||
<q-icon name="image" size="48px" class="text-slate-300 dark:text-slate-600" />
|
||||
</div>
|
||||
|
||||
<!-- Overlays -->
|
||||
<div class="absolute inset-0 bg-gradient-to-t from-slate-900/40 to-transparent"></div>
|
||||
<div class="absolute inset-0 bg-gradient-to-t from-slate-900/60 to-transparent opacity-0 group-hover:opacity-100 transition-opacity"></div>
|
||||
|
||||
|
||||
|
||||
|
|
@ -80,7 +80,7 @@ const displayDescription = computed(() => getLocalizedText(props.description))
|
|||
<!-- Content Section -->
|
||||
<div class="p-6 flex flex-col flex-grow">
|
||||
<!-- Meta Info (Lessons/Duration) -->
|
||||
<div class="flex items-center gap-3 text-xs font-bold text-slate-400 dark:text-slate-500 mb-3 uppercase tracking-wider">
|
||||
<div class="flex items-center gap-3 text-xs font-bold text-slate-500 dark:text-slate-400 mb-3 uppercase tracking-wider">
|
||||
<span v-if="lessons" class="flex items-center gap-1">
|
||||
<q-icon name="menu_book" size="14px" /> {{ lessons }} {{ $t('course.lessonsUnit') }}
|
||||
</span>
|
||||
|
|
@ -103,8 +103,8 @@ const displayDescription = computed(() => getLocalizedText(props.description))
|
|||
<!-- Progress Bar -->
|
||||
<div v-if="progress !== undefined && !completed" class="mb-4">
|
||||
<div class="flex justify-between text-[10px] font-bold uppercase mb-1">
|
||||
<span class="text-slate-500">{{ $t('course.progress') }}</span>
|
||||
<span class="text-blue-600">{{ progress }}%</span>
|
||||
<span class="text-slate-500 dark:text-slate-400">{{ $t('course.progress') }}</span>
|
||||
<span class="text-blue-600 dark:text-blue-400">{{ progress }}%</span>
|
||||
</div>
|
||||
<div class="h-1.5 w-full bg-slate-100 dark:bg-slate-800 rounded-full overflow-hidden">
|
||||
<div class="h-full bg-blue-600 rounded-full transition-all duration-500" :style="{ width: `${progress}%` }"></div>
|
||||
|
|
@ -117,7 +117,7 @@ const displayDescription = computed(() => getLocalizedText(props.description))
|
|||
v-if="showViewDetails && !completed && !progress"
|
||||
flat
|
||||
rounded
|
||||
class="w-full font-bold text-blue-600 bg-blue-50 hover:bg-blue-100 dark:bg-blue-900/20 dark:text-blue-400 dark:hover:bg-blue-900/30"
|
||||
class="w-full font-bold text-blue-600 bg-blue-50 hover:bg-blue-100 dark:bg-blue-900/40 dark:text-blue-300 dark:hover:bg-blue-900/60"
|
||||
:label="$t('menu.viewDetails')"
|
||||
:to="`/course/${id}`"
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -23,17 +23,17 @@ const getLocalizedText = (text: any) => {
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<div class="bg-white rounded-2xl shadow-sm border border-slate-200 overflow-hidden">
|
||||
<div class="bg-white dark:bg-slate-900 rounded-2xl shadow-sm border border-slate-200 dark:border-slate-800 overflow-hidden">
|
||||
<q-expansion-item
|
||||
expand-separator
|
||||
:label="`หมวดหมู่ (${modelValue.length})`"
|
||||
class="font-bold text-slate-900"
|
||||
header-class="bg-white"
|
||||
class="font-bold text-slate-900 dark:text-white"
|
||||
header-class="bg-white dark:bg-slate-900"
|
||||
text-color="slate-900"
|
||||
:header-style="{ color: '#0f172a' }"
|
||||
default-opened
|
||||
>
|
||||
<q-list class="bg-white border-t border-slate-200">
|
||||
<q-list class="bg-white dark:bg-slate-900 border-t border-slate-200 dark:border-slate-800">
|
||||
<q-item
|
||||
v-for="cat in (showAllCategories ? categories : categories.slice(0, 4))"
|
||||
:key="cat.id"
|
||||
|
|
@ -53,7 +53,7 @@ const getLocalizedText = (text: any) => {
|
|||
/>
|
||||
</q-item-section>
|
||||
<q-item-section>
|
||||
<q-item-label class="text-sm font-medium text-slate-900">{{ getLocalizedText(cat.name) }}</q-item-label>
|
||||
<q-item-label class="text-sm font-medium text-slate-900 dark:text-slate-200">{{ getLocalizedText(cat.name) }}</q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
|
||||
|
|
@ -63,7 +63,7 @@ const getLocalizedText = (text: any) => {
|
|||
clickable
|
||||
v-ripple
|
||||
@click="showAllCategories = !showAllCategories"
|
||||
class="text-blue-600 font-bold text-sm"
|
||||
class="text-blue-600 dark:text-blue-400 font-bold text-sm"
|
||||
>
|
||||
<q-item-section>
|
||||
<div class="flex items-center gap-1">
|
||||
|
|
|
|||
|
|
@ -44,7 +44,7 @@ const handleEnroll = () => {
|
|||
flat
|
||||
icon="arrow_back"
|
||||
label="ย้อนกลับ"
|
||||
class="mb-6 font-bold text-slate-500 hover:text-slate-800 transition-colors"
|
||||
class="mb-6 font-bold text-slate-500 hover:text-slate-800 dark:text-slate-400 dark:hover:text-white transition-colors"
|
||||
@click="emit('back')"
|
||||
/>
|
||||
|
||||
|
|
@ -80,11 +80,11 @@ const handleEnroll = () => {
|
|||
|
||||
<!-- Course Title & Description -->
|
||||
<div>
|
||||
<h1 class="text-3xl md:text-4xl font-extrabold text-slate-900 mb-4 leading-tight">
|
||||
<h1 class="text-3xl md:text-4xl font-extrabold text-slate-900 dark:text-white mb-4 leading-tight">
|
||||
{{ getLocalizedText(course.title) }}
|
||||
</h1>
|
||||
<div class="flex flex-wrap items-center gap-4 text-sm text-slate-500 mb-6">
|
||||
<span class="flex items-center gap-1 bg-slate-100 px-3 py-1 rounded-full text-slate-700 font-medium">
|
||||
<div class="flex flex-wrap items-center gap-4 text-sm text-slate-500 dark:text-slate-400 mb-6">
|
||||
<span class="flex items-center gap-1 bg-slate-100 dark:bg-slate-800 px-3 py-1 rounded-full text-slate-700 dark:text-slate-300 font-medium">
|
||||
<q-icon name="category" size="16px" class="text-blue-500" />
|
||||
{{ course.category?.name?.th || course.category?.name?.en || 'ทั่วไป' }}
|
||||
</span>
|
||||
|
|
@ -98,38 +98,38 @@ const handleEnroll = () => {
|
|||
</span>
|
||||
</div>
|
||||
|
||||
<div class="prose max-w-none text-slate-600 leading-relaxed font-light">
|
||||
<div class="prose max-w-none text-slate-600 dark:text-slate-400 leading-relaxed font-light">
|
||||
<p>{{ getLocalizedText(course.description) }}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Curriculum Preview -->
|
||||
<div class="bg-slate-50 rounded-3xl p-6 md:p-8">
|
||||
<h3 class="text-xl font-bold text-slate-900 mb-6 flex items-center gap-2">
|
||||
<q-icon name="list_alt" class="text-blue-600" />
|
||||
<div class="bg-slate-50 dark:bg-white/5 rounded-3xl p-6 md:p-8">
|
||||
<h3 class="text-xl font-bold text-slate-900 dark:text-white mb-6 flex items-center gap-2">
|
||||
<q-icon name="list_alt" class="text-blue-600 dark:text-blue-400" />
|
||||
เนื้อหาบทเรียน
|
||||
</h3>
|
||||
|
||||
<div class="space-y-4">
|
||||
<div v-for="(chapter, idx) in course.chapters" :key="chapter.id" class="bg-white rounded-xl border border-slate-200 overflow-hidden">
|
||||
<div class="px-6 py-4 bg-slate-100 font-bold text-slate-800 flex justify-between items-center">
|
||||
<div v-for="(chapter, idx) in course.chapters" :key="chapter.id" class="bg-white dark:bg-slate-900 rounded-xl border border-slate-200 dark:border-slate-800 overflow-hidden">
|
||||
<div class="px-6 py-4 bg-slate-100 dark:bg-white/5 font-bold text-slate-800 dark:text-white flex justify-between items-center">
|
||||
<span>{{ idx + 1 }}. {{ getLocalizedText(chapter.title) }}</span>
|
||||
<span class="text-xs text-slate-500 font-normal">{{ chapter.lessons?.length || 0 }} บทเรียน</span>
|
||||
<span class="text-xs text-slate-500 dark:text-slate-400 font-normal">{{ chapter.lessons?.length || 0 }} บทเรียน</span>
|
||||
</div>
|
||||
<div class="divide-y divide-slate-100">
|
||||
<div v-for="lesson in chapter.lessons" :key="lesson.id" class="px-6 py-3 flex items-center gap-3 text-sm text-slate-600 hover:bg-slate-50 transition-colors">
|
||||
<div class="divide-y divide-slate-100 dark:divide-slate-800">
|
||||
<div v-for="lesson in chapter.lessons" :key="lesson.id" class="px-6 py-3 flex items-center gap-3 text-sm text-slate-600 dark:text-slate-400 hover:bg-slate-50 dark:hover:bg-white/5 transition-colors">
|
||||
<q-icon
|
||||
:name="lesson.type === 'VIDEO' ? 'play_circle' : 'article'"
|
||||
:class="lesson.type === 'VIDEO' ? 'text-blue-500' : 'text-orange-500'"
|
||||
:class="lesson.type === 'VIDEO' ? 'text-blue-500 dark:text-blue-400' : 'text-orange-500 dark:text-orange-400'"
|
||||
size="18px"
|
||||
/>
|
||||
<span class="flex-1">{{ getLocalizedText(lesson.title) }}</span>
|
||||
<span v-if="lesson.duration_minutes" class="text-slate-400 text-xs">{{ lesson.duration_minutes }} นาที</span>
|
||||
<q-icon v-if="lesson.is_locked !== false" name="lock" size="14px" class="text-slate-300" />
|
||||
<span v-if="lesson.duration_minutes" class="text-slate-400 dark:text-slate-500 text-xs">{{ lesson.duration_minutes }} นาที</span>
|
||||
<q-icon v-if="lesson.is_locked !== false" name="lock" size="14px" class="text-slate-300 dark:text-slate-600" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="!course.chapters || course.chapters.length === 0" class="text-center text-slate-400 py-8">
|
||||
<div v-if="!course.chapters || course.chapters.length === 0" class="text-center text-slate-400 dark:text-slate-600 py-8">
|
||||
ยังไม่มีเนื้อหาในขณะนี้
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -140,14 +140,14 @@ const handleEnroll = () => {
|
|||
<!-- Right: Enrollment Card -->
|
||||
<div class="lg:col-span-1">
|
||||
<div class="sticky top-24">
|
||||
<div class="bg-white rounded-3xl shadow-xl shadow-slate-200/50 p-6 border border-slate-100 relative overflow-hidden">
|
||||
<div class="bg-white dark:bg-slate-900 rounded-3xl shadow-xl shadow-slate-200/50 dark:shadow-none p-6 border border-slate-100 dark:border-slate-800 relative overflow-hidden">
|
||||
<div class="absolute top-0 right-0 w-32 h-32 bg-gradient-to-br from-blue-500/10 to-purple-500/10 rounded-full blur-3xl -mr-16 -mt-16"></div>
|
||||
|
||||
<div class="relative">
|
||||
<div class="text-3xl font-black text-slate-900 mb-2 font-display">
|
||||
<div class="text-3xl font-black text-slate-900 dark:text-white mb-2 font-display">
|
||||
{{ course.price > 0 ? formatPrice(course.price) : 'เรียนฟรี' }}
|
||||
</div>
|
||||
<div v-if="course.price > 0" class="text-sm text-slate-500 mb-6 line-through">
|
||||
<div v-if="course.price > 0" class="text-sm text-slate-500 dark:text-slate-400 mb-6 line-through">
|
||||
{{ formatPrice(course.price * 2) }}
|
||||
</div>
|
||||
|
||||
|
|
@ -162,22 +162,22 @@ const handleEnroll = () => {
|
|||
@click="handleEnroll"
|
||||
/>
|
||||
|
||||
<div class="text-xs text-center text-slate-400">
|
||||
<div class="text-xs text-center text-slate-400 dark:text-slate-500">
|
||||
รับประกันความพึงพอใจ คืนเงินภายใน 7 วัน
|
||||
</div>
|
||||
|
||||
<hr class="my-6 border-slate-100">
|
||||
<hr class="my-6 border-slate-100 dark:border-slate-800">
|
||||
|
||||
<div class="space-y-3 block">
|
||||
<div class="flex items-center gap-3 text-sm text-slate-600">
|
||||
<div class="flex items-center gap-3 text-sm text-slate-600 dark:text-slate-400">
|
||||
<q-icon name="check_circle" class="text-green-500" />
|
||||
เข้าเรียนได้ตลอดชีพ
|
||||
</div>
|
||||
<div class="flex items-center gap-3 text-sm text-slate-600">
|
||||
<div class="flex items-center gap-3 text-sm text-slate-600 dark:text-slate-400">
|
||||
<q-icon name="check_circle" class="text-green-500" />
|
||||
ทำแบบทดสอบไม่จำกัด
|
||||
</div>
|
||||
<div class="flex items-center gap-3 text-sm text-slate-600">
|
||||
<div class="flex items-center gap-3 text-sm text-slate-600 dark:text-slate-400">
|
||||
<q-icon name="check_circle" class="text-green-500" />
|
||||
ใบประกาศนียบัตรเมื่อเรียนจบ
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -63,22 +63,17 @@ const handleNavigate = (path: string) => {
|
|||
</div>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
/* Active State styling for Sidebar items */
|
||||
<style scoped>
|
||||
.sidebar-item--active {
|
||||
background: rgb(239 246 255) !important; /* blue-50 */
|
||||
color: rgb(29 78 216) !important; /* blue-700 */
|
||||
background: #eff6ff !important; /* blue-50 */
|
||||
color: #1d4ed8 !important; /* blue-700 */
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.sidebar-item--active .q-icon {
|
||||
color: rgb(37 99 235) !important; /* blue-600 */
|
||||
}
|
||||
|
||||
/* Vertical indicator for active item */
|
||||
.sidebar-item--active::after {
|
||||
content: "";
|
||||
.sidebar-item--active::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: -12px;
|
||||
left: 0;
|
||||
top: 15%;
|
||||
height: 70%;
|
||||
width: 4px;
|
||||
|
|
@ -86,17 +81,17 @@ const handleNavigate = (path: string) => {
|
|||
border-radius: 0 4px 4px 0;
|
||||
}
|
||||
|
||||
/* Dark Mode Active State */
|
||||
/* Dark Mode Active State Enhancement */
|
||||
.dark .sidebar-item--active {
|
||||
background: rgba(37, 99, 235, 0.15) !important;
|
||||
color: rgb(147 197 253) !important; /* blue-300 */
|
||||
color: #93c5fd !important; /* blue-300 */
|
||||
}
|
||||
|
||||
.dark .sidebar-item--active .q-icon {
|
||||
color: rgb(96 165 250) !important; /* blue-400 */
|
||||
color: #60a5fa !important; /* blue-400 */
|
||||
}
|
||||
|
||||
.dark .sidebar-item--active::after {
|
||||
background: #60a5fa;
|
||||
.dark .sidebar-item--active::before {
|
||||
background: #3b82f6;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -57,7 +57,7 @@ const handleLogout = async () => {
|
|||
anchor="bottom end"
|
||||
self="top end"
|
||||
:offset="[0, 10]"
|
||||
content-class="bg-white dark:bg-slate-800 text-slate-900 dark:text-white rounded-2xl shadow-xl border border-slate-200/70 dark:border-white/10"
|
||||
content-class="bg-white dark:bg-[#0f172a] text-slate-900 dark:text-white rounded-2xl shadow-xl border border-slate-200/70 dark:border-white/5"
|
||||
style="min-width: 240px;"
|
||||
>
|
||||
<q-list class="py-2">
|
||||
|
|
@ -67,16 +67,16 @@ const handleLogout = async () => {
|
|||
clickable
|
||||
v-close-popup
|
||||
@click="navigateTo(item.to)"
|
||||
class="hover:bg-slate-100 dark:hover:bg-white/10 transition-colors"
|
||||
class="hover:bg-slate-100 dark:hover:bg-white/5 transition-colors"
|
||||
>
|
||||
<q-item-section>
|
||||
<q-item-label class="font-bold text-sm text-slate-800 dark:text-white">{{ item.label }}</q-item-label>
|
||||
<q-item-label class="font-bold text-sm text-slate-800 dark:text-slate-100">{{ item.label }}</q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
|
||||
<q-item class="hover:bg-slate-100 dark:hover:bg-white/10 transition-colors">
|
||||
<q-item class="hover:bg-slate-100 dark:hover:bg-white/5 transition-colors">
|
||||
<q-item-section>
|
||||
<q-item-label class="font-bold text-sm text-slate-800 dark:text-white">{{ $t('userMenu.darkMode') }}</q-item-label>
|
||||
<q-item-label class="font-bold text-sm text-slate-800 dark:text-slate-100">{{ $t('userMenu.darkMode') }}</q-item-label>
|
||||
</q-item-section>
|
||||
<q-item-section side>
|
||||
<q-toggle
|
||||
|
|
@ -89,12 +89,12 @@ const handleLogout = async () => {
|
|||
</q-item-section>
|
||||
</q-item>
|
||||
|
||||
<q-separator class="bg-slate-100 dark:bg-white/10 my-1" />
|
||||
<q-separator class="bg-slate-100 dark:bg-white/5 my-1" />
|
||||
|
||||
<div class="p-4">
|
||||
<div class="px-4 py-2 mt-2">
|
||||
<q-btn
|
||||
unelevated
|
||||
class="w-full bg-red-500/10 text-red-400 hover:bg-red-500/20 font-bold rounded-lg"
|
||||
class="w-full bg-red-50 text-red-600 hover:bg-red-100 dark:bg-red-500/10 dark:text-red-400 dark:hover:bg-red-500/20 font-black rounded-xl"
|
||||
no-caps
|
||||
@click="handleLogout"
|
||||
>
|
||||
|
|
|
|||
|
|
@ -15,11 +15,11 @@ const toggleLeftDrawer = () => {
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<q-layout view="hHh LpR lFf" class="!bg-slate-50 dark:!bg-[#0f172a] !text-slate-900 dark:!text-white font-sans">
|
||||
<q-layout view="hHh LpR lFf" class="!bg-slate-50 dark:!bg-[#020617] !text-slate-900 dark:!text-slate-50 font-sans">
|
||||
<!-- Header -->
|
||||
<q-header
|
||||
bordered
|
||||
class="!bg-white/80 dark:!bg-[#1e293b]/80 backdrop-blur-md !text-slate-900 dark:!text-white border-b border-slate-200 dark:border-slate-700"
|
||||
class="!bg-white/80 dark:!bg-[#0f172a]/80 backdrop-blur-md !text-slate-900 dark:!text-white border-b border-slate-200 dark:border-slate-800"
|
||||
>
|
||||
<AppHeader @toggleSidebar="toggleLeftDrawer" />
|
||||
</q-header>
|
||||
|
|
@ -30,7 +30,7 @@ const toggleLeftDrawer = () => {
|
|||
show-if-above
|
||||
bordered
|
||||
:width="280"
|
||||
class="!bg-white dark:!bg-[#1e293b] border-r border-slate-200 dark:border-slate-700"
|
||||
class="!bg-white dark:!bg-[#0f172a] border-r border-slate-200 dark:border-slate-800"
|
||||
>
|
||||
<AppSidebar />
|
||||
</q-drawer>
|
||||
|
|
|
|||
|
|
@ -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 -->
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue