PDP UI/UX qo‘llanma · v0.7

Rasmiy brend

PDP Desk

PDP Desk — veb (Nextcloud ilovalari) va Android, PDP Talk — chat va qo‘ng‘iroqlar. Karkas — «Dashboard», telefon to‘plami — «Mobile» to‘plamidan.

Ko‘lam — raqamlarda

Yig‘ishda manbadan sanaladi · 08.10.2026

  • 18Nextcloud ilovasi
  • 25PDP Desk ekrani
  • 24PDP Talk ekrani
  • 4qobiq namunasi
  • 77hujjat bloki

Dashboard

Bosh ekran: Nextcloud Dashboard va ilovalar plitkalari

Qoidalar va kod

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
Qoidalar va kod

Nextcloud’ning bosh sahifasi PDP ko‘rinishida: salomlashuv brend maydonida, holat va ob-havo tugmalari maydon ichida, to‘rtta vidjet kulrang panellarda, «Sozlash» oynasi kartalar ko‘rinishida. Demo markup — Nextcloud DOM’ining nusxasi (klasslar va tuzilma), CSS — Nextcloud selektorlariga yozilgan. Funksiyalar o‘zgarmaydi: vidjetni yoqish va o‘chirish, sudrab tartiblash, holat va ob-havo — Nextcloud’niki.

Demo’da: «Sozlash» oynasida vidjet va holat kartasini belgilang — panel yoki tugma darhol chiqadi yoki yo‘qoladi. Tartib — kartani yoki panel sarlavhasini sichqoncha bilan sudrang (Nextcloud’dagidek), klaviaturada — kartadagi katakda Alt + ↑ / ↓. Esc yoki fon — oynani yopadi. Konteyner 640 px dan tor bo‘lsa — sarlavha kichrayadi, holat tugmalari maydon ostiga tushadi, panellar bitta ustunga o‘tadi.

QismNextcloud selektoriManba (tekshirilgan)
Sahifa#app-dashboard · #content.app-dashboardapps/dashboard/src/DashboardApp.vue
Salomlashuv#app-dashboard > h2 (+ ::before yorliq, ::after izoh)DashboardApp.vue — greeting.text
Holat va ob-havo.statuses > li#status-status, #status-weather → .button-vue, .action-item__menutoggleuser_status/src/UserStatus.vue, weather_status/src/App.vue, NcButton, NcActions
Panel.panels > .panel · .panel--header > h2 > span | img · .panel--contentDashboardApp.vue (vuedraggable, handle=".panel--header")
Panel ikonkasi.icon-files-dark, .icon-activity, .icon-tasks, img[src*="spreed"]Vidjetlarning getIconClass() (recommendations, activity, tasks); Talk — API v2, icon_url (rasm manzili — taxmin)
Ro‘yxat elementi.dashboard-widget > ul > li · .item-list__entry · .item__details > h3, .message · .item-icon@nextcloud/vue NcDashboardWidget, NcDashboardWidgetItem
Fayl rasmiimg.api-dashboard-widget-item__icon ([src*="filetypes/"] — tur ikonkasi)apps/dashboard/src/components/ApiDashboardWidgetItem.vue
Avatar.avatardiv · .avatardiv img · .avatardiv--unknown · .avatardiv__initialsNcAvatar
Bo‘sh holat.empty-content · .half-screen · __icon · __descriptionNcEmptyContent, NcDashboardWidget
«Ko‘proq».dashboard-widget > .moreNcDashboardWidget
Ilovalar vidjetlari (r24)[data-nc-id="mail"] · deck · polls · announcementcenter · .icon-mail · .icon-deck · .icon-polls · .icon-announcementcenter-darktaxmin — vidjet id va ikonka sinflari tekshirilmagan; tuzilma — NcDashboardWidget (yuqoridagi qatorlar), «Sozlash» oynasida yoqiladi
Vazifalar#tasks_panel .calendar-dot · .center-buttonnextcloud/tasks src/views/Dashboard.vue
«Sozlash» oynasi.footer > .button-vue · .modal-mask · .modal-container · .modal__content ol.panels > li.panel-<id> > input.checkbox + label(.draggable)DashboardApp.vue, NcModal

Bosh ekran

.eco-dash · guruh · plitka

Ish joyi

7 ta ilova

Hujjatlar, taxtalar va jadval

Aloqa

5 ta ilova

Suhbat, pochta va jamoa

Qoidalar va kod

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
Qoidalar va kod
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

Qoidalar va kod

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

Qoidalar va kod

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

Qoidalar va kod

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

Qoidalar va kod

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

Qoidalar va kod

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

Qoidalar va kod

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

Qoidalar va kod

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

Qoidalar va kod

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

Qoidalar va kod

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

Qoidalar va kod

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

Qoidalar va kod

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

Qoidalar va kod

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

Qoidalar va kod

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

Qoidalar va kod

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

Qoidalar va kod

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

Qoidalar va kod

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

