add clickable ips

frontend/app/index.html

@@ -35,8 +35,14 @@
                 1px 1px 0px rgba(168, 85, 247, 0.7), /* Lila */
                 -1px -1px 0px rgba(76, 29, 149, 0.7); /* Dunkleres Lila */
         }
-        /* Klickbarer IP-Cursor */
+        /* Klickbarer IP-Cursor und Link-Styling */
-        #ip-address { cursor: pointer; }
+        #ip-address-link {
+             cursor: pointer;
+             text-decoration: none; /* Standard-Link-Unterstreichung entfernen */
+        }
+        #ip-address-link:hover {
+            text-decoration: underline; /* Unterstreichung beim Hover */
+        }
 
         /* Traceroute Output Formatierung */
         #traceroute-output pre, .result-pre { /* Gemeinsamer Stil für <pre> */
@@ -103,7 +109,10 @@
                 <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>
+                    <!-- Geändert zu <a> Tag -->
+                    <a id="ip-address-link" href="#" class="text-2xl font-mono font-bold text-purple-400 break-all hidden" title="Go to WHOIS Lookup for this IP">
+                        <span id="ip-address"></span> <!-- Span für den eigentlichen Text -->
+                    </a>
                 </div>
 
                 <h2 class="text-xl font-semibold text-purple-300 border-b border-purple-500 pb-1">Geolocation</h2>

frontend/app/script.js

@@ -1,7 +1,8 @@
 // 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 ipAddressLinkEl = document.getElementById('ip-address-link'); // Geändert von ip-address
+    const ipAddressSpanEl = document.getElementById('ip-address'); // Das Span *innerhalb* des Links
     const countryEl = document.getElementById('country');
     const regionEl = document.getElementById('region');
     const cityEl = document.getElementById('city');
@@ -227,7 +228,7 @@ document.addEventListener('DOMContentLoaded', () => {
         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 (ipAddressLinkEl) ipAddressLinkEl.classList.add('hidden'); // Hide link initially
         if (mapEl) mapEl.classList.add('hidden');
         // Ensure map message is hidden initially
         if (mapMessageEl) mapMessageEl.classList.add('hidden');
@@ -240,10 +241,16 @@ document.addEventListener('DOMContentLoaded', () => {
             console.log('Received User IP Info:', data);
 
             currentIp = data.ip;
-            updateField(ipAddressEl, data.ip, ipLoader);
+            // Update the span inside the link
-            if (ipAddressEl) {
+            updateField(ipAddressSpanEl, data.ip, ipLoader);
-                ipAddressEl.classList.remove('hidden'); // Show IP element
+            if (ipAddressLinkEl) {
-                if (data.ip) ipAddressEl.addEventListener('click', handleIpClick);
+                ipAddressLinkEl.classList.remove('hidden'); // Show link element
+                if (data.ip) {
+                    // Remove old listener if it exists (safety)
+                    ipAddressLinkEl.removeEventListener('click', handleIpClick);
+                    // Add new listener
+                    ipAddressLinkEl.addEventListener('click', handleIpClick);
+                }
             }
 
             updateField(countryEl, data.geo?.countryName ? `${data.geo.countryName} (${data.geo.country})` : null, null, geoErrorEl);
@@ -572,10 +579,13 @@ document.addEventListener('DOMContentLoaded', () => {
 
     // --- Event Handlers ---
     function handleIpClick(event) {
-        event.preventDefault();
+        event.preventDefault(); // Verhindert das Standardverhalten des Links (#)
         if (currentIp) {
-            console.log(`User IP clicked: ${currentIp}. Starting traceroute...`);
+            console.log(`User IP link clicked: ${currentIp}. Redirecting to WHOIS lookup...`);
-            startTraceroute(currentIp);
+            // Leite zur Whois-Seite weiter und übergebe die IP als 'query'-Parameter
+            window.location.href = `whois-lookup.html?query=${encodeURIComponent(currentIp)}`;
+        } else {
+            console.warn('Cannot redirect to WHOIS: current IP is not available.');
         }
     }
 
@@ -616,4 +626,7 @@ document.addEventListener('DOMContentLoaded', () => {
     if (lookupPingButton) lookupPingButton.addEventListener('click', handleLookupPingClick);
     if (lookupTraceButton) lookupTraceButton.addEventListener('click', handleLookupTraceClick);
 
+    // Der Event Listener für den IP-Link wird jetzt in fetchIpInfo() hinzugefügt,
+    // nachdem die IP erfolgreich abgerufen wurde.
+
 }); // End DOMContentLoaded

frontend/app/whois-lookup.js

@@ -92,12 +92,12 @@ document.addEventListener('DOMContentLoaded', () => {
 
     // --- WHOIS Lookup Specific Functions ---
     function displayWhoisResults(data, outputEl) {
-        // WHOIS data can be large and unstructured, display as JSON or raw text
+        // WHOIS data can be large and unstructured, display as 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
+             outputEl.textContent = data.result; // Display raw text
         } else {
-             outputEl.textContent = JSON.stringify(data.result, null, 2); // Display JSON otherwise
+             // Fallback if the result is not a string (shouldn't happen with current backend)
+             outputEl.textContent = JSON.stringify(data.result, null, 2);
         }
     }
 
@@ -120,6 +120,18 @@ document.addEventListener('DOMContentLoaded', () => {
         );
     }
 
+    /** Prüft URL-Parameter und startet ggf. den Lookup */
+    function checkUrlParamsAndLookup() {
+        const urlParams = new URLSearchParams(window.location.search);
+        const queryFromUrl = urlParams.get('query');
+
+        if (queryFromUrl && whoisQueryInput) {
+            console.log(`Found query parameter in URL: ${queryFromUrl}`);
+            whoisQueryInput.value = queryFromUrl; // Set input field value
+            handleWhoisLookupClick(); // Trigger the lookup
+        }
+    }
+
     // --- Initial Load & Event Listeners ---
     fetchVersionInfo(); // Lade Versionsinfo für Footer
 
@@ -128,4 +140,7 @@ document.addEventListener('DOMContentLoaded', () => {
         if (event.key === 'Enter') handleWhoisLookupClick();
     });
 
+    // Prüfe URL-Parameter nach dem Setup der Listener
+    checkUrlParamsAndLookup();
+
 }); // End DOMContentLoaded