ShareCertificate

import ui/theme.qwe use theme_cssuse ui/share_certificate.qweroute GET / = <html><head><style>{theme_css}</style></head><body class="ui-root">...</body></html>

view ShareCertificateDemo() =    <div.demo-stack>        <ShareCertificate id="share-certificate-demo" coop="Bayanihan Multi-Purpose Cooperative" registration="Registration No. 9520-03012345"                          address="Rizal Avenue, Poblacion, San Isidro" number="SC-2026-00417" member="Lourdes Villanueva"                          member_number="M-004217" shares={185} par={100} currency="PHP" issued="2026-03-31" place="San Isidro"                          signers={[{ name: "Ma. Cristina Ocampo", role: "Secretary" }, { name: "Eduardo Lim", role: "Chairperson" }]}/>        <ShareCertificate id="share-certificate-demo-pref" coop="Northfield Farmers Cooperative" number="P-00088" member="Okonkwo Family Farm LLC"                          shares={2500} par={10} kind="preferred" issued="2026-01-15"                          signers={[{ role: "Secretary" }, { role: "Treasurer" }, { role: "President" }]}/>    </div>

// ShareCertificate: a co-op's certificate of shares, to print: the co-op's name// and registration, the certificate's number, who owns how many shares (in words// and figures) at what par value and the total, the date, and lines for the// officers to sign. On paper it prints in black on white, on a page of its own.////   <ShareCertificate coop="Bayanihan Multi-Purpose Cooperative" registration="Reg. No. 9520-03012345"//                     number="SC-2026-00417" member="Lourdes Villanueva" member_number="M-004217"//                     shares={185} par={100} currency="PHP" issued="2026-03-31"//                     signers={[{ name: "Ma. Cristina Ocampo", role: "Secretary" }, { name: "Eduardo Lim", role: "Chairperson" }]}/>//// coop: the co-op's name. registration: its registration, as text; address: a// line under it. number: the certificate's number. member: the owner's name;// member_number: theirs. shares: how many, a whole number, written in words too// ("One hundred eighty-five (185)"). par: the par value of one share, in// `currency` (ISO code, "USD") for `locale` (the program's); the total is shares// times par, exactly. kind: what shares they are ("common"; "preferred"). issued:// the date, ISO ("2026-03-31", shown "March 31, 2026"); place: where it was issued.// signers: the lines to sign, { name?, role } each (by default the Secretary and// the Chairperson). seal: false leaves out the seal's circle. id: the element's id.//// share_certificate_words(n) writes a whole number in English words.import ui/theme.qwe use ui_clslet share_certificate_css = css`.ui-share-cert { position: relative; display: grid; gap: 18px; min-width: 0; max-width: 820px; padding: 14px; border-radius: var(--ui-radius);  background: var(--ui-surface); color: var(--ui-fg); font: 15px/1.6 Georgia, "Times New Roman", serif; border: 1px solid var(--ui-border); }.ui-share-cert-frame { display: grid; gap: 20px; padding: 30px 36px; border: 3px double color-mix(in srgb, var(--ui-accent) 60%, var(--ui-border));  border-radius: calc(var(--ui-radius) - 4px); text-align: center; }.ui-share-cert-top { display: flex; justify-content: space-between; gap: 12px; font: 600 12px/1.4 var(--ui-font); color: var(--ui-muted); text-align: left; }.ui-share-cert-top span:last-child { text-align: right; }.ui-share-cert-top b { display: block; color: var(--ui-fg); font: 600 14px var(--ui-mono); }.ui-share-cert .ui-share-cert-coop { display: block; margin: 0; text-align: center; font-size: 26px; font-weight: 700; line-height: 1.2; letter-spacing: .01em; }.ui-share-cert-reg { margin: 2px 0 0; color: var(--ui-muted); font: 13px/1.4 var(--ui-font); }.ui-share-cert-title { margin: 0; font-size: 15px; font-weight: 400; letter-spacing: .3em; text-transform: uppercase; color: var(--ui-accent); }.ui-share-cert-body { margin: 0 auto; max-width: 60ch; font-size: 16px; }.ui-share-cert-name { display: block; margin: 6px 0; font-size: 24px; font-style: italic; font-weight: 700; }.ui-share-cert-figures { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 0; margin: 0; }.ui-share-cert-figures div { display: grid; gap: 0; min-width: 130px; padding: 4px 18px; border-left: 1px solid var(--ui-border); }.ui-share-cert-figures div:first-child { border-left: 0; }.ui-share-cert-figures dt { color: var(--ui-muted); font: 600 11px/1.6 var(--ui-font); letter-spacing: .06em; text-transform: uppercase; }.ui-share-cert-figures dd { margin: 0; font-size: 18px; font-weight: 700; font-variant-numeric: lining-nums tabular-nums; }.ui-share-cert-given { margin: 0; color: var(--ui-muted); font-size: 14px; }.ui-share-cert-signs { display: flex; flex-wrap: wrap; justify-content: space-around; align-items: end; gap: 24px 40px; margin-top: 18px; }.ui-share-cert-sign { display: grid; gap: 2px; min-width: 200px; margin-top: 40px; padding-top: 6px; border-top: 1px solid var(--ui-fg); font: 13px/1.4 var(--ui-font); }.ui-share-cert-sign b { font-weight: 600; }.ui-share-cert-sign span { color: var(--ui-muted); }.ui-share-cert-seal { display: grid; place-items: center; width: 92px; height: 92px; border: 2px dashed var(--ui-border); border-radius: 50%;  color: var(--ui-muted); font: 600 10px/1.2 var(--ui-font); letter-spacing: .1em; text-transform: uppercase; }@media (max-width: 560px) { .ui-share-cert-frame { padding: 22px 16px; } .ui-share-cert-coop { font-size: 21px; } .ui-share-cert-figures div { border-left: 0; } }@media print {  .ui-share-cert { max-width: none; border: 0; padding: 0; background: #fff; color: #000; break-inside: avoid; page-break-inside: avoid; }  .ui-share-cert-frame { border-color: #000; }  .ui-share-cert-title { color: #000; }}`let share_certificate_ones = ["", "one", "two", "three", "four", "five", "six", "seven", "eight", "nine", "ten", "eleven", "twelve",                              "thirteen", "fourteen", "fifteen", "sixteen", "seventeen", "eighteen", "nineteen"]let share_certificate_tens = ["", "", "twenty", "thirty", "forty", "fifty", "sixty", "seventy", "eighty", "ninety"]// Under a thousand in words: "one hundred eighty-five".fn share_certificate_hundreds(n: int) -> str {    let h = floor(n / 100)    let r = n % 100    let rest = r < 20 ? share_certificate_ones[r]                      : share_certificate_tens[floor(r / 10)] + (r % 10 > 0 ? "-" + share_certificate_ones[r % 10] : "")    let head = h > 0 ? share_certificate_ones[h] + " hundred" : ""    trim(head + (head != "" && rest != "" ? " " : "") + rest)}// A whole number in words, capitalised: 1250 is "One thousand two hundred fifty".fn share_certificate_words(n: int) -> str {    if n == 0 { return "Zero" }    let scales = [[1000000000, "billion"], [1000000, "million"], [1000, "thousand"], [1, ""]]    let parts = scales | filter((s) => floor(n / s[0]) % 1000 > 0)                       | map((s) => trim(share_certificate_hundreds(floor(n / s[0]) % 1000) + " " + s[1]))    let text = join(parts, " ")    upper(slice(text, 0, 1)) + slice(text, 1)}// An ISO date as "March 31, 2026"; other text as it is.fn share_certificate_date(d, locale: str?) -> str =    date.valid(str(d), "date") ? date.format(str(d), { locale: locale ?? "en-US", style: "long" }) : str(d)view ShareCertificate(coop: str, member: str, shares: int, par, number: str? = null, registration: str? = null, address: str? = null,                      member_number: str? = null, currency: str = "USD", locale: str? = null, kind: str = "common",                      issued = null, place: str? = null, signers: list = [{ role: "Secretary" }, { role: "Chairperson" }],                      seal: bool = true, id: str? = null, class: str? = null) {    style global share_certificate_css    let par_m = money.of(dec(par), currency, "half_up")    let total = money.mul(par_m, shares)    let shown = (m) => locale != null ? money.format(m, locale) : money.format(m)    let count = format_number(shares, locale ?? "en-US", 0)    let half = floor(len(signers) / 2)    <article class={ui_cls(["ui-share-cert", class])} id={id} aria-label={`Share certificate${number != null ? ` ${number}` : ""}, ${member}`}>        <div.ui-share-cert-frame>            <div.ui-share-cert-top>                <span>Certificate no.<b>{number ?? "—"}</b></span>                <span>Shares<b>{count}</b></span>            </div>            <header>                <h3.ui-share-cert-coop>{coop}</h3>                {registration != null && <p.ui-share-cert-reg>{registration}</p>}                {address != null && <p.ui-share-cert-reg>{address}</p>}            </header>            <p.ui-share-cert-title>Certificate of shares</p>            <p.ui-share-cert-body>                This is to certify that{" "}                <span.ui-share-cert-name>{member}</span>                {member_number != null && `member no. ${member_number}, `}is the owner of{" "}                <b.ui-share-cert-words> {share_certificate_words(shares)} ({count})</b> fully paid {kind} {shares == 1 ? "share" : "shares"} of {coop},                at a par value of {shown(par_m)} each, transferable only on the books of the cooperative under its by-laws.            </p>            <dl.ui-share-cert-figures>                <div><dt>Shares</dt><dd>{count}</dd></div>                <div><dt>Par value</dt><dd>{shown(par_m)}</dd></div>                <div.ui-share-cert-total><dt>Total</dt><dd>{shown(total)}</dd></div>            </dl>            {issued != null && <p.ui-share-cert-given>                Given {place != null && `at ${place}, `}on <time datetime={str(issued)}>{share_certificate_date(issued, locale)}</time>.            </p>}            <div.ui-share-cert-signs>                {for [i, s] in enumerate(signers) => [                    seal && i == half && <div.ui-share-cert-seal aria-hidden="true">Seal</div>,                    <div.ui-share-cert-sign key={i}>                        <b>{s.name ?? ""}</b>                        <span>{s.role}</span>                    </div>,                ]}                {seal && len(signers) == 0 && <div.ui-share-cert-seal aria-hidden="true">Seal</div>}            </div>        </div>    </article>}