Hugging Face's logo

Spaces:
themehmi
/
Attendance-Marking-System
Sleeping

App Files Community
themehmi commited on
Commit
5c0f6d3
·
verified ·
1 Parent(s): 474d0fb

Update templates/index.html

Browse files
Files changed (1) hide show
  1. templates/index.html +54 -8
templates/index.html CHANGED
@@ -8,7 +8,6 @@
8
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
  </head>
10
  <body class="bg-gray-50 flex h-screen overflow-hidden text-gray-800">
11
-
12
  <aside class="w-64 bg-slate-900 text-white flex flex-col shadow-xl">
13
  <div class="h-16 flex items-center justify-center border-b border-slate-700">
14
  <h1 class="text-xl font-bold tracking-wider"><i class="fa-solid fa-expand text-blue-400 mr-2"></i> VisionAI</h1>
@@ -33,18 +32,33 @@
33
  <span class="w-2 h-2 bg-green-500 rounded-full mr-2 animate-pulse"></span> System Active
34
  </div>
35
  </header>
36
-
37
  <div class="p-8 flex-1 flex justify-center items-start">
38
-
39
  <div class="bg-white rounded-2xl shadow-lg border border-gray-100 overflow-hidden w-full max-w-4xl">
 
 
40
  <div class="bg-slate-50 px-6 py-4 border-b border-gray-100 flex justify-between items-center">
41
- <h3 class="font-medium text-gray-700"><i class="fa-solid fa-video text-red-500 mr-2"></i> Live Camera Feed</h3>
42
- <span class="text-xs text-gray-400">Position face in center of frame</span>
 
 
 
 
 
 
43
  </div>
44
 
45
  <div class="p-6 bg-gray-100 flex justify-center items-center">
46
- <div class="relative rounded-xl overflow-hidden shadow-inner border-4 border-slate-800">
47
- <img src="{{ url_for('video_feed') }}" class="w-full h-auto max-h-[600px] object-cover block" alt="Camera Feed">
 
 
 
 
 
 
 
 
48
 
49
  <div class="absolute top-4 left-4 w-8 h-8 border-t-4 border-l-4 border-blue-500 opacity-70"></div>
50
  <div class="absolute top-4 right-4 w-8 h-8 border-t-4 border-r-4 border-blue-500 opacity-70"></div>
@@ -53,9 +67,41 @@
53
  </div>
54
  </div>
55
  </div>
56
-
57
  </div>
58
  </main>
59
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
60
  </body>
61
  </html>
 
8
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
  </head>
10
  <body class="bg-gray-50 flex h-screen overflow-hidden text-gray-800">
 
11
  <aside class="w-64 bg-slate-900 text-white flex flex-col shadow-xl">
12
  <div class="h-16 flex items-center justify-center border-b border-slate-700">
13
  <h1 class="text-xl font-bold tracking-wider"><i class="fa-solid fa-expand text-blue-400 mr-2"></i> VisionAI</h1>
 
32
  <span class="w-2 h-2 bg-green-500 rounded-full mr-2 animate-pulse"></span> System Active
33
  </div>
34
  </header>
35
+
36
  <div class="p-8 flex-1 flex justify-center items-start">
 
37
  <div class="bg-white rounded-2xl shadow-lg border border-gray-100 overflow-hidden w-full max-w-4xl">
38
+
39
+ <!-- Updated Header with Button -->
40
  <div class="bg-slate-50 px-6 py-4 border-b border-gray-100 flex justify-between items-center">
41
+ <div>
42
+ <h3 class="font-medium text-gray-700"><i class="fa-solid fa-video text-red-500 mr-2"></i> Live Camera Feed</h3>
43
+ <span class="text-xs text-gray-400">Position face in center of frame</span>
44
+ </div>
45
+ <!-- Camera Toggle Button -->
46
+ <button id="toggle-camera" class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg shadow transition-colors text-sm font-medium flex items-center">
47
+ <i class="fa-solid fa-power-off mr-2"></i> Turn On Camera
48
+ </button>
49
  </div>
50
 
51
  <div class="p-6 bg-gray-100 flex justify-center items-center">
52
+ <div class="relative rounded-xl overflow-hidden shadow-inner border-4 border-slate-800 bg-black min-h-[400px] w-full flex justify-center items-center">
53
+
54
+ <!-- Offline Placeholder -->
55
+ <div id="camera-placeholder" class="text-white flex flex-col items-center">
56
+ <i class="fa-solid fa-video-slash text-5xl mb-3 text-gray-600"></i>
57
+ <span class="text-gray-400 font-medium">Camera is offline</span>
58
+ </div>
59
+
60
+ <!-- Modified Image Tag (Hidden by default, no src) -->
61
+ <img id="video-feed" src="" class="w-full h-auto max-h-[600px] object-cover hidden" alt="Camera Feed">
62
 
63
  <div class="absolute top-4 left-4 w-8 h-8 border-t-4 border-l-4 border-blue-500 opacity-70"></div>
64
  <div class="absolute top-4 right-4 w-8 h-8 border-t-4 border-r-4 border-blue-500 opacity-70"></div>
 
67
  </div>
68
  </div>
69
  </div>
 
70
  </div>
71
  </main>
72
 
73
+ <!-- Script to Handle Camera Toggle -->
74
+ <script>
75
+ const toggleBtn = document.getElementById('toggle-camera');
76
+ const videoFeed = document.getElementById('video-feed');
77
+ const placeholder = document.getElementById('camera-placeholder');
78
+ let isCameraOn = false;
79
+
80
+ toggleBtn.addEventListener('click', () => {
81
+ isCameraOn = !isCameraOn;
82
+
83
+ if (isCameraOn) {
84
+ // Turn On
85
+ videoFeed.src = "{{ url_for('video_feed') }}";
86
+ videoFeed.classList.remove('hidden');
87
+ placeholder.classList.add('hidden');
88
+
89
+ // Update button style to "Turn Off"
90
+ toggleBtn.innerHTML = '<i class="fa-solid fa-stop mr-2"></i> Turn Off Camera';
91
+ toggleBtn.classList.replace('bg-blue-600', 'bg-red-600');
92
+ toggleBtn.classList.replace('hover:bg-blue-700', 'hover:bg-red-700');
93
+ } else {
94
+ // Turn Off
95
+ videoFeed.src = "";
96
+ videoFeed.classList.add('hidden');
97
+ placeholder.classList.remove('hidden');
98
+
99
+ // Update button style to "Turn On"
100
+ toggleBtn.innerHTML = '<i class="fa-solid fa-power-off mr-2"></i> Turn On Camera';
101
+ toggleBtn.classList.replace('bg-red-600', 'bg-blue-600');
102
+ toggleBtn.classList.replace('hover:bg-red-700', 'hover:bg-blue-700');
103
+ }
104
+ });
105
+ </script>
106
  </body>
107
  </html>