style(webui): unify UI across all pages to solid modern system
tokens instead of hardcoded, v9 everywhere, dialog guarded, confirm->dialog, empty unified, health out of nav, swagger icons/topbar, gutters, th uppercase, content 1280 centered.
This commit is contained in:
+116
-19
@@ -4,23 +4,45 @@
|
||||
<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=8" />
|
||||
<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="/">Dashboard</a>
|
||||
<a class="nav-link active" href="/settings">Settings</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>
|
||||
<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">
|
||||
@@ -30,11 +52,21 @@
|
||||
</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>
|
||||
@@ -44,8 +76,12 @@
|
||||
|
||||
<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.</p>
|
||||
<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>
|
||||
|
||||
@@ -76,17 +112,49 @@
|
||||
<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">
|
||||
<input id="settings-add-account-id" name="account_id" placeholder="Account ID (e.g. work)" required />
|
||||
<input id="settings-add-account-label" name="label" placeholder="Display name" />
|
||||
<input id="settings-add-account-api-id" name="api_id" placeholder="API ID" />
|
||||
<input id="settings-add-account-api-hash" name="api_hash" placeholder="API Hash" />
|
||||
<button class="button primary" type="submit">Add Account</button>
|
||||
<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="muted small">Import account settings JSON</span>
|
||||
<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">
|
||||
@@ -96,9 +164,20 @@
|
||||
<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">
|
||||
<input id="settings-api-id-input" name="api_id" placeholder="API ID" />
|
||||
<input id="settings-api-hash-input" name="api_hash" placeholder="API Hash" />
|
||||
<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>
|
||||
|
||||
@@ -112,19 +191,35 @@
|
||||
</div>
|
||||
|
||||
<form id="settings-phone-form" class="stack-form">
|
||||
<input id="settings-phone-input" name="phone" placeholder="+1234567890" />
|
||||
<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">
|
||||
<input id="settings-code-input" name="code" placeholder="Telegram code" />
|
||||
<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">
|
||||
<input id="settings-password-input" name="password" type="password" placeholder="2FA password" />
|
||||
<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">
|
||||
@@ -134,6 +229,7 @@
|
||||
<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">
|
||||
@@ -146,11 +242,12 @@
|
||||
<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=1"></script>
|
||||
<script src="/static/settings.js?v=9"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user