Systemonformationen: Design überarbeitet, Neue Infos & besseres IP-Widget
This commit is contained in:
36
sys_info/get_ip.php
Normal file
36
sys_info/get_ip.php
Normal file
@ -0,0 +1,36 @@
|
|||||||
|
<?php
|
||||||
|
header('Content-Type: application/json');
|
||||||
|
header('Access-Control-Allow-Origin: *');
|
||||||
|
|
||||||
|
function getIPv4() {
|
||||||
|
$ipv4 = '';
|
||||||
|
if (isset($_SERVER['HTTP_X_FORWARDED_FOR'])) {
|
||||||
|
$ipv4 = $_SERVER['HTTP_X_FORWARDED_FOR'];
|
||||||
|
} else if (isset($_SERVER['HTTP_CLIENT_IP'])) {
|
||||||
|
$ipv4 = $_SERVER['HTTP_CLIENT_IP'];
|
||||||
|
} else {
|
||||||
|
$ipv4 = $_SERVER['REMOTE_ADDR'];
|
||||||
|
}
|
||||||
|
return filter_var($ipv4, FILTER_VALIDATE_IP, FILTER_FLAG_IPV4) ? $ipv4 : '';
|
||||||
|
}
|
||||||
|
|
||||||
|
function getIPv6() {
|
||||||
|
$ipv6 = '';
|
||||||
|
if (isset($_SERVER['HTTP_X_FORWARDED_FOR'])) {
|
||||||
|
$ips = explode(',', $_SERVER['HTTP_X_FORWARDED_FOR']);
|
||||||
|
foreach ($ips as $ip) {
|
||||||
|
if (filter_var(trim($ip), FILTER_VALIDATE_IP, FILTER_FLAG_IPV6)) {
|
||||||
|
$ipv6 = trim($ip);
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
} else if (isset($_SERVER['REMOTE_ADDR']) && filter_var($_SERVER['REMOTE_ADDR'], FILTER_VALIDATE_IP, FILTER_FLAG_IPV6)) {
|
||||||
|
$ipv6 = $_SERVER['REMOTE_ADDR'];
|
||||||
|
}
|
||||||
|
return $ipv6;
|
||||||
|
}
|
||||||
|
|
||||||
|
echo json_encode([
|
||||||
|
'ipv4' => getIPv4(),
|
||||||
|
'ipv6' => getIPv6()
|
||||||
|
]);
|
||||||
@ -40,15 +40,15 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.container {
|
.container {
|
||||||
max-width: 1000px;
|
max-width: 1200px;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
background: rgba(var(--bg-color), 0.95);
|
background: rgba(var(--bg-color), 0.95);
|
||||||
border-radius: 15px;
|
border-radius: 15px;
|
||||||
padding: 30px;
|
padding: 30px;
|
||||||
box-shadow: 0 10px 30px var(--shadow);
|
box-shadow: 0 10px 30px var(--shadow);
|
||||||
display: grid;
|
display: flex;
|
||||||
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
flex-direction: column;
|
||||||
gap: 20px;
|
gap: 30px;
|
||||||
color: var(--text-color);
|
color: var(--text-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -136,6 +136,116 @@
|
|||||||
.export-btn:hover {
|
.export-btn:hover {
|
||||||
transform: translateY(-2px);
|
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>
|
</style>
|
||||||
<script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>
|
<script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>
|
||||||
</head>
|
</head>
|
||||||
@ -150,78 +260,130 @@
|
|||||||
<h1>🖥️ Systeminformationen</h1>
|
<h1>🖥️ Systeminformationen</h1>
|
||||||
|
|
||||||
<!-- Hardware Section -->
|
<!-- Hardware Section -->
|
||||||
<div class="info-box">
|
<div class="category">
|
||||||
<h3>🖥️ Bildschirmauflösung</h3>
|
<h2 class="category-title">💻 Hardware</h2>
|
||||||
<p id="resolution"></p>
|
<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>
|
</div>
|
||||||
|
|
||||||
<div class="info-box">
|
<!-- System & Software -->
|
||||||
<h3>📱 Gerätetyp</h3>
|
<div class="category">
|
||||||
<p id="deviceType"></p>
|
<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>
|
</div>
|
||||||
|
|
||||||
<div class="info-box">
|
<!-- Netzwerk & Verbindung -->
|
||||||
<h3>⚡ CPU-Kerne</h3>
|
<div class="category">
|
||||||
<p id="cpuCores"></p>
|
<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>
|
</div>
|
||||||
|
|
||||||
<!-- Software Section -->
|
<!-- Benutzereinstellungen -->
|
||||||
<div class="info-box">
|
<div class="category">
|
||||||
<h3>🌐 Browser</h3>
|
<h2 class="category-title">👤 Benutzereinstellungen</h2>
|
||||||
<p id="browser"></p>
|
<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>
|
</div>
|
||||||
|
|
||||||
<div class="info-box">
|
<!-- Funktionen & Unterstützung -->
|
||||||
<h3>💻 Betriebssystem</h3>
|
<div class="category">
|
||||||
<p id="os"></p>
|
<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>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="info-box">
|
<!-- Modal Template -->
|
||||||
<h3>🕒 Zeitzone</h3>
|
<div class="modal-overlay" id="confirmModal">
|
||||||
<p id="timezone"></p>
|
<div class="modal">
|
||||||
</div>
|
<h3 class="modal-title">Externe IP-Abfrage</h3>
|
||||||
|
<p class="modal-content">
|
||||||
<!-- Network Section -->
|
Diese Aktion wird Ihre IP-Adressen über den externen Dienst ipify.org abfragen.
|
||||||
<div class="info-box">
|
Ihre IP-Adressen werden dabei an einen Drittanbieter übermittelt.
|
||||||
<h3>🔗 IPv4</h3>
|
Möchten Sie fortfahren?
|
||||||
<p id="ipv4"></p>
|
</p>
|
||||||
</div>
|
<div class="modal-buttons">
|
||||||
|
<button class="modal-btn modal-btn-secondary" onclick="closeModal()">Abbrechen</button>
|
||||||
<div class="info-box">
|
<button class="modal-btn modal-btn-primary" onclick="confirmIpify()">Fortfahren</button>
|
||||||
<h3>🔗 IPv6</h3>
|
</div>
|
||||||
<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>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -277,8 +439,12 @@
|
|||||||
return os;
|
return os;
|
||||||
};
|
};
|
||||||
// Hardware Information
|
// Hardware Information
|
||||||
document.getElementById('resolution').textContent =
|
function updateResolution() {
|
||||||
`${screen.width} × ${screen.height} (Viewport: ${window.innerWidth} × ${window.innerHeight})`;
|
document.getElementById('resolution').textContent =
|
||||||
|
`Bildschirm: ${screen.width} × ${screen.height}\nViewport: ${window.innerWidth} × ${window.innerHeight}`;
|
||||||
|
}
|
||||||
|
updateResolution();
|
||||||
|
window.addEventListener('resize', updateResolution);
|
||||||
|
|
||||||
document.getElementById('cpuCores').textContent =
|
document.getElementById('cpuCores').textContent =
|
||||||
navigator.hardwareConcurrency || 'Unbekannt';
|
navigator.hardwareConcurrency || 'Unbekannt';
|
||||||
@ -301,21 +467,141 @@
|
|||||||
document.getElementById('deviceType').textContent =
|
document.getElementById('deviceType').textContent =
|
||||||
navigator.userAgent.match(/Mobile/) ? 'Mobile' : 'Desktop';
|
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
|
// Network Information
|
||||||
async function getIP() {
|
async function tryIpify() {
|
||||||
try {
|
try {
|
||||||
const [v4, v6] = await Promise.all([
|
const [v4, v6] = await Promise.all([
|
||||||
fetch('https://api.ipify.org?format=json').then(r => r.json()),
|
fetch('https://api.ipify.org?format=json').then(r => r.json()),
|
||||||
fetch('https://api64.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;
|
return {
|
||||||
document.getElementById('ipv6').textContent = v6.ip;
|
ipv4: v4.ip,
|
||||||
} catch {
|
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('ipv4').textContent = 'Nicht verfügbar';
|
||||||
document.getElementById('ipv6').textContent = 'Nicht verfügbar';
|
document.getElementById('ipv6').textContent = 'Nicht verfügbar';
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
getIP();
|
|
||||||
|
// 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
|
// User Preferences
|
||||||
document.getElementById('colorScheme').textContent =
|
document.getElementById('colorScheme').textContent =
|
||||||
@ -364,9 +650,53 @@
|
|||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// 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
|
// JSON Export
|
||||||
function exportJSON() {
|
function exportJSON() {
|
||||||
const data = collectData();
|
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 blob = new Blob([JSON.stringify(data, null, 2)], {type: 'application/json'});
|
||||||
const url = URL.createObjectURL(blob);
|
const url = URL.createObjectURL(blob);
|
||||||
const a = document.createElement('a');
|
const a = document.createElement('a');
|
||||||
@ -379,6 +709,15 @@
|
|||||||
// XML Export
|
// XML Export
|
||||||
function exportXML() {
|
function exportXML() {
|
||||||
const data = collectData();
|
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';
|
let xml = '<?xml version="1.0" encoding="UTF-8"?>\n<systeminfo>\n';
|
||||||
|
|
||||||
for (const [key, value] of Object.entries(data)) {
|
for (const [key, value] of Object.entries(data)) {
|
||||||
@ -408,16 +747,51 @@
|
|||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
// Screenshot Export
|
// Neue Funktionen für zusätzliche Browser-Informationen
|
||||||
function exportScreenshot() {
|
function updateBrowserInfo() {
|
||||||
html2canvas(document.querySelector('.container')).then(canvas => {
|
// User-Agent
|
||||||
const img = canvas.toDataURL('image/png');
|
document.getElementById('userAgent').textContent = navigator.userAgent;
|
||||||
const a = document.createElement('a');
|
|
||||||
a.href = img;
|
// Bildschirmorientierung
|
||||||
a.download = `systeminfo-${new Date().toISOString()}.png`;
|
const orientation = screen.orientation ? screen.orientation.type : 'Nicht verfügbar';
|
||||||
a.click();
|
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>
|
</script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
Reference in New Issue
Block a user