quanlyhocvien – Nhạc cụ Thành Nam

<style>

#tnm-app{font-family:Arial,Helvetica,sans-serif;color:#172033;background:#f5f7fb;min-height:100vh}

#tnm-app *{box-sizing:border-box}

.tnm-sidebar{position:fixed;left:0;top:0;bottom:0;width:245px;background:#111827;color:#dbe3ef;padding:20px 14px;z-index:9999}

.tnm-brand{font-size:20px;font-weight:800;color:#fff;padding:10px 12px 25px}

.tnm-brand span{color:#38bdf8}

.tnm-nav{padding:11px 12px;margin:5px 0;border-radius:9px;cursor:pointer}

.tnm-nav:hover,.tnm-nav.active{background:#243044;color:#fff}

.tnm-main{margin-left:245px;padding:25px 30px;min-height:100vh}

.tnm-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:25px}

.tnm-top h1{margin:0;font-size:26px}

.tnm-user{background:#fff;padding:10px 15px;border-radius:10px;box-shadow:0 2px 10px #0001}

.tnm-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}

.tnm-card{background:#fff;border-radius:14px;padding:20px;box-shadow:0 3px 15px #0000000b}

.tnm-label{font-size:13px;color:#667085}

.tnm-number{font-size:30px;font-weight:800;margin-top:8px}

.tnm-section{margin-top:24px}

.tnm-section h2{font-size:18px}

.tnm-toolbar{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:14px}

#tnm-app input,#tnm-app select,#tnm-app button{

border:1px solid #d8dee9;border-radius:9px;padding:10px 12px;font-size:14px

}

#tnm-app button{background:#172033;color:#fff;border:0;cursor:pointer}

#tnm-app button:hover{opacity:.9}

.tnm-secondary{background:#fff!important;color:#172033!important;border:1px solid #d8dee9!important}

.tnm-table{background:#fff;border-radius:14px;overflow:auto;box-shadow:0 3px 15px #0000000b}

.tnm-table table{width:100%;border-collapse:collapse;min-width:900px}

.tnm-table th,.tnm-table td{padding:13px 15px;border-bottom:1px solid #edf0f5;text-align:left;font-size:14px}

.tnm-table th{background:#fafbfc;color:#667085;font-size:12px}

.tnm-badge{display:inline-block;padding:5px 9px;border-radius:999px;background:#eef6ff;color:#2463a6;font-size:12px}

.tnm-ok{background:#eaf8ef;color:#18824b}

.tnm-warn{background:#fff5df;color:#9a6500}

.tnm-hidden{display:none!important}

/* LOGIN */

.tnm-login{

position:fixed;inset:0;background:#f5f7fb;display:flex;

align-items:center;justify-content:center;z-index:100000

}

.tnm-login-box{

width:390px;background:#fff;padding:32px;border-radius:18px;

box-shadow:0 10px 40px #0002

}

.tnm-login-box h2{margin-top:0}

.tnm-login-box input{width:100%;margin:7px 0}

.tnm-login-box button{width:100%;margin-top:10px}

/* CALENDAR */

.tnm-calendar{

display:grid;

grid-template-columns:75px repeat(7,1fr);

background:#fff;border-radius:14px;overflow:auto;

box-shadow:0 3px 15px #0001

}

.tnm-calendar>div{

border-right:1px solid #edf0f5;

border-bottom:1px solid #edf0f5;

min-height:65px;padding:8px;font-size:12px

}

.tnm-day{

font-weight:bold;

text-align:center;

background:#fafbfc;

min-height:auto!important

}

.tnm-lesson{

background:#eaf3ff;

border-left:3px solid #3182ce;

border-radius:7px;

margin:2px;

padding:7px!important;

min-height:52px!important

}

/* MODAL */

.tnm-modal{

position:fixed;inset:0;background:#0007;

display:flex;align-items:center;justify-content:center;

z-index:100001

}

.tnm-modal-box{

background:#fff;border-radius:16px;padding:25px;

width:min(650px,94vw);max-height:90vh;overflow:auto

}

.tnm-form{

display:grid;

grid-template-columns:1fr 1fr;

gap:10px

}

.tnm-form input,.tnm-form select{width:100%}

.tnm-actions{

display:flex;

justify-content:flex-end;

gap:8px;

margin-top:18px

}

@media(max-width:900px){

.tnm-sidebar{width:70px}

.tnm-brand{font-size:0}

.tnm-brand span{font-size:18px}

.tnm-nav{font-size:0}

.tnm-nav::first-letter{font-size:18px}

.tnm-main{margin-left:70px;padding:18px}

.tnm-grid{grid-template-columns:repeat(2,1fr)}

}

@media(max-width:600px){

.tnm-grid{grid-template-columns:1fr 1fr}

.tnm-top h1{font-size:20px}

.tnm-user{font-size:12px}

.tnm-form{grid-template-columns:1fr}

}

</style>

<h2>🎵 Thành Nam Music</h2>

Hệ thống quản lý học viên

</p>

<input id=”tnm-login-user”

placeholder=”Tên đăng nhập”

value=”admin”>

<input id=”tnm-login-pass”

type=”password”

placeholder=”Mật khẩu”

value=”123456″>

Đăng nhập

</button>

Demo: admin / 123456

</p>

</div>

THÀNH NAM <span>MUSIC</span>

</div>

🏠 Tổng quan

</div>

👨‍🎓 Học viên

</div>

👨‍🏫 Giáo viên

</div>

🎼 Lớp học

</div>

🗓️ Thời khóa biểu

</div>

✅ Điểm danh

</div>

🏢 Cơ sở

</div>

🔐 Tài khoản & quyền

</div>

↪ Đăng xuất

</div>

Tổng quan

</h1>

👤 Quản lý

<span class=”tnm-badge”>ADMIN</span>

</div>

</div>

</div>

</div>

</div>

<table>

<thead>

<tr>

<th>Trạng thái</th>

</tr>

</thead>

</table>

</div>

</section>

<input

id=”tnm-search”

placeholder=”🔎 Tìm tên / SĐT…”

oninput=”TNM.renderStudents()”>

<select id=”tnm-branch-filter”

onchange=”TNM.renderStudents()”>

</select>

+ Thêm học viên

</button>

</div>

<table>

<thead>

<tr>

<th>Thời lượng</th>

</tr>

</thead>

</table>

</div>

</section>

+ Thêm giáo viên

</button>

</div>

<table>

<thead>

<tr>

<th>Chuyên môn</th>

</tr>

</thead>

<tbody>

<tr>

<td><b>Nguyễn Minh Anh</b></td>

<td>Piano</td>

</tr>

<tr>

<td>Guitar</td>

</tr>

<tr>

<td>Thanh nhạc</td>

</tr>

</tbody>

</table>

</div>

</section>

</select>

<option>Tất cả thời lượng</option>

</select>

+ Tạo lớp

</button>

</div>

<table>

<thead>

<tr>

<th>Thời lượng</th>

<th>Trợ giảng</th>

</tr>

</thead>

<tbody>

<tr>

<td>Piano</td>

<td>Nguyễn Minh Anh</td>

<td>Nguyễn Minh Khôi</td>

</tr>

<tr>

<td>Guitar</td>

</tr>

</tbody>

</table>

</div>

</section>

<button class=”tnm-secondary”>‹ Tuần trước</button>

Tuần này

</button>

Tuần sau ›

</button>

</select>

</div>

08:00<br>

Piano<br>

</div>

08:00<br>

Guitar<br>

</div>

08:00<br>

Piano

</div>

09:00<br>

Thanh nhạc

</div>

09:00<br>

Guitar nhóm

</div>

09:00<br>

Piano nhóm

</div>

10:00<br>

Piano 1:1

</div>

10:00<br>

Guitar 1:1

</div>

10:00<br>

Thanh nhạc

</div>

14:00<br>

Piano 1:1

</div>

14:00<br>

Piano 1:1

</div>

14:00<br>

Guitar nhóm

</div>

<div class=”tnm-lesson”>18:00<br>Piano 1:1</div>

<div class=”tnm-lesson”>18:00<br>Guitar nhóm</div>

<div class=”tnm-lesson”>18:00<br>Piano 1:1</div>

<div class=”tnm-lesson”>18:00<br>Thanh nhạc</div>

<div class=”tnm-lesson”>18:00<br>Guitar nhóm</div>

<div class=”tnm-lesson”>18:00<br>Piano nhóm</div>

</div>

</section>

</select>

Điểm danh nhanh

</button>

</div>

<table>

<thead>

<tr>

<th>Trạng thái</th>

</tr>

</thead>

</table>

</div>

</section>

<p>7 phòng học</p>

</div>

<p>5 phòng học</p>

</div>

<p>4 phòng học</p>

</div>

<p>3 phòng học</p>

</div>

<p>Đang thiết lập</p>

</div>

</section>

<h2>Phân quyền hệ thống</h2>

<p>

<b>Super Admin</b><br>

Toàn quyền hệ thống.

</p>

<p>

Quản lý học viên, giáo viên, lịch và điểm danh tại cơ sở được phân quyền.

</p>

<p>

Xem lịch, lớp phụ trách, điểm danh và nhận xét học viên.

</p>

<p>

Quản lý học viên, lịch và điểm danh.

</p>

<p>

<b>Trợ giảng</b><br>

Xem lớp được phân công và hỗ trợ điểm danh.

</p>

</div>

</section>

</div>

</select>

</select>

</select>

</div>

<button

class=”tnm-secondary”

onclick=”TNM.closeStudent()”>

Hủy

</button>

Lưu học viên

</button>

</div>

(function(){

let students=[

{

name:”Nguyễn Minh Khôi”,

phone:”0912 345 678″,

subject:”Piano”,

type:”Cá nhân 1:1″,

teacher:”Nguyễn Minh Anh”,

tphone:”0901 222 333″,

branch:”Cơ sở 1″,

duration:”60 phút”

{

name:”Trần Gia Hân”,

phone:”0987 123 456″,

subject:”Guitar”,

type:”Tập thể 3–5″,

teacher:”Trần Quốc Huy”,

tphone:”0912 444 555″,

branch:”Cơ sở 2″,

duration:”45 phút”

{

name:”Phạm Hoàng Nam”,

phone:”0909 555 222″,

subject:”Thanh nhạc”,

type:”Cá nhân 1:1″,

teacher:”Lê Thu Hà”,

tphone:”0988 666 777″,

branch:”Cơ sở 1″,

duration:”30 phút”

}

];

const lessons=[

[“08:00″,”Nguyễn Minh Khôi”,”Nguyễn Minh Anh”,”Cơ sở 1″,”60 phút”,”Có mặt”],

[“09:00″,”Trần Gia Hân + 3 HV”,”Trần Quốc Huy”,”Cơ sở 2″,”45 phút”,”Đã điểm danh”],

[“10:00″,”Phạm Hoàng Nam”,”Lê Thu Hà”,”Cơ sở 1″,”30 phút”,”Chờ điểm danh”],

[“14:00″,”Nguyễn Minh Khôi”,”Nguyễn Minh Anh”,”Cơ sở 1″,”60 phút”,”Có mặt”]

];

window.TNM={

document.getElementById(“tnm-login”).classList.add(“tnm-hidden”);

document.getElementById(“tnm-system”).classList.remove(“tnm-hidden”);

this.renderStudents();

this.renderToday();

this.renderAttendance();

logout:function(){

document.getElementById(“tnm-system”).classList.add(“tnm-hidden”);

document.getElementById(“tnm-login”).classList.remove(“tnm-hidden”);

show:function(page,nav){

document.querySelectorAll(“#tnm-system section”)

.forEach(function(x){

x.classList.add(“tnm-hidden”);

});

document.getElementById(“tnm-“+page)

.classList.remove(“tnm-hidden”);

document.querySelectorAll(“.tnm-nav”)

.forEach(function(x){

x.classList.remove(“active”);

});

if(nav) nav.classList.add(“active”);

let titles={

dashboard:”Tổng quan”,

students:”Quản lý học viên”,

teachers:”Quản lý giáo viên”,

classes:”Quản lý lớp học”,

schedule:”Thời khóa biểu”,

attendance:”Điểm danh”,

branches:”Quản lý cơ sở”,

users:”Tài khoản & phân quyền”

};

document.getElementById(“tnm-title”).textContent=titles[page];

renderStudents:function(){

let q=(document.getElementById(“tnm-search”).value||””).toLowerCase();

let branch=document.getElementById(“tnm-branch-filter”).value;

let rows=students.filter(function(s){

return (!q ||

(s.name+s.phone+s.subject).toLowerCase().includes(q))

(!branch || s.branch===branch);

});

document.getElementById(“tnm-student-rows”).innerHTML=

rows.map(function(s){

return `

<tr>

<td>${s.phone}</td>

<td>${s.subject}</td>

<td>${s.teacher}</td>

<td>${s.tphone}</td>

<td>${s.branch}</td>

<td>

${s.duration}

</span>

</td>

</tr>

}).join(“”);

document.getElementById(“tnm-student-count”)

.textContent=125+students.length;

renderToday:function(){

document.getElementById(“tnm-today”).innerHTML=

lessons.map(function(x){

return `

<tr>

<td>

<span class=”tnm-badge ${

x[5].includes(“Chờ”)?”tnm-warn”:”tnm-ok”

}”>

${x[5]}

</span>

</td>

</tr>

}).join(“”);

renderAttendance:function(){

document.getElementById(“tnm-attendance”).innerHTML=

lessons.map(function(x,i){

return `

<tr>

<td>

</select>

</td>

<td>

</td>

</tr>

}).join(“”);

openStudent:function(){

document.getElementById(“tnm-modal”)

.classList.remove(“tnm-hidden”);

closeStudent:function(){

document.getElementById(“tnm-modal”)

.classList.add(“tnm-hidden”);

addStudent:function(){

let name=document.getElementById(“tnm-name”).value;

let phone=document.getElementById(“tnm-phone”).value;

if(!name || !phone){

alert(“Vui lòng nhập họ tên và SĐT.”);

return;

}

students.push({

name:name,

phone:phone,

subject:document.getElementById(“tnm-subject”).value,

type:document.getElementById(“tnm-type”).value,

teacher:document.getElementById(“tnm-teacher”).value || “Chưa phân công”,

tphone:document.getElementById(“tnm-teacher-phone”).value || “—”,

branch:document.getElementById(“tnm-new-branch”).value,

duration:document.getElementById(“tnm-duration”).value

});

this.closeStudent();

this.renderStudents();

alert(“Đã thêm học viên.”);

quickAttendance:function(){

alert(

“Đã mở chế độ điểm danh nhanh.\n\n”+

“Có mặt\n”+

“Vắng\n”+

“Đi muộn\n”+

“Nghỉ có phép\n”+

“Học bù”

);

}

};

document.querySelectorAll(“#tnm-system .tnm-nav[data-page]”)

.forEach(function(nav){

nav.addEventListener(“click”,function(){

TNM.show(this.dataset.page,this);

});

document.getElementById(“tnm-date”).value=

new Date().toISOString().slice(0,10);

})();

</script>

</div>

THÀNH NAM MUSIC

HƯỚNG DẪN CHUNG

HỖ TRỢ KHÁCH HÀNG

Địa chỉ: A14 - TT5 Khu Đô Thị Văn Quán, Hà Đông, Hà Nội

Văn phòng: Số 6, Ngõ 4 Hà Trì 5, Hà Cầu, Hà Đông, Hà Nội