mirror of
https://github.com/MrUnknownDE/utools.git
synced 2026-05-06 06:16:04 +02:00
rebase www template
This commit is contained in:
@@ -0,0 +1,13 @@
|
|||||||
|
{
|
||||||
|
"permissions": {
|
||||||
|
"allow": [
|
||||||
|
"Bash(git -C /c/Users/unknown/Documents/Github/utools log --oneline)",
|
||||||
|
"Bash(gh api *)",
|
||||||
|
"Bash(python3 -c \"import sys,json; d=json.load\\(sys.stdin\\); print\\(d.get\\('rule',{}\\).get\\('description',''\\), '\\\\n', d.get\\('most_recent_instance',{}\\).get\\('location',{}\\), '\\\\n', d.get\\('rule',{}\\).get\\('id',''\\)\\)\")",
|
||||||
|
"Bash(python3 -c \"import sys,json; d=json.load\\(sys.stdin\\); a=d['security_advisory']; print\\(a['summary'], '\\\\nPackage:', d['dependency']['package']['name'], '\\\\nVulnerable:', a['vulnerabilities'][0]['vulnerable_version_range'], '\\\\nFixed:', a['vulnerabilities'][0]['first_patched_version']['identifier'] if a['vulnerabilities'][0].get\\('first_patched_version'\\) else 'N/A', '\\\\nSeverity:', a['severity']\\)\" gh api repos/MrUnknownDE/utools/dependabot/alerts/6)",
|
||||||
|
"Bash(python3 -c \"import sys,json; d=json.load\\(sys.stdin\\); a=d['security_advisory']; print\\(a['summary'], '\\\\nPackage:', d['dependency']['package']['name'], '\\\\nVulnerable:', a['vulnerabilities'][0]['vulnerable_version_range'], '\\\\nFixed:', a['vulnerabilities'][0]['first_patched_version']['identifier'] if a['vulnerabilities'][0].get\\('first_patched_version'\\) else 'N/A', '\\\\nSeverity:', a['severity']\\)\")",
|
||||||
|
"Bash(python3 -c \"import sys,json; d=json.load\\(sys.stdin\\); print\\(json.dumps\\(d.get\\('most_recent_instance',{}\\), indent=2\\)\\)\")",
|
||||||
|
"Bash(npm ls *)"
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,128 @@
|
|||||||
|
# CLAUDE.md
|
||||||
|
|
||||||
|
This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
|
||||||
|
|
||||||
|
## Project Overview
|
||||||
|
|
||||||
|
**uTools** is a containerized full-stack web app for IP information and network diagnostics (geolocation, ASN, reverse DNS, ping, traceroute, port scan, WHOIS, DNS, subnet calculator, MAC lookup). Live at https://utools.mrunk.de.
|
||||||
|
|
||||||
|
## Commands
|
||||||
|
|
||||||
|
### Local Development & Deployment
|
||||||
|
|
||||||
|
```bash
|
||||||
|
# Build and start containers locally
|
||||||
|
./build.sh
|
||||||
|
|
||||||
|
# Or manually:
|
||||||
|
docker compose down
|
||||||
|
export GIT_COMMIT_SHA=$(git rev-parse --short HEAD)
|
||||||
|
export SENTRY_DSN="<your-dsn>"
|
||||||
|
docker compose -f compose.build.yml build
|
||||||
|
docker compose -f compose.yml up -d
|
||||||
|
|
||||||
|
# Start only (using pre-built images from Docker Hub)
|
||||||
|
docker compose up -d
|
||||||
|
|
||||||
|
# View logs
|
||||||
|
docker compose logs -f backend
|
||||||
|
docker compose logs -f frontend
|
||||||
|
```
|
||||||
|
|
||||||
|
### Backend (local, without Docker)
|
||||||
|
|
||||||
|
```bash
|
||||||
|
cd backend
|
||||||
|
cp example.env .env # configure env vars
|
||||||
|
npm install
|
||||||
|
npm start # or: node server.js
|
||||||
|
```
|
||||||
|
|
||||||
|
No lint or test scripts are configured.
|
||||||
|
|
||||||
|
### Git LFS
|
||||||
|
|
||||||
|
MaxMind databases are stored in Git LFS. After cloning, run:
|
||||||
|
```bash
|
||||||
|
git lfs pull
|
||||||
|
```
|
||||||
|
|
||||||
|
## Architecture
|
||||||
|
|
||||||
|
### Structure
|
||||||
|
|
||||||
|
```
|
||||||
|
utools/
|
||||||
|
├── backend/ # Node.js Express API (port 3000)
|
||||||
|
│ ├── server.js # Entry point: Express setup, Sentry, middleware, route mounting
|
||||||
|
│ ├── maxmind.js # Singleton MaxMind reader initialization (GeoLite2-City + ASN)
|
||||||
|
│ ├── utils.js # IP/domain/MAC validation helpers
|
||||||
|
│ └── routes/ # One file per API endpoint
|
||||||
|
├── frontend/ # Nginx static server (port 8080)
|
||||||
|
│ ├── app/ # Vanilla HTML/JS/CSS (no build step)
|
||||||
|
│ │ ├── index.html / script.js # Main IP info dashboard
|
||||||
|
│ │ └── *.html # Tool-specific pages (dns, whois, mac, subnet, asn)
|
||||||
|
│ └── nginx.conf # Clean URL rewrites + /api/* reverse proxy to backend:3000
|
||||||
|
├── compose.yml # Production: pulls from Docker Hub
|
||||||
|
├── compose.build.yml # Build: builds images locally
|
||||||
|
└── build.sh # Local build + deploy script
|
||||||
|
```
|
||||||
|
|
||||||
|
### Request Flow
|
||||||
|
|
||||||
|
```
|
||||||
|
Browser → Nginx (port 8080)
|
||||||
|
├── static files → frontend/app/
|
||||||
|
└── /api/* → Express backend (port 3000)
|
||||||
|
├── MaxMind .mmdb files (GeoLite2 from Git LFS)
|
||||||
|
├── Sentry (error tracking)
|
||||||
|
└── System commands (ping, traceroute via exec)
|
||||||
|
```
|
||||||
|
|
||||||
|
### API Endpoints
|
||||||
|
|
||||||
|
| Endpoint | Response type | Notes |
|
||||||
|
|---|---|---|
|
||||||
|
| `GET /api/ipinfo/:ip` | JSON | Geo + ASN for an IP |
|
||||||
|
| `GET /api/lookup/:query` | JSON | Resolve domain → IP → geo |
|
||||||
|
| `GET /api/dns-lookup` | JSON | DNS records |
|
||||||
|
| `GET /api/whois-lookup` | JSON | WHOIS data |
|
||||||
|
| `GET /api/ping` | JSON | ICMP ping |
|
||||||
|
| `GET /api/traceroute` | **SSE** | Streaming hop-by-hop output |
|
||||||
|
| `GET /api/port-scan` | **SSE** | Streaming port scan results |
|
||||||
|
| `GET /api/asn-lookup` | JSON | ASN details (cached to filesystem) |
|
||||||
|
| `GET /api/mac-lookup` | JSON | MAC OUI vendor lookup |
|
||||||
|
| `GET /api/version` | JSON | Git commit SHA |
|
||||||
|
|
||||||
|
Streaming endpoints use Server-Sent Events (EventSource). Nginx is configured with `proxy_buffering off` for these.
|
||||||
|
|
||||||
|
### Key Implementation Details
|
||||||
|
|
||||||
|
- **Proxy trust:** `app.set('trust proxy', 2)` — backend sits behind Nginx + any upstream proxy.
|
||||||
|
- **MaxMind readers** are initialized once at startup (`maxmind.js`) and reused across requests.
|
||||||
|
- **ASN cache** is persisted to `/app/asn-cache` (Docker volume) to reduce external calls.
|
||||||
|
- **Rate limiting** is configured via env vars (`RATE_LIMIT_MAX`, `RATE_LIMIT_WINDOW_MS`).
|
||||||
|
- **Private IP detection** (RFC1918, loopback, link-local) is handled in `utils.js` before any lookup.
|
||||||
|
- **Sentry** is initialized before Express and wraps request/error handlers.
|
||||||
|
- The backend Dockerfile installs OS packages for `ping` and `traceroute` (`iputils-ping`, `traceroute`).
|
||||||
|
|
||||||
|
### Environment Variables (backend)
|
||||||
|
|
||||||
|
See `backend/example.env`. Key variables:
|
||||||
|
|
||||||
|
| Variable | Default | Purpose |
|
||||||
|
|---|---|---|
|
||||||
|
| `GEOIP_CITY_DB` | `./data/GeoLite2-City.mmdb` | Path to MaxMind City DB |
|
||||||
|
| `GEOIP_ASN_DB` | `./data/GeoLite2-ASN.mmdb` | Path to MaxMind ASN DB |
|
||||||
|
| `PORT` | `3000` | Express listen port |
|
||||||
|
| `LOG_LEVEL` | `debug` | Pino log level |
|
||||||
|
| `PING_COUNT` | `4` | Packets per ping |
|
||||||
|
| `RATE_LIMIT_MAX` | `200` | Max requests per window |
|
||||||
|
| `RATE_LIMIT_WINDOW_MS` | `300000` | Rate limit window (5 min) |
|
||||||
|
| `SENTRY_DSN` | — | Sentry ingest URL |
|
||||||
|
| `ASN_CACHE_DIR` | — | Directory for ASN response cache |
|
||||||
|
|
||||||
|
### CI/CD
|
||||||
|
|
||||||
|
- **`docker-build-push.yml`**: Triggered on push to `main`. Builds multi-arch images (`linux/amd64`, `linux/arm64`) and pushes to Docker Hub as `mrunknownde/utools-backend` and `mrunknownde/utools-frontend` with `:latest` and `:<short-sha>` tags. Requires LFS checkout for MaxMind databases.
|
||||||
|
- **`maxmind-update.yml`**: Runs on the 1st of each month. Downloads updated GeoLite2 databases via `geoipupdate` and commits them back to Git LFS.
|
||||||
Generated
+553
-512
File diff suppressed because it is too large
Load Diff
+6
-28
@@ -287,7 +287,6 @@ function parseTracerouteLine(line) {
|
|||||||
* @returns {Promise<{port: number, status: 'open'|'closed'|'timeout', service: string}>} A promise that resolves with the port status.
|
* @returns {Promise<{port: number, status: 'open'|'closed'|'timeout', service: string}>} A promise that resolves with the port status.
|
||||||
*/
|
*/
|
||||||
function checkPort(port, host, timeout = 2000) {
|
function checkPort(port, host, timeout = 2000) {
|
||||||
// A small map of common ports to their services
|
|
||||||
const commonPorts = {
|
const commonPorts = {
|
||||||
21: 'FTP', 22: 'SSH', 23: 'Telnet', 25: 'SMTP', 53: 'DNS', 80: 'HTTP',
|
21: 'FTP', 22: 'SSH', 23: 'Telnet', 25: 'SMTP', 53: 'DNS', 80: 'HTTP',
|
||||||
110: 'POP3', 143: 'IMAP', 443: 'HTTPS', 445: 'SMB', 993: 'IMAPS',
|
110: 'POP3', 143: 'IMAP', 443: 'HTTPS', 445: 'SMB', 993: 'IMAPS',
|
||||||
@@ -296,45 +295,24 @@ function checkPort(port, host, timeout = 2000) {
|
|||||||
};
|
};
|
||||||
const service = commonPorts[port] || 'Unknown';
|
const service = commonPorts[port] || 'Unknown';
|
||||||
|
|
||||||
return new Promise((resolve, reject) => {
|
// Validate before any network operation — throw so CodeQL tracks this as a hard barrier
|
||||||
// DEFENSE IN DEPTH: Prevent scanning of private IPs at the function level
|
|
||||||
if (!isValidIp(host) || isPrivateIp(host)) {
|
if (!isValidIp(host) || isPrivateIp(host)) {
|
||||||
const error = new Error(`Scanning restricted: ${host} is not a valid public IP.`);
|
logger.warn({ host, port }, 'Blocked attempt to scan restricted IP in checkPort');
|
||||||
logger.warn({ host, port }, "Blocked attempt to scan restricted IP in checkPort");
|
throw new Error(`Scanning restricted: ${host} is not a valid public IP.`);
|
||||||
return resolve({
|
|
||||||
port,
|
|
||||||
status: 'error',
|
|
||||||
service,
|
|
||||||
error: 'Restricted IP',
|
|
||||||
details: 'Scanning private or invalid IPs is not allowed.'
|
|
||||||
});
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
return new Promise((resolve) => {
|
||||||
const socket = new net.Socket();
|
const socket = new net.Socket();
|
||||||
socket.setTimeout(timeout);
|
socket.setTimeout(timeout);
|
||||||
|
|
||||||
socket.on('connect', () => {
|
socket.on('connect', () => { socket.destroy(); resolve({ port, status: 'open', service }); });
|
||||||
socket.destroy();
|
socket.on('timeout', () => { socket.destroy(); resolve({ port, status: 'timeout', service }); });
|
||||||
resolve({ port, status: 'open', service });
|
|
||||||
});
|
|
||||||
|
|
||||||
socket.on('timeout', () => {
|
|
||||||
socket.destroy();
|
|
||||||
resolve({ port, status: 'timeout', service });
|
|
||||||
});
|
|
||||||
|
|
||||||
socket.on('error', (err) => {
|
socket.on('error', (err) => {
|
||||||
socket.destroy();
|
socket.destroy();
|
||||||
// 'ECONNREFUSED' is the key for a closed port. Other errors might be network issues.
|
|
||||||
const status = err.code === 'ECONNREFUSED' ? 'closed' : 'error';
|
const status = err.code === 'ECONNREFUSED' ? 'closed' : 'error';
|
||||||
resolve({ port, status, service, error: err.code });
|
resolve({ port, status, service, error: err.code });
|
||||||
});
|
});
|
||||||
|
|
||||||
// Explicit inline guard (defence-in-depth; also satisfies CodeQL SSRF dataflow)
|
|
||||||
if (!isValidIp(host) || isPrivateIp(host)) {
|
|
||||||
socket.destroy();
|
|
||||||
return resolve({ port, status: 'error', service, error: 'Restricted IP' });
|
|
||||||
}
|
|
||||||
socket.connect(port, host);
|
socket.connect(port, host);
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -4,6 +4,7 @@ services:
|
|||||||
image: mrunknownde/utools-backend
|
image: mrunknownde/utools-backend
|
||||||
container_name: utools_backend
|
container_name: utools_backend
|
||||||
restart: unless-stopped
|
restart: unless-stopped
|
||||||
|
user: "0" # Run as root so ASN cache volume is writable
|
||||||
environment:
|
environment:
|
||||||
NODE_ENV: production
|
NODE_ENV: production
|
||||||
PORT: 3000
|
PORT: 3000
|
||||||
|
|||||||
@@ -1,471 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html lang="de">
|
|
||||||
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
||||||
<title>ASN / AS Lookup - uTools</title>
|
|
||||||
<meta name="description"
|
|
||||||
content="Look up any Autonomous System Number (ASN) to see peering connections, network graph, prefixes and IXP information.">
|
|
||||||
<script src="https://cdn.tailwindcss.com"></script>
|
|
||||||
<!-- D3.js v7 for network graph -->
|
|
||||||
<script src="https://cdn.jsdelivr.net/npm/d3@7/dist/d3.min.js"></script>
|
|
||||||
<style>
|
|
||||||
.loader {
|
|
||||||
border: 4px solid rgba(168, 85, 247, 0.1);
|
|
||||||
border-left-color: #d8b4fe;
|
|
||||||
border-radius: 50%;
|
|
||||||
width: 24px;
|
|
||||||
height: 24px;
|
|
||||||
animation: spin 1s linear infinite;
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes spin {
|
|
||||||
to {
|
|
||||||
transform: rotate(360deg);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.glass-panel {
|
|
||||||
background: rgba(17, 24, 39, 0.7);
|
|
||||||
backdrop-filter: blur(12px);
|
|
||||||
-webkit-backdrop-filter: blur(12px);
|
|
||||||
border: 1px solid rgba(255, 255, 255, 0.05);
|
|
||||||
}
|
|
||||||
|
|
||||||
.glass-card {
|
|
||||||
background: rgba(31, 41, 55, 0.6);
|
|
||||||
backdrop-filter: blur(8px);
|
|
||||||
-webkit-backdrop-filter: blur(8px);
|
|
||||||
border: 1px solid rgba(255, 255, 255, 0.05);
|
|
||||||
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.glass-card:hover {
|
|
||||||
transform: translateY(-2px);
|
|
||||||
box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.5);
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes fadeIn {
|
|
||||||
from {
|
|
||||||
opacity: 0;
|
|
||||||
transform: translateY(10px);
|
|
||||||
}
|
|
||||||
|
|
||||||
to {
|
|
||||||
opacity: 1;
|
|
||||||
transform: translateY(0);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.fade-in {
|
|
||||||
animation: fadeIn 0.5s ease-out forwards;
|
|
||||||
}
|
|
||||||
|
|
||||||
.text-gradient {
|
|
||||||
background: linear-gradient(to right, #c084fc, #e879f9);
|
|
||||||
-webkit-background-clip: text;
|
|
||||||
background-clip: text;
|
|
||||||
-webkit-text-fill-color: transparent;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hidden {
|
|
||||||
display: none !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
nav ul {
|
|
||||||
list-style: none;
|
|
||||||
padding: 0;
|
|
||||||
margin: 0;
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
gap: 0.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
nav a {
|
|
||||||
color: #d1d5db;
|
|
||||||
text-decoration: none;
|
|
||||||
padding: 0.5rem 1rem;
|
|
||||||
border-radius: 0.5rem;
|
|
||||||
transition: all 0.2s ease;
|
|
||||||
background: rgba(255, 255, 255, 0.03);
|
|
||||||
border: 1px solid rgba(255, 255, 255, 0.05);
|
|
||||||
}
|
|
||||||
|
|
||||||
nav a:hover {
|
|
||||||
color: #fff;
|
|
||||||
background: rgba(168, 85, 247, 0.2);
|
|
||||||
border-color: rgba(168, 85, 247, 0.4);
|
|
||||||
}
|
|
||||||
|
|
||||||
nav a.active-link {
|
|
||||||
background: rgba(168, 85, 247, 0.3);
|
|
||||||
color: #fff;
|
|
||||||
border-color: #a855f7;
|
|
||||||
}
|
|
||||||
|
|
||||||
header {
|
|
||||||
background: rgba(31, 41, 55, 0.4);
|
|
||||||
backdrop-filter: blur(10px);
|
|
||||||
padding: 1.5rem;
|
|
||||||
margin-bottom: 2rem;
|
|
||||||
border-radius: 1rem;
|
|
||||||
border: 1px solid rgba(255, 255, 255, 0.05);
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
gap: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (min-width: 768px) {
|
|
||||||
header {
|
|
||||||
flex-direction: row;
|
|
||||||
justify-content: space-between;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ── Network Graph ─────────────────────────────────────── */
|
|
||||||
#graph-container {
|
|
||||||
width: 100%;
|
|
||||||
height: 600px;
|
|
||||||
background: rgba(0, 0, 0, 0.3);
|
|
||||||
border-radius: 0.75rem;
|
|
||||||
border: 1px solid rgba(255, 255, 255, 0.06);
|
|
||||||
overflow: hidden;
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
#graph-svg {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
cursor: grab;
|
|
||||||
}
|
|
||||||
|
|
||||||
#graph-svg:active {
|
|
||||||
cursor: grabbing;
|
|
||||||
}
|
|
||||||
|
|
||||||
.node-center circle {
|
|
||||||
fill: #a855f7;
|
|
||||||
stroke: #d8b4fe;
|
|
||||||
stroke-width: 2.5;
|
|
||||||
}
|
|
||||||
|
|
||||||
.node-upstream circle {
|
|
||||||
fill: #3b82f6;
|
|
||||||
stroke: #93c5fd;
|
|
||||||
stroke-width: 1.5;
|
|
||||||
}
|
|
||||||
|
|
||||||
.node-downstream circle {
|
|
||||||
fill: #10b981;
|
|
||||||
stroke: #6ee7b7;
|
|
||||||
stroke-width: 1.5;
|
|
||||||
}
|
|
||||||
|
|
||||||
.node-tier1 circle {
|
|
||||||
fill: #6b7280;
|
|
||||||
stroke: #9ca3af;
|
|
||||||
stroke-width: 1.5;
|
|
||||||
}
|
|
||||||
|
|
||||||
.node text {
|
|
||||||
fill: #e5e7eb;
|
|
||||||
font-size: 11px;
|
|
||||||
font-family: 'Courier New', monospace;
|
|
||||||
pointer-events: none;
|
|
||||||
text-anchor: middle;
|
|
||||||
}
|
|
||||||
|
|
||||||
.node:hover circle {
|
|
||||||
filter: brightness(1.4);
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
.link {
|
|
||||||
stroke: rgba(255, 255, 255, 0.12);
|
|
||||||
stroke-linecap: round;
|
|
||||||
}
|
|
||||||
|
|
||||||
.link-upstream {
|
|
||||||
stroke: rgba(59, 130, 246, 0.35);
|
|
||||||
}
|
|
||||||
|
|
||||||
.link-tier1 {
|
|
||||||
stroke: rgba(107, 114, 128, 0.3);
|
|
||||||
stroke-dasharray: 4 3;
|
|
||||||
}
|
|
||||||
|
|
||||||
.link-downstream {
|
|
||||||
stroke: rgba(16, 185, 129, 0.35);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Tooltip */
|
|
||||||
#graph-tooltip {
|
|
||||||
position: absolute;
|
|
||||||
pointer-events: none;
|
|
||||||
background: rgba(17, 24, 39, 0.95);
|
|
||||||
backdrop-filter: blur(8px);
|
|
||||||
border: 1px solid rgba(168, 85, 247, 0.4);
|
|
||||||
border-radius: 0.5rem;
|
|
||||||
padding: 0.6rem 0.9rem;
|
|
||||||
font-size: 12px;
|
|
||||||
color: #e5e7eb;
|
|
||||||
max-width: 220px;
|
|
||||||
z-index: 50;
|
|
||||||
opacity: 0;
|
|
||||||
transition: opacity 0.15s;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Prefix list */
|
|
||||||
.prefix-tag {
|
|
||||||
display: inline-block;
|
|
||||||
font-family: monospace;
|
|
||||||
font-size: 11px;
|
|
||||||
background: rgba(168, 85, 247, 0.15);
|
|
||||||
color: #c084fc;
|
|
||||||
border: 1px solid rgba(168, 85, 247, 0.3);
|
|
||||||
border-radius: 4px;
|
|
||||||
padding: 2px 6px;
|
|
||||||
margin: 2px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* IXP table */
|
|
||||||
.ixp-row {
|
|
||||||
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
|
|
||||||
}
|
|
||||||
|
|
||||||
.ixp-row:last-child {
|
|
||||||
border-bottom: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
::-webkit-scrollbar {
|
|
||||||
width: 8px;
|
|
||||||
height: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
::-webkit-scrollbar-track {
|
|
||||||
background: rgba(31, 41, 55, 0.5);
|
|
||||||
}
|
|
||||||
|
|
||||||
::-webkit-scrollbar-thumb {
|
|
||||||
background: #4b5563;
|
|
||||||
border-radius: 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
::-webkit-scrollbar-thumb:hover {
|
|
||||||
background: #6b7280;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
</head>
|
|
||||||
|
|
||||||
<body
|
|
||||||
class="bg-gray-950 text-gray-100 font-sans p-4 md:p-8 min-h-screen bg-[url('https://tailwindcss.com/_next/static/media/hero-dark.939eb757.png')] bg-cover bg-center bg-fixed selection:bg-purple-500 selection:text-white">
|
|
||||||
|
|
||||||
<header class="glass-panel">
|
|
||||||
<h1>uTools <span class="text-sm font-normal text-gray-400 opacity-75 tracking-wider uppercase ml-2">Network
|
|
||||||
Suite</span></h1>
|
|
||||||
<nav>
|
|
||||||
<ul>
|
|
||||||
<li><a href="/">IP Info & Tools</a></li>
|
|
||||||
<li><a href="/subnet">Subnetz Rechner</a></li>
|
|
||||||
<li><a href="/dns">DNS Lookup</a></li>
|
|
||||||
<li><a href="/whois">WHOIS Lookup</a></li>
|
|
||||||
<li><a href="/mac">MAC Lookup</a></li>
|
|
||||||
<li><a href="/asn" class="active-link">ASN Lookup</a></li>
|
|
||||||
</ul>
|
|
||||||
</nav>
|
|
||||||
</header>
|
|
||||||
|
|
||||||
<div
|
|
||||||
class="container mx-auto max-w-6xl glass-panel rounded-xl shadow-2xl p-6 md:p-8 backdrop-blur-xl border border-gray-800/50">
|
|
||||||
|
|
||||||
<h1 class="text-3xl font-bold mb-2 text-center text-gradient">AS / ASN Lookup</h1>
|
|
||||||
<p class="text-center text-gray-400 text-sm mb-8">Peering graph, prefixes & IXP connections for any
|
|
||||||
Autonomous System</p>
|
|
||||||
|
|
||||||
<!-- Search -->
|
|
||||||
<div class="flex flex-col sm:flex-row gap-3 mb-6 max-w-2xl mx-auto">
|
|
||||||
<input type="text" id="asn-input" placeholder="Enter ASN (e.g. 15169 or AS3320)"
|
|
||||||
class="flex-grow px-4 py-3 bg-gray-900/50 border border-gray-700/50 rounded-lg text-gray-200 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent font-mono transition-all placeholder-gray-600">
|
|
||||||
<button id="lookup-button"
|
|
||||||
class="bg-gradient-to-r from-purple-600 to-pink-600 hover:from-purple-500 hover:to-pink-500 text-white font-bold py-3 px-6 rounded-lg shadow-lg hover:shadow-purple-500/25 transition-all duration-200 ease-in-out transform hover:-translate-y-0.5">
|
|
||||||
Lookup
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Error -->
|
|
||||||
<div id="error-box"
|
|
||||||
class="hidden max-w-2xl mx-auto mb-6 p-4 bg-red-900/30 border border-red-500/40 text-red-300 rounded-lg text-sm">
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Loading -->
|
|
||||||
<div id="loading-section" class="hidden flex flex-col items-center gap-4 py-16">
|
|
||||||
<div class="loader" style="width:40px;height:40px;border-width:5px;"></div>
|
|
||||||
<p class="text-gray-400 text-sm" id="loading-msg">Querying RIPE Stat & PeeringDB…</p>
|
|
||||||
<!-- Shown after 3s for slow lookups -->
|
|
||||||
<div id="loading-hint" class="hidden mt-2 max-w-sm text-center">
|
|
||||||
<p class="text-xs text-amber-400/80 bg-amber-400/10 border border-amber-400/20 rounded-lg px-4 py-2">
|
|
||||||
⏳ Large ASes (like Cloudflare, Google, Tier-1 carriers) can take up to 15 seconds on the first
|
|
||||||
lookup — subsequent lookups are cached for 7 days.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Results -->
|
|
||||||
<div id="results-section" class="hidden fade-in">
|
|
||||||
|
|
||||||
<!-- AS Info Header -->
|
|
||||||
<div class="glass-card rounded-xl p-6 mb-6">
|
|
||||||
<div class="flex flex-col md:flex-row md:items-center gap-4">
|
|
||||||
<div class="flex-1">
|
|
||||||
<div class="flex items-center gap-3 mb-1">
|
|
||||||
<span id="res-asn" class="font-mono text-2xl font-bold text-purple-400"></span>
|
|
||||||
<span id="res-announced-badge"
|
|
||||||
class="hidden text-xs px-2 py-0.5 bg-green-500/20 border border-green-500/40 text-green-400 rounded-full">Announced</span>
|
|
||||||
<span id="res-type-badge"
|
|
||||||
class="text-xs px-2 py-0.5 bg-blue-500/20 border border-blue-500/40 text-blue-300 rounded-full"></span>
|
|
||||||
</div>
|
|
||||||
<h2 id="res-name" class="text-xl font-semibold text-white mb-1"></h2>
|
|
||||||
<div class="flex flex-wrap items-center gap-x-4 gap-y-1 text-sm text-gray-400 mb-2">
|
|
||||||
<span id="res-policy-container" class="hidden">Peering Policy: <span id="res-policy"
|
|
||||||
class="text-gray-200"></span></span>
|
|
||||||
<span id="res-website-container" class="hidden">Website: <a id="res-website" href="#"
|
|
||||||
target="_blank"
|
|
||||||
class="text-purple-400 hover:text-purple-300 transition-colors"></a></span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Rich Info Grid -->
|
|
||||||
<div id="res-rich-info"
|
|
||||||
class="grid grid-cols-2 sm:grid-cols-4 gap-3 mt-4 pt-4 border-t border-gray-700/50 hidden">
|
|
||||||
<div id="res-info-type-container" class="hidden">
|
|
||||||
<div class="text-xs text-gray-500 uppercase tracking-widest">Type</div>
|
|
||||||
<div id="res-info-type" class="text-sm text-gray-200 capitalize mt-0.5"></div>
|
|
||||||
</div>
|
|
||||||
<div id="res-info-scope-container" class="hidden">
|
|
||||||
<div class="text-xs text-gray-500 uppercase tracking-widest">Scope</div>
|
|
||||||
<div id="res-info-scope" class="text-sm text-gray-200 capitalize mt-0.5"></div>
|
|
||||||
</div>
|
|
||||||
<div id="res-info-traffic-container" class="hidden">
|
|
||||||
<div class="text-xs text-gray-500 uppercase tracking-widest">Traffic</div>
|
|
||||||
<div id="res-info-traffic" class="text-sm text-gray-200 capitalize mt-0.5"></div>
|
|
||||||
</div>
|
|
||||||
<div id="res-info-ratio-container" class="hidden">
|
|
||||||
<div class="text-xs text-gray-500 uppercase tracking-widest">Ratio</div>
|
|
||||||
<div id="res-info-ratio" class="text-sm text-gray-200 capitalize mt-0.5"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="grid grid-cols-2 sm:grid-cols-3 gap-3 text-center">
|
|
||||||
<div class="bg-blue-500/10 border border-blue-500/20 rounded-lg p-3">
|
|
||||||
<div id="res-upstream-count" class="text-xl font-bold text-blue-400">—</div>
|
|
||||||
<div class="text-xs text-gray-400 mt-0.5">Upstreams</div>
|
|
||||||
</div>
|
|
||||||
<div class="bg-green-500/10 border border-green-500/20 rounded-lg p-3">
|
|
||||||
<div id="res-downstream-count" class="text-xl font-bold text-green-400">—</div>
|
|
||||||
<div class="text-xs text-gray-400 mt-0.5">Downstreams</div>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
class="bg-purple-500/10 border border-purple-500/20 rounded-lg p-3 col-span-2 sm:col-span-1">
|
|
||||||
<div id="res-prefix-count" class="text-xl font-bold text-purple-400">—</div>
|
|
||||||
<div class="text-xs text-gray-400 mt-0.5">Prefixes</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Network Map -->
|
|
||||||
<div class="glass-card rounded-xl p-6 mb-6">
|
|
||||||
<div class="flex items-center gap-3 mb-4">
|
|
||||||
<h3 class="text-lg font-bold text-purple-300">Network Map</h3>
|
|
||||||
<div class="flex gap-3 text-xs text-gray-400">
|
|
||||||
<span class="flex items-center gap-1"><span
|
|
||||||
class="inline-block w-3 h-3 rounded-full bg-gray-500"></span>Tier-1 / Transit</span>
|
|
||||||
<span class="flex items-center gap-1"><span
|
|
||||||
class="inline-block w-3 h-3 rounded-full bg-blue-500"></span>Upstream</span>
|
|
||||||
<span class="flex items-center gap-1"><span
|
|
||||||
class="inline-block w-3 h-3 rounded-full bg-purple-500"></span>This AS</span>
|
|
||||||
<span class="flex items-center gap-1"><span
|
|
||||||
class="inline-block w-3 h-3 rounded-full bg-green-500"></span>Downstream</span>
|
|
||||||
</div>
|
|
||||||
<span class="ml-auto text-xs text-gray-500">Scroll to zoom · Drag to pan · Click node to open</span>
|
|
||||||
</div>
|
|
||||||
<div id="graph-container">
|
|
||||||
<svg id="graph-svg"></svg>
|
|
||||||
<div id="graph-tooltip"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Prefixes + IXPs side by side -->
|
|
||||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
|
|
||||||
|
|
||||||
<!-- Prefixes -->
|
|
||||||
<div class="glass-card rounded-xl p-5">
|
|
||||||
<div class="flex items-center justify-between mb-3">
|
|
||||||
<h3 class="text-sm font-bold text-gray-400 uppercase tracking-widest">Announced Prefixes</h3>
|
|
||||||
<button id="prefix-toggle"
|
|
||||||
class="text-xs text-purple-400 hover:text-purple-300 transition-colors">Show all</button>
|
|
||||||
</div>
|
|
||||||
<div id="prefix-list" class="max-h-48 overflow-y-auto"></div>
|
|
||||||
<p id="prefix-empty" class="hidden text-sm text-gray-500 italic">No prefix data available.</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- IXPs -->
|
|
||||||
<div class="glass-card rounded-xl p-5">
|
|
||||||
<h3 class="text-sm font-bold text-gray-400 uppercase tracking-widest mb-3">IXP Presence <span
|
|
||||||
class="text-xs font-normal text-gray-500">(via PeeringDB)</span></h3>
|
|
||||||
<div id="ixp-list" class="space-y-1 text-sm max-h-48 overflow-y-auto">
|
|
||||||
<p id="ixp-empty" class="text-gray-500 italic text-sm">Not listed on PeeringDB.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Direct Peers Table -->
|
|
||||||
<div class="glass-card rounded-xl p-5">
|
|
||||||
<h3 class="text-sm font-bold text-gray-400 uppercase tracking-widest mb-3">Direct Neighbours <span
|
|
||||||
class="text-xs font-normal text-gray-500">(Level 2 · via RIPE Stat)</span></h3>
|
|
||||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
||||||
<!-- Upstreams -->
|
|
||||||
<div>
|
|
||||||
<h4 class="text-xs font-semibold text-blue-400 mb-2 flex items-center gap-1">
|
|
||||||
<svg class="w-3 h-3" fill="currentColor" viewBox="0 0 20 20">
|
|
||||||
<path fill-rule="evenodd"
|
|
||||||
d="M10 17a.75.75 0 01-.75-.75V5.56l-2.47 2.47a.75.75 0 01-1.06-1.06l3.75-3.75a.75.75 0 011.06 0l3.75 3.75a.75.75 0 11-1.06 1.06L10.75 5.56v10.69A.75.75 0 0110 17z"
|
|
||||||
clip-rule="evenodd" />
|
|
||||||
</svg>
|
|
||||||
Upstreams (Transit Providers)
|
|
||||||
</h4>
|
|
||||||
<div id="upstream-table" class="space-y-1 text-xs font-mono max-h-52 overflow-y-auto"></div>
|
|
||||||
</div>
|
|
||||||
<!-- Downstreams -->
|
|
||||||
<div>
|
|
||||||
<h4 class="text-xs font-semibold text-green-400 mb-2 flex items-center gap-1">
|
|
||||||
<svg class="w-3 h-3" fill="currentColor" viewBox="0 0 20 20">
|
|
||||||
<path fill-rule="evenodd"
|
|
||||||
d="M10 3a.75.75 0 01.75.75v10.69l2.47-2.47a.75.75 0 111.06 1.06l-3.75 3.75a.75.75 0 01-1.06 0l-3.75-3.75a.75.75 0 111.06-1.06L9.25 14.44V3.75A.75.75 0 0110 3z"
|
|
||||||
clip-rule="evenodd" />
|
|
||||||
</svg>
|
|
||||||
Downstreams (Customers)
|
|
||||||
</h4>
|
|
||||||
<div id="downstream-table" class="space-y-1 text-xs font-mono max-h-52 overflow-y-auto"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div><!-- /results -->
|
|
||||||
|
|
||||||
<footer class="mt-12 pt-6 border-t border-gray-700/30 text-center text-xs text-gray-500">
|
|
||||||
<p>Data: <a href="https://stat.ripe.net" target="_blank"
|
|
||||||
class="text-purple-400 hover:text-purple-300 transition-colors">RIPE Stat</a> & <a
|
|
||||||
href="https://www.peeringdb.com" target="_blank"
|
|
||||||
class="text-purple-400 hover:text-purple-300 transition-colors">PeeringDB</a> · Cache: 7 days</p>
|
|
||||||
<p class="mt-1">© 2025 <a href="https://mrunk.de"
|
|
||||||
class="text-purple-400 hover:text-purple-300 transition-colors">MrUnknownDE</a></p>
|
|
||||||
</footer>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<script src="asn-lookup.js"></script>
|
|
||||||
</body>
|
|
||||||
|
|
||||||
</html>
|
|
||||||
@@ -1,399 +0,0 @@
|
|||||||
// frontend/app/asn-lookup.js
|
|
||||||
'use strict';
|
|
||||||
|
|
||||||
const API_BASE = '/api';
|
|
||||||
|
|
||||||
// ─── State ────────────────────────────────────────────────────────────────────
|
|
||||||
let currentData = null;
|
|
||||||
let showAllPrefixes = false;
|
|
||||||
|
|
||||||
// ─── DOM Refs ─────────────────────────────────────────────────────────────────
|
|
||||||
const asnInput = document.getElementById('asn-input');
|
|
||||||
const lookupButton = document.getElementById('lookup-button');
|
|
||||||
const errorBox = document.getElementById('error-box');
|
|
||||||
const loadingSection = document.getElementById('loading-section');
|
|
||||||
const loadingMsg = document.getElementById('loading-msg');
|
|
||||||
const resultsSection = document.getElementById('results-section');
|
|
||||||
|
|
||||||
// ─── Helpers ──────────────────────────────────────────────────────────────────
|
|
||||||
function showError(msg) {
|
|
||||||
errorBox.textContent = msg;
|
|
||||||
errorBox.classList.remove('hidden');
|
|
||||||
loadingSection.classList.add('hidden');
|
|
||||||
resultsSection.classList.add('hidden');
|
|
||||||
if (window._loadingHintTimer) clearTimeout(window._loadingHintTimer);
|
|
||||||
}
|
|
||||||
function hideError() { errorBox.classList.add('hidden'); }
|
|
||||||
|
|
||||||
function setLoading(msg = 'Querying RIPE Stat & PeeringDB…') {
|
|
||||||
hideError();
|
|
||||||
loadingMsg.textContent = msg;
|
|
||||||
loadingSection.classList.remove('hidden');
|
|
||||||
resultsSection.classList.add('hidden');
|
|
||||||
|
|
||||||
// After 3s show a hint that large ASes can be slow
|
|
||||||
if (window._loadingHintTimer) clearTimeout(window._loadingHintTimer);
|
|
||||||
window._loadingHintTimer = setTimeout(() => {
|
|
||||||
const hint = document.getElementById('loading-hint');
|
|
||||||
if (hint) hint.classList.remove('hidden');
|
|
||||||
}, 3000);
|
|
||||||
}
|
|
||||||
|
|
||||||
function updateUrlParam(asn) {
|
|
||||||
const url = new URL(window.location);
|
|
||||||
url.searchParams.set('asn', asn);
|
|
||||||
window.history.pushState({}, '', url);
|
|
||||||
}
|
|
||||||
|
|
||||||
// ─── Main Lookup ──────────────────────────────────────────────────────────────
|
|
||||||
async function doLookup(rawAsn) {
|
|
||||||
const asn = String(rawAsn || '').trim().toUpperCase().replace(/^AS/, '');
|
|
||||||
if (!asn || isNaN(Number(asn))) {
|
|
||||||
showError('Please enter a valid ASN (e.g. 15169 or AS3320).');
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
setLoading('Querying RIPE Stat & PeeringDB…');
|
|
||||||
updateUrlParam(asn);
|
|
||||||
|
|
||||||
try {
|
|
||||||
const res = await fetch(`${API_BASE}/asn-lookup?asn=${encodeURIComponent(asn)}`);
|
|
||||||
const data = await res.json();
|
|
||||||
|
|
||||||
if (!res.ok || !data.success) {
|
|
||||||
showError(data.error || `Request failed (HTTP ${res.status})`);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
currentData = data;
|
|
||||||
renderResults(data);
|
|
||||||
|
|
||||||
} catch (err) {
|
|
||||||
showError(`Network error: ${err.message}`);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// ─── Render ───────────────────────────────────────────────────────────────────
|
|
||||||
function renderResults(data) {
|
|
||||||
// Show results FIRST so the graph container has real dimensions (clientWidth > 0)
|
|
||||||
loadingSection.classList.add('hidden');
|
|
||||||
resultsSection.classList.remove('hidden');
|
|
||||||
// Reset loading hint for next lookup
|
|
||||||
if (window._loadingHintTimer) clearTimeout(window._loadingHintTimer);
|
|
||||||
const hint = document.getElementById('loading-hint');
|
|
||||||
if (hint) hint.classList.add('hidden');
|
|
||||||
|
|
||||||
// Header
|
|
||||||
document.getElementById('res-asn').textContent = `AS${data.asn}`;
|
|
||||||
document.getElementById('res-name').textContent = data.name || 'Unknown';
|
|
||||||
|
|
||||||
const announcedBadge = document.getElementById('res-announced-badge');
|
|
||||||
if (announcedBadge) {
|
|
||||||
if (data.announced) announcedBadge.classList.remove('hidden');
|
|
||||||
else announcedBadge.classList.add('hidden');
|
|
||||||
}
|
|
||||||
|
|
||||||
const typeBadge = document.getElementById('res-type-badge');
|
|
||||||
if (typeBadge) {
|
|
||||||
typeBadge.textContent = data.type || '';
|
|
||||||
typeBadge.classList.toggle('hidden', !data.type);
|
|
||||||
}
|
|
||||||
|
|
||||||
const peeringPolicy = data.peeringdb?.peeringPolicy;
|
|
||||||
const policyContainer = document.getElementById('res-policy-container');
|
|
||||||
const policyEl = document.getElementById('res-policy');
|
|
||||||
if (policyContainer && policyEl) {
|
|
||||||
if (peeringPolicy) {
|
|
||||||
policyEl.textContent = peeringPolicy;
|
|
||||||
policyContainer.classList.remove('hidden');
|
|
||||||
} else {
|
|
||||||
policyContainer.classList.add('hidden');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const website = data.peeringdb?.website;
|
|
||||||
const websiteContainer = document.getElementById('res-website-container');
|
|
||||||
const websiteEl = document.getElementById('res-website');
|
|
||||||
if (websiteContainer && websiteEl) {
|
|
||||||
if (website) {
|
|
||||||
websiteEl.href = website;
|
|
||||||
websiteEl.textContent = website.replace(/^https?:\/\//, '').replace(/\/$/, '');
|
|
||||||
websiteContainer.classList.remove('hidden');
|
|
||||||
} else {
|
|
||||||
websiteContainer.classList.add('hidden');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Rich Info Grid
|
|
||||||
const richInfo = document.getElementById('res-rich-info');
|
|
||||||
let hasRichInfo = false;
|
|
||||||
|
|
||||||
const fields = [
|
|
||||||
{ id: 'type', value: data.peeringdb?.infoType },
|
|
||||||
{ id: 'scope', value: data.peeringdb?.infoScope },
|
|
||||||
{ id: 'traffic', value: data.peeringdb?.infoTraffic },
|
|
||||||
{ id: 'ratio', value: data.peeringdb?.infoRatio }
|
|
||||||
];
|
|
||||||
|
|
||||||
fields.forEach(f => {
|
|
||||||
const container = document.getElementById(`res-info-${f.id}-container`);
|
|
||||||
const el = document.getElementById(`res-info-${f.id}`);
|
|
||||||
if (container && el) {
|
|
||||||
if (f.value) {
|
|
||||||
el.textContent = f.value;
|
|
||||||
container.classList.remove('hidden');
|
|
||||||
hasRichInfo = true;
|
|
||||||
} else {
|
|
||||||
container.classList.add('hidden');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
if (richInfo) {
|
|
||||||
if (hasRichInfo) richInfo.classList.remove('hidden');
|
|
||||||
else richInfo.classList.add('hidden');
|
|
||||||
}
|
|
||||||
|
|
||||||
document.getElementById('res-upstream-count').textContent = data.graph?.level2?.upstreams?.length ?? '?';
|
|
||||||
document.getElementById('res-downstream-count').textContent = data.graph?.level2?.downstreams?.length ?? '?';
|
|
||||||
document.getElementById('res-prefix-count').textContent = data.prefixes?.length ?? '?';
|
|
||||||
|
|
||||||
// Prefixes + IXPs (before graph — these are cheap)
|
|
||||||
renderPrefixes(data.prefixes);
|
|
||||||
renderIxps(data.peeringdb?.ixps);
|
|
||||||
renderNeighbourTable('upstream-table', data.graph?.level2?.upstreams ?? [], 'blue');
|
|
||||||
renderNeighbourTable('downstream-table', data.graph?.level2?.downstreams ?? [], 'green');
|
|
||||||
|
|
||||||
// Graph LAST — needs the container to be visible for clientWidth
|
|
||||||
if (data.graph) renderGraph(data.graph);
|
|
||||||
}
|
|
||||||
|
|
||||||
// ─── Prefix List ─────────────────────────────────────────────────────────────
|
|
||||||
function renderPrefixes(prefixes) {
|
|
||||||
const list = document.getElementById('prefix-list');
|
|
||||||
const empty = document.getElementById('prefix-empty');
|
|
||||||
const toggle = document.getElementById('prefix-toggle');
|
|
||||||
|
|
||||||
if (!prefixes || prefixes.length === 0) {
|
|
||||||
list?.classList.add('hidden');
|
|
||||||
empty?.classList.remove('hidden');
|
|
||||||
toggle?.classList.add('hidden');
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
empty?.classList.add('hidden');
|
|
||||||
toggle?.classList.remove('hidden');
|
|
||||||
|
|
||||||
const toShow = showAllPrefixes ? prefixes : prefixes.slice(0, 20);
|
|
||||||
if (list) list.innerHTML = toShow.map(p => `<span class="prefix-tag">${p}</span>`).join('');
|
|
||||||
if (toggle) toggle.textContent = showAllPrefixes ? 'Show less' : `Show all (${prefixes.length})`;
|
|
||||||
}
|
|
||||||
|
|
||||||
document.getElementById('prefix-toggle').addEventListener('click', () => {
|
|
||||||
showAllPrefixes = !showAllPrefixes;
|
|
||||||
if (currentData) renderPrefixes(currentData.prefixes);
|
|
||||||
});
|
|
||||||
|
|
||||||
// ─── IXP List ─────────────────────────────────────────────────────────────────
|
|
||||||
function renderIxps(ixps) {
|
|
||||||
const list = document.getElementById('ixp-list');
|
|
||||||
const empty = document.getElementById('ixp-empty');
|
|
||||||
|
|
||||||
if (!ixps || ixps.length === 0) {
|
|
||||||
if (list) list.innerHTML = '';
|
|
||||||
empty?.classList.remove('hidden');
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
empty?.classList.add('hidden');
|
|
||||||
if (list) {
|
|
||||||
list.innerHTML = ixps.map(ix => `
|
|
||||||
<div class="ixp-row py-1.5 flex items-center justify-between gap-2 text-sm">
|
|
||||||
<span class="text-gray-200 truncate">${ix.name}</span>
|
|
||||||
<span class="text-xs text-gray-500 shrink-0">${ix.speed >= 1000 ? `${ix.speed / 1000}G` : `${ix.speed}M`}</span>
|
|
||||||
</div>
|
|
||||||
`).join('');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// ─── Neighbour Table ──────────────────────────────────────────────────────────
|
|
||||||
function renderNeighbourTable(elId, nodes, colour) {
|
|
||||||
const el = document.getElementById(elId);
|
|
||||||
if (!nodes || nodes.length === 0) {
|
|
||||||
el.innerHTML = `<p class="text-gray-500 italic">None reported.</p>`;
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
const colClass = colour === 'blue' ? 'text-blue-400' : 'text-green-400';
|
|
||||||
el.innerHTML = nodes.map(n => `
|
|
||||||
<div class="flex items-center gap-2 py-0.5 hover:bg-white/5 rounded px-1 cursor-pointer group"
|
|
||||||
onclick="window.location.href='/asn?asn=${n.asn}'">
|
|
||||||
<span class="${colClass} font-bold w-14 shrink-0">AS${n.asn}</span>
|
|
||||||
<span class="text-gray-300 truncate flex-1 group-hover:text-white">${n.name || '—'}</span>
|
|
||||||
<span class="text-gray-600 shrink-0">${n.power ? `pwr:${n.power}` : ''}</span>
|
|
||||||
</div>
|
|
||||||
`).join('');
|
|
||||||
}
|
|
||||||
|
|
||||||
// ─── D3 Network Graph ─────────────────────────────────────────────────────────
|
|
||||||
function renderGraph(graph) {
|
|
||||||
const container = document.getElementById('graph-container');
|
|
||||||
const svg = d3.select('#graph-svg');
|
|
||||||
svg.selectAll('*').remove();
|
|
||||||
|
|
||||||
const W = container.clientWidth;
|
|
||||||
const H = container.clientHeight;
|
|
||||||
|
|
||||||
// ── Build nodes & links ───────────────────────────────────────────────────
|
|
||||||
const nodeMap = new Map();
|
|
||||||
|
|
||||||
function addNode(asn, name, role) {
|
|
||||||
const key = String(asn);
|
|
||||||
if (!nodeMap.has(key)) nodeMap.set(key, { id: key, asn, name: name || `AS${asn}`, role });
|
|
||||||
}
|
|
||||||
|
|
||||||
addNode(graph.center.asn, graph.center.name, 'center');
|
|
||||||
|
|
||||||
// Limit graph nodes to top 15 to prevent Physics Engine crash & unreadable hairball
|
|
||||||
const vizUpstreams = graph.level2.upstreams.slice(0, 15);
|
|
||||||
const vizDownstreams = graph.level2.downstreams.slice(0, 15);
|
|
||||||
|
|
||||||
vizUpstreams.forEach(n => addNode(n.asn, n.name, 'upstream'));
|
|
||||||
vizDownstreams.forEach(n => addNode(n.asn, n.name, 'downstream'));
|
|
||||||
graph.level3.forEach(d => {
|
|
||||||
d.upstreams.forEach(n => addNode(n.asn, n.name, 'tier1'));
|
|
||||||
});
|
|
||||||
|
|
||||||
const nodes = Array.from(nodeMap.values());
|
|
||||||
|
|
||||||
const links = [];
|
|
||||||
const centerId = String(graph.center.asn);
|
|
||||||
|
|
||||||
vizUpstreams.forEach(n => {
|
|
||||||
links.push({ source: String(n.asn), target: centerId, type: 'upstream', power: n.power || 1 });
|
|
||||||
});
|
|
||||||
vizDownstreams.forEach(n => {
|
|
||||||
links.push({ source: centerId, target: String(n.asn), type: 'downstream', power: n.power || 1 });
|
|
||||||
});
|
|
||||||
graph.level3.forEach(d => {
|
|
||||||
d.upstreams.forEach(n => {
|
|
||||||
links.push({ source: String(n.asn), target: String(d.parentAsn), type: 'tier1', power: n.power || 1 });
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
// Remove duplicate links
|
|
||||||
const uniqueLinks = Array.from(
|
|
||||||
new Map(links.map(l => [`${l.source}-${l.target}`, l])).values()
|
|
||||||
);
|
|
||||||
|
|
||||||
// ── Layer X positions (fixed horizontal layout) ────────────────────────
|
|
||||||
const layerX = { tier1: W * 0.08, upstream: W * 0.3, center: W * 0.55, downstream: W * 0.8 };
|
|
||||||
|
|
||||||
nodes.forEach(n => {
|
|
||||||
n.fx = layerX[n.role] ?? W / 2;
|
|
||||||
});
|
|
||||||
|
|
||||||
// ── Power → stroke width ──────────────────────────────────────────────
|
|
||||||
const maxPower = Math.max(...uniqueLinks.map(l => l.power), 1);
|
|
||||||
const strokeScale = d3.scaleLinear().domain([0, maxPower]).range([0.5, 4]);
|
|
||||||
|
|
||||||
// ── Node size ─────────────────────────────────────────────────────────
|
|
||||||
const nodeRadius = { center: 20, upstream: 11, downstream: 11, tier1: 8 };
|
|
||||||
|
|
||||||
// ── Simulation ────────────────────────────────────────────────────────
|
|
||||||
const sim = d3.forceSimulation(nodes)
|
|
||||||
.force('link', d3.forceLink(uniqueLinks).id(d => d.id).distance(d => {
|
|
||||||
if (d.type === 'tier1') return 90;
|
|
||||||
if (d.type === 'upstream') return 130;
|
|
||||||
return 110;
|
|
||||||
}).strength(0.6))
|
|
||||||
.force('charge', d3.forceManyBody().strength(-220))
|
|
||||||
.force('y', d3.forceY(H / 2).strength(0.04))
|
|
||||||
.force('collide', d3.forceCollide().radius(d => nodeRadius[d.role] + 14))
|
|
||||||
.alphaDecay(0.025);
|
|
||||||
|
|
||||||
// ── Zoom/Pan ──────────────────────────────────────────────────────────
|
|
||||||
const g = svg.append('g');
|
|
||||||
svg.call(d3.zoom().scaleExtent([0.3, 3]).on('zoom', evt => g.attr('transform', evt.transform)));
|
|
||||||
|
|
||||||
// ── Draw links ────────────────────────────────────────────────────────
|
|
||||||
const link = g.append('g').selectAll('line')
|
|
||||||
.data(uniqueLinks).join('line')
|
|
||||||
.attr('class', d => `link link-${d.type}`)
|
|
||||||
.attr('stroke-width', d => strokeScale(d.power));
|
|
||||||
|
|
||||||
// ── Draw nodes ────────────────────────────────────────────────────────
|
|
||||||
const tooltip = document.getElementById('graph-tooltip');
|
|
||||||
|
|
||||||
const node = g.append('g').selectAll('g')
|
|
||||||
.data(nodes).join('g')
|
|
||||||
.attr('class', d => `node node-${d.role}`)
|
|
||||||
.style('cursor', 'pointer')
|
|
||||||
.on('click', (_, d) => {
|
|
||||||
if (d.role !== 'center') window.location.href = `/asn?asn=${d.asn}`;
|
|
||||||
})
|
|
||||||
.on('mouseenter', (evt, d) => {
|
|
||||||
tooltip.style.opacity = '1';
|
|
||||||
tooltip.innerHTML = `
|
|
||||||
<strong class="text-purple-300">AS${d.asn}</strong><br>
|
|
||||||
<span class="text-gray-300">${d.name}</span><br>
|
|
||||||
<span class="text-gray-500 text-xs capitalize">${d.role === 'tier1' ? 'Tier-1 / Transit' : d.role}</span>
|
|
||||||
`;
|
|
||||||
})
|
|
||||||
.on('mousemove', (evt) => {
|
|
||||||
const rect = container.getBoundingClientRect();
|
|
||||||
let x = evt.clientX - rect.left + 14;
|
|
||||||
let y = evt.clientY - rect.top - 10;
|
|
||||||
if (x + 230 > W) x = x - 244;
|
|
||||||
tooltip.style.left = x + 'px';
|
|
||||||
tooltip.style.top = y + 'px';
|
|
||||||
})
|
|
||||||
.on('mouseleave', () => { tooltip.style.opacity = '0'; })
|
|
||||||
.call(d3.drag()
|
|
||||||
.on('start', (evt, d) => { if (!evt.active) sim.alphaTarget(0.3).restart(); d.fy = d.y; })
|
|
||||||
.on('drag', (evt, d) => { d.fy = evt.y; })
|
|
||||||
.on('end', (evt, d) => { if (!evt.active) sim.alphaTarget(0); d.fy = null; })
|
|
||||||
);
|
|
||||||
|
|
||||||
node.append('circle').attr('r', d => nodeRadius[d.role]);
|
|
||||||
|
|
||||||
// Label: 2 lines (ASN + name truncated)
|
|
||||||
node.append('text')
|
|
||||||
.attr('dy', d => nodeRadius[d.role] + 13)
|
|
||||||
.attr('font-size', d => d.role === 'center' ? 12 : 9)
|
|
||||||
.attr('fill', '#e5e7eb')
|
|
||||||
.text(d => `AS${d.asn}`);
|
|
||||||
|
|
||||||
// Name label for ALL roles (tier1 gets shorter truncation)
|
|
||||||
node.append('text')
|
|
||||||
.attr('dy', d => nodeRadius[d.role] + 23)
|
|
||||||
.attr('font-size', d => d.role === 'tier1' ? 7 : 8)
|
|
||||||
.attr('fill', d => d.role === 'tier1' ? '#6b7280' : '#9ca3af')
|
|
||||||
.text(d => {
|
|
||||||
if (!d.name) return '';
|
|
||||||
const max = d.role === 'center' ? 22 : d.role === 'tier1' ? 12 : 16;
|
|
||||||
return d.name.length > max ? d.name.slice(0, max) + '…' : d.name;
|
|
||||||
});
|
|
||||||
|
|
||||||
// ── Tick ──────────────────────────────────────────────────────────────
|
|
||||||
sim.on('tick', () => {
|
|
||||||
// Clamp Y so nodes don't fly off
|
|
||||||
nodes.forEach(n => { n.y = Math.max(30, Math.min(H - 30, n.y)); });
|
|
||||||
|
|
||||||
link
|
|
||||||
.attr('x1', d => d.source.x)
|
|
||||||
.attr('y1', d => d.source.y)
|
|
||||||
.attr('x2', d => d.target.x)
|
|
||||||
.attr('y2', d => d.target.y);
|
|
||||||
|
|
||||||
node.attr('transform', d => `translate(${d.x},${d.y})`);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
// ─── Initialise ───────────────────────────────────────────────────────────────
|
|
||||||
lookupButton.addEventListener('click', () => doLookup(asnInput.value));
|
|
||||||
asnInput.addEventListener('keypress', e => { if (e.key === 'Enter') doLookup(asnInput.value); });
|
|
||||||
|
|
||||||
// Auto-lookup from URL
|
|
||||||
const urlParam = new URLSearchParams(window.location.search).get('asn');
|
|
||||||
if (urlParam) {
|
|
||||||
asnInput.value = urlParam;
|
|
||||||
doLookup(urlParam);
|
|
||||||
}
|
|
||||||
@@ -1,252 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html lang="de">
|
|
||||||
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
||||||
<title>DNS Lookup - uTools</title>
|
|
||||||
<!-- Tailwind CSS Play CDN -->
|
|
||||||
<script src="https://cdn.tailwindcss.com"></script>
|
|
||||||
<!-- Eigene Styles -->
|
|
||||||
<style>
|
|
||||||
/* Einfacher Lade-Spinner (Tailwind animiert) */
|
|
||||||
.loader {
|
|
||||||
border: 4px solid rgba(168, 85, 247, 0.1);
|
|
||||||
/* Lila sehr transparent */
|
|
||||||
border-left-color: #d8b4fe;
|
|
||||||
/* Helleres Lila */
|
|
||||||
border-radius: 50%;
|
|
||||||
width: 24px;
|
|
||||||
height: 24px;
|
|
||||||
animation: spin 1s linear infinite;
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes spin {
|
|
||||||
to {
|
|
||||||
transform: rotate(360deg);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Glassmorphism Utilities */
|
|
||||||
.glass-panel {
|
|
||||||
background: rgba(17, 24, 39, 0.7);
|
|
||||||
backdrop-filter: blur(12px);
|
|
||||||
-webkit-backdrop-filter: blur(12px);
|
|
||||||
border: 1px solid rgba(255, 255, 255, 0.05);
|
|
||||||
}
|
|
||||||
|
|
||||||
.glass-card {
|
|
||||||
background: rgba(31, 41, 55, 0.6);
|
|
||||||
backdrop-filter: blur(8px);
|
|
||||||
-webkit-backdrop-filter: blur(8px);
|
|
||||||
border: 1px solid rgba(255, 255, 255, 0.05);
|
|
||||||
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.glass-card:hover {
|
|
||||||
transform: translateY(-2px);
|
|
||||||
box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.5);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Animations */
|
|
||||||
@keyframes fadeIn {
|
|
||||||
from {
|
|
||||||
opacity: 0;
|
|
||||||
transform: translateY(10px);
|
|
||||||
}
|
|
||||||
|
|
||||||
to {
|
|
||||||
opacity: 1;
|
|
||||||
transform: translateY(0);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.fade-in {
|
|
||||||
animation: fadeIn 0.5s ease-out forwards;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Ergebnis-Pre-Formatierung */
|
|
||||||
.result-pre {
|
|
||||||
white-space: pre-wrap;
|
|
||||||
word-break: break-all;
|
|
||||||
font-family: 'Courier New', Courier, monospace;
|
|
||||||
background-color: rgba(0, 0, 0, 0.3);
|
|
||||||
color: #e5e7eb;
|
|
||||||
padding: 1rem;
|
|
||||||
border-radius: 0.375rem;
|
|
||||||
max-height: 400px;
|
|
||||||
overflow-y: auto;
|
|
||||||
font-size: 0.875rem;
|
|
||||||
border: 1px solid rgba(255, 255, 255, 0.05);
|
|
||||||
box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.3);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Scrollbar Styling */
|
|
||||||
::-webkit-scrollbar {
|
|
||||||
width: 8px;
|
|
||||||
height: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
::-webkit-scrollbar-track {
|
|
||||||
background: rgba(31, 41, 55, 0.5);
|
|
||||||
}
|
|
||||||
|
|
||||||
::-webkit-scrollbar-thumb {
|
|
||||||
background: #4b5563;
|
|
||||||
border-radius: 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
::-webkit-scrollbar-thumb:hover {
|
|
||||||
background: #6b7280;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Navigations-Styling */
|
|
||||||
nav ul {
|
|
||||||
list-style: none;
|
|
||||||
padding: 0;
|
|
||||||
margin: 0;
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
gap: 0.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
nav a {
|
|
||||||
color: #d1d5db;
|
|
||||||
text-decoration: none;
|
|
||||||
padding: 0.5rem 1rem;
|
|
||||||
border-radius: 0.5rem;
|
|
||||||
transition: all 0.2s ease;
|
|
||||||
position: relative;
|
|
||||||
overflow: hidden;
|
|
||||||
background: rgba(255, 255, 255, 0.03);
|
|
||||||
border: 1px solid rgba(255, 255, 255, 0.05);
|
|
||||||
}
|
|
||||||
|
|
||||||
nav a:hover {
|
|
||||||
color: #fff;
|
|
||||||
background: rgba(168, 85, 247, 0.2);
|
|
||||||
border-color: rgba(168, 85, 247, 0.4);
|
|
||||||
box-shadow: 0 0 15px rgba(168, 85, 247, 0.1);
|
|
||||||
}
|
|
||||||
|
|
||||||
nav a.active-link {
|
|
||||||
background: rgba(168, 85, 247, 0.3);
|
|
||||||
color: #fff;
|
|
||||||
border-color: #a855f7;
|
|
||||||
}
|
|
||||||
|
|
||||||
header {
|
|
||||||
background: rgba(31, 41, 55, 0.4);
|
|
||||||
backdrop-filter: blur(10px);
|
|
||||||
padding: 1.5rem;
|
|
||||||
margin-bottom: 2rem;
|
|
||||||
border-radius: 1rem;
|
|
||||||
border: 1px solid rgba(255, 255, 255, 0.05);
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
gap: 1rem;
|
|
||||||
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (min-width: 768px) {
|
|
||||||
header {
|
|
||||||
flex-direction: row;
|
|
||||||
justify-content: space-between;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
header h1 {
|
|
||||||
background-clip: text;
|
|
||||||
}
|
|
||||||
|
|
||||||
.text-gradient {
|
|
||||||
background: linear-gradient(to right, #c084fc, #e879f9);
|
|
||||||
-webkit-background-clip: text;
|
|
||||||
background-clip: text;
|
|
||||||
-webkit-text-fill-color: transparent;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hidden {
|
|
||||||
display: none !important;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
</head>
|
|
||||||
|
|
||||||
<body
|
|
||||||
class="bg-gray-950 text-gray-100 font-sans p-4 md:p-8 min-h-screen bg-[url('https://tailwindcss.com/_next/static/media/hero-dark.939eb757.png')] bg-cover bg-center bg-fixed selection:bg-purple-500 selection:text-white">
|
|
||||||
|
|
||||||
<header class="glass-panel">
|
|
||||||
<h1>uTools <span class="text-sm font-normal text-gray-400 opacity-75 tracking-wider uppercase ml-2">Network
|
|
||||||
Suite</span></h1>
|
|
||||||
<nav>
|
|
||||||
<ul>
|
|
||||||
<li><a href="/">IP Info & Tools</a></li>
|
|
||||||
<li><a href="/subnet">Subnetz Rechner</a></li>
|
|
||||||
<li><a href="/dns" class="active-link">DNS Lookup</a></li>
|
|
||||||
<li><a href="/whois">WHOIS Lookup</a></li>
|
|
||||||
<li><a href="/mac">MAC Lookup</a></li>
|
|
||||||
<li><a href="/asn">ASN Lookup</a></li>
|
|
||||||
</ul>
|
|
||||||
</nav>
|
|
||||||
</header>
|
|
||||||
|
|
||||||
<div
|
|
||||||
class="container mx-auto max-w-5xl glass-panel rounded-xl shadow-2xl p-6 md:p-8 backdrop-blur-xl border border-gray-800/50">
|
|
||||||
|
|
||||||
<h1 class="text-3xl font-bold mb-8 text-center text-gradient glitch-text">DNS Lookup</h1>
|
|
||||||
|
|
||||||
<!-- Bereich für DNS Lookup -->
|
|
||||||
<div class="mt-8 p-6 glass-card rounded-xl">
|
|
||||||
<div class="flex flex-col sm:flex-row gap-3 mb-6">
|
|
||||||
<input type="text" id="dns-domain-input" placeholder="Enter domain name (e.g., google.com)"
|
|
||||||
class="flex-grow px-4 py-3 bg-gray-900/50 border border-gray-700/50 rounded-lg text-gray-200 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent font-mono transition-all placeholder-gray-600">
|
|
||||||
<select id="dns-type-select"
|
|
||||||
class="px-4 py-3 bg-gray-900/50 border border-gray-700/50 rounded-lg text-gray-200 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent cursor-pointer">
|
|
||||||
<option value="ANY">ANY</option>
|
|
||||||
<option value="A">A</option>
|
|
||||||
<option value="AAAA">AAAA</option>
|
|
||||||
<option value="MX">MX</option>
|
|
||||||
<option value="TXT">TXT</option>
|
|
||||||
<option value="NS">NS</option>
|
|
||||||
<option value="CNAME">CNAME</option>
|
|
||||||
<option value="SOA">SOA</option>
|
|
||||||
<option value="SRV">SRV</option>
|
|
||||||
<option value="PTR">PTR (Reverse)</option>
|
|
||||||
</select>
|
|
||||||
<button id="dns-lookup-button"
|
|
||||||
class="bg-gradient-to-r from-purple-600 to-pink-600 hover:from-purple-500 hover:to-pink-500 text-white font-bold py-3 px-6 rounded-lg shadow-lg hover:shadow-purple-500/25 transition-all duration-200 ease-in-out transform hover:-translate-y-0.5">
|
|
||||||
Lookup DNS
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
<div id="dns-lookup-error"
|
|
||||||
class="text-red-400 mb-4 hidden p-3 bg-red-900/20 border border-red-500/30 rounded"></div>
|
|
||||||
<div id="dns-lookup-results-section" class="hidden mt-6 border-t border-gray-700/50 pt-6 fade-in">
|
|
||||||
<h3 class="text-lg font-semibold text-purple-300 mb-4 flex items-center gap-2">
|
|
||||||
<div class="w-1.5 h-6 bg-purple-500 rounded-full"></div>
|
|
||||||
DNS Results for: <span id="dns-lookup-query" class="font-mono text-purple-400 ml-1"></span>
|
|
||||||
</h3>
|
|
||||||
<div id="dns-lookup-loader" class="loader hidden mb-4"></div>
|
|
||||||
<pre id="dns-lookup-output" class="result-pre custom-scrollbar"></pre> <!-- Ergebnisbereich -->
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Globaler Fehlerbereich -->
|
|
||||||
<div id="global-error"
|
|
||||||
class="mt-6 p-4 bg-red-900/50 border border-red-500/50 text-red-100 rounded-lg hidden backdrop-blur shadow-lg">
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Footer für Version -->
|
|
||||||
<footer class="mt-12 pt-6 border-t border-gray-700/30 text-center text-xs text-gray-500">
|
|
||||||
<p>© 2025 <a href="https://mrunk.de"
|
|
||||||
class="text-purple-400 hover:text-purple-300 transition-colors">MrUnknownDE</a></p>
|
|
||||||
<p class="mt-1">Version: <span id="commit-sha" class="font-mono text-gray-400">loading...</span></p>
|
|
||||||
</footer>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Eigene JS-Logik für diese Seite -->
|
|
||||||
<script src="dns-lookup.js"></script>
|
|
||||||
</body>
|
|
||||||
|
|
||||||
</html>
|
|
||||||
@@ -1,188 +0,0 @@
|
|||||||
// frontend/dns-lookup.js
|
|
||||||
document.addEventListener('DOMContentLoaded', () => {
|
|
||||||
// --- DOM Elements (DNS Lookup) ---
|
|
||||||
const dnsDomainInput = document.getElementById('dns-domain-input');
|
|
||||||
const dnsTypeSelect = document.getElementById('dns-type-select');
|
|
||||||
const dnsLookupButton = document.getElementById('dns-lookup-button');
|
|
||||||
const dnsLookupErrorEl = document.getElementById('dns-lookup-error');
|
|
||||||
const dnsLookupResultsSection = document.getElementById('dns-lookup-results-section');
|
|
||||||
const dnsLookupQueryEl = document.getElementById('dns-lookup-query');
|
|
||||||
const dnsLookupLoader = document.getElementById('dns-lookup-loader');
|
|
||||||
const dnsLookupOutputEl = document.getElementById('dns-lookup-output');
|
|
||||||
|
|
||||||
// --- DOM Elements (Common) ---
|
|
||||||
const globalErrorEl = document.getElementById('global-error');
|
|
||||||
const commitShaEl = document.getElementById('commit-sha');
|
|
||||||
|
|
||||||
// --- Configuration ---
|
|
||||||
const API_BASE_URL = '/api'; // Anpassen, falls nötig
|
|
||||||
|
|
||||||
// --- Helper Functions ---
|
|
||||||
|
|
||||||
/** Zeigt globale Fehler an */
|
|
||||||
function showGlobalError(message) {
|
|
||||||
if (!globalErrorEl) return;
|
|
||||||
globalErrorEl.textContent = `Error: ${message}`;
|
|
||||||
globalErrorEl.classList.remove('hidden');
|
|
||||||
}
|
|
||||||
|
|
||||||
/** Versteckt globale Fehler */
|
|
||||||
function hideGlobalError() {
|
|
||||||
if (!globalErrorEl) return;
|
|
||||||
globalErrorEl.classList.add('hidden');
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Generische Funktion zum Abrufen und Anzeigen von Lookup-Ergebnissen.
|
|
||||||
* @param {string} endpoint - Der API-Endpunkt (z.B. '/dns-lookup').
|
|
||||||
* @param {object} params - Query-Parameter als Objekt (z.B. { domain: '...', type: '...' }).
|
|
||||||
* @param {HTMLElement} resultsSection - Der Container für die Ergebnisse.
|
|
||||||
* @param {HTMLElement} loaderElement - Das Loader-Element.
|
|
||||||
* @param {HTMLElement} errorElement - Das Fehleranzeige-Element für diesen Lookup.
|
|
||||||
* @param {HTMLElement} queryElement - Das Element zur Anzeige der Suchanfrage.
|
|
||||||
* @param {HTMLElement} outputElement - Das Element zur Anzeige der Ergebnisse (<pre> oder <p>).
|
|
||||||
* @param {function} displayFn - Funktion zur Formatierung und Anzeige der Daten im outputElement.
|
|
||||||
*/
|
|
||||||
async function fetchAndDisplay(endpoint, params, resultsSection, loaderElement, errorElement, queryElement, outputElement, displayFn) {
|
|
||||||
// Reset animation
|
|
||||||
resultsSection.classList.remove('fade-in');
|
|
||||||
void resultsSection.offsetWidth; // Trigger reflow
|
|
||||||
resultsSection.classList.add('fade-in');
|
|
||||||
|
|
||||||
resultsSection.classList.remove('hidden');
|
|
||||||
loaderElement.classList.remove('hidden');
|
|
||||||
errorElement.classList.add('hidden');
|
|
||||||
outputElement.textContent = ''; // Clear previous results
|
|
||||||
if (queryElement) queryElement.textContent = Object.values(params).join(', '); // Display query
|
|
||||||
hideGlobalError(); // Hide global errors before new request
|
|
||||||
|
|
||||||
const urlParams = new URLSearchParams(params);
|
|
||||||
const url = `${API_BASE_URL}${endpoint}?${urlParams.toString()}`;
|
|
||||||
|
|
||||||
try {
|
|
||||||
const response = await fetch(url);
|
|
||||||
const data = await response.json();
|
|
||||||
|
|
||||||
if (!response.ok || !data.success) {
|
|
||||||
throw new Error(data.error || `Request failed with status ${response.status}`);
|
|
||||||
}
|
|
||||||
|
|
||||||
console.log(`Received ${endpoint} data:`, data);
|
|
||||||
displayFn(data, outputElement); // Call the specific display function
|
|
||||||
|
|
||||||
} catch (error) {
|
|
||||||
console.error(`Failed to fetch ${endpoint}:`, error);
|
|
||||||
errorElement.textContent = `Error: ${error.message}`;
|
|
||||||
errorElement.classList.remove('hidden');
|
|
||||||
outputElement.textContent = ''; // Clear output on error
|
|
||||||
} finally {
|
|
||||||
loaderElement.classList.add('hidden');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/** Ruft die Versionsinformationen (Commit SHA) ab */
|
|
||||||
async function fetchVersionInfo() {
|
|
||||||
if (!commitShaEl) return; // Don't fetch if element doesn't exist
|
|
||||||
try {
|
|
||||||
const response = await fetch(`${API_BASE_URL}/version`);
|
|
||||||
if (!response.ok) throw new Error(`Network response: ${response.statusText} (${response.status})`);
|
|
||||||
const data = await response.json();
|
|
||||||
commitShaEl.textContent = data.commitSha || 'unknown';
|
|
||||||
} catch (error) {
|
|
||||||
console.error('Failed to fetch version info:', error);
|
|
||||||
commitShaEl.textContent = 'error';
|
|
||||||
// Optionally show global error
|
|
||||||
// showGlobalError(`Could not load version info: ${error.message}`);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// --- URL Parameter Functions ---
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Updates the URL with DNS lookup parameters
|
|
||||||
* @param {string} domain - The domain name
|
|
||||||
* @param {string} type - The DNS record type
|
|
||||||
*/
|
|
||||||
function updateUrlParams(domain, type) {
|
|
||||||
const url = new URL(window.location);
|
|
||||||
url.searchParams.set('domain', domain);
|
|
||||||
url.searchParams.set('type', type);
|
|
||||||
window.history.pushState({}, '', url);
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Reads URL parameters and returns domain and type if present
|
|
||||||
* @returns {object|null} Object with domain and type, or null if not present
|
|
||||||
*/
|
|
||||||
function getUrlParams() {
|
|
||||||
const urlParams = new URLSearchParams(window.location.search);
|
|
||||||
const domain = urlParams.get('domain');
|
|
||||||
const type = urlParams.get('type');
|
|
||||||
|
|
||||||
if (domain && type) {
|
|
||||||
return { domain, type };
|
|
||||||
}
|
|
||||||
return null;
|
|
||||||
}
|
|
||||||
|
|
||||||
// --- DNS Lookup Specific Functions ---
|
|
||||||
function displayDnsResults(data, outputEl) {
|
|
||||||
if (!data.records || Object.keys(data.records).length === 0) {
|
|
||||||
outputEl.textContent = 'No records found for this domain and type.';
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
// Format output as JSON string for simplicity
|
|
||||||
outputEl.textContent = JSON.stringify(data.records, null, 2);
|
|
||||||
}
|
|
||||||
|
|
||||||
function handleDnsLookupClick() {
|
|
||||||
const domain = dnsDomainInput.value.trim();
|
|
||||||
const type = dnsTypeSelect.value;
|
|
||||||
if (!domain) {
|
|
||||||
dnsLookupErrorEl.textContent = 'Please enter a domain name.';
|
|
||||||
dnsLookupErrorEl.classList.remove('hidden');
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Update URL with parameters
|
|
||||||
updateUrlParams(domain, type);
|
|
||||||
|
|
||||||
fetchAndDisplay(
|
|
||||||
'/dns-lookup',
|
|
||||||
{ domain, type },
|
|
||||||
dnsLookupResultsSection,
|
|
||||||
dnsLookupLoader,
|
|
||||||
dnsLookupErrorEl,
|
|
||||||
dnsLookupQueryEl,
|
|
||||||
dnsLookupOutputEl,
|
|
||||||
displayDnsResults
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Executes DNS lookup from URL parameters if they exist
|
|
||||||
*/
|
|
||||||
function executeLookupFromUrl() {
|
|
||||||
const params = getUrlParams();
|
|
||||||
if (params) {
|
|
||||||
// Populate the input fields
|
|
||||||
dnsDomainInput.value = params.domain;
|
|
||||||
dnsTypeSelect.value = params.type;
|
|
||||||
|
|
||||||
// Trigger the lookup
|
|
||||||
handleDnsLookupClick();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// --- Initial Load & Event Listeners ---
|
|
||||||
fetchVersionInfo(); // Lade Versionsinfo für Footer
|
|
||||||
|
|
||||||
dnsLookupButton.addEventListener('click', handleDnsLookupClick);
|
|
||||||
dnsDomainInput.addEventListener('keypress', (event) => {
|
|
||||||
if (event.key === 'Enter') handleDnsLookupClick();
|
|
||||||
});
|
|
||||||
|
|
||||||
// Execute lookup from URL parameters if present
|
|
||||||
executeLookupFromUrl();
|
|
||||||
|
|
||||||
}); // End DOMContentLoaded
|
|
||||||
+15
-552
@@ -1,307 +1,23 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="de">
|
<html lang="de">
|
||||||
|
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<title>IP Info & Network Tools - uTools</title> <!-- Titel angepasst -->
|
<title>uTools – Network Suite</title>
|
||||||
<!-- Tailwind CSS Play CDN -->
|
|
||||||
<script src="https://cdn.tailwindcss.com"></script>
|
<script src="https://cdn.tailwindcss.com"></script>
|
||||||
<!-- Leaflet CSS -->
|
|
||||||
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
|
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
|
||||||
integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" crossorigin="" />
|
integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" crossorigin="">
|
||||||
<!-- Eigene Styles -->
|
<link rel="stylesheet" href="shared.css">
|
||||||
<style>
|
|
||||||
/* Container für Karten müssen eine Höhe haben */
|
|
||||||
#map {
|
|
||||||
height: 300px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#lookup-map {
|
|
||||||
height: 250px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Höhe für Lookup-Karte */
|
|
||||||
|
|
||||||
/* Einfacher Lade-Spinner (Tailwind animiert) */
|
|
||||||
.loader {
|
|
||||||
border: 4px solid rgba(168, 85, 247, 0.1);
|
|
||||||
/* Lila sehr transparent */
|
|
||||||
border-left-color: #d8b4fe;
|
|
||||||
/* Helleres Lila */
|
|
||||||
border-radius: 50%;
|
|
||||||
width: 24px;
|
|
||||||
height: 24px;
|
|
||||||
animation: spin 1s linear infinite;
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes spin {
|
|
||||||
to {
|
|
||||||
transform: rotate(360deg);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Glassmorphism Utilities */
|
|
||||||
.glass-panel {
|
|
||||||
background: rgba(17, 24, 39, 0.7);
|
|
||||||
/* gray-900 mit Opacity */
|
|
||||||
backdrop-filter: blur(12px);
|
|
||||||
-webkit-backdrop-filter: blur(12px);
|
|
||||||
border: 1px solid rgba(255, 255, 255, 0.05);
|
|
||||||
}
|
|
||||||
|
|
||||||
.glass-card {
|
|
||||||
background: rgba(31, 41, 55, 0.6);
|
|
||||||
/* gray-800 mit Opacity */
|
|
||||||
backdrop-filter: blur(8px);
|
|
||||||
-webkit-backdrop-filter: blur(8px);
|
|
||||||
border: 1px solid rgba(255, 255, 255, 0.05);
|
|
||||||
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.glass-card:hover {
|
|
||||||
transform: translateY(-2px);
|
|
||||||
box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.5);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Animations */
|
|
||||||
@keyframes fadeIn {
|
|
||||||
from {
|
|
||||||
opacity: 0;
|
|
||||||
transform: translateY(10px);
|
|
||||||
}
|
|
||||||
|
|
||||||
to {
|
|
||||||
opacity: 1;
|
|
||||||
transform: translateY(0);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.fade-in {
|
|
||||||
animation: fadeIn 0.5s ease-out forwards;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Basis für Glitch-Effekt (Beispiel: Text-Schatten) */
|
|
||||||
.glitch-text:hover {
|
|
||||||
text-shadow:
|
|
||||||
2px 2px 0px rgba(168, 85, 247, 0.4),
|
|
||||||
-2px -2px 0px rgba(236, 72, 153, 0.4);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Klickbarer IP-Cursor und Link-Styling */
|
|
||||||
#ip-address-link {
|
|
||||||
cursor: pointer;
|
|
||||||
text-decoration: none;
|
|
||||||
position: relative;
|
|
||||||
display: inline-block;
|
|
||||||
transition: color 0.3s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
#ip-address-link::after {
|
|
||||||
content: '';
|
|
||||||
position: absolute;
|
|
||||||
width: 100%;
|
|
||||||
transform: scaleX(0);
|
|
||||||
height: 2px;
|
|
||||||
bottom: 0;
|
|
||||||
left: 0;
|
|
||||||
background-color: #d8b4fe;
|
|
||||||
transform-origin: bottom right;
|
|
||||||
transition: transform 0.25s ease-out;
|
|
||||||
}
|
|
||||||
|
|
||||||
#ip-address-link:hover::after {
|
|
||||||
transform: scaleX(1);
|
|
||||||
transform-origin: bottom left;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Traceroute Output Formatierung */
|
|
||||||
#traceroute-output pre,
|
|
||||||
.result-pre {
|
|
||||||
white-space: pre-wrap;
|
|
||||||
word-break: break-all;
|
|
||||||
font-family: 'Courier New', Courier, monospace;
|
|
||||||
/* Mehr Terminal-Feeling */
|
|
||||||
background-color: rgba(0, 0, 0, 0.3);
|
|
||||||
/* Transparenter */
|
|
||||||
color: #e5e7eb;
|
|
||||||
padding: 1rem;
|
|
||||||
border-radius: 0.375rem;
|
|
||||||
max-height: 400px;
|
|
||||||
overflow-y: auto;
|
|
||||||
font-size: 0.875rem;
|
|
||||||
border: 1px solid rgba(255, 255, 255, 0.05);
|
|
||||||
box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.3);
|
|
||||||
}
|
|
||||||
|
|
||||||
#traceroute-output .hop-line {
|
|
||||||
margin-bottom: 0.25rem;
|
|
||||||
padding-left: 0.5rem;
|
|
||||||
border-left: 2px solid transparent;
|
|
||||||
transition: border-left-color 0.3s;
|
|
||||||
}
|
|
||||||
|
|
||||||
#traceroute-output .hop-line:hover {
|
|
||||||
border-left-color: #a855f7;
|
|
||||||
background: rgba(255, 255, 255, 0.02);
|
|
||||||
}
|
|
||||||
|
|
||||||
#traceroute-output .hop-number {
|
|
||||||
display: inline-block;
|
|
||||||
width: 30px;
|
|
||||||
text-align: right;
|
|
||||||
margin-right: 15px;
|
|
||||||
color: #6b7280;
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
|
|
||||||
#traceroute-output .hop-ip {
|
|
||||||
color: #60a5fa;
|
|
||||||
font-weight: 500;
|
|
||||||
}
|
|
||||||
|
|
||||||
#traceroute-output .hop-hostname {
|
|
||||||
color: #c084fc;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Helleres Lila */
|
|
||||||
#traceroute-output .hop-rtt {
|
|
||||||
color: #34d399;
|
|
||||||
margin-left: 8px;
|
|
||||||
font-size: 0.85em;
|
|
||||||
}
|
|
||||||
|
|
||||||
#traceroute-output .hop-timeout {
|
|
||||||
color: #f87171;
|
|
||||||
}
|
|
||||||
|
|
||||||
#traceroute-output .info-line {
|
|
||||||
color: #fbbf24;
|
|
||||||
font-style: italic;
|
|
||||||
}
|
|
||||||
|
|
||||||
#traceroute-output .error-line {
|
|
||||||
color: #f87171;
|
|
||||||
font-weight: bold;
|
|
||||||
border-left: 3px solid #f87171;
|
|
||||||
padding-left: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#traceroute-output .end-line {
|
|
||||||
color: #d8b4fe;
|
|
||||||
font-weight: bold;
|
|
||||||
margin-top: 15px;
|
|
||||||
text-transform: uppercase;
|
|
||||||
letter-spacing: 0.05em;
|
|
||||||
border-top: 1px solid rgba(255, 255, 255, 0.1);
|
|
||||||
padding-top: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Scrollbar Styling */
|
|
||||||
::-webkit-scrollbar {
|
|
||||||
width: 8px;
|
|
||||||
height: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
::-webkit-scrollbar-track {
|
|
||||||
background: rgba(31, 41, 55, 0.5);
|
|
||||||
}
|
|
||||||
|
|
||||||
::-webkit-scrollbar-thumb {
|
|
||||||
background: #4b5563;
|
|
||||||
border-radius: 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
::-webkit-scrollbar-thumb:hover {
|
|
||||||
background: #6b7280;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Navigations-Styling */
|
|
||||||
nav ul {
|
|
||||||
list-style: none;
|
|
||||||
padding: 0;
|
|
||||||
margin: 0;
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
gap: 0.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
nav a {
|
|
||||||
color: #d1d5db;
|
|
||||||
text-decoration: none;
|
|
||||||
padding: 0.5rem 1rem;
|
|
||||||
border-radius: 0.5rem;
|
|
||||||
transition: all 0.2s ease;
|
|
||||||
position: relative;
|
|
||||||
overflow: hidden;
|
|
||||||
background: rgba(255, 255, 255, 0.03);
|
|
||||||
border: 1px solid rgba(255, 255, 255, 0.05);
|
|
||||||
}
|
|
||||||
|
|
||||||
nav a:hover {
|
|
||||||
color: #fff;
|
|
||||||
background: rgba(168, 85, 247, 0.2);
|
|
||||||
/* Purple tint */
|
|
||||||
border-color: rgba(168, 85, 247, 0.4);
|
|
||||||
box-shadow: 0 0 15px rgba(168, 85, 247, 0.1);
|
|
||||||
}
|
|
||||||
|
|
||||||
nav a.active-link {
|
|
||||||
/* Optional active state */
|
|
||||||
background: rgba(168, 85, 247, 0.3);
|
|
||||||
color: #fff;
|
|
||||||
border-color: #a855f7;
|
|
||||||
}
|
|
||||||
|
|
||||||
header {
|
|
||||||
background: rgba(31, 41, 55, 0.4);
|
|
||||||
/* Sehr transparent */
|
|
||||||
backdrop-filter: blur(10px);
|
|
||||||
padding: 1.5rem;
|
|
||||||
margin-bottom: 2rem;
|
|
||||||
border-radius: 1rem;
|
|
||||||
border: 1px solid rgba(255, 255, 255, 0.05);
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
gap: 1rem;
|
|
||||||
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (min-width: 768px) {
|
|
||||||
header {
|
|
||||||
flex-direction: row;
|
|
||||||
justify-content: space-between;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Standard property for compatibility */
|
|
||||||
header h1 {
|
|
||||||
background-clip: text;
|
|
||||||
}
|
|
||||||
|
|
||||||
.text-gradient {
|
|
||||||
background: linear-gradient(to right, #c084fc, #e879f9);
|
|
||||||
-webkit-background-clip: text;
|
|
||||||
background-clip: text;
|
|
||||||
-webkit-text-fill-color: transparent;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hidden {
|
|
||||||
display: none !important;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
</head>
|
</head>
|
||||||
|
<body class="bg-gray-950 text-gray-100 font-sans p-4 md:p-8 min-h-screen bg-[url('https://tailwindcss.com/_next/static/media/hero-dark.939eb757.png')] bg-cover bg-center bg-fixed selection:bg-purple-500 selection:text-white">
|
||||||
<body
|
|
||||||
class="bg-gray-950 text-gray-100 font-sans p-4 md:p-8 min-h-screen bg-[url('https://tailwindcss.com/_next/static/media/hero-dark.939eb757.png')] bg-cover bg-center bg-fixed selection:bg-purple-500 selection:text-white">
|
|
||||||
|
|
||||||
<header class="glass-panel">
|
<header class="glass-panel">
|
||||||
<h1>uTools <span class="text-sm font-normal text-gray-400 opacity-75 tracking-wider uppercase ml-2">Network
|
<h1 style="background:linear-gradient(to right,#c084fc,#e879f9);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent" class="text-2xl font-bold">
|
||||||
Suite</span></h1>
|
uTools <span style="-webkit-text-fill-color:#9ca3af" class="text-sm font-normal tracking-wider uppercase ml-2">Network Suite</span>
|
||||||
|
</h1>
|
||||||
<nav>
|
<nav>
|
||||||
<ul>
|
<ul>
|
||||||
<li><a href="/" class="active-link">IP Info & Tools</a></li>
|
<li><a href="/">IP Info & Tools</a></li>
|
||||||
<li><a href="/subnet">Subnetz Rechner</a></li>
|
<li><a href="/subnet">Subnetz Rechner</a></li>
|
||||||
<li><a href="/dns">DNS Lookup</a></li>
|
<li><a href="/dns">DNS Lookup</a></li>
|
||||||
<li><a href="/whois">WHOIS Lookup</a></li>
|
<li><a href="/whois">WHOIS Lookup</a></li>
|
||||||
@@ -311,270 +27,17 @@
|
|||||||
</nav>
|
</nav>
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
<div
|
<div id="app"></div>
|
||||||
class="container mx-auto max-w-5xl glass-panel rounded-xl shadow-2xl p-6 md:p-8 backdrop-blur-xl border border-gray-800/50">
|
|
||||||
|
|
||||||
<h1 class="text-3xl font-bold mb-8 text-center text-gradient glitch-text">Your Digital Footprint</h1>
|
<footer class="mt-8 pb-4 text-center text-xs text-gray-500">
|
||||||
|
<p>© 2026 <a href="https://mrunk.de" class="text-purple-400 hover:text-purple-300 transition-colors">MrUnknownDE</a>
|
||||||
<!-- Bereich für EIGENE IP-Infos -->
|
· Version: <span id="commit-sha" class="font-mono text-gray-400">loading…</span></p>
|
||||||
<div id="info-section" class="grid grid-cols-1 md:grid-cols-2 gap-8 mb-8">
|
|
||||||
|
|
||||||
<!-- Linke Spalte: Eigene IP, Geo, ASN, rDNS -->
|
|
||||||
<div class="space-y-6 fade-in" style="animation-delay: 0.1s;">
|
|
||||||
<!-- IP Card -->
|
|
||||||
<div class="glass-card rounded-lg p-5 relative overflow-hidden group">
|
|
||||||
<div class="absolute top-0 right-0 p-2 opacity-10 group-hover:opacity-20 transition-opacity">
|
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-16 w-16 text-purple-500" fill="none"
|
|
||||||
viewBox="0 0 24 24" stroke="currentColor">
|
|
||||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
||||||
d="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9m-9 9a9 9 0 019-9" />
|
|
||||||
</svg>
|
|
||||||
</div>
|
|
||||||
<h2 class="text-xs font-bold text-purple-400 uppercase tracking-widest mb-2">Your Public IP</h2>
|
|
||||||
<div id="ip-info" class="min-h-[40px] flex items-center">
|
|
||||||
<div id="ip-loader" class="loader"></div>
|
|
||||||
<a id="ip-address-link" href="#"
|
|
||||||
class="text-3xl font-mono font-bold text-white tracking-tight break-all hidden hover:text-purple-300 transition-colors"
|
|
||||||
title="Click for WHOIS Lookup">
|
|
||||||
<span id="ip-address"></span>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Geo/ASN Combo Card -->
|
|
||||||
<div class="glass-card rounded-lg p-5 space-y-4">
|
|
||||||
<div>
|
|
||||||
<h2
|
|
||||||
class="text-xs font-bold text-gray-400 uppercase tracking-widest mb-2 border-b border-gray-700 pb-1">
|
|
||||||
Location Details</h2>
|
|
||||||
<div id="geo-info" class="min-h-[80px] space-y-1 text-sm text-gray-300">
|
|
||||||
<div id="geo-loader" class="loader"></div>
|
|
||||||
<div class="hidden grid grid-cols-2 gap-x-2 gap-y-1">
|
|
||||||
<p><span class="text-gray-500">Country:</span> <span id="country"
|
|
||||||
class="text-gray-200 font-medium">-</span></p>
|
|
||||||
<p><span class="text-gray-500">Region:</span> <span id="region"
|
|
||||||
class="text-gray-200 font-medium">-</span></p>
|
|
||||||
<p><span class="text-gray-500">City:</span> <span id="city"
|
|
||||||
class="text-gray-200 font-medium">-</span></p>
|
|
||||||
<p><span class="text-gray-500">Zip:</span> <span id="postal"
|
|
||||||
class="text-gray-200 font-medium">-</span></p>
|
|
||||||
<p class="col-span-2"><span class="text-gray-500">Coords:</span> <span id="coords"
|
|
||||||
class="font-mono text-xs text-purple-300">-</span></p>
|
|
||||||
<p class="col-span-2"><span class="text-gray-500">Time:</span> <span id="timezone"
|
|
||||||
class="text-gray-200 font-medium">-</span></p>
|
|
||||||
<p id="geo-error" class="text-red-400 col-span-2 text-xs"></p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<h2
|
|
||||||
class="text-xs font-bold text-gray-400 uppercase tracking-widest mb-2 border-b border-gray-700 pb-1">
|
|
||||||
Network (ASN)</h2>
|
|
||||||
<div id="asn-info" class="min-h-[40px] space-y-1 text-sm text-gray-300">
|
|
||||||
<div id="asn-loader" class="loader"></div>
|
|
||||||
<div class="hidden">
|
|
||||||
<p><span class="text-gray-500">AS Number:</span> <span id="asn-number"
|
|
||||||
class="font-mono text-purple-300">-</span></p>
|
|
||||||
<p><span class="text-gray-500">Org:</span> <span id="asn-org"
|
|
||||||
class="font-medium text-white">-</span></p>
|
|
||||||
<p id="asn-error" class="text-red-400 text-xs"></p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- rDNS Card -->
|
|
||||||
<div class="glass-card rounded-lg p-5">
|
|
||||||
<h2
|
|
||||||
class="text-xs font-bold text-gray-400 uppercase tracking-widest mb-2 border-b border-gray-700 pb-1">
|
|
||||||
Hostname (rDNS)</h2>
|
|
||||||
<div id="rdns-info" class="min-h-[30px] text-sm text-gray-300">
|
|
||||||
<div id="rdns-loader" class="loader"></div>
|
|
||||||
<div class="hidden">
|
|
||||||
<ul id="rdns-list" class="list-none space-y-1 font-mono text-xs text-green-400">
|
|
||||||
<li>-</li>
|
|
||||||
</ul>
|
|
||||||
<p id="rdns-error" class="text-red-400 text-xs"></p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Rechte Spalte: Eigene Karte -->
|
|
||||||
<div class="space-y-4 fade-in" style="animation-delay: 0.2s;">
|
|
||||||
<h2 class="text-lg font-semibold text-gray-200 flex items-center gap-2">
|
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-purple-400" viewBox="0 0 20 20"
|
|
||||||
fill="currentColor">
|
|
||||||
<path fill-rule="evenodd"
|
|
||||||
d="M5.05 4.05a7 7 0 119.9 9.9L10 18.9l-4.95-4.95a7 7 0 010-9.9zM10 11a2 2 0 100-4 2 2 0 000 4z"
|
|
||||||
clip-rule="evenodd" />
|
|
||||||
</svg>
|
|
||||||
Location Visualization
|
|
||||||
</h2>
|
|
||||||
<div id="map-container"
|
|
||||||
class="bg-gray-800/50 rounded-lg min-h-[400px] h-full flex items-center justify-center relative border border-gray-700/50 shadow-inner overflow-hidden">
|
|
||||||
<div id="map-loader" class="loader absolute z-10"></div>
|
|
||||||
<div id="map"
|
|
||||||
class="w-full h-full rounded-lg hidden z-0 opacity-80 hover:opacity-100 transition-opacity duration-700">
|
|
||||||
</div>
|
|
||||||
<p id="map-message" class="text-gray-400 hidden absolute text-sm">Could not load map.</p>
|
|
||||||
<div class="absolute inset-0 pointer-events-none rounded-lg ring-1 ring-inset ring-white/10"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Bereich für IP Lookup -->
|
|
||||||
<div class="mt-8 p-6 glass-card rounded-xl">
|
|
||||||
<h2
|
|
||||||
class="text-xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-purple-400 to-pink-500 mb-4 flex items-center gap-2">
|
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-pink-500" fill="none" viewBox="0 0 24 24"
|
|
||||||
stroke="currentColor">
|
|
||||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
||||||
d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
|
|
||||||
</svg>
|
|
||||||
IP Address / Domain Lookup
|
|
||||||
</h2>
|
|
||||||
<div class="flex flex-col sm:flex-row gap-3 mb-6">
|
|
||||||
<input type="text" id="lookup-ip-input" placeholder="Enter IP or Domain (e.g., 8.8.8.8 or google.com)"
|
|
||||||
class="flex-grow px-4 py-3 bg-gray-900/50 border border-gray-700/50 rounded-lg text-gray-200 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent font-mono transition-all placeholder-gray-600">
|
|
||||||
<button id="lookup-button"
|
|
||||||
class="bg-gradient-to-r from-purple-600 to-pink-600 hover:from-purple-500 hover:to-pink-500 text-white font-bold py-3 px-6 rounded-lg shadow-lg hover:shadow-purple-500/25 transition-all duration-200 ease-in-out transform hover:-translate-y-0.5">
|
|
||||||
Lookup
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
<div id="lookup-error" class="text-red-400 mb-4 hidden p-3 bg-red-900/20 border border-red-500/30 rounded">
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Ergebnisse des Lookups (initial versteckt) -->
|
|
||||||
<div id="lookup-results-section"
|
|
||||||
class="hidden grid grid-cols-1 md:grid-cols-2 gap-8 mt-6 border-t border-gray-700/50 pt-6 fade-in">
|
|
||||||
<!-- Linke Spalte: IP, Geo, ASN, rDNS -->
|
|
||||||
<div class="space-y-6">
|
|
||||||
<h3 class="text-lg font-semibold text-gray-200">Result for: <span id="lookup-ip-address"
|
|
||||||
class="font-mono text-purple-400 bg-purple-500/10 px-2 py-0.5 rounded"></span></h3>
|
|
||||||
<div id="lookup-result-loader" class="loader hidden"></div>
|
|
||||||
|
|
||||||
<div id="lookup-geo-info" class="space-y-1 text-sm text-gray-300">
|
|
||||||
<h4 class="font-bold text-gray-500 uppercase text-xs tracking-wider mb-2">Geolocation</h4>
|
|
||||||
<div class="grid grid-cols-2 gap-x-2 gap-y-1">
|
|
||||||
<p><span class="text-gray-500">Country:</span> <span id="lookup-country"
|
|
||||||
class="text-white">-</span></p>
|
|
||||||
<p><span class="text-gray-500">Region:</span> <span id="lookup-region"
|
|
||||||
class="text-white">-</span></p>
|
|
||||||
<p><span class="text-gray-500">City:</span> <span id="lookup-city"
|
|
||||||
class="text-white">-</span></p>
|
|
||||||
<p><span class="text-gray-500">Zip:</span> <span id="lookup-postal"
|
|
||||||
class="text-white">-</span></p>
|
|
||||||
<p class="col-span-2"><span class="text-gray-500">Coords:</span> <span id="lookup-coords"
|
|
||||||
class="font-mono text-purple-300">-</span></p>
|
|
||||||
<p class="col-span-2"><span class="text-gray-500">Time:</span> <span id="lookup-timezone"
|
|
||||||
class="text-white">-</span></p>
|
|
||||||
<p id="lookup-geo-error" class="text-red-400 col-span-2"></p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div id="lookup-asn-info" class="space-y-1 text-sm text-gray-300">
|
|
||||||
<h4 class="font-bold text-gray-500 uppercase text-xs tracking-wider mb-2 mt-4">ASN</h4>
|
|
||||||
<p><span class="text-gray-500">Number:</span> <span id="lookup-asn-number"
|
|
||||||
class="text-white font-mono">-</span></p>
|
|
||||||
<p><span class="text-gray-500">Org:</span> <span id="lookup-asn-org" class="text-white">-</span>
|
|
||||||
</p>
|
|
||||||
<p id="lookup-asn-error" class="text-red-400"></p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div id="lookup-rdns-info" class="space-y-1 text-sm text-gray-300">
|
|
||||||
<h4 class="font-bold text-gray-500 uppercase text-xs tracking-wider mb-2 mt-4">Reverse DNS</h4>
|
|
||||||
<ul id="lookup-rdns-list" class="list-none space-y-1 font-mono text-xs text-green-400">
|
|
||||||
<li>-</li>
|
|
||||||
</ul>
|
|
||||||
<p id="lookup-rdns-error" class="text-red-400"></p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Rechte Spalte: Karte & Aktionen -->
|
|
||||||
<div class="space-y-6">
|
|
||||||
<h4 class="font-bold text-gray-500 uppercase text-xs tracking-wider mb-2">Location Map</h4>
|
|
||||||
<div id="lookup-map-container"
|
|
||||||
class="glass-panel rounded-lg min-h-[250px] flex items-center justify-center relative overflow-hidden">
|
|
||||||
<div id="lookup-map-loader" class="loader hidden absolute z-10"></div>
|
|
||||||
<div id="lookup-map" class="w-full rounded hidden opacity-90"></div>
|
|
||||||
<p id="lookup-map-message" class="text-gray-400 hidden absolute">Could not load map.</p>
|
|
||||||
<div class="absolute inset-0 pointer-events-none ring-1 ring-inset ring-white/10 rounded-lg">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Action Buttons -->
|
|
||||||
<div class="flex flex-wrap gap-2 pt-2">
|
|
||||||
<button id="lookup-ping-button"
|
|
||||||
class="flex-1 bg-gray-700 hover:bg-gray-600 text-white font-bold py-2 px-4 rounded-lg text-sm transition-all disabled:opacity-50 disabled:cursor-not-allowed border border-gray-600 hover:border-gray-500 shadow-md"
|
|
||||||
disabled>Ping</button>
|
|
||||||
<button id="lookup-trace-button"
|
|
||||||
class="flex-1 bg-gray-700 hover:bg-gray-600 text-white font-bold py-2 px-4 rounded-lg text-sm transition-all disabled:opacity-50 disabled:cursor-not-allowed border border-gray-600 hover:border-gray-500 shadow-md"
|
|
||||||
disabled>Trace</button>
|
|
||||||
<button id="lookup-scan-button"
|
|
||||||
class="flex-1 bg-gray-700 hover:bg-gray-600 text-white font-bold py-2 px-4 rounded-lg text-sm transition-all disabled:opacity-50 disabled:cursor-not-allowed border border-gray-600 hover:border-gray-500 shadow-md"
|
|
||||||
disabled>Port Scan</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Bereich für Ping-Ergebnisse (Lookup) -->
|
|
||||||
<div id="lookup-ping-results" class="mt-4 text-sm hidden fade-in">
|
|
||||||
<h4 class="font-bold text-purple-400 mb-2 flex items-center gap-2">
|
|
||||||
<div class="w-2 h-2 bg-green-500 rounded-full animate-pulse"></div> Ping Results
|
|
||||||
</h4>
|
|
||||||
<div id="lookup-ping-loader" class="loader hidden"></div>
|
|
||||||
<pre id="lookup-ping-output" class="result-pre mt-1"></pre>
|
|
||||||
<p id="lookup-ping-error" class="text-red-400 mt-2"></p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Bereich für Traceroute -->
|
|
||||||
<div id="traceroute-section" class="mt-8 p-6 glass-card rounded-xl hidden fade-in">
|
|
||||||
<h2 class="text-xl font-bold text-purple-300 border-b border-purple-500/30 pb-2 mb-4">Traceroute Results
|
|
||||||
</h2>
|
|
||||||
<div id="traceroute-status" class="flex items-center mb-4 text-sm">
|
|
||||||
<div id="traceroute-loader" class="loader mr-3 hidden"></div>
|
|
||||||
<span id="traceroute-message" class="text-gray-300"></span>
|
|
||||||
</div>
|
|
||||||
<div id="traceroute-output" class="rounded-lg overflow-hidden custom-scrollbar">
|
|
||||||
<pre class="m-0"></pre>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Bereich für Port Scan -->
|
|
||||||
<div id="port-scan-section" class="mt-8 p-6 glass-card rounded-xl hidden fade-in">
|
|
||||||
<h2 class="text-xl font-bold text-purple-300 border-b border-purple-500/30 pb-2 mb-4">Port Scan Results</h2>
|
|
||||||
<div id="port-scan-status" class="flex items-center mb-4 text-sm">
|
|
||||||
<div id="port-scan-loader" class="loader mr-3 hidden"></div>
|
|
||||||
<span id="port-scan-message" class="text-gray-300"></span>
|
|
||||||
</div>
|
|
||||||
<div id="port-scan-output"
|
|
||||||
class="text-sm font-mono bg-gray-900/50 p-4 rounded-lg border border-gray-700/50 max-h-[300px] overflow-y-auto">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Globaler Fehlerbereich -->
|
|
||||||
<div id="global-error"
|
|
||||||
class="mt-6 p-4 bg-red-900/50 border border-red-500/50 text-red-100 rounded-lg hidden backdrop-blur shadow-lg">
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Footer für Version -->
|
|
||||||
<footer class="mt-12 pt-6 border-t border-gray-700/30 text-center text-xs text-gray-500">
|
|
||||||
<p>© 2025 <a href="https://mrunk.de"
|
|
||||||
class="text-purple-400 hover:text-purple-300 transition-colors">MrUnknownDE</a></p>
|
|
||||||
<p class="mt-1">Version: <span id="commit-sha" class="font-mono text-gray-400">loading...</span></p>
|
|
||||||
</footer>
|
</footer>
|
||||||
|
|
||||||
|
<!-- Global libs loaded once for all pages -->
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Leaflet JS -->
|
|
||||||
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"
|
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"
|
||||||
integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin=""></script>
|
integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin=""></script>
|
||||||
<!-- Eigene JS-Logik -->
|
<script src="https://cdn.jsdelivr.net/npm/d3@7/dist/d3.min.js"></script>
|
||||||
<script src="script.js"></script>
|
<script type="module" src="router.js"></script>
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
</html>
|
</html>
|
||||||
@@ -1,236 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html lang="de">
|
|
||||||
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
||||||
<title>MAC Vendor Lookup - uTools</title>
|
|
||||||
<!-- Tailwind CSS Play CDN -->
|
|
||||||
<script src="https://cdn.tailwindcss.com"></script>
|
|
||||||
<!-- Eigene Styles -->
|
|
||||||
<style>
|
|
||||||
/* Einfacher Lade-Spinner (Tailwind animiert) */
|
|
||||||
.loader {
|
|
||||||
border: 4px solid rgba(168, 85, 247, 0.1);
|
|
||||||
/* Lila sehr transparent */
|
|
||||||
border-left-color: #d8b4fe;
|
|
||||||
/* Helleres Lila */
|
|
||||||
border-radius: 50%;
|
|
||||||
width: 24px;
|
|
||||||
height: 24px;
|
|
||||||
animation: spin 1s linear infinite;
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes spin {
|
|
||||||
to {
|
|
||||||
transform: rotate(360deg);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Glassmorphism Utilities */
|
|
||||||
.glass-panel {
|
|
||||||
background: rgba(17, 24, 39, 0.7);
|
|
||||||
backdrop-filter: blur(12px);
|
|
||||||
-webkit-backdrop-filter: blur(12px);
|
|
||||||
border: 1px solid rgba(255, 255, 255, 0.05);
|
|
||||||
}
|
|
||||||
|
|
||||||
.glass-card {
|
|
||||||
background: rgba(31, 41, 55, 0.6);
|
|
||||||
backdrop-filter: blur(8px);
|
|
||||||
-webkit-backdrop-filter: blur(8px);
|
|
||||||
border: 1px solid rgba(255, 255, 255, 0.05);
|
|
||||||
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.glass-card:hover {
|
|
||||||
transform: translateY(-2px);
|
|
||||||
box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.5);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Animations */
|
|
||||||
@keyframes fadeIn {
|
|
||||||
from {
|
|
||||||
opacity: 0;
|
|
||||||
transform: translateY(10px);
|
|
||||||
}
|
|
||||||
|
|
||||||
to {
|
|
||||||
opacity: 1;
|
|
||||||
transform: translateY(0);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.fade-in {
|
|
||||||
animation: fadeIn 0.5s ease-out forwards;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Ergebnis-Pre-Formatierung */
|
|
||||||
.result-pre {
|
|
||||||
white-space: pre-wrap;
|
|
||||||
word-break: break-all;
|
|
||||||
font-family: 'Courier New', Courier, monospace;
|
|
||||||
background-color: rgba(0, 0, 0, 0.3);
|
|
||||||
color: #e5e7eb;
|
|
||||||
padding: 1rem;
|
|
||||||
border-radius: 0.375rem;
|
|
||||||
max-height: 400px;
|
|
||||||
overflow-y: auto;
|
|
||||||
font-size: 1.25rem;
|
|
||||||
text-align: center;
|
|
||||||
border: 1px solid rgba(255, 255, 255, 0.05);
|
|
||||||
box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.3);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Scrollbar Styling */
|
|
||||||
::-webkit-scrollbar {
|
|
||||||
width: 8px;
|
|
||||||
height: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
::-webkit-scrollbar-track {
|
|
||||||
background: rgba(31, 41, 55, 0.5);
|
|
||||||
}
|
|
||||||
|
|
||||||
::-webkit-scrollbar-thumb {
|
|
||||||
background: #4b5563;
|
|
||||||
border-radius: 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
::-webkit-scrollbar-thumb:hover {
|
|
||||||
background: #6b7280;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Navigations-Styling */
|
|
||||||
nav ul {
|
|
||||||
list-style: none;
|
|
||||||
padding: 0;
|
|
||||||
margin: 0;
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
gap: 0.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
nav a {
|
|
||||||
color: #d1d5db;
|
|
||||||
text-decoration: none;
|
|
||||||
padding: 0.5rem 1rem;
|
|
||||||
border-radius: 0.5rem;
|
|
||||||
transition: all 0.2s ease;
|
|
||||||
position: relative;
|
|
||||||
overflow: hidden;
|
|
||||||
background: rgba(255, 255, 255, 0.03);
|
|
||||||
border: 1px solid rgba(255, 255, 255, 0.05);
|
|
||||||
}
|
|
||||||
|
|
||||||
nav a:hover {
|
|
||||||
color: #fff;
|
|
||||||
background: rgba(168, 85, 247, 0.2);
|
|
||||||
border-color: rgba(168, 85, 247, 0.4);
|
|
||||||
box-shadow: 0 0 15px rgba(168, 85, 247, 0.1);
|
|
||||||
}
|
|
||||||
|
|
||||||
nav a.active-link {
|
|
||||||
background: rgba(168, 85, 247, 0.3);
|
|
||||||
color: #fff;
|
|
||||||
border-color: #a855f7;
|
|
||||||
}
|
|
||||||
|
|
||||||
header {
|
|
||||||
background: rgba(31, 41, 55, 0.4);
|
|
||||||
backdrop-filter: blur(10px);
|
|
||||||
padding: 1.5rem;
|
|
||||||
margin-bottom: 2rem;
|
|
||||||
border-radius: 1rem;
|
|
||||||
border: 1px solid rgba(255, 255, 255, 0.05);
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
gap: 1rem;
|
|
||||||
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (min-width: 768px) {
|
|
||||||
header {
|
|
||||||
flex-direction: row;
|
|
||||||
justify-content: space-between;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
header h1 {
|
|
||||||
background-clip: text;
|
|
||||||
}
|
|
||||||
|
|
||||||
.text-gradient {
|
|
||||||
background: linear-gradient(to right, #c084fc, #e879f9);
|
|
||||||
-webkit-background-clip: text;
|
|
||||||
background-clip: text;
|
|
||||||
-webkit-text-fill-color: transparent;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hidden {
|
|
||||||
display: none !important;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
</head>
|
|
||||||
|
|
||||||
<body
|
|
||||||
class="bg-gray-950 text-gray-100 font-sans p-4 md:p-8 min-h-screen bg-[url('https://tailwindcss.com/_next/static/media/hero-dark.939eb757.png')] bg-cover bg-center bg-fixed selection:bg-purple-500 selection:text-white">
|
|
||||||
|
|
||||||
<header class="glass-panel">
|
|
||||||
<h1>uTools <span class="text-sm font-normal text-gray-400 opacity-75 tracking-wider uppercase ml-2">Network
|
|
||||||
Suite</span></h1>
|
|
||||||
<nav>
|
|
||||||
<ul>
|
|
||||||
<li><a href="/">IP Info & Tools</a></li>
|
|
||||||
<li><a href="/subnet">Subnetz Rechner</a></li>
|
|
||||||
<li><a href="/dns">DNS Lookup</a></li>
|
|
||||||
<li><a href="/whois">WHOIS Lookup</a></li>
|
|
||||||
<li><a href="/mac" class="active-link">MAC Lookup</a></li>
|
|
||||||
<li><a href="/asn">ASN Lookup</a></li>
|
|
||||||
</ul>
|
|
||||||
</nav>
|
|
||||||
</header>
|
|
||||||
|
|
||||||
<div
|
|
||||||
class="container mx-auto max-w-5xl glass-panel rounded-xl shadow-2xl p-6 md:p-8 backdrop-blur-xl border border-gray-800/50">
|
|
||||||
|
|
||||||
<h1 class="text-3xl font-bold mb-8 text-center text-gradient glitch-text">MAC Address Vendor Lookup</h1>
|
|
||||||
|
|
||||||
<div class="mt-8 p-6 glass-card rounded-xl">
|
|
||||||
<div class="flex flex-col sm:flex-row gap-3 mb-6">
|
|
||||||
<input type="text" id="mac-input" placeholder="Enter MAC address (e.g., 00:1A:2B:3C:4D:5E)"
|
|
||||||
class="flex-grow px-4 py-3 bg-gray-900/50 border border-gray-700/50 rounded-lg text-gray-200 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent font-mono transition-all placeholder-gray-600">
|
|
||||||
<button id="mac-lookup-button"
|
|
||||||
class="bg-gradient-to-r from-purple-600 to-pink-600 hover:from-purple-500 hover:to-pink-500 text-white font-bold py-3 px-6 rounded-lg shadow-lg hover:shadow-purple-500/25 transition-all duration-200 ease-in-out transform hover:-translate-y-0.5">
|
|
||||||
Find Vendor
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
<div id="mac-lookup-error"
|
|
||||||
class="text-red-400 mb-4 hidden p-3 bg-red-900/20 border border-red-500/30 rounded"></div>
|
|
||||||
<div id="mac-lookup-results-section" class="hidden mt-6 border-t border-gray-700/50 pt-6 fade-in">
|
|
||||||
<h3 class="text-lg font-semibold text-purple-300 mb-4 flex items-center justify-center gap-2">
|
|
||||||
<div class="w-1.5 h-6 bg-purple-500 rounded-full"></div>
|
|
||||||
Vendor for: <span id="mac-lookup-query" class="font-mono text-purple-400 ml-1"></span>
|
|
||||||
</h3>
|
|
||||||
<div id="mac-lookup-loader" class="loader hidden mb-4 mx-auto"></div>
|
|
||||||
<pre id="mac-lookup-output" class="result-pre custom-scrollbar"></pre>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div id="global-error"
|
|
||||||
class="mt-6 p-4 bg-red-900/50 border border-red-500/50 text-red-100 rounded-lg hidden backdrop-blur shadow-lg">
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<footer class="mt-12 pt-6 border-t border-gray-700/30 text-center text-xs text-gray-500">
|
|
||||||
<p>© 2025 <a href="https://mrunk.de"
|
|
||||||
class="text-purple-400 hover:text-purple-300 transition-colors">MrUnknownDE</a></p>
|
|
||||||
<p class="mt-1">Version: <span id="commit-sha" class="font-mono text-gray-400">loading...</span></p>
|
|
||||||
</footer>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<script src="mac-lookup.js"></script>
|
|
||||||
</body>
|
|
||||||
|
|
||||||
</html>
|
|
||||||
@@ -1,82 +0,0 @@
|
|||||||
// frontend/app/mac-lookup.js
|
|
||||||
document.addEventListener('DOMContentLoaded', () => {
|
|
||||||
const macInput = document.getElementById('mac-input');
|
|
||||||
const macLookupButton = document.getElementById('mac-lookup-button');
|
|
||||||
const macLookupErrorEl = document.getElementById('mac-lookup-error');
|
|
||||||
const macLookupResultsSection = document.getElementById('mac-lookup-results-section');
|
|
||||||
const macLookupQueryEl = document.getElementById('mac-lookup-query');
|
|
||||||
const macLookupLoader = document.getElementById('mac-lookup-loader');
|
|
||||||
const macLookupOutputEl = document.getElementById('mac-lookup-output');
|
|
||||||
const commitShaEl = document.getElementById('commit-sha');
|
|
||||||
const globalErrorEl = document.getElementById('global-error');
|
|
||||||
|
|
||||||
const API_BASE_URL = '/api';
|
|
||||||
|
|
||||||
function showGlobalError(message) {
|
|
||||||
if (!globalErrorEl) return;
|
|
||||||
globalErrorEl.textContent = `Error: ${message}`;
|
|
||||||
globalErrorEl.classList.remove('hidden');
|
|
||||||
}
|
|
||||||
|
|
||||||
async function fetchVersionInfo() {
|
|
||||||
if (!commitShaEl) return;
|
|
||||||
try {
|
|
||||||
const response = await fetch(`${API_BASE_URL}/version`);
|
|
||||||
if (!response.ok) throw new Error(`Network response: ${response.statusText}`);
|
|
||||||
const data = await response.json();
|
|
||||||
commitShaEl.textContent = data.commitSha || 'unknown';
|
|
||||||
} catch (error) {
|
|
||||||
console.error('Failed to fetch version info:', error);
|
|
||||||
commitShaEl.textContent = 'error';
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function displayMacResult(data, outputEl) {
|
|
||||||
outputEl.textContent = data.vendor || 'No vendor found.';
|
|
||||||
}
|
|
||||||
|
|
||||||
async function handleMacLookup() {
|
|
||||||
const mac = macInput.value.trim();
|
|
||||||
if (!mac) {
|
|
||||||
macLookupErrorEl.textContent = 'Please enter a MAC address.';
|
|
||||||
macLookupErrorEl.classList.remove('hidden');
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Reset animation
|
|
||||||
macLookupResultsSection.classList.remove('fade-in');
|
|
||||||
void macLookupResultsSection.offsetWidth; // Trigger reflow
|
|
||||||
macLookupResultsSection.classList.add('fade-in');
|
|
||||||
|
|
||||||
macLookupResultsSection.classList.remove('hidden');
|
|
||||||
macLookupLoader.classList.remove('hidden');
|
|
||||||
macLookupErrorEl.classList.add('hidden');
|
|
||||||
macLookupOutputEl.textContent = '';
|
|
||||||
macLookupQueryEl.textContent = mac;
|
|
||||||
|
|
||||||
try {
|
|
||||||
const response = await fetch(`${API_BASE_URL}/mac-lookup?mac=${encodeURIComponent(mac)}`);
|
|
||||||
const data = await response.json();
|
|
||||||
|
|
||||||
if (!response.ok || !data.success) {
|
|
||||||
throw new Error(data.error || `Request failed with status ${response.status}`);
|
|
||||||
}
|
|
||||||
|
|
||||||
displayMacResult(data, macLookupOutputEl);
|
|
||||||
|
|
||||||
} catch (error) {
|
|
||||||
console.error('Failed to fetch MAC vendor:', error);
|
|
||||||
macLookupErrorEl.textContent = `Error: ${error.message}`;
|
|
||||||
macLookupErrorEl.classList.remove('hidden');
|
|
||||||
macLookupOutputEl.textContent = '';
|
|
||||||
} finally {
|
|
||||||
macLookupLoader.classList.add('hidden');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
fetchVersionInfo();
|
|
||||||
macLookupButton.addEventListener('click', handleMacLookup);
|
|
||||||
macInput.addEventListener('keypress', (event) => {
|
|
||||||
if (event.key === 'Enter') handleMacLookup();
|
|
||||||
});
|
|
||||||
});
|
|
||||||
@@ -0,0 +1,349 @@
|
|||||||
|
import { API } from '../shared.js';
|
||||||
|
|
||||||
|
export const page = {
|
||||||
|
title: 'ASN Lookup',
|
||||||
|
|
||||||
|
template: () => `
|
||||||
|
<div class="container mx-auto max-w-6xl glass-panel rounded-xl shadow-2xl p-6 md:p-8 backdrop-blur-xl border border-gray-800/50">
|
||||||
|
<h1 class="text-3xl font-bold mb-2 text-center text-gradient">AS / ASN Lookup</h1>
|
||||||
|
<p class="text-center text-gray-400 text-sm mb-8">Peering graph, prefixes & IXP connections for any Autonomous System</p>
|
||||||
|
|
||||||
|
<div class="flex flex-col sm:flex-row gap-3 mb-6 max-w-2xl mx-auto">
|
||||||
|
<input type="text" id="asn-input" placeholder="Enter ASN (e.g. 15169 or AS3320)"
|
||||||
|
class="flex-grow px-4 py-3 bg-gray-900/50 border border-gray-700/50 rounded-lg text-gray-200 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent font-mono transition-all placeholder-gray-600">
|
||||||
|
<button id="lookup-button" disabled
|
||||||
|
class="bg-gradient-to-r from-purple-600 to-pink-600 hover:from-purple-500 hover:to-pink-500 disabled:opacity-40 disabled:cursor-not-allowed text-white font-bold py-3 px-6 rounded-lg shadow-lg transition-all duration-200">
|
||||||
|
Lookup
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="error-box" class="hidden max-w-2xl mx-auto mb-6 p-4 bg-red-900/30 border border-red-500/40 text-red-300 rounded-lg text-sm"></div>
|
||||||
|
|
||||||
|
<div id="loading-section" class="hidden flex flex-col items-center gap-3 py-16">
|
||||||
|
<div class="loader" style="width:40px;height:40px;border-width:5px;"></div>
|
||||||
|
<p class="text-gray-400 text-sm" id="loading-msg">Querying RIPE Stat & PeeringDB…</p>
|
||||||
|
<p class="text-xs text-amber-400/80 bg-amber-400/10 border border-amber-400/20 rounded-lg px-4 py-2 max-w-sm text-center mt-1">
|
||||||
|
⏳ Large ASes (Cloudflare, Google, Tier-1 carriers) can take up to 15 s on first lookup — subsequent lookups are cached for 7 days.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="results-section" class="hidden fade-in">
|
||||||
|
<div class="glass-card rounded-xl p-6 mb-6">
|
||||||
|
<div class="flex flex-col md:flex-row md:items-center gap-4">
|
||||||
|
<div class="flex-1">
|
||||||
|
<div class="flex items-center gap-3 mb-1">
|
||||||
|
<span id="res-asn" class="font-mono text-2xl font-bold text-purple-400"></span>
|
||||||
|
<span id="res-announced-badge" class="hidden text-xs px-2 py-0.5 bg-green-500/20 border border-green-500/40 text-green-400 rounded-full">Announced</span>
|
||||||
|
<span id="res-type-badge" class="text-xs px-2 py-0.5 bg-blue-500/20 border border-blue-500/40 text-blue-300 rounded-full"></span>
|
||||||
|
</div>
|
||||||
|
<h2 id="res-name" class="text-xl font-semibold text-white mb-1"></h2>
|
||||||
|
<div class="flex flex-wrap items-center gap-x-4 gap-y-1 text-sm text-gray-400 mb-2">
|
||||||
|
<span id="res-policy-container" class="hidden">Peering Policy: <span id="res-policy" class="text-gray-200"></span></span>
|
||||||
|
<span id="res-website-container" class="hidden">Website: <a id="res-website" href="#" target="_blank" rel="noopener" class="text-purple-400 hover:text-purple-300 transition-colors"></a></span>
|
||||||
|
</div>
|
||||||
|
<div id="res-rich-info" class="grid grid-cols-2 sm:grid-cols-4 gap-3 mt-4 pt-4 border-t border-gray-700/50 hidden">
|
||||||
|
<div id="res-info-type-container" class="hidden"><div class="text-xs text-gray-500 uppercase tracking-widest">Type</div><div id="res-info-type" class="text-sm text-gray-200 capitalize mt-0.5"></div></div>
|
||||||
|
<div id="res-info-scope-container" class="hidden"><div class="text-xs text-gray-500 uppercase tracking-widest">Scope</div><div id="res-info-scope" class="text-sm text-gray-200 capitalize mt-0.5"></div></div>
|
||||||
|
<div id="res-info-traffic-container" class="hidden"><div class="text-xs text-gray-500 uppercase tracking-widest">Traffic</div><div id="res-info-traffic" class="text-sm text-gray-200 capitalize mt-0.5"></div></div>
|
||||||
|
<div id="res-info-ratio-container" class="hidden"><div class="text-xs text-gray-500 uppercase tracking-widest">Ratio</div><div id="res-info-ratio" class="text-sm text-gray-200 capitalize mt-0.5"></div></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="grid grid-cols-2 sm:grid-cols-3 gap-3 text-center">
|
||||||
|
<div class="bg-blue-500/10 border border-blue-500/20 rounded-lg p-3">
|
||||||
|
<div id="res-upstream-count" class="text-xl font-bold text-blue-400">—</div>
|
||||||
|
<div class="text-xs text-gray-400 mt-0.5">Upstreams</div>
|
||||||
|
</div>
|
||||||
|
<div class="bg-green-500/10 border border-green-500/20 rounded-lg p-3">
|
||||||
|
<div id="res-downstream-count" class="text-xl font-bold text-green-400">—</div>
|
||||||
|
<div class="text-xs text-gray-400 mt-0.5">Downstreams</div>
|
||||||
|
</div>
|
||||||
|
<div class="bg-purple-500/10 border border-purple-500/20 rounded-lg p-3 col-span-2 sm:col-span-1">
|
||||||
|
<div id="res-prefix-count" class="text-xl font-bold text-purple-400">—</div>
|
||||||
|
<div class="text-xs text-gray-400 mt-0.5">Prefixes</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="glass-card rounded-xl p-6 mb-6">
|
||||||
|
<div class="flex items-center gap-3 mb-4">
|
||||||
|
<h3 class="text-lg font-bold text-purple-300">Network Map</h3>
|
||||||
|
<div class="flex gap-3 text-xs text-gray-400">
|
||||||
|
<span class="flex items-center gap-1"><span class="inline-block w-3 h-3 rounded-full bg-gray-500"></span>Tier-1</span>
|
||||||
|
<span class="flex items-center gap-1"><span class="inline-block w-3 h-3 rounded-full bg-blue-500"></span>Upstream</span>
|
||||||
|
<span class="flex items-center gap-1"><span class="inline-block w-3 h-3 rounded-full bg-purple-500"></span>This AS</span>
|
||||||
|
<span class="flex items-center gap-1"><span class="inline-block w-3 h-3 rounded-full bg-green-500"></span>Downstream</span>
|
||||||
|
</div>
|
||||||
|
<span class="ml-auto text-xs text-gray-500">Scroll to zoom · Drag to pan · Click node to open</span>
|
||||||
|
</div>
|
||||||
|
<div id="graph-container">
|
||||||
|
<svg id="graph-svg"></svg>
|
||||||
|
<div id="graph-tooltip"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
|
||||||
|
<div class="glass-card rounded-xl p-5">
|
||||||
|
<div class="flex items-center justify-between mb-3">
|
||||||
|
<h3 class="text-sm font-bold text-gray-400 uppercase tracking-widest">Announced Prefixes</h3>
|
||||||
|
<button id="prefix-toggle" class="text-xs text-purple-400 hover:text-purple-300 transition-colors">Show all</button>
|
||||||
|
</div>
|
||||||
|
<div id="prefix-list" class="max-h-48 overflow-y-auto"></div>
|
||||||
|
<p id="prefix-empty" class="hidden text-sm text-gray-500 italic">No prefix data available.</p>
|
||||||
|
</div>
|
||||||
|
<div class="glass-card rounded-xl p-5">
|
||||||
|
<h3 class="text-sm font-bold text-gray-400 uppercase tracking-widest mb-3">IXP Presence <span class="text-xs font-normal text-gray-500">(via PeeringDB)</span></h3>
|
||||||
|
<div id="ixp-list" class="space-y-1 text-sm max-h-48 overflow-y-auto">
|
||||||
|
<p id="ixp-empty" class="text-gray-500 italic text-sm">Not listed on PeeringDB.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="glass-card rounded-xl p-5">
|
||||||
|
<h3 class="text-sm font-bold text-gray-400 uppercase tracking-widest mb-3">Direct Neighbours <span class="text-xs font-normal text-gray-500">(Level 2 · via RIPE Stat)</span></h3>
|
||||||
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||||
|
<div>
|
||||||
|
<h4 class="text-xs font-semibold text-blue-400 mb-2">↑ Upstreams (Transit Providers)</h4>
|
||||||
|
<div id="upstream-table" class="space-y-1 text-xs font-mono max-h-52 overflow-y-auto"></div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h4 class="text-xs font-semibold text-green-400 mb-2">↓ Downstreams (Customers)</h4>
|
||||||
|
<div id="downstream-table" class="space-y-1 text-xs font-mono max-h-52 overflow-y-auto"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>`,
|
||||||
|
|
||||||
|
async init(search) {
|
||||||
|
const asnInput = document.getElementById('asn-input');
|
||||||
|
const lookupButton = document.getElementById('lookup-button');
|
||||||
|
const errorBox = document.getElementById('error-box');
|
||||||
|
const loadingSection = document.getElementById('loading-section');
|
||||||
|
const resultsSection = document.getElementById('results-section');
|
||||||
|
|
||||||
|
let currentData = null;
|
||||||
|
let showAllPrefixes = false;
|
||||||
|
|
||||||
|
const syncBtn = () => { lookupButton.disabled = !asnInput.value.trim(); };
|
||||||
|
asnInput.addEventListener('input', syncBtn);
|
||||||
|
|
||||||
|
function showError(msg) {
|
||||||
|
errorBox.textContent = msg;
|
||||||
|
errorBox.classList.toggle('hidden', !msg);
|
||||||
|
loadingSection.classList.add('hidden');
|
||||||
|
resultsSection.classList.add('hidden');
|
||||||
|
}
|
||||||
|
|
||||||
|
function setLoading(msg) {
|
||||||
|
errorBox.classList.add('hidden');
|
||||||
|
document.getElementById('loading-msg').textContent = msg;
|
||||||
|
loadingSection.classList.remove('hidden');
|
||||||
|
resultsSection.classList.add('hidden');
|
||||||
|
}
|
||||||
|
|
||||||
|
async function doLookup(rawAsn) {
|
||||||
|
const asn = String(rawAsn || '').trim().toUpperCase().replace(/^AS/, '');
|
||||||
|
if (!asn || isNaN(Number(asn))) { showError('Please enter a valid ASN (e.g. 15169 or AS3320).'); return; }
|
||||||
|
|
||||||
|
setLoading('Querying RIPE Stat & PeeringDB…');
|
||||||
|
const url = new URL(location.href);
|
||||||
|
url.searchParams.set('asn', asn);
|
||||||
|
history.replaceState({}, '', url);
|
||||||
|
|
||||||
|
try {
|
||||||
|
const res = await fetch(`${API}/asn-lookup?asn=${encodeURIComponent(asn)}`);
|
||||||
|
const data = await res.json();
|
||||||
|
if (!res.ok || !data.success) { showError(data.error || `Request failed (HTTP ${res.status})`); return; }
|
||||||
|
currentData = data;
|
||||||
|
renderResults(data);
|
||||||
|
} catch (err) {
|
||||||
|
showError(`Network error: ${err.message}`);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function renderResults(data) {
|
||||||
|
loadingSection.classList.add('hidden');
|
||||||
|
resultsSection.classList.remove('hidden');
|
||||||
|
|
||||||
|
document.getElementById('res-asn').textContent = `AS${data.asn}`;
|
||||||
|
document.getElementById('res-name').textContent = data.name || 'Unknown';
|
||||||
|
|
||||||
|
const announcedBadge = document.getElementById('res-announced-badge');
|
||||||
|
announcedBadge.classList.toggle('hidden', !data.announced);
|
||||||
|
|
||||||
|
const typeBadge = document.getElementById('res-type-badge');
|
||||||
|
typeBadge.textContent = data.type || '';
|
||||||
|
typeBadge.classList.toggle('hidden', !data.type);
|
||||||
|
|
||||||
|
const policyContainer = document.getElementById('res-policy-container');
|
||||||
|
const policyEl = document.getElementById('res-policy');
|
||||||
|
if (data.peeringdb?.peeringPolicy) {
|
||||||
|
policyEl.textContent = data.peeringdb.peeringPolicy;
|
||||||
|
policyContainer.classList.remove('hidden');
|
||||||
|
} else { policyContainer.classList.add('hidden'); }
|
||||||
|
|
||||||
|
const websiteContainer = document.getElementById('res-website-container');
|
||||||
|
const websiteEl = document.getElementById('res-website');
|
||||||
|
if (data.peeringdb?.website) {
|
||||||
|
websiteEl.href = data.peeringdb.website;
|
||||||
|
websiteEl.textContent = data.peeringdb.website.replace(/^https?:\/\//, '').replace(/\/$/, '');
|
||||||
|
websiteContainer.classList.remove('hidden');
|
||||||
|
} else { websiteContainer.classList.add('hidden'); }
|
||||||
|
|
||||||
|
const richInfo = document.getElementById('res-rich-info');
|
||||||
|
let hasRich = false;
|
||||||
|
[['type', data.peeringdb?.infoType], ['scope', data.peeringdb?.infoScope],
|
||||||
|
['traffic', data.peeringdb?.infoTraffic], ['ratio', data.peeringdb?.infoRatio]].forEach(([id, val]) => {
|
||||||
|
const c = document.getElementById(`res-info-${id}-container`);
|
||||||
|
const e = document.getElementById(`res-info-${id}`);
|
||||||
|
if (c && e) { if (val) { e.textContent = val; c.classList.remove('hidden'); hasRich = true; } else c.classList.add('hidden'); }
|
||||||
|
});
|
||||||
|
richInfo.classList.toggle('hidden', !hasRich);
|
||||||
|
|
||||||
|
document.getElementById('res-upstream-count').textContent = data.graph?.level2?.upstreams?.length ?? '?';
|
||||||
|
document.getElementById('res-downstream-count').textContent = data.graph?.level2?.downstreams?.length ?? '?';
|
||||||
|
document.getElementById('res-prefix-count').textContent = data.prefixes?.length ?? '?';
|
||||||
|
|
||||||
|
renderPrefixes(data.prefixes);
|
||||||
|
renderIxps(data.peeringdb?.ixps);
|
||||||
|
renderNeighbourTable('upstream-table', data.graph?.level2?.upstreams ?? [], 'blue');
|
||||||
|
renderNeighbourTable('downstream-table', data.graph?.level2?.downstreams ?? [], 'green');
|
||||||
|
if (data.graph) renderGraph(data.graph);
|
||||||
|
}
|
||||||
|
|
||||||
|
function renderPrefixes(prefixes) {
|
||||||
|
const list = document.getElementById('prefix-list');
|
||||||
|
const empty = document.getElementById('prefix-empty');
|
||||||
|
const toggle = document.getElementById('prefix-toggle');
|
||||||
|
if (!prefixes?.length) { list.classList.add('hidden'); empty.classList.remove('hidden'); toggle.classList.add('hidden'); return; }
|
||||||
|
empty.classList.add('hidden'); toggle.classList.remove('hidden');
|
||||||
|
const toShow = showAllPrefixes ? prefixes : prefixes.slice(0, 20);
|
||||||
|
list.innerHTML = toShow.map(p => `<span class="prefix-tag">${p}</span>`).join('');
|
||||||
|
toggle.textContent = showAllPrefixes ? 'Show less' : `Show all (${prefixes.length})`;
|
||||||
|
}
|
||||||
|
|
||||||
|
document.getElementById('prefix-toggle').addEventListener('click', () => {
|
||||||
|
showAllPrefixes = !showAllPrefixes;
|
||||||
|
if (currentData) renderPrefixes(currentData.prefixes);
|
||||||
|
});
|
||||||
|
|
||||||
|
function renderIxps(ixps) {
|
||||||
|
const list = document.getElementById('ixp-list');
|
||||||
|
const empty = document.getElementById('ixp-empty');
|
||||||
|
if (!ixps?.length) { list.innerHTML = ''; empty.classList.remove('hidden'); return; }
|
||||||
|
empty.classList.add('hidden');
|
||||||
|
list.innerHTML = ixps.map(ix => `
|
||||||
|
<div class="ixp-row py-1.5 flex items-center justify-between gap-2 text-sm">
|
||||||
|
<span class="text-gray-200 truncate">${ix.name}</span>
|
||||||
|
<span class="text-xs text-gray-500 shrink-0">${ix.speed >= 1000 ? ix.speed / 1000 + 'G' : ix.speed + 'M'}</span>
|
||||||
|
</div>`).join('');
|
||||||
|
}
|
||||||
|
|
||||||
|
function renderNeighbourTable(elId, nodes, colour) {
|
||||||
|
const el = document.getElementById(elId);
|
||||||
|
if (!nodes?.length) { el.innerHTML = '<p class="text-gray-500 italic">None reported.</p>'; return; }
|
||||||
|
const col = colour === 'blue' ? 'text-blue-400' : 'text-green-400';
|
||||||
|
el.innerHTML = nodes.map(n => `
|
||||||
|
<div class="flex items-center gap-2 py-0.5 hover:bg-white/5 rounded px-1 cursor-pointer group"
|
||||||
|
onclick="window._router.navigate('/asn',{asn:'${n.asn}'})">
|
||||||
|
<span class="${col} font-bold w-14 shrink-0">AS${n.asn}</span>
|
||||||
|
<span class="text-gray-300 truncate flex-1 group-hover:text-white">${n.name || '—'}</span>
|
||||||
|
<span class="text-gray-600 shrink-0">${n.power ? 'pwr:' + n.power : ''}</span>
|
||||||
|
</div>`).join('');
|
||||||
|
}
|
||||||
|
|
||||||
|
function renderGraph(graph) {
|
||||||
|
const container = document.getElementById('graph-container');
|
||||||
|
const svg = d3.select('#graph-svg');
|
||||||
|
svg.selectAll('*').remove();
|
||||||
|
const W = container.clientWidth, H = container.clientHeight;
|
||||||
|
|
||||||
|
const nodeMap = new Map();
|
||||||
|
function addNode(asn, name, role) {
|
||||||
|
const key = String(asn);
|
||||||
|
if (!nodeMap.has(key)) nodeMap.set(key, { id: key, asn, name: name || `AS${asn}`, role });
|
||||||
|
}
|
||||||
|
addNode(graph.center.asn, graph.center.name, 'center');
|
||||||
|
const vizUp = graph.level2.upstreams.slice(0, 15);
|
||||||
|
const vizDown = graph.level2.downstreams.slice(0, 15);
|
||||||
|
vizUp.forEach(n => addNode(n.asn, n.name, 'upstream'));
|
||||||
|
vizDown.forEach(n => addNode(n.asn, n.name, 'downstream'));
|
||||||
|
graph.level3.forEach(d => d.upstreams.forEach(n => addNode(n.asn, n.name, 'tier1')));
|
||||||
|
|
||||||
|
const nodes = Array.from(nodeMap.values());
|
||||||
|
const links = [];
|
||||||
|
const cid = String(graph.center.asn);
|
||||||
|
vizUp.forEach(n => links.push({ source: String(n.asn), target: cid, type: 'upstream', power: n.power || 1 }));
|
||||||
|
vizDown.forEach(n => links.push({ source: cid, target: String(n.asn), type: 'downstream', power: n.power || 1 }));
|
||||||
|
graph.level3.forEach(d => d.upstreams.forEach(n => links.push({ source: String(n.asn), target: String(d.parentAsn), type: 'tier1', power: n.power || 1 })));
|
||||||
|
const uniqueLinks = Array.from(new Map(links.map(l => [`${l.source}-${l.target}`, l])).values());
|
||||||
|
|
||||||
|
const layerX = { tier1: W * 0.08, upstream: W * 0.3, center: W * 0.55, downstream: W * 0.8 };
|
||||||
|
nodes.forEach(n => { n.fx = layerX[n.role] ?? W / 2; });
|
||||||
|
|
||||||
|
const maxPow = Math.max(...uniqueLinks.map(l => l.power), 1);
|
||||||
|
const strokeSc = d3.scaleLinear().domain([0, maxPow]).range([0.5, 4]);
|
||||||
|
const nodeRadius = { center: 20, upstream: 11, downstream: 11, tier1: 8 };
|
||||||
|
|
||||||
|
const sim = d3.forceSimulation(nodes)
|
||||||
|
.force('link', d3.forceLink(uniqueLinks).id(d => d.id).distance(d => d.type === 'tier1' ? 90 : 120).strength(0.6))
|
||||||
|
.force('charge', d3.forceManyBody().strength(-220))
|
||||||
|
.force('y', d3.forceY(H / 2).strength(0.04))
|
||||||
|
.force('collide', d3.forceCollide().radius(d => nodeRadius[d.role] + 14))
|
||||||
|
.alphaDecay(0.025);
|
||||||
|
|
||||||
|
const g = svg.append('g');
|
||||||
|
svg.call(d3.zoom().scaleExtent([0.3, 3]).on('zoom', evt => g.attr('transform', evt.transform)));
|
||||||
|
|
||||||
|
const link = g.append('g').selectAll('line').data(uniqueLinks).join('line')
|
||||||
|
.attr('class', d => `link link-${d.type}`)
|
||||||
|
.attr('stroke-width', d => strokeSc(d.power));
|
||||||
|
|
||||||
|
const tooltip = document.getElementById('graph-tooltip');
|
||||||
|
const node = g.append('g').selectAll('g').data(nodes).join('g')
|
||||||
|
.attr('class', d => `node node-${d.role}`)
|
||||||
|
.style('cursor', 'pointer')
|
||||||
|
.on('click', (_, d) => { if (d.role !== 'center') window._router.navigate('/asn', { asn: d.asn }); })
|
||||||
|
.on('mouseenter', (_, d) => {
|
||||||
|
tooltip.style.opacity = '1';
|
||||||
|
tooltip.innerHTML = `<strong class="text-purple-300">AS${d.asn}</strong><br><span class="text-gray-300">${d.name}</span><br><span class="text-gray-500 text-xs capitalize">${d.role === 'tier1' ? 'Tier-1 / Transit' : d.role}</span>`;
|
||||||
|
})
|
||||||
|
.on('mousemove', evt => {
|
||||||
|
const r = container.getBoundingClientRect();
|
||||||
|
let x = evt.clientX - r.left + 14, y = evt.clientY - r.top - 10;
|
||||||
|
if (x + 230 > W) x -= 244;
|
||||||
|
tooltip.style.left = x + 'px'; tooltip.style.top = y + 'px';
|
||||||
|
})
|
||||||
|
.on('mouseleave', () => { tooltip.style.opacity = '0'; })
|
||||||
|
.call(d3.drag()
|
||||||
|
.on('start', (evt, d) => { if (!evt.active) sim.alphaTarget(0.3).restart(); d.fy = d.y; })
|
||||||
|
.on('drag', (evt, d) => { d.fy = evt.y; })
|
||||||
|
.on('end', (evt, d) => { if (!evt.active) sim.alphaTarget(0); d.fy = null; }));
|
||||||
|
|
||||||
|
node.append('circle').attr('r', d => nodeRadius[d.role]);
|
||||||
|
node.append('text').attr('dy', d => nodeRadius[d.role] + 13).attr('font-size', d => d.role === 'center' ? 12 : 9).text(d => `AS${d.asn}`);
|
||||||
|
node.append('text').attr('dy', d => nodeRadius[d.role] + 23)
|
||||||
|
.attr('font-size', d => d.role === 'tier1' ? 7 : 8)
|
||||||
|
.attr('fill', d => d.role === 'tier1' ? '#6b7280' : '#9ca3af')
|
||||||
|
.text(d => {
|
||||||
|
if (!d.name) return '';
|
||||||
|
const max = d.role === 'center' ? 22 : d.role === 'tier1' ? 12 : 16;
|
||||||
|
return d.name.length > max ? d.name.slice(0, max) + '…' : d.name;
|
||||||
|
});
|
||||||
|
|
||||||
|
sim.on('tick', () => {
|
||||||
|
nodes.forEach(n => { n.y = Math.max(30, Math.min(H - 30, n.y)); });
|
||||||
|
link.attr('x1', d => d.source.x).attr('y1', d => d.source.y).attr('x2', d => d.target.x).attr('y2', d => d.target.y);
|
||||||
|
node.attr('transform', d => `translate(${d.x},${d.y})`);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
lookupButton.addEventListener('click', () => doLookup(asnInput.value));
|
||||||
|
asnInput.addEventListener('keypress', e => { if (e.key === 'Enter' && !lookupButton.disabled) doLookup(asnInput.value); });
|
||||||
|
|
||||||
|
const params = new URLSearchParams(search);
|
||||||
|
const urlAsn = params.get('asn');
|
||||||
|
if (urlAsn) { asnInput.value = urlAsn; syncBtn(); doLookup(urlAsn); }
|
||||||
|
}
|
||||||
|
};
|
||||||
@@ -0,0 +1,102 @@
|
|||||||
|
import { API, setupCopyBtn, showError } from '../shared.js';
|
||||||
|
|
||||||
|
export const page = {
|
||||||
|
title: 'DNS Lookup',
|
||||||
|
|
||||||
|
template: () => `
|
||||||
|
<div class="container mx-auto max-w-5xl glass-panel rounded-xl shadow-2xl p-6 md:p-8 backdrop-blur-xl border border-gray-800/50">
|
||||||
|
<h1 class="text-3xl font-bold mb-8 text-center text-gradient">DNS Lookup</h1>
|
||||||
|
|
||||||
|
<div class="p-6 glass-card rounded-xl">
|
||||||
|
<div class="flex flex-col sm:flex-row gap-3 mb-6">
|
||||||
|
<input type="text" id="dns-domain-input" placeholder="Enter domain (e.g., google.com)"
|
||||||
|
class="flex-grow px-4 py-3 bg-gray-900/50 border border-gray-700/50 rounded-lg text-gray-200 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent font-mono transition-all placeholder-gray-600">
|
||||||
|
<select id="dns-type-select"
|
||||||
|
class="px-4 py-3 bg-gray-900/50 border border-gray-700/50 rounded-lg text-gray-200 focus:outline-none focus:ring-2 focus:ring-purple-500 cursor-pointer">
|
||||||
|
<option value="ANY">ANY</option><option value="A">A</option><option value="AAAA">AAAA</option>
|
||||||
|
<option value="MX">MX</option><option value="TXT">TXT</option><option value="NS">NS</option>
|
||||||
|
<option value="CNAME">CNAME</option><option value="SOA">SOA</option><option value="SRV">SRV</option>
|
||||||
|
<option value="PTR">PTR (Reverse)</option>
|
||||||
|
</select>
|
||||||
|
<button id="dns-lookup-button" disabled
|
||||||
|
class="bg-gradient-to-r from-purple-600 to-pink-600 hover:from-purple-500 hover:to-pink-500 disabled:opacity-40 disabled:cursor-not-allowed text-white font-bold py-3 px-6 rounded-lg shadow-lg transition-all duration-200">
|
||||||
|
Lookup DNS
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div id="dns-lookup-error" class="hidden mb-4 p-3 bg-red-900/20 border border-red-500/30 rounded text-red-400 text-sm"></div>
|
||||||
|
|
||||||
|
<div id="dns-lookup-results-section" class="hidden mt-6 border-t border-gray-700/50 pt-6 fade-in">
|
||||||
|
<div class="flex items-center justify-between mb-4">
|
||||||
|
<h3 class="text-lg font-semibold text-purple-300 flex items-center gap-2">
|
||||||
|
<div class="w-1.5 h-6 bg-purple-500 rounded-full"></div>
|
||||||
|
DNS Results for: <span id="dns-lookup-query" class="font-mono text-purple-400 ml-1"></span>
|
||||||
|
</h3>
|
||||||
|
<button id="copy-dns-btn" class="copy-btn">copy</button>
|
||||||
|
</div>
|
||||||
|
<div id="dns-lookup-loader" class="loader hidden mb-4"></div>
|
||||||
|
<pre id="dns-lookup-output" class="result-pre"></pre>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="global-error" class="mt-6 p-4 bg-red-900/50 border border-red-500/50 text-red-100 rounded-lg hidden backdrop-blur shadow-lg"></div>
|
||||||
|
</div>`,
|
||||||
|
|
||||||
|
async init(search) {
|
||||||
|
const input = document.getElementById('dns-domain-input');
|
||||||
|
const select = document.getElementById('dns-type-select');
|
||||||
|
const btn = document.getElementById('dns-lookup-button');
|
||||||
|
const errorEl = document.getElementById('dns-lookup-error');
|
||||||
|
const section = document.getElementById('dns-lookup-results-section');
|
||||||
|
const queryEl = document.getElementById('dns-lookup-query');
|
||||||
|
const loader = document.getElementById('dns-lookup-loader');
|
||||||
|
const output = document.getElementById('dns-lookup-output');
|
||||||
|
const copyBtn = document.getElementById('copy-dns-btn');
|
||||||
|
|
||||||
|
const syncBtn = () => { btn.disabled = !input.value.trim(); };
|
||||||
|
input.addEventListener('input', syncBtn);
|
||||||
|
|
||||||
|
setupCopyBtn(copyBtn, () => output.textContent);
|
||||||
|
|
||||||
|
async function doLookup() {
|
||||||
|
const domain = input.value.trim();
|
||||||
|
const type = select.value;
|
||||||
|
if (!domain) return;
|
||||||
|
|
||||||
|
const url = new URL(location.href);
|
||||||
|
url.searchParams.set('domain', domain);
|
||||||
|
url.searchParams.set('type', type);
|
||||||
|
history.replaceState({}, '', url);
|
||||||
|
|
||||||
|
showError(errorEl, null);
|
||||||
|
section.classList.remove('hidden');
|
||||||
|
loader.classList.remove('hidden');
|
||||||
|
output.textContent = '';
|
||||||
|
queryEl.textContent = `${domain} (${type})`;
|
||||||
|
|
||||||
|
try {
|
||||||
|
const r = await fetch(`${API}/dns-lookup?domain=${encodeURIComponent(domain)}&type=${encodeURIComponent(type)}`);
|
||||||
|
const data = await r.json();
|
||||||
|
if (!r.ok || !data.success) throw new Error(data.error || `HTTP ${r.status}`);
|
||||||
|
output.textContent = JSON.stringify(data.records, null, 2);
|
||||||
|
} catch (err) {
|
||||||
|
showError(errorEl, err.message);
|
||||||
|
output.textContent = '';
|
||||||
|
} finally {
|
||||||
|
loader.classList.add('hidden');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
btn.addEventListener('click', doLookup);
|
||||||
|
input.addEventListener('keypress', e => { if (e.key === 'Enter' && !btn.disabled) doLookup(); });
|
||||||
|
|
||||||
|
const params = new URLSearchParams(search);
|
||||||
|
const d = params.get('domain');
|
||||||
|
if (d) {
|
||||||
|
input.value = d;
|
||||||
|
const t = params.get('type');
|
||||||
|
if (t) select.value = t;
|
||||||
|
syncBtn();
|
||||||
|
doLookup();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
@@ -0,0 +1,671 @@
|
|||||||
|
import { API, setupCopyBtn } from '../shared.js';
|
||||||
|
|
||||||
|
export const page = {
|
||||||
|
title: 'IP Info & Tools',
|
||||||
|
|
||||||
|
template: () => `
|
||||||
|
<div class="container mx-auto max-w-5xl glass-panel rounded-xl shadow-2xl p-6 md:p-8 backdrop-blur-xl border border-gray-800/50">
|
||||||
|
<h1 class="text-3xl font-bold mb-8 text-center text-gradient glitch-text">Your Digital Footprint</h1>
|
||||||
|
|
||||||
|
<!-- Own IP info -->
|
||||||
|
<div id="info-section" class="grid grid-cols-1 md:grid-cols-2 gap-8 mb-8">
|
||||||
|
<!-- Left column -->
|
||||||
|
<div class="space-y-6 fade-in" style="animation-delay:.1s">
|
||||||
|
<div class="glass-card rounded-lg p-5 relative overflow-hidden group">
|
||||||
|
<div class="absolute top-0 right-0 p-2 opacity-10 group-hover:opacity-20 transition-opacity">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-16 w-16 text-purple-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9m-9 9a9 9 0 019-9"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<h2 class="text-xs font-bold text-purple-400 uppercase tracking-widest mb-2">Your Public IP</h2>
|
||||||
|
<div id="ip-info" class="min-h-[40px] flex items-center gap-2">
|
||||||
|
<div id="ip-loader" class="loader"></div>
|
||||||
|
<a id="ip-address-link" href="#" class="text-3xl font-mono font-bold text-white tracking-tight break-all hidden hover:text-purple-300 transition-colors" title="Click for WHOIS Lookup">
|
||||||
|
<span id="ip-address"></span>
|
||||||
|
</a>
|
||||||
|
<button id="copy-ip-btn" class="copy-btn hidden">copy</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="glass-card rounded-lg p-5 space-y-4">
|
||||||
|
<div>
|
||||||
|
<h2 class="text-xs font-bold text-gray-400 uppercase tracking-widest mb-2 border-b border-gray-700 pb-1">Location Details</h2>
|
||||||
|
<div id="geo-info" class="min-h-[80px] space-y-1 text-sm text-gray-300">
|
||||||
|
<div id="geo-loader" class="loader"></div>
|
||||||
|
<div class="hidden grid grid-cols-2 gap-x-2 gap-y-1">
|
||||||
|
<p><span class="text-gray-500">Country:</span> <span id="country" class="text-gray-200 font-medium">-</span></p>
|
||||||
|
<p><span class="text-gray-500">Region:</span> <span id="region" class="text-gray-200 font-medium">-</span></p>
|
||||||
|
<p><span class="text-gray-500">City:</span> <span id="city" class="text-gray-200 font-medium">-</span></p>
|
||||||
|
<p><span class="text-gray-500">Zip:</span> <span id="postal" class="text-gray-200 font-medium">-</span></p>
|
||||||
|
<p class="col-span-2"><span class="text-gray-500">Coords:</span> <span id="coords" class="font-mono text-xs text-purple-300">-</span></p>
|
||||||
|
<p class="col-span-2"><span class="text-gray-500">Time:</span> <span id="timezone" class="text-gray-200 font-medium">-</span></p>
|
||||||
|
<p id="geo-error" class="text-red-400 col-span-2 text-xs"></p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h2 class="text-xs font-bold text-gray-400 uppercase tracking-widest mb-2 border-b border-gray-700 pb-1">Network (ASN)</h2>
|
||||||
|
<div id="asn-info" class="min-h-[40px] space-y-1 text-sm text-gray-300">
|
||||||
|
<div id="asn-loader" class="loader"></div>
|
||||||
|
<div class="hidden">
|
||||||
|
<p><span class="text-gray-500">AS Number:</span> <span id="asn-number" class="font-mono text-purple-300">-</span></p>
|
||||||
|
<p><span class="text-gray-500">Org:</span> <span id="asn-org" class="font-medium text-white">-</span></p>
|
||||||
|
<p id="asn-error" class="text-red-400 text-xs"></p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="glass-card rounded-lg p-5">
|
||||||
|
<h2 class="text-xs font-bold text-gray-400 uppercase tracking-widest mb-2 border-b border-gray-700 pb-1">Hostname (rDNS)</h2>
|
||||||
|
<div id="rdns-info" class="min-h-[30px] text-sm text-gray-300">
|
||||||
|
<div id="rdns-loader" class="loader"></div>
|
||||||
|
<div class="hidden">
|
||||||
|
<ul id="rdns-list" class="list-none space-y-1 font-mono text-xs text-green-400"><li>-</li></ul>
|
||||||
|
<p id="rdns-error" class="text-red-400 text-xs"></p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Right column: map -->
|
||||||
|
<div class="space-y-4 fade-in" style="animation-delay:.2s">
|
||||||
|
<h2 class="text-lg font-semibold text-gray-200 flex items-center gap-2">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-purple-400" viewBox="0 0 20 20" fill="currentColor">
|
||||||
|
<path fill-rule="evenodd" d="M5.05 4.05a7 7 0 119.9 9.9L10 18.9l-4.95-4.95a7 7 0 010-9.9zM10 11a2 2 0 100-4 2 2 0 000 4z" clip-rule="evenodd"/>
|
||||||
|
</svg>
|
||||||
|
Location Visualization
|
||||||
|
</h2>
|
||||||
|
<div id="map-container" class="bg-gray-800/50 rounded-lg min-h-[400px] h-full flex items-center justify-center relative border border-gray-700/50 shadow-inner overflow-hidden">
|
||||||
|
<div id="map-loader" class="loader absolute z-10"></div>
|
||||||
|
<div id="map" class="w-full h-full rounded-lg hidden z-0 opacity-80 hover:opacity-100 transition-opacity duration-700"></div>
|
||||||
|
<p id="map-message" class="text-gray-400 hidden absolute text-sm">Could not load map.</p>
|
||||||
|
<div class="absolute inset-0 pointer-events-none rounded-lg ring-1 ring-inset ring-white/10"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- IP Lookup -->
|
||||||
|
<div class="mt-8 p-6 glass-card rounded-xl">
|
||||||
|
<h2 class="text-xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-purple-400 to-pink-500 mb-4 flex items-center gap-2">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-pink-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>
|
||||||
|
</svg>
|
||||||
|
IP Address / Domain Lookup
|
||||||
|
</h2>
|
||||||
|
<div class="flex flex-col sm:flex-row gap-3 mb-6">
|
||||||
|
<input type="text" id="lookup-ip-input" placeholder="Enter IP or Domain (e.g., 8.8.8.8 or google.com)"
|
||||||
|
class="flex-grow px-4 py-3 bg-gray-900/50 border border-gray-700/50 rounded-lg text-gray-200 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent font-mono transition-all placeholder-gray-600">
|
||||||
|
<button id="lookup-button" disabled
|
||||||
|
class="bg-gradient-to-r from-purple-600 to-pink-600 hover:from-purple-500 hover:to-pink-500 disabled:opacity-40 disabled:cursor-not-allowed text-white font-bold py-3 px-6 rounded-lg shadow-lg hover:shadow-purple-500/25 transition-all duration-200">
|
||||||
|
Lookup
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div id="lookup-error" class="text-red-400 mb-4 hidden p-3 bg-red-900/20 border border-red-500/30 rounded text-sm"></div>
|
||||||
|
|
||||||
|
<div id="lookup-results-section" class="hidden grid grid-cols-1 md:grid-cols-2 gap-8 mt-6 border-t border-gray-700/50 pt-6 fade-in">
|
||||||
|
<div class="space-y-6">
|
||||||
|
<h3 class="text-lg font-semibold text-gray-200">Result for: <span id="lookup-ip-address" class="font-mono text-purple-400 bg-purple-500/10 px-2 py-0.5 rounded"></span>
|
||||||
|
<button id="copy-lookup-ip-btn" class="copy-btn ml-2">copy</button>
|
||||||
|
</h3>
|
||||||
|
<div id="lookup-result-loader" class="loader hidden"></div>
|
||||||
|
<div id="lookup-geo-info" class="space-y-1 text-sm text-gray-300">
|
||||||
|
<h4 class="font-bold text-gray-500 uppercase text-xs tracking-wider mb-2">Geolocation</h4>
|
||||||
|
<div class="grid grid-cols-2 gap-x-2 gap-y-1">
|
||||||
|
<p><span class="text-gray-500">Country:</span> <span id="lookup-country" class="text-white">-</span></p>
|
||||||
|
<p><span class="text-gray-500">Region:</span> <span id="lookup-region" class="text-white">-</span></p>
|
||||||
|
<p><span class="text-gray-500">City:</span> <span id="lookup-city" class="text-white">-</span></p>
|
||||||
|
<p><span class="text-gray-500">Zip:</span> <span id="lookup-postal" class="text-white">-</span></p>
|
||||||
|
<p class="col-span-2"><span class="text-gray-500">Coords:</span> <span id="lookup-coords" class="font-mono text-purple-300">-</span></p>
|
||||||
|
<p class="col-span-2"><span class="text-gray-500">Time:</span> <span id="lookup-timezone" class="text-white">-</span></p>
|
||||||
|
<p id="lookup-geo-error" class="text-red-400 col-span-2"></p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div id="lookup-asn-info" class="space-y-1 text-sm text-gray-300">
|
||||||
|
<h4 class="font-bold text-gray-500 uppercase text-xs tracking-wider mb-2 mt-4">ASN</h4>
|
||||||
|
<p><span class="text-gray-500">Number:</span> <span id="lookup-asn-number" class="text-white font-mono">-</span></p>
|
||||||
|
<p><span class="text-gray-500">Org:</span> <span id="lookup-asn-org" class="text-white">-</span></p>
|
||||||
|
<p id="lookup-asn-error" class="text-red-400"></p>
|
||||||
|
</div>
|
||||||
|
<div id="lookup-rdns-info" class="space-y-1 text-sm text-gray-300">
|
||||||
|
<h4 class="font-bold text-gray-500 uppercase text-xs tracking-wider mb-2 mt-4">Reverse DNS</h4>
|
||||||
|
<ul id="lookup-rdns-list" class="list-none space-y-1 font-mono text-xs text-green-400"><li>-</li></ul>
|
||||||
|
<p id="lookup-rdns-error" class="text-red-400"></p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="space-y-6">
|
||||||
|
<h4 class="font-bold text-gray-500 uppercase text-xs tracking-wider mb-2">Location Map</h4>
|
||||||
|
<div id="lookup-map-container" class="glass-panel rounded-lg min-h-[250px] flex items-center justify-center relative overflow-hidden">
|
||||||
|
<div id="lookup-map-loader" class="loader hidden absolute z-10"></div>
|
||||||
|
<div id="lookup-map" class="w-full rounded hidden opacity-90"></div>
|
||||||
|
<p id="lookup-map-message" class="text-gray-400 hidden absolute">Could not load map.</p>
|
||||||
|
<div class="absolute inset-0 pointer-events-none ring-1 ring-inset ring-white/10 rounded-lg"></div>
|
||||||
|
</div>
|
||||||
|
<div class="flex flex-wrap gap-2 pt-2">
|
||||||
|
<button id="lookup-ping-button" disabled class="flex-1 bg-gray-700 hover:bg-gray-600 text-white font-bold py-2 px-4 rounded-lg text-sm transition-all disabled:opacity-50 disabled:cursor-not-allowed border border-gray-600 hover:border-gray-500 shadow-md">Ping</button>
|
||||||
|
<button id="lookup-trace-button" disabled class="flex-1 bg-gray-700 hover:bg-gray-600 text-white font-bold py-2 px-4 rounded-lg text-sm transition-all disabled:opacity-50 disabled:cursor-not-allowed border border-gray-600 hover:border-gray-500 shadow-md">Trace</button>
|
||||||
|
<button id="lookup-scan-button" disabled class="flex-1 bg-gray-700 hover:bg-gray-600 text-white font-bold py-2 px-4 rounded-lg text-sm transition-all disabled:opacity-50 disabled:cursor-not-allowed border border-gray-600 hover:border-gray-500 shadow-md">Port Scan</button>
|
||||||
|
</div>
|
||||||
|
<div id="lookup-ping-results" class="mt-4 text-sm hidden fade-in">
|
||||||
|
<h4 class="font-bold text-purple-400 mb-2 flex items-center gap-2">
|
||||||
|
<div class="w-2 h-2 bg-green-500 rounded-full animate-pulse"></div> Ping Results
|
||||||
|
</h4>
|
||||||
|
<div id="lookup-ping-loader" class="loader hidden"></div>
|
||||||
|
<pre id="lookup-ping-output" class="result-pre mt-1"></pre>
|
||||||
|
<p id="lookup-ping-error" class="text-red-400 mt-2"></p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Traceroute -->
|
||||||
|
<div id="traceroute-section" class="mt-8 p-6 glass-card rounded-xl hidden fade-in">
|
||||||
|
<h2 class="text-xl font-bold text-purple-300 border-b border-purple-500/30 pb-2 mb-4">Traceroute Results</h2>
|
||||||
|
<div class="flex items-center justify-between mb-4">
|
||||||
|
<div class="flex items-center gap-3 text-sm">
|
||||||
|
<div id="traceroute-loader" class="loader hidden"></div>
|
||||||
|
<span id="traceroute-message" class="text-gray-300"></span>
|
||||||
|
</div>
|
||||||
|
<button id="traceroute-stop-btn" class="stop-btn hidden">■ Stop</button>
|
||||||
|
</div>
|
||||||
|
<div id="traceroute-output" class="rounded-lg overflow-hidden"><pre class="m-0"></pre></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Port Scan -->
|
||||||
|
<div id="port-scan-section" class="mt-8 p-6 glass-card rounded-xl hidden fade-in">
|
||||||
|
<h2 class="text-xl font-bold text-purple-300 border-b border-purple-500/30 pb-2 mb-4">Port Scan Results</h2>
|
||||||
|
<div class="flex items-center justify-between mb-4">
|
||||||
|
<div class="flex items-center gap-3 text-sm">
|
||||||
|
<div id="port-scan-loader" class="loader hidden"></div>
|
||||||
|
<span id="port-scan-message" class="text-gray-300"></span>
|
||||||
|
</div>
|
||||||
|
<button id="port-scan-stop-btn" class="stop-btn hidden">■ Stop</button>
|
||||||
|
</div>
|
||||||
|
<div id="port-scan-output" class="text-sm font-mono bg-gray-900/50 p-4 rounded-lg border border-gray-700/50 max-h-[300px] overflow-y-auto"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="global-error" class="mt-6 p-4 bg-red-900/50 border border-red-500/50 text-red-100 rounded-lg hidden backdrop-blur shadow-lg"></div>
|
||||||
|
</div>`,
|
||||||
|
|
||||||
|
async init(search) {
|
||||||
|
// ── DOM refs ──────────────────────────────────────────────────
|
||||||
|
const ipAddressLink = document.getElementById('ip-address-link');
|
||||||
|
const ipAddressSpan = document.getElementById('ip-address');
|
||||||
|
const copyIpBtn = document.getElementById('copy-ip-btn');
|
||||||
|
const ipLoader = document.getElementById('ip-loader');
|
||||||
|
const geoLoader = document.getElementById('geo-loader');
|
||||||
|
const asnLoader = document.getElementById('asn-loader');
|
||||||
|
const rdnsLoader = document.getElementById('rdns-loader');
|
||||||
|
const mapLoader = document.getElementById('map-loader');
|
||||||
|
const mapEl = document.getElementById('map');
|
||||||
|
const mapMessage = document.getElementById('map-message');
|
||||||
|
const globalError = document.getElementById('global-error');
|
||||||
|
|
||||||
|
const lookupInput = document.getElementById('lookup-ip-input');
|
||||||
|
const lookupBtn = document.getElementById('lookup-button');
|
||||||
|
const lookupErrorEl = document.getElementById('lookup-error');
|
||||||
|
const lookupSection = document.getElementById('lookup-results-section');
|
||||||
|
const lookupIpEl = document.getElementById('lookup-ip-address');
|
||||||
|
const copyLookupIpBtn = document.getElementById('copy-lookup-ip-btn');
|
||||||
|
const lookupResLoader = document.getElementById('lookup-result-loader');
|
||||||
|
const lookupMapEl = document.getElementById('lookup-map');
|
||||||
|
const lookupMapLoader = document.getElementById('lookup-map-loader');
|
||||||
|
const lookupMapMsg = document.getElementById('lookup-map-message');
|
||||||
|
const lookupPingBtn = document.getElementById('lookup-ping-button');
|
||||||
|
const lookupTraceBtn = document.getElementById('lookup-trace-button');
|
||||||
|
const lookupScanBtn = document.getElementById('lookup-scan-button');
|
||||||
|
const lookupPingRes = document.getElementById('lookup-ping-results');
|
||||||
|
const lookupPingLoader= document.getElementById('lookup-ping-loader');
|
||||||
|
const lookupPingOutput= document.getElementById('lookup-ping-output');
|
||||||
|
const lookupPingError = document.getElementById('lookup-ping-error');
|
||||||
|
|
||||||
|
const tracerouteSection = document.getElementById('traceroute-section');
|
||||||
|
const tracerouteOutput = document.querySelector('#traceroute-output pre');
|
||||||
|
const tracerouteLoader = document.getElementById('traceroute-loader');
|
||||||
|
const tracerouteMessage = document.getElementById('traceroute-message');
|
||||||
|
const tracerouteStopBtn = document.getElementById('traceroute-stop-btn');
|
||||||
|
|
||||||
|
const portScanSection = document.getElementById('port-scan-section');
|
||||||
|
const portScanOutput = document.getElementById('port-scan-output');
|
||||||
|
const portScanLoader = document.getElementById('port-scan-loader');
|
||||||
|
const portScanMessage = document.getElementById('port-scan-message');
|
||||||
|
const portScanStopBtn = document.getElementById('port-scan-stop-btn');
|
||||||
|
|
||||||
|
// ── State ────────────────────────────────────────────────────
|
||||||
|
let map = null, lookupMap = null, currentIp = null, currentLookupIp = null;
|
||||||
|
let eventSource = null, portScanEventSource = null;
|
||||||
|
|
||||||
|
// ── Helpers ──────────────────────────────────────────────────
|
||||||
|
function showGlobalErr(msg) {
|
||||||
|
if (!globalError) return;
|
||||||
|
globalError.textContent = `Error: ${msg}`;
|
||||||
|
globalError.classList.remove('hidden');
|
||||||
|
}
|
||||||
|
|
||||||
|
function isValidIp(input) {
|
||||||
|
const v4 = /^(?:(?:25[0-5]|2[0-4]\d|[01]?\d\d?)\.){3}(?:25[0-5]|2[0-4]\d|[01]?\d\d?)$/;
|
||||||
|
const v6 = /^(?:(?:[a-fA-F0-9]{1,4}:){7}[a-fA-F0-9]{1,4}|(?:[a-fA-F0-9]{1,4}:){1,7}:|(?:[a-fA-F0-9]{1,4}:){1,6}:[a-fA-F0-9]{1,4}|(?:[a-fA-F0-9]{1,4}:){1,5}(?::[a-fA-F0-9]{1,4}){1,2}|(?:[a-fA-F0-9]{1,4}:){1,4}(?::[a-fA-F0-9]{1,4}){1,3}|(?:[a-fA-F0-9]{1,4}:){1,3}(?::[a-fA-F0-9]{1,4}){1,4}|(?:[a-fA-F0-9]{1,4}:){1,2}(?::[a-fA-F0-9]{1,4}){1,5}|[a-fA-F0-9]{1,4}:(?::[a-fA-F0-9]{1,4}){1,6}|:(?::[a-fA-F0-9]{1,4}){1,7}|::)$/;
|
||||||
|
return v4.test(input) || v6.test(input);
|
||||||
|
}
|
||||||
|
|
||||||
|
function updateField(el, val, loaderEl = null, errorEl = null, def = '-') {
|
||||||
|
if (loaderEl) loaderEl.classList.add('hidden');
|
||||||
|
if (errorEl) errorEl.textContent = '';
|
||||||
|
const container = el?.closest('div:not(.loader)');
|
||||||
|
if (container?.classList.contains('hidden')) container.classList.remove('hidden');
|
||||||
|
if (val && typeof val === 'object' && val.error) {
|
||||||
|
if (el) el.textContent = def;
|
||||||
|
if (errorEl) errorEl.textContent = val.error;
|
||||||
|
} else if (val != null && val !== '') {
|
||||||
|
if (el) el.textContent = val;
|
||||||
|
} else {
|
||||||
|
if (el) el.textContent = def;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function updateRdns(listEl, data, loaderEl = null, errorEl = null) {
|
||||||
|
if (loaderEl) loaderEl.classList.add('hidden');
|
||||||
|
if (listEl) listEl.innerHTML = '';
|
||||||
|
if (errorEl) errorEl.textContent = '';
|
||||||
|
const container = listEl?.closest('div:not(.loader)');
|
||||||
|
if (container?.classList.contains('hidden')) container.classList.remove('hidden');
|
||||||
|
if (Array.isArray(data)) {
|
||||||
|
if (data.length > 0) data.forEach(h => { const li = document.createElement('li'); li.textContent = h; listEl.appendChild(li); });
|
||||||
|
else if (listEl) listEl.innerHTML = '<li>No rDNS records found.</li>';
|
||||||
|
} else if (data?.error) {
|
||||||
|
if (listEl) listEl.innerHTML = '<li>-</li>';
|
||||||
|
if (errorEl) errorEl.textContent = data.error;
|
||||||
|
} else {
|
||||||
|
if (listEl) listEl.innerHTML = '<li>-</li>';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function initOrUpdateMap(mapId, lat, lon, mapElement, loaderEl, msgEl) {
|
||||||
|
if (!mapElement || !loaderEl || !msgEl) return null;
|
||||||
|
loaderEl.classList.add('hidden');
|
||||||
|
let inst = window[mapId + '_instance'];
|
||||||
|
if (lat != null && lon != null) {
|
||||||
|
mapElement.classList.remove('hidden');
|
||||||
|
msgEl.classList.add('hidden');
|
||||||
|
if (inst) {
|
||||||
|
inst.setView([lat, lon], 13);
|
||||||
|
inst.eachLayer(l => { if (l instanceof L.Marker) inst.removeLayer(l); });
|
||||||
|
L.marker([lat, lon]).addTo(inst).bindPopup('Approximate Location').openPopup();
|
||||||
|
} else {
|
||||||
|
try {
|
||||||
|
inst = L.map(mapId).setView([lat, lon], 13);
|
||||||
|
L.tileLayer('https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png', {
|
||||||
|
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> © <a href="https://carto.com/attributions">CARTO</a>',
|
||||||
|
subdomains: 'abcd', maxZoom: 19
|
||||||
|
}).addTo(inst);
|
||||||
|
L.marker([lat, lon]).addTo(inst).bindPopup('Approximate Location').openPopup();
|
||||||
|
window[mapId + '_instance'] = inst;
|
||||||
|
} catch (e) {
|
||||||
|
console.error('Map init failed:', e);
|
||||||
|
mapElement.classList.add('hidden');
|
||||||
|
msgEl.classList.remove('hidden');
|
||||||
|
msgEl.textContent = 'Error initializing map.';
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
setTimeout(() => { if (window[mapId + '_instance']) window[mapId + '_instance'].invalidateSize(); }, 100);
|
||||||
|
return inst;
|
||||||
|
} else {
|
||||||
|
mapElement.classList.add('hidden');
|
||||||
|
msgEl.classList.remove('hidden');
|
||||||
|
msgEl.textContent = 'Map could not be loaded (missing coordinates).';
|
||||||
|
if (inst) { inst.remove(); window[mapId + '_instance'] = null; }
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// ── Copy buttons ─────────────────────────────────────────────
|
||||||
|
setupCopyBtn(copyIpBtn, () => ipAddressSpan.textContent);
|
||||||
|
setupCopyBtn(copyLookupIpBtn, () => lookupIpEl.textContent);
|
||||||
|
|
||||||
|
// ── Lookup button enable/disable ─────────────────────────────
|
||||||
|
const syncLookupBtn = () => { lookupBtn.disabled = !lookupInput.value.trim(); };
|
||||||
|
lookupInput.addEventListener('input', syncLookupBtn);
|
||||||
|
|
||||||
|
// ── Own IP fetch ─────────────────────────────────────────────
|
||||||
|
async function fetchIpInfo() {
|
||||||
|
globalError.classList.add('hidden');
|
||||||
|
[ipLoader, geoLoader, asnLoader, rdnsLoader, mapLoader].forEach(l => l?.classList.remove('hidden'));
|
||||||
|
ipAddressLink.classList.add('hidden');
|
||||||
|
copyIpBtn.classList.add('hidden');
|
||||||
|
mapEl.classList.add('hidden');
|
||||||
|
mapMessage.classList.add('hidden');
|
||||||
|
|
||||||
|
try {
|
||||||
|
const r = await fetch(`${API}/ipinfo`);
|
||||||
|
if (!r.ok) throw new Error(`${r.statusText} (${r.status})`);
|
||||||
|
const data = await r.json();
|
||||||
|
currentIp = data.ip;
|
||||||
|
|
||||||
|
ipAddressSpan.textContent = data.ip;
|
||||||
|
ipAddressLink.classList.remove('hidden');
|
||||||
|
copyIpBtn.classList.remove('hidden');
|
||||||
|
ipLoader.classList.add('hidden');
|
||||||
|
ipAddressLink.addEventListener('click', e => {
|
||||||
|
e.preventDefault();
|
||||||
|
if (currentIp) window._router.navigate('/whois', { query: currentIp });
|
||||||
|
});
|
||||||
|
|
||||||
|
updateField(document.getElementById('country'), data.geo?.countryName ? `${data.geo.countryName} (${data.geo.country})` : null, null, document.getElementById('geo-error'));
|
||||||
|
updateField(document.getElementById('region'), data.geo?.region);
|
||||||
|
updateField(document.getElementById('city'), data.geo?.city);
|
||||||
|
updateField(document.getElementById('postal'), data.geo?.postalCode);
|
||||||
|
updateField(document.getElementById('coords'), data.geo?.latitude ? `${data.geo.latitude}, ${data.geo.longitude}` : null);
|
||||||
|
updateField(document.getElementById('timezone'), data.geo?.timezone, geoLoader);
|
||||||
|
|
||||||
|
const asnNum = (data.asn && !data.asn.error) ? data.asn.number : null;
|
||||||
|
if (asnNum) {
|
||||||
|
const asnContainer = document.getElementById('asn-number')?.closest('div:not(.loader)');
|
||||||
|
if (asnContainer) asnContainer.classList.remove('hidden');
|
||||||
|
document.getElementById('asn-number').innerHTML =
|
||||||
|
`<a href="/asn?asn=${asnNum}" class="hover:text-purple-200 underline decoration-dotted transition-colors" title="Open ASN Lookup">AS${asnNum}</a>`;
|
||||||
|
} else {
|
||||||
|
updateField(document.getElementById('asn-number'), null, null, document.getElementById('asn-error'), data.asn?.error || '-');
|
||||||
|
}
|
||||||
|
updateField(document.getElementById('asn-org'), data.asn?.organization, asnLoader);
|
||||||
|
updateRdns(document.getElementById('rdns-list'), data.rdns, rdnsLoader, document.getElementById('rdns-error'));
|
||||||
|
map = initOrUpdateMap('map', data.geo?.latitude, data.geo?.longitude, mapEl, mapLoader, mapMessage);
|
||||||
|
|
||||||
|
} catch (err) {
|
||||||
|
console.error('Failed to fetch IP info:', err);
|
||||||
|
showGlobalErr(`Could not load IP information. ${err.message}`);
|
||||||
|
[ipLoader, geoLoader, asnLoader, rdnsLoader, mapLoader].forEach(l => l?.classList.add('hidden'));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// ── Lookup ───────────────────────────────────────────────────
|
||||||
|
function resetLookup() {
|
||||||
|
lookupSection.classList.add('hidden');
|
||||||
|
lookupResLoader.classList.add('hidden');
|
||||||
|
lookupMapLoader.classList.add('hidden');
|
||||||
|
lookupMapEl.classList.add('hidden');
|
||||||
|
lookupMapMsg.classList.add('hidden');
|
||||||
|
lookupPingRes.classList.add('hidden');
|
||||||
|
lookupPingLoader.classList.add('hidden');
|
||||||
|
portScanSection.classList.add('hidden');
|
||||||
|
portScanOutput.innerHTML = '';
|
||||||
|
[lookupIpEl, document.getElementById('lookup-country'), document.getElementById('lookup-region'),
|
||||||
|
document.getElementById('lookup-city'), document.getElementById('lookup-postal'),
|
||||||
|
document.getElementById('lookup-coords'), document.getElementById('lookup-timezone'),
|
||||||
|
document.getElementById('lookup-asn-number'), document.getElementById('lookup-asn-org'),
|
||||||
|
document.getElementById('lookup-geo-error'), document.getElementById('lookup-asn-error'),
|
||||||
|
document.getElementById('lookup-rdns-error')].forEach(el => { if (el) el.textContent = ''; });
|
||||||
|
document.getElementById('lookup-rdns-list').innerHTML = '<li>-</li>';
|
||||||
|
lookupPingOutput.textContent = '';
|
||||||
|
lookupPingError.textContent = '';
|
||||||
|
[lookupPingBtn, lookupTraceBtn, lookupScanBtn].forEach(b => { if (b) b.disabled = true; });
|
||||||
|
currentLookupIp = null;
|
||||||
|
if (window['lookup-map_instance']) { window['lookup-map_instance'].remove(); window['lookup-map_instance'] = null; }
|
||||||
|
if (portScanEventSource) { portScanEventSource.close(); portScanEventSource = null; }
|
||||||
|
}
|
||||||
|
|
||||||
|
async function doLookup(query) {
|
||||||
|
resetLookup();
|
||||||
|
lookupErrorEl.classList.add('hidden');
|
||||||
|
globalError.classList.add('hidden');
|
||||||
|
|
||||||
|
const url = new URL(location.href);
|
||||||
|
url.searchParams.set('ip', query);
|
||||||
|
history.replaceState({}, '', url);
|
||||||
|
|
||||||
|
lookupSection.classList.remove('hidden');
|
||||||
|
lookupResLoader.classList.remove('hidden');
|
||||||
|
lookupMapLoader.classList.remove('hidden');
|
||||||
|
|
||||||
|
let ipToLookup = query;
|
||||||
|
if (!isValidIp(query)) {
|
||||||
|
try {
|
||||||
|
const r = await fetch(`${API}/dns-lookup?domain=${encodeURIComponent(query)}&type=A`);
|
||||||
|
const data = await r.json();
|
||||||
|
if (r.ok && data.success && data.records?.length) {
|
||||||
|
ipToLookup = Array.isArray(data.records) ? data.records[0] : data.records;
|
||||||
|
} else {
|
||||||
|
const r2 = await fetch(`${API}/dns-lookup?domain=${encodeURIComponent(query)}&type=AAAA`);
|
||||||
|
const data2 = await r2.json();
|
||||||
|
if (r2.ok && data2.success && data2.records?.length) {
|
||||||
|
ipToLookup = Array.isArray(data2.records) ? data2.records[0] : data2.records;
|
||||||
|
} else {
|
||||||
|
throw new Error(data.error || 'No A or AAAA records found.');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
} catch (err) {
|
||||||
|
lookupErrorEl.textContent = `Error: Could not resolve domain — ${err.message}`;
|
||||||
|
lookupErrorEl.classList.remove('hidden');
|
||||||
|
resetLookup();
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
try {
|
||||||
|
const r = await fetch(`${API}/lookup?targetIp=${encodeURIComponent(ipToLookup)}`);
|
||||||
|
const data = await r.json();
|
||||||
|
if (!r.ok) throw new Error(data.error || `HTTP ${r.status}`);
|
||||||
|
currentLookupIp = data.ip;
|
||||||
|
|
||||||
|
updateField(lookupIpEl, data.ip);
|
||||||
|
updateField(document.getElementById('lookup-country'), data.geo?.countryName ? `${data.geo.countryName} (${data.geo.country})` : null, null, document.getElementById('lookup-geo-error'));
|
||||||
|
updateField(document.getElementById('lookup-region'), data.geo?.region);
|
||||||
|
updateField(document.getElementById('lookup-city'), data.geo?.city);
|
||||||
|
updateField(document.getElementById('lookup-postal'), data.geo?.postalCode);
|
||||||
|
updateField(document.getElementById('lookup-coords'), data.geo?.latitude ? `${data.geo.latitude}, ${data.geo.longitude}` : null);
|
||||||
|
updateField(document.getElementById('lookup-timezone'), data.geo?.timezone);
|
||||||
|
|
||||||
|
if (data.asn?.number) {
|
||||||
|
document.getElementById('lookup-asn-number').innerHTML =
|
||||||
|
`<a href="/asn?asn=${data.asn.number}" class="text-purple-400 hover:text-purple-300 underline decoration-dotted transition-colors font-mono">AS${data.asn.number}</a>`;
|
||||||
|
} else {
|
||||||
|
updateField(document.getElementById('lookup-asn-number'), data.asn?.number, null, document.getElementById('lookup-asn-error'));
|
||||||
|
}
|
||||||
|
updateField(document.getElementById('lookup-asn-org'), data.asn?.organization);
|
||||||
|
updateRdns(document.getElementById('lookup-rdns-list'), data.rdns, null, document.getElementById('lookup-rdns-error'));
|
||||||
|
lookupMap = initOrUpdateMap('lookup-map', data.geo?.latitude, data.geo?.longitude, lookupMapEl, lookupMapLoader, lookupMapMsg);
|
||||||
|
[lookupPingBtn, lookupTraceBtn, lookupScanBtn].forEach(b => { if (b) b.disabled = false; });
|
||||||
|
|
||||||
|
} catch (err) {
|
||||||
|
lookupErrorEl.textContent = `Error: Lookup failed — ${err.message}`;
|
||||||
|
lookupErrorEl.classList.remove('hidden');
|
||||||
|
lookupMapMsg.textContent = 'Map could not be loaded.';
|
||||||
|
lookupMapMsg.classList.remove('hidden');
|
||||||
|
lookupMapEl.classList.add('hidden');
|
||||||
|
lookupMapLoader.classList.add('hidden');
|
||||||
|
resetLookup();
|
||||||
|
} finally {
|
||||||
|
lookupResLoader.classList.add('hidden');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// ── Ping ─────────────────────────────────────────────────────
|
||||||
|
async function runPing(ip) {
|
||||||
|
lookupPingRes.classList.remove('hidden');
|
||||||
|
lookupPingLoader.classList.remove('hidden');
|
||||||
|
lookupPingOutput.textContent = '';
|
||||||
|
lookupPingError.textContent = '';
|
||||||
|
try {
|
||||||
|
const r = await fetch(`${API}/ping?targetIp=${encodeURIComponent(ip)}`);
|
||||||
|
const data = await r.json();
|
||||||
|
if (!r.ok || !data.success) throw new Error(data.error || `HTTP ${r.status}`);
|
||||||
|
let out = `--- Ping Statistics for ${ip} ---\n`;
|
||||||
|
if (data.stats) {
|
||||||
|
out += `Packets: ${data.stats.packets.transmitted} sent, ${data.stats.packets.received} received, ${data.stats.packets.lossPercent}% loss\n`;
|
||||||
|
if (data.stats.rtt) out += `RTT (ms): min=${data.stats.rtt.min} avg=${data.stats.rtt.avg} max=${data.stats.rtt.max}\n`;
|
||||||
|
}
|
||||||
|
out += `\n--- Raw Output ---\n${data.rawOutput || ''}`;
|
||||||
|
lookupPingOutput.textContent = out;
|
||||||
|
} catch (err) {
|
||||||
|
lookupPingError.textContent = `Ping Error: ${err.message}`;
|
||||||
|
} finally {
|
||||||
|
lookupPingLoader.classList.add('hidden');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// ── Traceroute ───────────────────────────────────────────────
|
||||||
|
function startTraceroute(ip) {
|
||||||
|
if (eventSource) { eventSource.close(); eventSource = null; }
|
||||||
|
tracerouteSection.classList.remove('hidden');
|
||||||
|
tracerouteOutput.textContent = '';
|
||||||
|
tracerouteLoader.classList.remove('hidden');
|
||||||
|
tracerouteStopBtn.classList.remove('hidden');
|
||||||
|
tracerouteMessage.textContent = `Starting traceroute to ${ip}…`;
|
||||||
|
globalError.classList.add('hidden');
|
||||||
|
|
||||||
|
eventSource = new EventSource(`${API}/traceroute?targetIp=${encodeURIComponent(ip)}`);
|
||||||
|
|
||||||
|
eventSource.onopen = () => { tracerouteMessage.textContent = `Traceroute to ${ip} in progress…`; };
|
||||||
|
eventSource.onerror = () => {
|
||||||
|
tracerouteMessage.textContent = eventSource.readyState === EventSource.CLOSED
|
||||||
|
? 'Connection closed.' : 'Connection error.';
|
||||||
|
tracerouteLoader.classList.add('hidden');
|
||||||
|
tracerouteStopBtn.classList.add('hidden');
|
||||||
|
eventSource.close();
|
||||||
|
};
|
||||||
|
eventSource.addEventListener('hop', e => {
|
||||||
|
try { displayHop(JSON.parse(e.data)); } catch { displayTraceLine(`[Parse error: ${e.data}]`, 'error-line'); }
|
||||||
|
});
|
||||||
|
eventSource.addEventListener('info', e => {
|
||||||
|
try { displayTraceLine(JSON.parse(e.data).message, 'info-line'); } catch {}
|
||||||
|
});
|
||||||
|
eventSource.addEventListener('error', e => {
|
||||||
|
try { const d = JSON.parse(e.data); displayTraceLine(d.error, 'error-line'); } catch {}
|
||||||
|
});
|
||||||
|
eventSource.addEventListener('end', e => {
|
||||||
|
try {
|
||||||
|
const d = JSON.parse(e.data);
|
||||||
|
const msg = `Traceroute finished${d.exitCode === 0 ? ' successfully' : ` (exit code ${d.exitCode})`}.`;
|
||||||
|
displayTraceLine(msg, 'end-line');
|
||||||
|
tracerouteMessage.textContent = msg;
|
||||||
|
} catch {}
|
||||||
|
tracerouteLoader.classList.add('hidden');
|
||||||
|
tracerouteStopBtn.classList.add('hidden');
|
||||||
|
eventSource.close();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function stopTraceroute() {
|
||||||
|
if (eventSource) { eventSource.close(); eventSource = null; }
|
||||||
|
tracerouteLoader.classList.add('hidden');
|
||||||
|
tracerouteStopBtn.classList.add('hidden');
|
||||||
|
tracerouteMessage.textContent = 'Traceroute stopped.';
|
||||||
|
displayTraceLine('— Stopped by user —', 'info-line');
|
||||||
|
}
|
||||||
|
|
||||||
|
function displayTraceLine(text, cls = '') {
|
||||||
|
const div = document.createElement('div');
|
||||||
|
if (cls) div.classList.add(cls);
|
||||||
|
div.classList.add('fade-in');
|
||||||
|
div.textContent = text;
|
||||||
|
tracerouteOutput.appendChild(div);
|
||||||
|
tracerouteOutput.scrollTop = tracerouteOutput.scrollHeight;
|
||||||
|
}
|
||||||
|
|
||||||
|
function displayHop(hop) {
|
||||||
|
const div = document.createElement('div');
|
||||||
|
div.classList.add('hop-line', 'fade-in');
|
||||||
|
const num = document.createElement('span'); num.classList.add('hop-number'); num.textContent = hop.hop || '?'; div.appendChild(num);
|
||||||
|
if (hop.ip) {
|
||||||
|
const ip = document.createElement('span'); ip.classList.add('hop-ip'); ip.textContent = hop.ip; div.appendChild(ip);
|
||||||
|
if (hop.hostname) { const h = document.createElement('span'); h.classList.add('hop-hostname'); h.textContent = ` (${hop.hostname})`; div.appendChild(h); }
|
||||||
|
} else if (hop.rtt?.every(r => r === '*')) {
|
||||||
|
const t = document.createElement('span'); t.classList.add('hop-timeout'); t.textContent = '* * *'; div.appendChild(t);
|
||||||
|
} else {
|
||||||
|
div.appendChild(document.createTextNode(hop.rawLine || 'Unknown hop'));
|
||||||
|
}
|
||||||
|
if (Array.isArray(hop.rtt)) {
|
||||||
|
hop.rtt.forEach(r => {
|
||||||
|
const s = document.createElement('span');
|
||||||
|
s.classList.add(r === '*' ? 'hop-timeout' : 'hop-rtt');
|
||||||
|
s.textContent = r === '*' ? ' *' : ` ${r} ms`;
|
||||||
|
div.appendChild(s);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
tracerouteOutput.appendChild(div);
|
||||||
|
tracerouteOutput.scrollTop = tracerouteOutput.scrollHeight;
|
||||||
|
}
|
||||||
|
|
||||||
|
// ── Port Scan ────────────────────────────────────────────────
|
||||||
|
function startPortScan(ip) {
|
||||||
|
if (portScanEventSource) { portScanEventSource.close(); portScanEventSource = null; }
|
||||||
|
portScanSection.classList.remove('hidden');
|
||||||
|
portScanOutput.innerHTML = '';
|
||||||
|
portScanLoader.classList.remove('hidden');
|
||||||
|
portScanStopBtn.classList.remove('hidden');
|
||||||
|
portScanMessage.textContent = `Starting port scan for ${ip}…`;
|
||||||
|
|
||||||
|
portScanEventSource = new EventSource(`${API}/port-scan?targetIp=${encodeURIComponent(ip)}`);
|
||||||
|
portScanEventSource.onopen = () => {};
|
||||||
|
portScanEventSource.onerror = () => {
|
||||||
|
portScanMessage.textContent = 'Connection error during port scan.';
|
||||||
|
portScanLoader.classList.add('hidden');
|
||||||
|
portScanStopBtn.classList.add('hidden');
|
||||||
|
portScanEventSource.close();
|
||||||
|
};
|
||||||
|
portScanEventSource.addEventListener('info', e => {
|
||||||
|
try { portScanMessage.textContent = JSON.parse(e.data).message; } catch {}
|
||||||
|
});
|
||||||
|
portScanEventSource.addEventListener('port_status', e => {
|
||||||
|
try { displayPortResult(JSON.parse(e.data)); } catch {}
|
||||||
|
});
|
||||||
|
portScanEventSource.addEventListener('error', e => {
|
||||||
|
try { displayPortResult({ error: JSON.parse(e.data).error }); } catch {}
|
||||||
|
});
|
||||||
|
portScanEventSource.addEventListener('end', e => {
|
||||||
|
try { portScanMessage.textContent = JSON.parse(e.data).message; } catch {}
|
||||||
|
portScanLoader.classList.add('hidden');
|
||||||
|
portScanStopBtn.classList.add('hidden');
|
||||||
|
portScanEventSource.close();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function stopPortScan() {
|
||||||
|
if (portScanEventSource) { portScanEventSource.close(); portScanEventSource = null; }
|
||||||
|
portScanLoader.classList.add('hidden');
|
||||||
|
portScanStopBtn.classList.add('hidden');
|
||||||
|
portScanMessage.textContent = 'Port scan stopped.';
|
||||||
|
}
|
||||||
|
|
||||||
|
function displayPortResult(data) {
|
||||||
|
const div = document.createElement('div');
|
||||||
|
div.classList.add('mb-1', 'fade-in');
|
||||||
|
if (data.error) {
|
||||||
|
div.innerHTML = `<span class="text-red-400">Error: ${data.error}</span>`;
|
||||||
|
} else {
|
||||||
|
const colors = { open: 'text-green-400', closed: 'text-red-400', timeout: 'text-yellow-400' };
|
||||||
|
const labels = { open: 'OPEN', closed: 'CLOSED', timeout: 'TIMEOUT (Filtered?)' };
|
||||||
|
const col = colors[data.status] || 'text-gray-400';
|
||||||
|
const lbl = labels[data.status] || (data.status || '').toUpperCase();
|
||||||
|
div.innerHTML = `Port <span class="font-bold w-12 inline-block">${data.port}</span> <span class="w-24 inline-block">(${data.service})</span>: <span class="font-bold ${col}">${lbl}</span>`;
|
||||||
|
}
|
||||||
|
portScanOutput.appendChild(div);
|
||||||
|
portScanOutput.scrollTop = portScanOutput.scrollHeight;
|
||||||
|
}
|
||||||
|
|
||||||
|
// ── Event listeners ──────────────────────────────────────────
|
||||||
|
lookupBtn.addEventListener('click', () => { const q = lookupInput.value.trim(); if (q) doLookup(q); });
|
||||||
|
lookupInput.addEventListener('keypress', e => { if (e.key === 'Enter' && !lookupBtn.disabled) { const q = lookupInput.value.trim(); if (q) doLookup(q); } });
|
||||||
|
lookupPingBtn.addEventListener('click', () => { if (currentLookupIp) runPing(currentLookupIp); });
|
||||||
|
lookupTraceBtn.addEventListener('click', () => { if (currentLookupIp) startTraceroute(currentLookupIp); });
|
||||||
|
lookupScanBtn.addEventListener('click', () => { if (currentLookupIp) startPortScan(currentLookupIp); });
|
||||||
|
tracerouteStopBtn.addEventListener('click', stopTraceroute);
|
||||||
|
portScanStopBtn.addEventListener('click', stopPortScan);
|
||||||
|
|
||||||
|
// ── Bootstrap ────────────────────────────────────────────────
|
||||||
|
fetchIpInfo();
|
||||||
|
|
||||||
|
const params = new URLSearchParams(search);
|
||||||
|
const ipParam = params.get('ip');
|
||||||
|
if (ipParam) { lookupInput.value = ipParam; syncLookupBtn(); doLookup(ipParam); }
|
||||||
|
|
||||||
|
// ── Cleanup ──────────────────────────────────────────────────
|
||||||
|
return () => {
|
||||||
|
if (eventSource) { eventSource.close(); eventSource = null; }
|
||||||
|
if (portScanEventSource) { portScanEventSource.close(); portScanEventSource = null; }
|
||||||
|
if (window['map_instance']) { window['map_instance'].remove(); window['map_instance'] = null; }
|
||||||
|
if (window['lookup-map_instance']) { window['lookup-map_instance'].remove(); window['lookup-map_instance'] = null; }
|
||||||
|
};
|
||||||
|
}
|
||||||
|
};
|
||||||
@@ -0,0 +1,76 @@
|
|||||||
|
import { API, showError } from '../shared.js';
|
||||||
|
|
||||||
|
export const page = {
|
||||||
|
title: 'MAC Vendor Lookup',
|
||||||
|
|
||||||
|
template: () => `
|
||||||
|
<div class="container mx-auto max-w-5xl glass-panel rounded-xl shadow-2xl p-6 md:p-8 backdrop-blur-xl border border-gray-800/50">
|
||||||
|
<h1 class="text-3xl font-bold mb-8 text-center text-gradient">MAC Address Vendor Lookup</h1>
|
||||||
|
|
||||||
|
<div class="p-6 glass-card rounded-xl">
|
||||||
|
<div class="flex flex-col sm:flex-row gap-3 mb-6">
|
||||||
|
<input type="text" id="mac-input" placeholder="Enter MAC address (e.g., 00:1A:2B:3C:4D:5E)"
|
||||||
|
class="flex-grow px-4 py-3 bg-gray-900/50 border border-gray-700/50 rounded-lg text-gray-200 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent font-mono transition-all placeholder-gray-600">
|
||||||
|
<button id="mac-lookup-button" disabled
|
||||||
|
class="bg-gradient-to-r from-purple-600 to-pink-600 hover:from-purple-500 hover:to-pink-500 disabled:opacity-40 disabled:cursor-not-allowed text-white font-bold py-3 px-6 rounded-lg shadow-lg transition-all duration-200">
|
||||||
|
Find Vendor
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div id="mac-lookup-error" class="hidden mb-4 p-3 bg-red-900/20 border border-red-500/30 rounded text-red-400 text-sm"></div>
|
||||||
|
|
||||||
|
<div id="mac-lookup-results-section" class="hidden mt-6 border-t border-gray-700/50 pt-6 fade-in">
|
||||||
|
<h3 class="text-lg font-semibold text-purple-300 mb-4 flex items-center justify-center gap-2">
|
||||||
|
<div class="w-1.5 h-6 bg-purple-500 rounded-full"></div>
|
||||||
|
Vendor for: <span id="mac-lookup-query" class="font-mono text-purple-400 ml-1"></span>
|
||||||
|
</h3>
|
||||||
|
<div id="mac-lookup-loader" class="loader hidden mb-4 mx-auto"></div>
|
||||||
|
<pre id="mac-lookup-output" class="result-pre text-center text-xl"></pre>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="global-error" class="mt-6 p-4 bg-red-900/50 border border-red-500/50 text-red-100 rounded-lg hidden backdrop-blur shadow-lg"></div>
|
||||||
|
</div>`,
|
||||||
|
|
||||||
|
async init(search) {
|
||||||
|
const input = document.getElementById('mac-input');
|
||||||
|
const btn = document.getElementById('mac-lookup-button');
|
||||||
|
const errorEl = document.getElementById('mac-lookup-error');
|
||||||
|
const section = document.getElementById('mac-lookup-results-section');
|
||||||
|
const queryEl = document.getElementById('mac-lookup-query');
|
||||||
|
const loader = document.getElementById('mac-lookup-loader');
|
||||||
|
const output = document.getElementById('mac-lookup-output');
|
||||||
|
|
||||||
|
const syncBtn = () => { btn.disabled = !input.value.trim(); };
|
||||||
|
input.addEventListener('input', syncBtn);
|
||||||
|
|
||||||
|
async function doLookup() {
|
||||||
|
const mac = input.value.trim();
|
||||||
|
if (!mac) return;
|
||||||
|
|
||||||
|
showError(errorEl, null);
|
||||||
|
section.classList.remove('hidden');
|
||||||
|
loader.classList.remove('hidden');
|
||||||
|
output.textContent = '';
|
||||||
|
queryEl.textContent = mac;
|
||||||
|
|
||||||
|
try {
|
||||||
|
const r = await fetch(`${API}/mac-lookup?mac=${encodeURIComponent(mac)}`);
|
||||||
|
const data = await r.json();
|
||||||
|
if (!r.ok || !data.success) throw new Error(data.error || `HTTP ${r.status}`);
|
||||||
|
output.textContent = data.vendor || 'No vendor found.';
|
||||||
|
} catch (err) {
|
||||||
|
showError(errorEl, err.message);
|
||||||
|
output.textContent = '';
|
||||||
|
} finally {
|
||||||
|
loader.classList.add('hidden');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
btn.addEventListener('click', doLookup);
|
||||||
|
input.addEventListener('keypress', e => { if (e.key === 'Enter' && !btn.disabled) doLookup(); });
|
||||||
|
|
||||||
|
const params = new URLSearchParams(search);
|
||||||
|
const m = params.get('mac');
|
||||||
|
if (m) { input.value = m; syncBtn(); doLookup(); }
|
||||||
|
}
|
||||||
|
};
|
||||||
@@ -0,0 +1,205 @@
|
|||||||
|
export const page = {
|
||||||
|
title: 'Subnetz Rechner',
|
||||||
|
|
||||||
|
template: () => `
|
||||||
|
<div class="container mx-auto max-w-5xl glass-panel rounded-xl shadow-2xl p-6 md:p-8 backdrop-blur-xl border border-gray-800/50">
|
||||||
|
<h2 class="text-3xl font-bold mb-8 text-center text-gradient">IP Subnetz Rechner</h2>
|
||||||
|
|
||||||
|
<form id="subnet-form" class="mb-8 glass-card p-6 rounded-xl">
|
||||||
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-4">
|
||||||
|
<div>
|
||||||
|
<label for="ip-address" class="block text-gray-400 text-sm font-bold mb-2 uppercase tracking-wide">IP Adresse:</label>
|
||||||
|
<input type="text" id="ip-address" name="ip-address" placeholder="z.B. 192.168.1.1" required
|
||||||
|
class="w-full px-4 py-3 bg-gray-900/50 border border-gray-700/50 rounded-lg text-gray-200 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent font-mono transition-all">
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label for="cidr" class="block text-gray-400 text-sm font-bold mb-2 uppercase tracking-wide">CIDR / Maske:</label>
|
||||||
|
<input type="text" id="cidr" name="cidr" placeholder="z.B. 24 oder 255.255.255.0" required
|
||||||
|
class="w-full px-4 py-3 bg-gray-900/50 border border-gray-700/50 rounded-lg text-gray-200 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent font-mono transition-all">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div id="subnet-error" class="hidden mb-4 p-3 bg-red-900/20 border border-red-500/30 rounded text-red-400 text-sm"></div>
|
||||||
|
<button type="submit"
|
||||||
|
class="w-full bg-gradient-to-r from-purple-600 to-pink-600 hover:from-purple-500 hover:to-pink-500 text-white font-bold py-3 px-6 rounded-lg shadow-lg hover:shadow-purple-500/25 transition-all duration-200 ease-in-out transform hover:-translate-y-0.5">
|
||||||
|
Berechnen
|
||||||
|
</button>
|
||||||
|
</form>
|
||||||
|
|
||||||
|
<div id="results" class="glass-card rounded-xl p-6 hidden fade-in">
|
||||||
|
<h3 class="text-xl font-bold text-purple-300 border-b border-purple-500/30 pb-2 mb-4 flex items-center gap-2">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
|
||||||
|
</svg>
|
||||||
|
Ergebnisse:
|
||||||
|
</h3>
|
||||||
|
<div class="space-y-3 text-sm">
|
||||||
|
<div class="grid grid-cols-1 sm:grid-cols-2 gap-2 border-b border-gray-700/50 pb-2">
|
||||||
|
<span class="text-gray-400">Netzwerkadresse:</span>
|
||||||
|
<span id="network-address" class="font-mono text-white font-semibold">-</span>
|
||||||
|
</div>
|
||||||
|
<div class="grid grid-cols-1 sm:grid-cols-2 gap-2 border-b border-gray-700/50 pb-2">
|
||||||
|
<span class="text-gray-400">Broadcast-Adresse:</span>
|
||||||
|
<span id="broadcast-address" class="font-mono text-purple-400 font-semibold">-</span>
|
||||||
|
</div>
|
||||||
|
<div class="grid grid-cols-1 sm:grid-cols-2 gap-2 border-b border-gray-700/50 pb-2">
|
||||||
|
<span class="text-gray-400">Subnetzmaske:</span>
|
||||||
|
<span id="subnet-mask" class="font-mono text-gray-300">-</span>
|
||||||
|
</div>
|
||||||
|
<div class="grid grid-cols-1 sm:grid-cols-2 gap-2 border-b border-gray-700/50 pb-2">
|
||||||
|
<span class="text-gray-400">Anzahl der Hosts:</span>
|
||||||
|
<span id="host-count" class="font-mono text-green-400 font-bold">-</span>
|
||||||
|
</div>
|
||||||
|
<div class="grid grid-cols-1 sm:grid-cols-2 gap-2 border-b border-gray-700/50 pb-2">
|
||||||
|
<span class="text-gray-400">Erste Host-Adresse:</span>
|
||||||
|
<span id="first-host" class="font-mono text-blue-300">-</span>
|
||||||
|
</div>
|
||||||
|
<div class="grid grid-cols-1 sm:grid-cols-2 gap-2">
|
||||||
|
<span class="text-gray-400">Letzte Host-Adresse:</span>
|
||||||
|
<span id="last-host" class="font-mono text-blue-300">-</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Example subnets -->
|
||||||
|
<div class="glass-card rounded-xl p-6 mt-8">
|
||||||
|
<h3 class="text-lg font-bold text-gray-400 uppercase tracking-wider border-b border-gray-700/50 pb-2 mb-4">
|
||||||
|
Beispiel-Subnetze (Private Adressbereiche)
|
||||||
|
</h3>
|
||||||
|
<div class="overflow-x-auto">
|
||||||
|
<table class="min-w-full text-sm text-left text-gray-400">
|
||||||
|
<thead class="text-xs uppercase bg-gray-800/50 text-gray-200">
|
||||||
|
<tr>
|
||||||
|
<th class="px-6 py-3">Bereich</th>
|
||||||
|
<th class="px-6 py-3">CIDR</th>
|
||||||
|
<th class="px-6 py-3">Subnetzmaske</th>
|
||||||
|
<th class="px-6 py-3">Beschreibung</th>
|
||||||
|
<th class="px-6 py-3">Aktion</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody class="divide-y divide-gray-700/50">
|
||||||
|
<tr class="hover:bg-gray-700/30 transition-colors">
|
||||||
|
<td class="px-6 py-4 font-mono text-white">192.168.0.0 – 192.168.255.255</td>
|
||||||
|
<td class="px-6 py-4 font-mono">/16 (Gesamt)</td>
|
||||||
|
<td class="px-6 py-4 font-mono">255.255.0.0</td>
|
||||||
|
<td class="px-6 py-4">Klasse C (oft als /24 genutzt)</td>
|
||||||
|
<td class="px-6 py-4"><span class="example-link text-purple-400 hover:text-purple-300 cursor-pointer underline" data-ip="192.168.1.1" data-cidr="24">Beispiel /24</span></td>
|
||||||
|
</tr>
|
||||||
|
<tr class="hover:bg-gray-700/30 transition-colors">
|
||||||
|
<td class="px-6 py-4 font-mono text-white">172.16.0.0 – 172.31.255.255</td>
|
||||||
|
<td class="px-6 py-4 font-mono">/12 (Gesamt)</td>
|
||||||
|
<td class="px-6 py-4 font-mono">255.240.0.0</td>
|
||||||
|
<td class="px-6 py-4">Klasse B</td>
|
||||||
|
<td class="px-6 py-4"><span class="example-link text-purple-400 hover:text-purple-300 cursor-pointer underline" data-ip="172.16.10.5" data-cidr="16">Beispiel /16</span></td>
|
||||||
|
</tr>
|
||||||
|
<tr class="hover:bg-gray-700/30 transition-colors">
|
||||||
|
<td class="px-6 py-4 font-mono text-white">10.0.0.0 – 10.255.255.255</td>
|
||||||
|
<td class="px-6 py-4 font-mono">/8 (Gesamt)</td>
|
||||||
|
<td class="px-6 py-4 font-mono">255.0.0.0</td>
|
||||||
|
<td class="px-6 py-4">Klasse A</td>
|
||||||
|
<td class="px-6 py-4"><span class="example-link text-purple-400 hover:text-purple-300 cursor-pointer underline" data-ip="10.0.50.100" data-cidr="8">Beispiel /8</span></td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
<p class="mt-4 text-xs text-gray-500 italic">Klicken Sie auf "Beispiel", um die Felder auszufüllen und die Berechnung zu starten.</p>
|
||||||
|
</div>
|
||||||
|
</div>`,
|
||||||
|
|
||||||
|
init() {
|
||||||
|
const form = document.getElementById('subnet-form');
|
||||||
|
const ipInput = document.getElementById('ip-address');
|
||||||
|
const cidrInput = document.getElementById('cidr');
|
||||||
|
const errorEl = document.getElementById('subnet-error');
|
||||||
|
const resultsEl = document.getElementById('results');
|
||||||
|
|
||||||
|
function showInlineError(msg) {
|
||||||
|
errorEl.textContent = msg;
|
||||||
|
errorEl.classList.toggle('hidden', !msg);
|
||||||
|
}
|
||||||
|
|
||||||
|
function isValidIP(ip) {
|
||||||
|
return /^(25[0-5]|2[0-4]\d|[01]?\d\d?)\.(25[0-5]|2[0-4]\d|[01]?\d\d?)\.(25[0-5]|2[0-4]\d|[01]?\d\d?)\.(25[0-5]|2[0-4]\d|[01]?\d\d?)$/.test(ip);
|
||||||
|
}
|
||||||
|
|
||||||
|
function ipToBinary(ip) {
|
||||||
|
return ip.split('.').map(o => parseInt(o, 10).toString(2).padStart(8, '0')).join('');
|
||||||
|
}
|
||||||
|
|
||||||
|
function binaryToIp(b) {
|
||||||
|
const parts = [];
|
||||||
|
for (let i = 0; i < 32; i += 8) parts.push(parseInt(b.slice(i, i + 8), 2));
|
||||||
|
return parts.join('.');
|
||||||
|
}
|
||||||
|
|
||||||
|
function cidrToMask(cidr) {
|
||||||
|
return binaryToIp('1'.repeat(cidr) + '0'.repeat(32 - cidr));
|
||||||
|
}
|
||||||
|
|
||||||
|
function maskToCidr(mask) {
|
||||||
|
const b = ipToBinary(mask);
|
||||||
|
if (/^1*0*$/.test(b)) return b.replace(/0+$/, '').length;
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
|
function calculate() {
|
||||||
|
showInlineError(null);
|
||||||
|
const ip = ipInput.value.trim();
|
||||||
|
const cidrRaw = cidrInput.value.trim();
|
||||||
|
|
||||||
|
if (!isValidIP(ip)) { showInlineError('Bitte eine gültige IPv4-Adresse eingeben.'); return; }
|
||||||
|
|
||||||
|
let cidr, mask;
|
||||||
|
if (cidrRaw.includes('.')) {
|
||||||
|
if (!isValidIP(cidrRaw)) { showInlineError('Bitte eine gültige Subnetzmaske eingeben.'); return; }
|
||||||
|
cidr = maskToCidr(cidrRaw);
|
||||||
|
if (cidr === null) { showInlineError('Ungültige Subnetzmaske — muss eine kontinuierliche Folge von Einsen sein (z.B. 255.255.255.0).'); return; }
|
||||||
|
mask = cidrRaw;
|
||||||
|
} else {
|
||||||
|
cidr = parseInt(cidrRaw, 10);
|
||||||
|
if (isNaN(cidr) || cidr < 0 || cidr > 32) { showInlineError('Bitte einen gültigen CIDR-Wert (0–32) eingeben.'); return; }
|
||||||
|
mask = cidrToMask(cidr);
|
||||||
|
}
|
||||||
|
|
||||||
|
const ipBin = ipToBinary(ip);
|
||||||
|
const maskBin = '1'.repeat(cidr) + '0'.repeat(32 - cidr);
|
||||||
|
let netBin = '';
|
||||||
|
for (let i = 0; i < 32; i++) netBin += (parseInt(ipBin[i]) & parseInt(maskBin[i])).toString();
|
||||||
|
|
||||||
|
const hostBits = 32 - cidr;
|
||||||
|
const bcBin = netBin.slice(0, cidr) + '1'.repeat(hostBits);
|
||||||
|
const netNum = parseInt(netBin, 2);
|
||||||
|
const bcNum = parseInt(bcBin, 2);
|
||||||
|
|
||||||
|
let hosts, first, last;
|
||||||
|
if (hostBits >= 2) {
|
||||||
|
hosts = Math.pow(2, hostBits) - 2;
|
||||||
|
first = binaryToIp((netNum + 1).toString(2).padStart(32, '0'));
|
||||||
|
last = binaryToIp((bcNum - 1).toString(2).padStart(32, '0'));
|
||||||
|
} else if (cidr === 31) {
|
||||||
|
hosts = 2; first = binaryToIp(netBin); last = binaryToIp(bcBin);
|
||||||
|
} else {
|
||||||
|
hosts = 1; first = binaryToIp(netBin); last = binaryToIp(netBin);
|
||||||
|
}
|
||||||
|
|
||||||
|
document.getElementById('network-address').textContent = binaryToIp(netBin);
|
||||||
|
document.getElementById('broadcast-address').textContent = binaryToIp(bcBin);
|
||||||
|
document.getElementById('subnet-mask').textContent = mask;
|
||||||
|
document.getElementById('host-count').textContent = hosts.toLocaleString();
|
||||||
|
document.getElementById('first-host').textContent = first;
|
||||||
|
document.getElementById('last-host').textContent = last;
|
||||||
|
|
||||||
|
resultsEl.classList.remove('hidden');
|
||||||
|
}
|
||||||
|
|
||||||
|
form.addEventListener('submit', e => { e.preventDefault(); calculate(); });
|
||||||
|
|
||||||
|
document.querySelectorAll('.example-link').forEach(link => {
|
||||||
|
link.addEventListener('click', () => {
|
||||||
|
ipInput.value = link.dataset.ip;
|
||||||
|
cidrInput.value = link.dataset.cidr;
|
||||||
|
calculate();
|
||||||
|
window.scrollTo({ top: 0, behavior: 'smooth' });
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
};
|
||||||
@@ -0,0 +1,88 @@
|
|||||||
|
import { API, setupCopyBtn, showError } from '../shared.js';
|
||||||
|
|
||||||
|
export const page = {
|
||||||
|
title: 'WHOIS Lookup',
|
||||||
|
|
||||||
|
template: () => `
|
||||||
|
<div class="container mx-auto max-w-5xl glass-panel rounded-xl shadow-2xl p-6 md:p-8 backdrop-blur-xl border border-gray-800/50">
|
||||||
|
<h1 class="text-3xl font-bold mb-8 text-center text-gradient">WHOIS Lookup</h1>
|
||||||
|
|
||||||
|
<div class="p-6 glass-card rounded-xl">
|
||||||
|
<div class="flex flex-col sm:flex-row gap-3 mb-6">
|
||||||
|
<input type="text" id="whois-query-input" placeholder="Enter domain or IP (e.g., google.com or 8.8.8.8)"
|
||||||
|
class="flex-grow px-4 py-3 bg-gray-900/50 border border-gray-700/50 rounded-lg text-gray-200 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent font-mono transition-all placeholder-gray-600">
|
||||||
|
<button id="whois-lookup-button" disabled
|
||||||
|
class="bg-gradient-to-r from-purple-600 to-pink-600 hover:from-purple-500 hover:to-pink-500 disabled:opacity-40 disabled:cursor-not-allowed text-white font-bold py-3 px-6 rounded-lg shadow-lg transition-all duration-200">
|
||||||
|
Lookup WHOIS
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div id="whois-lookup-error" class="hidden mb-4 p-3 bg-red-900/20 border border-red-500/30 rounded text-red-400 text-sm"></div>
|
||||||
|
|
||||||
|
<div id="whois-lookup-results-section" class="hidden mt-6 border-t border-gray-700/50 pt-6 fade-in">
|
||||||
|
<div class="flex items-center justify-between mb-4">
|
||||||
|
<h3 class="text-lg font-semibold text-purple-300 flex items-center gap-2">
|
||||||
|
<div class="w-1.5 h-6 bg-purple-500 rounded-full"></div>
|
||||||
|
WHOIS Results for: <span id="whois-lookup-query" class="font-mono text-purple-400 ml-1"></span>
|
||||||
|
</h3>
|
||||||
|
<button id="copy-whois-btn" class="copy-btn">copy</button>
|
||||||
|
</div>
|
||||||
|
<div id="whois-lookup-loader" class="loader hidden mb-4"></div>
|
||||||
|
<pre id="whois-lookup-output" class="result-pre"></pre>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="global-error" class="mt-6 p-4 bg-red-900/50 border border-red-500/50 text-red-100 rounded-lg hidden backdrop-blur shadow-lg"></div>
|
||||||
|
</div>`,
|
||||||
|
|
||||||
|
async init(search) {
|
||||||
|
const input = document.getElementById('whois-query-input');
|
||||||
|
const btn = document.getElementById('whois-lookup-button');
|
||||||
|
const errorEl = document.getElementById('whois-lookup-error');
|
||||||
|
const section = document.getElementById('whois-lookup-results-section');
|
||||||
|
const queryEl = document.getElementById('whois-lookup-query');
|
||||||
|
const loader = document.getElementById('whois-lookup-loader');
|
||||||
|
const output = document.getElementById('whois-lookup-output');
|
||||||
|
const copyBtn = document.getElementById('copy-whois-btn');
|
||||||
|
|
||||||
|
const syncBtn = () => { btn.disabled = !input.value.trim(); };
|
||||||
|
input.addEventListener('input', syncBtn);
|
||||||
|
|
||||||
|
setupCopyBtn(copyBtn, () => output.textContent);
|
||||||
|
|
||||||
|
async function doLookup() {
|
||||||
|
const query = input.value.trim();
|
||||||
|
if (!query) return;
|
||||||
|
|
||||||
|
const url = new URL(location.href);
|
||||||
|
url.searchParams.set('query', query);
|
||||||
|
history.replaceState({}, '', url);
|
||||||
|
|
||||||
|
showError(errorEl, null);
|
||||||
|
section.classList.remove('hidden');
|
||||||
|
loader.classList.remove('hidden');
|
||||||
|
output.textContent = '';
|
||||||
|
queryEl.textContent = query;
|
||||||
|
|
||||||
|
try {
|
||||||
|
const r = await fetch(`${API}/whois-lookup?query=${encodeURIComponent(query)}`);
|
||||||
|
const data = await r.json();
|
||||||
|
if (!r.ok || !data.success) throw new Error(data.error || `HTTP ${r.status}`);
|
||||||
|
output.textContent = typeof data.result === 'string'
|
||||||
|
? data.result
|
||||||
|
: JSON.stringify(data.result, null, 2);
|
||||||
|
} catch (err) {
|
||||||
|
showError(errorEl, err.message);
|
||||||
|
output.textContent = '';
|
||||||
|
} finally {
|
||||||
|
loader.classList.add('hidden');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
btn.addEventListener('click', doLookup);
|
||||||
|
input.addEventListener('keypress', e => { if (e.key === 'Enter' && !btn.disabled) doLookup(); });
|
||||||
|
|
||||||
|
const params = new URLSearchParams(search);
|
||||||
|
const q = params.get('query');
|
||||||
|
if (q) { input.value = q; syncBtn(); doLookup(); }
|
||||||
|
}
|
||||||
|
};
|
||||||
@@ -0,0 +1,86 @@
|
|||||||
|
import { page as homePage } from './pages/home.js';
|
||||||
|
import { page as subnetPage } from './pages/subnet.js';
|
||||||
|
import { page as dnsPage } from './pages/dns.js';
|
||||||
|
import { page as whoisPage } from './pages/whois.js';
|
||||||
|
import { page as macPage } from './pages/mac.js';
|
||||||
|
import { page as asnPage } from './pages/asn.js';
|
||||||
|
|
||||||
|
const routes = {
|
||||||
|
'/': homePage,
|
||||||
|
'/subnet': subnetPage,
|
||||||
|
'/dns': dnsPage,
|
||||||
|
'/whois': whoisPage,
|
||||||
|
'/mac': macPage,
|
||||||
|
'/asn': asnPage,
|
||||||
|
};
|
||||||
|
|
||||||
|
const app = document.getElementById('app');
|
||||||
|
let currentCleanup = null;
|
||||||
|
|
||||||
|
function setActiveNav(path) {
|
||||||
|
document.querySelectorAll('nav a').forEach(a => {
|
||||||
|
try {
|
||||||
|
const p = new URL(a.href).pathname;
|
||||||
|
a.classList.toggle('active-link', p === path);
|
||||||
|
} catch {}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
async function navigate(path, { push = true, search = '' } = {}) {
|
||||||
|
const route = routes[path] ?? routes['/'];
|
||||||
|
|
||||||
|
// ── leave animation ──────────────────────────────────────────
|
||||||
|
app.classList.add('page-leaving');
|
||||||
|
if (currentCleanup) { try { currentCleanup(); } catch {} currentCleanup = null; }
|
||||||
|
await new Promise(r => setTimeout(r, 200));
|
||||||
|
|
||||||
|
// ── swap content ─────────────────────────────────────────────
|
||||||
|
app.innerHTML = route.template();
|
||||||
|
document.title = route.title ? `${route.title} – uTools` : 'uTools – Network Suite';
|
||||||
|
setActiveNav(path);
|
||||||
|
|
||||||
|
const fullUrl = path + (search ? (search.startsWith('?') ? search : '?' + search) : '');
|
||||||
|
if (push) history.pushState({ path }, '', fullUrl);
|
||||||
|
|
||||||
|
// ── enter animation ──────────────────────────────────────────
|
||||||
|
app.classList.remove('page-leaving');
|
||||||
|
app.classList.add('page-entering');
|
||||||
|
setTimeout(() => app.classList.remove('page-entering'), 300);
|
||||||
|
|
||||||
|
// ── init page ────────────────────────────────────────────────
|
||||||
|
const cleanup = await route.init(search);
|
||||||
|
currentCleanup = typeof cleanup === 'function' ? cleanup : null;
|
||||||
|
}
|
||||||
|
|
||||||
|
// ── Intercept same-origin link clicks ───────────────────────────
|
||||||
|
document.addEventListener('click', e => {
|
||||||
|
const a = e.target.closest('a[href]');
|
||||||
|
if (!a) return;
|
||||||
|
let url;
|
||||||
|
try { url = new URL(a.href); } catch { return; }
|
||||||
|
if (url.origin !== location.origin) return;
|
||||||
|
if (!(url.pathname in routes)) return;
|
||||||
|
e.preventDefault();
|
||||||
|
navigate(url.pathname, { push: true, search: url.search });
|
||||||
|
});
|
||||||
|
|
||||||
|
window.addEventListener('popstate', () => {
|
||||||
|
navigate(location.pathname, { push: false, search: location.search });
|
||||||
|
});
|
||||||
|
|
||||||
|
// ── Expose for programmatic navigation ──────────────────────────
|
||||||
|
window._router = {
|
||||||
|
navigate(path, searchObj = {}) {
|
||||||
|
const s = new URLSearchParams(searchObj).toString();
|
||||||
|
navigate(path, { push: true, search: s ? '?' + s : '' });
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// ── Fetch version once ───────────────────────────────────────────
|
||||||
|
fetch('/api/version')
|
||||||
|
.then(r => r.json())
|
||||||
|
.then(d => { const el = document.getElementById('commit-sha'); if (el) el.textContent = d.commitSha || 'unknown'; })
|
||||||
|
.catch(() => { const el = document.getElementById('commit-sha'); if (el) el.textContent = 'error'; });
|
||||||
|
|
||||||
|
// ── Initial render ───────────────────────────────────────────────
|
||||||
|
navigate(location.pathname, { push: false, search: location.search });
|
||||||
@@ -1,906 +0,0 @@
|
|||||||
// script.js - Hauptlogik für index.html (IP Info, IP Lookup, Traceroute)
|
|
||||||
document.addEventListener('DOMContentLoaded', () => {
|
|
||||||
// --- DOM Elements (User IP Info) ---
|
|
||||||
const ipAddressLinkEl = document.getElementById('ip-address-link'); // Geändert von ip-address
|
|
||||||
const ipAddressSpanEl = document.getElementById('ip-address'); // Das Span *innerhalb* des Links
|
|
||||||
const countryEl = document.getElementById('country');
|
|
||||||
const regionEl = document.getElementById('region');
|
|
||||||
const cityEl = document.getElementById('city');
|
|
||||||
const postalEl = document.getElementById('postal');
|
|
||||||
const coordsEl = document.getElementById('coords');
|
|
||||||
const timezoneEl = document.getElementById('timezone');
|
|
||||||
const asnNumberEl = document.getElementById('asn-number');
|
|
||||||
const asnOrgEl = document.getElementById('asn-org');
|
|
||||||
const rdnsListEl = document.getElementById('rdns-list');
|
|
||||||
const mapContainer = document.getElementById('map-container');
|
|
||||||
const mapEl = document.getElementById('map');
|
|
||||||
const mapMessageEl = document.getElementById('map-message');
|
|
||||||
const globalErrorEl = document.getElementById('global-error');
|
|
||||||
const ipLoader = document.getElementById('ip-loader');
|
|
||||||
const geoLoader = document.getElementById('geo-loader');
|
|
||||||
const asnLoader = document.getElementById('asn-loader');
|
|
||||||
const rdnsLoader = document.getElementById('rdns-loader');
|
|
||||||
const mapLoader = document.getElementById('map-loader');
|
|
||||||
const geoErrorEl = document.getElementById('geo-error');
|
|
||||||
const asnErrorEl = document.getElementById('asn-error');
|
|
||||||
const rdnsErrorEl = document.getElementById('rdns-error');
|
|
||||||
const geoInfo = document.getElementById('geo-info');
|
|
||||||
const asnInfo = document.getElementById('asn-info');
|
|
||||||
const rdnsInfo = document.getElementById('rdns-info');
|
|
||||||
|
|
||||||
|
|
||||||
// --- DOM Elements (Lookup) ---
|
|
||||||
const lookupIpInput = document.getElementById('lookup-ip-input');
|
|
||||||
const lookupButton = document.getElementById('lookup-button');
|
|
||||||
const lookupErrorEl = document.getElementById('lookup-error');
|
|
||||||
const lookupStatusEl = document.getElementById('lookup-status'); // Optional: für Statusmeldungen wie "Resolving..."
|
|
||||||
const lookupResultsSection = document.getElementById('lookup-results-section');
|
|
||||||
const lookupIpAddressEl = document.getElementById('lookup-ip-address');
|
|
||||||
const lookupResultLoader = document.getElementById('lookup-result-loader');
|
|
||||||
const lookupCountryEl = document.getElementById('lookup-country');
|
|
||||||
const lookupRegionEl = document.getElementById('lookup-region');
|
|
||||||
const lookupCityEl = document.getElementById('lookup-city');
|
|
||||||
const lookupPostalEl = document.getElementById('lookup-postal');
|
|
||||||
const lookupCoordsEl = document.getElementById('lookup-coords');
|
|
||||||
const lookupTimezoneEl = document.getElementById('lookup-timezone');
|
|
||||||
const lookupGeoErrorEl = document.getElementById('lookup-geo-error');
|
|
||||||
const lookupAsnNumberEl = document.getElementById('lookup-asn-number');
|
|
||||||
const lookupAsnOrgEl = document.getElementById('lookup-asn-org');
|
|
||||||
const lookupAsnErrorEl = document.getElementById('lookup-asn-error');
|
|
||||||
const lookupRdnsListEl = document.getElementById('lookup-rdns-list');
|
|
||||||
const lookupRdnsErrorEl = document.getElementById('lookup-rdns-error');
|
|
||||||
const lookupMapContainer = document.getElementById('lookup-map-container');
|
|
||||||
const lookupMapEl = document.getElementById('lookup-map');
|
|
||||||
const lookupMapLoader = document.getElementById('lookup-map-loader');
|
|
||||||
const lookupMapMessageEl = document.getElementById('lookup-map-message');
|
|
||||||
const lookupPingButton = document.getElementById('lookup-ping-button');
|
|
||||||
const lookupTraceButton = document.getElementById('lookup-trace-button');
|
|
||||||
const lookupPingResultsEl = document.getElementById('lookup-ping-results');
|
|
||||||
const lookupPingLoader = document.getElementById('lookup-ping-loader');
|
|
||||||
const lookupPingOutputEl = document.getElementById('lookup-ping-output');
|
|
||||||
const lookupPingErrorEl = document.getElementById('lookup-ping-error');
|
|
||||||
|
|
||||||
|
|
||||||
// --- DOM Elements (Traceroute) ---
|
|
||||||
const tracerouteSection = document.getElementById('traceroute-section');
|
|
||||||
const tracerouteOutputEl = document.querySelector('#traceroute-output pre');
|
|
||||||
const tracerouteLoader = document.getElementById('traceroute-loader');
|
|
||||||
const tracerouteMessage = document.getElementById('traceroute-message');
|
|
||||||
|
|
||||||
// --- DOM Elements (Port Scan) ---
|
|
||||||
const portScanSection = document.getElementById('port-scan-section');
|
|
||||||
const portScanOutputEl = document.getElementById('port-scan-output');
|
|
||||||
const portScanLoader = document.getElementById('port-scan-loader');
|
|
||||||
const portScanMessage = document.getElementById('port-scan-message');
|
|
||||||
const lookupScanButton = document.getElementById('lookup-scan-button');
|
|
||||||
|
|
||||||
// --- DOM Elements (Footer) ---
|
|
||||||
const commitShaEl = document.getElementById('commit-sha');
|
|
||||||
|
|
||||||
// --- Configuration ---
|
|
||||||
const API_BASE_URL = '/api'; // Anpassen, falls nötig
|
|
||||||
|
|
||||||
// --- State ---
|
|
||||||
let map = null; // Leaflet map instance for user's IP
|
|
||||||
let lookupMap = null; // Leaflet map instance for lookup results
|
|
||||||
let currentIp = null; // Store the user's fetched IP
|
|
||||||
let currentLookupIp = null; // Store the last successfully looked-up IP
|
|
||||||
let eventSource = null; // Store the EventSource instance for traceroute
|
|
||||||
let portScanEventSource = null; // Store the EventSource for port scan
|
|
||||||
|
|
||||||
// --- Helper Functions ---
|
|
||||||
|
|
||||||
/** Zeigt globale Fehler an */
|
|
||||||
function showGlobalError(message) {
|
|
||||||
if (!globalErrorEl) return;
|
|
||||||
globalErrorEl.textContent = `Error: ${message}`;
|
|
||||||
globalErrorEl.classList.remove('hidden');
|
|
||||||
}
|
|
||||||
|
|
||||||
/** Versteckt globale Fehler */
|
|
||||||
function hideGlobalError() {
|
|
||||||
if (!globalErrorEl) return;
|
|
||||||
globalErrorEl.classList.add('hidden');
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Prüft, ob der String eine gültige IPv4 oder IPv6 Adresse ist.
|
|
||||||
* @param {string} input - Der zu prüfende String.
|
|
||||||
* @returns {boolean} True, wenn es eine gültige IP ist, sonst false.
|
|
||||||
*/
|
|
||||||
function isValidIpAddress(input) {
|
|
||||||
if (!input || typeof input !== 'string') return false;
|
|
||||||
const ipv4Regex = /^(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/;
|
|
||||||
// Sehr einfache IPv6 Regex (erkennt gültige Zeichen, aber nicht alle komplexen Formate perfekt)
|
|
||||||
const ipv6Regex = /^[a-fA-F0-9:]+$/;
|
|
||||||
// Komplexere IPv6 Regex (versucht mehr Fälle abzudecken, aber immer noch nicht perfekt)
|
|
||||||
const complexIpv6Regex = /^(?:(?:[a-fA-F0-9]{1,4}:){7}[a-fA-F0-9]{1,4}|(?:[a-fA-F0-9]{1,4}:){1,7}:|(?:[a-fA-F0-9]{1,4}:){1,6}:[a-fA-F0-9]{1,4}|(?:[a-fA-F0-9]{1,4}:){1,5}(?::[a-fA-F0-9]{1,4}){1,2}|(?:[a-fA-F0-9]{1,4}:){1,4}(?::[a-fA-F0-9]{1,4}){1,3}|(?:[a-fA-F0-9]{1,4}:){1,3}(?::[a-fA-F0-9]{1,4}){1,4}|(?:[a-fA-F0-9]{1,4}:){1,2}(?::[a-fA-F0-9]{1,4}){1,5}|[a-fA-F0-9]{1,4}:(?:(?::[a-fA-F0-9]{1,4}){1,6})|:(?:(?::[a-fA-F0-9]{1,4}){1,7}|:)|fe80:(?::[a-fA-F0-9]{0,4}){0,4}%[0-9a-zA-Z]{1,}|::(?:ffff(?::0{1,4}){0,1}:){0,1}(?:(?:25[0-5]|(?:2[0-4]|1{0,1}[0-9]){0,1}[0-9])\.){3,3}(?:25[0-5]|(?:2[0-4]|1{0,1}[0-9]){0,1}[0-9])|(?:[a-fA-F0-9]{1,4}:){1,4}:(?:(?:25[0-5]|(?:2[0-4]|1{0,1}[0-9]){0,1}[0-9])\.){3,3}(?:25[0-5]|(?:2[0-4]|1{0,1}[0-9]){0,1}[0-9]))$/;
|
|
||||||
|
|
||||||
return ipv4Regex.test(input) || complexIpv6Regex.test(input);
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Aktualisiert ein Info-Feld und versteckt optional einen Loader.
|
|
||||||
* @param {HTMLElement} valueElement - Das Element, das den Wert anzeigt.
|
|
||||||
* @param {any} value - Der anzuzeigende Wert oder ein Fehlerobjekt {error: string}.
|
|
||||||
* @param {HTMLElement} [loaderElement] - Das zu versteckende Loader-Element.
|
|
||||||
* @param {HTMLElement} [errorElement] - Das Element zur Anzeige von Fehlern für dieses Feld.
|
|
||||||
* @param {string} [defaultValue='-'] - Standardwert bei fehlenden Daten.
|
|
||||||
*/
|
|
||||||
function updateField(valueElement, value, loaderElement = null, errorElement = null, defaultValue = '-') {
|
|
||||||
if (loaderElement) loaderElement.classList.add('hidden');
|
|
||||||
if (errorElement) errorElement.textContent = ''; // Clear previous error
|
|
||||||
|
|
||||||
// Zeige das Elternelement des valueElements, falls es vorher versteckt war (für initiale Ladeanzeige)
|
|
||||||
const dataContainer = valueElement?.closest('div:not(.loader)'); // Find closest parent div that isn't a loader
|
|
||||||
if (dataContainer?.classList.contains('hidden')) {
|
|
||||||
dataContainer.classList.remove('hidden');
|
|
||||||
}
|
|
||||||
|
|
||||||
if (value && typeof value === 'object' && value.error) {
|
|
||||||
if (valueElement) valueElement.textContent = defaultValue;
|
|
||||||
if (errorElement) errorElement.textContent = value.error;
|
|
||||||
else console.warn(`Error in field ${valueElement?.id}: ${value.error}`);
|
|
||||||
} else if (value !== null && value !== undefined && value !== '') {
|
|
||||||
if (valueElement) valueElement.textContent = value;
|
|
||||||
} else {
|
|
||||||
if (valueElement) valueElement.textContent = defaultValue;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Aktualisiert die rDNS Liste generisch.
|
|
||||||
* @param {HTMLElement} listElement - Das UL Element.
|
|
||||||
* @param {Array|object} rdnsData - Die rDNS Daten oder ein Fehlerobjekt.
|
|
||||||
* @param {HTMLElement} [loaderElement] - Das zu versteckende Loader-Element.
|
|
||||||
* @param {HTMLElement} [errorElement] - Das Element zur Anzeige von Fehlern.
|
|
||||||
*/
|
|
||||||
function updateRdns(listElement, rdnsData, loaderElement = null, errorElement = null) {
|
|
||||||
if (loaderElement) loaderElement.classList.add('hidden');
|
|
||||||
if (listElement) listElement.innerHTML = ''; // Clear previous entries
|
|
||||||
if (errorElement) errorElement.textContent = '';
|
|
||||||
|
|
||||||
// Zeige das Elternelement des listElements, falls es vorher versteckt war
|
|
||||||
const dataContainer = listElement?.closest('div:not(.loader)');
|
|
||||||
if (dataContainer?.classList.contains('hidden')) {
|
|
||||||
dataContainer.classList.remove('hidden');
|
|
||||||
}
|
|
||||||
|
|
||||||
if (rdnsData && Array.isArray(rdnsData)) {
|
|
||||||
if (rdnsData.length > 0) {
|
|
||||||
rdnsData.forEach(hostname => {
|
|
||||||
const li = document.createElement('li');
|
|
||||||
li.textContent = hostname;
|
|
||||||
if (listElement) listElement.appendChild(li);
|
|
||||||
});
|
|
||||||
} else {
|
|
||||||
if (listElement) listElement.innerHTML = '<li>No rDNS records found.</li>'; // Klarere Meldung
|
|
||||||
}
|
|
||||||
} else if (rdnsData && rdnsData.error) {
|
|
||||||
if (listElement) listElement.innerHTML = '<li>-</li>';
|
|
||||||
if (errorElement) errorElement.textContent = rdnsData.error;
|
|
||||||
} else {
|
|
||||||
if (listElement) listElement.innerHTML = '<li>-</li>';
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Initialisiert oder aktualisiert eine Leaflet-Karte.
|
|
||||||
* @param {string} mapId - Die ID des Map-Containers ('map' oder 'lookup-map').
|
|
||||||
* @param {number|null} lat - Breitengrad.
|
|
||||||
* @param {number|null} lon - Längengrad.
|
|
||||||
* @param {HTMLElement} mapElement - Das Karten-Div.
|
|
||||||
* @param {HTMLElement} loaderElement - Das Loader-Element für die Karte.
|
|
||||||
* @param {HTMLElement} messageElement - Das Nachrichten-Element für die Karte.
|
|
||||||
* @returns {L.Map | null} Die Karteninstanz oder null bei Fehler.
|
|
||||||
*/
|
|
||||||
function initOrUpdateMap(mapId, lat, lon, mapElement, loaderElement, messageElement) {
|
|
||||||
if (!mapElement || !loaderElement || !messageElement) return null; // Exit if elements are missing
|
|
||||||
loaderElement.classList.add('hidden'); // Hide loader first
|
|
||||||
|
|
||||||
// Use a unique variable name for the map instance based on mapId
|
|
||||||
let mapInstance = window[mapId + '_instance'];
|
|
||||||
|
|
||||||
if (lat != null && lon != null) { // Check for non-null coordinates
|
|
||||||
mapElement.classList.remove('hidden');
|
|
||||||
messageElement.classList.add('hidden');
|
|
||||||
|
|
||||||
if (mapInstance) {
|
|
||||||
mapInstance.setView([lat, lon], 13);
|
|
||||||
mapInstance.eachLayer((layer) => {
|
|
||||||
if (layer instanceof L.Marker) mapInstance.removeLayer(layer);
|
|
||||||
});
|
|
||||||
L.marker([lat, lon]).addTo(mapInstance).bindPopup(`Approximate Location`).openPopup();
|
|
||||||
} else {
|
|
||||||
try {
|
|
||||||
mapInstance = L.map(mapId).setView([lat, lon], 13);
|
|
||||||
L.tileLayer('https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png', {
|
|
||||||
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors © <a href="https://carto.com/attributions">CARTO</a>',
|
|
||||||
subdomains: 'abcd',
|
|
||||||
maxZoom: 19
|
|
||||||
}).addTo(mapInstance);
|
|
||||||
L.marker([lat, lon]).addTo(mapInstance).bindPopup(`Approximate Location`).openPopup();
|
|
||||||
window[mapId + '_instance'] = mapInstance; // Store instance
|
|
||||||
} catch (e) {
|
|
||||||
console.error(`Leaflet map initialization failed for ${mapId}:`, e);
|
|
||||||
mapElement.classList.add('hidden');
|
|
||||||
messageElement.classList.remove('hidden');
|
|
||||||
messageElement.textContent = 'Error initializing map.';
|
|
||||||
return null;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
// Invalidate size after showing/updating to prevent grey tiles
|
|
||||||
setTimeout(() => {
|
|
||||||
if (window[mapId + '_instance']) { // Check if map still exists
|
|
||||||
window[mapId + '_instance'].invalidateSize();
|
|
||||||
}
|
|
||||||
}, 100);
|
|
||||||
return mapInstance;
|
|
||||||
} else {
|
|
||||||
mapElement.classList.add('hidden');
|
|
||||||
messageElement.classList.remove('hidden');
|
|
||||||
messageElement.textContent = 'Map could not be loaded (missing or invalid coordinates).';
|
|
||||||
// If map existed, remove it to clean up resources
|
|
||||||
if (mapInstance) {
|
|
||||||
mapInstance.remove();
|
|
||||||
window[mapId + '_instance'] = null;
|
|
||||||
}
|
|
||||||
return null;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/** Ruft die IP-Informationen für die eigene IP ab */
|
|
||||||
async function fetchIpInfo() {
|
|
||||||
hideGlobalError();
|
|
||||||
[ipLoader, geoLoader, asnLoader, rdnsLoader, mapLoader].forEach(l => l?.classList.remove('hidden'));
|
|
||||||
// Hide data elements initially (containers are hidden by default in HTML)
|
|
||||||
if (ipAddressLinkEl) ipAddressLinkEl.classList.add('hidden'); // Hide link initially
|
|
||||||
if (mapEl) mapEl.classList.add('hidden');
|
|
||||||
// Ensure map message is hidden initially
|
|
||||||
if (mapMessageEl) mapMessageEl.classList.add('hidden');
|
|
||||||
|
|
||||||
|
|
||||||
try {
|
|
||||||
const response = await fetch(`${API_BASE_URL}/ipinfo`);
|
|
||||||
if (!response.ok) throw new Error(`Network response: ${response.statusText} (${response.status})`);
|
|
||||||
const data = await response.json();
|
|
||||||
console.log('Received User IP Info:', data);
|
|
||||||
|
|
||||||
currentIp = data.ip;
|
|
||||||
// Update the span inside the link
|
|
||||||
updateField(ipAddressSpanEl, data.ip, ipLoader);
|
|
||||||
if (ipAddressLinkEl) {
|
|
||||||
ipAddressLinkEl.classList.remove('hidden'); // Show link element
|
|
||||||
if (data.ip) {
|
|
||||||
// Remove old listener if it exists (safety)
|
|
||||||
ipAddressLinkEl.removeEventListener('click', handleIpClick);
|
|
||||||
// Add new listener
|
|
||||||
ipAddressLinkEl.addEventListener('click', handleIpClick);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
updateField(countryEl, data.geo?.countryName ? `${data.geo.countryName} (${data.geo.country})` : null, null, geoErrorEl);
|
|
||||||
updateField(regionEl, data.geo?.region);
|
|
||||||
updateField(cityEl, data.geo?.city);
|
|
||||||
updateField(postalEl, data.geo?.postalCode);
|
|
||||||
updateField(coordsEl, data.geo?.latitude ? `${data.geo.latitude}, ${data.geo.longitude}` : null);
|
|
||||||
updateField(timezoneEl, data.geo?.timezone, geoLoader); // Hide loader on last geo field
|
|
||||||
|
|
||||||
// ASN — render as clickable link if has a number (not an error object)
|
|
||||||
const asnNum = (data.asn && !data.asn.error) ? data.asn.number : null;
|
|
||||||
if (asnNum && asnNumberEl) {
|
|
||||||
// Reveal the hidden data container manually (updateField won't run the link path via error branch)
|
|
||||||
const asnContainer = asnNumberEl.closest('div:not(.loader)');
|
|
||||||
if (asnContainer) asnContainer.classList.remove('hidden');
|
|
||||||
asnNumberEl.innerHTML =
|
|
||||||
`<a href="/asn?asn=${asnNum}" class="hover:text-purple-200 underline decoration-dotted transition-colors" title="Open ASN Lookup">AS${asnNum}</a>`;
|
|
||||||
} else {
|
|
||||||
updateField(asnNumberEl, null, null, asnErrorEl, data.asn?.error || '-');
|
|
||||||
}
|
|
||||||
updateField(asnOrgEl, data.asn?.organization, asnLoader);
|
|
||||||
|
|
||||||
updateRdns(rdnsListEl, data.rdns, rdnsLoader, rdnsErrorEl);
|
|
||||||
|
|
||||||
map = initOrUpdateMap('map', data.geo?.latitude, data.geo?.longitude, mapEl, mapLoader, mapMessageEl);
|
|
||||||
|
|
||||||
} catch (error) {
|
|
||||||
console.error('Failed to fetch user IP info:', error);
|
|
||||||
showGlobalError(`Could not load initial IP information. ${error.message}`);
|
|
||||||
[ipLoader, geoLoader, asnLoader, rdnsLoader, mapLoader].forEach(l => l?.classList.add('hidden'));
|
|
||||||
// Ensure data containers are visible to show potential errors inside them
|
|
||||||
[geoInfo, asnInfo, rdnsInfo].forEach(container => {
|
|
||||||
const dataDiv = container?.querySelector('div:not(.loader)'); // Select the data div, not the loader
|
|
||||||
if (dataDiv) dataDiv.classList.remove('hidden');
|
|
||||||
});
|
|
||||||
if (mapMessageEl) {
|
|
||||||
mapMessageEl.textContent = 'Map could not be loaded due to an error.';
|
|
||||||
mapMessageEl.classList.remove('hidden');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/** Ruft die Versionsinformationen (Commit SHA) ab */
|
|
||||||
async function fetchVersionInfo() {
|
|
||||||
if (!commitShaEl) return; // Don't fetch if element doesn't exist
|
|
||||||
try {
|
|
||||||
const response = await fetch(`${API_BASE_URL}/version`);
|
|
||||||
if (!response.ok) throw new Error(`Network response: ${response.statusText} (${response.status})`);
|
|
||||||
const data = await response.json();
|
|
||||||
commitShaEl.textContent = data.commitSha || 'unknown';
|
|
||||||
} catch (error) {
|
|
||||||
console.error('Failed to fetch version info:', error);
|
|
||||||
commitShaEl.textContent = 'error';
|
|
||||||
// Optionally show global error
|
|
||||||
// showGlobalError(`Could not load version info: ${error.message}`);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// --- Lookup Functions ---
|
|
||||||
|
|
||||||
// --- URL Parameter Functions ---
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Updates the URL with IP lookup parameter
|
|
||||||
* @param {string} ip - The IP address or domain to lookup
|
|
||||||
*/
|
|
||||||
function updateLookupUrlParams(ip) {
|
|
||||||
const url = new URL(window.location);
|
|
||||||
url.searchParams.set('ip', ip);
|
|
||||||
window.history.pushState({}, '', url);
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Reads URL parameters and returns IP if present
|
|
||||||
* @returns {string|null} IP or domain from URL, or null if not present
|
|
||||||
*/
|
|
||||||
function getLookupUrlParams() {
|
|
||||||
const urlParams = new URLSearchParams(window.location.search);
|
|
||||||
return urlParams.get('ip');
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/** Zeigt Fehler im Lookup-Bereich an */
|
|
||||||
function showLookupError(message) {
|
|
||||||
if (!lookupErrorEl) return;
|
|
||||||
lookupErrorEl.textContent = `Error: ${message}`;
|
|
||||||
lookupErrorEl.classList.remove('hidden');
|
|
||||||
// Hide status message if error occurs
|
|
||||||
if (lookupStatusEl) lookupStatusEl.classList.add('hidden');
|
|
||||||
}
|
|
||||||
|
|
||||||
/** Versteckt Fehler im Lookup-Bereich */
|
|
||||||
function hideLookupError() {
|
|
||||||
if (!lookupErrorEl) return;
|
|
||||||
lookupErrorEl.classList.add('hidden');
|
|
||||||
}
|
|
||||||
|
|
||||||
/** Zeigt eine Statusmeldung im Lookup-Bereich an */
|
|
||||||
function showLookupStatus(message) {
|
|
||||||
if (!lookupStatusEl) return;
|
|
||||||
lookupStatusEl.textContent = message;
|
|
||||||
lookupStatusEl.classList.remove('hidden');
|
|
||||||
hideLookupError(); // Hide errors when showing status
|
|
||||||
}
|
|
||||||
|
|
||||||
/** Versteckt die Statusmeldung im Lookup-Bereich */
|
|
||||||
function hideLookupStatus() {
|
|
||||||
if (!lookupStatusEl) return;
|
|
||||||
lookupStatusEl.classList.add('hidden');
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/** Setzt den Lookup-Ergebnisbereich zurück */
|
|
||||||
function resetLookupResults() {
|
|
||||||
if (!lookupResultsSection) return;
|
|
||||||
lookupResultsSection.classList.add('hidden');
|
|
||||||
if (lookupResultLoader) lookupResultLoader.classList.add('hidden');
|
|
||||||
if (lookupMapLoader) lookupMapLoader.classList.add('hidden');
|
|
||||||
if (lookupMapEl) lookupMapEl.classList.add('hidden');
|
|
||||||
if (lookupMapMessageEl) lookupMapMessageEl.classList.add('hidden');
|
|
||||||
if (lookupPingResultsEl) lookupPingResultsEl.classList.add('hidden'); // Hide ping results too
|
|
||||||
if (lookupPingLoader) lookupPingLoader.classList.add('hidden');
|
|
||||||
if (lookupPingOutputEl) lookupPingOutputEl.textContent = '';
|
|
||||||
if (lookupPingErrorEl) lookupPingErrorEl.textContent = '';
|
|
||||||
if (portScanSection) portScanSection.classList.add('hidden'); // Hide port scan results
|
|
||||||
if (portScanOutputEl) portScanOutputEl.innerHTML = '';
|
|
||||||
hideLookupStatus(); // Hide status on reset
|
|
||||||
|
|
||||||
const fieldsToClear = [
|
|
||||||
lookupIpAddressEl, lookupCountryEl, lookupRegionEl, lookupCityEl,
|
|
||||||
lookupPostalEl, lookupCoordsEl, lookupTimezoneEl, lookupAsnNumberEl,
|
|
||||||
lookupAsnOrgEl, lookupGeoErrorEl, lookupAsnErrorEl, lookupRdnsErrorEl
|
|
||||||
];
|
|
||||||
fieldsToClear.forEach(el => { if (el) el.textContent = ''; });
|
|
||||||
if (lookupRdnsListEl) lookupRdnsListEl.innerHTML = '<li>-</li>';
|
|
||||||
|
|
||||||
if (lookupPingButton) lookupPingButton.disabled = true;
|
|
||||||
if (lookupTraceButton) lookupTraceButton.disabled = true;
|
|
||||||
if (lookupScanButton) lookupScanButton.disabled = true;
|
|
||||||
currentLookupIp = null;
|
|
||||||
|
|
||||||
// Remove lookup map instance if it exists
|
|
||||||
if (window['lookup-map_instance']) {
|
|
||||||
window['lookup-map_instance'].remove();
|
|
||||||
window['lookup-map_instance'] = null;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (portScanEventSource) {
|
|
||||||
portScanEventSource.close();
|
|
||||||
portScanEventSource = null;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/** Ruft Informationen für eine spezifische IP ab */
|
|
||||||
async function fetchLookupInfo(ipToLookup) {
|
|
||||||
resetLookupResults(); // Reset before showing new results/loaders
|
|
||||||
hideLookupError();
|
|
||||||
hideGlobalError();
|
|
||||||
if (!lookupResultsSection || !lookupResultLoader || !lookupMapLoader) return; // Exit if elements missing
|
|
||||||
|
|
||||||
lookupResultsSection.classList.remove('hidden');
|
|
||||||
lookupResultLoader.classList.remove('hidden');
|
|
||||||
lookupMapLoader.classList.remove('hidden'); // Show map loader initially
|
|
||||||
hideLookupStatus(); // Hide status like "Resolving..."
|
|
||||||
|
|
||||||
try {
|
|
||||||
const response = await fetch(`${API_BASE_URL}/lookup?targetIp=${encodeURIComponent(ipToLookup)}`); // Use targetIp parameter
|
|
||||||
const data = await response.json();
|
|
||||||
|
|
||||||
if (!response.ok) {
|
|
||||||
throw new Error(data.error || `Network response: ${response.statusText} (${response.status})`);
|
|
||||||
}
|
|
||||||
|
|
||||||
console.log('Received Lookup Info for', ipToLookup, ':', data);
|
|
||||||
currentLookupIp = data.ip; // Store the IP that was actually looked up
|
|
||||||
|
|
||||||
updateField(lookupIpAddressEl, data.ip); // Display the looked-up IP
|
|
||||||
updateField(lookupCountryEl, data.geo?.countryName ? `${data.geo.countryName} (${data.geo.country})` : null, null, lookupGeoErrorEl);
|
|
||||||
updateField(lookupRegionEl, data.geo?.region);
|
|
||||||
updateField(lookupCityEl, data.geo?.city);
|
|
||||||
updateField(lookupPostalEl, data.geo?.postalCode);
|
|
||||||
updateField(lookupCoordsEl, data.geo?.latitude ? `${data.geo.latitude}, ${data.geo.longitude}` : null);
|
|
||||||
updateField(lookupTimezoneEl, data.geo?.timezone);
|
|
||||||
|
|
||||||
// ASN — render as clickable link if available
|
|
||||||
if (data.asn?.number && lookupAsnNumberEl) {
|
|
||||||
lookupAsnNumberEl.innerHTML =
|
|
||||||
`<a href="/asn?asn=${data.asn.number}" class="text-purple-400 hover:text-purple-300 underline decoration-dotted transition-colors font-mono" title="Open ASN Lookup">AS${data.asn.number}</a>`;
|
|
||||||
} else {
|
|
||||||
updateField(lookupAsnNumberEl, data.asn?.number, null, lookupAsnErrorEl);
|
|
||||||
}
|
|
||||||
updateField(lookupAsnOrgEl, data.asn?.organization);
|
|
||||||
|
|
||||||
updateRdns(lookupRdnsListEl, data.rdns, null, lookupRdnsErrorEl);
|
|
||||||
|
|
||||||
lookupMap = initOrUpdateMap('lookup-map', data.geo?.latitude, data.geo?.longitude, lookupMapEl, lookupMapLoader, lookupMapMessageEl);
|
|
||||||
|
|
||||||
if (lookupPingButton) lookupPingButton.disabled = false;
|
|
||||||
if (lookupTraceButton) lookupTraceButton.disabled = false;
|
|
||||||
if (lookupScanButton) lookupScanButton.disabled = false;
|
|
||||||
|
|
||||||
} catch (error) {
|
|
||||||
console.error('Failed to fetch lookup info for', ipToLookup, ':', error);
|
|
||||||
showLookupError(`Lookup failed: ${error.message}`);
|
|
||||||
if (lookupMapMessageEl) {
|
|
||||||
lookupMapMessageEl.textContent = 'Map could not be loaded due to an error.';
|
|
||||||
lookupMapMessageEl.classList.remove('hidden');
|
|
||||||
}
|
|
||||||
if (lookupMapEl) lookupMapEl.classList.add('hidden');
|
|
||||||
if (lookupMapLoader) lookupMapLoader.classList.add('hidden'); // Hide loader on error
|
|
||||||
resetLookupResults(); // Hide the section again on error
|
|
||||||
|
|
||||||
} finally {
|
|
||||||
if (lookupResultLoader) lookupResultLoader.classList.add('hidden'); // Hide main loader
|
|
||||||
// Map loader is handled by initOrUpdateMap
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Löst einen Domainnamen zu einer IP-Adresse auf (bevorzugt IPv4).
|
|
||||||
* @param {string} domain - Der aufzulösende Domainname.
|
|
||||||
* @returns {Promise<string|null>} Eine Promise, die mit der IP-Adresse oder null aufgelöst wird.
|
|
||||||
*/
|
|
||||||
async function resolveDomainToIp(domain) {
|
|
||||||
console.log(`Attempting to resolve domain: ${domain}`);
|
|
||||||
try {
|
|
||||||
// 1. Versuche A Record (IPv4)
|
|
||||||
let response = await fetch(`${API_BASE_URL}/dns-lookup?domain=${encodeURIComponent(domain)}&type=A`);
|
|
||||||
let data = await response.json();
|
|
||||||
|
|
||||||
if (response.ok && data.success && data.records && Array.isArray(data.records) && data.records.length > 0) {
|
|
||||||
console.log(`Resolved ${domain} to IPv4: ${data.records[0]}`);
|
|
||||||
return data.records[0]; // Nimm die erste IPv4-Adresse
|
|
||||||
}
|
|
||||||
|
|
||||||
// 2. Wenn kein A-Record, versuche AAAA Record (IPv6)
|
|
||||||
console.log(`No A record found for ${domain}, trying AAAA.`);
|
|
||||||
response = await fetch(`${API_BASE_URL}/dns-lookup?domain=${encodeURIComponent(domain)}&type=AAAA`);
|
|
||||||
data = await response.json();
|
|
||||||
|
|
||||||
if (response.ok && data.success && data.records && Array.isArray(data.records) && data.records.length > 0) {
|
|
||||||
console.log(`Resolved ${domain} to IPv6: ${data.records[0]}`);
|
|
||||||
return data.records[0]; // Nimm die erste IPv6-Adresse
|
|
||||||
}
|
|
||||||
|
|
||||||
// 3. Wenn beides fehlschlägt oder keine Records gefunden wurden
|
|
||||||
console.warn(`Could not resolve domain ${domain} to an IP address.`);
|
|
||||||
throw new Error(data.error || 'No A or AAAA records found.');
|
|
||||||
|
|
||||||
} catch (error) {
|
|
||||||
console.error('DNS resolution failed for', domain, ':', error);
|
|
||||||
throw new Error(`Could not resolve domain: ${error.message}`);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
// --- Ping Function (for Lookup) ---
|
|
||||||
async function runLookupPing(ip) {
|
|
||||||
if (!ip || !lookupPingResultsEl || !lookupPingLoader || !lookupPingOutputEl || !lookupPingErrorEl) return;
|
|
||||||
|
|
||||||
lookupPingResultsEl.classList.remove('hidden');
|
|
||||||
lookupPingLoader.classList.remove('hidden');
|
|
||||||
lookupPingOutputEl.textContent = '';
|
|
||||||
lookupPingErrorEl.textContent = '';
|
|
||||||
hideLookupError(); // Hide general lookup errors
|
|
||||||
|
|
||||||
try {
|
|
||||||
const response = await fetch(`${API_BASE_URL}/ping?targetIp=${encodeURIComponent(ip)}`);
|
|
||||||
const data = await response.json();
|
|
||||||
|
|
||||||
if (!response.ok || !data.success) {
|
|
||||||
throw new Error(data.error || `Ping request failed with status ${response.status}`);
|
|
||||||
}
|
|
||||||
|
|
||||||
console.log(`Ping results for ${ip}:`, data);
|
|
||||||
|
|
||||||
// Display parsed results nicely
|
|
||||||
let outputText = `--- Ping Statistics for ${ip} ---\n`;
|
|
||||||
if (data.stats) {
|
|
||||||
outputText += `Packets: ${data.stats.packets.transmitted} transmitted, ${data.stats.packets.received} received, ${data.stats.packets.lossPercent}% loss\n`;
|
|
||||||
if (data.stats.rtt) {
|
|
||||||
outputText += `Round Trip Time (ms): min=${data.stats.rtt.min}, avg=${data.stats.rtt.avg}, max=${data.stats.rtt.max}, mdev=${data.stats.rtt.mdev}\n`;
|
|
||||||
} else if (data.stats.packets.received === 0) {
|
|
||||||
outputText += `Status: Host unreachable or request timed out.\n`;
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
outputText += `Could not parse statistics.\n`;
|
|
||||||
}
|
|
||||||
outputText += `\n--- Raw Output ---\n${data.rawOutput || 'No raw output available.'}`;
|
|
||||||
lookupPingOutputEl.textContent = outputText;
|
|
||||||
|
|
||||||
} catch (error) {
|
|
||||||
console.error(`Failed to run ping for ${ip}:`, error);
|
|
||||||
lookupPingErrorEl.textContent = `Ping Error: ${error.message}`;
|
|
||||||
} finally {
|
|
||||||
lookupPingLoader.classList.add('hidden');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
// --- Traceroute Functions ---
|
|
||||||
function startTraceroute(ip) {
|
|
||||||
if (!ip) {
|
|
||||||
showGlobalError('Cannot start traceroute: IP address is missing.');
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
if (!tracerouteSection || !tracerouteOutputEl || !tracerouteLoader || !tracerouteMessage) return;
|
|
||||||
|
|
||||||
if (eventSource) {
|
|
||||||
eventSource.close();
|
|
||||||
console.log('Previous EventSource closed.');
|
|
||||||
}
|
|
||||||
|
|
||||||
tracerouteSection.classList.remove('hidden');
|
|
||||||
tracerouteOutputEl.textContent = '';
|
|
||||||
tracerouteLoader.classList.remove('hidden');
|
|
||||||
tracerouteMessage.textContent = `Starting traceroute to ${ip}...`;
|
|
||||||
hideGlobalError();
|
|
||||||
hideLookupError();
|
|
||||||
|
|
||||||
const url = `${API_BASE_URL}/traceroute?targetIp=${encodeURIComponent(ip)}`;
|
|
||||||
eventSource = new EventSource(url);
|
|
||||||
|
|
||||||
eventSource.onopen = () => {
|
|
||||||
console.log('SSE connection opened for traceroute.');
|
|
||||||
tracerouteMessage.textContent = `Traceroute to ${ip} in progress...`;
|
|
||||||
};
|
|
||||||
|
|
||||||
eventSource.onerror = (event) => {
|
|
||||||
console.error('EventSource failed:', event);
|
|
||||||
let errorMsg = 'Connection error during traceroute.';
|
|
||||||
if (eventSource.readyState === EventSource.CLOSED) {
|
|
||||||
errorMsg = 'Connection closed. Server might have stopped or a network issue occurred.';
|
|
||||||
}
|
|
||||||
tracerouteMessage.textContent = errorMsg;
|
|
||||||
tracerouteLoader.classList.add('hidden');
|
|
||||||
// Don't show global error here, as it might be a normal close
|
|
||||||
eventSource.close();
|
|
||||||
};
|
|
||||||
|
|
||||||
eventSource.addEventListener('hop', (event) => {
|
|
||||||
try {
|
|
||||||
const hopData = JSON.parse(event.data);
|
|
||||||
displayTracerouteHop(hopData);
|
|
||||||
} catch (e) { displayTracerouteLine(`[Error parsing hop data: ${event.data}]`, 'error-line'); }
|
|
||||||
});
|
|
||||||
|
|
||||||
eventSource.addEventListener('info', (event) => {
|
|
||||||
try {
|
|
||||||
const infoData = JSON.parse(event.data);
|
|
||||||
displayTracerouteLine(infoData.message, 'info-line');
|
|
||||||
} catch (e) { displayTracerouteLine(`[Error parsing info data: ${event.data}]`, 'error-line'); }
|
|
||||||
});
|
|
||||||
|
|
||||||
eventSource.addEventListener('error', (event) => { // Backend error event
|
|
||||||
try {
|
|
||||||
const errorData = JSON.parse(event.data);
|
|
||||||
displayTracerouteLine(errorData.error, 'error-line');
|
|
||||||
tracerouteMessage.textContent = `Error during traceroute: ${errorData.error}`;
|
|
||||||
} catch (e) { displayTracerouteLine(`[Received unparseable error event: ${event.data}]`, 'error-line'); }
|
|
||||||
});
|
|
||||||
|
|
||||||
eventSource.addEventListener('end', (event) => {
|
|
||||||
console.log('SSE connection closed by server (end event).');
|
|
||||||
try {
|
|
||||||
const endData = JSON.parse(event.data);
|
|
||||||
const endMessage = `Traceroute finished ${endData.exitCode === 0 ? 'successfully' : `with exit code ${endData.exitCode}`}.`;
|
|
||||||
displayTracerouteLine(endMessage, 'end-line');
|
|
||||||
tracerouteMessage.textContent = endMessage;
|
|
||||||
} catch (e) { displayTracerouteLine('[Traceroute finished, error parsing end event]', 'end-line'); }
|
|
||||||
tracerouteLoader.classList.add('hidden');
|
|
||||||
eventSource.close();
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
function displayTracerouteLine(text, className = '') {
|
|
||||||
if (!tracerouteOutputEl) return;
|
|
||||||
const lineDiv = document.createElement('div');
|
|
||||||
if (className) lineDiv.classList.add(className);
|
|
||||||
lineDiv.classList.add('fade-in'); // Animation hinzufügen
|
|
||||||
lineDiv.textContent = text;
|
|
||||||
tracerouteOutputEl.appendChild(lineDiv);
|
|
||||||
tracerouteOutputEl.scrollTop = tracerouteOutputEl.scrollHeight;
|
|
||||||
}
|
|
||||||
|
|
||||||
function displayTracerouteHop(hopData) {
|
|
||||||
if (!tracerouteOutputEl) return;
|
|
||||||
const lineDiv = document.createElement('div');
|
|
||||||
lineDiv.classList.add('hop-line', 'fade-in'); // Animation hinzufügen
|
|
||||||
|
|
||||||
const hopNumSpan = document.createElement('span');
|
|
||||||
hopNumSpan.classList.add('hop-number');
|
|
||||||
hopNumSpan.textContent = hopData.hop || '?';
|
|
||||||
lineDiv.appendChild(hopNumSpan);
|
|
||||||
|
|
||||||
if (hopData.ip) {
|
|
||||||
const ipSpan = document.createElement('span');
|
|
||||||
ipSpan.classList.add('hop-ip');
|
|
||||||
ipSpan.textContent = hopData.ip;
|
|
||||||
lineDiv.appendChild(ipSpan);
|
|
||||||
if (hopData.hostname) {
|
|
||||||
const hostSpan = document.createElement('span');
|
|
||||||
hostSpan.classList.add('hop-hostname');
|
|
||||||
hostSpan.textContent = ` (${hopData.hostname})`;
|
|
||||||
lineDiv.appendChild(hostSpan);
|
|
||||||
}
|
|
||||||
} else if (hopData.rtt && hopData.rtt.every(r => r === '*')) {
|
|
||||||
const timeoutSpan = document.createElement('span');
|
|
||||||
timeoutSpan.classList.add('hop-timeout');
|
|
||||||
timeoutSpan.textContent = '* * *';
|
|
||||||
lineDiv.appendChild(timeoutSpan);
|
|
||||||
} else {
|
|
||||||
lineDiv.appendChild(document.createTextNode(hopData.rawLine || 'Unknown hop format'));
|
|
||||||
}
|
|
||||||
|
|
||||||
if (hopData.rtt && Array.isArray(hopData.rtt)) {
|
|
||||||
hopData.rtt.forEach(rtt => {
|
|
||||||
const rttSpan = document.createElement('span');
|
|
||||||
if (rtt === '*') {
|
|
||||||
rttSpan.classList.add('hop-timeout');
|
|
||||||
rttSpan.textContent = ' *';
|
|
||||||
} else {
|
|
||||||
rttSpan.classList.add('hop-rtt');
|
|
||||||
rttSpan.textContent = ` ${rtt} ms`;
|
|
||||||
}
|
|
||||||
lineDiv.appendChild(rttSpan);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
tracerouteOutputEl.appendChild(lineDiv);
|
|
||||||
tracerouteOutputEl.scrollTop = tracerouteOutputEl.scrollHeight;
|
|
||||||
}
|
|
||||||
|
|
||||||
// --- Port Scan Functions ---
|
|
||||||
function startPortScan(ip) {
|
|
||||||
if (!ip) {
|
|
||||||
showGlobalError('Cannot start port scan: IP address is missing.');
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
if (!portScanSection || !portScanOutputEl || !portScanLoader || !portScanMessage) return;
|
|
||||||
|
|
||||||
if (portScanEventSource) {
|
|
||||||
portScanEventSource.close();
|
|
||||||
}
|
|
||||||
|
|
||||||
portScanSection.classList.remove('hidden');
|
|
||||||
portScanOutputEl.innerHTML = '';
|
|
||||||
portScanLoader.classList.remove('hidden');
|
|
||||||
portScanMessage.textContent = `Starting port scan for ${ip}...`;
|
|
||||||
hideGlobalError();
|
|
||||||
hideLookupError();
|
|
||||||
|
|
||||||
const url = `${API_BASE_URL}/port-scan?targetIp=${encodeURIComponent(ip)}`;
|
|
||||||
portScanEventSource = new EventSource(url);
|
|
||||||
|
|
||||||
portScanEventSource.onopen = () => {
|
|
||||||
console.log('SSE connection opened for port scan.');
|
|
||||||
};
|
|
||||||
|
|
||||||
portScanEventSource.onerror = (event) => {
|
|
||||||
console.error('Port Scan EventSource failed:', event);
|
|
||||||
portScanMessage.textContent = 'Connection error during port scan.';
|
|
||||||
portScanLoader.classList.add('hidden');
|
|
||||||
portScanEventSource.close();
|
|
||||||
};
|
|
||||||
|
|
||||||
portScanEventSource.addEventListener('info', (event) => {
|
|
||||||
const infoData = JSON.parse(event.data);
|
|
||||||
portScanMessage.textContent = infoData.message;
|
|
||||||
});
|
|
||||||
|
|
||||||
portScanEventSource.addEventListener('port_status', (event) => {
|
|
||||||
const portData = JSON.parse(event.data);
|
|
||||||
displayPortScanResult(portData);
|
|
||||||
});
|
|
||||||
|
|
||||||
portScanEventSource.addEventListener('error', (event) => {
|
|
||||||
const errorData = JSON.parse(event.data);
|
|
||||||
displayPortScanResult({ error: errorData.error });
|
|
||||||
});
|
|
||||||
|
|
||||||
portScanEventSource.addEventListener('end', (event) => {
|
|
||||||
const endData = JSON.parse(event.data);
|
|
||||||
portScanMessage.textContent = endData.message;
|
|
||||||
portScanLoader.classList.add('hidden');
|
|
||||||
portScanEventSource.close();
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
function displayPortScanResult(data) {
|
|
||||||
if (!portScanOutputEl) return;
|
|
||||||
const lineDiv = document.createElement('div');
|
|
||||||
lineDiv.classList.add('mb-1', 'fade-in'); // Animation hinzufügen
|
|
||||||
|
|
||||||
let statusColor = 'text-gray-400';
|
|
||||||
let statusText = data.status.toUpperCase();
|
|
||||||
if (data.status === 'open') {
|
|
||||||
statusColor = 'text-green-400';
|
|
||||||
statusText = 'OPEN';
|
|
||||||
} else if (data.status === 'closed') {
|
|
||||||
statusColor = 'text-red-400';
|
|
||||||
statusText = 'CLOSED';
|
|
||||||
} else if (data.status === 'timeout') {
|
|
||||||
statusColor = 'text-yellow-400';
|
|
||||||
statusText = 'TIMEOUT (Filtered?)';
|
|
||||||
}
|
|
||||||
|
|
||||||
if (data.error) {
|
|
||||||
lineDiv.innerHTML = `<span class="text-red-400">Error: ${data.error}</span>`;
|
|
||||||
} else {
|
|
||||||
lineDiv.innerHTML = `Port <span class="font-bold w-12 inline-block">${data.port}</span> <span class="w-24 inline-block">(${data.service})</span>: <span class="font-bold ${statusColor}">${statusText}</span>`;
|
|
||||||
}
|
|
||||||
|
|
||||||
portScanOutputEl.appendChild(lineDiv);
|
|
||||||
portScanOutputEl.scrollTop = portScanOutputEl.scrollHeight;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
// --- Event Handlers ---
|
|
||||||
function handleIpClick(event) {
|
|
||||||
event.preventDefault(); // Verhindert das Standardverhalten des Links (#)
|
|
||||||
if (currentIp) {
|
|
||||||
console.log(`User IP link clicked: ${currentIp}. Redirecting to WHOIS lookup...`);
|
|
||||||
// Leite zur Whois-Seite weiter und übergebe die IP als 'query'-Parameter
|
|
||||||
window.location.href = `/whois?query=${encodeURIComponent(currentIp)}`;
|
|
||||||
} else {
|
|
||||||
console.warn('Cannot redirect to WHOIS: current IP is not available.');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
async function handleLookupClick() {
|
|
||||||
if (!lookupIpInput) return;
|
|
||||||
const query = lookupIpInput.value.trim();
|
|
||||||
if (!query) {
|
|
||||||
showLookupError('Please enter an IP address or domain name.');
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
resetLookupResults(); // Reset results before starting
|
|
||||||
hideLookupError();
|
|
||||||
|
|
||||||
// Update URL with the query parameter
|
|
||||||
updateLookupUrlParams(query);
|
|
||||||
|
|
||||||
if (isValidIpAddress(query)) {
|
|
||||||
// Input is an IP address
|
|
||||||
console.log(`Lookup button clicked for IP: ${query}`);
|
|
||||||
fetchLookupInfo(query);
|
|
||||||
} else {
|
|
||||||
// Input is likely a domain name
|
|
||||||
console.log(`Lookup button clicked for domain: ${query}`);
|
|
||||||
showLookupStatus(`Resolving domain ${query}...`); // Show status
|
|
||||||
try {
|
|
||||||
const resolvedIp = await resolveDomainToIp(query);
|
|
||||||
if (resolvedIp) {
|
|
||||||
console.log(`Domain ${query} resolved to ${resolvedIp}. Fetching lookup info...`);
|
|
||||||
// Optional: Update input field with resolved IP? Maybe not, keep original query.
|
|
||||||
// lookupIpInput.value = resolvedIp;
|
|
||||||
fetchLookupInfo(resolvedIp); // Fetch info for the resolved IP
|
|
||||||
} else {
|
|
||||||
// Should be caught by the error in resolveDomainToIp, but as a fallback:
|
|
||||||
showLookupError(`Could not resolve domain ${query} to an IP address.`);
|
|
||||||
}
|
|
||||||
} catch (error) {
|
|
||||||
showLookupError(error.message); // Display resolution error
|
|
||||||
} finally {
|
|
||||||
hideLookupStatus(); // Hide status message regardless of outcome
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
function handleLookupPingClick() {
|
|
||||||
if (currentLookupIp) {
|
|
||||||
console.log(`Starting ping for looked-up IP: ${currentLookupIp}`);
|
|
||||||
runLookupPing(currentLookupIp); // Call the new ping function
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function handleLookupTraceClick() {
|
|
||||||
if (currentLookupIp) {
|
|
||||||
console.log(`Starting traceroute for looked-up IP: ${currentLookupIp}`);
|
|
||||||
startTraceroute(currentLookupIp);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function handleLookupScanClick() {
|
|
||||||
if (currentLookupIp) {
|
|
||||||
console.log(`Starting port scan for looked-up IP: ${currentLookupIp}`);
|
|
||||||
startPortScan(currentLookupIp);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Executes IP lookup from URL parameters if they exist
|
|
||||||
*/
|
|
||||||
function executeLookupFromUrl() {
|
|
||||||
const ipParam = getLookupUrlParams();
|
|
||||||
if (ipParam && lookupIpInput) {
|
|
||||||
// Populate the input field
|
|
||||||
lookupIpInput.value = ipParam;
|
|
||||||
|
|
||||||
// Trigger the lookup
|
|
||||||
handleLookupClick();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// --- Initial Load & Event Listeners ---
|
|
||||||
fetchIpInfo(); // Lade Infos zur eigenen IP
|
|
||||||
fetchVersionInfo(); // Lade Versionsinfo für Footer
|
|
||||||
|
|
||||||
// IP Lookup Listeners (nur wenn Elemente existieren)
|
|
||||||
if (lookupButton) lookupButton.addEventListener('click', handleLookupClick);
|
|
||||||
if (lookupIpInput) lookupIpInput.addEventListener('keypress', (event) => {
|
|
||||||
if (event.key === 'Enter') handleLookupClick();
|
|
||||||
});
|
|
||||||
if (lookupPingButton) lookupPingButton.addEventListener('click', handleLookupPingClick);
|
|
||||||
if (lookupTraceButton) lookupTraceButton.addEventListener('click', handleLookupTraceClick);
|
|
||||||
if (lookupScanButton) lookupScanButton.addEventListener('click', handleLookupScanClick);
|
|
||||||
|
|
||||||
// Der Event Listener für den IP-Link wird jetzt in fetchIpInfo() hinzugefügt,
|
|
||||||
// nachdem die IP erfolgreich abgerufen wurde.
|
|
||||||
|
|
||||||
// Execute lookup from URL parameters if present
|
|
||||||
executeLookupFromUrl();
|
|
||||||
|
|
||||||
}); // End DOMContentLoaded
|
|
||||||
@@ -0,0 +1,237 @@
|
|||||||
|
/* ── Spinner ───────────────────────────────────────────────────── */
|
||||||
|
.loader {
|
||||||
|
border: 4px solid rgba(168, 85, 247, 0.1);
|
||||||
|
border-left-color: #d8b4fe;
|
||||||
|
border-radius: 50%;
|
||||||
|
width: 24px;
|
||||||
|
height: 24px;
|
||||||
|
animation: spin 1s linear infinite;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
@keyframes spin { to { transform: rotate(360deg); } }
|
||||||
|
|
||||||
|
/* ── Glassmorphism ─────────────────────────────────────────────── */
|
||||||
|
.glass-panel {
|
||||||
|
background: rgba(17, 24, 39, 0.7);
|
||||||
|
backdrop-filter: blur(12px);
|
||||||
|
-webkit-backdrop-filter: blur(12px);
|
||||||
|
border: 1px solid rgba(255, 255, 255, 0.05);
|
||||||
|
}
|
||||||
|
.glass-card {
|
||||||
|
background: rgba(31, 41, 55, 0.6);
|
||||||
|
backdrop-filter: blur(8px);
|
||||||
|
-webkit-backdrop-filter: blur(8px);
|
||||||
|
border: 1px solid rgba(255, 255, 255, 0.05);
|
||||||
|
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
||||||
|
}
|
||||||
|
.glass-card:hover {
|
||||||
|
transform: translateY(-2px);
|
||||||
|
box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.5);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── Page transition animations ───────────────────────────────── */
|
||||||
|
@keyframes pageOut {
|
||||||
|
from { opacity: 1; transform: translateY(0); }
|
||||||
|
to { opacity: 0; transform: translateY(-8px); }
|
||||||
|
}
|
||||||
|
@keyframes pageIn {
|
||||||
|
from { opacity: 0; transform: translateY(10px); }
|
||||||
|
to { opacity: 1; transform: translateY(0); }
|
||||||
|
}
|
||||||
|
#app.page-leaving {
|
||||||
|
animation: pageOut 0.18s ease forwards;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
#app.page-entering {
|
||||||
|
animation: pageIn 0.26s ease forwards;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── Content fade-in ───────────────────────────────────────────── */
|
||||||
|
@keyframes fadeIn {
|
||||||
|
from { opacity: 0; transform: translateY(10px); }
|
||||||
|
to { opacity: 1; transform: translateY(0); }
|
||||||
|
}
|
||||||
|
.fade-in { animation: fadeIn 0.4s ease-out forwards; }
|
||||||
|
|
||||||
|
/* ── Result pre-block ──────────────────────────────────────────── */
|
||||||
|
.result-pre {
|
||||||
|
white-space: pre-wrap;
|
||||||
|
word-break: break-all;
|
||||||
|
font-family: 'Courier New', Courier, monospace;
|
||||||
|
background-color: rgba(0, 0, 0, 0.3);
|
||||||
|
color: #e5e7eb;
|
||||||
|
padding: 1rem;
|
||||||
|
border-radius: 0.375rem;
|
||||||
|
max-height: 500px;
|
||||||
|
overflow-y: auto;
|
||||||
|
font-size: 0.875rem;
|
||||||
|
border: 1px solid rgba(255, 255, 255, 0.05);
|
||||||
|
box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── Scrollbar ─────────────────────────────────────────────────── */
|
||||||
|
::-webkit-scrollbar { width: 8px; height: 8px; }
|
||||||
|
::-webkit-scrollbar-track { background: rgba(31, 41, 55, 0.5); }
|
||||||
|
::-webkit-scrollbar-thumb { background: #4b5563; border-radius: 4px; }
|
||||||
|
::-webkit-scrollbar-thumb:hover { background: #6b7280; }
|
||||||
|
|
||||||
|
/* ── Navigation ────────────────────────────────────────────────── */
|
||||||
|
nav ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
|
||||||
|
nav a {
|
||||||
|
color: #d1d5db;
|
||||||
|
text-decoration: none;
|
||||||
|
padding: 0.5rem 1rem;
|
||||||
|
border-radius: 0.5rem;
|
||||||
|
transition: all 0.2s ease;
|
||||||
|
background: rgba(255, 255, 255, 0.03);
|
||||||
|
border: 1px solid rgba(255, 255, 255, 0.05);
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
nav a:hover {
|
||||||
|
color: #fff;
|
||||||
|
background: rgba(168, 85, 247, 0.2);
|
||||||
|
border-color: rgba(168, 85, 247, 0.4);
|
||||||
|
box-shadow: 0 0 15px rgba(168, 85, 247, 0.1);
|
||||||
|
}
|
||||||
|
nav a.active-link {
|
||||||
|
background: rgba(168, 85, 247, 0.3);
|
||||||
|
color: #fff;
|
||||||
|
border-color: #a855f7;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── Header ────────────────────────────────────────────────────── */
|
||||||
|
header {
|
||||||
|
background: rgba(31, 41, 55, 0.4);
|
||||||
|
backdrop-filter: blur(10px);
|
||||||
|
padding: 1.5rem;
|
||||||
|
margin-bottom: 2rem;
|
||||||
|
border-radius: 1rem;
|
||||||
|
border: 1px solid rgba(255, 255, 255, 0.05);
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
gap: 1rem;
|
||||||
|
box-shadow: 0 4px 6px -1px rgba(0,0,0,.1), 0 2px 4px -1px rgba(0,0,0,.06);
|
||||||
|
}
|
||||||
|
@media (min-width: 768px) {
|
||||||
|
header { flex-direction: row; justify-content: space-between; }
|
||||||
|
}
|
||||||
|
header h1 { background-clip: text; }
|
||||||
|
|
||||||
|
/* ── Text gradient ─────────────────────────────────────────────── */
|
||||||
|
.text-gradient {
|
||||||
|
background: linear-gradient(to right, #c084fc, #e879f9);
|
||||||
|
-webkit-background-clip: text;
|
||||||
|
background-clip: text;
|
||||||
|
-webkit-text-fill-color: transparent;
|
||||||
|
}
|
||||||
|
.glitch-text:hover {
|
||||||
|
text-shadow: 2px 2px 0 rgba(168,85,247,.4), -2px -2px 0 rgba(236,72,153,.4);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── Copy button ───────────────────────────────────────────────── */
|
||||||
|
.copy-btn {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
font-size: 0.65rem;
|
||||||
|
padding: 0.15rem 0.5rem;
|
||||||
|
border-radius: 0.3rem;
|
||||||
|
border: 1px solid rgba(168, 85, 247, 0.35);
|
||||||
|
color: #a78bfa;
|
||||||
|
background: rgba(168, 85, 247, 0.1);
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all 0.15s ease;
|
||||||
|
user-select: none;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
.copy-btn:hover { background: rgba(168, 85, 247, 0.25); color: #c4b5fd; }
|
||||||
|
.copy-btn.copied { border-color: rgba(52,211,153,.4); color: #34d399; background: rgba(52,211,153,.1); }
|
||||||
|
|
||||||
|
/* ── Stop button ───────────────────────────────────────────────── */
|
||||||
|
.stop-btn {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.35rem;
|
||||||
|
font-size: 0.75rem;
|
||||||
|
padding: 0.25rem 0.75rem;
|
||||||
|
border-radius: 0.375rem;
|
||||||
|
border: 1px solid rgba(248,113,113,.4);
|
||||||
|
color: #f87171;
|
||||||
|
background: rgba(248,113,113,.1);
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all 0.15s ease;
|
||||||
|
}
|
||||||
|
.stop-btn:hover { background: rgba(248,113,113,.2); }
|
||||||
|
|
||||||
|
/* ── Home page — IP link ────────────────────────────────────────── */
|
||||||
|
#ip-address-link {
|
||||||
|
cursor: pointer;
|
||||||
|
text-decoration: none;
|
||||||
|
position: relative;
|
||||||
|
display: inline-block;
|
||||||
|
transition: color 0.3s ease;
|
||||||
|
}
|
||||||
|
#ip-address-link::after {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
width: 100%;
|
||||||
|
transform: scaleX(0);
|
||||||
|
height: 2px;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
background-color: #d8b4fe;
|
||||||
|
transform-origin: bottom right;
|
||||||
|
transition: transform 0.25s ease-out;
|
||||||
|
}
|
||||||
|
#ip-address-link:hover::after { transform: scaleX(1); transform-origin: bottom left; }
|
||||||
|
|
||||||
|
/* ── Home page — Traceroute output ─────────────────────────────── */
|
||||||
|
#traceroute-output pre, .result-pre {
|
||||||
|
white-space: pre-wrap;
|
||||||
|
word-break: break-all;
|
||||||
|
font-family: 'Courier New', Courier, monospace;
|
||||||
|
background-color: rgba(0,0,0,.3);
|
||||||
|
color: #e5e7eb;
|
||||||
|
padding: 1rem;
|
||||||
|
border-radius: 0.375rem;
|
||||||
|
max-height: 400px;
|
||||||
|
overflow-y: auto;
|
||||||
|
font-size: 0.875rem;
|
||||||
|
border: 1px solid rgba(255,255,255,.05);
|
||||||
|
box-shadow: inset 0 2px 4px 0 rgba(0,0,0,.3);
|
||||||
|
}
|
||||||
|
#traceroute-output .hop-line { margin-bottom: .25rem; padding-left: .5rem; border-left: 2px solid transparent; transition: border-left-color .3s; }
|
||||||
|
#traceroute-output .hop-line:hover { border-left-color: #a855f7; background: rgba(255,255,255,.02); }
|
||||||
|
#traceroute-output .hop-number { display: inline-block; width: 30px; text-align: right; margin-right: 15px; color: #6b7280; font-weight: bold; }
|
||||||
|
#traceroute-output .hop-ip { color: #60a5fa; font-weight: 500; }
|
||||||
|
#traceroute-output .hop-hostname { color: #c084fc; }
|
||||||
|
#traceroute-output .hop-rtt { color: #34d399; margin-left: 8px; font-size: .85em; }
|
||||||
|
#traceroute-output .hop-timeout { color: #f87171; }
|
||||||
|
#traceroute-output .info-line { color: #fbbf24; font-style: italic; }
|
||||||
|
#traceroute-output .error-line { color: #f87171; font-weight: bold; border-left: 3px solid #f87171; padding-left: 10px; }
|
||||||
|
#traceroute-output .end-line { color: #d8b4fe; font-weight: bold; margin-top: 15px; text-transform: uppercase; letter-spacing: .05em; border-top: 1px solid rgba(255,255,255,.1); padding-top: 10px; }
|
||||||
|
|
||||||
|
/* ── Home page — Maps ───────────────────────────────────────────── */
|
||||||
|
#map { height: 300px; }
|
||||||
|
#lookup-map { height: 250px; }
|
||||||
|
|
||||||
|
/* ── ASN page — Graph ───────────────────────────────────────────── */
|
||||||
|
#graph-container { width: 100%; height: 600px; background: rgba(0,0,0,.3); border-radius: .75rem; border: 1px solid rgba(255,255,255,.06); overflow: hidden; position: relative; }
|
||||||
|
#graph-svg { width: 100%; height: 100%; cursor: grab; }
|
||||||
|
#graph-svg:active { cursor: grabbing; }
|
||||||
|
.node-center circle { fill: #a855f7; stroke: #d8b4fe; stroke-width: 2.5; }
|
||||||
|
.node-upstream circle { fill: #3b82f6; stroke: #93c5fd; stroke-width: 1.5; }
|
||||||
|
.node-downstream circle { fill: #10b981; stroke: #6ee7b7; stroke-width: 1.5; }
|
||||||
|
.node-tier1 circle { fill: #6b7280; stroke: #9ca3af; stroke-width: 1.5; }
|
||||||
|
.node text { fill: #e5e7eb; font-size: 11px; font-family: 'Courier New',monospace; pointer-events: none; text-anchor: middle; }
|
||||||
|
.node:hover circle { filter: brightness(1.4); cursor: pointer; }
|
||||||
|
.link { stroke: rgba(255,255,255,.12); stroke-linecap: round; }
|
||||||
|
.link-upstream { stroke: rgba(59,130,246,.35); }
|
||||||
|
.link-tier1 { stroke: rgba(107,114,128,.3); stroke-dasharray: 4 3; }
|
||||||
|
.link-downstream { stroke: rgba(16,185,129,.35); }
|
||||||
|
#graph-tooltip { position: absolute; pointer-events: none; background: rgba(17,24,39,.95); backdrop-filter: blur(8px); border: 1px solid rgba(168,85,247,.4); border-radius: .5rem; padding: .6rem .9rem; font-size: 12px; color: #e5e7eb; max-width: 220px; z-index: 50; opacity: 0; transition: opacity .15s; }
|
||||||
|
.prefix-tag { display: inline-block; font-family: monospace; font-size: 11px; background: rgba(168,85,247,.15); color: #c084fc; border: 1px solid rgba(168,85,247,.3); border-radius: 4px; padding: 2px 6px; margin: 2px; }
|
||||||
|
.ixp-row { border-bottom: 1px solid rgba(255,255,255,.05); }
|
||||||
|
.ixp-row:last-child { border-bottom: none; }
|
||||||
|
|
||||||
|
.hidden { display: none !important; }
|
||||||
@@ -0,0 +1,21 @@
|
|||||||
|
export const API = '/api';
|
||||||
|
|
||||||
|
export function setupCopyBtn(btn, getText) {
|
||||||
|
if (!btn) return;
|
||||||
|
btn.addEventListener('click', () => {
|
||||||
|
const text = getText();
|
||||||
|
if (!text) return;
|
||||||
|
navigator.clipboard.writeText(text).then(() => {
|
||||||
|
const orig = btn.textContent;
|
||||||
|
btn.textContent = '✓ copied';
|
||||||
|
btn.classList.add('copied');
|
||||||
|
setTimeout(() => { btn.textContent = orig; btn.classList.remove('copied'); }, 1500);
|
||||||
|
}).catch(() => {});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
export function showError(el, msg) {
|
||||||
|
if (!el) return;
|
||||||
|
el.textContent = msg ? `Error: ${msg}` : '';
|
||||||
|
el.classList.toggle('hidden', !msg);
|
||||||
|
}
|
||||||
@@ -1,352 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html lang="de">
|
|
||||||
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
||||||
<title>IP Subnetz Rechner - uTools</title> <!-- Titel angepasst -->
|
|
||||||
<!-- Tailwind CSS Play CDN -->
|
|
||||||
<script src="https://cdn.tailwindcss.com"></script>
|
|
||||||
<!-- Eigene Styles (für Navigation etc., wie in index.html) -->
|
|
||||||
<style>
|
|
||||||
/* Einfacher Lade-Spinner (Tailwind animiert) */
|
|
||||||
.loader {
|
|
||||||
border: 4px solid rgba(168, 85, 247, 0.1);
|
|
||||||
/* Lila sehr transparent */
|
|
||||||
border-left-color: #d8b4fe;
|
|
||||||
/* Helleres Lila */
|
|
||||||
border-radius: 50%;
|
|
||||||
width: 24px;
|
|
||||||
height: 24px;
|
|
||||||
animation: spin 1s linear infinite;
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes spin {
|
|
||||||
to {
|
|
||||||
transform: rotate(360deg);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Glassmorphism Utilities */
|
|
||||||
.glass-panel {
|
|
||||||
background: rgba(17, 24, 39, 0.7);
|
|
||||||
backdrop-filter: blur(12px);
|
|
||||||
-webkit-backdrop-filter: blur(12px);
|
|
||||||
border: 1px solid rgba(255, 255, 255, 0.05);
|
|
||||||
}
|
|
||||||
|
|
||||||
.glass-card {
|
|
||||||
background: rgba(31, 41, 55, 0.6);
|
|
||||||
backdrop-filter: blur(8px);
|
|
||||||
-webkit-backdrop-filter: blur(8px);
|
|
||||||
border: 1px solid rgba(255, 255, 255, 0.05);
|
|
||||||
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.glass-card:hover {
|
|
||||||
transform: translateY(-2px);
|
|
||||||
box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.5);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Animations */
|
|
||||||
@keyframes fadeIn {
|
|
||||||
from {
|
|
||||||
opacity: 0;
|
|
||||||
transform: translateY(10px);
|
|
||||||
}
|
|
||||||
|
|
||||||
to {
|
|
||||||
opacity: 1;
|
|
||||||
transform: translateY(0);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.fade-in {
|
|
||||||
animation: fadeIn 0.5s ease-out forwards;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Navigations-Styling */
|
|
||||||
nav ul {
|
|
||||||
list-style: none;
|
|
||||||
padding: 0;
|
|
||||||
margin: 0;
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
gap: 0.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
nav a {
|
|
||||||
color: #d1d5db;
|
|
||||||
text-decoration: none;
|
|
||||||
padding: 0.5rem 1rem;
|
|
||||||
border-radius: 0.5rem;
|
|
||||||
transition: all 0.2s ease;
|
|
||||||
position: relative;
|
|
||||||
overflow: hidden;
|
|
||||||
background: rgba(255, 255, 255, 0.03);
|
|
||||||
border: 1px solid rgba(255, 255, 255, 0.05);
|
|
||||||
}
|
|
||||||
|
|
||||||
nav a:hover {
|
|
||||||
color: #fff;
|
|
||||||
background: rgba(168, 85, 247, 0.2);
|
|
||||||
border-color: rgba(168, 85, 247, 0.4);
|
|
||||||
box-shadow: 0 0 15px rgba(168, 85, 247, 0.1);
|
|
||||||
}
|
|
||||||
|
|
||||||
nav a.active-link {
|
|
||||||
background: rgba(168, 85, 247, 0.3);
|
|
||||||
color: #fff;
|
|
||||||
border-color: #a855f7;
|
|
||||||
}
|
|
||||||
|
|
||||||
header {
|
|
||||||
background: rgba(31, 41, 55, 0.4);
|
|
||||||
backdrop-filter: blur(10px);
|
|
||||||
padding: 1.5rem;
|
|
||||||
margin-bottom: 2rem;
|
|
||||||
border-radius: 1rem;
|
|
||||||
border: 1px solid rgba(255, 255, 255, 0.05);
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
gap: 1rem;
|
|
||||||
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (min-width: 768px) {
|
|
||||||
header {
|
|
||||||
flex-direction: row;
|
|
||||||
justify-content: space-between;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
header h1 {
|
|
||||||
background-clip: text;
|
|
||||||
}
|
|
||||||
|
|
||||||
.text-gradient {
|
|
||||||
background: linear-gradient(to right, #c084fc, #e879f9);
|
|
||||||
-webkit-background-clip: text;
|
|
||||||
background-clip: text;
|
|
||||||
-webkit-text-fill-color: transparent;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hidden {
|
|
||||||
display: none !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Custom Scrollbar */
|
|
||||||
::-webkit-scrollbar {
|
|
||||||
width: 8px;
|
|
||||||
height: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
::-webkit-scrollbar-track {
|
|
||||||
background: rgba(31, 41, 55, 0.5);
|
|
||||||
}
|
|
||||||
|
|
||||||
::-webkit-scrollbar-thumb {
|
|
||||||
background: #4b5563;
|
|
||||||
border-radius: 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
::-webkit-scrollbar-thumb:hover {
|
|
||||||
background: #6b7280;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
</head>
|
|
||||||
|
|
||||||
<body
|
|
||||||
class="bg-gray-950 text-gray-100 font-sans p-4 md:p-8 min-h-screen bg-[url('https://tailwindcss.com/_next/static/media/hero-dark.939eb757.png')] bg-cover bg-center bg-fixed selection:bg-purple-500 selection:text-white">
|
|
||||||
|
|
||||||
<header class="glass-panel">
|
|
||||||
<h1>uTools <span class="text-sm font-normal text-gray-400 opacity-75 tracking-wider uppercase ml-2">Network
|
|
||||||
Suite</span></h1>
|
|
||||||
<nav>
|
|
||||||
<ul>
|
|
||||||
<li><a href="/">IP Info & Tools</a></li>
|
|
||||||
<li><a href="/subnet" class="active-link">Subnetz Rechner</a></li>
|
|
||||||
<li><a href="/dns">DNS Lookup</a></li>
|
|
||||||
<li><a href="/whois">WHOIS Lookup</a></li>
|
|
||||||
<li><a href="/mac">MAC Lookup</a></li>
|
|
||||||
<li><a href="/asn">ASN Lookup</a></li>
|
|
||||||
</ul>
|
|
||||||
</nav>
|
|
||||||
</header>
|
|
||||||
|
|
||||||
<div
|
|
||||||
class="container mx-auto max-w-5xl glass-panel rounded-xl shadow-2xl p-6 md:p-8 backdrop-blur-xl border border-gray-800/50">
|
|
||||||
|
|
||||||
<h2 class="text-3xl font-bold mb-8 text-center text-gradient glitch-text">IP Subnetz Rechner</h2>
|
|
||||||
|
|
||||||
<form id="subnet-form" class="mb-8 glass-card p-6 rounded-xl">
|
|
||||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
|
|
||||||
<div>
|
|
||||||
<label for="ip-address"
|
|
||||||
class="block text-gray-400 text-sm font-bold mb-2 uppercase tracking-wide">IP Adresse:</label>
|
|
||||||
<input type="text" id="ip-address" name="ip-address" placeholder="z.B. 192.168.1.1" required
|
|
||||||
class="w-full px-4 py-3 bg-gray-900/50 border border-gray-700/50 rounded-lg text-gray-200 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent font-mono transition-all">
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<label for="cidr" class="block text-gray-400 text-sm font-bold mb-2 uppercase tracking-wide">CIDR /
|
|
||||||
Maske:</label>
|
|
||||||
<input type="text" id="cidr" name="cidr" placeholder="z.B. 24 oder 255.255.255.0" required
|
|
||||||
class="w-full px-4 py-3 bg-gray-900/50 border border-gray-700/50 rounded-lg text-gray-200 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent font-mono transition-all">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<button type="submit"
|
|
||||||
class="w-full bg-gradient-to-r from-purple-600 to-pink-600 hover:from-purple-500 hover:to-pink-500 text-white font-bold py-3 px-6 rounded-lg shadow-lg hover:shadow-purple-500/25 transition-all duration-200 ease-in-out transform hover:-translate-y-0.5">
|
|
||||||
Berechnen
|
|
||||||
</button>
|
|
||||||
</form>
|
|
||||||
|
|
||||||
<div id="results" class="glass-card rounded-xl p-6 hidden fade-in"> <!-- Ergebnisse initial verstecken -->
|
|
||||||
<h3
|
|
||||||
class="text-xl font-bold text-purple-300 border-b border-purple-500/30 pb-2 mb-4 flex items-center gap-2">
|
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24"
|
|
||||||
stroke="currentColor">
|
|
||||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
||||||
d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
|
|
||||||
</svg>
|
|
||||||
Ergebnisse:
|
|
||||||
</h3>
|
|
||||||
<div class="space-y-3 text-sm">
|
|
||||||
<div class="grid grid-cols-1 sm:grid-cols-2 gap-2 border-b border-gray-700/50 pb-2">
|
|
||||||
<span class="text-gray-400">Netzwerkadresse:</span>
|
|
||||||
<span id="network-address" class="font-mono text-white font-semibold">-</span>
|
|
||||||
</div>
|
|
||||||
<div class="grid grid-cols-1 sm:grid-cols-2 gap-2 border-b border-gray-700/50 pb-2">
|
|
||||||
<span class="text-gray-400">Broadcast-Adresse:</span>
|
|
||||||
<span id="broadcast-address" class="font-mono text-purple-400 font-semibold">-</span>
|
|
||||||
</div>
|
|
||||||
<div class="grid grid-cols-1 sm:grid-cols-2 gap-2 border-b border-gray-700/50 pb-2">
|
|
||||||
<span class="text-gray-400">Subnetzmaske:</span>
|
|
||||||
<span id="subnet-mask" class="font-mono text-gray-300">-</span>
|
|
||||||
</div>
|
|
||||||
<div class="grid grid-cols-1 sm:grid-cols-2 gap-2 border-b border-gray-700/50 pb-2">
|
|
||||||
<span class="text-gray-400">Anzahl der Hosts:</span>
|
|
||||||
<span id="host-count" class="font-mono text-green-400 font-bold">-</span>
|
|
||||||
</div>
|
|
||||||
<div class="grid grid-cols-1 sm:grid-cols-2 gap-2 border-b border-gray-700/50 pb-2">
|
|
||||||
<span class="text-gray-400">Erste Host-Adresse:</span>
|
|
||||||
<span id="first-host" class="font-mono text-blue-300">-</span>
|
|
||||||
</div>
|
|
||||||
<div class="grid grid-cols-1 sm:grid-cols-2 gap-2">
|
|
||||||
<span class="text-gray-400">Letzte Host-Adresse:</span>
|
|
||||||
<span id="last-host" class="font-mono text-blue-300">-</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Beispiel-Subnetze -->
|
|
||||||
<div id="examples" class="glass-card rounded-xl p-6 mt-8">
|
|
||||||
<h3 class="text-lg font-bold text-gray-400 uppercase tracking-wider border-b border-gray-700/50 pb-2 mb-4">
|
|
||||||
Beispiel-Subnetze (Private Adressbereiche)</h3>
|
|
||||||
<div class="overflow-x-auto">
|
|
||||||
<table class="min-w-full text-sm text-left text-gray-400">
|
|
||||||
<thead class="text-xs uppercase bg-gray-800/50 text-gray-200">
|
|
||||||
<tr>
|
|
||||||
<th scope="col" class="px-6 py-3">Bereich</th>
|
|
||||||
<th scope="col" class="px-6 py-3">CIDR</th>
|
|
||||||
<th scope="col" class="px-6 py-3">Subnetzmaske</th>
|
|
||||||
<th scope="col" class="px-6 py-3">Beschreibung</th>
|
|
||||||
<th scope="col" class="px-6 py-3">Aktion</th>
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
<tbody class="divide-y divide-gray-700/50">
|
|
||||||
<tr class="hover:bg-gray-700/30 transition-colors">
|
|
||||||
<td class="px-6 py-4 font-mono text-white">192.168.0.0 - 192.168.255.255</td>
|
|
||||||
<td class="px-6 py-4 font-mono">/16 (Gesamt)</td>
|
|
||||||
<td class="px-6 py-4 font-mono">255.255.0.0</td>
|
|
||||||
<td class="px-6 py-4">Klasse C (oft als /24 genutzt)</td>
|
|
||||||
<td class="px-6 py-4"><span
|
|
||||||
class="example-link text-purple-400 hover:text-purple-300 cursor-pointer underline"
|
|
||||||
data-ip="192.168.1.1" data-cidr="24">Beispiel /24</span></td>
|
|
||||||
</tr>
|
|
||||||
<tr class="hover:bg-gray-700/30 transition-colors">
|
|
||||||
<td class="px-6 py-4 font-mono text-white">172.16.0.0 - 172.31.255.255</td>
|
|
||||||
<td class="px-6 py-4 font-mono">/12 (Gesamt)</td>
|
|
||||||
<td class="px-6 py-4 font-mono">255.240.0.0</td>
|
|
||||||
<td class="px-6 py-4">Klasse B</td>
|
|
||||||
<td class="px-6 py-4"><span
|
|
||||||
class="example-link text-purple-400 hover:text-purple-300 cursor-pointer underline"
|
|
||||||
data-ip="172.16.10.5" data-cidr="16">Beispiel /16</span></td>
|
|
||||||
</tr>
|
|
||||||
<tr class="hover:bg-gray-700/30 transition-colors">
|
|
||||||
<td class="px-6 py-4 font-mono text-white">10.0.0.0 - 10.255.255.255</td>
|
|
||||||
<td class="px-6 py-4 font-mono">/8 (Gesamt)</td>
|
|
||||||
<td class="px-6 py-4 font-mono">255.0.0.0</td>
|
|
||||||
<td class="px-6 py-4">Klasse A</td>
|
|
||||||
<td class="px-6 py-4"><span
|
|
||||||
class="example-link text-purple-400 hover:text-purple-300 cursor-pointer underline"
|
|
||||||
data-ip="10.0.50.100" data-cidr="8">Beispiel /8</span></td>
|
|
||||||
</tr>
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
</div>
|
|
||||||
<p class="mt-4 text-xs text-gray-500 italic">Klicken Sie auf "Beispiel", um die Felder oben auszufüllen und
|
|
||||||
die Berechnung zu starten.</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Globaler Fehlerbereich -->
|
|
||||||
<div id="global-error"
|
|
||||||
class="mt-6 p-4 bg-red-900/50 border border-red-500/50 text-red-100 rounded-lg hidden backdrop-blur shadow-lg">
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<footer class="mt-12 pt-6 border-t border-gray-700/30 text-center text-xs text-gray-500">
|
|
||||||
<p>© 2025 <a href="https://mrunk.de"
|
|
||||||
class="text-purple-400 hover:text-purple-300 transition-colors">MrUnknownDE</a></p>
|
|
||||||
<p class="mt-1">Version: <span id="commit-sha" class="font-mono text-gray-400">loading...</span></p>
|
|
||||||
<!-- Footer mit Version hinzugefügt -->
|
|
||||||
</footer>
|
|
||||||
|
|
||||||
<!-- Nur das Skript für den Rechner laden -->
|
|
||||||
<script src="subnet-calculator.js"></script>
|
|
||||||
<script>
|
|
||||||
// Kleine Ergänzung, um die Beispiel-Links klickbar zu machen und Version zu laden
|
|
||||||
document.addEventListener('DOMContentLoaded', () => {
|
|
||||||
// Beispiel-Links
|
|
||||||
document.querySelectorAll('.example-link').forEach(link => {
|
|
||||||
link.addEventListener('click', (event) => {
|
|
||||||
const ip = event.target.getAttribute('data-ip');
|
|
||||||
const cidr = event.target.getAttribute('data-cidr');
|
|
||||||
document.getElementById('ip-address').value = ip;
|
|
||||||
document.getElementById('cidr').value = cidr;
|
|
||||||
// Berechnung direkt auslösen
|
|
||||||
document.getElementById('subnet-form').dispatchEvent(new Event('submit', { bubbles: true, cancelable: true }));
|
|
||||||
window.scrollTo({ top: 0, behavior: 'smooth' }); // Nach oben scrollen
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
// Version laden (gemeinsame Funktion)
|
|
||||||
const commitShaEl = document.getElementById('commit-sha');
|
|
||||||
const globalErrorEl = document.getElementById('global-error');
|
|
||||||
const API_BASE_URL = '/api'; // Muss hier definiert sein, wenn nicht global
|
|
||||||
|
|
||||||
async function fetchVersionInfo() {
|
|
||||||
try {
|
|
||||||
const response = await fetch(`${API_BASE_URL}/version`);
|
|
||||||
if (!response.ok) throw new Error(`Network response: ${response.statusText} (${response.status})`);
|
|
||||||
const data = await response.json();
|
|
||||||
if (commitShaEl) {
|
|
||||||
commitShaEl.textContent = data.commitSha || 'unknown';
|
|
||||||
}
|
|
||||||
} catch (error) {
|
|
||||||
console.error('Failed to fetch version info:', error);
|
|
||||||
if (commitShaEl) commitShaEl.textContent = 'error';
|
|
||||||
if (globalErrorEl) { // Zeige Fehler global an, wenn Element existiert
|
|
||||||
globalErrorEl.textContent = `Error loading version: ${error.message}`;
|
|
||||||
globalErrorEl.classList.remove('hidden');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
fetchVersionInfo();
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
</body>
|
|
||||||
|
|
||||||
</html>
|
|
||||||
@@ -1,211 +0,0 @@
|
|||||||
// Event Listener hinzufügen, sobald das DOM geladen ist
|
|
||||||
document.addEventListener('DOMContentLoaded', () => {
|
|
||||||
const form = document.getElementById('subnet-form');
|
|
||||||
if (form) {
|
|
||||||
form.addEventListener('submit', handleSubnetCalculation);
|
|
||||||
} else {
|
|
||||||
console.error("Subnetz-Formular (ID: subnet-form) nicht gefunden!");
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
// Funktion zur Behandlung der Subnetzberechnung bei Formularübermittlung
|
|
||||||
function handleSubnetCalculation(event) {
|
|
||||||
event.preventDefault(); // Verhindert das Neuladen der Seite
|
|
||||||
clearResults(); // Ergebnisse zuerst löschen/verstecken
|
|
||||||
|
|
||||||
const ipAddressInput = document.getElementById('ip-address').value.trim();
|
|
||||||
const cidrInput = document.getElementById('cidr').value.trim();
|
|
||||||
const resultsDiv = document.getElementById('results'); // Ergebnis-Div holen
|
|
||||||
|
|
||||||
// Einfache Validierung
|
|
||||||
if (!isValidIP(ipAddressInput)) {
|
|
||||||
alert("Bitte geben Sie eine gültige IPv4-Adresse ein.");
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
let cidr;
|
|
||||||
let subnetMask;
|
|
||||||
|
|
||||||
// Prüfen, ob CIDR oder Subnetzmaske eingegeben wurde
|
|
||||||
if (cidrInput.includes('.')) { // Annahme: Subnetzmaske im Format xxx.xxx.xxx.xxx
|
|
||||||
if (!isValidIP(cidrInput)) {
|
|
||||||
alert("Bitte geben Sie eine gültige Subnetzmaske ein.");
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
subnetMask = cidrInput;
|
|
||||||
cidr = maskToCidr(subnetMask);
|
|
||||||
if (cidr === null) {
|
|
||||||
alert("Ungültige Subnetzmaske. Sie muss aus einer kontinuierlichen Folge von Einsen gefolgt von Nullen bestehen (z.B. 255.255.255.0, nicht 255.255.0.255).");
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
} else { // Annahme: CIDR-Notation
|
|
||||||
cidr = parseInt(cidrInput, 10);
|
|
||||||
if (isNaN(cidr) || cidr < 0 || cidr > 32) {
|
|
||||||
alert("Bitte geben Sie einen gültigen CIDR-Wert (0-32) ein.");
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
subnetMask = cidrToMask(cidr);
|
|
||||||
if (subnetMask === null) {
|
|
||||||
alert("Interner Fehler bei der Umwandlung von CIDR zu Maske.");
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Berechnung durchführen und Ergebnisse anzeigen
|
|
||||||
try {
|
|
||||||
const results = calculateSubnet(ipAddressInput, cidr);
|
|
||||||
displayResults(results, subnetMask);
|
|
||||||
if (resultsDiv) {
|
|
||||||
resultsDiv.classList.remove('hidden'); // Ergebnisbereich sichtbar machen
|
|
||||||
} else {
|
|
||||||
console.error("Ergebnis-Div (ID: results) nicht gefunden!");
|
|
||||||
}
|
|
||||||
} catch (error) {
|
|
||||||
console.error("Fehler bei der Subnetzberechnung:", error);
|
|
||||||
alert("Fehler bei der Berechnung: " + error.message);
|
|
||||||
clearResults();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// --- Validierungs- und Hilfsfunktionen ---
|
|
||||||
|
|
||||||
function isValidIP(ip) {
|
|
||||||
const ipPattern = /^(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/;
|
|
||||||
return ipPattern.test(ip);
|
|
||||||
}
|
|
||||||
|
|
||||||
function ipToBinary(ip) {
|
|
||||||
return ip.split('.').map(octet => parseInt(octet, 10).toString(2).padStart(8, '0')).join('');
|
|
||||||
}
|
|
||||||
|
|
||||||
function binaryToIp(binary) {
|
|
||||||
if (binary.length !== 32) return null;
|
|
||||||
const octets = [];
|
|
||||||
for (let i = 0; i < 32; i += 8) {
|
|
||||||
octets.push(parseInt(binary.substring(i, i + 8), 2));
|
|
||||||
}
|
|
||||||
return octets.join('.');
|
|
||||||
}
|
|
||||||
|
|
||||||
function cidrToMask(cidr) {
|
|
||||||
if (cidr < 0 || cidr > 32) return null;
|
|
||||||
const maskBinary = '1'.repeat(cidr) + '0'.repeat(32 - cidr);
|
|
||||||
return binaryToIp(maskBinary);
|
|
||||||
}
|
|
||||||
|
|
||||||
function maskToCidr(mask) {
|
|
||||||
if (!isValidIP(mask)) return null;
|
|
||||||
const binaryMask = ipToBinary(mask);
|
|
||||||
let encounteredZero = false;
|
|
||||||
for (let i = 0; i < 32; i++) {
|
|
||||||
if (binaryMask[i] === '1') {
|
|
||||||
if (encounteredZero) return null;
|
|
||||||
} else {
|
|
||||||
encounteredZero = true;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
let cidr = 0;
|
|
||||||
for(let i = 0; i < 32; i++) {
|
|
||||||
if (binaryMask[i] === '1') {
|
|
||||||
cidr++;
|
|
||||||
} else {
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return cidr;
|
|
||||||
}
|
|
||||||
|
|
||||||
// --- Berechnungsfunktion ---
|
|
||||||
|
|
||||||
function calculateSubnet(ip, cidr) {
|
|
||||||
const ipBinary = ipToBinary(ip);
|
|
||||||
const maskBinary = '1'.repeat(cidr) + '0'.repeat(32 - cidr);
|
|
||||||
|
|
||||||
// Netzwerkadresse berechnen (Bitweises UND von IP und Maske)
|
|
||||||
let networkBinary = '';
|
|
||||||
for (let i = 0; i < 32; i++) {
|
|
||||||
networkBinary += (parseInt(ipBinary[i], 10) & parseInt(maskBinary[i], 10)).toString();
|
|
||||||
}
|
|
||||||
const networkAddress = binaryToIp(networkBinary);
|
|
||||||
const networkNum = parseInt(networkBinary, 2); // Netzwerkadresse als Zahl
|
|
||||||
|
|
||||||
// Broadcast-Adresse berechnen (Netzwerk-Teil + Host-Teil mit Einsen) - Korrigierte Methode
|
|
||||||
const hostBitsCount = 32 - cidr;
|
|
||||||
let broadcastBinary = networkBinary.substring(0, cidr) + '1'.repeat(hostBitsCount);
|
|
||||||
// Sicherstellen, dass die Länge 32 Bit beträgt (sollte sie aber ohnehin)
|
|
||||||
broadcastBinary = broadcastBinary.padEnd(32, '1'); // Auffüllen mit 1, falls Länge < 32 (unwahrscheinlich)
|
|
||||||
|
|
||||||
const broadcastAddress = binaryToIp(broadcastBinary);
|
|
||||||
// broadcastNum wird für die letzte Host-Adresse benötigt
|
|
||||||
const broadcastNum = parseInt(broadcastBinary, 2);
|
|
||||||
|
|
||||||
// Anzahl der Hosts
|
|
||||||
const hostBits = 32 - cidr; // hostBitsCount umbenannt für Konsistenz
|
|
||||||
let hostCount = 0;
|
|
||||||
if (hostBits >= 2) { // Mindestens /30 für 2 Hosts (-2)
|
|
||||||
hostCount = Math.pow(2, hostBits) - 2;
|
|
||||||
} else if (hostBits === 1) { // /31 hat 2 Adressen, beide nutzbar (RFC 3021)
|
|
||||||
hostCount = 2;
|
|
||||||
} else { // /32 hat nur 1 Adresse
|
|
||||||
hostCount = 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Erste Host-Adresse
|
|
||||||
let firstHost = '-';
|
|
||||||
if (hostBits >= 2) { // /30 oder größer: Netzwerkadresse + 1
|
|
||||||
// Sicherstellen, dass die Addition korrekt behandelt wird (als Zahl)
|
|
||||||
const firstHostNum = networkNum + 1;
|
|
||||||
const firstHostBinary = firstHostNum.toString(2).padStart(32, '0');
|
|
||||||
firstHost = binaryToIp(firstHostBinary);
|
|
||||||
} else if (cidr === 31) { // /31: Die erste Adresse des /31
|
|
||||||
firstHost = networkAddress;
|
|
||||||
} else { // /32: Nur die eine Adresse
|
|
||||||
firstHost = networkAddress;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Letzte Host-Adresse
|
|
||||||
let lastHost = '-';
|
|
||||||
if (hostBits >= 2) { // /30 oder größer: Broadcast-Adresse - 1
|
|
||||||
// Sicherstellen, dass die Subtraktion korrekt behandelt wird (als Zahl)
|
|
||||||
const lastHostNum = broadcastNum - 1;
|
|
||||||
const lastHostBinary = lastHostNum.toString(2).padStart(32, '0');
|
|
||||||
lastHost = binaryToIp(lastHostBinary);
|
|
||||||
} else if (cidr === 31) { // /31: Die zweite Adresse des /31
|
|
||||||
lastHost = broadcastAddress;
|
|
||||||
} else { // /32: Nur die eine Adresse
|
|
||||||
lastHost = networkAddress;
|
|
||||||
}
|
|
||||||
|
|
||||||
return {
|
|
||||||
networkAddress,
|
|
||||||
broadcastAddress,
|
|
||||||
hostCount,
|
|
||||||
firstHost,
|
|
||||||
lastHost
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
// --- Anzeige-Funktionen ---
|
|
||||||
|
|
||||||
function displayResults(results, subnetMask) {
|
|
||||||
document.getElementById('network-address').textContent = results.networkAddress;
|
|
||||||
document.getElementById('broadcast-address').textContent = results.broadcastAddress;
|
|
||||||
document.getElementById('host-count').textContent = results.hostCount >= 0 ? results.hostCount.toLocaleString() : '-';
|
|
||||||
document.getElementById('first-host').textContent = results.firstHost;
|
|
||||||
document.getElementById('last-host').textContent = results.lastHost;
|
|
||||||
document.getElementById('subnet-mask').textContent = subnetMask;
|
|
||||||
}
|
|
||||||
|
|
||||||
function clearResults() {
|
|
||||||
document.getElementById('network-address').textContent = '-';
|
|
||||||
document.getElementById('broadcast-address').textContent = '-';
|
|
||||||
document.getElementById('host-count').textContent = '-';
|
|
||||||
document.getElementById('first-host').textContent = '-';
|
|
||||||
document.getElementById('last-host').textContent = '-';
|
|
||||||
document.getElementById('subnet-mask').textContent = '-';
|
|
||||||
|
|
||||||
const resultsDiv = document.getElementById('results');
|
|
||||||
if (resultsDiv && !resultsDiv.classList.contains('hidden')) {
|
|
||||||
resultsDiv.classList.add('hidden');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,239 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html lang="de">
|
|
||||||
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
||||||
<title>WHOIS Lookup - uTools</title>
|
|
||||||
<!-- Tailwind CSS Play CDN -->
|
|
||||||
<script src="https://cdn.tailwindcss.com"></script>
|
|
||||||
<!-- Eigene Styles -->
|
|
||||||
<style>
|
|
||||||
/* Einfacher Lade-Spinner (Tailwind animiert) */
|
|
||||||
.loader {
|
|
||||||
border: 4px solid rgba(168, 85, 247, 0.1);
|
|
||||||
/* Lila sehr transparent */
|
|
||||||
border-left-color: #d8b4fe;
|
|
||||||
/* Helleres Lila */
|
|
||||||
border-radius: 50%;
|
|
||||||
width: 24px;
|
|
||||||
height: 24px;
|
|
||||||
animation: spin 1s linear infinite;
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes spin {
|
|
||||||
to {
|
|
||||||
transform: rotate(360deg);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Glassmorphism Utilities */
|
|
||||||
.glass-panel {
|
|
||||||
background: rgba(17, 24, 39, 0.7);
|
|
||||||
backdrop-filter: blur(12px);
|
|
||||||
-webkit-backdrop-filter: blur(12px);
|
|
||||||
border: 1px solid rgba(255, 255, 255, 0.05);
|
|
||||||
}
|
|
||||||
|
|
||||||
.glass-card {
|
|
||||||
background: rgba(31, 41, 55, 0.6);
|
|
||||||
backdrop-filter: blur(8px);
|
|
||||||
-webkit-backdrop-filter: blur(8px);
|
|
||||||
border: 1px solid rgba(255, 255, 255, 0.05);
|
|
||||||
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.glass-card:hover {
|
|
||||||
transform: translateY(-2px);
|
|
||||||
box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.5);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Animations */
|
|
||||||
@keyframes fadeIn {
|
|
||||||
from {
|
|
||||||
opacity: 0;
|
|
||||||
transform: translateY(10px);
|
|
||||||
}
|
|
||||||
|
|
||||||
to {
|
|
||||||
opacity: 1;
|
|
||||||
transform: translateY(0);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.fade-in {
|
|
||||||
animation: fadeIn 0.5s ease-out forwards;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Ergebnis-Pre-Formatierung */
|
|
||||||
.result-pre {
|
|
||||||
white-space: pre-wrap;
|
|
||||||
word-break: break-all;
|
|
||||||
font-family: 'Courier New', Courier, monospace;
|
|
||||||
background-color: rgba(0, 0, 0, 0.3);
|
|
||||||
color: #e5e7eb;
|
|
||||||
padding: 1rem;
|
|
||||||
border-radius: 0.375rem;
|
|
||||||
max-height: 600px;
|
|
||||||
overflow-y: auto;
|
|
||||||
font-size: 0.875rem;
|
|
||||||
border: 1px solid rgba(255, 255, 255, 0.05);
|
|
||||||
box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.3);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Scrollbar Styling */
|
|
||||||
::-webkit-scrollbar {
|
|
||||||
width: 8px;
|
|
||||||
height: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
::-webkit-scrollbar-track {
|
|
||||||
background: rgba(31, 41, 55, 0.5);
|
|
||||||
}
|
|
||||||
|
|
||||||
::-webkit-scrollbar-thumb {
|
|
||||||
background: #4b5563;
|
|
||||||
border-radius: 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
::-webkit-scrollbar-thumb:hover {
|
|
||||||
background: #6b7280;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Navigations-Styling */
|
|
||||||
nav ul {
|
|
||||||
list-style: none;
|
|
||||||
padding: 0;
|
|
||||||
margin: 0;
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
gap: 0.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
nav a {
|
|
||||||
color: #d1d5db;
|
|
||||||
text-decoration: none;
|
|
||||||
padding: 0.5rem 1rem;
|
|
||||||
border-radius: 0.5rem;
|
|
||||||
transition: all 0.2s ease;
|
|
||||||
position: relative;
|
|
||||||
overflow: hidden;
|
|
||||||
background: rgba(255, 255, 255, 0.03);
|
|
||||||
border: 1px solid rgba(255, 255, 255, 0.05);
|
|
||||||
}
|
|
||||||
|
|
||||||
nav a:hover {
|
|
||||||
color: #fff;
|
|
||||||
background: rgba(168, 85, 247, 0.2);
|
|
||||||
border-color: rgba(168, 85, 247, 0.4);
|
|
||||||
box-shadow: 0 0 15px rgba(168, 85, 247, 0.1);
|
|
||||||
}
|
|
||||||
|
|
||||||
nav a.active-link {
|
|
||||||
background: rgba(168, 85, 247, 0.3);
|
|
||||||
color: #fff;
|
|
||||||
border-color: #a855f7;
|
|
||||||
}
|
|
||||||
|
|
||||||
header {
|
|
||||||
background: rgba(31, 41, 55, 0.4);
|
|
||||||
backdrop-filter: blur(10px);
|
|
||||||
padding: 1.5rem;
|
|
||||||
margin-bottom: 2rem;
|
|
||||||
border-radius: 1rem;
|
|
||||||
border: 1px solid rgba(255, 255, 255, 0.05);
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
gap: 1rem;
|
|
||||||
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (min-width: 768px) {
|
|
||||||
header {
|
|
||||||
flex-direction: row;
|
|
||||||
justify-content: space-between;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
header h1 {
|
|
||||||
background-clip: text;
|
|
||||||
}
|
|
||||||
|
|
||||||
.text-gradient {
|
|
||||||
background: linear-gradient(to right, #c084fc, #e879f9);
|
|
||||||
-webkit-background-clip: text;
|
|
||||||
background-clip: text;
|
|
||||||
-webkit-text-fill-color: transparent;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hidden {
|
|
||||||
display: none !important;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
</head>
|
|
||||||
|
|
||||||
<body
|
|
||||||
class="bg-gray-950 text-gray-100 font-sans p-4 md:p-8 min-h-screen bg-[url('https://tailwindcss.com/_next/static/media/hero-dark.939eb757.png')] bg-cover bg-center bg-fixed selection:bg-purple-500 selection:text-white">
|
|
||||||
|
|
||||||
<header class="glass-panel">
|
|
||||||
<h1>uTools <span class="text-sm font-normal text-gray-400 opacity-75 tracking-wider uppercase ml-2">Network
|
|
||||||
Suite</span></h1>
|
|
||||||
<nav>
|
|
||||||
<ul>
|
|
||||||
<li><a href="/">IP Info & Tools</a></li>
|
|
||||||
<li><a href="/subnet">Subnetz Rechner</a></li>
|
|
||||||
<li><a href="/dns">DNS Lookup</a></li>
|
|
||||||
<li><a href="/whois" class="active-link">WHOIS Lookup</a></li>
|
|
||||||
<li><a href="/mac">MAC Lookup</a></li>
|
|
||||||
<li><a href="/asn">ASN Lookup</a></li>
|
|
||||||
</ul>
|
|
||||||
</nav>
|
|
||||||
</header>
|
|
||||||
|
|
||||||
<div
|
|
||||||
class="container mx-auto max-w-5xl glass-panel rounded-xl shadow-2xl p-6 md:p-8 backdrop-blur-xl border border-gray-800/50">
|
|
||||||
|
|
||||||
<h1 class="text-3xl font-bold mb-8 text-center text-gradient glitch-text">WHOIS Lookup</h1>
|
|
||||||
|
|
||||||
<!-- Bereich für WHOIS Lookup -->
|
|
||||||
<div class="mt-8 p-6 glass-card rounded-xl">
|
|
||||||
<div class="flex flex-col sm:flex-row gap-3 mb-6">
|
|
||||||
<input type="text" id="whois-query-input" placeholder="Enter domain or IP (e.g., google.com or 8.8.8.8)"
|
|
||||||
class="flex-grow px-4 py-3 bg-gray-900/50 border border-gray-700/50 rounded-lg text-gray-200 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent font-mono transition-all placeholder-gray-600">
|
|
||||||
<button id="whois-lookup-button"
|
|
||||||
class="bg-gradient-to-r from-purple-600 to-pink-600 hover:from-purple-500 hover:to-pink-500 text-white font-bold py-3 px-6 rounded-lg shadow-lg hover:shadow-purple-500/25 transition-all duration-200 ease-in-out transform hover:-translate-y-0.5">
|
|
||||||
Lookup WHOIS
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
<div id="whois-lookup-error"
|
|
||||||
class="text-red-400 mb-4 hidden p-3 bg-red-900/20 border border-red-500/30 rounded"></div>
|
|
||||||
<div id="whois-lookup-results-section" class="hidden mt-6 border-t border-gray-700/50 pt-6 fade-in">
|
|
||||||
<h3 class="text-lg font-semibold text-purple-300 mb-4 flex items-center gap-2">
|
|
||||||
<div class="w-1.5 h-6 bg-purple-500 rounded-full"></div>
|
|
||||||
WHOIS Results for: <span id="whois-lookup-query" class="font-mono text-purple-400 ml-1"></span>
|
|
||||||
</h3>
|
|
||||||
<div id="whois-lookup-loader" class="loader hidden mb-4"></div>
|
|
||||||
<pre id="whois-lookup-output" class="result-pre custom-scrollbar"></pre> <!-- Ergebnisbereich -->
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Globaler Fehlerbereich -->
|
|
||||||
<div id="global-error"
|
|
||||||
class="mt-6 p-4 bg-red-900/50 border border-red-500/50 text-red-100 rounded-lg hidden backdrop-blur shadow-lg">
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Footer für Version -->
|
|
||||||
<footer class="mt-12 pt-6 border-t border-gray-700/30 text-center text-xs text-gray-500">
|
|
||||||
<p>© 2025 <a href="https://mrunk.de"
|
|
||||||
class="text-purple-400 hover:text-purple-300 transition-colors">MrUnknownDE</a></p>
|
|
||||||
<p class="mt-1">Version: <span id="commit-sha" class="font-mono text-gray-400">loading...</span></p>
|
|
||||||
</footer>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Eigene JS-Logik für diese Seite -->
|
|
||||||
<script src="whois-lookup.js"></script>
|
|
||||||
</body>
|
|
||||||
|
|
||||||
</html>
|
|
||||||
@@ -1,151 +0,0 @@
|
|||||||
// frontend/whois-lookup.js
|
|
||||||
document.addEventListener('DOMContentLoaded', () => {
|
|
||||||
// --- DOM Elements (WHOIS Lookup) ---
|
|
||||||
const whoisQueryInput = document.getElementById('whois-query-input');
|
|
||||||
const whoisLookupButton = document.getElementById('whois-lookup-button');
|
|
||||||
const whoisLookupErrorEl = document.getElementById('whois-lookup-error');
|
|
||||||
const whoisLookupResultsSection = document.getElementById('whois-lookup-results-section');
|
|
||||||
const whoisLookupQueryEl = document.getElementById('whois-lookup-query');
|
|
||||||
const whoisLookupLoader = document.getElementById('whois-lookup-loader');
|
|
||||||
const whoisLookupOutputEl = document.getElementById('whois-lookup-output');
|
|
||||||
|
|
||||||
// --- DOM Elements (Common) ---
|
|
||||||
const globalErrorEl = document.getElementById('global-error');
|
|
||||||
const commitShaEl = document.getElementById('commit-sha');
|
|
||||||
|
|
||||||
// --- Configuration ---
|
|
||||||
const API_BASE_URL = '/api'; // Anpassen, falls nötig
|
|
||||||
|
|
||||||
// --- Helper Functions ---
|
|
||||||
|
|
||||||
/** Zeigt globale Fehler an */
|
|
||||||
function showGlobalError(message) {
|
|
||||||
if (!globalErrorEl) return;
|
|
||||||
globalErrorEl.textContent = `Error: ${message}`;
|
|
||||||
globalErrorEl.classList.remove('hidden');
|
|
||||||
}
|
|
||||||
|
|
||||||
/** Versteckt globale Fehler */
|
|
||||||
function hideGlobalError() {
|
|
||||||
if (!globalErrorEl) return;
|
|
||||||
globalErrorEl.classList.add('hidden');
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Generische Funktion zum Abrufen und Anzeigen von Lookup-Ergebnissen.
|
|
||||||
* @param {string} endpoint - Der API-Endpunkt (z.B. '/whois-lookup').
|
|
||||||
* @param {object} params - Query-Parameter als Objekt (z.B. { query: '...' }).
|
|
||||||
* @param {HTMLElement} resultsSection - Der Container für die Ergebnisse.
|
|
||||||
* @param {HTMLElement} loaderElement - Das Loader-Element.
|
|
||||||
* @param {HTMLElement} errorElement - Das Fehleranzeige-Element für diesen Lookup.
|
|
||||||
* @param {HTMLElement} queryElement - Das Element zur Anzeige der Suchanfrage.
|
|
||||||
* @param {HTMLElement} outputElement - Das Element zur Anzeige der Ergebnisse (<pre> oder <p>).
|
|
||||||
* @param {function} displayFn - Funktion zur Formatierung und Anzeige der Daten im outputElement.
|
|
||||||
*/
|
|
||||||
async function fetchAndDisplay(endpoint, params, resultsSection, loaderElement, errorElement, queryElement, outputElement, displayFn) {
|
|
||||||
// Reset animation
|
|
||||||
resultsSection.classList.remove('fade-in');
|
|
||||||
void resultsSection.offsetWidth; // Trigger reflow
|
|
||||||
resultsSection.classList.add('fade-in');
|
|
||||||
|
|
||||||
resultsSection.classList.remove('hidden');
|
|
||||||
loaderElement.classList.remove('hidden');
|
|
||||||
errorElement.classList.add('hidden');
|
|
||||||
outputElement.textContent = ''; // Clear previous results
|
|
||||||
if (queryElement) queryElement.textContent = Object.values(params).join(', '); // Display query
|
|
||||||
hideGlobalError(); // Hide global errors before new request
|
|
||||||
|
|
||||||
const urlParams = new URLSearchParams(params);
|
|
||||||
const url = `${API_BASE_URL}${endpoint}?${urlParams.toString()}`;
|
|
||||||
|
|
||||||
try {
|
|
||||||
const response = await fetch(url);
|
|
||||||
const data = await response.json();
|
|
||||||
|
|
||||||
if (!response.ok || !data.success) {
|
|
||||||
throw new Error(data.error || `Request failed with status ${response.status}`);
|
|
||||||
}
|
|
||||||
|
|
||||||
console.log(`Received ${endpoint} data:`, data);
|
|
||||||
displayFn(data, outputElement); // Call the specific display function
|
|
||||||
|
|
||||||
} catch (error) {
|
|
||||||
console.error(`Failed to fetch ${endpoint}:`, error);
|
|
||||||
errorElement.textContent = `Error: ${error.message}`;
|
|
||||||
errorElement.classList.remove('hidden');
|
|
||||||
outputElement.textContent = ''; // Clear output on error
|
|
||||||
} finally {
|
|
||||||
loaderElement.classList.add('hidden');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/** Ruft die Versionsinformationen (Commit SHA) ab */
|
|
||||||
async function fetchVersionInfo() {
|
|
||||||
if (!commitShaEl) return; // Don't fetch if element doesn't exist
|
|
||||||
try {
|
|
||||||
const response = await fetch(`${API_BASE_URL}/version`);
|
|
||||||
if (!response.ok) throw new Error(`Network response: ${response.statusText} (${response.status})`);
|
|
||||||
const data = await response.json();
|
|
||||||
commitShaEl.textContent = data.commitSha || 'unknown';
|
|
||||||
} catch (error) {
|
|
||||||
console.error('Failed to fetch version info:', error);
|
|
||||||
commitShaEl.textContent = 'error';
|
|
||||||
// Optionally show global error
|
|
||||||
// showGlobalError(`Could not load version info: ${error.message}`);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// --- WHOIS Lookup Specific Functions ---
|
|
||||||
function displayWhoisResults(data, outputEl) {
|
|
||||||
// WHOIS data can be large and unstructured, display as raw text
|
|
||||||
if (typeof data.result === 'string') {
|
|
||||||
outputEl.textContent = data.result; // Display raw text
|
|
||||||
} else {
|
|
||||||
// Fallback if the result is not a string (shouldn't happen with current backend)
|
|
||||||
outputEl.textContent = JSON.stringify(data.result, null, 2);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function handleWhoisLookupClick() {
|
|
||||||
const query = whoisQueryInput.value.trim();
|
|
||||||
if (!query) {
|
|
||||||
whoisLookupErrorEl.textContent = 'Please enter a domain or IP address.';
|
|
||||||
whoisLookupErrorEl.classList.remove('hidden');
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
fetchAndDisplay(
|
|
||||||
'/whois-lookup',
|
|
||||||
{ query },
|
|
||||||
whoisLookupResultsSection,
|
|
||||||
whoisLookupLoader,
|
|
||||||
whoisLookupErrorEl,
|
|
||||||
whoisLookupQueryEl,
|
|
||||||
whoisLookupOutputEl,
|
|
||||||
displayWhoisResults
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
/** Prüft URL-Parameter und startet ggf. den Lookup */
|
|
||||||
function checkUrlParamsAndLookup() {
|
|
||||||
const urlParams = new URLSearchParams(window.location.search);
|
|
||||||
const queryFromUrl = urlParams.get('query');
|
|
||||||
|
|
||||||
if (queryFromUrl && whoisQueryInput) {
|
|
||||||
console.log(`Found query parameter in URL: ${queryFromUrl}`);
|
|
||||||
whoisQueryInput.value = queryFromUrl; // Set input field value
|
|
||||||
handleWhoisLookupClick(); // Trigger the lookup
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// --- Initial Load & Event Listeners ---
|
|
||||||
fetchVersionInfo(); // Lade Versionsinfo für Footer
|
|
||||||
|
|
||||||
whoisLookupButton.addEventListener('click', handleWhoisLookupClick);
|
|
||||||
whoisQueryInput.addEventListener('keypress', (event) => {
|
|
||||||
if (event.key === 'Enter') handleWhoisLookupClick();
|
|
||||||
});
|
|
||||||
|
|
||||||
// Prüfe URL-Parameter nach dem Setup der Listener
|
|
||||||
checkUrlParamsAndLookup();
|
|
||||||
|
|
||||||
}); // End DOMContentLoaded
|
|
||||||
+2
-15
@@ -10,22 +10,9 @@ server {
|
|||||||
access_log /var/log/nginx/access.log;
|
access_log /var/log/nginx/access.log;
|
||||||
error_log /var/log/nginx/error.log;
|
error_log /var/log/nginx/error.log;
|
||||||
|
|
||||||
# Clean URL rewrites - Map short URLs to actual HTML files
|
# SPA: all routes fall back to index.html; static assets are served directly
|
||||||
rewrite ^/dns$ /dns-lookup.html last;
|
|
||||||
rewrite ^/dns-lookup$ /dns-lookup.html last;
|
|
||||||
rewrite ^/whois$ /whois-lookup.html last;
|
|
||||||
rewrite ^/whois-lookup$ /whois-lookup.html last;
|
|
||||||
rewrite ^/mac$ /mac-lookup.html last;
|
|
||||||
rewrite ^/mac-lookup$ /mac-lookup.html last;
|
|
||||||
rewrite ^/subnet$ /subnet-calculator.html last;
|
|
||||||
rewrite ^/subnet-calculator$ /subnet-calculator.html last;
|
|
||||||
rewrite ^/asn$ /asn-lookup.html last;
|
|
||||||
rewrite ^/asn-lookup$ /asn-lookup.html last;
|
|
||||||
|
|
||||||
# Statische Dateien direkt ausliefern
|
|
||||||
location / {
|
location / {
|
||||||
# First try the exact URI, then with .html, then fall back to index.html
|
try_files $uri $uri/ /index.html;
|
||||||
try_files $uri $uri.html $uri/ /index.html;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
# API-Anfragen an den Backend-Service weiterleiten
|
# API-Anfragen an den Backend-Service weiterleiten
|
||||||
|
|||||||
Reference in New Issue
Block a user