Files
telegram-scraper/webui/index.html
T

132 lines
5.0 KiB
HTML

<!DOCTYPE html>
<html lang="ru">
<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 Panel</h1>
<p class="muted">Обычная админка для сервера: состояния, каналы, фоновые задачи.</p>
</div>
<nav class="nav-links">
<a class="nav-link active" href="/">Панель</a>
<a class="nav-link" href="/viewer">Просмотр сообщений</a>
</nav>
<section class="status-card">
<div class="section-title">Состояние Telegram</div>
<div id="auth-status" class="status-badge">Проверяем...</div>
<p id="auth-details" class="muted small"></p>
</section>
<section class="status-card">
<div class="section-title">Быстрые действия</div>
<button class="button primary" id="scrape-all-btn">Скрапить все каналы</button>
<button class="button" id="export-all-btn">Экспортировать всё</button>
<button class="button" id="refresh-dialogs-btn">Обновить список диалогов</button>
</section>
</aside>
<main class="content">
<section class="panel-grid">
<div class="panel stat-panel">
<div class="section-title">Каналы</div>
<div id="channel-count" class="stat-value">0</div>
</div>
<div class="panel stat-panel">
<div class="section-title">Media scraping</div>
<label class="toggle-row">
<span id="scrape-media-label">OFF</span>
<input id="scrape-media-toggle" type="checkbox" />
</label>
</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>Отслеживаемые каналы</h2>
<p class="muted">Берутся из <code>data/state.json</code>, статистика подтягивается из SQLite.</p>
</div>
<form id="add-channel-form" class="inline-form">
<input id="add-channel-id" name="channel_id" placeholder="ID или @username" required />
<input id="add-channel-name" name="name" placeholder="Псевдоним (необязательно)" />
<button class="button primary" type="submit">Добавить</button>
</form>
</div>
<div class="table-wrap">
<table>
<thead>
<tr>
<th>Канал</th>
<th>Сообщений</th>
<th>Медиа</th>
<th>Последнее сообщение</th>
<th>Действия</th>
</tr>
</thead>
<tbody id="channels-table"></tbody>
</table>
</div>
</section>
<section class="panel jobs-panel">
<div class="panel-header">
<div>
<h2>Фоновые задачи</h2>
<p class="muted">Очередь простая: задачи выполняются по одной, чтобы не драться за Telegram session.</p>
</div>
<button class="button" id="refresh-jobs-btn">Обновить</button>
</div>
<div id="jobs-list" class="jobs-list"></div>
</section>
</main>
</div>
<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-view-btn">Viewer</button>
<button class="button button-small media-btn">Rescrape media</button>
<button class="button button-small danger remove-btn">Удалить</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>