Интерфейси корт ва блокҳои визуалӣ

1) Чаро кортҳо

• зуд скан карда шуд,
• ба як устои CTA медиҳад,
• мутобиқ ба контейнерҳо/сутунҳои гуногун,
• дар рафтор пешгӯишаванда аст (hover, press, focus, менюи контекст).

2) Анатомияи корт

1. Минтақаи медиа (муқова/лого/пешнамоиш, 16: 9/4: 3/1: 1).

2. Сарлавҳа (1-2 хатҳои буридашуда).

3. Метадата (субтитр, барчасп/категория, провайдер, вақт).

4. Нишонаҳои вазъ (нав, зинда, таблиғ, рейтинг).

5. CTA/амалҳои зуд (тугма ё нишонаҳо).

6. Матни дуввум (кӯтоҳ, 2-3 максимум).

7. Назорат (мунтахаб,... контекст).

Иерархия: медиа → сарлавҳа → CTA → мета → миёна. Амалҳои харобкунанда дар меню пинҳон ё нишон дода мешаванд.

3) Торҳо ва тарҳҳо

Grid (сутуни собит): 2-6 сутун; ■ тавассути худкор/худкор пур кардан.
Плитаҳои ҷавобдиҳанда: 'minmax (240px, 1fr)' - кортҳо маҳз ба сарҳадҳо мерӯянд.
Девор/баландии гуногун: бодиққат; тартибот ва хониши фокусро таъмин кунед.
Рӯйхат (дар як саф): вақте ки иқтисоди уфуқӣ ва навъбандӣ муҳим аст.

css
.cards {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(240px,1fr));
gap: 16px;
}
.card {
border-radius: 12px;
background: var(--bg-elevated);
box-shadow: var(--elev-2);
display: grid;
grid-template-rows: auto 1fr auto;
overflow: hidden;
}
.card__media { aspect-ratio: 16/9; object-fit: cover; }

4) Зичӣ ва ритм

Ҳошияҳо/нишонаҳо: дар дохили 12-16 px; байни воҳидҳои 8-12 px.
Баландии сатр: 1. 3–1. 5; ҳуруфҳо: сарлавҳаи 16-18 px, мета 12-14 px.
Клипи матнӣ: 'line-clamp: 2-3'; матни пурраи ҳатмӣ дар абзор/тафсилот.

5) Давлатҳо ва интерактивӣ

Hover/Focus/Фаъол: соя/равшанӣ, аммо бидуни тарҳ "ҷаҳида"; ': фокус намоён' ҳамеша намоён.
Интихобшаванда: қуттии қуттӣ/чорчӯба; бо корти истинод ошуфта нашавед.
Фишор: то 98% + соя кам кунед (≤ 120 мс).
Банд/Боркунӣ: скелет, на "холӣ".

css
.card:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.card:hover { box-shadow: var(--elev-3); transform: translateY(-1px); transition: box-shadow. 16s, transform. 16s; }

6) Тасвирҳо ва ВАО

Таносуби ҷанба собит аст; дар рӯйхати бозиҳо - 16:9 ё 4:3.
Боркунии танбалӣ:' боркунӣ =" танбалӣ"' +' рамзкушоӣ =" async"'.
Ҷойгиркунӣ/скелет бо ранги плакатҳои бартаридошта.
Хатои боркунӣ: тасвири dummy + тасвири хомӯш.

html
<img class = "card __ media" src ="..." alt = "Game name" loading =" lazy" onerror =" this. src='/fallback. png'">

7) Нишонаҳо ва барчаспҳо

Кӯтоҳ (1-2 калима): Нав, Зиндагӣ, -20%, Топ 10.
Шумо наметавонед танҳо ба ранг такя кунед - илова кардани нишона/матн.
Макон: ВАО-и чапи боло; якчанд - дар анбор бо фосилаи 4-6 px.

css
.badge { display:inline-flex; gap:6px; align-items:center; padding:4px 8px; border-radius:8px; font-size:.75rem; }
.badge--live { background: var(--bg-danger); color: var(--on-danger); }

8) CTA ва амали зуд

Як корти ибтидоӣ (масалан, "Бозӣ", "Бет").
Нишонаҳои ёрирасон (мунтахаб, мубодила,...) - бо hover/фокус.
Харобкунанда - тавассути тасдиқ ё бекор кардани панел.

html
<div class="card__actions">
<button class="btn btn--primary">Играть</button>
<button class =" icon" aria-label = "Add to Favorites" title =" B Favorites "> </button>
<button class="icon" aria-haspopup="menu" aria-expanded="false">⋯</button>
</div>

9) Дастрасӣ (A11y)

