<html> <style> :root{ --bg: #0b0d12; --panel: #121624; --panel2:#0f1320; --text:#e6e8ef; --muted:#9aa3b2; --stroke:#202742; --chip:#1a2140; --tileSize: 200px; } *{ box-sizing:border-box; } body{ margin:0; font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial; background: var(--bg); color: var(--text); } .toolbar{ position: sticky; top: 0; z-index: 10; background: rgba(11,13,18,.9); backdrop-filter: blur(8px); border-bottom: 1px solid var(--stroke); padding: 12px 14px; display:flex; gap: 12px; align-items:center; } #filter{ flex:1; min-width: 240px; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--stroke); background: var(--panel); color: var(--text); outline: none; } .toggle{ display:flex; gap: 8px; align-items:center; color: var(--muted); font-size: 13px; user-select:none; } #app{ padding: 18px 14px 40px; display:flex; flex-direction:column; gap: 14px; } .group{ border: 1px solid var(--stroke); background: var(--panel2); border-radius: 14px; overflow:hidden; } .groupHeader{ padding: 12px 14px; border-bottom: 1px solid var(--stroke); display:flex; align-items:flex-start; justify-content:space-between; gap: 10px; } .groupTitle{ display:flex; flex-direction:column; gap: 6px; } .groupTitle h2{ margin:0; font-size: 16px; letter-spacing:.2px; } .codes{ display:flex; flex-wrap:wrap; gap: 6px; } .codeChip{ background: var(--chip); border: 1px solid var(--stroke); color: var(--muted); padding: 4px 8px; border-radius: 999px; font-size: 12px; } .count{ color: var(--muted); font-size: 12px; white-space:nowrap; } .grid{ padding: 14px; display:grid; grid-template-columns: repeat(auto-fill, minmax(var(--tileSize), 1fr)); gap: 12px; } .tile{ border: 1px solid var(--stroke); background: var(--panel); border-radius: 12px; padding: 10px; display:flex; flex-direction:column; gap: 8px; min-height: 170px; } .thumb{ width: 100%; aspect-ratio: 1 / 1; border-radius: 10px; border: 1px solid var(--stroke); background: #0b0d12; overflow:hidden; display:flex; align-items:center; justify-content:center; } .thumb img{ width: 100%; height: 100%; object-fit: cover; display:block; } .meta{ display:flex; flex-direction:column; gap: 4px; } .meta span{ font-size: 12px; color: var(--text); word-break: break-word; } .meta small{ font-size: 11px; color: var(--muted); word-break: break-word; } .missing{ color: var(--muted); font-size: 12px; padding: 24px 14px; } </style> <div class="toolbar"> <input id="filter" type="search" placeholder="Filter (color / code / key / filename)..." /> <label class="toggle"> <input id="hideNone" type="checkbox" /> Hide sim-0=NONE </label> <div class="controls"> <label> Tile size: <span id="val">200</span>px <input id="size" type="range" min="100" max="400" value="200" step="1"> </label> </div> <script> const range = document.getElementById("size"); const out = document.getElementById("val"); function apply(){ const px = range.value; out.textContent = px; document.documentElement.style.setProperty("--tileSize", `${px}px`); } range.addEventListener("input", apply); apply(); // init </script> </div> <div id="app"></div> <script> // 1) PASTE YOUR JSON HERE (already provided) var altImages = [ { "color": "Grey", "color_codes": ["G", "GP", "ZSGP", "EG", "EGP", "EZSGP"], "images": [ { "alt-1": "grey-alt1_1200x.jpg", "alt-2": "grey-alt2_800x.jpg", "alt-2th": "grey-alt2_200x.jpg", "alt-3": "grey-alt3_600x.jpg", "alt-4": "grey-alt4_600x.jpg", "alt-act": "g-alt-activity_1200x.jpg", "alt-act-th": "g-alt-activity_200x.jpg", "sim-circle": "desert-g_1200x.jpg", "sim-circle-thumb": "desert-g_200x.jpg", "sim-0": "NONE_3_1200x.jpg", "sim-1": "grey-sim1_1200x.jpg", "sim-2": "grey-sim2_800x.jpg", "sim-3": "grey-sim2_200x.jpg", "shield-1": "g-shield-lifestyle_800x.jpg", "shield-1-th": "g-shield-lifestyle_200x.jpg" } ] }, { "color": "Photochromic", "color_codes": ["PH", "EPH"], "images": [ { "alt-1": "grey-alt1_1200x.jpg", "alt-2": "grey-alt2_800x.jpg", "alt-2th": "grey-alt2_200x.jpg", "alt-3": "grey-alt3_600x.jpg", "alt-4": "grey-alt4_600x.jpg", "alt-act": "ph-alt-activity_1200x.jpg", "alt-act-th": "ph-alt-activity_200x.jpg", "sim-circle": "desert-ph_1200x.jpg", "sim-circle-thumb": "desert-ph_200x.jpg", "sim-0": "NONE_3_1200x.jpg", "sim-1": "grey-sim1_1200x.jpg", "sim-2": "photochromic-sim2_800x.jpg", "sim-3": "photochromic-sim2_200x.jpg" } ] }, { "color": "Nova", "color_codes": ["NOV", "NOVP", "ZSNOVP", "ENOV", "ENOVP", "EZSNOVP"], "images": [ { "alt-1": "nov-alt1_1200x.jpg", "alt-2": "nov-alt2_800x.jpg", "alt-2th": "nov-alt2_200x.jpg", "alt-3": "nov-alt3_600x.jpg", "alt-4": "nov-alt4_600x.jpg", "alt-act": "nov-alt-activity_1200x.jpg", "alt-act-th": "nov-alt-activity_200x.jpg", "sim-circle": "desert-nov_1200x.jpg", "sim-circle-thumb": "desert-nov_200x.jpg", "sim-0": "NONE_3_1200x.jpg", "sim-1": "nov-sim1_1200x.jpg", "sim-2": "nova-sim2_800x.jpg", "sim-3": "nova-sim2_200x.jpg", "shield-1": "nov-shield-lifestyle_800x.jpg", "shield-1-th": "nov-shield-lifestyle_200x.jpg" } ] }, { "color": "Nebula", "color_codes": ["NBLA", "LMTD3"], "images": [ { "alt-1": "nebula-alt1_1200x.jpg", "alt-2": "nebula-alt1_1200x.jpg", "alt-3": "nebula-alt1_1200x.jpg", "sim-0": "NONE_3_1200x.jpg", "sim-1": "sapphire-sim1_1200x.jpg", "sim-2": "nebula-sim2_800x.jpg", "sim-3": "nebula-sim2_200x.jpg" } ] }, { "color": "Flare", "color_codes": ["LMTD2"], "images": [ { "alt-1": "flare-alt1_1200x.jpg", "alt-2": "flare-alt1_1200x.jpg", "alt-2th": "flare-alt1_200x.jpg", "sim-0": "NONE_3_1200x.jpg", "sim-1": "flare-sim1_1200x.jpg", "sim-2": "flare-sim2_800x.jpg", "sim-3": "flare-sim2_200x.jpg" } ] }, { "color": "Coral", "color_codes": ["LMTD1", "PTCORL"], "images": [ { "alt-1": "coral-alt1_1200x.jpg", "alt-2": "coral-alt2_1200x.jpg", "alt-2th": "coral-alt2_200x.jpg", "sim-0": "NONE_3_1200x.jpg", "sim-1": "coral-sim1_1200x.jpg", "sim-2": "coral-sim2_800x.jpg", "sim-3": "coral-sim2_200x.jpg" } ] }, { "color": "Sapphire", "color_codes": ["GR", "EGR"], "images": [ { "alt-1": "sapphire-alt1_1200x.jpg", "alt-2": "sapphire-alt2_800x.jpg", "alt-2th": "sapphire-alt2_200x.jpg", "alt-3": "sapphire-alt3_600x.jpg", "alt-4": "sapphire-alt4_600x.jpg", "alt-act": "gr-alt-activity_1200x.jpg", "alt-act-th": "gr-alt-activity_200x.jpg", "sim-circle": "desert-gr_1200x.jpg", "sim-circle-thumb": "desert-gr_200x.jpg", "sim-0": "NONE_3_1200x.jpg", "sim-1": "grp_3_1200x.jpg", "sim-2": "sapphire-sim2_800x.jpg", "sim-3": "sapphire-sim2_200x.jpg", "shield-1": "gr-shield-lifestyle_800x.jpg", "shield-1-th": "gr-shield-lifestyle_200x.jpg" } ] }, { "color": "Sapphire", "color_codes": [ "GRP", "ZSGRP", "EGRP", "EZSGRP"], "images": [ { "alt-1": "sapphire-alt1_1200x.jpg", "alt-2": "sapphire-alt2_800x.jpg", "alt-2th": "sapphire-alt2_200x.jpg", "alt-3": "sapphire-alt3_600x.jpg", "alt-4": "sapphire-alt4_600x.jpg", "alt-act": "grp-alt-activity_1200x.jpg", "alt-act-th": "grp-alt-activity_200x.jpg", "sim-circle": "desert-gr_1200x.jpg", "sim-circle-thumb": "desert-gr_200x.jpg", "sim-0": "NONE_3_1200x.jpg", "sim-1": "grp_3_1200x.jpg", "sim-2": "sapphire-sim2_800x.jpg", "sim-3": "sapphire-sim2_200x.jpg", "shield-1": "zsgrp-shield-lifestyle_800x.jpg", "shield-1-th": "zsgrp-shield-lifestyle_200x.jpg" } ] }, { "color": "Bronze", "color_codes": ["GM", "GMP", "EGM", "EGMP"], "images": [ { "alt-1": "bronze-alt1_1200x.jpg", "alt-2": "bronze-alt2_800x.jpg", "alt-2th": "bronze-alt2_200x.jpg", "alt-3": "bronze-alt3_600x.jpg", "alt-4": "bronze-alt4_600x.jpg", "alt-act": "zsgmp-alt-activity_1200x.jpg", "alt-act-th": "zsgmp-alt-activity_200x.jpg", "sim-circle": "desert-gm_1200x.jpg", "sim-circle-thumb": "desert-gm_200x.jpg", "sim-0": "NONE_3_1200x.jpg", "sim-1": "bronze-sim1_1200x.jpg", "sim-2": "bronze-sim2_800x.jpg", "sim-3": "bronze-sim2_200x.jpg", "shield-1": "zsgmp-shield-lifestyle_800x.jpg", "shield-1-th": "zsgmp-shield-lifestyle_200x.jpg" } ] }, { "color": "Bronze", "color_codes": ["ZSGMP","EZSGMP"], "images": [ { "alt-1": "bronze-alt1_1200x.jpg", "alt-2": "bronze-alt2_800x.jpg", "alt-2th": "bronze-alt2_200x.jpg", "alt-3": "bronze-alt3_600x.jpg", "alt-4": "bronze-alt4_600x.jpg", "alt-act": "zsgmp-alt-activity_1200x.jpg", "alt-act-th": "zsgmp-alt-activity_200x.jpg", "sim-circle": "desert-zsgmp_1200x.jpg", "sim-circle-thumb": "desert-zsgmp_200x.jpg", "sim-0": "NONE_3_1200x.jpg", "sim-1": "bronze-sim1_1200x.jpg", "sim-2": "bronze-sim2_800x.jpg", "sim-3": "bronze-sim2_200x.jpg", "shield-1": "zsgmp-shield-lifestyle_800x.jpg", "shield-1-th": "zsgmp-shield-lifestyle_200x.jpg" } ] }, { "color": "Brown", "color_codes": ["B", "BP", "ZSBP", "EB", "EBP", "EZSBP"], "images": [ { "alt-1": "brown-alt1_1200x.jpg", "alt-2": "brown-alt2_800x.jpg", "alt-2th": "brown-alt2_200x.jpg", "alt-3": "brown-alt3_600x.jpg", "alt-4": "brown-alt4_600x.jpg", "alt-act": "b-alt-activity_1200x.jpg", "alt-act-th": "b-alt-activity_200x.jpg", "sim-circle": "desert-b_1200x.jpg", "sim-circle-thumb": "desert-b_200x.jpg", "sim-0": "NONE_3_1200x.jpg", "sim-1": "brown-sim1_1200x.jpg", "sim-2": "brown-sim2_800x.jpg", "sim-3": "brown-sim2_200x.jpg" } ] }, { "color": "Brown Gradient", "color_codes": ["GRADB", "ZSGRADBP", "EGRADB", "EZSGRADBP"], "images": [ { "alt-1": "browngradient-alt1_1200x.jpg", "alt-2": "browngradient-alt2_800x.jpg", "alt-2th": "browngradient-alt2_200x.jpg", "alt-3": "browngradient-alt3_600x.jpg", "alt-4": "browngradient-alt3_600x.jpg", "alt-act": "gradb-alt-activity_1200x.jpg", "alt-act-th": "gradb-alt-activity_200x.jpg", "sim-circle": "desert-gradb_1200x.jpg", "sim-circle-thumb": "desert-gradb_200x.jpg", "sim-0": "NONE_3_1200x.jpg", "sim-1": "browngradient-sim1_1200x.jpg", "sim-2": "browngradient-sim2_800x.jpg", "sim-3": "browngradient-sim2_200x.jpg" } ] }, { "color": "Carbon", "color_codes": ["CBM", "CBMP", "ZSCBMP", "ECBM", "ECBMP", "EZSCBMP"], "images": [ { "alt-1": "carbon-alt1_1200x.jpg", "alt-2": "carbon-alt2_800x.jpg", "alt-2th": "carbon-alt2_200x.jpg", "alt-3": "carbon-alt3_600x.jpg", "alt-4": "carbon-alt4_600x.jpg", "alt-act": "cbm-alt-activity_1200x.jpg", "alt-act-th": "cbm-alt-activity_200x.jpg", "sim-circle": "desert-cbm_1200x.jpg", "sim-circle-thumb": "desert-cbm_200x.jpg", "sim-0": "NONE_3_1200x.jpg", "sim-1": "carbon-sim1_1200x.jpg", "sim-2": "carbon-sim2_800x.jpg", "sim-3": "carbon-sim2_200x.jpg", "shield-1": "cbm-shield-lifestyle_800x.jpg", "shield-1-th": "cbm-shield-lifestyle_200x.jpg" } ] }, { "color": "Cascade", "color_codes": ["ONG", "ONGP", "ZSONGP", "EONG", "EONGP", "EZSONGP"], "images": [ { "alt-1": "cascade-alt1_1200x.jpg", "alt-2": "cascade-alt2_800x.jpg", "alt-2th": "cascade-alt2_200x.jpg", "alt-3": "cascade-alt3_600x.jpg", "alt-4": "cascade-alt4_600x.jpg", "alt-act": "ongp-alt-activity_1200x.jpg", "alt-act-th": "ongp-alt-activity_200x.jpg", "sim-circle": "desert-ong_1200x.jpg", "sim-circle-thumb": "desert-ong_200x.jpg", "sim-0": "NONE_3_1200x.jpg", "sim-1": "cascade-sim1_1200x.jpg", "sim-2": "cascade-sim2_800x.jpg", "sim-3": "cascade-sim2_200x.jpg" } ] }, { "color": "Chrome", "color_codes": ["SSM", "SSMP", "ZSSSMP", "SSM", "SSMP", "ZSSSMP", "ESSM", "ESSMP", "EZSSSMP"], "images": [ { "alt-1": "chrome-alt1_1200x.jpg", "alt-2": "chrome-alt2_800x.jpg", "alt-2th": "chrome-alt2_200x.jpg", "alt-3": "chrome-alt3_600x.jpg", "alt-4": "chrome-alt4_600x.jpg", "alt-act": "ssmp-alt-activity_1200x.jpg", "alt-act-th": "ssmp-alt-activity_200x.jpg", "sim-circle": "desert-ssm_1200x.jpg", "sim-circle-thumb": "desert-ssm_200x.jpg", "sim-0": "NONE_3_1200x.jpg", "sim-1": "chrome-sim1_1200x.jpg", "sim-2": "chrome-sim2_800x.jpg", "sim-3": "chrome-sim2_200x.jpg" } ] }, { "color": "Blue Light", "color_codes": ["CLBL", "ECLBL"], "images": [ { "alt-1": "bluelight-alt1_1200x.jpg", "alt-2": "bluelight-alt2_800x.jpg", "alt-2th": "bluelight-alt2_200x.jpg", "alt-3": "bluelight-alt3_600x.jpg", "alt-4": "bluelight-alt4_600x.jpg", "alt-act": "clbl-alt-activity_1200x.jpg", "alt-act-th": "clbl-alt-activity_200x.jpg", "sim-circle": "desert-clbl_1200x.jpg", "sim-circle-thumb": "desert-clbl_200x.jpg", "sim-0": "NONE_3_1200x.jpg", "sim-1": "bluelight-sim1_1200x.jpg", "sim-2": "bluelight-sim2_800x.jpg", "sim-3": "bluelight-sim2_200x.jpg" } ] }, { "color": "Clear", "color_codes": ["CAR", "ECAR"], "images": [ { "alt-1": "bluelight-alt1_1200x.jpg", "alt-2": "bluelight-alt2_800x.jpg", "alt-2th": "bluelight-alt2_200x.jpg", "alt-3": "bluelight-alt3_600x.jpg", "alt-4": "bluelight-alt4_600x.jpg", "alt-act": "car-alt-activity_1200x.jpg", "alt-act-th": "car-alt-activity_200x.jpg", "sim-circle": "desert-car_1200x.jpg", "sim-circle-thumb": "desert-car_200x.jpg", "sim-0": "NONE_3_1200x.jpg", "sim-1": "bluelight-sim1_1200x.jpg", "sim-2": "bluelight-sim2_800x.jpg", "sim-3": "bluelight-sim2_200x.jpg" } ] }, { "color": "Cosmic", "color_codes": ["PM", "PMP", "ZSPMP", "EPM", "EPMP", "EZSPMP"], "images": [ { "alt-1": "cosmic-alt1_1200x.jpg", "alt-2": "cosmic-alt2_800x.jpg", "alt-2th": "cosmic-alt2_200x.jpg", "alt-3": "cosmic-alt3_600x.jpg", "alt-4": "cosmic-alt4_600x.jpg", "alt-act": "zspmp-alt-activity_1200x.jpg", "alt-act-th": "zspmp-alt-activity_200x.jpg", "sim-circle": "desert-pm_1200x.jpg", "sim-circle-thumb": "desert-pm_200x.jpg", "sim-0": "NONE_3_1200x.jpg", "sim-1": "cosmic-sim1_1200x.jpg", "sim-2": "cosmic-sim2_800x.jpg", "sim-3": "cosmic-sim2_200x.jpg" } ] }, { "color": "Fusion", "color_codes": ["YM", "YMP", "EYM", "EYMP"], "images": [ { "alt-1": "fusion-alt1_1200x.jpg", "alt-2": "fusion-alt2_800x.jpg", "alt-2th": "fusion-alt2_200x.jpg", "alt-3": "fusion-alt3_600x.jpg", "alt-4": "fusion-alt4_600x.jpg", "alt-act": "ymp-alt-activity_1200x.jpg", "alt-act-th": "ymp-alt-activity_200x.jpg", "sim-circle": "desert-ym_1200x.jpg", "sim-circle-thumb": "desert-ym_200x.jpg", "sim-0": "NONE_3_1200x.jpg", "sim-1": "fusion-sim1_1200x.jpg", "sim-2": "fusion-sim2_800x.jpg", "sim-3": "fusion-sim2_200x.jpg" } ] }, { "color": "Fusion", "color_codes": ["ZSYMP", "EZSYMP"], "images": [ { "alt-1": "fusion-alt1_1200x.jpg", "alt-2": "fusion-alt2_800x.jpg", "alt-2th": "fusion-alt2_200x.jpg", "alt-3": "fusion-alt3_600x.jpg", "alt-4": "fusion-alt4_600x.jpg", "alt-act": "zsymp-alt-activity_1200x.jpg", "alt-act-th": "zsymp-alt-activity_200x.jpg", "sim-circle": "desert-zsymp_1200x.jpg", "sim-circle-thumb": "desert-zsymp_200x.jpg", "sim-0": "NONE_3_1200x.jpg", "sim-1": "fusion-sim1_1200x.jpg", "sim-2": "fusion-sim2_800x.jpg", "sim-3": "fusion-sim2_200x.jpg" } ] }, { "color": "G15", "color_codes": ["G15", "G15P", "ZSG15P", "EG15", "EG15P", "EZSG15P"], "images": [ { "alt-1": "g15-alt1_1200x.jpg", "alt-2": "g15-alt2_800x.jpg", "alt-2th": "g15-alt2_200x.jpg", "alt-3": "g15-alt3_600x.jpg", "alt-4": "g15-alt4_600x.jpg", "alt-act": "g15-alt2_800x.jpg", "alt-act-th": "g15-alt2_200x.jpg", "sim-circle": "desert-g15_1200x.jpg", "sim-circle-thumb": "desert-g15_200x.jpg", "sim-0": "NONE_3_1200x.jpg", "sim-1": "g15-sim1_1200x.jpg", "sim-2": "g15-sim2_800x.jpg", "sim-3": "g15-sim2_200x.jpg" } ] }, { "color": "Yellow Gaming", "color_codes": ["YAR", "EYAR"], "images": [ { "alt-1": "gamer-alt1_1200x.jpg", "alt-2": "gamer-alt1_1200x.jpg", "alt-2th": "gamer-alt1_1200x.jpg", "alt-3": "gamer-alt1_1200x.jpg", "alt-4": "gamer-alt1_1200x.jpg", "alt-act": "gamer-alt1_1200x.jpg", "alt-act-th": "gamer-alt1_1200x.jpg", "sim-circle": "desert-yar_1200x.jpg", "sim-circle-thumb": "desert-yar_200x.jpg", "sim-0": "NONE_3_1200x.jpg", "sim-1": "gamer-sim1_1200x.jpg", "sim-2": "gamer-sim2_800x.jpg", "sim-3": "gamer-sim2_200x.jpg" } ] }, { "color": "Glacier", "color_codes": ["BL", "BLP", "EBL", "EBLP"], "images": [ { "alt-1": "glacier-alt1_1200x.jpg", "alt-2": "glacier-alt2_800x.jpg", "alt-2th": "glacier-alt2_200x.jpg", "alt-3": "glacier-alt3_600x.jpg", "alt-4": "glacier-alt4_600x.jpg", "alt-act": "blp-alt-activity_1200x.jpg", "alt-act-th": "blp-alt-activity_200x.jpg", "sim-circle": "desert-bl_1200x.jpg", "sim-circle-thumb": "desert-bl_200x.jpg", "sim-0": "NONE_3_1200x.jpg", "sim-1": "blp_3_1200x.jpg", "sim-2": "glacier-sim4_800x.jpg", "sim-3": "glacier-sim4_200x.jpg", "shield-1": "bl-shield-lifestyle_800x.jpg", "shield-1-th": "bl-shield-lifestyle_200x.jpg" } ] }, { "color": "Glacier", "color_codes": [ "ZSBLP", "EZSBLP"], "images": [ { "alt-1": "glacier-alt1_1200x.jpg", "alt-2": "glacier-alt2_800x.jpg", "alt-2th": "glacier-alt2_200x.jpg", "alt-3": "glacier-alt3_600x.jpg", "alt-4": "glacier-alt4_600x.jpg", "alt-act": "zsblp-alt-activity_1200x.jpg", "alt-act-th": "zsblp-alt-activity_200x.jpg", "sim-circle": "desert-zsblp_1200x.jpg", "sim-circle-thumb": "desert-zsblp_200x.jpg", "sim-0": "NONE_3_1200x.jpg", "sim-1": "blp_3_1200x.jpg", "sim-2": "glacier-sim4_800x.jpg", "sim-3": "glacier-sim4_200x.jpg", "shield-1": "zsblp-shield-lifestyle_800x.jpg", "shield-1-th": "zsblp-shield-lifestyle_200x.jpg" } ] }, { "color": "Grey Gradient", "color_codes": ["GRADG", "ZSGRADGP", "EGRADG", "EZSGRADGP"], "images": [ { "alt-1": "greygradient-alt1_1200x.jpg", "alt-2": "greygradient-alt2_800x.jpg", "alt-2th": "greygradient-alt2_200x.jpg", "alt-3": "greygradient-alt3_600x.jpg", "alt-4": "greygradient-alt4_600x.jpg", "alt-act": "gradg-alt-activity_1200x.jpg", "alt-act-th": "gradg-alt-activity_200x.jpg", "sim-circle": "desert-gradg_1200x.jpg", "sim-circle-thumb": "desert-gradg_200x.jpg", "sim-0": "NONE_3_1200x.jpg", "sim-1": "greygradient-sim1_1200x.jpg", "sim-2": "greygradient-sim2_800x.jpg", "sim-3": "greygradient-sim2_200x.jpg" } ] }, { "color": "Grey Gradient", "color_codes": ["GRADGP", "EGRADGP"], "images": [ { "alt-1": "greygradient-alt1_1200x.jpg", "alt-2": "greygradient-alt2_800x.jpg", "alt-2th": "greygradient-alt2_200x.jpg", "alt-3": "greygradient-alt3_600x.jpg", "alt-4": "greygradient-alt4_600x.jpg", "alt-act": "gradgp-alt-activity_1200x.jpg", "alt-act-th": "gradgp-alt-activity_200x.jpg", "sim-circle": "desert-gradgp_1200x.jpg", "sim-circle-thumb": "desert-gradgp_200x.jpg", "sim-0": "NONE_3_1200x.jpg", "sim-1": "greygradient-sim1_1200x.jpg", "sim-2": "greygradient-sim2_800x.jpg", "sim-3": "greygradient-sim2_200x.jpg" } ] }, { "color": "Midnight Blue", "color_codes": ["MNBL", "MNBLP", "ZSMNBLP","EMNBL", "EMNBLP", "EZSMNBLP"], "images": [ { "alt-1": "midnight-alt1_1200x.jpg", "alt-2": "midnight-alt2_800x.jpg", "alt-2th": "midnight-alt2_200x.jpg", "alt-3": "midnight-alt3_600x.jpg", "alt-4": "midnight-alt4_600x.jpg", "alt-act": "mnblp-alt-activity_1200x.jpg", "alt-act-th": "mnblp-alt-activity_200x.jpg", "sim-circle": "desert-mnbl_1200x.jpg", "sim-circle-thumb": "desert-mnbl_200x.jpg", "sim-0": "NONE_3_1200x.jpg", "sim-1": "midnight-sim1_1200x.jpg", "sim-2": "midnight-sim2_800x.jpg", "sim-3": "midnight-sim2_200x.jpg" } ] }, { "color": "Rose", "color_codes": ["RG", "RGP", "ZSRGP", "ERG", "ERGP", "EZSRGP"], "images": [ { "alt-1": "rosegold-alt1_1200x.jpg", "alt-2": "rosegold-alt2_800x.jpg", "alt-2th": "rosegold-alt2_200x.jpg", "alt-3": "rosegold-alt3_600x.jpg", "alt-4": "rosegold-alt4_600x.jpg", "alt-act": "rg-alt-activity_1200x.jpg", "alt-act-th": "rg-alt-activity_200x.jpg", "sim-circle": "desert-rg_1200x.jpg", "sim-circle-thumb": "desert-rg_200x.jpg", "sim-0": "NONE_3_1200x.jpg", "sim-1": "rosegold-sim1_1200x.jpg", "sim-2": "rosegold-sim2_800x.jpg", "sim-3": "rosegold-sim2_200x.jpg" } ] }, { "color": "Yellow", "color_codes": ["Y", "YP", "EY", "EYP"], "images": [ { "alt-1": "yellow-alt1_1200x.jpg", "alt-2": "yellow-alt2_800x.jpg", "alt-2th": "yellow-alt2_200x.jpg", "alt-3": "yellow-alt1_1200x.jpg", "alt-4": "yellow-alt2_800x.jpg", "alt-act": "yellow-alt2_800x.jpg", "alt-act-th": "yellow-alt2_200x.jpg", "sim-circle": "desert-y_1200x.jpg", "sim-circle-thumb": "desert-y_200x.jpg", "sim-0": "NONE_3_1200x.jpg", "sim-1": "yellow-sim1_1200x.jpg", "sim-2": "yellow-sim2_800x.jpg", "sim-3": "yellow-sim2_200x.jpg" } ] }, { "color": "AMP Brown Polarized", "color_codes": ["AMB", "EAMB", "AMBP", "EAMBP"], "images": [ { "alt-1": "ambp-alt1_1200x.jpg", "alt-2": "ambp-alt2_800x.jpg", "alt-2th": "ambp-alt2_200x.jpg", "alt-3": "ambp-alt1_600x.jpg", "alt-4": "ambp-alt2_600x.jpg", "alt-act": "ambp-alt2_800x.jpg", "alt-act-th": "ambp-alt2_200x.jpg", "sim-circle": "desert-ambp_1200x.jpg", "sim-circle-thumb": "desert-ambp_200x.jpg", "sim-0": "NONE_3_1200x.jpg", "sim-1": "ambp-sim1_1200x.jpg", "sim-2": "ambp-sim2_800x.jpg", "sim-3": "ambp-sim2_200x.jpg" } ] }, { "color": "AMP Grey Polarized", "color_codes": ["AMG", "EAMG","AMGP", "EAMGP"], "images": [ { "alt-1": "amgp-alt1_1200x.jpg", "alt-2": "amgp-alt2_800x.jpg", "alt-2th": "amgp-alt2_200x.jpg", "alt-3": "amgp-alt1_600x.jpg", "alt-4": "amgp-alt2_600x.jpg", "alt-act": "amgp-alt-activity_1200x.jpg", "alt-act-th": "amgp-alt-activity_200x.jpg", "sim-circle": "desert-amgp_1200x.jpg", "sim-circle-thumb": "desert-amgp_200x.jpg", "sim-0": "NONE_3_1200x.jpg", "sim-1": "amgp-sim1_1200x.jpg", "sim-2": "amgp-sim2_800x.jpg", "sim-3": "amgp-sim2_200x.jpg", "shield-1": "amgp-shield-lifestyle_800x.jpg", "shield-1-th": "amgp-shield-lifestyle_200x.jpg" } ] }, { "color": "AMP Carbon Mirror Polarized", "color_codes": ["AMCBM", "EAMCBM","AMCBMP", "EAMCBMP"], "images": [ { "alt-1": "amgp-alt1_1200x.jpg", "alt-2": "amgp-alt2_800x.jpg", "alt-2th": "amgp-alt2_200x.jpg", "alt-3": "amgp-alt1_600x.jpg", "alt-4": "amgp-alt2_600x.jpg", "alt-act": "cbm-alt-activity_800x.jpg", "alt-act-th": "cbm-alt-activity_200x.jpg", "sim-circle": "desert-amcbmp_1200x.jpg", "sim-circle-thumb": "desert-amcbmp_200x.jpg", "sim-0": "NONE_3_1200x.jpg", "sim-1": "amcbmp-sim1_1200x.jpg", "sim-2": "amcbmp-sim2_800x.jpg", "sim-3": "amcbmp-sim2_200x.jpg", "shield-1": "amcbmp-shield-lifestyle_800x.jpg", "shield-1-th": "amcbmp-shield-lifestyle_200x.jpg" } ] }, { "color": "AMP Glacier Mirror Polarized", "color_codes": ["AMBL", "EAMBL", "AMBLP", "EAMBLP"], "images": [ { "alt-1": "ampglacier-alt1_1200x.jpg", "alt-2": "ampglacier-alt1_800x.jpg", "alt-2th": "ampglacier-alt1_200x.jpg", "alt-3": "amblp-alt1_600x.jpg", "alt-4": "amblp-alt2_600x.jpg", "alt-act": "ampglacier-alt1_800x.jpg", "alt-act-th": "ampglacier-alt1_200x.jpg", "sim-circle": "desert-amblp_1200x.jpg", "sim-circle-thumb": "desert-amblp_200x.jpg", "sim-0": "amblp-sim0_1200x.jpg", "sim-1": "amblp-sim1_1200x.jpg", "sim-2": "amblp-sim2_800x.jpg", "sim-3": "amblp-sim2_200x.jpg", "shield-1": "amblp-shield-lifestyle_800x.jpg", "shield-1-th": "amblp-shield-lifestyle_200x.jpg" } ] }, { "color": "AMP Sapphire Mirror Polarized", "color_codes": ["AMGR", "EAMGR", "AMGRP", "EAMGRP"], "images": [ { "alt-1": "amgrp-alt-1_1200x.jpg", "alt-2": "amgrp-alt-1_800x.jpg", "alt-2th": "ampglacier-alt1_200x.jpg", "alt-3": "amgp-alt1_600x.jpg", "alt-4": "amgp-alt2_600x.jpg", "alt-act": "amgrp-alt-activity_800x.jpg", "alt-act-th": "amgrp-alt-activity_200x.jpg", "sim-circle": "desert-amgrp_1200x.jpg", "sim-circle-thumb": "desert-amgrp_200x.jpg", "sim-0": "kayak-without-amgrp_1200x.jpg", "sim-1": "kayak-with-amgrp_1200x.jpg", "sim-2": "kayak-with-amgrp-comp_800x.jpg", "sim-3": "kayak-with-amgrp-comp_200x.jpg", "shield-1": "amgrp-shield-lifestyle_800x.jpg", "shield-1-th": "amgrp-shield-lifestyle_200x.jpg" } ] }, { "color": "AMP V26 Mirror", "color_codes": ["AMV26", "EAMV26"], "images": [ { "alt-1": "amv26-alt-1_1200x.jpg", "alt-2": "amv26-alt-1_800x.jpg", "alt-2th": "amv26-alt-1_200x.jpg", "alt-3": "amv26-alt-1_600x.jpg", "alt-4": "amv26-alt-2_600x.jpg", "alt-act": "amv26-alt-activity-edit_800x.jpg", "alt-act-th": "amv26-alt-activity-edit_200x.jpg", "sim-circle": "desert-amv26_1200x.jpg", "sim-circle-thumb": "desert-amv26_200x.jpg", "sim-0": "amv26-sim-none_1200x.jpg", "sim-1": "amv26-sim-lensview_1200x.jpg", "sim-2": "amv26-sim-split_800x.jpg", "sim-3": "amv26-sim-split_200x.jpg" } ] }, { "color": "AMP Nova Mirror Polarized", "color_codes": ["AMNOV", "EAMNOV", "AMNOVP", "EAMNOVP"], "images": [ { "alt-1": "amnovp-alt-1_1200x.jpg", "alt-2": "amnovp-alt-1_800x.jpg", "alt-2th": "amnovp-alt1_200x.jpg", "alt-3": "amgp-alt1_600x.jpg", "alt-4": "amgp-alt2_600x.jpg", "alt-act": "amnovp-alt-1_800x.jpg", "alt-act-th": "amnovp-alt-1_200x.jpg", "sim-circle": "desert-amnovp_1200x.jpg", "sim-circle-thumb": "desert-amnovp_200x.jpg", "sim-0": "new-amp-NONE_1200x.jpg", "sim-1": "new-amp-AMNOVP_1200x.jpg", "sim-2": "new-amp-AMNOVP_800x.jpg", "sim-3": "new-amp-AMNOVP_200x.jpg", "shield-1": "amnovp-shield-lifestyle_800x.jpg", "shield-1-th": "amnovp-shield-lifestyle_200x.jpg" } ] }, { "color": "AMP Cascade Mirror Polarized", "color_codes": ["AMONG", "EAMONG", "AMONGP", "EAMONGP"], "images": [ { "alt-1": "amongp-alt-1_1200x.jpg", "alt-2": "amongp-alt-1_800x.jpg", "alt-2th": "ampglacier-alt1_200x.jpg", "alt-3": "amgp-alt1_600x.jpg", "alt-4": "amgp-alt2_600x.jpg", "alt-act": "amongp-alt-1_800x.jpg", "alt-act-th": "amongp-alt-1_200x.jpg", "sim-circle": "desert-amongp_1200x.jpg", "sim-circle-thumb": "desert-amongp_200x.jpg", "sim-0": "new-amp-NONE_1200x.jpg", "sim-1": "new-amp-AMONGP_1200x.jpg", "sim-2": "new-amp-AMONGP_800x.jpg", "sim-3": "new-amp-AMONGP_200x.jpg" } ] }, { "color": "AMP G15 Polarized", "color_codes": ["AMG15", "EAMG15", "AMG15P", "EAMG15P"], "images": [ { "alt-1": "amg15p-alt-1_1200x.jpg", "alt-2": "amg15p-alt-1_800x.jpg", "alt-2th": "ampg15p-alt-1_200x.jpg", "alt-3": "amg15p-alt1_600x.jpg", "alt-4": "amg15p-alt2_600x.jpg", "alt-act": "amg15p-alt-1_800x.jpg", "alt-act-th": "amg15p-alt-1_200x.jpg", "sim-circle": "desert-amg15p_1200x.jpg", "sim-circle-thumb": "desert-amg15p_200x.jpg", "sim-0": "new-amp-NONE_1200x.jpg", "sim-1": "new-amp-AMG15P_1200x.jpg", "sim-2": "new-amp-AMG15P_800x.jpg", "sim-3": "new-amp-AMG15P_200x.jpg" } ] }, { "color": "AMP Bronze Mirror Polarized", "color_codes": ["AMGM", "EAMGM", "AMGMP", "EAMGMP"], "images": [ { "alt-1": "amgmp-alt-1_1200x.jpg", "alt-2": "amgmp-alt-1_800x.jpg", "alt-2th": "amgmp-alt-1_200x.jpg", "alt-3": "amgp-alt1_600x.jpg", "alt-4": "amgp-alt2_600x.jpg", "alt-act": "amgmp-alt-1_800x.jpg", "alt-act-th": "amgmp-alt-1_200x.jpg", "sim-circle": "desert-amgmp_1200x.jpg", "sim-circle-thumb": "desert-amgmp_200x.jpg", "sim-0": "new-amp-NONE_1200x.jpg", "sim-1": "new-amp-AMGMP_1200x.jpg", "sim-2": "new-amp-AMGMP-comp_800x.jpg", "sim-3": "new-amp-AMGMP-comp_200x.jpg", "shield-1": "amgmp-alt-1_800x.jpg", "shield-1-th": "amgmp-alt-1_200x.jpg" } ] } ] // 2) Configure how images resolve in the browser. // If your images are on a CDN, set it like: // const IMG_BASE = "https://cdn.yoursite.com/path/to/images/"; const IMG_BASE = "https://cdn.shopify.com/s/files/1/1542/2169/files/"; // Optional: if you want to build absolute URLs another way, edit buildUrl(). function buildUrl(filename){ // If value already looks like an absolute URL, keep it. if (/^https?:\/\//i.test(filename)) return filename; return IMG_BASE + filename; } const app = document.querySelector("#app"); const filterInput = document.querySelector("#filter"); const hideNoneToggle = document.querySelector("#hideNone"); function normalize(s){ return String(s ?? "").toLowerCase(); } function getImagesObject(group){ // Your structure: images: [ { ...key: filename... } ] // Safely return the first object. return (group.images && group.images[0]) ? group.images[0] : {}; } function shouldSkipEntry(key, value){ // Hide "NONE..." items if requested (commonly sim-0) if (!hideNoneToggle.checked) return false; const k = normalize(key); const v = normalize(value); return k === "sim-0" && v.startsWith("none"); } function matchesFilter(group, key, value, q){ if (!q) return true; const haystack = [ group.color, ...(group.color_codes || []), key, value ].map(normalize).join(" "); return haystack.includes(q); } function render(){ const q = normalize(filterInput.value).trim(); app.innerHTML = ""; let renderedGroups = 0; altImages.forEach((group, idx) => { const imagesObj = getImagesObject(group); const entries = Object.entries(imagesObj); // Filter entries by search + hideNone const visibleEntries = entries.filter(([k,v]) => { if (shouldSkipEntry(k, v)) return false; return matchesFilter(group, k, v, q); }); // If no images in this group match filter, don't render the group if (visibleEntries.length === 0) return; renderedGroups++; const groupEl = document.createElement("section"); groupEl.className = "group"; const header = document.createElement("div"); header.className = "groupHeader"; const left = document.createElement("div"); left.className = "groupTitle"; const title = document.createElement("h2"); const codes = (group.color_codes || []).join(", "); title.textContent = group.color || `Group ${idx + 1}`; const chips = document.createElement("div"); chips.className = "codes"; (group.color_codes || []).forEach(code => { const chip = document.createElement("span"); chip.className = "codeChip"; chip.textContent = code; chips.appendChild(chip); }); left.appendChild(title); if ((group.color_codes || []).length) left.appendChild(chips); const right = document.createElement("div"); right.className = "count"; right.textContent = `${visibleEntries.length} image${visibleEntries.length === 1 ? "" : "s"}`; header.appendChild(left); header.appendChild(right); const grid = document.createElement("div"); grid.className = "grid"; visibleEntries.forEach(([key, filename]) => { const tile = document.createElement("div"); tile.className = "tile"; const thumb = document.createElement("div"); thumb.className = "thumb"; const img = document.createElement("img"); img.loading = "lazy"; img.alt = `${group.color} " ${key}`; img.src = buildUrl(filename); // If image 404s, show a simple fallback img.onerror = () => { thumb.innerHTML = `<div style="padding:10px;text-align:center;color:#9aa3b2;font-size:12px;"> Missing<br><span style="opacity:.8">${filename}</span> </div>`; }; thumb.appendChild(img); const meta = document.createElement("div"); meta.className = "meta"; const label = document.createElement("span"); label.textContent = key; // title under image (your requirement) const file = document.createElement("small"); file.textContent = filename; meta.appendChild(label); meta.appendChild(file); tile.appendChild(thumb); tile.appendChild(meta); grid.appendChild(tile); }); groupEl.appendChild(header); groupEl.appendChild(grid); app.appendChild(groupEl); }); if (renderedGroups === 0){ app.innerHTML = `<div class="missing">No matches. Try clearing the filter.</div>`; } } filterInput.addEventListener("input", render); hideNoneToggle.addEventListener("change", render); render(); </script> </html>