Systeminformationen aktualisiert

2025-03-01 18:30:26 +01:00 · 2025-03-01 18:30:26 +01:00 · 76fb6a18e6
commit 76fb6a18e6
parent c92859c096
1 changed files with 326 additions and 105 deletions
--- a/sys_info/index.html
+++ b/sys_info/index.html
@ -5,6 +5,24 @@
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Systeminformationen</title>
    <style>
+        :root {
+            --bg-color: 255, 255, 255;
+            --text-color: #2d3748;
+            --box-bg: #f7fafc;
+            --shadow: rgba(0, 0, 0, 0.1);
+            --accent-1: #667eea;
+            --accent-2: #764ba2;
+        }
+
+        [data-theme="dark"] {
+            --bg-color: 26, 32, 44;
+            --text-color: #e2e8f0;
+            --box-bg: #2d3748;
+            --shadow: rgba(0, 0, 0, 0.3);
+            --accent-1: #4fd1c5;
+            --accent-2: #4a5568;
+        }
+
        * {
            margin: 0;
            padding: 0;
@ -13,189 +31,392 @@
        }

        body {
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            background: linear-gradient(135deg, var(--accent-1) 0%, var(--accent-2) 100%);
            min-height: 100vh;
            padding: 20px;
+            color: var(--text-color);
+            transition: background 0.3s ease;
        }

        .container {
-            max-width: 800px;
+            max-width: 1000px;
            margin: 0 auto;
-            background: rgba(255, 255, 255, 0.95);
+            background: rgba(var(--bg-color), 0.95);
            border-radius: 15px;
            padding: 30px;
-            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
+            box-shadow: 0 10px 30px var(--shadow);
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+            gap: 20px;
+            color: var(--text-color);
+        }
+
+        .theme-toggle {
+            position: fixed;
+            top: 20px;
+            right: 20px;
+            background: rgba(var(--bg-color), 0.9);
+            border: none;
+            padding: 10px;
+            border-radius: 50%;
+            cursor: pointer;
+            box-shadow: 0 2px 5px var(--shadow);
+            color: var(--text-color);
        }

        h1 {
-            color: #2d3748;
+            grid-column: 1 / -1;
+            color: var(--text-color);
            text-align: center;
-            margin-bottom: 30px;
+            margin-bottom: 20px;
            font-size: 2.5em;
        }

        .info-box {
-            display: flex;
-            align-items: center;
-            margin-bottom: 20px;
-            padding: 15px;
-            background: #f7fafc;
+            padding: 20px;
+            background: var(--box-bg);
            border-radius: 10px;
            transition: transform 0.2s;
+            min-height: 120px;
        }

        .info-box:hover {
-            transform: translateX(10px);
+            transform: translateY(-5px);
        }

