@@ -17,7 +17,7 @@
. review__header-top { display : flex ; justify-content : space-between ; gap : 1 rem ; align-items : start ; }
. review__header-top { display : flex ; justify-content : space-between ; gap : 1 rem ; align-items : start ; }
. review__eyebrow { display : inline-flex ; align-items : center ; gap : .5 rem ; color : var ( - - brand ) ; font-size : .75 rem ; font-weight : 800 ; letter-spacing : .12 em ; text-transform : uppercase ; }
. review__eyebrow { display : inline-flex ; align-items : center ; gap : .5 rem ; color : var ( - - brand ) ; font-size : .75 rem ; font-weight : 800 ; letter-spacing : .12 em ; text-transform : uppercase ; }
. review__eyebrow :: before { content : '' ; width : .55 rem ; height : .55 rem ; border-radius : 50 % ; background : var ( - - accent ) ; box-shadow : 0 0 0 4 px rgb ( 231 184 75 / .2 ) ; }
. review__eyebrow :: before { content : '' ; width : .55 rem ; height : .55 rem ; border-radius : 50 % ; background : var ( - - accent ) ; box-shadow : 0 0 0 4 px rgb ( 231 184 75 / .2 ) ; }
. review__main { padding-block-end : 6 rem ; }
. review__main { padding-block-end : 2 rem ; }
. review__search { display : grid ; grid-template-columns : minmax ( 18 rem , 1 fr ) 9 rem 9 rem auto ; align-items : end ; gap : .75 rem ; padding : 1.25 rem ; background : var ( - - surface ) ; border : 1 px solid var ( - - line ) ; border-radius : 1 rem ; box-shadow : 0 1.25 rem 3 rem rgb ( 24 42 54 / .08 ) ; }
. review__search { display : grid ; grid-template-columns : minmax ( 18 rem , 1 fr ) 9 rem 9 rem auto ; align-items : end ; gap : .75 rem ; padding : 1.25 rem ; background : var ( - - surface ) ; border : 1 px solid var ( - - line ) ; border-radius : 1 rem ; box-shadow : 0 1.25 rem 3 rem rgb ( 24 42 54 / .08 ) ; }
. review__field { display : grid ; gap : .35 rem ; min-width : 0 ; }
. review__field { display : grid ; gap : .35 rem ; min-width : 0 ; }
. review__field span , . review__actions label { color : var ( - - muted ) ; font-size : .8 rem ; font-weight : 700 ; }
. review__field span , . review__actions label { color : var ( - - muted ) ; font-size : .8 rem ; font-weight : 700 ; }
@@ -61,9 +61,9 @@
. review__document-meta { margin-block-end : 1 rem ; padding-block-end : 1 rem ; border-block-end : 1 px solid var ( - - line ) ; color : var ( - - muted ) ; }
. review__document-meta { margin-block-end : 1 rem ; padding-block-end : 1 rem ; border-block-end : 1 px solid var ( - - line ) ; color : var ( - - muted ) ; }
. review__document-body { max-width : 75 ch ; overflow-wrap : anywhere ; }
. review__document-body { max-width : 75 ch ; overflow-wrap : anywhere ; }
. review__document-body img { max-width : 100 % ; height : auto ; }
. review__document-body img { max-width : 100 % ; height : auto ; }
. review__actions { position : fixed ; inset-block-end : 0 ; inset-inline : 0 ; display : flex ; justify-content : center ; gap : .75 rem ; padd ing : .7 5 rem max ( 1 rem , env ( safe - area - inset - inline - start ) ) max ( .75 rem , env ( safe - area - inset - bottom ) ) ; background : rgb ( 255 255 255 / .94 ) ; border-block-start : 1 px solid var ( - - line ) ; box-shado w: 0 -.75 rem 2 rem rgb ( 24 42 54 / .06 ) ; backdrop-filter : blur ( 12 px ) ; }
. review__actions { max-width : 1320 px ; marg in: 1 .5rem auto 0 ; padding-inline : clamp ( 1 rem , 3 v w, 3 rem ) ; }
. review__actions-inner { display : flex ; align-items : end ; gap : .75 rem ; width : min ( 1320 px , 100 % ) ; }
. review__actions-inner { display : flex ; align-items : end ; gap : .75 rem ; padding : 1 rem ; background : var ( - - surface ) ; border : 1 px solid var ( - - line ) ; border-radius : 1 rem ; box-shadow : 0 .75 rem 2 rem rgb ( 24 42 54 / .05 ) ; }
. review__actions label { flex : 1 ; }
. review__actions label { display : grid ; gap : .35 rem ; flex : 1 ; color : var ( - - muted ) ; font-size : .8 rem ; font-weight : 700 ; }
. review__actions label : last-of-type { flex : 2 ; }
. review__actions label : last-of-type { flex : 2 ; }
dialog { max-width : min ( 56 rem , calc ( 100 % - 2 rem ) ) ; max-height : calc ( 100 % - 2 rem ) ; border : 1 px solid var ( - - line ) ; border-radius : 1 rem ; padding : 1.5 rem ; box-shadow : 0 2 rem 5 rem rgb ( 10 20 30 / .2 ) ; }
dialog { max-width : min ( 56 rem , calc ( 100 % - 2 rem ) ) ; max-height : calc ( 100 % - 2 rem ) ; border : 1 px solid var ( - - line ) ; border-radius : 1 rem ; padding : 1.5 rem ; box-shadow : 0 2 rem 5 rem rgb ( 10 20 30 / .2 ) ; }
dialog :: backdrop { background : rgb ( 10 20 30 / .5 ) ; }
dialog :: backdrop { background : rgb ( 10 20 30 / .5 ) ; }
@@ -84,7 +84,7 @@
. review__search { grid-template-columns : 1 fr 1 fr ; }
. review__search { grid-template-columns : 1 fr 1 fr ; }
. review__search . review__field : first-child { grid-column : 1 / -1 ; }
. review__search . review__field : first-child { grid-column : 1 / -1 ; }
. review__workspace { grid-template-columns : 1 fr ; }
. review__workspace { grid-template-columns : 1 fr ; }
. review__main { padding-block-end : 14 rem ; }
. review__main { padding-block-end : 2 rem ; }
. review__document { display : none ; }
. review__document { display : none ; }
. review__document--tour-visible { display : block ; }
. review__document--tour-visible { display : block ; }
. review__search button { grid-column : 1 / -1 ; }
. review__search button { grid-column : 1 / -1 ; }
@@ -119,8 +119,7 @@
< div class = "review__actions" > < div class = "review__actions-inner" > < label > Ваше имя или псевдоним< input id = "reviewer" maxlength = "120" autocomplete = "name" placeholder = "Например, Айжан К ." > < / label > < label > Комментарий к выдаче < input id = "overall-comment" maxlength = "4000" placeholder = "Что важно учесть? (необязательно)" > < / label > < button class = "review__button--primary" id = "save" type = "button" > Сохранить разметку< / button > < / div > < / div >
< div class = "review__actions" > < div class = "review__actions-inner" > < label > Ваше имя или псевдоним< input id = "reviewer" maxlength = "120" autocomplete = "name" placeholder = "Например, Айжан К ." > < / label > < label > Комментарий к выдаче < input id = "overall-comment" maxlength = "4000" placeholder = "Что важно учесть? (необязательно)" > < / label > < button class = "review__button--primary" id = "save" type = "button" > Сохранить разметку< / button > < / div > < / div >
< dialog id = "document-dialog" > < button class = "review__dialog-close" id = "dialog-close" type = "button" > Закрыть< / button > < h2 id = "dialog-heading" > Документ< / h2 > < div class = "review__document-body" id = "dialog-body" > < / div > < / dialog >
< dialog id = "document-dialog" > < button class = "review__dialog-close" id = "dialog-close" type = "button" > Закрыть< / button > < h2 id = "dialog-heading" > Документ< / h2 > < div class = "review__document-body" id = "dialog-body" > < / div > < / dialog >
< div class = "review__tour-spotlight" id = "tutorial-spotlight" hidden aria-hidden = "true" > < / div > < dialog class = "review__tour" id = "tutorial-dialog" aria-labelledby = "tutorial-heading" aria-describedby = "tutorial-text" > < div class = "review__tour-content" > < p class = "review__tour-kicker" > Короткое знакомство< / p > < h2 id = "tutorial-heading" > < / h2 > < p id = "tutorial-text" > < / p > < div class = "review__tour-footer" > < span class = "review__tour-progress" id = "tutorial-progress" > < / span > < div class = "review__tour-actions" > < button id = "tutorial-skip" type = "button" > Пропустить< / button > < button class = "review__button--primary" id = "tutorial-next" type = "button" > Далее< / button > < / div > < / div > < / div > < / dialog >
< div class = "review__tour-spotlight" id = "tutorial-spotlight" hidden aria-hidden = "true" > < / div > < dialog class = "review__tour" id = "tutorial-dialog" aria-labelledby = "tutorial-heading" aria-describedby = "tutorial-text" > < div class = "review__tour-content" > < p class = "review__tour-kicker" > Короткое знакомство< / p > < h2 id = "tutorial-heading" > < / h2 > < p id = "tutorial-text" > < / p > < div class = "review__tour-footer" > < span class = "review__tour-progress" id = "tutorial-progress" > < / span > < div class = "review__tour-actions" > < button id = "tutorial-skip" type = "button" > Пропустить< / button > < button class = "review__button--primary" id = "tutorial-next" type = "button" > Далее< / button > < / div > < / div > < / div > < / dialog >
< div class = "review__status review__status--error" id = "error" role = "alert" aria-live = "assertive" > < / div >
< footer class = "review__header" > Акылдаш · Backend v0.9.3 · Внутренняя лаборатория релевантности < / footer >
< footer class = "review__header" > Акылдаш · Backend v0.9.2 · Внутренняя лаборатория релевантности< / footer >
< script >
< script >
const DRAFT _KEY = 'akyldash-search-review-draft' ;
const DRAFT _KEY = 'akyldash-search-review-draft' ;
const TOUR _KEY = 'akyldash-search-review-tour-seen' ;
const TOUR _KEY = 'akyldash-search-review-tour-seen' ;
@@ -132,8 +131,8 @@
] ;
] ;
const state = { results : [ ] , token : '' , selected : null , query : '' } ;
const state = { results : [ ] , token : '' , selected : null , query : '' } ;
const $ = ( id ) => document . getElementById ( id ) ;
const $ = ( id ) => document . getElementById ( id ) ;
const setStatus = ( text ) => { $ ( 'status' ) . textContent = text ; $ ( 'error' ) . textContent = '' ; } ;
const setStatus = ( text , error = false ) => { $ ( 'status' ) . textContent = text ; $ ( 'status' ) . classList . toggle ( 'review__status--error' , error ) ; $ ( 'status' ) . setAttribute ( 'role' , error ? 'alert' : 'status' ) ; $ ( 'status' ) . setAttribute ( 'aria-live' , error ? 'assertive' : 'polite' ) ; } ;
const setError = ( text ) => { $ ( 'error' ) . textContent = text ; } ;
const setError = ( text ) => setStatus ( text , true ) ;
const escapeText = ( value ) => value == null ? '' : String ( value ) ;
const escapeText = ( value ) => value == null ? '' : String ( value ) ;
const readDraft = ( ) => { try { return JSON . parse ( localStorage . getItem ( DRAFT _KEY ) || 'null' ) ; } catch ( _ ) { return null ; } } ;
const readDraft = ( ) => { try { return JSON . parse ( localStorage . getItem ( DRAFT _KEY ) || 'null' ) ; } catch ( _ ) { return null ; } } ;
const hasSeenTour = ( ) => { try { return localStorage . getItem ( TOUR _KEY ) === '1' ; } catch ( _ ) { return false ; } } ;
const hasSeenTour = ( ) => { try { return localStorage . getItem ( TOUR _KEY ) === '1' ; } catch ( _ ) { return false ; } } ;