PDP UI/UX qo‘llanma · v0.7

Rasmiy brend

PDP Dashboard

CRM (Nextcloud) ilovalari — Dashboard, Fayllar, Photos, Faollik, Talk, Mail, Deck, Tasks, Gantt, Calendar, Tables, Forms, Polls, Contacts, Notes, Collectives, Announcements, Bookmarks — va o‘quv ilovalari uchun tayyor ekran bloklari: reyting, jurnal, kurs yo‘li. Bloklar «Sayt» to‘plamidagi komponentlar va «Yadro» tokenlaridan yig‘ilgan.

Dashboard Ilova komponentlari

Dashboard

Bosh ekran: Nextcloud Dashboard va ilovalar plitkalari

Dashboard — ish joyining bosh ekrani. Birinchi blok — Nextcloud’ning Dashboard sahifasi PDP ko‘rinishida (faqat DS namunasi, yuklab olinadigan CSS yo‘q); keyingisi — ilovalar plitkalari: ilovalar mavzu bo‘yicha guruhlangan, har guruhda sarlavha, ilovalar soni va bir qatorli izoh. Plitka — havola: ikonka, nom va qisqa tavsif; hamma plitka bir xil o‘lchamda. Komponent mavjud tokenlardan yig‘ilgan — kulrang yuza, oq ikonka plitkasi va Phosphor ikonkalar; yangi rang yo‘q. Oltita brendda va ikki rejimda ishlaydi.

Nextcloud Dashboard

faqat EcoSystem uchun · brend tanlovidan qat’i nazar

Bosh ekran

.eco-dash · guruh · plitka

Ish joyi

7 ta ilova

Hujjatlar, taxtalar va jadval

Aloqa

5 ta ilova

Suhbat, pochta va jamoa

Plitka — oddiy havola: Tab bilan o‘tiladi, Enter ochadi. Kursor yoki fokusda plitka foni yarim pog‘ona to‘qlashadi, Light’da yengil soya chiqadi, ikonka fill egizagiga almashadi. Konteyner 880 px dan tor bo‘lsa — ikki ustun, 520 px dan tor — ixcham plitkalar, 300 px dan tor — bitta ustun, plitka qator ko‘rinishida.

Plitka: holatlar

Light .eco-dash__app · holatlar
Taxtalar Loyihalar taxtasi va kartalar
odatiy
Taxtalar Loyihalar taxtasi va kartalar
:hover
Taxtalar Loyihalar taxtasi va kartalar
:focus-visible
Dark .eco-dash__app · holatlar
Taxtalar Loyihalar taxtasi va kartalar
odatiy
Taxtalar Loyihalar taxtasi va kartalar
:hover
Taxtalar Loyihalar taxtasi va kartalar
:focus-visible
QismSinf / tokenQiymat
Guruh sarlavhasi.eco-dash__headPDP Display 500 24/32, −4 %; ostidan 16 px oraliq. Guruhlar orasi 48 px
Son__nGuruhdagi ilovalar soni: 12/24 pill, --eco-bg-secondary, --eco-text-tertiary; ekran o‘quvchiga «7 ta ilova»
Ajratgich va izoh__rule · __cap1 px --eco-border-tertiary sarlavhadan izohgacha; izoh 14/20 --eco-text-tertiary, o‘ngda. 520 px dan tor — chiziq yo‘q, izoh sarlavha ostida
Panjara.eco-dash__grid4 ustun, oraliq 16; @container dash ≤ 880 — 2 ustun, ≤ 300 — 1 ustun
Plitka.eco-dash__app--eco-bg-secondary, radius 20, ichki oraliq 24; chiziq yo‘q. Butun plitka — bitta havola
Ikonka plitkasi__ic · --ic-tile48 px, radius 12, --eco-bg-primary_alt (Light — oq, Dark — ko‘tarilgan); Phosphor Regular 24 px --eco-fg-primary
Nom va tavsif__name · __subPDP Display 500 20/28, −4 %; tavsif Inter 14/20 --eco-text-tertiary
Hover:hoverFon — --eco-bg-secondary va _hover o‘rtasi, --eco-shadow-sm, ikonka — fill egizagi, nuqtalar — --eco-fg-brand-primary; --eco-duration-fast
Fokus va bosish:focus-visible · :active2 px --eco-focus-ring, 2 px tashqarida; bosilganda — --eco-bg-secondary_hover, soyasiz
  • Guruh — mavzu bo‘yicha. «Ish joyi» — hujjatlar, rejalar va jadval, «Aloqa» — odamlar va xabarlar. Son — guruhdagi ilovalar soni, izoh — guruh mazmuni bir qatorda.
  • Plitkalar teng. Hamma plitka va ikonka bir xil o‘lchamda; eng ko‘p ochiladigan ilova guruhda birinchi turadi.
  • Rang bilan ajratilmaydi. Plitka kulrang, ikonka plitkasi oq — ilovani ikonka va nom ajratadi. Brend rangi faqat hover’dagi nuqtalarda va fokus halqasida.
  • Mahsulot nomlari tarjima qilinmaydi: Talk, Teams, Activity, Calendar, Dashboard — translate="no"; tavsif tarjima qilinadi.
  • Plitka — bitta havola. Ichida boshqa tugma yoki havola yo‘q; ekran o‘quvchi nom va tavsifni birga o‘qiydi («Fayllar, Hujjatlar, papkalar va ulashish»).
  • Harakat: faqat fon, soya, nuqta rangi va ikonka almashuvi (--eco-duration-fast); siljish va kirish animatsiyasi yo‘q, prefers-reduced-motion da o‘tishsiz.
