802 lines
28 KiB
HTML
802 lines
28 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>
|
||
<meta property="og:title" content="Systeminformationen">
|
||
<meta property="og:description" content="Zeigt Infos zu Browser, Gerät, Betriebssystem, User-Agent und IPs an">
|
||
<meta property="og:type" content="website">
|
||
<meta property="og:url" content="https://tools.ponywave.de/sys_info">
|
||
<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: 1200px;
|
||
margin: 0 auto;
|
||
background: rgba(var(--bg-color), 0.95);
|
||
border-radius: 15px;
|
||
padding: 30px;
|
||
box-shadow: 0 10px 30px var(--shadow);
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 30px;
|
||
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);
|
||
}
|
||
|
||
.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>
|
||
<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="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>
|
||
|
||
<!-- 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>
|
||
|
||
<!-- 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>
|
||
|
||
<!-- 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>
|
||
|
||
<!-- 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>
|
||
|
||
<!-- 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>
|
||
|
||
<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
|
||
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';
|
||
|
||
// 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';
|
||
|
||
// 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 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())
|
||
]);
|
||
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';
|
||
}
|
||
}
|
||
|
||
// 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 =
|
||
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()
|
||
};
|
||
}
|
||
|
||
// 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');
|
||
a.href = url;
|
||
a.download = `systeminfo-${new Date().toISOString()}.json`;
|
||
a.click();
|
||
URL.revokeObjectURL(url);
|
||
}
|
||
|
||
// 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)) {
|
||
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];
|
||
});
|
||
}
|
||
|
||
// 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>
|