feat(All) 修改结果展示样式，增加测试地区覆盖范围

2025-12-19 15:21:55 +08:00
parent 2f6831336e
commit 1a0815759e
15 changed files with 1336 additions and 368 deletions
--- a/.claude/settings.local.json
+++ b/.claude/settings.local.json
@@ -0,0 +1,16 @@
+{
+  "env": {
+    "ANTHROPIC_BASE_URL": "https://api.a6.wiki",
+    "ANTHROPIC_AUTH_TOKEN": "sk-ahdoawhfo",
+    "ANTHROPIC_MODEL": "claude-opus-4-5-thinking"
+  },
+  "permissions": {
+    "allow": [
+      "mcp__gemini__gemini",
+      "mcp__codex__codex",
+      "Bash(npm run build)",
+      "Bash(npm install react-globe.gl three)"
+    ],
+    "deny": []
+  }
+}
--- a/index.html
+++ b/index.html
@@ -4,6 +4,9 @@
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/globe.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@500;700&display=swap" rel="stylesheet">
    <title>Latency Test</title>
  </head>
  <body>
--- a/package-lock.json
+++ b/package-lock.json
@@ -14,7 +14,9 @@
        "ipaddr.js": "^2.1.0",
        "react": "^18.3.1",
        "react-dom": "^18.3.1",
-        "react-simple-maps": "^3.0.0"
+        "react-globe.gl": "^2.37.0",
+        "react-simple-maps": "^3.0.0",
+        "three": "^0.182.0"
      },
      "devDependencies": {
        "@types/cors": "^2.8.17",
@@ -263,6 +265,15 @@
        "@babel/core": "^7.0.0-0"
      }
    },
+    "node_modules/@babel/runtime": {
+      "version": "7.28.4",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.28.4.tgz",
+      "integrity": "sha512-Q/N6JNWvIvPnLDvjlE1OUBLPQHH6l3CltCEsHIujp45zQUSSh8K+gHnaEX45yAT1nyngnINhvWtzN+Nb9D8RAQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
    "node_modules/@babel/template": {
      "version": "7.27.2",
      "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.27.2.tgz",
@@ -1118,6 +1129,55 @@
        "win32"
      ]
    },
+    "node_modules/@turf/boolean-point-in-polygon": {
+      "version": "7.3.1",
+      "resolved": "https://registry.npmjs.org/@turf/boolean-point-in-polygon/-/boolean-point-in-polygon-7.3.1.tgz",
+      "integrity": "sha512-BUPW63vE43LctwkgannjmEFTX1KFR/18SS7WzFahJWK1ZoP0s1jrfxGX+pi0BH/3Dd9mA71hkGKDDnj1Ndcz0g==",
+      "license": "MIT",
+      "dependencies": {
+        "@turf/helpers": "7.3.1",
+        "@turf/invariant": "7.3.1",
+        "@types/geojson": "^7946.0.10",
+        "point-in-polygon-hao": "^1.1.0",
+        "tslib": "^2.8.1"
+      },
+      "funding": {
+        "url": "https://opencollective.com/turf"
+      }
+    },
+    "node_modules/@turf/helpers": {
+      "version": "7.3.1",
+      "resolved": "https://registry.npmjs.org/@turf/helpers/-/helpers-7.3.1.tgz",
+      "integrity": "sha512-zkL34JVhi5XhsuMEO0MUTIIFEJ8yiW1InMu4hu/oRqamlY4mMoZql0viEmH6Dafh/p+zOl8OYvMJ3Vm3rFshgg==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/geojson": "^7946.0.10",
+        "tslib": "^2.8.1"
+      },
+      "funding": {
+        "url": "https://opencollective.com/turf"
+      }
+    },
+    "node_modules/@turf/invariant": {
+      "version": "7.3.1",
+      "resolved": "https://registry.npmjs.org/@turf/invariant/-/invariant-7.3.1.tgz",
+      "integrity": "sha512-IdZJfDjIDCLH+Gu2yLFoSM7H23sdetIo5t4ET1/25X8gi3GE2XSqbZwaGjuZgNh02nisBewLqNiJs2bo+hrqZA==",
+      "license": "MIT",
+      "dependencies": {
+        "@turf/helpers": "7.3.1",
+        "@types/geojson": "^7946.0.10",
+        "tslib": "^2.8.1"
+      },
+      "funding": {
+        "url": "https://opencollective.com/turf"
+      }
+    },
+    "node_modules/@tweenjs/tween.js": {
+      "version": "25.0.0",
+      "resolved": "https://registry.npmjs.org/@tweenjs/tween.js/-/tween.js-25.0.0.tgz",
+      "integrity": "sha512-XKLA6syeBUaPzx4j3qwMqzzq+V4uo72BnlbOjmuljLrRqdsd3qnzvZZoxvMHZ23ndsRS4aufU6JOZYpCbU6T1A==",
+      "license": "MIT"
+    },
    "node_modules/@types/babel__core": {
      "version": "7.20.5",
      "resolved": "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.20.5.tgz",
@@ -1227,6 +1287,12 @@
        "@types/send": "*"
      }
    },
+    "node_modules/@types/geojson": {
+      "version": "7946.0.16",
+      "resolved": "https://registry.npmjs.org/@types/geojson/-/geojson-7946.0.16.tgz",
+      "integrity": "sha512-6C8nqWur3j98U6+lXDfTUWIfgvZU+EumvpHKcYjujKH7woYyLj2sUmff0tRhrqM7BohUw7Pz3ZB1jj2gW9Fvmg==",
+      "license": "MIT"
+    },
    "node_modules/@types/http-errors": {
      "version": "2.0.5",
      "resolved": "https://registry.npmjs.org/@types/http-errors/-/http-errors-2.0.5.tgz",
@@ -1360,6 +1426,15 @@
        "node": ">= 0.6"
      }
    },
+    "node_modules/accessor-fn": {
+      "version": "1.5.3",
+      "resolved": "https://registry.npmjs.org/accessor-fn/-/accessor-fn-1.5.3.tgz",
+      "integrity": "sha512-rkAofCwe/FvYFUlMB0v0gWmhqtfAtV1IUkdPbfhTUyYniu5LrC0A0UJkTH0Jv3S8SvwkmfuAlY+mQIJATdocMA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      }
+    },
    "node_modules/ansi-regex": {
      "version": "5.0.1",
      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
@@ -1708,6 +1783,18 @@
      "integrity": "sha512-SPXi0TSKPD4g9tw0NMZFnR95XVgUZiBH+uUTqQuDu1OsE2zomHU7ho0FISciaPvosimixwHFl3WHLGabv6dDgQ==",
      "license": "BSD-3-Clause"
    },
+    "node_modules/d3-delaunay": {
+      "version": "6.0.4",
+      "resolved": "https://registry.npmjs.org/d3-delaunay/-/d3-delaunay-6.0.4.tgz",
+      "integrity": "sha512-mdjtIZ1XLAM8bm/hx3WwjfHt6Sggek7qH043O8KEjDXN40xi3vx/6pYSVTwLjEgiXQTbvaouWKynLBiUZ6SK6A==",
+      "license": "ISC",
+      "dependencies": {
+        "delaunator": "5"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
    "node_modules/d3-dispatch": {
      "version": "2.0.0",
      "resolved": "https://registry.npmjs.org/d3-dispatch/-/d3-dispatch-2.0.0.tgz",
@@ -1730,6 +1817,15 @@
      "integrity": "sha512-68/n9JWarxXkOWMshcT5IcjbB+agblQUaIsbnXmrzejn2O82n3p2A9R2zEB9HIEFWKFwPAEDDN8gR0VdSAyyAQ==",
      "license": "BSD-3-Clause"
    },
+    "node_modules/d3-format": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-format/-/d3-format-3.1.0.tgz",
+      "integrity": "sha512-YyUI6AEuY/Wpt8KWLgZHsIU86atmikuoOmCfommt0LYHiQSPjvX2AcFc38PX0CBpr2RCyZhjex+NS/LPOv6YqA==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
    "node_modules/d3-geo": {
      "version": "2.0.2",
      "resolved": "https://registry.npmjs.org/d3-geo/-/d3-geo-2.0.2.tgz",
@@ -1739,6 +1835,45 @@
        "d3-array": "^2.5.0"
      }
    },
+    "node_modules/d3-geo-voronoi": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/d3-geo-voronoi/-/d3-geo-voronoi-2.1.0.tgz",
+      "integrity": "sha512-kqE4yYuOjPbKdBXG0xztCacPwkVSK2REF1opSNrnqqtXJmNcM++UbwQ8SxvwP6IQTj9RvIjjK4qeiVsEfj0Z2Q==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-array": "3",
+        "d3-delaunay": "6",
+        "d3-geo": "3",
+        "d3-tricontour": "1"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-geo-voronoi/node_modules/d3-array": {
+      "version": "3.2.4",
+      "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-3.2.4.tgz",
+      "integrity": "sha512-tdQAmyA18i4J7wprpYq8ClcxZy3SC31QMeByyCFyRt7BVHdREQZ5lpzoe5mFEYZUWe+oq8HBvk9JjpibyEV4Jg==",
+      "license": "ISC",
+      "dependencies": {
+        "internmap": "1 - 2"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-geo-voronoi/node_modules/d3-geo": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/d3-geo/-/d3-geo-3.1.1.tgz",
+      "integrity": "sha512-637ln3gXKXOwhalDzinUgY83KzNWZRKbYubaG+fGVuc/dxO64RRljtCTnf5ecMyE1RIdtqpkVcq0IbtU2S8j2Q==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-array": "2.5.0 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
    "node_modules/d3-interpolate": {
      "version": "2.0.1",
      "resolved": "https://registry.npmjs.org/d3-interpolate/-/d3-interpolate-2.0.1.tgz",
@@ -1748,12 +1883,71 @@
        "d3-color": "1 - 2"
      }
    },
+    "node_modules/d3-octree": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/d3-octree/-/d3-octree-1.1.0.tgz",
+      "integrity": "sha512-F8gPlqpP+HwRPMO/8uOu5wjH110+6q4cgJvgJT6vlpy3BEaDIKlTZrgHKZSp/i1InRpVfh4puY/kvL6MxK930A==",
+      "license": "MIT"
+    },
+    "node_modules/d3-scale": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/d3-scale/-/d3-scale-4.0.2.tgz",
+      "integrity": "sha512-GZW464g1SH7ag3Y7hXjf8RoUuAFIqklOAq3MRl4OaWabTFJY9PN/E1YklhXLh+OQ3fM9yS2nOkCoS+WLZ6kvxQ==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-array": "2.10.0 - 3",
+        "d3-format": "1 - 3",
+        "d3-interpolate": "1.2.0 - 3",
+        "d3-time": "2.1.1 - 3",
+        "d3-time-format": "2 - 4"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-scale-chromatic": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-scale-chromatic/-/d3-scale-chromatic-3.1.0.tgz",
+      "integrity": "sha512-A3s5PWiZ9YCXFye1o246KoscMWqf8BsD9eRiJ3He7C9OBaxKhAd5TFCdEx/7VbKtxxTsu//1mMJFrEt572cEyQ==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-color": "1 - 3",
+        "d3-interpolate": "1 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
    "node_modules/d3-selection": {
      "version": "2.0.0",
      "resolved": "https://registry.npmjs.org/d3-selection/-/d3-selection-2.0.0.tgz",
      "integrity": "sha512-XoGGqhLUN/W14NmaqcO/bb1nqjDAw5WtSYb2X8wiuQWvSZUsUVYsOSkOybUrNvcBjaywBdYPy03eXHMXjk9nZA==",
      "license": "BSD-3-Clause"
    },
