mirror of
https://github.com/MrUnknownDE/utools.git
synced 2026-04-09 09:53:50 +02:00
580 lines
26 KiB
HTML
580 lines
26 KiB
HTML
<!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.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>
|
|
|
|
<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="/" class="active-link">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">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">Your Digital Footprint</h1>
|
|
|
|
<!-- Bereich für EIGENE IP-Infos -->
|
|
<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>
|
|
|
|
|
|
</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> |