PDP Veb-sayt

Bosish maydoni kamida 40 px (md) bo‘lsin; mobilda asosiy amal uchun lg (44 px) oling. xs (32 px) va sm (36 px) faqat zich joyda yoki dialog harakatlarida (sm, ::before bilan bosish maydoni 40) va qo‘shni tugmalardan kamida 8 px oraliq bilan — batafsil Foydalanish qulayligi bo‘limida.

• Hover — rangli variantlar (primary, accent, ink) foni o‘z matni rangiga 12 % yaqinlashadi (kitdagi formula); secondary va tertiary neytral foni bir pog‘ona to‘qlashadi, secondary matni ham bir pog‘ona; outline va ghost neytral fon oladi; primary-destructive — --eco-bg-error-solid_hover.
• Focus — faqat klaviaturada: hover foni va 2 px chiziq --eco-focus-ring, 2 px oraliq; destructive variantlarda chiziq --eco-focus-ring-error rangida.
• Loading — kenglik saqlanadi, matn o‘rnida yuklanish belgisi (6 nuqta, tugma matni rangida), qayta bosilmaydi; tugmada aria-busy turadi.
• Disabled — 50 % shaffof. U sababini aytmaydi: formada tugmani faol qoldiring va bosilganda nima yetishmasligini ko‘rsating.
• Bosilgan (active) holat — tugma 97,5 % gacha kichrayadi (havola ko‘rinishi va guruh ichidagi tugmalardan tashqari); fon hover rangida qoladi.

• Tooltip — qo‘shimcha. Faqat ikonkali tugmada ham aria-label majburiy: ekran o‘qigich nomni undan oladi. Tooltip nomni takrorlasa, unga aria-hidden qo‘ying; qo‘shimcha izoh bersa, uni aria-describedby orqali tugmaga bog‘lang.
• Fon --eco-bg-primary-solid, nom — bitta qator, xs 600. Izoh kerak bo‘lsa — <small> ichida, 1–2 qator; kengligi 320 px gacha.
• Hover va klaviatura fokusida chiqadi, Esc bilan yopiladi; kursor tooltip ustiga o‘tsa yo‘qolmaydi (WCAG 1.4.13).
• Matnli tugmaga uni takrorlaydigan tooltip qo‘ymang. Muhim ma’lumotni ham yashirmang: mobilda hover yo‘q — narx, muddat va xato sahifada ko‘rinib tursin.

Shisha — faqat rangli yoki harakatli fon ustida (banner, hero, Aurora); oddiy oq/kulrang fonda ishlatilmaydi — u yerda oddiy tugma. Tutash tugmalar guruhiga qo‘yilmaydi. Brauzer blur’ni bilmasa — to‘q (Light’da oq) zaxira fon; yuqori kontrast rejimida — tizim ranglari va chiziq.

<!-- rangli fon (banner, hero, .eco-cover, .eco-aurora) ichida -->
<a class="eco-btn eco-btn--lg eco-btn--glass" href="/kurslar"><svg>…</svg>Kursni ko‘rish</a>
<button class="eco-btn eco-btn--icon eco-btn--glass" aria-label="Nusxalash"><svg>…</svg></button>
<span class="eco-glass eco-glass--pill">v0.7</span>
<span class="eco-glass eco-glass--tile"><svg>…</svg></span>
<div class="eco-glass">…</div>
<!-- Light sahifadagi doim qora banner: .eco-glass--dark yoki bannerga data-theme="dark" -->

/* retsept — tokenlar (hamma brendda bir xil; Light qiymati izohda) */
--eco-glass-fill: color-mix(in srgb, var(--eco-color-black) 20%, transparent);   /* Light: --eco-color-white 40 % */
--eco-glass-backdrop: blur(3px) brightness(1.25);                               /* Light: brightness(1.06) */
--eco-glass-rim: linear-gradient(135deg, …);                                     /* 1 px qirra: yorqin → 30 % → yo‘q 50 % → 72 % → xira */
--eco-glass-ink, --eco-glass-fill-hover, --eco-glass-solid                       /* matn, hover, blur’siz zaxira */
.my-glass { background: var(--eco-glass-fill); -webkit-backdrop-filter: var(--eco-glass-backdrop); backdrop-filter: var(--eco-glass-backdrop); }

• Guruh — bitta mavzudagi 2–4 harakat: asosiy harakat va uning menyusi, bir turdagi amallar. Tanlov (bittasi tanlangan) uchun guruh emas — segment ishlatiladi.
• Tugmalar oraliqsiz; tashqi burchak tugma o‘lchamiga qarab, ichkisi 0. Ajratgich — 1 px, tugma matni rangida 15 %. Variant va o‘lcham har tugmada bir xil bo‘lsin.
• Konteynerga role="group" va aria-label; menyu ochadigan tugmaga aria-haspopup va aria-expanded — faqat menyu haqiqatan ochilsa. Har tugma Tab bilan alohida fokuslanadi.
• Kenglik — mazmunga qarab yoki to‘liq (--fill, tugmalar teng); tor joyda — ustma-ust (--vertical).

Matn ikkala o‘lchamda 16 px — iOS fokusda sahifani kattalashtirmaydi. Maydon va tugma bir qatorda tursa, o‘lchamni juftlab oling: balandlik teng chiqadi.

Odatda chegara yo‘q — halqa faqat fokusda va xatoda chiqadi: fokus — maydon atrofida 1,5 px --eco-brand-button, xato — doimiy 1,5 px --eco-focus-ring-error (xato va xato + fokus bir xil ko‘rinadi). Hover — to‘ldirilgan maydonda fon bir pog‘ona to‘qroq; bo‘sh maydon (placeholder) o‘zgarmaydi. Disabled — butun maydon 50 % xira, halqasiz (tugma bilan bir qoida).

Select — native <select>: chevron .eco-input-wrap ichidagi oxirgi ikonka, qidiruv ikonkasi — birinchi. Ikonka bosishni to‘smaydi. Parol maydonida oxirgi element — ko‘rsatish tugmasi .eco-input-reveal (aria-pressed, belgi eye ↔ eye-off); maydon disabled bo‘lsa, tugma ham disabled.

Ikonka 20 px, --eco-fg-quaternary, chetdan 16 px; ikonkali maydonda matn 44 px dan boshlanadi. Textarea kamida 128 px, radiusi 20 px (pill emas), pastga cho‘ziladi.

Prefiks/suffiks — maydon ichida pill; faqat vazifasi bor (tanlanadigan/bosiladigan) qism alohida fon oladi; ikonka — fonsiz; ajratuvchi chiziq yo‘q. Maydon — bitta yumaloq yuza: 44 px (.eco-input-group--sm — 40 px), radius --eco-field-radius-affix (pill); ichki pill chetdan 6 px, balandligi maydondan 12 px kam. Fon kontekstdan: oq yuzada maydon --eco-bg-secondary, ichki pill --eco-bg-primary_alt; kulrang yuzada (karta ichida avtomatik yoki .eco-input-group--on-grey) maydon --eco-bg-primary, pill --eco-bg-secondary. Tanlov — select.eco-input-group__select, tugma — .eco-input-group__btn (--icon — faqat ikonka; telefonda ikonkali tugma nomi yashirinadi). Statik ikonka (globus, qulf, xat) — .eco-input-group__addon--icon, --eco-fg-quaternary, qidiruv ikonkasi kabi. Statik matn («%», «.pdp.uz») — pill; fonsiz kerak bo‘lsa — .eco-input-group__addon--plain.