+    "node_modules/d3-time": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-time/-/d3-time-3.1.0.tgz",
+      "integrity": "sha512-VqKjzBLejbSMT4IgbmVgDjpkYrNWUYJnbCGo874u7MMKIWsILRX+OpX/gTk8MqjpT1A/c6HY2dCA77ZN0lkQ2Q==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-array": "2 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-time-format": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/d3-time-format/-/d3-time-format-4.1.0.tgz",
+      "integrity": "sha512-dJxPBlzC7NugB2PDLwo9Q8JiTR3M3e4/XANkreKSUxF8vvXKqm1Yfq4Q5dl8budlunRVlUUaDUgFt7eA8D6NLg==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-time": "1 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
    "node_modules/d3-timer": {
      "version": "2.0.0",
      "resolved": "https://registry.npmjs.org/d3-timer/-/d3-timer-2.0.0.tgz",
@@ -1776,6 +1970,19 @@
        "d3-selection": "2"
      }
    },
+    "node_modules/d3-tricontour": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/d3-tricontour/-/d3-tricontour-1.1.0.tgz",
+      "integrity": "sha512-G7gHKj89n2owmkGb6WX6ixcnQ0Kf/0wpa9VIh9DGdbHu8wdrlaHU4ir3/bFNERl8N8nn4G7e7qbtBG8N9caihQ==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-delaunay": "6",
+        "d3-scale": "4"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
    "node_modules/d3-zoom": {
      "version": "2.0.0",
      "resolved": "https://registry.npmjs.org/d3-zoom/-/d3-zoom-2.0.0.tgz",
@@ -1789,6 +1996,18 @@
        "d3-transition": "2"
      }
    },
+    "node_modules/data-bind-mapper": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/data-bind-mapper/-/data-bind-mapper-1.0.3.tgz",
+      "integrity": "sha512-QmU3lyEnbENQPo0M1F9BMu4s6cqNNp8iJA+b/HP2sSb7pf3dxwF3+EP1eO69rwBfH9kFJ1apmzrtogAmVt2/Xw==",
+      "license": "MIT",
+      "dependencies": {
+        "accessor-fn": "1"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
    "node_modules/debug": {
      "version": "4.4.3",
      "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.3.tgz",
@@ -1807,6 +2026,15 @@
        }
      }
    },
+    "node_modules/delaunator": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/delaunator/-/delaunator-5.0.1.tgz",
+      "integrity": "sha512-8nvh+XBe96aCESrGOqMp/84b13H9cdKbG5P2ejQCh4d4sK9RL4371qou9drQjMhvnPmhWl5hnmqbEE0fXr9Xnw==",
+      "license": "ISC",
+      "dependencies": {
+        "robust-predicates": "^3.0.2"
+      }
+    },
    "node_modules/depd": {
      "version": "2.0.0",
      "resolved": "https://registry.npmjs.org/depd/-/depd-2.0.0.tgz",
@@ -1840,6 +2068,12 @@
        "node": ">= 0.4"
      }
    },
+    "node_modules/earcut": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/earcut/-/earcut-3.0.2.tgz",
+      "integrity": "sha512-X7hshQbLyMJ/3RPhyObLARM2sNxxmRALLKx1+NVFFnQ9gKzmCrxm9+uLIAdBcvc8FNLpctqlQ2V6AE92Ol9UDQ==",
+      "license": "ISC"
+    },
    "node_modules/ee-first": {
      "version": "1.1.1",
      "resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz",
@@ -2093,6 +2327,20 @@
      "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==",
      "license": "MIT"
    },
+    "node_modules/float-tooltip": {
+      "version": "1.7.5",
+      "resolved": "https://registry.npmjs.org/float-tooltip/-/float-tooltip-1.7.5.tgz",
+      "integrity": "sha512-/kXzuDnnBqyyWyhDMH7+PfP8J/oXiAavGzcRxASOMRHFuReDtofizLLJsf7nnDLAfEaMW4pVWaXrAjtnglpEkg==",
+      "license": "MIT",
+      "dependencies": {
+        "d3-selection": "2 - 3",
+        "kapsule": "^1.16",
+        "preact": "10"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
    "node_modules/forwarded": {
      "version": "0.2.0",
      "resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.2.0.tgz",
@@ -2102,6 +2350,15 @@
        "node": ">= 0.6"
      }
    },
+    "node_modules/frame-ticker": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/frame-ticker/-/frame-ticker-1.0.3.tgz",
+      "integrity": "sha512-E0X2u2JIvbEMrqEg5+4BpTqaD22OwojJI63K7MdKHdncjtAhGRbCR8nJCr2vwEt9NWBPCPcu70X9smPviEBy8Q==",
+      "license": "MIT",
+      "dependencies": {
+        "simplesignal": "^2.1.6"
+      }
+    },
    "node_modules/fresh": {
      "version": "0.5.2",
      "resolved": "https://registry.npmjs.org/fresh/-/fresh-0.5.2.tgz",
@@ -2205,6 +2462,23 @@
        "url": "https://github.com/privatenumber/get-tsconfig?sponsor=1"
      }
    },
+    "node_modules/globe.gl": {
+      "version": "2.45.0",
+      "resolved": "https://registry.npmjs.org/globe.gl/-/globe.gl-2.45.0.tgz",
+      "integrity": "sha512-fjkLHVBrnbESkUgklTd4UbcGLciu4nIl49IIi1hclLjI6MU3ASu6JYmf/K5qwPf7I+tNOauQRr4i5Y28JTtHQg==",
+      "license": "MIT",
+      "dependencies": {
+        "@tweenjs/tween.js": "18 - 25",
+        "accessor-fn": "1",
+        "kapsule": "^1.16",
+        "three": ">=0.154 <1",
+        "three-globe": "^2.45",
+        "three-render-objects": "^1.40"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
    "node_modules/gopd": {
      "version": "1.2.0",
      "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.2.0.tgz",
@@ -2217,6 +2491,17 @@
        "url": "https://github.com/sponsors/ljharb"
      }
    },
+    "node_modules/h3-js": {
+      "version": "4.4.0",
+      "resolved": "https://registry.npmjs.org/h3-js/-/h3-js-4.4.0.tgz",
+      "integrity": "sha512-DvJh07MhGgY2KcC4OeZc8SSyA+ZXpdvoh6uCzGpoKvWtZxJB+g6VXXC1+eWYkaMIsLz7J/ErhOalHCpcs1KYog==",
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=4",
+        "npm": ">=3",
+        "yarn": ">=1.3.0"
+      }
+    },
    "node_modules/has-flag": {
      "version": "4.0.0",
      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
@@ -2283,6 +2568,15 @@
        "node": ">=0.10.0"
      }
    },
+    "node_modules/index-array-by": {
+      "version": "1.4.2",
+      "resolved": "https://registry.npmjs.org/index-array-by/-/index-array-by-1.4.2.tgz",
+      "integrity": "sha512-SP23P27OUKzXWEC/TOyWlwLviofQkCSCKONnc62eItjp69yCZZPqDQtr3Pw5gJDnPeUMqExmKydNZaJO0FU9pw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      }
+    },
    "node_modules/inherits": {
      "version": "2.0.4",
      "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
@@ -2314,6 +2608,15 @@
        "node": ">=8"
      }
    },
+    "node_modules/jerrypick": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/jerrypick/-/jerrypick-1.1.2.tgz",
+      "integrity": "sha512-YKnxXEekXKzhpf7CLYA0A+oDP8V0OhICNCr5lv96FvSsDEmrb0GKM776JgQvHTMjr7DTTPEVv/1Ciaw0uEWzBA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      }
+    },
    "node_modules/js-tokens": {
      "version": "4.0.0",
      "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
@@ -2346,6 +2649,24 @@
        "node": ">=6"
      }
    },
