|
|
@@ -66,6 +66,12 @@ foreach ($alleSpieleRaw as $s) {
|
|
|
$spieleBaum[$reihe][] = $s;
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
+// Hilfsfunktion für Bild-URL
|
|
|
+function getImgPath($url) {
|
|
|
+ if (empty($url)) return 'https://via.placeholder.com/150x150?text=Kein+Bild';
|
|
|
+ return (strpos($url, 'http') === 0) ? $url : IMG_URL . $url;
|
|
|
+}
|
|
|
?>
|
|
|
<!DOCTYPE html>
|
|
|
<html lang="de">
|
|
|
@@ -74,21 +80,12 @@ foreach ($alleSpieleRaw as $s) {
|
|
|
<title>EXIT - Bestand & Besitz</title>
|
|
|
<style>
|
|
|
:root {
|
|
|
- --bg: #f4f7f6;
|
|
|
- --card: #ffffff;
|
|
|
- --text: #333;
|
|
|
- --border: #ddd;
|
|
|
- --accent: #e67e22;
|
|
|
- --reihe-bg: #2c3e50; /* Dunkel für starken Kontrast */
|
|
|
- --child-bg: #fdf2e9; /* Deutliches Hell-Orange/Beige */
|
|
|
+ --bg: #f4f7f6; --card: #ffffff; --text: #333; --border: #ddd; --accent: #e67e22;
|
|
|
+ --reihe-bg: #2c3e50; --child-bg: #fdf2e9;
|
|
|
}
|
|
|
.dark-theme {
|
|
|
- --bg: #121212;
|
|
|
- --card: #1e1e1e;
|
|
|
- --text: #e0e0e0;
|
|
|
- --border: #333;
|
|
|
- --reihe-bg: #000000;
|
|
|
- --child-bg: #252525; /* Deutlich heller als der Standard-Hintergrund */
|
|
|
+ --bg: #121212; --card: #1e1e1e; --text: #e0e0e0; --border: #333;
|
|
|
+ --reihe-bg: #000000; --child-bg: #252525;
|
|
|
}
|
|
|
|
|
|
body { font-family: 'Segoe UI', sans-serif; background: var(--bg); color: var(--text); padding: 20px; transition: 0.3s; }
|
|
|
@@ -96,11 +93,10 @@ foreach ($alleSpieleRaw as $s) {
|
|
|
header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
|
|
|
.btn-nav { background: var(--accent); color: white; padding: 10px 15px; border-radius: 6px; text-decoration: none; font-weight: bold; }
|
|
|
|
|
|
- table { width: 100%; border-collapse: collapse; background: var(--card); border: 1px solid var(--border); border-radius: 8px; overflow: hidden; table-layout: fixed; }
|
|
|
- th, td { padding: 12px; border-bottom: 1px solid var(--border); text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
|
- th:first-child, td:first-child { width: 35%; white-space: normal; }
|
|
|
+ table { width: 100%; border-collapse: collapse; background: var(--card); border: 1px solid var(--border); border-radius: 8px; overflow: visible; table-layout: fixed; }
|
|
|
+ th, td { padding: 12px; border-bottom: 1px solid var(--border); text-align: left; }
|
|
|
+ th:first-child, td:first-child { width: 35%; position: relative; }
|
|
|
|
|
|
- /* Kategorien-Trenner */
|
|
|
.reihe-divider { background: var(--reihe-bg); color: #fff; font-weight: bold; text-transform: uppercase; letter-spacing: 1px; font-size: 0.85em; }
|
|
|
|
|
|
select { padding: 6px; border-radius: 4px; border: 1px solid var(--border); background: var(--card); color: var(--text); width: 100%; cursor: pointer; font-size: 0.85em; }
|
|
|
@@ -110,18 +106,24 @@ foreach ($alleSpieleRaw as $s) {
|
|
|
|
|
|
/* UNTERPUNKTE */
|
|
|
.is-child { background-color: var(--child-bg) !important; }
|
|
|
- .is-child td:first-child { padding-left: 45px; position: relative; }
|
|
|
+ .is-child td:first-child { padding-left: 45px; }
|
|
|
.is-child td:first-child::before {
|
|
|
- content: "↳";
|
|
|
- position: absolute;
|
|
|
- left: 20px;
|
|
|
- color: var(--accent);
|
|
|
- font-weight: 900;
|
|
|
- font-size: 1.2em;
|
|
|
+ content: "↳"; position: absolute; left: 20px; color: var(--accent); font-weight: 900; font-size: 1.2em;
|
|
|
}
|
|
|
|
|
|
+ /* HOVER PREVIEW LOGIK */
|
|
|
+ .preview-trigger { cursor: help; border-bottom: 1px dotted var(--accent); position: relative; display: inline-block; }
|
|
|
+ .preview-box {
|
|
|
+ display: none; position: absolute; left: 100%; top: 0; z-index: 1000;
|
|
|
+ width: 150px; height: 150px; background: #000; border: 2px solid var(--accent);
|
|
|
+ border-radius: 8px; box-shadow: 0 10px 25px rgba(0,0,0,0.3); overflow: hidden;
|
|
|
+ margin-left: 15px; pointer-events: none;
|
|
|
+ }
|
|
|
+ .preview-box img { width: 100%; height: 100%; object-fit: cover; }
|
|
|
+ .preview-trigger:hover .preview-box { display: block; }
|
|
|
+
|
|
|
.child-label { font-size: 0.95em; font-weight: 500; }
|
|
|
- small { display: block; line-height: 1.2; margin-top: 2px; }
|
|
|
+ small { display: block; line-height: 1.2; margin-top: 2px; opacity: 0.6; }
|
|
|
</style>
|
|
|
</head>
|
|
|
<body>
|
|
|
@@ -152,8 +154,13 @@ foreach ($alleSpieleRaw as $s) {
|
|
|
<?php foreach ($hauptSpiele as $sp): ?>
|
|
|
<tr class="is-parent">
|
|
|
<td>
|
|
|
- <strong><?= htmlspecialchars($sp['titel']) ?></strong>
|
|
|
- <small style="opacity:0.6"><?= htmlspecialchars($sp['typ_name']) ?></small>
|
|
|
+ <div class="preview-trigger">
|
|
|
+ <strong><?= htmlspecialchars($sp['titel']) ?></strong>
|
|
|
+ <div class="preview-box">
|
|
|
+ <img src="<?= getImgPath($sp['bild_url']) ?>" alt="Cover">
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <small><?= htmlspecialchars($sp['typ_name']) ?></small>
|
|
|
</td>
|
|
|
<?php foreach ($spieler as $s):
|
|
|
$curr = $statusMapping[$sp['id']][$s['id']] ?? 'nicht besitzt';
|
|
|
@@ -177,8 +184,13 @@ foreach ($alleSpieleRaw as $s) {
|
|
|
<?php foreach ($childrenMap[$sp['id']] as $child): ?>
|
|
|
<tr class="is-child">
|
|
|
<td>
|
|
|
- <span class="child-label"><?= htmlspecialchars($child['titel']) ?></span>
|
|
|
- <small style="opacity:0.5"><?= htmlspecialchars($child['typ_name']) ?></small>
|
|
|
+ <div class="preview-trigger">
|
|
|
+ <span class="child-label"><?= htmlspecialchars($child['titel']) ?></span>
|
|
|
+ <div class="preview-box">
|
|
|
+ <img src="<?= getImgPath($child['bild_url']) ?>" alt="Cover">
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <small><?= htmlspecialchars($child['typ_name']) ?></small>
|
|
|
</td>
|
|
|
<?php foreach ($spieler as $s):
|
|
|
$curr = $statusMapping[$child['id']][$s['id']] ?? 'nicht besitzt';
|
erdo