mirror of
https://github.com/php-flasher/php-flasher.git
synced 2026-03-31 15:07:47 +01:00
update laravel first blog article
This commit is contained in:
Younes ENNAJI
@@ -1,5 +1,5 @@
|
|||||||
{
|
{
|
||||||
"dist/main.css": "/dist/main.bc57507d.css",
|
"dist/main.css": "/dist/main.cea611bb.css",
|
||||||
"dist/main.js": "/dist/main.8b056786.js",
|
"dist/main.js": "/dist/main.8b056786.js",
|
||||||
"dist/455.3a7b4474.css": "/dist/455.3a7b4474.css",
|
"dist/455.3a7b4474.css": "/dist/455.3a7b4474.css",
|
||||||
"dist/455.095e6545.js": "/dist/455.095e6545.js",
|
"dist/455.095e6545.js": "/dist/455.095e6545.js",
|
||||||
|
|||||||
@@ -4,7 +4,7 @@ title: "Integrating PHPFlasher with Laravel: A Complete Guide for Beginners"
|
|||||||
date: 2025-03-30 04:09:31
|
date: 2025-03-30 04:09:31
|
||||||
author: yoeunes
|
author: yoeunes
|
||||||
github_username: yoeunes
|
github_username: yoeunes
|
||||||
twitter_username: yoeunes_en
|
twitter_username: yoeunes
|
||||||
linkedin_username: younes--ennaji
|
linkedin_username: younes--ennaji
|
||||||
author_bio: "Creator and maintainer of PHPFlasher. Passionate about building elegant and intuitive PHP libraries that improve developer experience."
|
author_bio: "Creator and maintainer of PHPFlasher. Passionate about building elegant and intuitive PHP libraries that improve developer experience."
|
||||||
tags: [laravel, tutorial, beginner]
|
tags: [laravel, tutorial, beginner]
|
||||||
@@ -14,9 +14,121 @@ reading_time: 10
|
|||||||
featured: true
|
featured: true
|
||||||
---
|
---
|
||||||
|
|
||||||
|
<div class="mb-10">
|
||||||
|
<h3 class="text-xl font-bold text-slate-900 mb-4">Laravel vs. PHPFlasher</h3>
|
||||||
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
|
||||||
|
<div class="bg-white rounded-xl shadow-sm border border-slate-200 overflow-hidden p-6">
|
||||||
|
<h4 class="text-base font-semibold text-slate-900 mb-4 flex items-center">
|
||||||
|
Laravel
|
||||||
|
</h4>
|
||||||
|
<div class="border border-slate-200 rounded-lg overflow-hidden">
|
||||||
|
<div class="bg-slate-100 px-4 py-2 border-b border-slate-200 flex justify-between items-center">
|
||||||
|
<div class="flex items-center space-x-2">
|
||||||
|
<div class="w-3 h-3 rounded-full bg-red-500"></div>
|
||||||
|
<div class="w-3 h-3 rounded-full bg-yellow-400"></div>
|
||||||
|
<div class="w-3 h-3 rounded-full bg-green-500"></div>
|
||||||
|
</div>
|
||||||
|
<div class="text-xs text-slate-500">https://example.com/users</div>
|
||||||
|
<div class="flex items-center space-x-2">
|
||||||
|
<i class="fa-solid fa-refresh text-xs text-slate-400"></i>
|
||||||
|
<i class="fa-solid fa-home text-xs text-slate-400"></i>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="h-64 relative bg-white p-4">
|
||||||
|
<div class="alert alert-success border border-green-200 bg-green-50 text-green-800 p-4 rounded">
|
||||||
|
User updated successfully!
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="mt-6 px-2">
|
||||||
|
<div class="h-6 w-32 bg-slate-200 rounded mb-4"></div>
|
||||||
|
<div class="flex flex-col space-y-3">
|
||||||
|
<div class="h-4 w-full bg-slate-100 rounded"></div>
|
||||||
|
<div class="h-4 w-full bg-slate-100 rounded"></div>
|
||||||
|
<div class="h-4 w-2/3 bg-slate-100 rounded"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<ul class="mt-5 space-y-2 text-sm text-slate-600">
|
||||||
|
<li class="flex items-start">
|
||||||
|
<i class="fa-solid fa-circle-xmark text-red-500 mt-1 mr-2"></i>
|
||||||
|
<span>Static alert takes up valuable page space</span>
|
||||||
|
</li>
|
||||||
|
<li class="flex items-start">
|
||||||
|
<i class="fa-solid fa-circle-xmark text-red-500 mt-1 mr-2"></i>
|
||||||
|
<span>Requires manual template implementation</span>
|
||||||
|
</li>
|
||||||
|
<li class="flex items-start">
|
||||||
|
<i class="fa-solid fa-circle-xmark text-red-500 mt-1 mr-2"></i>
|
||||||
|
<span>No auto-dismissal functionality</span>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="bg-white rounded-xl shadow-sm border border-slate-200 overflow-hidden p-6">
|
||||||
|
<h4 class="text-base font-semibold text-slate-900 mb-4 flex items-center">
|
||||||
|
<span class="font-semibold text-indigo-900">PHP<span class="text-indigo-500">Flasher</span></span>
|
||||||
|
</h4>
|
||||||
|
<div class="border border-slate-200 rounded-lg overflow-hidden">
|
||||||
|
<div class="bg-slate-100 px-4 py-2 border-b border-slate-200 flex justify-between items-center">
|
||||||
|
<div class="flex items-center space-x-2">
|
||||||
|
<div class="w-3 h-3 rounded-full bg-red-500"></div>
|
||||||
|
<div class="w-3 h-3 rounded-full bg-yellow-400"></div>
|
||||||
|
<div class="w-3 h-3 rounded-full bg-green-500"></div>
|
||||||
|
</div>
|
||||||
|
<div class="text-xs text-slate-500">https://example.com/users</div>
|
||||||
|
<div class="flex items-center space-x-2">
|
||||||
|
<i class="fa-solid fa-refresh text-xs text-slate-400"></i>
|
||||||
|
<i class="fa-solid fa-home text-xs text-slate-400"></i>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="h-64 relative bg-white p-4">
|
||||||
|
<!-- Notification toast -->
|
||||||
|
<div class="absolute top-4 right-4 max-w-xs">
|
||||||
|
<div class="bg-white border border-green-100 shadow-lg rounded-lg overflow-hidden mb-0 transform transition-all animate-popup">
|
||||||
|
<div class="p-4 flex">
|
||||||
|
<div class="text-green-500 mr-3 pt-0.5">
|
||||||
|
<i class="fa-solid fa-circle-check text-xl"></i>
|
||||||
|
</div>
|
||||||
|
<div class="text-sm text-slate-600">User updated successfully!</div>
|
||||||
|
</div>
|
||||||
|
<div class="h-1 bg-green-100">
|
||||||
|
<div class="h-full bg-green-500 w-3/4 animate-shrink"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Page content -->
|
||||||
|
<div class="mt-6 px-2">
|
||||||
|
<div class="h-6 w-32 bg-slate-200 rounded mb-4"></div>
|
||||||
|
<div class="flex flex-col space-y-3">
|
||||||
|
<div class="h-4 w-full bg-slate-100 rounded"></div>
|
||||||
|
<div class="h-4 w-full bg-slate-100 rounded"></div>
|
||||||
|
<div class="h-4 w-2/3 bg-slate-100 rounded"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<ul class="mt-5 space-y-2 text-sm text-slate-600">
|
||||||
|
<li class="flex items-start">
|
||||||
|
<i class="fa-solid fa-circle-check text-green-500 mt-1 mr-2"></i>
|
||||||
|
<span>Elegant toast notification that preserves layout</span>
|
||||||
|
</li>
|
||||||
|
<li class="flex items-start">
|
||||||
|
<i class="fa-solid fa-circle-check text-green-500 mt-1 mr-2"></i>
|
||||||
|
<span>Zero template modifications required</span>
|
||||||
|
</li>
|
||||||
|
<li class="flex items-start">
|
||||||
|
<i class="fa-solid fa-circle-check text-green-500 mt-1 mr-2"></i>
|
||||||
|
<span>Auto-dismissal with visual countdown</span>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="mb-8">
|
<div class="mb-8">
|
||||||
<p class="text-lg text-slate-600 leading-relaxed">
|
<p class="text-lg text-slate-600 leading-relaxed">
|
||||||
Laravel is one of the most popular PHP frameworks, known for its elegant syntax and developer-friendly features.
|
|
||||||
Adding flash notifications to your Laravel application becomes incredibly straightforward with <span class="font-semibold text-indigo-900">PHP<span class="text-indigo-500">Flasher</span></span>.
|
Adding flash notifications to your Laravel application becomes incredibly straightforward with <span class="font-semibold text-indigo-900">PHP<span class="text-indigo-500">Flasher</span></span>.
|
||||||
In this complete guide, you'll learn everything you need to know to get started with <span class="font-semibold text-indigo-900">PHP<span class="text-indigo-500">Flasher</span></span> v2 in your Laravel projects.
|
In this complete guide, you'll learn everything you need to know to get started with <span class="font-semibold text-indigo-900">PHP<span class="text-indigo-500">Flasher</span></span> v2 in your Laravel projects.
|
||||||
</p>
|
</p>
|
||||||
@@ -68,11 +180,11 @@ featured: true
|
|||||||
<ul class="space-y-2">
|
<ul class="space-y-2">
|
||||||
<li class="flex items-start">
|
<li class="flex items-start">
|
||||||
<i class="fa-solid fa-check text-green-500 mt-1 mr-2"></i>
|
<i class="fa-solid fa-check text-green-500 mt-1 mr-2"></i>
|
||||||
<span>Framework agnostic with dedicated integrations</span>
|
<span>Framework-agnostic with dedicated Laravel integration</span>
|
||||||
</li>
|
</li>
|
||||||
<li class="flex items-start">
|
<li class="flex items-start">
|
||||||
<i class="fa-solid fa-check text-green-500 mt-1 mr-2"></i>
|
<i class="fa-solid fa-check text-green-500 mt-1 mr-2"></i>
|
||||||
<span>Beautiful toast notifications out of the box</span>
|
<span>Beautiful toast notifications without any extra CSS</span>
|
||||||
</li>
|
</li>
|
||||||
<li class="flex items-start">
|
<li class="flex items-start">
|
||||||
<i class="fa-solid fa-check text-green-500 mt-1 mr-2"></i>
|
<i class="fa-solid fa-check text-green-500 mt-1 mr-2"></i>
|
||||||
@@ -80,30 +192,30 @@ featured: true
|
|||||||
</li>
|
</li>
|
||||||
<li class="flex items-start">
|
<li class="flex items-start">
|
||||||
<i class="fa-solid fa-check text-green-500 mt-1 mr-2"></i>
|
<i class="fa-solid fa-check text-green-500 mt-1 mr-2"></i>
|
||||||
<span>Multiple notification libraries support</span>
|
<span>Support for multiple notification libraries</span>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
<div class="p-6">
|
<div class="p-6">
|
||||||
<h3 class="text-lg font-semibold text-slate-900 mb-3 flex items-center">
|
<h3 class="text-lg font-semibold text-slate-900 mb-3 flex items-center">
|
||||||
<i class="fa-duotone fa-rocket text-indigo-500 mr-2"></i> Why Developers Love It
|
<i class="fa-duotone fa-heart-pulse text-pink-500 mr-2"></i> Why Developers Love It
|
||||||
</h3>
|
</h3>
|
||||||
<ul class="space-y-2">
|
<ul class="space-y-2">
|
||||||
<li class="flex items-start">
|
<li class="flex items-start">
|
||||||
<i class="fa-solid fa-heart text-pink-500 mt-1 mr-2"></i>
|
<i class="fa-solid fa-heart text-pink-500 mt-1 mr-2"></i>
|
||||||
<span>Simple, intuitive API for quick implementation</span>
|
<span>Single line of code for beautiful notifications</span>
|
||||||
</li>
|
</li>
|
||||||
<li class="flex items-start">
|
<li class="flex items-start">
|
||||||
<i class="fa-solid fa-heart text-pink-500 mt-1 mr-2"></i>
|
<i class="fa-solid fa-heart text-pink-500 mt-1 mr-2"></i>
|
||||||
<span>Highly customizable appearance and behavior</span>
|
<span>Zero configuration needed to get started</span>
|
||||||
</li>
|
</li>
|
||||||
<li class="flex items-start">
|
<li class="flex items-start">
|
||||||
<i class="fa-solid fa-heart text-pink-500 mt-1 mr-2"></i>
|
<i class="fa-solid fa-heart text-pink-500 mt-1 mr-2"></i>
|
||||||
<span>Works seamlessly with all major PHP frameworks</span>
|
<span>Works seamlessly with all modern Laravel versions</span>
|
||||||
</li>
|
</li>
|
||||||
<li class="flex items-start">
|
<li class="flex items-start">
|
||||||
<i class="fa-solid fa-heart text-pink-500 mt-1 mr-2"></i>
|
<i class="fa-solid fa-heart text-pink-500 mt-1 mr-2"></i>
|
||||||
<span>Active development and community support</span>
|
<span>Extensive customization when you need it</span>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
@@ -123,46 +235,45 @@ featured: true
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<h2 class="text-2xl font-bold text-slate-900 mb-4">Installation</h2>
|
<div class="mb-12">
|
||||||
|
<h2 class="text-2xl font-bold text-slate-900 mb-6 border-b border-slate-200 pb-2">Getting Started in Seconds</h2>
|
||||||
|
|
||||||
<p class="mb-6">First, install <span class="font-semibold text-indigo-900">PHP<span class="text-indigo-500">Flasher</span></span> using Composer. The process is extremely simple:</p>
|
<p class="mb-6">First, install <span class="font-semibold text-indigo-900">PHP<span class="text-indigo-500">Flasher</span></span> using Composer. The process is extremely simple:</p>
|
||||||
|
|
||||||
<div class="bg-slate-800 rounded-lg overflow-hidden mb-8">
|
<div class="bg-slate-800 rounded-lg overflow-hidden mb-8">
|
||||||
<div class="flex items-center justify-between px-4 py-2 bg-slate-900">
|
<div class="flex items-center justify-between px-4 py-2 bg-slate-900">
|
||||||
<div class="text-xs text-slate-200">Terminal</div>
|
<div class="text-xs text-slate-200">Terminal</div>
|
||||||
<div class="flex space-x-2">
|
<div class="flex space-x-2">
|
||||||
<div class="w-3 h-3 rounded-full bg-red-500"></div>
|
<div class="w-3 h-3 rounded-full bg-red-500"></div>
|
||||||
<div class="w-3 h-3 rounded-full bg-yellow-500"></div>
|
<div class="w-3 h-3 rounded-full bg-yellow-500"></div>
|
||||||
<div class="w-3 h-3 rounded-full bg-green-500"></div>
|
<div class="w-3 h-3 rounded-full bg-green-500"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<pre class="language-bash m-0 p-4 text-slate-50 overflow-x-auto"><code>composer require php-flasher/flasher-laravel</code></pre>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="bg-green-50 border border-green-200 rounded-lg p-4 mb-8 flex items-start">
|
||||||
|
<i class="fa-duotone fa-wand-magic-sparkles text-green-500 text-xl mt-1 mr-3"></i>
|
||||||
|
<div>
|
||||||
|
<p class="text-green-800 font-medium mb-1">Zero Configuration</p>
|
||||||
|
<p class="text-green-700 mb-0">
|
||||||
|
That's it! No service provider registration, no publishing assets, no template modifications. PHPFlasher v2 auto-registers and injects everything you need.
|
||||||
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<pre class="language-bash m-0 p-4 text-slate-50 overflow-x-auto"><code>composer require php-flasher/flasher-laravel</code></pre>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="bg-green-50 border border-green-200 rounded-lg p-4 mb-8 flex items-start">
|
<p class="mb-6">Now you can create beautiful notifications with a single line of code:</p>
|
||||||
<i class="fa-duotone fa-circle-check text-green-500 text-xl mt-1 mr-3"></i>
|
|
||||||
<div>
|
|
||||||
<p class="text-green-800 font-medium mb-1">No configuration needed!</p>
|
|
||||||
<p class="text-green-700 mb-0">
|
|
||||||
The service provider will be automatically registered through Laravel's package discovery. You're ready to go without any additional setup. <span class="font-semibold text-indigo-900">PHP<span class="text-indigo-500">Flasher</span></span> v2 automatically injects all necessary assets.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<h2 class="text-2xl font-bold text-slate-900 mb-4">Basic Usage</h2>
|
<div class="bg-slate-800 rounded-lg overflow-hidden mb-8">
|
||||||
|
<div class="flex items-center justify-between px-4 py-2 bg-slate-900">
|
||||||
<p class="mb-6">Once installed, you can immediately start using <span class="font-semibold text-indigo-900">PHP<span class="text-indigo-500">Flasher</span></span> in your controllers with a single line of code. Here's a simple example:</p>
|
<div class="text-xs text-slate-200">app/Http/Controllers/UserController.php</div>
|
||||||
|
<div class="flex space-x-2">
|
||||||
<div class="bg-slate-800 rounded-lg overflow-hidden mb-8">
|
<div class="w-3 h-3 rounded-full bg-red-500"></div>
|
||||||
<div class="flex items-center justify-between px-4 py-2 bg-slate-900">
|
<div class="w-3 h-3 rounded-full bg-yellow-500"></div>
|
||||||
<div class="text-xs text-slate-200">app/Http/Controllers/UserController.php</div>
|
<div class="w-3 h-3 rounded-full bg-green-500"></div>
|
||||||
<div class="flex space-x-2">
|
</div>
|
||||||
<div class="w-3 h-3 rounded-full bg-red-500"></div>
|
|
||||||
<div class="w-3 h-3 rounded-full bg-yellow-500"></div>
|
|
||||||
<div class="w-3 h-3 rounded-full bg-green-500"></div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<pre class="language-php m-0 p-4 text-slate-50 overflow-x-auto"><code>// In your controller
|
||||||
<pre class="language-php m-0 p-4 text-slate-50 overflow-x-auto"><code>// In your controller
|
|
||||||
public function store(Request $request)
|
public function store(Request $request)
|
||||||
{
|
{
|
||||||
// Process the form submission
|
// Process the form submission
|
||||||
@@ -173,6 +284,7 @@ public function store(Request $request)
|
|||||||
|
|
||||||
return redirect()->route('users.index');
|
return redirect()->route('users.index');
|
||||||
}</code></pre>
|
}</code></pre>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="bg-indigo-50 border border-indigo-100 rounded-lg p-4 mb-8 flex items-start">
|
<div class="bg-indigo-50 border border-indigo-100 rounded-lg p-4 mb-8 flex items-start">
|
||||||
@@ -192,9 +304,9 @@ public function store(Request $request)
|
|||||||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-10">
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-10">
|
||||||
<div class="bg-white rounded-xl shadow-sm border border-slate-200 overflow-hidden">
|
<div class="bg-white rounded-xl shadow-sm border border-slate-200 overflow-hidden">
|
||||||
<div class="bg-red-50 px-6 py-4 border-b border-red-100">
|
<div class="bg-red-50 px-6 py-4 border-b border-red-100">
|
||||||
<h3 class="font-semibold text-slate-900 flex items-center">
|
<h4 class="font-semibold text-slate-900 flex items-center">
|
||||||
<i class="fa-regular fa-circle-xmark text-red-500 mr-2"></i> Traditional Laravel Flash
|
<i class="fa-regular fa-circle-xmark text-red-500 mr-2"></i> Traditional Laravel Flash
|
||||||
</h3>
|
</h4>
|
||||||
</div>
|
</div>
|
||||||
<div class="p-6">
|
<div class="p-6">
|
||||||
<h4 class="text-sm font-semibold text-slate-900 mb-3">In your controller:</h4>
|
<h4 class="text-sm font-semibold text-slate-900 mb-3">In your controller:</h4>
|
||||||
@@ -210,7 +322,7 @@ public function update(Request $request, $id)
|
|||||||
return redirect()->route('users.index');
|
return redirect()->route('users.index');
|
||||||
}</code></pre>
|
}</code></pre>
|
||||||
|
|
||||||
<h4 class="text-sm font-semibold text-slate-900 mb-3">In your Blade template:</h4>
|
<h4 class="text-sm font-semibold text-slate-900 my-3">In your Blade template:</h4>
|
||||||
<pre class="language-html rounded-lg text-sm overflow-x-auto"><code>@if (session('message'))
|
<pre class="language-html rounded-lg text-sm overflow-x-auto"><code>@if (session('message'))
|
||||||
<div class="alert alert-{{ session('alert-type') ?? 'info' }}">
|
<div class="alert alert-{{ session('alert-type') ?? 'info' }}">
|
||||||
{{ session('message') }}
|
{{ session('message') }}
|
||||||
@@ -221,9 +333,9 @@ public function update(Request $request, $id)
|
|||||||
|
|
||||||
<div class="bg-white rounded-xl shadow-sm border border-slate-200 overflow-hidden">
|
<div class="bg-white rounded-xl shadow-sm border border-slate-200 overflow-hidden">
|
||||||
<div class="bg-green-50 px-6 py-4 border-b border-green-100">
|
<div class="bg-green-50 px-6 py-4 border-b border-green-100">
|
||||||
<h3 class="font-semibold text-slate-900 flex items-center">
|
<h4 class="font-semibold text-slate-900 flex items-center">
|
||||||
<i class="fa-regular fa-circle-check text-green-500 mr-2"></i> With <span class="font-semibold text-indigo-900">PHP<span class="text-indigo-500">Flasher</span></span>
|
<i class="fa-regular fa-circle-check text-green-500 mr-2"></i> With <span class="font-semibold text-indigo-900">PHP<span class="text-indigo-500">Flasher</span></span>
|
||||||
</h3>
|
</h4>
|
||||||
</div>
|
</div>
|
||||||
<div class="p-6">
|
<div class="p-6">
|
||||||
<h4 class="text-sm font-semibold text-slate-900 mb-3">In your controller:</h4>
|
<h4 class="text-sm font-semibold text-slate-900 mb-3">In your controller:</h4>
|
||||||
@@ -238,131 +350,12 @@ public function update(Request $request, $id)
|
|||||||
return redirect()->route('users.index');
|
return redirect()->route('users.index');
|
||||||
}</code></pre>
|
}</code></pre>
|
||||||
|
|
||||||
<h4 class="text-sm font-semibold text-slate-900 mb-3">In your Blade template:</h4>
|
<h4 class="text-sm font-semibold text-slate-900 my-3">In your Blade template:</h4>
|
||||||
<pre class="language-html rounded-lg text-sm overflow-x-auto"><code>// Nothing needed! PHPFlasher v2 auto-injects everything</code></pre>
|
<pre class="language-html rounded-lg text-sm overflow-x-auto"><code>// Nothing needed! PHPFlasher v2 auto-injects everything</code></pre>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="mb-10">
|
|
||||||
<h3 class="text-xl font-bold text-slate-900 mb-4">Results Comparison</h3>
|
|
||||||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
|
|
||||||
<div class="bg-white rounded-xl shadow-sm border border-slate-200 overflow-hidden p-6">
|
|
||||||
<h4 class="text-base font-semibold text-slate-900 mb-4 flex items-center">
|
|
||||||
<i class="fa-regular fa-circle-xmark text-red-500 mr-2"></i> Traditional Result
|
|
||||||
</h4>
|
|
||||||
<div class="border border-slate-200 rounded-lg overflow-hidden">
|
|
||||||
<div class="bg-slate-100 px-4 py-2 border-b border-slate-200 flex justify-between items-center">
|
|
||||||
<div class="flex items-center space-x-2">
|
|
||||||
<div class="w-3 h-3 rounded-full bg-red-500"></div>
|
|
||||||
<div class="w-3 h-3 rounded-full bg-yellow-400"></div>
|
|
||||||
<div class="w-3 h-3 rounded-full bg-green-500"></div>
|
|
||||||
</div>
|
|
||||||
<div class="text-xs text-slate-500">https://example.com/users</div>
|
|
||||||
<div class="flex items-center space-x-2">
|
|
||||||
<i class="fa-solid fa-refresh text-xs text-slate-400"></i>
|
|
||||||
<i class="fa-solid fa-home text-xs text-slate-400"></i>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="h-64 relative bg-white p-4">
|
|
||||||
<div class="alert alert-success border border-green-200 bg-green-50 text-green-800 p-4 rounded">
|
|
||||||
User updated successfully!
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="mt-6 px-2">
|
|
||||||
<div class="h-6 w-32 bg-slate-200 rounded mb-4"></div>
|
|
||||||
<div class="flex flex-col space-y-3">
|
|
||||||
<div class="h-4 w-full bg-slate-100 rounded"></div>
|
|
||||||
<div class="h-4 w-full bg-slate-100 rounded"></div>
|
|
||||||
<div class="h-4 w-2/3 bg-slate-100 rounded"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<ul class="mt-4 text-sm text-slate-600 space-y-2">
|
|
||||||
<li class="flex items-start">
|
|
||||||
<i class="fa-solid fa-minus text-slate-400 mt-1 mr-2"></i>
|
|
||||||
<span>Static alert that doesn't disappear</span>
|
|
||||||
</li>
|
|
||||||
<li class="flex items-start">
|
|
||||||
<i class="fa-solid fa-minus text-slate-400 mt-1 mr-2"></i>
|
|
||||||
<span>Takes up permanent space in your layout</span>
|
|
||||||
</li>
|
|
||||||
<li class="flex items-start">
|
|
||||||
<i class="fa-solid fa-minus text-slate-400 mt-1 mr-2"></i>
|
|
||||||
<span>Basic styling with limited customization</span>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="bg-white rounded-xl shadow-sm border border-slate-200 overflow-hidden p-6">
|
|
||||||
<h4 class="text-base font-semibold text-slate-900 mb-4 flex items-center">
|
|
||||||
<i class="fa-regular fa-circle-check text-green-500 mr-2"></i> <span class="font-semibold text-indigo-900">PHP<span class="text-indigo-500">Flasher</span></span> Result
|
|
||||||
</h4>
|
|
||||||
<div class="border border-slate-200 rounded-lg overflow-hidden">
|
|
||||||
<div class="bg-slate-100 px-4 py-2 border-b border-slate-200 flex justify-between items-center">
|
|
||||||
<div class="flex items-center space-x-2">
|
|
||||||
<div class="w-3 h-3 rounded-full bg-red-500"></div>
|
|
||||||
<div class="w-3 h-3 rounded-full bg-yellow-400"></div>
|
|
||||||
<div class="w-3 h-3 rounded-full bg-green-500"></div>
|
|
||||||
</div>
|
|
||||||
<div class="text-xs text-slate-500">https://example.com/users</div>
|
|
||||||
<div class="flex items-center space-x-2">
|
|
||||||
<i class="fa-solid fa-refresh text-xs text-slate-400"></i>
|
|
||||||
<i class="fa-solid fa-home text-xs text-slate-400"></i>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="h-64 relative bg-white p-4">
|
|
||||||
<!-- Notification toast -->
|
|
||||||
<div class="absolute top-4 right-4 max-w-xs">
|
|
||||||
<div class="bg-white border border-green-100 shadow-lg rounded-lg overflow-hidden mb-0 transform transition-all animate-popup">
|
|
||||||
<div class="px-4 py-2 bg-green-500 flex justify-between items-center">
|
|
||||||
<div class="text-white font-medium text-sm">Success</div>
|
|
||||||
<button class="text-white opacity-70 hover:opacity-100">
|
|
||||||
<i class="fa-solid fa-xmark text-xs"></i>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
<div class="p-4 flex">
|
|
||||||
<div class="text-green-500 mr-3 pt-0.5">
|
|
||||||
<i class="fa-solid fa-circle-check text-xl"></i>
|
|
||||||
</div>
|
|
||||||
<div class="text-sm text-slate-600">User updated successfully!</div>
|
|
||||||
</div>
|
|
||||||
<div class="h-1 bg-green-100">
|
|
||||||
<div class="h-full bg-green-500 w-3/4 animate-shrink"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Page content -->
|
|
||||||
<div class="mt-6 px-2">
|
|
||||||
<div class="h-6 w-32 bg-slate-200 rounded mb-4"></div>
|
|
||||||
<div class="flex flex-col space-y-3">
|
|
||||||
<div class="h-4 w-full bg-slate-100 rounded"></div>
|
|
||||||
<div class="h-4 w-full bg-slate-100 rounded"></div>
|
|
||||||
<div class="h-4 w-2/3 bg-slate-100 rounded"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<ul class="mt-4 text-sm text-slate-600 space-y-2">
|
|
||||||
<li class="flex items-start">
|
|
||||||
<i class="fa-solid fa-check text-green-500 mt-1 mr-2"></i>
|
|
||||||
<span>Toast notification with auto-dismiss</span>
|
|
||||||
</li>
|
|
||||||
<li class="flex items-start">
|
|
||||||
<i class="fa-solid fa-check text-green-500 mt-1 mr-2"></i>
|
|
||||||
<span>Doesn't interfere with page layout</span>
|
|
||||||
</li>
|
|
||||||
<li class="flex items-start">
|
|
||||||
<i class="fa-solid fa-check text-green-500 mt-1 mr-2"></i>
|
|
||||||
<span>Beautiful styling with animations</span>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
@keyframes popup {
|
@keyframes popup {
|
||||||
0% { opacity: 0; transform: translateY(-20px); }
|
0% { opacity: 0; transform: translateY(-20px); }
|
||||||
@@ -533,7 +526,7 @@ public function update(Request $request, $id)
|
|||||||
<div class="w-3 h-3 rounded-full bg-green-500"></div>
|
<div class="w-3 h-3 rounded-full bg-green-500"></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<pre class="language-php m-0 p-4 text-slate-50 overflow-x-auto"><code><?php
|
<pre class="language-php m-0 p-4 text-slate-50 overflow-x-auto"><code><?php
|
||||||
|
|
||||||
declare(strict_types=1);
|
declare(strict_types=1);
|
||||||
|
|
||||||
|
|||||||
Vendored
+1
-1
@@ -2,7 +2,7 @@
|
|||||||
"entrypoints": {
|
"entrypoints": {
|
||||||
"main": {
|
"main": {
|
||||||
"css": [
|
"css": [
|
||||||
"/dist/main.bc57507d.css"
|
"/dist/main.cea611bb.css"
|
||||||
],
|
],
|
||||||
"js": [
|
"js": [
|
||||||
"/dist/main.8b056786.js"
|
"/dist/main.8b056786.js"
|
||||||
|
|||||||
File diff suppressed because one or more lines are too long
Reference in New Issue
Block a user