მოდალური და გამავალი პანელები

1) რა უნდა გამოვიყენოთ

მოდალი (დიალოგი უკანა პლანზე) - კრიტიკული გადაწყვეტილებებისთვის და მოკლე ამოცანებისთვის, რომლებიც სრულ ყურადღებას მოითხოვს: მოქმედების დადასტურება, სამართლებრივი თანხმობა, საშიში ოპერაციები, მოკლე ფორმები - 1-2 ველი. დაბლოკავს ფონს.
Drawer/Sheet (გამგზავრების პანელი) - კონტექსტური გაფართოებისთვის: ობიექტის დეტალები, ატრიბუტების რედაქტირება, სიიდან არჩევანი, დამხმარე ნავიგაცია. ფონი ჩანს და კონტექსტი შენარჩუნებულია.

• თუ მოქმედებას სჭირდება კონცენტრაცია და დადასტურება Modal.
• როდესაც თქვენ უნდა შეინახოთ კონტექსტი და მიეცით „პარალელური“ მიმოხილვა Drawer.

2) სტრუქტურა და ზომები

Modal

სათაური (სავალდებულოა) არის CTA ზონის (Primary/Secondary/Destructive) ძირითადი ტექსტი.
ზომები: S (480-560 px), M (640-720 px), L (840 px). Mobile - სრულ ეკრანზე sheet.

Drawer / Sheet

მიმართულება: მარჯვენა ზღვარი (დესკტოპი, რედაქტირება), ქვედა (მობილური, მოქმედებები), ზოგჯერ მარცხენა (ნავიგაცია).
სიგანე: 360-480 (S), 480-640 (M), 640-800 (L). Mobile: 90-100% სიგანე/სიმაღლე.

შინაარსის სიმაღლე ყოველთვის შეზღუდულია, შიგნით არის ნაკერი; სათაური/STA ფიქსირდება.

3) საავტორო უფლებები და CTA

სათაური = მოქმედება/მნიშვნელობა: „დაადასტუროს კურსი“, „გადახდის მეთოდის არჩევანი“, „საჭიროა KYC“.
ტექსტი მოკლეა, 1-2 წინადადება. მოერიდეთ ბუნდოვან ფორმულებს.
CTA: ერთი Primary, საიდუმლო („გაუქმება“) და, საჭიროების შემთხვევაში, Destructive.

სარისკო მოქმედებებისთვის დაამატეთ განმარტება 1 სტრიქონში: "მოქმედება შეუქცევადია. თქვენ შეგიძლიათ გააუქმოთ 10 წამი (თუ ხელმისაწვდომია)"

4) ქცევა და მდგომარეობა

აღმოჩენა: მყისიერი პასუხი 100 ms, შემდეგ ანიმაცია 120-180 ms.
დახურვა: უფრო სწრაფად, ვიდრე გახსნა (80-140 ms), ჩვენ ვუბრუნებთ აქცენტს ტრიგერზე.
Busy: 'aria-busy = „ნამდვილი“ კონტეინერზე, ღილაკი გამეორების ბლოკირებით.
Unsaved (ბინძური ფორმა): დახურვის დროს - დიალოგის გაფრთხილება („არის დაკარგული ცვლილებები“).
Escape/დაწკაპუნება ფონზე: დასაშვებია საშიში დიალოგებისთვის; კრიტიკულისთვის - მხოლოდ აშკარა ღილაკები.

5) წვდომა (A11y)

კონტეინერი: 'role = „dialog“' და 'aria-modal = „ნამდვილი“ (ნამდვილი მოდალისთვის).
სათაური უკავშირდება 'aria-labelledby'; აღწერა - 'aria-describedby'.
Focus trap შიგნით; პირველადი ხრიკი - სათაურზე ან პირველ ინტერაქტიულ ელემენტზე.
ფოკუსის დაბრუნება თავდაპირველ ტრიგერზე დახურვის შემდეგ.
ფონი არ არის დაფარული: 'დოკუმენტი. body {overflow: hidden;} 'ან' inert 'დანარჩენ DOM- ზე.
კლავიატურის მხარდაჭერა: Tab/Shift + Tab არის ციკლური; Esc ხურავს (თუ სცენაზე არ არის აკრძალული).
გაითვალისწინეთ 'prefers-reduced-motion': ანიმაციების გამორთვა/გამარტივება.

html
<div class="backdrop" data-open hidden></div>
<div class="dialog" role="dialog" aria-modal="true" aria-labelledby="d-title" aria-describedby="d-desc" hidden>
<h2 id =" d-title "> Confirm Bid </h2>
<p id =" d-desc "> Sum of 200 ₴ by factor 1. 85</p>
<div class="actions">
<button class =" btn btn--primary "> Confirm </button>
<button class =" btn btn--ghost "> Cancel </button>
</div>
</div>

