241 lines
9.3 KiB
HTML
241 lines
9.3 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>Telegram Scraper Control Panel</title>
|
|
<link rel="stylesheet" href="/static/style.css" />
|
|
</head>
|
|
<body>
|
|
<div class="app-shell">
|
|
<aside class="sidebar">
|
|
<div class="brand-block">
|
|
<div class="eyebrow">Telegram Scraper</div>
|
|
<h1>Control</h1>
|
|
<p class="muted">Local scraper console for channels, jobs, and continuous runs.</p>
|
|
</div>
|
|
|
|
<nav class="nav-links">
|
|
<a class="nav-link active" href="/">Dashboard</a>
|
|
<a class="nav-link" href="/viewer">Message Viewer</a>
|
|
<a class="nav-link" href="/swagger">API Docs</a>
|
|
<a class="nav-link" href="/health">Health</a>
|
|
</nav>
|
|
|
|
<section class="status-card">
|
|
<div class="section-title">Telegram Status</div>
|
|
<div id="auth-status" class="status-badge">Checking...</div>
|
|
<p id="auth-details" class="muted small"></p>
|
|
</section>
|
|
|
|
<section class="status-card">
|
|
<div class="section-title">Actions</div>
|
|
<button class="button primary" id="scrape-all-btn">Scrape all channels</button>
|
|
<button class="button" id="export-all-btn">Export all data</button>
|
|
<button class="button" id="refresh-dialogs-btn">Refresh dialogs</button>
|
|
<button class="button" id="open-settings-btn" type="button">Settings</button>
|
|
</section>
|
|
</aside>
|
|
|
|
<main class="content">
|
|
<div class="content-tabs">
|
|
<button class="content-tab active" data-tab-target="overview-tab" type="button">Overview</button>
|
|
<button class="content-tab" data-tab-target="continuous-tab" type="button">Continuous</button>
|
|
</div>
|
|
|
|
<section id="overview-tab" class="tab-panel active">
|
|
<section class="panel-grid">
|
|
<div class="panel stat-panel">
|
|
<div class="section-title">Channels</div>
|
|
<div id="channel-count" class="stat-value">0</div>
|
|
</div>
|
|
<div class="panel stat-panel">
|
|
<div class="section-title">Media scraping</div>
|
|
<div id="scrape-media-label" class="stat-value stat-compact">OFF</div>
|
|
</div>
|
|
<div class="panel stat-panel">
|
|
<div class="section-title">Forwarding rules</div>
|
|
<div id="forwarding-count" class="stat-value">0</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="panel">
|
|
<div class="panel-header">
|
|
<div>
|
|
<h2>Tracked Channels</h2>
|
|
<p class="muted">Stored in <code>data/state.json</code>. Message stats come from SQLite.</p>
|
|
</div>
|
|
<form id="add-channel-form" class="inline-form">
|
|
<input id="add-channel-id" name="channel_id" placeholder="ID or @username" required />
|
|
<input id="add-channel-name" name="name" placeholder="Display name" />
|
|
<button class="button primary" type="submit">Add</button>
|
|
</form>
|
|
</div>
|
|
|
|
<div class="table-wrap">
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>Channel</th>
|
|
<th>Messages</th>
|
|
<th>Media</th>
|
|
<th>Last message</th>
|
|
<th>Actions</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="channels-table"></tbody>
|
|
</table>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="panel jobs-panel">
|
|
<div class="panel-header">
|
|
<div>
|
|
<h2>Jobs</h2>
|
|
<p class="muted">Queued work runs one job at a time to keep the Telegram session stable.</p>
|
|
</div>
|
|
<button class="button" id="refresh-jobs-btn">Refresh</button>
|
|
</div>
|
|
<div id="jobs-list" class="jobs-list"></div>
|
|
</section>
|
|
</section>
|
|
|
|
<section id="continuous-tab" class="tab-panel">
|
|
<section class="panel">
|
|
<div class="panel-header">
|
|
<div>
|
|
<h2>Continuous Scraping</h2>
|
|
<p class="muted">Runs on a timer and keeps a compact, highlighted run log.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<form id="continuous-form" class="continuous-form">
|
|
<label class="toggle-row">
|
|
<span>Enabled</span>
|
|
<span class="switch">
|
|
<input id="continuous-enabled" type="checkbox" checked />
|
|
<span class="switch-slider"></span>
|
|
</span>
|
|
</label>
|
|
<label class="stack-form">
|
|
<span class="muted small">Interval, minutes</span>
|
|
<input id="continuous-interval" type="number" min="1" value="1" />
|
|
</label>
|
|
<label class="toggle-row">
|
|
<span>All tracked channels</span>
|
|
<span class="switch">
|
|
<input id="continuous-all" type="checkbox" checked />
|
|
<span class="switch-slider"></span>
|
|
</span>
|
|
</label>
|
|
<div class="channel-picker">
|
|
<div class="muted small">Continuous channel set</div>
|
|
<div id="continuous-channel-list" class="checkbox-grid"></div>
|
|
</div>
|
|
<button class="button primary" type="submit">Save continuous settings</button>
|
|
</form>
|
|
|
|
<div class="continuous-meta">
|
|
<div>Status: <span id="continuous-status">-</span></div>
|
|
<div>Last run: <span id="continuous-last-iteration">-</span></div>
|
|
<div>Last error: <span id="continuous-last-error">-</span></div>
|
|
</div>
|
|
|
|
<div id="continuous-logs" class="log-viewer"></div>
|
|
</section>
|
|
</section>
|
|
</main>
|
|
</div>
|
|
|
|
<dialog id="settings-dialog" class="settings-dialog">
|
|
<div class="dialog-shell">
|
|
<div class="dialog-header">
|
|
<div>
|
|
<div class="eyebrow">Settings</div>
|
|
<h2>Telegram & Scraping</h2>
|
|
</div>
|
|
<button class="button button-small" id="close-settings-btn" type="button">Close</button>
|
|
</div>
|
|
|
|
<section class="settings-section">
|
|
<div class="section-title">Telegram Login</div>
|
|
<form id="credentials-form" class="stack-form">
|
|
<input id="api-id-input" name="api_id" placeholder="API ID" />
|
|
<input id="api-hash-input" name="api_hash" placeholder="API Hash" />
|
|
<button class="button" type="submit">Save credentials</button>
|
|
</form>
|
|
|
|
<div class="auth-actions">
|
|
<button class="button primary" id="start-qr-btn" type="button">Start QR login</button>
|
|
</div>
|
|
|
|
<div id="qr-wrap" class="qr-wrap hidden">
|
|
<img id="qr-image" alt="Telegram QR login" />
|
|
<p class="muted small">Open Telegram -> Settings -> Devices -> Scan QR.</p>
|
|
</div>
|
|
|
|
<form id="phone-form" class="stack-form">
|
|
<input id="phone-input" name="phone" placeholder="+1234567890" />
|
|
<button class="button" type="submit">Send code</button>
|
|
</form>
|
|
|
|
<form id="code-form" class="stack-form hidden">
|
|
<input id="code-input" name="code" placeholder="Telegram code" />
|
|
<button class="button" type="submit">Confirm code</button>
|
|
</form>
|
|
|
|
<form id="password-form" class="stack-form hidden">
|
|
<input id="password-input" name="password" type="password" placeholder="2FA password" />
|
|
<button class="button" type="submit">Confirm password</button>
|
|
</form>
|
|
</section>
|
|
|
|
<section class="settings-section">
|
|
<div class="section-title">Scraping</div>
|
|
<label class="toggle-row">
|
|
<span>Download media</span>
|
|
<span class="switch">
|
|
<input id="scrape-media-toggle" type="checkbox" />
|
|
<span class="switch-slider"></span>
|
|
</span>
|
|
</label>
|
|
</section>
|
|
</div>
|
|
</dialog>
|
|
|
|
<template id="channel-row-template">
|
|
<tr>
|
|
<td>
|
|
<div class="channel-name"></div>
|
|
<div class="muted small channel-id"></div>
|
|
</td>
|
|
<td class="message-count"></td>
|
|
<td class="media-count"></td>
|
|
<td class="last-date"></td>
|
|
<td>
|
|
<div class="action-row">
|
|
<button class="button button-small scrape-btn">Scrape</button>
|
|
<button class="button button-small export-btn">Export</button>
|
|
<button class="button button-small export-view-btn">Viewer</button>
|
|
<button class="button button-small media-btn">Rescrape media</button>
|
|
<button class="button button-small danger remove-btn">Remove</button>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
</template>
|
|
|
|
<template id="job-template">
|
|
<article class="job-card">
|
|
<div class="job-head">
|
|
<div class="job-title"></div>
|
|
<div class="job-status"></div>
|
|
</div>
|
|
<div class="muted small job-time"></div>
|
|
<pre class="job-logs"></pre>
|
|
</article>
|
|
</template>
|
|
|
|
<script src="/static/app.js"></script>
|
|
</body>
|
|
</html>
|