Kod
<div class="eco-dash">
  <div class="eco-dash__group" role="group" aria-labelledby="g1">
    <div class="eco-dash__head">
      <h4 class="eco-dash__title" id="g1">Ish joyi</h4>
      <span class="eco-dash__n">7<span class="sr-only"> ta ilova</span></span>
      <span class="eco-dash__rule" aria-hidden="true"></span>
      <p class="eco-dash__cap">Hujjatlar, taxtalar va jadval</p>
    </div>
    <ul class="eco-dash__grid" role="list">
      <li><a class="eco-dash__app" href="/files/">
        <span class="eco-dash__ic">
          <svg class="dh-off" aria-hidden="true"><use href="#i-folder"/></svg><svg class="dh-on" aria-hidden="true"><use href="#i-folder-fill"/></svg>
        </span>
        <span class="eco-dash__name">Fayllar</span><span class="eco-dash__sub">Hujjatlar, papkalar va ulashish</span>
      </a></li>
      <li><a class="eco-dash__app" href="/calendar/">…<span class="eco-dash__name" translate="no">Calendar</span>…</a></li> …
    </ul>
  </div>
</div>

Fayllar

Fayllar: Nextcloud Files reskini

Fayllar — jamoa va o‘quv materiallari ombori: chapda bo‘limlar (barcha fayllar, so‘nggi, sevimlilar, ulashishlar, teglar, o‘chirilganlar) va disk hajmi, o‘rtada joriy papka, o‘ngda fayl tafsilotlari va ulashish. Bu — PDP bulutidagi Nextcloud Files ilovasining reskini: markup Nextcloud sinflari bilan, uslub — PDP tokenlari. Blok doim EcoSystem brendida.

Photos

Photos: xronologiya va albomlar

Photos — maktab hayotining fotoarxivi: oylar bo‘yicha xronologiya, albomlar (tadbir, to‘garak, bitiruv), sevimlilar va videolar, tanlash rejimi (albomga qo‘shish, sevimli, o‘chirish) va ko‘ruvchi oyna. Bu — PDP bulutidagi Nextcloud Photos ilovasining reskini: markup Photos va @nextcloud/vue sinflari bilan, uslub — PDP tokenlari. Namunada surat o‘rnida DS 3D renderlari. Blok doim EcoSystem brendida.

