Systemonformationen: Design überarbeitet, Neue Infos & besseres IP-Widget

sys_info/get_ip.php

@@ -0,0 +1,36 @@
+<?php
+header('Content-Type: application/json');
+header('Access-Control-Allow-Origin: *');
+
+function getIPv4() {
+    $ipv4 = '';
+    if (isset($_SERVER['HTTP_X_FORWARDED_FOR'])) {
+        $ipv4 = $_SERVER['HTTP_X_FORWARDED_FOR'];
+    } else if (isset($_SERVER['HTTP_CLIENT_IP'])) {
+        $ipv4 = $_SERVER['HTTP_CLIENT_IP'];
+    } else {
+        $ipv4 = $_SERVER['REMOTE_ADDR'];
+    }
+    return filter_var($ipv4, FILTER_VALIDATE_IP, FILTER_FLAG_IPV4) ? $ipv4 : '';
+}
+
+function getIPv6() {
+    $ipv6 = '';
+    if (isset($_SERVER['HTTP_X_FORWARDED_FOR'])) {
+        $ips = explode(',', $_SERVER['HTTP_X_FORWARDED_FOR']);
+        foreach ($ips as $ip) {
+            if (filter_var(trim($ip), FILTER_VALIDATE_IP, FILTER_FLAG_IPV6)) {
+                $ipv6 = trim($ip);
+                break;
+            }
+        }
+    } else if (isset($_SERVER['REMOTE_ADDR']) && filter_var($_SERVER['REMOTE_ADDR'], FILTER_VALIDATE_IP, FILTER_FLAG_IPV6)) {
+        $ipv6 = $_SERVER['REMOTE_ADDR'];
+    }
+    return $ipv6;
+}
+
+echo json_encode([
+    'ipv4' => getIPv4(),
+    'ipv6' => getIPv6()
+]); 

sys_info/index.html

@@ -40,15 +40,15 @@
         }
 
         .container {
-            max-width: 1000px;
+            max-width: 1200px;
             margin: 0 auto;
             background: rgba(var(--bg-color), 0.95);
             border-radius: 15px;
             padding: 30px;
             box-shadow: 0 10px 30px var(--shadow);
-            display: grid;
-            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
-            gap: 20px;
+            display: flex;
+            flex-direction: column;
+            gap: 30px;
             color: var(--text-color);
         }
 
@@ -136,6 +136,116 @@
         .export-btn:hover {
             transform: translateY(-2px);
         }
+
+        .category {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+            gap: 20px;
+        }
+
+        .category-title {
+            grid-column: 1 / -1;
+            color: var(--text-color);
+            font-size: 1.5em;
+            margin-top: 10px;
+            padding-bottom: 10px;
+            border-bottom: 2px solid var(--accent-1);
+        }
+
+        .ip-toggle {
+            background: none;
+            border: none;
+            color: var(--text-color);
+            cursor: pointer;
+            font-size: 1.2em;
+            padding: 5px;
+            margin-left: 10px;
+            opacity: 0.7;
+            transition: opacity 0.2s;
+        }
+
+        .ip-toggle:hover {
+            opacity: 1;
+        }
+
+        .masked {
+            filter: blur(4px);
+            user-select: none;
+        }
+
+        .ip-container {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+        }
+
+        /* Modal Styles */
+        .modal-overlay {
+            display: none;
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background: rgba(0, 0, 0, 0.5);
+            z-index: 1000;
+            backdrop-filter: blur(5px);
+        }
+
+        .modal {
+            position: fixed;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            background: rgba(var(--bg-color), 0.95);
+            padding: 25px;
+            border-radius: 15px;
+            box-shadow: 0 10px 30px var(--shadow);
+            z-index: 1001;
+            max-width: 90%;
+            width: 400px;
+        }
+
+        .modal-title {
+            font-size: 1.2em;
+            margin-bottom: 15px;
+            color: var(--text-color);
+        }
+
+        .modal-content {
+            margin-bottom: 20px;
+            color: var(--text-color);
+            line-height: 1.5;
+        }
+
+        .modal-buttons {
+            display: flex;
+            justify-content: flex-end;
+            gap: 10px;
+        }
+
+        .modal-btn {
+            padding: 8px 16px;
+            border-radius: 5px;
+            border: none;
+            cursor: pointer;
+            font-size: 0.9em;
+            transition: opacity 0.2s;
+        }
+
+        .modal-btn:hover {
+            opacity: 0.9;
+        }
+
+        .modal-btn-primary {
+            background: var(--accent-1);
+            color: white;
+        }
+
+        .modal-btn-secondary {
+            background: var(--box-bg);
+            color: var(--text-color);
+        }
     </style>
     <script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>
 </head>
