/* cctv.ae — high-quality graphics & simulation concepts. Premium icon chips, a radar analytics HUD, a live camera-network graph, and four designed industry illustrations (replacing the photo tiles). */ (function () { const CY = "var(--af-light-blue)"; /* Premium gradient icon chip (replaces flat icon tiles everywhere). */ function IconChip({ name, size = 26, chip = 56, onDark = false, stroke = 1.6 }) { const Icon = window.CCTVIcon; return ( ); } /* Hero — radar analytics HUD (replaces the horizontal scan-line concept). */ function RadarHUD() { const HudChip = window.CCTVHudChip; const DetBox = window.CCTVDetBox; const blips = [[68, 30], [40, 60], [78, 64], [55, 42]]; return (
AI Vision · Live 14 feeds · 6 alerts
{/* radar */}
{[46, 33, 20, 8].map((r, i) => )} {blips.map(([x, y], i) => )}
); } /* Threats — live camera-network topology simulation. */ function CameraNetwork({ items }) { // node positions (%), some flagged by severity index into items const nodes = [ { x: 12, y: 30 }, { x: 26, y: 62 }, { x: 30, y: 18 }, { x: 46, y: 44 }, { x: 44, y: 80 }, { x: 62, y: 24 }, { x: 66, y: 60 }, { x: 80, y: 40 }, { x: 84, y: 74 }, { x: 90, y: 18 }, ]; const edges = [[0, 3], [2, 3], [1, 3], [3, 5], [3, 6], [4, 6], [5, 7], [6, 7], [7, 9], [7, 8], [6, 4], [5, 9]]; const flagged = { 5: "Critical", 6: "High", 8: "Critical", 2: "Medium", 1: "High" }; const col = (s) => (s === "Critical" ? "#ff6168" : s === "High" ? "#ffb020" : CY); return ( {edges.map(([a, b], i) => )} {nodes.map((n, i) => { const sev = flagged[i]; const c = sev ? col(sev) : "rgba(150,200,235,0.7)"; return ( {sev && } ); })} ); } /* ── Industry illustrations (designed, brand duotone) ───── */ const Frame = ({ id, children, accent = CY }) => ( {[20, 40, 60, 80].map((y) => )} {[40, 80, 120].map((x) => )} {children} {/* FR detection accent */} ); const Schools = () => ( ); const Visitor = () => ( ); const Retail = () => ( {[30, 38, 46].map((y) => )} {[30, 38, 46].map((y) => )} ); const Facilities = () => ( {[30, 42, 54].map((y) => [38, 50, 62].map((x) => ))} ); Object.assign(window, { CCTVIconChip: IconChip, CCTVRadarHUD: RadarHUD, CCTVCameraNetwork: CameraNetwork, CCTVIllos: { schools: Schools, visitor: Visitor, retail: Retail, facilities: Facilities }, CCTVAIControlRoom: AIControlRoom, }); /* ── AI control-room illustration (designed, brand duotone) ─ */ function AIControlRoom() { return ( {/* video wall */} {[[40, 26], [232, 26], [424, 26]].map(([x, y], i) => ( {/* face/box detections per screen */} {i === 0 && } {i === 1 && } {i === 2 && D 12345} ))} {/* central AI core + neural links to screens */} {[0, 60, 120, 180, 240, 300].map((a) => { const r = a * Math.PI / 180; return ; })} AI {/* operator desk silhouettes */} {/* status ticker */} AI ANALYSING · LIVE ); } })();