From 224f969376b2cc79d3aa11133b6d95e769bf7f47 Mon Sep 17 00:00:00 2001
From: Blackwhitebear8 <blackwhitebear8@git@pixelhosting.nl>
Date: Tue, 19 Aug 2025 13:54:32 +0200
Subject: [PATCH] Update index.html

---
 index.html | 364 +++++++++++++++++++++++++++++++----------------------
 1 file changed, 212 insertions(+), 152 deletions(-)
diff --git a/index.html b/index.html
index 954cd8d..58217f8 100644
--- a/index.html
+++ b/index.html
@@ -3,71 +3,147 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link rel="icon" href="https://pixelhosting.nl/wp-content/uploads/2022/12/cropped-Pixelhosting-logo-favicon-192x192.png" sizes="192x192" />
-    
-    	<meta name="description" content="IP Weergave Website" />
-		<meta name="robots" content="max-image-preview:large" />
-		<link rel="canonical" href="https://ip.pixelhosting.nl/" />
-		<meta property="og:locale" content="nl_NL" />
-		<meta property="og:site_name" content="IP Weergave" />
-		<meta property="og:type" content="website" />
-		<meta property="og:title" content="IP Weergave" />
-		<meta property="og:description" content="IP Weergave Website." />
-		<meta property="og:url" content="https://pixelhosting.nl/" />
-		<meta name="twitter:card" content="summary" />
-		<meta name="twitter:title" content="IP Weergave" />
-		<meta name="twitter:description" content="IP Weergave Website" />
-    
+    <link rel="icon" href="/favicon.png" sizes="192x192" />
+    <meta name="description" content="IP Weergave Website" />
+	<link rel="canonical" href="https://ip.pixelhosting.nl/" />
+	<meta property="og:locale" content="nl_NL" />
+	<meta property="og:site_name" content="IP Weergave" />
+	<meta property="og:type" content="website" />
+	<meta property="og:title" content="IP Weergave" />
+	<meta property="og:description" content="IP Weergave Website." />
+	<meta property="og:url" content="https://pixelhosting.nl/" />
+	<meta name="twitter:card" content="summary" />
+	<meta name="twitter:title" content="IP Weergave" />
+	<meta name="twitter:description" content="IP Weergave Website" />
     <title>IP Adres Weergave</title>
     <style>
         body {
-            font-family: 'Arial', sans-serif;
-            background-color: #f4f4f9;
-            color: #333;
+            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+            background-color: #F0F8FF;
+            color: #2c3e50;
             margin: 0;
             padding: 0;
             display: flex;
             justify-content: center;
             align-items: center;
-            height: 100vh;
+            min-height: 100vh;
             text-align: center;
-            box-sizing: border-box;
+            position: relative;
+            overflow: hidden;
         }
         .container {
-            background-color: white;
-            padding: 30px;
-            border-radius: 8px;
-            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
-            width: 90%; 
+            background-color: #ffffff;
+            padding: 40px;
+            border-radius: 12px;
+            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
+            width: 90%;
             max-width: 600px;
+            position: relative;
+            z-index: 10;
         }
         h1 {
-            font-size: 2.2em;
-            color: #5e5e5e;
-            margin-bottom: 20px;
+            font-size: 2.5em;
+            color: #34495e;
+            margin-bottom: 25px;
         }