@@ -150,78 +260,130 @@
         <h1>🖥️ Systeminformationen</h1>
         
         <!-- Hardware Section -->
-        <div class="info-box">
-            <h3>🖥️ Bildschirmauflösung</h3>
-            <p id="resolution"></p>
+        <div class="category">
+            <h2 class="category-title">💻 Hardware</h2>
+            <div class="info-box">
+                <h3>🖥️ Bildschirmauflösung</h3>
+                <p id="resolution"></p>
+            </div>
+            <div class="info-box">
+                <h3>📱 Bildschirmorientierung</h3>
+                <p id="screenOrientation"></p>
+            </div>
+            <div class="info-box">
+                <h3>⚡ CPU-Kerne</h3>
+                <p id="cpuCores"></p>
+            </div>
+            <div class="info-box">
+                <h3>🔋 Batteriestatus</h3>
+                <p id="batteryStatus"></p>
+            </div>
         </div>
 
-        <div class="info-box">
-            <h3>📱 Gerätetyp</h3>
-            <p id="deviceType"></p>
+        <!-- System & Software -->
+        <div class="category">
+            <h2 class="category-title">🔧 System & Software</h2>
+            <div class="info-box">
+                <h3>💻 Betriebssystem</h3>
+                <p id="os"></p>
+            </div>
+            <div class="info-box">
+                <h3>🌐 Browser</h3>
+                <p id="browser"></p>
+            </div>
+            <div class="info-box">
+                <h3>🔍 User-Agent</h3>
+                <p id="userAgent"></p>
+            </div>
+            <div class="info-box">
+                <h3>📱 Gerätetyp</h3>
+                <p id="deviceType"></p>
+            </div>
         </div>
 
-        <div class="info-box">
-            <h3>⚡ CPU-Kerne</h3>
-            <p id="cpuCores"></p>
+        <!-- Netzwerk & Verbindung -->
+        <div class="category">
+            <h2 class="category-title">🌐 Netzwerk & Verbindung</h2>
+            <div class="info-box">
+                <h3>🔗 IPv4</h3>
+                <div class="ip-container">
+                    <p id="ipv4" class="masked"></p>
+                    <button class="ip-toggle" onclick="toggleIpMask('ipv4')" title="IP ein-/ausblenden">👁️</button>
+                </div>
+            </div>
+            <div class="info-box">
+                <h3>🔗 IPv6</h3>
+                <div class="ip-container">
+                    <p id="ipv6" class="masked"></p>
+                    <button class="ip-toggle" onclick="toggleIpMask('ipv6')" title="IP ein-/ausblenden">👁️</button>
+                </div>
+            </div>
+            <div class="info-box">
+                <h3>📶 Netzwerkstatus</h3>
+                <p id="connection"></p>
+            </div>
         </div>
 
-        <!-- Software Section -->
-        <div class="info-box">
-            <h3>🌐 Browser</h3>
-            <p id="browser"></p>
+        <!-- Benutzereinstellungen -->
+        <div class="category">
+            <h2 class="category-title">👤 Benutzereinstellungen</h2>
+            <div class="info-box">
+                <h3>🎨 Farbmodus</h3>
+                <p id="colorScheme"></p>
+            </div>
+            <div class="info-box">
+                <h3>🌍 Sprache</h3>
+                <p id="language"></p>
+            </div>
+            <div class="info-box">
+                <h3>🕒 Zeitzone</h3>
+                <p id="timezone"></p>
+            </div>
+            <div class="info-box">
+                <h3>📆 Lokale Zeit</h3>
+                <p id="localTime"></p>
+            </div>
         </div>
 
-        <div class="info-box">
-            <h3>💻 Betriebssystem</h3>
-            <p id="os"></p>
+        <!-- Funktionen & Unterstützung -->
+        <div class="category">
+            <h2 class="category-title">🛠️ Funktionen & Unterstützung</h2>
+            <div class="info-box">
+                <h3>👆 Touch Support</h3>
+                <p id="touchSupport"></p>
+            </div>
+            <div class="info-box">
+                <h3>🎮 Gamepad Support</h3>
+                <p id="gamepadSupport"></p>
+            </div>
+            <div class="info-box">
+                <h3>🎥 Medienunterstützung</h3>
+                <p id="mediaCapabilities"></p>
+            </div>
+            <div class="info-box">
+                <h3>🍪 Cookies</h3>
+                <p id="cookies"></p>
+            </div>
+            <div class="info-box">
+                <h3>🚫 Do Not Track</h3>
+                <p id="doNotTrack"></p>
+            </div>
         </div>
