134 lines
5.3 KiB
PHP
134 lines
5.3 KiB
PHP
<?php
|
|
/**
|
|
* Theme switcher template
|
|
*
|
|
* Displays available themes and allows the user to switch between them.
|
|
*
|
|
* @var array $themes List of available themes with their data
|
|
* - name: Display name
|
|
* - screenshotUrl: URL to the screenshot (or null if not available)
|
|
* - isActive: Whether this is the current theme
|
|
*/
|
|
?>
|
|
<?php
|
|
$activeThemeName = 'Default';
|
|
foreach ($themes as $themeData) {
|
|
if (!empty($themeData['isActive'])) {
|
|
$activeThemeName = $themeData['name'];
|
|
break;
|
|
}
|
|
}
|
|
$totalThemes = count($themes);
|
|
?>
|
|
|
|
<section class="tm-directory tm-theme-directory">
|
|
<div class="tm-hero-card tm-hero-card--stacked">
|
|
<div class="tm-hero-head">
|
|
<div class="tm-hero-body">
|
|
<div class="tm-hero-heading">
|
|
<h1 class="tm-hero-title">Themes</h1>
|
|
<p class="tm-hero-subtitle">Personalize <?= htmlspecialchars($config['site_name']); ?> with custom visual styles.</p>
|
|
</div>
|
|
<div class="tm-hero-meta">
|
|
<span class="tm-hero-pill pill-neutral">
|
|
<i class="fas fa-layer-group"></i>
|
|
<?= $totalThemes ?> available
|
|
</span>
|
|
<span class="tm-hero-pill pill-primary">
|
|
<i class="fas fa-check-circle"></i>
|
|
Active: <?= htmlspecialchars($activeThemeName) ?>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="tm-theme-gallery">
|
|
<div class="tm-theme-grid">
|
|
<?php foreach ($themes as $themeId => $theme):
|
|
$isActive = !empty($theme['isActive']);
|
|
$screenshot = $theme['screenshotUrl'];
|
|
?>
|
|
<article class="tm-theme-card<?= $isActive ? ' is-active' : '' ?>">
|
|
<div class="tm-theme-preview" style="<?= $screenshot ? 'background-image: url(' . htmlspecialchars($screenshot) . ')' : '' ?>">
|
|
<?php if (!$screenshot): ?>
|
|
<span>No preview available</span>
|
|
<?php endif; ?>
|
|
</div>
|
|
<div class="tm-theme-body">
|
|
<div class="tm-theme-heading">
|
|
<p class="tm-theme-id">ID: <code><?= htmlspecialchars($themeId) ?></code></p>
|
|
<h3 class="tm-theme-name"><?= htmlspecialchars($theme['name']) ?></h3>
|
|
</div>
|
|
<?php if (!empty($theme['description'])): ?>
|
|
<p class="tm-theme-description">
|
|
<?= htmlspecialchars($theme['description']) ?>
|
|
</p>
|
|
<?php endif; ?>
|
|
<dl class="tm-theme-meta">
|
|
<?php if (!empty($theme['version'])): ?>
|
|
<div class="tm-theme-meta-item">
|
|
<dt>Version</dt>
|
|
<dd><?= htmlspecialchars($theme['version']) ?></dd>
|
|
</div>
|
|
<?php endif; ?>
|
|
<?php if (!empty($theme['author'])): ?>
|
|
<div class="tm-theme-meta-item">
|
|
<dt>Author</dt>
|
|
<dd><?= htmlspecialchars($theme['author']) ?></dd>
|
|
</div>
|
|
<?php endif; ?>
|
|
</dl>
|
|
<?php if (!empty($theme['tags'])): ?>
|
|
<ul class="tm-theme-tags">
|
|
<?php foreach ($theme['tags'] as $tag): $tagLabel = trim((string)$tag); if ($tagLabel === '') { continue; } ?>
|
|
<li><?= htmlspecialchars($tagLabel) ?></li>
|
|
<?php endforeach; ?>
|
|
</ul>
|
|
<?php endif; ?>
|
|
<dl class="tm-theme-stats">
|
|
<?php if (!empty($theme['type'])): ?>
|
|
<div class="tm-theme-stat">
|
|
<dt>Type</dt>
|
|
<dd><?= htmlspecialchars($theme['type']) ?></dd>
|
|
</div>
|
|
<?php endif; ?>
|
|
<?php if (!empty($theme['file_count'])): ?>
|
|
<div class="tm-theme-stat">
|
|
<dt>Files</dt>
|
|
<dd><?= number_format((int)$theme['file_count']) ?></dd>
|
|
</div>
|
|
<?php endif; ?>
|
|
<?php if (!empty($theme['path'])): ?>
|
|
<div class="tm-theme-stat">
|
|
<dt>Location</dt>
|
|
<dd><code><?= htmlspecialchars($theme['path']) ?></code></dd>
|
|
</div>
|
|
<?php endif; ?>
|
|
<?php if (!empty($theme['last_modified'])):
|
|
$lastEdited = is_numeric($theme['last_modified']) ? date('M j, Y', (int)$theme['last_modified']) : $theme['last_modified'];
|
|
?>
|
|
<div class="tm-theme-stat">
|
|
<dt>Last edit</dt>
|
|
<dd><?= htmlspecialchars($lastEdited) ?></dd>
|
|
</div>
|
|
<?php endif; ?>
|
|
</dl>
|
|
<div class="tm-theme-actions">
|
|
<?php if ($isActive): ?>
|
|
<button class="btn btn-outline-secondary" disabled>
|
|
<i class="fas fa-check"></i> Active
|
|
</button>
|
|
<?php else: ?>
|
|
<a class="btn btn-primary" href="?page=theme&switch_to=<?= urlencode($themeId) ?>&csrf_token=<?= $csrf_token ?>">
|
|
<i class="fas fa-paint-brush"></i> Apply
|
|
</a>
|
|
<?php endif; ?>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
<?php endforeach; ?>
|
|
</div>
|
|
</div>
|
|
</section>
|