Kiritiş · compound

Xat (asosçiga taklif)

Bitta odamga — asosçi, muallif, rahbarga — töğridan-töğri xat bloki: çapda kimga (sarlavha, bir gap, avatar va ism), öngda bitta yaxlit xat yuzasi — maydon, içidagi pastki qatorda yuboruvçi, belgilar sanoği va «Yuboriş». Uç holat: kirgan (forma), mehmon (butun yuza — kirişga havola, edge keşga mos), yuborildi (rahmat). Soyasiz, brend tusidagi fon. Fox MB sörovi (Manbaa «Asosçiga taklif», 21.10).

beta0.1.0 dan.fx-letterCSS + JS

Töğridan-töğri

Taklifingizni asosçiga yozing

Fikr, ğoya yoki tanqid — xatingiz töğridan-töğri asosçiga boradi.

Rahim SadiyManbaa asosçisi

Javob Telegram orqali keladi.

Töğridan-töğri

Taklifingizni asosçiga yozing

Fikr, ğoya yoki tanqid — xatingiz töğridan-töğri asosçiga boradi.

Rahim SadiyManbaa asosçisi

Taklif yoziş uçun kiring — bir daqiqa, Telegram yoki Google bilanAsosçi sizga javob qaytara olişi uçunKiriş

Töğridan-töğri

Taklifingizni asosçiga yozing

Fikr, ğoya yoki tanqid — xatingiz töğridan-töğri asosçiga boradi.

Rahim SadiyManbaa asosçisi

Rahmat! Taklifingiz asosçiga yetkazildi.

Javob Telegram orqali keladi. Yana yozmoqçimisiz? Sahifani yangilang.

Anatomiya

root.fx-letterşart
intro.fx-letter__introixtiyoriy
kicker.fx-letter__kickerixtiyoriy
title.fx-letter__titleşart
text.fx-letter__textixtiyoriy
person.fx-letter__personixtiyoriy
main.fx-letter__mainşart
box.fx-letter__boxşart
input.fx-letter__inputixtiyoriy
ghost.fx-letter__ghostixtiyoriy
bar.fx-letter__barixtiyoriy
from.fx-letter__fromixtiyoriy
end.fx-letter__endixtiyoriy
count.fx-letter__countixtiyoriy
send.fx-letter__sendixtiyoriy
note.fx-letter__noteixtiyoriy
done.fx-letter__doneixtiyoriy

Holatlar

focuslowerror

Klaviatura va kiriş

Tugma	Amal
`Tab`	Maydon → Yuboriş
`Enter (tugmada)`	Yuboradi

Maydon — <textarea> (fx-sr-only label bilan), minlength/maxlength brauzerda ham tekşiriladi; sanoq aria-live="polite". Yuborilgan holat role="status". Mehmon yuzasi — oddiy <a>, matni öqiladi.

Kod

AI uçun: qaçon işlatiladi

Işlating

Boş sahifada asosçi yoki muallifga taklif, fikr-mulohaza.
«Rahbarga yozing», «Muharrirga xat» kabi bitta odamga murojaat.

Işlatmang

Köp maydonli ariza (ism, telefon, xizmat) → form
Çat yoki suhbat oqimi → composer
Mehmonga öçirilgan (disabled) kulrang maydon körsatmang — u «buzuq» körinadi; butun yuza kirişga havola bölsin.
Maydon va tugmani ikki alohida obyekt qilib yonma-yon qöymang — tugma xat yuzasining içidagi pastki qatorda.
Soya qöşmang — blok fon tusi bilan ajraladi.

npx foxui add letter

<section class="fx-letter" aria-labelledby="lt1-t" data-fx-letter>
  <div class="fx-letter__intro">
    <p class="fx-letter__kicker">Töğridan-töğri</p>
    <h2 class="fx-letter__title" id="lt1-t">Taklifingizni <em>asosçiga</em> yozing</h2>
    <p class="fx-letter__text">Fikr, ğoya yoki tanqid — xatingiz töğridan-töğri asosçiga boradi.</p>
    <div class="fx-letter__person"><span class="fx-avatar" data-size="md" data-color="purple" aria-hidden="true">RS</span><span><b>Rahim Sadiy</b><small>Manbaa asosçisi</small></span></div>
  </div>
  <div class="fx-letter__main">
    <form class="fx-letter__box" method="post" action="#">
      <label class="fx-sr-only" for="lt1-m">Taklifingiz</label>
      <textarea class="fx-letter__input" id="lt1-m" name="matn" rows="3" minlength="10" maxlength="3000" required placeholder="Manbaa'da nimani koʻrishni xohlaysiz?"></textarea>
      <div class="fx-letter__bar"><span class="fx-letter__from">Yuboruvçi: Dilnoza Karimova · @dilnoza_k</span><span class="fx-letter__end"><span class="fx-letter__count" aria-live="polite">0 / 3000</span><button class="fx-btn fx-letter__send" data-variant="primary" type="submit">Yuboriş<svg viewBox="0 0 256 256" aria-hidden="true"><path fill="currentColor" d="M221.66,133.66l-72,72a8,8,0,0,1-11.32-11.32L196.69,136H40a8,8,0,0,1,0-16H196.69L138.34,61.66a8,8,0,0,1,11.32-11.32l72,72A8,8,0,0,1,221.66,133.66Z"/></svg></button></span></div>
    </form>
    <p class="fx-letter__note">Javob Telegram orqali keladi.</p>
  </div>
