Initial free demo (CyberMax)

README.md

@@ -1,10 +1,29 @@
 ---
-title: Zip Code Lookup
-emoji: 🏢
-colorFrom: yellow
-colorTo: blue
+title: "Ziplore: US ZIP Code Lookup & Radius Search"
+emoji: 📍
+colorFrom: green
+colorTo: gray
 sdk: static
 pinned: false
+license: cc-by-4.0
+short_description: Free ZIP lookup with county, time zone & income
+tags:
+  - zip-codes
+  - geocoding
+  - census
+  - demographics
+  - radius-search
+  - real-estate
+  - agents
+  - apify
+datasets:
+  - shaw276/us-zip-codes-demographics
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# Ziplore: free US ZIP code lookup & radius search
+
+Type a ZIP code (or "lat,lon") and a radius: get city, county, time zone, local time, population, median household income, home value, rent and age for that ZIP and every ZIP around it. All 41,682 US ZIPs load in your browser; nothing is sent anywhere.
+
+**Whole lists, workflows and AI agents:** [Ziplore on the Apify Store](https://apify.com/cybermax/zip-data-api) takes thousands of ZIPs, addresses, "City, ST" names or coordinates and returns JSON with county FIPS, UTC offsets and nearby ZIPs; $0.0005 per ZIP, and it's an MCP tool for Claude and Cursor. Bulk CSV: [shaw276/us-zip-codes-demographics](https://huggingface.co/datasets/shaw276/us-zip-codes-demographics).
+
+Data: GeoNames (CC BY 4.0), US Census Bureau (2024 Gazetteer, ACS 2020–2024 5-year), timezone-boundary-builder (ODbL, © OpenStreetMap contributors). Made by CyberMax.

index.html

@@ -1,19 +1,101 @@
 <!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>Ziplore: free US ZIP code lookup & radius search</title>
+<meta name="description" content="Free US ZIP code lookup: city, county, time zone, population, income and home value for any ZIP, plus every ZIP within N miles.">
+<style>
+  :root { --bg: #fbfaf7; --fg: #1d2330; --muted: #5d6675; --line: #e3e0d8; --card: #fff; --accent: #1f6f5c; --accent-fg: #fff; }
+  @media (prefers-color-scheme: dark) { :root { --bg: #14171c; --fg: #e8e6e1; --muted: #9aa3ad; --line: #2b3038; --card: #1b1f26; --accent: #4fb89b; --accent-fg: #0d1a16; } }
+  * { box-sizing: border-box; }
+  body { margin: 0; background: var(--bg); color: var(--fg); font: 16px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif; }
+  main { max-width: 980px; margin: 0 auto; padding: 24px 16px 48px; }
+  h1 { font-size: 1.7rem; margin: 0 0 4px; }
+  .sub { color: var(--muted); margin: 0 0 20px; }
+  form { display: flex; flex-wrap: wrap; gap: 8px; align-items: end; background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 14px; }
+  label { display: flex; flex-direction: column; font-size: .85rem; color: var(--muted); gap: 4px; }
+  input { font: inherit; padding: 8px 10px; border: 1px solid var(--line); border-radius: 6px; background: var(--bg); color: var(--fg); width: 150px; }
+  button { font: inherit; padding: 9px 16px; border: 0; border-radius: 6px; background: var(--accent); color: var(--accent-fg); cursor: pointer; }
+  #status { color: var(--muted); margin: 12px 0; min-height: 1.5em; }
+  .wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 10px; background: var(--card); }
+  table { border-collapse: collapse; width: 100%; font-size: .9rem; }
+  th, td { text-align: left; padding: 7px 10px; border-bottom: 1px solid var(--line); white-space: nowrap; }
+  th { font-weight: 600; color: var(--muted); }
+  td.n { text-align: right; font-variant-numeric: tabular-nums; }
+  .cta { margin-top: 24px; padding: 16px; border-radius: 10px; border: 1px solid var(--accent); background: var(--card); }
+  .cta a { color: var(--accent); font-weight: 600; }
+  footer { margin-top: 28px; color: var(--muted); font-size: .8rem; }
+  footer a { color: inherit; }
+</style>
+</head>
+<body>
+<main>
+  <h1>Ziplore: free US ZIP code lookup & radius search</h1>
+  <p class="sub">City, county, time zone and Census demographics for any US ZIP code, and every ZIP within a radius. 41,682 ZIPs, all in your browser.</p>
+  <form id="f">
+    <label>ZIP code or "lat,lon" <input id="q" value="10001" autocomplete="postal-code"></label>
+    <label>Radius (miles, 0 = just this ZIP) <input id="mi" type="number" min="0" max="100" step="1" value="2"></label>
+    <label>Min. population <input id="minpop" type="number" min="0" step="100" value="0"></label>
+    <button type="submit">Look up</button>
+  </form>
+  <div id="status">Loading ZIP table…</div>
+  <div class="wrap"><table id="t"><thead><tr><th>ZIP</th><th>City</th><th>State</th><th>County</th><th>Miles</th><th>Time zone</th><th>Local time</th><th>Population</th><th>Median household income</th><th>Median home value</th><th>Median rent</th><th>Median age</th></tr></thead><tbody></tbody></table></div>
+  <div class="cta">
+    <strong>Need this for a whole list, inside a workflow, or for an AI agent?</strong>
+    <a href="https://apify.com/cybermax/zip-data-api" target="_blank" rel="noopener">Run Ziplore on Apify</a>: send thousands of ZIPs, addresses, "City, ST" names or coordinates and get clean JSON with county FIPS, every county a ZIP touches, UTC offsets, per-capita income, owner-occupied share and nearby ZIPs. $0.0005 per ZIP, unknown ZIPs free, and it works as an MCP tool for Claude and Cursor.
+    Bulk data: <a href="https://huggingface.co/datasets/shaw276/us-zip-codes-demographics" target="_blank" rel="noopener">free dataset (CSV)</a>.
+  </div>
+  <footer>
+    Data: <a href="https://www.geonames.org/">GeoNames</a> (CC BY 4.0), US Census Bureau (2024 Gazetteer, ACS 2020–2024 5-year estimates), time zones from timezone-boundary-builder (ODbL, © OpenStreetMap contributors). Distances are between ZIP center points. Home values of $2,000,000 and incomes of $250,000 are Census caps ("or more"). Made by CyberMax. Not affiliated with USPS or the Census Bureau.
+  </footer>
+</main>
+<script>
+let rows = [], byZip = new Map();
+const $ = (id) => document.getElementById(id);
+const fmt = (v, pre = '') => v == null ? '–' : pre + Number(v).toLocaleString('en-US');
+const esc = (s) => String(s ?? '').replace(/[&<>"]/g, (c) => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;' }[c]));
+function miles(a, b, c, d) {
+  const r = Math.PI / 180, x = Math.sin((c - a) * r / 2) ** 2 + Math.cos(a * r) * Math.cos(c * r) * Math.sin((d - b) * r / 2) ** 2;
+  return 2 * 3958.7613 * Math.asin(Math.min(1, Math.sqrt(x)));
+}
+function localTime(tz) {
+  if (!tz) return '–';
+  try { return new Intl.DateTimeFormat('en-US', { timeZone: tz, hour: 'numeric', minute: '2-digit' }).format(new Date()); } catch { return '–'; }
+}
+function render(list) {
+  $('t').tBodies[0].innerHTML = list.map(([d, r]) => `<tr><td>${esc(r.zip)}</td><td>${esc(r.city)}</td><td>${esc(r.state)}</td><td>${esc(r.county)}</td>
+    <td class="n">${d == null ? '–' : d.toFixed(1)}</td><td>${esc(r.timezone || '–')}</td><td>${localTime(r.timezone)}</td><td class="n">${fmt(r.population)}</td>
+    <td class="n">${fmt(r.medianHouseholdIncome, '$')}</td><td class="n">${fmt(r.medianHomeValue, '$')}</td><td class="n">${fmt(r.medianGrossRent, '$')}</td><td class="n">${r.medianAge ?? '–'}</td></tr>`).join('');
+}
+function run() {
+  const q = $('q').value.trim(), mi = Math.min(Math.max(Number($('mi').value) || 0, 0), 100), minPop = Number($('minpop').value) || 0;
+  let lat, lon, center;
+  const pt = q.match(/^(-?\d+(?:\.\d+)?)\s*[,\s]\s*(-?\d+(?:\.\d+)?)$/);
+  if (pt) { lat = +pt[1]; lon = +pt[2]; }
+  else {
+    const z = (q.match(/\d{5}/) || [q.replace(/\D/g, '').padStart(5, '0')])[0];
+    center = byZip.get(z);
+    if (!center) { $('status').textContent = `${z} isn't a US ZIP code in this table.`; render([]); return; }
+    lat = center.latitude; lon = center.longitude;
+  }
+  let list;
+  if (mi > 0 || !center) {
+    list = rows.filter((r) => !['AA', 'AE', 'AP'].includes(r.state)).map((r) => [miles(lat, lon, r.latitude, r.longitude), r]);
+    list = mi > 0 ? list.filter(([d]) => d <= mi) : [list.filter(([, r]) => r.hasZcta).sort((a, b) => a[0] - b[0])[0]].filter(Boolean);
+    list = list.filter(([d, r]) => (r.population ?? 0) >= minPop || (center && r === center)).sort((a, b) => a[0] - b[0]);
+  } else list = [[null, center]];
+  const shown = list.slice(0, 300);
+  $('status').textContent = mi > 0 ? `${list.length} ZIP code${list.length === 1 ? '' : 's'} within ${mi} miles${list.length > 300 ? ' (first 300 shown)' : ''}.` : (center ? '' : 'Nearest ZIP code to that point:');
+  render(shown);
+}
+$('f').addEventListener('submit', (e) => { e.preventDefault(); run(); });
+fetch('zips.json').then((r) => r.json()).then(({ cols, rows: raw }) => {
+  rows = raw.map((a) => Object.fromEntries(cols.map((c, i) => [c, a[i]])));
+  byZip = new Map(rows.map((r) => [r.zip, r]));
+  $('status').textContent = '';
+  run();
+}).catch(() => { $('status').textContent = 'Could not load the ZIP table. Reload the page.'; });
+</script>
+</body>
 </html>