Minimum order${CATALOG_NOTES.moq}Pricing${CATALOG_NOTES.pricing}
`;
const picker = overlayBody.querySelector("#color-picker");
variant.colors.forEach(color => {
const btn = document.createElement("button");
btn.type = "button";
btn.className = "color-btn" + (color.name === activeColor.name ? " active" : "");
btn.innerHTML = `
${color.
btn.addEventListener("click", () => renderOverlayBody(variant, color));
picker.appendChild(btn);
});
const slots = overlayBody.querySelector("#image-slots");
IMAGE_SLOTS.forEach(slot => {
const path = `images/${variant.id}/${colorSlug}/${slot}.jpg`;
const box = document.createElement("div");
box.className = "image-slot";
box.innerHTML = `
${slot}photo coming soon`;
const img = new Image();
img.onload = () => {
box.innerHTML = "";
const shown = document.createElement("img");
shown.src = path;
shown.alt = `${variant.name} ${activeColor.name} — ${slot}`;
box.appendChild(shown);
};
img.src = path;
slots.appendChild(box);
});
}
document.getElementById("overlay-close").addEventListener("click", closeOverlay);
overlay.addEventListener("click", (e) => { if (e.target === overlay) closeOverlay(); });
document.addEventListener("keydown", (e) => { if (e.key === "Escape") closeOverlay(); });
function closeOverlay(){
overlay.hidden = true;
document.body.style.overflow = "";
}
renderSeriesGrid();
renderReviews();/* =========================================================================
LOCATIGO — CATALOG DATA
-------------------------------------------------------------------------
This is the ONLY file you need to touch to add, remove, or edit phones.
Every phone on the site is generated automatically from this list.
TO ADD A NEW SERIES (e.g. once iPhone 18 is real):
1. Copy one of the { series: ... } blocks below.
2. Change the series name and each variant's id / name / colors.
3. Save. The homepage and product pages update automatically.
IMAGES:
For every variant + color combination, the site looks for photos at:
images/
//front.jpg
images///back.jpg
images///side.jpg
images///camera.jpg
images///screen.jpg
e.g. for iPhone 13 Pro in "Sierra Blue":
images/13-pro/sierra-blue/front.jpg
If a photo is missing, a placeholder box is shown instead — the site
never breaks, it just shows "photo coming soon" until you upload one.
========================================================================= */
const CATALOG = [
{
series: "iPhone XR",
variants: [
{ id: "xr", name: "iPhone XR", storage: ["64GB", "128GB"],
colors: [{ name: "Black", hex: "#1c1c1e" }, { name: "White", hex: "#f2f2ed" }, { name
]
},
{
series: "iPhone 11",
variants: [
{ id: "11", name: "iPhone 11", storage: ["64GB", "128GB"],
colors: [{ name: "Purple", hex: "#a9a7c4" }, { name: "Green", hex: "#a9c0ab" }, { nam
{ id: "11-pro", name: "iPhone 11 Pro", storage: ["64GB", "256GB"],
colors: [{ name: "Midnight Green", hex: "#4e5851" }, { name: "Space Grey", hex: "#545
{ id: "11-pro-max", name: "iPhone 11 Pro Max", storage: ["64GB", "256GB"],
colors: [{ name: "Midnight Green", hex: "#4e5851" }, { name: "Space Grey", hex: "#545
]
},
{
},
{
},
{
},
{
},
series: "iPhone 12",
variants: [
{ id: "12", name: "iPhone 12", storage: ["64GB", "128GB"],
colors: [{ name: "Blue", hex: "#7c9bb5" }, { name: "Green", hex: "#a9c0ab" }, { name:
{ id: "12-pro", name: "iPhone 12 Pro", storage: ["128GB", "256GB"],
colors: [{ name: "Pacific Blue", hex: "#3f5a6e" }, { name: "Graphite", hex: "#4a4a48"
{ id: "12-pro-max", name: "iPhone 12 Pro Max", storage: ["128GB", "256GB"],
colors: [{ name: "Pacific Blue", hex: "#3f5a6e" }, { name: "Graphite", hex: "#4a4a48"
]
name:
series: "iPhone 13",
variants: [
{ id: "13", name: "iPhone 13", storage: ["128GB", "256GB"],
colors: [{ name: "Pink", hex: "#e8c3c8" }, { name: "Blue", hex: "#7c9bb5" }, { { id: "13-pro", name: "iPhone 13 Pro", storage: ["128GB", "256GB"],
colors: [{ name: "Sierra Blue", hex: "#8fa8bd" }, { name: "Graphite", hex: "#4a4a48"
{ id: "13-pro-max", name: "iPhone 13 Pro Max", storage: ["128GB", "256GB"],
colors: [{ name: "Sierra Blue", hex: "#8fa8bd" }, { name: "Graphite", hex: "#4a4a48"
]
{ name
series: "iPhone 14",
variants: [
{ id: "14", name: "iPhone 14", storage: ["128GB", "256GB"],
colors: [{ name: "Purple", hex: "#b9b3c9" }, { name: "Blue", hex: "#a9bcc9" }, { id: "14-plus", name: "iPhone 14 Plus", storage: ["128GB", "256GB"],
colors: [{ name: "Purple", hex: "#b9b3c9" }, { name: "Blue", hex: "#a9bcc9" }, { id: "14-pro", name: "iPhone 14 Pro", storage: ["128GB", "256GB"],
colors: [{ name: "Deep Purple", hex: "#4f4a5c" }, { name: "Space Black", hex: "#1c1c1
{ id: "14-pro-max", name: "iPhone 14 Pro Max", storage: ["128GB", "256GB"],
colors: [{ name: "Deep Purple", hex: "#4f4a5c" }, { name: "Space Black", hex: "#1c1c1
{ name
]
name:
series: "iPhone 15",
variants: [
{ id: "15", name: "iPhone 15", storage: ["128GB", "256GB"],
colors: [{ name: "Pink", hex: "#e8c3c8" }, { name: "Blue", hex: "#a9bcc9" }, { { id: "15-plus", name: "iPhone 15 Plus", storage: ["128GB", "256GB"],
colors: [{ name: "Pink", hex: "#e8c3c8" }, { name: "Blue", hex: "#a9bcc9" }, { { id: "15-pro", name: "iPhone 15 Pro", storage: ["128GB", "256GB"],
colors: [{ name: "Blue Titanium", hex: "#5c6b78" }, { name: "Natural Titanium", hex:
{ id: "15-pro-max", name: "iPhone 15 Pro Max", storage: ["256GB", "512GB"],
colors: [{ name: "Blue Titanium", hex: "#5c6b78" }, { name: "Natural Titanium", hex:
name:
]
{
series: "iPhone 16",
variants: [
{ id: "16", name: "iPhone 16", storage: ["128GB", "256GB"],
colors: [{ name: "Ultramarine", hex: "#5b6ea8" }, { name: "Teal", hex: "#6f9a94" }, {
{ id: "16-plus", name: "iPhone 16 Plus", storage: ["128GB", "256GB"],
colors: [{ name: "Ultramarine", hex: "#5b6ea8" }, { name: "Teal", hex: "#6f9a94" }, {
{ id: "16-pro", name: "iPhone 16 Pro", storage: ["128GB", "256GB"],
colors: [{ name: "Desert Titanium", hex: "#a1907a" }, { name: "Black Titanium", hex:
{ id: "16-pro-max", name: "iPhone 16 Pro Max", storage: ["256GB", "512GB"],
colors: [{ name: "Desert Titanium", hex: "#a1907a" }, { name: "Black Titanium", hex:
]
},
{
series: "iPhone 17",
variants: [
{ id: "17", name: "iPhone 17", storage: ["128GB", "256GB"],
colors: [{ name: "Lavender", hex: "#c3bfe0" }, { name: "Mist Blue", hex: "#a9c0d0" },
{ id: "17-air", name: "iPhone Air", storage: ["256GB", "512GB"],
colors: [{ name: "Sky Blue", hex: "#a9c5d8" }, { name: "Cloud White", hex: "#eceae4"
{ id: "17-pro", name: "iPhone 17 Pro", storage: ["256GB", "512GB"],
colors: [{ name: "Cosmic Orange", hex: "#a8542f" }, { name: "Deep Blue", hex: "#2f3a4
{ id: "17-pro-max", name: "iPhone 17 Pro Max", storage: ["256GB", "512GB", "1TB"],
colors: [{ name: "Cosmic Orange", hex: "#a8542f" }, { name: "Deep Blue", hex: "#2f3a4
]
}
];
/* Shared boilerplate copy — edit once, applies to every product page. */
const CATALOG_NOTES = {
condition: "Fairly used (pre-owned), professionally tested and graded — not new. Fully func
moq: "Minimum order 10 units per model / colour combination.",
pricing: "Wholesale pricing is provided separately on request — no prices are listed contactNote: "Ask for the current wholesale price list and available stock."
on thi
};
/* Reviews shown at the bottom of the homepage. Edit freely. */
const REVIEWS = [
{ name: "M. Osei", location: "Accra, Ghana", text: "Ordered 40 units across three models. G
{ name: "R. Fernandes", location: "Lisbon, Portugal", text: "Smooth wholesale process from
{ name: "T. Nguyen", location: "Ho Chi Minh City, Vietnam", text: "Good stock variety and c
];