You've already forked php-flasher
mirror of
https://github.com/php-flasher/php-flasher.git
synced 2026-04-05 12:32:55 +01:00
Younes ENNAJI
@@ -1,5 +1,5 @@
|
||||
{
|
||||
"dist/main.css": "/dist/main.e2741770.css",
|
||||
"dist/main.css": "/dist/main.047f18a1.css",
|
||||
"dist/main.js": "/dist/main.855339d4.js",
|
||||
"dist/455.3a7b4474.css": "/dist/455.3a7b4474.css",
|
||||
"dist/455.17bc016b.js": "/dist/455.17bc016b.js",
|
||||
|
||||
@@ -9,34 +9,51 @@
|
||||
<div class="space-y-4">
|
||||
<div>
|
||||
<label for="title" class="block text-sm font-semibold text-gray-700">Title</label>
|
||||
<input id="title" type="text" data-playground-target="title" value="Information" class="mt-2 block w-full rounded-lg border border-gray-300 shadow-sm focus:border-indigo-600 focus:ring-2 focus:ring-indigo-500 focus:ring-opacity-50 text-lg px-4 py-2"/>
|
||||
<input id="title" type="text" data-playground-target="title" value="Information"
|
||||
class="mt-2 block w-full rounded-lg border border-gray-300 shadow-sm focus:border-indigo-600 focus:ring-2 focus:ring-indigo-500 focus:ring-opacity-50 text-lg px-4 py-2" />
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label for="message" class="block text-sm font-semibold text-gray-700">Message</label>
|
||||
<input id="message" type="text" data-playground-target="message" value="Welcome to PHPFlasher!" class="mt-2 block w-full rounded-lg border border-gray-300 shadow-sm focus:border-indigo-600 focus:ring-2 focus:ring-indigo-500 focus:ring-opacity-50 text-lg px-4 py-2"/>
|
||||
<input id="message" type="text" data-playground-target="message" value="Welcome to PHPFlasher!"
|
||||
class="mt-2 block w-full rounded-lg border border-gray-300 shadow-sm focus:border-indigo-600 focus:ring-2 focus:ring-indigo-500 focus:ring-opacity-50 text-lg px-4 py-2" />
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="block text-sm font-semibold text-gray-700">Type</label>
|
||||
<div id="type-options" class="mt-4 flex space-x-4">
|
||||
<button type="button" class="py-1 px-4 rounded-md text-white bg-blue-600 hover:bg-blue-700 focus:ring-2 focus:ring-offset-2 focus:ring-blue-500" data-action="click->playground#selectType" data-value="info">info</button>
|
||||
<button type="button" class="py-1 px-4 rounded-md text-white bg-yellow-500 hover:bg-yellow-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-yellow-500" data-action="click->playground#selectType" data-value="warning">warning</button>
|
||||
<button type="button" class="py-1 px-4 rounded-md text-white bg-red-600 hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500" data-action="click->playground#selectType" data-value="error">error</button>
|
||||
<button type="button" class="py-1 px-4 rounded-md text-white bg-green-600 hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500" data-action="click->playground#selectType" data-value="success">success</button>
|
||||
<button type="button"
|
||||
class="py-1 px-4 rounded-md text-white bg-blue-600 hover:bg-blue-700 focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
|
||||
data-action="click->playground#selectType" data-value="info">info
|
||||
</button>
|
||||
<button type="button"
|
||||
class="py-1 px-4 rounded-md text-white bg-yellow-500 hover:bg-yellow-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-yellow-500"
|
||||
data-action="click->playground#selectType" data-value="warning">warning
|
||||
</button>
|
||||
<button type="button"
|
||||
class="py-1 px-4 rounded-md text-white bg-red-600 hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500"
|
||||
data-action="click->playground#selectType" data-value="error">error
|
||||
</button>
|
||||
<button type="button"
|
||||
class="py-1 px-4 rounded-md text-white bg-green-600 hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500"
|
||||
data-action="click->playground#selectType" data-value="success">success
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div data-playground-target="optionsContainer" class="space-y-4"></div>
|
||||
|
||||
<button data-action="click->playground#showNotification" class="w-full bg-indigo-500 hover:bg-indigo-700 text-white font-bold py-3 px-4 rounded-md transition ease-in-out duration-150">
|
||||
<button data-action="click->playground#showNotification"
|
||||
class="w-full bg-indigo-500 hover:bg-indigo-700 text-white font-bold py-3 px-4 rounded-md transition ease-in-out duration-150">
|
||||
Show Notification
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg">
|
||||
<pre id="php-code-snippet" class="text-white overflow-auto"><code data-playground-target="codeSnippet" class="language-php"></code></pre>
|
||||
<pre id="php-code-snippet" class="text-white overflow-auto"><code data-playground-target="codeSnippet"
|
||||
class="language-php"></code></pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -0,0 +1,13 @@
|
||||
<div class="{{ include.theme | default: 'fl-flasher' }} {{ include.theme | default: 'fl' }}-{{ include.type }} {{ include.theme | default: 'fl' }}-container {{ include.theme | default: 'fl' }}-show hover:-translate-y-0.5 transition-all duration-200" role="{{ include.role }}" aria-live="{{ include.aria-live }}" aria-atomic="true">
|
||||
<div class="{{ include.theme | default: 'fl' }}-content">
|
||||
<div class="{{ include.theme | default: 'fl' }}-icon"></div>
|
||||
<div>
|
||||
<strong class="{{ include.theme | default: 'fl' }}-title">{{ include.title }}</strong>
|
||||
<span class="{{ include.theme | default: 'fl' }}-message">{{ include.message }}</span>
|
||||
</div>
|
||||
<button class="{{ include.theme | default: 'fl' }}-close" aria-label="Close {{ include.type }} message">×</button>
|
||||
</div>
|
||||
<span class="{{ include.theme | default: 'fl' }}-progress-bar">
|
||||
<span class="{{ include.theme | default: 'fl' }}-progress" style="width: {{ include.progress }}%;"></span>
|
||||
</span>
|
||||
</div>
|
||||
@@ -0,0 +1,62 @@
|
||||
<!-- Flasher Theme Notifications -->
|
||||
<div class="p-3 grid grid-cols-1 md:grid-cols-2 gap-3">
|
||||
<!-- Success -->
|
||||
<div class="fl-flasher fl-success fl-container fl-show hover:-translate-y-0.5 transition-all duration-200" role="status" aria-live="polite" aria-atomic="true">
|
||||
<div class="fl-content">
|
||||
<div class="fl-icon"></div>
|
||||
<div>
|
||||
<strong class="fl-title">Success</strong>
|
||||
<span class="fl-message">Data has been saved successfully!</span>
|
||||
</div>
|
||||
<button class="fl-close" aria-label="Close success message">×</button>
|
||||
</div>
|
||||
<span class="fl-progress-bar">
|
||||
<span class="fl-progress" style="width: 40%;"></span>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<!-- Error -->
|
||||
<div class="fl-flasher fl-error fl-container fl-show hover:-translate-y-0.5 transition-all duration-200" role="alert" aria-live="assertive" aria-atomic="true">
|
||||
<div class="fl-content">
|
||||
<div class="fl-icon"></div>
|
||||
<div>
|
||||
<strong class="fl-title">Error</strong>
|
||||
<span class="fl-message">Oops! Something went wrong!</span>
|
||||
</div>
|
||||
<button class="fl-close" aria-label="Close error message">×</button>
|
||||
</div>
|
||||
<span class="fl-progress-bar">
|
||||
<span class="fl-progress" style="width: 25%;"></span>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<!-- Warning -->
|
||||
<div class="fl-flasher fl-warning fl-container fl-show hover:-translate-y-0.5 transition-all duration-200" role="alert" aria-live="assertive" aria-atomic="true">
|
||||
<div class="fl-content">
|
||||
<div class="fl-icon"></div>
|
||||
<div>
|
||||
<strong class="fl-title">Warning</strong>
|
||||
<span class="fl-message">Are you sure you want to proceed?</span>
|
||||
</div>
|
||||
<button class="fl-close" aria-label="Close warning message">×</button>
|
||||
</div>
|
||||
<span class="fl-progress-bar">
|
||||
<span class="fl-progress" style="width: 10%;"></span>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<!-- Info -->
|
||||
<div class="fl-flasher fl-info fl-container fl-show hover:-translate-y-0.5 transition-all duration-200" role="status" aria-live="polite" aria-atomic="true">
|
||||
<div class="fl-content">
|
||||
<div class="fl-icon"></div>
|
||||
<div>
|
||||
<strong class="fl-title">Information</strong>
|
||||
<span class="fl-message">Welcome back!</span>
|
||||
</div>
|
||||
<button class="fl-close" aria-label="Close info message">×</button>
|
||||
</div>
|
||||
<span class="fl-progress-bar">
|
||||
<span class="fl-progress" style="width: 5%;"></span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
@@ -19,8 +19,6 @@
|
||||
<!-- Main Content -->
|
||||
<main class="flex-1 min-w-0">
|
||||
<div class="bg-white rounded-xl shadow-sm border border-slate-200 p-6">
|
||||
{% include breadcrumb.html %}
|
||||
|
||||
<div class="prose prose-slate max-w-none">
|
||||
{% include github-cta.html %}
|
||||
{{ content }}
|
||||
|
||||
@@ -0,0 +1,444 @@
|
||||
---
|
||||
layout: default
|
||||
---
|
||||
|
||||
<!-- Refined Hero Section -->
|
||||
<header class="flex items-center justify-between pt-2 pb-6 mb-6 border-b border-slate-100">
|
||||
<div class="flex items-center">
|
||||
<div class="mr-4 relative">
|
||||
<div class="w-10 h-10 rounded-lg bg-slate-50 flex items-center justify-center">
|
||||
<i class="fa-solid {{ page.icon }} text-{{ page.color }}-600 text-lg"></i>
|
||||
</div>
|
||||
<div class="absolute -bottom-1 -right-1 w-4 h-4 rounded-full bg-{{ page.color }}-100 flex items-center justify-center">
|
||||
<div class="w-2 h-2 rounded-full bg-{{ page.color }}-500"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<h1 class="text-2xl font-semibold text-slate-800 tracking-tight mb-0.5">{{ page.title }}</h1>
|
||||
<p class="text-sm text-slate-500">{{ page.subtitle }}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="hidden sm:flex gap-2">
|
||||
<button
|
||||
onclick="flasher.use('{{ page.theme_name }}').success('Success! Your changes were saved.', 'Well Done')"
|
||||
class="px-3 py-1.5 text-xs bg-white hover:bg-gray-50 text-slate-700 rounded-full border border-slate-200 transition-colors flex items-center"
|
||||
>
|
||||
<i class="fa-regular fa-circle-check text-green-500 mr-1.5"></i> Try Success
|
||||
</button>
|
||||
<button
|
||||
onclick="flasher.use('{{ page.theme_name }}').error('Something went wrong. Please try again.')"
|
||||
class="px-3 py-1.5 text-xs bg-white hover:bg-gray-50 text-slate-700 rounded-full border border-slate-200 transition-colors flex items-center"
|
||||
>
|
||||
<i class="fa-regular fa-circle-xmark text-red-500 mr-1.5"></i> Try Error
|
||||
</button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- Demo buttons for mobile -->
|
||||
<div class="sm:hidden flex gap-2 mb-6">
|
||||
<button
|
||||
onclick="flasher.use('{{ page.theme_name }}').success('Success! Your changes were saved.', 'Well Done')"
|
||||
class="flex-1 py-1.5 px-0 text-xs bg-white text-slate-600 rounded-full border border-slate-200 flex items-center justify-center"
|
||||
>
|
||||
<i class="fa-regular fa-circle-check text-green-500 mr-1"></i> Success
|
||||
</button>
|
||||
<button
|
||||
onclick="flasher.use('{{ page.theme_name }}').error('Something went wrong. Please try again.')"
|
||||
class="flex-1 py-1.5 px-0 text-xs bg-white text-slate-600 rounded-full border border-slate-200 flex items-center justify-center"
|
||||
>
|
||||
<i class="fa-regular fa-circle-xmark text-red-500 mr-1"></i> Error
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Notification Examples with darker background -->
|
||||
<section class="bg-slate-50 rounded-lg shadow-sm overflow-hidden mb-8">
|
||||
{% include themes/{{ page.theme_name }}.html %}
|
||||
</section>
|
||||
|
||||
<!-- Configuration Section -->
|
||||
<section class="mb-8">
|
||||
<div class="flex items-center mb-3">
|
||||
<h2 class="text-sm font-medium text-slate-800">Configuration</h2>
|
||||
<div class="h-px bg-slate-100 flex-grow ml-3"></div>
|
||||
</div>
|
||||
|
||||
<div class="bg-white rounded-lg border border-slate-100 shadow-sm overflow-hidden">
|
||||
<div class="flex border-b border-slate-100 overflow-x-auto">
|
||||
<button
|
||||
class="tab-button px-4 py-2 text-xs text-slate-800 font-medium border-b-2 border-{{ page.color }}-500 whitespace-nowrap focus:outline-none transition-colors"
|
||||
data-framework="laravel"
|
||||
>
|
||||
Laravel
|
||||
</button>
|
||||
<button
|
||||
class="tab-button px-4 py-2 text-xs text-slate-500 hover:text-slate-700 whitespace-nowrap focus:outline-none transition-colors"
|
||||
data-framework="symfony"
|
||||
>
|
||||
Symfony
|
||||
</button>
|
||||
<button
|
||||
class="tab-button px-4 py-2 text-xs text-slate-500 hover:text-slate-700 whitespace-nowrap focus:outline-none transition-colors"
|
||||
data-framework="javascript"
|
||||
>
|
||||
JavaScript
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="tab-content p-4" id="config-content">
|
||||
<div class="flex items-center mb-2 text-slate-800">
|
||||
<i class="fa-brands fa-laravel text-red-500 mr-1.5"></i>
|
||||
<span class="text-xs font-medium">Setting as Default in Laravel</span>
|
||||
</div>
|
||||
<pre class="language-php bg-slate-50 p-3 rounded-md text-xs"><code>// config/flasher.php
|
||||
|
||||
return [
|
||||
'default' => '{{ page.theme_name }}',{% if page.has_assets %}
|
||||
|
||||
'themes' => [
|
||||
'{{ page.theme_name_short }}' => [
|
||||
'scripts' => [
|
||||
'/vendor/flasher/themes/{{ page.theme_name }}.min.js',
|
||||
],
|
||||
'styles' => [
|
||||
'/vendor/flasher/themes/{{ page.theme_name }}.min.css',
|
||||
],
|
||||
],
|
||||
],{% endif %}
|
||||
];</code></pre>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Theme Usage -->
|
||||
<section class="mb-8">
|
||||
<div class="flex items-center mb-3">
|
||||
<h2 class="text-sm font-medium text-slate-800">Theme Usage</h2>
|
||||
<div class="h-px bg-slate-100 flex-grow ml-3"></div>
|
||||
</div>
|
||||
|
||||
<!-- Combined Usage Section -->
|
||||
<div class="bg-white rounded-lg border border-slate-100 shadow-sm overflow-hidden">
|
||||
<!-- Tabs -->
|
||||
<div class="flex border-b border-slate-100">
|
||||
<button
|
||||
class="usage-tab px-4 py-2 text-xs text-slate-800 font-medium border-b-2 border-{{ page.color }}-500 whitespace-nowrap focus:outline-none transition-colors"
|
||||
data-lang="php"
|
||||
>
|
||||
PHP
|
||||
</button>
|
||||
<button
|
||||
class="usage-tab px-4 py-2 text-xs text-slate-500 hover:text-slate-700 whitespace-nowrap focus:outline-none transition-colors"
|
||||
data-lang="js"
|
||||
>
|
||||
JavaScript
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- PHP Content -->
|
||||
<div class="p-4 usage-content" id="php-content">
|
||||
<div class="flex items-center text-xs text-slate-500 mb-2">
|
||||
<div class="w-5 h-5 rounded-full bg-{{ page.color }}-50 flex items-center justify-center mr-1.5">
|
||||
<i class="fa-solid fa-wand-magic-sparkles text-{{ page.color }}-500 text-[10px]"></i>
|
||||
</div>
|
||||
<span class="font-medium text-slate-700">
|
||||
When <span class="font-medium">{{ page.theme_name }}</span> is set as your default theme, you can call methods directly.
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<pre class="language-php bg-slate-50 p-3 rounded-md text-xs mb-6"><code>flash()->success('Your changes have been saved!');</code></pre>
|
||||
|
||||
<div class="flex items-center text-xs text-slate-500 mb-2">
|
||||
<div class="w-5 h-5 rounded-full bg-{{ page.color }}-50 flex items-center justify-center mr-1.5">
|
||||
<i class="fa-solid fa-wand-magic-sparkles text-{{ page.color }}-500 text-[10px]"></i>
|
||||
</div>
|
||||
<span class="font-medium text-slate-700">For specific notifications</span>
|
||||
</div>
|
||||
|
||||
<pre class="language-php bg-slate-50 p-3 rounded-md text-xs"><code>flash()->use('{{ page.theme_name }}')->success('This uses {{ page.title }}');</code></pre>
|
||||
</div>
|
||||
|
||||
<!-- JavaScript Content -->
|
||||
<div class="p-4 usage-content hidden" id="js-content">
|
||||
<div class="flex items-center text-xs text-slate-500 mb-2">
|
||||
<div class="w-5 h-5 rounded-full bg-{{ page.color }}-50 flex items-center justify-center mr-1.5">
|
||||
<i class="fa-solid fa-wand-magic-sparkles text-{{ page.color }}-500 text-[10px]"></i>
|
||||
</div>
|
||||
<span class="font-medium text-slate-700">
|
||||
When <span class="font-medium">{{ page.theme_name }}</span> is set as your default theme, you can call methods directly.
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<pre class="language-javascript bg-slate-50 p-3 rounded-md text-xs mb-6"><code>flasher.success('Your changes have been saved!');</code></pre>
|
||||
|
||||
<div class="flex items-center text-xs text-slate-500 mb-2">
|
||||
<div class="w-5 h-5 rounded-full bg-{{ page.color }}-50 flex items-center justify-center mr-1.5">
|
||||
<i class="fa-solid fa-wand-magic-sparkles text-{{ page.color }}-500 text-[10px]"></i>
|
||||
</div>
|
||||
<span class="font-medium text-slate-700">For specific notifications</span>
|
||||
</div>
|
||||
|
||||
<pre class="language-javascript bg-slate-50 p-3 rounded-md text-xs"><code>flasher.use('{{ page.theme_name }}').success('This uses {{ page.title }}');</code></pre>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Features Grid -->
|
||||
<section class="mb-8">
|
||||
<div class="flex items-center mb-3">
|
||||
<h2 class="text-sm font-medium text-slate-800">Key Features</h2>
|
||||
<div class="h-px bg-slate-100 flex-grow ml-3"></div>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div class="p-4 bg-white rounded-lg border border-slate-100 shadow-sm">
|
||||
<div class="flex items-center mb-3">
|
||||
<div class="w-6 h-6 rounded-full bg-{{ page.color }}-50 flex items-center justify-center mr-2">
|
||||
<i class="fa-solid fa-palette text-{{ page.color }}-500 text-xs"></i>
|
||||
</div>
|
||||
<h3 class="font-medium text-slate-700 text-xs">Visual Design</h3>
|
||||
</div>
|
||||
|
||||
<ul class="space-y-2 ml-4">
|
||||
{% for feature in page.visual_features %}
|
||||
<li class="flex items-start text-xs text-slate-600">
|
||||
<div class="w-4 h-4 rounded-full bg-green-50 flex-shrink-0 flex items-center justify-center mr-2 mt-0.5">
|
||||
<i class="fa-solid fa-check text-green-500 text-[9px]"></i>
|
||||
</div>
|
||||
<span>{{ feature }}</span>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="p-4 bg-white rounded-lg border border-slate-100 shadow-sm">
|
||||
<div class="flex items-center mb-3">
|
||||
<div class="w-6 h-6 rounded-full bg-blue-50 flex items-center justify-center mr-2">
|
||||
<i class="fa-solid fa-universal-access text-blue-500 text-xs"></i>
|
||||
</div>
|
||||
<h3 class="font-medium text-slate-700 text-xs">Accessibility</h3>
|
||||
</div>
|
||||
|
||||
<ul class="space-y-2 ml-4">
|
||||
{% for feature in page.accessibility_features %}
|
||||
<li class="flex items-start text-xs text-slate-600">
|
||||
<div class="w-4 h-4 rounded-full bg-green-50 flex-shrink-0 flex items-center justify-center mr-2 mt-0.5">
|
||||
<i class="fa-solid fa-check text-green-500 text-[9px]"></i>
|
||||
</div>
|
||||
<span>{{ feature }}</span>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Customization Section -->
|
||||
<section class="mb-8">
|
||||
<div class="flex items-center mb-3">
|
||||
<h2 class="text-sm font-medium text-slate-800">Customization</h2>
|
||||
<div class="h-px bg-slate-100 flex-grow ml-3"></div>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 gap-4">
|
||||
<!-- Color Customization -->
|
||||
<div class="bg-white rounded-lg border border-slate-100 shadow-sm">
|
||||
<div class="border-b border-slate-50 px-4 py-2 flex items-center">
|
||||
<i class="fa-solid fa-palette text-{{ page.color }}-400 mr-1.5 text-xs"></i>
|
||||
<h3 class="text-xs font-medium text-slate-700">CSS Variables</h3>
|
||||
</div>
|
||||
<div class="p-4">
|
||||
<pre class="language-css text-xs rounded-md overflow-hidden"><code>{{ page.css_variables }}</code></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- HTML Structure -->
|
||||
<div class="bg-white rounded-lg border border-slate-100 shadow-sm">
|
||||
<div class="border-b border-slate-50 px-4 py-2 flex items-center">
|
||||
<i class="fa-solid fa-code text-blue-400 mr-1.5 text-xs"></i>
|
||||
<h3 class="text-xs font-medium text-slate-700">HTML Structure</h3>
|
||||
</div>
|
||||
<div class="p-4">
|
||||
<pre class="language-html text-xs rounded-md overflow-hidden"><code>{{ page.html_structure | escape }}</code></pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Browser Support -->
|
||||
<section class="mb-8">
|
||||
<div class="flex items-center mb-3">
|
||||
<h2 class="text-sm font-medium text-slate-800">Browser Support</h2>
|
||||
<div class="h-px bg-slate-100 flex-grow ml-3"></div>
|
||||
</div>
|
||||
|
||||
<div class="bg-white rounded-lg border border-slate-100 shadow-sm p-4">
|
||||
<div class="flex flex-wrap justify-center gap-6">
|
||||
<div class="flex flex-col items-center">
|
||||
<div class="w-10 h-10 rounded-full bg-slate-50 flex items-center justify-center mb-1.5">
|
||||
<i class="fa-brands fa-chrome text-green-500 text-lg"></i>
|
||||
</div>
|
||||
<span class="text-xs text-slate-500">Chrome</span>
|
||||
</div>
|
||||
<div class="flex flex-col items-center">
|
||||
<div class="w-10 h-10 rounded-full bg-slate-50 flex items-center justify-center mb-1.5">
|
||||
<i class="fa-brands fa-firefox text-orange-500 text-lg"></i>
|
||||
</div>
|
||||
<span class="text-xs text-slate-500">Firefox</span>
|
||||
</div>
|
||||
<div class="flex flex-col items-center">
|
||||
<div class="w-10 h-10 rounded-full bg-slate-50 flex items-center justify-center mb-1.5">
|
||||
<i class="fa-brands fa-safari text-blue-500 text-lg"></i>
|
||||
</div>
|
||||
<span class="text-xs text-slate-500">Safari</span>
|
||||
</div>
|
||||
<div class="flex flex-col items-center">
|
||||
<div class="w-10 h-10 rounded-full bg-slate-50 flex items-center justify-center mb-1.5">
|
||||
<i class="fa-brands fa-edge text-blue-600 text-lg"></i>
|
||||
</div>
|
||||
<span class="text-xs text-slate-500">Edge</span>
|
||||
</div>
|
||||
<div class="flex flex-col items-center">
|
||||
<div class="w-10 h-10 rounded-full bg-slate-50 flex items-center justify-center mb-1.5">
|
||||
<i class="fa-solid fa-mobile-screen text-slate-600 text-lg"></i>
|
||||
</div>
|
||||
<span class="text-xs text-slate-500">Mobile</span>
|
||||
</div>
|
||||
<div class="flex flex-col items-center">
|
||||
<div class="w-10 h-10 rounded-full bg-slate-50 flex items-center justify-center mb-1.5">
|
||||
<i class="fa-solid fa-moon text-indigo-500 text-lg"></i>
|
||||
</div>
|
||||
<span class="text-xs text-slate-500">Dark</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Help Section (Redesigned) -->
|
||||
<div class="bg-gradient-to-r from-slate-50 to-white rounded-lg shadow-sm border border-slate-100 p-4 mb-6">
|
||||
<div class="flex items-center">
|
||||
<div class="w-10 h-10 rounded-lg bg-{{ page.color }}-50 border border-{{ page.color }}-100 flex items-center justify-center mr-3">
|
||||
<i class="fa-regular fa-life-ring text-{{ page.color }}-500"></i>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="text-sm font-medium text-slate-800 mb-1">Need assistance?</h3>
|
||||
<div class="flex items-center flex-wrap gap-3">
|
||||
<a
|
||||
href="/docs/"
|
||||
class="inline-flex items-center text-xs px-3 py-1 bg-white border border-slate-200 rounded-full text-slate-700 hover:bg-slate-50 transition-colors"
|
||||
>
|
||||
<i class="fa-regular fa-file-lines text-{{ page.color }}-500 mr-1.5"></i>
|
||||
Documentation
|
||||
</a>
|
||||
<a
|
||||
href="https://github.com/php-flasher/php-flasher/discussions"
|
||||
class="inline-flex items-center text-xs px-3 py-1 bg-white border border-slate-200 rounded-full text-slate-700 hover:bg-slate-50 transition-colors"
|
||||
>
|
||||
<i class="fa-regular fa-comments text-{{ page.color }}-500 mr-1.5"></i>
|
||||
Community
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// Tab system with Prism re-highlight
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
// Config tabs
|
||||
const tabButtons = document.querySelectorAll('.tab-button');
|
||||
const tabContent = document.getElementById('config-content');
|
||||
|
||||
const frameworkContents = {
|
||||
'laravel': `<div class="flex items-center mb-2 text-slate-800">
|
||||
<i class="fa-brands fa-laravel text-red-500 mr-1.5"></i>
|
||||
<span class="text-xs font-medium">Setting as Default in Laravel</span>
|
||||
</div>
|
||||
<pre class="language-php bg-slate-50 p-3 rounded-md text-xs"><code>// config/flasher.php
|
||||
|
||||
return [
|
||||
'default' => '{{ page.theme_name }}',{% if page.has_assets %}
|
||||
|
||||
'themes' => [
|
||||
'{{ page.theme_name_short }}' => [
|
||||
'scripts' => [
|
||||
'/vendor/flasher/themes/{{ page.theme_name }}.min.js',
|
||||
],
|
||||
'styles' => [
|
||||
'/vendor/flasher/themes/{{ page.theme_name }}.min.css',
|
||||
],
|
||||
],
|
||||
],{% endif %}
|
||||
];</code></pre>`,
|
||||
|
||||
'symfony': `<div class="flex items-center mb-2 text-slate-800">
|
||||
<i class="fa-brands fa-symfony text-black mr-1.5"></i>
|
||||
<span class="text-xs font-medium">Setting as Default in Symfony</span>
|
||||
</div>
|
||||
<pre class="language-yaml bg-slate-50 p-3 rounded-md text-xs"><code># config/packages/flasher.yaml
|
||||
|
||||
flasher:
|
||||
default: {{ page.theme_name }}{% if page.has_assets %}
|
||||
|
||||
themes:
|
||||
{{ page.theme_name_short }}:
|
||||
scripts:
|
||||
- '/vendor/flasher/themes/{{ page.theme_name }}.min.js'
|
||||
styles:
|
||||
- '/vendor/flasher/themes/{{ page.theme_name }}.min.css'{% endif %}</code></pre>`,
|
||||
|
||||
'javascript': `<div class="flex items-center mb-2 text-slate-800">
|
||||
<i class="fa-brands fa-js text-amber-500 mr-1.5"></i>
|
||||
<span class="text-xs font-medium">Setting as Default in JavaScript</span>
|
||||
</div>
|
||||
<pre class="language-javascript bg-slate-50 p-3 rounded-md text-xs"><code>// Set as default theme
|
||||
flasher.defaultPlugin = '{{ page.theme_name }}';
|
||||
|
||||
// Then use it
|
||||
flasher.success('Well done!');</code></pre>`
|
||||
};
|
||||
|
||||
tabButtons.forEach(button => {
|
||||
button.addEventListener('click', function() {
|
||||
// Update active tab
|
||||
tabButtons.forEach(btn => {
|
||||
btn.classList.remove('border-{{ page.color }}-500', 'text-slate-800', 'font-medium');
|
||||
btn.classList.add('text-slate-500');
|
||||
});
|
||||
this.classList.add('border-b-2', 'border-{{ page.color }}-500', 'text-slate-800', 'font-medium');
|
||||
this.classList.remove('text-slate-500');
|
||||
|
||||
// Update content
|
||||
const framework = this.getAttribute('data-framework');
|
||||
tabContent.innerHTML = frameworkContents[framework];
|
||||
|
||||
// Re-run Prism highlighting
|
||||
if (window.Prism) {
|
||||
Prism.highlightAllUnder(tabContent);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// Usage tabs
|
||||
const usageTabs = document.querySelectorAll('.usage-tab');
|
||||
const usageContents = document.querySelectorAll('.usage-content');
|
||||
|
||||
usageTabs.forEach(tab => {
|
||||
tab.addEventListener('click', function() {
|
||||
// Update active tab
|
||||
usageTabs.forEach(t => {
|
||||
t.classList.remove('border-{{ page.color }}-500', 'text-slate-800', 'font-medium');
|
||||
t.classList.add('text-slate-500');
|
||||
});
|
||||
this.classList.add('border-b-2', 'border-{{ page.color }}-500', 'text-slate-800', 'font-medium');
|
||||
this.classList.remove('text-slate-500');
|
||||
|
||||
// Show correct content
|
||||
const lang = this.getAttribute('data-lang');
|
||||
usageContents.forEach(content => {
|
||||
content.classList.add('hidden');
|
||||
});
|
||||
document.getElementById(lang + '-content').classList.remove('hidden');
|
||||
});
|
||||
});
|
||||
});
|
||||
</script>
|
||||
@@ -32,7 +32,6 @@ a {
|
||||
@apply text-indigo-600;
|
||||
}
|
||||
|
||||
p,
|
||||
ul {
|
||||
@apply mb-4;
|
||||
}
|
||||
|
||||
Vendored
+1
-1
@@ -2,7 +2,7 @@
|
||||
"entrypoints": {
|
||||
"main": {
|
||||
"css": [
|
||||
"/dist/main.e2741770.css"
|
||||
"/dist/main.047f18a1.css"
|
||||
],
|
||||
"js": [
|
||||
"/dist/main.855339d4.js"
|
||||
|
||||
Vendored
+1
File diff suppressed because one or more lines are too long
Vendored
-1
File diff suppressed because one or more lines are too long
+42
-238
@@ -1,242 +1,46 @@
|
||||
---
|
||||
layout: theme
|
||||
permalink: /theme/flasher/
|
||||
title: Flasher Theme
|
||||
description: Explore the default notification theme for PHPFlasher featuring a clean design with distinctive colored borders, clear type indicators, and comprehensive accessibility support.
|
||||
handler: theme.flasher
|
||||
data-controller: theme-flasher
|
||||
subtitle: The default notification system for PHPFlasher
|
||||
description: The default notification theme for PHPFlasher with a clean design, colored borders, and accessible notifications for your web applications.
|
||||
theme_name: flasher
|
||||
theme_name_short: flasher
|
||||
theme_class: fl
|
||||
icon: fa-bolt
|
||||
color: purple
|
||||
has_assets: false
|
||||
|
||||
visual_features:
|
||||
- Color-coded borders for quick identification
|
||||
- Progress indicator shows remaining display time
|
||||
- Responsive design works on all screen sizes
|
||||
|
||||
accessibility_features:
|
||||
- Semantic ARIA attributes for screen readers
|
||||
- Keyboard navigation support
|
||||
- RTL language support
|
||||
|
||||
css_variables: |
|
||||
:root {
|
||||
--fl-success: #10b981; /* Green */
|
||||
--fl-error: #ef4444; /* Red */
|
||||
--fl-warning: #f59e0b; /* Orange */
|
||||
--fl-info: #3b82f6; /* Blue */
|
||||
}
|
||||
|
||||
html_structure: |
|
||||
<div class="fl-flasher fl-[type]" role="[role]" aria-live="[ariaLive]" aria-atomic="true">
|
||||
<div class="fl-content">
|
||||
<div class="fl-icon"></div>
|
||||
<div>
|
||||
<strong class="fl-title">Title text</strong>
|
||||
<span class="fl-message">Message text</span>
|
||||
</div>
|
||||
<button class="fl-close" aria-label="Close">×</button>
|
||||
</div>
|
||||
<span class="fl-progress-bar">
|
||||
<span class="fl-progress"></span>
|
||||
</span>
|
||||
</div>
|
||||
---
|
||||
|
||||
## <i class="fa-solid fa-bolt"></i> Flasher Theme
|
||||
|
||||
The Flasher theme is the default notification theme for PHPFlasher. It provides a classic, clean design with a distinctive colored left border that visually indicates the notification type. This theme balances visual clarity with simplicity, making it suitable for a wide range of applications.
|
||||
|
||||
> <i class="fa-solid fa-circle-info text-blue-400"></i> **Note:**
|
||||
> New to PHPFlasher? Check the [installation guide](/installation/) first.
|
||||
|
||||
## <i class="fa-solid fa-wand-magic-sparkles"></i> Setup
|
||||
|
||||
As the default theme for PHPFlasher, the Flasher theme is automatically available without any additional configuration. However, you can explicitly set it as your default theme:
|
||||
|
||||
### <i class="fa-brands fa-laravel fa-lg text-red-900 mr-1"></i> Laravel
|
||||
|
||||
```php
|
||||
<?php // config/flasher.php
|
||||
|
||||
return [
|
||||
'default' => 'flasher', // Use the default Flasher theme
|
||||
|
||||
// Other configuration options...
|
||||
];
|
||||
```
|
||||
|
||||
### <i class="fa-brands fa-symfony fa-lg text-black mr-1"></i> Symfony
|
||||
|
||||
```yaml
|
||||
# config/packages/flasher.yaml
|
||||
|
||||
flasher:
|
||||
default: flasher # Use the default Flasher theme
|
||||
|
||||
# Other configuration options...
|
||||
```
|
||||
|
||||
### <i class="fa-brands fa-js fa-lg text-yellow-400 mr-1"></i> JavaScript/TypeScript
|
||||
|
||||
```typescript
|
||||
// The Flasher theme is available by default
|
||||
// You can use it directly:
|
||||
flasher.success('Operation completed successfully');
|
||||
|
||||
// Or explicitly specify it:
|
||||
flasher.defaultPlugin = 'flasher';
|
||||
```
|
||||
|
||||
## <i class="fa-solid fa-palette"></i> Notification Types
|
||||
|
||||
Use standard PHPFlasher methods to create notifications with the default Flasher styling:
|
||||
|
||||
{% assign successMessage = 'Operation completed successfully.' %}
|
||||
{% assign errorMessage = 'An error occurred during the operation.' %}
|
||||
{% assign warningMessage = 'This action cannot be undone.' %}
|
||||
{% assign infoMessage = 'New updates are available.' %}
|
||||
|
||||
<script type="text/javascript">
|
||||
messages['#/ flasher types'] = [
|
||||
{
|
||||
handler: 'flasher',
|
||||
type: 'success',
|
||||
message: '{{ successMessage }}',
|
||||
title: 'Success'
|
||||
},
|
||||
{
|
||||
handler: 'flasher',
|
||||
type: 'error',
|
||||
message: '{{ errorMessage }}',
|
||||
title: 'Error'
|
||||
},
|
||||
{
|
||||
handler: 'flasher',
|
||||
type: 'warning',
|
||||
message: '{{ warningMessage }}',
|
||||
title: 'Warning'
|
||||
},
|
||||
{
|
||||
handler: 'flasher',
|
||||
type: 'info',
|
||||
message: '{{ infoMessage }}',
|
||||
title: 'Information'
|
||||
}
|
||||
];
|
||||
</script>
|
||||
|
||||
### PHP
|
||||
|
||||
```php
|
||||
#/ flasher types
|
||||
|
||||
// With Flasher as default theme
|
||||
flash()->success('{{ successMessage }}', 'Success');
|
||||
flash()->error('{{ errorMessage }}', 'Error');
|
||||
flash()->warning('{{ warningMessage }}', 'Warning');
|
||||
flash()->info('{{ infoMessage }}', 'Information');
|
||||
```
|
||||
|
||||
### JavaScript
|
||||
|
||||
```javascript
|
||||
// With Flasher as default theme
|
||||
flasher.success('{{ successMessage }}', 'Success');
|
||||
flasher.error('{{ errorMessage }}', 'Error');
|
||||
flasher.warning('{{ warningMessage }}', 'Warning');
|
||||
flasher.info('{{ infoMessage }}', 'Information');
|
||||
```
|
||||
|
||||
## <i class="fa-solid fa-brush"></i> Customization
|
||||
|
||||
### Using Flasher Theme for Specific Notifications
|
||||
|
||||
If another theme is set as your default, you can use the Flasher theme for specific notifications:
|
||||
|
||||
#### PHP
|
||||
|
||||
```php
|
||||
flash()
|
||||
->use('flasher')
|
||||
->success('This notification uses the default Flasher theme.');
|
||||
```
|
||||
|
||||
#### JavaScript
|
||||
|
||||
```javascript
|
||||
flasher.use('flasher').success('This notification uses the default Flasher theme.');
|
||||
```
|
||||
|
||||
### Custom Colors and Appearance
|
||||
|
||||
The Flasher theme uses CSS variables that can be customized to match your brand:
|
||||
|
||||
```css
|
||||
:root {
|
||||
/* Base colors */
|
||||
--fl-bg-light: #ffffff; /* Light mode background */
|
||||
--fl-bg-dark: rgb(15, 23, 42); /* Dark mode background */
|
||||
--fl-text-light: rgb(75, 85, 99); /* Light mode text */
|
||||
--fl-text-dark: #ffffff; /* Dark mode text */
|
||||
|
||||
/* Type colors */
|
||||
--fl-success: #10b981; /* Success color */
|
||||
--fl-info: #3b82f6; /* Info color */
|
||||
--fl-warning: #f59e0b; /* Warning color */
|
||||
--fl-error: #ef4444; /* Error color */
|
||||
|
||||
/* Legacy support */
|
||||
--background-color: var(--fl-bg-light);
|
||||
--text-color: var(--fl-text-light);
|
||||
--dark-background-color: var(--fl-bg-dark);
|
||||
--dark-text-color: var(--fl-text-dark);
|
||||
--success-color: var(--fl-success);
|
||||
--info-color: var(--fl-info);
|
||||
--warning-color: var(--fl-warning);
|
||||
--error-color: var(--fl-error);
|
||||
}
|
||||
```
|
||||
|
||||
## <i class="fa-solid fa-code"></i> HTML Structure
|
||||
|
||||
The Flasher theme generates notifications with the following HTML structure:
|
||||
|
||||
```html
|
||||
<div class="fl-flasher fl-[type]" role="[role]" aria-live="[ariaLive]" aria-atomic="true">
|
||||
<div class="fl-content">
|
||||
<div class="fl-icon"></div>
|
||||
<div>
|
||||
<strong class="fl-title">Title text</strong>
|
||||
<span class="fl-message">Message text</span>
|
||||
</div>
|
||||
<button class="fl-close" aria-label="Close [type] message">×</button>
|
||||
</div>
|
||||
<span class="fl-progress-bar">
|
||||
<span class="fl-progress"></span>
|
||||
</span>
|
||||
</div>
|
||||
```
|
||||
|
||||
This structure provides a clear hierarchy with a colored left border, icon, title, message, close button, and progress bar.
|
||||
|
||||
## <i class="fa-solid fa-lightbulb"></i> Theme Features
|
||||
|
||||
### Visual Characteristics
|
||||
|
||||
- **Colored Border**: Thick, colored left border that visually identifies the notification type
|
||||
- **Type-Specific Icons**: Each notification type has its own distinctive icon
|
||||
- **Title & Message Support**: Allows for both a title and detailed message
|
||||
- **Progress Bar**: Shows the time remaining before auto-dismiss
|
||||
- **Animation**: Smooth slide-in from the left with a subtle hover effect
|
||||
|
||||
### Design Philosophy
|
||||
|
||||
As the default theme for PHPFlasher, the Flasher theme is designed with these principles:
|
||||
|
||||
1. **Clarity**: The colored left border makes it immediately clear what type of notification is being shown
|
||||
2. **Versatility**: The clean design fits well in a wide range of applications and design systems
|
||||
3. **Accessibility**: High contrast, clear typography, and semantic HTML ensure notifications are accessible
|
||||
4. **Familiarity**: The design follows common notification patterns that users will find intuitive
|
||||
|
||||
### Dark Mode
|
||||
|
||||
The theme automatically adapts to system dark mode preferences without additional configuration, with optimized colors for dark backgrounds.
|
||||
|
||||
### Accessibility Features
|
||||
|
||||
The Flasher theme includes several accessibility features:
|
||||
|
||||
- **ARIA Roles**: Uses appropriate `role="alert"` for error/warning and `role="status"` for success/info
|
||||
- **ARIA Live Regions**: Uses `aria-live="assertive"` for critical messages and `aria-live="polite"` for non-critical messages
|
||||
- **Reduced Motion**: Respects `prefers-reduced-motion` media query
|
||||
- **Keyboard Access**: Close button is fully keyboard accessible
|
||||
- **Color Contrast**: All text meets WCAG 2.1 AA color contrast standards
|
||||
- **RTL Support**: Full right-to-left language support with appropriately mirrored layout
|
||||
|
||||
## <i class="fa-solid fa-browser"></i> Browser Support
|
||||
|
||||
The Flasher theme is compatible with all modern browsers:
|
||||
|
||||
- Chrome (latest)
|
||||
- Firefox (latest)
|
||||
- Safari (latest)
|
||||
- Edge (latest)
|
||||
- Opera (latest)
|
||||
- Mobile browsers on iOS and Android
|
||||
|
||||
## <i class="fa-solid fa-gears"></i> Implementation Details
|
||||
|
||||
The Flasher theme uses modern web technologies:
|
||||
|
||||
- **CSS Variables**: For theme customization and dark mode support
|
||||
- **Flexbox Layout**: For responsive and flexible notification structure
|
||||
- **CSS Animations**: For entrance and hover effects
|
||||
- **Progress Bar**: Shows countdown until notification dismissal
|
||||
- **Media Queries**: For responsive design, dark mode, and reduced motion support
|
||||
- **SCSS Mixins**: For shared functionality across PHPFlasher themes
|
||||
|
||||
All theme files are optimized for production use, with minified JavaScript and CSS to ensure fast loading times.
|
||||
|
||||
@@ -48,11 +48,6 @@
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
/* Remove margin from last notification in a stack */
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
/* Border radius handling for RTL and LTR */
|
||||
&.fl-rtl {
|
||||
border-radius: 0 0.375em 0.375em 0;
|
||||
|
||||
+1
-1
File diff suppressed because one or more lines are too long
+1
-1
File diff suppressed because one or more lines are too long
+1
-1
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
Reference in New Issue
Block a user