<!DOCTYPE html>
<html>
<head>
<title>Complete School Management System</title>
<script src="https://cdn.jsdelivr.net/npm/xlsx@0.18.5/dist/xlsx.full.min.js"></script>
<style>
body{font-family:Segoe UI;background:linear-gradient(135deg,#1e3c72,#2a5298);margin:0;padding:20px}
.container{background:#fff;border-radius:12px;padding:20px;max-width:1400px;margin:auto}
h2{color:#2a5298}
.section{background:#f4f6f9;padding:15px;margin:15px 0;border-radius:8px}
input,select,button{padding:7px;margin:5px;border-radius:6px;border:1px solid #ccc}
button{background:#2a5298;color:#fff;border:none;cursor:pointer}
button:hover{background:#1e3c72}
table{width:100%;border-collapse:collapse;margin-top:10px}
th,td{border:1px solid #ccc;padding:6px;text-align:center}
th{background:#2a5298;color:#fff}
.pass{color:green;font-weight:bold}
.fail{color:red;font-weight:bold}
.hidden{display:none}
@media print {
body * { visibility: hidden; }
.print-area, .print-area * { visibility: visible; }
.print-area { position:absolute; left:0; top:0; width:100%; }
}
</style>
</head>
<body>
<div class="container">
<h2>Complete School Management System</h2>
<div id="loginSection" class="section">
<h3>Login</h3>
<select id="role">
<option value="admin">Admin</option>
<option value="teacher">Teacher</option>
</select>
<input id="loginUser" placeholder="Username">
<input id="loginPass" type="password" placeholder="Password">
<button onclick="login()">Login</button>
</div>
<div id="mainPanel" class="hidden">
<button onclick="logout()" style="float:right;background:red;">Logout</button>
<div class="section">
<h3>Pass Marks Setting</h3>
Pass Marks: <input type="number" id="passMarksInput" value="30" onchange="updatePassMarks()">
</div>
<div class="section">
<h3>Student Search</h3>
<input type="text" id="searchStudent" placeholder="Type student name..." onkeyup="searchStudent()">
<div id="searchResults"></div>
</div>
<div class="section">
<h3>Register Teacher (Admin Only)</h3>
<input id="tUser" placeholder="Teacher Username">
<input id="tPass" type="password" placeholder="Teacher Password">
<button onclick="registerTeacher()">Register</button>
</div>
<div class="section">
<h3>Exam Details</h3>
<input id="examName" placeholder="Exam Name">
<input id="examDate" type="date">
</div>
<div class="section">
<h3>Add Student</h3>
<input id="studentName" placeholder="Student Name">
<select id="classSelect">
<option>Nursery</option><option>LKG</option><option>UKG</option>
<option>1</option><option>2</option><option>3</option><option>4</option>
<option>5</option><option>6</option><option>7</option><option>8</option>
<option>9</option><option>10</option>
</select>
<select id="sectionSelect">
<option>A</option>
<option>B</option>
<option>C</option>
<option>D</option>
</select>
<input id="roll" type="number" placeholder="Roll No">
<input id="parent" placeholder="Parent Name">
<input id="phone" placeholder="Parent Phone">
<button onclick="addStudent()">Add Student</button>
<button onclick="editStudent()">Edit Selected Student</button>
</div>
<div class="section">
<h3>Subjects</h3>
<input id="newSubject" placeholder="Add New Subject">
<button onclick="addSubject()">Add Subject</button>
<div id="subjectList"></div>
</div>
<div class="section">
<h3>Enter Subject-wise Marks</h3>
<select id="studentSelect"></select>
<div id="marksInputs"></div>
<button onclick="saveMarks()">Save Marks</button>
</div>
<div class="section">
<h3>Generate Individual Marks Memo</h3>
<select id="memoStudent"></select>
<button onclick="generateMemo()">Generate</button>
<button onclick="printSection('memo')">Print Memo</button>
<div id="memo"></div>
</div>
<div class="section">
<h3>Topper List (Class & Section Wise)</h3>
<select id="topClass"></select>
<select id="topSection">
<option>A</option>
<option>B</option>
<option>C</option>
<option>D</option>
<option>ALL</option>
</select>
<button onclick="showTopper()">Show</button>
<button onclick="printSection('topper')">Print Topper</button>
<div id="topper"></div>
</div>
<div class="section">
<h3>Full Class & Section Result</h3>
<select id="listClass"></select>
<select id="listSection">
<option>A</option>
<option>B</option>
<option>C</option>
<option>D</option>
<option>ALL</option>
</select>
<button onclick="showClassResult()">Generate</button>
<button onclick="printSection('classResult')">Print Class Result</button>
<button onclick="shareClassWhatsApp()">Share WhatsApp</button>
<button onclick="downloadExcel()">Download Excel</button>
<div id="classResult"></div>
</div>
</div>
</div>
<script>
let students=[];
let subjects=["Telugu","English","Hindi","Maths","Science","Social"];
let marksData={};
let teachers={};
let currentRole="";
let passMarks=30;
function updatePassMarks(){
passMarks=parseInt(document.getElementById("passMarksInput").value)||30;
}
function logout(){location.reload();}
function printSection(id){
let element=document.getElementById(id);
element.classList.add("print-area");
window.print();
element.classList.remove("print-area");
}
function searchStudent(){
let keyword=document.getElementById("searchStudent").value.toLowerCase();
let html="<table><tr><th>Name</th><th>Class</th><th>Roll</th></tr>";
students.forEach(s=>{
if(s.name.toLowerCase().includes(keyword)){
html+=`<tr>
<td>${s.name}</td>
<td>${s.cls}-${s.sec}</td>
<td>${s.roll}</td>
</tr>`;
}
});
html+="</table>";
document.getElementById("searchResults").innerHTML=html;
}
function downloadExcel(){
let table=document.querySelector("#classResult table");
if(!table){alert("Generate result first");return;}
let wb=XLSX.utils.table_to_book(table,{sheet:"Results"});
XLSX.writeFile(wb,"Class_Result.xlsx");
}
function login(){
let roleValue=document.getElementById("role").value;
let user=document.getElementById("loginUser").value;
let pass=document.getElementById("loginPass").value;
if(roleValue==="admin" && user==="admin" && pass==="admin123"){
currentRole="admin";
document.getElementById("mainPanel").classList.remove("hidden");
initClasses();
}
else if(roleValue==="teacher" && teachers[user]===pass){
currentRole="teacher";
document.getElementById("mainPanel").classList.remove("hidden");
initClasses();
}
else alert("Invalid Login");
}
function registerTeacher(){
if(currentRole!=="admin"){alert("Only Admin Can Register");return;}
let user=document.getElementById("tUser").value;
let pass=document.getElementById("tPass").value;
if(teachers[user]){alert("Username Exists");return;}
teachers[user]=pass;
alert("Teacher Registered");
}
function initClasses(){
let classes=["Nursery","LKG","UKG","1","2","3","4","5","6","7","8","9","10"];
let topClass=document.getElementById("topClass");
let listClass=document.getElementById("listClass");
classes.forEach(c=>{
topClass.innerHTML+=`<option>${c}</option>`;
listClass.innerHTML+=`<option>${c}</option>`;
});
updateSubjectList();
}
function addStudent(){
let name=document.getElementById("studentName").value;
let cls=document.getElementById("classSelect").value;
let sec=document.getElementById("sectionSelect").value;
students.push({
name:name,
cls:cls,
sec:sec,
roll:document.getElementById("roll").value,
parent:document.getElementById("parent").value,
phone:document.getElementById("phone").value
});
updateStudents();
alert("Student Added");
}
function updateStudents(){
let studentSelect=document.getElementById("studentSelect");
let memoStudent=document.getElementById("memoStudent");
studentSelect.innerHTML="";
memoStudent.innerHTML="";
students.forEach((s,i)=>{
let opt=`<option value="${i}">${s.name} (${s.cls}-${s.sec})</option>`;
studentSelect.innerHTML+=opt;
memoStudent.innerHTML+=opt;
});
generateMarksInputs();
}
function addSubject(){
let newSub=document.getElementById("newSubject").value.trim();
if(newSub==="")return;
subjects.push(newSub);
updateSubjectList();
generateMarksInputs();
}
function updateSubjectList(){
document.getElementById("subjectList").innerHTML=subjects.join(", ");
}
function generateMarksInputs(){
let html="";
subjects.forEach(sub=>{
html+=`${sub}: <input type="number" id="m_${sub}" max="100"><br>`;
});
document.getElementById("marksInputs").innerHTML=html;
}
function saveMarks(){
let i=document.getElementById("studentSelect").value;
marksData[i]={};
for(let sub of subjects){
let value=parseInt(document.getElementById("m_"+sub).value)||0;
if(value>100){
alert("Error: Marks cannot be greater than 100");
return;
}
marksData[i][sub]=value;
}
alert("Marks Saved");
}
function getGrade(p){
if(p>=90) return "A+";
if(p>=80) return "A";
if(p>=70) return "B+";
if(p>=60) return "B";
if(p>=50) return "C";
if(p>=40) return "D";
return "F";
}
function getRank(studentIndex){
let arr=[];
students.forEach((s,i)=>{
let total=0;
if(marksData[i]){
subjects.forEach(sub=>{
total+=marksData[i][sub]||0;
});
}
arr.push({index:i,total:total});
});
arr.sort((a,b)=>b.total-a.total);
for(let r=0;r<arr.length;r++){
if(arr[r].index==studentIndex) return r+1;
}
return "-";
}
function generateMemo(){
let i=document.getElementById("memoStudent").value;
let student=students[i];
let marks=marksData[i];
if(!marks){alert("No marks entered");return;}
let total=0;
let html=`<h3>Marks Memo</h3>
<b>Name:</b> ${student.name}<br>
<b>Class:</b> ${student.cls}-${student.sec}<br>
<b>Roll:</b> ${student.roll}<br><br>
<table>
<tr><th>Subject</th><th>Marks</th><th>Result</th></tr>`;
subjects.forEach(sub=>{
let m=marks[sub]||0;
total+=m;
let res=m>=passMarks?"Pass":"Fail";
html+=`<tr>
<td>${sub}</td>
<td>${m}</td>
<td class="${res=='Pass'?'pass':'fail'}">${res}</td>
</tr>`;
});
let maxTotal=subjects.length*100;
let percentage=((total/maxTotal)*100).toFixed(2);
let grade=getGrade(percentage);
let rank=getRank(parseInt(i));
html+=`</table>
<br><b>Total:</b> ${total} / ${maxTotal}
<br><b>Percentage:</b> ${percentage}%
<br><b>Grade:</b> ${grade}
<br><b>Rank:</b> ${rank}`;
document.getElementById("memo").innerHTML=html;
}
function showTopper(){
let cls=document.getElementById("topClass").value;
let sec=document.getElementById("topSection").value;
let arr=[];
students.forEach((s,i)=>{
if(s.cls==cls && (sec=="ALL" || s.sec==sec)){
let total=0;
if(marksData[i]){
subjects.forEach(sub=>{
total+=marksData[i][sub]||0;
});
}
let maxTotal=subjects.length*100;
let percentage=((total/maxTotal)*100).toFixed(2);
arr.push({name:s.name,sec:s.sec,total:total,percentage:percentage});
}
});
arr.sort((a,b)=>b.total-a.total);
let html="<table><tr><th>Rank</th><th>Name</th><th>Section</th><th>Total</th><th>Percentage</th></tr>";
arr.forEach((s,i)=>{
html+=`<tr>
<td>${i+1}</td>
<td>${s.name}</td>
<td>${s.sec}</td>
<td>${s.total}</td>
<td>${s.percentage}%</td>
</tr>`;
});
html+="</table>";
document.getElementById("topper").innerHTML=html;
}
function showClassResult(){
let cls=document.getElementById("listClass").value;
let sec=document.getElementById("listSection").value;
let html="<table><tr><th>Name</th>";
subjects.forEach(s=>html+=`<th>${s}</th>`);
html+="<th>Total</th><th>Percentage</th></tr>";
students.forEach((s,i)=>{
if(s.cls==cls && (sec=="ALL"||s.sec==sec)){
let total=0;
html+=`<tr><td>${s.name}</td>`;
subjects.forEach(sub=>{
let m=marksData[i]?marksData[i][sub]||0:0;
total+=m;
html+=`<td>${m}</td>`;
});
let maxTotal=subjects.length*100;
let percentage=((total/maxTotal)*100).toFixed(2);
html+=`<td>${total}</td><td>${percentage}%</td></tr>`;
}
});
html+="</table>";
document.getElementById("classResult").innerHTML=html;
}
function shareClassWhatsApp(){
let table=document.querySelector("#classResult table");
if(!table){alert("Generate result first");return;}
let text="Class Result:%0A";
table.querySelectorAll("tr").forEach(row=>{
let rowText=[];
row.querySelectorAll("th,td").forEach(c=>{
rowText.push(c.innerText);
});
text+=rowText.join(" - ")+"%0A";
});
window.open("https://wa.me/?text="+text);
}
function editStudent(){
let i=document.getElementById("studentSelect").value;
students[i].name=document.getElementById("studentName").value;
students[i].cls=document.getElementById("classSelect").value;
students[i].sec=document.getElementById("sectionSelect").value;
students[i].roll=document.getElementById("roll").value;
students[i].parent=document.getElementById("parent").value;
students[i].phone=document.getElementById("phone").value;
updateStudents();
alert("Student Updated");
}
</script>
</body>
</html>