Faollik

Faollik lentasi: Nextcloud Activity reskini

Faollik — kim, qachon va nimani o‘zgartirganining lentasi: fayl, ulashish, kalendar, Deck doskasi, izoh, vazifa va xavfsizlik voqealari kun bo‘yicha guruhlanadi. Bu — PDP bulutidagi Nextcloud Activity ilovasining reskini: HTML o‘zgarmaydi, uslub — Nextcloud sinflariga yozilgan CSS. Faqat EcoSystem brendida, Light va Dark.

Talk

Talk: suhbatlar, xabarlar va qo‘ng‘iroq

Talk — PDP bulutidagi Nextcloud Talk ilovasining reskini: chapda suhbatlar ro‘yxati, o‘rtada yozishma, o‘ngda ishtirokchilar va ulashilgan fayllar. Namuna Talk DOM’i sinflarini takrorlaydi; ko‘rinish — PDP tokenlari. Funksiyalar — Talk’niki: qidiruv va filtrlar, sevimlilar, reaksiya, javob, qadalgan xabar, fayl, qo‘ng‘iroq.

Mail

Mail: pochta qutilari va xatlar

Mail — Nextcloud pochta mijozi: bir nechta hisob va qutilar, «Muhim» va «Boshqalar» bo‘limli ustuvor kiruvchilar, o‘qilmagan, belgilangan va ilovali xatlar, suhbat (thread) ko‘rinishi va yangi xat oynasi (qabul qiluvchi chiplari, nusxa, ilova). Bu — PDP bulutidagi Nextcloud Mail ilovasining reskini: markup Mail va @nextcloud/vue sinflari bilan, uslub — PDP tokenlari. Blok doim EcoSystem brendida.

Deck

Deck: doskalar, ro‘yxatlar va kartalar

Deck — PDP bulutidagi Nextcloud Deck ilovasining reskini: chapda doskalar, o‘ngda ro‘yxatlar (stack) va kartalar. Karta — bitta vazifa: teglar, muddat, ijrochilar, checklist, fayl va izohlar; bosilsa — tafsilotlar oynasi. Namuna Deck DOM’i sinflarini takrorlaydi; ko‘rinish — PDP tokenlari.

Tasks

Tasks: ro‘yxatlar, vazifalar va kichik vazifalar

Tasks — PDP bulutidagi Nextcloud Tasks ilovasining reskini: chapda aqlli to‘plamlar va ro‘yxatlar (CalDAV kalendarlari), o‘rtada vazifalar, o‘ngda tanlangan vazifa tafsilotlari. Vazifada muhimlik, muddat, bajarilgan foiz, teglar, izoh va ichma-ich kichik vazifalar bor. Namuna Tasks DOM’i sinflarini takrorlaydi; ko‘rinish — PDP tokenlari.

Gantt

Gantt: Deck kartalari vaqt chizig‘ida

Gantt — loyiha rejasi kunlar, haftalar yoki oylar bo‘yicha: har karta — boshlanish va tugash sanasi orasidagi chiziq, bajarilgani — chiziq ichidagi to‘liq rang, bog‘liq kartalar — strelka bilan, bugun — brend chizig‘i. Bu — Nextcloud Deck’ning «Gantt view» ko‘rinishi (Hub 26, frappe-gantt asosida) reskini: markup Deck va frappe-gantt sinflari bilan, uslub — PDP tokenlari. Blok doim EcoSystem brendida.

Kalendar

Kalendar: Nextcloud Calendar reskini

Kalendar — darslar, yig‘ilishlar, imtihonlar va tadbirlar jadvali: chapda sana tanlagich, «Yangi tadbir» va kalendarlar ro‘yxati (har biri o‘z rangida), o‘ngda oy, hafta, kun yoki ro‘yxat ko‘rinishi. Bu — PDP bulutidagi Nextcloud Calendar ilovasining reskini: markup Nextcloud va FullCalendar sinflari bilan, uslub — PDP tokenlari. Blok doim EcoSystem brendida.

