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 @@
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
-
+