BoardingPass

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

view BoardingPassDemo() =    <div.demo-stack>        <BoardingPass id="boarding-pass-demo-full" airline="Quillo Air" flight="QA 204" passenger="Ada Lovelace" date="2026-11-03"                      from={{ code: "LHR", city: "London Heathrow" }} to={{ code: "OPO", city: "Porto" }}                      departs="07:45" arrives="10:20" boarding="07:10" gate="B12" seat="14A" group="2" terminal="5" cabin="Economy" record="X7K2QL"                      logo="https://dummyimage.com/110x24/ffffff/5b4bdb.png&text=QA"/>        <BoardingPass id="boarding-pass-demo-min" airline="Nordic" flight="NR 17" passenger="Grace Hopper"                      from={{ code: "CPH" }} to={{ code: "ARN" }} seat="3C">            <svg width="200" height="44" viewBox="0 0 100 22" preserveAspectRatio="none" role="img" aria-label="Barcode" shape-rendering="crispEdges">                <path fill="currentColor" d="M0 0h2v22H0zM3 0h1v22H3zM6 0h3v22H6zM11 0h1v22h-1zM14 0h2v22h-2zM18 0h1v22h-1zM21 0h3v22h-3zM26 0h1v22h-1zM29 0h2v22h-2zM33 0h1v22h-1zM36 0h3v22h-3zM41 0h2v22h-2zM45 0h1v22h-1zM48 0h3v22h-3zM53 0h1v22h-1zM56 0h2v22h-2zM60 0h1v22h-1zM63 0h3v22h-3zM68 0h2v22h-2zM72 0h1v22h-1zM75 0h3v22h-3zM80 0h1v22h-1zM83 0h2v22h-2zM87 0h1v22h-1zM90 0h3v22h-3zM95 0h1v22h-1zM98 0h2v22h-2z"/>            </svg>        </BoardingPass>    </div>