Matnli qo‘shimcha — maydonning ikkinchi <label> i: bosilsa maydon fokus oladi, ekran o‘quvchi uni nom bilan birga o‘qiydi. Select bo‘lsa, guruhga role="group" va aria-labelledby, select’ga aria-label qo‘ying. Fokus — butun guruh atrofida 1,5 px --eco-brand-button (oddiy maydon bilan bir xil); klaviaturada ichki pill (select, tugma) ham shunday halqa oladi. Xato — guruh atrofida doimiy 1,5 px --eco-focus-ring-error halqa va pastda ikonkali xato matni.

Input <label> ichida — matn ham bosiladi. Yorliq 14 px / 500, izoh — <small> ichida, --eco-text-tertiary; md o‘lchamda ikkalasi 16 px. Checkbox va radio ko‘rinishi, o‘lchamlari va holatlari — pastdagi «Checkbox va radio: anatomiya» blokida. Switch — Untitled UI o‘lchamlari, ko‘rinishi — dizayner taklifi (Rahimjon Gaziyev, 29.09.2026). Belgining o‘zi 16–20 px, shuning uchun mobilda qator balandligi kamida 40 px bo‘lsin.

Bitta radio va bitta checkbox: bo‘limlar o‘z belgisini chizmaydi, rangni --ctl-* o‘zgaruvchilari bilan beradi. Geometriya — Figma «Telegram Design System» (Telegram 7.8.1 asosidagi norasmiy to‘plam, «Selection Controls») nisbatlari, ranglar — PDP tokenlari; Telegram ko‘ki va ikonkalari olinmagan (art direktor, 07.10.2026).

Katak — .eco-input (42 × 44 px, raqam 18 px / 600): fon, fokus, xato va disabled holati maydon bilan bir xil. Oltita katak 3 + 3 guruhda, orada ajratgich — kodni o‘qish va aytish oson. Ajratgich ixtiyoriy: ixcham shaklda 6 katak ketma-ket, izohsiz.

Birinchi katakda autocomplete="one-time-code" — telefon SMS’dagi kodni o‘zi taklif qiladi; hammasida inputmode="numeric". Raqam yozilgach fokus keyingi katakka o‘tadi, Backspace — oldingisiga, ← → — kataklar bo‘ylab; to‘liq kod (nusxa yoki avto-to‘ldirish) birinchi katakdan tarqaladi. Taymer paytida tugma aria-disabled, qolgan vaqt — yonidagi matn. Xatoda har katakda aria-invalid="true", pastki qator xato matniga aylanadi.

To‘ldirish — dizayndagi brend rangi, Light va Dark’da bir xil (har brendning o‘z rangi: yashil, limon, sariq, teal, ko‘k yoki feruza). Trek, tutqich va pufak atrofida chiziq yo‘q — faqat soya. Qiymat doim matnda (sarlavha va pufak), shuning uchun och to‘ldirishning trekka nisbatan past kontrasti ma’noni yo‘qotmaydi. Kulrang karta ichida trek sahifa fonini oladi: yorug‘da oq, qorong‘ida qora.

Hover’da ko‘rinish o‘zgarmaydi — kursor «qo‘l» bo‘ladi. Fokus — tutqich atrofida 2 px --eco-focus-ring, oradan 2 px oraliq; xatoda trek halqasi --eco-border-error_subtle, fokus halqasi --eco-focus-ring-error, izoh o‘rnida xato matni. Disabled: to‘ldirish --eco-fg-disabled, matn --eco-text-disabled, soya yo‘q; guruh ildizida aria-disabled="true", bitta tutqichda .is-disabled. JS bo‘lmasa .eco-range ishlating — bitta tutqichli native slayder, to‘ldirishni brauzer chizadi.

Har tutqich — <input type="range">: rol, aria-valuenow, min va max brauzerdan keladi, skript aria-valuetext ga birlikni qo‘shadi. Diapazonda guruh yorlig‘i aria-labelledby bilan, har tutqichda o‘z nomi (aria-label: «Eng kam», «Eng ko‘p»). Tutqichlar bir-birini kesib o‘tmaydi.

<div class="eco-slider eco-slider--steps" data-eco-slider style="--sl-hi: .6; --sl-steps: 10">
  <div class="eco-slider__head">
    <label class="eco-label" for="volume">Ovoz balandligi</label>
    <output class="eco-slider__value" for="volume" aria-live="off">60%</output>
  </div>
  <div class="eco-slider__control">
    <span class="eco-slider__track" aria-hidden="true"></span><span class="eco-slider__fill" aria-hidden="true"></span>
    <input class="eco-slider__input" type="range" id="volume" min="0" max="100" step="10" value="60" data-suffix="%">
    <span class="eco-slider__tip" aria-hidden="true">60%</span>
  </div>
</div>

Amallar guruhlanadi: har guruh ustida kichik yorliq, guruhlar orasida ajratgich. Qaytarib bo‘lmaydigan amal — oxirida, alohida «Xavfli zona» guruhida va xato rangida.

Light .eco-dropdown · role="menu"

Guruh amallari

ochiq holat · 56 px qatorlar

Hisoblar

Dilnoza KarimovaO‘quvchi · Frontend

Jasur RahimovO‘qituvchi · 5-guruh

Madina AliyevaOta-ona · tasdiqlanmagan

Xavfli zona

Barcha qurilmalardan chiqishJoriy seans ham yopiladi

Dark .eco-dropdown · role="menu"

Guruh amallari

ochiq holat · 56 px qatorlar

Hisoblar

Dilnoza KarimovaO‘quvchi · Frontend

Jasur RahimovO‘qituvchi · 5-guruh

Madina AliyevaOta-ona · tasdiqlanmagan

Xavfli zona

Barcha qurilmalardan chiqishJoriy seans ham yopiladi

• Trigger: aria-haspopup="menu", aria-expanded, aria-controls. Enter, Space yoki ↓ ochadi va birinchi amalga o‘tadi, ↑ — oxirgisiga.
• Menyu ichida: ↑ ↓ aylanib o‘tadi, Home / End — chetlarga, harf — shu harfdan boshlangan amalga. Esc yopadi va fokusni tugmaga qaytaradi, Tab — yopadi.
• Qatorlar: role="menuitem"; bittasini tanlash — menuitemradio, yoqib-o‘chirish — menuitemcheckbox (aria-checked). Tanlov belgisi qator boshida: bittasini tanlashda nuqta, yoqib-o‘chirishda belgi.
• Guruh: role="group" va yorliqqa aria-labelledby; ajratgich — role="separator".
• Qisqa tugma: .eco-menu__kbd — ko‘rinadigan eslatma (aria-hidden); tugma haqiqatan ishlasa, qatorga aria-keyshortcuts.
• O‘chirish kabi amal menyudan keyin tasdiq so‘raydi (modal). Menyuning o‘zi qaytarib bo‘lmaydigan ishni bajarmaydi.
• Menyu — amallar uchun. Sahifalar orasida yurish — navigatsiya. Forma maydonidagi qiymat — native <select> (Formalar); pastdagi ro‘yxat — avatar yoki tavsifli variantlar va formadan tashqaridagi tanlov uchun.

<div class="eco-dropdown">
  <button type="button" class="eco-btn eco-btn--secondary" id="grp-t"
          aria-haspopup="menu" aria-expanded="false" aria-controls="grp-m">Guruh amallari</button>
  <div class="eco-menu" id="grp-m" role="menu" aria-labelledby="grp-t" hidden>
    <div class="eco-menu__group" role="group" aria-labelledby="grp-g1">
      <div class="eco-menu__label" id="grp-g1" role="presentation">Amallar</div>
      <button type="button" class="eco-menu__item" role="menuitem" tabindex="-1">
        <svg aria-hidden="true"><use href="#i-copy"/></svg>
        <span class="eco-menu__body"><span class="eco-menu__title">Nusxa olish</span></span>
        <kbd class="eco-menu__kbd" aria-hidden="true">⌘C</kbd></button>
    </div>
    <div class="eco-menu__sep" role="separator"></div>
    <div class="eco-menu__group" role="group" aria-labelledby="grp-g2">
      <div class="eco-menu__label" id="grp-g2" role="presentation">Xavfli zona</div>
      <button type="button" class="eco-menu__item eco-menu__item--danger" role="menuitem" tabindex="-1">…</button>
    </div>
  </div>
