487 lines
22 KiB
Vue
487 lines
22 KiB
Vue
<script setup lang="ts">
|
|
/**
|
|
* @file learning.vue
|
|
* @description Course Learning Interface ("Classroom" view).
|
|
* Defines the main learning environment where users watch video lessons and track progress.
|
|
* Layout mimics a typical LMS with a sidebar for curriculum and a main content area for video/details.
|
|
* @important Matches the provided design mockups pixel-perfectly.
|
|
*/
|
|
|
|
definePageMeta({
|
|
layout: false, // Custom layout defined within this component
|
|
middleware: 'auth'
|
|
})
|
|
|
|
useHead({
|
|
title: 'ห้องเรียนออนไลน์ - e-Learning'
|
|
})
|
|
|
|
// State
|
|
const sidebarOpen = ref(false)
|
|
const activeTab = ref<'details' | 'announcements'>('details')
|
|
const currentLessonId = ref('1.3')
|
|
|
|
const toggleSidebar = () => {
|
|
sidebarOpen.value = !sidebarOpen.value
|
|
}
|
|
|
|
const switchTab = (tab: 'details' | 'announcements', lessonId: string = '') => {
|
|
activeTab.value = tab
|
|
if (lessonId) currentLessonId.value = lessonId
|
|
// Close sidebar on mobile when selecting a lesson
|
|
if (import.meta.client && window.innerWidth <= 1024) {
|
|
sidebarOpen.value = false
|
|
}
|
|
}
|
|
|
|
// Curriculum Data matching the visual exactly
|
|
const progress = 65
|
|
const chapters = [
|
|
{
|
|
title: '01. บทนำ',
|
|
lessons: [
|
|
{ id: '1.1', title: 'การออกแบบ UX คืออะไร?', icon: '✓', status: 'completed' },
|
|
{ id: '1.2', title: 'กระบวนการคิดเชิงออกแบบ', icon: '✓', status: 'completed' },
|
|
{ id: '1.3', title: 'พื้นฐานการวาดโครงร่าง', icon: '▶', status: 'active' },
|
|
]
|
|
},
|
|
{
|
|
title: '02. วิธีการวิจัย',
|
|
lessons: [
|
|
{ id: '2.1', title: 'การสัมภาษณ์ผู้ใช้', icon: '🔒', status: 'locked' },
|
|
{ id: '2.2', title: 'การสร้าง Persona', icon: '🔒', status: 'locked' },
|
|
]
|
|
}
|
|
]
|
|
|
|
// Video Player Logic
|
|
const videoRef = ref<HTMLVideoElement | null>(null)
|
|
const isPlaying = ref(false)
|
|
const videoProgress = ref(0)
|
|
const currentTime = ref(0)
|
|
const duration = ref(0)
|
|
|
|
const togglePlay = () => {
|
|
if (!videoRef.value) return
|
|
if (isPlaying.value) videoRef.value.pause()
|
|
else videoRef.value.play()
|
|
isPlaying.value = !isPlaying.value
|
|
}
|
|
|
|
const updateProgress = () => {
|
|
if (!videoRef.value) return
|
|
currentTime.value = videoRef.value.currentTime
|
|
duration.value = videoRef.value.duration
|
|
videoProgress.value = (currentTime.value / duration.value) * 100
|
|
}
|
|
|
|
const formatTime = (time: number) => {
|
|
const m = Math.floor(time / 60)
|
|
const s = Math.floor(time % 60)
|
|
return `${m}:${s.toString().padStart(2, '0')}`
|
|
}
|
|
|
|
const currentTimeDisplay = computed(() => formatTime(currentTime.value))
|
|
const durationDisplay = computed(() => formatTime(duration.value || 15 * 60 + 45))
|
|
|
|
const seek = (e: MouseEvent) => {
|
|
if (!videoRef.value) return
|
|
const rect = (e.currentTarget as HTMLElement).getBoundingClientRect()
|
|
const percent = (e.clientX - rect.left) / rect.width
|
|
videoRef.value.currentTime = percent * videoRef.value.duration
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div class="learning-shell font-main antialiased selection:bg-blue-500/30">
|
|
<!-- Header: Custom top bar for learning context -->
|
|
<header class="learning-header px-2 md:px-4 h-14 md:h-[56px] border-b border-white/5 flex items-center justify-between gap-2 md:gap-4">
|
|
<div class="flex items-center gap-1 md:gap-6 min-w-0 flex-1">
|
|
<!-- Mobile Sidebar Toggle -->
|
|
<button class="md:hidden text-white p-2 hover:bg-white/5 rounded-lg flex-shrink-0" @click="toggleSidebar">
|
|
<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 6h16M4 12h16M4 18h16" /></svg>
|
|
</button>
|
|
<!-- Back Navigation -->
|
|
<NuxtLink to="/dashboard" class="text-slate-700 dark:text-slate-400 hover:text-slate-900 dark:hover:text-white transition-colors flex items-center gap-2 flex-shrink-0 p-2 md:p-0">
|
|
<span class="text-lg md:text-base">←</span>
|
|
<span class="hidden md:inline text-[11px] font-bold">กลับไปหน้าหลัก</span>
|
|
</NuxtLink>
|
|
<div class="w-[1px] h-4 bg-white/10 hidden md:block flex-shrink-0"/>
|
|
<h1 class="text-[13px] md:text-sm font-black text-slate-900 dark:text-white tracking-tight truncate min-w-0 pr-2">เบื้องต้นการออกแบบ UX/UI</h1>
|
|
</div>
|
|
|
|
<!-- Right Header Actions (Progress) -->
|
|
<div class="flex items-center gap-2 md:gap-10 pr-2 md:pr-0">
|
|
<div class="flex items-center gap-2 md:gap-3">
|
|
<span class="text-[10px] font-bold text-slate-700 dark:text-slate-400 whitespace-nowrap">
|
|
<span class="hidden md:inline">เรียนจบแล้ว </span>{{ progress }}%
|
|
</span>
|
|
<div class="w-12 md:w-32 h-1 bg-white/10 rounded-full overflow-hidden flex-shrink-0">
|
|
<div class="h-full bg-emerald-500 shadow-[0_0_8px_rgba(16,185,129,0.3)]" :style="{ width: progress + '%' }"/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- Sidebar: Course Curriculum list -->
|
|
<aside class="learning-sidebar" :class="{ 'open': sidebarOpen }">
|
|
<div class="py-2">
|
|
<!-- Announcements Tab Trigger -->
|
|
<div
|
|
class="lesson-item group"
|
|
:class="{ 'active-tab': activeTab === 'announcements' }"
|
|
@click="switchTab('announcements')"
|
|
>
|
|
<div class="flex items-center gap-3">
|
|
<span class="text-lg" style="color: #ff3366;">📢</span>
|
|
<span class="font-black text-[12px] tracking-tight">ประกาศในคอร์ส</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Chapters & Lessons List -->
|
|
<div v-for="chapter in chapters" :key="chapter.title" class="mt-4">
|
|
<div class="chapter-header px-4 py-2">{{ chapter.title }}</div>
|
|
<div
|
|
v-for="lesson in chapter.lessons"
|
|
:key="lesson.id"
|
|
class="lesson-item px-4"
|
|
:class="{
|
|
'active-lesson': currentLessonId === lesson.id && activeTab === 'details',
|
|
'completed': lesson.status === 'completed',
|
|
'locked': lesson.status === 'locked'
|
|
}"
|
|
@click="lesson.status !== 'locked' && switchTab('details', lesson.id)"
|
|
>
|
|
<span class="text-[12px] font-medium tracking-tight truncate pr-4">{{ lesson.id }} {{ lesson.title }}</span>
|
|
<span class="icon-status flex-shrink-0" :class="{ 'text-emerald-500': lesson.status === 'completed', 'text-blue-500': lesson.status === 'active' }">
|
|
{{ lesson.icon }}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Exam Link -->
|
|
<div class="mt-8 border-t border-white/5 pt-2">
|
|
<div class="chapter-header px-4 py-2 uppercase tracking-widest text-[10px]">03. แบบทดสอบท้ายบท</div>
|
|
<NuxtLink to="/classroom/quiz" class="lesson-item px-4 no-underline cursor-pointer">
|
|
<span class="text-[12px] font-medium text-slate-400 group-hover:text-white transition-colors">ข้อสอบปลายภาค</span>
|
|
<span class="text-xs opacity-50">📄</span>
|
|
</NuxtLink>
|
|
</div>
|
|
</div>
|
|
</aside>
|
|
|
|
<!-- Sidebar Overlay for mobile -->
|
|
<div v-if="sidebarOpen" class="fixed inset-0 bg-black/60 backdrop-blur-sm z-[85] md:hidden" @click="toggleSidebar"/>
|
|
|
|
<!-- Main View Area -->
|
|
<div class="main-container custom-scrollbar overflow-x-hidden pt-6">
|
|
<main class="w-full max-w-7xl mx-auto px-4 md:px-8 pb-10 md:pb-20">
|
|
<!-- Tab Content: Announcements (Center Aligned) -->
|
|
<div v-if="activeTab === 'announcements'" class="animate-fade-in max-w-4xl mx-auto space-y-8 pt-8 md:pt-14">
|
|
<h2 class="text-2xl md:text-[28px] font-black text-slate-900 dark:text-white tracking-tight">ประกาศทั้งหมดในคอร์สนี้</h2>
|
|
<div class="p-8 md:p-10 bg-slate-100 dark:bg-slate-900/40 ring-1 ring-slate-300 dark:ring-white/10 border-l-4 border-l-amber-500 rounded-2xl relative shadow-md dark:shadow-2xl dark:backdrop-blur-md transition-colors">
|
|
<div class="absolute top-4 right-8 text-amber-500 text-[10px] font-bold uppercase tracking-widest hidden sm:block">📌 ปักหมุด</div>
|
|
<div class="flex items-center gap-3 mb-6">
|
|
<span class="bg-amber-100/10 text-amber-500 px-3 py-1 rounded-lg text-[10px] font-black ring-1 ring-amber-500/20">ด่วน</span>
|
|
<span class="text-[11px] font-bold text-slate-500 uppercase tracking-tighter">วันนี้ • 10:30 น.</span>
|
|
</div>
|
|
<h3 class="text-xl font-black text-white mb-4 tracking-tight">ปรับเวลาส่งแบบฝึกหัด</h3>
|
|
<p class="text-slate-400 leading-relaxed font-medium">เนื่องจากเวลาทำข้อสอบน้อยเกินไปจึงทำการปรับเวลาให้เหมาะสมกับเนื้อหาบทเรียน</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Tab Content: Lesson Details (Grid System) -->
|
|
<div v-if="activeTab === 'details'" class="animate-fade-in pt-4 md:pt-10">
|
|
<div class="grid grid-cols-1 md:grid-cols-12 gap-8 md:gap-10 items-start">
|
|
|
|
<!-- Left Side: Video + Title + Notes (8/12) -->
|
|
<div class="md:col-span-8 space-y-10 pb-24 md:pb-0">
|
|
<!-- Video Unit -->
|
|
<div class="aspect-video relative group overflow-hidden rounded-2xl ring-1 ring-white/10 shadow-2xl bg-black">
|
|
<video
|
|
ref="videoRef"
|
|
class="w-full h-full object-contain"
|
|
poster="https://images.unsplash.com/photo-1498050108023-c5249f4df085?w=1200&q=80"
|
|
@timeupdate="updateProgress"
|
|
@play="isPlaying = true"
|
|
@pause="isPlaying = false"
|
|
>
|
|
<source src="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4" type="video/mp4">
|
|
</video>
|
|
|
|
<!-- Play Overlay -->
|
|
<div v-if="!isPlaying" class="absolute inset-0 flex items-center justify-center bg-black/5 backdrop-blur-[1px]">
|
|
<button class="w-16 h-16 md:w-20 md:h-20 rounded-full bg-blue-600/30 border border-white/20 flex items-center justify-center backdrop-blur-xl hover:scale-110 transition-transform shadow-lg" @click="togglePlay">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-white fill-white translate-x-0.5" viewBox="0 0 24 24"><path d="M8 5v14l11-7z"/></svg>
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Controls Overlay -->
|
|
<div class="absolute bottom-0 inset-x-0 p-4 md:p-6 pt-16 bg-gradient-to-t from-black/95 via-black/40 to-transparent">
|
|
<div class="flex items-center gap-4 text-[11px] font-bold text-white/80">
|
|
<button class="text-xs hover:text-blue-500 transition-colors" @click="togglePlay">{{ isPlaying ? '⏸' : '▶' }}</button>
|
|
<span class="font-mono">{{ currentTimeDisplay }} / {{ durationDisplay }}</span>
|
|
<div class="flex-grow h-[3px] bg-white/10 rounded-full relative cursor-pointer" @click="seek">
|
|
<div :style="{ width: videoProgress + '%' }" class="absolute top-0 left-0 h-full bg-blue-500 rounded-full"/>
|
|
</div>
|
|
<div class="flex gap-4">
|
|
<span class="cursor-pointer hover:text-white">CC</span>
|
|
<span class="cursor-pointer hover:text-white" @click="videoRef?.requestFullscreen()">⛶</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Lesson Title -->
|
|
<div>
|
|
<h2 class="text-2xl md:text-[32px] font-black text-slate-900 dark:text-white leading-tight tracking-tight break-words mb-2">1.3 พื้นฐานการวาดโครงร่าง (Wireframing Basics)</h2>
|
|
<div class="flex items-center gap-2 text-slate-600 dark:text-slate-400 text-[12px] font-bold uppercase tracking-wider">
|
|
<span>บทที่ 1</span>
|
|
<span class="opacity-30">•</span>
|
|
<span>บทเริ่มต้นการออกแบบ</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Lesson Notes Card -->
|
|
<div class="rounded-2xl bg-white dark:bg-slate-800/60 border border-slate-200 dark:border-slate-700 p-6 md:p-10 shadow-sm dark:shadow-xl transition-colors">
|
|
<h3 class="text-[11px] md:text-[12px] font-black text-slate-900 dark:text-slate-100 mb-6 uppercase tracking-[0.2em] border-b border-slate-200 dark:border-slate-700 pb-4">บันทึกบทเรียน</h3>
|
|
<div class="text-[15px] md:text-[16px] text-slate-700 dark:text-slate-200 leading-relaxed font-medium space-y-6">
|
|
<p>การ Wireframe คือการจำลองโครงสร้างพื้นฐานของหน้าจอ (Layout) โดยเน้นไปที่การจัดวางตำแหน่งปุ่มและเนื้อหาสำคัญเพื่อวางโครงสร้างก่อนลงมือดีไซน์จริง</p>
|
|
|
|
<div class="bg-slate-50 dark:bg-slate-800/40 border border-slate-200 dark:border-slate-700 border-l-4 border-l-blue-500 p-6 rounded-r-2xl">
|
|
<div class="font-black text-blue-700 dark:text-blue-400 text-[12px] uppercase tracking-wider mb-3">ประเด็นสำคัญ:</div>
|
|
<ul class="space-y-4">
|
|
<li class="flex gap-4 items-start">
|
|
<span class="w-1.5 h-1.5 rounded-full bg-blue-500 mt-2 flex-shrink-0"/>
|
|
<span class="text-slate-700 dark:text-slate-300">ความละเอียดต่ำ (Low-fidelity) ช่วยให้โฟกัสที่การใช้งาน (Functionality) เป็นหลัก</span>
|
|
</li>
|
|
<li class="flex gap-4 items-start">
|
|
<span class="w-1.5 h-1.5 rounded-full bg-blue-500 mt-2 flex-shrink-0"/>
|
|
<span class="text-slate-700 dark:text-slate-300">ช่วยในการสื่อสารไอเดียกับ Stakeholders ให้เห็นภาพตรงกัน</span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Right Side: Resources + Actions (4/12) -->
|
|
<div class="md:col-span-4 space-y-6 md:sticky md:top-6">
|
|
<!-- Resources Card -->
|
|
<div class="rounded-2xl bg-white dark:bg-slate-800/60 border border-slate-200 dark:border-slate-700 p-6 md:p-8 shadow-sm dark:shadow-xl transition-colors">
|
|
<h3 class="text-[11px] md:text-[12px] font-black text-slate-900 dark:text-slate-100 mb-6 uppercase tracking-[0.2em] border-b border-slate-200 dark:border-slate-700 pb-4">เอกสารประกอบ</h3>
|
|
<div class="space-y-3">
|
|
<!-- Attachment Row -->
|
|
<div class="flex items-center justify-between p-4 bg-slate-50 dark:bg-slate-800/40 rounded-2xl border border-slate-200 dark:border-slate-700 group hover:bg-slate-100 dark:hover:bg-slate-700/40 transition-all cursor-pointer min-w-0">
|
|
<div class="flex items-center gap-3 min-w-0 flex-1">
|
|
<span class="text-xl flex-shrink-0">📄</span>
|
|
<div class="flex flex-col min-w-0">
|
|
<span class="text-[12px] font-bold text-slate-800 dark:text-slate-100 truncate pr-2">สไลด์ประกอบการสอน.pdf</span>
|
|
<span class="text-[9px] font-black text-slate-500 dark:text-slate-400 uppercase">2.4 MB</span>
|
|
</div>
|
|
</div>
|
|
<button class="w-8 h-8 rounded-full flex items-center justify-center bg-slate-100 dark:bg-slate-700/50 group-hover:bg-blue-600 text-slate-600 dark:text-slate-400 group-hover:text-white transition-all text-xs flex-shrink-0">↓</button>
|
|
</div>
|
|
<!-- Attachment Row -->
|
|
<div class="flex items-center justify-between p-4 bg-slate-50 dark:bg-slate-800/40 rounded-2xl border border-slate-200 dark:border-slate-700 group hover:bg-slate-100 dark:hover:bg-slate-700/40 transition-all cursor-pointer min-w-0">
|
|
<div class="flex items-center gap-3 min-w-0 flex-1">
|
|
<span class="text-xl flex-shrink-0">📁</span>
|
|
<div class="flex flex-col min-w-0">
|
|
<span class="text-[12px] font-bold text-slate-800 dark:text-slate-100 truncate pr-2">ไฟล์แบบฝึกหัด.zip</span>
|
|
<span class="text-[9px] font-black text-slate-500 dark:text-slate-400 uppercase">15 MB</span>
|
|
</div>
|
|
</div>
|
|
<button class="w-8 h-8 rounded-full flex items-center justify-center bg-slate-100 dark:bg-slate-700/50 group-hover:bg-blue-600 text-slate-600 dark:text-slate-400 group-hover:text-white transition-all text-xs flex-shrink-0">↓</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Navigation Actions (Desktop Only - Inside Column) -->
|
|
<div class="hidden md:flex flex-col gap-4">
|
|
<button class="w-full py-5 bg-blue-600 hover:bg-blue-500 rounded-2xl text-[14px] font-black text-white shadow-xl shadow-blue-600/20 transition-all active:scale-95">
|
|
บทเรียนถัดไป
|
|
</button>
|
|
<button class="w-full py-5 bg-slate-800 hover:bg-slate-700 rounded-2xl text-[14px] font-black text-slate-300 transition-all ring-1 ring-white/10">
|
|
บทเรียนก่อนหน้า
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Sticky Bottom Bar (Mobile Only) -->
|
|
<div v-if="activeTab === 'details'" class="md:hidden fixed bottom-0 inset-x-0 p-4 bg-white dark:bg-slate-900/90 dark:backdrop-blur-xl border-t border-slate-300 dark:border-white/5 z-[100] flex gap-3 transition-colors">
|
|
<button class="flex-1 py-4 bg-slate-800 rounded-xl text-xs font-black text-slate-300 ring-1 ring-white/10">
|
|
ย้อนกลับ
|
|
</button>
|
|
<button class="flex-[2] py-4 bg-blue-600 rounded-xl text-xs font-black text-white shadow-lg shadow-blue-600/20">
|
|
บทเรียนถัดไป
|
|
</button>
|
|
</div>
|
|
|
|
</main>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.learning-shell {
|
|
display: grid;
|
|
grid-template-columns: 320px 1fr;
|
|
grid-template-rows: 56px 1fr;
|
|
height: 100vh;
|
|
overflow: hidden;
|
|
background: #ffffff;
|
|
color: #1e293b;
|
|
transition: background 0.2s, color 0.2s;
|
|
}
|
|
|
|
:global(.dark) .learning-shell {
|
|
background: #0F172A;
|
|
color: #F8FAFC;
|
|
}
|
|
|
|
.learning-header {
|
|
grid-column: 1 / -1;
|
|
background: #ffffff;
|
|
border-bottom: 1px solid #e2e8f0;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
z-index: 100;
|
|
transition: background 0.2s, border-color 0.2s;
|
|
}
|
|
|
|
:global(.dark) .learning-header {
|
|
background: #1e293b;
|
|
border-bottom-color: rgba(255, 255, 255, 0.05);
|
|
}
|
|
|
|
.learning-sidebar {
|
|
grid-row: 2;
|
|
grid-column: 1;
|
|
background: #ffffff;
|
|
border-right: 1px solid #e2e8f0;
|
|
overflow-y: auto;
|
|
z-index: 90;
|
|
transition: background 0.2s, border-color 0.2s;
|
|
}
|
|
|
|
:global(.dark) .learning-sidebar {
|
|
background: #111827;
|
|
border-right-color: rgba(255, 255, 255, 0.05);
|
|
}
|
|
|
|
.main-container {
|
|
grid-row: 2;
|
|
grid-column: 2;
|
|
display: flex;
|
|
flex-direction: column;
|
|
overflow-y: auto;
|
|
background: #ffffff;
|
|
transition: background 0.2s;
|
|
}
|
|
|
|
:global(.dark) .main-container {
|
|
background: #0B0F1A;
|
|
}
|
|
|
|
@media (max-width: 1024px) {
|
|
.main-container {
|
|
grid-column: 1;
|
|
}
|
|
}
|
|
|
|
.lesson-item {
|
|
padding: 14px 24px;
|
|
cursor: pointer;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
transition: all 0.2s;
|
|
color: #000000;
|
|
border-bottom: 1px solid #e2e8f0;
|
|
}
|
|
.lesson-item:hover {
|
|
background-color: #f1f5f9;
|
|
color: #000000;
|
|
}
|
|
|
|
:global(.dark) .lesson-item {
|
|
color: #e2e8f0;
|
|
border-bottom-color: rgba(255, 255, 255, 0.01);
|
|
}
|
|
|
|
:global(.dark) .lesson-item:hover {
|
|
background-color: rgba(255, 255, 255, 0.03);
|
|
color: #ffffff;
|
|
}
|
|
|
|
.active-tab {
|
|
background: rgba(59, 130, 246, 0.1);
|
|
color: #2563eb;
|
|
font-weight: 700;
|
|
}
|
|
.active-lesson {
|
|
background-color: #f3f4f6;
|
|
color: #000000;
|
|
box-shadow: inset 4px 0 0 #3B82F6;
|
|
}
|
|
|
|
:global(.dark) .active-lesson {
|
|
background-color: #1E293B;
|
|
color: #fff;
|
|
}
|
|
|
|
.chapter-header {
|
|
background: #f3f4f6;
|
|
color: #000000;
|
|
font-weight: 800;
|
|
font-size: 13px;
|
|
border-bottom: 1px solid #d1d5db;
|
|
transition: all 0.2s;
|
|
letter-spacing: 0.05em;
|
|
}
|
|
|
|
:global(.dark) .chapter-header {
|
|
background: #0F172A;
|
|
color: #ffffff;
|
|
border-bottom-color: rgba(255, 255, 255, 0.05);
|
|
}
|
|
|
|
.learning-footer {
|
|
position: sticky;
|
|
bottom: 0;
|
|
z-index: 50;
|
|
}
|
|
|
|
.animate-fade-in {
|
|
animation: fadeIn 0.4s ease-out forwards;
|
|
}
|
|
@keyframes fadeIn {
|
|
from { opacity: 0; transform: translateY(8px); }
|
|
to { opacity: 1; transform: translateY(0); }
|
|
}
|
|
|
|
.custom-scrollbar::-webkit-scrollbar {
|
|
width: 4px;
|
|
}
|
|
.custom-scrollbar::-webkit-scrollbar-thumb {
|
|
background: rgba(255, 255, 255, 0.1);
|
|
border-radius: 10px;
|
|
}
|
|
|
|
@media (max-width: 1024px) {
|
|
.learning-shell { grid-template-columns: 1fr; }
|
|
.learning-sidebar {
|
|
position: fixed;
|
|
left: -320px;
|
|
top: 56px;
|
|
bottom: 0;
|
|
width: 320px;
|
|
transition: transform 0.3s ease;
|
|
}
|
|
.learning-sidebar.open { transform: translateX(320px); }
|
|
}
|
|
</style>
|