კარტის ინტერფეისი და ვიზუალური ბლოკები

1) რატომ არის ბარათები

• სწრაფად სკანირება
• იძლევა ერთ მთავარ CTA- ს,
• ადაპტირება სხვადასხვა კონტეინერებზე/სვეტებზე,
• პროგნოზირებადი ქცევისთვის (hover, press, ფოკუსი, კონტექსტური მენიუ).

2) ბარათის ანატომია

1. მედია ზონა (გარეკანი/ლოგო/გადახედვა, 16: 9/4: 3/1: 1).

2. სათაური (1-2 სტრიქონი წვერით).

3. მეტამონაცემები (სუბტიტრები, ჭდე/კატეგორია, პროვაიდერი, დრო).

4. Badgey სტატუსი (სიახლე, ცოცხალი, აქცია, რეიტინგი).

5. STA/სწრაფი მოქმედებები (ღილაკი ან ხატები).

6. მეორადი ტექსტი (მოკლე, 2-3 max სტრიქონი).

7. მაკონტროლებელი (არჩეული,... კონტექსტი).

იერარქია: მედია - სათაური CTA - meta - მეორეხარისხოვანი. დესტრუქციული მოქმედებები იმალება ან მენიუში შედის.

3) ბადეები და განლაგება

გრიდი (ფიქსირებული სვეტი): 2-6 სვეტი; ადაპტირება auto-fit/auto-fill საშუალებით.
Responsive tiles: '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'; სრული ტექსტი სავალდებულოა tooltip/დეტალებში.

5) მდგომარეობა და ინტერაქტიულობა

Hover/Focus/Active: ჩრდილი/განათება, მაგრამ განლაგების "ნახტომი" გარეშე; ": focus-visible 'ყოველთვის ვხედავთ.
Selectable: checkbox/ჩარჩო; არ იყოს დაბნეული ბმულის ბარათთან.
Pressed: შემცირება 98% + ჩრდილში (120 ms ევრო).
Busy/Loading: ჩონჩხი და არა „ცარიელი“.

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.
ზარმაცი დატვირთვა: 'loading = "lazy"' + 'decoding = "async" ".
პლეიშოლდერი/ჩონჩხი დომინანტური პლაკატის ფერით.
დატვირთვის შეცდომა: ყალბი სურათი + ხატი „გამოსახულება-ოფი“.

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 და სწრაფი მოქმედებები

ბარათზე ერთი პრიმარი (მაგალითად, „თამაში“, „ფსონი“).
დამხმარე ხატები (არჩეული, გაზიარება...) - ჰოვერ/ფოკუსზე.
დესტრუქციული - დადასტურების ან უნდო პანელის საშუალებით.

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', წინააღმდეგ შემთხვევაში: სათაური, როგორც ბმული, დანარჩენი - სტატიკური.
Tab ბრძანება შეესაბამება ვიზუალურ; ფოკუსის რგოლი ჩანს.
სურათები 'alt'; დეკორატიული - 'aria-hidden = "ნამდვილი" ".
სტატუსებისთვის გამოიყენეთ 'role = „status“ '/' aria-live = „polite“.
ტექსტის კონტრასტი და სამკერდე ნიშანი AA; მნიშვნელობა არა მხოლოდ ფერით.

10) შესრულება

მედიისა და სიების ზარმაცი დატვირთვა; პაგინაცია ან ინფინიტიური სკრილი სენტრიულ დამკვირვებელთან.
ვირტუალიზაცია ფირის/უსასრულო გამოთვლებისთვის (± 10k ელემენტები).
მინიმუმამდე დაიყვანეთ reflow: ანიმაცია მხოლოდ 'ტრანსფორმაცია/opacity'.
გააკეთეთ ბარათები ჩონჩხის საშუალებით და შეცვალეთ შინაარსი მონაცემების დატვირთვის შემდეგ.

11) ჩონჩხი, შეცდომები, ცარიელი

ჩონჩხი იმეორებს ბარათის სტრუქტურას (მედია/ტექსტი/ღილაკი), აგრესიული შიმერის გარეშე; გაითვალისწინეთ 'prefers-reduced-motion'.
Error-state: ხატი + მოკლე ტექსტი („თამაშის ჩატვირთვა ვერ მოხერხდა“) + Retry ღილაკი.
Empty-state: ხატი/ილუსტრაცია, განმარტება „რა არის შემდეგი“ (ფილტრი/ძებნა/გამოწერა).

12) შინაარსის მართვა

წევა: 'line-clamp' + აშკარა რჩევები (tooltip).
გრძელი რიცხვები/თანხები: ცხრილის ნომრები: 'font-variant-numeric: tabular-nums;'.
ლოკალიზაცია: რეზერვი + 20-30% სიგანე გრძელი ეტიკეტებისთვის.
RTL მხარდაჭერა: ბეიჯის/ხატები და გასწორება.

13) ბნელი თემა და კონტრასტი

ჩრდილები უფრო სუსტია, გამოიყენეთ საზღვრები ('1px') გამჭვირვალეობით.
მხარი დაუჭირეთ AAA- ს მცირე შრიფტებისთვის; მოერიდეთ ციმციმებს.
მედია დაჩრდილულია თხელი ვულით (overlay 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) დახარისხება, ფილტრები, პაგინაცია

