Compass rose orientation filter
A parchment compass with eight sectors: mark which way the home faces and the needle swings over with a spring.
Settings
Code
<fieldset class="uvq05-cp"><legend>Orientation</legend><div class="rs"><div class="dl"><label style="--i:0"><input type="checkbox" aria-label="North"><span class="w"></span></label><label style="--i:1"><input type="checkbox" aria-label="Northeast"><span class="w"></span></label><label style="--i:2"><input type="checkbox" aria-label="East" checked><span class="w"></span></label><label style="--i:3"><input type="checkbox" aria-label="Southeast" checked><span class="w"></span></label><label style="--i:4"><input type="checkbox" aria-label="South" checked><span class="w"></span></label><label style="--i:5"><input type="checkbox" aria-label="Southwest"><span class="w"></span></label><label style="--i:6"><input type="checkbox" aria-label="West"><span class="w"></span></label><label style="--i:7"><input type="checkbox" aria-label="Northwest"><span class="w"></span></label></div><svg class="st" viewBox="0 0 100 100" aria-hidden="true"><path d="M50 50L60 40L50 4L40 40z" fill="#7a5a2a"/><path d="M50 50L60 60L50 96L40 60z" fill="#7a5a2a"/><path d="M50 50L60 40L96 50L60 60z" fill="#a9844a"/><path d="M50 50L40 40L4 50L40 60z" fill="#a9844a"/><path d="M50 50l6-6 18-18-24 12zM50 50l6 6 18 18-24-12zM50 50l-6 6-18 18 24-12zM50 50l-6-6-18-18 24 12z" fill="#c9a86a" opacity=".8"/></svg><span class="cd cn" aria-hidden="true">North</span><span class="cd ce" aria-hidden="true">East</span><span class="cd cs" aria-hidden="true">South</span><span class="cd cw" aria-hidden="true">West</span><span class="nd" aria-hidden="true"></span><span class="hub" aria-hidden="true"></span></div><p class="ct"><span>Orientations:</span> <span class="n"></span></p></fieldset>Prompt for AI
Paste it into ChatGPT, Claude or Cursor and it will adapt the block to your project with these settings, even if you don’t use React.
More in Filters
See all FiltersWhere to use it
Orientation matters when people look for homes, terraces or solar panels, and a compass shows it better than a list of words. Eight checkbox wedges are clipped into a circle on a parchment dial with a degree ring, and each pick fills its sector from the centre while the needle turns by the shortest route.
The first colour fills the chosen sectors and the needle tip, the second sets the parchment. Keep the cardinal words short in other languages, and also show the selected orientations beside the results as plain text.