130 lines
2.8 KiB
PHP
130 lines
2.8 KiB
PHP
<?php
|
|
$data = new getSpecificData();
|
|
$allData = $data->getAllData();
|
|
|
|
// Daten nach Gruppen sortieren
|
|
$groupedData = [];
|
|
foreach ($allData as $key => $value) {
|
|
if (strpos($key, ' - ') !== false) {
|
|
[$group, $field] = explode(' - ', $key, 2);
|
|
} else {
|
|
$group = 'Other';
|
|
$field = $key;
|
|
}
|
|
$groupedData[$group][$field] = $value;
|
|
}
|
|
?>
|
|
|
|
<h2>System & Client Info</h2>
|
|
|
|
<?php foreach ($groupedData as $groupName => $fields): ?>
|
|
<div class="group-container">
|
|
<div class="group-header"><?= htmlspecialchars($groupName) ?> <span class="arrow">▸</span></div>
|
|
<ul class="info-list group-content">
|
|
<?php foreach ($fields as $field => $value): ?>
|
|
<li>
|
|
<span class="info-key"><?= htmlspecialchars($field) ?>:</span>
|
|
<span class="info-value">
|
|
<?php
|
|
if (is_array($value)) $value = implode(', ', $value);
|
|
echo htmlspecialchars($value ?? '');
|
|
?>
|
|
</span>
|
|
</li>
|
|
<?php endforeach; ?>
|
|
</ul>
|
|
</div>
|
|
<?php endforeach; ?>
|
|
|
|
<!-- ===== JS für einklappbare Gruppen ===== -->
|
|
<script>
|
|
document.querySelectorAll('.group-header').forEach(header => {
|
|
header.addEventListener('click', () => {
|
|
const content = header.nextElementSibling;
|
|
content.classList.toggle('open');
|
|
header.classList.toggle('open');
|
|
});
|
|
});
|
|
</script>
|
|
|
|
<!-- ===== CSS für einklappbare Gruppen ===== -->
|
|
<style>
|
|
.group-container {
|
|
margin-bottom: 15px;
|
|
border: 1px solid var(--card-border);
|
|
border-radius: 6px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.group-header {
|
|
background-color: var(--card-bg);
|
|
padding: 10px 15px;
|
|
font-weight: bold;
|
|
cursor: pointer;
|
|
user-select: none;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
.group-header:hover {
|
|
background: rgba(0, 0, 0, 0.05);
|
|
}
|
|
|
|
body.dark-mode .group-header:hover {
|
|
background: rgba(255, 255, 255, 0.08);
|
|
}
|
|
|
|
.group-content {
|
|
max-height: 0;
|
|
overflow: hidden;
|
|
transition: max-height 0.3s ease;
|
|
margin: 0;
|
|
padding: 0 15px;
|
|
}
|
|
|
|
.group-content.open {
|
|
max-height: 2000px;
|
|
/* ausreichend hoch für alle Elemente */
|
|
padding: 10px 15px;
|
|
}
|
|
|
|
.arrow {
|
|
transition: transform 0.3s ease;
|
|
}
|
|
|
|
.group-header.open .arrow {
|
|
transform: rotate(90deg);
|
|
}
|
|
|
|
.info-list li {
|
|
padding: 5px 0;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
border-bottom: 1px solid var(--card-border);
|
|
}
|
|
|
|
.info-list li:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.info-key {
|
|
font-weight: bold;
|
|
width: 180px;
|
|
}
|
|
|
|
.info-value {
|
|
flex: 1;
|
|
word-break: break-word;
|
|
}
|
|
|
|
/* Dark Mode Anpassungen */
|
|
body.dark-mode .group-header {
|
|
background-color: var(--card-bg);
|
|
color: var(--text);
|
|
}
|
|
|
|
body.dark-mode .info-list li {
|
|
border-bottom: 1px solid #333;
|
|
}
|
|
</style>
|