Set working hours and escalation exceptions up front
Create a notification-boundaries onboarding step with Tailwind CSS. Include timezone, weekday working hours, quiet-hour preview, channel preferences, and a critical-alert exception. Show a weekly timeline that visualizes active and quiet periods. Add JavaScript that updates the timeline from start and end times, toggles weekdays, and summarizes the chosen boundaries before continuing.
.
Create a notification-boundaries onboarding step with Tailwind CSS. Include timezone, weekday working hours, quiet-hour preview, channel preferences, and a critical-alert exception. Show a weekly timeline that visualizes active and quiet periods. Add JavaScript that updates the timeline from start and end times, toggles weekdays, and summarizes the chosen boundaries before continuing.<div class="mx-auto max-w-3xl p-6"><section class="rounded-3xl border border-neutral-200 bg-white p-6 shadow-sm md:p-8"><p class="text-xs font-semibold uppercase tracking-wider text-neutral-400">Step 4 of 6</p><h1 class="mt-3 text-2xl font-semibold text-neutral-900">Protect your focus time</h1><p class="mt-2 text-sm text-neutral-500">We will hold routine notifications outside the schedule you choose.</p><div class="mt-7 grid gap-6 md:grid-cols-2"><div class="space-y-5"><label class="block text-sm font-medium text-neutral-700">Timezone<select class="mt-1.5 w-full rounded-xl border border-neutral-200 px-3 py-2.5"><option>Europe/Bratislava · UTC+2</option></select></label><div><p class="text-sm font-medium text-neutral-700">Working days</p><div id="boundaryDays" class="mt-2 flex gap-1"><button data-day class="h-9 w-9 rounded-lg bg-neutral-900 text-xs text-white">M</button><button data-day class="h-9 w-9 rounded-lg bg-neutral-900 text-xs text-white">T</button><button data-day class="h-9 w-9 rounded-lg bg-neutral-900 text-xs text-white">W</button><button data-day class="h-9 w-9 rounded-lg bg-neutral-900 text-xs text-white">T</button><button data-day class="h-9 w-9 rounded-lg bg-neutral-900 text-xs text-white">F</button><button data-day class="h-9 w-9 rounded-lg bg-neutral-100 text-xs text-neutral-400">S</button><button data-day class="h-9 w-9 rounded-lg bg-neutral-100 text-xs text-neutral-400">S</button></div></div><div class="grid grid-cols-2 gap-3"><label class="text-sm font-medium text-neutral-700">Start<input id="boundaryStart" type="time" value="09:00" class="mt-1.5 w-full rounded-xl border border-neutral-200 px-3 py-2.5" /></label><label class="text-sm font-medium text-neutral-700">Finish<input id="boundaryEnd" type="time" value="17:30" class="mt-1.5 w-full rounded-xl border border-neutral-200 px-3 py-2.5" /></label></div><label class="flex items-center justify-between rounded-xl border border-neutral-200 p-3"><span><b class="block text-sm">Critical incidents</b><small class="text-neutral-400">Allow pager alerts at any time</small></span><input type="checkbox" checked class="h-4 w-4" /></label></div><div class="rounded-2xl bg-neutral-950 p-5 text-white"><p class="text-xs uppercase tracking-wider text-white/40">Weekly preview</p><div id="boundaryTimeline" class="mt-5 space-y-2"></div><p id="boundarySummary" class="mt-5 text-xs leading-5 text-white/50"></p></div></div><div class="mt-7 flex justify-between border-t border-neutral-100 pt-5"><button class="text-sm text-neutral-500">Back</button><button class="rounded-xl bg-neutral-900 px-5 py-2.5 text-sm font-medium text-white">Save boundaries</button></div></section></div>Create a notification-boundaries onboarding step with Tailwind CSS. Include timezone, weekday working hours, quiet-hour preview, channel preferences, and a critical-alert exception. Show a weekly timeline that visualizes active and quiet periods. Add JavaScript that updates the timeline from start and end times, toggles weekdays, and summarizes the chosen boundaries before continuing.