Spaces:

VISHAL18for4
/

camera_draw

Sleeping

File size: 6,917 Bytes

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Admin Gallery</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;
    }
    .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;
    }
    .gallery-item img {
      width: 100%;
      height: 200px;
      object-fit: cover;
      display: block;
      background: #111;
    }
    .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;
    }
    .empty-msg {
      grid-column: 1 / -1;
      text-align: center;
      padding: 60px;
      color: #666;
      font-size: 1.2rem;
    }
    .refresh-btn, .back-btn, .logout-btn {
      background: #533483;
      border: none;
      color: #fff;
      padding: 8px 20px;
      border-radius: 8px;
      cursor: pointer;
    }
    .refresh-btn:hover, .back-btn:hover { background: #6a4a9a; }
    .logout-btn { background: #333; }
    .logout-btn:hover { background: #555; }
    .back-btn { background: #2a2a5a; }
  </style>
</head>
<body>

<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>

<div id="galleryScreen" class="gallery">
  <div class="gallery-header">
    <h1>📸 Saved Snapshots</h1>
    <div>
      <button class="back-btn" id="backBtn">⬅ Back to Draw</button>
      <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');
  const backBtn = document.getElementById('backBtn');

  backBtn.addEventListener('click', () => { window.location.href = '/'; });

  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.';
      passwordInput.value = '';
      passwordInput.focus();
    }
  });

  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.</div>';
        countBadge.textContent = '0 images';
        return;
      }

      const files = data.files.sort().reverse();
      countBadge.textContent = `${files.length} images`;

      let html = '';
      files.forEach(filename => {
        html += `
          <div class="gallery-item">
            <img src="/snapshots/${filename}" alt="${filename}" loading="lazy" />
            <div class="info">
              <span>${filename}</span>
              <a href="/snapshots/${filename}" target="_blank">🔗 View</a>
            </div>
          </div>
        `;
      });
      galleryGrid.innerHTML = html;
    } catch (err) {
      galleryGrid.innerHTML = '<div class="empty-msg">❌ Error loading snapshots.</div>';
    }
  }

  setInterval(() => {
    if (sessionStorage.getItem('adminLoggedIn') === 'true') {
      loadSnapshots();
    }
  }, 30000);
</script>
</body>
</html>