silent-building

byJohn Pennington

You are building a browser-based mockup generator for designers, writers, and content creators. It produces realistic-looking UI mockups of WhatsApp conversations, SMS threads, and email clients — for use in portfolios, explainer videos, fiction writing, app demos, and social media content. All exported images carry a subtle "MOCKUP" watermark so they are clearly creative assets, not genuine screenshots. Single HTML file, vanilla JS + HTML5 Canvas, no dependencies, runs by double-click. --- ## ARCHITECTURE One page. Three tabs across the top: - **WhatsApp** — chat bubble mockup - **SMS** — native text message thread mockup - **Email** — email client mockup Left panel: input form (changes per tab). Right panel: live preview canvas, updates in real time as the user types. Below the preview: an **Export PNG** button. --- --- ## TAB 1 — WHATSAPP MOCKUP --- ## Input form - **Your name** (the right-side sender) - **Their name** (the left-side sender — shown in contact header) - **Their avatar colour** (colour picker — generates an initial-letter avatar circle) - **Messages** — a repeating message builder: - Sender toggle: "Me" | "Them" - Message text (textarea) - Timestamp (text input, e.g. "14:32") - "Add message" button — appends to the thread - Each added message shown as a deletable row in the form - **Show online status** toggle: "Online" | "last seen today at [time input]" - **Dark mode** toggle --- ## Canvas render — WhatsApp style - Phone frame drawn on canvas: rounded rectangle, dark bezel - Status bar at top: time (left), signal/wifi/battery icons (right) — drawn as simple shapes - WhatsApp header bar: back arrow, avatar circle with initial, contact name, online status, video/call icons - Chat area: light grey background (or dark if dark mode) - Message bubbles: - **Them**: white bubble, left-aligned, slightly rounded, tail bottom-left - **Me**: WhatsApp green (#25D366 or #DCF8C6 in light mode), right-aligned, tail bottom-right, double tick (grey = sent, blue = read — user toggles per message) - Timestamp shown inside bubble, bottom-right, small grey text - Bottom bar: text input field drawn (not functional), mic icon, attachment icon - Subtle "MOCKUP" text watermark, bottom-right of canvas, 10% opacity white or grey --- --- ## TAB 2 — SMS MOCKUP --- ## Input form - **Contact name** (shown at top of thread) - **Messages** — same repeating builder as WhatsApp tab (Sender, Text, Timestamp) - **Carrier style**: iOS | Android (Google Messages) - **Dark mode** toggle --- ## Canvas render --- ## iOS style - Phone frame, status bar - Header: back arrow with unread count badge, contact name centred, video/call icons - Bubbles: - **Them**: grey bubble, left-aligned - **Me**: blue bubble (#007AFF), right-aligned - Timestamps shown between message groups (centred, small grey text) - iMessage delivery note below last sent message: "Delivered" or "Read" - Background: white (light) or near-black (dark) --- ## Android / Google Messages style - Material Design feel: clean white background, coloured header bar (#1A73E8) - Bubbles: - **Them**: light grey, left-aligned - **Me**: blue, right-aligned - Timestamps centred between groups - Bottom compose bar with emoji, attach, send icons - "MOCKUP" watermark same as WhatsApp tab --- --- ## TAB 3 — EMAIL MOCKUP --- ## Input form - **From name** and **From email address** - **To name** and **To email address** - **Subject line** - **Body** (multi-line textarea — supports line breaks, rendered as paragraphs) - **Date and time** (text input) - **Email client style**: Gmail | Apple Mail | Outlook - **Has attachment** toggle — if on: filename input (e.g. "Report_Q3.pdf"), shown as an attachment chip below the body --- ## Canvas render --- ## Gmail style - White background, thin top bar with Gmail red logo (drawn as text "Gmail" in red) - Email header block: - Subject line in bold, large - From: name (bold) + email address - To: name + email - Date right-aligned - Star and reply icons (drawn as shapes) - Avatar circle left of sender name (initial letter, coloured) - Body text rendered in clean serif or sans, line-wrapped to fit canvas width - Attachment chip if toggled: paper-clip icon + filename + file size (placeholder "24 KB") --- ## Apple Mail style - Light grey background, white content card - Toolbar at top: back arrow, trash, folder, reply icons - Header: From, To, Subject, Date in a clean stacked layout - Body below a thin divider line --- ## Outlook style - Dark blue top bar with "Outlook" in white - Reading pane layout: sender name bold, subject below, date right-aligned - Body in clean sans-serif - "MOCKUP" watermark: bottom-right of canvas, 8% opacity --- --- ## EXPORT - **Export PNG** button below each preview - Canvas exported via `canvas.toDataURL('image/png')` - Filename auto-set: `whatsapp-mockup.png`, `sms-mockup.png`, `email-mockup.png` - Watermark is baked into the exported image — it cannot be cropped without obvious effort --- --- ## MESSAGE BUILDER UX The message list in each tab works as follows: - User fills in sender + text + timestamp, clicks "Add Message" - Message appears as a row in a list below the form: `[Them] "See you at 3" — 14:21 [Delete]` - List is reorderable via up/down arrow buttons - Clicking Delete removes that message and re-renders the preview - Maximum 20 messages per mockup (beyond this, earlier messages scroll off the top of the phone frame) --- --- ## GENERAL RENDERING RULES - All UI elements drawn programmatically on Canvas — zero image assets required - Fonts: use system sans-serif stack for body text; monospace for timestamps where appropriate - Phone frame: 390×844px logical canvas (iPhone 14 proportions), scaled to fit the preview panel - Email canvas: 600px wide, height grows to fit content - All text wraps within bubble/body width — no overflow - Preview re-renders live on every input change (debounced 150ms) - Dark mode inverts backgrounds and adjusts text colours throughout --- --- ## CONSTRAINTS - Single HTML file - No external libraries, no CDN, no npm - Runs offline, opens by double-clicking the file - No server, no data sent anywhere — everything stays in the browser - Code must be complete and runnable — no placeholder stubs, no `// TODO` comments