feat: Implement initial e-learning platform frontend structure including dashboard, course management, authentication, and common UI components.
This commit is contained in:
parent
aceeb80d9a
commit
ad11c6b7c5
44 changed files with 720 additions and 578 deletions
|
|
@ -1,20 +1,20 @@
|
|||
<script setup lang="ts">
|
||||
/**
|
||||
* @file GlobalLoader.vue
|
||||
* @description Global full-screen loading overlay that triggers during page navigation.
|
||||
* Uses a premium pulsing logo animation.
|
||||
* @description คอมโพเนนต์หน้าจอโหลดแบบเต็มจอ (Global full-screen loading) แสดงผลตอนเปลี่ยนหน้า
|
||||
* พร้มแอนิเมชันโลโก้ขยับได้แบบพรีเมียม
|
||||
*/
|
||||
|
||||
const nuxtApp = useNuxtApp()
|
||||
const isLoading = ref(false)
|
||||
|
||||
// Hook into Nuxt page transitions
|
||||
// ดักจับจังหวะการเปลี่ยนหน้าผ่าย Nuxt hook (Hook into Nuxt page transitions)
|
||||
nuxtApp.hook('page:start', () => {
|
||||
isLoading.value = true
|
||||
})
|
||||
|
||||
nuxtApp.hook('page:finish', () => {
|
||||
// Add a small delay for better UX (prevents flickering on fast loads)
|
||||
// หน่วงเวลาเล็กน้อยเพื่อให้ไหลลื่น ไม่กระพริบเร็วไปหากหน้าโหลดเสร็จไว (Add a small delay for better UX)
|
||||
setTimeout(() => {
|
||||
isLoading.value = false
|
||||
}, 500)
|
||||
|
|
@ -25,14 +25,14 @@ nuxtApp.hook('page:finish', () => {
|
|||
<Transition name="fade">
|
||||
<div v-if="isLoading" class="fixed inset-0 z-[99999] flex flex-col items-center justify-center bg-white dark:bg-[#0f172a] transition-colors duration-300">
|
||||
<div class="relative flex flex-col items-center">
|
||||
<!-- Main Logo Box -->
|
||||
<!-- กล่องโลโก้หลัก (Main Logo Box) -->
|
||||
<div class="w-20 h-20 bg-blue-50 dark:bg-blue-900/20 rounded-2xl flex items-center justify-center mb-6 animate-pulse-soft">
|
||||
<div class="w-12 h-12 bg-blue-600 rounded-xl flex items-center justify-center shadow-lg shadow-blue-600/30 animate-bounce-subtle">
|
||||
<span class="text-2xl font-black text-white">E</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Loading Text -->
|
||||
<!-- ข้อความระหว่างโหลด (Loading Text) -->
|
||||
<div class="flex flex-col items-center gap-2">
|
||||
<h3 class="text-lg font-bold text-slate-800 dark:text-white tracking-wide">e-Learning</h3>
|
||||
<div class="flex gap-1">
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue