✅

Your Card is Live!

Share your digital business card.

\n \n \n

\n \n `;\n }\n\n if (stage === \"error\") {\n return `\n \n \n Something went wrong\n \n \n

Oops!

Something went wrong

${errorMsg || \"Unable to process your card photo. Please try again.\"}

\n \n

\n `;\n }\n\n // Upload stage\n return `\n \n \n Get Your Digital Business Card\n \n \n

Get Your Digital Business Card

Photo your card. Get your link. Share it on WhatsApp.

\n \n

\n \n `;\n}\n\nexport async function handleClaim(c: any) {\n try {\n const body = await c.req.parseBody();\n const file = body[\"photo\"] as File | undefined;\n\n if (!file || !file.size) {\n return c.html(claimPage(\"error\", \"No photo selected.\"), 400);\n }\n\n // Convert image to base64\n const arrayBuf = await file.arrayBuffer();\n const bytes = new Uint8Array(arrayBuf);\n var binary = \"\";\n for (var i = 0; i < bytes.length; i++) {\n binary += String.fromCharCode(bytes[i]);\n }\n const base64 = btoa(binary);\n const mediaType = file.type || \"image/jpeg\";\n\n // Get API key\n const anthropicKey = Deno.env.get(\"ANTHROPIC_KEY\");\n if (!anthropicKey) {\n return c.html(\n claimPage(\"error\", \"System error. Please try again later.\"),\n 500,\n );\n }\n\n // Step 1: Extract info from photo\n const extractPrompt =\n \"This is a tradie business ad or business card. Extract ALL information and return ONLY a JSON object with these fields (use empty string if not found):\\n\" +\n \"{\\n\" +\n ' \"name\": \"business name\",\\n' +\n ' \"trade\": \"type of trade e.g. Lawn Mowing, Plumber, Carpenter\",\\n' +\n ' \"phone\": \"phone number digits only\",\\n' +\n ' \"email\": \"email address if visible\",\\n' +\n ' \"suburb\": \"suburb or area\",\\n' +\n ' \"services\": \"comma separated list of services exactly as shown\",\\n' +\n ' \"credentials\": \"any licences, clearances or certifications\"\\n' +\n \"}\\n\" +\n \"Return ONLY the JSON. No explanation. No markdown. No backticks.\";\n\n const extractResp = await fetch(\"https://api.anthropic.com/v1/messages\", {\n method: \"POST\",\n headers: {\n \"Content-Type\": \"application/json\",\n \"x-api-key\": anthropicKey,\n \"anthropic-version\": \"2023-06-01\",\n },\n body: JSON.stringify({\n model: \"claude-haiku-4-5-20251001\",\n max_tokens: 1024,\n messages: [{\n role: \"user\",\n content: [\n {\n type: \"image\",\n source: {\n type: \"base64\",\n media_type: mediaType,\n data: base64,\n },\n },\n {\n type: \"text\",\n text: extractPrompt,\n },\n ],\n }],\n }),\n });\n\n if (!extractResp.ok) {\n console.error(\"Extract error:\", await extractResp.text());\n return c.html(\n claimPage(\"error\", \"Could not read your card. Please try a clearer photo.\"),\n 500,\n );\n }\n\n const extractData = await extractResp.json();\n const extractText = extractData.content[0].text.trim();\n\n let extracted: Record;\n try {\n const cleaned = extractText\n .replace(/^```json\\s*/, \"\")\n .replace(/^```\\s*/, \"\")\n .replace(/```\\s*$/, \"\")\n .trim();\n extracted = JSON.parse(cleaned);\n } catch {\n return c.html(\n claimPage(\"error\", \"Could not read your card. Please try a clearer photo.\"),\n 500,\n );\n }\n\n const phone = extracted.phone || \"\";\n if (!phone) {\n return c.html(\n claimPage(\"error\", \"Could not find a phone number on your card.\"),\n 400,\n );\n }\n\n // Check if user exists\n const { getUserByPhone } = await import(\"./database.ts\");\n let user = await getUserByPhone(phone);\n\n if (!user) {\n await createUser({\n phone,\n pin: phone.slice(-4),\n name: phone,\n trade: \"Tradie\",\n email: \"\",\n tagline: \"\",\n suburb: \"\",\n });\n user = await getUserByPhone(phone);\n }\n\n // Step 2: Generate polished content\n let generated = { services: \"\", about: \"\", tagline: \"\" };\n if (extracted.name && extracted.trade) {\n const content = await generateBusinessContent(\n extracted.name,\n extracted.trade,\n anthropicKey,\n );\n if (content) {\n generated = content;\n }\n }\n\n // Update user with extracted and generated data\n await updateUser(phone, {\n name: extracted.name || String(user.name || \"\"),\n trade: extracted.trade || String(user.trade || \"\"),\n tagline:\n extracted.tagline || generated.tagline ||\n String(user.tagline || \"\"),\n suburb: extracted.suburb || String(user.suburb || \"\"),\n services:\n extracted.services || generated.services ||\n String(user.services || \"\"),\n credentials: extracted.credentials || String(user.credentials || \"\"),\n email: extracted.email || String(user.email || \"\"),\n about: generated.about || String(user.about || \"\"),\n years_experience: String(user.years_experience || \"\"),\n website: String(user.website || \"\"),\n instagram: String(user.instagram || \"\"),\n facebook: String(user.facebook || \"\"),\n });\n\n // Save card photo\n await blob.set(\n \"itabsbc-card-back-\" + phone,\n new Blob([arrayBuf], { type: mediaType }),\n );\n\n const url = new URL(c.req.url);\n const cardUrl = url.protocol + \"//\" + url.host + \"/card/\" + phone;\n\n return c.html(claimPage(\"success\", undefined, cardUrl, phone));\n } catch (e) {\n console.error(\"Claim error:\", e);\n return c.html(\n claimPage(\"error\", \"Something went wrong. Please try again.\"),\n 500,\n );\n }\n}\n",[170],"6e462182-448e-11f1-b808-42b51c65c3df","app.ts",261,["D",1777551395109],8,"http","import { Hono } from \"npm:hono@4\";\nimport { blob } from \"https://esm.town/v/std/blob\";\nimport { email } from \"https://esm.town/v/std/email\";\nimport {\n createUser,\n getAllUsers,\n getUserByPhone,\n incrementViews,\n setupDatabase,\n updatePin,\n updateUser,\n verifyPin,\n} from \"./database.ts\";\nimport { signupPage } from \"./pages/signup.ts\";\nimport { cardPage } from \"./pages/card.ts\";\nimport { editFormPage, editPinPage } from \"./pages/edit.ts\";\n\nimport {\n resetConfirmPage,\n resetExpiredPage,\n resetPage,\n resetSentPage,\n resetSuccessPage,\n} from \"./pages/reset.ts\";\nimport { directoryPage } from \"./pages/directory.ts\";\nimport { adminPage, handleAdmin, handleAdminScan } from \"./admin.ts\";\nimport { claimPage, handleClaim } from \"./claim.ts\";\n\nawait setupDatabase();\n\nconst app = new Hono();\napp.onError((err) => Promise.reject(err));\napp.get(\"/admin\", (c) => c.html(adminPage()));\napp.get(\"/admin/stats\", async (c) => {\n const allUsers = await getAllUsers();\n const totalCards = allUsers.length;\n \n // Sort by created_at descending (newest first), take 5 most recent\n const recentScans = allUsers\n .sort((a, b) => {\n const aDate = new Date(a.created_at as string).getTime();\n const bDate = new Date(b.created_at as string).getTime();\n return bDate - aDate; // Descending order (newest first)\n })\n .slice(0, 5);\n \n console.log('[Admin Stats] Total cards:', totalCards);\n console.log('[Admin Stats] Recent scans:', recentScans.map((s: any) => ({\n name: s.name,\n phone: s.phone,\n created_at: s.created_at\n })));\n \n return c.json({ totalCards, recentScans });\n});\napp.post(\"/admin\", (c) => handleAdmin(c));\napp.post(\"/admin/scan\", (c) => handleAdminScan(c));\napp.get(\"/claim\", (c) => c.html(claimPage()));\napp.post(\"/claim\", (c) => handleClaim(c));\n\nfunction photoKey(phone: string) {\n return \"itabsbc-photo-\" + phone;\n}\nfunction cardFrontKey(phone: string) {\n return \"itabsbc-card-front-\" + phone;\n}\nfunction cardBackKey(phone: string) {\n return \"itabsbc-card-back-\" + phone;\n}\nfunction workPhotoKey(n: number, phone: string) {\n return \"itabsbc-work-\" + n + \"-\" + phone;\n}\nfunction resetTokenKey(phone: string) {\n return \"itabsbc-reset-\" + phone;\n}\n\nasync function blobExists(key: string): Promise {\n try {\n const d = await blob.get(key);\n return d !== null;\n } catch {\n return false;\n }\n}\nfunction hasPhoto(phone: string) {\n return blobExists(photoKey(phone));\n}\nfunction hasCardFront(phone: string) {\n return blobExists(cardFrontKey(phone));\n}\nfunction hasCardBack(phone: string) {\n return blobExists(cardBackKey(phone));\n}\nfunction hasWorkPhoto(n: number, phone: string) {\n return blobExists(workPhotoKey(n, phone));\n}\n\nfunction generateResetToken(): string {\n return Math.floor(100000 + Math.random() * 900000).toString();\n}\n\nasync function saveResetToken(phone: string, token: string): Promise {\n const data = JSON.stringify({ token: token, timestamp: Date.now() });\n await blob.set(\n resetTokenKey(phone),\n new Blob([data], { type: \"application/json\" }),\n );\n}\n\nasync function getResetToken(\n phone: string,\n): Promise<{ token: string; timestamp: number } | null> {\n try {\n const data = await blob.get(resetTokenKey(phone));\n if (!data) return null;\n const text = await data.text();\n return JSON.parse(text);\n } catch {\n return null;\n }\n}\n\nasync function deleteResetToken(phone: string): Promise {\n try {\n await blob.delete(resetTokenKey(phone));\n } catch {}\n}\n\nfunction isTokenExpired(timestamp: number): boolean {\n return Date.now() - timestamp > 15 * 60 * 1000;\n}\n\nasync function serveBlob(key: string, contentType: string, cache: string) {\n try {\n const data = await blob.get(key);\n if (!data) return new Response(\"Not found\", { status: 404 });\n return new Response(await data.arrayBuffer(), {\n headers: { \"Content-Type\": contentType, \"Cache-Control\": cache },\n });\n } catch {\n return new Response(\"Not found\", { status: 404 });\n }\n}\n\nasync function handleUpload(c: any, key: string, maxMB: number) {\n try {\n const body = await c.req.parseBody();\n const file = body[\"photo\"] as File | undefined;\n if (!file || !file.size) {\n return c.json({ ok: false, error: \"No file\" }, 400);\n }\n if (file.size > maxMB * 1024 * 1024) {\n return c.json({ ok: false, error: \"File too large\" }, 400);\n }\n await blob.set(\n key,\n new Blob([await file.arrayBuffer()], { type: file.type || \"image/jpeg\" }),\n );\n return c.json({ ok: true });\n } catch (e) {\n return c.json({ ok: false, error: String(e) }, 500);\n }\n}\n\n// ── Pages ──────────────────────────────────────────────────────────────────\n\napp.get(\"/\", async (c) => {\n const tradies = await getAllUsers();\n return c.html(directoryPage(tradies));\n});\n\napp.get(\"/signup\", (c) => c.html(signupPage()));\n\napp.post(\"/signup\", async (c) => {\n const body = await c.req.parseBody();\n const name = String(body.name || \"\").trim();\n const trade = String(body.trade || \"\").trim();\n const phone = String(body.phone || \"\").replace(/\\s/g, \"\").trim();\n const pin = String(body.pin || \"\").trim();\n const tagline = String(body.tagline || \"\").trim();\n const email = String(body.email || \"\").trim();\n const suburb = String(body.suburb || \"\").trim();\n if (!name || !trade || !phone || !pin) {\n return c.html(signupPage(\"Please fill in all required fields.\"), 400);\n }\n if (!/^\\d{4}$/.test(pin)) {\n return c.html(signupPage(\"PIN must be exactly 4 digits.\"), 400);\n }\n const existing = await getUserByPhone(phone);\n if (existing) {\n return c.html(\n signupPage(\n 'That phone number is already registered. View card →',\n ),\n 400,\n );\n }\n try {\n await createUser({ phone, pin, name, trade, email, tagline, suburb });\n } catch (_e) {\n return c.html(signupPage(\"Something went wrong. Please try again.\"), 500);\n }\n return new Response(null, {\n status: 302,\n headers: { Location: \"/card/\" + phone },\n });\n});\n\napp.get(\"/card/:phone\", async (c) => {\n const phone = c.req.param(\"phone\");\n const user = await getUserByPhone(phone);\n if (!user) {\n return c.html(\n 'Not Found' +\n '' +\n '

' +\n '

iTabs BC 2.0

' +\n '

Card not found

Create a card →

' +\n \"

\",\n 404,\n );\n }\n const url = new URL(c.req.url);\n const baseUrl = url.protocol + \"//\" + url.host;\n const [photo, cardFront, cardBack, views, wp1, wp2, wp3, wp4] = await Promise\n .all([\n hasPhoto(phone),\n hasCardFront(phone),\n hasCardBack(phone),\n incrementViews(phone),\n hasWorkPhoto(1, phone),\n hasWorkPhoto(2, phone),\n hasWorkPhoto(3, phone),\n hasWorkPhoto(4, phone),\n ]);\n return c.html(\n cardPage(\n user,\n baseUrl,\n photo,\n cardFront,\n cardBack,\n views,\n wp1,\n wp2,\n wp3,\n wp4,\n ),\n );\n});\n\n// ── Blob serve routes ──────────────────────────────────────────────────────\n\napp.get(\n \"/photo/:phone\",\n (c) =>\n serveBlob(\n photoKey(c.req.param(\"phone\")),\n \"image/jpeg\",\n \"public, max-age=31536000\",\n ),\n);\napp.get(\n \"/card-front/:phone\",\n (c) =>\n serveBlob(cardFrontKey(c.req.param(\"phone\")), \"image/jpeg\", \"no-cache\"),\n);\napp.get(\n \"/card-back/:phone\",\n (c) => serveBlob(cardBackKey(c.req.param(\"phone\")), \"image/jpeg\", \"no-cache\"),\n);\napp.get(\n \"/work-photo-1/:phone\",\n (c) =>\n serveBlob(workPhotoKey(1, c.req.param(\"phone\")), \"image/jpeg\", \"no-cache\"),\n);\napp.get(\n \"/work-photo-2/:phone\",\n (c) =>\n serveBlob(workPhotoKey(2, c.req.param(\"phone\")), \"image/jpeg\", \"no-cache\"),\n);\napp.get(\n \"/work-photo-3/:phone\",\n (c) =>\n serveBlob(workPhotoKey(3, c.req.param(\"phone\")), \"image/jpeg\", \"no-cache\"),\n);\napp.get(\n \"/work-photo-4/:phone\",\n (c) =>\n serveBlob(workPhotoKey(4, c.req.param(\"phone\")), \"image/jpeg\", \"no-cache\"),\n);\n\n// ── Upload routes ──────────────────────────────────────────────────────────\n\napp.post(\"/upload/:phone\", async (c) => {\n const phone = c.req.param(\"phone\");\n if (!await getUserByPhone(phone)) {\n return c.json({ ok: false, error: \"User not found\" }, 404);\n }\n // Profile photo — compress client-side so just store as-is\n return handleUpload(c, photoKey(phone), 5);\n});\n\napp.post(\"/upload-card-front/:phone\", async (c) => {\n const phone = c.req.param(\"phone\");\n if (!await getUserByPhone(phone)) {\n return c.json({ ok: false, error: \"User not found\" }, 404);\n }\n return handleUpload(c, cardFrontKey(phone), 10);\n});\n\napp.post(\"/upload-card-back/:phone\", async (c) => {\n const phone = c.req.param(\"phone\");\n if (!await getUserByPhone(phone)) {\n return c.json({ ok: false, error: \"User not found\" }, 404);\n }\n return handleUpload(c, cardBackKey(phone), 10);\n});\n\napp.post(\"/upload-work-photo/:n/:phone\", async (c) => {\n const phone = c.req.param(\"phone\");\n const n = parseInt(c.req.param(\"n\"), 10);\n if (n < 1 || n > 4) {\n return c.json({ ok: false, error: \"Invalid photo number\" }, 400);\n }\n if (!await getUserByPhone(phone)) {\n return c.json({ ok: false, error: \"User not found\" }, 404);\n }\n return handleUpload(c, workPhotoKey(n, phone), 10);\n});\n\n// ── Reset PIN ──────────────────────────────────────────────────────────────\n\napp.get(\"/reset/:phone\", async (c) => {\n const phone = c.req.param(\"phone\");\n const user = await getUserByPhone(phone);\n if (!user) {\n return c.html(resetPage(phone, \"No card found for that number.\"), 404);\n }\n return c.html(resetPage(phone));\n});\n\napp.post(\"/reset/:phone\", async (c) => {\n const phone = c.req.param(\"phone\");\n const body = await c.req.parseBody();\n const userEmail = String(body.email || \"\").trim();\n const user = await getUserByPhone(phone);\n if (!user) {\n return c.html(resetPage(phone, \"No card found for that number.\"), 404);\n }\n if (String(user.email || \"\") !== userEmail) {\n return c.html(\n resetPage(phone, \"That email does not match our records.\"),\n 400,\n );\n }\n const token = generateResetToken();\n await saveResetToken(phone, token);\n const url = new URL(c.req.url);\n const baseUrl = url.protocol + \"//\" + url.host;\n const resetLink = baseUrl + \"/reset/\" + phone + \"/confirm?token=\" + token;\n try {\n await email({\n to: userEmail,\n subject: \"Your iTabs PIN reset link\",\n text: \"Click this link to reset your PIN: \" + resetLink,\n });\n } catch (e) {\n return c.html(\n resetPage(phone, \"Failed to send email. Please try again later.\"),\n 500,\n );\n }\n return c.html(resetSentPage(phone));\n});\n\napp.get(\"/reset/:phone/confirm\", async (c) => {\n const phone = c.req.param(\"phone\");\n const token = c.req.query(\"token\");\n const user = await getUserByPhone(phone);\n if (!user) return c.html(resetExpiredPage(phone), 404);\n if (!token) return c.html(resetExpiredPage(phone));\n const storedData = await getResetToken(phone);\n if (!storedData || storedData.token !== token) {\n return c.html(resetExpiredPage(phone));\n }\n if (isTokenExpired(storedData.timestamp)) {\n await deleteResetToken(phone);\n return c.html(resetExpiredPage(phone));\n }\n return c.html(resetConfirmPage(phone));\n});\n\napp.post(\"/reset/:phone/confirm\", async (c) => {\n const phone = c.req.param(\"phone\");\n const body = await c.req.parseBody();\n const pin = String(body.pin || \"\").trim();\n const confirm = String(body.confirm || \"\").trim();\n if (!/^\\d{4}$/.test(pin) || !/^\\d{4}$/.test(confirm) || pin !== confirm) {\n return c.html(\n resetConfirmPage(phone, \"PINs must be 4 digits and match.\"),\n 400,\n );\n }\n const user = await getUserByPhone(phone);\n if (!user) return c.html(resetExpiredPage(phone), 404);\n const storedData = await getResetToken(phone);\n if (!storedData) return c.html(resetExpiredPage(phone));\n if (isTokenExpired(storedData.timestamp)) {\n await deleteResetToken(phone);\n return c.html(resetExpiredPage(phone));\n }\n await updatePin(phone, pin);\n await deleteResetToken(phone);\n return c.html(resetSuccessPage(phone));\n});\n\n// ── vCard ──────────────────────────────────────────────────────────────────\n\napp.get(\"/vcard/:phone\", async (c) => {\n const phone = c.req.param(\"phone\");\n const user = await getUserByPhone(phone);\n if (!user) return new Response(\"Not found\", { status: 404 });\n const name = String(user.name || \"\");\n const email = String(user.email || \"\");\n const trade = String(user.trade || \"\");\n const suburb = String(user.suburb || \"\");\n var parts = name.trim().split(\" \");\n var vcf = [\n \"BEGIN:VCARD\",\n \"VERSION:3.0\",\n \"FN:\" + name,\n \"N:\" + parts.slice(1).join(\" \") + \";\" + parts[0] + \";;;\",\n \"TEL;TYPE=CELL:\" + phone,\n email ? \"EMAIL:\" + email : \"\",\n trade ? \"TITLE:\" + trade : \"\",\n suburb ? \"ADR;TYPE=HOME:;;;\" + suburb + \";;;AU\" : \"\",\n \"END:VCARD\",\n ].filter(function (l) {\n return l !== \"\";\n }).join(\"\\r\\n\");\n return new Response(vcf, {\n headers: {\n \"Content-Type\": \"text/vcard;charset=utf-8\",\n \"Content-Disposition\": 'attachment; filename=\"' +\n name.toLowerCase().replace(/\\s+/g, \"-\") + '.vcf\"',\n },\n });\n});\n\n// ── Edit ───────────────────────────────────────────────────────────────────\n\napp.get(\"/edit/:phone\", async (c) => {\n const phone = c.req.param(\"phone\");\n const user = await getUserByPhone(phone);\n if (!user) {\n return new Response(null, { status: 302, headers: { Location: \"/\" } });\n }\n return c.html(editPinPage(phone));\n});\n\nasync function loadEditFlags(phone: string) {\n return Promise.all([\n hasPhoto(phone),\n hasCardFront(phone),\n hasCardBack(phone),\n hasWorkPhoto(1, phone),\n hasWorkPhoto(2, phone),\n hasWorkPhoto(3, phone),\n hasWorkPhoto(4, phone),\n ]);\n}\n\napp.post(\"/edit/:phone/verify\", async (c) => {\n const phone = c.req.param(\"phone\");\n const body = await c.req.parseBody();\n const pin = String(body.pin || \"\").trim();\n if (!await verifyPin(phone, pin)) {\n return c.html(editPinPage(phone, \"Incorrect PIN. Please try again.\"), 401);\n }\n const user = await getUserByPhone(phone);\n const [photo, cardFront, cardBack, wp1, wp2, wp3, wp4] = await loadEditFlags(\n phone,\n );\n return c.html(\n editFormPage(user!, photo, cardFront, cardBack, wp1, wp2, wp3, wp4),\n );\n});\n\napp.post(\"/edit/:phone/save\", async (c) => {\n const phone = c.req.param(\"phone\");\n const body = await c.req.parseBody();\n const name = String(body.name || \"\").trim();\n const trade = String(body.trade || \"\").trim();\n const tagline = String(body.tagline || \"\").trim();\n const email = String(body.email || \"\").trim();\n const suburb = String(body.suburb || \"\").trim();\n const services = String(body.services || \"\").trim();\n const about = String(body.about || \"\").trim();\n const years_experience = String(body.years_experience || \"\").trim();\n const credentials = String(body.credentials || \"\").trim();\n const website = String(body.website || \"\").trim();\n const instagram = String(body.instagram || \"\").trim();\n const facebook = String(body.facebook || \"\").trim();\n if (!name || !trade) {\n const user = await getUserByPhone(phone);\n const [photo, cardFront, cardBack, wp1, wp2, wp3, wp4] =\n await loadEditFlags(phone);\n return c.html(\n editFormPage(\n user!,\n photo,\n cardFront,\n cardBack,\n wp1,\n wp2,\n wp3,\n wp4,\n \"Name and trade are required.\",\n ),\n 400,\n );\n }\n await updateUser(phone, {\n name,\n trade,\n email,\n tagline,\n suburb,\n services,\n about,\n years_experience,\n credentials,\n website,\n instagram,\n facebook,\n });\n return new Response(null, {\n status: 302,\n headers: { Location: \"/card/\" + phone },\n });\n});\n\nexport default app.fetch;\n",[177],"807e854c-448e-11f1-84c0-42b51c65c3df","admin.ts","eb82fa26-4317-11f1-a7c6-42b51c65c3df",262,["D",1777551425678],13,"import { blob } from \"https://esm.town/v/std/blob\";\nimport { getUserByPhone, updateUser, createUser, getAllUsers } from \"./database.ts\";\nimport { sqlite } from \"https://esm.town/v/std/sqlite/main.ts\";\n\nasync function generateBusinessContent(\n businessName: string,\n trade: string,\n anthropicKey: string,\n): Promise<{ services: string; about: string; tagline: string } | null> {\n const prompt =\n `You are a professional copywriter for Australian tradies. Given a business name and trade type, generate polished content.\\n\\nBusiness Name: ${businessName}\\nTrade Type: ${trade}\\n\\nReturn ONLY a JSON object with:\\n{\\n \"services\": \"a comma-separated list of 3-5 specific services this business likely offers\",\\n \"about\": \"a short 1-2 sentence professional description of the business\",\\n \"tagline\": \"a short, catchy tagline (max 6 words) that sounds professional but friendly\"\\n}\\n\\nMake it specific to the trade and professional. Return ONLY the JSON.`;\n\n try {\n const resp = await fetch(\"https://api.anthropic.com/v1/messages\", {\n method: \"POST\",\n headers: {\n \"Content-Type\": \"application/json\",\n \"x-api-key\": anthropicKey,\n \"anthropic-version\": \"2023-06-01\",\n },\n body: JSON.stringify({\n model: \"claude-haiku-4-5-20251001\",\n max_tokens: 512,\n messages: [\n {\n role: \"user\",\n content: prompt,\n },\n ],\n }),\n });\n\n if (!resp.ok) {\n console.error(\"Claude content generation error:\", await resp.text());\n return null;\n }\n\n const data = await resp.json();\n const rawText = data.content[0].text.trim();\n\n let content: Record;\n try {\n const cleaned = rawText\n .replace(/^```json\\s*/, \"\")\n .replace(/^```\\s*/, \"\")\n .replace(/```\\s*$/, \"\")\n .trim();\n content = JSON.parse(cleaned);\n } catch {\n console.error(\"Failed to parse content response:\", rawText);\n return null;\n }\n\n return {\n services: content.services || \"\",\n about: content.about || \"\",\n tagline: content.tagline || \"\",\n };\n } catch (e) {\n console.error(\"Error generating business content:\", e);\n return null;\n }\n}\n\nexport function adminPage() {\n const html = `\n \n \n iTabs Admin Panel\n \n \n \n \n \n \n

\n \n

Total Cards

Scanned Today

21s

Avg Scan Time

\n \n \n

📁 Directory URL

\n \n \n

📸 Scan Business Card

\n \n \n

\n \n \n \n

\n \n \n

\n Click to choose file or drag & drop\n

\n \n

\n \n \n

\n Open rear camera\n

\n \n \n

\n \n

\n Or click to choose file\n

\n \n \n

\n \n \n \n \n \n \n \n \n

Business Name

Trade

\n \n

Card URL

\n \n \n

\n \n

WhatsApp Message

\n Message preview here...\n

\n \n

\n \n \n

📋 Recent Scans

No scans yet

\n \n \n `;\n return html;\n}\n\nexport async function handleAdmin(c: any) {\n try {\n const body = await c.req.parseBody();\n const file = body[\"photo\"] as File | undefined;\n\n if (!file || !file.size) {\n return c.html(adminPage(), 400);\n }\n\n // Convert image to base64\n const arrayBuf = await file.arrayBuffer();\n const bytes = new Uint8Array(arrayBuf);\n var binary = \"\";\n for (var i = 0; i < bytes.length; i++) {\n binary += String.fromCharCode(bytes[i]);\n }\n const base64 = btoa(binary);\n const mediaType = file.type || \"image/jpeg\";\n\n // Get API key\n const anthropicKey = Deno.env.get(\"ANTHROPIC_KEY\");\n if (!anthropicKey) {\n return c.html(adminPage(), 500);\n }\n\n // Step 1: Extract info from photo\n const extractPrompt =\n \"This is a tradie business ad or business card. Extract ALL information and return ONLY a JSON object with these fields (use empty string if not found):\\n\" +\n \"{\\n\" +\n ' \"name\": \"business name\",\\n' +\n ' \"trade\": \"type of trade e.g. Lawn Mowing, Plumber, Carpenter\",\\n' +\n ' \"phone\": \"phone number digits only\",\\n' +\n ' \"email\": \"email address if visible\",\\n' +\n ' \"suburb\": \"suburb or area\",\\n' +\n ' \"services\": \"comma separated list of services exactly as shown\",\\n' +\n ' \"credentials\": \"any licences, clearances or certifications\",\\n' +\n ' \"website\": \"website URL if visible (e.g. www.example.com or https://example.com)\"\\n' +\n \"}\\n\" +\n \"Return ONLY the JSON. No explanation. No markdown. No backticks.\";\n\n const extractResp = await fetch(\"https://api.anthropic.com/v1/messages\", {\n method: \"POST\",\n headers: {\n \"Content-Type\": \"application/json\",\n \"x-api-key\": anthropicKey,\n \"anthropic-version\": \"2023-06-01\",\n },\n body: JSON.stringify({\n model: \"claude-haiku-4-5-20251001\",\n max_tokens: 1024,\n messages: [\n {\n role: \"user\",\n content: [\n {\n type: \"image\",\n source: {\n type: \"base64\",\n media_type: mediaType,\n data: base64,\n },\n },\n {\n type: \"text\",\n text: extractPrompt,\n },\n ],\n },\n ],\n }),\n });\n\n if (!extractResp.ok) {\n console.error(\"Extract error:\", await extractResp.text());\n return c.html(adminPage(), 500);\n }\n\n const extractData = await extractResp.json();\n const extractText = extractData.content[0].text.trim();\n\n let extracted: Record;\n try {\n const cleaned = extractText\n .replace(/^```json\\s*/, \"\")\n .replace(/^```\\s*/, \"\")\n .replace(/```\\s*$/, \"\")\n .trim();\n extracted = JSON.parse(cleaned);\n } catch {\n return c.html(adminPage(), 500);\n }\n\n const phone = extracted.phone || \"\";\n if (!phone) {\n return c.html(adminPage(), 400);\n }\n\n // Check if user exists\n let user = await getUserByPhone(phone);\n\n if (!user) {\n await createUser({\n phone,\n pin: phone.slice(-4),\n name: phone,\n trade: \"Tradie\",\n email: \"\",\n tagline: \"\",\n suburb: \"\",\n });\n user = await getUserByPhone(phone);\n }\n\n // Step 2: Generate polished content\n let generated = { services: \"\", about: \"\", tagline: \"\" };\n if (extracted.name && extracted.trade) {\n const content = await generateBusinessContent(\n extracted.name,\n extracted.trade,\n anthropicKey,\n );\n if (content) {\n generated = content;\n }\n }\n\n // Update user with extracted and generated data\n await updateUser(phone, {\n name: extracted.name || String(user.name || \"\"),\n trade: extracted.trade || String(user.trade || \"\"),\n tagline:\n extracted.tagline || generated.tagline ||\n String(user.tagline || \"\"),\n suburb: extracted.suburb || String(user.suburb || \"\"),\n services:\n extracted.services || generated.services ||\n String(user.services || \"\"),\n credentials: extracted.credentials || String(user.credentials || \"\"),\n email: extracted.email || String(user.email || \"\"),\n about: generated.about || String(user.about || \"\"),\n years_experience: String(user.years_experience || \"\"),\n website: extracted.website || String(user.website || \"\"),\n instagram: String(user.instagram || \"\"),\n facebook: String(user.facebook || \"\"),\n });\n\n // Save card photo\n await blob.set(\n \"itabsbc-card-back-\" + phone,\n new Blob([arrayBuf], { type: mediaType }),\n );\n\n const url = new URL(c.req.url);\n const cardUrl = url.protocol + \"//\" + url.host + \"/card/\" + phone;\n\n // Return success with new UI\n return c.html(adminPageSuccess(extracted.name || \"\", extracted.trade || \"\", cardUrl));\n } catch (e) {\n console.error(\"Admin error:\", e);\n return c.html(adminPage(), 500);\n }\n}\n\nfunction adminPageSuccess(name: string, trade: string, cardUrl: string) {\n const firstName = name.split(\" \")[0];\n const whatsappMessage = `Hey ${firstName} 👋 saw your ad in the Examiner — I put a digital frame around your card, here's what it looks like 👇 ${cardUrl}`;\n \n return `\n \n \n iTabs Admin Panel\n \n \n \n \n \n

${name}

${trade}

\n \n

Card URL

\n \n \n

\n \n

WhatsApp Message

${whatsappMessage}

\n \n

\n \n \n

\n \n + Scan another card\n

\n \n \n `;\n}\n\nexport async function handleAdminScan(c: any) {\n try {\n const body = await c.req.parseBody();\n const file = body[\"photo\"] as File | undefined;\n\n if (!file || !file.size) {\n return c.json({ ok: false, error: \"No file selected\" }, 400);\n }\n\n // Convert image to base64\n const arrayBuf = await file.arrayBuffer();\n const bytes = new Uint8Array(arrayBuf);\n var binary = \"\";\n for (var i = 0; i < bytes.length; i++) {\n binary += String.fromCharCode(bytes[i]);\n }\n const base64 = btoa(binary);\n const mediaType = file.type || \"image/jpeg\";\n\n // Get API key\n const anthropicKey = Deno.env.get(\"ANTHROPIC_KEY\");\n if (!anthropicKey) {\n return c.json({ ok: false, error: \"API key not configured\" }, 500);\n }\n\n // Step 1: Extract info from photo\n const extractPrompt =\n \"This is a tradie business ad or business card. Extract ALL information and return ONLY a JSON object with these fields (use empty string if not found):\\n\" +\n \"{\\n\" +\n ' \"name\": \"business name\",\\n' +\n ' \"trade\": \"type of trade e.g. Lawn Mowing, Plumber, Carpenter\",\\n' +\n ' \"phone\": \"phone number digits only\",\\n' +\n ' \"email\": \"email address if visible\",\\n' +\n ' \"suburb\": \"suburb or area\",\\n' +\n ' \"services\": \"comma separated list of services exactly as shown\",\\n' +\n ' \"credentials\": \"any licences, clearances or certifications\",\\n' +\n ' \"website\": \"website URL if visible (e.g. www.example.com or https://example.com)\"\\n' +\n \"}\\n\" +\n \"Return ONLY the JSON. No explanation. No markdown. No backticks.\";\n\n const extractResp = await fetch(\"https://api.anthropic.com/v1/messages\", {\n method: \"POST\",\n headers: {\n \"Content-Type\": \"application/json\",\n \"x-api-key\": anthropicKey,\n \"anthropic-version\": \"2023-06-01\",\n },\n body: JSON.stringify({\n model: \"claude-haiku-4-5-20251001\",\n max_tokens: 1024,\n messages: [\n {\n role: \"user\",\n content: [\n {\n type: \"image\",\n source: {\n type: \"base64\",\n media_type: mediaType,\n data: base64,\n },\n },\n {\n type: \"text\",\n text: extractPrompt,\n },\n ],\n },\n ],\n }),\n });\n\n if (!extractResp.ok) {\n console.error(\"Extract error:\", await extractResp.text());\n return c.json({ ok: false, error: \"Failed to scan image\" }, 500);\n }\n\n const extractData = await extractResp.json();\n const extractText = extractData.content[0].text.trim();\n\n let extracted: Record;\n try {\n const cleaned = extractText\n .replace(/^```json\\s*/, \"\")\n .replace(/^```\\s*/, \"\")\n .replace(/```\\s*$/, \"\")\n .trim();\n extracted = JSON.parse(cleaned);\n } catch {\n console.error(\"Failed to parse:\", extractText);\n return c.json({ ok: false, error: \"Failed to parse scan result\" }, 500);\n }\n\n const phone = extracted.phone || \"\";\n if (!phone) {\n return c.json({ ok: false, error: \"No phone number found on card\" }, 400);\n }\n\n // Check if user exists\n let user = await getUserByPhone(phone);\n\n if (!user) {\n await createUser({\n phone,\n pin: phone.slice(-4),\n name: phone,\n trade: \"Tradie\",\n email: \"\",\n tagline: \"\",\n suburb: \"\",\n });\n user = await getUserByPhone(phone);\n }\n\n // Step 2: Generate polished content\n let generated = { services: \"\", about: \"\", tagline: \"\" };\n if (extracted.name && extracted.trade) {\n const content = await generateBusinessContent(\n extracted.name,\n extracted.trade,\n anthropicKey,\n );\n if (content) {\n generated = content;\n }\n }\n\n // Update user with extracted and generated data\n await updateUser(phone, {\n name: extracted.name || String(user.name || \"\"),\n trade: extracted.trade || String(user.trade || \"\"),\n tagline:\n extracted.tagline || generated.tagline ||\n String(user.tagline || \"\"),\n suburb: extracted.suburb || String(user.suburb || \"\"),\n services:\n extracted.services || generated.services ||\n String(user.services || \"\"),\n credentials: extracted.credentials || String(user.credentials || \"\"),\n email: extracted.email || String(user.email || \"\"),\n about: generated.about || String(user.about || \"\"),\n years_experience: String(user.years_experience || \"\"),\n website: extracted.website || String(user.website || \"\"),\n instagram: String(user.instagram || \"\"),\n facebook: String(user.facebook || \"\"),\n });\n\n // Save card photo\n await blob.set(\n \"itabsbc-card-back-\" + phone,\n new Blob([arrayBuf], { type: mediaType }),\n );\n\n const url = new URL(c.req.url);\n const cardUrl = url.protocol + \"//\" + url.host + \"/card/\" + phone;\n\n // Return success JSON with real data\n return c.json({\n ok: true,\n name: extracted.name || String(user.name || \"\"),\n trade: extracted.trade || String(user.trade || \"\"),\n phone: phone,\n cardUrl: cardUrl,\n });\n } catch (e) {\n console.error(\"Admin scan error:\", e);\n return c.json({ ok: false, error: \"Scan failed. Please try again.\" }, 500);\n }\n}\n",[185],"8198490c-4210-11f1-9a5c-42b51c65c3df","admin-scan.ts","2720b6aa-41f0-11f1-9b0c-42b51c65c3df",160,["D",1777277408613],5,"import { blob } from \"https://esm.town/v/std/blob\";\n// ── ADMIN SCAN ROUTE ──────────────────────────────────────────────────────\n// Add these two routes to app.ts:\n//\n// import { adminScanPage, handleAdminScan } from \"./admin-scan.ts\";\n// app.get(\"/admin/scan\", (c) => c.html(adminScanPage()));\n// app.post(\"/admin/scan\", (c) => handleAdminScan(c));\n//\n// ─────────────────────────────────────────────────────────────────────────\n\nimport { getUserByPhone, updateUser, createUser } from \"./database.ts\";\n\nexport function adminScanPage(msg?: string, cardUrl?: string) {\n return '' +\n '' +\n '' +\n \"iTabs Admin — Scan Ad\" +\n \"\" +\n \"\" +\n '

' +\n \"

📸 iTabs Ad Scanner

\" +\n \"

Upload a tradie ad photo — Claude reads it and fills the card automatically.

\" +\n '\" +\n '

⏳ Claude is reading the ad... this takes about 10 seconds

' +\n (msg\n ? '

' + msg + (cardUrl\n ? 'View card →'\n : \"\") +\n \"

\"\n : \"\") +\n \"

\" +\n \"\" +\n \"\";\n}\n\nasync function generateBusinessContent(\n businessName: string,\n trade: string,\n anthropicKey: string,\n): Promise<{ services: string; about: string; tagline: string } | null> {\n const prompt =\n `You are a professional copywriter for Australian tradies. Given a business name and trade type, generate polished content.\n\nBusiness Name: ${businessName}\nTrade Type: ${trade}\n\nReturn ONLY a JSON object with:\n{\n \"services\": \"a comma-separated list of 3-5 specific services this business likely offers\",\n \"about\": \"a short 1-2 sentence professional description of the business\",\n \"tagline\": \"a short, catchy tagline (max 6 words) that sounds professional but friendly\"\n}\n\nExamples for reference:\n- For \"Joe's Plumbing\" (Plumber): services: \"Pipe Repairs, Leak Detection, Drain Cleaning, Water Heater Installation\", about: \"Professional plumbing services with 15+ years of experience. We handle residential and commercial jobs with precision.\", tagline: \"Reliable Plumbing, Guaranteed Results\"\n- For \"Green Thumb Landscaping\" (Landscaping): services: \"Garden Design, Lawn Mowing, Tree Trimming, Paving, Mulching\", about: \"Transform your outdoor space into a lush paradise. Expert landscaping for residential and commercial properties.\", tagline: \"Beautiful Gardens, Happy Customers\"\n\nMake it specific to the trade and professional. Return ONLY the JSON.`;\n\n try {\n const resp = await fetch(\"https://api.anthropic.com/v1/messages\", {\n method: \"POST\",\n headers: {\n \"Content-Type\": \"application/json\",\n \"x-api-key\": anthropicKey,\n \"anthropic-version\": \"2023-06-01\",\n },\n body: JSON.stringify({\n model: \"claude-haiku-4-5-20251001\",\n max_tokens: 512,\n messages: [{\n role: \"user\",\n content: prompt,\n }],\n }),\n });\n\n if (!resp.ok) {\n console.error(\"Claude content generation error:\", await resp.text());\n return null;\n }\n\n const data = await resp.json();\n const rawText = data.content[0].text.trim();\n\n let content: Record;\n try {\n const cleaned = rawText\n .replace(/^```json\\s*/, \"\")\n .replace(/^```\\s*/, \"\")\n .replace(/```\\s*$/, \"\")\n .trim();\n content = JSON.parse(cleaned);\n } catch {\n console.error(\"Failed to parse content response:\", rawText);\n return null;\n }\n\n return {\n services: content.services || \"\",\n about: content.about || \"\",\n tagline: content.tagline || \"\",\n };\n } catch (e) {\n console.error(\"Error generating business content:\", e);\n return null;\n }\n}\n\nexport async function handleAdminScan(c: any) {\n try {\n const body = await c.req.parseBody();\n const file = body[\"photo\"] as File | undefined;\n\n if (!file || !file.size) {\n return c.html(\n adminScanPage(\"Missing photo.\", undefined),\n 400,\n );\n }\n\n // Convert image to base64\n const arrayBuf = await file.arrayBuffer();\n const bytes = new Uint8Array(arrayBuf);\n var binary = \"\";\n for (var i = 0; i < bytes.length; i++) {\n binary += String.fromCharCode(bytes[i]);\n }\n const base64 = btoa(binary);\n const mediaType = file.type || \"image/jpeg\";\n\n // Call Claude Vision\n const anthropicKey = Deno.env.get(\"ANTHROPIC_KEY\");\n if (!anthropicKey) {\n return c.html(\n adminScanPage(\"ANTHROPIC_KEY env var not set.\", undefined),\n 500,\n );\n }\n\n // Step 1: Extract info from photo\n const prompt =\n \"This is a tradie business ad or business card. Extract ALL information and return ONLY a JSON object with these fields (use empty string if not found):\\n\" +\n \"{\\n\" +\n ' \"name\": \"business name\",\\n' +\n ' \"trade\": \"type of trade e.g. Lawn Mowing, Plumber, Carpenter\",\\n' +\n ' \"phone\": \"phone number digits only\",\\n' +\n ' \"email\": \"email address if visible\",\\n' +\n ' \"suburb\": \"suburb or area\",\\n' +\n ' \"services\": \"comma separated list of services exactly as shown\",\\n' +\n ' \"credentials\": \"any licences, clearances or certifications e.g. Police Clearance, Licensed Plumber\",\\n' +\n ' \"tagline\": \"any slogan or tagline\"\\n' +\n \"}\\n\" +\n \"Return ONLY the JSON. No explanation. No markdown. No backticks.\";\n\n const aiResp = await fetch(\"https://api.anthropic.com/v1/messages\", {\n method: \"POST\",\n headers: {\n \"Content-Type\": \"application/json\",\n \"x-api-key\": anthropicKey,\n \"anthropic-version\": \"2023-06-01\",\n },\n body: JSON.stringify({\n model: \"claude-haiku-4-5-20251001\",\n max_tokens: 1024,\n messages: [{\n role: \"user\",\n content: [\n {\n type: \"image\",\n source: {\n type: \"base64\",\n media_type: mediaType,\n data: base64,\n },\n },\n {\n type: \"text\",\n text: prompt,\n },\n ],\n }],\n }),\n });\n\n if (!aiResp.ok) {\n const errText = await aiResp.text();\n return c.html(\n adminScanPage(\"Claude API error: \" + errText, undefined),\n 500,\n );\n }\n\n const aiData = await aiResp.json();\n const rawText = aiData.content[0].text.trim();\n\n let extracted: Record;\n try {\n const cleaned = rawText\n .replace(/^```json\\s*/, \"\")\n .replace(/^```\\s*/, \"\")\n .replace(/```\\s*$/, \"\")\n .trim();\n extracted = JSON.parse(cleaned);\n } catch {\n return c.html(\n adminScanPage(\"Could not parse Claude response: \" + rawText, undefined),\n 500,\n );\n }\n\n const phone = extracted.phone || \"\";\n if (!phone) {\n return c.html(\n adminScanPage(\"Claude could not extract a phone number from the ad.\", undefined),\n 400,\n );\n }\n\n let user = await getUserByPhone(phone);\n if (!user) {\n await createUser({ phone, pin: phone.slice(-4), name: phone, trade: \"Tradie\", email: \"\", tagline: \"\", suburb: \"\" });\n user = await getUserByPhone(phone);\n }\n\n // Step 2: Generate polished content (services, about, tagline)\n let generated = { services: \"\", about: \"\", tagline: \"\" };\n if (extracted.name && extracted.trade) {\n const content = await generateBusinessContent(\n extracted.name,\n extracted.trade,\n anthropicKey,\n );\n if (content) {\n generated = content;\n }\n }\n\n // Update database — use generated content as defaults, but keep extracted info\n await updateUser(phone, {\n name: extracted.name || String(user.name || \"\"),\n trade: extracted.trade || String(user.trade || \"\"),\n tagline:\n extracted.tagline || generated.tagline ||\n String(user.tagline || \"\"),\n suburb: extracted.suburb || String(user.suburb || \"\"),\n services:\n extracted.services || generated.services ||\n String(user.services || \"\"),\n credentials: extracted.credentials || String(user.credentials || \"\"),\n email: extracted.email || String(user.email || \"\"),\n about: generated.about || String(user.about || \"\"),\n years_experience: String(user.years_experience || \"\"),\n website: String(user.website || \"\"),\n instagram: String(user.instagram || \"\"),\n facebook: String(user.facebook || \"\"),\n });\n await blob.set(\"itabsbc-card-back-\" + phone, new Blob([arrayBuf], { type: mediaType }));\n\n const url = new URL(c.req.url);\n const cardUrl = url.protocol + \"//\" + url.host + \"/card/\" + phone;\n\n return c.html(adminScanPage(\n \"✅ Card complete! Claude extracted: \" + extracted.name + \" · \" +\n extracted.trade + \" · \" + (generated.services\n ? generated.services.split(\",\")[0].trim()\n : \"no services\"),\n cardUrl,\n ));\n } catch (e) {\n return c.html(\n adminScanPage(\"Unexpected error: \" + String(e), undefined),\n 500,\n );\n }\n}\n",[193],"fa497744-4234-11f1-9a5c-42b51c65c3df","DEMO.md","e6a1f552-3fbb-11f1-b87a-42b51c65c3df",175,["D",1777293072987],"Canning Examiner Tradie Directory Demo\n\nThis demo stitches together a local tradie directory with iTabs business cards. The flow is:\n\n1. Directory page (/) shows all tradies as clean tiles with emoji icons, trade type, and suburb\n2. Tap any tile to open their full iTabs card\n3. Each card displays full profile, contact options, and work portfolio\n\nFeatures\n\n- Directory page with responsive grid layout (auto-adjusts to device width)\n- Clean tile design with business name, trade type, suburb, and tagline\n- Emoji icons automatically assigned based on trade type\n- Smooth hover effects and transitions\n- Click any tile to view their iTabs card\n- All tradies have shareable card links\n\nAdmin Features\n\n- **/admin** — Unified admin panel with:\n - Quick links to Directory, New Card signup, and Self-Service claim\n - Tap-to-copy Directory URL\n - Business card scanning with two-step AI enrichment\n - Real-time feedback and card view links\n \n- **/claim** — Self-service card creation for tradies:\n - Upload business card photo (camera or gallery)\n - Claude reads and extracts details\n - AI generates polished services, description, tagline\n - Instant shareable link + WhatsApp integration\n\nDemo Tradies\n\nThe directory includes 6 demo tradies:\n\n1. City Metro Plumbing - Plumber in Perth (🔧)\n2. Brian's Mowing - Lawn Mowing in Canning (🌱)\n3. Colin's Bricklaying - Bricklaying in Thornlie (🧱)\n4. Graham Carpenter Handyman - Carpentry & Handyman in Armadale (🪵)\n5. Armadale Mini Loads - Removals & Transport in Armadale (🚚)\n6. ALV Carpentry - Carpentry in Kelmscott (🪵)\n\nHow to Use\n\n**For Tradies (Self-Service):**\n1. Visit /claim\n2. Take a photo of your business card (or choose from gallery)\n3. Claude reads it and creates your card\n4. Get your shareable link instantly\n5. Share on WhatsApp, email, etc.\n\n**For Directory Viewing:**\n1. Visit the live URL to see the directory\n2. Click any tradie tile to open their iTabs card\n3. From the card, you can:\n - Call them directly\n - Send a WhatsApp message\n - Email them\n - Save their contact\n - View their full profile (flip the card)\n - Browse work portfolio\n - Share their card\n\n**Admin Scanning:**\nUse /admin to create cards for tradies from photos of their ads\n- Unified interface with quick navigation\n- Copy directory URL for sharing\n- Scan and fill card in one workflow\n- Two-step AI: extract details + generate polished content\n\nAdding More Tradies\n\nTo add tradies manually, edit seed-tradies.ts and run it:\n\nnpm run seed\n\nOr use the signup flow at /signup to register new tradies with their own iTabs cards.\n\nFiles Structure\n\n- app.ts - Main HTTP handler with all routes\n- admin.ts - Unified admin panel with card scanner\n- claim.ts - Self-service card claim flow\n- pages/directory.ts - Directory page component with styling\n- pages/card.ts - Individual iTabs card component\n- database.ts - User/tradie data management\n- seed-tradies.ts - Demo tradie data seeder\n",[201],"b08793aa-4213-11f1-b2a6-42b51c65c3df","CLAIM_FEATURE.md","b087945e-4213-11f1-b2a6-42b51c65c3df",165,["D",1777278775858],"# 📸 /claim — Self-Service Card Creation\n\nThe new `/claim` route is a beautiful, mobile-first landing page that lets tradies instantly create their digital iTabs card by uploading a photo of their business card. **No login. No forms. Just the photo.**\n\n## Design Philosophy\n\n- **Mobile-first**: Optimized for phone cameras and small screens\n- **Frictionless**: Single action (tap photo) → Instant result\n- **Delightful**: Clean dark UI with green accents, smooth animations, real-time preview\n- **Accessible**: Works with tap, drag-drop, or camera capture\n\n## User Flow\n\n### Stage 1: Upload\n```\n📸 Get Your Digital Business Card\nPhoto your card. Get your link. Share it on WhatsApp.\n\n[📸 Tap to upload / Drag photo here]\n```\n\n**Features:**\n- Click to open camera or file picker\n- Drag-and-drop support (desktop)\n- `capture=\"environment\"` on input for mobile native camera\n- Real-time image preview after selection\n- \"Create My Card\" button appears once preview loads\n\n### Stage 2: Processing\n```\n⏳ Extracting info... Generating content... (~15s)\n🔄 Loading spinner\n```\n\n**What's Happening:**\n- Step 1: Claude Vision extracts name, phone, trade, email, suburb, etc.\n- Step 2: Claude generates 3-5 services, description, and tagline\n- Saves all data to database\n- Stores card photo\n\n### Stage 3: Success\n```\n✅ Your Card is Live!\nShare your digital business card instantly.\n\n📦 Your iTabs URL\nhttps://example.com/card/0412345678\n\n[📋 Copy Link] [💬 Share WhatsApp]\n\nView your card →\n```\n\n**Features:**\n- Large, easy-to-read URL in monospace font\n- **Copy Link**: One-click copy to clipboard (shows ✓ feedback)\n- **Share WhatsApp**: Pre-fills message with card URL\n ```\n \"Check out my digital business card on iTabs 👇 [URL]\"\n ```\n- Direct link to view their card\n- No PIN required (they can edit later if needed)\n\n### Stage 4: Error\n```\n❌ Oops!\nSomething went wrong\n\n[Error message in red box]\n\n[🔄 Try Again]\n```\n\n**Error Handling:**\n- No photo selected\n- Photo too blurry/unreadable\n- No phone number found on card\n- API failures (graceful)\n\n## Technical Details\n\n### Backend (`handleClaim`)\n1. Receives multipart form with photo file\n2. Converts image to base64\n3. **Extract Pass** (Claude Vision):\n - Sends image + extraction prompt\n - Returns JSON with name, phone, trade, email, suburb, services, credentials\n4. **Generate Pass** (Claude Text):\n - Uses business name + trade type\n - Returns polished services list, description (1-2 sentences), tagline (max 6 words)\n5. Creates user if phone number is new\n6. Updates user with all fields (extracted + generated)\n7. Saves card photo to blob storage\n8. Returns success page with card URL\n\n### Frontend (Pure HTML/JS)\n- No frameworks or build step\n- Vanilla JavaScript for interactivity\n- Inline styles for mobile-first responsive design\n- CSS transitions for smooth animations\n- FormData API for file uploads\n- FileReader for client-side image preview\n\n### Mobile Optimizations\n```html\n\n```\n- `capture=\"environment\"` prompts native camera on mobile\n- `accept=\"image/*\"` filters to image files only\n- Viewport meta tag for mobile scaling\n- Touch-friendly button sizes (14px+ text, 44px+ tap targets)\n\n## Error Recovery\n\nIf Claude can't read the card:\n- **No phone number**: \"Could not find a phone number on your card.\"\n- **Blurry/unreadable**: \"Could not read your card. Please try a clearer photo.\"\n- **API error**: \"Could not read your card. Please try again.\"\n\nUser can tap \"Try Again\" to reload and try a different photo.\n\n## Sharing Integration\n\nWhatsApp button uses `wa.me` with pre-filled message:\n\n```javascript\nconst shareText = encodeURIComponent(\n `Check out my digital business card on iTabs 👇 ${cardUrl}`\n);\nwindow.open(`https://wa.me/?text=${shareText}`, '_blank');\n```\n\nWorks on:\n- ✅ Mobile (WhatsApp app opens or web.whatsapp.com)\n- ✅ Desktop (web.whatsapp.com)\n- ✅ Fallback if WhatsApp not installed (link still works)\n\n## Styling System\n\nDark mode (default for iTabs brand):\n- Background: `#0a0a0f` (nearly black)\n- Surface: `#12121a` (dark gray)\n- Border: `#1e1e2e` (slightly lighter)\n- Text: `#fff` (white)\n- Accent: `#22c55e` (bright green)\n- Secondary: `#9ca3af` (medium gray)\n- Error: `#f87171` (bright red)\n\nResponsive container:\n- Max width: 500px\n- Padding: 16px on mobile, scales up\n- Works from 320px (iPhone SE) to desktop\n\n## Routes\n\n```typescript\nGET /claim → Display upload form\nPOST /claim → Process photo, return success/error page\n```\n\n## Database Impact\n\nFor each successful claim:\n- Creates new user if phone doesn't exist\n- Updates user with extracted + generated fields:\n - `name`, `trade`, `phone`, `email`, `suburb`\n - `services`, `about`, `tagline`, `credentials`\n- Saves card photo to blob storage: `itabsbc-card-back-${phone}`\n\n## Future Enhancements\n\n- SMS share button (for non-WhatsApp users)\n- QR code generation for printed cards\n- Edit form link after success (with PIN setup prompt)\n- Analytics tracking (page views, shares, card views)\n- A/B testing different CTAs\n- Multi-language support\n\n## Testing\n\nTry with:\n- Real business card photo (best case)\n- Business card screenshot\n- Ad flyer with business details\n- Letterhead\n- Blurry/angled photo (tests error handling)\n",[208],"04e0f092-4235-11f1-99af-42b51c65c3df","ADMIN_PANEL.md","04e0f13c-4235-11f1-99af-42b51c65c3df",176,["D",1777293090761],"# 🔧 /admin — Unified Admin Panel\n\nThe new `/admin` page consolidates all admin functions into a single, clean interface. Everything is on one screen — no navigation between pages.\n\n## Layout\n\n```\n┌─────────────────────────────────────────┐\n│ 🔧 iTabs Admin │\n│ │\n│ [📁 Directory] [➕ New Card] [📸 Self] │\n│ │\n│ Directory URL │\n│ https://example.com/ [Copy] │\n├─────────────────────────────────────────┤\n│ 📸 Scan Business Card │\n│ │\n│ Upload a tradie ad photo — Claude │\n│ reads it and fills the card auto. │\n│ │\n│ [Choose File...] │\n│ [🔍 Scan & Fill Card] │\n│ ⏳ Processing... │\n└─────────────────────────────────────────┘\n```\n\n## Sections\n\n### Header Section\n\n**Title:** 🔧 iTabs Admin\n\n**Quick Links** (3 buttons):\n- 📁 **Directory** → `/` — View the tradie directory\n- ➕ **New Card** → `/signup` — Register a new tradie manually\n- 📸 **Self-Service** → `/claim` — Link for tradies to self-claim their card\n\n**Directory URL Box:**\n- Shows the full directory URL (e.g., `https://example.com/`)\n- One-click \"Copy\" button\n- Feedback: shows \"✓ Copied!\" for 2 seconds after click\n- Perfect for sharing the directory link\n\n### Scan Form Section\n\n**Title:** 📸 Scan Business Card\n\n**Description:** \"Upload a tradie ad photo — Claude reads it and fills the card automatically.\"\n\n**Input:**\n- File picker labeled \"Ad Photo\"\n- Accept image files only (`accept=\"image/*\"`)\n- Required field\n\n**Button:**\n- \"🔍 Scan & Fill Card\"\n- Full width, green background\n- Disabled during processing\n\n**Loading State:**\n- Hidden by default\n- Shows animated spinner + \"Extracting info... Generating content... (~15s)\"\n- Replaces button during processing\n\n**Success/Error:**\n- Green box with success message if scan worked\n- Red box with error message if scan failed\n- Shows \"View card →\" link on success (opens new tab)\n\n## Two-Step AI Processing\n\nWhen admin uploads a card photo:\n\n1. **Extract Pass** (Claude Vision)\n - Reads the image\n - Extracts: name, phone, trade, email, suburb, services, credentials\n - Returns structured JSON\n\n2. **Generate Pass** (Claude Text)\n - Uses business name + trade type\n - Generates polished content:\n - **Services:** 3-5 specific services\n - **Description:** 1-2 professional sentences\n - **Tagline:** Max 6-word catchy phrase\n - Returns structured JSON\n\n3. **Database Update**\n - Creates user if phone number is new\n - Updates all fields with extracted + generated data\n - Saves card photo to blob storage\n\n## Workflow Example\n\n**Scenario:** Admin has a photo of a plumber's business card\n\n1. Navigate to `/admin`\n2. Click on file input → choose card photo\n3. Click \"🔍 Scan & Fill Card\"\n4. Wait ~15 seconds...\n5. See green success box: \"✅ Card complete! John's Plumbing · Plumber\"\n6. Click \"View card →\" to open the new card in a new tab\n7. Card is instantly live and shareable\n8. Admin can click \"📸 Self-Service\" to send /claim link to the tradie\n\n## Design System\n\n**Colors:**\n- Background: `#0a0a0f` (almost black)\n- Surface: `#12121a` (dark gray)\n- Accent: `#22c55e` (bright green)\n- Text: `#fff` (white)\n- Secondary text: `#6b7280` (medium gray)\n- Success: green with `rgba(22,163,74,0.15)` background\n- Error: red with `rgba(239,68,68,0.15)` background\n\n**Typography:**\n- Title: 20px, bold 800, green\n- Section heading: 16px, bold 800, green\n- Description: 12px, medium gray\n- Labels: 11px uppercase, bold 700\n\n**Spacing:**\n- Container: max 600px wide, centered\n- Sections: 28px padding, 16px gaps\n- Form fields: 16px bottom margin\n\n**Interactions:**\n- Hover on links: background changes to green, text to black\n- Hover on buttons: background brightens to `#22c55e`\n- Smooth 0.2s transitions on all color changes\n- Copy button shows \"✓ Copied!\" feedback\n\n## Routes\n\n```typescript\nGET /admin → Display admin panel\nPOST /admin → Process card photo, show result\n```\n\n## Keyboard Shortcuts\n\nNone yet, but future enhancements could include:\n- `Cmd+S` to focus file input\n- `Cmd+K` to focus directory URL and copy\n- Tab navigation through form\n\n## Mobile Optimization\n\n- Responsive to 320px (iPhone SE) and up\n- Touch-friendly buttons (44px minimum tap target)\n- File input works with camera + gallery picker on mobile\n- Flexbox layout adapts to narrow screens\n- Text sizes stay readable at all widths\n\n## Browser Support\n\n- Works in all modern browsers (Chrome, Safari, Firefox, Edge)\n- Requires:\n - FormData API (IE10+)\n - Fetch API (no IE11)\n - CSS Grid/Flexbox (no IE11)\n\n## Future Enhancements\n\n- **Bulk upload** — Upload multiple photos in one batch\n- **Edit inline** — Click fields to edit extracted data before saving\n- **Preview** — Show extracted/generated content in a modal before saving\n- **History** — Show recently scanned cards in a list\n- **Export** — Download list of all created cards as CSV\n- **Search** — Find existing cards by phone or name\n- **Batch operations** — Select multiple cards and apply actions\n- **Dark mode toggle** — Switch between dark/light themes\n- **Analytics** — Track scan success rate, AI processing time, etc.\n",[215],"54179cc8-4493-11f1-b487-42b51c65c3df","untitled-folder-1747","d86529c0-694a-491d-8e24-859abbaa012f",264,["D",1777553498663],1,"directory",[222],"09bed708-43d1-11f1-bce2-42b51c65c3df","skills","09bed7ee-43d1-11f1-bce2-42b51c65c3df",228,["D",1777470051579],[230],"pulls","branches","forks","envVars",{"_242":244,"_245":64},"connections",{"_242":64,"_243":64},"count","unfilledCount",3,"emptyCount",{"_44":229,"_32":230,"_30":231,"_147":-5,"_42":43,"_41":232,"_149":60,"_39":376,"_13":64,"_34":227,"_36":-5,"_24":25,"_152":-5,"_269":377,"_27":378},{"_44":371,"_32":370,"_30":364,"_147":231,"_42":43,"_41":372,"_149":60,"_39":373,"_13":64,"_34":227,"_36":-5,"_24":25,"_152":-5,"_269":374,"_27":375},{"_44":361,"_32":362,"_30":363,"_147":364,"_42":43,"_41":365,"_149":60,"_39":366,"_13":64,"_34":20,"_36":367,"_24":25,"_152":-5,"_269":368,"_27":369},{"_44":221,"_32":222,"_30":223,"_147":-5,"_42":43,"_41":224,"_149":25,"_39":358,"_13":226,"_34":227,"_36":-5,"_24":25,"_152":-5,"_269":359,"_27":360},{"_44":352,"_32":222,"_30":353,"_147":223,"_42":43,"_41":354,"_149":25,"_39":355,"_13":64,"_34":227,"_36":-5,"_24":25,"_152":-5,"_269":356,"_27":357},{"_44":343,"_32":344,"_30":345,"_147":223,"_42":43,"_41":346,"_149":25,"_39":347,"_13":348,"_34":35,"_36":349,"_24":25,"_152":-5,"_269":350,"_27":351},{"_44":334,"_32":335,"_30":336,"_147":223,"_42":43,"_41":337,"_149":60,"_39":338,"_13":339,"_34":35,"_36":340,"_24":25,"_152":-5,"_269":341,"_27":342},{"_44":326,"_32":327,"_30":328,"_147":223,"_42":43,"_41":329,"_149":25,"_39":330,"_13":148,"_34":35,"_36":331,"_24":25,"_152":-5,"_269":332,"_27":333},{"_44":318,"_32":319,"_30":320,"_147":223,"_42":43,"_41":321,"_149":25,"_39":322,"_13":64,"_34":35,"_36":323,"_24":25,"_152":-5,"_269":324,"_27":325},{"_44":314,"_32":33,"_30":31,"_147":223,"_42":43,"_41":14,"_149":25,"_39":315,"_13":226,"_34":35,"_36":38,"_24":25,"_152":-5,"_269":316,"_27":317},{"_44":306,"_32":307,"_30":308,"_147":223,"_42":43,"_41":309,"_149":60,"_39":310,"_13":64,"_34":35,"_36":311,"_24":25,"_152":-5,"_269":312,"_27":313},{"_44":299,"_32":300,"_30":301,"_147":223,"_42":43,"_41":244,"_149":60,"_39":302,"_13":64,"_34":35,"_36":303,"_24":25,"_152":-5,"_269":304,"_27":305},{"_44":214,"_32":215,"_30":216,"_147":-5,"_42":43,"_41":217,"_149":60,"_39":296,"_13":64,"_34":20,"_36":219,"_24":25,"_152":-5,"_269":297,"_27":298},{"_44":207,"_32":208,"_30":209,"_147":-5,"_42":43,"_41":210,"_149":60,"_39":293,"_13":64,"_34":20,"_36":212,"_24":25,"_152":-5,"_269":294,"_27":295},{"_44":200,"_32":201,"_30":202,"_147":-5,"_42":43,"_41":203,"_149":60,"_39":290,"_13":148,"_34":20,"_36":205,"_24":25,"_152":-5,"_269":291,"_27":292},{"_44":192,"_32":193,"_30":194,"_147":-5,"_42":43,"_41":195,"_149":60,"_39":287,"_13":197,"_34":35,"_36":198,"_24":25,"_152":-5,"_269":288,"_27":289},{"_44":184,"_32":185,"_30":186,"_147":-5,"_42":43,"_41":187,"_149":25,"_39":284,"_13":189,"_34":35,"_36":190,"_24":25,"_152":-5,"_269":285,"_27":286},{"_44":176,"_32":177,"_30":58,"_147":-5,"_42":43,"_41":178,"_149":25,"_39":281,"_13":180,"_34":181,"_36":182,"_24":25,"_152":-5,"_269":282,"_27":283},{"_44":169,"_32":170,"_30":171,"_147":-5,"_42":43,"_41":172,"_149":60,"_39":278,"_13":166,"_34":35,"_36":174,"_24":25,"_152":-5,"_269":279,"_27":280},{"_44":161,"_32":162,"_30":163,"_147":-5,"_42":43,"_41":164,"_149":25,"_39":275,"_13":166,"_34":35,"_36":167,"_24":25,"_152":-5,"_269":276,"_27":277},{"_44":154,"_32":155,"_30":156,"_147":-5,"_42":43,"_41":157,"_149":60,"_39":272,"_13":64,"_34":35,"_36":159,"_24":25,"_152":-5,"_269":273,"_27":274},{"_44":144,"_32":145,"_30":146,"_147":-5,"_42":43,"_41":148,"_149":60,"_39":268,"_13":64,"_34":35,"_36":151,"_24":25,"_152":-5,"_269":270,"_27":271},["D",1776858883395],"children",[],[145],["D",1777021151641],[],[155],["D",1777021141329],[],[162],["D",1777281412989],[],[170],["D",1777551395109],[],[177],["D",1777551425678],[],[185],["D",1777277408613],[],[193],["D",1777293072987],[],[201],["D",1777278775858],[],[208],["D",1777293090761],[],[215],"14a3e35a-3e42-11f1-a184-42b51c65c3df","signup.ts","14a3e40e-3e42-11f1-a184-42b51c65c3df",["D",1776858896001],"import { baseCSS } from \"../styles.ts\";\n\nexport function signupPage(error?: string) {\n var errorHtml = error\n ? (\"

\" + error + \"

\")\n : \"\";\n\n return (\n \"\" +\n \"\" +\n \"\" +\n \"iTabs BC — Sign Up\" +\n \"\" +\n \"\" +\n \"

\" +\n \"

iTabs BC 2.0

\" +\n \"

Create your card

\" +\n \"

Sign up free

\" +\n errorHtml +\n \"\" +\n \"

\" +\n \"

\" +\n \"\"\n );\n}\n",[],[222,300],"8a83ce30-3fa2-11f1-9b84-42b51c65c3df","reset.ts","8a83cee4-3fa2-11f1-9b84-42b51c65c3df",102,["D",1777010276622],"import { baseCSS } from \"../styles.ts\";\n\nexport function resetPage(phone: string, error?: string) {\n var errorHtml = error ? (\"

\" + error + \"

\") : \"\";\n return (\n \"\" +\n \"\" +\n \"\" +\n \"Reset PIN — iTabs BC\" +\n \"\" +\n \"\" +\n \"

\" +\n \"

iTabs BC 2.0

\" +\n \"

Reset your PIN

\" +\n \"

Enter the email address on your account and we will send a reset link.

\" +\n errorHtml +\n \"\" +\n \"

← Back to edit

\" +\n \"

\"\n );\n}\n\nexport function resetSentPage(phone: string) {\n return (\n \"\" +\n \"\" +\n \"\" +\n \"Check Your Email — iTabs BC\" +\n \"\" +\n \"\" +\n \"

\" +\n \"

iTabs BC 2.0

\" +\n \"

Check your email

\" +\n \"

We have sent a reset link to the email address on your account. Click the link in the email to set a new PIN.

\" +\n \"

The link will expire in 15 minutes.

\" +\n \"

← Back to edit

\" +\n \"

\"\n );\n}\n\nexport function resetConfirmPage(phone: string, error?: string) {\n var errorHtml = error ? (\"

\" + error + \"

\") : \"\";\n return (\n \"\" +\n \"\" +\n \"\" +\n \"Create New PIN — iTabs BC\" +\n \"\" +\n \"\" +\n \"

\" +\n \"

iTabs BC 2.0

\" +\n \"

Create a new PIN

\" +\n \"

Enter a new 4-digit PIN below.

\" +\n errorHtml +\n \"\" +\n \"

\"\n );\n}\n\nexport function resetSuccessPage(phone: string) {\n return (\n \"\" +\n \"\" +\n \"\" +\n \"PIN Updated — iTabs BC\" +\n \"\" +\n \"\" +\n \"

\" +\n \"

iTabs BC 2.0

\" +\n \"

PIN updated!

\" +\n \"

Your new PIN has been saved. You can now use it to edit your card.

\" +\n \"

← Back to your card

\" +\n \"

\"\n );\n}\n\nexport function resetExpiredPage(phone: string) {\n return (\n \"\" +\n \"\" +\n \"\" +\n \"Link Expired — iTabs BC\" +\n \"\" +\n \"\" +\n \"

\" +\n \"

iTabs BC 2.0

\" +\n \"

Link expired

\" +\n \"

This reset link has expired. Please request a new one.

\" +\n \"

← Request new link

\" +\n \"

\"\n );\n}\n",[],[222,307],"570e1290-4493-11f1-847c-42b51c65c3df",["D",1777553503613],[],[222,33],"f6cfd982-4487-11f1-ba67-42b51c65c3df","edit.ts","f6cfda36-4487-11f1-ba67-42b51c65c3df",256,["D",1777548617713],"import { baseCSS } from \"../styles.ts\";\n\nexport function editPinPage(phone: string, error?: string) {\n var errorHtml = error ? (\"

\" + error + \"

\") : \"\";\n return (\n \"\" +\n \"\" +\n \"\" +\n \"Edit Card — iTabs BC\" +\n \"\" +\n \"\" +\n \"

\" +\n \"

iTabs BC 2.0

\" +\n \"

Edit your card

Enter your PIN

\" +\n errorHtml +\n \"\" +\n \"

Forgot your PIN? Reset it here

\" +\n \"

← Back to card

\" +\n \"

\"\n );\n}\n\nexport function editFormPage(\n user: Record,\n hasPhoto: boolean,\n hasCardFront: boolean,\n hasCardBack: boolean,\n hasWorkPhoto1: boolean,\n hasWorkPhoto2: boolean,\n hasWorkPhoto3: boolean,\n hasWorkPhoto4: boolean,\n error?: string\n) {\n var phone = String(user.phone || \"\");\n var name = String(user.name || \"\");\n var trade = String(user.trade || \"\");\n var email = String(user.email || \"\");\n var tagline = String(user.tagline || \"\");\n var suburb = String(user.suburb || \"\");\n var services = String(user.services || \"\");\n var about = String(user.about || \"\");\n var yearsExp = String(user.years_experience || \"\");\n var credentials = String(user.credentials || \"\");\n var website = String(user.website || \"\");\n var instagram = String(user.instagram || \"\");\n var facebook = String(user.facebook || \"\");\n\n var errorHtml = error ? (\"

\" + error + \"

\") : \"\";\n\n // Profile photo preview\n var avatarHtml = hasPhoto\n ? (\"

\")\n : (\"

\" + name.charAt(0).toUpperCase() + \"

\");\n\n // Generic card/work photo slot\n function photoSlot(id: string, hasImage: boolean, src: string, aspect: string) {\n if (hasImage) {\n return (\n \"

\" +\n \"

\"\n );\n }\n return (\n \"

\" +\n \"No photo yet\" +\n \"

\"\n );\n }\n\n // Hint text helper\n function hintText(text: string) {\n return \"

\" + text + \"

\";\n }\n\n // Section heading helper\n function sectionHead(label: string) {\n return \"

\" + label + \"

\";\n }\n\n var css = baseCSS + [\n \".photo-pick { display:inline-block;background:#0a0a0f;border:1px dashed #06b6d4;color:#06b6d4;border-radius:10px;padding:7px 16px;font-size:13px;font-weight:600;cursor:pointer;transition:background 0.2s; }\",\n \".photo-pick:hover { background:#06b6d410; }\",\n \".file-hidden { display:none; }\",\n \".upload-status { font-size:12px;color:#06b6d4;margin-top:6px;display:none; }\",\n \".work-grid { display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:4px; }\",\n \".work-slot { display:flex;flex-direction:column; }\",\n \".work-slot-label { font-size:11px;color:#6b7280;letter-spacing:1px;text-transform:uppercase;margin-bottom:6px; }\",\n ].join(\" \");\n\n // Work photo grid cells\n function workSlot(n: number, hasImg: boolean) {\n var id = \"work-photo-\" + n;\n var src = \"/work-photo-\" + n + \"/\" + phone;\n return (\n \"

\" +\n \"Photo \" + n + \"\" +\n photoSlot(id, hasImg, src, \"1\") +\n \"\" + (hasImg ? \"Replace\" : \"+ Add\") + \"\" +\n \"\" +\n \"

\" +\n \"

\"\n );\n }\n\n // Upload JS — one reusable function, no template literals\n var uploadScript = (\n \"\"\n );\n\n return (\n \"\" +\n \"\" +\n \"\" +\n \"Edit Card — iTabs BC\" +\n \"\" +\n \"\" +\n \"

\" +\n \"

iTabs BC 2.0

\" +\n \"

Edit your card

\" +\n errorHtml +\n\n \"

\" +\n\n // ── YOUR PROFILE ──────────────────────────────────────\n sectionHead(\"Your Profile\") +\n \"\" +\n \"

\" +\n avatarHtml +\n \"

\" +\n \"📷 Choose File\" +\n \"\" +\n \"

\" +\n \"\" +\n \"\" +\n \"

\" +\n \"

Full Name\" +\n hintText(\"Shows as your headline on your profile slide\") +\n \"

\" +\n \"

Trade\" +\n hintText(\"Shows under your name — e.g. Plumber, Electrician, Developer\") +\n \"

\" +\n \"

Suburb\" +\n hintText(\"Shows on your profile slide — e.g. Joondalup, Fremantle\") +\n \"

\" +\n \"

Tagline\" +\n hintText(\"Shows as a pull quote on your profile slide — one punchy line\") +\n \"

\" +\n \"

\" +\n\n // ── ABOUT YOU ─────────────────────────────────────────\n sectionHead(\"About You\") +\n \"

About\" +\n \"\" +\n hintText(\"Your story — 2 to 3 sentences shown on your Who I Am slide\") +\n \"

\" +\n \"

Years Experience\" +\n \"\" +\n hintText(\"Shows as a bold stat on your Services slide — e.g. 15\") +\n \"

\" +\n \"

Credentials\" +\n \"\" +\n hintText(\"Licence number, insurance, certifications — shown as a trust badge\") +\n \"

\" +\n\n // ── SERVICES ──────────────────────────────────────────\n sectionHead(\"Services\") +\n \"

Your Services (comma separated)\" +\n \"\" +\n hintText(\"Comma separated — each one becomes a pill tag on your Services slide e.g. Blocked drains, Hot water, Gas fitting\") +\n \"

\" +\n\n // ── ONLINE ────────────────────────────────────────────\n sectionHead(\"Online Presence\") +\n \"

Website\" +\n hintText(\"Shows as a link button on your Connect slide\") +\n \"

\" +\n \"

Instagram\" +\n hintText(\"Shows as a link button on your Connect slide — just your handle\") +\n \"

\" +\n \"

Facebook\" +\n hintText(\"Shows as a link button on your Connect slide\") +\n \"

\" +\n\n \"\" +\n \"

\" +\n\n // ── BUSINESS CARD PHOTOS (outside form — AJAX upload) ─\n sectionHead(\"Business Card Photos\") +\n \"

\" +\n \"Card Front\" +\n photoSlot(\"card-front-preview\", hasCardFront, \"/card-front/\" + phone, \"1.75\") +\n \"🪪 \" + (hasCardFront ? \"Replace Front\" : \"Upload Front\") + \"\" +\n \"\" +\n \"

\" +\n hintText(\"Front of your physical business card — shown on slide 1\") +\n \"

\" +\n \"

\" +\n \"Card Back\" +\n photoSlot(\"card-back-preview\", hasCardBack, \"/card-back/\" + phone, \"1.75\") +\n \"🪪 \" + (hasCardBack ? \"Replace Back\" : \"Upload Back\") + \"\" +\n \"\" +\n \"

\" +\n hintText(\"Back of your physical business card — flip it to reveal\") +\n \"

\" +\n\n // ── WORK PHOTOS ───────────────────────────────────────\n sectionHead(\"Work Photos\") +\n \"

\" +\n workSlot(1, hasWorkPhoto1) +\n workSlot(2, hasWorkPhoto2) +\n workSlot(3, hasWorkPhoto3) +\n workSlot(4, hasWorkPhoto4) +\n \"

\" +\n \"

Your 4 best job photos — shown as a grid on your My Work slide

\" +\n\n \"

← Back to card

\" +\n \"

\" +\n uploadScript +\n \"\"\n );\n}\n",[],[222,319],"0ccd605c-448c-11f1-8f1c-42b51c65c3df","directory.ts","c1793330-3fbb-11f1-8304-42b51c65c3df",258,["D",1777550372588],"export interface Tradie {\n phone: string;\n name: string;\n trade: string;\n suburb: string;\n tagline?: string;\n}\n\nexport function directoryPage(tradies: Tradie[]) {\n const tradieCards = tradies\n .map((t) => {\n const tradeEmoji = getTradeEmoji(t.trade);\n const href = `/card/${t.phone}`;\n const photoUrl = `/photo/${t.phone}`;\n return `\n \n

\n $\"${escapeHtml(t.name)}\"$ \n \n

${escapeHtml(t.name)}

${escapeHtml(t.trade)}

${escapeHtml(t.suburb)}

\n ${t.tagline ? `

\"${escapeHtml(t.tagline)}\"

` : ''}\n

→

\n \n `;\n })\n .join('');\n\n return `\n\n\n \n \n Canning Examiner Tradie Directory\n \n\n\n \n\n

\n ${tradieCards || '

No tradies found

Check back soon for local tradespeople.

'}\n

\n\n`;\n}\n\nfunction getTradeEmoji(trade: string): string {\n const lowerTrade = trade.toLowerCase();\n if (lowerTrade.includes('plumb')) return '🔧';\n if (lowerTrade.includes('mow') || lowerTrade.includes('lawn') || lowerTrade.includes('garden')) return '🌱';\n if (lowerTrade.includes('brick') || lowerTrade.includes('mason')) return '🧱';\n if (lowerTrade.includes('carpenter') || lowerTrade.includes('carpentry')) return '🪵';\n if (lowerTrade.includes('handyman')) return '🔨';\n if (lowerTrade.includes('load') || lowerTrade.includes('removal') || lowerTrade.includes('transport')) return '🚚';\n if (lowerTrade.includes('electric') || lowerTrade.includes('spark')) return '⚡';\n if (lowerTrade.includes('paint')) return '🎨';\n if (lowerTrade.includes('roof')) return '🏠';\n return '👨‍🔧';\n}\n\nfunction escapeHtml(text: string): string {\n const map: { [key: string]: string } = {\n '&': '&',\n '<': '<',\n '>': '>',\n '\"': '"',\n \"'\": ''',\n };\n return text.replace(/[&<>\"']/g, (c) => map[c]);\n}\n",[],[222,327],"068b6dce-4121-11f1-a0ab-42b51c65c3df","deck.ts","2a96e7ac-3e42-11f1-b05a-42b51c65c3df",127,["D",1777174552433],9,"export function deckOverlayHtml(\n user: Record,\n hasPhoto: boolean,\n cardUrl: string,\n wp1: boolean,\n wp2: boolean,\n wp3: boolean,\n wp4: boolean\n) {\n var name = String(user.name || \"\");\n var trade = String(user.trade || \"\");\n var tagline = String(user.tagline || \"\");\n var suburb = String(user.suburb || \"\");\n var phone = String(user.phone || \"\");\n var about = String(user.about || \"\");\n var services = String(user.services || \"\");\n var credentials = String(user.credentials || \"\");\n var years_experience = String(user.years_experience || \"\");\n var website = String(user.website || \"\");\n var instagram = String(user.instagram || \"\");\n var facebook = String(user.facebook || \"\");\n var views = Number(user.views || 0);\n\n var avatarHtml = hasPhoto\n ? \"

\"\n : \"

\" + name.charAt(0).toUpperCase() + \"

\";\n\n var servicePills = \"\";\n if (services) {\n var items = services.split(\",\").map(function(s) { return s.trim(); }).filter(function(s) { return s.length > 0; }).slice(0, 8);\n for (var i = 0; i < items.length; i++) {\n servicePills += \"\" + items[i] + \"\";\n }\n }\n\n var workPhotosHtml = \"\";\n if (wp1 || wp2 || wp3 || wp4) {\n workPhotosHtml = \"

\";\n var photoUrls = [\"/work-photo-1/\" + phone, \"/work-photo-2/\" + phone, \"/work-photo-3/\" + phone, \"/work-photo-4/\" + phone];\n var photoFlags = [wp1, wp2, wp3, wp4];\n for (var w = 0; w < 4; w++) {\n if (photoFlags[w]) {\n workPhotosHtml += \"

\";\n }\n }\n workPhotosHtml += \"

\";\n }\n\n var credentialsBlock = credentials\n ? \"

\" + credentials + \"

\"\n : \"\";\n\n var yearsBlock = years_experience\n ? \"

\" + years_experience + \" years experience

\"\n : \"\";\n\n function slideHeader() {\n return (\n \"

\" +\n \"\" +\n \"\" + name + \"\" +\n \"

\" +\n \"

\"\n );\n }\n\n function slideHero(photoHtml: string, gradient: string, tag: string, headline: string) {\n return \"

\" +\n photoHtml +\n \"

\" + tag + \"

\" +\n \"

\" + headline + \"

\" +\n \"

\";\n }\n\n var slide1 = (\n \"

\" +\n slideHeader() +\n \"

\" +\n avatarHtml +\n \"

\" + name + \"

\" +\n \"\" + trade + \"\" +\n (suburb ? \"

📍 \" + suburb + \"

\" : \"\") +\n \"

\" +\n \"

\"\n );\n\n var aboutBody = about ? about : (trade + \" based in \" + suburb);\n var slide2 = (\n \"

\" +\n slideHeader() +\n slideHero(\n hasPhoto ? \"

\" : \"\",\n \"linear-gradient(135deg,#0d1a3a,#061220)\",\n \"About\",\n name\n ) +\n \"

\" +\n \"

\" + aboutBody + \"

\" +\n (tagline ? \"

“\" + tagline + \"”

\" : \"\") +\n \"

\" +\n \"

\"\n );\n\n var slide3 = (\n \"

\" +\n slideHeader() +\n slideHero(\"\", \"linear-gradient(135deg,#0d3d4a,#061a2a)\", \"Services\", \"What I do\") +\n \"

\" +\n (servicePills ? \"

\" + servicePills + \"

\" : \"\") +\n (yearsBlock ? \"

\" + yearsBlock + \"

\" : \"\") +\n (credentialsBlock ? credentialsBlock : \"\") +\n \"

\" +\n \"

\"\n );\n\n var workBody = workPhotosHtml || credentialsBlock || \"

Photos coming soon

\";\n\n var slide4 = (\n \"

\" +\n slideHeader() +\n slideHero(\"\", \"linear-gradient(135deg,#0a1628,#050e1a)\", \"Work\", \"My work\") +\n \"

\" +\n workBody +\n \"

\" +\n \"

\"\n );\n\n var whatsappMsg = \"Hey \" + name + \", I got your iTabs card — send me your contact\";\n var whatsappLink = \"https://wa.me/\" + phone.replace(/^0/, \"61\").replace(/\\\\s/g, \"\") + \"?text=\" + encodeURIComponent(whatsappMsg);\n\n var socialLinks = \"\";\n if (website) {\n socialLinks += \"🌐 Website\";\n }\n if (instagram) {\n socialLinks += \"📷 Instagram\";\n }\n if (facebook) {\n socialLinks += \"f Facebook\";\n }\n\n var viewsText = views > 0 ? \"

Viewed \" + views + \" times

\" : \"\";\n\n var slide5 = (\n \"

\" +\n slideHeader() +\n slideHero(\"\", \"linear-gradient(135deg,#0d3d2e,#061a14)\", \"Connect\", \"Let's talk\") +\n \"

\" +\n \"\" +\n \"💬 WhatsApp\" +\n \"\" +\n \"

\" +\n \"Tap attach in WhatsApp, select Contact, choose yourself, hit send\" +\n \"

\" +\n (socialLinks ? \"

\" + socialLinks + \"

\" : \"\") +\n viewsText +\n \"

\" +\n \"

\"\n );\n\n // Build slides array conditionally\n var slides = [];\n slides.push(slide1); // always\n if (about) slides.push(slide2);\n if (services) slides.push(slide3);\n if (wp1 || wp2 || wp3 || wp4) slides.push(slide4);\n slides.push(slide5); // always\n\n var slideCount = slides.length;\n\n return \"

\" + slides.join(\"\") + \"

\";\n}\n\nexport function deckCSS() {\n return [\n \".deck-overlay { display: none; position: fixed; inset: 0; background: #050508; z-index: 150; flex-direction: column; align-items: center; justify-content: center; padding: 20px; }\",\n \".deck-overlay.open { display: flex; }\",\n \"@media (max-width: 599px) {\",\n \" .deck-overlay { background: #0a0a0f; padding: 0; }\",\n \"}\",\n \".deck-frame { display: flex; flex-direction: column; background: #0a0a0f; border-radius: 44px; border: 8px solid #1e1e2e; overflow: hidden; box-shadow: 0 0 0 2px #333, 0 40px 80px rgba(0,0,0,0.6); width: 100%; max-width: 390px; height: 80vh; }\",\n \"@media (max-width: 599px) {\",\n \" .deck-frame { max-width: 100%; border-radius: 0; border: none; height: 100vh; box-shadow: none; }\",\n \"}\",\n \".deck-notch { width: 80px; height: 6px; background: #1e1e2e; border-radius: 99px; margin: 14px auto 0; flex-shrink: 0; }\",\n \"@media (max-width: 599px) {\",\n \" .deck-notch { display: none; }\",\n \"}\",\n \".deck-viewport { position: relative; flex: 1; overflow: hidden; min-height: 0; }\",\n \".deck-track { display: flex; width: 500%; height: 100%; transition: transform 0.32s ease; will-change: transform; }\",\n \".deck-slide { width: 20%; flex-shrink: 0; display: flex; flex-direction: column; background: #0a0a0f; }\",\n \".deck-arrow { position: fixed; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border-radius: 50%; background: rgba(10,10,15,0.85); border: 1px solid #444; color: #fff; font-size: 22px; cursor: pointer; z-index: 160; display: none; align-items: center; justify-content: center; padding: 0; transition: opacity 0.2s; }\",\n \".deck-overlay.open .deck-arrow { display: flex; }\",\n \".deck-arrow.hidden { opacity: 0; pointer-events: none; }\",\n \".deck-arrow-left { left: 10px; }\",\n \".deck-arrow-right { right: 10px; }\",\n \"@media (max-width: 599px) {\",\n \" .deck-arrow-left { left: 0; }\",\n \" .deck-arrow-right { right: 0; }\",\n \"}\",\n \".deck-dots { display: flex; justify-content: center; gap: 8px; padding: 12px 0 20px; flex-shrink: 0; }\",\n \".deck-dot { width: 7px; height: 7px; border-radius: 50%; background: #1e1e2e; transition: background 0.2s; }\",\n \".deck-dot.active { background: #06b6d4; }\",\n ].join(\" \");\n}\n\nexport function deckScript(cardUrl: string) {\n return [\n \"var DS_current = 0;\",\n \"var DS_total = parseInt(document.getElementById('deck-track').getAttribute('data-total') || '5', 10);\",\n \"var DS_tx = 0;\",\n\n \"function goToSlide(n) {\",\n \" console.log('goToSlide called with', n, 'current:', DS_current);\",\n \" if (n < 0 || n >= DS_total) return;\",\n \" DS_current = n;\",\n \" document.getElementById('deck-track').style.transform = 'translateX(-' + (DS_current * 20) + '%);';\",\n \" var dots = document.querySelectorAll('.deck-dot');\",\n \" for (var d = 0; d < dots.length; d++) {\",\n \" if (d === DS_current) { dots[d].classList.add('active'); }\",\n \" else { dots[d].classList.remove('active'); }\",\n \" }\",\n \" var arrowL = document.getElementById('deck-arrow-left');\",\n \" var arrowR = document.getElementById('deck-arrow-right');\",\n \" if (DS_current === 0) { arrowL.classList.add('hidden'); } else { arrowL.classList.remove('hidden'); }\",\n \" if (DS_current === DS_total - 1) { arrowR.classList.add('hidden'); } else { arrowR.classList.remove('hidden'); }\",\n \"}\",\n\n \"function openDeck(startIndex) {\",\n \" console.log('openDeck called, startIndex:', startIndex);\",\n \" goToSlide(startIndex || 0);\",\n \" document.getElementById('deck-overlay').classList.add('open');\",\n \"}\",\n\n \"function closeDeck() {\",\n \" document.getElementById('deck-overlay').classList.remove('open');\",\n \"}\",\n\n \"document.addEventListener('DOMContentLoaded', function() {\",\n \" var ov = document.getElementById('deck-overlay');\",\n \" console.log('deck-overlay found:', ov);\",\n\n \" if (!ov) { console.error('DECK ERROR: overlay not found in DOM'); return; }\",\n\n \" ov.addEventListener('touchstart', function(e) {\",\n \" DS_tx = e.touches[0].clientX;\",\n \" console.log('deck touchstart, DS_tx:', DS_tx);\",\n \" }, { passive: true });\",\n\n \" ov.addEventListener('touchend', function(e) {\",\n \" var diffX = DS_tx - e.changedTouches[0].clientX;\",\n \" console.log('deck touchend, diffX:', diffX);\",\n \" if (Math.abs(diffX) > 40) {\",\n \" if (diffX > 0) { goToSlide(DS_current + 1); }\",\n \" else { goToSlide(DS_current - 1); }\",\n \" }\",\n \" }, { passive: true });\",\n\n \" console.log('deck touch listeners attached to overlay');\",\n \"});\",\n\n \"document.addEventListener('keydown', function(e) {\",\n \" if (!document.getElementById('deck-overlay').classList.contains('open')) return;\",\n \" if (e.key === 'ArrowRight') { goToSlide(DS_current + 1); }\",\n \" if (e.key === 'ArrowLeft') { goToSlide(DS_current - 1); }\",\n \" if (e.key === 'Escape') { closeDeck(); }\",\n \"});\",\n ].join(\"\\n\");\n}\n",[],[222,335],"358b0d90-4474-11f1-b3fc-42b51c65c3df","card.ts","67095f76-3f14-11f1-ad31-42b51c65c3df",247,["D",1777540132903],55,"export function cardPage(\n user: Record,\n baseUrl: string,\n hasPhoto: boolean,\n hasCardFront: boolean,\n hasCardBack: boolean,\n views: number,\n wp1: boolean,\n wp2: boolean,\n wp3: boolean,\n wp4: boolean,\n) {\n var name = String(user.name || \"\");\n var trade = String(user.trade || \"\");\n var tagline = String(user.tagline || \"\");\n var suburb = String(user.suburb || \"\");\n var phone = String(user.phone || \"\");\n var emailVal = String(user.email || \"\");\n var services = String(user.services || \"\");\n var credentials = String(user.credentials || \"\");\n var websiteVal = String(user.website || \"\");\n var cardUrl = baseUrl + \"/card/\" + phone;\n var waPhone = phone.replace(/^0/, \"61\").replace(/\\s/g, \"\");\n\n // Service pills — from services field or fallback to trade\n var pillsHtml = \"\";\n if (services) {\n var items = services.split(\",\").map(function (s) {\n return s.trim();\n }).filter(function (s) {\n return s.length > 0;\n }).slice(0, 8);\n for (var i = 0; i < items.length; i++) {\n pillsHtml +=\n '' +\n items[i] + \"\";\n }\n } else {\n pillsHtml =\n '' +\n trade + \"\";\n }\n\n // Trust badge — credentials or police clearance if in credentials\n var trustHtml = \"\";\n if (credentials) {\n trustHtml =\n '

🛡️ ' +\n credentials + \"

\";\n }\n\n // Back image — use card-back if uploaded, otherwise card-front, otherwise placeholder\n var backImgHtml = \"\";\n if (hasCardBack) {\n backImgHtml = '

';\n } else if (hasCardFront) {\n backImgHtml = '

';\n } else if (hasPhoto) {\n backImgHtml = '

';\n } else {\n backImgHtml =\n '

' +\n '

📇

' +\n '

Upload your business card or ad
via Edit to show it here

' +\n 'Upload Now' +\n \"

\";\n }\n\n // Determine if name is actually a business name or just a phone number (fallback)\n var isBizName = name && name !== phone && !name.match(/^[\\d\\s\\-+()]*$/);\n var displayName = \"\";\n var firstName = \"\";\n \n if (isBizName) {\n // Name is a real business name\n var nameParts = name.split(\" \");\n firstName = nameParts[0];\n var restName = nameParts.slice(1).join(\" \");\n displayName = restName\n ? firstName + '
' +\n restName + \"\"\n : '' + name + \"\";\n } else {\n // Name is phone number or missing — extract first name from name field, or fallback to first word of trade\n var nameParts = name.split(\" \");\n firstName = nameParts[0] && nameParts[0].length > 0 ? nameParts[0] : trade.split(\" \")[0];\n displayName = '' + firstName + '';\n }\n\n // Avatar — show profile photo if exists, otherwise initials\n var avatarHtml = \"\";\n if (hasPhoto) {\n avatarHtml = '

';\n } else {\n var initials = (isBizName ? name : firstName).substring(0, 2).toUpperCase();\n avatarHtml = '

' + initials + '

';\n }\n\n var css = \"* { box-sizing: border-box; margin: 0; padding: 0; }\" +\n \"body { background: #050508; display: flex; justify-content: center; align-items: center; min-height: 100vh; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; }\" +\n \".frame { width: 360px; height: 640px; background: #0a0a0f; border-radius: 24px; border: 1px solid rgba(255,255,255,0.1); overflow: hidden; position: relative; display: flex; flex-direction: column; box-shadow: 0 0 60px rgba(22,163,74,0.15); }\" +\n \"@media (min-width: 600px) { .frame { width: 390px; height: 700px; border-radius: 44px; border: 8px solid #1e1e2e; box-shadow: 0 0 0 2px #333, 0 40px 80px rgba(0,0,0,0.6); } }\" +\n \"@media (max-width: 599px) { body { align-items: flex-start; } .frame { width: 100%; height: 100vh; border-radius: 0; border: none; } }\" +\n \".hdr { display:flex;align-items:center;justify-content:space-between;padding:10px 16px;background:#12121a;border-bottom:1px solid rgba(255,255,255,0.06);flex-shrink:0;z-index:90; }\" +\n \".hdr-name { font-size:13px;font-weight:700;color:#fff; }\" +\n \".hdr-sub { font-size:10px;color:#6b7280;margin-top:1px; }\" +\n \".cpill { padding:7px 16px;background:#16a34a;border:none;border-radius:99px;color:#fff;font-size:12px;font-weight:700;cursor:pointer;transition:background 0.2s; }\" +\n \".cpill:hover { background:#22c55e; }\" +\n \".flip-area { flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:6px 16px 14px;background:#0d1117;gap:10px; }\" +\n \".flip-hint { font-size:10px;color:rgba(255,255,255,0.2);letter-spacing:0.8px;text-transform:uppercase; }\" +\n \".flip-wrap { width:100%;flex:1;perspective:1000px;cursor:pointer;max-height:420px; }\" +\n \".flip-inner { position:relative;width:100%;height:100%;transform-style:preserve-3d;transition:transform 0.6s cubic-bezier(0.4,0.2,0.2,1);border-radius:20px; }\" +\n \".flip-wrap.flipped .flip-inner { transform:rotateY(180deg); }\" +\n \".flip-front, .flip-back { position:absolute;top:0;left:0;width:100%;height:100%;backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:20px;overflow:hidden; }\" +\n \".flip-back { transform:rotateY(180deg); }\" +\n \".front-face { width:100%;height:100%;background:#12121a;border:1px solid rgba(255,255,255,0.08);border-radius:20px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding:12px 20px 20px;gap:14px; }\" +\n \".avatar { width:80px;height:80px;border-radius:50%;background:linear-gradient(135deg,#22c55e 0%,#059669 100%);display:flex;align-items:center;justify-content:center;color:#fff;font-size:32px;font-weight:900;letter-spacing:-1px;flex-shrink:0;box-shadow:0 0 0 3px rgba(34,197,94,0.2),0 4px 20px rgba(34,197,94,0.25);object-fit:cover; }\" +\n \".biz-title { font-size:32px;font-weight:900;color:#fff;text-align:center;line-height:1.1;letter-spacing:-0.5px; }\" +\n \".biz-loc { font-size:13px;color:#6b7280;text-align:center; }\" +\n \".pills { display:flex;flex-wrap:wrap;justify-content:center; }\" +\n \".tap-hint { font-size:10px;color:rgba(255,255,255,0.18);letter-spacing:0.5px; }\" +\n \".tagline { font-size:13px;color:#8888aa;text-align:center;font-style:italic;margin-bottom:4px;line-height:1.4; }\" +\n \".back-face { width:100%;height:100%;background:#1a1208;border-radius:20px;position:relative;display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;overflow:hidden;padding:12px 12px 0; }\" +\n \".back-btn-row { display:flex;justify-content:flex-end;padding-bottom:10px;flex-shrink:0; }\" +\n \".back-img-wrap { flex:1;display:flex;align-items:center;justify-content:center;overflow:hidden; }\" +\n \".back-badge { position:absolute;bottom:10px;right:10px;background:#f59e0b;color:#000;font-size:9px;font-weight:800;padding:4px 10px;border-radius:99px;letter-spacing:0.6px;text-transform:uppercase;z-index:2; }\" +\n \".back-tap { position:absolute;bottom:10px;left:0;right:0;text-align:center;font-size:10px;color:rgba(255,255,255,0.25);letter-spacing:0.5px;z-index:2; }\" +\n \".big-btn { width:100%;padding:15px;background:#16a34a;border:none;border-radius:14px;color:#fff;font-size:15px;font-weight:800;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;flex-shrink:0;transition:background 0.2s; }\" +\n \".big-btn:hover { background:#22c55e; }\" +\n \".contact-ov { position:absolute;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.75);z-index:300;display:flex;align-items:flex-end;opacity:0;pointer-events:none;transition:opacity 0.25s;backdrop-filter:blur(6px); }\" +\n \".contact-ov.open { opacity:1;pointer-events:all; }\" +\n \".csheet { width:100%;background:#1a1a2a;border-radius:16px 16px 0 0;padding:14px 14px 20px;transform:translateY(100%);transition:transform 0.3s;border-top:1px solid rgba(255,255,255,0.1); }\" +\n \".contact-ov.open .csheet { transform:translateY(0); }\" +\n \".chandle { width:36px;height:4px;background:rgba(255,255,255,0.15);border-radius:2px;margin:0 auto 16px; }\" +\n \".ctitle { font-size:14px;font-weight:700;color:#fff;text-align:center;margin-bottom:14px; }\" +\n \".cbtn { display:flex;align-items:center;gap:12px;background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.08);border-radius:12px;padding:12px 16px;text-decoration:none;color:#fff;font-size:13px;font-weight:600;cursor:pointer;transition:all 0.2s;margin-bottom:8px; }\" +\n \".cbtn:hover { background:rgba(34,197,94,0.1);border-color:rgba(34,197,94,0.25); }\" +\n \".cbtn-icon { font-size:18px;width:28px;text-align:center;flex-shrink:0; }\" +\n \".cbtn-detail { font-size:10px;color:#6b7280;font-weight:400; }\" +\n \".ccancel { margin-top:6px;width:100%;padding:12px;background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.08);border-radius:12px;color:#6b7280;font-size:13px;font-weight:600;cursor:pointer; }\" +\n \".toast { display:none;position:fixed;bottom:28px;left:50%;transform:translateX(-50%);background:#22c55e;color:#000;font-weight:700;font-size:13px;border-radius:99px;padding:10px 22px;white-space:nowrap;z-index:999; }\" +\n \".about-btn { display:flex;align-items:center;gap:6px;padding:7px 14px;background:rgba(245,158,11,0.15);border:1.5px solid #f59e0b;border-radius:99px;color:#f59e0b;font-size:12px;font-weight:700;cursor:pointer;transition:background 0.15s;flex-shrink:0; }\" +\n \".about-btn:hover { background:rgba(245,158,11,0.25); }\" +\n \".about-icon { width:18px;height:18px;background:#f59e0b;color:#000;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:900;font-style:italic;flex-shrink:0; }\" +\n \".info-ov { position:absolute;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.6);z-index:250;display:flex;align-items:flex-end;opacity:0;pointer-events:none;transition:opacity 0.25s; }\" +\n \".info-ov.open { opacity:1;pointer-events:all; }\" +\n \".info-sheet { width:100%;background:#1a1a2a;border-radius:20px 20px 0 0;padding:0 0 24px;transform:translateY(100%) rotateX(12deg);transform-origin:bottom center;transition:transform 0.4s cubic-bezier(0.22,1,0.36,1);border:1px solid rgba(255,255,255,0.1);border-bottom:none;overflow:hidden; }\" +\n \".info-ov.open .info-sheet { transform:translateY(0) rotateX(0deg); }\" +\n \".info-handle { display:flex;justify-content:center;padding:12px 0 0; }\" +\n \".info-handle span { width:40px;height:4px;background:rgba(255,255,255,0.15);border-radius:99px;display:block; }\" +\n \".info-header { padding:14px 18px 10px;border-bottom:1px solid rgba(255,255,255,0.07);display:flex;align-items:center;gap:10px; }\" +\n \".info-icon-ring { width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,#22c55e 0%,#059669 100%);display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0; }\" +\n \".info-title { font-size:15px;font-weight:700;color:#fff; }\" +\n \".info-sub { font-size:11px;color:#6b7280;margin-top:2px; }\" +\n \".info-body { padding:14px 18px 0; }\" +\n \".info-row { display:flex;align-items:flex-start;gap:10px;margin-bottom:14px; }\" +\n \".info-row-icon { width:32px;height:32px;border-radius:8px;background:rgba(34,197,94,0.12);border:1px solid rgba(34,197,94,0.25);display:flex;align-items:center;justify-content:center;font-size:15px;flex-shrink:0; }\" +\n \".info-row-label { font-size:13px;font-weight:600;color:#fff;margin-bottom:1px; }\" +\n \".info-row-desc { font-size:11px;color:#6b7280;line-height:1.3; }\" +\n \".info-cta { margin:16px 18px 0;padding:12px;background:#16a34a;border:none;border-radius:11px;color:#fff;font-size:14px;font-weight:700;width:calc(100% - 36px);cursor:pointer;display:flex;align-items:center;justify-content:center;gap:6px;transition:background 0.2s; }\" +\n \".info-cta:hover { background:#22c55e; }\";\n\n var html = '' +\n '' +\n '' +\n '' +\n '' +\n '' +\n '' +\n \"\" + (isBizName ? name : firstName) + \" — iTabs\" +\n \"\" +\n \"\" +\n '

Link copied!

' +\n '

' +\n // HEADER\n '

' +\n '

' + (isBizName ? name : firstName) + \"

\" +\n '

' + trade + (suburb ? \" · \" + suburb : \"\") +\n \"

\" +\n '' +\n \"

\" +\n // FLIP AREA\n '

' +\n '

tap card to flip

' +\n '

' +\n // FRONT\n '

' +\n '

' +\n avatarHtml +\n '

' + displayName + \"

\" +\n '

' + (suburb ? suburb + \" · \" : \"\") + phone +\n \"

\" +\n '

' + pillsHtml + \"

\" +\n (trustHtml ? trustHtml : \"\") +\n (tagline ? '

' + tagline + '

' : '') +\n (websiteVal ? '🌐 ' + websiteVal + '' : '') +\n '

tap to flip →

' +\n \"

\" +\n \"

\" +\n // BACK\n '

' +\n '

' + backImgHtml + '

' +\n '

iTabs

' +\n '

tap to flip back

' +\n \"

\" +\n \"

\" +\n '\" +\n \"

\" +\n // CONTACT OVERLAY\n '

' +\n '

' + (isBizName ? name : firstName) + \"

\" +\n '📞Call ' + firstName +\n '
' + phone + \"\" +\n '💬WhatsApp
Send a message' +\n (emailVal\n ? '✉️Email
' +\n emailVal + \"\"\n : \"\") +\n (websiteVal\n ? '🌐Website
' + websiteVal + ''\n : \"\") +\n '💾Save Contact
Add to your phone' +\n '✏️Edit Card
Update your details' +\n '' +\n \"

\" +\n \"

\" +\n // INFO OVERLAY\n '

' +\n '

🗞️

' +\n '

About this ad

' + trade + ' — ' + (suburb || 'Australia') + '

' +\n '

📍

Perth-based, all suburbs

Covers metro Perth and surrounding regions.

' +\n '

💲

Great rates & free quotes

No obligation. Call any time to get a price.

' +\n '

🏗️

8 services on offer

' + services + '

' +\n '

💳

Visa & Mastercard accepted

Pay how you like — cards welcome.

' +\n '

📰

Print ad — The Examiner

This is the ad people see in print. Digital card is next.

' +\n '

' +\n '' +\n \"

\" +\n \"

\" +\n \"\" +\n \"\";\n\n return html;\n}\n",[],[222,344],"4b043542-4493-11f1-a940-42b51c65c3df","4b04361e-4493-11f1-a940-42b51c65c3df",263,["D",1777553483455],[],[222,222],["D",1777553498663],[250,251,252,253,254,255,256,257],[222],"1366fb32-43d1-11f1-a75a-42b51c65c3df","SKILL.md","1366fc22-43d1-11f1-a75a-42b51c65c3df","09c9062e-43d1-11f1-a75a-42b51c65c3df",230,["D",1777470067695],"---\nname: itabs-flip-card\ndescription: Build an iTabs Flip Card for a tradie from an Examiner ad photo or manual details. Use this skill whenever the user wants to: create a flip card for a tradie, add a new card to iTabs from a newspaper ad, photograph an ad and get a live card, build a BC2.0 card, create a Business Card 2.0, scan an Examiner ad into iTabs, or any time they say \"build a card for [name/trade]\". This skill covers the full workflow from photo or details → database card → live URL. Always use this skill for tradie card builds on the iTabs platform.\n---\n\n# iTabs Flip Card — Build Guide\n\nA flip card has two faces:\n- **Front** — bold name, round avatar with initials, service pills, contact button\n- **Back** — their Examiner/newspaper ad photo, ⓘ \"About this ad\" button, Contact CTA\n\nCards live in the iTabs database at `/card/[phone]` and are managed via `/admin/scan` and `/admin`.\n\n---\n\n## Two Ways to Build a Card\n\n### Option A — Scan from Photo (preferred)\n1. Go to `/admin/scan` on the iTabs platform\n2. Upload a photo of the Examiner ad\n3. Claude reads the ad, extracts: phone, business name, trade, services\n4. Card is auto-created in the database\n5. Ad photo is saved as the card back automatically\n6. Card live at `/card/[phone]`\n\n### Option B — Manual Entry (when no ad photo available)\nUse this Townie prompt to create the card directly in the database:\n\n> Create a card in the database with these details:\n> - Phone: [phone number]\n> - Name: [business name] \n> - Trade: [trade type]\n> - Services: [comma separated list]\n> - Card back image URL: [imgur or direct image URL]\n> - PIN: [last 4 digits of phone]\n>\n> Card should appear at `/card/[phone]`, show in the directory, and be editable via admin.\n\n---\n\n## Card Design Standards\n\n### Front Face\n- Round avatar circle (gradient green) with 2-letter initials top-centre\n- Business name large and bold (white + green)\n- Phone number in muted text\n- Service pills (rounded, semi-transparent)\n- \"tap to flip →\" hint at bottom\n\n### Back Face\n- ITABS amber badge top-right\n- ⓘ \"About this ad\" amber pill button — sits **above** the ad image in its own row (justify-content: flex-end, padding-bottom: 10px)\n- Ad image fills remaining space\n- \"tap to flip back\" hint at bottom\n\n### ⓘ Flip-Up Sheet Contents\nFive info rows:\n1. 📍 [City]-based, all suburbs\n2. 💲 Great rates & free quotes\n3. 🏗️ [N] services on offer — list them with · separators\n4. 💳 Payment methods accepted (if known)\n5. 📰 Print ad — [publication name]\n\nGreen CTA button at bottom: \"📞 Call [first name] now — [phone]\"\n\n### Contact Sheet (opens from Contact button)\nThree actions:\n- 📞 Call — `tel:[phone]`\n- 💬 WhatsApp — `https://wa.me/61[phone without leading 0]`\n- 👤 Save Contact — downloads .vcf file\n\n---\n\n## Adding the ⓘ Button to Existing Cards\n\nIf a card was created via scanner but is missing the ⓘ button, use this Townie prompt:\n\n> In the card template (the file rendering `/card/:phone`), add an \"About this ad\" button above the ad image on the back face:\n> - Amber pill button with ⓘ icon and text \"About this ad\"\n> - Sits in its own flex row above the ad image (justify-content: flex-end, padding-bottom: 10px)\n> - Tapping opens a flip-up sheet from the bottom\n> - Sheet has 5 info rows and a green CTA button: \"📞 Call [name] — [phone]\"\n> - Tapping the overlay closes the sheet\n> - Use card's trade and phone data dynamically for the CTA\n\n---\n\n## Card Back Image\n\nBest practice:\n1. Upload ad photo to [imgur.com](https://imgur.com)\n2. Get direct URL: `https://i.imgur.com/[ID].png` (not `https://imgur.com/[ID]`)\n3. Add via card edit → image field, or via Townie database update\n\n---\n\n## Key Platform Details\n\n| Item | Value |\n|------|-------|\n| Card URL | `/card/[phone]` |\n| Directory | `/` |\n| Admin | `/admin` |\n| Scanner | `/admin/scan` |\n| PIN | Last 4 digits of phone |\n| Platform | Val.town (jgwynne7_4bf3679b itabs val) |\n\n---\n\n## Common Townie Fixes\n\n**Image broken after rewrite:**\n> The img tag in the ad-image-wrap div has a broken src. Replace it with: `https://i.imgur.com/[ID].png`\n\n**Button overlapping image:**\n> Move the About this ad button into its own flex row above the ad image. Add justify-content: flex-end and padding-bottom: 10px. Image starts below it.\n\n**Card not showing in directory:**\n> Check the database entry for phone [number] — confirm name, trade, and services fields are populated correctly.\n\n**Delete test cards:**\n> Delete all cards from the database except phone number [keep this one]. Keep all data for that card intact.\n",[],[230,370,362],"itabs-flip-card","09c90566-43d1-11f1-a75a-42b51c65c3df",229,["D",1777470051646],[248],[230,370],["D",1777470051579],[247],[230],["D",1776858834253],["D",1789587683564],{"_101":100,"_109":105},{"_101":100,"_102":103,"_104":105,"_18":56,"_106":107,"_108":25},{"_13":90,"_32":91,"_44":43,"_92":45,"_93":-5,"_94":-5,"_95":-5,"_96":-5,"_97":-5,"_98":46,"_99":100},"ctx",{"_83":-5,"_128":417,"_418":419,"_420":421,"_422":25,"_423":25,"_424":25,"_425":60,"_426":-5,"_427":-7,"_428":-7,"_429":64,"_430":25,"_431":25,"_432":-5,"_433":25,"_434":25,"_435":25,"_436":-5},"ENV",{"_388":389,"_390":391,"_392":91,"_393":394,"_395":396,"_397":398,"_399":400,"_401":402,"_403":404,"_405":406,"_407":408,"_409":410,"_411":412,"_413":414,"_415":416},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","811aa22498c9b0b5a47e8d778de579cdb990f332","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]

Your Card is Live!

Oops!

Get Your Digital Business Card

Card not found

📸 iTabs Ad Scanner

Create your card

Sign up free

Reset your PIN

Check your email

Create a new PIN

PIN updated!

Link expired

Edit your card

Enter your PIN

Edit your card

Take Photo

${escapeHtml(t.name)}

Local Tradies

No tradies found

Diff · v266