<!DOCTYPE html>
<html lang="gu">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JG UNIVERSITY - Academic Statement</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.18.5/xlsx.full.min.js"></script>
<style>
:root {
--university-red: #800000;
--gold: #b8860b;
--bg: #f4f7f6;
}
body { font-family: 'Segoe UI', Arial, sans-serif; background-color: var(--bg); padding: 20px; }
.container { max-width: 600px; margin: auto; background: white; padding: 20px; border-radius: 8px; box-shadow: 0 0 15px rgba(0,0,0,0.1); }
/* Header Styling */
.uni-header { text-align: center; border-bottom: 2px solid var(--university-red); margin-bottom: 20px; padding-bottom: 10px; }
.uni-name { font-size: 32px; font-weight: bold; color: var(--university-red); letter-spacing: 2px; margin: 0; }
.statement-title { font-size: 14px; color: var(--gold); text-transform: uppercase; font-weight: bold; margin-top: 5px; }
/* Admin Controls */
.admin-box { background: #eee; padding: 15px; border-radius: 5px; margin-bottom: 20px; text-align: center; }
.search-box { margin-bottom: 20px; text-align: center; }
input { padding: 10px; border: 1px solid #ccc; border-radius: 4px; width: 70%; }
.btn { padding: 10px 20px; border: none; border-radius: 4px; cursor: pointer; font-weight: bold; }
.btn-blue { background: #3498db; color: white; }
.btn-red { background: var(--university-red); color: white; }
/* Marksheet Styling */
.marksheet { border: 1px solid #ddd; padding: 15px; animation: fadeIn 0.5s ease; }
.student-info { display: grid; grid-template-columns: 1fr 1fr; margin-bottom: 20px; font-size: 14px; line-height: 1.6; }
table { width: 100%; border-collapse: collapse; margin-top: 10px; }
th { background: var(--university-red); color: white; padding: 10px; text-align: left; }
td { padding: 10px; border-bottom: 1px solid #eee; font-size: 14px; }
.subject-col { width: 70%; }
.marks-col { width: 30%; text-align: center; font-weight: bold; }
.total-row { border: 2px solid var(--university-red); margin-top: 15px; padding: 10px; display: flex; justify-content: space-between; align-items: center; }
.total-label { color: var(--university-red); font-weight: bold; font-size: 18px; }
.total-value { font-size: 20px; font-weight: bold; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@media print { .admin-box, .search-box { display: none; } }
</style>
</head>
<body>
<div class="container">
<div class="uni-header">
<h1 class="uni-name">JG UNIVERSITY</h1>
<div class="statement-title">Academic Statement of Marks</div>
</div>
<div class="admin-box" id="adminArea">
<input type="password" id="pass" placeholder="Password (123)">
<button class="btn btn-blue" onclick="handleUpload()">Upload Excel</button>
<input type="file" id="fileInp" style="display:none" accept=".xlsx">
</div>
<div class="search-box" id="searchArea" style="display:none">
<input type="text" id="enrollSearch" placeholder="Enter Enrollment No (e.g. 2500751001)">
<button class="btn btn-blue" onclick="findStudent()">Search</button>
<button class="btn" onclick="clearData()" style="font-size:10px">Reset</button>
</div>
<div id="result"></div>
</div>
<script>
let studentDB = [];
const subjects = [
"Economics for Managers",
"Strategic Communication",
"Human Resource Management",
"Management Information Systems",
"Business Statistics",
"Management Accounting",
"Managerial Computing",
"Business Environment & Sustainability"
];
// Load from LocalStorage
if(localStorage.getItem('jg_db')) {
studentDB = JSON.parse(localStorage.getItem('jg_db'));
document.getElementById('adminArea').style.display = 'none';
document.getElementById('searchArea').style.display = 'block';
}
function handleUpload() {
if(document.getElementById('pass').value !== "123") return alert("Wrong Password");
document.getElementById('fileInp').click();
}
document.getElementById('fileInp').addEventListener('change', function(e) {
const reader = new FileReader();
reader.onload = function(e) {
const data = new Uint8Array(e.target.result);
const workbook = XLSX.read(data, {type: 'array'});
const sheet = workbook.Sheets[workbook.SheetNames[0]];
// header: 1 means it will take rows as arrays to avoid __EMPTY keys
studentDB = XLSX.utils.sheet_to_json(sheet, {header: 1});
localStorage.setItem('jg_db', JSON.stringify(studentDB));
location.reload();
};
reader.readAsArrayBuffer(e.target.files[0]);
});
function findStudent() {
const query = document.getElementById('enrollSearch').value.trim();
// Index 1 is usually Enrollment No in your Excel (based on screenshot)
const record = studentDB.find(row => String(row[1]) === query);
if(record) {
renderMarksheet(record);
} else {
alert("Record Not Found!");
}
}
function renderMarksheet(data) {
// Mapping indices from your screenshot:
// data[1] = Enrollment, data[2] = Name, data[4] onwards = Marks
const name = data[2] || "N/A";
const enroll = data[1] || "N/A";
let marksHtml = '';
let grandTotal = 0;
// Starting from index 4 for Economics as per your data structure
subjects.forEach((sub, index) => {
let mark = parseInt(data[index + 4]) || 0;
grandTotal += mark;
marksHtml += `
<tr>
<td class="subject-col">${sub}</td>
<td class="marks-col">${mark}</td>
</tr>
`;
});
document.getElementById('result').innerHTML = `
<div class="marksheet">
<div class="student-info">
<div>
<strong>Name:</strong> ${name}<br>
<strong>Course:</strong> MBA/Management
</div>
<div style="text-align:right">
<strong>Enrollment No:</strong> ${enroll}<br>
<strong>Date:</strong> ${new Date().toLocaleDateString('en-GB', {month: 'short', year: 'numeric'})}
</div>
</div>
<table>
<thead>
<tr>
<th class="subject-col">Subject Name</th>
<th class="marks-col">Obtained Marks</th>
</tr>
</thead>
<tbody>
${marksHtml}
</tbody>
</table>
<div class="total-row">
<div class="total-label">GRAND TOTAL (total):</div>
<div class="total-value">${grandTotal}</div>
</div>
<button class="btn btn-red" onclick="window.print()" style="margin-top:20px; width:100%">Download / Print PDF</button>
</div>
`;
}
function clearData() {
if(confirm("Delete Database?")) {
localStorage.clear();
location.reload();
}
}
</script>
</body>
</html>
No comments:
Post a Comment