leviathonbeast/php-flasher
1
0
Fork 0
mirror of https://github.com/php-flasher/php-flasher.git synced 2026-03-31 15:07:47 +01:00
Code Issues Packages Projects Releases Wiki Activity

docs: move Try All Themes section to top of themes page

Browse Source
This commit is contained in:
Younes ENNAJI
2026-03-01 22:17:40 +00:00
parent 33ac9013d5
commit fd65254d63
1 changed files with 28 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/pages/themes/index.html
+28 -28
View File
@@ -5,6 +5,34 @@ description: Explore 26 beautiful notification themes for PHPFlasher. From minim
--- ---
<div class="container max-w-7xl mx-auto px-4 lg:px-6 py-4"> <div class="container max-w-7xl mx-auto px-4 lg:px-6 py-4">
<!-- Try All Themes Section -->
<section class="bg-white rounded-2xl border border-slate-200 p-8 mb-8">
<div class="text-center mb-6">
<h2 class="text-2xl font-bold text-slate-800 mb-2">Try All Themes</h2>
<p class="text-slate-600">Click any button to see the theme in action</p>
</div>
<div class="flex flex-wrap justify-center gap-2" id="theme-demo-buttons">
<button onclick="demoTheme('flasher')" class="px-4 py-2 bg-indigo-100 hover:bg-indigo-200 text-indigo-700 rounded-lg text-sm font-medium transition-colors">Flasher</button>
<button onclick="demoTheme('material')" class="px-4 py-2 bg-blue-100 hover:bg-blue-200 text-blue-700 rounded-lg text-sm font-medium transition-colors">Material</button>
<button onclick="demoTheme('ios')" class="px-4 py-2 bg-slate-100 hover:bg-slate-200 text-slate-700 rounded-lg text-sm font-medium transition-colors">iOS</button>
<button onclick="demoTheme('slack')" class="px-4 py-2 bg-purple-100 hover:bg-purple-200 text-purple-700 rounded-lg text-sm font-medium transition-colors">Slack</button>
<button onclick="demoTheme('amazon')" class="px-4 py-2 bg-orange-100 hover:bg-orange-200 text-orange-700 rounded-lg text-sm font-medium transition-colors">Amazon</button>
<button onclick="demoTheme('facebook')" class="px-4 py-2 bg-blue-100 hover:bg-blue-200 text-blue-700 rounded-lg text-sm font-medium transition-colors">Facebook</button>
<button onclick="demoTheme('google')" class="px-4 py-2 bg-red-100 hover:bg-red-200 text-red-700 rounded-lg text-sm font-medium transition-colors">Google</button>
<button onclick="demoTheme('minimal')" class="px-4 py-2 bg-slate-100 hover:bg-slate-200 text-slate-700 rounded-lg text-sm font-medium transition-colors">Minimal</button>
<button onclick="demoTheme('neon')" class="px-4 py-2 bg-pink-100 hover:bg-pink-200 text-pink-700 rounded-lg text-sm font-medium transition-colors">Neon</button>
<button onclick="demoTheme('ruby')" class="px-4 py-2 bg-red-100 hover:bg-red-200 text-red-700 rounded-lg text-sm font-medium transition-colors">Ruby</button>
<button onclick="demoTheme('sapphire')" class="px-4 py-2 bg-blue-100 hover:bg-blue-200 text-blue-700 rounded-lg text-sm font-medium transition-colors">Sapphire</button>
<button onclick="demoTheme('emerald')" class="px-4 py-2 bg-emerald-100 hover:bg-emerald-200 text-emerald-700 rounded-lg text-sm font-medium transition-colors">Emerald</button>
<button onclick="demoTheme('jade')" class="px-4 py-2 bg-teal-100 hover:bg-teal-200 text-teal-700 rounded-lg text-sm font-medium transition-colors">Jade</button>
<button onclick="demoTheme('amber')" class="px-4 py-2 bg-amber-100 hover:bg-amber-200 text-amber-700 rounded-lg text-sm font-medium transition-colors">Amber</button>
<button onclick="demoTheme('onyx')" class="px-4 py-2 bg-slate-700 hover:bg-slate-800 text-white rounded-lg text-sm font-medium transition-colors">Onyx</button>
<button onclick="demoTheme('crystal')" class="px-4 py-2 bg-cyan-100 hover:bg-cyan-200 text-cyan-700 rounded-lg text-sm font-medium transition-colors">Crystal</button>
<button onclick="demoTheme('aurora')" class="px-4 py-2 bg-gradient-to-r from-green-100 to-purple-100 hover:from-green-200 hover:to-purple-200 text-purple-700 rounded-lg text-sm font-medium transition-colors">Aurora</button>
</div>
</section>
<!-- Theme Categories --> <!-- Theme Categories -->
<section id="themes"> <section id="themes">
<!-- Brand-Inspired Themes --> <!-- Brand-Inspired Themes -->
@@ -292,34 +320,6 @@ description: Explore 26 beautiful notification themes for PHPFlasher. From minim
</div> </div>
</section> </section>
<!-- Try All Themes Section -->
<section class="bg-white rounded-2xl border border-slate-200 p-8 mb-12">
<div class="text-center mb-8">
<h2 class="text-2xl font-bold text-slate-800 mb-2">Try All Themes</h2>
<p class="text-slate-600">Click any button to see the theme in action</p>
</div>
<div class="flex flex-wrap justify-center gap-2" id="theme-demo-buttons">
<button onclick="demoTheme('flasher')" class="px-4 py-2 bg-indigo-100 hover:bg-indigo-200 text-indigo-700 rounded-lg text-sm font-medium transition-colors">Flasher</button>
<button onclick="demoTheme('material')" class="px-4 py-2 bg-blue-100 hover:bg-blue-200 text-blue-700 rounded-lg text-sm font-medium transition-colors">Material</button>
<button onclick="demoTheme('ios')" class="px-4 py-2 bg-slate-100 hover:bg-slate-200 text-slate-700 rounded-lg text-sm font-medium transition-colors">iOS</button>
<button onclick="demoTheme('slack')" class="px-4 py-2 bg-purple-100 hover:bg-purple-200 text-purple-700 rounded-lg text-sm font-medium transition-colors">Slack</button>
<button onclick="demoTheme('amazon')" class="px-4 py-2 bg-orange-100 hover:bg-orange-200 text-orange-700 rounded-lg text-sm font-medium transition-colors">Amazon</button>
<button onclick="demoTheme('facebook')" class="px-4 py-2 bg-blue-100 hover:bg-blue-200 text-blue-700 rounded-lg text-sm font-medium transition-colors">Facebook</button>
<button onclick="demoTheme('google')" class="px-4 py-2 bg-red-100 hover:bg-red-200 text-red-700 rounded-lg text-sm font-medium transition-colors">Google</button>
<button onclick="demoTheme('minimal')" class="px-4 py-2 bg-slate-100 hover:bg-slate-200 text-slate-700 rounded-lg text-sm font-medium transition-colors">Minimal</button>
<button onclick="demoTheme('neon')" class="px-4 py-2 bg-pink-100 hover:bg-pink-200 text-pink-700 rounded-lg text-sm font-medium transition-colors">Neon</button>
<button onclick="demoTheme('ruby')" class="px-4 py-2 bg-red-100 hover:bg-red-200 text-red-700 rounded-lg text-sm font-medium transition-colors">Ruby</button>
<button onclick="demoTheme('sapphire')" class="px-4 py-2 bg-blue-100 hover:bg-blue-200 text-blue-700 rounded-lg text-sm font-medium transition-colors">Sapphire</button>
<button onclick="demoTheme('emerald')" class="px-4 py-2 bg-emerald-100 hover:bg-emerald-200 text-emerald-700 rounded-lg text-sm font-medium transition-colors">Emerald</button>
<button onclick="demoTheme('jade')" class="px-4 py-2 bg-teal-100 hover:bg-teal-200 text-teal-700 rounded-lg text-sm font-medium transition-colors">Jade</button>
<button onclick="demoTheme('amber')" class="px-4 py-2 bg-amber-100 hover:bg-amber-200 text-amber-700 rounded-lg text-sm font-medium transition-colors">Amber</button>
<button onclick="demoTheme('onyx')" class="px-4 py-2 bg-slate-700 hover:bg-slate-800 text-white rounded-lg text-sm font-medium transition-colors">Onyx</button>
<button onclick="demoTheme('crystal')" class="px-4 py-2 bg-cyan-100 hover:bg-cyan-200 text-cyan-700 rounded-lg text-sm font-medium transition-colors">Crystal</button>
<button onclick="demoTheme('aurora')" class="px-4 py-2 bg-gradient-to-r from-green-100 to-purple-100 hover:from-green-200 hover:to-purple-200 text-purple-700 rounded-lg text-sm font-medium transition-colors">Aurora</button>
</div>
</section>
<!-- Usage Section --> <!-- Usage Section -->
<section class="bg-slate-50 rounded-2xl p-8 mb-12"> <section class="bg-slate-50 rounded-2xl p-8 mb-12">
<div class="max-w-3xl mx-auto"> <div class="max-w-3xl mx-auto">