+    "node_modules/kapsule": {
+      "version": "1.16.3",
+      "resolved": "https://registry.npmjs.org/kapsule/-/kapsule-1.16.3.tgz",
+      "integrity": "sha512-4+5mNNf4vZDSwPhKprKwz3330iisPrb08JyMgbsdFrimBCKNHecua/WBwvVg3n7vwx0C1ARjfhwIpbrbd9n5wg==",
+      "license": "MIT",
+      "dependencies": {
+        "lodash-es": "4"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/lodash-es": {
+      "version": "4.17.22",
+      "resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.22.tgz",
+      "integrity": "sha512-XEawp1t0gxSi9x01glktRZ5HDy0HXqrM0x5pXQM98EaI0NxO6jVM7omDOxsuEo5UIASAnm2bRp1Jt/e0a2XU8Q==",
+      "license": "MIT"
+    },
    "node_modules/loose-envify": {
      "version": "1.4.0",
      "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
@@ -2546,6 +2867,27 @@
        "url": "https://github.com/sponsors/jonschlinkert"
      }
    },
+    "node_modules/point-in-polygon-hao": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/point-in-polygon-hao/-/point-in-polygon-hao-1.2.4.tgz",
+      "integrity": "sha512-x2pcvXeqhRHlNRdhLs/tgFapAbSSe86wa/eqmj1G6pWftbEs5aVRJhRGM6FYSUERKu0PjekJzMq0gsI2XyiclQ==",
+      "license": "MIT",
+      "dependencies": {
+        "robust-predicates": "^3.0.2"
+      }
+    },
+    "node_modules/polished": {
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/polished/-/polished-4.3.1.tgz",
+      "integrity": "sha512-OBatVyC/N7SCW/FaDHrSd+vn0o5cS855TOmYi4OkdWUMSJCET/xip//ch8xGUvtr3i44X9LVyWwQlRMTN3pwSA==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.17.8"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
    "node_modules/postcss": {
      "version": "8.5.6",
      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.6.tgz",
@@ -2575,12 +2917,21 @@
        "node": "^10 || ^12 || >=14"
      }
    },
+    "node_modules/preact": {
+      "version": "10.28.0",
+      "resolved": "https://registry.npmjs.org/preact/-/preact-10.28.0.tgz",
+      "integrity": "sha512-rytDAoiXr3+t6OIP3WGlDd0ouCUG1iCWzkcY3++Nreuoi17y6T5i/zRhe6uYfoVcxq6YU+sBtJouuRDsq8vvqA==",
+      "license": "MIT",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/preact"
+      }
+    },
    "node_modules/prop-types": {
      "version": "15.8.1",
      "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
      "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
      "license": "MIT",
-      "peer": true,
      "dependencies": {
        "loose-envify": "^1.4.0",
        "object-assign": "^4.1.1",
@@ -2673,12 +3024,43 @@
        "react": "^18.3.1"
      }
    },
+    "node_modules/react-globe.gl": {
+      "version": "2.37.0",
+      "resolved": "https://registry.npmjs.org/react-globe.gl/-/react-globe.gl-2.37.0.tgz",
+      "integrity": "sha512-nN1FDOJBhFvWfKrOY0SnkDuA8wk9FSTBN0HFfAdTqqcFM5R+OXBIxK0BM6t8n3oNVYpEJVxEzjYFwLyk4BC7Cw==",
+      "license": "MIT",
+      "dependencies": {
+        "globe.gl": "^2.45",
+        "prop-types": "15",
+        "react-kapsule": "^2.5"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "peerDependencies": {
+        "react": "*"
+      }
+    },
    "node_modules/react-is": {
      "version": "16.13.1",
      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
+      "license": "MIT"
+    },
+    "node_modules/react-kapsule": {
+      "version": "2.5.7",
+      "resolved": "https://registry.npmjs.org/react-kapsule/-/react-kapsule-2.5.7.tgz",
+      "integrity": "sha512-kifAF4ZPD77qZKc4CKLmozq6GY1sBzPEJTIJb0wWFK6HsePJatK3jXplZn2eeAt3x67CDozgi7/rO8fNQ/AL7A==",
      "license": "MIT",
-      "peer": true
+      "dependencies": {
+        "jerrypick": "^1.1.1"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "peerDependencies": {
+        "react": ">=16.13.1"
+      }
    },
    "node_modules/react-refresh": {
      "version": "0.17.0",
@@ -2727,6 +3109,12 @@
        "url": "https://github.com/privatenumber/resolve-pkg-maps?sponsor=1"
      }
    },
+    "node_modules/robust-predicates": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/robust-predicates/-/robust-predicates-3.0.2.tgz",
+      "integrity": "sha512-IXgzBWvWQwE6PrDI05OvmXUIruQTcoMDzRsOd5CDvHCVLcLHMTSYvOK5Cm46kWqlV3yAbuSpBZdJ5oP5OUoStg==",
+      "license": "Unlicense"
+    },
    "node_modules/rollup": {
      "version": "4.53.5",
      "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.53.5.tgz",
@@ -2969,6 +3357,12 @@
        "url": "https://github.com/sponsors/ljharb"
      }
    },
+    "node_modules/simplesignal": {
+      "version": "2.1.7",
+      "resolved": "https://registry.npmjs.org/simplesignal/-/simplesignal-2.1.7.tgz",
+      "integrity": "sha512-PEo2qWpUke7IMhlqiBxrulIFvhJRLkl1ih52Rwa+bPjzhJepcd4GIjn2RiQmFSx3dQvsEAgF0/lXMwMN7vODaA==",
+      "license": "MIT"
+    },
    "node_modules/source-map-js": {
      "version": "1.2.1",
      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
@@ -3032,6 +3426,168 @@
        "url": "https://github.com/chalk/supports-color?sponsor=1"
      }
    },