Tables

Tables: jadvallar va ko‘rinishlar

Tables — Nextcloud’dagi ma’lumotlar jadvali: o‘quvchilar ro‘yxati, ochiq darslar, inventar. Ustunlar turli turda (matn, raqam, tanlov, sana, progress, yulduz, foydalanuvchi), saralash, filtr va qidiruv, saqlangan ko‘rinishlar, qator qo‘shish oynasi va katakni joyida tahrirlash. Bu — PDP bulutidagi Nextcloud Tables ilovasining reskini: markup Tables va @nextcloud/vue sinflari bilan, uslub — PDP tokenlari. Blok doim EcoSystem brendida.

Forms

Forms: so‘rovnoma, ariza va javoblar

Forms — ariza, so‘rovnoma va ro‘yxatdan o‘tish formalari: chapda formalar, o‘rtada muharrir (savol turlari, majburiy savol, variantlar), «Ko‘rib chiqish» — to‘ldiruvchi ko‘radigan forma, «Natijalar» — xulosa va har bir javob. Bu — PDP bulutidagi Nextcloud Forms ilovasining reskini: markup Forms va @nextcloud/vue sinflari bilan, uslub — PDP tokenlari. Blok doim EcoSystem brendida.

Polls

Polls: sana va variant bo‘yicha ovoz berish

Polls — majlis sanasini kelishish yoki variant tanlash uchun ovoz berish: ustunlar — sanalar yoki variantlar, qatorlar — ishtirokchilar, katak — «ha», «balki» yoki «yo‘q». Eng ko‘p «ha» olgan variant ajralib turadi, muallif uni tasdiqlaydi. Bu — PDP bulutidagi Nextcloud Polls ilovasining reskini: markup Polls sinflari bilan, uslub — PDP tokenlari. Blok doim EcoSystem brendida.

Contacts

Contacts: o‘qituvchilar, ota-onalar va hamkorlar

Contacts — maktab va akademiyaning manzillar kitobi: chapda guruhlar (o‘qituvchilar, ota-onalar, hamkorlar) va jamoalar, o‘rtada qidiruvli ro‘yxat, o‘ngda kontakt kartasi — telefon, email, manzil, tug‘ilgan kun, guruhlar va tezkor amallar (Talk, email, qo‘ng‘iroq). Bu — PDP bulutidagi Nextcloud Contacts ilovasining reskini: markup Contacts va @nextcloud/vue sinflari bilan, uslub — PDP tokenlari. Blok doim EcoSystem brendida.

Notes

Notes: qaydlar va kategoriyalar

Notes — tezkor qaydlar: majlis bayonnomasi, dars rejasi, nazorat ro‘yxati. Chapda kategoriyalar, o‘rtada qaydlar (sevimlilar tepada), o‘ngda Markdown muharriri va ko‘rinish rejimi (sarlavha, ro‘yxat, belgilanadigan band). Bu — PDP bulutidagi Nextcloud Notes ilovasining reskini: markup Notes va @nextcloud/vue sinflari bilan, uslub — PDP tokenlari. Blok doim EcoSystem brendida.

Collectives

Collectives: jamoa bilim bazasi

Collectives — jamoaning umumiy wiki’si: pedagogik kengash qarorlari, metodik qo‘llanmalar, ichki tartiblar. Chapda kollektivlar va sahifalar daraxti (ichma-ich sahifalar, filtr, yangi sahifa), o‘ngda sahifa: sarlavha, oxirgi o‘zgarish, Text muharriri va uning asboblar paneli. Bu — PDP bulutidagi Nextcloud Collectives ilovasining reskini: markup Collectives, Text va @nextcloud/vue sinflari bilan, uslub — PDP tokenlari. Blok doim EcoSystem brendida.

Announcements

Announcements: maktab e’lonlari

