<div id="igCardTool">

  <style>

    #igCardTool {

      font-family: Arial, sans-serif;

      max-width: 520px;

      margin: 20px auto;

      color: #111;

    }

    #igCardTool * { box-sizing: border-box; }

    #igCardTool .ig-input {

      width: 100%;

      padding: 12px;

      margin: 6px 0 12px;

      border: 1px solid #ddd;

      border-radius: 8px;

      font-size: 15px;

    }

    #igCardTool .ig-label {

      font-weight: 600;

      font-size: 14px;

    }

    #igCardTool .ig-btn {

      padding: 12px 16px;

      border: 0;

      border-radius: 8px;

      background: #c13584;

      color: white;

      font-weight: bold;

      cursor: pointer;

      margin: 4px 2px;

    }

    #igCardTool .ig-card {

      margin: 18px 0;

      padding: 25px 18px;

      border-radius: 18px;

      color: white;

      text-align: center;

      background: linear-gradient(135deg,#833ab4,#fd1d1d,#fcb045);

      box-shadow: 0 5px 18px #0002;

      overflow-wrap: anywhere;

    }

    #igCardTool .ig-photo {

      width: 88px;

      height: 88px;

      border-radius: 50%;

      object-fit: cover;

      border: 3px solid white;

      background: #fff;

    }

    #igCardTool .ig-name {

      font-size: 23px;

      font-weight: bold;

      margin: 12px 0 6px;

    }

    #igCardTool .ig-handle {

      font-size: 15px;

      margin-bottom: 10px;

    }

    #igCardTool .ig-bio {

      font-size: 14px;

      line-height: 1.6;

      white-space: pre-wrap;

    }

    #igCardTool .ig-tag {

      display: inline-block;

      margin-top: 16px;

      padding: 9px 18px;

      background: white;

      color: #c13584;

      border-radius: 25px;

      font-weight: bold;

      text-decoration: none;

    }

    @media print {

      body * { visibility: hidden; }

      #igCardTool #igPreview,

      #igCardTool #igPreview * { visibility: visible; }

      #igCardTool #igPreview {

        position: absolute;

        left: 0; top: 0; width: 100%;

      }

      #igCardTool .ig-card { box-shadow: none; }

    }

  </style>

  <h2>Instagram Visiting Card Maker</h2>

  <p>Create your own Instagram profile card.</p>

  <label class="ig-label">Your Name</label>

  <input class="ig-input" id="igName" placeholder="Enter your name"

         oninput="igUpdate()">

  <label class="ig-label">Instagram Username</label>

  <input class="ig-input" id="igUser" placeholder="yourusername"

         oninput="igUpdate()">

  <label class="ig-label">Your Bio</label>

  <textarea class="ig-input" id="igBio" rows="3"

            placeholder="Creator | Blogger | Business"

            oninput="igUpdate()"></textarea>

  <label class="ig-label">Profile Photo</label>

  <input class="ig-input" id="igPhoto" type="file"

         accept="image/*" onchange="igUpload(this)">

  <label class="ig-label">Card Style</label>

  <select class="ig-input" id="igStyle" onchange="igUpdate()">

    <option value="gradient">Instagram Gradient</option>

    <option value="dark">Premium Black</option>

    <option value="light">Clean White</option>

    <option value="pink">Pink Modern</option>

  </select>

  <div id="igPreview">

    <div class="ig-card" id="igCard">

      <img id="igAvatar" class="ig-photo"

           src="https://placehold.co/200x200/e8e8e8/555?text=Photo"

           alt="Profile photo">

      <div class="ig-name" id="igOutName">Your Name</div>

      <div class="ig-handle" id="igOutUser">@yourusername</div>

      <div class="ig-bio" id="igOutBio">Creator | Blogger | Business</div>

      <a class="ig-tag" id="igProfile" href="https://www.instagram.com/"

         target="_blank" rel="noopener">View Instagram Profile</a>

    </div>

  </div>

  <button type="button" class="ig-btn" onclick="igDownload()">

    Download Card

  </button>

  <button type="button" class="ig-btn"

          onclick="window.print()">Print Card</button>

  <script>

    (function () {

      const root = document.getElementById('igCardTool');

      const $ = id => root.querySelector('#' + id);

      window.igUpdate = function () {

        const name = $('igName').value.trim() || 'Your Name';

        const raw = $('igUser').value.trim().replace(/^@+/, '');

        const user = raw || 'yourusername';

        $('igOutName').textContent = name;

        $('igOutUser').textContent = '@' + user;

        $('igOutBio').textContent =

          $('igBio').value || 'Creator | Blogger | Business';

        const styles = {

          gradient: ['linear-gradient(135deg,#833ab4,#fd1d1d,#fcb045)', '#fff'],

          dark: ['#171717', '#fff'],

          light: ['#fff', '#222'],

          pink: ['linear-gradient(135deg,#ff758c,#ff7eb3)', '#fff']

        };

        const style = styles[$('igStyle').value] || styles.gradient;

        $('igCard').style.background = style[0];

        $('igCard').style.color = style[1];

        $('igTagColor');

        $('igProfile').style.color =

          $('igStyle').value === 'light' ? '#c13584' : '#c13584';

        const validUser = /^[A-Za-z0-9._]+$/.test(user);

        $('igProfile').href = validUser

          ? 'https://www.instagram.com/' + user + '/'

          : 'https://www.instagram.com/';

      };

      window.igUpload = function (input) {

        const file = input.files && input.files[0];

        if (!file) return;

        if (!file.type.startsWith('image/')) return;

        if (file.size > 5 * 1024 * 1024) {

          alert('Please select an image under 5 MB.');

          input.value = '';

          return;

        }

        const reader = new FileReader();

        reader.onload = function (e) {

          $('igAvatar').src = e.target.result;

        };

        reader.readAsDataURL(file);

      };

      window.igDownload = function () {

        if (typeof html2canvas === 'undefined') {

          const script = document.createElement('script');

          script.src =

            'https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js';

          script.onload = window.igDownload;

          script.onerror = function () {

            alert('Download library could not load. Please try again.');

          };

          document.head.appendChild(script);

          return;

        }

        html2canvas($('igCard'), {

          scale: 2,

          useCORS: true,

          backgroundColor: null

        }).then(function (canvas) {

          const link = document.createElement('a');

          link.download = 'instagram-visiting-card.png';

          link.href = canvas.toDataURL('image/png');

          link.click();

        }).catch(function () {

          alert('Could not create card. Please try again.');

        });

      };

      igUpdate();

    })();

  </script>

</div>