Перейти к содержанию

Frontend: DOM, JS и CSS

Статический UI не имеет build step. Этот каталог связывает видимые controls с JavaScript behavior и CSS selectors.

DOM anchors

ID Element Назначение Исходник
#health span DOM anchor/control health. L18
#workspace-title h2 DOM anchor/control workspace-title. L30
#api-key input DOM anchor/control api-key. L33
#save-key button DOM anchor/control save-key. L34
#query textarea DOM anchor/control query. L39
#submit button DOM anchor/control submit. L46
#rate-state span DOM anchor/control rate-state. L59
#notice section DOM anchor/control notice. L64
#answer-card section DOM anchor/control answer-card. L66
#answer-text p DOM anchor/control answer-text. L68
#results-title h2 DOM anchor/control results-title. L76
#results div DOM anchor/control results. L80
#empty p DOM anchor/control empty. L81

JavaScript functions

Функция Назначение Исходник
showNotice(message, isError = false) Показывает status/error без небезопасного HTML. L19
clearResults() Удаляет предыдущие DOM results и answer. L25
createResult(item) Строит одну безопасную карточку результата. L30
updateRate(response) Читает rate headers успешного/ошибочного response. L64
parseError(response) Переводит HTTP/error envelope в сообщение пользователю. L72
submitQuery() Валидирует, вызывает Search/Ask и обновляет UI state. L93

CSS selectors

Selector Назначение Исходник
:root Визуальное правило UI selector. L1
* Визуальное правило UI selector. L16
body Визуальное правило UI selector. L17
button Визуальное правило UI selector. L18
input Визуальное правило UI selector. L18
textarea Визуальное правило UI selector. L18
button Визуальное правило UI selector. L19
.sr-only Визуальное правило UI selector. L20
.topbar Визуальное правило UI selector. L21
.brand Визуальное правило UI selector. L22
.brand-mark Визуальное правило UI selector. L23
.brand strong Визуальное правило UI selector. L24
.brand small Визуальное правило UI selector. L24
.brand small Визуальное правило UI selector. L25
.status-pill Визуальное правило UI selector. L26
.status-pill.ok Визуальное правило UI selector. L27
.status-pill.bad Визуальное правило UI selector. L28
.layout Визуальное правило UI selector. L29
.hero Визуальное правило UI selector. L30
.eyebrow Визуальное правило UI selector. L31
.section-label Визуальное правило UI selector. L31
.hero h1 Визуальное правило UI selector. L32
.hero > p:last-child Визуальное правило UI selector. L33
.workspace Визуальное правило UI selector. L34
.search-panel Визуальное правило UI selector. L35
.side-panel Визуальное правило UI selector. L35
.answer-card Визуальное правило UI selector. L35
.result-card Визуальное правило UI selector. L35
.notice Визуальное правило UI selector. L35
.search-panel Визуальное правило UI selector. L36
.side-panel Визуальное правило UI selector. L36
label Визуальное правило UI selector. L37
small Визуальное правило UI selector. L38
.query-label Визуальное правило UI selector. L39
.inline-control Визуальное правило UI selector. L40
input Визуальное правило UI selector. L41
textarea Визуальное правило UI selector. L41
textarea Визуальное правило UI selector. L42
input:focus Визуальное правило UI selector. L43
textarea:focus Визуальное правило UI selector. L43
.button Визуальное правило UI selector. L44
.button.primary Визуальное правило UI selector. L45
.button.primary:hover Визуальное правило UI selector. L46
.button:disabled Визуальное правило UI selector. L47
.button.ghost Визуальное правило UI selector. L48
.actions-row Визуальное правило UI selector. L49
.segmented Визуальное правило UI selector. L50
.segment Визуальное правило UI selector. L51
.segment.active Визуальное правило UI selector. L52
.side-panel h2 Визуальное правило UI selector. L53
.side-panel ol Визуальное правило UI selector. L54
.side-panel li + li Визуальное правило UI selector. L55
.limit-card Визуальное правило UI selector. L56
.limit-card span Визуальное правило UI selector. L57
.notice Визуальное правило UI selector. L58
.notice.error Визуальное правило UI selector. L59
.answer-card Визуальное правило UI selector. L60
.answer-card p Визуальное правило UI selector. L61
.results-section Визуальное правило UI selector. L62
.results-head Визуальное правило UI selector. L63
.results-head h2 Визуальное правило UI selector. L64
.sort-note Визуальное правило UI selector. L65
.results-list Визуальное правило UI selector. L66
.result-card Визуальное правило UI selector. L67
.result-topline Визуальное правило UI selector. L68
.result-footer Визуальное правило UI selector. L68
.source-badge Визуальное правило UI selector. L69
.score Визуальное правило UI selector. L70
.result-card h3 Визуальное правило UI selector. L71
.result-card p Визуальное правило UI selector. L72
.result-footer Визуальное правило UI selector. L73
.result-footer a Визуальное правило UI selector. L74
.empty Визуальное правило UI selector. L75
footer Визуальное правило UI selector. L76
@media (max-width: 850px) Визуальное правило UI selector. L77
.layout Визуальное правило UI selector. L78
.workspace Визуальное правило UI selector. L78
.hero h1 Визуальное правило UI selector. L78
@media (max-width: 560px) Визуальное правило UI selector. L78
.brand small Визуальное правило UI selector. L79
.status-pill Визуальное правило UI selector. L79
.layout Визуальное правило UI selector. L79
.hero h1 Визуальное правило UI selector. L79
.hero > p:last-child Визуальное правило UI selector. L79
.search-panel Визуальное правило UI selector. L79
.side-panel Визуальное правило UI selector. L79
.inline-control Визуальное правило UI selector. L79
.actions-row Визуальное правило UI selector. L79
.result-footer Визуальное правило UI selector. L79
.button.primary Визуальное правило UI selector. L79
.segmented Визуальное правило UI selector. L79
.segment Визуальное правило UI selector. L79
.results-head Визуальное правило UI selector. L79
.sort-note Визуальное правило UI selector. L79
footer Визуальное правило UI selector. L79