300 to 545 orders a month
Built for
Alchemist Pharmacy, five branches, roughly 350 walk-in customers a day
Project
Alchemist Pharmacy
Every visit is routed to the nearest branch's WhatsApp in two taps. Thirty-minute delivery positioning, bilingual hero, branch galleries with live maps.
Demo
Live site. Try the Order on WhatsApp button and pick an area.
How it works
01
No backend: static HTML, CSS, and JS so the site loads instantly on cheap Android phones.
02
Area-to-branch routing runs in the browser and deep-links straight into the right WhatsApp chat.
03
Repo uses an ICM layered-context layout (CLAUDE.md, CONTEXT.md, shared facts) so AI agents build each track from real business data.
04
All assets local; the only external dependency is Google Fonts.
Screenshots



Stack and code
- HTML
- CSS
- JavaScript
- WhatsApp deep links
- Google Maps embeds
- Vercel
- Claude Code
script.js— Area picker to nearest-branch WhatsApp routing.
</div>
<div class="footer-bottom">
<div class="container">© <span id="year"></span> Alchemist Pharmacy. All rights reserved.</div>
</div>
</footer>`;
}
/* --- Branch data (from alchemistpharmacy.com) ---
`wa` = each branch's real WhatsApp number (international format, digits only). */
const BRANCHES = [
{ name: "Pakistan Mint Branch", address: "GT Road, Opposite Pakistan Mint, Lahore", wa: "923154104786", query: "Alchemist Pharmacy GT Road Opposite Pakistan Mint Lahore",
photos: [ { src: "mint-outside.jpg", type: "Outside" }, { src: "mint-inside-1.jpg", type: "Inside" }, { src: "mint-inside-2.jpg", type: "Inside" } ] },
{ name: "Thokar Niaz Baig", address: "Opposite Daewoo Bus Services, Canal Bank Road, Lahore", wa: "923001499064", query: "Alchemist Pharmacy Thokar Niaz Baig Canal Bank Road Lahore",
photos: [ { src: "thokar-outside.jpg", type: "Outside" }, { src: "thokar-inside-1.jpg", type: "Inside" }, { src: "thokar-inside-2.jpg", type: "Inside" } ] },
{ name: "Allama Iqbal Town", address: "Gulshan Block, Dubai Chowk, Allama Iqbal Town, Lahore", wa: "923259728838", query: "Alchemist Pharmacy Dubai Chowk Allama Iqbal Town Lahore",
photos: [ { src: "allama-outside.jpg", type: "Outside" }, { src: "allama-inside-1.jpg", type: "Inside" } ] },
{ name: "Johar Town", address: "Khokhar Chowk, Johar Town, Lahore", wa: "923004706960", query: "Alchemist Pharmacy Khokhar Chowk Johar Town Lahore",
photos: [ { src: "johar-outside.jpg", type: "Outside" }, { src: "johar-inside-1.jpg", type: "Inside" }, { src: "johar-inside-2.jpg", type: "Inside" } ] },
{ name: "Johar Town (411/E)", address: "411/E Block, Johar Town, Lahore", wa: "923039936895", query: "Alchemist Pharmacy 411 E Block Johar Town Lahore",
photos: [ { src: "johar411-outside.jpg", type: "Outside" }, { src: "johar411-inside-1.jpg", type: "Inside" }, { src: "johar411-inside-2.jpg", type: "Inside" } ] }
];
/* Lahore area -> nearest branch (index into BRANCHES). Best-effort mapping;
adjust freely. Unlisted areas fall back to the main branch in the modal. */
const AREA_MAP = [
{ area: "Shahdara", branch: 0 },
{ area: "Ravi Road", branch: 0 },
{ area: "Badami Bagh", branch: 0 },
{ area: "GT Road", branch: 0 },
{ area: "Old City / Data Darbar", branch: 0 },
{ area: "Allama Iqbal Town", branch: 2 },
{ area: "Samanabad", branch: 2 },
{ area: "Sabzazar", branch: 2 },
{ area: "Chauburji", branch: 2 },
{ area: "Gulshan-e-Ravi", branch: 2 },
{ area: "Multan Road", branch: 1 },
{ area: "Thokar Niaz Baig", branch: 1 },
{ area: "Canal Bank Road", branch: 1 },
{ area: "Raiwind Road", branch: 1 },
{ area: "Hanjarwal", branch: 1 },
{ area: "Bahria Town", branch: 1 },
{ area: "Johar Town", branch: 3 },
{ area: "Model Town", branch: 3 },
{ area: "Faisal Town", branch: 3 },
{ area: "Garden Town", branch: 3 },
{ area: "Gulberg", branch: 3 },
{ area: "Township", branch: 3 },
{ area: "Wapda Town", branch: 4 },
{ area: "Valencia", branch: 4 },
{ area: "DHA", branch: 4 },
{ area: "Emporium / Expo Centre", branch: 4 }
];
/* Keywords for matching a FREE-TYPED area to the nearest branch. Multi-word
keywords match anywhere in the text; single-word keywords match a whole word
only (so "ravi" in "Gulshan-e-Ravi" doesn't wrongly hit "Ravi Road").
Order matters: more specific entries first. Extend freely. */
const AREA_KEYWORDS = [
// Branch 0 - Pakistan Mint / North Lahore
{ kw: "shahdara", branch: 0 }, { kw: "badami bagh", branch: 0 }, { kw: "ravi road", branch: 0 },
{ kw: "gt road", branch: 0 }, { kw: "data darbar", branch: 0 }, { kw: "old city", branch: 0 },
{ kw: "misri shah", branch: 0 }, { kw: "bhati", branch: 0 }, { kw: "mochi gate", branch: 0 }, { kw: "minar", branch: 0 },
// Branch 2 - Allama Iqbal Town / West-central
{ kw: "iqbal town", branch: 2 }, { kw: "samanabad", branch: 2 }, { kw: "sabzazar", branch: 2 },
{ kw: "chauburji", branch: 2 }, { kw: "gulshan e ravi", branch: 2 }, { kw: "gulshan ravi", branch: 2 },
{ kw: "wahdat", branch: 2 }, { kw: "poonch", branch: 2 }, { kw: "ichhra", branch: 2 }, { kw: "ichra", branch: 2 },
// Branch 1 - Thokar Niaz Baig / South-west
{ kw: "thokar", branch: 1 }, { kw: "niaz baig", branch: 1 }, { kw: "canal bank", branch: 1 },
{ kw: "raiwind", branch: 1 }, { kw: "hanjarwal", branch: 1 }, { kw: "bahria", branch: 1 },
{ kw: "maraka", branch: 1 }, { kw: "bhobtian", branch: 1 }, { kw: "ali town", branch: 1 },
{ kw: "multan road", branch: 1 }, { kw: "defence road", branch: 1 },
// Branch 3 - Johar Town / Model Town / Gulberg
{ kw: "johar town", branch: 3 }, { kw: "model town", branch: 3 }, { kw: "faisal town", branch: 3 },
{ kw: "garden town", branch: 3 }, { kw: "muslim town", branch: 3 }, { kw: "gulberg", branch: 3 },
{ kw: "township", branch: 3 }, { kw: "kalma chowk", branch: 3 }, { kw: "liberty", branch: 3 },
{ kw: "main boulevard", branch: 3 }, { kw: "barkat market", branch: 3 }, { kw: "ferozepur road", branch: 3 },
{ kw: "cantt", branch: 3 }, { kw: "cantonment", branch: 3 },
// Branch 4 - Johar Town (411/E) / Wapda Town / DHA
{ kw: "wapda town", branch: 4 }, { kw: "valencia", branch: 4 }, { kw: "dha", branch: 4 },
{ kw: "defence", branch: 4 }, { kw: "emporium", branch: 4 }, { kw: "expo", branch: 4 },
{ kw: "eme", branch: 4 }, { kw: "walton", branch: 4 }, { kw: "state life", branch: 4 }, { kw: "khayaban", branch: 4 }
];
/* --- Init on DOM ready --- */
document.addEventListener("DOMContentLoaded", () => {
const current = document.body.dataset.page || "";
// header + footer
const h = document.getElementById("site-header");
const f = document.getElementById("site-footer");
if (h) h.outerHTML = buildHeader(current);
~/Documents/alchemist-pharmacy-master/tracks/01_website_delivery/output/script.js
CONTEXT.md— The layered context that lets an agent build from real business facts.
# CONTEXT.md — Track Router (Layer 1)
> Layer 1 answers: **"Which track am I working on?"**
> Read this after `CLAUDE.md`. Its only job is to route the session to exactly
> one track so the token budget stays bounded. It holds no build instructions
> itself — those live in each track's `CONTEXT.md` (Layer 2).
---
## How to route (every session)
1. Read `CLAUDE.md` (Layer 0) — orientation.
2. Read this file (Layer 1) — the track map below.
3. Read `shared/business-context.md` (Layer 3) — the real, current facts about
Alchemist Pharmacy. Every track needs these; load them once, here.
4. Identify the **active track** from what the owner asks for
("the website", "the customer database", "subscriptions"). Load **only**
that track's `tracks/NN_*/CONTEXT.md` and its `references/`/`output/`.
5. Do **not** load other tracks' folders. That isolation is the optimization.
If the owner hasn't named a track, ask which one — do not load all three.
---
## Track map
| # | Track | Folder | What it delivers | Status |
|---|-------|--------|------------------|--------|
| 01 | Website + Delivery | `tracks/01_website_delivery/` | Revamp/extend the site for **30-minute delivery** with **WhatsApp integration** | Not started |
| 02 | Customer Database | `tracks/02_customer_database/` | A database to **track customer purchases** | **Active — Stage 03 Implementation** (Requirements + Design approved 2026-07-11) |
| 03 | Subscriptions | `tracks/03_subscriptions/` | **Monthly subscriptions** for heart & chronic-disease patients | Not started |
**Intended build order & dependencies:** `01` is the customer-facing
foundation. `02` (database) underpins `03` (subscriptions rely on purchase
history and patient records). Numbers record this order; they don't forbid the
owner choosing a different sequence.
---
## Activating a track
When the owner says "let's build track NN," that track graduates from a
scoping folder to a full pipeline:
1. Confirm scope in `tracks/NN_*/CONTEXT.md`.
2. Create `tracks/NN_*/stages/01_requirements … 06_release`, each with its own
`CONTEXT.md` / `references/` / `output/` (the standard stage contract).
3. From then on, routing goes one level deeper: `CLAUDE.md` → this router →
the track `CONTEXT.md` → the active stage's `CONTEXT.md`.
Until a track is activated, it is context you can *reference* cheaply, not a
pipeline you execute.
~/Documents/alchemist-pharmacy-master/CONTEXT.md