+    "node_modules/three": {
+      "version": "0.182.0",
+      "resolved": "https://registry.npmjs.org/three/-/three-0.182.0.tgz",
+      "integrity": "sha512-GbHabT+Irv+ihI1/f5kIIsZ+Ef9Sl5A1Y7imvS5RQjWgtTPfPnZ43JmlYI7NtCRDK9zir20lQpfg8/9Yd02OvQ==",
+      "license": "MIT"
+    },
+    "node_modules/three-conic-polygon-geometry": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/three-conic-polygon-geometry/-/three-conic-polygon-geometry-2.1.2.tgz",
+      "integrity": "sha512-NaP3RWLJIyPGI+zyaZwd0Yj6rkoxm4FJHqAX1Enb4L64oNYLCn4bz1ESgOEYavgcUwCNYINu1AgEoUBJr1wZcA==",
+      "license": "MIT",
+      "dependencies": {
+        "@turf/boolean-point-in-polygon": "^7.2",
+        "d3-array": "1 - 3",
+        "d3-geo": "1 - 3",
+        "d3-geo-voronoi": "2",
+        "d3-scale": "1 - 4",
+        "delaunator": "5",
+        "earcut": "3"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "peerDependencies": {
+        "three": ">=0.72.0"
+      }
+    },
+    "node_modules/three-geojson-geometry": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/three-geojson-geometry/-/three-geojson-geometry-2.1.1.tgz",
+      "integrity": "sha512-dC7bF3ri1goDcihYhzACHOBQqu7YNNazYLa2bSydVIiJUb3jDFojKSy+gNj2pMkqZNSVjssSmdY9zlmnhEpr1w==",
+      "license": "MIT",
+      "dependencies": {
+        "d3-geo": "1 - 3",
+        "d3-interpolate": "1 - 3",
+        "earcut": "3"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "peerDependencies": {
+        "three": ">=0.72.0"
+      }
+    },
+    "node_modules/three-globe": {
+      "version": "2.45.0",
+      "resolved": "https://registry.npmjs.org/three-globe/-/three-globe-2.45.0.tgz",
+      "integrity": "sha512-Ur6BVkezvmHnvsEg8fbq6gIscSZtknSQMWwDRbiJ95o6OSDjDbGTc4oO6nP7mOM9aAA3YrF7YZyOwSkP4T56QA==",
+      "license": "MIT",
+      "dependencies": {
+        "@tweenjs/tween.js": "18 - 25",
+        "accessor-fn": "1",
+        "d3-array": "3",
+        "d3-color": "3",
+        "d3-geo": "3",
+        "d3-interpolate": "3",
+        "d3-scale": "4",
+        "d3-scale-chromatic": "3",
+        "data-bind-mapper": "1",
+        "frame-ticker": "1",
+        "h3-js": "4",
+        "index-array-by": "1",
+        "kapsule": "^1.16",
+        "three-conic-polygon-geometry": "2",
+        "three-geojson-geometry": "2",
+        "three-slippy-map-globe": "1",
+        "tinycolor2": "1"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "peerDependencies": {
+        "three": ">=0.154"
+      }
+    },
+    "node_modules/three-globe/node_modules/d3-array": {
+      "version": "3.2.4",
+      "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-3.2.4.tgz",
+      "integrity": "sha512-tdQAmyA18i4J7wprpYq8ClcxZy3SC31QMeByyCFyRt7BVHdREQZ5lpzoe5mFEYZUWe+oq8HBvk9JjpibyEV4Jg==",
+      "license": "ISC",
+      "dependencies": {
+        "internmap": "1 - 2"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/three-globe/node_modules/d3-color": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-color/-/d3-color-3.1.0.tgz",
+      "integrity": "sha512-zg/chbXyeBtMQ1LbD/WSoW2DpC3I0mpmPdW+ynRTj/x2DAWYrIY7qeZIHidozwV24m4iavr15lNwIwLxRmOxhA==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/three-globe/node_modules/d3-geo": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/d3-geo/-/d3-geo-3.1.1.tgz",
+      "integrity": "sha512-637ln3gXKXOwhalDzinUgY83KzNWZRKbYubaG+fGVuc/dxO64RRljtCTnf5ecMyE1RIdtqpkVcq0IbtU2S8j2Q==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-array": "2.5.0 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/three-globe/node_modules/d3-interpolate": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-interpolate/-/d3-interpolate-3.0.1.tgz",
+      "integrity": "sha512-3bYs1rOD33uo8aqJfKP3JWPAibgw8Zm2+L9vBKEHJ2Rg+viTR7o5Mmv5mZcieN+FRYaAOWX5SJATX6k1PWz72g==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-color": "1 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/three-render-objects": {
+      "version": "1.40.4",
+      "resolved": "https://registry.npmjs.org/three-render-objects/-/three-render-objects-1.40.4.tgz",
+      "integrity": "sha512-Ukpu1pei3L5r809izvjsZxwuRcYLiyn6Uvy3lZ9bpMTdvj3i6PeX6w++/hs2ZS3KnEzGjb6YvTvh4UQuwHTDJg==",
+      "license": "MIT",
+      "dependencies": {
+        "@tweenjs/tween.js": "18 - 25",
+        "accessor-fn": "1",
+        "float-tooltip": "^1.7",
+        "kapsule": "^1.16",
+        "polished": "4"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "peerDependencies": {
+        "three": ">=0.168"
+      }
+    },
+    "node_modules/three-slippy-map-globe": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/three-slippy-map-globe/-/three-slippy-map-globe-1.0.4.tgz",
+      "integrity": "sha512-am8A4PP38AfTdrhXBDucwPRHLTbBl93yhpjIs56K1TLs9VuUWzg68oim4Dibs9QC1riXbj5SoBp/okA1VN9eYg==",
+      "license": "MIT",
+      "dependencies": {
+        "d3-geo": "1 - 3",
+        "d3-octree": "^1.1",
+        "d3-scale": "1 - 4"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "peerDependencies": {
+        "three": ">=0.154"
+      }
+    },
+    "node_modules/tinycolor2": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/tinycolor2/-/tinycolor2-1.6.0.tgz",
+      "integrity": "sha512-XPaBkWQJdsf3pLKJV9p4qN/S+fm2Oj8AIPo1BTUhg5oxkvm9+SVEGFdhyOz7tTdUTfvxMiAs4sp6/eZO2Ew+pw==",
+      "license": "MIT"
+    },
    "node_modules/tinyglobby": {
      "version": "0.2.15",
      "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.15.tgz",
@@ -3086,7 +3642,6 @@
      "version": "2.8.1",
      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
      "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
-      "dev": true,
      "license": "0BSD"
    },
    "node_modules/tsx": {
--- a/package.json
+++ b/package.json
@@ -20,7 +20,9 @@
    "ipaddr.js": "^2.1.0",
    "react": "^18.3.1",
    "react-dom": "^18.3.1",
-    "react-simple-maps": "^3.0.0"
+    "react-globe.gl": "^2.37.0",
+    "react-simple-maps": "^3.0.0",
+    "three": "^0.182.0"
  },
  "devDependencies": {
    "@types/cors": "^2.8.17",
--- a/src/client/App.tsx
+++ b/src/client/App.tsx
@@ -12,11 +12,11 @@ function AppContent() {
  const [results, setResults] = useState<Map<string, LatencyResult>>(new Map())
  const [testing, setTesting] = useState(false)

-  const handleTest = useCallback(async (ip: string) => {
+  const handleTest = useCallback(async (target: string) => {
    setTesting(true)
    setResults(new Map())

-    await testAllNodes(ip, (result) => {
+    await testAllNodes(target, (result) => {
      setResults((prev) => new Map(prev).set(result.nodeId, result))
    })

@@ -35,7 +35,7 @@ function AppContent() {

      <main className="app-main">
        <p className="app-description">
-          Test network latency from global locations to any IP address
+          Test network latency from global locations to any IP address or domain
        </p>
        <IpInput onTest={handleTest} testing={testing} />
        <LatencyMap results={results} />
--- a/src/client/api/latency.ts
+++ b/src/client/api/latency.ts
@@ -6,10 +6,17 @@ export interface IpInfoResponse {
  ip: string
 }

-export interface LatencyTestResponse {
-  nodeId: string
-  latency: number | null
-  success: boolean
+export interface BatchMeasurementResponse {
+  measurementId: string
+}
+
+export interface BatchResultResponse {
+  status: 'in-progress' | 'finished'
+  results: Array<{
+    nodeId: string
+    latency: number | null
+    success: boolean
+  }>
 }

 export async function fetchUserIp(): Promise<string> {
@@ -19,34 +26,67 @@ export async function fetchUserIp(): Promise<string> {
  return data.ip
 }

-export async function testLatency(
-  targetIp: string,
-  nodeId: string
-): Promise<LatencyResult> {
-  const res = await fetch(`${API_BASE}/latency`, {
-    method: 'POST',
-    headers: { 'Content-Type': 'application/json' },
-    body: JSON.stringify({ targetIp, nodeId }),
-  })
-  if (!res.ok) {
-    return { nodeId, latency: null, status: 'failed' }
-  }
-  const data: LatencyTestResponse = await res.json()
-  return {
-    nodeId: data.nodeId,
-    latency: data.latency,
-    status: data.success ? 'success' : 'failed',
-  }
-}
-
 export async function testAllNodes(
-  targetIp: string,
+  target: string,
  onProgress: (result: LatencyResult) => void
 ): Promise<void> {
-  const promises = TEST_NODES.map(async (node) => {
-    onProgress({ nodeId: node.id, latency: null, status: 'testing' })
-    const result = await testLatency(targetIp, node.id)
-    onProgress(result)
+  for (const node of TEST_NODES) {
+    onProgress({ nodeId: node.id, latency: null, status: 'pending' })
+  }
+
+  const res = await fetch(`${API_BASE}/latency/batch`, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ target }),
  })
-  await Promise.all(promises)
+
+  if (!res.ok) {
+    for (const node of TEST_NODES) {
+      onProgress({ nodeId: node.id, latency: null, status: 'failed' })
+    }
+    return
+  }
+
+  const { measurementId }: BatchMeasurementResponse = await res.json()
+
+  for (const node of TEST_NODES) {
+    onProgress({ nodeId: node.id, latency: null, status: 'testing' })
+  }
+
+  const startTime = Date.now()
+  const timeout = 60000
+  const completedNodes = new Set<string>()
+
+  while (Date.now() - startTime < timeout) {
+    await new Promise(r => setTimeout(r, 800))
+
+    const pollRes = await fetch(`${API_BASE}/latency/batch/${measurementId}`)
+    if (!pollRes.ok) continue
+
+    const data: BatchResultResponse = await pollRes.json()
+
+    for (const result of data.results) {
+      if (result.success && !completedNodes.has(result.nodeId)) {
+        completedNodes.add(result.nodeId)
+        onProgress({
+          nodeId: result.nodeId,
+          latency: result.latency,
+          status: 'success'
+        })
+      }
+    }
+
+    if (data.status === 'finished') {
+      for (const result of data.results) {
+        if (!completedNodes.has(result.nodeId)) {
+          onProgress({
+            nodeId: result.nodeId,
+            latency: result.latency,
+            status: result.success ? 'success' : 'failed'
+          })
+        }
+      }
+      break
+    }
+  }
 }
--- a/src/client/components/IpInput.css
+++ b/src/client/components/IpInput.css
@@ -1,33 +1,42 @@
 .ip-input-form {
  display: flex;
  justify-content: center;
-  gap: 0;
-  margin-bottom: 2rem;
-  flex-wrap: wrap;
+  position: relative;
+  max-width: 500px;
+  margin: 0 auto 3rem;
+  filter: drop-shadow(var(--shadow-glow));
 }

 .input-wrapper {
  position: relative;
  flex: 1;
-  max-width: 300px;
-  min-width: 200px;
+  z-index: 1;
 }

 .ip-input {
  width: 100%;
-  box-sizing: border-box;
+  padding: 16px 20px;
+  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  font-size: 1rem;
-  padding: 12px 16px;
-  border-radius: 8px 0 0 8px;
-  border: 2px solid var(--border-color);
-  background-color: var(--input-bg);
+  background: var(--input-bg);
+  border: 1px solid var(--border-color);
+  border-right: none;
+  border-radius: 12px 0 0 12px;
  color: var(--text-color);
  outline: none;
-  transition: border-color 0.2s;
+  transition: all var(--transition-fast);
+  backdrop-filter: blur(4px);
+  -webkit-backdrop-filter: blur(4px);
+}
+
+.ip-input::placeholder {
+  color: var(--text-secondary);
+  opacity: 0.7;
 }

 .ip-input:focus {
  border-color: var(--primary-color);
+  box-shadow: inset 0 0 20px rgba(56, 189, 248, 0.08);
 }

 .ip-input-error {
@@ -41,46 +50,86 @@

 .error-hint {
  position: absolute;
-  left: 0;
-  bottom: -20px;
+  left: 4px;
+  bottom: -24px;
  font-size: 0.75rem;
  color: var(--error-color);
+  font-weight: 500;
 }

 .test-button {
  display: flex;
  align-items: center;
-  gap: 8px;
-  font-size: 1rem;
-  padding: 12px 24px;
-  border-radius: 0 8px 8px 0;
-  border: 2px solid var(--primary-color);
-  background-color: var(--primary-color);
-  color: white;
-  cursor: pointer;
-  transition: background-color 0.2s, transform 0.1s;
+  justify-content: center;
+  gap: 10px;
+  padding: 0 32px;
  font-weight: 600;
+  font-size: 0.95rem;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: #fff;
+  background: linear-gradient(135deg, var(--primary-color), var(--primary-hover));
+  border: 1px solid transparent;
+  border-radius: 0 12px 12px 0;
+  cursor: pointer;
+  transition: all var(--transition-fast);
+  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
+  position: relative;
+  overflow: hidden;
+}
+
+.test-button::after {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(rgba(255,255,255,0.15), transparent);
+  opacity: 0;
+  transition: opacity 0.2s;
 }

 .test-button:hover:not(:disabled) {
-  background-color: var(--primary-hover);
-  border-color: var(--primary-hover);
+  transform: translateY(-1px);
+  box-shadow: 0 6px 20px rgba(59, 130, 246, 0.4);
+}
+
+.test-button:hover:not(:disabled)::after {
+  opacity: 1;
 }

 .test-button:active:not(:disabled) {
-  transform: scale(0.98);
+  transform: translateY(1px);
 }

 .test-button:disabled {
-  opacity: 0.6;
+  background: var(--text-secondary);
  cursor: not-allowed;
+  opacity: 0.7;
+  box-shadow: none;
+}
+
+.test-button:disabled::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: -100%;
+  width: 50%;
+  height: 100%;
+  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
+  animation: scan 1.5s infinite;
+}
+
+@keyframes scan {
+  100% { left: 200%; }
 }

 .spinner {
-  width: 16px;
-  height: 16px;
-  border: 2px solid white;
-  border-top-color: transparent;
+  width: 18px;
+  height: 18px;
+  border: 2px solid rgba(255, 255, 255, 0.3);
+  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
 }
@@ -89,24 +138,22 @@
  to { transform: rotate(360deg); }
 }

-@media (max-width: 480px) {
+@media (max-width: 640px) {
  .ip-input-form {
    flex-direction: column;
-    align-items: stretch;
-    gap: 8px;
+    max-width: 100%;
    padding: 0 16px;
  }

-  .input-wrapper {
-    max-width: none;
-  }
-
  .ip-input {
-    border-radius: 8px;
+    border-radius: 12px 12px 0 0;
+    border-right: 1px solid var(--border-color);
+    border-bottom: none;
  }

  .test-button {
-    border-radius: 8px;
-    justify-content: center;
+    border-radius: 0 0 12px 12px;
+    padding: 16px;
+    width: 100%;
  }
 }
--- a/src/client/components/IpInput.tsx
+++ b/src/client/components/IpInput.tsx
@@ -3,32 +3,39 @@ import { fetchUserIp } from '../api/latency'
 import './IpInput.css'

 interface IpInputProps {
-  onTest: (ip: string) => void
+  onTest: (target: string) => void
  testing: boolean
 }

 const IP_REGEX = /^(?:(?:25[0-5]|2[0-4]\d|1\d{2}|[1-9]?\d)\.){3}(?:25[0-5]|2[0-4]\d|1\d{2}|[1-9]?\d)$/
+const DOMAIN_REGEX = /^(?!:\/\/)([a-zA-Z0-9-]+\.)+[a-zA-Z]{2,}$/
+
+function isValidTarget(value: string): boolean {
+  const trimmed = value.trim().toLowerCase()
+  return IP_REGEX.test(trimmed) || DOMAIN_REGEX.test(trimmed)
+}

 export default function IpInput({ onTest, testing }: IpInputProps) {
-  const [ip, setIp] = useState('')
+  const [target, setTarget] = useState('')
  const [loading, setLoading] = useState(true)
  const [error, setError] = useState('')

  useEffect(() => {
    fetchUserIp()
-      .then(setIp)
+      .then(setTarget)
      .catch(() => setError('Failed to detect IP'))
      .finally(() => setLoading(false))
  }, [])

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault()
-    if (!IP_REGEX.test(ip)) {
-      setError('Invalid IP address')
+    const trimmed = target.trim()
+    if (!isValidTarget(trimmed)) {
+      setError('Invalid IP address or domain')
      return
    }
    setError('')
-    onTest(ip)
+    onTest(trimmed)
  }

  return (
@@ -36,18 +43,18 @@ export default function IpInput({ onTest, testing }: IpInputProps) {
      <div className="input-wrapper">
        <input
          type="text"
-          value={ip}
+          value={target}
          onChange={(e) => {
-            setIp(e.target.value)
+            setTarget(e.target.value)
            setError('')
          }}
-          placeholder={loading ? 'Detecting IP...' : 'Enter IP address'}
+          placeholder={loading ? 'Detecting IP...' : 'Enter IP or domain (e.g., 8.8.8.8 or google.com)'}
          className={`ip-input ${error ? 'ip-input-error' : ''}`}
          disabled={testing || loading}
        />
        {error && <span className="error-hint">{error}</span>}
      </div>
-      <button type="submit" className="test-button" disabled={testing || loading || !ip}>
+      <button type="submit" className="test-button" disabled={testing || loading || !target.trim()}>
        {testing ? (
          <>
            <span className="spinner" />
--- a/src/client/components/LatencyMap.css
+++ b/src/client/components/LatencyMap.css
@@ -1,70 +1,161 @@
 .map-container {
+  position: relative;
  width: 100%;
-  max-width: 900px;
-  margin: 0 auto 2rem;
-  border: 1px solid var(--border-color);
-  border-radius: 12px;
+  max-width: 1000px;
+  height: 500px;
+  margin: 0 auto 3rem;
+  border-radius: 16px;
  overflow: hidden;
-  background-color: var(--card-bg);
+  background: #000;
+  border: 1px solid var(--border-color);
+  box-shadow: var(--shadow-glow), 0 10px 30px -5px rgba(0, 0, 0, 0.5);
 }

-.geography {
-  fill: var(--map-land);
-  stroke: var(--map-border);
-  stroke-width: 0.5;
+.map-container canvas {
  outline: none;
-  transition: fill 0.2s;
 }

-.marker-group {
-  cursor: pointer;
+.globe-instructions {
+  position: absolute;
+  bottom: 16px;
+  left: 50%;
+  transform: translateX(-50%);
+  color: rgba(255, 255, 255, 0.5);
+  font-size: 12px;
+  pointer-events: none;
+  user-select: none;
+  background: rgba(0, 0, 0, 0.4);
+  padding: 6px 14px;
+  border-radius: 20px;
+  backdrop-filter: blur(4px);
+  -webkit-backdrop-filter: blur(4px);
 }

-.marker-dot {
-  transition: r 0.3s, fill 0.3s;
+.globe-popup {
+  position: absolute;
+  top: 20px;
+  right: 20px;
+  width: 220px;
+  background: rgba(15, 23, 42, 0.92);
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  border-radius: 12px;
+  padding: 16px;
+  color: #fff;
+  animation: slideIn 0.2s ease-out;
+  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.5);
+  z-index: 10;
 }

-.marker-dot.testing {
-  animation: pulse 1s ease-in-out infinite;
+.popup-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 12px;
+  padding-bottom: 10px;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
 }

-.marker-label {
-  font-size: 10px;
+.popup-header h3 {
+  margin: 0;
+  font-size: 15px;
  font-weight: 600;
-  fill: var(--text-color);
-  pointer-events: none;
+  color: #fff;
 }

-.marker-latency {
+.close-btn {
+  background: none;
+  border: none;
+  color: rgba(255, 255, 255, 0.5);
+  font-size: 20px;
+  cursor: pointer;
+  padding: 0;
+  line-height: 1;
+  transition: color 0.2s;
+}
+
+.close-btn:hover {
+  color: #fff;
+}
+
+.popup-content {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.popup-row {
+  display: flex;
+  justify-content: space-between;
+  font-size: 13px;
+  color: rgba(255, 255, 255, 0.7);
+}
+
+.popup-row.highlight {
+  margin-top: 8px;
+  padding-top: 8px;
+  border-top: 1px solid rgba(255, 255, 255, 0.1);
+  font-weight: 600;
+  font-size: 14px;
+}
+
+.status-badge {
+  text-transform: capitalize;
  font-size: 11px;
-  font-weight: 700;
-  pointer-events: none;
+  padding: 2px 8px;
+  border-radius: 10px;
+  background: rgba(255, 255, 255, 0.1);
 }

-.marker-inactive {
-  fill: var(--marker-inactive);
+.status-badge.success {
+  color: #4ade80;
+  background: rgba(74, 222, 128, 0.15);
 }

-.pulse-ring {
-  fill: none;
-  stroke: var(--primary-color);
-  stroke-width: 2;
-  opacity: 0;
-  animation: pulse-ring 1.5s ease-out infinite;
+.status-badge.failed {
+  color: #f87171;
+  background: rgba(248, 113, 113, 0.15);
 }

-@keyframes pulse {
-  0%, 100% { opacity: 1; }
-  50% { opacity: 0.5; }
+.status-badge.testing {
+  color: #facc15;
+  background: rgba(250, 204, 21, 0.15);
 }

-@keyframes pulse-ring {
-  0% {
-    r: 8;
-    opacity: 0.8;
-  }
-  100% {
-    r: 24;
+.status-badge.pending {
+  color: #94a3b8;
+  background: rgba(148, 163, 184, 0.15);
+}
+
+@keyframes slideIn {
+  from {
    opacity: 0;
+    transform: translateY(-10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@media (max-width: 768px) {
+  .map-container {
+    height: 400px;
+  }
+
+  .globe-popup {
+    top: 10px;
+    right: 10px;
+    width: 180px;
+    padding: 12px;
+  }
+
+  .popup-header h3 {
+    font-size: 14px;
+  }
+
+  .popup-row {
+    font-size: 12px;
  }
 }
--- a/src/client/components/LatencyMap.tsx
+++ b/src/client/components/LatencyMap.tsx
@@ -1,70 +1,143 @@
-import { ComposableMap, Geographies, Geography, Marker } from 'react-simple-maps'
+import { useMemo, useState, useEffect, useRef } from 'react'
+import Globe, { GlobeMethods } from 'react-globe.gl'
 import { TEST_NODES, LatencyResult, getLatencyColor } from '@shared/types'
 import './LatencyMap.css'

-const GEO_URL = 'https://cdn.jsdelivr.net/npm/world-atlas@2/countries-110m.json'
-
 interface LatencyMapProps {
  results: Map<string, LatencyResult>
 }

 export default function LatencyMap({ results }: LatencyMapProps) {
+  const globeEl = useRef<GlobeMethods | undefined>(undefined)
+  const [selectedNode, setSelectedNode] = useState<string | null>(null)
+  const [dimensions, setDimensions] = useState({ width: 0, height: 0 })
+  const containerRef = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    const resizeObserver = new ResizeObserver((entries) => {
+      for (const entry of entries) {
+        setDimensions({
+          width: entry.contentRect.width,
+          height: entry.contentRect.height
+        })
+      }
+    })
+
+    if (containerRef.current) {
+      resizeObserver.observe(containerRef.current)
+    }
+
+    return () => resizeObserver.disconnect()
+  }, [])
+
+  useEffect(() => {
+    if (globeEl.current) {
+      globeEl.current.controls().autoRotate = true
+      globeEl.current.controls().autoRotateSpeed = 0.5
+    }
+  }, [])
+
+  const { pointsData, ringsData } = useMemo(() => {
+    const points = TEST_NODES.map((node) => {
+      const result = results.get(node.id)
+      return {
+        ...node,
+        lat: node.coords[1],
+        lng: node.coords[0],
+        color: getLatencyColor(result?.latency ?? null),
+        latency: result?.latency ?? null,
+        status: result?.status ?? 'pending',
+        size: selectedNode === node.id ? 1.2 : 0.5
+      }
+    })
+
+    const rings = points.filter(
+      (p) => p.status === 'testing' || p.status === 'success'
+    )
+
+    return { pointsData: points, ringsData: rings }
+  }, [results, selectedNode])
+
+  const selectedNodeData = selectedNode
+    ? pointsData.find(p => p.id === selectedNode)
+    : null
+
  return (
-    <div className="map-container">
-      <ComposableMap
-        projectionConfig={{ scale: 140, center: [0, 20] }}
-        style={{ width: '100%', height: 'auto' }}
-      >
-        <Geographies geography={GEO_URL}>
-          {({ geographies }) =>
-            geographies.map((geo) => (
-              <Geography
-                key={geo.rsmKey}
-                geography={geo}
-                className="geography"
-              />
-            ))
-          }
-        </Geographies>
+    <div className="map-container" ref={containerRef}>
+      <Globe
+        ref={globeEl}
+        width={dimensions.width}
+        height={dimensions.height}
+        globeImageUrl="//unpkg.com/three-globe/example/img/earth-night.jpg"
+        backgroundImageUrl="//unpkg.com/three-globe/example/img/night-sky.png"

-        {TEST_NODES.map((node) => {
-          const result = results.get(node.id)
-          const isTesting = result?.status === 'testing'
-          const hasResult = result?.status === 'success' || result?.status === 'failed'
+        pointsData={pointsData}
+        pointLat="lat"
+        pointLng="lng"
+        pointColor="color"
+        pointRadius="size"
+        pointAltitude={0.01}
+        pointLabel={(d: object) => {
+          const node = d as typeof pointsData[0]
+          return `
+            <div style="color: white; font-family: system-ui; font-size: 12px; padding: 6px 10px; background: rgba(0,0,0,0.85); border-radius: 6px; border: 1px solid rgba(255,255,255,0.1);">
+              <b>${node.name}</b><br/>
+              ${node.latency ? `${node.latency}ms` : node.status}
+            </div>
+          `
+        }}
+        onPointClick={(d: object) => {
+          const node = d as typeof pointsData[0]
+          setSelectedNode(node.id)
+          if (globeEl.current) globeEl.current.controls().autoRotate = false
+        }}

-          return (
-            <Marker key={node.id} coordinates={node.coords}>
-              <g className="marker-group">
-                {isTesting && (
-                  <circle r={16} className="pulse-ring" />
-                )}
-                <circle
-                  r={8}
-                  fill={hasResult ? getLatencyColor(result?.latency ?? null) : 'var(--marker-inactive)'}
-                  className={`marker-dot ${isTesting ? 'testing' : ''}`}
-                />
-                <text
-                  textAnchor="middle"
-                  y={-16}
-                  className="marker-label"
-                >
-                  {node.name}
-                </text>
-                {hasResult && (
-                  <text
-                    textAnchor="middle"
-                    y={24}
-                    className="marker-latency"
-                    fill={getLatencyColor(result?.latency ?? null)}
-                  >
-                    {result?.latency !== null ? `${result.latency}ms` : 'Timeout'}
-                  </text>
-                )}
-              </g>
-            </Marker>
-          )
-        })}
-      </ComposableMap>
+        ringsData={ringsData}
+        ringLat="lat"
+        ringLng="lng"
+        ringColor="color"
+        ringMaxRadius={4}
+        ringPropagationSpeed={2}
+        ringRepeatPeriod={1200}
+
+        atmosphereColor="#3a228a"
+        atmosphereAltitude={0.15}
+      />
+
+      {selectedNodeData && (
+        <div className="globe-popup">
+          <div className="popup-header">
+            <h3>{selectedNodeData.name}</h3>
+            <button className="close-btn" onClick={() => setSelectedNode(null)}>×</button>
+          </div>
+          <div className="popup-content">
+            <div className="popup-row">
+              <span>Region:</span>
+              <span>{selectedNodeData.region}</span>
+            </div>
+            <div className="popup-row">
+              <span>Country:</span>
+              <span>{selectedNodeData.country}</span>
+            </div>
+            <div className="popup-row highlight">
+              <span>Latency:</span>
+              <span style={{ color: selectedNodeData.color }}>
+                {selectedNodeData.latency ? `${selectedNodeData.latency}ms` : 'N/A'}
+              </span>
+            </div>
+            <div className="popup-row">
+              <span>Status:</span>
+              <span className={`status-badge ${selectedNodeData.status}`}>
+                {selectedNodeData.status}
+              </span>
+            </div>
+          </div>
+        </div>
+      )}
+
+      <div className="globe-instructions">
+        Drag to rotate · Scroll to zoom · Click nodes for details
+      </div>
    </div>
  )
 }
--- a/src/client/components/ResultsPanel.css
+++ b/src/client/components/ResultsPanel.css
@@ -1,80 +1,122 @@
 .results-panel {
-  max-width: 900px;
+  max-width: 1000px;
  margin: 0 auto;
+  animation: fadeIn 0.5s ease-out;
 }

 .results-header {
  display: flex;
  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 1rem;
-  padding: 0 4px;
+  align-items: flex-end;
+  margin-bottom: 1.5rem;
+  padding: 0 8px;
+  border-bottom: 1px solid var(--border-color);
+  padding-bottom: 1rem;
 }

 .results-header h2 {
-  margin: 0;
-  font-size: 1.25rem;
+  font-size: 1.5rem;
+  font-weight: 700;
  color: var(--text-color);
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.results-header h2::before {
+  content: '';
+  display: block;
+  width: 4px;
+  height: 24px;
+  background: var(--primary-color);
+  border-radius: 2px;
+  box-shadow: 0 0 10px var(--primary-color);
 }

 .avg-latency {
-  font-size: 1rem;
+  font-family: 'JetBrains Mono', monospace;
+  font-size: 0.9rem;
  color: var(--text-secondary);
+  background: var(--card-bg);
+  padding: 4px 12px;
+  border-radius: 20px;
+  border: 1px solid var(--border-color);
 }

 .results-grid {
  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
-  gap: 12px;
+  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
+  gap: 16px;
 }

 .result-card {
-  background-color: var(--card-bg);
+  position: relative;
+  background: var(--card-bg);
  border: 1px solid var(--border-color);
-  border-radius: 8px;
-  padding: 12px;
+  border-radius: 12px;
+  padding: 16px;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
+  backdrop-filter: blur(10px);
+  -webkit-backdrop-filter: blur(10px);
+  overflow: hidden;
  text-align: center;
-  transition: transform 0.2s, box-shadow 0.2s;
+}
+
+.result-card::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 3px;
+  background: var(--text-secondary);
+  opacity: 0.3;
+  transition: background-color 0.3s, opacity 0.3s, box-shadow 0.3s;
 }

 .result-card:hover {
-  transform: translateY(-2px);
-  box-shadow: 0 4px 12px var(--shadow-color);
+  transform: translateY(-4px);
+  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
 }

-.result-card.excellent {
-  border-color: #22c55e;
-}
+.result-card.excellent { border-color: rgba(16, 185, 129, 0.3); }
+.result-card.excellent::before { background: var(--success-color); opacity: 1; box-shadow: 0 0 10px var(--success-color); }

-.result-card.good {
-  border-color: #eab308;
-}
+.result-card.good { border-color: rgba(245, 158, 11, 0.3); }
+.result-card.good::before { background: var(--warning-color); opacity: 1; box-shadow: 0 0 10px var(--warning-color); }

-.result-card.poor {
-  border-color: #ef4444;
-}
+.result-card.poor { border-color: rgba(239, 68, 68, 0.3); }
+.result-card.poor::before { background: var(--error-color); opacity: 1; box-shadow: 0 0 10px var(--error-color); }

 .result-region {
-  font-size: 0.7rem;
-  color: var(--text-secondary);
+  font-size: 0.65rem;
  text-transform: uppercase;
-  letter-spacing: 0.5px;
-  margin-bottom: 4px;
+  letter-spacing: 1px;
+  color: var(--text-secondary);
+  margin-bottom: 6px;
+  opacity: 0.8;
 }

 .result-name {
-  font-size: 0.9rem;
+  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-color);
-  margin-bottom: 8px;
+  margin-bottom: 12px;
+  line-height: 1.2;
 }

 .result-latency {
-  font-size: 1.1rem;
+  font-family: 'JetBrains Mono', monospace;
+  font-size: 1.5rem;
  font-weight: 700;
+  letter-spacing: -1px;
 }

 .testing-indicator {
+  font-size: 0.9rem;
  color: var(--primary-color);
  animation: pulse 1s ease-in-out infinite;
 }
@@ -83,6 +125,11 @@
  color: var(--text-secondary);
 }

+@keyframes fadeIn {
+  from { opacity: 0; transform: translateY(10px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
--- a/src/client/styles/index.css
+++ b/src/client/styles/index.css
@@ -1,32 +1,57 @@
 :root {
+  /* Core Palette */
  --primary-color: #3b82f6;
  --primary-hover: #2563eb;
+  --accent-glow: rgba(59, 130, 246, 0.4);
+
+  --success-color: #10b981;
+  --warning-color: #f59e0b;
  --error-color: #ef4444;
+
+  /* Text */
  --text-color: #1f2937;
  --text-secondary: #6b7280;
-  --background-color: #f9fafb;
-  --card-bg: #ffffff;
+
+  /* Backgrounds */
+  --background-color: #f3f4f6;
+  --card-bg: rgba(255, 255, 255, 0.85);
  --input-bg: #ffffff;
  --border-color: #e5e7eb;
  --hover-bg: rgba(0, 0, 0, 0.05);
+
+  /* Effects */
+  --glass-blur: blur(12px);
  --shadow-color: rgba(0, 0, 0, 0.1);
-  --map-land: #e5e7eb;
-  --map-border: #d1d5db;
+  --shadow-glow: 0 0 0 transparent;
+  --transition-fast: 0.2s ease;
+  --transition-smooth: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+
+  /* Map */
+  --map-land: #d1d5db;
+  --map-border: #9ca3af;
  --marker-inactive: #9ca3af;
 }

 [data-theme='dark'] {
-  --text-color: #f9fafb;
-  --text-secondary: #9ca3af;
-  --background-color: #111827;
-  --card-bg: #1f2937;
-  --input-bg: #374151;
-  --border-color: #374151;
+  --primary-color: #38bdf8;
+  --primary-hover: #0ea5e9;
+  --accent-glow: rgba(56, 189, 248, 0.35);
+
+  --text-color: #e2e8f0;
+  --text-secondary: #94a3b8;
+
+  --background-color: #0f172a;
+  --card-bg: rgba(30, 41, 59, 0.75);
+  --input-bg: rgba(15, 23, 42, 0.9);
+  --border-color: rgba(148, 163, 184, 0.2);
  --hover-bg: rgba(255, 255, 255, 0.1);
+
  --shadow-color: rgba(0, 0, 0, 0.3);
-  --map-land: #374151;
-  --map-border: #4b5563;
-  --marker-inactive: #6b7280;
+  --shadow-glow: 0 0 20px rgba(56, 189, 248, 0.12);
+
+  --map-land: #1e293b;
+  --map-border: #334155;
+  --marker-inactive: #475569;
 }

 * {
@@ -36,11 +61,16 @@
 }

 body {
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background-color: var(--background-color);
+  background-image:
+    radial-gradient(circle at 50% 0%, rgba(56, 189, 248, 0.08) 0%, transparent 50%),
+    radial-gradient(circle at 85% 85%, rgba(139, 92, 246, 0.05) 0%, transparent 40%);
+  background-attachment: fixed;
  color: var(--text-color);
-  line-height: 1.5;
-  transition: background-color 0.3s, color 0.3s;
+  line-height: 1.6;
+  min-height: 100vh;
+  transition: background-color var(--transition-smooth), color var(--transition-smooth);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
 }
@@ -55,26 +85,39 @@ body {
  display: flex;
  justify-content: space-between;
  align-items: center;
-  padding: 1rem 2rem;
+  padding: 1.25rem 2rem;
+  background: var(--card-bg);
+  backdrop-filter: var(--glass-blur);
+  -webkit-backdrop-filter: var(--glass-blur);
  border-bottom: 1px solid var(--border-color);
-  background-color: var(--card-bg);
+  position: sticky;
+  top: 0;
+  z-index: 50;
+  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.07);
 }

 .app-title {
  display: flex;
  align-items: center;
-  gap: 8px;
+  gap: 12px;
  font-size: 1.5rem;
-  font-weight: 700;
+  font-weight: 800;
+  letter-spacing: -0.025em;
+  background: linear-gradient(135deg, var(--text-color) 0%, var(--primary-color) 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
 }

 .title-icon {
  font-size: 1.75rem;
+  -webkit-text-fill-color: initial;
+  filter: drop-shadow(0 0 8px var(--accent-glow));
 }

 .app-main {
  flex: 1;
-  padding: 2rem;
+  padding: 3rem 2rem;
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
@@ -83,31 +126,30 @@ body {
 .app-description {
  text-align: center;
  color: var(--text-secondary);
-  margin-bottom: 1.5rem;
+  margin-bottom: 2.5rem;
+  font-size: 1.1rem;
+  max-width: 600px;
+  margin-left: auto;
+  margin-right: auto;
 }

 .app-footer {
  text-align: center;
-  padding: 1rem;
+  padding: 1.5rem;
  border-top: 1px solid var(--border-color);
-  font-size: 0.85rem;
+  background: var(--card-bg);
+  backdrop-filter: var(--glass-blur);
+  -webkit-backdrop-filter: var(--glass-blur);
+  font-size: 0.875rem;
  color: var(--text-secondary);
 }

-.app-footer .excellent { color: #22c55e; }
-.app-footer .good { color: #eab308; }
-.app-footer .poor { color: #ef4444; }
+.app-footer .excellent { color: var(--success-color); text-shadow: 0 0 6px var(--success-color); }
+.app-footer .good { color: var(--warning-color); text-shadow: 0 0 6px var(--warning-color); }
+.app-footer .poor { color: var(--error-color); text-shadow: 0 0 6px var(--error-color); }

@media (max-width: 768px) {
-  .app-header {
-    padding: 1rem;
-  }
-
-  .app-title {
-    font-size: 1.25rem;
-  }
-
-  .app-main {
-    padding: 1rem;
-  }
+  .app-header { padding: 1rem; }
+  .app-title { font-size: 1.25rem; }
+  .app-main { padding: 1.5rem 1rem; }
 }
--- a/src/server/index.ts
+++ b/src/server/index.ts
@@ -2,6 +2,7 @@ import express, { Request, Response } from 'express'
 import cors from 'cors'
 import rateLimit from 'express-rate-limit'
 import ipaddr from 'ipaddr.js'
+import { TEST_NODES } from '../shared/types'

 const app = express()
 const PORT = process.env.PORT || 3000
@@ -11,25 +12,10 @@ app.use(express.json())
 app.use(cors({ origin: 'http://localhost:5173' }))
 app.use(rateLimit({
  windowMs: 60 * 1000,
-  limit: 10,
+  limit: 20,
  message: { error: 'Rate limit exceeded' }
 }))

-interface GlobalPingLocation {
-  country: string
-  city?: string
-}
-
-const NODE_LOCATIONS: Record<string, GlobalPingLocation> = {
-  'us-west': { country: 'US', city: 'San Francisco' },
-  'us-east': { country: 'US', city: 'New York' },
-  'europe': { country: 'DE', city: 'Frankfurt' },
-  'asia': { country: 'JP', city: 'Tokyo' },
-  'south-america': { country: 'BR', city: 'Sao Paulo' },
-  'africa': { country: 'ZA', city: 'Cape Town' },
-  'oceania': { country: 'AU', city: 'Sydney' }
-}
-
 function extractClientIp(req: Request): string | null {
  const forwarded = req.headers['x-forwarded-for']
  const raw = typeof forwarded === 'string' ? forwarded.split(',')[0].trim() : req.socket.remoteAddress
@@ -45,38 +31,63 @@ function isPublicIp(ip: string): boolean {
  return parsed.range() === 'unicast'
 }

+const DOMAIN_REGEX = /^(?!:\/\/)([a-zA-Z0-9-]+\.)+[a-zA-Z]{2,}$/
+
+function isValidDomain(domain: string): boolean {
+  if (domain.length > 253) return false
+  return DOMAIN_REGEX.test(domain)
+}
+
+function isValidTarget(target: string): boolean {
+  return isPublicIp(target) || isValidDomain(target)
+}
+
 interface MeasurementResponse {
  id: string
  probesCount: number
 }

+interface ProbeResult {
+  probe: {
+    continent: string
+    country: string
+    city: string
+    asn: number
+    network: string
+  }
+  result: {
+    status: string
+    rawOutput: string
+    stats?: {
+      min: number
+      max: number
+      avg: number
+      total: number
+      loss: number
+    }
+  }
+}
+
 interface MeasurementResult {
  id: string
  type: string
  status: 'in-progress' | 'finished'
-  results?: Array<{
-    probe: {
-      continent: string
-      country: string
-      city: string
-      asn: number
-      network: string
-    }
-    result: {
-      status: string
-      rawOutput: string
-      stats?: {
-        min: number
-        max: number
-        avg: number
-        total: number
-        loss: number
-      }
-    }
-  }>
+  results?: ProbeResult[]
 }

-async function createMeasurement(target: string, location: GlobalPingLocation): Promise<string> {
+interface BatchLatencyResult {
+  nodeId: string
+  latency: number | null
+  success: boolean
+}
+
+async function createBatchMeasurement(target: string): Promise<string> {
+  const locations = TEST_NODES.map(node => ({
+    country: node.country,
+    city: node.city,
+    limit: 1
+  }))
+
  const res = await fetch(`${GLOBALPING_API}/measurements`, {
    method: 'POST',
    headers: {
@@ -87,7 +98,8 @@ async function createMeasurement(target: string, location: GlobalPingLocation):
    body: JSON.stringify({
      type: 'ping',
      target,
-      locations: [location],
+      inProgressUpdates: true,
+      locations,
      measurementOptions: {
        packets: 3
      }
@@ -103,35 +115,35 @@ async function createMeasurement(target: string, location: GlobalPingLocation):
  return data.id
 }

-async function getMeasurementResult(id: string, timeout = 30000): Promise<{ latency: number | null; success: boolean }> {
-  const startTime = Date.now()
+function normalizeLocationName(value?: string | null): string {
+  if (!value) return ''
+  return value
+    .normalize('NFD')
+    .replace(/[\u0300-\u036f]/g, '')
+    .replace(/[^a-zA-Z0-9]+/g, ' ')
+    .trim()
+    .toLowerCase()
+}

-  while (Date.now() - startTime < timeout) {
-    await new Promise(r => setTimeout(r, 500))
+function matchProbeToNode(probe: ProbeResult['probe']): string | null {
+  const candidates = TEST_NODES.filter(node => node.country === probe.country)
+  if (candidates.length === 0) return null

-    const res = await fetch(`${GLOBALPING_API}/measurements/${id}`, {
-      headers: {
-        'Accept-Encoding': 'gzip',
-        'User-Agent': 'LatencyTest/1.0.0'
+  const probeCity = normalizeLocationName(probe.city)
+  if (probeCity) {
+    for (const node of candidates) {
+      const nodeCity = normalizeLocationName(node.city)
+      if (nodeCity && (probeCity.includes(nodeCity) || nodeCity.includes(probeCity))) {
+        return node.id
      }
-    })
-
-    if (!res.ok) {
-      throw new Error(`Failed to get measurement: ${res.status}`)
-    }
-
-    const data = await res.json() as MeasurementResult
-
-    if (data.status !== 'in-progress') {
-      const result = data.results?.[0]?.result
-      if (result?.status === 'finished' && result.stats?.avg != null) {
-        return { latency: Math.round(result.stats.avg), success: true }
-      }
-      return { latency: null, success: false }
    }
  }

-  return { latency: null, success: false }
+  if (candidates.length === 1) {
+    return candidates[0].id
+  }
+
+  return null
 }

 app.get('/api/ip', (req: Request, res: Response) => {
@@ -142,28 +154,77 @@ app.get('/api/ip', (req: Request, res: Response) => {
  res.json({ ip })
 })

-app.post('/api/latency', async (req: Request, res: Response) => {
-  const { targetIp, nodeId } = req.body
+app.post('/api/latency/batch', async (req: Request, res: Response) => {
+  const { target } = req.body

-  if (!targetIp || typeof targetIp !== 'string') {
-    return res.status(400).json({ error: 'targetIp is required' })
+  if (!target || typeof target !== 'string') {
+    return res.status(400).json({ error: 'target is required' })
  }

-  if (!nodeId || !NODE_LOCATIONS[nodeId]) {
-    return res.status(400).json({ error: `Invalid nodeId. Available: ${Object.keys(NODE_LOCATIONS).join(', ')}` })
-  }
+  const trimmedTarget = target.trim().toLowerCase()

-  if (!isPublicIp(targetIp)) {
-    return res.status(400).json({ error: 'Invalid or private IP address' })
+  if (!isValidTarget(trimmedTarget)) {
+    return res.status(400).json({ error: 'Invalid target. Please enter a valid IP address or domain name.' })
  }

  try {
-    const measurementId = await createMeasurement(targetIp, NODE_LOCATIONS[nodeId])
-    const { latency, success } = await getMeasurementResult(measurementId)
-    res.json({ nodeId, latency, success })
+    const measurementId = await createBatchMeasurement(trimmedTarget)
+    res.json({ measurementId })
  } catch (error) {
-    console.error('Latency test error:', error)
-    res.status(500).json({ nodeId, latency: null, success: false })
+    console.error('Batch measurement creation error:', error)
+    res.status(500).json({ error: 'Failed to create measurement' })
+  }
+})
+
+app.get('/api/latency/batch/:measurementId', async (req: Request, res: Response) => {
+  const { measurementId } = req.params
+
+  try {
+    const fetchRes = await fetch(`${GLOBALPING_API}/measurements/${measurementId}`, {
+      headers: {
+        'Accept-Encoding': 'gzip',
+        'User-Agent': 'LatencyTest/1.0.0'
+      }
+    })
+
+    if (!fetchRes.ok) {
+      return res.status(fetchRes.status).json({ error: 'Failed to get measurement' })
+    }
+
+    const data = await fetchRes.json() as MeasurementResult
+    const results: BatchLatencyResult[] = []
+    const matchedNodes = new Set<string>()
+
+    if (data.results) {
+      for (const probeResult of data.results) {
+        const result = probeResult.result
+        const nodeId = matchProbeToNode(probeResult.probe)
+
+        if (nodeId && !matchedNodes.has(nodeId)) {
+          matchedNodes.add(nodeId)
+          if (result.status === 'finished') {
+            const latency = result.stats?.avg != null ? Math.round(result.stats.avg) : null
+            results.push({ nodeId, latency, success: latency !== null })
+          } else {
+            results.push({ nodeId, latency: null, success: false })
+          }
+        }
+      }
+    }
+
+    for (const node of TEST_NODES) {
+      if (!matchedNodes.has(node.id)) {
+        results.push({ nodeId: node.id, latency: null, success: false })
+      }
+    }
+
+    res.json({
+      status: data.status,
+      results
+    })
+  } catch (error) {
+    console.error('Get measurement error:', error)
+    res.status(500).json({ error: 'Failed to get measurement' })
  }
 })

--- a/src/shared/types.js
+++ b/src/shared/types.js
@@ -1,32 +0,0 @@
-export const LATENCY_THRESHOLDS = {
-    excellent: 50,
-    good: 150,
-    poor: Infinity,
-};
-export const TEST_NODES = [
-    { id: 'us-west', name: 'US West', region: 'North America', coords: [-122.4194, 37.7749] },
-    { id: 'us-east', name: 'US East', region: 'North America', coords: [-74.006, 40.7128] },
-    { id: 'europe', name: 'Frankfurt', region: 'Europe', coords: [8.6821, 50.1109] },
-    { id: 'asia', name: 'Tokyo', region: 'Asia', coords: [139.6917, 35.6895] },
-    { id: 'south-america', name: 'São Paulo', region: 'South America', coords: [-46.6333, -23.5505] },
-    { id: 'africa', name: 'Cape Town', region: 'Africa', coords: [18.4241, -33.9249] },
-    { id: 'oceania', name: 'Sydney', region: 'Oceania', coords: [151.2093, -33.8688] },
-];
-export function getLatencyLevel(latency) {
-    if (latency === null)
-        return 'poor';
-    if (latency < LATENCY_THRESHOLDS.excellent)
-        return 'excellent';
-    if (latency < LATENCY_THRESHOLDS.good)
-        return 'good';
-    return 'poor';
-}
-export function getLatencyColor(latency) {
-    const level = getLatencyLevel(latency);
-    const colors = {
-        excellent: '#22c55e',
-        good: '#eab308',
-        poor: '#ef4444',
-    };
-    return colors[level];
-}
--- a/src/shared/types.ts
+++ b/src/shared/types.ts
@@ -3,6 +3,8 @@ export interface TestNode {
  name: string
  region: string
  coords: [number, number] // [longitude, latitude]
+  country: string
+  city?: string
 }

 export interface LatencyResult {
@@ -20,13 +22,27 @@ export const LATENCY_THRESHOLDS = {
 } as const

 export const TEST_NODES: TestNode[] = [
-  { id: 'us-west', name: 'US West', region: 'North America', coords: [-122.4194, 37.7749] },
-  { id: 'us-east', name: 'US East', region: 'North America', coords: [-74.006, 40.7128] },
-  { id: 'europe', name: 'Frankfurt', region: 'Europe', coords: [8.6821, 50.1109] },
-  { id: 'asia', name: 'Tokyo', region: 'Asia', coords: [139.6917, 35.6895] },
-  { id: 'south-america', name: 'São Paulo', region: 'South America', coords: [-46.6333, -23.5505] },
-  { id: 'africa', name: 'Cape Town', region: 'Africa', coords: [18.4241, -33.9249] },
-  { id: 'oceania', name: 'Sydney', region: 'Oceania', coords: [151.2093, -33.8688] },
+  // North America
+  { id: 'us-west', name: 'Los Angeles', region: 'North America', coords: [-118.2437, 34.0522], country: 'US', city: 'Los Angeles' },
+  { id: 'us-east', name: 'New York', region: 'North America', coords: [-74.006, 40.7128], country: 'US', city: 'New York' },
+  { id: 'us-central', name: 'Dallas', region: 'North America', coords: [-96.797, 32.7767], country: 'US', city: 'Dallas' },
+  { id: 'canada', name: 'Toronto', region: 'North America', coords: [-79.3832, 43.6532], country: 'CA', city: 'Toronto' },
+  // Europe
+  { id: 'eu-west', name: 'London', region: 'Europe', coords: [-0.1276, 51.5074], country: 'GB', city: 'London' },
+  { id: 'eu-central', name: 'Frankfurt', region: 'Europe', coords: [8.6821, 50.1109], country: 'DE', city: 'Frankfurt' },
+  { id: 'eu-north', name: 'Amsterdam', region: 'Europe', coords: [4.9041, 52.3676], country: 'NL', city: 'Amsterdam' },
+  { id: 'eu-south', name: 'Paris', region: 'Europe', coords: [2.3522, 48.8566], country: 'FR', city: 'Paris' },
+  // Asia
+  { id: 'asia-east', name: 'Tokyo', region: 'Asia', coords: [139.6917, 35.6895], country: 'JP', city: 'Tokyo' },
+  { id: 'asia-se', name: 'Singapore', region: 'Asia', coords: [103.8198, 1.3521], country: 'SG', city: 'Singapore' },
+  { id: 'asia-south', name: 'Mumbai', region: 'Asia', coords: [72.8777, 19.076], country: 'IN', city: 'Mumbai' },
+  { id: 'asia-hk', name: 'Hong Kong', region: 'Asia', coords: [114.1694, 22.3193], country: 'HK', city: 'Hong Kong' },
+  // South America
+  { id: 'sa-east', name: 'São Paulo', region: 'South America', coords: [-46.6333, -23.5505], country: 'BR', city: 'Sao Paulo' },
+  // Africa
+  { id: 'africa', name: 'Johannesburg', region: 'Africa', coords: [28.0473, -26.2041], country: 'ZA', city: 'Johannesburg' },
+  // Oceania
+  { id: 'oceania', name: 'Sydney', region: 'Oceania', coords: [151.2093, -33.8688], country: 'AU', city: 'Sydney' },
 ]

 export function getLatencyLevel(latency: number | null): LatencyLevel {