1
0

424 lines
14 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Systeminformationen</title>
<script defer src="https://stats.ponywave.de/script" data-website-id="9ef713d2-adb9-4906-9df5-708d8a8b9131" data-tag="sys_info"></script>
<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;
box-sizing: border-box;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
body {
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: 1000px;
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;
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 {
grid-column: 1 / -1;
color: var(--text-color);
text-align: center;
margin-bottom: 20px;
font-size: 2.5em;
}
.info-box {
padding: 20px;
background: var(--box-bg);
border-radius: 10px;
transition: transform 0.2s;
min-height: 120px;
}
.info-box:hover {
transform: translateY(-5px);
}
.info-box h3 {
color: var(--text-color);
margin-bottom: 10px;
font-size: 1.1em;
display: flex;
align-items: center;
gap: 10px;
}
.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">
<h3>🖥️ Bildschirmauflösung</h3>
<p id="resolution"></p>
</div>
<div class="info-box">
<h3>📱 Gerätetyp</h3>
<p id="deviceType"></p>
</div>
<div class="info-box">
<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">
<h3>💻 Betriebssystem</h3>
<p id="os"></p>
</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>
</div>
</div>
<script>
// 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 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;
};
document.getElementById('browser').textContent = getBrowserInfo();
document.getElementById('os').textContent = getOSInfo();
document.getElementById('timezone').textContent = Intl.DateTimeFormat().resolvedOptions().timeZone;
document.getElementById('language').textContent = navigator.language;
document.getElementById('deviceType').textContent =
navigator.userAgent.match(/Mobile/) ? 'Mobile' : 'Desktop';
// Network Information
async function getIP() {
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 {
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>