# Business Card Studio ## Project Overview A single-file HTML/CSS/JS web application for designing, previewing, and exporting professional business cards. Built as a standalone `carte-vizita-studio.html` file with no build system — all code is inline. **Primary user:** Dragoș-Tudor Vana, Dean at Universitatea Creștină „Dimitrie Cantemir", Facultatea de Științe Economice Cluj-Napoca. The app is in Romanian. ## Architecture **Single file:** `carte-vizita-studio.html` (~850 lines) **External CDN dependencies (do NOT replace with npm packages):** - Google Fonts — 13 font families loaded via CSS - `qrcode-generator` 1.4.4 — QR code generation - `html2canvas` 1.4.1 — JPG export **No build tools, no frameworks, no bundler.** Pure vanilla HTML/CSS/JS. Keep it this way. ## Current Features ### Templates (5 total) 1. **Royal Navy** — dark navy `#12162f` background, gold `#c9a84c` accents, corner ornaments, gradient gold top line 2. **Ivory Elegance** — cream `#f5f0e8` background, dark sidebar accent bar, classic serif feel 3. **Midnight Gold** — pure black `#0a0a0a`, thin gold border frame, dramatic contrast 4. **Emerald Prestige** — forest green `#0d2818`, gold top/bottom stripes, two-row layout (uni top, name bottom) 5. **Random** — generates a unique combination each time from: 15 color palettes × 3 layouts (classic/sidebar/centered) × 7 display fonts × 4 body fonts × 5 decoration styles. Button "Generează alt random" re-rolls. ### Card Layout - **Dimensions:** 90mm × 50mm (standard business card) - **Bleed:** optional 3mm white bleed edge (toggle on/off), making total 96mm × 56mm - **Both sides are full cards** — front uses data from "Față" tab, back (verso) uses data from "Verso" tab (designed for Romanian front / English back) - Each side has its own QR code generated from its respective data ### Editable Fields (per side — Față and Verso tabs) | Field | Default Value | Optional? | |-------|--------------|-----------| | Companie / Universitate | Universitatea Creștină „Dimitrie Cantemir" | No | | Departament / Facultate | Facultatea de Științe Economice Cluj-Napoca | No | | Titlu (Prof. / Dr. / etc.) | Lector. Univ. Dr. | Yes (toggle) | | Prenume | Dragoș - Tudor | No | | Nume | Vana | No | | Funcție | Decan | No | | Telefon | +40 741 22 88 32 | No | | Email | vanadragos@gmail.com | No | | Website | www.cantemircluj.ro | Yes (toggle) | | Adresă | Teodor Mihali 56, Cluj-Napoca, Romania | Yes (toggle) | ### QR Code - Auto-generated vCard 3.0 with all fields (name, org, title, phone, email, URL, address) - **Diacritics are stripped to ASCII** in QR data (ș→s, ț→t, ă→a, â→a, î→i, „→") because the qrcode-generator library can't handle UTF-8 reliably. The card itself displays diacritics normally. - Website URLs: defaults to `https://` if no protocol specified; respects explicit `http://` or `https://` - Two size options: Mare (26mm, default) and Mic (16mm) - Canvas resolution always 200×200px regardless of display size ### Style Options (Stil tab) - **Font selector:** 9 display fonts (default: Cormorant Garamond), 4 body fonts (default: Raleway) - **QR size:** Mare / Mic dropdown - **Bleed toggle** ### Zoom Preview - 3 levels: Mic (1x), Mediu (1.5x), Mare (2.2x) - Desktop only (hidden on mobile) - CSS transform scale on `.cards-wrapper`, does NOT affect export ### Export - JPG via html2canvas - 3 quality levels: - Web/Social: 1x scale, JPEG quality 0.85 - Calitate medie: 2x scale, JPEG quality 0.95 - **Print: 4x scale, JPEG quality 0.95** (primary use case) - Exports both front and back as separate files - Filename pattern: `carte-vizita-fata-{quality}.jpg`, `carte-vizita-verso-{quality}.jpg` ## Code Structure ``` carte-vizita-studio.html ├── │ ├── Google Fonts link (13 families) │ ├── qrcode-generator CDN │ ├── html2canvas CDN │ └──