Business Card Generator

Card Details

<label>Full Name</label>
<input type="text" id="bc-name" placeholder="Jane Smith" value="Jane Smith" />

<label>Job Title</label>
<input type="text" id="bc-title" placeholder="Product Designer" value="Product Designer" />

<label>Company</label>
<input type="text" id="bc-company" placeholder="Acme Corp" value="Acme Corp" />

<label>Email</label>
<input type="email" id="bc-email" placeholder="jane@acmecorp.com" value="jane@acmecorp.com" />

<label>Phone</label>
<input type="tel" id="bc-phone" placeholder="+1 (555) 000-0000" value="+1 (555) 000-0000" />

<label>Website</label>
<input type="url" id="bc-website" placeholder="acmecorp.com" value="acmecorp.com" />

<label>Address</label>
<input type="text" id="bc-address" placeholder="123 Main St, New York, NY" value="123 Main St, New York, NY" />

<label style="margin-top:16px;">Layout Template</label>
<div class="bc-templates">
  <button class="bc-tpl-btn active" data-tpl="classic" onclick="(function(){window._bcSetTpl('classic');})()">Classic</button>
  <button class="bc-tpl-btn" data-tpl="modern" onclick="(function(){window._bcSetTpl('modern');})()">Modern</button>
  <button class="bc-tpl-btn" data-tpl="minimal" onclick="(function(){window._bcSetTpl('minimal');})()">Minimal</button>
  <button class="bc-tpl-btn" data-tpl="bold" onclick="(function(){window._bcSetTpl('bold');})()">Bold</button>
</div>

<label style="margin-top:16px;">Colors</label>
<div class="bc-colors">
  <div class="bc-color-group">
    <label style="margin-top:0;">Background</label>
    <input type="color" id="bc-color-bg" value="#1e293b" />
  </div>
  <div class="bc-color-group">
    <label style="margin-top:0;">Accent</label>
    <input type="color" id="bc-color-accent" value="#6366f1" />
  </div>
  <div class="bc-color-group">
    <label style="margin-top:0;">Text</label>
    <input type="color" id="bc-color-text" value="#ffffff" />
  </div>
</div>

<div class="bc-toggle-row">
  <button class="bc-toggle on" id="bc-qr-toggle" onclick="(function(){window._bcToggleQr();})()"></button>
  <span>Show QR code on back</span>
</div>

<p class="bc-note">Card size: 3.5 × 2 in (91 × 55 mm) — standard business card dimensions.</p>