</div>

Menyu va tanlov ro‘yxatining qatori. Balandlik mazmundan: bitta qator — 36 px, qisqa tugma bilan — 38 px, tavsif bilan — 56 px. Tanlov belgisi shakl bilan ko‘rinadi — rangning o‘zi holatni bildirmaydi.

Light .eco-menu__item · holatlar

oddiy--danger default

Dilnoza KarimovaFrontend · 3-guruh

Guruhdan chiqarishFrontend · 3-guruh

hover

Dilnoza KarimovaFrontend · 3-guruh

Guruhdan chiqarishFrontend · 3-guruh

focus

Dilnoza KarimovaFrontend · 3-guruh

Guruhdan chiqarishFrontend · 3-guruh

disabled

Dilnoza KarimovaFrontend · 3-guruh

Guruhdan chiqarishFrontend · 3-guruh

selected

Dilnoza KarimovaFrontend · 3-guruh

Dark .eco-menu__item · holatlar

oddiy--danger default

Dilnoza KarimovaFrontend · 3-guruh

Guruhdan chiqarishFrontend · 3-guruh

hover

Dilnoza KarimovaFrontend · 3-guruh

Guruhdan chiqarishFrontend · 3-guruh

focus

Dilnoza KarimovaFrontend · 3-guruh

Guruhdan chiqarishFrontend · 3-guruh

disabled

Dilnoza KarimovaFrontend · 3-guruh

Guruhdan chiqarishFrontend · 3-guruh

selected

Dilnoza KarimovaFrontend · 3-guruh

• Pill .eco-badge — standart tur, burchak to‘liq yumaloq. Holat va belgi: karta, ro‘yxat, sahifa sarlavhasi.
• Badge --badge — burchak 6 px (--lg da 8 px). Jadval va zich ma’lumot ichida, 12 px burchakli tugma va maydonlar yonida. Bitta mahsulotda pill yoki badge — bittasini tanlang.

<!-- Untitled UI → PDP
     type:  pill-color → .eco-badge · color → --badge
     size:  sm → --sm · md (standart) · lg → --lg
     color: gray (standart) · --brand · --success · --warning · --error; PDP: --solid -->
<span class="eco-badge eco-badge--success eco-badge--dot">Faol</span>
<span class="eco-badge eco-badge--badge eco-badge--sm eco-badge--error eco-badge--dot">Muddati o‘tgan</span>
<span class="eco-badge eco-badge--dot">Arxiv</span>
<span class="eco-badge eco-badge--solid">Yangi</span>

Nuqta “bu vaqt o‘tishi bilan o‘zgaradi” degani: Faol → Yakunlangan. Toifa esa obyektning doimiy xususiyati: Oflayn, 8 oy. Toifa beyjiga nuqta qo‘ymang, statusdan nuqtani olib tashlamang. Holat qatorning o‘ng chetida, toifalar sarlavha ostida turadi; foydalanuvchidan harakat kerak bo‘lsa, havola va muddat holat ostida.

Nuqtasiz beyj — toifa yoki metrika. Metrika — son va o‘lchov birligi: “8 kun”, “12 dars”, ball soni. U o‘zgarib turadi, lekin holat emas: ma’lumot beradi, harakat so‘ramaydi — shuning uchun nuqta qo‘yilmaydi. Guruh, sinf yoki oqim nomi — toifa.

Status ranglari band: yashil — “hammasi joyida”, to‘q sariq — “jarayonda”, ko‘k — “kutmoqda”, qizil — “muammo”. Yo‘nalish, fan yoki formatni holat tokenlari bilan bo‘yab bo‘lmaydi, shuning uchun toifaning o‘z to‘plami bor — dizayner bergan avatar xilma-xillik ranglari (--eco-cat-*): qora, yashil, ko‘k, teal, qizilmatn rangi, yashil, to‘q yashil, kulrang, limon — EcoSystem’ning o‘z to‘plami, ko‘k va qizil yo‘q. Vazifasi bitta — bir-biriga o‘xshash narsalarni ro‘yxatda ajratish. Yashil va qizil holat ranglariga o‘xshaydi — bu ochiq savol, dizayner hal qiladi; shu paytgacha toifa beyjida nuqta bo‘lmaydi va yonida doim so‘z turadi.

Bitta kartada ikki xil beyj: chapda toifa (rangli, nuqtasiz), pastda status (semantik rang, nuqtali). Toifaning rangi ro‘yxatni tez o‘qishga yordam beradi, statusnikida esa ma’no bor. Rang kerak bo‘lmasa, toifa neytral .eco-badge bilan qoladi — “Onlayn”, “6 oy” kabi umumiy teglar shunday beriladi.

Jadval — qat’iy xarita: yo‘nalish bilan rang shu yerda bog‘lanadi. Fon — tusning 12 % i (qorong‘ida 18 %), matn — o‘sha tus qoraga yoki oqqa aralashtirilgan (color-mix), foizi har tusda o‘ziniki: matn kontrasti yorug‘da 5,8–6,2 : 1 (qora 14,4 : 1), qorong‘ida 5,2 : 1 dan yuqori.matn kontrasti yorug‘da 4,8–9,7 : 1 (qora 14,4 : 1), qorong‘ida — uchala karta fonida ham 4,5 : 1 dan yuqori. Sinf nomi (--cat-blue, --cat-red) — slot: EcoSystem’da u to‘q yashil va limon.

• Holat tokeni toifaga berilmaydi. Toifa faqat --eco-cat-* tusida; success, warning, error — faqat holat uchun. Toifaning yashil va qizili holatga o‘xshaydi: holat beyjlari bor ro‘yxatda avval qora, ko‘k va teal oling.qora, to‘q yashil (blue) va kulrang (teal) oling.
• Rang barqaror bo‘ladi. Toifalar ro‘yxati ma’lum bo‘lsa — qat’iy xarita (id → tus). Ro‘yxat ochiq bo‘lsa (teg, ko‘nikma, ism) — nomdan hash. Har chizilganda tasodifiy rang bermang: foydalanuvchi rangni eslab qoladi.
• Ma’noni so‘z beradi. Rang faqat ajratadi. Yozuvsiz rangli beyj bo‘lmaydi; rang ko‘rmaydigan odam uchun ham ro‘yxat o‘qilishi kerak.
• Toifa beyjida nuqta yo‘q. Nuqta — vaqt bilan o‘zgaradigan holat belgisi; toifa esa doimiy xususiyat.
• Bir ro‘yxatda ko‘pi bilan besh rang. Toifa ko‘p bo‘lsa, asosiylarini rangli qoldiring, qolganini neytral .eco-badge bilan bering.
• Bir mahsulotda bitta xarita. Kartada “Frontend” ko‘k bo‘lsa, filtrda, jadvalda va grafikda ham ko‘k bo‘lsin.

<!-- toifa: rangli, nuqtasiz · status: semantik, nuqtali -->
<span class="eco-badge eco-badge--cat-blue">Frontend</span>
<span class="eco-badge eco-badge--badge eco-badge--sm eco-badge--cat-black">Data Science</span>
<span class="eco-badge eco-badge--success eco-badge--dot">Qabul ochiq</span>

