155 lines
6.5 KiB
HTML
155 lines
6.5 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>WhatsApp Gateway Dashboard</title>
|
|
<base href="/proxy/whatsapp/">
|
|
<link rel="stylesheet" href="style.css">
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
|
|
<script src="socket.io/socket.io.js"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/qrcode-generator@1.4.4/qrcode.min.js"></script>
|
|
</head>
|
|
<body>
|
|
<div class="app-container">
|
|
<!-- Sidebar -->
|
|
<aside class="sidebar">
|
|
<div class="brand">
|
|
<div class="logo"></div>
|
|
<h1>WhatsApp Gateway</h1>
|
|
</div>
|
|
<nav>
|
|
<button class="nav-btn active" data-tab="status">Connection Status</button>
|
|
<button class="nav-btn" data-tab="groups">Groups</button>
|
|
<button class="nav-btn" data-tab="apps">Connected Apps</button>
|
|
<button class="nav-btn" data-tab="test">Test Message</button>
|
|
</nav>
|
|
</aside>
|
|
|
|
<!-- Main Content -->
|
|
<main class="content">
|
|
<!-- Status Tab -->
|
|
<section id="status" class="tab-pane active">
|
|
<header>
|
|
<h2>Connection Status</h2>
|
|
<div style="display:flex; gap:10px; align-items:center;">
|
|
<button id="logout-btn" class="btn" style="background-color: #ef4444; color: white; display: none; padding: 0.25rem 0.75rem; font-size: 0.875rem;">Logout & Change WhatsApp</button>
|
|
<div id="status-badge" class="badge error">Disconnected</div>
|
|
</div>
|
|
</header>
|
|
|
|
<div class="card status-card">
|
|
<div id="qr-container" class="qr-placeholder">
|
|
<p>Waiting for QR code...</p>
|
|
</div>
|
|
<div id="connection-info">
|
|
<h3>Device Link</h3>
|
|
<p>Open WhatsApp on your phone, go to Linked Devices, and scan the QR code to connect the gateway.</p>
|
|
<div class="logs" id="activity-log">
|
|
<p class="log-entry system">System initialized...</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Groups Tab -->
|
|
<section id="groups" class="tab-pane">
|
|
<header>
|
|
<h2>Group Management</h2>
|
|
</header>
|
|
|
|
<div class="card mb-4" style="margin-bottom: 20px;">
|
|
<h3>Add Group by Invite Link</h3>
|
|
<form id="add-group-link-form" class="form-grid" style="display:flex; gap:10px; align-items:flex-end;">
|
|
<div class="form-group" style="flex:1;">
|
|
<label>WhatsApp Invite Link</label>
|
|
<input type="text" id="new-invite-link" placeholder="https://chat.whatsapp.com/..." required>
|
|
</div>
|
|
<button type="submit" class="primary-btn">Add Group</button>
|
|
</form>
|
|
</div>
|
|
|
|
<div class="card">
|
|
<table class="data-table">
|
|
<thead>
|
|
<tr>
|
|
<th>Group Name</th>
|
|
<th>Participants</th>
|
|
<th>Action</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="groups-table-body">
|
|
<tr>
|
|
<td colspan="3" class="text-center">Loading groups...</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Connected Apps Tab -->
|
|
<section id="apps" class="tab-pane">
|
|
<header>
|
|
<h2>Connected Apps</h2>
|
|
<button id="btn-refresh-apps" class="primary-btn">Refresh Apps</button>
|
|
</header>
|
|
|
|
<div class="card">
|
|
<table class="data-table">
|
|
<thead>
|
|
<tr>
|
|
<th>App Name</th>
|
|
<th>Messages Sent</th>
|
|
<th>Last Seen</th>
|
|
<th>IP Address</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="apps-table-body">
|
|
<tr>
|
|
<td colspan="4" class="text-center">Loading apps...</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Test Message Tab -->
|
|
<section id="test" class="tab-pane">
|
|
<header>
|
|
<h2>Test Message</h2>
|
|
</header>
|
|
|
|
<div class="card">
|
|
<form id="test-msg-form" class="form-stacked">
|
|
<div class="form-group">
|
|
<label>Recipient (Phone, Group JID, or Invite Link)</label>
|
|
<input type="text" id="test-to" placeholder="e.g. +14085551234" required>
|
|
</div>
|
|
<div class="form-group">
|
|
<label>Message Payload</label>
|
|
<textarea id="test-body" rows="4" placeholder="Hello from WhatsApp Gateway!" required></textarea>
|
|
</div>
|
|
<button type="submit" class="primary-btn">Send Message</button>
|
|
<div id="test-result" class="mt-2"></div>
|
|
</form>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
</div>
|
|
|
|
<!-- Modal for Invite Links -->
|
|
<div id="invite-modal" class="modal">
|
|
<div class="modal-content card">
|
|
<span class="close-modal">×</span>
|
|
<h2>Group Invite Link</h2>
|
|
<div class="form-group mt-2">
|
|
<input type="text" id="invite-link-input" readonly>
|
|
</div>
|
|
<button id="btn-copy-link" class="primary-btn mt-2">Copy Link</button>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="app.js"></script>
|
|
</body>
|
|
</html>
|