Parking meter toast
The needle of a chrome parking meter drops into the red zone; adding half an hour swings it back toward green with a bounce.
Settings
Code
<div class="uvq09-prk"><button type="button" class="fire">Show again</button><div class="tt" role="status"><span class="mt" aria-hidden="true"><span class="dl"><i class="nd"></i></span><b>P</b></span><span class="tx"><b>Your parking is about to run out</b><small><span class="n">10</span> min left · Blue zone</small></span><button type="button" class="ad">+30 min</button></div></div>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 Toasts
See all ToastsWhere to use it
Parking apps warn about expiring time with plain text, yet everyone knows what a meter needle in the red means. This toast draws a chrome meter head with a domed window, a green, amber and red arc made with a conic gradient, and a needle that rotates with a springy curve. Each tap on the add button moves it back and updates the minutes.
The main color is the P badge and button, the second the red zone and low time warning. Map minutes to angles in the small set function, cap the maximum stay, and the button disables itself when the meter is full.