64 lines
3.0 KiB
HTML
64 lines
3.0 KiB
HTML
@include(snippets/header)
|
|
<div class="pagewrapper">
|
|
<div id="main">
|
|
<div class="meme-layout-wrapper">
|
|
<link rel="stylesheet" href="/s/css/meme-creator.css">
|
|
<div class="meme-select-container">
|
|
<h1 class="meme-title">{{ t('meme.select_title') }}</h1>
|
|
<p class="meme-subtitle">{{ t('meme.select_subtitle') }}</p>
|
|
|
|
<div class="category-filter-bar">
|
|
@each(categories as cat)
|
|
<button class="category-chip @if(cat == 'All') active @endif" data-category="{!! cat !!}">{!! cat !!}</button>
|
|
@endeach
|
|
</div>
|
|
|
|
<div class="template-grid">
|
|
<a href="/meme/custom" class="template-item custom-template-card" data-category="All">
|
|
<div class="template-image-wrapper" style="background: var(--nav-bg, #2b2b2b); border-bottom: 1px solid rgba(255,255,255,0.05);">
|
|
<i class="fa fa-upload" style="font-size: 3.5rem; color: var(--accent, #9f0);"></i>
|
|
</div>
|
|
<div class="template-info">
|
|
<span class="template-name">{{ t('meme.custom_template_title') }}</span>
|
|
<span class="template-category-tag">{{ t('meme.custom_template_tag') }}</span>
|
|
</div>
|
|
</a>
|
|
@each(templates as template)
|
|
<a href="/meme/{{ template.id }}" class="template-item" data-category="{!! template.category || 'General' !!}">
|
|
<div class="template-image-wrapper">
|
|
<img src="{{ template.url }}" alt="{!! template.name !!}" loading="lazy">
|
|
</div>
|
|
<div class="template-info">
|
|
<span class="template-name">{!! template.name !!}</span>
|
|
<span class="template-category-tag">{!! template.category || 'General' !!}</span>
|
|
</div>
|
|
</a>
|
|
@endeach
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
document.querySelectorAll('.category-chip').forEach(chip => {
|
|
chip.addEventListener('click', () => {
|
|
const category = chip.getAttribute('data-category');
|
|
|
|
// Update active chip
|
|
document.querySelectorAll('.category-chip').forEach(c => c.classList.remove('active'));
|
|
chip.classList.add('active');
|
|
|
|
// Filter grid
|
|
document.querySelectorAll('.template-item').forEach(item => {
|
|
if (category === 'All' || item.getAttribute('data-category') === category) {
|
|
item.style.display = 'flex';
|
|
} else {
|
|
item.style.display = 'none';
|
|
}
|
|
});
|
|
});
|
|
});
|
|
</script>
|
|
</div>
|
|
</div>
|
|
@include(snippets/footer)
|