Files
CodePress/admin/templates/pages/theme.php
T
E.Noorlander 6333bc410f CMS 2.0 - Theme engine, logging, admin improvements
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
2026-08-08 18:02:14 +02:00

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 &#39;<?= htmlspecialchars($themeData['title'] ?? $themeName) ?>&#39; 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>