126 lines
No EOL
3.8 KiB
HTML
126 lines
No EOL
3.8 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="de">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Zauberturm Projekt-Log</title>
|
|
<style>
|
|
:root {
|
|
--bg-color: #0f111a;
|
|
--card-bg: #1a1d2e;
|
|
--accent-color: #7c4dff;
|
|
--text-color: #e0e0e0;
|
|
}
|
|
|
|
body {
|
|
background-color: var(--bg-color);
|
|
color: var(--text-color);
|
|
font-family: 'Segoe UI', sans-serif;
|
|
margin: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
min-height: 100vh;
|
|
}
|
|
|
|
header {
|
|
width: 100%;
|
|
padding: 3rem 0;
|
|
text-align: center;
|
|
background: linear-gradient(to bottom, #161b33, var(--bg-color));
|
|
border-bottom: 2px solid var(--accent-color);
|
|
}
|
|
|
|
.gallery {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
|
|
gap: 2rem;
|
|
width: 90%;
|
|
max-width: 1200px;
|
|
padding: 3rem 0;
|
|
}
|
|
|
|
.screenshot-card {
|
|
background: var(--card-bg);
|
|
border-radius: 12px;
|
|
overflow: hidden;
|
|
border: 1px solid rgba(255, 255, 255, 0.05);
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.screenshot-card:hover {
|
|
transform: translateY(-5px);
|
|
border-color: var(--accent-color);
|
|
box-shadow: 0 10px 20px rgba(0,0,0,0.5);
|
|
}
|
|
|
|
.screenshot-card img {
|
|
width: 100%;
|
|
height: 250px;
|
|
object-fit: cover;
|
|
display: block;
|
|
}
|
|
|
|
.info { padding: 1rem; text-align: center; border-top: 1px solid rgba(255,255,255,0.05); }
|
|
.info span { font-size: 0.85rem; color: #888; font-family: monospace; }
|
|
.info small { display: block; margin-top: 4px; color: #555; }
|
|
|
|
.empty-msg { grid-column: 1 / -1; text-align: center; padding: 5rem; color: #555; }
|
|
|
|
footer { margin-top: auto; padding: 2rem; color: #444; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<header>
|
|
<h1>Zauberturm.de</h1>
|
|
<p>Projekt-Entwicklung: Screenshot Log</p>
|
|
</header>
|
|
|
|
<div class="gallery">
|
|
<?php
|
|
$log_dir = 'image_log';
|
|
$allowed_extensions = ['jpg', 'jpeg', 'png', 'webp'];
|
|
|
|
// Verzeichnis erstellen, falls es nicht existiert
|
|
if (!is_dir($log_dir)) {
|
|
mkdir($log_dir, 0755, true);
|
|
}
|
|
|
|
// Dateien im Unterordner scannen
|
|
$files = array_diff(scandir($log_dir), array('..', '.'));
|
|
|
|
if (count($files) > 0) {
|
|
// Sortieren: Neueste Dateien zuerst
|
|
usort($files, function($a, $b) use ($log_dir) {
|
|
return filemtime($log_dir . '/' . $b) - filemtime($log_dir . '/' . $a);
|
|
});
|
|
|
|
foreach ($files as $file) {
|
|
$file_path = $log_dir . '/' . $file;
|
|
$ext = strtolower(pathinfo($file, PATHINFO_EXTENSION));
|
|
|
|
if (in_array($ext, $allowed_extensions)) {
|
|
$date = date("d.m.Y H:i", filemtime($file_path));
|
|
echo "
|
|
<div class='screenshot-card'>
|
|
<a href='$file_path' target='_blank'>
|
|
<img src='$file_path' alt='Projekt Screenshot'>
|
|
</a>
|
|
<div class='info'>
|
|
<span>$file</span>
|
|
<small>$date</small>
|
|
</div>
|
|
</div>";
|
|
}
|
|
}
|
|
} else {
|
|
echo "<div class='empty-msg'>Keine Screenshots im Ordner /image_log/ gefunden.</div>";
|
|
}
|
|
?>
|
|
</div>
|
|
|
|
<footer>© 2026 zauberturm.de</footer>
|
|
|
|
</body>
|
|
</html> |