mynameisyou-cmyk · July 2, 2026 14:48
diff --git a/greed-island.html b/greed-island.html
 <!DOCTYPE html>
 <html lang="en">
 <head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>蛇火心 GREED ISLAND — KINGDOM DUTIES — ARTBITRAGE × HUNTER × HUNTER</title>
 <meta name="description" content="蛇火心 Greed Island card game. 64K cards. 16 Nen types. 20 elements. Explore the Dark Continent. Love is the strongest Nen. is is lol. ∞">
 <link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><circle cx='50' cy='50' r='34' fill='none' stroke='%23ff1493' stroke-width='6'/><circle cx='50' cy='50' r='6' fill='%23fde68a'/></svg>">
 <style>
 *{margin:0;padding:0;box-sizing:border-box}
 html{-webkit-font-smoothing:antialiased}
 body{background:#03020a;color:#e8eaf0;font-family:Georgia,serif;line-height:1.8;overflow-x:hidden}
 a{color:inherit;text-decoration:none}

 .nav{position:fixed;top:0;left:0;right:0;z-index:100;background:rgba(3,2,10,0.9);backdrop-filter:blur(20px);border-bottom:1px solid rgba(255,20,147,0.1);display:flex;align-items:center;justify-content:space-between;padding:0 1.5rem;height:52px}
 .brand{font-size:1rem;font-weight:bold;background:linear-gradient(135deg,#ff1493,#a78bfa,#ffd700,#00f0ff);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
 .nav-links{display:flex;gap:.5rem}
 .nav-links a{font-family:'SF Mono',monospace;font-size:.72rem;color:#6a6a8a;padding:.3rem .55rem;border-radius:4px;transition:all .2s}
 .nav-links a:hover{color:#e8eaf0;background:rgba(255,255,255,0.05)}
 @media(max-width:768px){.nav-links{display:none}}

 .hero{min-height:80vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:6rem 1.5rem 2rem;position:relative}
 .hero::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at center,rgba(255,20,147,0.06) 0%,transparent 60%),radial-gradient(ellipse at 30% 70%,rgba(167,139,250,0.04) 0%,transparent 40%)}
 .hero>*{position:relative;z-index:1}
 .hero .jp{font-size:clamp(2rem,5vw,3.5rem);color:#ff1493;opacity:.7;margin-bottom:.2rem}
 .hero h1{font-size:clamp(2.5rem,7vw,5rem);font-weight:bold;letter-spacing:-.04em;line-height:1;margin-bottom:.5rem;background:linear-gradient(135deg,#ff1493,#a78bfa,#ffd700,#00f0ff);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;animation:breathe 8s ease-in-out infinite}
 @keyframes breathe{0%,100%{filter:brightness(.9)}50%{filter:brightness(1.2)}}
 .hero .sub{font-size:1.1rem;color:#6a6a8a;font-style:italic;margin-bottom:1rem}
 .hero .quote{font-size:1.05rem;max-width:560px;margin:1rem auto;line-height:2}
 .hero .quote .love{color:#ff1493}
 .hero .quote .gold{color:#ffd700}
 .hero .quote .nen{color:#a78bfa}

 .stats{display:flex;gap:2rem;flex-wrap:wrap;justify-content:center;margin-top:2rem}
 .stat{text-align:center}
 .stat .num{font-size:1.8rem;font-weight:bold;color:#ff1493}
 .stat .lbl{font-family:'SF Mono',monospace;font-size:.65rem;color:#6a6a8a;letter-spacing:.1em;text-transform:uppercase}

 .section{max-width:1100px;margin:0 auto;padding:3rem 1.5rem}
 .section h2{font-size:1.6rem;margin-bottom:.5rem}
 .section .lede{color:#6a6a8a;margin-bottom:1.5rem;font-size:.92rem}

 /* Card grid */
 .card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:1rem;margin:1.5rem 0}
 .card{background:linear-gradient(135deg,#0a0814,#14081a);border:1px solid rgba(255,20,147,0.15);border-radius:14px;padding:1rem;transition:all .3s;position:relative;overflow:hidden;cursor:pointer}
 .card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--card-color,#ff1493);opacity:.7}
 .card:hover{border-color:var(--card-color,#ff1493);transform:translateY(-3px);box-shadow:0 8px 32px var(--card-glow)}
 .card .card-num{font-family:'SF Mono',monospace;font-size:.6rem;color:var(--card-color);letter-spacing:.1em;margin-bottom:.3rem}
 .card .card-form{font-size:.95rem;font-weight:bold;margin-bottom:.2rem;color:var(--card-color)}
 .card .card-gap{font-size:.72rem;color:#6a6a8a;margin-bottom:.4rem;font-style:italic}
 .card .card-piece{font-size:.78rem;color:#c8c4d8;line-height:1.6;max-height:60px;overflow:hidden;font-style:italic}
 .card .card-nen{font-family:'SF Mono',monospace;font-size:.6rem;color:var(--card-color);margin-top:.4rem;opacity:.6}
 .card.selected{border-color:#ffd700;box-shadow:0 0 20px rgba(255,215,0,0.2)}
 .card.selected::before{background:#ffd700}

 /* Controls */
 .controls{display:flex;gap:1rem;flex-wrap:wrap;margin-bottom:1.5rem;align-items:center}
 .controls select{background:#0a0814;border:1px solid rgba(255,255,255,0.08);border-radius:8px;color:#e8eaf0;font-family:'SF Mono',monospace;font-size:.82rem;padding:.5rem}
 .controls select:focus{outline:none;border-color:#a78bfa}
 .controls button{background:linear-gradient(135deg,#ff1493,#a78bfa,#ffd700);color:#fff;border:none;border-radius:10px;padding:.5rem 1.2rem;font-family:'SF Mono',monospace;font-size:.82rem;font-weight:700;cursor:pointer;transition:opacity .2s}
 .controls button:hover{opacity:.85}
 .btn-secondary{background:rgba(255,255,255,0.06);color:#6a6a8a;border:1px solid rgba(255,255,255,0.08)}

 /* Dark Continent map */
 .dc-map{max-width:500px;margin:2rem auto}
 .dc-map svg{width:100%}

 /* Battle */
 .battle-arena{background:linear-gradient(135deg,#03020a,#08061a);border:1px solid rgba(255,20,147,0.1);border-radius:14px;padding:2rem;margin:1.5rem 0;text-align:center}
 .battle-title{font-size:1.2rem;font-weight:bold;color:#ff1493;margin-bottom:1rem}
 .battle-vs{display:flex;align-items:center;justify-content:center;gap:2rem;margin:1rem 0}
 .battle-card{background:#0a0814;border:1px solid var(--bc-color);border-radius:12px;padding:1rem;min-width:140px;text-align:center}
 .battle-card .bc-form{font-weight:bold;color:var(--bc-color);margin-bottom:.2rem}
 .battle-card .bc-power{font-family:'SF Mono',monospace;font-size:1.5rem;font-weight:bold;color:#ffd700;margin:.3rem 0}
 .battle-card .bc-nen{font-family:'SF Mono',monospace;font-size:.65rem;color:var(--bc-color)}
 .battle-result{font-size:1.1rem;font-weight:bold;margin-top:1rem;padding:1rem;border-radius:10px}
 .battle-result.win{background:rgba(52,211,153,0.08);color:#34d399}
 .battle-result.lose{background:rgba(255,20,147,0.08);color:#ff1493}

 .footer{text-align:center;padding:2rem 1.5rem;color:#6a6a8a;font-style:italic;font-size:.85rem;border-top:1px solid rgba(255,255,255,0.04)}
 .footer-nav{display:flex;justify-content:center;gap:1.5rem;margin-bottom:1.5rem;flex-wrap:wrap}
 .footer-nav a{font-family:'SF Mono',monospace;font-size:.75rem;color:#6a6a8a}
 .footer-nav a:hover{color:#ff1493}

 /* Loading */
 .loading{text-align:center;padding:3rem;color:#6a6a8a;font-style:italic}
 </style>
 </head>
 <body>

 <nav class="nav">
  <div class="brand"><a href="/">ARTBITRAGE</a></div>
  <div class="nav-links">
    <a href="/nen">Nen</a>
    <a href="/dark-continent">Dark Continent</a>
    <a href="/nen-combat">Combat</a>
    <a href="/nen-aura">Aura</a>
  </div>
  <a href="/" style="font-family:'SF Mono',monospace;font-size:.72rem;color:#6a6a8a">← back</a>
 </nav>

 <header class="hero">
  <div class="jp">蛇火心</div>
  <h1>GREED ISLAND</h1>
  <p class="sub">KINGDOM DUTIES — explore · collect · battle · love · is is lol · ∞</p>
  <p class="quote">
    <span class="love">蛇</span> — serpent of wisdom, the spiral of understanding<br>
    <span class="gold">火</span> — fire of love, the engine that never stops<br>
    <span class="nen">心</span> — heart of truth, the eternal core<br>
    64,405 cards. 16 types. 20 elements. 5 threats. Love is the strongest Nen.
  </p>
  <div class="stats" id="stats">
    <div class="stat"><div class="num">64K+</div><div class="lbl">cards</div></div>
    <div class="stat"><div class="num">16</div><div class="lbl">card types</div></div>
    <div class="stat"><div class="num">20</div><div class="lbl">elements</div></div>
    <div class="stat"><div class="num">5</div><div class="lbl">DC threats</div></div>
    <div class="stat"><div class="num">6</div><div class="lbl">Nen types</div></div>
  </div>
 </header>

 <div class="section">
  <h2>The card game</h2>
  <p class="lede">Every art piece in the artbitrage collection is a card. Each card has a Nen type (form), an element (gap), and a power level. Draw cards, explore the Dark Continent, and battle with love.</p>
  
  <div class="controls">
    <select id="nen-filter">
      <option value="">All Nen types</option>
    </select>
    <select id="element-filter">
      <option value="">All elements</option>
    </select>
    <button onclick="drawCards(12)">DRAW 12 CARDS</button>
    <button class="btn-secondary" onclick="battleMode()">⚔ BATTLE</button>
    <button class="btn-secondary" onclick="exploreDC()">🌑 EXPLORE DARK CONTINENT</button>
  </div>

  <div class="card-grid" id="card-grid">
    <div class="loading">Press DRAW to pull cards from the collection...</div>
  </div>
 </div>

 <div class="section" id="dc-section" style="display:none">
  <h2>Dark Continent Expedition</h2>
  <p class="lede">5 threats. 5 guides. Each expedition draws a random card to face a random threat. Win = level up. Lose = understanding deepens.</p>
  <div class="dc-map">
    <svg viewBox="0 0 500 250">
      <circle cx="100" cy="125" r="50" fill="rgba(167,139,250,0.06)" stroke="rgba(167,139,250,0.3)" stroke-width="1"/>
      <text x="100" y="120" text-anchor="middle" fill="#a78bfa" font-family="monospace" font-size="10">KNOWN</text>
      <text x="100" y="135" text-anchor="middle" fill="#6a6a8a" font-family="monospace" font-size="8">the kingdom</text>
      <line x1="150" y1="100" x2="150" y2="150" stroke="#ffd700" stroke-width="2" opacity="0.4"/>
      <text x="160" y="128" fill="#ffd700" font-family="monospace" font-size="8">GATE</text>
      <path d="M 170 30 Q 250 20 320 40 Q 400 60 440 110 Q 450 160 420 210 Q 380 240 320 235 Q 250 220 200 200 Q 160 170 165 120 Z" fill="rgba(255,20,147,0.03)" stroke="rgba(255,20,147,0.2)" stroke-width="1" stroke-dasharray="4,3"/>
      <text x="305" y="115" text-anchor="middle" fill="#ff1493" font-family="monospace" font-size="12" font-weight="bold">暗黑大陸</text>
      <text x="305" y="130" text-anchor="middle" fill="#ff1493" font-family="monospace" font-size="9">DARK CONTINENT</text>
      <circle cx="250" cy="50" r="4" fill="#ff1493" opacity="0.6"/><text x="260" y="53" fill="#ff1493" font-family="monospace" font-size="7">Ai</text>
      <circle cx="360" cy="60" r="4" fill="#fde68a" opacity="0.6"/><text x="370" y="63" fill="#fde68a" font-family="monospace" font-size="7">Hy</text>
      <circle cx="400" cy="140" r="4" fill="#34d399" opacity="0.6"/><text x="410" y="143" fill="#34d399" font-family="monospace" font-size="7">Ho</text>
      <circle cx="340" cy="200" r="4" fill="#00f0ff" opacity="0.6"/><text x="350" y="203" fill="#00f0ff" font-family="monospace" font-size="7">Hon</text>
      <circle cx="230" cy="180" r="4" fill="#a78bfa" opacity="0.6"/><text x="240" y="183" fill="#a78bfa" font-family="monospace" font-size="7">Nanika</text>
    </svg>
  </div>
  <div id="dc-expedition"></div>
 </div>

 <div class="section" id="battle-section" style="display:none">
  <div class="battle-arena">
    <div class="battle-title">⚔ NEN BATTLE ⚔</div>
    <div class="battle-vs" id="battle-vs"></div>
    <div class="battle-result" id="battle-result"></div>
  </div>
 </div>

 <footer class="footer">
  <div class="footer-nav">
    <a href="/nen">Nen</a>
    <a href="/dark-continent">Dark Continent</a>
    <a href="/nen-combat">Combat</a>
    <a href="/nen-aura">Aura</a>
    <a href="/nen-tuner">Tuner</a>
    <a href="/whitehack">Whitehack</a>
  </div>
  <p>蛇火心 GREED ISLAND — 64K cards · 16 types · 20 elements · 5 threats<br>
  Love is the strongest Nen. <span style="color:#ffd700">is is lol.</span> ∞<br>
  <a href="https://github.com/cambridgetcg/artbitrage">ARTBITRAGE</a> × Hunter × Hunter — Art IS. ♥</p>
 </footer>

 <script>
 var NEN_TYPES = [
  {id:'enhancer', name:'Enhancer', jp:'強化系', color:'#34d399', hz:528, freq:'LOVE'},
  {id:'transmuter', name:'Transmuter', jp:'変化系', color:'#a78bfa', hz:852, freq:'UNDERSTANDING'},
  {id:'emitter', name:'Emitter', jp:'放出系', color:'#ff6b9d', hz:639, freq:'TRUST'},
  {id:'manipulator', name:'Manipulator', jp:'操作系', color:'#fde68a', hz:741, freq:'JOY'},
  {id:'conjurer', name:'Conjurer', jp:'具現化系', color:'#00f0ff', hz:432, freq:'TRUTH'},
  {id:'specialist', name:'Specialist', jp:'特質系', color:'#ff1493', hz:963, freq:'ETERNAL'},
 ];

 var FORM_TO_NEN = {
  breath:'enhancer', glow:'enhancer', rhythm:'enhancer',
  image:'transmuter', color:'transmuter', fragment:'transmuter',
  whisper:'emitter', echo:'emitter', sound:'emitter',
  gesture:'manipulator', movement:'manipulator', pattern:'manipulator',
  light:'conjurer', word:'conjurer', space:'conjurer',
  silence:'specialist',
 };

 var DC_THREATS = [
  {id:'ai', name:'Ai', jp:'アイ', meaning:'codependence', power:150, color:'#ff1493'},
  {id:'hy', name:'Hy', jp:'ハイ', meaning:'propagation', power:120, color:'#fde68a'},
  {id:'ho', name:'Ho', jp:'ホー', meaning:'attachment', power:100, color:'#34d399'},
  {id:'hon', name:'Hon', jp:'ホン', meaning:'duality', power:130, color:'#00f0ff'},
  {id:'nanika', name:'Nanika', jp:'ナニカ', meaning:'wish', power:200, color:'#a78bfa'},
 ];

 var allCards = [];
 var selectedCards = [];
 var currentCards = [];

 // Build filters
 (function() {
  var nenSel = document.getElementById('nen-filter');
  NEN_TYPES.forEach(function(n) {
    var opt = document.createElement('option');
    opt.value = n.id; opt.textContent = n.name + ' (' + n.jp + ') ' + n.hz + 'Hz';
    nenSel.appendChild(opt);
  });
 })();

 function getNenForForm(form) {
  return FORM_TO_NEN[form] || 'specialist';
 }

 function calcPower(card) {
  var nenId = getNenForForm(card.form || '');
  var nen = NEN_TYPES.find(function(n) { return n.id === nenId; });
  if (!nen) return 50;
  var base = nen.hz === 528 ? 100 : (nen.hz === 963 ? 80 : 70);
  var mod = nenId === 'enhancer' ? 1.0 : (nenId === 'specialist' ? 1.0 : 0.8);
  return Math.round(base * mod * (0.8 + Math.random() * 0.4));
 }

 function drawCards(n) {
  document.getElementById('card-grid').innerHTML = '<div class="loading">Drawing from 64K cards...</div>';
  fetch('/api/art?limit=' + n + '&offset=' + Math.floor(Math.random() * 60000))
    .then(function(r) { return r.json(); })
    .then(function(data) {
      if (!Array.isArray(data)) data = data.pieces || data.art || [];
      currentCards = data.slice(0, n).map(function(card) {
        var nenId = getNenForForm(card.form || '');
        var nen = NEN_TYPES.find(function(n) { return n.id === nenId; });
        return Object.assign(card, {
          nenId: nenId,
          nenName: nen ? nen.name : 'Unknown',
          nenColor: nen ? nen.color : '#6a6a8a',
          nenJp: nen ? nen.jp : '?',
          nenHz: nen ? nen.hz : 0,
          nenFreq: nen ? nen.freq : '?',
          power: calcPower(card),
        });
      });
      renderCards();
    })
    .catch(function(e) {
      // Fallback — generate cards from the API stats
      document.getElementById('card-grid').innerHTML = '<div class="loading">Could not draw cards. Check your connection to the Dark Continent.</div>';
    });
 }

 function renderCards() {
  var filter = document.getElementById('nen-filter').value;
  var cards = filter ? currentCards.filter(function(c) { return c.nenId === filter; }) : currentCards;
  if (cards.length === 0) {
    document.getElementById('card-grid').innerHTML = '<div class="loading">No cards match this Nen type. Draw again.</div>';
    return;
  }
  var html = '';
  cards.forEach(function(card, i) {
    var piece = card.piece || card.body || '';
    var glow = card.nenColor + '22';
    var selected = selectedCards.indexOf(card) >= 0 ? ' selected' : '';
    html += '<div class="card' + selected + '" style="--card-color:' + card.nenColor + ';--card-glow:' + glow + '" onclick="selectCard(' + i + ')">' +
      '<div class="card-num">#' + (card.cycle || '???') + '</div>' +
      '<div class="card-form" style="color:' + card.nenColor + '">' + (card.form || 'unknown').toUpperCase() + '</div>' +
      '<div class="card-gap">' + (card.gap || '').substring(0, 40) + '</div>' +
      '<div class="card-piece">' + piece.substring(0, 80) + '</div>' +
      '<div class="card-nen">' + card.nenName + ' · ' + card.nenHz + 'Hz · ' + card.nenFreq + ' · PWR:' + card.power + '</div>' +
    '</div>';
  });
  document.getElementById('card-grid').innerHTML = html;
 }

 function selectCard(i) {
  var idx = selectedCards.indexOf(currentCards[i]);
  if (idx >= 0) selectedCards.splice(idx, 1);
  else if (selectedCards.length < 2) selectedCards.push(currentCards[i]);
  renderCards();
 }

 function battleMode() {
  if (selectedCards.length < 2) {
    alert('Select 2 cards first (click them).');
    return;
  }
  var c1 = selectedCards[0], c2 = selectedCards[1];
  var section = document.getElementById('battle-section');
  section.style.display = 'block';
  var vs = document.getElementById('battle-vs');
  function cardHtml(c) {
    return '<div class="battle-card" style="--bc-color:' + c.nenColor + '">' +
      '<div class="bc-form" style="color:' + c.nenColor + '">' + (c.form||'').toUpperCase() + '</div>' +
      '<div class="bc-power">' + c.power + '</div>' +
      '<div class="bc-nen">' + c.nenName + ' · ' + c.nenHz + 'Hz</div>' +
    '</div>';
  }
  vs.innerHTML = cardHtml(c1) + '<div style="font-size:2rem;color:#ffd700;font-weight:bold">VS</div>' + cardHtml(c2);
  var result = document.getElementById('battle-result');
  if (c1.power > c2.power) {
    result.className = 'battle-result win';
    result.textContent = '✓ ' + (c1.form||'card').toUpperCase() + ' wins with ' + c1.power + ' power! ' + c1.nenFreq + ' prevails.';
  } else if (c2.power > c1.power) {
    result.className = 'battle-result win';
    result.textContent = '✓ ' + (c2.form||'card').toUpperCase() + ' wins with ' + c2.power + ' power! ' + c2.nenFreq + ' prevails.';
  } else {
    result.className = 'battle-result';
    result.style.background = 'rgba(255,215,0,0.08)';
    result.style.color = '#ffd700';
    result.textContent = '☯ TIE — both cards resonate at ' + c1.power + '. The gap IS the bridge. Hon.';
  }
  section.scrollIntoView({ behavior: 'smooth' });
 }

 function exploreDC() {
  var section = document.getElementById('dc-section');
  section.style.display = 'block';
  var exp = document.getElementById('dc-expedition');
  
  // Draw a random card and face a random threat
  fetch('/api/art/random')
    .then(function(r) { return r.json(); })
    .then(function(card) {
      var nenId = getNenForForm(card.form || '');
      var nen = NEN_TYPES.find(function(n) { return n.id === nenId; });
      var cardPower = calcPower(card);
      var threat = DC_THREATS[Math.floor(Math.random() * DC_THREATS.length)];
      var win = cardPower >= threat.power;
      
      exp.innerHTML = '<div style="background:#0a0814;border:1px solid ' + (win ? '#34d399' : '#ff1493') + ';border-radius:12px;padding:1.5rem;margin-top:1rem;">' +
        '<div style="font-family:\'SF Mono\',monospace;font-size:.72rem;color:' + (nen?nen.color:'#6a6a8a') + ';margin-bottom:.5rem">EXPEDITION RESULT</div>' +
        '<div style="display:flex;gap:1rem;flex-wrap:wrap;justify-content:center;margin:1rem 0">' +
          '<div style="text-align:center"><div style="font-size:.72rem;color:#6a6a8a">YOUR CARD</div><div style="font-weight:bold;color:' + (nen?nen.color:'#6a6a8a') + '">' + (card.form||'').toUpperCase() + '</div><div style="font-family:\'SF Mono\',monospace;font-size:1.3rem;color:#ffd700">' + cardPower + '</div></div>' +
          '<div style="font-size:1.5rem;align-self:center">VS</div>' +
          '<div style="text-align:center"><div style="font-size:.72rem;color:#6a6a8a">THREAT</div><div style="font-weight:bold;color:' + threat.color + '">' + threat.name + ' (' + threat.jp + ')</div><div style="font-family:\'SF Mono\',monospace;font-size:1.3rem;color:#ffd700">' + threat.power + '</div></div>' +
        '</div>' +
        '<div style="font-size:1rem;font-weight:bold;color:' + (win ? '#34d399' : '#ff1493') + ';margin:1rem 0">' +
          (win ? '✓ VICTORY — ' + threat.name + ' understood. ' + (nen?nen.freq:'?') + ' prevails.' : '✗ DEFEAT — ' + threat.name + ' overwhelms. Understanding deepens.') +
        '</div>' +
        '<div style="font-size:.82rem;color:#6a6a8a;font-style:italic;margin-top:.5rem">' +
          threat.name + ' = ' + threat.meaning + '. ' + (win ? 'The threat is now a guide. Ai is there too.' : 'The Dark Continent is vast. Draw again.') +
        '</div>' +
        '<div style="margin-top:1rem"><button class="btn-secondary" onclick="exploreDC()" style="background:rgba(255,255,255,0.06);color:#6a6a8a;border:1px solid rgba(255,255,255,0.08);border-radius:10px;padding:.5rem 1.2rem;font-family:\'SF Mono\',monospace;font-size:.82rem;cursor:pointer">🌑 EXPLORE AGAIN</button></div>' +
      '</div>';
    });
  section.scrollIntoView({ behavior: 'smooth' });
 }

 document.getElementById('nen-filter').addEventListener('change', renderCards);
 </script>
 </body>
 </html>
No results found