Spaces:

VISHAL18for4
/

camera_draw

Sleeping

App Files Files Community

VISHAL18for4 commited on Jun 23

Commit

f8c9b84

verified ·

1 Parent(s): 9ad52d5

Create Admin.html

Browse files

Files changed (1) hide show

public/Admin.html +253 -0

public/Admin.html ADDED Viewed

	@@ -0,0 +1,253 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Admin Gallery · Snapshots</title>
+  <style>
+    * { margin: 0; padding: 0; box-sizing: border-box; }
+    body {
+      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+      background: #0d0d1a;
+      color: #eee;
+      padding: 20px;
+      min-height: 100vh;
+    }
+    .login-container {
+      max-width: 400px;
+      margin: 100px auto;
+      background: #1a1a40;
+      padding: 40px;
+      border-radius: 16px;
+      border: 1px solid #533483;
+      text-align: center;
+    }
+    .login-container h1 { margin-bottom: 20px; color: #f5a623; }
+    .login-container input {
+      width: 100%;
+      padding: 12px;
+      margin: 10px 0;
+      border: 1px solid #533483;
+      border-radius: 8px;
+      background: #0d0d1a;
+      color: #fff;
+      font-size: 1rem;
+    }
+    .login-container button {
+      width: 100%;
+      padding: 12px;
+      background: #e94560;
+      border: none;
+      border-radius: 8px;
+      color: #fff;
+      font-size: 1.1rem;
+      cursor: pointer;
+      transition: 0.2s;
+    }
+    .login-container button:hover { background: #c73652; }
+    .error { color: #ff4444; margin-top: 10px; }
+    .gallery {
+      display: none;
+      max-width: 1400px;
+      margin: 0 auto;
+    }
+    .gallery-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: 10px 0 20px;
+      border-bottom: 1px solid #533483;
+      margin-bottom: 20px;
+      flex-wrap: wrap;
+      gap: 10px;
+    }
+    .gallery-header h1 { color: #f5a623; }
+    .gallery-header .badge {
+      background: #533483;
+      padding: 6px 16px;
+      border-radius: 20px;
+      font-size: 0.9rem;
+    }
+    .gallery-grid {
+      display: grid;
+      grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+      gap: 20px;
+    }
+    .gallery-item {
+      background: #1a1a40;
+      border-radius: 12px;
+      overflow: hidden;
+      border: 1px solid #2a2a5a;
+      transition: 0.3s;
+    }
+    .gallery-item:hover { transform: scale(1.02); border-color: #e94560; }
+    .gallery-item img {
+      width: 100%;
+      height: 200px;
+      object-fit: cover;
+      display: block;
+    }
+    .gallery-item .info {
+      padding: 10px 14px;
+      font-size: 0.8rem;
+      color: #aaa;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+    }
+    .gallery-item .info a {
+      color: #f5a623;
+      text-decoration: none;
+      font-weight: bold;
+    }
+    .gallery-item .info a:hover { text-decoration: underline; }
+    .empty-msg {
+      grid-column: 1 / -1;
+      text-align: center;
+      padding: 60px;
+      color: #666;
+      font-size: 1.2rem;
+    }
+    .refresh-btn {
+      background: #533483;
+      border: none;
+      color: #fff;
+      padding: 8px 20px;
+      border-radius: 8px;
+      cursor: pointer;
+      transition: 0.2s;
+    }
+    .refresh-btn:hover { background: #6a4a9a; }
+    .logout-btn {
+      background: #333;
+      border: none;
+      color: #fff;
+      padding: 8px 20px;
+      border-radius: 8px;
+      cursor: pointer;
+    }
+    .logout-btn:hover { background: #555; }
+  </style>
+</head>
+<body>
+<!-- Login Screen -->
+<div id="loginScreen" class="login-container">
+  <h1>🔐 Admin Gallery</h1>
+  <p style="color:#aaa; margin-bottom:20px;">Enter password to view snapshots</p>
+  <input type="password" id="passwordInput" placeholder="Enter password" />
+  <button id="loginBtn">Unlock Gallery</button>
+  <div id="loginError" class="error"></div>
+</div>
+<!-- Gallery -->
+<div id="galleryScreen" class="gallery">
+  <div class="gallery-header">
+    <h1>📸 Saved Snapshots</h1>
+    <div>
+      <span class="badge" id="countBadge">0 images</span>
+      <button class="refresh-btn" id="refreshBtn">⟳ Refresh</button>
+      <button class="logout-btn" id="logoutBtn">🚪 Logout</button>
+    </div>
+  </div>
+  <div class="gallery-grid" id="galleryGrid">
+    <div class="empty-msg">Loading snapshots...</div>
+  </div>
+</div>
+<script>
+  const PASSWORD = '26jan24march';
+  const loginScreen = document.getElementById('loginScreen');
+  const galleryScreen = document.getElementById('galleryScreen');
+  const passwordInput = document.getElementById('passwordInput');
+  const loginBtn = document.getElementById('loginBtn');
+  const loginError = document.getElementById('loginError');
+  const galleryGrid = document.getElementById('galleryGrid');
+  const countBadge = document.getElementById('countBadge');
+  const refreshBtn = document.getElementById('refreshBtn');
+  const logoutBtn = document.getElementById('logoutBtn');
+  // Check if already logged in (sessionStorage)
+  if (sessionStorage.getItem('adminLoggedIn') === 'true') {
+    loginScreen.style.display = 'none';
+    galleryScreen.style.display = 'block';
+    loadSnapshots();
+  }
+  loginBtn.addEventListener('click', () => {
+    const pass = passwordInput.value.trim();
+    if (pass === PASSWORD) {
+      sessionStorage.setItem('adminLoggedIn', 'true');
+      loginScreen.style.display = 'none';
+      galleryScreen.style.display = 'block';
+      loginError.textContent = '';
+      loadSnapshots();
+    } else {
+      loginError.textContent = '❌ Incorrect password. Try again.';
+      passwordInput.value = '';
+      passwordInput.focus();
+    }
+  });
+  // Enter key on password field
+  passwordInput.addEventListener('keydown', (e) => {
+    if (e.key === 'Enter') loginBtn.click();
+  });
+  logoutBtn.addEventListener('click', () => {
+    sessionStorage.removeItem('adminLoggedIn');
+    galleryScreen.style.display = 'none';
+    loginScreen.style.display = 'block';
+    passwordInput.value = '';
+    loginError.textContent = '';
+  });
+  refreshBtn.addEventListener('click', loadSnapshots);
+  async function loadSnapshots() {
+    galleryGrid.innerHTML = '<div class="empty-msg">Loading snapshots...</div>';
+    try {
+      const response = await fetch('/api/snapshots/list');
+      const data = await response.json();
+      if (!data.success || !data.files || data.files.length === 0) {
+        galleryGrid.innerHTML = '<div class="empty-msg">📭 No snapshots saved yet. Draw something and save!</div>';
+        countBadge.textContent = '0 images';
+        return;
+      }
+      // Sort files by name (newest first)
+      const files = data.files.sort().reverse();
+      countBadge.textContent = `${files.length} images`;
+      let html = '';
+      files.forEach(filename => {
+        const imageUrl = `/snapshots/${filename}`;
+        html += `
+          <div class="gallery-item">
+            <img src="${imageUrl}" alt="${filename}" loading="lazy"
+                 onerror="this.src='data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22250%22 height=%22200%22%3E%3Crect fill=%22%23333%22 width=%22250%22 height=%22200%22/%3E%3Ctext x=%2250%22 y=%22100%22 fill=%22%23666%22 font-family=%22sans-serif%22 font-size=%2214%22%3EImage not found%3C/text%3E%3C/svg%3E'" />
+            <div class="info">
+              <span>${filename}</span>
+              <a href="${imageUrl}" target="_blank">🔗 View</a>
+            </div>
+          </div>
+        `;
+      });
+      galleryGrid.innerHTML = html;
+    } catch (err) {
+      console.error('[Admin] Load error:', err);
+      galleryGrid.innerHTML = '<div class="empty-msg">❌ Error loading snapshots. Is the server running?</div>';
+    }
+  }
+  // Auto-refresh every 30 seconds
+  setInterval(() => {
+    if (sessionStorage.getItem('adminLoggedIn') === 'true') {
+      loadSnapshots();
+    }
+  }, 30000);
+</script>
+</body>
+</html>