Copy 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>var days = [].slice.call(document.querySelectorAll("[data-day]")); var start = document.getElementById("boundaryStart"); var end = document.getElementById("boundaryEnd"); function minutes(value) { var parts = value.split(":"); return Number(parts[0]) * 60 + Number(parts[1]); } function renderBoundary() { var startPercent = minutes(start.value) / 1440 * 100; var width = Math.max(0, (minutes(end.value) - minutes(start.value)) / 1440 * 100); document.getElementById("boundaryTimeline").innerHTML = days.map(function (day, index) { var active = day.getAttribute("data-active") !== "false" && index < 5; return '<div class="flex items-center gap-3"><span class="w-6 text-[10px] text-white/35">' + ["M", "T", "W", "T", "F", "S", "S"][index] + '</span><div class="relative h-2 flex-1 rounded-full bg-white/10">' + (active ? '<span class="absolute h-full rounded-full bg-emerald-400" style="left:' + startPercent + '%;width:' + width + '%"></span>' : '') + '</div></div>'; }).join(""); var count = days.filter(function (day, index) { return day.getAttribute("data-active") !== "false" && index < 5; }).length; document.getElementById("boundarySummary").textContent = "Routine notifications arrive " + count + " days a week between " + start.value + " and " + end.value + "."; } days.forEach(function (day, index) { day.setAttribute("data-active", index < 5 ? "true" : "false"); day.addEventListener("click", function () { var active = day.getAttribute("data-active") === "true"; day.setAttribute("data-active", String(!active)); day.className = !active ? "h-9 w-9 rounded-lg bg-neutral-900 text-xs text-white" : "h-9 w-9 rounded-lg bg-neutral-100 text-xs text-neutral-400"; renderBoundary(); }); }); start.addEventListener("input", renderBoundary); end.addEventListener("input", renderBoundary); renderBoundary(); 