mirror of
https://github.com/php-flasher/php-flasher.git
synced 2026-03-31 15:07:47 +01:00
Younes ENNAJI
355 lines
18 KiB
PHP
355 lines
18 KiB
PHP
@extends('layouts.app')
|
|
|
|
@section('title', 'Adapters')
|
|
|
|
@section('content')
|
|
<div class="mb-8">
|
|
<h1 class="section-title">Notification Adapters</h1>
|
|
<p class="section-subtitle">PHPFlasher supports multiple notification libraries. Choose your favorite!</p>
|
|
</div>
|
|
|
|
<div class="space-y-8">
|
|
{{-- Flasher (Default) --}}
|
|
<div class="card">
|
|
<div class="h-2 bg-gradient-to-r from-indigo-500 to-purple-500"></div>
|
|
<div class="card-body">
|
|
<div class="flex flex-col lg:flex-row lg:items-start lg:justify-between gap-6">
|
|
<div class="flex-1">
|
|
<div class="flex items-center space-x-3 mb-4">
|
|
<div class="p-3 bg-indigo-100 rounded-xl">
|
|
<svg class="w-8 h-8 text-indigo-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path>
|
|
</svg>
|
|
</div>
|
|
<div>
|
|
<h2 class="text-2xl font-bold text-gray-800">Flasher</h2>
|
|
<p class="text-gray-500">Default adapter with 17+ themes</p>
|
|
</div>
|
|
</div>
|
|
|
|
<p class="text-gray-600 mb-4">The default PHPFlasher adapter with beautiful built-in themes. No additional JavaScript libraries required.</p>
|
|
|
|
<div class="flex flex-wrap gap-2 mb-6">
|
|
<button onclick="showNotification({type: 'success', message: 'This is the default Flasher notification!', adapter: 'flasher'})"
|
|
class="btn btn-success">Success</button>
|
|
<button onclick="showNotification({type: 'error', message: 'Error notification with Flasher', adapter: 'flasher'})"
|
|
class="btn btn-danger">Error</button>
|
|
<button onclick="showNotification({type: 'warning', message: 'Warning notification with Flasher', adapter: 'flasher'})"
|
|
class="btn btn-warning">Warning</button>
|
|
<button onclick="showNotification({type: 'info', message: 'Info notification with Flasher', adapter: 'flasher'})"
|
|
class="btn btn-info">Info</button>
|
|
</div>
|
|
|
|
<div class="code-block">
|
|
<div class="code-header">
|
|
<span>Installation</span>
|
|
</div>
|
|
<pre class="!m-0"><code class="language-bash">composer require php-flasher/flasher-laravel</code></pre>
|
|
</div>
|
|
|
|
<div class="code-block">
|
|
<div class="code-header">
|
|
<span>Usage</span>
|
|
</div>
|
|
<pre class="!m-0"><code class="language-php">flash()->success('Operation completed!');</code></pre>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- Toastr --}}
|
|
<div class="card">
|
|
<div class="h-2 bg-gradient-to-r from-sky-500 to-blue-500"></div>
|
|
<div class="card-body">
|
|
<div class="flex flex-col lg:flex-row lg:items-start lg:justify-between gap-6">
|
|
<div class="flex-1">
|
|
<div class="flex items-center space-x-3 mb-4">
|
|
<div class="p-3 bg-sky-100 rounded-xl">
|
|
<svg class="w-8 h-8 text-sky-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"></path>
|
|
</svg>
|
|
</div>
|
|
<div>
|
|
<h2 class="text-2xl font-bold text-gray-800">Toastr</h2>
|
|
<p class="text-gray-500">Simple, elegant toast notifications</p>
|
|
</div>
|
|
</div>
|
|
|
|
<p class="text-gray-600 mb-4">Classic toast notifications with smooth animations. One of the most popular notification libraries.</p>
|
|
|
|
<div class="flex flex-wrap gap-2 mb-6">
|
|
<button onclick="showNotification({type: 'success', message: 'Toastr success notification!', adapter: 'toastr'})"
|
|
class="btn btn-success">Success</button>
|
|
<button onclick="showNotification({type: 'error', message: 'Toastr error notification!', adapter: 'toastr'})"
|
|
class="btn btn-danger">Error</button>
|
|
<button onclick="showNotification({type: 'warning', message: 'Toastr warning notification!', adapter: 'toastr'})"
|
|
class="btn btn-warning">Warning</button>
|
|
<button onclick="showNotification({type: 'info', message: 'Toastr info notification!', adapter: 'toastr'})"
|
|
class="btn btn-info">Info</button>
|
|
</div>
|
|
|
|
<div class="code-block">
|
|
<div class="code-header">
|
|
<span>Installation</span>
|
|
</div>
|
|
<pre class="!m-0"><code class="language-bash">composer require php-flasher/flasher-toastr-laravel</code></pre>
|
|
</div>
|
|
|
|
<div class="code-block">
|
|
<div class="code-header">
|
|
<span>Usage</span>
|
|
</div>
|
|
<pre class="!m-0"><code class="language-php">toastr()->success('Data saved successfully!');
|
|
|
|
// With options
|
|
toastr()
|
|
->closeButton()
|
|
->progressBar()
|
|
->positionClass('toast-top-right')
|
|
->success('Profile updated!');</code></pre>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- SweetAlert --}}
|
|
<div class="card">
|
|
<div class="h-2 bg-gradient-to-r from-pink-500 to-rose-500"></div>
|
|
<div class="card-body">
|
|
<div class="flex flex-col lg:flex-row lg:items-start lg:justify-between gap-6">
|
|
<div class="flex-1">
|
|
<div class="flex items-center space-x-3 mb-4">
|
|
<div class="p-3 bg-pink-100 rounded-xl">
|
|
<svg class="w-8 h-8 text-pink-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"></path>
|
|
</svg>
|
|
</div>
|
|
<div>
|
|
<h2 class="text-2xl font-bold text-gray-800">SweetAlert 2</h2>
|
|
<p class="text-gray-500">Beautiful, responsive, customizable alerts</p>
|
|
</div>
|
|
</div>
|
|
|
|
<p class="text-gray-600 mb-4">Feature-rich modal dialogs with confirmations, inputs, and beautiful animations. Perfect for important user interactions.</p>
|
|
|
|
<div class="flex flex-wrap gap-2 mb-6">
|
|
<button onclick="showNotification({type: 'success', message: 'SweetAlert success!', title: 'Success', adapter: 'sweetalert'})"
|
|
class="btn btn-success">Success</button>
|
|
<button onclick="showNotification({type: 'error', message: 'SweetAlert error message', title: 'Error', adapter: 'sweetalert'})"
|
|
class="btn btn-danger">Error</button>
|
|
<button onclick="showNotification({type: 'warning', message: 'Are you sure you want to proceed?', title: 'Warning', adapter: 'sweetalert', options: {showCancelButton: true}})"
|
|
class="btn btn-warning">Confirm Dialog</button>
|
|
<button onclick="showNotification({type: 'info', message: 'Here is some information', title: 'Info', adapter: 'sweetalert'})"
|
|
class="btn btn-info">Info</button>
|
|
</div>
|
|
|
|
<div class="code-block">
|
|
<div class="code-header">
|
|
<span>Installation</span>
|
|
</div>
|
|
<pre class="!m-0"><code class="language-bash">composer require php-flasher/flasher-sweetalert-laravel</code></pre>
|
|
</div>
|
|
|
|
<div class="code-block">
|
|
<div class="code-header">
|
|
<span>Usage</span>
|
|
</div>
|
|
<pre class="!m-0"><code class="language-php">sweetalert()->success('Great job!', 'Success');
|
|
|
|
// Confirmation dialog
|
|
sweetalert()
|
|
->showDenyButton()
|
|
->showCancelButton()
|
|
->confirmButtonText('Save')
|
|
->denyButtonText("Don't save")
|
|
->warning('Do you want to save the changes?');</code></pre>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- Noty --}}
|
|
<div class="card">
|
|
<div class="h-2 bg-gradient-to-r from-emerald-500 to-teal-500"></div>
|
|
<div class="card-body">
|
|
<div class="flex flex-col lg:flex-row lg:items-start lg:justify-between gap-6">
|
|
<div class="flex-1">
|
|
<div class="flex items-center space-x-3 mb-4">
|
|
<div class="p-3 bg-emerald-100 rounded-xl">
|
|
<svg class="w-8 h-8 text-emerald-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
|
|
</svg>
|
|
</div>
|
|
<div>
|
|
<h2 class="text-2xl font-bold text-gray-800">Noty</h2>
|
|
<p class="text-gray-500">Dependency-free notification library</p>
|
|
</div>
|
|
</div>
|
|
|
|
<p class="text-gray-600 mb-4">A flexible, dependency-free notification library with multiple layouts and themes.</p>
|
|
|
|
<div class="flex flex-wrap gap-2 mb-6">
|
|
<button onclick="showNotification({type: 'success', message: 'Noty success notification!', adapter: 'noty'})"
|
|
class="btn btn-success">Success</button>
|
|
<button onclick="showNotification({type: 'error', message: 'Noty error notification!', adapter: 'noty'})"
|
|
class="btn btn-danger">Error</button>
|
|
<button onclick="showNotification({type: 'warning', message: 'Noty warning notification!', adapter: 'noty'})"
|
|
class="btn btn-warning">Warning</button>
|
|
<button onclick="showNotification({type: 'info', message: 'Noty info notification!', adapter: 'noty'})"
|
|
class="btn btn-info">Info</button>
|
|
</div>
|
|
|
|
<div class="code-block">
|
|
<div class="code-header">
|
|
<span>Installation</span>
|
|
</div>
|
|
<pre class="!m-0"><code class="language-bash">composer require php-flasher/flasher-noty-laravel</code></pre>
|
|
</div>
|
|
|
|
<div class="code-block">
|
|
<div class="code-header">
|
|
<span>Usage</span>
|
|
</div>
|
|
<pre class="!m-0"><code class="language-php">noty()->success('Data saved!');
|
|
|
|
// With layout options
|
|
noty()
|
|
->layout('topCenter')
|
|
->timeout(3000)
|
|
->progressBar()
|
|
->info('Processing your request...');</code></pre>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- Notyf --}}
|
|
<div class="card">
|
|
<div class="h-2 bg-gradient-to-r from-amber-500 to-orange-500"></div>
|
|
<div class="card-body">
|
|
<div class="flex flex-col lg:flex-row lg:items-start lg:justify-between gap-6">
|
|
<div class="flex-1">
|
|
<div class="flex items-center space-x-3 mb-4">
|
|
<div class="p-3 bg-amber-100 rounded-xl">
|
|
<svg class="w-8 h-8 text-amber-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"></path>
|
|
</svg>
|
|
</div>
|
|
<div>
|
|
<h2 class="text-2xl font-bold text-gray-800">Notyf</h2>
|
|
<p class="text-gray-500">Minimalist, responsive notifications</p>
|
|
</div>
|
|
</div>
|
|
|
|
<p class="text-gray-600 mb-4">A minimalist JavaScript library for toast notifications. Tiny footprint with smooth animations.</p>
|
|
|
|
<div class="flex flex-wrap gap-2 mb-6">
|
|
<button onclick="showNotification({type: 'success', message: 'Notyf success notification!', adapter: 'notyf'})"
|
|
class="btn btn-success">Success</button>
|
|
<button onclick="showNotification({type: 'error', message: 'Notyf error notification!', adapter: 'notyf'})"
|
|
class="btn btn-danger">Error</button>
|
|
</div>
|
|
|
|
<div class="code-block">
|
|
<div class="code-header">
|
|
<span>Installation</span>
|
|
</div>
|
|
<pre class="!m-0"><code class="language-bash">composer require php-flasher/flasher-notyf-laravel</code></pre>
|
|
</div>
|
|
|
|
<div class="code-block">
|
|
<div class="code-header">
|
|
<span>Usage</span>
|
|
</div>
|
|
<pre class="!m-0"><code class="language-php">notyf()->success('Minimal and clean!');
|
|
|
|
// With options
|
|
notyf()
|
|
->position('x', 'right')
|
|
->position('y', 'top')
|
|
->dismissible(true)
|
|
->ripple(true)
|
|
->success('File uploaded successfully!');</code></pre>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- Comparison Table --}}
|
|
<div class="card mt-8">
|
|
<div class="card-header">
|
|
<h2 class="text-xl font-bold text-gray-800">Adapter Comparison</h2>
|
|
</div>
|
|
<div class="card-body overflow-x-auto">
|
|
<table class="w-full text-left">
|
|
<thead>
|
|
<tr class="border-b border-gray-200">
|
|
<th class="py-3 px-4 font-semibold text-gray-700">Feature</th>
|
|
<th class="py-3 px-4 font-semibold text-gray-700">Flasher</th>
|
|
<th class="py-3 px-4 font-semibold text-gray-700">Toastr</th>
|
|
<th class="py-3 px-4 font-semibold text-gray-700">SweetAlert</th>
|
|
<th class="py-3 px-4 font-semibold text-gray-700">Noty</th>
|
|
<th class="py-3 px-4 font-semibold text-gray-700">Notyf</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="text-gray-600">
|
|
<tr class="border-b border-gray-100">
|
|
<td class="py-3 px-4">Toast Notifications</td>
|
|
<td class="py-3 px-4 text-emerald-600">Yes</td>
|
|
<td class="py-3 px-4 text-emerald-600">Yes</td>
|
|
<td class="py-3 px-4 text-emerald-600">Yes</td>
|
|
<td class="py-3 px-4 text-emerald-600">Yes</td>
|
|
<td class="py-3 px-4 text-emerald-600">Yes</td>
|
|
</tr>
|
|
<tr class="border-b border-gray-100">
|
|
<td class="py-3 px-4">Modal Dialogs</td>
|
|
<td class="py-3 px-4 text-gray-400">No</td>
|
|
<td class="py-3 px-4 text-gray-400">No</td>
|
|
<td class="py-3 px-4 text-emerald-600">Yes</td>
|
|
<td class="py-3 px-4 text-gray-400">No</td>
|
|
<td class="py-3 px-4 text-gray-400">No</td>
|
|
</tr>
|
|
<tr class="border-b border-gray-100">
|
|
<td class="py-3 px-4">Confirmations</td>
|
|
<td class="py-3 px-4 text-gray-400">No</td>
|
|
<td class="py-3 px-4 text-gray-400">No</td>
|
|
<td class="py-3 px-4 text-emerald-600">Yes</td>
|
|
<td class="py-3 px-4 text-emerald-600">Yes</td>
|
|
<td class="py-3 px-4 text-gray-400">No</td>
|
|
</tr>
|
|
<tr class="border-b border-gray-100">
|
|
<td class="py-3 px-4">Progress Bar</td>
|
|
<td class="py-3 px-4 text-emerald-600">Yes</td>
|
|
<td class="py-3 px-4 text-emerald-600">Yes</td>
|
|
<td class="py-3 px-4 text-emerald-600">Yes</td>
|
|
<td class="py-3 px-4 text-emerald-600">Yes</td>
|
|
<td class="py-3 px-4 text-gray-400">No</td>
|
|
</tr>
|
|
<tr class="border-b border-gray-100">
|
|
<td class="py-3 px-4">Built-in Themes</td>
|
|
<td class="py-3 px-4 text-emerald-600">17+</td>
|
|
<td class="py-3 px-4 text-emerald-600">4</td>
|
|
<td class="py-3 px-4 text-emerald-600">1</td>
|
|
<td class="py-3 px-4 text-emerald-600">5</td>
|
|
<td class="py-3 px-4 text-emerald-600">1</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="py-3 px-4">Dependencies</td>
|
|
<td class="py-3 px-4">None</td>
|
|
<td class="py-3 px-4">jQuery</td>
|
|
<td class="py-3 px-4">None</td>
|
|
<td class="py-3 px-4">None</td>
|
|
<td class="py-3 px-4">None</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
@endsection
|