Announcement Center — butun maktabga yoki tanlangan guruhlarga e’lon: ochiq eshiklar kuni, nazorat ishlari jadvali, ta’til. Ma’muriyat e’lon yozadi va kimga ko‘rinishini tanlaydi (o‘qituvchilar, ota-onalar, sinflar), kerak bo‘lsa vaqtini rejalashtiradi; hamma e’lonni o‘qiydi va izoh qoldiradi. Bu — PDP bulutidagi Nextcloud Announcement Center ilovasining reskini: markup Announcement Center, Comments va @nextcloud/vue sinflari bilan, uslub — PDP tokenlari. Blok doim EcoSystem brendida.

Bookmarks

Bookmarks: foydali havolalar

Bookmarks — o‘qituvchining havolalar to‘plami: dars uchun platformalar, metodik saytlar, onlayn testlar. Chapda bo‘limlar va teglar, o‘ngda papkalar va havolalar ro‘yxati (ro‘yxat yoki katak), qidiruv, saralash, yangi havola; havolani bosing — yon panelda tafsilotlar, teglar va eslatma. Bu — PDP bulutidagi Nextcloud Bookmarks ilovasining reskini: markup Bookmarks va @nextcloud/vue sinflari bilan, uslub — PDP tokenlari. Blok doim EcoSystem brendida.

O‘quv komponentlari

Oddiy UI-kitda yo‘q bloklar

Kurs yo‘li, dars jadvali, topshiriq, baholar jurnali, davomat va reyting — PDP o‘quv mahsulotlarining ekranlarini bir-biriga o‘xshatadigan qismlar. Ular yangi komponent emas: karta, beyj, progress va jadval tokenlaridan yig‘iladi. Tuzilish hamma brendda bir xil, namuna matnlari brendga qarab almashadi.

Namunalar — EcoSystem brendida: loyihalararo tadbir (PDP Hackathon), jamoa va ishtirokchi, mentor, 100 ballik baho.

Namunalar — School brendida: sinf va o‘quvchi, o‘qituvchi, 5 ballik baho, coin.

Namunalar — University brendida: kurs va talaba, o‘qituvchi, 100 ballik baho va GPA.

Namunalar — Online brendida: oqim va o‘quvchi, mentor, 100 ballik baho.

Namunalar — Junior brendida: bolalar guruhi, ustoz, 3 yulduzli baho.

Kurs yo‘li

bitta joriy dars · yopiq dars sababini aytadi
Light .eco-card · .eco-progress · dars holatlari

Frontend · 4-modul

Frontend dasturlash

58%
  1. 4.1 · DOM bilan ishlashVideo · 18 daqiqa · tugagan
  2. 4.2 · HodisalarVideo · 22 daqiqa · tugagan
  3. 4.3 · Fetch va APIVideo · 26 daqiqa · 12 daqiqa qoldiDavom ettirish
  4. 4.4 · Amaliy loyiha4.3 tugagach ochiladi
Dark .eco-card · .eco-progress · dars holatlari

Frontend · 4-modul

Frontend dasturlash

58%
  1. 4.1 · DOM bilan ishlashVideo · 18 daqiqa · tugagan
  2. 4.2 · HodisalarVideo · 22 daqiqa · tugagan
  3. 4.3 · Fetch va APIVideo · 26 daqiqa · 12 daqiqa qoldiDavom ettirish
  4. 4.4 · Amaliy loyiha4.3 tugagach ochiladi
  • Joriy dars bitta. Aksent faqat davom ettiriladigan darsda bo‘ladi; ekranda boshqa aksent tugma yo‘q.
  • Holat ikonka va matn bilan ko‘rsatiladi: belgi — tugagan, «play» — joriy, qulf — yopiq. Faqat rangga tayanilmaydi.
  • Yopiq dars sababini aytadi: «4.3 tugagach ochiladi». Yolg‘iz qulf belgisi foydalanuvchini to‘xtatib qo‘yadi.
  • Progress — .eco-progress 8 px, yonida foiz raqami; role="progressbar" va qiymat atributlari bilan.

