Library Attendance

Dulangan NHS Library Attendance

Student Log In

Attendance Records

Student ID	Student Name	Time In	Time Out

:root { --primary-green: #2ecc71; --primary-cyan: #1abc9c; --dark-bg: #2c3e50; --light-bg: #ecf0f1; } body { margin: 0; font-family: 'Segoe UI', sans-serif; background: linear-gradient(135deg, var(--primary-cyan), var(--primary-green)); min-height: 100vh; } .dashboard-header { background: var(--dark-bg); padding: 1rem; display: flex; justify-content: space-between; align-items: center; color: white; } .dashboard-container { display: grid; grid-template-columns: 1fr 2fr; gap: 2rem; padding: 2rem; } .attendance-card, .records-card { background: white; border-radius: 15px; padding: 2rem; box-shadow: 0 10px 20px rgba(0,0,0,0.1); } .green-text { color: var(--primary-green); } .cyan-text { color: var(--primary-cyan); } .form-group { margin-bottom: 1.5rem; } input { width: 100%; padding: 12px; border: 2px solid var(--primary-cyan); border-radius: 8px; font-size: 16px; } .action-button { width: 100%; padding: 12px; border: none; border-radius: 8px; font-size: 16px; cursor: pointer; transition: transform 0.2s; } .login-btn { background: var(--primary-green); color: white; } .logout-button { background: var(--primary-cyan); padding: 10px 25px; border-radius: 8px; border: none; color: white; cursor: pointer; } .table-container { max-height: 60vh; overflow-y: auto; } table { width: 100%; border-collapse: collapse; margin-top: 1rem; } th, td { padding: 12px; text-align: left; border-bottom: 2px solid var(--light-bg); } th { background: var(--dark-bg); color: white; } const dbName = 'LibraryDB'; let db; const initDB = () => { const request = indexedDB.open(dbName, 1); request.onupgradeneeded = (event) => { db = event.target.result; const store = db.createObjectStore('attendance', { keyPath: 'id', autoIncrement: true }); store.createIndex('studentId', 'studentId', { unique: false }); store.createIndex('timeIn', 'timeIn', { unique: false }); }; request.onsuccess = (event) => { db = event.target.result; loadRecords(); }; }; const addRecord = (studentId, studentName) => { const transaction = db.transaction(['attendance'], 'readwrite'); const store = transaction.objectStore('attendance'); const record = { studentId, studentName, timeIn: new Date().toLocaleString(), timeOut: null }; store.add(record); transaction.oncomplete = () => loadRecords(); }; const updateLogout = (studentId) => { const transaction = db.transaction(['attendance'], 'readwrite'); const store = transaction.objectStore('attendance'); const index = store.index('studentId'); index.openCursor(IDBKeyRange.only(studentId)).onsuccess = (event) => { const cursor = event.target.result; if (cursor) { if (!cursor.value.timeOut) { const updateData = cursor.value; updateData.timeOut = new Date().toLocaleString(); cursor.update(updateData); } cursor.continue(); } }; transaction.oncomplete = () => loadRecords(); }; const loadRecords = () => { const transaction = db.transaction(['attendance'], 'readonly'); const store = transaction.objectStore('attendance'); const request = store.getAll(); request.onsuccess = () => { const tbody = document.querySelector('#attendanceTable tbody'); tbody.innerHTML = request.result.map(record => ` ${record.studentId} ${record.studentName} ${record.timeIn} ${record.timeOut || 'Still in library'} `).join(''); }; }; document.getElementById('attendanceForm').addEventListener('submit', (e) => { e.preventDefault(); const studentId = document.getElementById('studentId').value; const studentName = document.getElementById('studentName').value; addRecord(studentId, studentName); e.target.reset(); }); document.getElementById('logoutBtn').addEventListener('click', () => { const studentId = prompt('Enter Student ID to log out:'); if (studentId) updateLogout(studentId); }); initDB();