-        .icon {
-            font-size: 24px;
-            margin-right: 15px;
-            width: 40px;
-            text-align: center;
-        }
-
-        .info-content h3 {
-            color: #2d3748;
-            margin-bottom: 5px;
+        .info-box h3 {
+            color: var(--text-color);
+            margin-bottom: 10px;
            font-size: 1.1em;
+            display: flex;
+            align-items: center;
+            gap: 10px;
        }

-        .info-content p {
-            color: #4a5568;
+        .info-box p {
+            color: var(--text-color);
            word-break: break-all;
+            line-height: 1.5;
+            opacity: 0.9;
        }

        @media (max-width: 600px) {
            .container {
                padding: 15px;
+                grid-template-columns: 1fr;
            }
            
            h1 {
                font-size: 2em;
            }
        }
+        .export-buttons {
+            position: fixed;
+            top: 20px;
+            left: 20px;
+            display: flex;
+            gap: 10px;
+        }
+
+        .export-btn {
+            background: rgba(var(--bg-color), 0.9);
+            border: none;
+            padding: 10px 15px;
+            border-radius: 20px;
+            cursor: pointer;
+            box-shadow: 0 2px 5px var(--shadow);
+            color: var(--text-color);
+            display: flex;
+            align-items: center;
+            gap: 5px;
+            transition: transform 0.2s;
+        }
+
+        .export-btn:hover {
+            transform: translateY(-2px);
+        }
    </style>
+    <script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>
 </head>
 <body>
+    <div class="export-buttons">
+        <button class="export-btn" onclick="exportJSON()">📄 JSON</button>
+        <button class="export-btn" onclick="exportXML()">📑 XML</button>
+        <button class="export-btn" onclick="exportScreenshot()">🖼️ Screenshot</button>
+    </div>
+    <button class="theme-toggle" onclick="toggleTheme()">🌓</button>
    <div class="container">
        <h1>🖥️ Systeminformationen</h1>
        
+        <!-- Hardware Section -->
        <div class="info-box">
-            <div class="icon">🌐</div>
-            <div class="info-content">
-                <h3>Browser</h3>
-                <p id="browser"></p>
-            </div>
+            <h3>🖥️ Bildschirmauflösung</h3>
+            <p id="resolution"></p>
        </div>

        <div class="info-box">
-            <div class="icon">📱</div>
-            <div class="info-content">
-                <h3>Gerät</h3>
-                <p id="device"></p>
-            </div>
+            <h3>📱 Gerätetyp</h3>
+            <p id="deviceType"></p>
        </div>

        <div class="info-box">
-            <div class="icon">💻</div>
-            <div class="info-content">
-                <h3>Betriebssystem</h3>
-                <p id="os"></p>
-            </div>
+            <h3>⚡ CPU-Kerne</h3>
+            <p id="cpuCores"></p>
+        </div>
+
+        <!-- Software Section -->
+        <div class="info-box">
+            <h3>🌐 Browser</h3>
+            <p id="browser"></p>
        </div>

        <div class="info-box">
-            <div class="icon">🔍</div>
-            <div class="info-content">
-                <h3>User-Agent</h3>
-                <p id="userAgent"></p>
-            </div>
+            <h3>💻 Betriebssystem</h3>
+            <p id="os"></p>
        </div>

        <div class="info-box">
-            <div class="icon">🔗</div>
-            <div class="info-content">
-                <h3>IPv4</h3>
-                <p id="ipv4"></p>
-            </div>
+            <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">
-            <div class="icon">🔗</div>
-            <div class="info-content">
-                <h3>IPv6</h3>
-                <p id="ipv6"></p>
-            </div>
+            <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>
        </div>
    </div>

    <script>
-        // Browser- und Systeminformationen
+        // Theme Handling
+        function detectSystemTheme() {
+            return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+        }
+
+        function applyTheme(theme) {
+            document.documentElement.setAttribute('data-theme', theme || detectSystemTheme());
+        }
+
+        function toggleTheme() {
+            const currentTheme = document.documentElement.getAttribute('data-theme');
+            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
+            localStorage.setItem('userTheme', newTheme);
+            applyTheme(newTheme);
+        }
+
+        // Initial Theme Setup
+        const savedTheme = localStorage.getItem('userTheme');
+        applyTheme(savedTheme || detectSystemTheme());
+
+        // System Theme Change Listener
+        window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
+            if (!localStorage.getItem('userTheme')) applyTheme();
+        });
+		
+        // Verbesserte OS-Erkennung
+        const getOSInfo = () => {
+            const ua = navigator.userAgent;
+            let os = navigator.platform;
+            let arch = '32-bit';
+            
+            if (ua.includes('Win64') || ua.includes('WOW64')) {
+                arch = '64-bit';
+            }
+
+            if (ua.includes('Windows NT 10.0')) {
+                os = ua.includes('Windows NT 10.0; Win64; x64') ? 
+                     `Windows 11 ${arch}` : 
+                     `Windows 10 ${arch}`;
+            }
+            else if (ua.includes('Windows NT 6.3')) os = `Windows 8.1 ${arch}`;
+            else if (ua.includes('Windows NT 6.2')) os = `Windows 8 ${arch}`;
+            else if (ua.includes('Windows NT 6.1')) os = `Windows 7 ${arch}`;
+            else if (ua.includes('Macintosh')) os = 'MacOS';
+            else if (ua.includes('Linux')) os = 'Linux';
+            else if (ua.includes('Android')) os = 'Android';
+            else if (ua.includes('like Mac')) os = 'iOS';
+
+            return os;
+        };
+        // Hardware Information
+        document.getElementById('resolution').textContent = 
+            `${screen.width} × ${screen.height} (Viewport: ${window.innerWidth} × ${window.innerHeight})`;
+        
+        document.getElementById('cpuCores').textContent = 
+            navigator.hardwareConcurrency || 'Unbekannt';
+
+        // Software Information
        const getBrowserInfo = () => {
            const ua = navigator.userAgent;
-            let browserName = navigator.appName;
-            let browserVersion = '' + parseFloat(navigator.appVersion);
-            
-            if(ua.includes("Chrome/")) {
-                browserName = "Chrome";
-                browserVersion = ua.split("Chrome/")[1].split(" ")[0];
-            } else if(ua.includes("Firefox/")) {
-                browserName = "Firefox";
-                browserVersion = ua.split("Firefox/")[1];
-            } else if(ua.includes("Safari/")) {
-                browserName = "Safari";
-                browserVersion = ua.split("Version/")[1].split(" ")[0];
-            }
-            
-            return `${browserName} ${browserVersion}`;
+            let browser = '';
+            if(ua.includes("Chrome")) browser = "Chrome " + (ua.match(/Chrome\/(\d+\.\d+)/) || [, ''])[1];
+            else if(ua.includes("Firefox")) browser = "Firefox " + (ua.match(/Firefox\/(\d+\.\d+)/) || [, ''])[1];
+            else if(ua.includes("Safari")) browser = "Safari " + (ua.match(/Version\/(\d+\.\d+)/) || [, ''])[1];
+            else if(ua.includes("Edg")) browser = "Edge " + (ua.match(/Edg\/(\d+\.\d+)/) || [, ''])[1];
+            return browser || navigator.userAgent;
        };

