mirror of
https://github.com/MrUnknownDE/utools.git
synced 2026-04-25 08:53:45 +02:00
edit path in dockerfile from frontend
This commit is contained in:
109
frontend/app/dns-lookup.html
Normal file
109
frontend/app/dns-lookup.html
Normal file
@@ -0,0 +1,109 @@
|
||||
<!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 */
|
||||
.loader {
|
||||
border: 4px solid rgba(168, 85, 247, 0.3); /* Lila transparent */
|
||||
border-left-color: #a855f7; /* Lila */
|
||||
border-radius: 50%;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
animation: spin 1s linear infinite;
|
||||
}
|
||||
@keyframes spin {
|
||||
to { transform: rotate(360deg); }
|
||||
}
|
||||
/* Ergebnis-Pre-Formatierung */
|
||||
.result-pre {
|
||||
white-space: pre-wrap;
|
||||
word-break: break-all;
|
||||
font-family: monospace;
|
||||
background-color: #1f2937; /* Dunkelgrau */
|
||||
color: #d1d5db; /* Hellgrau */
|
||||
padding: 1rem;
|
||||
border-radius: 0.375rem; /* rounded-md */
|
||||
max-height: 400px;
|
||||
overflow-y: auto;
|
||||
font-size: 0.875rem; /* text-sm */
|
||||
}
|
||||
/* Navigations-Styling */
|
||||
nav ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 1rem; }
|
||||
nav a { color: #c4b5fd; text-decoration: none; white-space: nowrap; }
|
||||
nav a:hover { color: #a78bfa; text-decoration: underline; }
|
||||
header { background-color: #374151; padding: 1rem; margin-bottom: 1.5rem; border-radius: 0.5rem; display: flex; flex-direction: column; align-items: center; gap: 0.5rem; }
|
||||
@media (min-width: 768px) { header { flex-direction: row; justify-content: space-between; } }
|
||||
header h1 { font-size: 1.5rem; font-weight: bold; color: #e5e7eb; }
|
||||
.hidden { display: none; }
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-gray-900 text-gray-200 font-sans p-4 md:p-8">
|
||||
|
||||
<header>
|
||||
<h1>uTools Network Suite</h1>
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="index.html">IP Info & Tools</a></li>
|
||||
<li><a href="subnet-calculator.html">Subnetz Rechner</a></li>
|
||||
<li><a href="dns-lookup.html">DNS Lookup</a></li>
|
||||
<li><a href="whois-lookup.html">WHOIS Lookup</a></li>
|
||||
<li><a href="mac-lookup.html">MAC Lookup</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<div class="container mx-auto max-w-4xl bg-gray-800 rounded-lg shadow-xl p-6">
|
||||
|
||||
<h1 class="text-3xl font-bold mb-6 text-purple-400 text-center">DNS Lookup</h1>
|
||||
|
||||
<!-- Bereich für DNS Lookup -->
|
||||
<div class="mt-8 p-4 bg-gray-700 rounded">
|
||||
<div class="flex flex-col sm:flex-row gap-2 mb-4">
|
||||
<input type="text" id="dns-domain-input" placeholder="Enter domain name (e.g., google.com)"
|
||||
class="flex-grow px-3 py-2 bg-gray-800 border border-gray-600 rounded text-gray-200 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent font-mono">
|
||||
<select id="dns-type-select" class="px-3 py-2 bg-gray-800 border border-gray-600 rounded text-gray-200 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent">
|
||||
<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-purple-600 hover:bg-purple-700 text-white font-bold py-2 px-4 rounded transition duration-150 ease-in-out">
|
||||
Lookup DNS
|
||||
</button>
|
||||
</div>
|
||||
<div id="dns-lookup-error" class="text-red-400 mb-4 hidden"></div>
|
||||
<div id="dns-lookup-results-section" class="hidden mt-4 border-t border-gray-600 pt-4">
|
||||
<h3 class="text-lg font-semibold text-purple-300 mb-2">DNS Results for: <span id="dns-lookup-query" class="font-mono text-purple-400"></span></h3>
|
||||
<div id="dns-lookup-loader" class="loader hidden mb-2"></div>
|
||||
<pre id="dns-lookup-output" class="result-pre"></pre> <!-- Ergebnisbereich -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Globaler Fehlerbereich -->
|
||||
<div id="global-error" class="mt-6 p-4 bg-red-800 text-red-100 rounded hidden"></div>
|
||||
|
||||
<!-- Footer für Version -->
|
||||
<footer class="mt-8 pt-4 border-t border-gray-600 text-center text-xs text-gray-500">
|
||||
<p>© 2025 <a href="https://johanneskr.de" class="text-purple-400 hover:underline">Johannes Krüger</a></p>
|
||||
<p>Version: <span id="commit-sha" class="font-mono">loading...</span></p>
|
||||
</footer>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Eigene JS-Logik für diese Seite -->
|
||||
<script src="dns-lookup.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
132
frontend/app/dns-lookup.js
Normal file
132
frontend/app/dns-lookup.js
Normal file
@@ -0,0 +1,132 @@
|
||||
// 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) {
|
||||
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}`);
|
||||
}
|
||||
}
|
||||
|
||||
// --- 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;
|
||||
}
|
||||
fetchAndDisplay(
|
||||
'/dns-lookup',
|
||||
{ domain, type },
|
||||
dnsLookupResultsSection,
|
||||
dnsLookupLoader,
|
||||
dnsLookupErrorEl,
|
||||
dnsLookupQueryEl,
|
||||
dnsLookupOutputEl,
|
||||
displayDnsResults
|
||||
);
|
||||
}
|
||||
|
||||
// --- Initial Load & Event Listeners ---
|
||||
fetchVersionInfo(); // Lade Versionsinfo für Footer
|
||||
|
||||
dnsLookupButton.addEventListener('click', handleDnsLookupClick);
|
||||
dnsDomainInput.addEventListener('keypress', (event) => {
|
||||
if (event.key === 'Enter') handleDnsLookupClick();
|
||||
});
|
||||
|
||||
}); // End DOMContentLoaded
|
||||
252
frontend/app/index.html
Normal file
252
frontend/app/index.html
Normal file
@@ -0,0 +1,252 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>IP Info & Network Tools - uTools</title> <!-- Titel angepasst -->
|
||||
<!-- Tailwind CSS Play CDN -->
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<!-- Leaflet CSS -->
|
||||
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
|
||||
integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY="
|
||||
crossorigin=""/>
|
||||
<!-- Eigene Styles -->
|
||||
<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.3); /* Lila transparent */
|
||||
border-left-color: #a855f7; /* Lila */
|
||||
border-radius: 50%;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
animation: spin 1s linear infinite;
|
||||
}
|
||||
@keyframes spin {
|
||||
to { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
/* Basis für Glitch-Effekt (Beispiel: Text-Schatten) */
|
||||
.glitch-text:hover {
|
||||
text-shadow:
|
||||
1px 1px 0px rgba(168, 85, 247, 0.7), /* Lila */
|
||||
-1px -1px 0px rgba(76, 29, 149, 0.7); /* Dunkleres Lila */
|
||||
}
|
||||
/* Klickbarer IP-Cursor */
|
||||
#ip-address { cursor: pointer; }
|
||||
|
||||
/* Traceroute Output Formatierung */
|
||||
#traceroute-output pre, .result-pre { /* Gemeinsamer Stil für <pre> */
|
||||
white-space: pre-wrap; /* Zeilenumbruch */
|
||||
word-break: break-all; /* Lange Zeilen umbrechen */
|
||||
font-family: monospace;
|
||||
background-color: #1f2937; /* Dunkelgrau */
|
||||
color: #d1d5db; /* Hellgrau */
|
||||
padding: 1rem;
|
||||
border-radius: 0.375rem; /* rounded-md */
|
||||
max-height: 400px;
|
||||
overflow-y: auto;
|
||||
font-size: 0.875rem; /* text-sm */
|
||||
}
|
||||
#traceroute-output .hop-line { margin-bottom: 0.25rem; }
|
||||
#traceroute-output .hop-number { display: inline-block; width: 30px; text-align: right; margin-right: 10px; color: #9ca3af; } /* Grau */
|
||||
#traceroute-output .hop-ip { color: #60a5fa; } /* Blau */
|
||||
#traceroute-output .hop-hostname { color: #a78bfa; } /* Lila */
|
||||
#traceroute-output .hop-rtt { color: #34d399; margin-left: 5px;} /* Grün */
|
||||
#traceroute-output .hop-timeout { color: #f87171; } /* Rot */
|
||||
#traceroute-output .info-line { color: #fbbf24; font-style: italic;} /* Gelb */
|
||||
#traceroute-output .error-line { color: #f87171; font-weight: bold;} /* Rot */
|
||||
#traceroute-output .end-line { color: #a78bfa; font-weight: bold; margin-top: 10px;} /* Lila */
|
||||
|
||||
/* Navigations-Styling */
|
||||
nav ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 1rem; } /* flex-wrap hinzugefügt */
|
||||
nav a { color: #c4b5fd; /* purple-300 */ text-decoration: none; white-space: nowrap; } /* nowrap hinzugefügt */
|
||||
nav a:hover { color: #a78bfa; /* purple-400 */ text-decoration: underline; }
|
||||
header { background-color: #374151; /* gray-700 */ padding: 1rem; margin-bottom: 1.5rem; border-radius: 0.5rem; /* rounded-lg */ display: flex; flex-direction: column; align-items: center; gap: 0.5rem; } /* Flex direction geändert */
|
||||
@media (min-width: 768px) { /* md breakpoint */
|
||||
header { flex-direction: row; justify-content: space-between; }
|
||||
}
|
||||
header h1 { font-size: 1.5rem; /* text-2xl */ font-weight: bold; color: #e5e7eb; /* gray-200 */ }
|
||||
|
||||
/* Hilfsklasse zum Verstecken */
|
||||
.hidden { display: none; }
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-gray-900 text-gray-200 font-sans p-4 md:p-8">
|
||||
|
||||
<header>
|
||||
<h1>uTools Network Suite</h1> <!-- Name angepasst -->
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="index.html">IP Info & Tools</a></li> <!-- Angepasst -->
|
||||
<li><a href="subnet-calculator.html">Subnetz Rechner</a></li>
|
||||
<li><a href="dns-lookup.html">DNS Lookup</a></li>
|
||||
<li><a href="whois-lookup.html">WHOIS Lookup</a></li>
|
||||
<li><a href="mac-lookup.html">MAC Lookup</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<div class="container mx-auto max-w-4xl bg-gray-800 rounded-lg shadow-xl p-6">
|
||||
|
||||
<h1 class="text-3xl font-bold mb-6 text-purple-400 glitch-text text-center">IP Information & Network Tools</h1> <!-- Titel angepasst -->
|
||||
|
||||
<!-- Bereich für EIGENE IP-Infos -->
|
||||
<div id="info-section" class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
|
||||
|
||||
<!-- Linke Spalte: Eigene IP, Geo, ASN, rDNS -->
|
||||
<div class="space-y-4 p-4 bg-gray-700 rounded">
|
||||
<h2 class="text-xl font-semibold text-purple-300 border-b border-purple-500 pb-1">Your Public IP</h2>
|
||||
<div id="ip-info" class="min-h-[50px]">
|
||||
<div id="ip-loader" class="loader"></div>
|
||||
<p id="ip-address" class="text-2xl font-mono font-bold text-purple-400 break-all hidden" title="Click to start Traceroute"></p>
|
||||
</div>
|
||||
|
||||
<h2 class="text-xl font-semibold text-purple-300 border-b border-purple-500 pb-1">Geolocation</h2>
|
||||
<div id="geo-info" class="min-h-[100px] space-y-1 text-sm">
|
||||
<div id="geo-loader" class="loader"></div>
|
||||
<div class="hidden"> <!-- Hide data until loaded -->
|
||||
<p><strong>Country:</strong> <span id="country">-</span></p>
|
||||
<p><strong>Region:</strong> <span id="region">-</span></p>
|
||||
<p><strong>City:</strong> <span id="city">-</span></p>
|
||||
<p><strong>Postal Code:</strong> <span id="postal">-</span></p>
|
||||
<p><strong>Coordinates:</strong> <span id="coords">-</span></p>
|
||||
<p><strong>Timezone:</strong> <span id="timezone">-</span></p>
|
||||
<p id="geo-error" class="text-red-400"></p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h2 class="text-xl font-semibold text-purple-300 border-b border-purple-500 pb-1">ASN</h2>
|
||||
<div id="asn-info" class="min-h-[50px] space-y-1 text-sm">
|
||||
<div id="asn-loader" class="loader"></div>
|
||||
<div class="hidden"> <!-- Hide data until loaded -->
|
||||
<p><strong>Number:</strong> <span id="asn-number">-</span></p>
|
||||
<p><strong>Organization:</strong> <span id="asn-org">-</span></p>
|
||||
<p id="asn-error" class="text-red-400"></p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h2 class="text-xl font-semibold text-purple-300 border-b border-purple-500 pb-1">Reverse DNS (rDNS)</h2>
|
||||
<div id="rdns-info" class="min-h-[50px] space-y-1 text-sm">
|
||||
<div id="rdns-loader" class="loader"></div>
|
||||
<div class="hidden"> <!-- Hide data until loaded -->
|
||||
<ul id="rdns-list" class="list-disc list-inside"><li>-</li></ul>
|
||||
<p id="rdns-error" class="text-red-400"></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Rechte Spalte: Eigene Karte -->
|
||||
<div class="space-y-4 p-4 bg-gray-700 rounded">
|
||||
<h2 class="text-xl font-semibold text-purple-300 border-b border-purple-500 pb-1">Your Location Map</h2>
|
||||
<div id="map-container" class="bg-gray-600 rounded min-h-[300px] flex items-center justify-center relative">
|
||||
<div id="map-loader" class="loader absolute"></div>
|
||||
<div id="map" class="w-full rounded hidden"></div>
|
||||
<p id="map-message" class="text-gray-400 hidden absolute">Could not load map.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Bereich für IP Lookup -->
|
||||
<div class="mt-8 p-4 bg-gray-700 rounded">
|
||||
<h2 class="text-xl font-semibold text-purple-300 border-b border-purple-500 pb-1 mb-4">IP Address Lookup</h2>
|
||||
<div class="flex flex-col sm:flex-row gap-2 mb-4">
|
||||
<input type="text" id="lookup-ip-input" placeholder="Enter IP address (e.g., 8.8.8.8)"
|
||||
class="flex-grow px-3 py-2 bg-gray-800 border border-gray-600 rounded text-gray-200 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent font-mono">
|
||||
<button id="lookup-button"
|
||||
class="bg-purple-600 hover:bg-purple-700 text-white font-bold py-2 px-4 rounded transition duration-150 ease-in-out">
|
||||
Lookup IP
|
||||
</button>
|
||||
</div>
|
||||
<div id="lookup-error" class="text-red-400 mb-4 hidden"></div>
|
||||
|
||||
<!-- Ergebnisse des Lookups (initial versteckt) -->
|
||||
<div id="lookup-results-section" class="hidden grid grid-cols-1 md:grid-cols-2 gap-6 mt-4 border-t border-gray-600 pt-4">
|
||||
<!-- Linke Spalte: IP, Geo, ASN, rDNS -->
|
||||
<div class="space-y-4">
|
||||
<h3 class="text-lg font-semibold text-purple-300">Lookup Result for: <span id="lookup-ip-address" class="font-mono text-purple-400"></span></h3>
|
||||
<div id="lookup-result-loader" class="loader hidden"></div> <!-- Loader für den gesamten Block -->
|
||||
|
||||
<div id="lookup-geo-info" class="space-y-1 text-sm">
|
||||
<h4 class="font-semibold text-purple-300">Geolocation</h4>
|
||||
<p><strong>Country:</strong> <span id="lookup-country">-</span></p>
|
||||
<p><strong>Region:</strong> <span id="lookup-region">-</span></p>
|
||||
<p><strong>City:</strong> <span id="lookup-city">-</span></p>
|
||||
<p><strong>Postal Code:</strong> <span id="lookup-postal">-</span></p>
|
||||
<p><strong>Coordinates:</strong> <span id="lookup-coords">-</span></p>
|
||||
<p><strong>Timezone:</strong> <span id="lookup-timezone">-</span></p>
|
||||
<p id="lookup-geo-error" class="text-red-400"></p>
|
||||
</div>
|
||||
|
||||
<div id="lookup-asn-info" class="space-y-1 text-sm">
|
||||
<h4 class="font-semibold text-purple-300">ASN</h4>
|
||||
<p><strong>Number:</strong> <span id="lookup-asn-number">-</span></p>
|
||||
<p><strong>Organization:</strong> <span id="lookup-asn-org">-</span></p>
|
||||
<p id="lookup-asn-error" class="text-red-400"></p>
|
||||
</div>
|
||||
|
||||
<div id="lookup-rdns-info" class="space-y-1 text-sm">
|
||||
<h4 class="font-semibold text-purple-300">Reverse DNS (rDNS)</h4>
|
||||
<ul id="lookup-rdns-list" class="list-disc list-inside"><li>-</li></ul>
|
||||
<p id="lookup-rdns-error" class="text-red-400"></p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Rechte Spalte: Karte & Aktionen -->
|
||||
<div class="space-y-4">
|
||||
<h4 class="font-semibold text-purple-300">Location Map</h4>
|
||||
<div id="lookup-map-container" class="bg-gray-600 rounded min-h-[250px] flex items-center justify-center relative">
|
||||
<div id="lookup-map-loader" class="loader hidden absolute"></div>
|
||||
<div id="lookup-map" class="w-full rounded hidden"></div> <!-- Höhe via CSS -->
|
||||
<p id="lookup-map-message" class="text-gray-400 hidden absolute">Could not load map.</p>
|
||||
</div>
|
||||
<!-- Optional: Buttons für Ping/Trace für diese IP -->
|
||||
<div class="mt-4 space-x-2">
|
||||
<button id="lookup-ping-button" class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-1 px-3 rounded text-sm transition duration-150 ease-in-out disabled:opacity-50 disabled:cursor-not-allowed" disabled>Ping this IP</button>
|
||||
<button id="lookup-trace-button" class="bg-teal-600 hover:bg-teal-700 text-white font-bold py-1 px-3 rounded text-sm transition duration-150 ease-in-out disabled:opacity-50 disabled:cursor-not-allowed" disabled>Trace this IP</button>
|
||||
</div>
|
||||
<!-- Bereich für Ping-Ergebnisse (Lookup) -->
|
||||
<div id="lookup-ping-results" class="mt-2 text-sm hidden">
|
||||
<h4 class="font-semibold text-purple-300">Ping Results</h4>
|
||||
<div id="lookup-ping-loader" class="loader hidden"></div>
|
||||
<pre id="lookup-ping-output" class="mt-1 whitespace-pre-wrap break-all font-mono bg-gray-900 text-gray-300 p-2 rounded text-xs"></pre>
|
||||
<p id="lookup-ping-error" class="text-red-400"></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Bereich für Traceroute -->
|
||||
<div id="traceroute-section" class="mt-8 p-4 bg-gray-700 rounded hidden">
|
||||
<h2 class="text-xl font-semibold text-purple-300 border-b border-purple-500 pb-1 mb-4">Traceroute Results</h2>
|
||||
<div id="traceroute-status" class="flex items-center mb-2">
|
||||
<div id="traceroute-loader" class="loader mr-2 hidden"></div>
|
||||
<span id="traceroute-message" class="text-gray-400"></span>
|
||||
</div>
|
||||
<div id="traceroute-output"><pre></pre></div>
|
||||
</div>
|
||||
|
||||
<!-- Globaler Fehlerbereich -->
|
||||
<div id="global-error" class="mt-6 p-4 bg-red-800 text-red-100 rounded hidden"></div>
|
||||
|
||||
<!-- Footer für Version -->
|
||||
<footer class="mt-8 pt-4 border-t border-gray-600 text-center text-xs text-gray-500">
|
||||
<p>© 2025 <a href="https://johanneskr.de" class="text-purple-400 hover:underline">Johannes Krüger</a></p>
|
||||
<p>Version: <span id="commit-sha" class="font-mono">loading...</span></p>
|
||||
</footer>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Leaflet JS -->
|
||||
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"
|
||||
integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo="
|
||||
crossorigin=""></script>
|
||||
<!-- Eigene JS-Logik -->
|
||||
<script src="script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
85
frontend/app/mac-lookup.html
Normal file
85
frontend/app/mac-lookup.html
Normal file
@@ -0,0 +1,85 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>MAC Address Lookup - uTools</title>
|
||||
<!-- Tailwind CSS Play CDN -->
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<!-- Eigene Styles -->
|
||||
<style>
|
||||
/* Einfacher Lade-Spinner */
|
||||
.loader {
|
||||
border: 4px solid rgba(168, 85, 247, 0.3); /* Lila transparent */
|
||||
border-left-color: #a855f7; /* Lila */
|
||||
border-radius: 50%;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
animation: spin 1s linear infinite;
|
||||
}
|
||||
@keyframes spin {
|
||||
to { transform: rotate(360deg); }
|
||||
}
|
||||
/* Navigations-Styling */
|
||||
nav ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 1rem; }
|
||||
nav a { color: #c4b5fd; text-decoration: none; white-space: nowrap; }
|
||||
nav a:hover { color: #a78bfa; text-decoration: underline; }
|
||||
header { background-color: #374151; padding: 1rem; margin-bottom: 1.5rem; border-radius: 0.5rem; display: flex; flex-direction: column; align-items: center; gap: 0.5rem; }
|
||||
@media (min-width: 768px) { header { flex-direction: row; justify-content: space-between; } }
|
||||
header h1 { font-size: 1.5rem; font-weight: bold; color: #e5e7eb; }
|
||||
.hidden { display: none; }
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-gray-900 text-gray-200 font-sans p-4 md:p-8">
|
||||
|
||||
<header>
|
||||
<h1>uTools Network Suite</h1>
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="index.html">IP Info & Tools</a></li>
|
||||
<li><a href="subnet-calculator.html">Subnetz Rechner</a></li>
|
||||
<li><a href="dns-lookup.html">DNS Lookup</a></li>
|
||||
<li><a href="whois-lookup.html">WHOIS Lookup</a></li>
|
||||
<li><a href="mac-lookup.html">MAC Lookup</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<div class="container mx-auto max-w-4xl bg-gray-800 rounded-lg shadow-xl p-6">
|
||||
|
||||
<h1 class="text-3xl font-bold mb-6 text-purple-400 text-center">MAC Address Lookup (OUI)</h1>
|
||||
|
||||
<!-- Bereich für MAC Address Lookup -->
|
||||
<div class="mt-8 p-4 bg-gray-700 rounded">
|
||||
<div class="flex flex-col sm:flex-row gap-2 mb-4">
|
||||
<input type="text" id="mac-input" placeholder="Enter MAC address (e.g., 00:1A:2B:3C:4D:5E)"
|
||||
class="flex-grow px-3 py-2 bg-gray-800 border border-gray-600 rounded text-gray-200 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent font-mono">
|
||||
<button id="mac-lookup-button"
|
||||
class="bg-purple-600 hover:bg-purple-700 text-white font-bold py-2 px-4 rounded transition duration-150 ease-in-out">
|
||||
Lookup MAC Vendor
|
||||
</button>
|
||||
</div>
|
||||
<div id="mac-lookup-error" class="text-red-400 mb-4 hidden"></div>
|
||||
<div id="mac-lookup-results-section" class="hidden mt-4 border-t border-gray-600 pt-4">
|
||||
<h3 class="text-lg font-semibold text-purple-300 mb-2">MAC Vendor for: <span id="mac-lookup-query" class="font-mono text-purple-400"></span></h3>
|
||||
<div id="mac-lookup-loader" class="loader hidden mb-2"></div>
|
||||
<p id="mac-lookup-output" class="text-lg"></p> <!-- Ergebnisbereich (einfacher Text) -->
|
||||
<p id="mac-lookup-notfound" class="text-gray-400 hidden">Vendor not found for this MAC address prefix.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Globaler Fehlerbereich -->
|
||||
<div id="global-error" class="mt-6 p-4 bg-red-800 text-red-100 rounded hidden"></div>
|
||||
|
||||
<!-- Footer für Version -->
|
||||
<footer class="mt-8 pt-4 border-t border-gray-600 text-center text-xs text-gray-500">
|
||||
<p>© 2025 <a href="https://johanneskr.de" class="text-purple-400 hover:underline">Johannes Krüger</a></p>
|
||||
<p>Version: <span id="commit-sha" class="font-mono">loading...</span></p>
|
||||
</footer>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Eigene JS-Logik für diese Seite -->
|
||||
<script src="mac-lookup.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
135
frontend/app/mac-lookup.js
Normal file
135
frontend/app/mac-lookup.js
Normal file
@@ -0,0 +1,135 @@
|
||||
// frontend/mac-lookup.js
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
// --- DOM Elements (MAC Lookup) ---
|
||||
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 macLookupNotFoundEl = document.getElementById('mac-lookup-notfound');
|
||||
|
||||
// --- 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. '/mac-lookup').
|
||||
* @param {object} params - Query-Parameter als Objekt (z.B. { mac: '...' }).
|
||||
* @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) {
|
||||
resultsSection.classList.remove('hidden');
|
||||
loaderElement.classList.remove('hidden');
|
||||
errorElement.classList.add('hidden');
|
||||
outputElement.textContent = ''; // Clear previous results
|
||||
if (macLookupNotFoundEl) macLookupNotFoundEl.classList.add('hidden'); // Hide 'not found' specifically for MAC
|
||||
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}`);
|
||||
}
|
||||
}
|
||||
|
||||
// --- MAC Lookup Specific Functions ---
|
||||
function displayMacResults(data, outputEl) {
|
||||
macLookupNotFoundEl.classList.add('hidden'); // Hide not found message first
|
||||
if (data.vendor) {
|
||||
outputEl.textContent = data.vendor;
|
||||
} else {
|
||||
outputEl.textContent = ''; // Clear vendor text
|
||||
macLookupNotFoundEl.classList.remove('hidden'); // Show not found message
|
||||
}
|
||||
}
|
||||
|
||||
function handleMacLookupClick() {
|
||||
const mac = macInput.value.trim();
|
||||
if (!mac) {
|
||||
macLookupErrorEl.textContent = 'Please enter a MAC address.';
|
||||
macLookupErrorEl.classList.remove('hidden');
|
||||
return;
|
||||
}
|
||||
// Clear previous 'not found' message
|
||||
macLookupNotFoundEl.classList.add('hidden');
|
||||
fetchAndDisplay(
|
||||
'/mac-lookup',
|
||||
{ mac },
|
||||
macLookupResultsSection,
|
||||
macLookupLoader,
|
||||
macLookupErrorEl,
|
||||
macLookupQueryEl,
|
||||
macLookupOutputEl, // Pass the <p> element
|
||||
displayMacResults
|
||||
);
|
||||
}
|
||||
|
||||
// --- Initial Load & Event Listeners ---
|
||||
fetchVersionInfo(); // Lade Versionsinfo für Footer
|
||||
|
||||
macLookupButton.addEventListener('click', handleMacLookupClick);
|
||||
macInput.addEventListener('keypress', (event) => {
|
||||
if (event.key === 'Enter') handleMacLookupClick();
|
||||
});
|
||||
|
||||
}); // End DOMContentLoaded
|
||||
619
frontend/app/script.js
Normal file
619
frontend/app/script.js
Normal file
@@ -0,0 +1,619 @@
|
||||
// script.js - Hauptlogik für index.html (IP Info, IP Lookup, Traceroute)
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
// --- DOM Elements (User IP Info) ---
|
||||
const ipAddressEl = document.getElementById('ip-address');
|
||||
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 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 (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
|
||||
|
||||
// --- 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');
|
||||
}
|
||||
|
||||
/**
|
||||
* 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}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
|
||||
maxZoom: 19,
|
||||
attribution: '© OpenStreetMap contributors'
|
||||
}).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 (ipAddressEl) ipAddressEl.classList.add('hidden');
|
||||
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;
|
||||
updateField(ipAddressEl, data.ip, ipLoader);
|
||||
if (ipAddressEl) {
|
||||
ipAddressEl.classList.remove('hidden'); // Show IP element
|
||||
if (data.ip) ipAddressEl.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
|
||||
|
||||
updateField(asnNumberEl, data.asn?.number, null, asnErrorEl);
|
||||
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 ---
|
||||
|
||||
/** Zeigt Fehler im Lookup-Bereich an */
|
||||
function showLookupError(message) {
|
||||
if (!lookupErrorEl) return;
|
||||
lookupErrorEl.textContent = `Error: ${message}`;
|
||||
lookupErrorEl.classList.remove('hidden');
|
||||
}
|
||||
|
||||
/** Versteckt Fehler im Lookup-Bereich */
|
||||
function hideLookupError() {
|
||||
if (!lookupErrorEl) return;
|
||||
lookupErrorEl.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 = '';
|
||||
|
||||
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;
|
||||
currentLookupIp = null;
|
||||
|
||||
// Remove lookup map instance if it exists
|
||||
if (window['lookup-map_instance']) {
|
||||
window['lookup-map_instance'].remove();
|
||||
window['lookup-map_instance'] = null;
|
||||
}
|
||||
}
|
||||
|
||||
/** Ruft Informationen für eine spezifische IP ab */
|
||||
async function fetchLookupInfo(ipToLookup) {
|
||||
resetLookupResults();
|
||||
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
|
||||
|
||||
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;
|
||||
|
||||
updateField(lookupIpAddressEl, data.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);
|
||||
|
||||
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;
|
||||
|
||||
} catch (error) {
|
||||
console.error(`Failed to fetch lookup info for ${ipToLookup}:`, error);
|
||||
showLookupError(`${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
|
||||
|
||||
} finally {
|
||||
if (lookupResultLoader) lookupResultLoader.classList.add('hidden'); // Hide main loader
|
||||
// Map loader is handled by initOrUpdateMap
|
||||
}
|
||||
}
|
||||
|
||||
// --- 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.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');
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
// --- Event Handlers ---
|
||||
function handleIpClick(event) {
|
||||
event.preventDefault();
|
||||
if (currentIp) {
|
||||
console.log(`User IP clicked: ${currentIp}. Starting traceroute...`);
|
||||
startTraceroute(currentIp);
|
||||
}
|
||||
}
|
||||
|
||||
function handleLookupClick() {
|
||||
if (!lookupIpInput) return;
|
||||
const ipToLookup = lookupIpInput.value.trim();
|
||||
if (!ipToLookup) {
|
||||
showLookupError('Please enter an IP address.');
|
||||
return;
|
||||
}
|
||||
console.log(`Lookup button clicked for IP: ${ipToLookup}`);
|
||||
fetchLookupInfo(ipToLookup);
|
||||
}
|
||||
|
||||
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);
|
||||
}
|
||||
}
|
||||
|
||||
// --- 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);
|
||||
|
||||
}); // End DOMContentLoaded
|
||||
260
frontend/app/subnet-calculator.html
Normal file
260
frontend/app/subnet-calculator.html
Normal file
@@ -0,0 +1,260 @@
|
||||
<!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>
|
||||
/* Navigations-Styling */
|
||||
nav ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 1rem; } /* flex-wrap hinzugefügt */
|
||||
nav a { color: #c4b5fd; /* purple-300 */ text-decoration: none; white-space: nowrap; } /* nowrap hinzugefügt */
|
||||
nav a:hover { color: #a78bfa; /* purple-400 */ text-decoration: underline; }
|
||||
header { background-color: #374151; /* gray-700 */ padding: 1rem; margin-bottom: 1.5rem; border-radius: 0.5rem; /* rounded-lg */ display: flex; flex-direction: column; align-items: center; gap: 0.5rem; } /* Flex direction geändert */
|
||||
@media (min-width: 768px) { /* md breakpoint */
|
||||
header { flex-direction: row; justify-content: space-between; }
|
||||
}
|
||||
header h1 { font-size: 1.5rem; /* text-2xl */ font-weight: bold; color: #e5e7eb; /* gray-200 */ }
|
||||
|
||||
/* Styling für Formular und Ergebnisse */
|
||||
label { display: block; margin-bottom: 0.5rem; font-weight: 600; color: #d1d5db; /* gray-300 */ }
|
||||
input[type="text"] {
|
||||
width: 100%;
|
||||
padding: 0.75rem;
|
||||
margin-bottom: 1rem;
|
||||
background-color: #4b5563; /* gray-600 */
|
||||
border: 1px solid #6b7280; /* gray-500 */
|
||||
border-radius: 0.375rem; /* rounded-md */
|
||||
color: #e5e7eb; /* gray-200 */
|
||||
font-family: monospace;
|
||||
}
|
||||
input[type="text"]:focus {
|
||||
outline: none;
|
||||
border-color: #a78bfa; /* purple-400 */
|
||||
box-shadow: 0 0 0 2px rgba(167, 139, 250, 0.5);
|
||||
}
|
||||
button[type="submit"] {
|
||||
background-color: #8b5cf6; /* purple-500 */
|
||||
color: white;
|
||||
padding: 0.75rem 1.5rem;
|
||||
border: none;
|
||||
border-radius: 0.375rem; /* rounded-md */
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.2s;
|
||||
}
|
||||
button[type="submit"]:hover {
|
||||
background-color: #7c3aed; /* purple-600 */
|
||||
}
|
||||
#results, #examples {
|
||||
margin-top: 2rem;
|
||||
padding: 1.5rem;
|
||||
background-color: #374151; /* gray-700 */
|
||||
border-radius: 0.5rem; /* rounded-lg */
|
||||
}
|
||||
#results h3, #examples h3 {
|
||||
font-size: 1.25rem; /* text-xl */
|
||||
font-weight: 600;
|
||||
color: #c4b5fd; /* purple-300 */
|
||||
margin-bottom: 1rem;
|
||||
border-bottom: 1px solid #6b7280; /* gray-500 */
|
||||
padding-bottom: 0.5rem;
|
||||
}
|
||||
#results p {
|
||||
margin-bottom: 0.75rem;
|
||||
color: #d1d5db; /* gray-300 */
|
||||
}
|
||||
#results p strong {
|
||||
color: #e5e7eb; /* gray-200 */
|
||||
min-width: 150px; /* Für bessere Ausrichtung */
|
||||
display: inline-block;
|
||||
}
|
||||
#results span {
|
||||
font-family: monospace;
|
||||
color: #a78bfa; /* purple-400 */
|
||||
}
|
||||
/* Styling für Beispiel-Tabelle */
|
||||
#examples table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
#examples th, #examples td {
|
||||
padding: 0.75rem;
|
||||
text-align: left;
|
||||
border-bottom: 1px solid #4b5563; /* gray-600 */
|
||||
color: #d1d5db; /* gray-300 */
|
||||
}
|
||||
#examples th {
|
||||
color: #e5e7eb; /* gray-200 */
|
||||
font-weight: 600;
|
||||
}
|
||||
#examples td code {
|
||||
font-family: monospace;
|
||||
background-color: #4b5563; /* gray-600 */
|
||||
padding: 0.2rem 0.4rem;
|
||||
border-radius: 0.25rem;
|
||||
color: #c4b5fd; /* purple-300 */
|
||||
}
|
||||
#examples .example-link {
|
||||
color: #a78bfa; /* purple-400 */
|
||||
cursor: pointer;
|
||||
text-decoration: underline;
|
||||
}
|
||||
#examples .example-link:hover {
|
||||
color: #c4b5fd; /* purple-300 */
|
||||
}
|
||||
.hidden { display: none; }
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-gray-900 text-gray-200 font-sans p-4 md:p-8">
|
||||
|
||||
<header>
|
||||
<h1>uTools Network Suite</h1> <!-- Titel angepasst -->
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="index.html">IP Info & Tools</a></li> <!-- Angepasst -->
|
||||
<li><a href="subnet-calculator.html">Subnetz Rechner</a></li>
|
||||
<li><a href="dns-lookup.html">DNS Lookup</a></li> <!-- Neu -->
|
||||
<li><a href="whois-lookup.html">WHOIS Lookup</a></li> <!-- Neu -->
|
||||
<li><a href="mac-lookup.html">MAC Lookup</a></li> <!-- Neu -->
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<div class="container mx-auto max-w-4xl bg-gray-800 rounded-lg shadow-xl p-6">
|
||||
|
||||
<h2 class="text-2xl font-bold mb-6 text-purple-400 text-center">IP Subnetz Rechner</h2>
|
||||
|
||||
<form id="subnet-form" class="mb-6">
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
|
||||
<div>
|
||||
<label for="ip-address">IP Adresse:</label>
|
||||
<input type="text" id="ip-address" name="ip-address" placeholder="z.B. 192.168.1.1" required
|
||||
class="w-full px-3 py-2 bg-gray-700 border border-gray-600 rounded text-gray-200 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent font-mono">
|
||||
</div>
|
||||
<div>
|
||||
<label for="cidr">CIDR / Subnetzmaske:</label>
|
||||
<input type="text" id="cidr" name="cidr" placeholder="z.B. 24 oder 255.255.255.0" required
|
||||
class="w-full px-3 py-2 bg-gray-700 border border-gray-600 rounded text-gray-200 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent font-mono">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button type="submit"
|
||||
class="bg-purple-600 hover:bg-purple-700 text-white font-bold py-2 px-4 rounded transition duration-150 ease-in-out">
|
||||
Berechnen
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<div id="results" class="bg-gray-700 rounded p-6 hidden"> <!-- Ergebnisse initial verstecken -->
|
||||
<h3 class="text-xl font-semibold text-purple-300 border-b border-purple-500 pb-2 mb-4">Ergebnisse:</h3>
|
||||
<div class="space-y-2 text-sm">
|
||||
<p><strong>Netzwerkadresse:</strong> <span id="network-address" class="font-mono text-purple-400">-</span></p>
|
||||
<p><strong>Broadcast-Adresse:</strong> <span id="broadcast-address" class="font-mono text-purple-400">-</span></p>
|
||||
<p><strong>Subnetzmaske:</strong> <span id="subnet-mask" class="font-mono text-purple-400">-</span></p>
|
||||
<p><strong>Anzahl der Hosts:</strong> <span id="host-count" class="font-mono text-purple-400">-</span></p>
|
||||
<p><strong>Erste Host-Adresse:</strong> <span id="first-host" class="font-mono text-purple-400">-</span></p>
|
||||
<p><strong>Letzte Host-Adresse:</strong> <span id="last-host" class="font-mono text-purple-400">-</span></p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Beispiel-Subnetze -->
|
||||
<div id="examples" class="bg-gray-700 rounded p-6 mt-8">
|
||||
<h3 class="text-xl font-semibold text-purple-300 border-b border-purple-500 pb-2 mb-4">Beispiel-Subnetze (Private Adressbereiche)</h3>
|
||||
<div class="overflow-x-auto">
|
||||
<table class="min-w-full text-sm">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Bereich</th>
|
||||
<th>CIDR</th>
|
||||
<th>Subnetzmaske</th>
|
||||
<th>Beschreibung</th>
|
||||
<th>Aktion</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="divide-y divide-gray-600">
|
||||
<tr>
|
||||
<td><code>192.168.0.0 - 192.168.255.255</code></td>
|
||||
<td><code>/16</code> (Gesamt)</td>
|
||||
<td><code>255.255.0.0</code></td>
|
||||
<td>Klasse C (oft als /24 genutzt)</td>
|
||||
<td><span class="example-link" data-ip="192.168.1.1" data-cidr="24">Beispiel /24</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>172.16.0.0 - 172.31.255.255</code></td>
|
||||
<td><code>/12</code> (Gesamt)</td>
|
||||
<td><code>255.240.0.0</code></td>
|
||||
<td>Klasse B</td>
|
||||
<td><span class="example-link" data-ip="172.16.10.5" data-cidr="16">Beispiel /16</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>10.0.0.0 - 10.255.255.255</code></td>
|
||||
<td><code>/8</code> (Gesamt)</td>
|
||||
<td><code>255.0.0.0</code></td>
|
||||
<td>Klasse A</td>
|
||||
<td><span class="example-link" 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-400">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-800 text-red-100 rounded hidden"></div>
|
||||
|
||||
</div>
|
||||
|
||||
<footer class="mt-8 pt-4 border-t border-gray-600 text-center text-xs text-gray-500">
|
||||
<p>© 2025 <a href="https://johanneskr.de" class="text-purple-400 hover:underline">Johannes Krüger</a></p>
|
||||
<p>Version: <span id="commit-sha" class="font-mono">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>
|
||||
181
frontend/app/subnet-calculator.js
Normal file
181
frontend/app/subnet-calculator.js
Normal file
@@ -0,0 +1,181 @@
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
const form = document.getElementById('subnet-form');
|
||||
if (form) {
|
||||
form.addEventListener('submit', handleSubnetCalculation);
|
||||
}
|
||||
});
|
||||
|
||||
function handleSubnetCalculation(event) {
|
||||
event.preventDefault(); // Verhindert das Neuladen der Seite
|
||||
|
||||
const ipAddressInput = document.getElementById('ip-address').value.trim();
|
||||
const cidrInput = document.getElementById('cidr').value.trim();
|
||||
|
||||
// Einfache Validierung (könnte verbessert werden)
|
||||
if (!isValidIP(ipAddressInput)) {
|
||||
alert("Bitte geben Sie eine gültige IP-Adresse ein.");
|
||||
return;
|
||||
}
|
||||
|
||||
let cidr;
|
||||
let subnetMask;
|
||||
|
||||
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.");
|
||||
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);
|
||||
}
|
||||
|
||||
try {
|
||||
const results = calculateSubnet(ipAddressInput, cidr);
|
||||
displayResults(results, subnetMask);
|
||||
} catch (error) {
|
||||
alert("Fehler bei der Berechnung: " + error.message);
|
||||
clearResults();
|
||||
}
|
||||
}
|
||||
|
||||
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) {
|
||||
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);
|
||||
// Zähle die führenden Einsen
|
||||
let cidr = 0;
|
||||
let validMask = true;
|
||||
let encounteredZero = false;
|
||||
for (let i = 0; i < 32; i++) {
|
||||
if (binaryMask[i] === '1') {
|
||||
if (encounteredZero) { // Einsen dürfen nicht nach Nullen kommen
|
||||
validMask = false;
|
||||
break;
|
||||
}
|
||||
cidr++;
|
||||
} else {
|
||||
encounteredZero = true;
|
||||
}
|
||||
}
|
||||
// Prüfen, ob die Maske gültig ist (nur Einsen gefolgt von Nullen)
|
||||
const calculatedMask = '1'.repeat(cidr) + '0'.repeat(32 - cidr);
|
||||
if (!validMask || binaryMask !== calculatedMask) {
|
||||
return null; // Ungültige Maske
|
||||
}
|
||||
|
||||
return cidr;
|
||||
}
|
||||
|
||||
|
||||
function calculateSubnet(ip, cidr) {
|
||||
const ipBinary = ipToBinary(ip);
|
||||
const maskBinary = '1'.repeat(cidr) + '0'.repeat(32 - cidr);
|
||||
|
||||
// Netzwerkadresse berechnen (Bitweises UND)
|
||||
let networkBinary = '';
|
||||
for (let i = 0; i < 32; i++) {
|
||||
networkBinary += (parseInt(ipBinary[i], 10) & parseInt(maskBinary[i], 10)).toString();
|
||||
}
|
||||
const networkAddress = binaryToIp(networkBinary);
|
||||
|
||||
// Broadcast-Adresse berechnen (Netzwerkadresse | invertierte Maske)
|
||||
let broadcastBinary = '';
|
||||
for (let i = 0; i < 32; i++) {
|
||||
broadcastBinary += (parseInt(networkBinary[i], 10) | (1 - parseInt(maskBinary[i], 10))).toString();
|
||||
}
|
||||
const broadcastAddress = binaryToIp(broadcastBinary);
|
||||
|
||||
// Anzahl der Hosts
|
||||
const hostBits = 32 - cidr;
|
||||
const hostCount = hostBits <= 1 ? 0 : Math.pow(2, hostBits) - 2; // -2 für Netzwerk- und Broadcast-Adresse
|
||||
|
||||
// Erste Host-Adresse (Netzwerkadresse + 1) - nur wenn Hosts möglich sind
|
||||
let firstHost = '-';
|
||||
if (hostBits > 1) {
|
||||
let firstHostBinary = networkBinary.substring(0, 31) + '1';
|
||||
// Sonderfall /31 Netzwerke haben keine traditionellen Host-Adressen
|
||||
if (cidr === 31) {
|
||||
firstHost = networkAddress; // Oder eine andere Konvention, je nach Definition
|
||||
} else {
|
||||
// Umwandlung in Zahl, +1, zurück in Binär (sicherer für Überlauf)
|
||||
const networkNum = parseInt(networkBinary, 2);
|
||||
firstHostBinary = (networkNum + 1).toString(2).padStart(32, '0');
|
||||
firstHost = binaryToIp(firstHostBinary);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Letzte Host-Adresse (Broadcast-Adresse - 1) - nur wenn Hosts möglich sind
|
||||
let lastHost = '-';
|
||||
if (hostBits > 1) {
|
||||
let lastHostBinary = broadcastBinary.substring(0, 31) + '0';
|
||||
// Sonderfall /31 Netzwerke
|
||||
if (cidr === 31) {
|
||||
lastHost = broadcastAddress; // Oder eine andere Konvention
|
||||
} else {
|
||||
// Umwandlung in Zahl, -1, zurück in Binär
|
||||
const broadcastNum = parseInt(broadcastBinary, 2);
|
||||
lastHostBinary = (broadcastNum - 1).toString(2).padStart(32, '0');
|
||||
lastHost = binaryToIp(lastHostBinary);
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
networkAddress,
|
||||
broadcastAddress,
|
||||
hostCount,
|
||||
firstHost,
|
||||
lastHost
|
||||
};
|
||||
}
|
||||
|
||||
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; // Zeige die berechnete/validierte Maske an
|
||||
}
|
||||
|
||||
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 = '-';
|
||||
}
|
||||
97
frontend/app/whois-lookup.html
Normal file
97
frontend/app/whois-lookup.html
Normal file
@@ -0,0 +1,97 @@
|
||||
<!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 */
|
||||
.loader {
|
||||
border: 4px solid rgba(168, 85, 247, 0.3); /* Lila transparent */
|
||||
border-left-color: #a855f7; /* Lila */
|
||||
border-radius: 50%;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
animation: spin 1s linear infinite;
|
||||
}
|
||||
@keyframes spin {
|
||||
to { transform: rotate(360deg); }
|
||||
}
|
||||
/* Ergebnis-Pre-Formatierung */
|
||||
.result-pre {
|
||||
white-space: pre-wrap;
|
||||
word-break: break-all;
|
||||
font-family: monospace;
|
||||
background-color: #1f2937; /* Dunkelgrau */
|
||||
color: #d1d5db; /* Hellgrau */
|
||||
padding: 1rem;
|
||||
border-radius: 0.375rem; /* rounded-md */
|
||||
max-height: 600px; /* Mehr Höhe für WHOIS */
|
||||
overflow-y: auto;
|
||||
font-size: 0.875rem; /* text-sm */
|
||||
}
|
||||
/* Navigations-Styling */
|
||||
nav ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 1rem; }
|
||||
nav a { color: #c4b5fd; text-decoration: none; white-space: nowrap; }
|
||||
nav a:hover { color: #a78bfa; text-decoration: underline; }
|
||||
header { background-color: #374151; padding: 1rem; margin-bottom: 1.5rem; border-radius: 0.5rem; display: flex; flex-direction: column; align-items: center; gap: 0.5rem; }
|
||||
@media (min-width: 768px) { header { flex-direction: row; justify-content: space-between; } }
|
||||
header h1 { font-size: 1.5rem; font-weight: bold; color: #e5e7eb; }
|
||||
.hidden { display: none; }
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-gray-900 text-gray-200 font-sans p-4 md:p-8">
|
||||
|
||||
<header>
|
||||
<h1>uTools Network Suite</h1>
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="index.html">IP Info & Tools</a></li>
|
||||
<li><a href="subnet-calculator.html">Subnetz Rechner</a></li>
|
||||
<li><a href="dns-lookup.html">DNS Lookup</a></li>
|
||||
<li><a href="whois-lookup.html">WHOIS Lookup</a></li>
|
||||
<li><a href="mac-lookup.html">MAC Lookup</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<div class="container mx-auto max-w-4xl bg-gray-800 rounded-lg shadow-xl p-6">
|
||||
|
||||
<h1 class="text-3xl font-bold mb-6 text-purple-400 text-center">WHOIS Lookup</h1>
|
||||
|
||||
<!-- Bereich für WHOIS Lookup -->
|
||||
<div class="mt-8 p-4 bg-gray-700 rounded">
|
||||
<div class="flex flex-col sm:flex-row gap-2 mb-4">
|
||||
<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-3 py-2 bg-gray-800 border border-gray-600 rounded text-gray-200 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent font-mono">
|
||||
<button id="whois-lookup-button"
|
||||
class="bg-purple-600 hover:bg-purple-700 text-white font-bold py-2 px-4 rounded transition duration-150 ease-in-out">
|
||||
Lookup WHOIS
|
||||
</button>
|
||||
</div>
|
||||
<div id="whois-lookup-error" class="text-red-400 mb-4 hidden"></div>
|
||||
<div id="whois-lookup-results-section" class="hidden mt-4 border-t border-gray-600 pt-4">
|
||||
<h3 class="text-lg font-semibold text-purple-300 mb-2">WHOIS Results for: <span id="whois-lookup-query" class="font-mono text-purple-400"></span></h3>
|
||||
<div id="whois-lookup-loader" class="loader hidden mb-2"></div>
|
||||
<pre id="whois-lookup-output" class="result-pre"></pre> <!-- Ergebnisbereich -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Globaler Fehlerbereich -->
|
||||
<div id="global-error" class="mt-6 p-4 bg-red-800 text-red-100 rounded hidden"></div>
|
||||
|
||||
<!-- Footer für Version -->
|
||||
<footer class="mt-8 pt-4 border-t border-gray-600 text-center text-xs text-gray-500">
|
||||
<p>© 2025 <a href="https://johanneskr.de" class="text-purple-400 hover:underline">Johannes Krüger</a></p>
|
||||
<p>Version: <span id="commit-sha" class="font-mono">loading...</span></p>
|
||||
</footer>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Eigene JS-Logik für diese Seite -->
|
||||
<script src="whois-lookup.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
131
frontend/app/whois-lookup.js
Normal file
131
frontend/app/whois-lookup.js
Normal file
@@ -0,0 +1,131 @@
|
||||
// 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) {
|
||||
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 JSON or raw text
|
||||
// Using JSON.stringify for consistency, but raw text might be better depending on the library's output
|
||||
if (typeof data.result === 'string') {
|
||||
outputEl.textContent = data.result; // Display raw text if it's a string
|
||||
} else {
|
||||
outputEl.textContent = JSON.stringify(data.result, null, 2); // Display JSON otherwise
|
||||
}
|
||||
}
|
||||
|
||||
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
|
||||
);
|
||||
}
|
||||
|
||||
// --- Initial Load & Event Listeners ---
|
||||
fetchVersionInfo(); // Lade Versionsinfo für Footer
|
||||
|
||||
whoisLookupButton.addEventListener('click', handleWhoisLookupClick);
|
||||
whoisQueryInput.addEventListener('keypress', (event) => {
|
||||
if (event.key === 'Enter') handleWhoisLookupClick();
|
||||
});
|
||||
|
||||
}); // End DOMContentLoaded
|
||||
Reference in New Issue
Block a user