# TAPLY — NFC Contact Share — Design Notes

Source: screenshots of https://nfc.pcstc.com/ in `nfc.pcstc.com/`
(profile.png, menu.png, login.png, edit_page.png, preview_page.png)

Frontend framework: **Bootstrap**

---

## Brand & Visual System

- **Brand name:** TAPLY
- **Theme:** Dark
- **Background:** near-black with subtle purple glow (~`#0b0a1a` / `#100e22`)
- **Card surfaces:** dark navy (~`#15132a` / `#1a1830`)
- **Primary accent:** purple `~#7c5cff` (used for gradient hero, primary buttons, highlights)
- **Hero gradient:** purple → deeper violet
- **Text:** white primary, muted gray secondary (~`#9b9aa8`)
- **Shape language:** rounded cards, pill-shaped buttons, circular icon buttons
- **Layout:** mobile-first, single column, vertically stacked sections

---

## Pages

### 1. Public Profile (`profile.png`, `menu.png`)

- **Top bar:** TAPLY logo (left), menu/3-dot icon (right)
- **Hero card** (purple gradient):
  - "TAPPED IN" badge (left), "● live card" indicator (right)
  - Large circular avatar with initials (MJ)
  - Name: *Md. Jahidul Islam Riyad*
  - Role · company: *Business Analyst · WAC Bangladesh Ltd*
- **Primary actions:** `SAVE CONTACT` (filled purple), `EDIT PROFILE` (outlined)
- **Quick action row** (5 circular icon buttons): Call, WhatsApp, Email, Web, Share
- **Bio quote** (italic, muted): short tagline
- **CONTACT section** (list rows with leading icon, label, value, chevron):
  - MOBILE — +880 1714 163691
  - WORK — +880 1683 165674
  - PERSONAL — riyadimpressivegrp@gmail.com
  - WORK — riyad@wacbangladesh.com
- **WHERE TO FIND ME:** map preview tile + address card
  - Sahid Tower (Level-6), 23 Kemal Ataturk Avenue, Banani C/A, Dhaka, Bangladesh
- **FIND ME ONLINE** (2-col grid of social pills): LinkedIn, X/Twitter, Instagram, Facebook, YouTube
- **SHARE BACK:** QR code card with copy "Don't have TAPLY? …"
- **Footer:** TAPLY logo, copyright

### 2. Login (`login.png`)

- Back arrow (left), TAPLY logo (center)
- "CARD OWNER SIGN IN" pill badge
- Heading: **Welcome back.**
- Subtitle: *Sign in to edit the contact details on your TAPLY card*
- Email field (prefilled in screenshot: riyad@wacbangladesh.com)
- Password field (eye toggle)
- "Keep me signed in" checkbox + "Forgot password?" link (right)
- `SIGN IN` button (full-width, dark/disabled style)
- "New here? **Create a TAPLY card**" link
- Footer credit

### 3. Edit Card (`edit_page.png`)

- **Top bar:** Cancel (left) · "Edit Card" title · `Preview` button (right)
- **PROFILE section:**
  - Profile photo card (avatar + Change button)
  - Full name, Role, Company (text inputs)
  - Bio (textarea with character counter)
- **CARD COVER:** horizontal swatch row (purple, indigo, sunset, emerald, etc.)
- **PROFILE LAYOUT:** 3 selectable tiles — Centered (default), Left, Magazine
- **CARD APPEARANCE:** Dark / Light toggle (two large preview swatches)
- **PHONE NUMBERS:** rows with type dropdown (Mobile/Work) + number + delete; `+ Add another`
- **EMAIL ADDRESSES:** rows with type (Personal/Work) + address + delete; `+ Add another`
- **QUICK CONTACT:** WhatsApp number, Website URL
- **ADDRESS:** textarea
- **SOCIAL LINKS:** LinkedIn, X/Twitter, Instagram, Facebook, YouTube (each with brand icon + handle field)
- **ACCOUNT:** "Sign out of TAPLY"
- **Sticky bottom bar:** `SAVE CHANGES` (purple, full width)

### 4. Preview (`preview_page.png`)

- Same composition as Public Profile
- Sticky bottom bar replaces footer: `BACK TO EDIT` (outlined) · `PUBLISH` (filled purple)

---

## Reusable Components (Bootstrap mapping)

| Component         | Bootstrap base                                   |
| ----------------- | ------------------------------------------------ |
| Hero card         | `.card` with custom gradient background          |
| Section card      | `.card` + dark background utility                |
| Contact row       | `.list-group-item` (custom dark)                 |
| Primary button    | `.btn .btn-primary` (purple override)            |
| Outline button    | `.btn .btn-outline-light`                        |
| Quick action icon | `.btn .rounded-circle` with icon                 |
| Avatar            | `.rounded-circle` with initials fallback         |
| Pill badge        | `.badge .rounded-pill`                           |
| Form inputs       | `.form-control` / `.form-select` (dark variant)  |
| Sticky bottom bar | fixed-bottom container with shadow               |
| Toggle (Dark/Light) | `.btn-group` with radio toggles                |
| Swatch picker     | radio inputs styled as colored squares           |

---

## Pages to Build

1. `index.html` — Public profile (default landing)
2. `login.html` — Card owner sign-in
3. `edit.html` — Edit Card form
4. `preview.html` — Preview before publish (reuses profile markup + sticky publish bar)

## Open Decisions (to confirm with user)

- Bootstrap delivery: **CDN** vs **npm/bundler** (Vite/Webpack)
- Single multi-page site vs SPA
- Icon set: Bootstrap Icons vs Font Awesome
- Map: static image placeholder vs live (Leaflet/Google embed)
- Form behavior: static markup only, or wire up basic JS validation