Dars jadvali

vaqt o‘qi · jonli dars · tanaffus
bugun · 22.09.2026

Kun jadvali

  1. OchilishKatta zal · Jamshid Nazarov
    Tugadi
  2. Tanaffus · 20 daqiqa
  3. Mentorlik sessiyasiKatta zal · Aziz Rahimov

    Yarmi o‘tdi40 daqiqa qoldi

    JonliQo‘shilish
  4. Demo4-jamoa · Katta zal
    2 soatdan keyin
  • Jonli dars — ekrandagi yagona aksent: to‘ldirilgan nuqta, «Jonli» beyji va «Qo‘shilish» tugmasi.
  • O‘tgan darslar xiralashadi, lekin ro‘yxatdan o‘chmaydi — kun tartibi to‘liq ko‘rinadi.
  • Tanaffus — kulrang tasmadagi kichik matn; dars qatoridan pastroq.
  • Vaqt — mono shrift, raqamlar teng kenglikda (tabular-nums), <time> elementida.
  • Kun / Hafta — .eco-segment jadval sarlavhasi yonida; tanlangan ko‘rinish aria-pressed="true".
  • Jonli dars ichidagi progress: .eco-progress, ostida «Yarmi o‘tdi» va qolgan vaqt — «40 daqiqa qoldi». Qolgan vaqtni foydalanuvchi hisoblamaydi.

Topshiriq

muddat, talablar, fayllar va harakat bitta kartada
Light .eco-card · topshiriq

Frontend dasturlash · 4-modul

Amaliy loyiha: to‘lov sahifasi

2 kun qoldi
Muddat
24.09, 23:59
Talablar
3 / 5 bajarildi
  • topshiriq-shartlari.pdf240 KB
  • Figma maketihavola
Topshirish Mentorga savol
Dark .eco-card · topshiriq

Frontend dasturlash · 4-modul

Amaliy loyiha: to‘lov sahifasi

2 kun qoldi
Muddat
24.09, 23:59
Talablar
3 / 5 bajarildi
  • topshiriq-shartlari.pdf240 KB
  • Figma maketihavola
Topshirish Mentorga savol
  • Yangiochilgan, hali boshlanmagan
  • 2 kun qoldimuddatgacha 72 soatdan kam
  • Tekshiruvdatopshirildi, mentor ko‘ryapti
  • Qabul qilindi · 92ball beyjning o‘zida
  • Muddati o‘tditopshirish yopilgan yoki jarima bilan

Asosiy harakat bitta: «Topshirish». Muddat yaqinlashgani beyjda aytiladi, sanoq esa kartaning o‘zida — foydalanuvchi hisoblamaydi.

Topshiriq: o‘qituvchi ko‘rinishi

kim topshirdi · muddat · materiallar · bitta harakat
.eco-card · .eco-progress-circle
  • Son matnda: «24 / 28 topshirdi». Avatarlar — ko‘pi bilan to‘rttasi, qolgani «+N»; ular bezak (aria-hidden), sonni matn aytadi.
  • Halqa — .eco-progress-circle--xxs, topshirganlar ulushi; foiz halqa ichida, role="progressbar".
  • Muddat yaqin — warning beyj, nuqtali (bu holat). Sana kartaning o‘zida: «Muddat — bugun, 18:00».
  • Asosiy harakat bitta: «Tekshirishni boshlash». Eslatma — uchinchi darajali tugma; «Fayl qo‘shish» — oq fonli, fayllar ro‘yxati oxirida.

Baholar jurnali

jadval kartasi · o‘rtacha va holat · shkala brendga qarab
.eco-table-card · baholar jurnali

PDP Hackathon · 4-jamoa 24 ishtirokchi

Kuzgi mavsum · 100 ballik

