EduFlow ແມ່ນແມ່ແບບ Admin Dashboard ທີ່ທັນສະໄໝ ສ້າງຂຶ້ນສະເພາະສຳລັບ ລະບົບການຮຽນຮູ້ອອນລາຍ (LMS), ສະຖາບັນ e-learning ແລະ ແພລັດຟອມຫຼັກສູດອອນລາຍ. ສ້າງດ້ວຍ Bootstrap 5 ບວກກັບ SCSS architecture ທີ່ສະອາດ ແລະ ຮອງຮັບ Light/Dark mode ທັງສອງ — EduFlow ໃຫ້ທ່ານທຸກຢ່າງທີ່ຕ້ອງການ ເພື່ອຈັດການ ຫຼັກສູດ, ນັກຮຽນ, ຜູ້ສອນ ແລະ ລາຍຮັບ ໃນທີ່ດຽວ.
✨ ເປັນຫຍັງຈຶ່ງຄວນເລືອກ EduFlow?
ບໍ່ຄືກັບ Admin template ທົ່ວໄປ, EduFlow ສ້າງຂຶ້ນໂດຍເນັ້ນໃສ່ ຂະບວນການເຮັດວຽກຂອງທຸລະກິດ e-learning ໂດຍສະເພາະ — ການສ້າງຫຼັກສູດ, ການຕິດຕາມຄວາມຄືບໜ້ານັກຮຽນ, ການກວດວຽກ, ການຈ່າຍເງິນຜູ້ສອນ ແລະ ການຈັດຕາຕະລາງຮຽນສົດ. ທຸກໜ້າ ແລະ Component ອອກແບບດ້ວຍ ການນຳໃຊ້ LMS ເປັນຫຼັກ ບໍ່ແມ່ນຕໍ່ຍອດມາທີຫຼັງ.
🚀 ຄຸນສົມບັດຫຼັກ
15 ໜ້າ HTML ສຳເລັດຮູບ — ທຸກໜ້າສ້າງຂຶ້ນສະເພາະສຳລັບ LMS/e-learning
Light & Dark Mode — ສະຫຼັບໄດ້ໃນ 1 ຄລິກ, ບັນທຶກຄ່າໄວ້ໃນ browser ອັດຕະໂນມັດ ແລະ ຮອງຮັບການຕັ້ງຄ່າຂອງລະບົບ
Bootstrap 5 + SCSS — ໂຄດສະອາດ, ໂຄງສ້າງ Sass ເປັນລະບຽບ; ການປ່ຽນ Theme (re-theme) ໃຊ້ເວລາພຽງສອງສາມນາທີ
Component Course Card — ຮູບ thumbnail, ໝວດໝູ່, ຊື່ຜູ້ສອນ, ດາວ rating, ລາຄາ ແລະ badge ສະຖານະ
Progress Ring ວົງກົມ SVG — ສະແດງ % ຄວາມຄືບໜ້າ ໂດຍບໍ່ຕ້ອງໃຊ້ JavaScript ເພີ່ມເຕີມ
Curriculum Builder — ບັນນາທິການ Section/Lesson ທີ່ຫຍຸບໄດ້ ມີວິດີໂອ, ການອ່ານ, quiz ແລະ ສະຖານະ lock
Chart.js ຮອງຮັບ Theme — ກຣາຟ enrollment, ໝວດໝູ່ ແລະ ລາຍຮັບ; ທຸກຢ່າງອັບເດດສີອັດຕະໂນມັດ ເມື່ອສະຫຼັບ dark/light mode
Sidebar ຫຍຸບໄດ້ — ເປັນ icon-only ໃນ desktop ແລະ ເປັນ drawer ເລື່ອນອອກໃນ mobile
Responsive ທຸກຂະໜາດ — ໃຊ້ງານໄດ້ດີທັງໃນ desktop, tablet ແລະ ມືຖື
ບໍ່ໃຊ້ jQuery — ຂຽນດ້ວຍ Vanilla JavaScript ທັງໝົດ ເຮັດໃຫ້ໂຫຼດໄວກວ່າ
ຄູ່ມືນຳໃຊ້ຄົບຖ້ວນ — ຄູ່ມື HTML ພາສາລາວ ອະທິບາຍທຸກ component ພ້ອມ code ຕົວຢ່າງ
📄 ໜ້າຕ່າງໆທີ່ລວມຢູ່
ໜ້າຫຼັກ (Dashboard) — ສະຖິຕິ, ກຣາຟ enrollment, ຫຼັກສູດຍອດນິຍົມ ແລະ progress ring ອັດຕາການຮຽນສຳເລັດ
ຫຼັກສູດ — grid ຫຼັກສູດ ພ້ອມດ້ວຍ filter ໝວດໝູ່ ແລະ ສະຖານະ
ສ້າງຫຼັກສູດ — ສ້າງ Curriculum ມີ Section/Lesson, ລາຄາ ແລະ visibility
ວຽກ & ແບບທົດສອບ — ຄຸ້ມຄອງການສົ່ງວຽກ ພ້ອມ workflow ການກວດ
ຕາຕະລາງຮຽນສົດ — ຕາຕະລາງ grid ແບບເດືອນ ມີ live class, ກຳນົດການ ແລະ ເວລາໃຫ້ຄຳປຶກສາ
ນັກຮຽນ — ຕາຕະລາງນັກຮຽນ ພ້ອມ progress bar inline
ໂປຣໄຟລ໌ນັກຮຽນ — progress ring, tab ຫຼັກສູດທີ່ລົງທະບຽນ, ບັນທຶກກິດຈະກຳ ແລະ ຄະແນນ
ຜູ້ສອນ — grid ຜູ້ສອນ ພ້ອມສະແດງລາຍຮັບ ແລະ rating
ລາຍຮັບ & ການຈ່າຍເງິນ — ກຣາຟ revenue, ຜູ້ສອນທີ່ມີລາຍຮັບສູງ ແລະ ປະຫວັດ payout
ຄຳຕິຊົມ — ລະອຽດ rating ແລະ ຟີດ review ພ້ອມ respond flow ສຳລັບການຕອບກັບ
ການຕັ້ງຄ່າ — tab ການຕັ້ງຄ່າ: ໂປຣໄຟລ໌, ຄວາມປອດໄພ, ການແຈ້ງເຕືອນ, ແລະ ວິທີ payout
ເຂົ້າສູ່ລະບົບ / ລົງທະບຽນ / ລືມລະຫັດຜ່ານ — ໜ້າ auth ພ້ອມ visual panel ດ້ານຂ້າງ
ໜ້າ 404 (ບໍ່ພົບໜ້າ)
🎨 ຈຸດເດັ່ນດ້ານການອອກແບບ
ສີຫຼັກ: Teal (#0D9488) — ສົດໃສ, ທັນສະໄໝ, ສື່ເຖິງການຮຽນຮູ້ ແລະ ການເຕີບໂຕ
ສີ Accent: Amber (#F59E0B) — ໃຊ້ສຳລັບໃບຢັ້ງຢືນ (certificates) ແລະ achievement elements ຕ່າງໆ
ໂຕໜັງສື: Noto Sans Lao / Plus Jakarta Sans (ຂໍ້ຄວາມ) + Sora (ຫົວຂໍ້) — ອ່ານງ່າຍ ທຸກຂະໜາດໜ້າຈໍ
ລະບົບ elevation ສະເພາະຕົວ — ໃຊ້ເງົາ (shadow) ນຸ່ມໆແທນ border ໜັກໆ ເພື່ອໃຫ້ຄວາມຮູ້ສຶກພຣີມຽມ
Micro-animation ທີ່ລື່ນໄຫຼໃນ card, sidebar ແລະ ຕອນປ່ຽນ theme
🛠 ສຳລັບນັກພັດທະນາ
ໄຟລ໌ SCSS ຕົ້ນສະບັບ ຄົບຖ້ວນ — ຈັດລະບຽບເປັນ abstracts, base, layout ແລະ components
CSS custom properties ຂັບເຄື່ອນລະບົບ theme — component ໃໝ່ຮອງຮັບ dark mode ໂດຍອັດຕະໂນມັດ
ລະບົບ partial ທີ່ໃຊ້ງານງ່າຍ (Node.js ທາງເລືອກ) — ເພີ່ມໜ້າໃໝ່ໄດ້ ພາຍໃນເວລາພຽງສອງສາມນາທີ
ຄູ່ມື HTML — ອະທິບາຍທຸກ component ພ້ອມ code ຕົວຢ່າງຊັດເຈນ
📦 ສິ່ງທີ່ຢູ່ໃນ Package
15 ໜ້າ HTML ສຳເລັດຮູບ (ພ້ອມໃຊ້ທັນທີ ບໍ່ຕ້ອງ compile)
CSS ທີ່ compile ແລ້ວ (ທັງແບບ expanded ແລະ minified)
ໄຟລ໌ SCSS ຕົ້ນສະບັບ
Vanilla JavaScript (theme, sidebar, charts, curriculum accordion)
ຄູ່ມືນຳໃຊ້ HTML ພາສາລາວ (docs/index.html)
README & LICENSE
🔧 ຄວາມຕ້ອງການ
Browser ທັນສະໄໝ (Chrome, Firefox, Safari, Edge)
ຄວາມຮູ້ HTML/CSS ພື້ນຖານ ສຳລັບການປັບແຕ່ງ (customize)
Node.js + npm (ທາງເລືອກ — ຕ້ອງການສະເພາະຖ້າຢາກ compile SCSS ໃໝ່)
ການເຊື່ອມຕໍ່ອິນເຕີເນັດ ສຳລັບ Google Fonts ແລະ CDN assets (Chart.js, Bootstrap Icons)
📋 Credits
Bootstrap 5 — MIT License
Bootstrap Icons — MIT License
Chart.js — MIT License
Noto Sans Lao, Plus Jakarta Sans & Sora (Google Fonts) — Open Font License
ຮູບ demo: Unsplash (ໃຊ້ໄດ້ຟຣີ) + Pravatar.cc (avatar ສາທິດ)
ໝາຍເຫດ: ຮູບ demo ໃຊ້ສຳລັບ preview ເທົ່ານັ້ນ ແລະ ດຶງຈາກ CDN URL ພາຍນອກ. ກ່ອນນຳໄປ deploy ໃຊ້ງານຈິງ ໃຫ້ປ່ຽນເປັນຮູບຂອງທ່ານເອງ.