424 lines
14 KiB
HTML
424 lines
14 KiB
HTML
<!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 {
|
||
'<': '<',
|
||
'>': '>',
|
||
'&': '&',
|
||
"'": ''',
|
||
'"': '"'
|
||
}[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>
|