157 lines
6.4 KiB
HTML
157 lines
6.4 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 id="status-badge" class="badge error">Disconnected</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>
|
|
<button id="btn-refresh-groups" class="primary-btn">Refresh Groups</button>
|
|
</header>
|
|
|
|
<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>
|
|
|
|
<div class="card mt-4">
|
|
<h3>Create New Group</h3>
|
|
<form id="create-group-form" class="form-grid">
|
|
<div class="form-group">
|
|
<label>Group Name</label>
|
|
<input type="text" id="new-group-name" placeholder="e.g. Alerts Channel" required>
|
|
</div>
|
|
<div class="form-group">
|
|
<label>Initial Participant (JID or Phone)</label>
|
|
<input type="text" id="new-group-participant" placeholder="e.g. 14085551234@c.us" required>
|
|
</div>
|
|
<button type="submit" class="primary-btn">Create Group</button>
|
|
</form>
|
|
</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>
|