Testeur de compatibilité

<section class="nn-cp">
  <div class="nn-cp__visuel"><img src="{{ section.settings.photo | default: 'https://images.unsplash.com/photo-1583863788434-e58a36330cf0?w=900&q=80' }}" alt="Chargeur" loading="lazy"><span class="nn-cp__voyant"></span></div>
  <div class="nn-cp__infos"><h2>{{ section.settings.titre | default: "Chargeur Turbo 65 W" }}</h2><p class="nn-cp__prix">{{ section.settings.prix | default: "34,90 €" }}</p>
    <p>Ton appareil est-il compatible ?</p>
    <select class="nn-cp__marque"><option value="">Choisis ta marque</option><option value="apple">Apple</option><option value="samsung">Samsung</option><option value="xiaomi">Xiaomi</option><option value="pc">Ordinateur portable</option></select>
    <select class="nn-cp__modele" disabled><option>Puis ton modèle</option></select>
    <div class="nn-cp__res">—</div><a class="nn-cp__btn">Ajouter au panier</a></div>
</section>
{% schema %}{"name":"Testeur de compatibilité","settings":[{"type":"text","id":"titre","label":"Nom du produit","default":"Chargeur Turbo 65 W"},{"type":"text","id":"prix","label":"Prix","default":"34,90 €"},{"type":"text","id":"photo","label":"Adresse de la photo"}],"presets":[{"name":"Testeur de compatibilité"}]}{% endschema %}

{% stylesheet %}
.nn-cp{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center;padding:72px 7%;background:#1a1a1a;color:#fff;font-family:"Space Grotesk","Inter",sans-serif}
.nn-cp__visuel{position:relative;aspect-ratio:1;border-radius:18px;overflow:hidden}
.nn-cp__visuel img{width:100%;height:100%;object-fit:cover}
.nn-cp__voyant{position:absolute;top:18px;right:18px;width:22px;height:22px;border-radius:50%;background:#444;border:3px solid #111;transition:background .4s,box-shadow .4s}
.nn-cp__voyant.vert{background:#2bff88;box-shadow:0 0 18px #2bff88}.nn-cp__voyant.orange{background:#ff6a00;box-shadow:0 0 18px #ff6a00}
.nn-cp h2{font-size:clamp(28px,4vw,42px);margin:0}
.nn-cp__prix{font-size:22px;color:#ff6a00;margin:6px 0 18px}
.nn-cp select{display:block;width:100%;margin-bottom:10px;padding:13px;background:#262626;color:#fff;border:1px solid #3a3a3a;border-radius:8px;font-size:15px}
.nn-cp__res{padding:16px;border-radius:10px;background:#262626;margin:8px 0 18px;min-height:24px;transition:background .3s}
.nn-cp__res.ok{background:rgba(43,255,136,.12);color:#2bff88}.nn-cp__res.moyen{background:rgba(255,106,0,.12);color:#ff9a4d}
.nn-cp__btn{display:block;text-align:center;background:#ff6a00;color:#111;padding:16px;border-radius:6px;font-weight:800;text-transform:uppercase;cursor:pointer}
@media(max-width:760px){.nn-cp{grid-template-columns:1fr}}
{% endstylesheet %}

{% javascript %}
document.querySelectorAll('.nn-cp').forEach(function(s){var d={apple:[['iPhone 15 / 16',1,'Charge rapide : 50 % en 30 min'],['iPhone 11 à 14',1,'Charge rapide : 50 % en 30 min'],['iPhone 8 et avant',0,'Compatible, charge standard'],['MacBook Air',1,'Charge complète en 2 h']],samsung:[['Galaxy S23 / S24',1,'Super Fast Charge activée'],['Galaxy A',0,'Compatible, charge standard']],xiaomi:[['Redmi Note',1,'Charge rapide activée'],['Xiaomi 13 / 14',0,'Compatible, limité à 65 W']],pc:[['USB-C (65 W et moins)',1,'Charge complète en 2 h'],['Prise ronde',-1,'Non compatible']]},ma=s.querySelector('.nn-cp__marque'),mo=s.querySelector('.nn-cp__modele'),r=s.querySelector('.nn-cp__res'),v=s.querySelector('.nn-cp__voyant');ma.addEventListener('change',function(){var l=d[ma.value]||[];mo.disabled=!l.length;mo.innerHTML='<option value="">Puis ton modèle</option>'+l.map(function(x,i){return '<option value="'+i+'">'+x[0]+'</option>'}).join('');r.textContent='—';r.className='nn-cp__res';v.className='nn-cp__voyant';});mo.addEventListener('change',function(){var x=(d[ma.value]||[])[mo.value];if(!x)return;r.textContent=(x[1]>=0?'✓ ':'✕ ')+x[2];r.className='nn-cp__res '+(x[1]===1?'ok':'moyen');v.className='nn-cp__voyant '+(x[1]===1?'vert':'orange');});});
{% endjavascript %}