Kartoçka interfeýsi we wizual bloklar

1) Näme üçin kartoçkalar

• çalt gözden geçirilýär,
• bir esasy CTA berýär,
• dürli konteýnerlere/sütünlere uýgunlaşýar,
• özüni alyp barşy öňünden aýdyp bolar (hower, press, fokus, kontekstli menýu).

2) Kartoçkanyň anatomiýasy

1. Media-zona (örtük/logo/deslapky, 16: 9/4: 3/1: 1).

2. Sözbaşy (kesilen 1-2 setirler).

3. Metadata (subtitr, tag/kategoriýa, üpjün ediji, wagt).

4. Status nyşanlary (täzelik, live, aksiýa, reýting).

5. STA/çalt hereketler (düwme ýa-da nyşanlar).

6. Ikinji tekst (gysga, 2-3 setirler max).

7. Gözegçilikler (Saýlanan,... kontekst).

Iýerarhiýa: media → sözbaşy → CTA → meta → ikinji derejeli. Weýran ediji hereketler gizlenýär ýa-da menýuda ýerleşdirilýär.

3) Torlar we ýerleşdirmeler

Grid (kesgitlenen sütün): 2-6 sütün; auto-fit/auto-fill arkaly uýgunlaşdyrylýar.
Responsive tiles: 'minmax (240px, 1fr)' - kartoçkalar serhetlere çenli ösýär.
Masonry/üýtgeýän beýiklik: seresap; fokusyň we okamagyň tertibini üpjün etmek.
Sanawda: gorizontal tygşytlamak we sortlamak möhüm bolanda.

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) Dykyzlygy we ritmi

Meýdanlar/girişdeler: içinde 12-16 px; 8-12 px bloklaryň arasynda.
Setiriň beýikligi: 1. 3–1. 5; şriftler: sözbaşy 16-18 px, meta 12-14 px.
Klipping: 'line-clamp: 2-3'; tooltip/jikme-jikliklerdäki doly teksti hökmanydyr.

5) Ýagdaýlar we interaktiwlik

Hover/Focus/Active: kölege/yşyklandyryş, ýöne maket "bökmezden"; ': focus-visible' elmydama görýäris.
Seçip bolýar: çekbox/çarçuwa; baglanyşyk kartoçkasy bilen garyşdyrmaly däldir.
Pressed: 98% -e çenli azaltmak + aşak kölege (120 ms ≤).
Busy/Loading: "boş" däl-de, skelet.

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) Suratlar we metbugat

Aspect-ratio gaty berk; oýunlaryň sanawynda - 16:9 ýa-da 4:3.
Ýaltalyk ýüklemek:' loading =" lazy"' +' decoding =" async"'.
Afişanyň esasy reňki bolan pleýsholder/skelet.
Göçürip almakda ýalňyşlyk: galp surat + "image-off" nyşany.

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

7) Nyşanlar we bellikler

Gysga (1-2 söz): Täze, Live, -20%, Top 10.
Diňe reňke bil baglap bilmersiňiz - nyşany/teksti goşuň.
Ýerleşişi: Media çep ýokarky; birnäçe - 4-6 px boşlukly stekde.

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 we çalt hereketler

Kartoçka üçin bir primary (mysal üçin, "Oýnamak", "Jedel etmek").
Kömekçi nyşanlar (Saýlanan, Paýlaşmak,...) - hover/fokus.
Destruktiw - tassyklamak ýa-da undo-panel arkaly.

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) Elýeterlilik (A11y)

Ähli baglanyşyk kartoçkasy - '<a>' bilen düşnükli 'aria-label', ýogsam: sözbaşy baglanyşyk hökmünde, galanlary - statik.
Tab tertibi wizual; fokus halkasy görünýär.
'Alt' şekilleri; bezeg -' aria-hidden =" true"'.
Statuslar üçin 'role =' status ''/' aria-live =' polite '' ulanyň.
Tekstiň we nyşanlaryň gapma-garşylygy ≥ AA; manysy diňe reňk bilen däl.

10) Çykyş

Media we sanawlary ýaltalyk bilen ýüklemek; sentry-synçy bilen paginasiýa ýa-da infinit-skroll.
Lentaly/tükeniksiz çykyşlar üçin wirtualizasiýa (± 10k element).
Reflow iň az: diňe 'transform/opacity' animasiýasyny ediň.
Kartoçkalary skeletler bilen görkeziň we maglumatlar ýüklenenden soň mazmuny çalşyň.

11) Skeletonlar, ýalňyşlyklar, boş

Skelet kartoçkanyň gurluşyny gaýtalaýar (media/tekst/düwme), agressiw shimmer bolmazdan; 'prefers-reduced-motion' -y göz öňünde tutuň.
Error-state: nyşan + gysga tekst ("Oýny göçürip alyp bolmady") + Retry düwmesi.
Empty-state: nyşan/illýustrasiýa, düşündiriş, "Indiki näme" (süzgüç/gözlemek/abuna ýazylmak).

12) Mazmuny dolandyrmak

Kesmek: 'line-clamp' + aç-açan maslahatlar (tooltip).
Uzyn sanlar/jemler: tabla sanlary: 'font-variant-numeric: tabular-nums;'.
Lokalizasiýa: ätiýaçlyk uzynlygy 20-30%.
RTL goldawy: nyşanlary/nyşanlary flip we tekizlemek.

