Spaces:

maylinejix
/

Anjay

Sleeping

App Files Files Community

maylinejix commited on Jan 7

Commit

50c1c55

verified ·

1 Parent(s): 1178956

Upload 7 files

Browse files

Files changed (7) hide show

public/admin.html +84 -0
public/admin.js +98 -0
public/home.html +35 -0
public/home.js +77 -0
public/styles.css +520 -0
public/verify.html +25 -0
public/verify.js +247 -0

public/admin.html ADDED Viewed

	@@ -0,0 +1,84 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Admin Panel - ShortLink</title>
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+  <link rel="stylesheet" href="/styles.css">
+</head>
+<body>
+  <div class="container">
+    <header class="header">
+      <div>
+        <h1 class="title">
+          <i class="fas fa-user-shield"></i> Admin Panel
+        </h1>
+        <p class="subtitle">Create and manage short links</p>
+      </div>
+      <button onclick="location.href='/home'" class="btn btn-secondary">
+        <i class="fas fa-home"></i> Back to Home
+      </button>
+    </header>
+    <div id="login-section" class="card">
+      <h2 class="card-title">
+        <i class="fas fa-key"></i> Login
+      </h2>
+      <form id="login-form">
+        <div class="form-group">
+          <label><i class="fas fa-lock"></i> Password</label>
+          <input type="password" id="password" class="input" placeholder="Enter admin password" required>
+        </div>
+        <button type="submit" class="btn btn-primary btn-full">
+          <i class="fas fa-sign-in-alt"></i> Login
+        </button>
+      </form>
+    </div>
+    <div id="create-section" class="card" style="display: none;">
+      <h2 class="card-title">
+        <i class="fas fa-plus-circle"></i> Make Short URL
+      </h2>
+      <form id="create-form">
+        <div class="form-group">
+          <label><i class="fas fa-heading"></i> Title</label>
+          <input type="text" id="title" class="input" placeholder="SKIP SFL.GL" required>
+        </div>
+        <div class="form-group">
+          <label><i class="fas fa-external-link-alt"></i> Redirect URL</label>
+          <input type="url" id="redirect" class="input" placeholder="https://github.com/herzonly" required>
+        </div>
+        <div class="form-group">
+          <label><i class="fas fa-tag"></i> Short Name</label>
+          <input type="text" id="name" class="input" placeholder="skipsfl" required>
+          <small class="help-text">Access: yourdomain.com/home/url/<strong>skipsfl</strong>/id</small>
+        </div>
+        <div class="form-group">
+          <label class="switch-label">
+            <span><i class="fas fa-check-circle"></i> Require Verification</span>
+            <label class="switch">
+              <input type="checkbox" id="verify">
+              <span class="slider"></span>
+            </label>
+          </label>
+        </div>
+        <button type="submit" class="btn btn-primary btn-full">
+          <i class="fas fa-plus"></i> Create Short Link
+        </button>
+      </form>
+      <button onclick="logout()" class="btn btn-danger btn-full" style="margin-top: 1rem;">
+        <i class="fas fa-sign-out-alt"></i> Logout
+      </button>
+    </div>
+  </div>
+  <div id="alert-container"></div>
+  <script src="/admin.js"></script>
+</body>
+</html>

public/admin.js ADDED Viewed

	@@ -0,0 +1,98 @@

