مولّد بانر الكوكيز بالذكاء الاصطناعي.

Create a cookie consent bar fixed to the bottom of the viewport: a short line explaining that non-essential cookies are used for analytics, a link to the cookie policy, and two buttons — Accept all and Reject non-essential — rendered with identical size, contrast and padding so neither is visually demoted. Render it in a region with role="region" and an accessible name, do not trap focus, and place it last in the DOM so it does not sit ahead of the page content in tab order. Persist the decision under a versioned key in localStorage with a timestamp, and keep the bar hidden on every later visit until that version changes. Load no analytics script before a decision exists.

Create a cookie consent panel with four categories: Necessary (locked on, with a note explaining it cannot be disabled), Functional, Analytics and Marketing, each a labelled switch with a one-sentence description of what it enables. Every non-essential switch defaults to off. Provide Accept all, Reject all and Save preferences, with Accept all and Reject all identical in weight. Store the result as an object keyed by category alongside a schema version and timestamp, and emit a consent-changed event so tag loading can react without a page reload. Keep the switches keyboard operable with visible focus rings and expose state through aria-checked rather than colour alone.

Create a centered cookie consent modal with a dimmed backdrop: heading, two sentences of explanation, a cookie policy link, and Accept all, Reject all and Manage preferences buttons with the first two given equal visual weight. Use role="dialog" with aria-modal="true", label it by its heading, move focus to the heading on open, cycle Tab within the dialog, and do not close on Escape or backdrop click since either would leave consent undecided. Persist the choice in a versioned localStorage record with a timestamp and render nothing on subsequent visits. Do not pre-tick any non-essential category, and gate every non-essential script behind the stored value.

Create a cookie consent card anchored to the bottom-left corner, roughly 360px wide, with a cookie icon, a two-line explanation, a policy link and stacked Accept all and Reject all buttons of matching width and contrast. It must not overlap other fixed UI, so offset it above any support launcher. Do not include a bare X dismiss control — a close button that leaves consent unrecorded means the banner returns on every navigation. Render it after the main landmark in the DOM, keep it out of any focus trap, and persist the decision in a versioned localStorage entry with a timestamp so it stays hidden once answered.

Create a cookie consent bar plus a persistent Cookie preferences button for the site footer that reopens the same panel with the stored values pre-loaded, so a visitor can withdraw consent as easily as they gave it. The panel lists Necessary, Functional, Analytics and Marketing switches with non-essential ones reflecting whatever was saved, and offers Accept all, Reject all and Save preferences. On reopen, move focus to the panel heading and return focus to the footer button on close. Write changes to the same versioned localStorage key with a fresh timestamp and emit a consent-changed event so already-loaded tags can be told to stop.

Create a consent component that takes a region prop resolved server-side from the request and renders one of two variants: a full category panel with all non-essential switches defaulting to off and Accept all, Reject all and Save preferences of equal weight, or a lighter notice with an acknowledge action and a link to a cookie settings page. Never pre-tick a non-essential category in either variant. Store the decision with the region and a schema version so the record explains which variant produced it, and re-prompt when the version changes. Keep the region check server-side so no tracking script loads before the variant is known.