Spaces:

vrfefavr
/

attendance-api

Sleeping

App Files Files Community

vrfefavr commited on Mar 1

Commit

a7bfdc4

verified ·

1 Parent(s): 811af8d

Update templates/index.html

Browse files

Files changed (1) hide show

templates/index.html +19 -12

templates/index.html CHANGED Viewed

@@ -6,7 +6,6 @@
     <title>Enterprise Attendance System</title>
     <script src="https://cdn.tailwindcss.com"></script>
     <link rel="stylesheet" href="/static/style.css">
-    <!-- Load separated JS at the end -->
     <script src="/static/app.js" defer></script>
 </head>
 <body class="bg-slate-900 text-white min-h-screen font-sans">
@@ -26,9 +25,7 @@
             <div class="lg:col-span-2 space-y-4">
                 <div class="glass rounded-2xl overflow-hidden shadow-2xl relative">
                     <video id="videoElement" autoplay playsinline class="w-full h-auto transform -scale-x-100 object-cover aspect-video bg-black"></video>
-                    <!-- Hidden canvas for capturing frames -->
                     <canvas id="canvasElement" class="hidden"></canvas>
-                    <!-- Visible canvas for drawing the FRAME BORDER -->
                     <canvas id="overlayCanvas" class="absolute top-0 left-0 w-full h-full pointer-events-none"></canvas>
                     <div id="overlay" class="absolute inset-0 border-4 border-emerald-500/0 transition-colors duration-300 pointer-events-none z-10"></div>
                 </div>
@@ -47,21 +44,32 @@
                     </div>
                 </div>
-                <!-- Debug Terminal -->
-                <div class="bg-black/80 p-3 rounded-xl border border-slate-700 font-mono text-xs overflow-hidden h-32 flex flex-col">
-                    <div class="text-slate-500 border-b border-slate-800 pb-1 mb-1 flex justify-between">
-                        <span>>_ BACKEND_TERMINAL</span>
-                        <span class="animate-pulse">_</span>
                     </div>
-                    <div id="terminal-logs" class="flex-1 overflow-y-auto text-slate-300 space-y-1 custom-scrollbar flex flex-col justify-end">
-                        <!-- Logs inject here -->
                     </div>
                 </div>
             </div>
             <!-- Attendance Log Column -->
             <div class="space-y-6">
-                <!-- 1. Live Presence (Temporary) -->
                 <div class="glass rounded-2xl p-6 shadow-2xl flex flex-col h-[300px]">
                     <h2 class="text-xl font-bold mb-4 flex items-center gap-2">
                         <span>🟢</span> Live Presence
@@ -71,7 +79,6 @@
                     </div>
                 </div>
-                <!-- 2. Session Attendance (Permanent for this view) -->
                 <div class="glass rounded-2xl p-6 shadow-2xl flex flex-col h-[400px]">
                     <h2 class="text-xl font-bold mb-4 flex items-center gap-2 text-emerald-400">
                         <span>✅</span> Confirmed Attendance

     <title>Enterprise Attendance System</title>
     <script src="https://cdn.tailwindcss.com"></script>
     <link rel="stylesheet" href="/static/style.css">
     <script src="/static/app.js" defer></script>
 </head>
 <body class="bg-slate-900 text-white min-h-screen font-sans">
             <div class="lg:col-span-2 space-y-4">
                 <div class="glass rounded-2xl overflow-hidden shadow-2xl relative">
                     <video id="videoElement" autoplay playsinline class="w-full h-auto transform -scale-x-100 object-cover aspect-video bg-black"></video>
                     <canvas id="canvasElement" class="hidden"></canvas>
                     <canvas id="overlayCanvas" class="absolute top-0 left-0 w-full h-full pointer-events-none"></canvas>
                     <div id="overlay" class="absolute inset-0 border-4 border-emerald-500/0 transition-colors duration-300 pointer-events-none z-10"></div>
                 </div>
                     </div>
                 </div>
+                <!-- Debug Row -->
+                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+                    <!-- Terminal -->
+                    <div class="bg-black/80 p-3 rounded-xl border border-slate-700 font-mono text-xs overflow-hidden h-40 flex flex-col">
+                        <div class="text-slate-500 border-b border-slate-800 pb-1 mb-1 flex justify-between">
+                            <span>>_ BACKEND_TERMINAL</span>
+                            <span class="animate-pulse">_</span>
+                        </div>
+                        <div id="terminal-logs" class="flex-1 overflow-y-auto text-slate-300 space-y-1 custom-scrollbar flex flex-col justify-end"></div>
                     </div>
+                    <!-- AI Eye (Crops Gallery) -->
+                    <div class="glass p-3 rounded-xl flex flex-col h-40">
+                        <div class="text-[10px] text-amber-400 uppercase tracking-widest font-bold border-b border-slate-700/50 pb-1 mb-2 flex justify-between">
+                            <span>👁️ AI Eye (Live Crops)</span>
+                            <span id="crop-count" class="text-slate-500">0 faces</span>
+                        </div>
+                        <div id="debug-crops" class="flex-1 flex gap-2 overflow-x-auto items-center pb-2 custom-scrollbar">
+                            <div class="text-xs text-slate-600 italic">Waiting for detection...</div>
+                        </div>
                     </div>
                 </div>
             </div>
             <!-- Attendance Log Column -->
             <div class="space-y-6">
                 <div class="glass rounded-2xl p-6 shadow-2xl flex flex-col h-[300px]">
                     <h2 class="text-xl font-bold mb-4 flex items-center gap-2">
                         <span>🟢</span> Live Presence
                     </div>
                 </div>
                 <div class="glass rounded-2xl p-6 shadow-2xl flex flex-col h-[400px]">
                     <h2 class="text-xl font-bold mb-4 flex items-center gap-2 text-emerald-400">
                         <span>✅</span> Confirmed Attendance