I'll enhance your library attendance website with more features and a better UI while keeping your existing structure. Here's the improved version: Dulangan NHS Library Attendance

Dulangan NHS Library Attendance

Student Log In

Total Students Today

Currently In Library

Attendance Records

Student ID	Student Name	Grade & Section	Time In	Time Out	Status	Actions

:root { --primary-color: #3498db; --secondary-color: #2ecc71; --danger-color: #e74c3c; --dark-color: #2c3e50; --light-color: #ecf0f1; --shadow: 0 4px 6px rgba(0, 0, 0, 0.1); } body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; margin: 0; padding: 0; background-color: #f5f7fa; color: #333; line-height: 1.6; } .container { width: 95%; max-width: 1200px; margin: 20px auto; padding: 20px; background-color: white; border-radius: 10px; box-shadow: var(--shadow); } header { text-align: center; margin-bottom: 30px; padding-bottom: 20px; border-bottom: 1px solid #eee; } header h1 { color: var(--dark-color); margin: 0; font-size: 2.2rem; } header h1 i { margin-right: 10px; color: var(--primary-color); } .current-time { font-size: 1.1rem; color: #7f8c8d; margin-top: 10px; } .attendance-form { background-color: #f8f9fa; padding: 25px; border-radius: 8px; margin-bottom: 30px; box-shadow: var(--shadow); } .attendance-form h2 { color: var(--dark-color); margin-top: 0; margin-bottom: 20px; font-size: 1.5rem; } .form-row { display: flex; gap: 20px; margin-bottom: 15px; } .form-group { flex: 1; margin-bottom: 15px; } .form-group label { display: block; margin-bottom: 8px; font-weight: 600; color: #555; } .form-group label i { margin-right: 8px; color: var(--primary-color); } .form-group input { width: 100%; padding: 12px; border: 1px solid #ddd; border-radius: 6px; font-size: 1rem; transition: border 0.3s; } .form-group input:focus { border-color: var(--primary-color); outline: none; box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.2); } button[type="submit"] { background-color: var(--secondary-color); color: white; padding: 12px 25px; border: none; border-radius: 6px; cursor: pointer; font-size: 1rem; font-weight: 600; transition: background-color 0.3s; width: 100%; margin-top: 10px; } button[type="submit"]:hover { background-color: #27ae60; } button[type="submit"] i { margin-right: 8px; } .dashboard { display: flex; gap: 20px; margin-bottom: 30px; } .stats-card { flex: 1; background-color: white; padding: 20px; border-radius: 8px; box-shadow: var(--shadow); text-align: center; } .stats-card h3 { margin-top: 0; color: #555; font-size: 1.1rem; } .stats-card h3 i { margin-right: 8px; color: var(--primary-color); } .stat-value { font-size: 2.5rem; font-weight: bold; color: var(--dark-color); margin: 10px 0; } .attendance-display { background-color: white; padding: 25px; border-radius: 8px; box-shadow: var(--shadow); } .display-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; } .display-header h2 { margin: 0; color: var(--dark-color); font-size: 1.5rem; } .display-header h2 i { margin-right: 10px; color: var(--primary-color); } .search-box { position: relative; width: 300px; } .search-box input { width: 100%; padding: 10px 15px 10px 40px; border: 1px solid #ddd; border-radius: 6px; font-size: 1rem; } .search-box i { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); color: #7f8c8d; } .table-container { overflow-x: auto; } table { width: 100%; border-collapse: collapse; margin-top: 20px; } th, td { padding: 12px 15px; text-align: left; border-bottom: 1px solid #ddd; } th { background-color: #f8f9fa; font-weight: 600; color: #555; } tr:hover { background-color: #f5f5f5; } .status-present { color: var(--secondary-color); font-weight: 600; } .status-absent { color: var(--danger-color); font-weight: 600; } .action-btn { padding: 6px 12px; border: none; border-radius: 4px; cursor: pointer; font-size: 0.9rem; margin-right: 5px; transition: opacity 0.3s; } .btn-logout { background-color: var(--danger-color); color: white; } .btn-logout:hover { opacity: 0.8; } @media (max-width: 768px) { .form-row { flex-direction: column; gap: 0; } .dashboard { flex-direction: column; } .search-box { width: 100%; margin-top: 15px; } .display-header { flex-direction: column; align-items: flex-start; } } document.addEventListener('DOMContentLoaded', function() { // DOM Elements const attendanceForm = document.getElementById('attendanceForm'); const studentIdInput = document.getElementById('studentId'); const studentNameInput = document.getElementById('studentName'); const gradeSectionInput = document.getElementById('gradeSection'); const attendanceTable = document.getElementById('attendanceTable').getElementsByTagName('tbody')[0]; const searchInput = document.getElementById('searchInput'); const totalStudentsSpan = document.getElementById('totalStudents'); const currentStudentsSpan = document.getElementById('currentStudents'); const currentTimeSpan = document.getElementById('currentTime'); // Attendance data let attendanceRecords = JSON.parse(localStorage.getItem('attendanceRecords')) || []; // Initialize the app function init() { updateCurrentTime(); setInterval(updateCurrentTime, 1000); renderAttendanceTable(); updateDashboard(); } // Update current time display function updateCurrentTime() { const now = new Date(); currentTimeSpan.textContent = now.toLocaleString('en-US', { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric', hour: '2-digit', minute: '2-digit', second: '2-digit' }); } // Form submission handler attendanceForm.addEventListener('submit', function(e) { e.preventDefault(); const studentId = studentIdInput.value.trim(); const studentName = studentNameInput.value.trim(); const gradeSection = gradeSectionInput.value.trim(); if (!studentId || !studentName || !gradeSection) { alert('Please fill in all fields'); return; } // Check if student is already logged in const existingRecordIndex = attendanceRecords.findIndex(record => record.studentId === studentId && !record.timeOut ); if (existingRecordIndex !== -1) { // Student is already logged in - log them out attendanceRecords[existingRecordIndex].timeOut = new Date().toLocaleTimeString(); attendanceRecords[existingRecordIndex].status = 'Out'; } else { // New log in const newRecord = { studentId, studentName, gradeSection, timeIn: new Date().toLocaleTimeString(), timeOut: '', status: 'Present', date: new Date().toLocaleDateString() }; attendanceRecords.unshift(newRecord); } // Save to localStorage localStorage.setItem('attendanceRecords', JSON.stringify(attendanceRecords)); // Update UI renderAttendanceTable(); updateDashboard(); // Reset form attendanceForm.reset(); studentIdInput.focus(); }); // Render attendance table function renderAttendanceTable(filteredRecords = attendanceRecords) { attendanceTable.innerHTML = ''; if (filteredRecords.length === 0) { const row = attendanceTable.insertRow(); const cell = row.insertCell(); cell.colSpan = 7; cell.textContent = 'No attendance records found'; cell.style.textAlign = 'center'; return; } filteredRecords.forEach(record => { const row = attendanceTable.insertRow(); row.insertCell().textContent = record.studentId; row.insertCell().textContent = record.studentName; row.insertCell().textContent = record.gradeSection; row.insertCell().textContent = record.timeIn; row.insertCell().textContent = record.timeOut || '-'; const statusCell = row.insertCell(); statusCell.textContent = record.status; statusCell.className = `status-${record.status.toLowerCase()}`; const actionCell = row.insertCell(); if (!record.timeOut) { const logoutBtn = document.createElement('button'); logoutBtn.textContent = 'Log Out'; logoutBtn.className = 'action-btn btn-logout'; logoutBtn.addEventListener('click', () => logOutStudent(record.studentId)); actionCell.appendChild(logoutBtn); } }); } // Log out a student function logOutStudent(studentId) { const recordIndex = attendanceRecords.findIndex(record => record.studentId === studentId && !record.timeOut ); if (recordIndex !== -1) { attendanceRecords[recordIndex].timeOut = new Date().toLocaleTimeString(); attendanceRecords[recordIndex].status = 'Out'; localStorage.setItem('attendanceRecords', JSON.stringify(attendanceRecords)); renderAttendanceTable(); updateDashboard(); } } // Update dashboard stats function updateDashboard() { const today = new Date().toLocaleDateString(); const todayRecords = attendanceRecords.filter(record => record.date === today); totalStudentsSpan.textContent = todayRecords.length; currentStudentsSpan.textContent = todayRecords.filter(record => record.status === 'Present').length; } // Search functionality searchInput.addEventListener('input', function() { const searchTerm = searchInput.value.toLowerCase(); const filteredRecords = attendanceRecords.filter(record => record.studentId.toLowerCase().includes(searchTerm) || record.studentName.toLowerCase().includes(searchTerm) || record.gradeSection.toLowerCase().includes(searchTerm) ); renderAttendanceTable(filteredRecords); }); // Initialize the app init(); }); This enhanced version includes: 1. A modern, responsive UI with Font Awesome icons 2. Real-time clock display 3. Dashboard statistics 4. Search functionality 5. Student log in/log out system 6. Local storage for data persistence 7. Mobile-responsive design 8. Enhanced visual feedback and status indicators The system now tracks both time in and time out, shows current students in the library, and maintains all records in localStorage. You can search through records and manually log out students if needed.