// @requirements REQ-PRODUCT-BUNDLE-BUDGET // @requirements REQ-PRODUCT-MOBILE REQ-PRODUCT-A11Y REQ-PRODUCT-CONSENT-RUNTIME import {renderLegalLinks} from 'notabenda'; const e=value=>String(value).replace(/[&<>"']/gu,c=>({'&':'&','<':'<','>':'>','"':'"',"'":'''}[c])); const leaf=''; const icon=(kind)=>kind==='measurement'?'':''; export function renderChoicesPage(config,{dark=false,notice}={}){ const recorded=!!notice;let links=renderLegalLinks(config);if(recorded)for(const kind of ['privacy','cookies','terms'])links=links.replaceAll(`href="${e(config.documents[kind].route)}"`,`href="${e(kind==='terms'?`/artifacts/${notice.artifactId}/terms.html`:notice.documents[kind].url)}"`); return `Juniper Notes · Your choicesSkip to content
${leaf}juniper/notes

NOTABENDA PLAYGROUND / ${recorded?'RECORDED CHOICES':'COOKIE CHOICES'}

Try cookie
choices

Allow Measurement or Suggestions and watch their status below. Open preferences to change or withdraw your choice.

How it works

Optional services run locally.

LIVE IN THIS BROWSER

Service status

Optional features are waiting for your permission.

${icon('measurement')}

Measurement

A local measurement service.

Blocked
${icon('suggestions')}

Suggestions

A local personalization service.

Blocked

Sample requests started

Only after an effective grant · this visit
0
${recorded?'Grants wait for an acknowledged record.':'Your preference stays in this browser.'}

01 / Cookie consent exampleVANILLA CONTROLS OPTIONAL STYLES

SERVICE LIFECYCLE

How this example works

Both sample services run on this site. Their status follows the consent controller.

  1. 01

    Services start blocked

    Both sample services wait. Declining leaves them off.

  2. 02

    Choose purposes individually

    Allow either purpose, both, or neither. The live panel follows your actual choices.

  3. 03

    Change or withdraw a choice

    Reopen preferences to change or withdraw. The services stop and their declared sample items are removed.

${recorded?'

HOST-RECEIVED REPORTS

Your recording status

Checking saved choices…

Inspect the recorded context

Follow the notice, choice and receipt in your workspace.

':''}

THEMES

Try the other theme

The same controls use different color tokens in each theme. You can replace the optional stylesheet.

${recorded?'Explore the local-only midnight example':`Explore ${dark?'the light':'midnight'}`}
`; }