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

view ResultPageDemo() =    <div.demo-stack>        <ResultPage id="result-page-demo-ok" title="Order placed" code="Order #4821"                    actions={[<Button href="#result_page">See the order</Button>, <Button variant="outline" href="#result_page">Keep shopping</Button>]}                    extra={<DescriptionList items={[{ term: "Delivery", detail: "Thu 6 – Fri 7 Nov" }, { term: "Paid", detail: "€84.00 by card" }]}/>}>            We emailed a receipt to ada@example.com.        </ResultPage>        <div.demo-row style="align-items: stretch">            <div style="flex: 1; min-width: 260px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius)">                <ResultPage id="result-page-demo-err" status="error" title="Payment failed"                            actions={<Button tone="danger" href="#result_page">Try another card</Button>}>                    The card was declined. Nothing was charged.                </ResultPage>            </div>            <div style="flex: 1; min-width: 260px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius)">                <ResultPage status="info" title="Check your inbox">We sent a sign-in link to ada@example.com. It works for 15 minutes.</ResultPage>            </div>        </div>    </div>

// ResultPage: a whole page (or panel) that says how something ended: an icon// for the outcome, a title, a line or two, and what to do next.////   <ResultPage status="success" title="Order placed"//               actions={[<Button href="/orders/42">See the order</Button>, <Button variant="outline" href="/">Keep shopping</Button>]}>//       We emailed a receipt to ada@example.com.//   </ResultPage>//   <ResultPage status="error" title="Payment failed">The card was declined. Nothing was charged.</ResultPage>//// status: "success" (default), "error", "warning" or "info"; it picks the icon// and its colour. title: the headline. children: the text under it. actions:// HTML (one Button or a list of them) under the text. extra: HTML under the// actions, such as an order's details. code: a short reference shown small// under the title ("Order #4821"). size: "md" (default) or "lg", for a page of// its own. Success and info are announced politely (role="status"), error and// warning at once (role="alert").import ui/theme.qwe use ui_clslet result_page_css = css`.ui-result { display: grid; justify-items: center; gap: 8px; padding: 48px 24px; text-align: center;  font: 15px/1.55 var(--ui-font); color: var(--ui-fg); --t: var(--ui-success); --ts: var(--ui-success-soft); }.ui-result-error { --t: var(--ui-danger); --ts: var(--ui-danger-soft); }.ui-result-warning { --t: var(--ui-warning); --ts: var(--ui-warning-soft); }.ui-result-info { --t: var(--ui-info); --ts: var(--ui-info-soft); }.ui-result-icon { display: grid; place-items: center; width: 72px; height: 72px; margin-bottom: 8px; border-radius: 50%;  background: var(--ts); color: var(--t); }.ui-result-icon svg { width: 36px; height: 36px; }.ui-result-title { margin: 0; font-size: 24px; font-weight: 650; line-height: 1.25; }.ui-result-code { color: var(--ui-muted); font-size: 13px; font-variant-numeric: tabular-nums; }.ui-result-text { max-width: 48ch; color: var(--ui-muted); }.ui-result-text > :first-child { margin-top: 0; }.ui-result-text > :last-child { margin-bottom: 0; }.ui-result-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 16px; }.ui-result-extra { width: 100%; max-width: 560px; margin-top: 24px; text-align: left; }.ui-result-lg { padding: 96px 24px; min-height: 60vh; align-content: center; }.ui-result-lg .ui-result-icon { width: 96px; height: 96px; }.ui-result-lg .ui-result-icon svg { width: 48px; height: 48px; }.ui-result-lg .ui-result-title { font-size: 30px; }`// The icon for each outcome, drawn in currentColor on a 24 by 24 grid.fn result_page_icon(status: str) {    let parts = match status {        "error" => [<circle cx="12" cy="12" r="9"/>, <path d="M9 9l6 6M15 9l-6 6"/>]        "warning" => [<path d="M10.3 3.9L2.6 17.5A2 2 0 0 0 4.3 20.5h15.4a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0z"/>, <path d="M12 9v4.5M12 17h.01"/>]        "info" => [<circle cx="12" cy="12" r="9"/>, <path d="M12 11v5M12 8h.01"/>]        _ => [<circle cx="12" cy="12" r="9"/>, <path d="M8 12.5l2.5 2.5L16 9.5"/>]    }    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"         stroke-linejoin="round" aria-hidden="true">{parts}</svg>}view ResultPage(title: str, status: str = "success", code: str? = null, actions = null, extra = null,                size: str = "md", id: str? = null, class: str? = null, children) {    style global result_page_css    <section class={ui_cls(["ui-result", `ui-result-${status}`, size != "md" && `ui-result-${size}`, class])} id={id}             role={status == "error" || status == "warning" ? "alert" : "status"} aria-labelledby={id != null ? `${id}-title` : null}>        <div.ui-result-icon>{result_page_icon(status)}</div>        <h1.ui-result-title id={id != null ? `${id}-title` : null}>{title}</h1>        {code != null && <span.ui-result-code>{code}</span>}        <div.ui-result-text>{children}</div>        {actions != null && <div.ui-result-actions>{actions}</div>}        {extra != null && <div.ui-result-extra>{extra}</div>}    </section>}