// 1) ro‘yxat ma’lum — qat’iy xarita: yangi toifa qo‘shilsa, eskilari o‘z rangida qoladi
const CAT = {
  frontend: 'blue', backend: 'teal', uiux: 'red', mobile: 'green', data: 'black',
};

// 2) ro‘yxat ochiq (teg, ko‘nikma, ism) — nomdan barqaror hash, tasodif yo‘q
const TINTS = ['black', 'green', 'blue', 'teal', 'red'];
function tint(name) {
  let h = 0;
  for (const ch of name.trim().toLowerCase()) h = (h * 31 + ch.codePointAt(0)) >>> 0;
  return TINTS[h % TINTS.length];
}

// har ikkalasida ham natija — sinf nomi
el.className = 'eco-badge eco-badge--cat-' + (CAT[id] || tint(name));

So‘zni o‘zgartirmang: “Faol” hamma loyihada “Faol” — “Aktiv”, “Ishlayapti” yoki “Active” emas. Rang guruhi ham o‘zgarmaydi: yashil — faqat “hammasi joyida”. Yangi status kerak bo‘lsa, avval shu jadvalga qo‘shing.

--brand — och brend tusi, faqat “Tavsiya” uchun. Brend rangi yashil bo‘lsa, u --success ga juda yaqin — ularni nuqta va so‘z ajratadi: status doim nuqtali, belgi — nuqtasiz. Brend fondagi matn rangini brend tokeni beradi (--eco-text-primary_on-brand): oq yoki qorani qo‘lda tanlamang.

• Ko‘rinish — Untitled UI tegi asosida: burchak 6 px, chegarasiz — fon --eco-bg-secondary (kulrang kartada oq), matn sm 500, balandlik 32 px (xs tugma bilan bir xil).
• Tanlangan chip — och brend fon, brend matn va ✓ belgisi. Holatni faqat rang bilan bermang: ✓ belgisi shart.
• Filtr chipi — <button aria-pressed>. Bir guruhda bir nechtasini tanlash mumkin; tanlanganlar soni va “Tozalash” yonida turadi. Hech narsa tanlanmasa, “Tozalash” yashiriladi.
• Bitta tanlov kerak bo‘lsa, chip emas, .eco-segment yoki tab ishlating.
• Teg — foydalanuvchi qo‘shgan qiymat. O‘chirish tugmasining nomida teg nomi bo‘lsin: “React’ni olib tashlash”.
• Faqat o‘qiladigan teg — chip emas, .eco-badge: u bosilmaydi va bosiladigandek ko‘rinmasligi kerak.
• 32 px — zich UI o‘lchami. Chip 32 px, tegning “×” tugmasi 20 px, bosish maydoni esa 32 px, shuning uchun ular orasida kamida 8 px qoldiring. Beyj bosilmaydi — unga bosish maydoni talabi qo‘yilmaydi.

3D avatar · rasm · ikonka · guruh

+4

Rasm foydalanuvchi id sidan hisoblanadi (barqaror hash), shuning uchun Dilnoza hamma joyda — ro‘yxatda, guruhda, izoh ostida — bir xil ko‘rinadi. Avatar ma’no bermaydi: u na status, na rol — yoniga doim ism yozing.

• Faqat o‘lcham sinfi — --xs … --2xl; style="--s: …" bilan o‘z o‘lchamingizni yaratmang: shrift va holat nuqtasi shkaladan chiqib ketadi.
• Initsial — faqat brend avatarida (--brand): ikki harf, semibold. Odamlar uchun initsialli zaxira yo‘q: rasm yuklanmasa — ikonka avatari. Brend avatarlari — Avatarlar (avatar istisnosi).
• Rasm — kvadrat, markazda kesiladi. Yonida ism yozilgan bo‘lsa, alt=""; ism yo‘q bo‘lsa, ism alt ichida.
• Guruh — avatarlar 8 px ustma-ust, har birining atrofida 2 px fon rangidagi halqa. 5 tadan ko‘p bo‘lsa, qolgani “+N”. Guruh nomi va soni aria-label da.

• 0 bo‘lsa — hisoblagichni yashiring. “0” yozmang.
• 99 dan ko‘p — “99+”. Aniq son kerak bo‘lsa, u sahifaning o‘zida.
• Son muhim bo‘lmasa — faqat nuqta: “yangi narsa bor”.
• Son tugma nomida aytiladi: aria-label="Bildirishnomalar: 3 ta yangi"
• Avatar nuqtasi — .eco-avatar__status: avatarning 25 % i, o‘ng pastki burchakda, atrofida fon rangidagi 1,5 px halqa. Yashil — onlayn, sariq — band, ichi bo‘sh doira — oflayn. Fonga nisbatan kontrast kamida 3:1.
• Halqa — hozir sodir bo‘layotgan holat (jonli dars). Holatni matn bilan ham yozing: rangning o‘zi yetmaydi.

.eco-chip--accent · profil sarlavhasida

Dilnoza Rahimova FaolPDP Hackathon · 4-jamoa3 loyihada faol

• Vazifasi — foydalanuvchining yutug‘i yoki hisobi: ball, XP, yulduz, sertifikat, faollik. Status ham, toifa ham emas.
• Ekranda bitta — profil yoki dashbord sarlavhasida, ism yonida. Ro‘yxat qatoriga va jadvalga qo‘yilmaydi.
• Ikonka majburiy — Phosphor, 16 px, chapda; nuqta emas. Ikonka va son uni status beyjidan ajratadi.
• Ko‘rinish — pill, 32 px (chip bilan bir xil), matn sm 600, raqamlar teng kenglikda. Fon va matn — --eco-chip-accent-bg / -fg (standart — brend aksenti va uning siyohi), chegarasiz.
• Aksent holat rangiga yaqin bo‘lsa — brend chip uchun boshqa brend rangini beradi: pushti aksent xatoga, yashil aksent muvaffaqiyatga o‘xshamasin.
• Bosilmaydi — <span>. Tarixga olib borsa, u tugma yoki havola bo‘ladi va fokus halqasini oladi.

Odam — 3D avatar: 16 ta rasm (turli yosh, soch, ko‘zoynak, teri rangi, ro‘mol). Fon rangi rasmning o‘zida — Light va Dark rejimda bir xil, tus tanlanmaydi; doira shaklini .eco-avatar--3d beradi. Joriy foydalanuvchi ham — 3D avatar.

Rasmlar — alohida fayl (/ds/assets/avatars/avatar-01…16.webp, 192 px, fon bilan, har biri ~2,5 KB), loading="lazy". Manba: Figma Community, muallif Arthur Belfort, CC BY 4.0 — atributsiya: /ds/assets/avatars/README.md.

<span class="eco-avatar eco-avatar--3d" aria-hidden="true">
  <img src="/ds/assets/avatars/avatar-04.webp" alt="" width="40" height="40" loading="lazy" decoding="async">
</span>

// rasm — foydalanuvchi profilda tanlaydi; tanlamagan bo‘lsa — id dan barqaror hash (pick — pastdagi namunada)
const PICS = Array.from({ length: 16 }, (_, i) => String(i + 1).padStart(2, '0'));
img.src = '/ds/assets/avatars/avatar-' + (user.avatar || pick(PICS, user.id)) + '.webp';
el.className = 'eco-avatar eco-avatar--3d';

