Hugging Face's logo

Spaces:
harshdhane
/
cam
Sleeping

App Files Community
harshdhane commited on
Commit
1019fa3
·
verified ·
1 Parent(s): 4cf8d3a

Update templates/gallery.html

Browse files
Files changed (1) hide show
  1. templates/gallery.html +174 -112
templates/gallery.html CHANGED
@@ -3,142 +3,202 @@
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>Live Photo Gallery</title>
7
- <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
8
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
  <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
10
  </head>
11
  <body>
12
- <div class="gallery-container">
13
  <!-- Header -->
14
- <div class="gallery-header">
15
- <div class="header-content">
16
- <h1><i class="fas fa-images"></i> Live Photo Gallery</h1>
17
- <p class="subtitle">Real-time updates from all camera sessions</p>
18
-
 
19
  <div class="header-stats">
20
- <div class="stat-badge">
21
- <i class="fas fa-image"></i>
22
- <span>Photos: <strong id="totalPhotos">0</strong></span>
23
- </div>
24
- <div class="stat-badge">
25
  <i class="fas fa-users"></i>
26
- <span>Active Sessions: <strong id="activeSessions">0</strong></span>
 
 
 
27
  </div>
28
- <div class="stat-badge">
 
 
 
 
 
 
 
29
  <i class="fas fa-clock"></i>
30
- <span>Last Update: <strong id="lastUpdate">--:--:--</strong></span>
 
 
 
31
  </div>
32
  </div>
33
  </div>
34
-
35
- <div class="header-controls">
36
- <a href="/" class="btn btn-primary" target="_blank">
37
- <i class="fas fa-camera"></i> New Camera Session
38
- </a>
39
- <button id="refreshBtn" class="btn btn-secondary">
40
- <i class="fas fa-sync-alt"></i> Refresh
41
- </button>
42
- <button id="clearAllBtn" class="btn btn-danger">
43
- <i class="fas fa-trash"></i> Clear All
44
- </button>
45
- </div>
46
  </div>
47
-
48
- <!-- Gallery Controls -->
49
- <div class="gallery-controls">
50
- <div class="control-group">
51
- <label for="sortSelect">Sort by:</label>
52
- <select id="sortSelect" class="form-select">
53
- <option value="newest">Newest First</option>
54
- <option value="oldest">Oldest First</option>
55
- <option value="size">File Size</option>
56
- </select>
57
- </div>
58
-
59
- <div class="control-group">
60
- <label for="filterSelect">Filter by:</label>
61
- <select id="filterSelect" class="form-select">
62
- <option value="all">All Photos</option>
63
- <option value="today">Today</option>
64
- <option value="hour">Last Hour</option>
65
- </select>
66
- </div>
67
-
68
- <div class="control-group">
69
- <div class="search-box">
70
- <i class="fas fa-search"></i>
71
- <input type="text" id="searchInput" placeholder="Search photos...">
72
- </div>
73
- </div>
74
-
75
- <div class="control-group">
76
- <div class="view-toggle">
77
- <button id="gridView" class="view-btn active">
78
- <i class="fas fa-th"></i> Grid
79
  </button>
80
- <button id="listView" class="view-btn">
81
- <i class="fas fa-list"></i> List
82
  </button>
83
  </div>
84
  </div>
85
- </div>
86
-
87
- <!-- Gallery Content -->
88
- <div class="gallery-content">
89
- <div id="loading" class="loading-container">
90
- <div class="spinner">
91
- <div class="double-bounce1"></div>
92
- <div class="double-bounce2"></div>
93
  </div>
94
- <p>Loading gallery...</p>
95
- </div>
96
-
97
- <div id="noPhotos" class="no-photos" style="display: none;">
98
- <div class="empty-state">
 
99
  <i class="fas fa-images"></i>
100
  <h3>No Photos Yet</h3>
