Structured data

<div class="schema"><div class="product"><small>VISIBLE PAGE</small><b>Field notebook</b><strong>$24</strong></div><div class="equals" id="equals">≠</div><div class="code"><small>JSON-LD</small><code>name: Field notebook<br>price: <span id="price">29</span></code></div><button id="match">MATCH FACTS</button></div>

.schema{display:flex;align-items:center;justify-content:center;gap:clamp(7px,2vmin,20px);position:relative;width:94%;padding-bottom:clamp(25px,5vmin,42px);font:800 clamp(10px,max(1.7vmin,1vw),15px) sans-serif;color:var(--fg)}.product,.code{display:grid;gap:clamp(7px,1.3vmin,12px);padding:clamp(10px,2vmin,19px);border:1px solid var(--line);background:var(--surface);min-width:29%}.product small,.code small{color:var(--accent);font-size:max(10px,1vw,.7em);letter-spacing:.1em}.product strong{font-size:clamp(16px,3vmin,27px)}.code code{font:700 clamp(10px,max(1.5vmin,1vw),13px)/1.6 monospace}.equals{font-size:clamp(25px,5vmin,46px);color:var(--accent)}.schema button{position:absolute;bottom:0;background:var(--fg);color:var(--bg);border:0;padding:6px 12px;font:inherit;cursor:pointer}@media(min-width:700px){body > :not(script){zoom:1.55}.map,.feed,.linkmap{height:48%}}

const price=document.querySelector('#price'),equals=document.querySelector('#equals'),button=document.querySelector('#match');let match=false;function show(){price.textContent=match?'24':'29';equals.textContent=match?'=':'≠';equals.style.color=match?'var(--accent-2)':'var(--accent)'}button.addEventListener('click',()=>{clearInterval(timer);match=!match;show()});const timer=setInterval(()=>{match=!match;show()},2600);