255 lines
11 KiB
HTML
255 lines
11 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 Settings</title>
|
|
<link rel="stylesheet" href="/static/style.css?v=9" />
|
|
</head>
|
|
<body>
|
|
<div class="app-shell settings-page-shell">
|
|
<aside class="sidebar">
|
|
<div class="brand-block">
|
|
<svg class="brand-icon" viewBox="0 0 24 24" aria-hidden="true">
|
|
<path d="m21 3-7.6 18-3.8-7.6L2 9.6zM9.6 13.4 14 10" />
|
|
</svg>
|
|
<div class="eyebrow">Telegram Scraper</div>
|
|
<h1>Settings</h1>
|
|
<p class="muted">Account credentials, import/export, and runtime safety controls.</p>
|
|
</div>
|
|
|
|
<nav class="nav-links">
|
|
<a class="nav-link" href="/"
|
|
><svg class="nav-icon" viewBox="0 0 24 24" aria-hidden="true">
|
|
<rect x="4" y="4" width="6" height="6" />
|
|
<rect x="14" y="4" width="6" height="6" />
|
|
<rect x="4" y="14" width="6" height="6" />
|
|
<rect x="14" y="14" width="6" height="6" /></svg
|
|
>Dashboard</a
|
|
>
|
|
<a class="nav-link active" href="/settings"
|
|
><svg class="nav-icon" viewBox="0 0 24 24" aria-hidden="true">
|
|
<circle cx="12" cy="12" r="3" />
|
|
<path
|
|
d="M12 2v3m0 14v3M2 12h3m14 0h3m-2.9-7.1-2.1 2.1M4.9 19.1 7 17m0-10-2.1-2.1m12.2 14.2-2.1-2.1" /></svg
|
|
>Settings</a
|
|
>
|
|
<a class="nav-link" href="/viewer"
|
|
><svg class="nav-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M4 5h16v12H8l-4 3z" /></svg>Message
|
|
Viewer</a
|
|
>
|
|
<a class="nav-link" href="/swagger"
|
|
><svg class="nav-icon" viewBox="0 0 24 24" aria-hidden="true">
|
|
<path d="m8 5-5 7 5 7m8-14 5 7-5 7M14 3l-4 18" /></svg
|
|
>API Docs</a
|
|
>
|
|
</nav>
|
|
|
|
<section class="status-card">
|
|
<div class="section-title">Accounts</div>
|
|
<div id="settings-account-list" class="settings-account-list"></div>
|
|
</section>
|
|
</aside>
|
|
|
|
<main class="content settings-page">
|
|
<header class="dashboard-topbar">
|
|
<div class="dashboard-title"><span class="menu-icon" aria-hidden="true">☰</span>Settings</div>
|
|
<div class="runtime-status">
|
|
<span class="runtime-dot"></span>Service: Running <i></i> Scraper: Idle <i></i
|
|
><span class="runtime-clock"></span>
|
|
</div>
|
|
</header>
|
|
<section class="panel settings-hero">
|
|
<div>
|
|
<div class="eyebrow">Account Settings</div>
|
|
<h2 id="settings-title">Loading accounts</h2>
|
|
<p id="settings-subtitle" class="muted">Select an account to manage credentials and scraper options.</p>
|
|
<p class="muted small" id="settings-hero-hint">
|
|
First step: add your first account below. Export and Delete unlock after you select an account.
|
|
</p>
|
|
</div>
|
|
<div class="action-row">
|
|
<button class="button" id="settings-export-btn" type="button" disabled>Export</button>
|
|
<button class="button danger" id="settings-delete-btn" type="button" disabled>Delete</button>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="settings-empty" class="panel hidden">
|
|
<div class="empty-state">
|
|
<div class="eyebrow">Getting started</div>
|
|
<h2>Add first account</h2>
|
|
<p class="muted">Create an account below or import an exported account JSON. No accounts yet.</p>
|
|
<div class="empty-actions">
|
|
<a class="button primary" href="#settings-add-account-form">Add first account</a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="panel-grid settings-health-grid">
|
|
<div class="panel stat-panel">
|
|
<div class="section-title">Credentials</div>
|
|
<div class="stat-value stat-compact" id="health-credentials">-</div>
|
|
</div>
|
|
<div class="panel stat-panel">
|
|
<div class="section-title">Session</div>
|
|
<div class="stat-value stat-compact" id="health-session">-</div>
|
|
</div>
|
|
<div class="panel stat-panel">
|
|
<div class="section-title">Continuous</div>
|
|
<div class="stat-value stat-compact" id="health-continuous">-</div>
|
|
</div>
|
|
<div class="panel stat-panel">
|
|
<div class="section-title">Last scrape</div>
|
|
<div class="stat-value stat-compact" id="health-last-scrape">-</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="settings-layout">
|
|
<div class="panel">
|
|
<div class="panel-header">
|
|
<div>
|
|
<h2>Create or Import</h2>
|
|
<p class="muted">New accounts start without continuous scraping enabled.</p>
|
|
</div>
|
|
</div>
|
|
<div class="panel-body">
|
|
<form id="settings-add-account-form" class="stack-form">
|
|
<label class="field">
|
|
<span class="field-label">Account ID</span>
|
|
<input
|
|
id="settings-add-account-id"
|
|
name="account_id"
|
|
placeholder="Account ID (e.g. work)"
|
|
aria-label="Account ID"
|
|
required />
|
|
<span class="field-hint">Lowercase short id used in file names and URLs.</span>
|
|
</label>
|
|
<label class="field">
|
|
<span class="field-label">Display name</span>
|
|
<input
|
|
id="settings-add-account-label"
|
|
name="label"
|
|
placeholder="Display name"
|
|
aria-label="Display name" />
|
|
</label>
|
|
<label class="field">
|
|
<span class="field-label">API ID</span>
|
|
<input id="settings-add-account-api-id" name="api_id" placeholder="API ID" aria-label="API ID" />
|
|
<span class="field-hint">From my.telegram.org > API development tools.</span>
|
|
</label>
|
|
<label class="field">
|
|
<span class="field-label">API Hash</span>
|
|
<input
|
|
id="settings-add-account-api-hash"
|
|
name="api_hash"
|
|
placeholder="API Hash"
|
|
aria-label="API Hash" />
|
|
<span class="field-hint">Paste the hash exactly as shown on my.telegram.org.</span>
|
|
</label>
|
|
<button class="button primary button-block" type="submit">Add Account</button>
|
|
</form>
|
|
<label class="import-account-row">
|
|
<span class="field-label">Import account settings JSON</span>
|
|
<span class="muted small"
|
|
>Choose a file previously exported from Settings. It must be account JSON, for example:</span
|
|
>
|
|
<span class="file-example">{"account_id": "work", "api_id": 12345, ...}</span>
|
|
<input id="settings-import-account-file" type="file" accept="application/json,.json" />
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="panel">
|
|
<div class="panel-header">
|
|
<div>
|
|
<h2>Credentials & Auth</h2>
|
|
<p class="muted" id="settings-auth-label">No account selected.</p>
|
|
</div>
|
|
</div>
|
|
<div class="panel-body">
|
|
<p class="muted small" id="settings-credentials-hint">
|
|
Select an account first, then save API credentials and complete login below.
|
|
</p>
|
|
<form id="settings-credentials-form" class="stack-form">
|
|
<label class="field">
|
|
<span class="field-label">API ID</span>
|
|
<input id="settings-api-id-input" name="api_id" placeholder="API ID" aria-label="API ID" />
|
|
<span class="field-hint">From my.telegram.org > API development tools.</span>
|
|
</label>
|
|
<label class="field">
|
|
<span class="field-label">API Hash</span>
|
|
<input id="settings-api-hash-input" name="api_hash" placeholder="API Hash" aria-label="API Hash" />
|
|
</label>
|
|
<button class="button" type="submit">Save credentials</button>
|
|
</form>
|
|
|
|
<div class="auth-actions">
|
|
<button class="button primary" id="settings-start-qr-btn" type="button">Start QR login</button>
|
|
</div>
|
|
|
|
<div id="settings-qr-wrap" class="qr-wrap hidden">
|
|
<img id="settings-qr-image" alt="Telegram QR login" />
|
|
<p class="muted small">Open Telegram -> Settings -> Devices -> Scan QR.</p>
|
|
</div>
|
|
|
|
<form id="settings-phone-form" class="stack-form">
|
|
<label class="field">
|
|
<span class="field-label">Phone number</span>
|
|
<input id="settings-phone-input" name="phone" placeholder="+1234567890" aria-label="Phone number" />
|
|
</label>
|
|
<button class="button" type="submit">Send code</button>
|
|
</form>
|
|
|
|
<form id="settings-code-form" class="stack-form hidden">
|
|
<label class="field">
|
|
<span class="field-label">Telegram code</span>
|
|
<input id="settings-code-input" name="code" placeholder="Telegram code" aria-label="Telegram code" />
|
|
</label>
|
|
<button class="button" type="submit">Confirm code</button>
|
|
</form>
|
|
|
|
<form id="settings-password-form" class="stack-form hidden">
|
|
<label class="field">
|
|
<span class="field-label">2FA password</span>
|
|
<input
|
|
id="settings-password-input"
|
|
name="password"
|
|
type="password"
|
|
placeholder="2FA password"
|
|
aria-label="2FA password" />
|
|
</label>
|
|
<button class="button" type="submit">Confirm password</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="panel">
|
|
<div class="panel-header">
|
|
<div>
|
|
<h2>Scraping</h2>
|
|
<p class="muted">Account-level parser settings.</p>
|
|
</div>
|
|
</div>
|
|
<div class="panel-body">
|
|
<label class="toggle-row">
|
|
<span>Download media</span>
|
|
<span class="switch">
|
|
<input id="settings-scrape-media-toggle" type="checkbox" />
|
|
<span class="switch-slider"></span>
|
|
</span>
|
|
</label>
|
|
<div class="settings-meta-list">
|
|
<div>Tracked channels: <span id="settings-channel-count">0</span></div>
|
|
<div>Messages: <span id="settings-message-count">0</span></div>
|
|
<div>Media: <span id="settings-media-count">0</span></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
</div>
|
|
|
|
<script src="/static/settings.js?v=9"></script>
|
|
</body>
|
|
</html>
|