Option 1 · Bottom sheet keypadStyle: the heat strip on top, the wave-1 tactile keys shrunk into a phone sheet · Components: heat strip, frosted bottom sheet, 4-across 44 px keys grouped Morning / Afternoon / Evening, sticky group labels, summary in words · Art: none · Motion: the sheet rises 300 ms, keys sink + light up, the sheet closes itself 260 ms after the tap · Material: raised keys, frosted sticky labels over the scrolling keys (glass only over moving content)
24 half-hour starts 10:00–21:30 · one tap commits and closes (rule 16) · booked = struck sunk <span>, too short = dashed <span>, both with the reason in words · position:sticky labels on a blur(18px) tintOption 2 · Popover under the dayStyle: calm, anchored, the calendar opens where you tapped · Components: heat strip, a card that drops in under the chosen week with an arrow at the day, each hour as one pill holding its two half-hours, the booked ranges in one sentence · Art: none · Motion: the card grows from its arrow (scale .96 → 1 + fade, 180 ms) · Material: flat card, hairline split between the halves
card = grid-column 1 / -1 after the chosen row · arrow at (col + .5) / 7 of the width, mirrors in RTL · 3 pills a row (2 in Arabic, where «12:30 م» needs the room) · 48 px halvesOption 3 · WheelStyle: an iOS-style start-time wheel in a sheet, the price beside it · Components: scroll-snap wheel (half-hour steps), earlier / later buttons, a length stepper, ends-at and price, one solid "Set" button · Art: none · Motion: native snap, the band stays still, the price updates on settle · Material: sunken wheel well, tactile Set button
scroll-snap-type: y mandatory; booked and too-short rows carry no snap point, so the wheel skips them and shows them struck · up/down buttons are the non-drag path (WCAG 2.5.7) · a wheel needs a confirm, so this is the one option with a Set buttonOption 4 · Two-tierStyle: 12 big hour keys that open into their two half-hours · Components: floating sheet, hour keys with "2 free / 1 free / Booked", a half-hour row that opens under the tapped hour · Art: none · Motion: the half-hour row drops in 180 ms, the chosen half lights, the sheet closes · Material: raised keys, the open hour outlined, the chosen half tactile blue
12 keys instead of 24 keep the grid small · aria-expanded on the hour key · an hour with no start left is a <span> with its reason · halves show the full range ("12:30–14:30")Option 5 · Timeline stripStyle: a ruler of the day, no sheet · Components: heat strip, a horizontal half-hour ruler, free time as light bars, booked as dark gaps with the word, length chips, the session drawn as a blue range · Art: the ruler is the art · Motion: the range grows from its start tick (scaleX, 260 ms), the ruler scrolls to it · Material: flat, sunken ruler well
scroll-snap-type: x proximity · ticks are 56 px buttons (64 in Arabic) · bars placed with inset-inline-start, so the day runs right to left in Arabic · range = transform: scaleX from the start edge