/* The in-browser POS demo's own sheet, on top of site.css. * * Everything inside the device is the **POS's own palette rather than the site's** — navy chrome, * blue tiles, the gold PAY. That is deliberate: the page around it is the neutral catalogue ground * the rest of the site uses, and the product is the one coloured thing on it. A demo repainted in * the website's colours would be a picture of a different app. The values are the ones MainActivity * actually draws with: 23,33,43 ink, 19,42,58 totals band, 23,107,135 tabs, 255,199,89 PAY. * * **Every rule for the screen's inside is scoped under `.pos-screen`, and that is load-bearing.** * This sheet wants short names — .row, .grid, .line, .amt — and site.css already owns several of * them: `.row` is the feature-row component with a 52px top margin, which landed on the totals band * and spread it down the panel. Scoping makes that class of collision impossible rather than * renaming one class and waiting for the next. */ .demo-wrap{margin-top:clamp(24px,4vw,44px)} /* The frame, outside the screen. A drawn bezel, flat like everything else here — no shadow. --bezel rather than --ink: a tablet's bezel is black on a dark page as much as on a light one, and --ink is the *text* colour, which inverts. Nothing inside .pos-screen takes a theme at all. The POS has its own palette and does not have a website's light and dark modes; repainting the product to match the page it is embedded in would be showing a device nobody has. */ /* The hairline is the system's one depth cue, and here it is doing real work: on the dark theme a black bezel on a near-black page has no edge at all and the device stops being an object. */ .pos{max-width:1060px;margin:0 auto;padding:12px;border-radius:18px;background:var(--bezel); border:1px solid var(--hairline)} .pos-screen{border-radius:8px;overflow:hidden;background:#F4F7F9; display:grid;grid-template-rows:auto 1fr auto;min-height:560px} /* ---- header ---------------------------------------------------------------------------------- */ .pos-screen .pos-top{display:flex;align-items:center;gap:12px;padding:9px 14px;background:#17212B;color:#fff} .pos-screen .pos-top .mark{width:22px;height:22px;flex:0 0 auto} .pos-screen .pos-top b{font-size:.95rem;font-weight:700;letter-spacing:-.01em} .pos-screen .pos-top .who{font-size:.72rem;color:#96B4C7;margin-left:2px} .pos-screen .pos-top .clock{margin-left:auto;font-size:.8rem;font-variant-numeric:tabular-nums; text-align:right;line-height:1.2;white-space:pre-line} /* ---- body: the order on the left, the catalogue or the payment panel on the right -------------- */ .pos-screen .pos-body{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.55fr);gap:10px;padding:10px} @media (max-width:820px){.pos-screen .pos-body{grid-template-columns:1fr}} .pos-screen .order{display:flex;flex-direction:column;background:#fff;border:1px solid #DCE4EA; border-radius:6px;overflow:hidden} .pos-screen .order .lines{flex:1;overflow-y:auto;min-height:0} .pos-screen .order .empty{padding:56px 18px;text-align:center;color:#7C8791;font-size:.9rem;line-height:1.6} /* Three columns, not two: name / quantity / amount. As two, the third child wrapped onto a second row and stretched across the panel as an empty white bar. */ .pos-screen .line{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:10px;align-items:center; padding:9px 12px;border-bottom:1px solid #EDF1F4} .pos-screen .line .nm{font-size:.86rem;font-weight:600;color:#17212B} .pos-screen .line .ea{display:block;font-size:.74rem;color:#7C8791;font-weight:400;margin-top:1px} .pos-screen .line .amt{font-size:.9rem;font-weight:700;color:#17212B;font-variant-numeric:tabular-nums; min-width:62px;text-align:right} .pos-screen .line .qty{display:inline-flex;align-items:center;border:1px solid #DCE4EA;border-radius:5px; overflow:hidden} .pos-screen .line .qty button{width:26px;height:26px;border:0;background:#F4F7F9;color:#17212B;font:inherit; font-size:.95rem;line-height:1;cursor:pointer} .pos-screen .line .qty button:hover{background:#E3ECF1} .pos-screen .line .qty span{min-width:26px;text-align:center;font-size:.82rem;font-weight:700; font-variant-numeric:tabular-nums} /* ---- the totals band, which is the POS's own dark panel ---------------------------------------- */ .pos-screen .totals{background:#132A3A;color:#fff;padding:11px 14px} .pos-screen .totals .row{display:flex;justify-content:space-between;gap:14px;font-size:.78rem; padding:3px 0;margin:0;color:#B9CBD8} .pos-screen .totals .row b{font-weight:600;font-variant-numeric:tabular-nums} .pos-screen .totals .row.off b{color:#FFC759} .pos-screen .totals .rule{height:1px;background:#2A4459;margin:7px 0} .pos-screen .totals .grand{display:flex;align-items:baseline;justify-content:space-between;gap:14px} .pos-screen .totals .grand span{font-size:1rem;font-weight:800;letter-spacing:.02em} .pos-screen .totals .grand b{font-size:1.5rem;font-weight:800;font-variant-numeric:tabular-nums} .pos-screen .totals .qty{font-size:.7rem;color:#8FA9BC;margin-top:5px;letter-spacing:.02em} /* ---- the catalogue ----------------------------------------------------------------------------- */ .pos-screen .pos-right{display:flex;flex-direction:column;gap:8px;min-height:430px} .pos-screen .tabs-row{display:flex;gap:6px} .pos-screen .tabs-row span{padding:7px 16px;border-radius:5px;font-size:.82rem;font-weight:700; background:#C9D6DE;color:#44515E} .pos-screen .tabs-row span.on{background:#176B87;color:#fff} .pos-screen .tabs-row .hint{margin-left:auto;align-self:center;font-size:.75rem;color:#7C8791; font-weight:400;background:none;padding:0} .pos-screen .grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;flex:1;align-content:start} @media (max-width:520px){.pos-screen .grid{grid-template-columns:repeat(2,minmax(0,1fr))}} .pos-screen .grid button{padding:14px 10px;border:0;border-radius:6px;background:#2F7FA8;color:#fff; font:inherit;font-size:.86rem;font-weight:700;line-height:1.25;cursor:pointer; min-height:74px;display:flex;flex-direction:column;justify-content:center; gap:4px;transition:background .12s} .pos-screen .grid button:hover{background:#276F94} .pos-screen .grid button:active{opacity:.6} .pos-screen .grid button i{font-style:normal;font-weight:500;font-size:.8rem;opacity:.85; font-variant-numeric:tabular-nums} /* ---- the bar under the grid -------------------------------------------------------------------- */ .pos-screen .acts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) 1.1fr;gap:8px} .pos-screen .acts button{border:0;border-radius:6px;padding:12px 8px;font:inherit;font-size:.82rem; font-weight:700;cursor:pointer;color:#fff;background:#5C6874;transition:opacity .12s} .pos-screen .acts button:active{opacity:.6} .pos-screen .acts button.void{background:#9D3030} .pos-screen .acts button.pay{background:#FFC759;color:#17212B;font-size:1.15rem;font-weight:800; letter-spacing:.04em} .pos-screen .acts button:disabled{opacity:.4;cursor:not-allowed} /* ---- the payment panel, which replaces the catalogue exactly as it does on the POS -------------- */ .pos-screen .pay-panel{display:flex;flex-direction:column;gap:10px;background:#fff;border:1px solid #DCE4EA; border-radius:6px;padding:14px} .pos-screen .pay-panel h4{margin:0;font-size:.95rem;font-weight:700;color:#17212B} .pos-screen .pay-panel .owed{font-size:.8rem;color:#7C8791;margin:2px 0 0} .pos-screen .pay-panel .owed b{color:#17212B;font-size:1.15rem;font-variant-numeric:tabular-nums} .pos-screen .methods{display:grid;grid-template-columns:1fr 1fr;gap:8px} .pos-screen .methods button{padding:18px 10px;border:0;border-radius:6px;background:#176B87;color:#fff; font:inherit;font-size:.95rem;font-weight:700;cursor:pointer} .pos-screen .methods button:hover{background:#12586F} .pos-screen .pad{display:grid;grid-template-columns:repeat(3,1fr);gap:6px} .pos-screen .pad button{padding:13px 0;border:1px solid #DCE4EA;border-radius:6px;background:#fff; color:#17212B;font:inherit;font-size:1.05rem;font-weight:700;cursor:pointer; font-variant-numeric:tabular-nums} .pos-screen .pad button:hover{background:#F4F7F9} .pos-screen .keyed{padding:12px 14px;border-radius:6px;background:#132A3A;color:#fff;text-align:right; font-size:1.6rem;font-weight:800;font-variant-numeric:tabular-nums} .pos-screen .quick{display:flex;flex-wrap:wrap;gap:6px} .pos-screen .quick button{padding:7px 12px;border:1px solid #DCE4EA;border-radius:999px;background:#fff; color:#17212B;font:inherit;font-size:.8rem;font-weight:600;cursor:pointer} .pos-screen .pay-go{display:flex;gap:8px;margin-top:auto} .pos-screen .pay-go button{flex:1;padding:13px;border:0;border-radius:6px;font:inherit;font-size:.92rem; font-weight:700;cursor:pointer;background:#FFC759;color:#17212B} .pos-screen .pay-go button.back{background:#C9D6DE;color:#44515E;flex:0 0 34%} .pos-screen .pay-go button:disabled{opacity:.4;cursor:not-allowed} .pos-screen .waiting{padding:34px 10px;text-align:center;color:#5C6874;font-size:.9rem;line-height:1.7} .pos-screen .waiting .dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:#176B87; margin:0 3px;animation:posblink 1.1s ease-in-out infinite} .pos-screen .waiting .dot:nth-child(2){animation-delay:.18s} .pos-screen .waiting .dot:nth-child(3){animation-delay:.36s} @keyframes posblink{0%,100%{opacity:.25}50%{opacity:1}} /* ---- the receipt, shown when the sale lands ----------------------------------------------------- */ .pos-screen .slip{background:#fff;border:1px solid #DCE4EA;border-radius:6px;padding:16px 18px; display:flex;flex-direction:column;gap:8px;overflow-y:auto} .pos-screen .slip h4{margin:0;font-size:1rem;font-weight:800;color:#17212B} .pos-screen .slip .no{font-size:.75rem;color:#7C8791;font-variant-numeric:tabular-nums} .pos-screen .slip .sec{margin-top:5px;font-size:.68rem;font-weight:800;letter-spacing:.08em;color:#7C8791} .pos-screen .slip .r{display:flex;justify-content:space-between;gap:12px;font-size:.83rem;color:#17212B; font-variant-numeric:tabular-nums} .pos-screen .slip .r span:first-child{color:#5C6874} .pos-screen .slip .r.big{font-size:1.05rem;font-weight:800;padding-top:5px;border-top:1px solid #EDF1F4} .pos-screen .slip .r.change b{color:#0B7A45} /* ---- the footer strip inside the device --------------------------------------------------------- */ .pos-screen .pos-foot{display:flex;justify-content:space-between;gap:12px;padding:6px 14px; background:#EDF1F4;font-size:.68rem;color:#7C8791} /* ---- what the demo leaves out, said under it rather than pretended away -------------------------- */ .demo-note{margin-top:clamp(20px,3vw,32px);padding:18px 20px;border:1px solid var(--hairline); background:var(--soft-cloud);max-width:74ch} .demo-note b{display:block;margin-bottom:6px;font-size:.9rem;font-weight:700} .demo-note p{margin:0;font-size:.9rem;color:var(--mute);line-height:1.6} .demo-note .go{margin-top:14px} /* ---- the sign-in gate --------------------------------------------------------------------------- One column down the left carrying everything that identifies the tablet — brand, clock, padlock, who was last on — and the pad on the right. That is the real gate's arrangement: a header across the top with a two-column body under it put all of that as far from the lock as the screen allows. The PIN *is* the name. There is no list of staff to tap, because a list is the half a shop does not want on a screen customers can see, and a salted PIN is checked against every stored hash. */ .pos-screen .pos-body.gate{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);align-items:stretch} .pos-screen .gate-side{display:flex;flex-direction:column;align-items:center;justify-content:center; gap:10px;background:#17212B;color:#fff;border-radius:6px;padding:22px 16px} .pos-screen .gate-brand{font-size:1rem;font-weight:700;letter-spacing:-.01em} .pos-screen .gate-clock{font-size:1.5rem;font-weight:700;font-variant-numeric:tabular-nums;color:#96B4C7} .pos-screen .gate-lock{margin:6px 0} .pos-screen .gate-lock svg{width:44px;height:44px;fill:none;stroke:#FFC759;stroke-width:1.5; stroke-linecap:round;stroke-linejoin:round} .pos-screen .gate-last{font-size:.72rem;color:#8FA9BC;text-align:center} .pos-screen .gate-main{display:flex;flex-direction:column;align-items:center;justify-content:center; gap:10px;background:#fff;border:1px solid #DCE4EA;border-radius:6px;padding:20px} .pos-screen .gate-main h4{margin:0;font-size:1rem;font-weight:700;color:#17212B} .pos-screen .gate-dots{display:flex;gap:12px} .pos-screen .gate-dots span{width:13px;height:13px;border-radius:50%;border:1.5px solid #A9B7C2} .pos-screen .gate-dots span.on{background:#17212B;border-color:#17212B} .pos-screen .gate-msg{font-size:.78rem;color:#7C8791;min-height:1.2em} .pos-screen .gate-msg.bad{color:#9D3030;font-weight:600} .pos-screen .gate-pad{width:min(250px,100%)} .pos-screen .gate-pad span{display:block} /* ---- the header's way into the drawer ------------------------------------------------------------ */ .pos-screen .top-btn{margin-left:auto;display:grid;place-items:center;width:30px;height:30px;padding:0; border:0;border-radius:5px;background:#28394A;color:#fff;cursor:pointer} .pos-screen .top-btn svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.6; stroke-linecap:round;stroke-linejoin:round} .pos-screen .top-btn:hover{background:#33485C} .pos-screen .top-btn[hidden]{display:none} .pos-screen .pos-top .clock{margin-left:10px} /* ---- counting the drawer ------------------------------------------------------------------------- A row per denomination with one pad beside them, rather than eleven focusable fields on a touch screen — which is eleven chances to key a number into the wrong line. */ .pos-screen .sheet{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px} .pos-screen .sheet-row{display:grid;grid-template-columns:auto 1fr auto;gap:8px;align-items:center; padding:6px 9px;border:1px solid #DCE4EA;border-radius:5px;background:#fff; font:inherit;font-size:.8rem;cursor:pointer;text-align:left} .pos-screen .sheet-row.on{border-color:#176B87;background:#EAF3F7} .pos-screen .sheet-row .d{font-weight:700;color:#17212B;font-variant-numeric:tabular-nums;min-width:44px} .pos-screen .sheet-row .c{text-align:center;font-weight:700;color:#176B87;font-variant-numeric:tabular-nums} .pos-screen .sheet-row .x{color:#7C8791;font-variant-numeric:tabular-nums} .pos-screen .count-sum{background:#132A3A;color:#fff;border-radius:6px;padding:10px 13px} .pos-screen .count-sum .r{display:flex;justify-content:space-between;gap:12px;font-size:.78rem; padding:2px 0;color:#B9CBD8;font-variant-numeric:tabular-nums} .pos-screen .count-sum .r.big{font-size:1rem;font-weight:800;color:#fff;padding-top:6px; margin-top:4px;border-top:1px solid #2A4459} .pos-screen .count-sum .r.ok b{color:#5FD39B} .pos-screen .count-sum .r.off b{color:#FFC759}