<!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>

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top