|
|
@@ -28,7 +28,7 @@ $spieler = $pdo->query("SELECT * FROM spieler ORDER BY name ASC")->fetchAll();
|
|
|
<head>
|
|
|
<meta charset="UTF-8">
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
- <title>EXIT - Lokale Gesamtliste</title>
|
|
|
+ <title>EXIT - Gesamtliste</title>
|
|
|
<style>
|
|
|
body { font-family: 'Segoe UI', sans-serif; background: #f8f9fa; margin: 0; padding: 20px; color: #333; }
|
|
|
.container { max-width: 1400px; margin: 0 auto; }
|
|
|
@@ -43,33 +43,28 @@ $spieler = $pdo->query("SELECT * FROM spieler ORDER BY name ASC")->fetchAll();
|
|
|
th { background: #2c3e50; color: white; text-align: left; padding: 15px; cursor: pointer; font-size: 0.8em; }
|
|
|
td { padding: 12px 15px; border-bottom: 1px solid #eee; }
|
|
|
|
|
|
- /* Thumbnails */
|
|
|
- .game-thumb {
|
|
|
- width: 55px; height: 55px; object-fit: cover; border-radius: 8px;
|
|
|
- border: 1px solid #ddd; cursor: pointer; transition: 0.2s;
|
|
|
- }
|
|
|
+ .game-thumb { width: 55px; height: 55px; object-fit: cover; border-radius: 8px; border: 1px solid #ddd; cursor: pointer; transition: 0.2s; }
|
|
|
.game-thumb:hover { transform: scale(1.1); border-color: #e67e22; }
|
|
|
|
|
|
- /* Badges */
|
|
|
- .lvl-badge { padding: 4px 10px; border-radius: 20px; color: white; font-size: 11px; font-weight: bold; }
|
|
|
- .lvl-Einsteiger { background: #27ae60; } .lvl-Fortgeschrittene { background: #2980b9; } .lvl-Profi { background: #c0392b; }
|
|
|
+ /* Badges & Unbekannt-Status */
|
|
|
+ .lvl-badge { padding: 4px 10px; border-radius: 20px; color: white; font-size: 11px; font-weight: bold; text-transform: uppercase; }
|
|
|
+ .lvl-Einsteiger { background: #27ae60; }
|
|
|
+ .lvl-Fortgeschrittene { background: #2980b9; }
|
|
|
+ .lvl-Profi { background: #c0392b; }
|
|
|
+ .lvl-unknown, .badge-unknown { background: #f39c12; color: white; } /* Gelb/Orange für Unbekannt */
|
|
|
+
|
|
|
.st-badge { padding: 5px 12px; border-radius: 15px; font-size: 11px; font-weight: bold; }
|
|
|
.st-besitzt { background: #d4edda; color: #155724; }
|
|
|
.st-verkauft { background: #fff3cd; color: #856404; }
|
|
|
.st-keins { background: #f8d7da; color: #721c24; }
|
|
|
+
|
|
|
.team-pill { display: inline-flex; align-items: center; background: #f1f2f6; padding: 4px 10px; border-radius: 6px; font-size: 12px; margin: 2px; border: 1px solid #dfe4ea; }
|
|
|
.dot { height: 8px; width: 8px; border-radius: 50%; display: inline-block; margin-right: 6px; }
|
|
|
|
|
|
- /* Hover-Vorschau */
|
|
|
+ /* Modal & Preview */
|
|
|
.image-preview { position: absolute; display: none; width: 220px; border: 4px solid white; border-radius: 12px; z-index: 999; box-shadow: 0 15px 35px rgba(0,0,0,0.4); pointer-events: none; }
|
|
|
-
|
|
|
- /* --- SELF-MADE MODAL (LIGHTBOX) --- */
|
|
|
- #imgModal {
|
|
|
- display: none; position: fixed; z-index: 10000; left: 0; top: 0; width: 100%; height: 100%;
|
|
|
- background-color: rgba(0,0,0,0.9); cursor: zoom-out; align-items: center; justify-content: center;
|
|
|
- }
|
|
|
- #modalContent { max-width: 90%; max-height: 90%; border-radius: 10px; box-shadow: 0 0 20px rgba(0,0,0,0.5); cursor: default; }
|
|
|
- .close-modal { position: absolute; top: 20px; right: 35px; color: #fff; font-size: 40px; font-weight: bold; cursor: pointer; }
|
|
|
+ #imgModal { display: none; position: fixed; z-index: 10000; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.9); align-items: center; justify-content: center; cursor: zoom-out; }
|
|
|
+ #modalContent { max-width: 90%; max-height: 90%; border-radius: 10px; }
|
|
|
</style>
|
|
|
</head>
|
|
|
<body>
|
|
|
@@ -102,7 +97,11 @@ $spieler = $pdo->query("SELECT * FROM spieler ORDER BY name ASC")->fetchAll();
|
|
|
</tr>
|
|
|
</thead>
|
|
|
<tbody>
|
|
|
- <?php foreach ($inventory as $row): ?>
|
|
|
+ <?php foreach ($inventory as $row):
|
|
|
+ // Logik für unbekannte Werte
|
|
|
+ $lvl = (empty($row['level']) || strtolower($row['level']) == 'unknown') ? 'unknown' : $row['level'];
|
|
|
+ $typ = (empty($row['typ_name']) || strtolower($row['typ_name']) == 'unknown') ? 'Unbekannt' : $row['typ_name'];
|
|
|
+ ?>
|
|
|
<tr>
|
|
|
<td>#<?= $row['id'] ?></td>
|
|
|
<td>
|
|
|
@@ -113,8 +112,19 @@ $spieler = $pdo->query("SELECT * FROM spieler ORDER BY name ASC")->fetchAll();
|
|
|
onmouseout="hidePreview()"
|
|
|
onerror="this.src='https://via.placeholder.com/60?text=?'">
|
|
|
</td>
|
|
|
- <td><strong><?= htmlspecialchars($row['titel']) ?></strong><br><small><?= htmlspecialchars($row['typ_name'] ?? 'Klassisch') ?></small></td>
|
|
|
- <td><span class="lvl-badge lvl-<?= $row['level'] ?>"><?= $row['level'] ?></span></td>
|
|
|
+ <td>
|
|
|
+ <strong><?= htmlspecialchars($row['titel']) ?></strong><br>
|
|
|
+ <?php if($typ == 'Unbekannt'): ?>
|
|
|
+ <small class="lvl-badge badge-unknown" style="padding: 1px 6px; font-size: 9px;">UNBEKANNT</small>
|
|
|
+ <?php else: ?>
|
|
|
+ <small style="color:#777;"><?= htmlspecialchars($typ) ?></small>
|
|
|
+ <?php endif; ?>
|
|
|
+ </td>
|
|
|
+ <td>
|
|
|
+ <span class="lvl-badge lvl-<?= $lvl ?>">
|
|
|
+ <?= ($lvl == 'unknown') ? 'Unbekannt' : $lvl ?>
|
|
|
+ </span>
|
|
|
+ </td>
|
|
|
<td><?= $row['best_sterne'] ? "<b>{$row['best_sterne']} ★</b>" : "-" ?></td>
|
|
|
<td>
|
|
|
<?php if ($filterPlayerId > 0):
|
|
|
@@ -137,37 +147,26 @@ $spieler = $pdo->query("SELECT * FROM spieler ORDER BY name ASC")->fetchAll();
|
|
|
</table>
|
|
|
</div>
|
|
|
|
|
|
-<div id="imgModal" onclick="this.style.display='none'">
|
|
|
- <span class="close-modal">×</span>
|
|
|
- <img id="modalContent">
|
|
|
-</div>
|
|
|
-
|
|
|
+<div id="imgModal" onclick="this.style.display='none'"><img id="modalContent"></div>
|
|
|
<img id="hoverPreview" class="image-preview" src="">
|
|
|
|
|
|
<script>
|
|
|
- // --- MODAL LOGIK ---
|
|
|
+ // Modal-Logik
|
|
|
const modal = document.getElementById("imgModal");
|
|
|
const modalImg = document.getElementById("modalContent");
|
|
|
+ function openModal(url) { modal.style.display = "flex"; modalImg.src = url; hidePreview(); }
|
|
|
|
|
|
- function openModal(url) {
|
|
|
- modal.style.display = "flex";
|
|
|
- modalImg.src = url;
|
|
|
- hidePreview(); // Vorschau ausblenden, wenn Modal öffnet
|
|
|
- }
|
|
|
-
|
|
|
- // --- HOVER LOGIK ---
|
|
|
+ // Hover-Logik
|
|
|
const preview = document.getElementById('hoverPreview');
|
|
|
function showPreview(e, url) {
|
|
|
- if(modal.style.display === "flex") return; // Keine Vorschau wenn Modal offen
|
|
|
- preview.src = url;
|
|
|
- preview.style.display = 'block';
|
|
|
- updatePos(e);
|
|
|
+ if(modal.style.display === "flex") return;
|
|
|
+ preview.src = url; preview.style.display = 'block'; updatePos(e);
|
|
|
}
|
|
|
function hidePreview() { preview.style.display = 'none'; }
|
|
|
function updatePos(e) { preview.style.left = (e.pageX + 20) + 'px'; preview.style.top = (e.pageY - 100) + 'px'; }
|
|
|
document.addEventListener('mousemove', (e) => { if(preview.style.display==='block') updatePos(e); });
|
|
|
|
|
|
- // --- FILTER & SORTIERUNG ---
|
|
|
+ // Filter & Sortierung
|
|
|
function filterTable() {
|
|
|
let val = document.getElementById("searchInput").value.toUpperCase();
|
|
|
let tr = document.getElementById("exitTable").getElementsByTagName("tr");
|
|
|
@@ -180,9 +179,8 @@ $spieler = $pdo->query("SELECT * FROM spieler ORDER BY name ASC")->fetchAll();
|
|
|
switching = false; rows = table.rows;
|
|
|
for (i = 1; i < (rows.length - 1); i++) {
|
|
|
should = false; x = rows[i].getElementsByTagName("TD")[n]; y = rows[i + 1].getElementsByTagName("TD")[n];
|
|
|
- let valX = x.innerText.toLowerCase().replace('#', '');
|
|
|
- let valY = y.innerText.toLowerCase().replace('#', '');
|
|
|
- if (n === 0) { valX = parseInt(valX); valY = parseInt(valY); }
|
|
|
+ let valX = x.innerText.toLowerCase(); let valY = y.innerText.toLowerCase();
|
|
|
+ if (n === 0) { valX = parseInt(valX.replace('#','')); valY = parseInt(valY.replace('#','')); }
|
|
|
if (dir == "asc") { if (valX > valY) { should = true; break; } }
|
|
|
else { if (valX < valY) { should = true; break; } }
|
|
|
}
|
erdo