Loyiha belgisi (initsial) va odam emas agentlar — AI-mentor (#i-sparkles), bot (#i-bot), tizim, guruh (#i-users) — --tint: brend tusidagi yaxlit doira (--eco-avatar-tint-bg, shaffof emas), initsial va ikonka brend rangida (--eco-avatar-tint-ink). Bitta sinf oltita brendda ishlaydi. Gradient yo‘q.

EcoSystem: tus — malachite 15 %, Light’da yashil #00B533 belgi, Dark’da limon. Loyiha belgisi uchun yana limon doira (--accent, limon 50 %) yashil initsial bilan va qora doira (--inverse, #1F1F1F) limon initsial bilan.

Academy: tus — yashil 15 %, belgi yashil #00B533; Dark rejimda yorqinroq yashil.

Online: Academy bilan bitta — tus yashil 15 %, belgi yashil #00B533; Dark rejimda yorqinroq yashil.

School: tus va belgi — ko‘k #0055FF (Dark rejimda belgi school-blue-300).

University: tus va belgi — teal #26A49D, ikkala rejimda.

Junior: tus va belgi — moviy #00CDDA.

Har bir odam — joriy foydalanuvchi ham — 3D avatar (16 rasm); guruh, bot va tizim — brend tusidagi ikonka avatari (--tint + #i-users, #i-bot). Initsialli va kulrang zaxira yo‘q. Rasm foydalanuvchi id sidan hisoblanadi (barqaror hash), tasodifiy emas: bir odam hamma joyda bir xil ko‘rinadi.

O‘lcham — .eco-avatar shkalasi (--xs 24 … --2xl 64, Beyjlar va statuslar); kadrdagi o‘lcham — --36: 36 px, initsial 12/20, Inter 500, ikonka 16 px.

• Avatar istisnosi. Avatar initsiali rangi kadrdagicha qoladi — tusda 4,5 : 1 dan past bo‘lsa ham to‘qlashtirilmaydi (foydalanuvchi qarori, 30.09.2026). Shuning uchun avatar bezak: aria-hidden="true", ism doim yonida matn bilan.
• Chiziq yo‘q. Avatar atrofida halqa yoki chegara chizilmaydi — fon bilan ajraladi, 3D avatar ham. Guruhdagi «kesik» halqa va holat nuqtasi — alohida qoida.
• Odam — 3D avatar. Haqiqiy surat ishlatilmaydi: odamga, joriy foydalanuvchiga ham, kutubxonadagi 3D avatar (--3d). AI-mentor, bot, tizim va guruh — brend tusidagi ikonka avatari (--tint).
• Fon doim rangli. Avatar foni — 3D rasmning pastel rangi, brend tusi yoki EcoSystem limon / qora doirasi. Gradient (xira shar) avatar va kulrang fonli ikonka yoki initsial yo‘q (art direktor qarori, 04.10.2026).
• Harakat yo‘q. Avatar jonlantirilmaydi; prefers-reduced-motion ga bog‘liq narsa ham yo‘q.

<!-- odam (joriy foydalanuvchi ham): 3D avatar -->
<span class="eco-avatar eco-avatar--36 eco-avatar--3d" aria-hidden="true"><img src="/ds/assets/avatars/avatar-07.webp" alt="" width="36" height="36" loading="lazy" decoding="async"></span>

<!-- agent: AI-mentor · bot · guruh; loyiha belgisi — initsial (brend tusi) -->
<span class="eco-avatar eco-avatar--36 eco-avatar--tint" aria-hidden="true"><svg class="eco-icon"><use href="#i-sparkles"/></svg></span>
<span class="eco-avatar eco-avatar--36 eco-avatar--tint" aria-hidden="true"><svg class="eco-icon"><use href="#i-bot"/></svg></span>
<span class="eco-avatar eco-avatar--36 eco-avatar--tint" aria-hidden="true"><svg class="eco-icon"><use href="#i-users"/></svg></span>
<span class="eco-avatar eco-avatar--36 eco-avatar--tint" aria-hidden="true">AG</span>

// tanlov — foydalanuvchi id sidan barqaror hash (har chizilganda tasodifiy emas)
function pick(list, id) {
  let h = 0;
  for (const ch of String(id)) h = (h * 31 + ch.codePointAt(0)) >>> 0;
  return list[h % list.length];
}

Ichki oraliq, qatorlar tartibi, sarlavha va harakat qoidalari — taklif, Untitled UI asosida; burchak 24 px va chiziqsiz ko‘rinish — dizayner taklifi (Rahimjon Gaziyev, 28.09.2026). Kartadagi tugma — md (40 px), telefonda ham: kartalar ro‘yxati zich interfeys emas. xs (32 px) va sm (36 px) faqat zich jadval va panellarda, tugmalar orasi kamida 8 px bo‘lsa.

Kurs kartalari matni har xil uzunlikda, lekin narx va tugma bir chiziqda — karta flex-ustun, pastki qator margin-top: auto. Narx har doim “so‘m” va davr bilan: “oyiga”, “1-oy uchun”.

Delta rangi yo‘nalishni emas, ma’noni ko‘rsatadi: qarzdorlar ulushi 0,6 foiz punktga (f.p.) o‘ssa — qizil. Bo‘sh karta — kulrang fon, ikonka, bir qator izoh va bitta harakat; batafsil qoidalar “Holatlar” bo‘limida.

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: var(--eco-spacing-3xl);   /* 24 px — grid gutter */
}
/* md (768 px) dan tor ekranda — 16 px */
@media (max-width: 767px) { .card-grid { gap: var(--eco-spacing-xl); } }
.card-grid > .eco-card { display: flex; flex-direction: column; }
.card-grid .card-actions { margin-top: auto; }   /* tugmalar bir chiziqda */

• auto-fit — ustunlar soni kenglikka qarab o‘zi o‘zgaradi, media query shart emas.
• 1–2 ta karta bo‘lsa auto-fill oling — yolg‘iz karta butun kenglikka cho‘zilmaydi.
• Teng balandlik — grid qatori kartalarni cho‘zadi, harakatlar esa pastga yopishadi.
• Mobilda bitta ustun, ichki oraliq 24 px, tugma 40 px dan kichraymaydi. Gorizontal karusel — faqat “Sizga tavsiya” kabi qo‘shimcha ro‘yxatlar uchun.

• Informatsion karta — sahifada doim turadigan maslahat yoki qoida: fon --eco-bg-brand-primary, chegara va soya yo‘q, ikonka i-info. Ogohlantirish va xato uchun emas — ular uchun alert (“Holatlar”).
• Tanlanadigan karta — butun karta radio yoki checkbox (<label> ichida haqiqiy <input>). Tanlangani — och brend fon --eco-bg-brand-primary va “Tanlangan” beyji: rang yolg‘iz qolmaydi.
• Harakat — ro‘yxat ostida bitta. Tanlanadigan kartaning ichida tugma bo‘lmaydi; narx har doim so‘m va davr bilan.
• Rasmli karta — media 16 : 9 tepada, ichki oraliqsiz; burchak kartadan meros (overflow: hidden). Rasm ustiga ramka va matn qo‘ymang; odam va stok foto o‘rniga — mahsulotning o‘z tasviri.

/* Taklif: umumiy CSS’da hali yo‘q — shu ko‘rinishda qo‘shiladi; ranglar faol brenddan */
.eco-card--info { background: var(--eco-bg-brand-primary); border-color: transparent; }
.eco-card--selectable:has(input:checked) {
  background: var(--eco-bg-brand-primary);
}
.eco-card--selectable:has(input:focus-visible) { outline: 1.5px solid transparent; box-shadow: 0 0 0 2px var(--eco-bg-primary), 0 0 0 3.5px var(--eco-focus-ring); }
.eco-card--media { padding: 0; overflow: hidden; }
.eco-card__media { aspect-ratio: 16 / 9; object-fit: cover; }

Fon — semantik tint tokeni, ikonka — shu ohangning ikonka rangi, plitka — yuza ustidagi oq qatlam (Dark’da ko‘tarilgan kulrang). Sarlavha doim asosiy matn rangida, matn — o‘sha rangning 76 % i: rangli fonda kulrang hex ishlatilmaydi. Brendni almashtirib ko‘ring — faqat brend ohangi o‘zgaradi.

• Ixcham — bitta qisqa jumla: plitkasiz 20 px ikonka, sarlavha matn bilan bir qatorda. Forma ostida, jadval tepasida, kartada.
• Sarlavhali blok — odatiy ko‘rinish: sarlavha, matn (ro‘yxat ham bo‘ladi) va ixtiyoriy bitta harakat.
• Yopiladigan — foydalanuvchi bir marta o‘qib, yopishi mumkin bo‘lgan izoh. Yopilgani eslab qolinadi; fokus keyingi elementga o‘tadi.
• Havola yoki tugma — havola .eco-callout__action yoki .eco-btn--sm. Bitta blokda bitta harakat.

Eski nomlar ishlab turadi: --note → neytral, --tip → --brand, --important → --info; eski belgilash (sarlavha ichidagi doira ikonka) ham to‘g‘ri chiziladi. Yangi sahifalarda yangi nomlarni yozing.

• Ohangni ma’no bo‘yicha tanlang — rang turini ko‘rsatadi, sarlavha uni so‘z bilan aytadi. Rang yolg‘iz signal emas.
• Bitta fikr — bitta blok. Ekranda ko‘pi bilan ikkita callout; ketma-ket bloklar matnni bo‘lib tashlaydi.
• Sarlavha qisqa (2–5 so‘z), matn — bir-ikki jumla. Batafsil ma’lumot — havola orqali.
• Callout — statik izoh. Tizim javobi va holat xabari — Alert va toast; harakat talab qiladigan qaror — modal.
• Kulrang yuzada (kulrang karta, .demo--surface) neytral callout avtomatik oq bo‘ladi; rangli ohanglar o‘z tintida qoladi.
• Ekran o‘qigich: blokka role="note", plitkaga aria-hidden="true", yopish tugmasiga aria-label. Shoshilinch xato bo‘lsa — role="alert".

<!-- ohang: (yo‘q) neytral · --brand · --info · --warning · --error · --success; ko‘rinish: --compact; yopish — .eco-callout__close
     ikonkalar: notepad-text · sparkles · info · triangle-alert · circle-x · circle-check (-fill) -->
<div class="eco-callout eco-callout--brand" role="note">
  <span class="eco-callout__icon" aria-hidden="true"><svg><use href="#i-sparkles-fill"/></svg></span>
  <div class="eco-callout__content">
    <p class="eco-callout__title">Yangi modul ochildi</p>
    <div class="eco-callout__body"><p>Birinchi dars — keyingi hafta.</p></div>
    <div class="eco-callout__actions">
      <a class="eco-callout__action" href="/kurs">Dasturni ko‘rish<svg aria-hidden="true"><use href="#i-arrow-right"/></svg></a>
    </div>
  </div>
  <button type="button" class="eco-callout__close" aria-label="Yopish"><svg aria-hidden="true"><use href="#i-x"/></svg></button>
</div>

Tab bitta sahifa ichidagi ko‘rinishlarni almashtiradi: kontent o‘zgaradi, URL va sahifa — yo‘q. Ikki shakl: underline — sahifa va karta bo‘limlari uchun, pill — kulrang trek ichida, ixcham panel va filtrlar uchun. Pill rangsiz (standart) yoki brend rangida bo‘ladi. Son (yangi vazifalar, xabarlar) tab ichidagi beyjda turadi.

Rangli pill — shu brend juftliklari. Tanlangan tab matni doim sof qora yoki oq, dizayndagidek; 4,5 : 1 dan past juftliklar — foydalanuvchi qarori (30.09.2026), build ro‘yxatdan tashqarisini to‘xtatadi.

Klaviatura: ← → — qo‘shni tab, Home / End — birinchi va oxirgi, Tab — panelga o‘tish. Tab tartibida faqat tanlangan tab turadi (tabindex="0", qolganlari -1). Belgilash: role="tablist" va aria-label; har tabda role="tab", aria-selected, aria-controls; panelda role="tabpanel", aria-labelledby, tabindex="0". Filtr yoki parametr tanlovi (panel almashmaydi) — tab emas, .eco-segment. Telefonda tablar sig‘masa, qator siljiydi; 5 tadan ko‘p bo‘lsa — select.

<div class="eco-tabs" role="tablist" aria-label="Kurs bo‘limlari">
  <button type="button" class="eco-tab" role="tab" id="t-1" aria-controls="p-1" aria-selected="true">Umumiy</button>
  <button type="button" class="eco-tab" role="tab" id="t-2" aria-controls="p-2" aria-selected="false" tabindex="-1">
    Darslar <span class="eco-badge">12</span>
  </button>
</div>
<div class="eco-tabpanel" role="tabpanel" id="p-1" aria-labelledby="t-1" tabindex="0">…</div>
<div class="eco-tabpanel" role="tabpanel" id="p-2" aria-labelledby="t-2" tabindex="0" hidden>…</div>
<!-- pill: .eco-tabs--pill (+ --inverse | --brand | --accent) · o‘lcham: --sm | --md | --lg · kenglik: --fill -->

Chiziq — ro‘yxat, karta, jadval va fayl qatorida. Doira — dashboard’dagi bitta asosiy ko‘rsatkich uchun. Qiymat doim raqam bilan ham yoziladi.

Belgilash: role="progressbar", aria-valuenow, aria-valuemin, aria-valuemax va nom — aria-labelledby (yorliqqa) yoki aria-label; izoh — aria-describedby. Holat belgisi role="status" ichida: yuklash tugaganda ekran o‘qigich yashirin matnni («Yuklash tugadi») o‘qiydi; xato xabari — role="alert". Ikkalasi sahifada oldindan turadi, JS faqat matnini almashtiradi. Aylanuvchi belgi prefers-reduced-motion da to‘xtaydi. Info belgisi — bezak; izoh kerak bo‘lsa, tugma va .eco-tooltip. Suzuvchi yorliq ekran o‘qigichdan yashiriladi — qiymat progressbar’ning o‘zida. Davomiyligi noma’lum jarayonga progress emas, skeleton yoki tugmadagi spinner — Holatlar.

<div class="eco-progress-field">  <!-- holat: .is-complete | .is-error -->
  <div class="eco-progress-field__head">
    <span class="eco-progress-field__label" id="pf-1">Yuklanmoqda
      <svg class="eco-progress-field__info" aria-hidden="true"><use href="#i-info"/></svg></span>
    <span class="eco-progress-field__value">50%
      <span class="eco-progress-field__status" role="status">
        <span class="eco-loader eco-loader--sm" aria-hidden="true">…</span></span></span>
  </div>
  <div class="eco-progress" role="progressbar" aria-labelledby="pf-1" aria-describedby="pf-1-h"
       aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="--v:50%"><span></span></div>
  <p class="eco-progress-field__hint" id="pf-1-h">27 MB / 60 MB</p>
</div>

<div class="eco-progress-circle eco-progress-circle--sm" role="progressbar" aria-label="Davomat"
     aria-valuenow="72" aria-valuemin="0" aria-valuemax="100" style="--p:72">
  <svg viewBox="0 0 100 100" aria-hidden="true">
    <circle cx="50" cy="50" r="45" pathLength="100"/><circle cx="50" cy="50" r="45" pathLength="100"/>
  </svg>
  <span class="eco-progress-circle__v">72%<small>Davomat</small></span>
</div>

Ko‘p obyektni solishtirish va ular ustida amal bajarish uchun: o‘quvchilar, to‘lovlar, arizalar. Sarlavha, saralanadigan ustunlar, belgilash, qator amallari va sahifalash — bitta kartada.

LightDark

.eco-table-card

O‘quvchilar 248 nafar

Frontend dasturlash · sentabr oqimi

Eksport Qo‘shish

	O‘quvchi	Holat	Progress	Oxirgi dars	Amallar
	Bekzod Qodirovbekzod.q@pdp.uz	Faol	74%	21.09.2026
	Dilnoza Karimovadilnoza.k@pdp.uz	Faol	82%	21.09.2026
	Jasur Tursunovjasur.t@pdp.uz	Qarzdor	55%	19.09.2026
	Malika Yusupovamalika.y@pdp.uz	Ta’tilda	38%	02.09.2026
	Shahzoda Rahimovashahzoda.r@pdp.uz	Faol	91%	20.09.2026

Ustun sarlavhasi Untitled UI’da --eco-text-quaternary, bizda — --eco-text-tertiary: yorug‘ rejimda quaternary --eco-bg-secondary ustida 3,98 : 1 beradi, AA emas. Holat — beyj: nuqta va matn, faqat rang emas (Beyjlar). Telefonda (768 px dan tor) ko‘p ustunli jadval qatorlari kartaga aylanadi — Sahifa anatomiyasi; karta ichidagi siljish — planshet va ustuni kam jadvallar uchun. Baholar jurnali — O‘quv komponentlari.

<div class="eco-table-card">
  <div class="eco-table-card__head">
    <div class="eco-table-card__heading">
      <h2 class="eco-table-card__title" id="st-t">
        O‘quvchilar <span class="eco-badge eco-badge--sm eco-badge--brand">248 nafar</span>
      </h2>
      <p class="eco-table-card__desc">Frontend dasturlash · sentabr oqimi</p>
    </div>
    <div class="eco-table-card__actions">…</div>   <!-- sm tugmalar -->
  </div>
  <div class="eco-table-card__body" tabindex="0" role="region" aria-labelledby="st-t">
    <table class="eco-table" aria-labelledby="st-t">
      <thead><tr>
        <th scope="col" class="eco-table__check">
          <label class="eco-table__hit">
            <input type="checkbox" class="eco-check eco-check--md" aria-label="Barchasini tanlash">
          </label></th>
        <th scope="col" aria-sort="ascending">
          <button type="button" class="eco-table__sort">O‘quvchi
            <svg aria-hidden="true"><use href="#i-arrow-right"/></svg></button></th>
        <th scope="col">Holat</th>
        <th scope="col"><span class="sr-only">Amallar</span></th>
      </tr></thead>
      <tbody><tr>
        <td class="eco-table__check">…</td>
        <td><div class="eco-table__person">
          <span class="eco-avatar" aria-hidden="true">DK</span>
          <div><b>Dilnoza Karimova</b><span>dilnoza.k@pdp.uz</span></div>
        </div></td>
        <td><span class="eco-badge eco-badge--sm eco-badge--success eco-badge--dot">Faol</span></td>
        <td><div class="eco-table__actions">…</div></td>   <!-- tertiary ikonka tugmalar -->
      </tr></tbody>
    </table>
  </div>
  <div class="eco-table-card__foot">…</div>   <!-- .eco-pagination -->
</div>

Jadval va ro‘yxatni sahifalarga bo‘ladi. Har sahifa — haqiqiy havola (?page=5): brauzerning “Orqaga” tugmasi ishlaydi, havolani ulashsa bo‘ladi.

Ko‘rsatiladigan raqamlar: birinchi, oxirgi, joriy va uning ikki qo‘shnisi — ko‘pi bilan 7 joy, qolgani “…”. <nav aria-label> nomi sahifadagi har bir sahifalash uchun har xil bo‘lsin. Jadvalda 10 qatordan keyin sahifalash (Sahifa anatomiyasi); yangiliklar lentasi va katalogda — “Yana ko‘rsatish” tugmasi.

<nav class="eco-pagination" aria-label="Arizalar sahifalari">
  <a class="eco-btn eco-btn--secondary eco-btn--sm eco-pagination__prev" href="?page=4">
    <svg aria-hidden="true"><use href="#i-arrow-left"/></svg><span>Oldingi</span></a>
  <ol class="eco-pagination__pages">
    <li><a class="eco-pagination__page" href="?page=1">1</a></li>
    <li><span class="eco-pagination__gap" aria-hidden="true">…</span></li>
    <li><a class="eco-pagination__page" href="?page=5" aria-current="page">5</a></li>
    …
  </ol>
  <p class="eco-pagination__info">Sahifa 5 / 10</p>   <!-- faqat tor konteynerda ko‘rinadi -->
  <a class="eco-btn eco-btn--secondary eco-btn--sm eco-pagination__next" href="?page=6">
    <span>Keyingi</span><svg aria-hidden="true"><use href="#i-arrow-right"/></svg></a>
</nav>

Modal ishni to‘xtatib, bitta qaror so‘raydi: tasdiqlash, o‘chirish, qisqa forma. Faqat xabar berish uchun modal ochmang — alert yoki toast yetadi (Holatlar).

• Mahsulotda — <dialog> va showModal(). Brauzer fonni inert qiladi (fokus modal ichida qoladi), Esc yopadi, yopilgach fokus ochgan tugmaga qaytadi.
• Nom va izoh: aria-labelledby — sarlavhaga, aria-describedby — matnga.
• Boshlang‘ich fokus: formada — birinchi maydon, o‘chirishda — “Bekor qilish” (autofocus).
• div bilan qurilsa hammasi qo‘lda: role="dialog", aria-modal="true", fokusni ichkarida ushlash, Esc, fonga inert va yopilgach fokusni qaytarish.
• Overlay’ni bosish modalni yopadi — kiritilgan ma’lumot yo‘qolmasa.
• Modal ustiga modal ochmang. Ikkinchi qadam kerak bo‘lsa, shu modal ichida almashtiring.

<button type="button" class="eco-btn eco-btn--secondary"
        commandfor="del-dlg" command="show-modal">Guruhni o‘chirish</button>

<dialog class="eco-modal" id="del-dlg" aria-labelledby="del-t" aria-describedby="del-d">
  <form method="dialog">
    <span class="eco-featured-icon eco-featured-icon--error">
      <svg aria-hidden="true"><use href="#i-trash-2"/></svg></span>
    <h2 class="eco-modal__title" id="del-t">Guruhni o‘chirasizmi?</h2>
    <p class="eco-modal__text" id="del-d">3-guruh va 24 o‘quvchi ro‘yxati o‘chiriladi.</p>
    <div class="eco-modal__actions">
      <button class="eco-btn eco-btn--tertiary" value="cancel" autofocus>Bekor qilish</button>
      <button class="eco-btn eco-btn--primary-destructive" value="delete">O‘chirish</button>
    </div>
    <button class="eco-btn eco-btn--tertiary eco-btn--icon eco-modal__close" value="cancel" aria-label="Yopish">
      <svg aria-hidden="true"><use href="#i-x"/></svg></button>
  </form>
</dialog>
<!-- JS bilan: dialog.showModal() · dialog.close() · dialog.returnValue — qaysi tugma bosilgani -->

Ro‘yxat yoki jadvalda ko‘rsatadigan narsa yo‘qligini aytadi va keyingi qadamni beradi. Qaysi holatda qanday matn va qaysi tugma — Holatlar bo‘limida; bu yerda komponentning o‘zi.

sm — jadval, karta va panel ichida; md — butun sahifa bo‘sh bo‘lganda. Asosiy harakat bitta; ikkinchisi faqat muqobil yo‘l bo‘lsa: “Filtrlarni tozalash” va “Topshiriq qo‘shish”. Sarlavhada so‘rovni takrorlang, izohda keyingi qadamni ayting.

<div class="eco-empty">   <!-- butun sahifa uchun: eco-empty eco-empty--md -->
  <div class="eco-empty__art">
    <span class="eco-featured-icon eco-featured-icon--modern eco-featured-icon--md">
      <svg aria-hidden="true"><use href="#i-search"/></svg></span>
  </div>
  <h3 class="eco-empty__title">“Kotlin” bo‘yicha topshiriq topilmadi</h3>
  <p class="eco-empty__text">So‘zni qisqartiring yoki filtrlarni olib tashlang.</p>
  <div class="eco-empty__actions">
    <button type="button" class="eco-btn eco-btn--tertiary">Filtrlarni tozalash</button>
    <button type="button" class="eco-btn eco-btn--primary">Topshiriq qo‘shish</button>
  </div>
</div>

Drop zona va fayllar ro‘yxati. Zona ichida haqiqiy <input type="file"> butun maydonni qoplaydi: bosish, sudrab tashlash va klaviatura (Tab, keyin Enter yoki Space) JavaScript’siz ishlaydi. Formadagi ixcham variant — Formalar.

Format va hajmni fayl tanlanishi bilan tekshiring va nima qilishni ayting: “Fayl 14 MB — 10 MB gacha siqing”. Holat faqat rangda emas: ikonka va matn bor. Yuklash tugagani va xatoni ekran o‘qigichga ayting — ro‘yxat yonida role="status" qatori; har bir foizni aytmang.

<span class="eco-label" id="up-l">Loyiha fayllari</span>
<label class="eco-dropzone">
  <input type="file" class="eco-dropzone__input" multiple accept=".svg,.png,.jpg,.jpeg,.pdf"
         aria-labelledby="up-l" aria-describedby="up-h" title="">
  <span class="eco-featured-icon eco-featured-icon--modern eco-featured-icon--md">
    <svg aria-hidden="true"><use href="#i-upload"/></svg></span>
  <span>
    <span class="eco-dropzone__text"><b>Yuklash uchun bosing</b> yoki sudrab olib keling</span>
    <span class="eco-dropzone__hint" id="up-h">SVG, PNG, JPG yoki PDF (maks. 10 MB)</span>
  </span>
</label>

<ul class="eco-files">
  <li class="eco-file">   <!-- xato: eco-file is-error -->
    <span class="eco-featured-icon eco-featured-icon--modern eco-featured-icon--md">
      <svg aria-hidden="true"><use href="#i-file-text"/></svg></span>
    <div class="eco-file__body">
      <p class="eco-file__name">texnik-topshiriq.pdf</p>
      <p class="eco-file__meta"><span>1,2 MB</span>
        <span class="eco-file__status eco-file__status--ok">…Yuklandi</span></p>
      <div class="eco-progress-row">…</div>
    </div>
    <button type="button" class="eco-btn eco-btn--tertiary eco-btn--icon eco-file__del"
            aria-label="texnik-topshiriq.pdf faylini o‘chirish">…</button>
  </li>
</ul>

Tartib qat’iy: seriyalar --eco-chart-1 dan boshlab ketma-ket olinadi va qayta aylanmaydi. 1-seriya — faol brendning rangi (--eco-bg-brand-solid oilasi), 2–6 — shu brendning o‘z ranglari, qora va kulranglar (EcoSystem: yashil, qora, limon, kulrang). Ko‘rsatilgan brend: PDP EcoSystemPDP SchoolPDP UniversityPDP OnlinePDP Junior.

Faqat o‘z ranglari. Seriyalar — brendning o‘z ranglari, qora (Dark’da oq) va kulranglar; boshqa brend rangi (EcoSystem’da ko‘k, sariq, teal, moviy) ishlatilmaydi. Qora — asosiy rang: kulrangni faqat «boshqa» va fon uchun qoldiring. Bir-biriga yaqin ikki yashil yonma-yon turmaydi. Toifali seriya doim shu palitradan olinadi; ketma-ket shkala (yashil zina) — faqat tartiblangan kattalik uchun: issiqlik xaritasi, faollik kalendari, zichlik. Yig‘ish har bir brend va rejimda oltita seriyaning har bir juftligini tekshiradi (OKLab ΔE ≥ 0,10). Yorug‘ rejimda oq fonda limon, och kulrang va brend tusi 3 : 1 ga yetmaydi, shuning uchun rang yolg‘iz belgi emas: har bir seriya yorliq yoki to‘g‘ridan-to‘g‘ri izoh bilan chiqadi.

Seriyalar tartib bilan olindi: 1 — mobil ilova, 2 — veb-kabinet, 3 — Telegram-bot. Nom va oxirgi qiymat chiziq uchida, legenda — faqat kalit. Kursorni yuriting yoki grafikni tanlab ← → (Home, End) bosing: chiziq eng yaqin oyni topadi, tooltip avval qiymatni, keyin nomni ko‘rsatadi (sichqoncha va klaviaturada bir xil). Tooltip — qo‘shimcha: har bir qiymat jadvalda ham bor.

Manbalar — nominal toifa, ular seriya emas: barcha ustunlar bitta neytral rangda (--eco-fg-quaternary) fonga yumshatilgan, ostida 100% trek; hikoyadagi bittasi brend tugmasi rangida va o‘sish belgisi bilan. Nom chap ustunda, qiymat o‘ng ustunda, shuning uchun o‘q kerak emas. Donut — faqat ulush uchun va ko‘pi bilan 6 bo‘lak, har biriga to‘g‘ridan-to‘g‘ri yorliq; halqa 12px, bo‘laklar uchi yumaloq, orasida fon oralig‘i. Yettinchi usul paydo bo‘lsa — “Boshqa”ga yig‘iladi va neytral rangda chiqadi. Yaqin qiymatlarni solishtirish kerak bo‘lsa, ustun tanlang.

Ikkala shkala ham 5 pog‘ona. Ketma-ket (--eco-chart-seq-1…5) — bitta o‘lchov: issiqlik xaritasi, xarita, zichlik; 1 — eng kam, 5 — eng ko‘p. Yorug‘ rejimda qiymat ortgani sayin to‘qlashadi, qorong‘ida esa yorishadi: ikkala holatda ham eng kam qiymat fonga yaqin turadi. Qarama-qarshi (--eco-chart-div-1…5) — ikki yo‘nalish: pasayish qizilda, o‘sish yashilda, 3-pog‘ona esa nol atrofi va fonga yaqin turadi. Kamalak, qizil–yashil ketma-ket shkala va 5 tadan ortiq pog‘ona ishlatmang. Rang yolg‘iz qolmaydi: har bir qatorda ishora bilan qiymat, katakchalar uchun — kalit va jadval. Aniq son kerak bo‘lsa, jadval bering.

Katta raqam oddiy (proportional) shaklda, tabular-nums — faqat o‘q, jadval va ustunlarda. Sparkline — 12 oy, neytral chiziq (seriya emas), joriy oy nuqtasi 1-seriya rangida. Status rangi faqat farqda: rang = yo‘nalish × yaxshimi (tark etish kamaysa — yashil, to‘lov kamaysa — qizil). Muvaffaqiyat, ogohlantirish va xato ranglari holat uchun, seriya uchun emas; ular doim strelka hamda +/− bilan chiqadi.