1
0
2025-03-01 13:12:37 +01:00

201 lines
5.7 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>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
body {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
min-height: 100vh;
padding: 20px;
}
.container {
max-width: 800px;
margin: 0 auto;
background: rgba(255, 255, 255, 0.95);
border-radius: 15px;
padding: 30px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}
h1 {
color: #2d3748;
text-align: center;
margin-bottom: 30px;
font-size: 2.5em;
}
.info-box {
display: flex;
align-items: center;
margin-bottom: 20px;
padding: 15px;
background: #f7fafc;
border-radius: 10px;
transition: transform 0.2s;
}
.info-box:hover {
transform: translateX(10px);
}
.icon {
font-size: 24px;
margin-right: 15px;
width: 40px;
text-align: center;
}
.info-content h3 {
color: #2d3748;
margin-bottom: 5px;
font-size: 1.1em;
}
.info-content p {
color: #4a5568;
word-break: break-all;
}
@media (max-width: 600px) {
.container {
padding: 15px;
}
h1 {
font-size: 2em;
}
}
</style>
</head>
<body>
<div class="container">
<h1>🖥️ Systeminformationen</h1>
<div class="info-box">
<div class="icon">🌐</div>
<div class="info-content">
<h3>Browser</h3>
<p id="browser"></p>
</div>
</div>
<div class="info-box">
<div class="icon">📱</div>
<div class="info-content">
<h3>Gerät</h3>
<p id="device"></p>
</div>
</div>
<div class="info-box">
<div class="icon">💻</div>
<div class="info-content">
<h3>Betriebssystem</h3>
<p id="os"></p>
</div>
</div>
<div class="info-box">
<div class="icon">🔍</div>
<div class="info-content">
<h3>User-Agent</h3>
<p id="userAgent"></p>
</div>
</div>
<div class="info-box">
<div class="icon">🔗</div>
<div class="info-content">
<h3>IPv4</h3>
<p id="ipv4"></p>
</div>
</div>
<div class="info-box">
<div class="icon">🔗</div>
<div class="info-content">
<h3>IPv6</h3>
<p id="ipv6"></p>
</div>
</div>
</div>
<script>
// Browser- und Systeminformationen
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}`;
};
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;
// IP-Adressen abrufen mit separaten APIs
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) {
document.getElementById('ipv4').textContent = 'Nicht verfügbar';
document.getElementById('ipv6').textContent = 'Nicht verfügbar';
}
}
getIP();
</script>
</body>
</html>