+    </div>
 
-        <div class="info-box">
-            <h3>🕒 Zeitzone</h3>
-            <p id="timezone"></p>
-        </div>
-
-        <!-- Network Section -->
-        <div class="info-box">
-            <h3>🔗 IPv4</h3>
-            <p id="ipv4"></p>
-        </div>
-
-        <div class="info-box">
-            <h3>🔗 IPv6</h3>
-            <p id="ipv6"></p>
-        </div>
-
-        <!-- User Preferences -->
-        <div class="info-box">
-            <h3>🎨 Farbmodus</h3>
-            <p id="colorScheme"></p>
-        </div>
-
-        <div class="info-box">
-            <h3>🌍 Sprache</h3>
-            <p id="language"></p>
-        </div>
-
-        <div class="info-box">
-            <h3>📶 Netzwerkstatus</h3>
-            <p id="connection"></p>
-        </div>
-
-        <!-- Extended Info -->
-        <div class="info-box">
-            <h3>📆 Lokale Zeit</h3>
-            <p id="localTime"></p>
-        </div>
-
-        <div class="info-box">
-            <h3>👆 Touch Support</h3>
-            <p id="touchSupport"></p>
-        </div>
-
-        <div class="info-box">
-            <h3>🍪 Cookies</h3>
-            <p id="cookies"></p>
+    <!-- Modal Template -->
+    <div class="modal-overlay" id="confirmModal">
+        <div class="modal">
+            <h3 class="modal-title">Externe IP-Abfrage</h3>
+            <p class="modal-content">
+                Diese Aktion wird Ihre IP-Adressen über den externen Dienst ipify.org abfragen. 
+                Ihre IP-Adressen werden dabei an einen Drittanbieter übermittelt.
+                Möchten Sie fortfahren?
+            </p>
+            <div class="modal-buttons">
+                <button class="modal-btn modal-btn-secondary" onclick="closeModal()">Abbrechen</button>
+                <button class="modal-btn modal-btn-primary" onclick="confirmIpify()">Fortfahren</button>
+            </div>
         </div>
     </div>
 
@@ -277,8 +439,12 @@
             return os;
         };
         // Hardware Information
-        document.getElementById('resolution').textContent = 
-            `${screen.width} × ${screen.height} (Viewport: ${window.innerWidth} × ${window.innerHeight})`;
+        function updateResolution() {
+            document.getElementById('resolution').textContent = 
+                `Bildschirm: ${screen.width} × ${screen.height}\nViewport: ${window.innerWidth} × ${window.innerHeight}`;
+        }
+        updateResolution();
+        window.addEventListener('resize', updateResolution);
         
         document.getElementById('cpuCores').textContent = 
             navigator.hardwareConcurrency || 'Unbekannt';
@@ -301,21 +467,141 @@
         document.getElementById('deviceType').textContent = 
             navigator.userAgent.match(/Mobile/) ? 'Mobile' : 'Desktop';
 
+        // IP Masking Toggle
+        function toggleIpMask(elementId) {
+            const element = document.getElementById(elementId);
+            element.classList.toggle('masked');
+            
+            // Speichere den Status in localStorage
+            const isMasked = element.classList.contains('masked');
+            localStorage.setItem(`${elementId}_masked`, isMasked);
+        }
+
+        // Lade gespeicherte Maskierungseinstellungen
+        function loadIpMaskSettings() {
+            ['ipv4', 'ipv6'].forEach(id => {
+                const element = document.getElementById(id);
+                const isMasked = localStorage.getItem(`${id}_masked`) !== 'false';
+                if (!isMasked) {
+                    element.classList.remove('masked');
+                }
+            });
+        }
+
         // Network Information
