Technical Specification: Free Online VCard Generator

Overview

A high-performance, single-file browser utility designed to generate digital business cards in the standard .vcf format. This tool allows users to input contact details and immediately export a usable contact file or a scannable QR code for seamless contact sharing.

Core Features

• Real-Time Data Mapping: Dynamic form fields that update the visual preview and QR code instantly as the user types.
• VCard Formatting: Generates a standard text/vcard blob that browsers recognize as a download for contact import.
• QR Code Integration: Uses a lightweight CDN-based library (e.g., qrcode.js) to generate a scannable QR code containing the full contact string.
• Responsive UI/UX: Two-column layout on desktops that collapses to a single column on mobile devices.
• Zero-Storage Architecture: Strictly adheres to sandboxed environment requirements. No localStorage or IndexedDB is used; all data is volatile and cleared on page refresh.

UI Layout & Design

• Navigation: Simple, clean header with the tool title and a "Clear" button to reset the form.
• Main Content Area: A split-screen dashboard.
  • Left Column: Input forms grouped into logical sections (Personal Info, Professional Info, Location/Web).
  • Right Column: A fixed "Preview & Export" card containing a stylized business card representation, the QR code, and a primary "Download .vcf File" call-to-action button.
• Styling:
  • Palette: White backgrounds (#FFFFFF), neutral slate grays (#F8FAFC, #E2E8F0), and a vibrant professional blue (#2563EB) for primary actions.
  • Typography: Clean, sans-serif font stack (Inter or System UI) for maximum readability.
  • Shadows: Subtle, high-quality box-shadows (0 4px 6px -1px rgb(0 0 0 / 0.1)) on containers to create a floating, modern card aesthetic.

Technical Constraints & Requirements

• Single File: All HTML, CSS, and JS must reside in one file. Use external CDN links for essential libraries like Tailwind CSS and qrcode.js.
• No Persistence: Do not attempt to use cookies, local storage, or session storage to save form data.
• Sandboxed Compatibility: Avoid any window-level blocking methods like alert() or confirm(). Use custom, styled div modals for all user interactions.
• Responsive Design: Ensure form inputs remain touch-friendly on mobile devices with appropriate padding and font sizes (min 16px to prevent auto-zoom).
• Performance: Animations should be handled by CSS transitions (e.g., transition: all 0.3s ease-in-out) for subtle hover effects and UI state changes.

Implementation Steps

1. Setup Structure: Create the basic HTML5 boilerplate with CDN links for Tailwind CSS and the QR generation library.
2. State Management: Implement a simple Vanilla JS object to track current form state.
3. Event Listeners: Attach input listeners to all form fields to trigger the update of the QR code and the .vcf string generation.
4. Export Logic: Create a function to generate a Blob with the text/vcard MIME type and trigger a browser download when the export button is clicked.
5. Styling: Apply the "SaaS" aesthetic using Tailwind utility classes for a clean, consistent look.