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/main.js": "/dist/main.c89a204f.js",
|
||||||
"dist/455.3a7b4474.css": "/dist/455.3a7b4474.css",
|
"dist/455.3a7b4474.css": "/dist/455.3a7b4474.css",
|
||||||
"dist/455.17bc016b.js": "/dist/455.17bc016b.js",
|
"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">
|
<html lang="en" class="scroll-smooth">
|
||||||
<head>
|
<head>
|
||||||
{% include head.html %}
|
{% include head.html %}
|
||||||
|
|
||||||
|
<link rel="stylesheet" href="/static/css/home.css">
|
||||||
</head>
|
</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 size-helper.html %}
|
||||||
{% include banner.html %}
|
{% include banner.html %}
|
||||||
{% include header.html %}
|
{% include header.html %}
|
||||||
|
|
||||||
<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">
|
||||||
<!-- Home page content doesn't need sidebar -->
|
<!-- Hero Section with Animated Bell in SVG -->
|
||||||
{{ content }}
|
<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>
|
</div>
|
||||||
|
|
||||||
{% include footer.html %}
|
{% include footer.html %}
|
||||||
|
|||||||
Vendored
+1
-1
@@ -2,7 +2,7 @@
|
|||||||
"entrypoints": {
|
"entrypoints": {
|
||||||
"main": {
|
"main": {
|
||||||
"css": [
|
"css": [
|
||||||
"/dist/main.aba03d4f.css"
|
"/dist/main.def4cf18.css"
|
||||||
],
|
],
|
||||||
"js": [
|
"js": [
|
||||||
"/dist/main.c89a204f.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',
|
'./_includes/**/*.html',
|
||||||
'./_layouts/**/*.html',
|
'./_layouts/**/*.html',
|
||||||
'./assets/**/*.{js,pcss}',
|
'./assets/**/*.{js,pcss}',
|
||||||
|
'./static/css/*.css',
|
||||||
|
'./static/js/*.js',
|
||||||
|
|
||||||
// Explicit exclusions
|
// Explicit exclusions
|
||||||
// '!./_site/**', // Jekyll output directory
|
// '!./_site/**', // Jekyll output directory
|
||||||
|
|||||||
Reference in New Issue
Block a user