-        async function getIP() {
+        async function tryIpify() {
             try {
                 const [v4, v6] = await Promise.all([
                     fetch('https://api.ipify.org?format=json').then(r => r.json()),
                     fetch('https://api64.ipify.org?format=json').then(r => r.json())
                 ]);
-                document.getElementById('ipv4').textContent = v4.ip;
-                document.getElementById('ipv6').textContent = v6.ip;
-            } catch {
+                return {
+                    ipv4: v4.ip,
+                    ipv6: v6.ip
+                };
+            } catch (error) {
+                console.error('Ipify-Dienst nicht erreichbar:', error);
+                return null;
+            }
+        }
+
+        async function getIP() {
+            async function tryPhpEndpoint() {
+                try {
+                    const response = await fetch('get_ip.php');
+                    const data = await response.json();
+                    return {
+                        ipv4: data.ipv4 || null,
+                        ipv6: data.ipv6 || null
+                    };
+                } catch (error) {
+                    console.log('PHP-Endpunkt nicht erreichbar');
+                    return null;
+                }
+            }
+
+            try {
+                // Versuche zuerst den PHP-Endpunkt
+                let ipData = await tryPhpEndpoint();
+                const buttonHtml = '<button onclick="useIpify()" class="ip-fallback-btn">Externe Abfrage über ipify starten</button>';
+                
+                // Füge Stil für den Button hinzu, falls noch nicht vorhanden
+                if (!document.querySelector('#ip-fallback-style')) {
+                    const style = document.createElement('style');
+                    style.id = 'ip-fallback-style';
+                    style.textContent = `
+                        .ip-fallback-btn {
+                            background: var(--accent-1);
+                            color: white;
+                            border: none;
+                            padding: 5px 10px;
+                            border-radius: 5px;
+                            cursor: pointer;
+                            margin-top: 5px;
+                            font-size: 0.9em;
+                        }
+                        .ip-fallback-btn:hover {
+                            opacity: 0.9;
+                        }
+                    `;
+                    document.head.appendChild(style);
+                }
+
+                if (!ipData) {
+                    // Wenn beide IPs fehlschlagen
+                    document.getElementById('ipv4').innerHTML = `Lokale IP-Abfrage fehlgeschlagen. ${buttonHtml}`;
+                    document.getElementById('ipv6').innerHTML = `Lokale IP-Abfrage fehlgeschlagen. ${buttonHtml}`;
+                    return;
+                }
+
+                // Setze die IPs und zeige Button für fehlende IPs
+                if (ipData.ipv4) {
+                    document.getElementById('ipv4').textContent = ipData.ipv4;
+                } else {
+                    document.getElementById('ipv4').innerHTML = `IPv4 nicht verfügbar. ${buttonHtml}`;
+                }
+
+                if (ipData.ipv6) {
+                    document.getElementById('ipv6').textContent = ipData.ipv6;
+                } else {
+                    document.getElementById('ipv6').innerHTML = `IPv6 nicht verfügbar. ${buttonHtml}`;
+                }
+
+                // Lade die Maskierungseinstellungen nach dem Setzen der IPs
+                loadIpMaskSettings();
+            } catch (error) {
+                console.error('Fehler beim Abrufen der IP-Adressen:', error);
                 document.getElementById('ipv4').textContent = 'Nicht verfügbar';
                 document.getElementById('ipv6').textContent = 'Nicht verfügbar';
             }
         }
-        getIP();
+
+        // Modal Funktionen
+        function showModal() {
+            document.getElementById('confirmModal').style.display = 'block';
+        }
+
+        function closeModal() {
+            document.getElementById('confirmModal').style.display = 'none';
+        }
+
+        // Funktion für die ipify-Abfrage nach Nutzerbestätigung
+        async function useIpify() {
+            showModal();
+        }
+
+        async function confirmIpify() {
+            closeModal();
+            const ipData = await tryIpify();
+            if (ipData) {
+                document.getElementById('ipv4').textContent = ipData.ipv4 || 'Nicht verfügbar';
+                document.getElementById('ipv6').textContent = ipData.ipv6 || 'Nicht verfügbar';
+                loadIpMaskSettings();
+            } else {
+                document.getElementById('ipv4').textContent = 'Externe Abfrage fehlgeschlagen';
+                document.getElementById('ipv6').textContent = 'Externe Abfrage fehlgeschlagen';
+            }
+        }
 
         // User Preferences
         document.getElementById('colorScheme').textContent = 
@@ -364,9 +650,53 @@
             };
         }
 
