▪️ID Card Creator — Documentation▪️

This document fully describes ID Card Creator previously provided. It explains features, how to use the page, technical details, storage, security considerations, customization tips, troubleshooting, and examples.

What I built

A single-page HTML application (single file) with a transparent black-silver glass UI that allows creating visual ID cards.
Form fields: full name, date of birth, nickname on card.
Avatar selection: built‑in avatars + "Upload avatar" support (file input, reads as data URL).
Background selection: several gradient backgrounds to style card surface.
Generation flow: "Scan & Generate" animation that simulates scanning data into the card, then a randomized 5–8 second loading screen to represent processing.
UUID generation for each card and rendering of a Code128 barcode placed underneath the exosite() label — no barcode background and sized to fit the card area.
Optional ERC20-style QR code (EIP-681/EIP-like URI) encoded and rendered beside the barcode when provided.
Google Sign-In integration (Google Identity Services) — required to save cards to a per-user local store in the browser (localStorage by user email). A demo fallback sign-in is included if you don't supply a client ID.
Save/Download: html2canvas is used to capture the card and offer PNG downloads. Saved cards are stored in localStorage keyed to the signed-in user's email.
All dependencies are CDN-hosted JavaScript libraries included inline in the single HTML file: Google Identity Services, JsBarcode, qrcode, html2canvas.

How to use — step by step

1) Open the page▪️

Load the single HTML file in a modern browser (Chrome, Edge, Firefox). No server required for basic functionality.

2) Fill the form▪️

Full Name — enters the name shown on the left of the card (displayed uppercase).
Date of Birth — shown as "DOB: yyyy-mm-dd" on the preview.
Nickname on Card — displayed below the name.

3) Choose an avatar▪️

Click one of the built-in avatars to select it. Or click the Upload tile to pick an image file from your device.
Uploaded images are read as Data URLs and added to the avatar picker (client-side only).

4) Pick a background▪️

Click one of the background cards — the preview updates immediately.

5) (Optional) Add ERC20 QR▪️

Token contract — contract address (0x...). Required for the QR to be generated.
Amount — numeric amount (raw units; decimals are not converted by default).
Recipient — optional address to include.
Chain — selects a prefix (ethereum, bsc, polygon) used in the URI. The page builds a transfer-like URI such as:
```
ethereum:0xCONTRACT/transfer?address=0xRECIPIENT&uint256=AMOUNT
```

6) Scan & Generate▪️

Click Scan & Generate to run the scanning animation. The page:

Generates a UUID with Web Crypto (or fallback) for the card.
Animates a scan line across the card to simulate reading the form data.
Shows a loading overlay for a randomized 5–8 second interval (progress bar animation) to simulate processing.
Renders the Code128 barcode (UUID) under the exosite() label without a background, scaled to fit the width assigned on the card.
Generates/render the ERC20 QR (if token contract was supplied) using the qrcode library.

7) Save / Download▪️

Download PNG (no sign-in) — uses html2canvas to capture the card preview and starts a download.
Save / Download — requires Google sign-in. Saves a PNG snapshot and metadata into browser localStorage under a key tied to signed-in user's email. Saved cards show up in the "Saved Cards" list and can be reloaded or downloaded.

Technical explanation (how it works)

Single-file design: HTML file contains inline CSS and JavaScript. No build step required. This is convenient for local testing and sharing.
UUID: Generated via crypto.randomUUID() when available, otherwise a high-entropy fallback. The UUID is displayed on the card and encoded into a Code128 barcode.
Barcode: JsBarcode (CODE128) is used to render a scalable SVG barcode. The barcode is styled with:
```
JsBarcode(svgElement, uuid, {
  format: 'CODE128',
  displayValue: false,
  width: 2,
  height: 36,
  margin: 0,
  background: 'transparent'
});
          
```
The barcode container is placed directly below the textual exosite() label and sized to fit the available width (default container width 160px). There is no opaque background behind the barcode — it uses transparent background so it visually sits on the card surface.
ERC20 QR : The QR encodes a transfer-like URI. Example URI format:
```
ethereum:0xCONTRACT/transfer?address=0xRECIPIENT&uint256=AMOUNT
```
The page uses the qrcode library (browser build) to produce a PNG Data URL inserted into a small QR image box on the card. The library options specify size and margin; the QR is rendered client-side only.
Upload avatar: A hidden file input reads images as Data URLs via a FileReader. The data URL is inserted into the avatar picker and set as the selected avatar. Uploaded avatars are included in snapshots and saved metadata (but not uploaded to any server).
Saving & localStorage: Saved cards are kept in localStorage under the key:
```
idcards:{user.email}
```
Each entry contains JSON metadata and a PNG Data URL snapshot of the card. This is local to the browser and machine where the save occurred; it is not synced to a server by default.
Exporting: html2canvas is used to rasterize the preview DOM into a PNG image. The export respects the card's visuals and produces a downloadable file via an anchor link and the download attribute.
Animation & Loading: The "scan line" animation is a CSS keyframe that sweeps a blurred gradient over the card. After the sweep, the JS triggers a progress animation that runs for a random duration between 5 and 8 seconds (5000–8000 ms). The progress uses requestAnimationFrame to update the UI smoothly.