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:
+73
-130
@@ -4,7 +4,7 @@
|
||||
<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?v=8" />
|
||||
<link rel="stylesheet" href="/static/style.css?v=9" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="app-shell">
|
||||
@@ -43,10 +43,6 @@
|
||||
<path d="m8 5-5 7 5 7m8-14 5 7-5 7M14 3l-4 18" /></svg
|
||||
>API Docs</a
|
||||
>
|
||||
<a class="nav-link" href="/health"
|
||||
><svg class="nav-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M3 12h4l2-6 4 12 2-6h6" /></svg
|
||||
>Health</a
|
||||
>
|
||||
</nav>
|
||||
|
||||
<section class="status-card" id="active-account-card">
|
||||
@@ -90,87 +86,17 @@
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="panel-body">
|
||||
<div class="empty-state">
|
||||
<div class="empty-actions">
|
||||
<a class="button primary" href="/settings">Open Settings</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
<!-- ════════ Settings Dialog ════════ -->
|
||||
<dialog id="settings-dialog" class="settings-dialog">
|
||||
<div class="dialog-shell">
|
||||
<div class="dialog-header">
|
||||
<div>
|
||||
<div class="eyebrow">Settings</div>
|
||||
<h2>Global & Accounts</h2>
|
||||
</div>
|
||||
<button class="button button-small" id="close-settings-btn" type="button">Close</button>
|
||||
</div>
|
||||
|
||||
<!-- ── Accounts Management ── -->
|
||||
<section class="settings-section">
|
||||
<div class="section-title">Accounts</div>
|
||||
<div id="accounts-list" class="accounts-list"></div>
|
||||
|
||||
<form id="add-account-form" class="stack-form add-account-form">
|
||||
<input id="add-account-id" name="account_id" placeholder="Account ID (e.g. work)" required />
|
||||
<input id="add-account-label" name="label" placeholder="Display name (e.g. Work Account)" />
|
||||
<input id="add-account-api-id" name="api_id" placeholder="API ID" />
|
||||
<input id="add-account-api-hash" name="api_hash" placeholder="API Hash" />
|
||||
<button class="button primary" type="submit">Add Account</button>
|
||||
</form>
|
||||
<label class="import-account-row">
|
||||
<span class="muted small">Import account settings JSON</span>
|
||||
<input id="import-account-file" type="file" accept="application/json,.json" />
|
||||
</label>
|
||||
</section>
|
||||
|
||||
<!-- ── Account Auth ── (shown per account selected in UI) -->
|
||||
<section class="settings-section" id="account-auth-section">
|
||||
<div class="section-title">Account Auth: <span id="auth-account-label">-</span></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>
|
||||
|
||||
<!-- ── Scraping ── -->
|
||||
<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>
|
||||
|
||||
<!-- ════════ Templates ════════ -->
|
||||
|
||||
<!-- Account Tab -->
|
||||
@@ -239,25 +165,38 @@
|
||||
<p class="muted">Per-account channel list.</p>
|
||||
</div>
|
||||
<form class="inline-form add-channel-form">
|
||||
<input class="add-channel-id" name="channel_id" placeholder="ID or @username" required />
|
||||
<input class="add-channel-name" name="name" placeholder="Display name" />
|
||||
<input
|
||||
class="add-channel-id"
|
||||
name="channel_id"
|
||||
placeholder="ID or @username"
|
||||
aria-label="Channel ID or username"
|
||||
required
|
||||
/>
|
||||
<input
|
||||
class="add-channel-name"
|
||||
name="name"
|
||||
placeholder="Display name"
|
||||
aria-label="Channel 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 class="channels-table"></tbody>
|
||||
</table>
|
||||
<div class="panel-body">
|
||||
<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 class="channels-table"></tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@@ -269,7 +208,9 @@
|
||||
</div>
|
||||
<button class="button refresh-jobs-btn">Refresh</button>
|
||||
</div>
|
||||
<div class="jobs-list"></div>
|
||||
<div class="panel-body">
|
||||
<div class="jobs-list"></div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
@@ -283,40 +224,42 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<form class="continuous-form">
|
||||
<label class="toggle-row">
|
||||
<span>Enabled</span>
|
||||
<span class="switch">
|
||||
<input type="checkbox" class="continuous-enabled" checked />
|
||||
<span class="switch-slider"></span>
|
||||
</span>
|
||||
</label>
|
||||
<label class="stack-form">
|
||||
<span class="muted small">Interval, minutes</span>
|
||||
<input type="number" class="continuous-interval" min="1" value="1" />
|
||||
</label>
|
||||
<label class="toggle-row">
|
||||
<span>All tracked channels</span>
|
||||
<span class="switch">
|
||||
<input type="checkbox" class="continuous-all" checked />
|
||||
<span class="switch-slider"></span>
|
||||
</span>
|
||||
</label>
|
||||
<div class="channel-picker">
|
||||
<div class="muted small">Continuous channel set</div>
|
||||
<div class="checkbox-grid continuous-channel-list"></div>
|
||||
<div class="panel-body">
|
||||
<form class="continuous-form">
|
||||
<label class="toggle-row">
|
||||
<span>Enabled</span>
|
||||
<span class="switch">
|
||||
<input type="checkbox" class="continuous-enabled" checked />
|
||||
<span class="switch-slider"></span>
|
||||
</span>
|
||||
</label>
|
||||
<label class="field">
|
||||
<span class="field-label">Interval, minutes</span>
|
||||
<input type="number" class="continuous-interval" min="1" value="1" aria-label="Interval, minutes" />
|
||||
</label>
|
||||
<label class="toggle-row">
|
||||
<span>All tracked channels</span>
|
||||
<span class="switch">
|
||||
<input type="checkbox" class="continuous-all" checked />
|
||||
<span class="switch-slider"></span>
|
||||
</span>
|
||||
</label>
|
||||
<div class="channel-picker">
|
||||
<div class="muted small">Continuous channel set</div>
|
||||
<div class="checkbox-grid continuous-channel-list"></div>
|
||||
</div>
|
||||
<button class="button primary" type="submit">Save continuous settings</button>
|
||||
</form>
|
||||
|
||||
<div class="continuous-meta">
|
||||
<div>Status: <span class="continuous-status">-</span></div>
|
||||
<div>Last run: <span class="continuous-last-iteration">-</span></div>
|
||||
<div>Next run: <span class="continuous-next-run">-</span></div>
|
||||
<div>Last error: <span class="continuous-last-error">-</span></div>
|
||||
</div>
|
||||
<button class="button primary" type="submit">Save continuous settings</button>
|
||||
</form>
|
||||
|
||||
<div class="continuous-meta">
|
||||
<div>Status: <span class="continuous-status">-</span></div>
|
||||
<div>Last run: <span class="continuous-last-iteration">-</span></div>
|
||||
<div>Next run: <span class="continuous-next-run">-</span></div>
|
||||
<div>Last error: <span class="continuous-last-error">-</span></div>
|
||||
<div class="log-viewer continuous-logs"></div>
|
||||
</div>
|
||||
|
||||
<div class="log-viewer continuous-logs"></div>
|
||||
</section>
|
||||
</div>
|
||||
</section>
|
||||
@@ -372,6 +315,6 @@
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script src="/static/app.js?v=5"></script>
|
||||
<script src="/static/app.js?v=9"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user