+// admin.js - Admin Panel JavaScript
+const loginSection = document.getElementById('login-section');
+const createSection = document.getElementById('create-section');
+const loginForm = document.getElementById('login-form');
+const createForm = document.getElementById('create-form');
+// Check if already logged in
+if (localStorage.getItem('admin_token')) {
+  loginSection.style.display = 'none';
+  createSection.style.display = 'block';
+}
+loginForm.addEventListener('submit', async (e) => {
+  e.preventDefault();
+  const password = document.getElementById('password').value;
+  try {
+    const response = await fetch('/api/login', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ password })
+    });
+    const data = await response.json();
+    if (data.success) {
+      localStorage.setItem('admin_token', data.token);
+      loginSection.style.display = 'none';
+      createSection.style.display = 'block';
+      showAlert('success', 'Login successful!');
+    } else {
+      showAlert('error', 'Invalid password');
+    }
+  } catch (error) {
+    showAlert('error', 'Login failed');
+  }
+});
+createForm.addEventListener('submit', async (e) => {
+  e.preventDefault();
+  const title = document.getElementById('title').value;
+  const redirect = document.getElementById('redirect').value;
+  const name = document.getElementById('name').value;
+  const verify = document.getElementById('verify').checked;
+  const token = localStorage.getItem('admin_token');
+  try {
+    const response = await fetch('/api/create', {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+        'Authorization': `Bearer ${token}`
+      },
+      body: JSON.stringify({ title, redirect, name, verify })
+    });
+    const data = await response.json();
+    if (data.success) {
+      showAlert('success', 'Short link created successfully!');
+      createForm.reset();
+      setTimeout(() => {
+        window.location.href = '/home';
+      }, 2000);
+    } else {
+      showAlert('error', 'Failed to create link');
+    }
+  } catch (error) {
+    showAlert('error', 'Failed to create link');
+  }
+});
+function logout() {
+  localStorage.removeItem('admin_token');
+  window.location.href = '/home';
+}
+function showAlert(type, message) {
+  const container = document.getElementById('alert-container');
+  const alert = document.createElement('div');
+  alert.className = `alert alert-${type}`;
+  let icon = 'fa-check-circle';
+  if (type === 'error') icon = 'fa-exclamation-circle';
+  else if (type === 'info') icon = 'fa-info-circle';
+  alert.innerHTML = `
+    <span class="alert-icon"><i class="fas ${icon}"></i></span>
+    <span>${message}</span>
+    <button class="alert-close" onclick="this.parentElement.remove()">
+      <i class="fas fa-times"></i>
+    </button>
+  `;
+  container.appendChild(alert);
+  setTimeout(() => alert.remove(), 5000);
+}

public/home.html ADDED Viewed

	@@ -0,0 +1,35 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>ShortLink Manager</title>
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+  <link rel="stylesheet" href="/styles.css">
+</head>
+<body>
+  <div class="container">
+    <header class="header">
+      <div>
+        <h1 class="title">
+          <i class="fas fa-link"></i> ShortLink Manager
+        </h1>
+        <p class="subtitle">Secure URL shortening with OCR verification</p>
+      </div>
+      <button onclick="location.href='/home/admin/create'" class="btn btn-primary">
+        <i class="fas fa-shield-alt"></i> Admin Panel
+      </button>
+    </header>
+    <div id="links-container" class="grid">
+      <div class="loading">
+        <i class="fas fa-spinner fa-spin fa-2x"></i>
+        <p>Loading links...</p>
+      </div>
+    </div>
+  </div>
+  <div id="alert-container"></div>
+  <script src="/home.js"></script>
+</body>
+</html>

public/home.js ADDED Viewed

	@@ -0,0 +1,77 @@

+// home.js - Homepage JavaScript
+async function loadLinks() {
+  try {
+    const response = await fetch('/api/links');
+    const links = await response.json();
+    const container = document.getElementById('links-container');
+    if (links.length === 0) {
+      container.innerHTML = `
+        <div class="empty-state">
+          <div class="empty-state-icon">
+            <i class="fas fa-link fa-4x"></i>
+          </div>
+          <p>No short links created yet</p>
+        </div>
+      `;
+      return;
+    }
+    container.innerHTML = links.map(link => `
+      <div class="card">
+        <div class="card-header">
+          <h3 class="card-title">
+            <i class="fas fa-file-alt"></i> ${escapeHtml(link.title)}
+          </h3>
+          ${link.verify ? '<span class="badge"><i class="fas fa-lock"></i> Verified</span>' : ''}
+        </div>
+        <p class="card-text">
+          <i class="fas fa-external-link-alt"></i> ${escapeHtml(link.redirect)}
+        </p>
+        <div class="code-box">
+          <i class="fas fa-code"></i> /home/url/${escapeHtml(link.name)}/${link.id}
+        </div>
+        <button onclick="goToLink('${link.name}', '${link.id}')" class="btn btn-primary btn-full">
+          <i class="fas fa-rocket"></i> Access Link
+        </button>
+      </div>
+    `).join('');
+  } catch (error) {
+    console.error('Error loading links:', error);
+    showAlert('error', 'Failed to load links');
+  }
+}
+function goToLink(name, id) {
+  window.location.href = `/home/url/${name}/${id}`;
+}
+function escapeHtml(text) {
+  const div = document.createElement('div');
+  div.textContent = text;
+  return div.innerHTML;
+}
+function showAlert(type, message) {
+  const container = document.getElementById('alert-container');
+  const alert = document.createElement('div');
+  alert.className = `alert alert-${type}`;
+  let icon = 'fa-check-circle';
+  if (type === 'error') icon = 'fa-exclamation-circle';
+  else if (type === 'info') icon = 'fa-info-circle';
+  alert.innerHTML = `
+    <span class="alert-icon"><i class="fas ${icon}"></i></span>
+    <span>${message}</span>
+    <button class="alert-close" onclick="this.parentElement.remove()">
+      <i class="fas fa-times"></i>
+    </button>
+  `;
+  container.appendChild(alert);
+  setTimeout(() => alert.remove(), 5000);
+}
+// Load links on page load
+loadLinks();