6) შესრულება და არქიტექტურა

Render პორტალზე (განაცხადის თავზე) ნაკლები პრობლემაა z-index- ით.
პირველ გახსნისას დაამონტაჟეთ ზარმაცი შინაარსი, დემონტაჟი დახურვის ანიმაციის შემდეგ (ან თარგმნეთ ოფშორული).
ანიმაცია მხოლოდ „ტრანსფორმაცია/კონტროლი“; მოერიდეთ ძვირადღირებულ ბლურ/ჩრდილებს დიდი ზომით.
დაბლოკეთ ფონის ფრჩხილი (scroll-lock), შეინარჩუნეთ მიმდინარე პოზიცია ისე, რომ დახურვის შემდეგ იგი არ „გადახტებოდა“.
დრაივერის დიდი სიებისთვის გამოიყენეთ ვირტუალიზაცია.

7) მობილური ნიმუშები

Bottom sheet სწრაფი მოქმედებების/დადასტურებისთვის: დახურვის ჟესტები (ბარიერი).
Sticky-CTA ქვემოთ; დახურვის ღილაკი მარცხნივ ზემოდან.
Safe-area უკან დახევა (notch/gesture areas).
ეკრანის კლავიატურა არ უნდა დაბლოკოს CTA; layout - შინაარსის „აწევა“ ან დაფიქსირებული პანელი კლავიატურაზე.

8) Motion დიზაინი

შესასვლელი: fade + მსუბუქი ცვლა (მოდალური: Y, drawer: გარეგნობის ღერძის გასწვრივ). 120-180 ms.
გასასვლელი: უფრო მოკლე (80-140 ms), easing 'cubic-bezier (0. 2,0,0. 2,1)`.
ფონი (backdrop): გაუმჭვირვალე 0-0. 4–0. 6. პულსაციის და გაუთავებელი ბლინების გარეშე.
'prefers-reduced-motion- ისთვის': ცვლის გარეშე, მხოლოდ fade.

9) დახურვის ოფისი

დაუყოვნებლივი დახურვა მხოლოდ უსაფრთხო ოპერაციებით.
შეცდომით - ჩვენ დიალოგში ვრჩებით, Retry- ს მიზეზს ვაჩვენებთ.
ფონის შესრულებისას - დიალოგის დახურვა და სადღეგრძელოს ჩვენება „ჩვენ ვასრულებთ ფონზე“..., პლუს სექცია „ისტორია“.

10) iGaming ტიპის სკრიპტები

10. 1 განაკვეთის დადასტურება (მოდალი)

შინაარსი: ღონისძიება, კოეფიციენტი, თანხა, პოტენციური მოგება, კოეფიციენტის ხანგრძლივობა.
ღილაკები: „დაადასტუროს“, „გაუქმება“.
შეფერხების პატრონი> 3 წმ: ტექსტი „ველოდებით დადასტურებას“...; კოეფიციენტის შეცვლისას - გულწრფელი განახლება.

10. 2 კეშუტი (Modal/Sheet)

ამჟამინდელი ფულადი სახსრების ჩვენება და ფანჯრის ტაიმერი.
დადასტურება + შესაძლო Undo (თუ რეგულაცია საშუალებას გაძლევთ).

10. 3 გადახდის მეთოდის არჩევა

მეთოდების სია კომისიებით/ETA; მინი ფორმის არჩევანი.
ნაგულისხმევი მეთოდის დაცვა; დაბრუნება შემოღებული მონაცემების დაკარგვის გარეშე.

10. 4 KYC (Drawer → Modal)

Drawer დოკუმენტების/მინიშნებების გადმოტვირთვისთვის.
Modal, როდესაც ცდილობს დახუროს დაუმთავრებელი დატვირთვით: გაფრთხილება შენახული.

10. 5 საპასუხისმგებლო თამაშის ლიმიტები (მოდალი)

რადიო „დღე/კვირა/თვე“, თანხის ველი, სტრიქონი „ძალაში შედის“....

11) ანტი შაბლონები

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

12) დიზაინის სისტემის ნიშნები (მაგალითი)

json
{
"dialog": {
"radius": 12,
"shadow": "var(--elev-4)",
"sizes": { "s": 520, "m": 680, "l": 840 },
"backdropOpacity": 0. 5,
"padding": "20 24",
"gap": 16
},
"drawer": {
"width": { "s": 360, "m": 480, "l": 640 },
"edge": "right",
"radius": 12,
"shadow": "var(--elev-4)"
},
"motion": {
"inMs": 160,
"outMs": 120,
"ease": "cubic-bezier(0. 2,0,0. 2,1)",
"reduce": true
},
"a11y": {
"useAriaModal": true,
"focusTrap": true,
"returnFocus": true
}
}