-        const getOSInfo = () => {
-            const osMap = {
-                'Win': 'Windows',
-                'Mac': 'MacOS',
-                'Linux': 'Linux',
-                'Android': 'Android',
-                'like Mac': 'iOS'
-            };
-            
-            for (const [key, value] of Object.entries(osMap)) {
-                if(navigator.userAgent.includes(key)) return value;
-            }
-            return 'Unbekanntes OS';
-        };
-
-        const getDeviceType = () => {
-            return /Mobi|Android/i.test(navigator.userAgent) ? 'Mobile' : 'Desktop';
-        };
-
-        // Daten anzeigen
        document.getElementById('browser').textContent = getBrowserInfo();
-        document.getElementById('device').textContent = getDeviceType();
        document.getElementById('os').textContent = getOSInfo();
-        document.getElementById('userAgent').textContent = navigator.userAgent;
+        document.getElementById('timezone').textContent = Intl.DateTimeFormat().resolvedOptions().timeZone;
+        document.getElementById('language').textContent = navigator.language;
+        document.getElementById('deviceType').textContent = 
+            navigator.userAgent.match(/Mobile/) ? 'Mobile' : 'Desktop';

-        // IP-Adressen abrufen mit separaten APIs
+        // Network Information
        async function getIP() {
            try {
-                // IPv4 abrufen
-                const v4Response = await fetch('https://api.ipify.org?format=json');
-                const v4Data = await v4Response.json();
-                document.getElementById('ipv4').textContent = v4Data.ip;
-
-                // IPv6 abrufen
-                const v6Response = await fetch('https://api64.ipify.org/?format=json');
-                const v6Data = await v6Response.json();
-                document.getElementById('ipv6').textContent = v6Data.ip;
-                
-            } catch (error) {
+                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 {
                document.getElementById('ipv4').textContent = 'Nicht verfügbar';
                document.getElementById('ipv6').textContent = 'Nicht verfügbar';
            }
        }
-
        getIP();
+
+        // User Preferences
+        document.getElementById('colorScheme').textContent = 
+            window.matchMedia('(prefers-color-scheme: dark)').matches ? 'Dark Mode' : 'Light Mode';
+        
+        document.getElementById('touchSupport').textContent = 
+            'ontouchstart' in window ? 'Unterstützt' : 'Nicht unterstützt';
+        
+        document.getElementById('cookies').textContent = 
+            navigator.cookieEnabled ? 'Aktiviert' : 'Deaktiviert';
+
+        // Live Updates
+        function updateTime() {
+            document.getElementById('localTime').textContent = 
+                new Date().toLocaleTimeString('de-DE');
+        }
+        setInterval(updateTime, 1000);
+        updateTime();
+
+        // Network Status
+        window.addEventListener('online', () => {
+            document.getElementById('connection').textContent = 'Online';
+            document.getElementById('connection').style.color = '#2ecc71';
+        });
+
+        window.addEventListener('offline', () => {
+            document.getElementById('connection').textContent = 'Offline';
+            document.getElementById('connection').style.color = '#e74c3c';
+        });
+        document.getElementById('connection').textContent = 
+            navigator.onLine ? 'Online' : 'Offline';
+	
+        // Daten sammeln
+        function collectData() {
+            return {
+                browser: document.getElementById('browser').textContent,
+                betriebssystem: document.getElementById('os').textContent,
+                aufloesung: document.getElementById('resolution').textContent,
+                gerätetyp: document.getElementById('deviceType').textContent,
+                cpuKerne: document.getElementById('cpuCores').textContent,
+                zeitzone: document.getElementById('timezone').textContent,
+                sprache: document.getElementById('language').textContent,
+                ipv4: document.getElementById('ipv4').textContent,
+                ipv6: document.getElementById('ipv6').textContent,
+                zeit: new Date().toISOString()
+            };
+        }
+
+        // JSON Export
+        function exportJSON() {
+            const data = collectData();
+            const blob = new Blob([JSON.stringify(data, null, 2)], {type: 'application/json'});
+            const url = URL.createObjectURL(blob);
+            const a = document.createElement('a');
+            a.href = url;
+            a.download = `systeminfo-${new Date().toISOString()}.json`;
+            a.click();
+            URL.revokeObjectURL(url);
+        }
+
+        // XML Export
+        function exportXML() {
+            const data = collectData();
+            let xml = '<?xml version="1.0" encoding="UTF-8"?>\n<systeminfo>\n';
+            
+            for (const [key, value] of Object.entries(data)) {
+                xml += `  <${key}>${escapeXML(value)}</${key}>\n`;
+            }
+            
+            xml += '</systeminfo>';
+            
+            const blob = new Blob([xml], {type: 'application/xml'});
+            const url = URL.createObjectURL(blob);
+            const a = document.createElement('a');
+            a.href = url;
+            a.download = `systeminfo-${new Date().toISOString()}.xml`;
+            a.click();
+            URL.revokeObjectURL(url);
+        }
+
+        function escapeXML(str) {
+            return str.replace(/[<>&'"]/g, (char) => {
+                return {
+                    '<': '&lt;',
+                    '>': '&gt;',
+                    '&': '&amp;',
+                    "'": '&apos;',
+                    '"': '&quot;'
+                }[char];
+            });
+        }
+
+        // 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();
+            });
+        }
    </script>
 </body>
 </html>