public/styles.css ADDED Viewed

	@@ -0,0 +1,520 @@

+/* styles.css - Complete Styling */
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+body {
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
+  background: linear-gradient(135deg, #1e293b 0%, #1e40af 50%, #1e293b 100%);
+  min-height: 100vh;
+  color: #f8fafc;
+  padding: 20px;
+}
+.container {
+  max-width: 1200px;
+  margin: 0 auto;
+}
+.verify-container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 100vh;
+  padding: 20px;
+}
+.header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 2rem;
+  flex-wrap: wrap;
+  gap: 1rem;
+}
+.title {
+  font-size: 2.5rem;
+  font-weight: 700;
+  color: #fff;
+  margin-bottom: 0.5rem;
+}
+.title i {
+  color: #60a5fa;
+  margin-right: 0.5rem;
+}
+.subtitle {
+  color: #93c5fd;
+  font-size: 1.1rem;
+}
+.btn {
+  padding: 0.75rem 1.5rem;
+  border: none;
+  border-radius: 0.5rem;
+  font-size: 1rem;
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  transition: all 0.3s;
+  font-weight: 600;
+}
+.btn i {
+  font-size: 1.1rem;
+}
+.btn-primary {
+  background: #2563eb;
+  color: white;
+}
+.btn-primary:hover {
+  background: #1d4ed8;
+  transform: translateY(-2px);
+  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.4);
+}
+.btn-secondary {
+  background: #475569;
+  color: white;
+}
+.btn-secondary:hover {
+  background: #334155;
+  box-shadow: 0 4px 12px rgba(71, 85, 105, 0.4);
+}
+.btn-danger {
+  background: #dc2626;
+  color: white;
+}
+.btn-danger:hover {
+  background: #b91c1c;
+  box-shadow: 0 4px 12px rgba(220, 38, 38, 0.4);
+}
+.btn-success {
+  background: #16a34a;
+  color: white;
+}
+.btn-success:hover {
+  background: #15803d;
+  box-shadow: 0 4px 12px rgba(22, 163, 74, 0.4);
+}
+.btn-full {
+  width: 100%;
+  justify-content: center;
+}
+.grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
+  gap: 1.5rem;
+}
+.card {
+  background: rgba(30, 41, 59, 0.6);
+  backdrop-filter: blur(10px);
+  border: 1px solid rgba(148, 163, 184, 0.3);
+  border-radius: 1rem;
+  padding: 1.5rem;
+  transition: all 0.3s;
+}
+.card:hover {
+  border-color: #3b82f6;
+  transform: translateY(-4px);
+  box-shadow: 0 8px 24px rgba(59, 130, 246, 0.2);
+}
+.verify-card {
+  max-width: 600px;
+  width: 100%;
+}
+.card-title {
+  font-size: 1.5rem;
+  margin-bottom: 1rem;
+  color: #fff;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+.card-title i {
+  color: #60a5fa;
+}
+.card-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: start;
+  margin-bottom: 1rem;
+}
+.badge {
+  background: #2563eb;
+  color: white;
+  font-size: 0.75rem;
+  padding: 0.25rem 0.75rem;
+  border-radius: 0.25rem;
+  font-weight: 600;
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+}
+.card-text {
+  color: #cbd5e1;
+  font-size: 0.9rem;
+  margin-bottom: 1rem;
+  word-break: break-all;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+.card-text i {
+  color: #60a5fa;
+  flex-shrink: 0;
+}
+.code-box {
+  background: #0f172a;
+  color: #60a5fa;
+  padding: 0.75rem;
+  border-radius: 0.5rem;
+  font-family: 'Courier New', monospace;
+  font-size: 0.9rem;
+  margin-bottom: 1rem;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+.code-box i {
+  color: #93c5fd;
+}
+.form-group {
+  margin-bottom: 1.5rem;
+}
+.form-group label {
+  display: block;
+  margin-bottom: 0.5rem;
+  color: #e2e8f0;
+  font-weight: 500;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+.form-group label i {
+  color: #60a5fa;
+}
+.input {
+  width: 100%;
+  padding: 0.75rem;
+  background: rgba(15, 23, 42, 0.6);
+  border: 1px solid rgba(148, 163, 184, 0.3);
+  border-radius: 0.5rem;
+  color: #fff;
+  font-size: 1rem;
+  transition: all 0.3s;
+}
+.input:focus {
+  outline: none;
+  border-color: #3b82f6;
+  background: rgba(15, 23, 42, 0.8);
+  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
+}
+.input::placeholder {
+  color: #64748b;
+}
+.help-text {
+  display: block;
+  margin-top: 0.5rem;
+  color: #94a3b8;
+  font-size: 0.875rem;
+}
+.switch-label {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.switch-label span {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+.switch {
+  position: relative;
+  display: inline-block;
+  width: 60px;
+  height: 34px;
+}
+.switch input {
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+.slider {
+  position: absolute;
+  cursor: pointer;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: #475569;
+  transition: 0.4s;
+  border-radius: 34px;
+}
+.slider:before {
+  position: absolute;
+  content: "";
+  height: 26px;
+  width: 26px;
+  left: 4px;
+  bottom: 4px;
+  background-color: white;
+  transition: 0.4s;
+  border-radius: 50%;
+}
+input:checked + .slider {
+  background-color: #2563eb;
+}
+input:checked + .slider:before {
+  transform: translateX(26px);
+}
+.loading {
+  text-align: center;
+  padding: 3rem;
+  color: #94a3b8;
+  font-size: 1.1rem;
+}
+.loading i {
+  display: block;
+  margin: 0 auto 1rem;
+  color: #60a5fa;
+}
+.loading p {
+  margin-top: 1rem;
+}
+.empty-state {
+  text-align: center;
+  padding: 4rem 2rem;
+  color: #64748b;
+}
+.empty-state-icon {
+  font-size: 4rem;
+  margin-bottom: 1rem;
+  color: #475569;
+}
+.empty-state-icon i {
+  color: #475569;
+}
+.alert {
+  position: fixed;
+  top: 20px;
+  right: 20px;
+  background: #1e293b;
+  border: 2px solid;
+  border-radius: 0.75rem;
+  padding: 1rem 1.5rem;
+  max-width: 400px;
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  animation: slideIn 0.3s ease-out;
+  z-index: 1000;
+  box-shadow: 0 10px 25px rgba(0,0,0,0.3);
+}
+.alert-success {
+  border-color: #16a34a;
+}
+.alert-error {
+  border-color: #dc2626;
+}
+.alert-info {
+  border-color: #2563eb;
+}
+.alert-icon {
+  font-size: 1.5rem;
+}
+.alert-success .alert-icon {
+  color: #16a34a;
+}
+.alert-error .alert-icon {
+  color: #dc2626;
+}
+.alert-info .alert-icon {
+  color: #2563eb;
+}
+.alert-close {
+  background: none;
+  border: none;
+  color: #fff;
+  font-size: 1.2rem;
+  cursor: pointer;
+  margin-left: auto;
+  padding: 0;
+  line-height: 1;
+  transition: all 0.3s;
+}
+.alert-close:hover {
+  color: #cbd5e1;
+}
+@keyframes slideIn {
+  from {
+    transform: translateX(100%);
+    opacity: 0;
+  }
+  to {
+    transform: translateX(0);
+    opacity: 1;
+  }
+}
+.upload-area {
+  border: 2px dashed rgba(148, 163, 184, 0.3);
+  border-radius: 0.75rem;
+  padding: 3rem 2rem;
+  text-align: center;
+  cursor: pointer;
+  transition: all 0.3s;
+  background: rgba(15, 23, 42, 0.3);
+}
+.upload-area:hover {
+  border-color: #3b82f6;
+  background: rgba(37, 99, 235, 0.1);
+}
+.upload-area.dragover {
+  border-color: #3b82f6;
+  background: rgba(37, 99, 235, 0.2);
+  transform: scale(1.02);
+}
+.upload-icon {
+  margin-bottom: 1rem;
+  color: #60a5fa;
+}
+.file-input {
+  display: none;
+}
+.verify-title {
+  font-size: 2rem;
+  margin-bottom: 1rem;
+  text-align: center;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.75rem;
+}
+.verify-title i {
+  color: #60a5fa;
+}
+.verify-subtitle {
+  color: #cbd5e1;
+  text-align: center;
+  margin-bottom: 2rem;
+  line-height: 1.6;
+}
+.verify-subtitle a {
+  color: #60a5fa;
+  text-decoration: none;
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+}
+.verify-subtitle a:hover {
+  text-decoration: underline;
+}
+.countdown {
+  text-align: center;
+  font-size: 3rem;
+  color: #3b82f6;
+  font-weight: 700;
+  margin: 2rem 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+}
+@media (max-width: 768px) {
+  .title {
+    font-size: 2rem;
+  }
+  .header {
+    flex-direction: column;
+    align-items: stretch;
+  }
+  .grid {
+    grid-template-columns: 1fr;
+  }
+  .alert {
+    right: 10px;
+    left: 10px;
+    max-width: none;
+  }
+  .countdown {
+    font-size: 2rem;
+  }
+  .verify-title {
+    font-size: 1.5rem;
+  }
+}

public/verify.html ADDED Viewed

	@@ -0,0 +1,25 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Verification Required</title>
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+  <link rel="stylesheet" href="/styles.css">
+</head>
+<body>
+  <div class="container verify-container">
+    <div class="card verify-card">
+      <div id="verify-content">
+        <div class="loading">
+          <i class="fas fa-spinner fa-spin fa-3x"></i>
+          <p>Loading...</p>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div id="alert-container"></div>
+  <script src="/verify.js"></script>
+</body>
+</html>

public/verify.js ADDED Viewed

	@@ -0,0 +1,247 @@

+// verify.js - Verification Page JavaScript
+let linkData = null;
+async function init() {
+  const pathParts = window.location.pathname.split('/');
+  const name = pathParts[3];
+  const id = pathParts[4];
+  try {
+    const response = await fetch(`/api/link/${name}/${id}`);
+    linkData = await response.json();
+    if (linkData.error) {
+      showError('Link not found');
+      return;
+    }
+    if (!linkData.verify) {
+      // No verification required, just redirect
+      showDirectRedirect();
+    } else {
+      // Show verification form
+      showVerificationForm();
+    }
+  } catch (error) {
+    showError('Failed to load link');
+  }
+}
+function showDirectRedirect() {
+  document.getElementById('verify-content').innerHTML = `
+    <h2 class="verify-title">
+      <i class="fas fa-link"></i> ${escapeHtml(linkData.title)}
+    </h2>
+    <p class="verify-subtitle">Click the button below to continue</p>
+    <button onclick="redirect()" class="btn btn-success btn-full">
+      <i class="fas fa-rocket"></i> Go to Link
+    </button>
+  `;
+}
+function showVerificationForm() {
+  document.getElementById('verify-content').innerHTML = `
+    <h2 class="verify-title">
+      <i class="fas fa-shield-alt"></i> ${escapeHtml(linkData.title)}
+    </h2>
+    <p class="verify-subtitle">
+      This URL requires verification to access. Please upload a screenshot of joining our WhatsApp channel.<br>
+      If you are not joining yet, <a href="https://whatsapp.com/channel/0029VaGVOvq1iUxY6WgHLv2R" target="_blank">
+        <i class="fab fa-whatsapp"></i> click here
+      </a>.
+    </p>
+    <div class="upload-area" id="upload-area">
+      <div class="upload-icon">
+        <i class="fas fa-cloud-upload-alt fa-4x"></i>
+      </div>
+      <p><strong>Drop image here</strong> or click to upload</p>
+      <p style="color: #94a3b8; font-size: 0.9rem; margin-top: 0.5rem;">
+        <i class="fas fa-image"></i> PNG, JPG up to 10MB
+      </p>
+      <input type="file" id="file-input" class="file-input" accept="image/*">
+    </div>
+    <div id="upload-status" style="margin-top: 1.5rem; text-align: center;"></div>
+  `;
+  setupUpload();
+}
+function setupUpload() {
+  const uploadArea = document.getElementById('upload-area');
+  const fileInput = document.getElementById('file-input');
+  uploadArea.addEventListener('click', () => fileInput.click());
+  uploadArea.addEventListener('dragover', (e) => {
+    e.preventDefault();
+    uploadArea.classList.add('dragover');
+  });
+  uploadArea.addEventListener('dragleave', () => {
+    uploadArea.classList.remove('dragover');
+  });
+  uploadArea.addEventListener('drop', (e) => {
+    e.preventDefault();
+    uploadArea.classList.remove('dragover');
+    const file = e.dataTransfer.files[0];
+    if (file) handleFile(file);
+  });
+  fileInput.addEventListener('change', (e) => {
+    const file = e.target.files[0];
+    if (file) handleFile(file);
+  });
+}
+async function handleFile(file) {
+  if (!file.type.startsWith('image/')) {
+    showAlert('error', 'Please upload an image file');
+    return;
+  }
+  const statusDiv = document.getElementById('upload-status');
+  statusDiv.innerHTML = `
+    <div class="loading">
+      <i class="fas fa-spinner fa-spin fa-2x"></i>
+      <p>Verifying image with OCR...</p>
+    </div>
+  `;
+  const formData = new FormData();
+  formData.append('image', file);
+  try {
+    const response = await fetch('/api/verify', {
+      method: 'POST',
+      body: formData
+    });
+    const result = await response.json();
+    if (result.success) {
+      if (result.verified) {
+        statusDiv.innerHTML = `
+          <p style="color: #16a34a; font-weight: 600;">
+            <i class="fas fa-check-circle fa-2x"></i><br>
+            Verification successful!
+          </p>
+        `;
+        startCountdown();
+      } else {
+        if (result.channelName !== 'NOTMEBOTZ') {
+          showSweetAlert("That's not our channel :(");
+          statusDiv.innerHTML = `
+            <p style="color: #dc2626;">
+              <i class="fas fa-times-circle fa-2x"></i><br>
+              Wrong channel. Please join NOTMEBOTZ channel.
+            </p>
+          `;
+        } else if (result.hasFollowButton || result.hasPrivacy) {
+          statusDiv.innerHTML = `
+            <p style="color: #dc2626;">
+              <i class="fas fa-exclamation-triangle fa-2x"></i><br>
+              You haven't joined the channel yet. Please join first!
+            </p>
+          `;
+          showSweetAlert("Please join our WhatsApp channel first!");
+        }
+      }
+    } else {
+      showAlert('error', 'Verification failed');
+      statusDiv.innerHTML = `
+        <p style="color: #dc2626;">
+          <i class="fas fa-times-circle fa-2x"></i><br>
+          Verification failed. Please try again.
+        </p>
+      `;
+    }
+  } catch (error) {
+    showAlert('error', 'Verification error');
+    statusDiv.innerHTML = `
+      <p style="color: #dc2626;">
+        <i class="fas fa-times-circle fa-2x"></i><br>
+        Error occurred. Please try again.
+      </p>
+    `;
+  }
+}
+function startCountdown() {
+  let seconds = 5;
+  const statusDiv = document.getElementById('upload-status');
+  const interval = setInterval(() => {
+    statusDiv.innerHTML = `
+      <p style="color: #16a34a; margin-bottom: 1rem;">
+        <i class="fas fa-check-circle fa-2x"></i><br>
+        Verification successful!
+      </p>
+      <div class="countdown">
+        <i class="fas fa-clock"></i> ${seconds}
+      </div>
+      <p style="color: #cbd5e1;">Redirecting...</p>
+    `;
+    seconds--;
+    if (seconds < 0) {
+      clearInterval(interval);
+      redirect();
+    }
+  }, 1000);
+}
+function redirect() {
+  window.location.href = linkData.redirect;
+}
+function showError(message) {
+  document.getElementById('verify-content').innerHTML = `
+    <div class="empty-state">
+      <div class="empty-state-icon">
+        <i class="fas fa-exclamation-triangle fa-4x"></i>
+      </div>
+      <p>${message}</p>
+      <button onclick="location.href='/home'" class="btn btn-primary" style="margin-top: 1.5rem;">
+        <i class="fas fa-home"></i> Back to Home
+      </button>
+    </div>
+  `;
+}
+function showSweetAlert(message) {
+  showAlert('error', message);
+}
+function showAlert(type, message) {
+  const container = document.getElementById('alert-container');
+  if (!container) return;
+  let icon = 'fa-check-circle';
+  if (type === 'error') icon = 'fa-exclamation-circle';
+  else if (type === 'info') icon = 'fa-info-circle';
+  const alert = document.createElement('div');
+  alert.className = `alert alert-${type}`;
+  alert.innerHTML = `
+    <span class="alert-icon"><i class="fas ${icon}"></i></span>
+    <span>${message}</span>
+    <button class="alert-close" onclick="this.parentElement.remove()">
+      <i class="fas fa-times"></i>
+    </button>
+  `;
+  container.appendChild(alert);
+  setTimeout(() => alert.remove(), 5000);
+}
+function escapeHtml(text) {
+  const div = document.createElement('div');
+  div.textContent = text;
+  return div.innerHTML;
+}
+// Initialize page
+init();