ED:Font color
This commit is contained in:
supalerk-ar66
parent
d8d3dff2e7
commit
563564ee58
14 changed files with 162 additions and 83 deletions
|
|
@ -48,8 +48,8 @@ const chapters = [
|
|||
{
|
||||
title: '02. วิธีการวิจัย',
|
||||
lessons: [
|
||||
{ id: '2.1', title: 'การสัมภาษณ์ผู้ใช้', icon: '🔒', status: 'locked' },
|
||||
{ id: '2.2', title: 'การสร้าง Persona', icon: '🔒', status: 'locked' },
|
||||
{ id: '2.1', title: 'การสัมภาษณ์ผู้ใช้', icon: '', status: 'locked' },
|
||||
{ id: '2.2', title: 'การสร้าง Persona', icon: '', status: 'locked' },
|
||||
]
|
||||
}
|
||||
]
|
||||
|
|
@ -93,12 +93,12 @@ const seek = (e: MouseEvent) => {
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<div class="learning-shell font-main antialiased selection:bg-blue-500/30">
|
||||
<div class="learning-shell font-main antialiased selection:bg-blue-500/30 dark:!bg-[#0F172A] dark:!text-slate-200 transition-colors">
|
||||
<!-- 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">
|
||||
<header class="learning-header px-2 md:px-4 h-14 md:h-[56px] border-b border-slate-200 dark:border-white/5 flex items-center justify-between gap-2 md:gap-4 dark:!bg-slate-800 transition-colors">
|
||||
<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">
|
||||
<button class="md:hidden text-slate-900 dark:text-white p-2 hover:bg-slate-100 dark:hover:bg-white/5 rounded-lg flex-shrink-0 transition-colors" @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 -->
|
||||
|
|
@ -106,7 +106,7 @@ const seek = (e: MouseEvent) => {
|
|||
<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"/>
|
||||
<div class="w-[1px] h-4 bg-slate-200 dark: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>
|
||||
|
||||
|
|
@ -124,7 +124,7 @@ const seek = (e: MouseEvent) => {
|
|||
</header>
|
||||
|
||||
<!-- Sidebar: Course Curriculum list -->
|
||||
<aside class="learning-sidebar" :class="{ 'open': sidebarOpen }">
|
||||
<aside class="learning-sidebar dark:!bg-gray-900 dark:!border-r-white/5 transition-colors" :class="{ 'open': sidebarOpen }">
|
||||
<div class="py-2">
|
||||
<!-- Announcements Tab Trigger -->
|
||||
<div
|
||||
|
|
@ -134,17 +134,17 @@ const seek = (e: MouseEvent) => {
|
|||
>
|
||||
<div class="flex items-center gap-3">
|
||||
<span class="text-lg" style="color: #ff3366;">📢</span>
|
||||
<span class="font-black text-[12px] tracking-tight">ประกาศในคอร์ส</span>
|
||||
<span class="font-black text-[12px] tracking-tight dark:!text-white">ประกาศในคอร์ส</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 class="chapter-header px-4 py-2 dark:!bg-slate-900 dark:!text-white dark:!border-b-white/5">{{ chapter.title }}</div>
|
||||
<div
|
||||
v-for="lesson in chapter.lessons"
|
||||
:key="lesson.id"
|
||||
class="lesson-item px-4"
|
||||
class="lesson-item px-4 dark:!text-slate-300 dark:!border-b-white/5 hover:dark:!bg-white/5 hover:dark:!text-white transition-colors"
|
||||
:class="{
|
||||
'active-lesson': currentLessonId === lesson.id && activeTab === 'details',
|
||||
'completed': lesson.status === 'completed',
|
||||
|
|
@ -161,7 +161,7 @@ const seek = (e: MouseEvent) => {
|
|||
|
||||
<!-- 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>
|
||||
<div class="chapter-header px-4 py-2 uppercase tracking-widest text-[10px] dark:!bg-slate-900 dark:!text-white dark:!border-b-white/5">03. แบบทดสอบท้ายบท</div>
|
||||
<NuxtLink to="/classroom/quiz" class="lesson-item px-4 no-underline cursor-pointer">
|
||||
<span class="text-[12px] font-medium text-slate-900 dark:text-slate-200 group-hover:text-black dark:group-hover:text-white transition-colors">ข้อสอบปลายภาค</span>
|
||||
<span class="text-xs opacity-50">📄</span>
|
||||
|
|
@ -174,7 +174,7 @@ const seek = (e: MouseEvent) => {
|
|||
<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">
|
||||
<div class="main-container custom-scrollbar overflow-x-hidden pt-6 dark:!bg-[#0B0F1A] transition-colors">
|
||||
<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">
|
||||
|
|
@ -243,21 +243,21 @@ const seek = (e: MouseEvent) => {
|
|||
</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">
|
||||
<div class="rounded-2xl bg-white dark:!bg-slate-800 border border-slate-200 dark:border-slate-700 p-6 md:p-10 shadow-sm dark:shadow-xl transition-colors">
|
||||
<h3 class="text-[14px] md:text-[16px] font-black text-slate-900 dark:text-slate-50 mb-6 uppercase tracking-[0.2em] border-b border-slate-200 dark:border-slate-600 pb-4">บันทึกบทเรียน</h3>
|
||||
<div class="text-[16px] md:text-[18px] 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>
|
||||
<div class="bg-slate-50 dark:bg-slate-700/50 border border-slate-200 dark:border-slate-600 border-l-4 border-l-blue-500 p-6 rounded-r-2xl">
|
||||
<div class="font-black text-blue-700 dark:text-blue-300 text-[14px] md:text-[16px] 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>
|
||||
<span class="w-1.5 h-1.5 rounded-full bg-blue-500 mt-2.5 flex-shrink-0"/>
|
||||
<span class="text-slate-700 dark:text-slate-100">ความละเอียดต่ำ (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>
|
||||
<span class="w-1.5 h-1.5 rounded-full bg-blue-500 mt-2.5 flex-shrink-0"/>
|
||||
<span class="text-slate-700 dark:text-slate-100">ช่วยในการสื่อสารไอเดียกับ Stakeholders ให้เห็นภาพตรงกัน</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
|
@ -268,27 +268,27 @@ const seek = (e: MouseEvent) => {
|
|||
<!-- 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="rounded-2xl bg-white dark:!bg-slate-800 border border-slate-200 dark:border-slate-700 p-6 md:p-8 shadow-sm dark:shadow-xl transition-colors">
|
||||
<h3 class="text-[14px] md:text-[16px] 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 justify-between p-4 bg-slate-50 dark:bg-slate-700/50 rounded-2xl border border-slate-200 dark:border-slate-600 group hover:bg-slate-100 dark:hover:bg-slate-600/50 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>
|
||||
<span class="text-[14px] font-bold text-slate-800 dark:text-slate-100 truncate pr-2">สไลด์ประกอบการสอน.pdf</span>
|
||||
<span class="text-[11px] 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 justify-between p-4 bg-slate-50 dark:bg-slate-700/50 rounded-2xl border border-slate-200 dark:border-slate-600 group hover:bg-slate-100 dark:hover:bg-slate-600/50 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>
|
||||
<span class="text-[14px] font-bold text-slate-800 dark:text-slate-100 truncate pr-2">ไฟล์แบบฝึกหัด.zip</span>
|
||||
<span class="text-[11px] 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>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue