From 6bc8d6ed36b4b923ad1a5272d53bbf158a69df4d Mon Sep 17 00:00:00 2001 From: mr-forust Date: Sun, 28 Jun 2026 00:53:54 +0200 Subject: [PATCH] Polish web UI styling --- webui/index.html | 2 +- webui/settings.html | 2 +- webui/style.css | 241 +++++++++++++++++++++++++------------------- webui/swagger.html | 2 +- webui/viewer.html | 2 +- 5 files changed, 142 insertions(+), 107 deletions(-) diff --git a/webui/index.html b/webui/index.html index e454a5e..689779c 100644 --- a/webui/index.html +++ b/webui/index.html @@ -4,7 +4,7 @@ Telegram Scraper Control Panel - +
diff --git a/webui/settings.html b/webui/settings.html index 474f8b3..6872341 100644 --- a/webui/settings.html +++ b/webui/settings.html @@ -4,7 +4,7 @@ Telegram Scraper Settings - +
diff --git a/webui/style.css b/webui/style.css index 2f1ac4c..32fe771 100644 --- a/webui/style.css +++ b/webui/style.css @@ -1,22 +1,25 @@ :root { color-scheme: dark; - --bg-color: #000000; - --panel: #0b0b0b; - --panel-solid: #101010; - --panel-alt: #050505; - --text-color: #f2f3f5; - --accent: #1fb9aa; - --accent-2: #58a6ff; - --bubble-own: #12342f; - --bubble-other: #171717; - --dim: #9aa0a6; - --line: #242424; + --bg-color: #05070d; + --panel: #0c111d; + --panel-solid: #111827; + --panel-alt: #080b13; + --text-color: #f4f7fb; + --accent: #355fc7; + --accent-hover: #426fdd; + --accent-soft: #111d3c; + --accent-line: #284aa0; + --accent-2: #7aa5ff; + --bubble-own: #132552; + --bubble-other: #141923; + --dim: #a4adbd; + --line: #232b3a; --danger: #ff7373; --ok: #65e6a4; --warn: #f6c969; --info: #8ec7ff; - --radius: 18px; - --shadow: none; + --radius: 22px; + --shadow: 0 18px 48px rgba(0, 0, 0, 0.28); --font-ui: 'Segoe UI', 'Helvetica Neue', Arial, sans-serif; --font-mono: 'IBM Plex Mono', 'SFMono-Regular', Consolas, monospace; } @@ -27,7 +30,10 @@ body { margin: 0; - background: #000; + background: + radial-gradient(circle at 16% -10%, rgba(53, 95, 199, 0.26), transparent 34rem), + radial-gradient(circle at 95% 18%, rgba(122, 165, 255, 0.1), transparent 28rem), + var(--bg-color); color: var(--text-color); font-family: var(--font-ui); font-size: 15px; @@ -42,8 +48,8 @@ a { a:hover, button:hover { - border-color: #333; - background: #151515; + border-color: #354158; + background: #151d2c; color: var(--text-color); } @@ -58,36 +64,50 @@ button { height: 100vh; overflow: hidden; display: grid; - grid-template-columns: 308px minmax(0, 1fr); + grid-template-columns: 360px minmax(0, 1fr); } .sidebar { - background: #050505; + background: + linear-gradient(180deg, rgba(17, 29, 60, 0.72), rgba(8, 11, 19, 0.94) 42%), + var(--panel-alt); border-right: 1px solid var(--line); - padding: 24px 20px; + padding: 30px 24px; + overflow-y: auto; } .content { overflow-y: auto; - padding: 24px; + padding: 32px; max-width: 1440px; width: 100%; } +.brand-block { + padding: 0 2px; +} + .brand-block h1, .dialog-header h2 { margin: 0; color: var(--accent); - font-size: 1.5rem; + font-size: 1.65rem; letter-spacing: -0.04em; } +.brand-block .muted { + margin: 22px 0 0; + max-width: 26ch; + font-size: 1.03rem; + line-height: 1.62; +} + .eyebrow, .section-title { color: var(--dim); font-size: 0.75rem; text-transform: uppercase; - letter-spacing: 0.08em; + letter-spacing: 0.14em; } .muted { @@ -106,7 +126,7 @@ button { } .nav-links { - margin: 28px 0; + margin: 34px 0; } .nav-link, @@ -115,7 +135,7 @@ input, .content-tab, .viewer-channel-item { border: 1px solid var(--line); - background: #101010; + background: rgba(17, 24, 39, 0.74); color: var(--text-color); border-radius: 999px; } @@ -127,27 +147,33 @@ input, align-items: center; justify-content: center; min-height: 42px; - padding: 9px 13px; + padding: 10px 18px; cursor: pointer; transition: background-color 0.18s ease, border-color 0.18s ease, + box-shadow 0.18s ease, transform 0.18s ease; } +.nav-link { + min-height: 52px; + font-size: 1rem; +} + .nav-link.active, .button.primary, .content-tab.active { - border-color: #0f6f67; + border-color: var(--accent-line); color: #ffffff; - background: #0f6f67; - box-shadow: none; + background: linear-gradient(135deg, var(--accent), #27498f); + box-shadow: 0 14px 32px rgba(53, 95, 199, 0.28); } .nav-link.active:hover, .button.primary:hover, .content-tab.active:hover { - background: #128277; + background: linear-gradient(135deg, var(--accent-hover), #3159ad); color: #ffffff; } @@ -172,7 +198,7 @@ input, .job-card, .message-card, .settings-dialog { - background: var(--panel); + background: linear-gradient(180deg, rgba(17, 24, 39, 0.9), rgba(12, 17, 29, 0.96)); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); @@ -182,16 +208,16 @@ input, .panel, .job-card, .message-card { - padding: 16px; + padding: 22px; } .status-card { - margin-top: 16px; + margin-top: 20px; } .status-card .button { width: 100%; - margin-top: 8px; + margin-top: 10px; } .status-card .button:first-of-type { @@ -200,10 +226,12 @@ input, .status-badge { display: inline-flex; - padding: 6px 10px; + margin-top: 12px; + padding: 7px 12px; border: 1px solid var(--line); border-radius: 999px; color: var(--ok); + background: rgba(101, 230, 164, 0.06); } .content-tabs { @@ -223,9 +251,9 @@ input, .panel-grid { display: grid; - gap: 16px; + gap: 18px; grid-template-columns: repeat(3, minmax(0, 1fr)); - margin-bottom: 16px; + margin-bottom: 18px; } .settings-health-grid { @@ -233,7 +261,7 @@ input, } .panel { - margin-bottom: 16px; + margin-bottom: 18px; } .panel-header, @@ -246,7 +274,7 @@ input, } .stat-value { - margin-top: 8px; + margin-top: 10px; font-size: 2.25rem; font-weight: 700; letter-spacing: -0.05em; @@ -271,7 +299,7 @@ input, .settings-layout { display: grid; grid-template-columns: minmax(280px, 0.9fr) minmax(320px, 1.1fr); - gap: 16px; + gap: 18px; align-items: start; } @@ -292,8 +320,8 @@ input, .settings-account-list { display: grid; - gap: 8px; - margin-top: 12px; + gap: 10px; + margin-top: 14px; } .settings-account-button { @@ -305,16 +333,16 @@ input, align-items: center; text-align: left; border: 1px solid var(--line); - border-radius: 14px; - background: #101010; + border-radius: 16px; + background: rgba(17, 24, 39, 0.78); color: var(--text-color); - padding: 10px 12px; + padding: 12px 14px; cursor: pointer; } .settings-account-button.active { - border-color: #0f6f67; - background: #092522; + border-color: var(--accent-line); + background: var(--accent-soft); } .settings-account-name { @@ -342,13 +370,14 @@ input, input { min-width: 160px; - padding: 10px 13px; + padding: 11px 14px; outline: 0; - border-radius: 14px; + border-radius: 16px; } input:focus { border-color: var(--accent); + box-shadow: 0 0 0 3px rgba(53, 95, 199, 0.18); } .toggle-row { @@ -399,6 +428,7 @@ input:focus { .switch input:checked + .switch-slider { border-color: var(--accent); + background: var(--accent-soft); } .switch input:checked + .switch-slider::before { @@ -424,7 +454,7 @@ td { } tbody tr:hover { - background: #111; + background: rgba(53, 95, 199, 0.08); } .action-row { @@ -471,10 +501,10 @@ tbody tr:hover { align-items: center; gap: 10px; min-height: 38px; - padding: 8px; + padding: 10px 12px; border: 1px solid var(--line); - border-radius: 14px; - background: #0f0f0f; + border-radius: 16px; + background: rgba(17, 24, 39, 0.68); } .checkbox-row input { @@ -504,7 +534,7 @@ tbody tr:hover { } .log-line:hover { - background: #111; + background: rgba(53, 95, 199, 0.08); } .log-time, @@ -545,11 +575,11 @@ tbody tr:hover { } .settings-dialog::backdrop { - background: rgba(0, 0, 0, 0.72); + background: rgba(3, 6, 13, 0.78); } .dialog-shell { - padding: 18px; + padding: 24px; } .settings-section { @@ -588,12 +618,14 @@ tbody tr:hover { } .viewer-sidebar { - background: #050505; + background: + linear-gradient(180deg, rgba(17, 29, 60, 0.72), rgba(8, 11, 19, 0.94) 42%), + var(--panel-alt); border-right: 1px solid var(--line); - padding: 14px 10px; + padding: 18px 14px; display: flex; flex-direction: column; - gap: 12px; + gap: 14px; overflow-y: auto; } @@ -612,13 +644,13 @@ tbody tr:hover { .viewer-sidebar-head h1 { margin: 0; color: var(--accent); - font-size: 1.45rem; + font-size: 1.55rem; letter-spacing: -0.04em; } .viewer-channel-list { display: grid; - gap: 2px; + gap: 6px; } .viewer-channel-item { @@ -628,23 +660,23 @@ tbody tr:hover { gap: 10px; width: 100%; min-height: 68px; - padding: 8px 10px; + padding: 10px 12px; text-align: left; cursor: pointer; border: 1px solid transparent; background: transparent; color: var(--text-color); - border-radius: 12px; + border-radius: 16px; } .viewer-channel-item.active { - border-color: transparent; - background: #12342f; - box-shadow: none; + border-color: var(--accent-line); + background: var(--accent-soft); + box-shadow: 0 12px 28px rgba(53, 95, 199, 0.18); } .viewer-channel-item:hover { - background: #111; + background: rgba(53, 95, 199, 0.12); } .viewer-channel-avatar { @@ -654,7 +686,7 @@ tbody tr:hover { width: 48px; height: 48px; border-radius: 50%; - background: #5f6b70; + background: linear-gradient(135deg, #456fd5, #243d84); color: white; font-weight: 700; letter-spacing: -0.03em; @@ -698,8 +730,8 @@ tbody tr:hover { min-width: 22px; padding: 2px 7px; border-radius: 999px; - background: #12342f; - color: var(--accent); + background: rgba(53, 95, 199, 0.22); + color: var(--accent-2); font-size: 0.76rem; text-align: center; } @@ -712,8 +744,10 @@ tbody tr:hover { height: 100vh; overflow: hidden; background: + radial-gradient(circle at 18% -12%, rgba(53, 95, 199, 0.18), transparent 32rem), radial-gradient(circle at 20px 20px, rgba(255, 255, 255, 0.025) 1px, transparent 1.5px), - radial-gradient(circle at 58px 54px, rgba(255, 255, 255, 0.018) 1px, transparent 1.5px), #000; + radial-gradient(circle at 58px 54px, rgba(255, 255, 255, 0.018) 1px, transparent 1.5px), + var(--bg-color); background-size: auto, 84px 84px, @@ -723,9 +757,9 @@ tbody tr:hover { .viewer-header { flex-shrink: 0; - padding: 16px 24px; + padding: 18px 26px; border-bottom: 1px solid var(--line); - background: #050505; + background: rgba(8, 11, 19, 0.94); display: flex; align-items: flex-start; justify-content: space-between; @@ -735,7 +769,7 @@ tbody tr:hover { .viewer-header h2 { margin: 0; color: var(--accent); - font-size: 1.45rem; + font-size: 1.55rem; letter-spacing: -0.04em; } @@ -767,7 +801,7 @@ tbody tr:hover { .messages-list { flex: 1; overflow-y: auto; - padding: 18px 34px 22px; + padding: 22px 38px 26px; display: flex; flex-direction: column; } @@ -803,7 +837,7 @@ tbody tr:hover { align-self: center; padding: 5px 12px; border-radius: 999px; - background: #111; + background: rgba(17, 24, 39, 0.88); } .chat-date-sep:empty { @@ -826,11 +860,11 @@ tbody tr:hover { .chat-bubble { max-width: min(680px, 74%); - padding: 8px 12px 7px; + padding: 9px 13px 8px; background: var(--bubble-other); - border: 1px solid #242424; + border: 1px solid var(--line); border-radius: 18px 18px 18px 6px; - margin-bottom: 6px; + margin-bottom: 7px; overflow-wrap: anywhere; word-break: break-word; position: relative; @@ -858,7 +892,7 @@ tbody tr:hover { .chat-bubble-wrap--own .chat-bubble { background: var(--bubble-own); - border-color: #1f5b52; + border-color: var(--accent-line); border-radius: 18px 18px 6px 18px; } @@ -980,7 +1014,7 @@ tbody tr:hover { color: var(--dim); border: 1px solid var(--line); border-radius: 14px; - background: #0a0a0a; + background: rgba(12, 17, 29, 0.86); } .viewer-empty-state { @@ -1002,7 +1036,7 @@ tbody tr:hover { padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px; - background: #111; + background: var(--panel-solid); color: var(--text-color); box-shadow: 0 12px 28px rgba(0, 0, 0, 0.36); transition: @@ -1011,7 +1045,7 @@ tbody tr:hover { } .toast-success { - border-color: #1f5b52; + border-color: var(--accent-line); } .toast-error { @@ -1099,9 +1133,9 @@ tbody tr:hover { .account-tabs { display: flex; flex-wrap: wrap; - gap: 8px; - margin-bottom: 16px; - padding-bottom: 10px; + gap: 10px; + margin-bottom: 18px; + padding-bottom: 14px; border-bottom: 1px solid var(--line); } @@ -1109,11 +1143,11 @@ tbody tr:hover { display: inline-flex; align-items: center; gap: 8px; - min-height: 38px; - padding: 7px 14px; + min-height: 40px; + padding: 8px 15px; border: 1px solid var(--line); border-radius: 999px; - background: #101010; + background: rgba(17, 24, 39, 0.72); color: var(--text-color); cursor: pointer; font: inherit; @@ -1121,9 +1155,10 @@ tbody tr:hover { } .account-tab.active { - border-color: #0f6f67; + border-color: var(--accent-line); color: #ffffff; - background: #0f6f67; + background: linear-gradient(135deg, var(--accent), #27498f); + box-shadow: 0 12px 26px rgba(53, 95, 199, 0.22); } .account-tab .account-tab-status { @@ -1153,8 +1188,8 @@ tbody tr:hover { .accounts-list { display: grid; - gap: 8px; - margin-bottom: 12px; + gap: 10px; + margin-bottom: 14px; } .account-list-item { @@ -1162,10 +1197,10 @@ tbody tr:hover { align-items: center; justify-content: space-between; gap: 12px; - padding: 10px 12px; + padding: 12px 14px; border: 1px solid var(--line); border-radius: 16px; - background: #0f0f0f; + background: rgba(17, 24, 39, 0.68); } .account-list-info { @@ -1194,22 +1229,22 @@ tbody tr:hover { .add-account-form { display: grid; - gap: 8px; - margin-top: 8px; - padding: 12px; + gap: 10px; + margin-top: 10px; + padding: 14px; border: 1px solid var(--line); - border-radius: 16px; - background: #0f0f0f; + border-radius: 18px; + background: rgba(17, 24, 39, 0.68); } .import-account-row { display: grid; gap: 8px; - margin-top: 10px; - padding: 12px; + margin-top: 12px; + padding: 14px; border: 1px solid var(--line); - border-radius: 16px; - background: #0f0f0f; + border-radius: 18px; + background: rgba(17, 24, 39, 0.68); } /* ── Active Account Card ─────────────────────────────── */ diff --git a/webui/swagger.html b/webui/swagger.html index bfe7cf5..a4dddf1 100644 --- a/webui/swagger.html +++ b/webui/swagger.html @@ -4,7 +4,7 @@ Telegram Scraper API - +
diff --git a/webui/viewer.html b/webui/viewer.html index 3af7642..8e42d2f 100644 --- a/webui/viewer.html +++ b/webui/viewer.html @@ -4,7 +4,7 @@ Telegram Scraper Viewer - +