css
.backdrop[data-open]{position:fixed; inset:0; background:rgba(0,0,0,.5); backdrop-filter:saturate(80%); opacity:1; transition:opacity. 16s}
.dialog,[data-drawer]{position:fixed; background:var(--bg-elevated); border-radius:12px; box-shadow:var(--elev-4);}
.dialog{inset:auto; left:50%;top:50%;transform:translate(-50%,-50%); max-width:840px; width:min(100% - 32px, var(--dialog-w,680px));}
[data-drawer="right"]{top:0; right:0; height:100%;width:var(--drawer-w,480px); transform:translateX(0)}
.dialog[hidden],.backdrop[hidden]{display:none}

13) ქცევის სიპეტები

js const openBtn = document. getElementById('open');
const dlg = document. querySelector('.dialog');
let prevFocus;

function openDialog() {
prevFocus = document. activeElement;
dlg. hidden = false; document. body. style. overflow = 'hidden';
const focusable = dlg. querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');
(focusable[0]        dlg). focus();
function onKey(e){
if(e. key==='Escape') return closeDialog();
if(e. key!=='Tab') return;
const first = focusable[0], last = focusable[focusable. length-1];
if(e. shiftKey && document. activeElement===first){ e. preventDefault(); last. focus(); }
else if(!e.shiftKey && document. activeElement===last){ e. preventDefault(); first. focus(); }
}
dlg. addEventListener('keydown', onKey);
dlg. dataset. off = ()=> dlg. removeEventListener('keydown', onKey);
}
function closeDialog() {
dlg. dataset. off && dlg. dataset. off();
dlg. hidden = true; document. body. style. overflow = '';
prevFocus && prevFocus. focus();
}

js let startY=0, delta=0;
const sheet = document. querySelector('.sheet');
sheet. addEventListener('touchstart', e => startY = e. touches[0].clientY);
sheet. addEventListener('touchmove', e => {
delta = Math. max(0, e. touches[0].clientY - startY);
sheet. style. transform = `translateY(${delta}px)`;
});
sheet. addEventListener('touchend', () => {
if (delta > 120) sheet. classList. remove('open'); else sheet. style. transform = '';
delta = 0;
});

14) მეტრიკა და ექსპერიმენტები

Open Rate/Completion Rate მოდალებში: რამდენი გახსნა და დაასრულა მოქმედება.
დრო: გახსნიდან Primary დაწკაპუნებით.
Dismiss Rate და მიზეზები (დახურვა Esc/Fone vs „გაუქმება“).
Error/Retry Rate busy სცენარებში.
A/B: თანამედროვე vs drawer, CTA ტექსტი, ველების რიგი, „დადასტურება“ vs „undo“.

15) QA ჩეკის სია

წვდომა

• 'role = „dialog“', 'aria-modal = „true“', სწორი 'aria-labelledby/-describedby'.
• Focus trap მუშაობს; ფოკუსი უბრუნდება ტრიგერს.
• Esc ხურავს (თუ ნებადართულია); ტაბი ციკლურია.
• კონტრასტი AA; არა მხოლოდ ფერი გადასცემს მნიშვნელობას.

ქცევა

• TTFF-100 ms; ანიმაცია 120-180 ms/out 80-140 ms.
• Scroll-lock ფონი გვერდის „ნახტომის“ გარეშე.
• Unsaved guard ბინძური ფორმით.
• Busy მდგომარეობა, სწორი Retry/შეცდომები.

ინტერფეისი

• მკაფიო სათაური და ერთი Primary-CTA.
• ჯვარი/ღილაკი „დახურვა“ ხელმისაწვდომია.

ზომები ადაპტირებულია; მობილურზე - ჟესტით.

შესრულება

• პორტალები/z-index სწორია; „გაჟღენთვის“ გარეშე.
• ზარმაცი ინიციალიზაცია; მხოლოდ ტრანსფორმირება/გაფართოება ხდება.

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

კომპონენტები: 'Modal', 'Drawer/Sheet', 'ConfirmDialog', 'UnsavedGuard'.
ნიშნები: ზომები, უკანდახევა, ჩრდილები, ანიმაცია, backdrop, focus-ring.
ჰაიდები: „როდესაც მოდალური ვარჯიში“, საავტორო უფლებების შაბლონები, სარისკო მოქმედებები (confirm/undo), scroll-lock და portals, reduce-motion.
Do/Don 't Gallery: nested modals (don' t), გრძელი ფორმები modalk (don 't), sheet კონტექსტის გასაფართოებლად (do).

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

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