From 596cf1ccdc9224fbeba1273d656e3c1400f390d4 Mon Sep 17 00:00:00 2001 From: eduard256 Date: Fri, 21 Nov 2025 23:37:02 +0300 Subject: [PATCH] Add interactive tooltips to camera configuration form MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Добавлены информационные тултипы для всех полей формы настройки камеры с подробными описаниями, примерами использования и рекомендациями. Улучшает пользовательский опыт и помогает пользователям правильно заполнить форму. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude --- webui/web/css/main.css | 122 ++++++++++++++++++++++++++++++ webui/web/index.html | 167 ++++++++++++++++++++++++++++++++++++----- 2 files changed, 272 insertions(+), 17 deletions(-) diff --git a/webui/web/css/main.css b/webui/web/css/main.css index d8eb3e3..e11ca20 100644 --- a/webui/web/css/main.css +++ b/webui/web/css/main.css @@ -1043,6 +1043,128 @@ body { display: none; } +/* ===== TOOLTIPS ===== */ +.label-with-info { + display: flex; + align-items: center; + gap: var(--space-2); +} + +.info-icon { + position: relative; + display: inline-flex; + align-items: center; + justify-content: center; + width: 16px; + height: 16px; + cursor: help; + color: var(--text-tertiary); + transition: color var(--transition-fast); +} + +.info-icon:hover { + color: var(--purple-primary); +} + +.info-icon svg { + width: 16px; + height: 16px; +} + +.tooltip { + position: absolute; + bottom: calc(100% + 8px); + left: 50%; + transform: translateX(-50%); + background: var(--bg-elevated); + border: 1px solid var(--purple-primary); + border-radius: 8px; + padding: var(--space-4); + width: 320px; + max-width: 90vw; + box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6), 0 0 0 1px var(--purple-glow); + z-index: 1000; + opacity: 0; + visibility: hidden; + transition: opacity var(--transition-fast), visibility var(--transition-fast); + pointer-events: none; +} + +/* Tooltip opens downward */ +.tooltip.tooltip-down { + bottom: auto; + top: calc(100% + 8px); +} + +.info-icon:hover .tooltip { + opacity: 1; + visibility: visible; +} + +.tooltip::after { + content: ''; + position: absolute; + top: 100%; + left: 50%; + transform: translateX(-50%); + border: 6px solid transparent; + border-top-color: var(--purple-primary); +} + +/* Arrow for downward tooltip */ +.tooltip.tooltip-down::after { + top: auto; + bottom: 100%; + border-top-color: transparent; + border-bottom-color: var(--purple-primary); +} + +.tooltip-title { + font-weight: 600; + color: var(--purple-primary); + margin-bottom: var(--space-2); + font-size: var(--text-sm); +} + +.tooltip-text { + font-size: var(--text-xs); + line-height: 1.5; + color: var(--text-secondary); + margin-bottom: var(--space-3); +} + +.tooltip-text:last-child { + margin-bottom: 0; +} + +.tooltip-examples { + margin-top: var(--space-3); + padding-top: var(--space-3); + border-top: 1px solid var(--border-color); +} + +.tooltip-examples-title { + font-weight: 600; + color: var(--text-primary); + font-size: var(--text-xs); + margin-bottom: var(--space-2); +} + +.tooltip-example { + font-family: var(--font-mono); + font-size: var(--text-xs); + color: var(--purple-light); + background: var(--bg-secondary); + padding: var(--space-1) var(--space-2); + border-radius: 4px; + margin-bottom: var(--space-1); + display: block; +} + +.tooltip-example:last-child { + margin-bottom: 0; +} + /* ===== UTILITIES ===== */ .hidden { display: none !important; diff --git a/webui/web/index.html b/webui/web/index.html index 90783a8..df4dd7c 100644 --- a/webui/web/index.html +++ b/webui/web/index.html @@ -82,7 +82,26 @@

Camera Configuration

- +
- +
- +
- +
+
+ + +
+
Advanced
-
- - -
- +
- +