ფილტრაციის პანელი თავზე/მხარეს; შედეგი - ბარათის ქსელი.
პაგინაცია ჩანს; უსასრულო ნაკაწრი - მხოლოდ „უკან დაბრუნება“ და პოზიციის შენარჩუნება.
ფილტრები არ „ჩამოაგდეს“ skroll; გამოიყენება სწრაფად (100 ms) ან ინდიკატორით.

15) iGaming სპეციფიკა

15. 1 თამაშის ბარათი (slot/table)

მედია: პლაკატი 16:9, პროვაიდერის ლოგო.
მეტამონაცემები: პროვაიდერი, RTP, ცვალებადობა, კატეგორიები (- მხოლოდ ინფორმატიული, გამარჯვების დაპირებების გარეშე).
Bagy: New, Popular, Tournament, Jackpot.
CTA: „თამაში“ + „დემო“. კონტექსტი „18 +“ და საპასუხისმგებლო თამაში - ჩანს.

15. 2 მატჩის ბარათი/კოეფიციენტი

Live Badge Live; ტაიმერი/პერიოდი.
საკვანძო კოეფიციენტები (2-3) მყისიერი hover/press და უსაფრთხო undo (თუ ნებადართულია).
განახლებები ციმციმების გარეშე; კურსის შეცვლისას - სისუფთავე განათება.

15. 3 ტურნირის ბარათი/Iventa

თარიღები, საპრიზო ფონდი, წესები (ბმული).
სტატუსი („რეგისტრაცია ღიაა/დახურულია“, „მოდის“).
CTA „შეუერთდით“, „წესები“; მონაწილეობის პროგრესი (ქულა/ადგილი).

16) ანტიპატერები

მთელი კლიკაბელის ბარათი + მეორეხარისხოვანი ბმულების შიგნით (ფოკუსის/დაწკაპუნების ხაფანგები).
ორი პრიმარი-CTA იქვე („თამაში“ და „ბონუსის ყიდვა“) ყურადღების კონკურენციაა.
პლეიშოლდერების/ჩონჩხის ნაკლებობა არის „გადახტომა“ ბადე (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) Snippets

React: უნივერსალური ბარათი

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 scroll 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) მეტრიკა და ექსპერიმენტები

CTR primary-CTA и Time-to-Click.
Scroll-depth - click: დაწკაპუნება „მუწუკზე “/„ ნაპერწკლის ქვეშ“.
ბარათი - ნაწილების ნახვა და კონვერტაცია.
სამკერვალო ხილვადობა და მათი გავლენა CTR- ზე.
Skeleton visible time и CLS.
A/B: ბარათების ზომა, მეტამონაცემების რაოდენობა, სწრაფი მოქმედების ხილვადობა, ქსელის ტიპი (სიის/გრიდი).

20) QA ჩეკის სია

წვდომა

• ფოკუს რგოლები ჩანს; Tab ბრძანება ლოგიკურია.
• Alt ტექსტები და 'aria-label' სწორია; სტატუსის ბეიჯი ტექსტით.
• ტექსტის/ფონის კონტრასტი AA.

ქცევა

• ერთი primary-CTA; სწრაფი მოქმედებები არ დაბლოკავს მთავარ სცენარს.
• Hover/press/elected გამოირჩევა; კონტექსტური მენიუ მუშაობს.
• ცარიელი/შეცდომები/ჩონჩხი სწორია; არის რეტრი.

შესრულება

• ზარმაცი მედიის დატვირთვა; განლაგების მკვეთრი ნახტომი არ არის.

დიდი სიების ვირტუალიზაცია; ანიმაცია 'ტრანსფორმირება/კეთილდღეობა'.

ბადე

• 'minmax (240px, 1fr)' და 'gap' ადაპტირებულია; მასონრი არ არღვევს კითხვის ფოკუსს/წესრიგს.
• RTL/ლოკალიზაცია არ „არღვევს“ ჭრა და ბადეები.

21) დოკუმენტაცია დიზაინის სისტემაში

Компоненты: `Card`, `GameCard`, `MatchCard`, `TournamentCard`, `StatusBadge`, `SkeletonCard`.
ნიშნები: სხივი/ჩრდილები/უკანდახევა/ფენები, სამკერვალო ფერები, ანიმაცია.
ნიმუშები: „ერთი CTA“, „ჩონჩხი სპინერის ნაცვლად“, „ინფინიტ-კლდე + პოზიციის შენარჩუნება“.
Do/Don 't გალერეა: გადატვირთული ბარათი მინიმალური, „დაწკაპუნებული მთელი ბარათი“ აშკარა ელემენტებია.

მოკლე რეზიუმე

ბარათები მუშაობს, როდესაც მათ აქვთ მკაფიო იერარქია, ერთი მთავარი CTA, პროგნოზირებადი სახელმწიფოები, სტაბილური ბადეები და შესრულების და ხელმისაწვდომობის პატივისცემა. ჩაწერეთ ნიშნები და ნიმუშები, გამოიყენეთ ჩონჩხი და ზარმაცი დატვირთვა, შეინარჩუნეთ შინაარსი ლაკონური - და ბარათის ინტერფეისები გახდება სწრაფი, კითხვა და კონვერტაცია, განსაკუთრებით iGaming სცენარებში.