// BoardingPass: a boarding pass: from and to, the flight, date and times, gate,// seat, boarding time and group, the passenger, and a barcode area (a Barcode or// QrCode as children; stripes stand in without one), with a stub for the gate.////   <BoardingPass airline="Quillo Air" flight="QA 204" passenger="Ada Lovelace" date="2026-11-03"//                 from={{ code: "LHR", city: "London" }} to={{ code: "OPO", city: "Porto" }}//                 departs="07:45" arrives="10:20" gate="B12" seat="14A" boarding="07:10" group="2" cabin="Economy">//       <Barcode text="QA204LHROPO14A"/>//   </BoardingPass>//// airline, flight: whose, which. passenger: who. from, to: { code, city } (the// three-letter code big, the city under it). date: an ISO date, shown as "Mon 3 Nov// 2026". departs, arrives, boarding: times as they should read. gate, seat, group,// terminal, cabin: the rest; each left out is not shown. record: the booking// reference, on the stub. logo: the airline's logo image. children: the barcode// area. id: its id.import ui/theme.qwe use ui_clslet boarding_pass_css = css`.ui-boarding-pass { display: flex; width: 100%; max-width: 640px; min-width: 0; margin: 0; border-radius: var(--ui-radius); background: var(--ui-surface);  color: var(--ui-fg); font: 14px/1.4 var(--ui-font); box-shadow: var(--ui-shadow); }.ui-boarding-pass-main { flex: 1; min-width: 0; display: grid; gap: 16px; padding: 18px 22px 20px; border-radius: var(--ui-radius) 0 0 var(--ui-radius); overflow: hidden; }.ui-boarding-pass-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: -18px -22px 0; padding: 12px 22px; background: var(--ui-accent); color: var(--ui-accent-fg); }.ui-boarding-pass-airline { display: flex; align-items: center; gap: 10px; font-weight: 700; letter-spacing: .02em; }.ui-boarding-pass-airline img { max-height: 24px; max-width: 110px; object-fit: contain; }.ui-boarding-pass-cabin { font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; opacity: .9; }.ui-boarding-pass-route { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; }.ui-boarding-pass-code { font-size: 36px; font-weight: 800; line-height: 1; letter-spacing: -.02em; }.ui-boarding-pass-city { color: var(--ui-muted); font-size: 13px; }.ui-boarding-pass-time { margin-top: 4px; font-size: 16px; font-weight: 600; font-variant-numeric: tabular-nums; }.ui-boarding-pass-to { text-align: right; }.ui-boarding-pass-plane { color: var(--ui-muted); }.ui-boarding-pass-plane svg { width: 28px; height: 28px; }.ui-boarding-pass-plane::before, .ui-boarding-pass-plane::after { content: ""; display: inline-block; width: 24px; border-top: 1px dashed var(--ui-strong); vertical-align: middle; }.ui-boarding-pass-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(84px, 1fr)); gap: 10px 16px; margin: 0; }.ui-boarding-pass-grid div { display: grid; gap: 1px; }.ui-boarding-pass-grid dt { color: var(--ui-muted); font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }.ui-boarding-pass-grid dd { margin: 0; font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums; }.ui-boarding-pass-wide dd { font-size: 15px; font-weight: 600; }.ui-boarding-pass-bars { display: grid; justify-items: start; min-height: 44px; padding-top: 12px; border-top: 1px solid var(--ui-border); }.ui-boarding-pass-bars-fake { width: 220px; max-width: 100%; height: 44px; border-radius: 2px;  background: repeating-linear-gradient(90deg, var(--ui-fg) 0 2px, transparent 2px 4px, var(--ui-fg) 4px 5px, transparent 5px 8px, var(--ui-fg) 8px 11px, transparent 11px 13px); }.ui-boarding-pass-stub { position: relative; flex: 0 0 190px; display: grid; align-content: start; gap: 10px; padding: 18px 16px; border-left: 2px dashed var(--ui-strong);  border-radius: 0 var(--ui-radius) var(--ui-radius) 0; }.ui-boarding-pass-stub::before, .ui-boarding-pass-stub::after { content: ""; position: absolute; left: -11px; width: 20px; height: 20px; border-radius: 50%; background: var(--ui-bg); }.ui-boarding-pass-stub::before { top: -10px; }.ui-boarding-pass-stub::after { bottom: -10px; }.ui-boarding-pass-stub-route { font-size: 18px; font-weight: 800; }.ui-boarding-pass-stub .ui-boarding-pass-grid { grid-template-columns: 1fr 1fr; gap: 8px 10px; }.ui-boarding-pass-stub .ui-boarding-pass-grid dd { font-size: 14px; }.ui-boarding-pass-stub-name { font-weight: 600; font-size: 13px; }@media (max-width: 520px) {  .ui-boarding-pass { flex-direction: column; }  .ui-boarding-pass-main { border-radius: var(--ui-radius) var(--ui-radius) 0 0; }  .ui-boarding-pass-stub { flex: none; border-left: 0; border-top: 2px dashed var(--ui-strong); border-radius: 0 0 var(--ui-radius) var(--ui-radius); }  .ui-boarding-pass-stub::before, .ui-boarding-pass-stub::after { top: -11px; bottom: auto; }  .ui-boarding-pass-stub::before { left: -10px; }  .ui-boarding-pass-stub::after { left: auto; right: -10px; }}@media print { .ui-boarding-pass { box-shadow: none; border: 1px solid #000; } .ui-boarding-pass-head { -webkit-print-color-adjust: exact; print-color-adjust: exact; } }`let boarding_pass_days = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]let boarding_pass_months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]// An ISO date as "Mon 3 Nov 2026"; other text as it is.fn boarding_pass_date(d) -> str {    let s = slice(str(d), 0, 10)    if !date.valid(s) { return str(d) }    let p = date.parts(s)    `${boarding_pass_days[p.weekday - 1]} ${p.day} ${boarding_pass_months[p.month - 1]} ${p.year}`}fn boarding_pass_cell(label: str, value) = value != null && <div><dt>{label}</dt><dd>{value}</dd></div>view BoardingPass(airline: str, flight: str, passenger: str, from: map, to: map, date = null, departs: str? = null, arrives: str? = null,                  boarding: str? = null, gate: str? = null, seat: str? = null, group: str? = null, terminal: str? = null,                  cabin: str? = null, record: str? = null, logo: str? = null, id: str? = null, class: str? = null, children) {    style global boarding_pass_css    <article class={ui_cls(["ui-boarding-pass", class])} id={id} aria-label={`Boarding pass: ${flight}, ${from.code} to ${to.code}, ${passenger}`}>        <div.ui-boarding-pass-main>            <div.ui-boarding-pass-head>                <span.ui-boarding-pass-airline>{logo != null && <img src={logo} alt=""/>}{airline}</span>                {cabin != null && <span.ui-boarding-pass-cabin>{cabin}</span>}            </div>            <div.ui-boarding-pass-route>                <div.ui-boarding-pass-from>                    <div.ui-boarding-pass-code>{from.code}</div>                    {from.city != null && <div.ui-boarding-pass-city>{from.city}</div>}                    {departs != null && <div.ui-boarding-pass-time><span.ui-sr>Departs </span>{departs}</div>}                </div>                <span.ui-boarding-pass-plane aria-hidden="true">                    <svg viewBox="0 0 24 24" fill="currentColor"><path d="M21 16v-2l-8-5V3.5a1.5 1.5 0 0 0-3 0V9l-8 5v2l8-2.5V19l-2 1.5V22l3.5-1 3.5 1v-1.5L13 19v-5.5l8 2.5Z"/></svg>                </span>                <div.ui-boarding-pass-to>                    <div.ui-boarding-pass-code>{to.code}</div>                    {to.city != null && <div.ui-boarding-pass-city>{to.city}</div>}                    {arrives != null && <div.ui-boarding-pass-time><span.ui-sr>Arrives </span>{arrives}</div>}                </div>            </div>            <dl.ui-boarding-pass-grid>                <div.ui-boarding-pass-wide><dt>Passenger</dt><dd>{passenger}</dd></div>                {boarding_pass_cell("Flight", flight)}                {date != null && <div.ui-boarding-pass-wide><dt>Date</dt><dd><time datetime={str(date)}>{boarding_pass_date(date)}</time></dd></div>}                {boarding_pass_cell("Boarding", boarding)}                {boarding_pass_cell("Gate", gate)}                {boarding_pass_cell("Seat", seat)}                {boarding_pass_cell("Group", group)}                {boarding_pass_cell("Terminal", terminal)}            </dl>            <div.ui-boarding-pass-bars>                {/* No children is null, whose text is not "": ask for both. */}                {children != null && str(children) != "" ? children : <div.ui-boarding-pass-bars-fake aria-hidden="true"></div>}            </div>        </div>        <div.ui-boarding-pass-stub aria-label="Stub">            <div.ui-boarding-pass-stub-route>{from.code} → {to.code}</div>            <div.ui-boarding-pass-stub-name>{passenger}</div>            <dl.ui-boarding-pass-grid>                {boarding_pass_cell("Flight", flight)}                {boarding_pass_cell("Seat", seat)}                {boarding_pass_cell("Gate", gate)}                {boarding_pass_cell("Boarding", boarding)}                {boarding_pass_cell("Ref", record)}            </dl>        </div>    </article>}