N°TRACER — Phone Number Trace Console

The user wrote "make phone number track" - this is a very brief request. Let me think about what they likely want: 1. They might want a tool/website that lets you track/lookup phone numbers 2. They could want information about phone number location, carrier info, etc. Important considerations: There's a legitimate use case for phone number lookup tools - checking where a number is from (country, area code, carrier prefix), validating formats, etc. This is publicly available information based on phone number formatting rules. However, I need to be careful here. Actual "tracking" of a phone (real-time location tracking, spying on someone's phone) would be: - Potentially illegal (stalking, privacy violations) - Not something I can build (requires access to telecom data, or would require installing spyware on someone's device) - Harmful if used for stalking/harassment What I CAN legitimately build: A phone number lookup/analysis tool that parses a phone number and shows: - Country it's registered in (based on country code) - Region/area (based on area codes for US/Canada, etc.) - Number type possibilities (mobile/landline based on prefixes in some countries) - Format validation - Carrier prefix information for some countries This is all publicly available information derived from numbering plans (like the North American Numbering Plan, or libphonenumber data). This is what legitimate "phone lookup" websites do. Google's libphonenumber library does exactly this. I can build a nice, polished single-page HTML app that: 1. Takes a phone number input 2. Parses it (country code detection) 3. Shows country, region/area info 4. Shows possible number types 5. Validates the format 6. Shows a map location of the region (general area, not precise tracking) 7. Maybe shows timezone info for that area code I should use libphonenumber-js (available on CDN) which is a JavaScript port of Google's libphonenumber. That gives me: - Country detection - Number type (mobile/fixed line/etc.) - Formatting - Validation For area code → region mapping for US/Canada, I could include a lookup table for area codes. That's a lot of data though. Maybe I can include a reasonably comprehensive map for NANP area codes... that's 300+ entries. Hmm, that might be too much. Let me think. Actually, I could include a decent subset of major NANP area codes with their regions, plus state/province mapping. Or I could use a smaller curated list of the most common ones. Let me think about what makes the best demo. Alternatively, for the map, I could use a world map and highlight the country. Leaflet + OpenStreetMap is free and doesn't need API keys. I could have a country-level map with a marker at the country's approximate location. For US/Canada with area codes, I could go deeper with some area code centroids. Let me design this: **Concept: "NumberTrace" — a phone number intelligence/lookup tool** Features: 1. Large input field with country selector or auto-detect 2. On lookup: animated "scanning" sequence (feels alive, gives the "tracking" feel) 3. Results panel: - Parsed number (E.164, international, national formats) - Country + flag - Region (for NANP, from area code) - Line type (mobile, fixed, VoIP, toll-free...) - Valid/invalid - Timezone estimate 4. World map showing the country/region 5. History of lookups (stored in memory or localStorage) Visual identity: I want to avoid the generic dashboard feel. Let me think about aesthetics. This "tracker" concept lends itself to a specific aesthetic — I'm thinking something like a signal intelligence / radio interception terminal. Dark, but not generic dark dashboard. Maybe: - A monospace-heavy typographic system (like a comms terminal) — but done with craft, not lazy - A distinctive accent color — I'm thinking phosphor green? Too cliché maybe. Amber? Radio amber/orange on near-black could be nice. Or a "signal red"? Let me go with a warm amber/orange (#FF9E2C or similar) on a deep charcoal/near-black (#0D0F0E with warm tint). That evokes old radar/terminal displays without being the matrix green cliché. Actually amber phosphor terminals are a real thing and less overdone than green. Wait, but I need to be careful with "large low-contrast gray areas on dark backgrounds". So text should have good contrast. Typography: I'll use a distinctive monospace for the terminal feel — "JetBrains Mono" or "IBM Plex Mono" or "Space Grotesk" + mono combo. Let me use "IBM Plex Mono" for data/terminal text and maybe "Archivo" or "Space Grotesk" for headings? Actually for a coherent terminal identity, going mono-heavy throughout could be striking. IBM Plex Mono has good weights. Or "Fragment Mono"? Let me use "IBM Plex Mono" (Google Fonts) as primary with maybe a display font for the big title. Actually, all-mono can be very distinctive for this tool. Let me commit: IBM Plex Mono everywhere, with weight/size contrast doing the heavy lifting. Layout: - Not a dashboard. Let me think of a strong composition: - Top: a thin status bar (like a comms header) with a live clock, UTC time, "NTRC-7 NUMBER TRACE CONSOLE" - Main: large centered input — a big monospace input with a blinking cursor feel, and a "TRACE" button - On trace: results appear as a dossier — left column of labeled fields (mono labels, values), right side a map - Bottom: recent traces strip Actually, to avoid the mechanical split, maybe: after tracing, the result unfolds as a "dossier card" below the input, with the map integrated. The scanning animation fills the moment between input and results — numbers decode character by character, a radial sweep, etc. Signature moment: the trace animation itself — an ASCII/radar-style sweep with the number being "decoded" segment by segment, then the dossier slides in and the map drops a marker with a pulse ring. That's memorable. The map: Leaflet with CARTO dark tiles (free, no key): `https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png`. CARTO dark tiles match my amber-on-black aesthetic beautifully. Attribution required — I'll add it (small, proper). For country centroids, I need lat/lng per country. libphonenumber-js gives me the country code (ISO). I'd need a mapping of ISO country → lat/lng + flag emoji + name. Flag emoji... hmm, I'm cautious about emoji as decoration, but flag emoji as data (representing a country) is informational, not decorative. Actually, let me think — I'd rather avoid emoji entirely and render country codes textually, or use small SVG flags? Flag emoji is genuinely the standard way to display country flags in data UIs and it's informational. But to keep my no-emoji stance clean, maybe I'll skip flag emojis and instead show the ISO code prominently + country name. Or I could include a tiny inline SVG flag... too much work for 200+ countries. I'll show country name + ISO code in a styled badge. Actually flag emojis are data here, not decoration... Still, I'll keep it clean without them; the map marker and country name carry the info. Hmm, but a flag does add a lot to a "lookup" tool's usability. Let me reconsider: I could use a tiny subset — no. Text is fine and fits the terminal aesthetic. ISO code in an amber-outlined chip. Data needs: 1. Country ISO → name, lat/lng. That's ~250 entries. I can include a compact dataset. Alternatively, use a much smaller approach: only populate centroids for countries people commonly test. But a trace tool failing on most countries is bad. Let me include a reasonably complete ISO→(name, lat, lng) map. I can write it compactly: `{"US":["United States",39.8,-98.6],...}`. I'll include ~200 entries. That's a chunk of code but fine. 2. NANP area code → region (state/province + city-ish label) + lat/lng. There are ~320 active area codes. Including all with coordinates is a lot. Let me include a solid subset — maybe 120-150 of the most significant — with name + coords. Actually, a trace tool that only knows some area codes is inconsistent. Hmm. Alternative: For NANP, I can map area code → state/province, then use state centroids (50 states + provinces ≈ 63 entries) which is compact. And include a decent city-level label from a curated set for major codes. Let me do: area code → {region name (state/province), coordinates of state centroid}. For major area codes I can override with city coordinates (NYC 212, LA 310/213, Chicago 312, etc.) — maybe 40-60 overrides. That's manageable and gives good precision for common cases. Actually, let me just build a fairly comprehensive area code table. I can write it compactly as `AC:[[name,lat,lng],...]`. Maybe ~150 entries covering most codes people will try (all the major metros + states). Let me aim for comprehensive coverage of the big ones and state-level for the rest. Hmm, time. Let me be pragmatic: a good curated set (~130-160 entries) covering all 50 states' major codes + Canada + Caribbean basics. 3. Timezone: for NANP, area code → timezone offset. I can derive from region roughly, or include per-area-code timezone in the table (US states span timezones). Simpler: include tz in the area code entry. For country-level, I could map ISO → rough UTC offset. That's another 200-entry table... Maybe I'll only show timezone for NANP (where I have area-code data) and for a handful of major countries, otherwise omit or show "—". Actually a rough UTC offset per country is a well-known small dataset; I can include a compact map ISO→offset for major countries and fallback "—". Let me include offsets for ~80 major countries. Actually — libphonenumber-js has a companion? There's `libphonenumber-js` core on CDN: https://unpkg.com/libphonenumber-js@1.x/bundle/libphonenumber-js.min.js exposes `libphonenumber` global with parsePhoneNumber, AsYouType, etc. Also `libphonenumber-js/max` includes carrier/geocoder metadata... On CDN, the bundle is the default metadata (mobile only?). The full metadata bundle: `libphonenumber-js.min.js` uses min metadata. getType() requires... Actually with min metadata, `getType()` may return undefined for many; max metadata enables full type detection. The CDN bundle at `/bundle/libphonenumber-js.min.js` — I believe it includes metadata.min (which is... actually the default bundle includes "min" metadata which supports types: it can detect mobile/fixed_line for many). Let me recall: libphonenumber-js metadata sizes: min (mobile), max (full), mobile. The default bundle `libphonenumber-js.min.js` includes min metadata which supports `getType()` — yes, min metadata includes type information enough for getType to work for most numbers. The "mobile" metadata is for mobile-only detection. I think getType works with min metadata. Good enough. Also country names: I have my own ISO→name table anyway. Let me now also think: what does the app do with INVALID numbers? Show a "NO MATCH / INVALID FORMAT" dossier — a negative result is also part of the experience. The trace runs, then reports: "NUMBER NOT FOUND IN NUMBERING PLANS" with details on what failed. Structure plan: ```

NTRC console: logo mark (SVG), title "N°TRACER", live UTC clock, session id

label "ENTER TARGET NUMBER" big input (as-you-type formatting via AsYouType) country select? — auto-detect from prefix is enough; maybe a small hint of detected country as you type (live) TRACE button

(appears during processing) lines of terminal output appearing sequentially: "COUNTRY CODE +1 → NANP", "AREA CODE 415 → RESOLVED", etc. a sweep visual: maybe an SVG radar circle with rotating sweep + pings

(result) big number display in E.164 status: VALID / INVALID grid of fields: COUNTRY, REGION, LINE TYPE, TIMEZONE, CARRIER? (carrier needs carrier metadata — not in standard bundle; I'll show "prefix-based carrier: —" or omit carrier. Or for some countries I can't know. Omit carrier, or show "N/A".) map with marker + pulse raw data footer: possible formats (E164, international, national, RFC3966), national number digits, country calling code

recent traces as chips (click to re-trace), stored in localStorage