101
- <p>Start camera sessions to see photos here.</p>
102
- <a href="/" class="btn btn-primary">
103
- <i class="fas fa-camera"></i> Start Camera Session
104
- </a>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
105
  </div>
106
  </div>
107
-
108
- <div id="galleryGrid" class="photo-grid">
109
- <!-- Photos will be loaded here -->
 
 
 
 
 
 
110
  </div>
111
-
112
- <div id="galleryList" class="photo-list" style="display: none;">
113
- <!-- List view will be loaded here -->
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
114
  </div>
115
  </div>
116
-
117
- <!-- Live Updates Indicator -->
118
  <div class="live-indicator">
119
  <span class="live-dot"></span>
120
- <span>LIVE UPDATES ENABLED</span>
121
  </div>
122
-
123
  <!-- Footer -->
124
- <div class="gallery-footer">
125
- <div class="footer-info">
126
- <p><i class="fas fa-info-circle"></i> Photos update automatically when new captures occur</p>
127
- <p><i class="fas fa-shield-alt"></i> All photos are stored locally on the server</p>
128
- </div>
129
- <div class="footer-actions">
130
- <button id="autoRefreshToggle" class="btn btn-success">
131
- <i class="fas fa-sync"></i> Auto-Refresh: <span id="autoRefreshStatus">ON</span>
132
- </button>
133
- <div class="update-frequency">
134
- <label>Update every:</label>
135
- <select id="refreshRate" class="form-select small">
136
- <option value="1">1 second</option>
137
- <option value="3" selected>3 seconds</option>
138
- <option value="5">5 seconds</option>
139
- <option value="10">10 seconds</option>
140
- </select>
141
- </div>
142
  </div>
143
  </div>
144
  </div>
@@ -147,11 +207,13 @@
147
  <div id="photoModal" class="modal">
148
  <div class="modal-content">
149
  <div class="modal-header">
150
- <h3 id="modalTitle">Photo Preview</h3>
151
  <button class="close-modal">&times;</button>
152
  </div>
153
  <div class="modal-body">
154
- <img id="modalImage" src="" alt="Preview">
 
 
155
  <div class="modal-info">
156
  <div class="info-row">
157
  <span class="info-label">Filename:</span>
@@ -166,16 +228,16 @@
166
  <span id="modalSize" class="info-value"></span>
167
  </div>
168
  <div class="info-row">
169
- <span class="info-label">Session:</span>
170
  <span id="modalSession" class="info-value"></span>
171
  </div>
172
  </div>
173
  </div>
174
  <div class="modal-footer">
175
- <button id="downloadModalBtn" class="btn btn-primary">
176
  <i class="fas fa-download"></i> Download
177
  </button>
178
- <button id="deleteModalBtn" class="btn btn-danger">
179
  <i class="fas fa-trash"></i> Delete
180
  </button>
181
  <button class="btn btn-secondary close-modal">
 
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Admin Gallery</title>
7
+ <link rel="stylesheet" href="{{ url_for('static', filename='css/gallery.css') }}">
8
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
  <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
10
  </head>
11
  <body>
12
+ <div class="admin-container">
13
  <!-- Header -->
14
+ <div class="admin-header">
15
+ <div class="header-left">
16
+ <h1><i class="fas fa-shield-alt"></i> Admin Gallery</h1>
17
+ <p class="subtitle">Live monitoring of all camera sessions</p>
18
+ </div>
19
+ <div class="header-right">
20
  <div class="header-stats">
21
+ <div class="stat-item">
 
 
 
 
22
  <i class="fas fa-users"></i>
23
+ <div>
24
+ <span class="stat-label">Active Users</span>
25
+ <span class="stat-value" id="activeUsers">0</span>
26
+ </div>
27
  </div>
28
+ <div class="stat-item">
29
+ <i class="fas fa-image"></i>
30
+ <div>
31
+ <span class="stat-label">Total Photos</span>
32
+ <span class="stat-value" id="totalPhotos">0</span>
33
+ </div>
34
+ </div>
35
+ <div class="stat-item">
36
  <i class="fas fa-clock"></i>
