Date calendar · 5 options
Option 1 · 14-day stripStyle: Swiss minimal, monochrome + one blue · Components: day-card strip, next-open link, summary · Art: none · Motion: native swipe with snap, press 0.97, light-up 400 ms · Material: flat cards, glow on the chosen day
flex + scroll-snap-type:x mandatory · edge mask flips with :dir · Mon 19 is a <button> (carries "next open"), Sun is a <span>
Option 2 · Month grid, flatStyle: calm Swiss grid · Components: month grid, availability bar per day, arrows, legend · Art: none · Motion: press 0.97, hex ripple, light-up · Material: flat, no card
CSS grid 7 × 1fr, cells 50 × 52 · bar width = free hours / 12 · booked, past and closed days are <span> · arrows scaleX(-1) in RTL
Option 3 · Glass sheetStyle: Apple-style sheet over the real room · Components: frosted bottom sheet, drag handle, month grid, solid confirm · Art: the real Aura photo (no stock) · Motion: sheet rises 400 ms, drag to close · Material: frosted glass (A4) on media only, tactile four-shadow confirm
backdrop-filter: blur(18px) saturate(160%) over a 72 % surface tint that passes on its own · @supports fallback to solid · pointer-drag translateY
Option 4 · Heat stripStyle: the house HeatmapCalendar, three weeks · Components: tinted day grid, ramp legend, next-open link · Art: demand as tint only · Motion: press 0.97, hex ripple, light-up · Material: flat tints of one blue
background: color-mix(in srgb, var(--primary) 8–60 %, var(--surface)) per day · ink text passes 8:1 at the darkest step, both themes
Option 5 · Tactile dialStyle: light-modelled hardware keys · Components: 7 day keys + a next-week key, LED · Art: none · Motion: keys sink 1 px + 0.97 on press, light up on select · Material: raised four-shadow keys (dark: lighter fill + border), the chosen key is the tactile blue
inset top light + inset bottom shade + contact + drop shadow · pressed = inset swap · closed/full keys sunk as <span> · a white LED glows on the lit key