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

Website Structure

Browse source
This commit is contained in:
supalerk-ar66 2026-01-13 10:46:40 +07:00
parent 62812f2090
commit 71f0676a62
22365 changed files with 4265753 additions and 791 deletions
Download patch file Download diff file Expand all files Collapse all files

142
Frontend-Learner/pages/dashboard/announcements.vue Normal file
View file

@ -0,0 +1,142 @@
<script setup lang="ts">
/**
* @file announcements.vue
* @description Page displaying system and course-related announcements.
* Uses the default layout and requires authentication.
*/
// Define page metadata: usage of 'default' layout and 'auth' middleware
definePageMeta({
layout: 'default',
middleware: 'auth'
})
// Set page title for SEO
useHead({
title: 'ประกาศ - e-Learning'
})
</script>
<template>
<div>
<!-- Page Header -->
<h1 style="font-size: 28px; font-weight: 700; margin-bottom: 24px;">ประกาศ</h1>
<!--
Main Layout: 12-column Grid
- Left Column (span-8): Main announcements content
- Right Column (span-4): Categories/Filter sidebar
-->
<div class="grid-12">
<!-- ==========================================
MAIN CONTENT AREA (Left)
========================================== -->
<div class="col-span-8">
<!-- Feature 1: Critical System Announcement -->
<div class="card mb-6">
<div class="flex items-center gap-2 mb-2">
<span class="status-pill status-warning">สำคัญ</span>
<span class="text-sm text-slate-600 dark:text-slate-400">24 ธ.ค. 2024</span>
</div>
<h2 class="font-bold mb-4" style="font-size: 1.25rem;">แจ้งปิดปรับปรุงระบบ</h2>
<p class="mb-4">เราจะทำการปิดปรับปรุงระบบในวันที่ 25 ธ.ค. เวลา 02:00 - 04:00 น. ขออภัยในความไม่สะดวก</p>
<!-- Attachment Block -->
<div class="flex items-center gap-2 p-3 rounded" style="background: var(--neutral-50); border: 1px solid var(--border-color); width: fit-content;">
<span>📎</span> <span class="text-sm font-bold">ตารางการปิดปรับปรุง.pdf</span>
</div>
</div>
<!-- Announcement: UX/UI Course Update -->
<div class="card mb-4" style="border-left: 4px solid var(--primary);">
<div class="flex justify-between items-start mb-2" style="flex-wrap: wrap; gap: 8px;">
<div>
<span class="status-pill status-neutral mb-2">เบื้องต้นการออกแบบ UX/UI</span>
<h3 class="font-bold">เริ่มเปิดหลักสูตรเดือนมกราคมแล้ว!</h3>
</div>
<span class="text-sm text-slate-600 dark:text-slate-400">23 ธ.ค. 2024</span>
</div>
<p class="text-slate-700 dark:text-slate-300 mb-2">นักเรียนที่ลงทะเบียนไว้ สามารถเริ่มเข้าเรียนบทนำได้ตั้งแต่วันนี้เป็นต้นไป...</p>
<NuxtLink to="/browse/discovery" class="text-sm" style="color: var(--primary);">ดูรายละเอียดคอร์ส</NuxtLink>
</div>
<!-- Announcement: Accessibility (WCAG) Material -->
<div class="card mb-4" style="border-left: 4px solid var(--success);">
<div class="flex justify-between items-start mb-2" style="flex-wrap: wrap; gap: 8px;">
<div>
<span class="status-pill status-neutral mb-2">การเข้าถึงเว็บ (WCAG)</span>
<h3 class="font-bold">ดาวน์โหลดเอกสารประกอบการเรียนได้แล้ว</h3>
</div>
<span class="text-sm text-slate-600 dark:text-slate-400">22 ธ.ค. 2024</span>
</div>
<p class="text-slate-700 dark:text-slate-300 mb-2">เราได้เพิ่มไฟล์ PDF สรุปเกณฑ์ WCAG 2.2 ในส่วนของเอกสารประกอบการเรียนแล้ว...</p>
<!-- Small Attachment -->
<div class="flex items-center gap-2 p-2 rounded mt-2" style="background: var(--neutral-50); border: 1px dotted var(--border-color); width: fit-content;">
<span>📄</span> <span class="text-xs">WCAG_2.2_Summary.pdf</span>
</div>
</div>
<!-- Announcement: React Course Update -->
<div class="card mb-4" style="border-left: 4px solid var(--warning);">
<div class="flex justify-between items-start mb-2" style="flex-wrap: wrap; gap: 8px;">
<div>
<span class="status-pill status-neutral mb-2">รูปแบบ React ขั้นสูง</span>
<h3 class="font-bold">อัปเดตบทเรียนใหม่: React Server Components</h3>
</div>
<span class="text-sm text-slate-600 dark:text-slate-400">21 ธ.ค. 2024</span>
</div>
<p class="text-slate-700 dark:text-slate-300 mb-2">เพิ่มเนื้อหาการใช้งาน RSC และการจัดการ State ใน Next.js 14...</p>
<NuxtLink to="/classroom/learning" class="btn btn-secondary text-sm" style="width: fit-content;">เข้าสู่บทเรียน</NuxtLink>
</div>
<!-- Announcement: General New Course -->
<div class="card mb-4">
<div class="flex justify-between items-start mb-2" style="flex-wrap: wrap; gap: 8px;">
<h3 class="font-bold">คอร์สใหม่: Advanced Python</h3>
<span class="text-sm text-slate-600 dark:text-slate-400">20 ธ.ค. 2024</span>
</div>
<p class="text-slate-700 dark:text-slate-300 mb-2">พบกับคอร์สใหม่ล่าสุด เรียนรู้โครงสร้างข้อมูล Python...</p>
<a href="#" class="text-sm" style="color: var(--primary);">อ่านเพิ่มเติม</a>
</div>
<!-- Announcement: Platform Update -->
<div class="card mb-4">
<div class="flex justify-between items-start mb-2" style="flex-wrap: wrap; gap: 8px;">
<h3 class="font-bold">ยินดีต้อนรับสู่ดีไซน์ใหม่!</h3>
<span class="text-sm text-slate-600 dark:text-slate-400">15 ธ.ค. 2024</span>
</div>
<p class="text-slate-700 dark:text-slate-300 mb-2">เราปรับโฉมใหม่ไฉไลกว่าเดิม เพื่อการใช้งานที่ดียิ่งขึ้น...</p>
<a href="#" class="text-sm" style="color: var(--primary);">อ่านเพิ่มเติม</a>
</div>
</div>
<!-- ==========================================
SIDEBAR (Right)
Category Filters
========================================== -->
<div class="col-span-4">
<div class="card">
<h3 class="font-bold mb-4">หมวดหมู่</h3>
<ul class="flex flex-col gap-2">
<!-- Filter Option: All -->
<li class="flex justify-between items-center p-2 rounded cursor-pointer" style="background: var(--neutral-50);">
<span>ทั้งหมด</span>
<span class="text-muted">15</span>
</li>
<!-- Filter Option: System Updates -->
<li class="flex justify-between items-center p-2 rounded cursor-pointer">
<span>อัปเดตระบบ</span>
<span class="text-muted">3</span>
</li>
<!-- Filter Option: Course News -->
<li class="flex justify-between items-center p-2 rounded cursor-pointer">
<span>ข่าวสารคอร์ส</span>
<span class="text-muted">11</span>
</li>
</ul>
</div>
</div>
</div>
</div>
</template>