37
+ <div>
38
+ <span class="stat-label">Last Update</span>
39
+ <span class="stat-value" id="lastUpdate">--:--:--</span>
40
+ </div>
41
  </div>
42
  </div>
43
  </div>
 
 
 
 
 
 
 
 
 
 
 
 
44
  </div>
45
+
46
+ <!-- Tabs -->
47
+ <div class="admin-tabs">
48
+ <button class="tab-btn active" data-tab="photos">
49
+ <i class="fas fa-images"></i> Photos
50
+ </button>
51
+ <button class="tab-btn" data-tab="sessions">
52
+ <i class="fas fa-user-clock"></i> Active Sessions
53
+ </button>
54
+ <button class="tab-btn" data-tab="stats">
55
+ <i class="fas fa-chart-bar"></i> Statistics
56
+ </button>
57
+ </div>
58
+
59
+ <!-- Photos Tab -->
60
+ <div class="tab-content active" id="photos-tab">
61
+ <div class="tab-header">
62
+ <h2><i class="fas fa-images"></i> All Captured Photos</h2>
63
+ <div class="tab-controls">
64
+ <div class="search-box">
65
+ <i class="fas fa-search"></i>
66
+ <input type="text" id="searchPhotos" placeholder="Search photos...">
67
+ </div>
68
+ <button id="refreshPhotos" class="btn btn-primary">
69
+ <i class="fas fa-sync-alt"></i> Refresh
 
 
 
 
 
 
 
70
  </button>
71
+ <button id="clearAllPhotos" class="btn btn-danger">
72
+ <i class="fas fa-trash"></i> Clear All
73
  </button>
74
  </div>
75
  </div>
76
+
77
+ <div class="gallery-content">
78
+ <div id="loading" class="loading">
79
+ <div class="spinner"></div>
80
+ <p>Loading photos...</p>
 
 
 
81
  </div>
82
+
83
+ <div id="photosGrid" class="photos-grid">
84
+ <!-- Photos will be loaded here -->
85
+ </div>
86
+
87
+ <div id="noPhotos" class="no-content" style="display: none;">
88
  <i class="fas fa-images"></i>
89
  <h3>No Photos Yet</h3>
90
+ <p>Waiting for users to start camera sessions...</p>
91
+ </div>
92
+ </div>
93
+ </div>
94
+
95
+ <!-- Sessions Tab -->
96
+ <div class="tab-content" id="sessions-tab">
97
+ <div class="tab-header">
98
+ <h2><i class="fas fa-user-clock"></i> Active Camera Sessions</h2>
99
+ <button id="refreshSessions" class="btn btn-primary">
100
+ <i class="fas fa-sync-alt"></i> Refresh
101
+ </button>
102
+ </div>
103
+
104
+ <div class="sessions-content">
105
+ <div id="sessionsList" class="sessions-list">
106
+ <!-- Sessions will be loaded here -->
107
+ </div>
108
+
109
+ <div id="noSessions" class="no-content" style="display: none;">
110
+ <i class="fas fa-user-slash"></i>
111
+ <h3>No Active Sessions</h3>
112
+ <p>No users are currently connected.</p>
113
  </div>
114
  </div>
115
+ </div>
116
+
117
+ <!-- Stats Tab -->
118
+ <div class="tab-content" id="stats-tab">
119
+ <div class="tab-header">
120
+ <h2><i class="fas fa-chart-bar"></i> System Statistics</h2>
121
+ <button id="refreshStats" class="btn btn-primary">
122
+ <i class="fas fa-sync-alt"></i> Refresh
123
+ </button>
124
  </div>