-        .result {
-            font-size: 1.3em;
-            margin-top: 20px;
+        .data-group {
+            background-color: #f8f9fa;
+            padding: 20px;
+            border-radius: 8px;
+            margin-top: 25px;
+            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
+            text-align: left;
+        }
+        .data-title {
+            font-size: 1.5em;
+            color: #34495e;
+            margin-bottom: 15px;
+            text-align: center;
+        }
+        .data-item {
+            font-size: 1.1em;
             color: #555;
-            background-color: #e6e6e6;
-            padding: 15px;
-            border-radius: 6px;
             font-weight: bold;
-            word-wrap: break-word;
-            white-space: normal;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 10px;
+            flex-wrap: wrap;
         }
-        .loading {
-            color: #888;
+        .data-label {
+            display: flex;
+            align-items: center;
+        }
+        .data-value {
+            font-weight: normal;
             font-style: italic;
         }
+        .data-icon {
+            font-size: 1.2em;
+            margin-right: 8px;
+            color: #07AAF9;
+        }
+        .copy-button {
+            background-color: #07AAF9;
+            color: white;
+            border: none;
+            padding: 12px;
+            border-radius: 5px;
+            cursor: pointer;
+            font-size: 1em;
+            transition: background-color 0.3s ease;
+            width: 100%;
+            margin-top: 15px;
+        }
+        .copy-button:hover {
+            background-color: #0588c8;
+        }
+        .loading {
+            color: #7f8c8d;
+            font-style: italic;
+        }
+        .copy-success-message {
+            position: fixed;
+            top: -60px;
+            left: 50%;
+            transform: translateX(-50%);
+            background-color: #28a745;
+            color: white;
+            padding: 15px 25px;
+            border-radius: 8px;
+            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
+            font-size: 1em;
+            font-weight: bold;
+            z-index: 1000;
+            transition: top 0.5s ease-in-out;
+        }
+        .copy-success-message.show {
+            top: 20px;
+        }
         @media (max-width: 600px) {
-            h1 {
-                font-size: 1.8em;
+            .container {
+                padding: 20px;
             }
-            .result {
-                font-size: 1.1em;
-                padding: 10px;
+            h1 {
+                font-size: 2em;
+            }
+            .data-group {
+                padding: 15px;
+                text-align: center;
+            }
+            .data-item {
+                display: block; 
+            }
+            .data-label,
+            .data-value {
+                text-align: center;
+                width: 100%;
+                white-space: normal;
+                box-sizing: border-box;
+                display: block;
+            }
+            .data-label {
+                margin-bottom: 5px;
             }
         }
     </style>
@@ -76,132 +152,116 @@
 
 <div class="container">
     <h1>Jouw Publieke IP Adressen</h1>
-    <div class="result" id="ipOutput6">
-        <span class="loading">Je IPv6-adres wordt opgehaald...</span>
+    
+    <div class="data-group">
+        <h2 class="data-title">Jouw IPv6-gegevens</h2>
+        <div class="data-item">
+            <span class="data-label"><span class="data-icon">🌐</span>Jouw IPv6-adres:</span>
+            <span class="data-value loading" id="ipOutput6-text">Wordt opgehaald...</span>
+        </div>
+        <div class="data-item">
+            <span class="data-label"><span class="data-icon">⚡</span>Jouw IPv6-latency:</span>
+            <span class="data-value loading" id="latencyOutput6-text">Wordt opgehaald...</span>
+        </div>
+        <button class="copy-button" id="copyBtn6" style="display: none;">Kopieer IP</button>
     </div>
-    <div class="result" id="ipOutput6ms">
-        <span class="loading">Je IPv6 latency wordt opgehaald...</span>
-    </div>
-    <div class="result" id="ipOutput4">
-        <span class="loading">Je IPv4-adres wordt opgehaald...</span>
-    </div>
-    <div class="result" id="ipOutput4ms">
-        <span class="loading">Je IPv4 latency wordt opgehaald...</span>
+    
+    <div class="data-group">
+        <h2 class="data-title">Jouw IPv4-gegevens</h2>
+        <div class="data-item">
+            <span class="data-label"><span class="data-icon">🌐</span>Jouw IPv4-adres:</span>
+            <span class="data-value loading" id="ipOutput4-text">Wordt opgehaald...</span>
+        </div>
+        <div class="data-item">
+            <span class="data-label"><span class="data-icon">⚡</span>Jouw IPv4-latency:</span>
+            <span class="data-value loading" id="latencyOutput4-text">Wordt opgehaald...</span>
+        </div>
+        <button class="copy-button" id="copyBtn4" style="display: none;">Kopieer IP</button>
     </div>
 </div>
 
+<div id="copy-success-message" class="copy-success-message"></div>
+
 <script>
-// Functie om de latency v4 op te halen en weer te geven
-async function fetch4MS() {
-    const ipOutput4 = document.getElementById('ipOutput4ms');
-    ipOutput4.innerHTML = '<span class="loading">Je IPv4 latency wordt opgehaald...</span>';
+    let ipv4_address = null;
+    let ipv6_address = null;
 
-    try {
-        const response = await fetch('https://ip-v4.pixelhosting.nl/latency.php');
+    async function fetchIPAndLatency(version) {
+        const ipTextElement = document.getElementById(`ipOutput${version}-text`);
+        const latencyTextElement = document.getElementById(`latencyOutput${version}-text`);
+        const copyBtn = document.getElementById(`copyBtn${version}`);
+        const ipUrl = `https://ip-v${version}.pixelhosting.nl/ip-api.php`;
+        const latencyUrl = `https://ip-v${version}.pixelhosting.nl/latency-api.php`;
 
-        if (!response.ok) {
-            throw new Error(`HTTP-fout! status: ${response.status}`);
+        try {
+            const ipResponse = await fetch(ipUrl);
+            const ipData = await ipResponse.json();
+            if (ipData.ip) {
+                const ipAddress = ipData.ip;
+                ipTextElement.textContent = ipAddress;
+                copyBtn.style.display = 'block';
+                if (version === 4) {
+                    ipv4_address = ipAddress;
+                    copyBtn.onclick = () => copyToClipboard(ipv4_address);
+                } else {
+                    ipv6_address = ipAddress;
+                    copyBtn.onclick = () => copyToClipboard(ipv6_address);
+                }
+            } else {
+                ipTextElement.textContent = `Geen IPv${version}-adres gevonden.`;
+            }
+        } catch (error) {
+            ipTextElement.textContent = `Fout bij ophalen van IPv${version}-adres.`;
         }
 
-        const data = await response.json();
+        try {
+            let totalLatency = 0;
+            const numTests = 5;
 
-        if (data.latency_ms) {
-            ipOutput4ms.textContent = `Jouw Ipv4 latency is: ${data.latency_ms} MS`;
-            console.log(`Jouw Ipv4 latency is: ${data.latency_ms} MS`)
-        } else {
-            ipOutput4ms.textContent = 'No IPv4 latency found.';
+            for (let i = 0; i < numTests; i++) {
+                const startTime = performance.now();
+                await fetch(latencyUrl, { cache: 'no-store' });
+                const endTime = performance.now();
+                totalLatency += (endTime - startTime);
+            }
+            const averageLatency = Math.round(totalLatency / numTests);
+            latencyTextElement.textContent = `${averageLatency} MS`;
+        } catch (error) {
+            latencyTextElement.textContent = `Fout.`;
+            console.error(`Foutdetails (IPv${version}-latency):`, error);
         }
-    } catch (error) {
-        ipOutput4ms.textContent = 'No IPv4 latency found.';
-        console.error('Foutdetails (IPv4ms):', error);
     }
-}
 
-// Functie om de latency v6 op te halen en weer te geven
-async function fetch6MS() {
-    const ipOutput6 = document.getElementById('ipOutput6ms');
-    ipOutput6.innerHTML = '<span class="loading">Je IPv6 latency wordt opgehaald...</span>';
-
-    try {
-        const response = await fetch('https://ip-v6.pixelhosting.nl/latency.php');
-
-        if (!response.ok) {
-            throw new Error(`HTTP-fout! status: ${response.status}`);
-        }
-
-        const data = await response.json();
-
-        if (data.latency_ms) {
-            ipOutput6ms.textContent = `Jouw Ipv6 latency is: ${data.latency_ms} MS`;
-            console.log(`Jouw Ipv6 latency is: ${data.latency_ms} MS`)
-        } else {
-            ipOutput6ms.textContent = 'No IPv6 latency found.';
-        }
-    } catch (error) {
-        ipOutput6ms.textContent = 'No IPv6 latency found.';
-        console.error('Foutdetails (IPv6ms):', error);
+    function showCopyMessage(text) {
+        const messageBox = document.getElementById('copy-success-message');
+    
+        messageBox.style.display = 'block';
+        messageBox.textContent = `Gekopieerd: ${text}`;
+        messageBox.classList.add('show');
+    
+        setTimeout(() => {
+            messageBox.classList.remove('show');
+        }, 3000);
+    
+        setTimeout(() => {
+            messageBox.style.display = 'none';
+        }, 3500);
     }
-}
 
-// Functie om het IPv4-adres op te halen en weer te geven
-async function fetchIP4Address() {
-    const ipOutput4 = document.getElementById('ipOutput4');
-    ipOutput4.innerHTML = '<span class="loading">Bezig met ophalen van IPv4...</span>';
-
-    try {
-        const response = await fetch('https://ip-v4.pixelhosting.nl/ip-api.php');
-        
-        if (!response.ok) {
-            throw new Error(`HTTP-fout! status: ${response.status}`);
-        }
-
-        const data = await response.json();
-
-        if (data.ip) {
-            ipOutput4.textContent = `Jouw IPv4-adres is: ${data.ip}`;
-            console.log(`${data.ip}`)
-        } else {
-            ipOutput4.textContent = 'Geen IPv4-adres gevonden.';
-        }
-    } catch (error) {
-        ipOutput4.textContent = 'Er lijkt geen IPv4-adres gevonden te zijn.';
-        console.error('Foutdetails (IPv4):', error);
+    function copyToClipboard(text) {
+        navigator.clipboard.writeText(text).then(() => {
+            showCopyMessage(text);
+        }).catch(err => {
+            console.error('Kopiëren mislukt: ', err);
+            alert("Kopiëren mislukt. Probeer handmatig.");
+        });
     }
-}
 
-// Functie om het IPv6-adres op te halen en weer te geven
-async function fetchIP6Address() {
-    const ipOutput6 = document.getElementById('ipOutput6');
-    ipOutput6.innerHTML = '<span class="loading">Bezig met ophalen van IPv6...</span>';
-
-    try {
-        const response = await fetch('https://ip-v6.pixelhosting.nl/ip-api.php');
-        
-        if (!response.ok) {
-            throw new Error(`HTTP-fout! status: ${response.status}`);
-        }
-
-        const data = await response.json();
-
-        if (data.ip) {
-            ipOutput6.textContent = `Jouw IPv6-adres is: ${data.ip}`;
-            console.log(`${data.ip}`)
-        } else {
-            ipOutput6.textContent = 'Geen IPv6-adres gevonden.';
-        }
-    } catch (error) {
-        ipOutput6.textContent = 'Er lijkt geen IPv6-adres gevonden te zijn.';
-        console.error('Foutdetails (IPv6):', error);
-    }
-}
-
-// Roep beide functies aan bij het laden van de pagina
-window.onload = () => {
-    fetch4MS();
-    fetch6MS();
-    fetchIP4Address();
-    fetchIP6Address();
-};
+    window.onload = () => {
+        document.getElementById('copy-success-message').style.display = 'none';
+        fetchIPAndLatency(4);
+        fetchIPAndLatency(6);
+    };
 </script>
 
 </body>
