Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Attendance Tracking System</title> | |
| <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"> | |
| <link rel="stylesheet" href="style.css"> | |
| </head> | |
| <body> | |
| <div class="container mt-5"> | |
| <h1 class="text-center">Attendance Tracking System</h1> | |
| <div id="studentSection"> | |
| <h2>Student Login</h2> | |
| <form id="studentForm" class="mb-4"> | |
| <div class="form-group"> | |
| <label for="studentId">Student ID</label> | |
| <input type="text" class="form-control" id="studentId" required> | |
| </div> | |
| <div class="form-group"> | |
| <label for="studentName">Student Name</label> | |
| <input type="text" class="form-control" id="studentName" required> | |
| </div> | |
| <button type="submit" class="btn btn-primary">Submit Attendance</button> | |
| </form> | |
| </div> | |
| <div id="teacherSection" class="mt-5"> | |
| <h2>Teacher/Admin Login</h2> | |
| <form id="teacherForm" class="mb-4"> | |
| <div class="form-group"> | |
| <label for="teacherUsername">Username</label> | |
| <input type="text" class="form-control" id="teacherUsername" required> | |
| </div> | |
| <div class="form-group"> | |
| <label for="teacherPassword">Password</label> | |
| <input type="password" class="form-control" id="teacherPassword" required> | |
| </div> | |
| <button type="submit" class="btn btn-primary">View Attendance Report</button> | |
| </form> | |
| </div> | |
| <div id="attendanceReport" class="mt-5" style="display: none;"> | |
| <h2>Attendance Report</h2> | |
| <table class="table table-bordered"> | |
| <thead> | |
| <tr> | |
| <th>#</th> | |
| <th>Student ID</th> | |
| <th>Student Name</th> | |
| <th>Date</th> | |
| <th>Time</th> | |
| </tr> | |
| </thead> | |
| <tbody id="attendanceTableBody"> | |
| <!-- Attendance records will be added here --> | |
| </tbody> | |
| </table> | |
| </div> | |
| </div> | |
| <script src="script.js"></script> | |
| <script> | |
| document.getElementById('studentForm').addEventListener('submit', function(event) { | |
| event.preventDefault(); | |
| const studentId = document.getElementById('studentId').value; | |
| const studentName = document.getElementById('studentName').value; | |
| const date = new Date().toLocaleDateString(); | |
| const time = new Date().toLocaleTimeString(); | |
| addAttendanceRecord(studentId, studentName, date, time); | |
| document.getElementById('studentId').value = ''; | |
| document.getElementById('studentName').value = ''; | |
| }); | |
| document.getElementById('teacherForm').addEventListener('submit', function(event) { | |
| event.preventDefault(); | |
| const username = document.getElementById('teacherUsername').value; | |
| const password = document.getElementById('teacherPassword').value; | |
| if (authenticateTeacher(username, password)) { | |
| document.getElementById('attendanceReport').style.display = 'block'; | |
| } else { | |
| alert('Invalid username or password.'); | |
| } | |
| }); | |
| function addAttendanceRecord(studentId, studentName, date, time) { | |
| const tableBody = document.getElementById('attendanceTableBody'); | |
| const rowCount = tableBody.rows.length; | |
| const row = tableBody.insertRow(rowCount); | |
| const cell1 = row.insertCell(0); | |
| const cell2 = row.insertCell(1); | |
| const cell3 = row.insertCell(2); | |
| const cell4 = row.insertCell(3); | |
| const cell5 = row.insertCell(4); | |
| cell1.innerHTML = rowCount + 1; | |
| cell2.innerHTML = studentId; | |
| cell3.innerHTML = studentName; | |
| cell4.innerHTML = date; | |
| cell5.innerHTML = time; | |
| saveAttendanceData(); | |
| } | |
| function authenticateTeacher(username, password) { | |
| // Simple authentication logic (replace with actual authentication logic) | |
| return username === 'admin' && password === 'password'; | |
| } | |
| function saveAttendanceData() { | |
| const tableBody = document.getElementById('attendanceTableBody'); | |
| const rows = Array.from(tableBody.rows); | |
| const attendanceData = rows.map(row => { | |
| return { | |
| id: row.cells[1].innerText, | |
| name: row.cells[2].innerText, | |
| date: row.cells[3].innerText, | |
| time: row.cells[4].innerText | |
| }; | |
| }); | |
| localStorage.setItem('attendanceData', JSON.stringify(attendanceData)); | |
| } | |
| function loadAttendanceData() { | |
| const attendanceData = JSON.parse(localStorage.getItem('attendanceData')) || []; | |
| const tableBody = document.getElementById('attendanceTableBody'); | |
| attendanceData.forEach((record, index) => { | |
| const row = tableBody.insertRow(index); | |
| const cell1 = row.insertCell(0); | |
| const cell2 = row.insertCell(1); | |
| const cell3 = row.insertCell(2); | |
| const cell4 = row.insertCell(3); | |
| const cell5 = row.insertCell(4); | |
| cell1.innerHTML = index + 1; | |
| cell2.innerHTML = record.id; | |
| cell3.innerHTML = record.name; | |
| cell4.innerHTML = record.date; | |
| cell5.innerHTML = record.time; | |
| }); | |
| } | |
| // Load attendance data on page load | |
| window.onload = loadAttendanceData; | |
| </script> | |
| </body> | |
| </html> | |