+        // Screenshot Export
+        function exportScreenshot() {
+            // Temporär die maskierten IPs durch Sternchen ersetzen
+            const ipElements = {
+                ipv4: document.getElementById('ipv4'),
+                ipv6: document.getElementById('ipv6')
+            };
+            const originalContent = {};
+
+            // Speichere originale Inhalte und ersetze maskierte IPs
+            for (const [key, element] of Object.entries(ipElements)) {
+                if (element.classList.contains('masked')) {
+                    originalContent[key] = element.textContent;
+                    const length = element.textContent.length;
+                    element.textContent = '*'.repeat(Math.min(length, 15));
+                }
+            }
+
+            // Erstelle Screenshot
+            html2canvas(document.querySelector('.container')).then(canvas => {
+                const img = canvas.toDataURL('image/png');
+                const a = document.createElement('a');
+                a.href = img;
+                a.download = `systeminfo-${new Date().toISOString()}.png`;
+                a.click();
+
+                // Stelle originale IP-Adressen wieder her
+                for (const [key, element] of Object.entries(ipElements)) {
+                    if (originalContent[key]) {
+                        element.textContent = originalContent[key];
+                    }
+                }
+            });
+        }
+
         // JSON Export
         function exportJSON() {
             const data = collectData();
+            
+            // Maskiere IPs im Export wenn sie in der UI maskiert sind
+            if (document.getElementById('ipv4').classList.contains('masked')) {
+                data.ipv4 = '*'.repeat(Math.min(data.ipv4.length, 15));
+            }
+            if (document.getElementById('ipv6').classList.contains('masked')) {
+                data.ipv6 = '*'.repeat(Math.min(data.ipv6.length, 15));
+            }
+
             const blob = new Blob([JSON.stringify(data, null, 2)], {type: 'application/json'});
             const url = URL.createObjectURL(blob);
             const a = document.createElement('a');
@@ -379,6 +709,15 @@
         // XML Export
         function exportXML() {
             const data = collectData();
+            
+            // Maskiere IPs im Export wenn sie in der UI maskiert sind
+            if (document.getElementById('ipv4').classList.contains('masked')) {
+                data.ipv4 = '*'.repeat(Math.min(data.ipv4.length, 15));
+            }
+            if (document.getElementById('ipv6').classList.contains('masked')) {
+                data.ipv6 = '*'.repeat(Math.min(data.ipv6.length, 15));
+            }
+
             let xml = '<?xml version="1.0" encoding="UTF-8"?>\n<systeminfo>\n';
             
             for (const [key, value] of Object.entries(data)) {
@@ -408,16 +747,51 @@
             });
         }
 
-        // Screenshot Export
-        function exportScreenshot() {
-            html2canvas(document.querySelector('.container')).then(canvas => {
-                const img = canvas.toDataURL('image/png');
-                const a = document.createElement('a');
-                a.href = img;
-                a.download = `systeminfo-${new Date().toISOString()}.png`;
-                a.click();
-            });
+        // Neue Funktionen für zusätzliche Browser-Informationen
+        function updateBrowserInfo() {
+            // User-Agent
+            document.getElementById('userAgent').textContent = navigator.userAgent;
+
+            // Bildschirmorientierung
+            const orientation = screen.orientation ? screen.orientation.type : 'Nicht verfügbar';
+            document.getElementById('screenOrientation').textContent = orientation;
+
+            // Gamepad Support
+            document.getElementById('gamepadSupport').textContent = 'getGamepads' in navigator ? 'Unterstützt' : 'Nicht unterstützt';
+
+            // Batteriestatus
+            if ('getBattery' in navigator) {
+                navigator.getBattery().then(battery => {
+                    const status = `Ladung: ${Math.round(battery.level * 100)}%, ${battery.charging ? 'Lädt' : 'Entlädt'}`;
+                    document.getElementById('batteryStatus').textContent = status;
+                });
+            } else {
+                document.getElementById('batteryStatus').textContent = 'Nicht verfügbar';
+            }
+
+            // Medienunterstützung
+            const mediaSupport = [];
+            if ('mediaCapabilities' in navigator) {
+                mediaSupport.push('MediaCapabilities API');
+            }
+            if ('mediaDevices' in navigator) {
+                mediaSupport.push('MediaDevices API');
+            }
+            document.getElementById('mediaCapabilities').textContent = 
+                mediaSupport.length ? mediaSupport.join(', ') : 'Eingeschränkt';
+
+            // Do Not Track Status
+            const dnt = navigator.doNotTrack || window.doNotTrack || navigator.msDoNotTrack;
+            let dntStatus = 'Nicht verfügbar';
+            if (dnt !== undefined && dnt !== null) {
+                dntStatus = dnt === '1' || dnt === 'yes' ? 'Aktiviert' : 'Deaktiviert';
+            }
+            document.getElementById('doNotTrack').textContent = dntStatus;
         }
+
+        // Initialisierung der Informationen
+        updateBrowserInfo();
+        getIP(); // Initialisiere IP-Abfrage
     </script>
 </body>
 </html>