mirror of
https://github.com/php-flasher/php-flasher.git
synced 2026-03-31 15:07:47 +01:00
Younes ENNAJI
73 lines
3.8 KiB
Twig
73 lines
3.8 KiB
Twig
{% extends 'base.html.twig' %}
|
|
|
|
{% block title %}Themes{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="mb-8">
|
|
<h1 class="section-title">Theme Gallery</h1>
|
|
<p class="section-subtitle">Choose from 17+ beautiful themes to match your application's design.</p>
|
|
</div>
|
|
|
|
{# Theme Grid #}
|
|
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4 mb-12">
|
|
{% set themes = [
|
|
{name: 'flasher', label: 'Flasher', desc: 'Default theme', gradient: 'from-indigo-500 to-indigo-600'},
|
|
{name: 'material', label: 'Material', desc: 'Google Material', gradient: 'from-blue-500 to-blue-600'},
|
|
{name: 'ios', label: 'iOS', desc: 'Apple style', gradient: 'from-slate-600 to-slate-700'},
|
|
{name: 'slack', label: 'Slack', desc: 'Slack messaging', gradient: 'from-purple-500 to-purple-600'},
|
|
{name: 'amazon', label: 'Amazon', desc: 'Amazon alerts', gradient: 'from-orange-500 to-orange-600'},
|
|
{name: 'google', label: 'Google', desc: 'Google notifications', gradient: 'from-red-500 to-yellow-500'},
|
|
{name: 'facebook', label: 'Facebook', desc: 'Facebook style', gradient: 'from-blue-600 to-blue-700'},
|
|
{name: 'minimal', label: 'Minimal', desc: 'Ultra clean', gradient: 'from-gray-400 to-gray-500'},
|
|
{name: 'neon', label: 'Neon', desc: 'Bright & bold', gradient: 'from-pink-500 to-rose-500'},
|
|
{name: 'emerald', label: 'Emerald', desc: 'Green palette', gradient: 'from-emerald-500 to-green-600'},
|
|
{name: 'sapphire', label: 'Sapphire', desc: 'Blue elegance', gradient: 'from-blue-500 to-indigo-600'},
|
|
{name: 'ruby', label: 'Ruby', desc: 'Red accents', gradient: 'from-red-500 to-rose-600'},
|
|
{name: 'amber', label: 'Amber', desc: 'Warm tones', gradient: 'from-amber-400 to-orange-500'},
|
|
{name: 'jade', label: 'Jade', desc: 'Soft green', gradient: 'from-teal-500 to-green-600'},
|
|
{name: 'onyx', label: 'Onyx', desc: 'Dark mode', gradient: 'from-slate-700 to-slate-900'},
|
|
{name: 'crystal', label: 'Crystal', desc: 'Transparent', gradient: 'from-cyan-400 to-blue-500'},
|
|
{name: 'aurora', label: 'Aurora', desc: 'Gradient effects', gradient: 'from-green-400 via-blue-500 to-purple-500'}
|
|
] %}
|
|
|
|
{% for theme in themes %}
|
|
<div class="card group cursor-pointer" onclick="showNotification({type: 'success', message: 'This is the {{ theme.label }} theme!', title: '{{ theme.label }} Theme', theme: '{{ theme.name }}'})">
|
|
<div class="h-20 bg-gradient-to-br {{ theme.gradient }} flex items-center justify-center">
|
|
<span class="text-white text-2xl font-bold">{{ theme.label|slice(0, 1) }}</span>
|
|
</div>
|
|
<div class="p-4">
|
|
<h3 class="font-semibold text-gray-800">{{ theme.label }}</h3>
|
|
<p class="text-sm text-gray-500">{{ theme.desc }}</p>
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
|
|
{# Usage Example #}
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h2 class="text-xl font-bold text-gray-800">Using Themes</h2>
|
|
</div>
|
|
<div class="card-body">
|
|
<p class="text-gray-600 mb-4">Apply themes to your notifications with the <code class="bg-gray-100 px-2 py-1 rounded">use()</code> method.</p>
|
|
|
|
<div class="code-block">
|
|
<div class="code-header">
|
|
<span>PHP</span>
|
|
</div>
|
|
<pre class="!m-0"><code class="language-php">// Use a specific theme
|
|
flash()->use('theme.material')->success('Material design notification!');
|
|
|
|
// Different themes for different messages
|
|
flash()->use('theme.ios')->info('iOS style notification');
|
|
flash()->use('theme.slack')->warning('Slack style warning');
|
|
flash()->use('theme.amazon')->success('Amazon style success');
|
|
|
|
// Set default theme in config/packages/flasher.yaml
|
|
flasher:
|
|
default: theme.material</code></pre>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endblock %}
|