13) Garaňky tema we kontrast

Kölegeler has gowşak, çäkleri aç-açanlyk bilen ulanyň ('1px').
Kiçi şriftler üçin AAA-ny goldaň; ýalpyldawukdan gaça duruň.
Metbugat tekstiň okalmagy üçin inçe örtük bilen garalýar (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) Sortlamak, süzgüçler, paginasiýa

Ýokarky/gapdal süzgüçler paneli; netije - kartoçkalar tory.
Paginasiýa görünýär; tükeniksiz skroll - diňe "Başyna yza" we pozisiýany saklamak bilen.
Süzgüçler skroll "taşlamaýar"; çalt (100 ms ≤) ýa-da indikator bilen ulanylýar.

15) iGaming aýratynlyklary

15. 1 Oýun kartoçkasy (slot/table)

Media: afişa 16:9, üpjün edijiniň nyşany.
Meta-maglumatlar: üpjün ediji, RTP, üýtgewsizlik, kategoriýalar (- diňe maglumat taýdan, ýeňiş wada bermezden).
Nyşanlar: Täze, Meşhur, Tournament, Jackpot.
CTA: "Oýna" + "Demo". "18" konteksti we jogapkärli oýun - görünýär.

15. 2 Oýun/koeffisiýent kartoçkasy

Live nyşany; wagt/döwür.
Esasy koeffisiýentler (2-3) derrew hover/press we howpsuz undo (rugsat berilse).
Ýalpyldawuksyz täzelenmeler; kurs üýtgän halatynda - arassa yşyklandyryş.

15. 3 Ýaryşyň/çäräniň kartoçkasy

Seneler, baýrak gaznasy, düzgünler (salgylanma).
Status ("Hasaba alyş açyk/ýapyk", "Bolýar").
CTA "Goşulmak", "Düzgünler"; gatnaşmagyň ösüşi (bal/ýer).

16) Antipatternler

Kartoçkanyň hemmesi basylýar + içinde ikinji derejeli baglanyşyklar (fokus/basma duzaklary).
Iki sany primary-CTA ("Oýnamak" we "Bonus satyn almak") - üns bäsdeşligi.
Pleýsholderleriň/skeletleriň ýoklugy → "bökýän" tor (CLS).
Tükeniksiz shimmer effektleri; kölegeli animasiýa/blur (gymmat).
Çal reňkde "sütüne" meta-maglumatlar (kontrast ýok).
Diňe reňk bilen many berýän nyşanlar.

17) Dizaýn-ulgamyň bellikleri (mysal)

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) Snippetler

React: ähliumumy kartoçka

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>
);
}

Infinit-skroll sentry

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

19) Metrikler we synaglar

CTR primary-CTA и Time-to-Click.
Scroll-depth → click: "bukulmak "/" bukulmak".
Kartoçka → jikme-jiklikleri görmek → öwrülişik.
Nyşanlaryň görünmegi we olaryň CTR-e täsiri.
Skeleton visible time и CLS.
A/B: kartoçkalaryň ululygy, meta-maglumatlaryň sany, çalt hereketleriň görünmegi, toruň görnüşi (list/grid).

20) QA-çek-sanawy

Elýeterlilik

• Fokus halkalary görünýär; Tab tertibi mantykly.
• Alt-tekstler we 'aria-label' dogry; tekstli status nyşanlary.
• Tekst/fon kontrast ≥ AA.

Özüni alyp barşy

• Bir primary-CTA; çalt hereketler esasy ssenariýany ýapmaýar.
• Hover/press/selected tapawutlanýar; kontekstiň menýusy işleýär.
• Boş/ýalňyşlyklar/skeletler dogry; Retry bar.

Çykyş

• Ýaltalyk media ýüklemek; ýerleşişde ýiti böküşler ýok.
• Uly sanawlary wirtuallaşdyrmak; animasiýa 'transform/opacity'.

Tor

• 'minmax (240px, 1fr)' we 'gap' uýgunlaşýar; Masonry okamagyň fokusyny/tertibini bozmaýar.
• RTL/lokalizasiýa kesmek we nyşanlary "döwmeýär".

21) Dizaýn-ulgamdaky resminamalar

Компоненты: `Card`, `GameCard`, `MatchCard`, `TournamentCard`, `StatusBadge`, `SkeletonCard`.
Bellikler: radius/kölegeler/girintiler/gatlaklar, nyşanlaryň, animasiýalaryň reňkleri.
Pattern: "Bir CTA", "Spinneriň ýerine skelet", "Infinit-skroll + pozisiýany saklamak".
Do/Don 't-galereýa: aşa ýüklenen kartoçka vs iň az, "ähli kartoçka basylýar" vs aýdyň elementler.

Gysgaça gysgaça

Kartoçkalar anyk iýerarhiýa, bir esasy CTA, öňünden aýdyp boljak ýagdaýlar, durnukly torlar we çykyşlara we elýeterlilige hormat goýanda işleýär. Bellikleri we nagyşlary düzüň, skeletleri we ýalta ýüklemegi ulanyň, mazmuny gysga saklaň - kartoçka interfeýsleri, esasanam iGaming ssenarilerinde çalt, okalýan we öwrülişik bolar.