mirror of
https://github.com/php-flasher/php-flasher.git
synced 2026-03-31 15:07:47 +01:00
Younes ENNAJI
@@ -1,5 +1,5 @@
|
||||
{
|
||||
"dist/main.css": "/dist/main.aba03d4f.css",
|
||||
"dist/main.css": "/dist/main.def4cf18.css",
|
||||
"dist/main.js": "/dist/main.c89a204f.js",
|
||||
"dist/455.3a7b4474.css": "/dist/455.3a7b4474.css",
|
||||
"dist/455.17bc016b.js": "/dist/455.17bc016b.js",
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
+593
-3
@@ -2,15 +2,605 @@
|
||||
<html lang="en" class="scroll-smooth">
|
||||
<head>
|
||||
{% include head.html %}
|
||||
|
||||
<link rel="stylesheet" href="/static/css/home.css">
|
||||
</head>
|
||||
<body class="min-h-screen bg-slate-50 text-slate-800 font-sans leading-relaxed" data-controller="anchor clipboard navigation tryit {{ page.data-controller }}">
|
||||
<body class="min-h-screen bg-slate-50 text-slate-800 font-sans leading-relaxed" data-controller="anchor clipboard navigation tryit">
|
||||
{% include size-helper.html %}
|
||||
{% include banner.html %}
|
||||
{% include header.html %}
|
||||
|
||||
<div class="container max-w-7xl mx-auto px-4 lg:px-6 py-4">
|
||||
<!-- Home page content doesn't need sidebar -->
|
||||
{{ content }}
|
||||
<!-- Hero Section with Animated Bell in SVG -->
|
||||
<section class="relative overflow-hidden bg-gradient-to-b from-indigo-50 to-white pt-16 pb-12 rounded-3xl mb-16 shadow-sm">
|
||||
<div class="absolute inset-0 overflow-hidden">
|
||||
<div class="absolute left-0 top-0 w-1/3 h-1/3 bg-gradient-to-br from-purple-100 to-transparent opacity-60 blur-3xl"></div>
|
||||
<div class="absolute right-0 bottom-0 w-1/3 h-1/3 bg-gradient-to-tl from-indigo-100 to-transparent opacity-60 blur-3xl"></div>
|
||||
</div>
|
||||
|
||||
<div class="relative z-10 container mx-auto px-4">
|
||||
<div class="text-center">
|
||||
<div class="flex justify-center mb-8 animate-fade-in">
|
||||
<div class="relative inline-block">
|
||||
<svg version="1.0" xmlns="http://www.w3.org/2000/svg" width="320" height="50" viewBox="0 0 5082 781" preserveAspectRatio="xMidYMid meet" class="mx-auto">
|
||||
<g transform="translate(0.000000,781.000000) scale(0.100000,-0.100000)" fill="#FFFFFF" stroke="none">
|
||||
<!-- Bell path with animation class -->
|
||||
<path id="bell-icon" class="animate-bell" fill="#4052B5" d="M45570 7540 c-283 -43 -490 -282 -490 -565 0 -200 118 -404 284 -491 31 -16 55 -32 53 -35 -1 -4 -39 -34 -85 -68 -439 -325 -739 -810 -843 -1365 -27 -142 -37 -465 -19 -617 31 -272 65 -381 300 -954 259 -633 265 -653 265 -955 0 -149 -4 -215 -18 -280 -32 -153 -79 -282 -161 -440 -44 -85 -95 -184 -113 -220 -101 -198 -102 -473 -3 -671 115 -230 303 -375 550 -425 98 -19 249 -15 343 10 31 9 363 142 738 296 374 154 683 280 687 280 4 0 16 -30 26 -66 43 -151 158 -332 273 -432 263 -226 594 -301 920 -206 153 44 272 114 392 228 93 90 150 169 205 287 68 144 90 246 89 409 -1 162 -28 283 -96 422 l-42 88 45 19 c25 10 326 135 670 276 344 141 657 273 695 293 102 53 247 200 302 307 60 117 84 203 90 325 13 240 -73 452 -250 616 -94 88 -205 147 -372 198 -66 21 -151 49 -190 63 -322 119 -616 373 -784 677 -27 50 -136 300 -241 554 -206 500 -223 539 -308 676 -338 546 -876 904 -1521 1013 -145 25 -513 24 -653 0 -137 -24 -128 -29 -105 56 32 125 13 277 -51 402 -102 201 -356 329 -582 295z"/>
|
||||
<path fill="#2D264B" d="M19237 6013 c-4 -3 -7 -1252 -7 -2775 l0 -2768 640 0 640 0 0 2775 0 2775 -633 0 c-349 0 -637 -3 -640 -7z"/>
|
||||
<path fill="#2D264B" d="M30710 3245 l0 -2775 640 0 640 0 0 1188 c0 1271 1 1296 51 1444 43 129 97 218 188 308 131 131 259 188 464 210 75 8 131 8 199 1 345 -39 574 -235 670 -576 l23 -80 3 -1247 3 -1248 640 0 640 0 -4 1348 c-3 1322 -3 1349 -25 1479 -84 520 -288 873 -657 1138 -428 307 -1127 349 -1655 99 -185 -88 -377 -237 -503 -394 l-37 -45 0 963 0 962 -640 0 -640 0 0 -2775z"/>
|
||||
<path fill="#4052B5" d="M300 3100 l0 -2630 635 0 635 0 0 944 0 944 538 5 c576 5 639 9 881 63 482 108 880 386 1100 769 100 174 176 412 201 627 18 149 8 429 -20 578 -79 425 -298 769 -636 996 -234 156 -489 250 -832 306 -135 22 -154 22 -1319 25 l-1183 4 0 -2631z m2239 1571 c223 -58 362 -183 427 -385 22 -66 27 -106 31 -216 6 -166 -10 -251 -68 -368 -71 -145 -189 -239 -369 -293 -72 -22 -92 -23 -532 -27 l-458 -3 0 654 c0 359 3 657 7 661 4 4 204 6 443 3 408 -3 440 -5 519 -26z"/>
|
||||
<path fill="#4052B5" d="M4970 3100 l0 -2630 640 0 640 0 0 1085 0 1085 1000 0 1000 0 0 -1085 0 -1085 640 0 640 0 0 2630 0 2630 -640 0 -640 0 0 -1030 0 -1030 -1000 0 -1000 0 0 1030 0 1030 -640 0 -640 0 0 -2630z"/>
|
||||
<path fill="#4052B5" d="M10460 3100 l0 -2630 635 0 635 0 0 944 0 944 538 5 c576 5 639 9 881 63 343 77 630 232 866 469 132 131 199 224 275 380 127 258 177 510 167 834 -8 275 -54 479 -158 700 -141 299 -362 524 -680 690 -181 95 -394 160 -657 203 -135 22 -154 22 -1319 25 l-1183 4 0 -2631z m2239 1571 c115 -30 199 -72 267 -134 126 -114 183 -252 191 -457 15 -357 -130 -578 -437 -671 -72 -22 -92 -23 -532 -27 l-458 -3 0 654 c0 359 3 657 7 661 4 4 204 6 443 3 408 -3 440 -5 519 -26z"/>
|
||||
<path fill="#2D264B" d="M15130 3100 l0 -2630 640 0 640 0 0 1065 0 1065 805 0 805 0 0 495 0 495 -802 2 -803 3 0 555 0 555 1073 3 1072 2 0 510 0 510 -1715 0 -1715 0 0 -2630z"/>
|
||||
<path fill="#2D264B" d="M22776 4695 c-704 -100 -1262 -603 -1481 -1335 -112 -373 -137 -881 -65 -1300 101 -589 393 -1067 829 -1361 433 -292 1009 -369 1511 -203 273 91 532 273 692 487 l58 79 0 -296 0 -296 640 0 640 0 0 2090 0 2090 -640 0 -640 0 -2 -291 -3 -291 -43 61 c-128 182 -349 356 -578 456 -95 41 -223 79 -341 101 -122 22 -447 28 -577 9z m854 -1126 c156 -39 317 -138 441 -274 176 -192 259 -459 246 -790 -12 -304 -95 -519 -270 -702 -135 -140 -281 -223 -456 -258 -128 -26 -337 -17 -451 20 -236 76 -406 216 -520 428 -80 147 -118 301 -127 512 -19 439 134 771 446 963 93 57 239 109 344 122 97 12 254 2 347 -21z"/>
|
||||
<path fill="#2D264B" d="M27855 4699 c-696 -66 -1217 -427 -1369 -950 -36 -124 -50 -261 -42 -408 14 -287 94 -485 266 -661 242 -247 448 -339 1170 -520 456 -115 702 -208 774 -292 122 -142 63 -361 -120 -452 -85 -42 -175 -59 -319 -59 -100 1 -148 6 -208 22 -221 59 -386 215 -428 404 l-12 57 -629 0 -628 0 0 -36 c0 -57 37 -225 71 -321 72 -203 168 -353 334 -518 292 -293 685 -471 1185 -537 124 -16 538 -16 655 0 313 44 578 131 790 262 280 172 467 418 546 717 26 99 36 322 20 446 -41 309 -186 542 -467 753 -171 127 -521 256 -1079 395 -486 122 -635 188 -702 311 -26 48 -25 198 2 253 66 134 232 201 475 192 192 -7 316 -55 430 -167 71 -69 120 -161 144 -272 l6 -28 591 0 591 0 -7 53 c-22 167 -85 377 -155 517 -100 198 -285 414 -467 543 -225 160 -528 263 -867 296 -126 13 -419 12 -551 0z"/>
|
||||
<path fill="#2D264B" d="M37390 4704 c-340 -40 -571 -103 -813 -225 -298 -150 -537 -361 -724 -639 -204 -305 -321 -686 -342 -1122 -28 -570 90 -1048 357 -1443 192 -285 415 -480 727 -635 228 -113 428 -173 705 -211 144 -20 518 -17 660 4 478 74 859 262 1161 574 164 169 302 371 382 559 38 89 97 259 97 281 0 11 -121 13 -679 13 l-680 0 -38 -72 c-77 -146 -231 -265 -399 -308 -322 -83 -667 18 -843 247 -92 119 -157 290 -177 462 l-7 61 1451 0 1450 0 9 78 c13 120 10 515 -5 627 -69 522 -310 986 -667 1284 -286 238 -615 382 -1020 447 -95 15 -521 28 -605 18z m423 -1040 c221 -46 420 -194 508 -378 39 -81 69 -202 69 -277 l0 -39 -800 0 c-770 0 -800 1 -800 18 0 47 45 186 89 277 115 236 326 380 610 415 82 11 234 3 324 -16z"/>
|
||||
<path fill="#2D264B" d="M42860 4693 c-173 -12 -381 -68 -536 -144 -215 -105 -440 -292 -590 -492 l-74 -98 0 346 0 345 -640 0 -640 0 0 -2090 0 -2090 640 0 640 0 0 1029 c0 884 2 1047 16 1153 9 67 20 128 25 134 5 6 10 20 12 32 2 12 6 25 10 28 4 4 7 15 7 24 0 9 18 52 40 96 101 198 323 325 640 364 46 5 191 10 322 10 l238 0 0 680 0 680 -32 -2 c-18 -1 -53 -3 -78 -5z"/>
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h1 class="text-3xl md:text-4xl font-bold text-slate-800 mb-4 tracking-tight">
|
||||
Beautiful Flash Notifications <span class="text-indigo-600">Made Simple</span>
|
||||
</h1>
|
||||
|
||||
<p class="text-lg text-slate-600 max-w-2xl mx-auto mb-8">
|
||||
Add elegant notifications to your Laravel or Symfony applications with just <span class="bg-indigo-50 text-indigo-700 px-2 py-1 rounded">one line of code</span>. Perfect for developers of all skill levels.
|
||||
</p>
|
||||
|
||||
<div class="flex flex-wrap gap-3 justify-center mb-8">
|
||||
<a href="#quick-start" class="px-5 py-3 bg-indigo-600 hover:bg-indigo-700 text-white font-medium rounded-lg transition-colors duration-200 shadow-md hover:shadow-lg flex items-center">
|
||||
<i class="fa-solid fa-rocket mr-2"></i> Get Started
|
||||
</a>
|
||||
<a href="https://github.com/php-flasher/php-flasher" class="px-5 py-3 bg-white hover:bg-slate-50 text-slate-700 font-medium rounded-lg border border-slate-200 transition-colors duration-200 flex items-center">
|
||||
<i class="fa-brands fa-github mr-2"></i> View on GitHub
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-wrap justify-center gap-3">
|
||||
<a href="https://www.linkedin.com/in/younes--ennaji/" class="text-slate-500 hover:text-indigo-700 transition-colors duration-200">
|
||||
<img src="https://img.shields.io/badge/author-@yoeunes-blue.svg" alt="Author Badge" class="transform hover:scale-105 transition-transform" />
|
||||
</a>
|
||||
<a href="https://github.com/php-flasher/php-flasher" class="text-slate-500 hover:text-indigo-700 transition-colors duration-200">
|
||||
<img src="https://img.shields.io/badge/source-php--flasher/php--flasher-blue.svg" alt="Source Code Badge" class="transform hover:scale-105 transition-transform" />
|
||||
</a>
|
||||
<a href="https://github.com/php-flasher/php-flasher/releases" class="text-slate-500 hover:text-indigo-700 transition-colors duration-200">
|
||||
<img src="https://img.shields.io/github/tag/php-flasher/flasher.svg" alt="GitHub Release Badge" class="transform hover:scale-105 transition-transform" />
|
||||
</a>
|
||||
<a href="https://github.com/php-flasher/flasher/blob/master/LICENSE" class="text-slate-500 hover:text-indigo-700 transition-colors duration-200">
|
||||
<img src="https://img.shields.io/badge/license-MIT-brightgreen.svg" alt="License Badge" class="transform hover:scale-105 transition-transform" />
|
||||
</a>
|
||||
<a href="https://packagist.org/packages/php-flasher/flasher" class="text-slate-500 hover:text-indigo-700 transition-colors duration-200">
|
||||
<img src="https://img.shields.io/packagist/dt/php-flasher/flasher.svg" alt="Packagist Downloads Badge" class="transform hover:scale-105 transition-transform" />
|
||||
</a>
|
||||
<a href="https://github.com/php-flasher/php-flasher" class="text-slate-500 hover:text-indigo-700 transition-colors duration-200">
|
||||
<img src="https://img.shields.io/github/stars/php-flasher/php-flasher.svg" alt="GitHub Stars Badge" class="transform hover:scale-105 transition-transform" />
|
||||
</a>
|
||||
<a href="https://packagist.org/packages/php-flasher/flasher" class="text-slate-500 hover:text-indigo-700 transition-colors duration-200">
|
||||
<img src="https://img.shields.io/packagist/php-v/php-flasher/flasher.svg" alt="Supported PHP Version Badge" class="transform hover:scale-105 transition-transform" />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{% include flasher-studio.html %}
|
||||
|
||||
<!-- Quick Start Section (Moved before Features) -->
|
||||
<section id="quick-start" class="container mx-auto px-4 mb-16">
|
||||
<div class="text-center mb-12">
|
||||
<div class="inline-block px-3 py-1 bg-indigo-50 text-indigo-700 rounded-full text-sm font-medium mb-2">Get Started</div>
|
||||
<h2 class="text-2xl md:text-3xl font-bold text-slate-800 mb-2">Quick Installation</h2>
|
||||
<p class="text-slate-600 max-w-2xl mx-auto">Get up and running in less than a minute</p>
|
||||
</div>
|
||||
|
||||
<div class="max-w-4xl mx-auto">
|
||||
<div class="bg-white rounded-xl shadow-md overflow-hidden border border-slate-100 mb-8">
|
||||
<div class="bg-slate-800 p-4 flex items-center justify-between">
|
||||
<div class="flex items-center">
|
||||
<div class="flex space-x-1 mr-4">
|
||||
<div class="w-3 h-3 rounded-full bg-red-400"></div>
|
||||
<div class="w-3 h-3 rounded-full bg-yellow-400"></div>
|
||||
<div class="w-3 h-3 rounded-full bg-green-400"></div>
|
||||
</div>
|
||||
<span class="text-slate-400 text-sm">Terminal</span>
|
||||
</div>
|
||||
<div class="text-slate-400 text-sm">Installation</div>
|
||||
</div>
|
||||
|
||||
<div class="p-6 bg-slate-900">
|
||||
<div class="flex flex-col gap-4">
|
||||
<div class="relative">
|
||||
<div class="flex items-center mb-2">
|
||||
<div class="w-5 h-5 bg-red-500 text-white rounded-full flex items-center justify-center mr-2 text-xs">
|
||||
<i class="fa-brands fa-laravel"></i>
|
||||
</div>
|
||||
<span class="text-slate-300 text-sm">Laravel Installation</span>
|
||||
</div>
|
||||
<pre class="bg-slate-800 p-4 rounded-lg text-sm overflow-x-auto"><code class="language-bash text-slate-200">composer require php-flasher/flasher-laravel</code></pre>
|
||||
<button class="absolute top-12 right-3 text-slate-400 hover:text-slate-200 transition-colors"
|
||||
onclick="navigator.clipboard.writeText('composer require php-flasher/flasher-laravel')">
|
||||
<i class="fa-regular fa-copy"></i>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="relative">
|
||||
<div class="flex items-center mb-2">
|
||||
<div class="w-5 h-5 bg-black text-white rounded-full flex items-center justify-center mr-2 text-xs">
|
||||
<i class="fa-brands fa-symfony"></i>
|
||||
</div>
|
||||
<span class="text-slate-300 text-sm">Symfony Installation</span>
|
||||
</div>
|
||||
<pre class="bg-slate-800 p-4 rounded-lg text-sm overflow-x-auto"><code class="language-bash text-slate-200">composer require php-flasher/flasher-symfony</code></pre>
|
||||
<button class="absolute top-12 right-3 text-slate-400 hover:text-slate-200 transition-colors"
|
||||
onclick="navigator.clipboard.writeText('composer require php-flasher/flasher-symfony')">
|
||||
<i class="fa-regular fa-copy"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<!-- Laravel Quick Start -->
|
||||
<a href="/laravel/" class="group bg-white rounded-xl shadow-sm hover:shadow-md transition-all duration-300 border border-slate-100 overflow-hidden hover:border-red-200">
|
||||
<div class="p-6">
|
||||
<div class="flex items-center mb-4">
|
||||
<div class="w-10 h-10 bg-red-50 text-red-500 rounded-lg flex items-center justify-center mr-3 group-hover:bg-red-100 transition-colors">
|
||||
<i class="fa-brands fa-laravel text-lg"></i>
|
||||
</div>
|
||||
<h3 class="text-lg font-semibold text-slate-800">Laravel Guide</h3>
|
||||
</div>
|
||||
<p class="text-slate-600 mb-4">Perfect integration with Laravel's notification system. Get started in minutes.</p>
|
||||
<div class="flex items-center text-red-600 font-medium">
|
||||
Learn more
|
||||
<i class="fa-solid fa-arrow-right ml-1 transform group-hover:translate-x-1 transition-transform"></i>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<!-- Symfony Quick Start -->
|
||||
<a href="/symfony/" class="group bg-white rounded-xl shadow-sm hover:shadow-md transition-all duration-300 border border-slate-100 overflow-hidden hover:border-slate-300">
|
||||
<div class="p-6">
|
||||
<div class="flex items-center mb-4">
|
||||
<div class="w-10 h-10 bg-slate-50 text-black rounded-lg flex items-center justify-center mr-3 group-hover:bg-slate-100 transition-colors">
|
||||
<i class="fa-brands fa-symfony text-lg"></i>
|
||||
</div>
|
||||
<h3 class="text-lg font-semibold text-slate-800">Symfony Guide</h3>
|
||||
</div>
|
||||
<p class="text-slate-600 mb-4">Complete Symfony integration with bundle configuration and services.</p>
|
||||
<div class="flex items-center text-slate-700 font-medium">
|
||||
Learn more
|
||||
<i class="fa-solid fa-arrow-right ml-1 transform group-hover:translate-x-1 transition-transform"></i>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 mt-6">
|
||||
<!-- Livewire Quick Start -->
|
||||
<a href="/livewire/" class="group bg-white rounded-xl shadow-sm hover:shadow-md transition-all duration-300 border border-slate-100 overflow-hidden hover:border-purple-200">
|
||||
<div class="p-6">
|
||||
<div class="flex items-center mb-4">
|
||||
<div class="w-10 h-10 bg-purple-50 text-purple-600 rounded-lg flex items-center justify-center mr-3 group-hover:bg-purple-100 transition-colors">
|
||||
<i class="fa-solid fa-bolt text-lg"></i>
|
||||
</div>
|
||||
<h3 class="text-lg font-semibold text-slate-800">Livewire Guide</h3>
|
||||
</div>
|
||||
<p class="text-slate-600 mb-4">Real-time notifications in your Laravel Livewire components.</p>
|
||||
<div class="flex items-center text-purple-600 font-medium">
|
||||
Learn more
|
||||
<i class="fa-solid fa-arrow-right ml-1 transform group-hover:translate-x-1 transition-transform"></i>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<!-- Inertia Quick Start -->
|
||||
<a href="/inertia/" class="group bg-white rounded-xl shadow-sm hover:shadow-md transition-all duration-300 border border-slate-100 overflow-hidden hover:border-blue-200">
|
||||
<div class="p-6">
|
||||
<div class="flex items-center mb-4">
|
||||
<div class="w-10 h-10 bg-blue-50 text-blue-600 rounded-lg flex items-center justify-center mr-3 group-hover:bg-blue-100 transition-colors">
|
||||
<i class="fa-solid fa-arrows-rotate text-lg"></i>
|
||||
</div>
|
||||
<h3 class="text-lg font-semibold text-slate-800">Inertia Guide</h3>
|
||||
</div>
|
||||
<p class="text-slate-600 mb-4">Modern SPA notifications with Inertia.js integration.</p>
|
||||
<div class="flex items-center text-blue-600 font-medium">
|
||||
Learn more
|
||||
<i class="fa-solid fa-arrow-right ml-1 transform group-hover:translate-x-1 transition-transform"></i>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Features Section -->
|
||||
<section class="container mx-auto px-4 mb-16">
|
||||
<div class="text-center mb-12">
|
||||
<div class="inline-block px-3 py-1 bg-indigo-50 text-indigo-700 rounded-full text-sm font-medium mb-2">Features</div>
|
||||
<h2 class="text-2xl md:text-3xl font-bold text-slate-800 mb-2">Why Choose PHPFlasher?</h2>
|
||||
<p class="text-slate-600 max-w-2xl mx-auto">Everything you need to add beautiful notifications to your PHP applications</p>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 max-w-4xl mx-auto">
|
||||
<!-- Feature 1 -->
|
||||
<div class="bg-white rounded-xl shadow-sm hover:shadow-md transition-shadow duration-300 border border-slate-100 p-6 flex flex-col h-full">
|
||||
<div class="w-12 h-12 bg-indigo-50 rounded-lg flex items-center justify-center mb-4">
|
||||
<i class="fa-solid fa-wand-magic-sparkles text-indigo-600 text-xl"></i>
|
||||
</div>
|
||||
<h3 class="text-lg font-semibold text-slate-800 mb-2" id="easy-to-use">Easy to Use</h3>
|
||||
<ul class="space-y-2 text-slate-600 flex-grow">
|
||||
<li class="flex items-start">
|
||||
<i class="fa-solid fa-check text-green-500 mt-1 mr-2"></i>
|
||||
<span>Simple one-line code to show notifications</span>
|
||||
</li>
|
||||
<li class="flex items-start">
|
||||
<i class="fa-solid fa-check text-green-500 mt-1 mr-2"></i>
|
||||
<span>Works right out of the box</span>
|
||||
</li>
|
||||
<li class="flex items-start">
|
||||
<i class="fa-solid fa-check text-green-500 mt-1 mr-2"></i>
|
||||
<span>No complex configuration needed</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- Feature 2 -->
|
||||
<div class="bg-white rounded-xl shadow-sm hover:shadow-md transition-shadow duration-300 border border-slate-100 p-6 flex flex-col h-full">
|
||||
<div class="w-12 h-12 bg-purple-50 rounded-lg flex items-center justify-center mb-4">
|
||||
<i class="fa-solid fa-sliders text-purple-600 text-xl"></i>
|
||||
</div>
|
||||
<h3 class="text-lg font-semibold text-slate-800 mb-2" id="flexible">Flexible & Powerful</h3>
|
||||
<ul class="space-y-2 text-slate-600 flex-grow">
|
||||
<li class="flex items-start">
|
||||
<i class="fa-solid fa-check text-green-500 mt-1 mr-2"></i>
|
||||
<span><a href="/library/toastr/" class="text-indigo-600 hover:underline">Toastr.js</a> - Classic toast notifications</span>
|
||||
</li>
|
||||
<li class="flex items-start">
|
||||
<i class="fa-solid fa-check text-green-500 mt-1 mr-2"></i>
|
||||
<span><a href="/library/sweetalert/" class="text-indigo-600 hover:underline">SweetAlert 2</a> - Beautiful alert dialogs</span>
|
||||
</li>
|
||||
<li class="flex items-start">
|
||||
<i class="fa-solid fa-check text-green-500 mt-1 mr-2"></i>
|
||||
<span><a href="/library/noty/" class="text-indigo-600 hover:underline">Noty</a> - Highly customizable notifications</span>
|
||||
</li>
|
||||
<li class="flex items-start">
|
||||
<i class="fa-solid fa-check text-green-500 mt-1 mr-2"></i>
|
||||
<span><a href="/library/notyf/" class="text-indigo-600 hover:underline">Notyf</a> - Minimalist toast notifications</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- Feature 3 -->
|
||||
<div class="bg-white rounded-xl shadow-sm hover:shadow-md transition-shadow duration-300 border border-slate-100 p-6 flex flex-col h-full">
|
||||
<div class="w-12 h-12 bg-blue-50 rounded-lg flex items-center justify-center mb-4">
|
||||
<i class="fa-solid fa-code text-blue-600 text-xl"></i>
|
||||
</div>
|
||||
<h3 class="text-lg font-semibold text-slate-800 mb-2" id="integration">Framework Integration</h3>
|
||||
<ul class="space-y-2 text-slate-600 flex-grow">
|
||||
<li class="flex items-start">
|
||||
<i class="fa-brands fa-laravel text-red-500 mt-1 mr-2"></i>
|
||||
<span>Native Laravel integration</span>
|
||||
</li>
|
||||
<li class="flex items-start">
|
||||
<i class="fa-brands fa-symfony text-black mt-1 mr-2"></i>
|
||||
<span>Seamless Symfony support</span>
|
||||
</li>
|
||||
<li class="flex items-start">
|
||||
<i class="fa-solid fa-plug text-slate-600 mt-1 mr-2"></i>
|
||||
<span>Works with Livewire and Inertia</span>
|
||||
</li>
|
||||
<li class="flex items-start">
|
||||
<i class="fa-solid fa-wrench text-slate-600 mt-1 mr-2"></i>
|
||||
<span>Framework-agnostic core</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- Feature 4 -->
|
||||
<div class="bg-white rounded-xl shadow-sm hover:shadow-md transition-shadow duration-300 border border-slate-100 p-6 flex flex-col h-full">
|
||||
<div class="w-12 h-12 bg-emerald-50 rounded-lg flex items-center justify-center mb-4">
|
||||
<i class="fa-solid fa-user-gear text-emerald-600 text-xl"></i>
|
||||
</div>
|
||||
<h3 class="text-lg font-semibold text-slate-800 mb-2" id="developer-friendly">Developer Experience</h3>
|
||||
<ul class="space-y-2 text-slate-600 flex-grow">
|
||||
<li class="flex items-start">
|
||||
<i class="fa-solid fa-check text-green-500 mt-1 mr-2"></i>
|
||||
<span>Full IDE support with autocompletion</span>
|
||||
</li>
|
||||
<li class="flex items-start">
|
||||
<i class="fa-solid fa-check text-green-500 mt-1 mr-2"></i>
|
||||
<span>Clear documentation with examples</span>
|
||||
</li>
|
||||
<li class="flex items-start">
|
||||
<i class="fa-solid fa-check text-green-500 mt-1 mr-2"></i>
|
||||
<span>TypeScript support</span>
|
||||
</li>
|
||||
<li class="flex items-start">
|
||||
<i class="fa-solid fa-check text-green-500 mt-1 mr-2"></i>
|
||||
<span>Easy to customize and extend</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Library Showcase Section -->
|
||||
<section class="container mx-auto px-4 mb-16">
|
||||
<div class="text-center mb-12">
|
||||
<div class="inline-block px-3 py-1 bg-indigo-50 text-indigo-700 rounded-full text-sm font-medium mb-2">Libraries</div>
|
||||
<h2 class="text-2xl md:text-3xl font-bold text-slate-800 mb-2">Choose Your Preferred Library</h2>
|
||||
<p class="text-slate-600 max-w-2xl mx-auto">PHPFlasher integrates with popular JavaScript notification libraries</p>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 max-w-5xl mx-auto">
|
||||
<!-- Toastr -->
|
||||
<a href="/library/toastr/" class="group bg-white rounded-xl shadow-sm hover:shadow-md transition-all duration-300 border border-slate-100 overflow-hidden flex flex-col h-full">
|
||||
<div class="h-32 bg-gradient-to-r from-blue-400 to-blue-600 flex items-center justify-center">
|
||||
<div class="w-16 h-16 bg-white rounded-full flex items-center justify-center shadow-lg">
|
||||
<i class="fa-solid fa-toast text-blue-500 text-2xl"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-5 flex-grow">
|
||||
<h3 class="font-semibold text-slate-800 mb-2">Toastr.js</h3>
|
||||
<p class="text-slate-600 text-sm mb-3">Simple toast notifications for web applications. Clean, elegant and customizable.</p>
|
||||
<div class="flex items-center text-blue-600 font-medium text-sm group-hover:underline">
|
||||
Learn more <i class="fa-solid fa-arrow-right ml-1 transform group-hover:translate-x-1 transition-transform"></i>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<!-- SweetAlert2 -->
|
||||
<a href="/library/sweetalert/" class="group bg-white rounded-xl shadow-sm hover:shadow-md transition-all duration-300 border border-slate-100 overflow-hidden flex flex-col h-full">
|
||||
<div class="h-32 bg-gradient-to-r from-pink-400 to-red-500 flex items-center justify-center">
|
||||
<div class="w-16 h-16 bg-white rounded-full flex items-center justify-center shadow-lg">
|
||||
<i class="fa-solid fa-message-exclamation text-pink-500 text-2xl"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-5 flex-grow">
|
||||
<h3 class="font-semibold text-slate-800 mb-2">SweetAlert2</h3>
|
||||
<p class="text-slate-600 text-sm mb-3">Beautiful, responsive, customizable alert dialogs with interactive elements.</p>
|
||||
<div class="flex items-center text-pink-600 font-medium text-sm group-hover:underline">
|
||||
Learn more <i class="fa-solid fa-arrow-right ml-1 transform group-hover:translate-x-1 transition-transform"></i>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<!-- Noty -->
|
||||
<a href="/library/noty/" class="group bg-white rounded-xl shadow-sm hover:shadow-md transition-all duration-300 border border-slate-100 overflow-hidden flex flex-col h-full">
|
||||
<div class="h-32 bg-gradient-to-r from-purple-400 to-indigo-500 flex items-center justify-center">
|
||||
<div class="w-16 h-16 bg-white rounded-full flex items-center justify-center shadow-lg">
|
||||
<i class="fa-solid fa-bell text-purple-500 text-2xl"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-5 flex-grow">
|
||||
<h3 class="font-semibold text-slate-800 mb-2">Noty</h3>
|
||||
<p class="text-slate-600 text-sm mb-3">Highly customizable notification library with multiple positions and animations.</p>
|
||||
<div class="flex items-center text-purple-600 font-medium text-sm group-hover:underline">
|
||||
Learn more <i class="fa-solid fa-arrow-right ml-1 transform group-hover:translate-x-1 transition-transform"></i>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<!-- Notyf -->
|
||||
<a href="/library/notyf/" class="group bg-white rounded-xl shadow-sm hover:shadow-md transition-all duration-300 border border-slate-100 overflow-hidden flex flex-col h-full">
|
||||
<div class="h-32 bg-gradient-to-r from-green-400 to-teal-500 flex items-center justify-center">
|
||||
<div class="w-16 h-16 bg-white rounded-full flex items-center justify-center shadow-lg">
|
||||
<i class="fa-solid fa-message-dots text-green-500 text-2xl"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-5 flex-grow">
|
||||
<h3 class="font-semibold text-slate-800 mb-2">Notyf</h3>
|
||||
<p class="text-slate-600 text-sm mb-3">Minimalist toast notifications with a clean design and smooth animations.</p>
|
||||
<div class="flex items-center text-green-600 font-medium text-sm group-hover:underline">
|
||||
Learn more <i class="fa-solid fa-arrow-right ml-1 transform group-hover:translate-x-1 transition-transform"></i>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Code Example Section -->
|
||||
<section class="container mx-auto px-4 mb-16">
|
||||
<div class="text-center mb-12">
|
||||
<div class="inline-block px-3 py-1 bg-indigo-50 text-indigo-700 rounded-full text-sm font-medium mb-2">Code Examples</div>
|
||||
<h2 class="text-2xl md:text-3xl font-bold text-slate-800 mb-2">Simple Implementation</h2>
|
||||
<p class="text-slate-600 max-w-2xl mx-auto">Just a few lines of code to get started</p>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col gap-8 max-w-4xl mx-auto">
|
||||
<!-- PHP Example -->
|
||||
<div class="bg-white rounded-xl shadow-md overflow-hidden border border-slate-100">
|
||||
<div class="bg-slate-800 px-4 py-3 flex items-center">
|
||||
<div class="flex space-x-1.5 mr-3">
|
||||
<div class="w-2.5 h-2.5 rounded-full bg-red-500"></div>
|
||||
<div class="w-2.5 h-2.5 rounded-full bg-yellow-500"></div>
|
||||
<div class="w-2.5 h-2.5 rounded-full bg-green-500"></div>
|
||||
</div>
|
||||
<div class="text-white opacity-80 text-xs font-medium">Controller.php</div>
|
||||
</div>
|
||||
<div class="p-5">
|
||||
<pre class="bg-slate-50 rounded-lg p-4 text-sm overflow-x-auto"><code class="language-php">namespace App\Http\Controllers;
|
||||
|
||||
class ProfileController extends Controller
|
||||
{
|
||||
public function update(Request $request)
|
||||
{
|
||||
// Update user profile logic
|
||||
|
||||
// Show success notification
|
||||
flash()->success('Profile updated successfully!');
|
||||
|
||||
// Or add a title
|
||||
flash()->success('Your changes have been saved.', 'Profile Updated');
|
||||
|
||||
// Change notification options
|
||||
flash()->options([
|
||||
'timeout' => 5000,
|
||||
'position' => 'top-right'
|
||||
])->success('Changes saved with custom settings');
|
||||
|
||||
return back();
|
||||
}
|
||||
}</code></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- JavaScript Example -->
|
||||
<div class="bg-white rounded-xl shadow-md overflow-hidden border border-slate-100">
|
||||
<div class="bg-slate-800 px-4 py-3 flex items-center">
|
||||
<div class="flex space-x-1.5 mr-3">
|
||||
<div class="w-2.5 h-2.5 rounded-full bg-red-500"></div>
|
||||
<div class="w-2.5 h-2.5 rounded-full bg-yellow-500"></div>
|
||||
<div class="w-2.5 h-2.5 rounded-full bg-green-500"></div>
|
||||
</div>
|
||||
<div class="text-white opacity-80 text-xs font-medium">app.js</div>
|
||||
</div>
|
||||
<div class="p-5">
|
||||
<pre class="bg-slate-50 rounded-lg p-4 text-sm overflow-x-auto"><code class="language-javascript">// Form submission example
|
||||
document.getElementById('contact-form').addEventListener('submit', async function(e) {
|
||||
e.preventDefault();
|
||||
|
||||
try {
|
||||
const response = await submitForm(this);
|
||||
|
||||
if (response.success) {
|
||||
// Show success notification
|
||||
flasher.success('Your message has been sent!', 'Thank You');
|
||||
} else {
|
||||
// Show error notification
|
||||
flasher.error('Please check your form inputs', 'Error');
|
||||
}
|
||||
} catch (error) {
|
||||
// Show error notification with details
|
||||
flasher.error('Server error, please try again later.', 'Error');
|
||||
console.error(error);
|
||||
}
|
||||
});</code></pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Community Section -->
|
||||
<section class="bg-gradient-to-b from-slate-50 to-white py-16 mb-16">
|
||||
<div class="container mx-auto px-4">
|
||||
<div class="text-center mb-12">
|
||||
<div class="inline-block px-3 py-1 bg-indigo-50 text-indigo-700 rounded-full text-sm font-medium mb-2">Community</div>
|
||||
<h2 class="text-2xl md:text-3xl font-bold text-slate-800 mb-2">Join Our Growing Community</h2>
|
||||
<p class="text-slate-600 max-w-2xl mx-auto">Help us make PHPFlasher even better</p>
|
||||
</div>
|
||||
|
||||
<div class="max-w-4xl mx-auto grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||
<!-- GitHub -->
|
||||
<a href="https://github.com/php-flasher/php-flasher" class="group bg-white rounded-xl shadow-sm hover:shadow-md transition-all duration-300 border border-slate-100 p-6 flex flex-col items-center text-center">
|
||||
<div class="w-16 h-16 bg-slate-50 rounded-full flex items-center justify-center mb-4 group-hover:bg-slate-100 transition-colors">
|
||||
<i class="fa-brands fa-github text-slate-800 text-3xl"></i>
|
||||
</div>
|
||||
<h3 class="font-semibold text-slate-800 mb-2">Star on GitHub</h3>
|
||||
<p class="text-slate-600 text-sm">Contribute to the project, report issues, or suggest new features.</p>
|
||||
<div class="mt-4 px-4 py-2 bg-slate-100 rounded-full text-slate-700 text-sm font-medium group-hover:bg-slate-200 transition-colors">
|
||||
<i class="fa-regular fa-star mr-1"></i> Star
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<!-- Discussions -->
|
||||
<a href="https://github.com/php-flasher/php-flasher/discussions" class="group bg-white rounded-xl shadow-sm hover:shadow-md transition-all duration-300 border border-slate-100 p-6 flex flex-col items-center text-center">
|
||||
<div class="w-16 h-16 bg-indigo-50 rounded-full flex items-center justify-center mb-4 group-hover:bg-indigo-100 transition-colors">
|
||||
<i class="fa-solid fa-comments text-indigo-600 text-3xl"></i>
|
||||
</div>
|
||||
<h3 class="font-semibold text-slate-800 mb-2">Join Discussions</h3>
|
||||
<p class="text-slate-600 text-sm">Ask questions, share ideas, and connect with other users.</p>
|
||||
<div class="mt-4 px-4 py-2 bg-indigo-100 rounded-full text-indigo-700 text-sm font-medium group-hover:bg-indigo-200 transition-colors">
|
||||
<i class="fa-regular fa-message mr-1"></i> Participate
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<!-- Documentation -->
|
||||
<a href="/docs/" class="group bg-white rounded-xl shadow-sm hover:shadow-md transition-all duration-300 border border-slate-100 p-6 flex flex-col items-center text-center">
|
||||
<div class="w-16 h-16 bg-amber-50 rounded-full flex items-center justify-center mb-4 group-hover:bg-amber-100 transition-colors">
|
||||
<i class="fa-solid fa-book-open text-amber-600 text-3xl"></i>
|
||||
</div>
|
||||
<h3 class="font-semibold text-slate-800 mb-2">Read Documentation</h3>
|
||||
<p class="text-slate-600 text-sm">Explore comprehensive guides, examples, and API reference.</p>
|
||||
<div class="mt-4 px-4 py-2 bg-amber-100 rounded-full text-amber-700 text-sm font-medium group-hover:bg-amber-200 transition-colors">
|
||||
<i class="fa-solid fa-arrow-right mr-1"></i> Get Started
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Call To Action -->
|
||||
<section class="container mx-auto px-4 mb-16">
|
||||
<div class="bg-gradient-to-r from-indigo-500 to-purple-600 rounded-2xl overflow-hidden shadow-lg">
|
||||
<div class="max-w-4xl mx-auto px-6 py-16 text-center">
|
||||
<h2 class="text-3xl md:text-4xl font-bold text-white mb-4">Ready to Enhance Your PHP Applications?</h2>
|
||||
<p class="text-indigo-100 text-lg mb-8 max-w-2xl mx-auto">
|
||||
Add beautiful notifications to your Laravel or Symfony applications in minutes with PHPFlasher.
|
||||
</p>
|
||||
<div class="flex flex-wrap justify-center gap-4">
|
||||
<a href="#quick-start" class="px-6 py-3 bg-white hover:bg-slate-100 text-indigo-600 font-medium rounded-lg transition-colors duration-200 shadow-md flex items-center">
|
||||
<i class="fa-solid fa-rocket mr-2"></i> Get Started
|
||||
</a>
|
||||
<a href="https://github.com/php-flasher/php-flasher" class="px-6 py-3 bg-indigo-700 hover:bg-indigo-800 text-white font-medium rounded-lg transition-colors duration-200 shadow-md flex items-center">
|
||||
<i class="fa-brands fa-github mr-2"></i> Star on GitHub
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Browser Support Section -->
|
||||
<section class="container mx-auto px-4 mb-16">
|
||||
<div class="text-center mb-8">
|
||||
<div class="inline-block px-3 py-1 bg-slate-100 text-slate-700 rounded-full text-sm font-medium mb-2">Support</div>
|
||||
<h2 class="text-xl font-bold text-slate-800">Compatible Everywhere</h2>
|
||||
</div>
|
||||
|
||||
<div class="bg-white rounded-xl shadow-sm border border-slate-100 py-8">
|
||||
<div class="flex flex-wrap justify-center gap-10 px-4">
|
||||
<div class="flex flex-col items-center">
|
||||
<div class="w-12 h-12 rounded-full bg-slate-50 flex items-center justify-center mb-2">
|
||||
<i class="fa-brands fa-chrome text-green-500 text-2xl"></i>
|
||||
</div>
|
||||
<span class="text-sm text-slate-600">Chrome</span>
|
||||
</div>
|
||||
<div class="flex flex-col items-center">
|
||||
<div class="w-12 h-12 rounded-full bg-slate-50 flex items-center justify-center mb-2">
|
||||
<i class="fa-brands fa-firefox text-orange-500 text-2xl"></i>
|
||||
</div>
|
||||
<span class="text-sm text-slate-600">Firefox</span>
|
||||
</div>
|
||||
<div class="flex flex-col items-center">
|
||||
<div class="w-12 h-12 rounded-full bg-slate-50 flex items-center justify-center mb-2">
|
||||
<i class="fa-brands fa-safari text-blue-500 text-2xl"></i>
|
||||
</div>
|
||||
<span class="text-sm text-slate-600">Safari</span>
|
||||
</div>
|
||||
<div class="flex flex-col items-center">
|
||||
<div class="w-12 h-12 rounded-full bg-slate-50 flex items-center justify-center mb-2">
|
||||
<i class="fa-brands fa-edge text-blue-600 text-2xl"></i>
|
||||
</div>
|
||||
<span class="text-sm text-slate-600">Edge</span>
|
||||
</div>
|
||||
<div class="flex flex-col items-center">
|
||||
<div class="w-12 h-12 rounded-full bg-slate-50 flex items-center justify-center mb-2">
|
||||
<i class="fa-solid fa-mobile-screen text-slate-600 text-2xl"></i>
|
||||
</div>
|
||||
<span class="text-sm text-slate-600">Mobile</span>
|
||||
</div>
|
||||
<div class="flex flex-col items-center">
|
||||
<div class="w-12 h-12 rounded-full bg-slate-50 flex items-center justify-center mb-2">
|
||||
<i class="fa-solid fa-moon text-indigo-500 text-2xl"></i>
|
||||
</div>
|
||||
<span class="text-sm text-slate-600">Dark Mode</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
{% include footer.html %}
|
||||
|
||||
Vendored
+1
-1
@@ -2,7 +2,7 @@
|
||||
"entrypoints": {
|
||||
"main": {
|
||||
"css": [
|
||||
"/dist/main.aba03d4f.css"
|
||||
"/dist/main.def4cf18.css"
|
||||
],
|
||||
"js": [
|
||||
"/dist/main.c89a204f.js"
|
||||
|
||||
File diff suppressed because one or more lines are too long
-1543
File diff suppressed because it is too large
Load Diff
Vendored
+183
@@ -0,0 +1,183 @@
|
||||
/* Essential styles for the elegant notifications demo */
|
||||
.bg-grid {
|
||||
background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23ffffff' fill-opacity='1' fill-rule='evenodd'%3E%3Ccircle cx='3' cy='3' r='1'/%3E%3Ccircle cx='13' cy='13' r='1'/%3E%3C/g%3E%3C/svg%3E");
|
||||
}
|
||||
|
||||
@keyframes ping-slow {
|
||||
0% {
|
||||
transform: scale(1);
|
||||
opacity: 1;
|
||||
}
|
||||
75%, 100% {
|
||||
transform: scale(2);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.animate-ping-slow {
|
||||
animation: ping-slow 2.5s cubic-bezier(0, 0, 0.2, 1) infinite;
|
||||
}
|
||||
|
||||
@keyframes pulse-slow {
|
||||
0%, 100% {
|
||||
opacity: 0.3;
|
||||
}
|
||||
50% {
|
||||
opacity: 0.8;
|
||||
}
|
||||
}
|
||||
|
||||
.animate-pulse-slow {
|
||||
animation: pulse-slow 8s cubic-bezier(0.4, 0, 0.6, 1) infinite;
|
||||
}
|
||||
|
||||
.animate-pulse-medium {
|
||||
animation: pulse-slow 6s cubic-bezier(0.4, 0, 0.6, 1) infinite;
|
||||
}
|
||||
|
||||
@keyframes shine {
|
||||
to {
|
||||
left: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.animate-shine {
|
||||
animation: shine 1s forwards;
|
||||
}
|
||||
|
||||
/* New spaced notification type buttons */
|
||||
.notification-types-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: 8px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.type-button {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0.75rem 0.5rem;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
color: #4b5563;
|
||||
border-radius: 0.5rem;
|
||||
transition: all 0.2s ease;
|
||||
border: 1px solid #e5e7eb;
|
||||
background-color: #f9fafb;
|
||||
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.type-button:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.type-button.active {
|
||||
border-width: 2px;
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.type-icon {
|
||||
display: inline-flex;
|
||||
width: 1.75rem;
|
||||
height: 1.75rem;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-bottom: 0.5rem;
|
||||
padding: 0.25rem;
|
||||
border-radius: 0.375rem;
|
||||
}
|
||||
|
||||
/* Success type */
|
||||
.type-button[data-type="success"] {
|
||||
background-color: rgba(16, 185, 129, 0.05);
|
||||
}
|
||||
|
||||
.type-button[data-type="success"].active {
|
||||
background-color: rgba(16, 185, 129, 0.15);
|
||||
border-color: #10B981;
|
||||
}
|
||||
|
||||
.type-icon.success {
|
||||
color: #10B981;
|
||||
background-color: rgba(16, 185, 129, 0.1);
|
||||
}
|
||||
|
||||
/* Error type */
|
||||
.type-button[data-type="error"] {
|
||||
background-color: rgba(239, 68, 68, 0.05);
|
||||
}
|
||||
|
||||
.type-button[data-type="error"].active {
|
||||
background-color: rgba(239, 68, 68, 0.15);
|
||||
border-color: #EF4444;
|
||||
}
|
||||
|
||||
.type-icon.error {
|
||||
color: #EF4444;
|
||||
background-color: rgba(239, 68, 68, 0.1);
|
||||
}
|
||||
|
||||
/* Info type */
|
||||
.type-button[data-type="info"] {
|
||||
background-color: rgba(59, 130, 246, 0.05);
|
||||
}
|
||||
|
||||
.type-button[data-type="info"].active {
|
||||
background-color: rgba(59, 130, 246, 0.15);
|
||||
border-color: #3B82F6;
|
||||
}
|
||||
|
||||
.type-icon.info {
|
||||
color: #3B82F6;
|
||||
background-color: rgba(59, 130, 246, 0.1);
|
||||
}
|
||||
|
||||
/* Warning type */
|
||||
.type-button[data-type="warning"] {
|
||||
background-color: rgba(245, 158, 11, 0.05);
|
||||
}
|
||||
|
||||
.type-button[data-type="warning"].active {
|
||||
background-color: rgba(245, 158, 11, 0.15);
|
||||
border-color: #F59E0B;
|
||||
}
|
||||
|
||||
.type-icon.warning {
|
||||
color: #F59E0B;
|
||||
background-color: rgba(245, 158, 11, 0.1);
|
||||
}
|
||||
|
||||
/* Code panel styles */
|
||||
.code-panel {
|
||||
height: calc(100vh - 15rem);
|
||||
max-height: 500px;
|
||||
}
|
||||
|
||||
/* Override Prism default styles to make them work better in our UI */
|
||||
pre[class*="language-"] {
|
||||
background: #f9fafb !important; /* Use light gray instead of darker backgrounds */
|
||||
margin: 0 !important;
|
||||
padding: 1rem !important;
|
||||
border-radius: 0.5rem;
|
||||
border: 1px solid #e5e7eb;
|
||||
}
|
||||
|
||||
code[class*="language-"] {
|
||||
font-size: 0.875rem !important;
|
||||
line-height: 1.6 !important;
|
||||
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !important;
|
||||
}
|
||||
|
||||
/* Tab button styles */
|
||||
#php-tab.active, #js-tab.active {
|
||||
@apply text-blue-600 border-b-2 border-blue-500;
|
||||
}
|
||||
|
||||
/* Additional animation for code tabs */
|
||||
.code-tab-transition {
|
||||
transition: all 0.3s ease-in-out;
|
||||
}
|
||||
Vendored
+64
@@ -0,0 +1,64 @@
|
||||
/* Bell animation */
|
||||
@keyframes bellRing {
|
||||
0%, 100% {
|
||||
transform: rotate(0);
|
||||
transform-origin: top center;
|
||||
}
|
||||
20% {
|
||||
transform: rotate(8deg);
|
||||
transform-origin: top center;
|
||||
}
|
||||
40% {
|
||||
transform: rotate(-8deg);
|
||||
transform-origin: top center;
|
||||
}
|
||||
60% {
|
||||
transform: rotate(4deg);
|
||||
transform-origin: top center;
|
||||
}
|
||||
80% {
|
||||
transform: rotate(-4deg);
|
||||
transform-origin: top center;
|
||||
}
|
||||
}
|
||||
|
||||
.animate-bell {
|
||||
animation: bellRing 2s ease-in-out;
|
||||
animation-delay: 1s;
|
||||
filter: drop-shadow(0 0 5px rgba(64, 82, 181, 0.5));
|
||||
}
|
||||
|
||||
.animate-bell:hover {
|
||||
animation: bellRing 0.5s ease-in-out;
|
||||
animation-iteration-count: 1;
|
||||
}
|
||||
|
||||
/* Fade-in animation */
|
||||
@keyframes fadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(10px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.animate-fade-in {
|
||||
animation: fadeIn 0.6s ease-out forwards;
|
||||
}
|
||||
|
||||
/* Pulse animation */
|
||||
@keyframes pulse {
|
||||
0%, 100% {
|
||||
opacity: 1;
|
||||
}
|
||||
50% {
|
||||
opacity: 0.6;
|
||||
}
|
||||
}
|
||||
|
||||
.animate-pulse {
|
||||
animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
|
||||
}
|
||||
Vendored
+468
@@ -0,0 +1,468 @@
|
||||
// Current state management
|
||||
const state = {
|
||||
type: "success",
|
||||
title: "",
|
||||
message: "Your changes have been saved successfully!",
|
||||
timeout: "",
|
||||
fps: "",
|
||||
position: "",
|
||||
direction: "",
|
||||
rtl: false,
|
||||
theme: "",
|
||||
closeButton: false,
|
||||
escapeHtml: true
|
||||
};
|
||||
|
||||
// Update current time
|
||||
function updateCurrentTime() {
|
||||
document.getElementById("current-time").textContent = "2025-03-11 07:38:23";
|
||||
}
|
||||
|
||||
document.addEventListener("DOMContentLoaded", function() {
|
||||
// Initialize particles.js if available
|
||||
if (typeof particlesJS !== "undefined") {
|
||||
particlesJS("particles-js", {
|
||||
particles: {
|
||||
number: { value: 24, density: { enable: true, value_area: 800 } },
|
||||
color: { value: "#3b82f6" },
|
||||
opacity: { value: 0.1, random: true },
|
||||
size: { value: 2, random: true },
|
||||
line_linked: {
|
||||
enable: true,
|
||||
distance: 150,
|
||||
color: "#4b5563",
|
||||
opacity: 0.1,
|
||||
width: 1
|
||||
},
|
||||
move: {
|
||||
enable: true,
|
||||
speed: 0.4,
|
||||
direction: "none",
|
||||
random: true,
|
||||
straight: false,
|
||||
out_mode: "out"
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Initialize time with user-provided values
|
||||
document.getElementById("current-time").textContent = "2025-03-11 07:40:35";
|
||||
|
||||
// Initialize type buttons
|
||||
document.querySelectorAll(".type-button").forEach(btn => {
|
||||
btn.addEventListener("click", () => {
|
||||
// Remove active class from all type buttons
|
||||
document.querySelectorAll(".type-button").forEach(b => b.classList.remove("active"));
|
||||
|
||||
// Add active class to clicked button
|
||||
btn.classList.add("active");
|
||||
|
||||
// Update state
|
||||
state.type = btn.dataset.type;
|
||||
|
||||
// Update code display
|
||||
updateCodeDisplay();
|
||||
|
||||
// Update status
|
||||
updateStatus(`Type changed to: ${state.type}`);
|
||||
});
|
||||
});
|
||||
|
||||
// Input event listeners
|
||||
document.getElementById("title-input").addEventListener("input", (e) => {
|
||||
state.title = e.target.value.trim();
|
||||
updateCodeDisplay();
|
||||
});
|
||||
|
||||
document.getElementById("message-input").addEventListener("input", (e) => {
|
||||
state.message = e.target.value;
|
||||
updateCodeDisplay();
|
||||
});
|
||||
|
||||
// Select event listeners
|
||||
document.getElementById("position-select").addEventListener("change", (e) => {
|
||||
state.position = e.target.value;
|
||||
updateCodeDisplay();
|
||||
});
|
||||
|
||||
document.getElementById("timeout-input").addEventListener("input", (e) => {
|
||||
state.timeout = e.target.value ? parseInt(e.target.value) : "";
|
||||
updateCodeDisplay();
|
||||
});
|
||||
|
||||
document.getElementById("fps-input").addEventListener("input", (e) => {
|
||||
state.fps = e.target.value ? parseInt(e.target.value) : "";
|
||||
updateCodeDisplay();
|
||||
});
|
||||
|
||||
document.getElementById("theme-select").addEventListener("change", (e) => {
|
||||
state.theme = e.target.value;
|
||||
updateCodeDisplay();
|
||||
});
|
||||
|
||||
document.getElementById("direction-select").addEventListener("change", (e) => {
|
||||
state.direction = e.target.value;
|
||||
updateCodeDisplay();
|
||||
});
|
||||
|
||||
// Checkbox event listeners
|
||||
document.getElementById("rtl-check").addEventListener("change", (e) => {
|
||||
state.rtl = e.target.checked;
|
||||
updateCodeDisplay();
|
||||
});
|
||||
|
||||
document.getElementById("close-btn-check").addEventListener("change", (e) => {
|
||||
state.closeButton = e.target.checked;
|
||||
updateCodeDisplay();
|
||||
});
|
||||
|
||||
document.getElementById("escape-html-check").addEventListener("change", (e) => {
|
||||
state.escapeHtml = e.target.checked;
|
||||
updateCodeDisplay();
|
||||
});
|
||||
|
||||
// Show notification button - directly execute notifications using the showNotificationsForHandler function
|
||||
document.getElementById("show-notification-btn").addEventListener("click", () => {
|
||||
// Update status
|
||||
updateStatus("Launching notification...");
|
||||
|
||||
// Get current options from state
|
||||
const options = {};
|
||||
|
||||
// Only add options that have been explicitly set
|
||||
if (state.position) {
|
||||
options.position = state.position;
|
||||
}
|
||||
if (state.timeout !== "") {
|
||||
options.timeout = state.timeout;
|
||||
}
|
||||
if (state.fps !== "") {
|
||||
options.fps = state.fps;
|
||||
}
|
||||
if (state.direction) {
|
||||
options.direction = state.direction;
|
||||
}
|
||||
if (state.rtl) {
|
||||
options.rtl = state.rtl;
|
||||
}
|
||||
if (state.closeButton) {
|
||||
options.closeButton = state.closeButton;
|
||||
}
|
||||
if (!state.escapeHtml) {
|
||||
options.escapeHtml = state.escapeHtml;
|
||||
}
|
||||
|
||||
// Determine the handler based on theme
|
||||
let handler = "flasher"; // Default handler
|
||||
|
||||
if (state.theme) {
|
||||
handler = `theme.${state.theme}`;
|
||||
}
|
||||
|
||||
// Try to use the direct notification function if it exists, otherwise use the stimulus controller
|
||||
if (typeof showNotificationsForHandler === "function") {
|
||||
// Create a custom notification based on user selections
|
||||
const factory = flasher.use(handler);
|
||||
|
||||
// Configure flasher with options
|
||||
if (Object.keys(options).length > 0) {
|
||||
factory.options(options);
|
||||
}
|
||||
|
||||
// Show the notification
|
||||
if (state.title) {
|
||||
factory[state.type](state.message, state.title);
|
||||
} else {
|
||||
factory[state.type](state.message);
|
||||
}
|
||||
} else {
|
||||
console.log(`Would show a ${state.type} notification with message "${state.message}"${state.title ? ` and title "${state.title}"` : ""} using handler "${handler}"`);
|
||||
console.log("Notification options:", options);
|
||||
console.log("Stimulus controller should be triggered");
|
||||
}
|
||||
});
|
||||
|
||||
// Code tabs functionality
|
||||
document.getElementById("php-tab").addEventListener("click", () => {
|
||||
showCodeTab("php");
|
||||
});
|
||||
|
||||
document.getElementById("js-tab").addEventListener("click", () => {
|
||||
showCodeTab("js");
|
||||
});
|
||||
|
||||
function showCodeTab(tab) {
|
||||
// Hide all panels
|
||||
document.querySelectorAll(".code-panel").forEach(panel => {
|
||||
panel.classList.add("hidden");
|
||||
});
|
||||
|
||||
// Show the selected panel
|
||||
document.getElementById(`${tab}-code-panel`).classList.remove("hidden");
|
||||
|
||||
// Update tab styling
|
||||
document.getElementById("php-tab").classList.remove("text-blue-600", "border-b-2", "border-blue-500");
|
||||
document.getElementById("js-tab").classList.remove("text-blue-600", "border-b-2", "border-blue-500");
|
||||
document.getElementById("php-tab").classList.add("text-gray-600");
|
||||
document.getElementById("js-tab").classList.add("text-gray-600");
|
||||
|
||||
document.getElementById(`${tab}-tab`).classList.remove("text-gray-600");
|
||||
document.getElementById(`${tab}-tab`).classList.add("text-blue-600", "border-b-2", "border-blue-500");
|
||||
|
||||
// Update code for the selected tab
|
||||
updateCodeDisplay();
|
||||
}
|
||||
|
||||
// Initialize
|
||||
updateCodeDisplay();
|
||||
});
|
||||
|
||||
// Update the status indicator
|
||||
function updateStatus(message) {
|
||||
const statusText = document.getElementById("status-text");
|
||||
statusText.textContent = message;
|
||||
|
||||
// Temporarily change color
|
||||
statusText.classList.remove("text-emerald-600");
|
||||
statusText.classList.add("text-blue-600");
|
||||
|
||||
// Add animation to the dot
|
||||
const dot = document.querySelector("#status-indicator div");
|
||||
dot.classList.remove("bg-emerald-500");
|
||||
dot.classList.add("bg-blue-500");
|
||||
|
||||
// Reset after 2 seconds
|
||||
setTimeout(() => {
|
||||
statusText.classList.remove("text-blue-600");
|
||||
statusText.classList.add("text-emerald-600");
|
||||
statusText.textContent = "Ready";
|
||||
|
||||
dot.classList.remove("bg-blue-500");
|
||||
dot.classList.add("bg-emerald-500");
|
||||
}, 2000);
|
||||
}
|
||||
|
||||
// Update the code display with Prism syntax highlighting
|
||||
function updateCodeDisplay() {
|
||||
const phpCodeDisplay = document.getElementById("php-code-display");
|
||||
const jsCodeDisplay = document.getElementById("js-code-display");
|
||||
|
||||
// PHP Code
|
||||
let phpCode = `// Display a ${state.type} notification\n`;
|
||||
|
||||
// Handle theme usage
|
||||
let useTheme = "";
|
||||
if (state.theme) {
|
||||
useTheme = `flash()->use('theme.${state.theme}')`;
|
||||
} else {
|
||||
useTheme = "flash()";
|
||||
}
|
||||
|
||||
// Build options object
|
||||
let hasOptions = false;
|
||||
let phpOptionsCode = "";
|
||||
|
||||
if (state.position || state.timeout !== "" || state.fps !== "" ||
|
||||
state.direction || state.rtl ||
|
||||
state.closeButton || !state.escapeHtml) {
|
||||
|
||||
hasOptions = true;
|
||||
phpOptionsCode = "->options([\n";
|
||||
|
||||
// Add each option that's been explicitly set
|
||||
const optionLines = [];
|
||||
if (state.position) {
|
||||
optionLines.push(` 'position' => '${state.position}'`);
|
||||
}
|
||||
if (state.timeout !== "") {
|
||||
optionLines.push(` 'timeout' => ${state.timeout}`);
|
||||
}
|
||||
if (state.fps !== "") {
|
||||
optionLines.push(` 'fps' => ${state.fps}`);
|
||||
}
|
||||
if (state.direction) {
|
||||
optionLines.push(` 'direction' => '${state.direction}'`);
|
||||
}
|
||||
if (state.rtl) {
|
||||
optionLines.push(` 'rtl' => true`);
|
||||
}
|
||||
if (state.closeButton) {
|
||||
optionLines.push(` 'closeButton' => true`);
|
||||
}
|
||||
if (!state.escapeHtml) {
|
||||
optionLines.push(` 'escapeHtml' => false`);
|
||||
}
|
||||
|
||||
phpOptionsCode += optionLines.join(",\n") + "\n ])";
|
||||
}
|
||||
|
||||
// Build the full PHP code
|
||||
if (hasOptions) {
|
||||
phpCode += `${useTheme}${phpOptionsCode}\n`;
|
||||
|
||||
if (state.title) {
|
||||
phpCode += ` ->${state.type}(\n '${state.message}', \n '${state.title}'\n );`;
|
||||
} else {
|
||||
phpCode += ` ->${state.type}('${state.message}');`;
|
||||
}
|
||||
} else {
|
||||
// Simple call without options
|
||||
if (state.title) {
|
||||
phpCode += `${useTheme}->${state.type}('${state.message}', '${state.title}');`;
|
||||
} else {
|
||||
phpCode += `${useTheme}->${state.type}('${state.message}');`;
|
||||
}
|
||||
}
|
||||
|
||||
// JavaScript Code
|
||||
let jsCode = `// Display a ${state.type} notification\n`;
|
||||
|
||||
// Handle theme usage
|
||||
let jsUseTheme = "";
|
||||
if (state.theme) {
|
||||
jsUseTheme = `flasher.use('theme.${state.theme}')`;
|
||||
} else {
|
||||
jsUseTheme = "flasher";
|
||||
}
|
||||
|
||||
// Build options object
|
||||
let jsOptionsCode = "";
|
||||
if (state.position || state.timeout !== "" || state.fps !== "" ||
|
||||
state.direction || state.rtl ||
|
||||
state.closeButton || !state.escapeHtml) {
|
||||
|
||||
jsOptionsCode = ".options({\n";
|
||||
|
||||
// Add each option that's been explicitly set
|
||||
const optionLines = [];
|
||||
if (state.position) {
|
||||
optionLines.push(` position: '${state.position}'`);
|
||||
}
|
||||
if (state.timeout !== "") {
|
||||
optionLines.push(` timeout: ${state.timeout}`);
|
||||
}
|
||||
if (state.fps !== "") {
|
||||
optionLines.push(` fps: ${state.fps}`);
|
||||
}
|
||||
if (state.direction) {
|
||||
optionLines.push(` direction: '${state.direction}'`);
|
||||
}
|
||||
if (state.rtl) {
|
||||
optionLines.push(` rtl: true`);
|
||||
}
|
||||
if (state.closeButton) {
|
||||
optionLines.push(` closeButton: true`);
|
||||
}
|
||||
if (!state.escapeHtml) {
|
||||
optionLines.push(` escapeHtml: false`);
|
||||
}
|
||||
|
||||
jsOptionsCode += optionLines.join(",\n") + "\n})";
|
||||
}
|
||||
|
||||
// Build the full JavaScript code
|
||||
if (jsOptionsCode) {
|
||||
jsCode += `${jsUseTheme}${jsOptionsCode}\n`;
|
||||
|
||||
if (state.title) {
|
||||
jsCode += ` .${state.type}('${state.message}', '${state.title}');`;
|
||||
} else {
|
||||
jsCode += ` .${state.type}('${state.message}');`;
|
||||
}
|
||||
} else {
|
||||
// Simple call without options
|
||||
if (state.title) {
|
||||
jsCode += `${jsUseTheme}.${state.type}('${state.message}', '${state.title}');`;
|
||||
} else {
|
||||
jsCode += `${jsUseTheme}.${state.type}('${state.message}');`;
|
||||
}
|
||||
}
|
||||
|
||||
phpCodeDisplay.textContent = phpCode;
|
||||
jsCodeDisplay.textContent = jsCode;
|
||||
|
||||
// Re-highlight with Prism
|
||||
if (typeof Prism !== "undefined") {
|
||||
Prism.highlightElement(phpCodeDisplay);
|
||||
Prism.highlightElement(jsCodeDisplay);
|
||||
}
|
||||
}
|
||||
|
||||
// Add a custom implementation of showNotificationsForHandler if it doesn't exist
|
||||
// This helps with preview in environments where the actual function isn't available
|
||||
if (typeof showNotificationsForHandler === "undefined") {
|
||||
window.showNotificationsForHandler = function(handler, options = {}) {
|
||||
console.log(`Showing notifications for handler: ${handler}`);
|
||||
console.log("Options:", options);
|
||||
|
||||
// Mock the notification display
|
||||
console.log("Showing mock notifications sequence...");
|
||||
};
|
||||
|
||||
window.flasher = {
|
||||
use: function(handler) {
|
||||
console.log(`Using handler: ${handler}`);
|
||||
|
||||
return {
|
||||
options: function(options) {
|
||||
console.log(`Setting options for ${handler}:`, options);
|
||||
return this;
|
||||
},
|
||||
success: function(message, title) {
|
||||
console.log(`Success: ${message}${title ? ` (${title})` : ""}`);
|
||||
},
|
||||
error: function(message, title) {
|
||||
console.log(`Error: ${message}${title ? ` (${title})` : ""}`);
|
||||
},
|
||||
info: function(message, title) {
|
||||
console.log(`Info: ${message}${title ? ` (${title})` : ""}`);
|
||||
},
|
||||
warning: function(message, title) {
|
||||
console.log(`Warning: ${message}${title ? ` (${title})` : ""}`);
|
||||
}
|
||||
};
|
||||
},
|
||||
options: function(options) {
|
||||
console.log("Setting global options:", options);
|
||||
return this;
|
||||
},
|
||||
success: function(message, title) {
|
||||
console.log(`Success: ${message}${title ? ` (${title})` : ""}`);
|
||||
},
|
||||
error: function(message, title) {
|
||||
console.log(`Error: ${message}${title ? ` (${title})` : ""}`);
|
||||
},
|
||||
info: function(message, title) {
|
||||
console.log(`Info: ${message}${title ? ` (${title})` : ""}`);
|
||||
},
|
||||
warning: function(message, title) {
|
||||
console.log(`Warning: ${message}${title ? ` (${title})` : ""}`);
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
// Helper function for the Stimulus controller integration
|
||||
document.addEventListener("DOMContentLoaded", function() {
|
||||
// Implement a simple version of Stimulus controller behavior if Stimulus is not available
|
||||
const notificationButtons = document.querySelectorAll("[data-controller=\"notification-demo\"]");
|
||||
|
||||
if (typeof Stimulus === "undefined") {
|
||||
notificationButtons.forEach(button => {
|
||||
if (!button.hasAttribute("data-stimulus-initialized")) {
|
||||
button.setAttribute("data-stimulus-initialized", "true");
|
||||
|
||||
// Only wire up the click handler if not already using the event listener above
|
||||
if (button.id !== 'show-notification-btn') {
|
||||
button.addEventListener('click', function() {
|
||||
if (typeof showNotificationsForHandler === 'function') {
|
||||
showNotificationsForHandler('notyf');
|
||||
} else {
|
||||
console.log('Would show notifications using Stimulus controller');
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
@@ -7,6 +7,8 @@ module.exports = {
|
||||
'./_includes/**/*.html',
|
||||
'./_layouts/**/*.html',
|
||||
'./assets/**/*.{js,pcss}',
|
||||
'./static/css/*.css',
|
||||
'./static/js/*.js',
|
||||
|
||||
// Explicit exclusions
|
||||
// '!./_site/**', // Jekyll output directory
|
||||
|
||||
Reference in New Issue
Block a user