Тамоми корти пайванд '<a>' бо 'aria-label' равшан аст, вагарна: унвон ба монанди пайванд, боқимонда статикӣ аст.
Тартиби Ҷадвал ба визуалӣ мувофиқат мекунад; ҳалқаи фокус намоён аст.
Тасвирҳо бо 'alt'; ороишӣ -' aria-пинҳон =" ҳақиқӣ"'.
Барои статусҳо, 'нақш = "статус "/' aria-live =" хушмуомила "-ро истифода баред.
Контрасти матн ва нишона ≥ АА; маъно танҳо ранг нест.

10) Иҷро

Боркунии танбалии ВАО ва рӯйхатҳо; pagination ё infinitis ҳаракат бо посбон-нозир.
Виртуализатсия барои баромади лента/беохир (± унсурҳои 10к).
Кам кардани ҷараён: Танҳо аниматсия 'табдил/шаффофӣ'.
Кортҳоро бо скелетҳо пешниҳод кунед ва пас аз бор кардани маълумот бо мундариҷа иваз кунед.

11) Скелетҳо, хатогиҳо, холӣ

Скелет сохтори кортро (медиа/матн/тугма) бидуни тобиши хашмгин такрор мекунад; ба назар гиред 'prefers-коҳиш-ҳаракат'.
Ҳолати хатогӣ: нишона + матни кӯтоҳ ("Пурбор кардани бозӣ") + тугмаи Бозсозӣ.
Ҳолати холӣ: нишона/тасвир, шарҳ, "Боз чӣ" (филтр/ҷустуҷӯ/обуна).

12) Идоракунии мундариҷа

Буриш: 'line-clamp' + асбоби возеҳ.
Рақамҳои дароз/ҷамъҳо: рақамҳои ҷадвал: 'ҳуруф-вариант-рақам: ҷадвал-рақамҳо; '.
Маҳаллисозӣ: захира + 20-30% паҳнои тамғакоғазҳои дароз.
Дастгирии RTL: нишонаҳо/нишонаҳо ва ҳаммарказҳоро буред.

13) Мавзӯи торик ва контраст

Сояҳо заифтаранд, сарҳадҳоро ('1px') бо шаффофият истифода мебаранд.
AAA-ро барои ҳуруфҳои хурд дастгирӣ кунед; дурӣ ҷӯед.
Барои хондани матн ВАО бо пардаи лоғар торик мешавад (қабати 8-12%).

css
.theme-dark. card { background: var(--bg-elevated-dark); box-shadow: var(--elev-1-dark); }
.theme-dark. card__media::after { content:""; position:absolute; inset:0; background: rgba(0,0,0,.12); }

14) Мураттабкунӣ, филтрҳо, саҳифабандӣ

Панели филтри боло/паҳлӯ; натиҷа шабакаи кортҳо мебошад.
Пагинатсия намоён аст; ҳаракатҳои беохир - танҳо бо "Бозгашт ба боло" ва нигоҳ доштани мавқеъ.
Филтрҳо ҳаракатро "барқарор" намекунанд; зуд истифода бурда мешавад (≤ 100 мс) ё бо нишондиҳанда.

15) Хусусиятҳои IGaming

15. 1 Корти бозӣ (слот/ҷадвал)

ВАО: 16:9 плакат, логотипи провайдер.
Метамаълумот: провайдер, RTP, ноустуворӣ, категорияҳо (- танҳо иттилоотӣ, бидуни ваъдаҳои ғолиб).
Нишонаҳо: нав, маъмул, мусобиқа, Jackpot.
CTA: "Play" + "Демо. "Контексти "18 +" ва бозии масъул намоён аст.

15. 2 Корти мувофиқ/коэффисиент

Нишони зинда Live; вақт/давра.
Коэффисиентҳои калидӣ (2-3) бо hover/press фаврӣ ва бекоркунии бехатар (агар иҷозат дода шавад).
Навсозиҳои ройгон; ҳангоми тағир додани курс - равшании тоза.

15. 3 Корти мусобиқа/чорабинӣ

Санаҳо, ҳавзи мукофотӣ, қоидаҳо (пайванд).
Статус (Бақайдгирии кушода/пӯшида, дар пешрафт).
CTA "Ҳамроҳ шавед", "Қоидаҳо"; пешрафти иштирок (нуқтаҳо/ҷой).

16) Антипаттернҳо

Тамоми корт клик карда мешавад + дар дохили истинодҳои дуюмдараҷа (домҳои фокус/клик).
Ду CTA-и ибтидоӣ ("Play" ва "Bonus Buy") - рақобати диққат.
Не ҷойгоҳ/скелетҳо → шабакаи ҷаҳида (CLS).
Таъсири беохир тобнок; сояи аниматсия/норавшан (гарон).
Метамаълумоти сутун бо хокистарии хурд дар хокистарӣ (бидуни муқобил).
Нишонаҳое, ки маънои танҳо рангро доранд.

17) Нишонаҳои системаи тарроҳӣ (мисол)