Ishtirokchi14.0916.0918.09O‘rtachaHolat
Anvar RahimovST1234546
92889591,7Yaxshi
Dilnoza KarimovaST1234547
74817877,7O‘rta
Sardor Yo‘ldoshevST1234548
58—6461,0Diqqat
Nilufar ToshevaST1234549
96949896,0Yaxshi
90–100 — a’lo70–89 — yaxshi60–69 — qoniqarli0–59 — qoniqarsiz
  • Jadval kartasi: sarlavhada guruh nomi va soni (beyj), ostida davr va shkala; bitta asosiy amal — «Baho qo‘yish».
  • Baho — burchagi yumaloq to‘rtburchak (--eco-radius-md), doira emas: ikki xonali raqam sig‘adi. Rang shkalasi semantik tokenlardan: success, neytral, warning, error.
  • Hali baho yo‘q — «—» va oq fon; nol bilan adashtirilmaydi.
  • O‘rtacha — o‘ngga tekislangan, teng kenglikdagi raqam, bitta kasr xona. Holat — nuqtali beyj va so‘z: Yaxshi · O‘rta · Diqqat.
  • Shkala brendga qarab: 5 ballik, 100 ballik (GPA harfi bilan) yoki 3 yulduz. Legenda jadval ostida, so‘z bilan; rang faqat qo‘shimcha signal.
  • Futer: nechta qator ko‘rsatilgani va .eco-pagination--minimal. Tor ekranda jadval karta ichida yon tomonga suriladi.

Davomat

bitta katak — bitta kun · raqam doim ko‘rinadi
Light davomat · sentabr
92%12 darsdan 11 tasi · 1 kechikish
  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
  6. 6
  7. 7
  8. 8
  9. 9
  10. 10
  11. 11
  12. 12
  13. 13
  14. 14
  15. 15
  16. 16
  17. 17
  18. 18
  19. 19
  20. 20
  21. 21
  22. 22
  23. 23
  24. 24
  25. 25
  26. 26
  27. 27
  28. 28
  29. 29
  30. 30
Dark davomat · sentabr
92%12 darsdan 11 tasi · 1 kechikish
  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
  6. 6
  7. 7
  8. 8
  9. 9
  10. 10
  11. 11
  12. 12
  13. 13
  14. 14
  15. 15
  16. 16
  17. 17
  18. 18
  19. 19
  20. 20
  21. 21
  22. 22
  23. 23
  24. 24
  25. 25
  26. 26
  27. 27
  28. 28
  29. 29
  30. 30
  • Davomat to‘ri: bitta katak — bitta kun. Har katakda sana raqami va ekran o‘quvchi uchun aria-label («17-sentabr: kelmadi»).
  • Uch holat so‘z bilan: keldi, kechikdi, kelmadi — legendada; dam olish va darssiz kunlar oq fonli.
  • Yig‘indi tepada: foiz va «12 darsdan 11 tasi · 1 kechikish» — foydalanuvchi kataklarni sanamaydi.

Reyting

uchlik · o‘z qatori · o‘rin o‘zgarishi
Light
reyting · Kuzgi mavsum
  1. 1Bekzod Q.1 920 ball
  2. 2Nodira S.1 840 ball
  3. 3Otabek T.1 775 ball
  1. 4Dilshod K.ko‘tarildi+21 702
  2. 5Sevara A.tushdi−11 690
  3. 12Siz · Rahimjon G.ko‘tarildi+31 415
