| <!DOCTYPE html>
|
| <html lang="en">
|
|
|
| <head>
|
| <meta charset="UTF-8">
|
| <meta name="viewport" content="width=device-width, initial-scale=1.0">
|
| <title>Database Logs | Face Attendance</title>
|
| <script src="https://cdn.tailwindcss.com"></script>
|
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
| </head>
|
|
|
| <body class="bg-gray-50 flex h-screen overflow-hidden text-gray-800 relative">
|
|
|
|
|
| <div id="sidebar-overlay" class="fixed inset-0 bg-black bg-opacity-50 z-40 hidden md:hidden transition-opacity">
|
| </div>
|
|
|
|
|
| <aside id="sidebar"
|
| class="w-64 bg-slate-900 text-white flex flex-col shadow-xl absolute md:relative z-50 h-full transform -translate-x-full md:translate-x-0 transition-transform duration-300 ease-in-out">
|
| <div class="h-16 flex items-center justify-between md:justify-center px-4 md:px-0 border-b border-slate-700">
|
| <h1 class="text-xl font-bold tracking-wider"><i class="fa-solid fa-expand text-blue-400 mr-2"></i> VisionAI
|
| </h1>
|
|
|
| <button id="close-sidebar" class="md:hidden text-gray-400 hover:text-white">
|
| <i class="fa-solid fa-xmark text-xl"></i>
|
| </button>
|
| </div>
|
| <nav class="flex-1 px-4 py-6 space-y-2 overflow-y-auto">
|
| <a href="/"
|
| class="flex items-center px-4 py-3 text-slate-300 hover:bg-slate-800 hover:text-white rounded-lg transition-colors">
|
| <i class="fa-solid fa-camera mr-3"></i> Live Scanner
|
| </a>
|
| <a href="/logs"
|
| class="flex items-center px-4 py-3 bg-blue-600 text-white rounded-lg shadow-md transition-colors">
|
| <i class="fa-solid fa-table-list mr-3"></i> Attendance Logs
|
| </a>
|
| </nav>
|
| <div class="p-4 text-xs text-slate-500 text-center border-t border-slate-800">
|
| System v1.0.0
|
| </div>
|
| </aside>
|
|
|
|
|
| <main class="flex-1 flex flex-col h-screen overflow-y-auto w-full">
|
|
|
| <header class="h-16 bg-white shadow-sm flex items-center px-4 md:px-8 z-10 shrink-0">
|
| <button id="open-sidebar" class="md:hidden mr-4 text-gray-600 hover:text-blue-600 transition-colors">
|
| <i class="fa-solid fa-bars text-xl"></i>
|
| </button>
|
| <h2 class="text-lg md:text-xl font-semibold text-gray-700 truncate">Attendance Database</h2>
|
| </header>
|
|
|
|
|
| <div class="p-4 md:p-8 flex-1">
|
| <div
|
| class="bg-white rounded-xl shadow-md border border-gray-100 overflow-hidden flex flex-col h-full md:h-auto">
|
|
|
| <div class="px-4 md:px-6 py-4 border-b border-gray-100 flex justify-between items-center bg-slate-50">
|
| <h3 class="font-medium text-gray-700">Recent Scans</h3>
|
| <button onclick="window.location.reload()"
|
| class="text-xs md:text-sm bg-white border border-gray-300 text-gray-600 px-3 py-1.5 rounded hover:bg-gray-50 transition shadow-sm">
|
| <i class="fa-solid fa-rotate-right mr-1"></i> <span class="hidden sm:inline">Refresh
|
| Data</span><span class="sm:hidden">Refresh</span>
|
| </button>
|
| </div>
|
|
|
|
|
| <div class="overflow-x-auto flex-1">
|
| <table class="w-full text-left border-collapse min-w-[600px]">
|
| <thead>
|
| <tr class="bg-gray-50 text-gray-500 text-xs md:text-sm uppercase tracking-wider">
|
| <th class="px-4 md:px-6 py-3 md:py-4 font-medium border-b border-gray-200">ID</th>
|
| <th class="px-4 md:px-6 py-3 md:py-4 font-medium border-b border-gray-200">Employee Name
|
| </th>
|
| <th class="px-4 md:px-6 py-3 md:py-4 font-medium border-b border-gray-200">Date Logged
|
| </th>
|
| <th class="px-4 md:px-6 py-3 md:py-4 font-medium border-b border-gray-200">Time Logged
|
| </th>
|
| <th class="px-4 md:px-6 py-3 md:py-4 font-medium border-b border-gray-200">Emotion</th>
|
| <th class="px-4 md:px-6 py-3 md:py-4 font-medium border-b border-gray-200">Gender</th>
|
| <th class="px-4 md:px-6 py-3 md:py-4 font-medium border-b border-gray-200 text-center">
|
| Status</th>
|
| </tr>
|
| </thead>
|
| <tbody class="text-sm text-gray-700 divide-y divide-gray-100">
|
| {% for row in records %}
|
| <tr class="hover:bg-slate-50 transition-colors">
|
| <td class="px-4 md:px-6 py-3 md:py-4 text-gray-400">#{{ row[0] }}</td>
|
| <td class="px-4 md:px-6 py-3 md:py-4 font-medium text-gray-900">
|
| <div class="flex items-center">
|
| <div
|
| class="w-8 h-8 rounded-full bg-blue-100 text-blue-600 flex items-center justify-center font-bold mr-3 shrink-0">
|
| {{ row[1][0] }}
|
| </div>
|
| <span class="truncate">{{ row[1] }}</span>
|
| </div>
|
| </td>
|
| <td class="px-4 md:px-6 py-3 md:py-4 whitespace-nowrap">{{ row[2] }}</td>
|
| <td class="px-4 md:px-6 py-3 md:py-4 whitespace-nowrap">{{ row[3] }}</td>
|
| <td class="px-4 md:px-6 py-3 md:py-4 whitespace-nowrap">
|
| {% if row[4] %}
|
| <span
|
| class="bg-yellow-100 text-yellow-700 px-2 py-0.5 rounded-full text-xs font-medium capitalize">{{
|
| row[4] }}</span>
|
| {% else %}
|
| <span class="text-gray-300 text-xs">—</span>
|
| {% endif %}
|
| </td>
|
| <td class="px-4 md:px-6 py-3 md:py-4 whitespace-nowrap">
|
| {% if row[5] %}
|
| <span
|
| class="bg-blue-100 text-blue-700 px-2 py-0.5 rounded-full text-xs font-medium">{{
|
| row[5] }}</span>
|
| {% else %}
|
| <span class="text-gray-300 text-xs">—</span>
|
| {% endif %}
|
| </td>
|
| <td class="px-4 md:px-6 py-3 md:py-4 text-center">
|
| <span
|
| class="bg-green-100 text-green-700 px-2.5 py-1 rounded-full text-xs font-semibold whitespace-nowrap">Present</span>
|
| </td>
|
| </tr>
|
| {% else %}
|
| <tr>
|
| <td colspan="7" class="px-6 py-12 text-center text-gray-400">
|
| <i class="fa-solid fa-folder-open text-3xl mb-3 block"></i>
|
| No attendance records found yet.
|
| </td>
|
| </tr>
|
| {% endfor %}
|
| </tbody>
|
| </table>
|
| </div>
|
|
|
| </div>
|
| </div>
|
| </main>
|
|
|
|
|
| <script>
|
| const sidebar = document.getElementById('sidebar');
|
| const openSidebarBtn = document.getElementById('open-sidebar');
|
| const closeSidebarBtn = document.getElementById('close-sidebar');
|
| const sidebarOverlay = document.getElementById('sidebar-overlay');
|
|
|
| function toggleSidebar() {
|
| sidebar.classList.toggle('-translate-x-full');
|
| sidebarOverlay.classList.toggle('hidden');
|
| }
|
|
|
| openSidebarBtn.addEventListener('click', toggleSidebar);
|
| closeSidebarBtn.addEventListener('click', toggleSidebar);
|
| sidebarOverlay.addEventListener('click', toggleSidebar);
|
| </script>
|
| </body>
|
|
|
| </html |
