Major changes: - New ThemeManager with Twig templating and SCSS compilation - Dynamic themes system (themes/default, themes/demo) - LogManager with SQLite storage and syslog forwarding - RequestLogger with static helper methods - Admin UI overhaul (Bootstrap 5, dark mode) - Admin config page with logging and theme settings - Admin logs page with filters and search - Removed legacy Mustache templates - Removed test plugin and theme - Composer dependencies: Twig, scssphp, CommonMark, MaxMind GeoIP
105 lines
5.3 KiB
PHP
105 lines
5.3 KiB
PHP
<div class="d-flex justify-content-between align-items-center mb-4">
|
|
<h2><i class="bi bi-palette"></i> Thema's</h2>
|
|
<a href="/admin/theme-new" class="btn btn-primary btn-sm">
|
|
<i class="bi bi-plus-lg"></i> Nieuwe thema
|
|
</a>
|
|
</div>
|
|
|
|
<div class="card shadow-sm mb-4">
|
|
<div class="card-body">
|
|
<h5 class="card-title"><i class="bi bi-info-circle"></i> Thema-ontwikkelaarshandleiding</h5>
|
|
<p class="text-muted mb-2">Een thema is een volledig zelfstandige map en moet aan de volgende eisen voldoen:</p>
|
|
<div class="row g-3">
|
|
<div class="col-md-4">
|
|
<div class="d-flex align-items-start">
|
|
<i class="bi bi-folder2-open text-primary me-2 mt-1"></i>
|
|
<div>
|
|
<strong>Mapstructuur</strong><br>
|
|
<code class="small">themes/Naam/theme.json</code>
|
|
<small class="text-muted d-block">Elke thema-map moet een <code>theme.json</code> bevatten.</small>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<div class="d-flex align-items-start">
|
|
<i class="bi bi-file-earmark-code text-primary me-2 mt-1"></i>
|
|
<div>
|
|
<strong>Sjablonen (Twig)</strong><br>
|
|
<code class="small">base.twig + *.twig</code>
|
|
<small class="text-muted d-block">Layout-sjablonen die via <code>config.default_template</code> en <code>template</code> worden gekozen.</small>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<div class="d-flex align-items-start">
|
|
<i class="bi bi-palette text-primary me-2 mt-1"></i>
|
|
<div>
|
|
<strong>Styling & voorbeeld</strong><br>
|
|
<code class="small">css/theme.scss + theme.png</code>
|
|
<small class="text-muted d-block">Kleuren/hoogtes in SCSS, een <code>theme.png</code> voorbeeld voor de selectie.</small>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row g-4">
|
|
<?php foreach ($themes as $themeName => $themeData): ?>
|
|
<?php $isActive = $themeName === $activeTheme; ?>
|
|
<div class="col-md-4">
|
|
<div class="card shadow-sm h-100 theme-card">
|
|
<div class="card-body text-center">
|
|
<div class="mb-2">
|
|
<?php $preview = '/themes/' . htmlspecialchars($themeName) . '/theme.png'; ?>
|
|
<img src="<?= $preview ?>" alt="Voorbeeld thema <?= htmlspecialchars($themeData['title'] ?? $themeData['name'] ?? $themeName) ?>" class="img-fluid rounded theme-preview">
|
|
</div>
|
|
<h5 class="card-title mb-0">
|
|
<?= htmlspecialchars($themeData['title'] ?? $themeData['name'] ?? $themeName) ?>
|
|
</h5>
|
|
<?php if ($isActive): ?>
|
|
<span class="badge bg-success mt-1">Actief</span>
|
|
<?php endif; ?>
|
|
</div>
|
|
<div class="card-footer text-center py-2">
|
|
<?php if ($isActive): ?>
|
|
<span class="text-muted small">Dit thema is actief</span>
|
|
<?php else: ?>
|
|
<form method="POST" action="/admin/theme" class="d-inline">
|
|
<input type="hidden" name="csrf_token" value="<?= $csrf ?>">
|
|
<input type="hidden" name="action" value="activate">
|
|
<input type="hidden" name="theme" value="<?= htmlspecialchars($themeName) ?>">
|
|
<button type="submit" class="btn btn-sm btn-outline-success" title="Activeren">
|
|
<i class="bi bi-check-circle"></i> Activeren
|
|
</button>
|
|
</form>
|
|
<?php if ($themeName !== 'default'): ?>
|
|
<form method="POST" action="/admin/theme-delete?theme=<?= urlencode($themeName) ?>" class="d-inline" onsubmit="return confirm('Weet je zeker dat je thema '<?= htmlspecialchars($themeData['title'] ?? $themeName) ?>' wilt verwijderen? Alle bestanden worden permanent verwijderd.')">
|
|
<input type="hidden" name="csrf_token" value="<?= $csrf ?>">
|
|
<button type="submit" class="btn btn-sm btn-outline-danger" title="Verwijderen">
|
|
<i class="bi bi-trash"></i>
|
|
</button>
|
|
</form>
|
|
<?php endif; ?>
|
|
<?php endif; ?>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<?php endforeach; ?>
|
|
</div>
|
|
|
|
<style>
|
|
.theme-card {
|
|
transition: box-shadow 0.2s ease, transform 0.2s ease;
|
|
overflow: hidden;
|
|
}
|
|
.theme-card:hover {
|
|
box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.15);
|
|
transform: translateY(-2px);
|
|
}
|
|
.theme-preview {
|
|
border: 1px solid #dee2e6;
|
|
background: #ffffff;
|
|
}
|
|
</style>
|