Dark
reyting · Kuzgi mavsum
  1. 1Bekzod Q.1 920 ball
  2. 2Nodira S.1 840 ball
  3. 3Otabek T.1 775 ball
  1. 4Dilshod K.ko‘tarildi+21 702
  2. 5Sevara A.tushdi−11 690
  3. 12Siz · Rahimjon G.ko‘tarildi+31 415
  • Chat — Nextcloud Talk bo‘limida: suhbatlar ro‘yxati, yozishma, reaksiya va javob, ishtirokchilar — Talk.
  • Reyting: uchlik — uchta neytral karta, birinchisi o‘rtada; o‘rin raqami doirada, birinchi o‘rinniki — yagona aksent. Ro‘yxat ustida jadvaldagidek yumshoq sarlavha qatori. O‘z qatori har doim ko‘rinadi — ro‘yxat uzun bo‘lsa, orada «···» bilan.
  • O‘rin o‘zgarishi — chip: strelka, ishora va son, «+2», «−1». Yashil yoki qizil tus faqat qo‘shimcha signal. Ball birligi brendga qarab: ball, coin, yulduz.
  • Ballar raqamlari teng kenglikda va minglik bo‘sh joy bilan: «1 920».

PDP School’ning o‘quv komponentlari shu tuzilishda, lekin School ranglari va shriftida: School · O‘quv komponentlari.

O‘quv komponentlari

Oddiy UI-kitda yo‘q bloklar

Namunalar — Academy brendida: guruh va talaba, mentor, 100 ballik baho.

Ilova karkaslari

Yon panel, sarlavha va ish maydoni: to‘rt variant

Ilova karkasi — har ekranda o‘zgarmaydigan qism: yon panel (navigatsiya), sarlavha qatori (yo‘l, qidiruv, amallar) va ish maydoni. Variant bitta: mahsulot uchun bir marta tanlanadi va hamma ekranda bir xil turadi. G‘oya — shadcn/ui Blocks (Sidebar, Dashboard), oyna sinflari — Moslashuvchan maket, mobil navigatsiya — Ilova navigatsiyasi.

Bu bo‘lim hozircha faqat EcoSystem uchun yozilgan. Ko‘rish uchun yuqoridagi brend almashtirgichda EcoSystem’ni tanlang — boshqa loyihalarga tasdiqdan keyin qo‘shiladi.

Bildirishnomalar markazi

Bildirishnomalar markazi va xabar turlari

CRM’da xabar ko‘p: yangi ariza, to‘lov, uy vazifasi, jadval o‘zgarishi. Hammasi toast bo‘lib chiqsa, ishni bo‘ladi; hech qayerda qolmasa, yo‘qoladi. Bildirishnomalar markazi — shapkadagi qo‘ng‘iroqcha ostidagi panel: xabarlar kun bo‘yicha guruhlangan, o‘qilmagani belgilangan, har birida bitta harakat. Qaysi xabar qaysi turda chiqishi — pastdagi jadvalda. Toast va alert — Holatlar, Panellar va qatlamlar; Nextcloud bosh ekrani — Dashboard. G‘oya — IBM Carbon (Notifications) va Atlassian (Flags).

Bu bo‘lim hozircha faqat EcoSystem uchun yozilgan. Ko‘rish uchun yuqoridagi brend almashtirgichda EcoSystem’ni tanlang — boshqa loyihalarga tasdiqdan keyin qo‘shiladi.

Yangi funksiya turi

Yangi funksiya turi: 3 qadamda nima o‘zgardi

CRM’ga yangi imkoniyat qo‘shildi — xodim uni topishi kerak, lekin ishini to‘xtatmasdan. Tur ekranni xiralashtiradi, bitta joyni yoritadi va ikki qatorda nima uchun kerakligini aytadi; 3–4 qadam, har qadamda chiqib ketish mumkin. Bitta maslahat va boshlash ro‘yxati — Sayt Onboarding va ruxsatlar. G‘oya — Atlassian (Spotlight).

Bu bo‘lim hozircha faqat EcoSystem uchun yozilgan. Ko‘rish uchun yuqoridagi brend almashtirgichda EcoSystem’ni tanlang — boshqa loyihalarga tasdiqdan keyin qo‘shiladi.

PDP Design System v0.7 · brend: PDP EcoSystembrend: PDP Academybrend: PDP Schoolbrend: PDP Universitybrend: PDP Onlinebrend: PDP Junior Barcha loyihalar · PDP School DS v1.0 · © 2026 PDP Dizayner — Rahim Sadiy · RedFox