125
+
126
+ <div class="stats-content">
127
+ <div class="stats-grid">
128
+ <div class="stat-card">
129
+ <div class="stat-icon">
130
+ <i class="fas fa-database"></i>
131
+ </div>
132
+ <div class="stat-info">
133
+ <h3 id="totalImagesStat">0</h3>
134
+ <p>Total Images</p>
135
+ </div>
136
+ </div>
137
+
138
+ <div class="stat-card">
139
+ <div class="stat-icon">
140
+ <i class="fas fa-hdd"></i>
141
+ </div>
142
+ <div class="stat-info">
143
+ <h3 id="totalSizeStat">0 MB</h3>
144
+ <p>Storage Used</p>
145
+ </div>
146
+ </div>
147
+
148
+ <div class="stat-card">
149
+ <div class="stat-icon">
150
+ <i class="fas fa-calendar-day"></i>
151
+ </div>
152
+ <div class="stat-info">
153
+ <h3 id="todayImages">0</h3>
154
+ <p>Today's Images</p>
155
+ </div>
156
+ </div>
157
+
158
+ <div class="stat-card">
159
+ <div class="stat-icon">
160
+ <i class="fas fa-bolt"></i>
161
+ </div>
162
+ <div class="stat-info">
163
+ <h3 id="avgInterval">0s</h3>
164
+ <p>Avg Capture Interval</p>
165
+ </div>
166
+ </div>
167
+ </div>
168
+
169
+ <div class="charts-container">
170
+ <div class="chart-box">
171
+ <h3><i class="fas fa-chart-line"></i> Activity Timeline</h3>
172
+ <div class="chart-placeholder">
173
+ <p>Activity chart will be displayed here</p>
174
+ </div>
175
+ </div>
176
+
177
+ <div class="chart-box">
178
+ <h3><i class="fas fa-chart-pie"></i> Storage Distribution</h3>
179
+ <div class="chart-placeholder">
180
+ <p>Storage chart will be displayed here</p>
181
+ </div>
182
+ </div>
183
+ </div>
184
  </div>
185
  </div>
186
+
187
+ <!-- Live Indicator -->
188
  <div class="live-indicator">
189
  <span class="live-dot"></span>
190
+ <span>LIVE UPDATES</span>
191
  </div>
192
+
193
  <!-- Footer -->
194
+ <div class="admin-footer">
195
+ <p><i class="fas fa-shield-alt"></i> Admin Dashboard - Camera Monitoring System</p>
196
+ <div class="footer-links">
197
+ <a href="/" target="_blank">
198
+ <i class="fas fa-eye"></i> View User Page
199
+ </a>
200
+ <span class="separator">|</span>
201
+ <span id="serverTime">Server Time: --:--:--</span>
 
 
 
 
 
 
 
 
 
 
202
  </div>
203
  </div>
204
  </div>
 
207
  <div id="photoModal" class="modal">
208
  <div class="modal-content">
209
  <div class="modal-header">
210
+ <h3><i class="fas fa-image"></i> Photo Details</h3>
211
  <button class="close-modal">&times;</button>
212
  </div>
213
  <div class="modal-body">
214
+ <div class="modal-image-container">
215
+ <img id="modalImage" src="" alt="Photo Preview">
216
+ </div>
217
  <div class="modal-info">
218
  <div class="info-row">
219
  <span class="info-label">Filename:</span>
 
228
  <span id="modalSize" class="info-value"></span>
229
  </div>
230
  <div class="info-row">
231
+ <span class="info-label">Session ID:</span>
232
  <span id="modalSession" class="info-value"></span>
233
  </div>
234
  </div>
235
  </div>
236
  <div class="modal-footer">
237
+ <button id="downloadBtn" class="btn btn-primary">
238
  <i class="fas fa-download"></i> Download
239
  </button>
240
+ <button id="deleteBtn" class="btn btn-danger">
241
  <i class="fas fa-trash"></i> Delete
242
  </button>
243
  <button class="btn btn-secondary close-modal">