</section>
<!-- mehmon: butun yuza — kirishga havola (edge keshda hamma uchun bir xil) -->
<section class="fx-letter" aria-labelledby="lt2-t">
  <div class="fx-letter__intro">
    <p class="fx-letter__kicker">Töğridan-töğri</p>
    <h2 class="fx-letter__title" id="lt2-t">Taklifingizni <em>asosçiga</em> yozing</h2>
    <p class="fx-letter__text">Fikr, ğoya yoki tanqid — xatingiz töğridan-töğri asosçiga boradi.</p>
    <div class="fx-letter__person"><span class="fx-avatar" data-size="md" data-color="purple" aria-hidden="true">RS</span><span><b>Rahim Sadiy</b><small>Manbaa asosçisi</small></span></div>
  </div>
  <div class="fx-letter__main">
    <a class="fx-letter__box" href="#kirish"><span class="fx-letter__ghost">Taklif yoziş uçun kiring — bir daqiqa, Telegram yoki Google bilan</span><span class="fx-letter__bar"><span class="fx-letter__from">Asosçi sizga javob qaytara olişi uçun</span><span class="fx-letter__end"><span class="fx-btn fx-letter__send" data-variant="primary">Kiriş<svg viewBox="0 0 256 256" aria-hidden="true"><path fill="currentColor" d="M221.66,133.66l-72,72a8,8,0,0,1-11.32-11.32L196.69,136H40a8,8,0,0,1,0-16H196.69L138.34,61.66a8,8,0,0,1,11.32-11.32l72,72A8,8,0,0,1,221.66,133.66Z"/></svg></span></span></span></a>
  </div>
</section>
<!-- yuborildi -->
<section class="fx-letter" aria-labelledby="lt3-t">
  <div class="fx-letter__intro">
    <p class="fx-letter__kicker">Töğridan-töğri</p>
    <h2 class="fx-letter__title" id="lt3-t">Taklifingizni <em>asosçiga</em> yozing</h2>
    <p class="fx-letter__text">Fikr, ğoya yoki tanqid — xatingiz töğridan-töğri asosçiga boradi.</p>
    <div class="fx-letter__person"><span class="fx-avatar" data-size="md" data-color="purple" aria-hidden="true">RS</span><span><b>Rahim Sadiy</b><small>Manbaa asosçisi</small></span></div>
  </div>
  <div class="fx-letter__main">
    <div class="fx-letter__done" role="status"><svg viewBox="0 0 256 256" aria-hidden="true"><path fill="currentColor" d="M229.66,77.66l-128,128a8,8,0,0,1-11.32,0l-56-56a8,8,0,0,1,11.32-11.32L96,188.69,218.34,66.34a8,8,0,0,1,11.32,11.32Z"/></svg><b>Rahmat! Taklifingiz asosçiga yetkazildi.</b><p>Javob Telegram orqali keladi. Yana yozmoqçimisiz? Sahifani yangilang.</p></div>
  </div>
</section>

Tokenlar: --fx-bg-brand-solid --fx-bg-brand-subtle --fx-bg-surface --fx-border-color-default --fx-border-color-focus --fx-border-width-default --fx-border-width-focus --fx-ease-standard --fx-font-adjust-display --fx-font-family-display --fx-font-size-2xl --fx-font-size-display-sm --fx-font-size-lg --fx-font-size-sm --fx-font-size-xs --fx-font-weight-medium --fx-font-weight-semibold --fx-motion-fast --fx-radius-circle --fx-radius-overlay --fx-radius-surface --fx-size-icon-sm --fx-space-1 --fx-space-10 --fx-space-12 --fx-space-2 --fx-space-3 --fx-space-4 --fx-space-5 --fx-space-6 --fx-text-brand --fx-text-error --fx-text-on-brand --fx-text-primary --fx-text-secondary --fx-text-tertiary

Şu toifadan

KalendarOy töri: kun tanlaş, oraliq (2 oy yonma-yon), oy va yil körinişi.Captcha ramkasi«Men robot emasman» (4.110, #27): uçinçi tomon captcha'si (Cloudflare Turnstile, reCAPTCHA, hCaptcha yoki öz serveringiz) uçun FoxUI ramkasi — forma içida begona körinmaydi, holatlar hamma provayderda bir xil: böş → «Tekşirilmoqda…» (halqa) → ✓ «Tasdiqlandi» / !CheckoutTölov / checkout formasi (naqş): raqamlangan bölimlar — aloqa (telefon +998), yetkazib beriş usuli va manzil, tölov usuli (bank kartasi — raqam va muddat niqobi bilan, naqd, bölib tölaş); öngda yopişqoq buyurtma xulosasi — mahsulotlar, promo-kod, jami va «… söm tölaş».Rang tanlagiçErkin rang tanlaş: töyinganlik/yorqinlik maydoni (siçqonça va klaviatura), ton çiziği, HEX va RGB maydonlari, tayyor ranglar qatori va pipetka (brauzer qöllasa).ComboboxYozib qidiriladigan tanlov: köp variant (şahar, mijoz, mahsulot).Yoziş paneli (composer)AI çat va messenjer uçun BITTA yoziş paneli: biriktiriş tugmasi, avto-ösuvçi maydon, ixtiyoriy emoji, matn bölmasa mikrofon — matn paydo bölsa yuboriş (ikon animatsiyali almaşadi), oqim ketayotganda «Töxtatiş».

Xat (asosçiga taklif)

Taklifingizni asosçiga yozing

Taklifingizni asosçiga yozing

Taklifingizni asosçiga yozing

Anatomiya

Holatlar

Klaviatura va kiriş

Kod

Şu toifadan

Libos

Rang

Şakl va çegara

Şrift juftligi

Qulaylik