Qoidalar va kod

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.

Qoidalar va kod

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
Qoidalar va kod
  • 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
Qoidalar va kod
  • 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
Qoidalar va kod
  • 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
Qoidalar va kod
  • 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
Qoidalar va kod
  • 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
Qoidalar va kod
  • 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
Qoidalar va kod
  • 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: rels va to‘rt variant

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

Qoidalar va kod

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.

Bildirishnomalar markazi

Bildirishnomalar markazi va xabar turlari

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

Qoidalar va kod

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

Yangi funksiya turi

Yangi funksiya turi: 3 qadamda nima o‘zgardi

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

Qoidalar va kod

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

PDP Desk

PDP Desk — fayllar ilovasi

Nextcloud Files asosidagi fayl ilovasi — har ekran «Hozirgi holat» va «Redesign»da.

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

Qoidalar va kod

PDP Desk — PDP jamoasining fayl ilovasi: hujjat, rasm va papkalar telefonda, kompyuterda va brauzerda bir xil. Asosi — Nextcloud Files; ko‘rinishi — PDP EcoSystem. Guruhdagi har ekran ikki ko‘rinishda: «Hozirgi holat» — 03.10 prototipi va 05.10 Android kodi bo‘yicha, «Redesign» — DS qoidalari bo‘yicha, nima o‘zgargani bilan.

PDP Desk

Bosh ekran

Salom, qidiruv, xotira kartasi va so‘nggi fayllar — hozirgi holat va redesign yonma-yon.

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

Qoidalar va kod

Desk ochilganda birinchi ko‘rinadigan ekran: salom, «Fayllar» sarlavhasi, qidiruv, xotira kartasi, «So‘nggi» fayllar va ro‘yxat boshi. Tepada Light/Dark almashtirgichi — ikkala telefon birga almashadi.

PDP Desk

Fayllar ro‘yxati

Papka ichi: filtr chiplari, saralash, fayl qatorlari, tanlash rejimi va «Yaratish» varag‘i. Fayl nomlari tarjima qilinmaydi.

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

PDP Desk

Fayl tafsiloti va ulashish

Fayl ochilganda: katta ko‘rinish, nom va hajm, to‘rtta tezkor amal, kirish huquqi, havola va faollik; ulashish ekrani — kim ko‘radi va kim tahrirlaydi.

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

PDP Desk

Yuklashlar

Telefon fayllarini serverga yuborish: jarayon, kutish, xato, yakunlanganlar va fayl ikki joyda o‘zgarganda tanlov.

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

PDP Desk

Media va ko‘ruvchi

Telefondagi rasm va videolar oylar bo‘yicha va ularni to‘liq ekranda ko‘rish. Ko‘ruvchi Light’da ham qora — rasm uchun.

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

PDP Desk

Profil va sozlamalar

Hisob, xotira, ko‘rinish, sinxronlash, xavfsizlik va bildirishnomalar. Hozir ikki joyda: prototip profili va Nextcloud’ning stock sozlamalari.

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

PDP Talk

PDP Talk — chat va qo‘ng‘iroqlar

Nextcloud Talk asosidagi chat va qo‘ng‘iroqlar — «Hozirgi holat» va «Redesign».

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

Qoidalar va kod

PDP Talk — jamoa chatlari va qo‘ng‘iroqlari: shaxsiy va guruh chatlari, fayl, ovozli xabar, reaksiya, audio va video qo‘ng‘iroq. Asosi — Nextcloud Talk. Har ekran ikki ko‘rinishda: «Hozirgi holat» (prototip va Compose kodi) va «Redesign» (DS qoidalari).

PDP Talk

Chatlar ro‘yxati

Talk’ning bosh ekrani: salom va holat, qidiruv, onlayn hamkasblar, filtr chiplari va chatlar. Qator: avatar, nom, oxirgi xabar, vaqt, hisoblagich.

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

PDP Talk

Chat: xabarlar va yozish

Guruh chatidagi barcha xabar turlari va bosib turish menyusi.

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

Qoidalar va kod

Guruh chati: sarlavha paneli, sana va tizim xabarlari, matn, eslatma, iqtibos, havola, rasm, fayl, ovozli xabar, so‘rovnoma, reaksiyalar, yozish maydoni va bosib turish menyusi.

PDP Talk

Qo‘ng‘iroq

Guruh qo‘ng‘irog‘i va kiruvchi qo‘ng‘iroq. Qo‘ng‘iroq ekrani doim qorong‘i — sahna qotirilgan.

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

PDP Talk

Chat ma’lumoti va sozlamalar

Guruh haqida: avatar, nom, tezkor amallar, tavsif, bildirishnomalar va ishtirokchilar. Ilova sozlamalari va holat tanlash.

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

PDP Talk

Tanishuv va kirish

Birinchi ochilish: uch qisqa ekran (qora sahnada), server manzili va brauzer orqali kirish (Nextcloud Login Flow v2).

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