json
{
"card": {
"radius": 12,
"gap": 12,
"mediaRatio": "16/9",
"px": "12 12 12 12",
"shadow": { "rest": "var(--elev-2)", "hover": "var(--elev-3)" }
},
"badge": { "radius": 8, "px": "4 8", "icon": 14 },
"grid": { "gap": 16, "min": 240, "max": 1 },
"motion": { "hoverMs": 160, "pressMs": 100, "fadeMs": 160 },
"a11y": { "contrastAA": true, "focusRingWidth": 2, "focusRingOffset": 2 }
}

18) Снайперҳо

Вокуниш: корти универсалӣ

tsx type CardProps = {
title: string;
subtitle?: string;
mediaUrl?: string;
badges?: string[];
onPrimary?: () => void;
primaryLabel?: string;
onFav?: () => void;
children?: React. ReactNode;
};
export default function Card({
title, subtitle, mediaUrl, badges=[], onPrimary, primaryLabel='Открыть', onFav, children
}: CardProps){
return (
<article className="card group focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2">
<div className="relative">
{mediaUrl? <img className="w-full aspect-[16/9] object-cover" src={mediaUrl} alt={title}/>: <div className="aspect-[16/9] bg-neutral-200"/>}
<div className="absolute top-2 left-2 flex gap-1">
{badges. map(b => <span key={b} className="badge">{b}</span>)}
</div>
</div>
<div className="p-3 grid gap-2">
<h3 className="text-sm font-semibold line-clamp-2" title={title}>{title}</h3>
{subtitle && <p className="text-xs text-neutral-500 line-clamp-2">{subtitle}</p>}
{children}
<div className="flex items-center gap-8">
{onPrimary && <button className="btn btn--primary" onClick={onPrimary}>{primaryLabel}</button>}
{onFav && <button className="icon opacity-0 group-hover:opacity-100" aria-label="В избранное" onClick={onFav}></button>}
</div>
</div>
</article>
);
}

Посбони ҳаракаткунандаи беохир

js const sentry = document. querySelector('#sentry');
const io = new IntersectionObserver(entries=>{
if(entries. some(e=>e. isIntersecting)) loadMore();
}, { rootMargin: '200px' });
io. observe(sentry);

19) Нишондиҳандаҳо ва таҷрибаҳо

CTR ибтидоӣ-CTA i Time-to-Click.
Ҷойивазкунии чуқурии → клик: "болои хам "/" зери хам "-ро клик кунед.
Корт → тафсилоти § табдилдиҳӣ.
Намоиши нишонаҳо ва таъсири онҳо ба CTR.
Вақти намоёни скелет i CLS.
A/B: андозаи кортҳо, миқдори метамаълумот, намоёни амалҳои зуд, навъи шабака (рӯйхат/шабака).

20) Рӯйхати назоратии QA

Мавҷудият

• Ҳалқаҳои фокусӣ намоёнанд; Тартиби ҷадвал мантиқӣ аст.
• Матнҳои Alt-ва 'aria-label' дурустанд; Нишонаҳо бо матн.
• Контрасти матн/замина ≥ АА.

Рафтор

• Як ибтидоӣ-CTA; амалҳои зуд сенарияи асосиро такрор намекунанд.
• Hover/press/фарқкунандаи интихобшуда; менюи контекст кор мекунад.
• Холӣ/хатогиҳо/скелетҳо дурустанд; он ҷо Retry ҳаст.

Иҷро

• Боркунии ВАО танбалӣ; дар тарҳ ягон ҷаҳиши тез вуҷуд надорад.
• Виртуализатсияи рӯйхатҳои калон; аниматсияҳои 'transform/opacity'.

Шабака

• 'minmax (240px, 1fr)' ва 'фосила' мутобиқанд; Девор фармоиши фокус/хонишро вайрон намекунад.
• RTL/маҳаллисозӣ зироат ва нишонаҳоро "вайрон намекунад".

21) Ҳуҷҷатгузорӣ дар системаи тарроҳӣ

Компоненты: 'Корт', 'Game

Токенҳо: радиус/сояҳо/индентҳо/қабатҳо, рангҳои нишонаҳо, аниматсияҳо.
Намунаҳо: "Як CTA", "Скелет ба ҷои спиннер", "Ҷойивазкунии беохир + мавқеи нигоҳдорӣ".
Галереяро иҷро накунед: корти изофабори против ҳадди аққал, "тамоми корти клик" ва унсурҳои возеҳ.

Хулосаи мухтасар

Кортҳо вақте кор мекунанд, ки онҳо иерархияи возеҳ доранд, як устои CTA, ҳолатҳои пешбинишаванда, шабакаҳои устувор ва эҳтиром ба фаъолият ва дастрасӣ. Нишонаҳо ва намунаҳоро сабт кунед, скелетҳо ва боркунии танбалро истифода баред, мундариҷаро мухтасар нигоҳ доред - ва интерфейсҳои корт зуд, хондан ва табдилдиҳӣ омода мешаванд, алахусус дар скриптҳои IGaming.