<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width,initial-scale=1" />
  <title>Rotating Virtual Card Template</title>
  <style>
    :root{
      --card-w:360px;
      --card-h:220px;
      --radius:14px;
      font-family:Inter, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
    }
    body{display:flex;align-items:center;justify-content:center;min-height:100vh;margin:0;background:linear-gradient(180deg,#081022 0%, #07121a 100%);color:#eef2f7}
    .wrap{display:flex;gap:24px;align-items:center;flex-direction:column}
    .card-scene{width:var(--card-w);height:var(--card-h);perspective:1400px}

    .card{
      width:100%;height:100%;border-radius:var(--radius);position:relative;transform-style:preserve-3d;transition:transform 700ms cubic-bezier(.2,.9,.25,1);cursor:pointer;box-shadow:0 18px 40px rgba(3,8,15,.6);
    }

    .face{position:absolute;inset:0;border-radius:var(--radius);backface-visibility:hidden;overflow:hidden;display:flex;flex-direction:column}
    .front{transform:rotateY(0deg);z-index:2}
    .back{transform:rotateY(180deg);align-items:center;justify-content:center;padding:20px}

    .card.brand-visa .front{background:linear-gradient(120deg,#0052a5 0%, #00a1ff 100%);}
    .card.brand-master .front{background:linear-gradient(120deg,#ff6b6b 0%, #ffbf69 100%);}
    .card.brand-discover .front{background:linear-gradient(120deg,#ff8a00 0%, #ff4e00 100%);}

    .card .chip{width:56px;height:40px;background:linear-gradient(180deg,#f1f2f3,#d6d8da);border-radius:6px;margin:18px 20px 0 20px;box-shadow:inset 0 -3px 6px rgba(0,0,0,.08)}
    .card .brand{margin-left:auto;margin-right:20px;margin-top:18px}
    .card .brand svg{width:60px;height:36px}

    .card .card-body{flex:1;padding:12px 20px 18px 20px;display:flex;flex-direction:column;justify-content:flex-end}
    .card .number{font-size:20px;letter-spacing:2px;margin-bottom:8px;font-weight:600}
    .card .meta{display:flex;justify-content:space-between;align-items:center}
    .card .name{font-size:13px;text-transform:uppercase;opacity:.95}
    .card .expires{font-size:13px;opacity:.9}

    .back .magstripe{height:46px;background:linear-gradient(180deg,#0b0b0b,#0e0e0e);width:100%;border-radius:4px}
    .back .sig{margin-top:18px;background:#fff;border-radius:6px;padding:6px 10px;width:65%;display:flex;align-items:center;justify-content:flex-end}
    .cvv{background:#eee;padding:4px 10px;border-radius:6px;margin-left:10px;font-weight:700}

    .controls{display:flex;gap:10px;align-items:center}
    .btn{background:transparent;border:1px solid rgba(255,255,255,.12);color:inherit;padding:8px 12px;border-radius:8px;cursor:pointer}
    .btn:active{transform:translateY(1px)}

    @media (max-width:420px){:root{--card-w:320px;--card-h:200px}}
  </style>
</head>
<body>
  <div class="wrap">
    <div class="card-scene">
      <div id="card" class="card brand-visa" tabindex="0">
        <!-- FRONT -->
        <div class="face front">
          <div style="display:flex;align-items:center">
            <div class="chip"></div>
            <div class="brand" id="brandLogoFront"></div>
          </div>
          <div class="card-body">
            <div class="number" id="cardNumber">4242 4242 4242 4242</div>
            <div class="meta">
              <div class="name" id="cardHolder">K S FINANCE LTD</div>
              <div class="expires" id="cardExpire">12/29</div>
            </div>
          </div>
        </div>
        <!-- BACK -->
        <div class="face back">
          <div class="magstripe"></div>
          <div style="display:flex;align-items:center;width:100%;margin-top:16px">
            <div class="sig">Signature <span style="opacity:.5;margin-left:8px;font-size:12px">K S</span></div>
            <div style="margin-left:auto;display:flex;align-items:center">CVV <div class="cvv" id="cvvValue">123</div></div>
          </div>
        </div>
      </div>
    </div>

    <div class="controls">
      <button id="visaBtn" class="btn">Visa</button>
      <button id="masterBtn" class="btn">MasterCard</button>
      <button id="discoverBtn" class="btn">Discover</button>
    </div>
    <small style="opacity:.8">Click the card to rotate (front/back). Use buttons to switch card brand.</small>
  </div>

  <script>
    const brands = {
      visa: {
        class: 'brand-visa',
        logo: '<svg viewBox="0 0 100 32"><text x="8" y="22" font-family="Arial" font-size="14" font-weight="700" fill="#fff">VISA</text></svg>',
        number: '4242 4242 4242 4242', holder: 'K S FINANCE LTD', expire: '12/29', cvv: '123'
      },
      master: {
        class: 'brand-master',
        logo: '<svg viewBox="0 0 100 32"><circle cx="34" cy="16" r="11" fill="#ff5f5f"/><circle cx="52" cy="16" r="11" fill="#ffbf69"/><text x="66" y="22" font-family="Arial" font-size="12" font-weight="700" fill="#fff">Master</text></svg>',
        number: '5555 6666 7777 8884', holder: 'KS CAPITAL', expire: '08/27', cvv: '456'
      },
      discover: {
        class: 'brand-discover',
        logo: '<svg viewBox="0 0 110 32"><text x="8" y="20" font-family="Arial" font-size="14" font-weight="700" fill="#fff">DISCOVER</text></svg>',
        number: '6011 0009 9013 9424', holder: 'HORIZON CREDIT', expire: '03/30', cvv: '789'
      }
    };

    const card = document.getElementById('card');
    const brandLogoFront = document.getElementById('brandLogoFront');
    const cardNumber = document.getElementById('cardNumber');
    const cardHolder = document.getElementById('cardHolder');
    const cardExpire = document.getElementById('cardExpire');
    const cvvValue = document.getElementById('cvvValue');

    function setBrand(type){
      const b = brands[type];
      card.className = 'card ' + b.class;
      brandLogoFront.innerHTML = b.logo;
      cardNumber.textContent = b.number;
      cardHolder.textContent = b.holder;
      cardExpire.textContent = b.expire;
      cvvValue.textContent = b.cvv;
    }

    document.getElementById('visaBtn').onclick = ()=>setBrand('visa');
    document.getElementById('masterBtn').onclick = ()=>setBrand('master');
    document.getElementById('discoverBtn').onclick = ()=>setBrand('discover');

    // Default brand
    setBrand('visa');

    // Flip on click
    card.addEventListener('click', ()=>{
      card.style.transform = card.style.transform.includes('180deg') ? 'rotateY(0deg)' : 'rotateY(180deg)';
    });

    card.addEventListener('keydown',(e)=>{if(e.key==='Enter'||e.key===' '){e.preventDefault();card.click();}});
  </script>
</body>
</html>