This commit is contained in:
Younes ENNAJI
2025-03-17 04:48:54 +00:00
parent 56109d9ed0
commit eb537353c2
4 changed files with 355 additions and 357 deletions
+1 -1
View File
@@ -1,5 +1,5 @@
{ {
"dist/main.css": "/dist/main.32ef094c.css", "dist/main.css": "/dist/main.a73f4b77.css",
"dist/main.js": "/dist/main.3be5bc06.js", "dist/main.js": "/dist/main.3be5bc06.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",
+352 -354
View File
@@ -2,94 +2,94 @@
layout: default layout: default
--- ---
<!-- Refined Hero Section --> <div class="theme-showcase">
<header class="flex items-center justify-between pt-2 pb-6 mb-6 border-b border-slate-100"> <!-- Refined Hero Section -->
<div class="flex items-center"> <header class="flex items-center justify-between pt-2 pb-6 mb-6 border-b border-slate-100">
<div class="mr-4 relative"> <div class="flex items-center">
<div class="w-10 h-10 rounded-lg bg-slate-50 flex items-center justify-center"> <div class="mr-4 relative">
<i class="fa-solid {{ page.icon }} text-{{ page.color }}-600 text-lg"></i> <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>
<div class="absolute -bottom-1 -right-1 w-4 h-4 rounded-full bg-{{ page.color }}-100 flex items-center justify-center"> <div>
<div class="w-2 h-2 rounded-full bg-{{ page.color }}-500"></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> </div>
<div> <div class="hidden sm:flex gap-2">
<h1 class="text-2xl font-semibold text-slate-800 tracking-tight mb-0.5">{{ page.title }}</h1> <button
<p class="text-sm text-slate-500">{{ page.subtitle }}</p> 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> </div>
</div> </header>
<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="container mx-auto px-4">
<div class="sm:hidden flex gap-2 mb-6"> <!-- Demo buttons for mobile -->
<button <div class="sm:hidden flex gap-2 mb-6">
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_short }}.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 <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" onclick="flasher.use('{{ page.theme_name }}').success('Success! Your changes were saved.', 'Well Done')"
data-framework="laravel" 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"
> >
Laravel <i class="fa-regular fa-circle-check text-green-500 mr-1"></i> Success
</button> </button>
<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" onclick="flasher.use('{{ page.theme_name }}').error('Something went wrong. Please try again.')"
data-framework="symfony" 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"
> >
Symfony <i class="fa-regular fa-circle-xmark text-red-500 mr-1"></i> Error
</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> </button>
</div> </div>
<div class="tab-content p-4" id="config-content"> <!-- Notification Examples with darker background -->
<div class="flex items-center mb-2 text-slate-800"> <section class="bg-slate-50 rounded-lg shadow-sm overflow-hidden mb-8">
<i class="fa-brands fa-laravel text-red-500 mr-1.5"></i> {% include themes/{{ page.theme_name_short }}.html %}
<span class="text-xs font-medium">Setting as Default in Laravel</span> </section>
</div>
<pre class="language-php bg-slate-50 p-3 rounded-md text-xs"><code>// config/flasher.php <!-- Configuration Section With Clean Tabs -->
<section class="mb-10">
<h2 class="text-lg font-semibold text-slate-800 mb-4 border-b border-slate-100 pb-2">Configuration</h2>
<div class="bg-white rounded-lg shadow-sm border border-slate-200 overflow-hidden">
<!-- Framework Tabs with Simple Design -->
<div class="flex border-b border-slate-100 overflow-x-auto bg-slate-50">
<button
class="tab-button px-5 py-3 text-sm font-medium text-indigo-600 border-b-2 border-indigo-600 whitespace-nowrap focus:outline-none flex items-center space-x-2"
data-framework="laravel"
>
<i class="fab fa-laravel text-red-500"></i>
<span>Laravel</span>
</button>
<button
class="tab-button px-5 py-3 text-sm font-medium text-slate-600 hover:text-slate-800 whitespace-nowrap focus:outline-none flex items-center space-x-2"
data-framework="symfony"
>
<i class="fab fa-symfony text-black"></i>
<span>Symfony</span>
</button>
<button
class="tab-button px-5 py-3 text-sm font-medium text-slate-600 hover:text-slate-800 whitespace-nowrap focus:outline-none flex items-center space-x-2"
data-framework="javascript"
>
<i class="fab fa-js text-yellow-500"></i>
<span>JavaScript</span>
</button>
</div>
<!-- Tab Content with Clean styling -->
<div class="tab-content" id="config-content">
<pre class="language-php bg-slate-800 text-slate-200 p-4 text-sm overflow-x-auto"><code>// config/flasher.php
return [ return [
'default' => '{{ page.theme_name }}',{% if page.has_assets %} 'default' => '{{ page.theme_name }}',{% if page.has_assets %}
@@ -105,255 +105,250 @@ return [
], ],
],{% endif %} ],{% endif %}
];</code></pre> ];</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> </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> </div>
</section>
<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> <!-- Usage Section with Minimal Design -->
<section class="mb-10">
<h2 class="text-lg font-semibold text-slate-800 mb-4 border-b border-slate-100 pb-2">Usage</h2>
<div class="flex items-center text-xs text-slate-500 mb-2"> <!-- Combined Usage Section with Tabs -->
<div class="w-5 h-5 rounded-full bg-{{ page.color }}-50 flex items-center justify-center mr-1.5"> <div class="bg-white rounded-lg shadow-sm border border-slate-200 overflow-hidden">
<i class="fa-solid fa-wand-magic-sparkles text-{{ page.color }}-500 text-[10px]"></i> <!-- Tabs -->
<div class="flex border-b border-slate-100 bg-slate-50">
<button
class="usage-tab px-5 py-3 text-sm font-medium text-indigo-600 border-b-2 border-indigo-600 whitespace-nowrap focus:outline-none flex items-center space-x-2"
data-lang="php"
>
<i class="fab fa-php text-indigo-500"></i>
<span>PHP</span>
</button>
<button
class="usage-tab px-5 py-3 text-sm font-medium text-slate-600 hover:text-slate-800 whitespace-nowrap focus:outline-none flex items-center space-x-2"
data-lang="js"
>
<i class="fab fa-js text-yellow-500"></i>
<span>JavaScript</span>
</button>
</div> </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> <!-- PHP Content -->
</div> <div class="p-6 usage-content" id="php-content">
<div class="mb-6 bg-slate-50 rounded-lg p-4 border border-slate-200">
<!-- JavaScript Content --> <div class="flex items-center text-sm text-slate-700 mb-2">
<div class="p-4 usage-content hidden" id="js-content"> <div class="w-6 h-6 rounded-full bg-slate-200 flex items-center justify-center mr-2">
<div class="flex items-center text-xs text-slate-500 mb-2"> <i class="fa-solid fa-lightbulb text-slate-600 text-xs"></i>
<div class="w-5 h-5 rounded-full bg-{{ page.color }}-50 flex items-center justify-center mr-1.5"> </div>
<i class="fa-solid fa-wand-magic-sparkles text-{{ page.color }}-500 text-[10px]"></i> <span class="font-medium">When <span class="font-semibold text-indigo-600">{{ page.theme_name }}</span> is set as your default theme:</span>
</div> </div>
<span class="font-medium text-slate-700"> <pre class="language-php bg-slate-800 text-slate-200 p-4 rounded-lg text-sm overflow-x-auto"><code>flash()->success('Your changes have been saved!');</code></pre>
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> </div>
<span>{{ feature }}</span>
</li>
{% endfor %}
</ul>
</div>
<div class="p-4 bg-white rounded-lg border border-slate-100 shadow-sm"> <div class="bg-slate-50 rounded-lg p-4 border border-slate-200">
<div class="flex items-center mb-3"> <div class="flex items-center text-sm text-slate-700 mb-2">
<div class="w-6 h-6 rounded-full bg-blue-50 flex items-center justify-center mr-2"> <div class="w-6 h-6 rounded-full bg-slate-200 flex items-center justify-center mr-2">
<i class="fa-solid fa-universal-access text-blue-500 text-xs"></i> <i class="fa-solid fa-code text-slate-600 text-xs"></i>
</div> </div>
<h3 class="font-medium text-slate-700 text-xs">Accessibility</h3> <span class="font-medium">For specific notifications:</span>
</div> </div>
<pre class="language-php bg-slate-800 text-slate-200 p-4 rounded-lg text-sm overflow-x-auto"><code>flash()->use('{{ page.theme_name }}')->success('This uses {{ page.title }}');</code></pre>
<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> </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> </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) --> <!-- JavaScript Content -->
<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="p-6 usage-content hidden" id="js-content">
<div class="flex items-center"> <div class="mb-6 bg-slate-50 rounded-lg p-4 border border-slate-200">
<div class="w-10 h-10 rounded-lg bg-{{ page.color }}-50 border border-{{ page.color }}-100 flex items-center justify-center mr-3"> <div class="flex items-center text-sm text-slate-700 mb-2">
<i class="fa-regular fa-life-ring text-{{ page.color }}-500"></i> <div class="w-6 h-6 rounded-full bg-slate-200 flex items-center justify-center mr-2">
</div> <i class="fa-solid fa-lightbulb text-slate-600 text-xs"></i>
<div> </div>
<h3 class="text-sm font-medium text-slate-800 mb-1">Need assistance?</h3> <span class="font-medium">When <span class="font-semibold text-indigo-600">{{ page.theme_name }}</span> is set as your default theme:</span>
<div class="flex items-center flex-wrap gap-3"> </div>
<a <pre class="language-javascript bg-slate-800 text-slate-200 p-4 rounded-lg text-sm overflow-x-auto"><code>flasher.success('Your changes have been saved!');</code></pre>
href="/docs/" </div>
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"
> <div class="bg-slate-50 rounded-lg p-4 border border-slate-200">
<i class="fa-regular fa-file-lines text-{{ page.color }}-500 mr-1.5"></i> <div class="flex items-center text-sm text-slate-700 mb-2">
Documentation <div class="w-6 h-6 rounded-full bg-slate-200 flex items-center justify-center mr-2">
</a> <i class="fa-solid fa-code text-slate-600 text-xs"></i>
<a </div>
href="https://github.com/php-flasher/php-flasher/discussions" <span class="font-medium">For specific notifications:</span>
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" </div>
> <pre class="language-javascript bg-slate-800 text-slate-200 p-4 rounded-lg text-sm overflow-x-auto"><code>flasher.use('{{ page.theme_name }}').success('This uses {{ page.title }}');</code></pre>
<i class="fa-regular fa-comments text-{{ page.color }}-500 mr-1.5"></i> </div>
Community </div>
</a> </div>
</section>
<!-- Features Grid with Clean Design -->
<section class="mb-10">
<h2 class="text-lg font-semibold text-slate-800 mb-4 border-b border-slate-100 pb-2">Key Features</h2>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<!-- Visual Design Features -->
<div class="bg-white rounded-lg shadow-sm border border-slate-200 overflow-hidden">
<div class="px-6 py-4 border-b border-slate-100 flex items-center">
<div class="w-8 h-8 rounded-lg bg-slate-100 flex items-center justify-center mr-3">
<i class="fa-solid fa-palette text-indigo-600"></i>
</div>
<h3 class="font-medium text-slate-800">Visual Design</h3>
</div>
<div class="p-6">
<ul class="space-y-3">
{% for feature in page.visual_features %}
<li class="flex items-start">
<div class="w-5 h-5 rounded-full bg-green-50 flex-shrink-0 flex items-center justify-center mr-3 mt-0.5">
<i class="fa-solid fa-check text-green-500 text-xs"></i>
</div>
<span class="text-sm text-slate-600">{{ feature }}</span>
</li>
{% endfor %}
</ul>
</div>
</div>
<!-- Accessibility Features -->
<div class="bg-white rounded-lg shadow-sm border border-slate-200 overflow-hidden">
<div class="px-6 py-4 border-b border-slate-100 flex items-center">
<div class="w-8 h-8 rounded-lg bg-slate-100 flex items-center justify-center mr-3">
<i class="fa-solid fa-universal-access text-indigo-600"></i>
</div>
<h3 class="font-medium text-slate-800">Accessibility</h3>
</div>
<div class="p-6">
<ul class="space-y-3">
{% for feature in page.accessibility_features %}
<li class="flex items-start">
<div class="w-5 h-5 rounded-full bg-green-50 flex-shrink-0 flex items-center justify-center mr-3 mt-0.5">
<i class="fa-solid fa-check text-green-500 text-xs"></i>
</div>
<span class="text-sm text-slate-600">{{ feature }}</span>
</li>
{% endfor %}
</ul>
</div>
</div>
</div>
</section>
<!-- Customization Section with Tab System -->
<section class="mb-10">
<h2 class="text-lg font-semibold text-slate-800 mb-4 border-b border-slate-100 pb-2">Customization</h2>
<!-- CSS Variables Tab -->
<div class="bg-white rounded-lg shadow-sm border border-slate-200 overflow-hidden">
<div class="flex border-b border-slate-100">
<button class="customization-tab px-5 py-3 text-sm font-medium text-indigo-600 border-b-2 border-indigo-600 focus:outline-none" data-tab="css">
<i class="fas fa-palette text-indigo-600 mr-2"></i> CSS Variables
</button>
<button class="customization-tab px-5 py-3 text-sm font-medium text-slate-600 hover:text-slate-800 focus:outline-none" data-tab="html">
<i class="fas fa-code text-slate-600 mr-2"></i> HTML Structure
</button>
</div>
<!-- CSS Variables Content -->
<div id="css-content" class="customization-content">
<div class="bg-slate-800 overflow-hidden">
<pre class="language-css text-sm p-4 overflow-x-auto text-slate-200"><code>{{ page.css_variables }}</code></pre>
</div>
</div>
<!-- HTML Structure Content -->
<div id="html-content" class="customization-content hidden">
<div class="bg-slate-800 overflow-hidden">
<pre class="language-html text-sm p-4 overflow-x-auto text-slate-200"><code>{{ page.html_structure | escape }}</code></pre>
</div>
</div>
</div>
</section>
<!-- Browser Support with Simple Design -->
<section class="mb-10">
<h2 class="text-lg font-semibold text-slate-800 mb-4 border-b border-slate-100 pb-2">Browser Support</h2>
<div class="bg-white rounded-lg shadow-sm border border-slate-200 p-6">
<div class="flex flex-wrap justify-center gap-8">
<div class="flex flex-col items-center">
<div class="w-12 h-12 rounded-lg bg-slate-50 flex items-center justify-center mb-2">
<i class="fa-brands fa-chrome text-green-500 text-xl"></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-lg bg-slate-50 flex items-center justify-center mb-2">
<i class="fa-brands fa-firefox-browser text-orange-500 text-xl"></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-lg bg-slate-50 flex items-center justify-center mb-2">
<i class="fa-brands fa-safari text-blue-500 text-xl"></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-lg bg-slate-50 flex items-center justify-center mb-2">
<i class="fa-brands fa-edge text-blue-600 text-xl"></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-lg bg-slate-50 flex items-center justify-center mb-2">
<i class="fa-solid fa-mobile-screen text-slate-600 text-xl"></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-lg bg-slate-50 flex items-center justify-center mb-2">
<i class="fa-solid fa-moon text-slate-700 text-xl"></i>
</div>
<span class="text-sm text-slate-600">Dark Mode</span>
</div>
</div>
</div>
</section>
<!-- Help Section (Simple Design) -->
<div class="bg-slate-50 rounded-lg shadow-sm border border-slate-200 p-6 mb-6">
<div class="flex items-center">
<div class="w-10 h-10 rounded-lg bg-slate-200 flex items-center justify-center mr-3">
<i class="fa-regular fa-life-ring text-slate-600"></i>
</div>
<div>
<h3 class="text-lg font-medium text-slate-800 mb-2">Need assistance?</h3>
<div class="flex items-center flex-wrap gap-3">
<a
href="/docs/"
class="inline-flex items-center text-sm px-4 py-2 bg-white border border-slate-200 rounded-lg text-slate-700 hover:bg-slate-50 transition-colors"
>
<i class="fa-regular fa-file-lines text-indigo-600 mr-2"></i>
Documentation
</a>
<a
href="https://github.com/php-flasher/php-flasher/discussions"
class="inline-flex items-center text-sm px-4 py-2 bg-white border border-slate-200 rounded-lg text-slate-700 hover:bg-slate-50 transition-colors"
>
<i class="fa-regular fa-comments text-indigo-600 mr-2"></i>
Community
</a>
</div>
</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<script> <script>
// Tab system with Prism re-highlight // Simple tab system with minimal animations
document.addEventListener('DOMContentLoaded', function() { document.addEventListener('DOMContentLoaded', function() {
// Config tabs // Framework tabs
const tabButtons = document.querySelectorAll('.tab-button'); setupTabs('.tab-button', function(framework) {
const tabContent = document.getElementById('config-content'); const tabContent = document.getElementById('config-content');
const frameworkContents = { // Framework content objects
'laravel': `<div class="flex items-center mb-2 text-slate-800"> const frameworkContents = {
<i class="fa-brands fa-laravel text-red-500 mr-1.5"></i> 'laravel': `<pre class="language-php bg-slate-800 text-slate-200 p-4 text-sm overflow-x-auto"><code>// config/flasher.php
<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 [ return [
'default' => '{{ page.theme_name }}',{% if page.has_assets %} 'default' => '{{ page.theme_name }}',{% if page.has_assets %}
@@ -370,11 +365,7 @@ return [
],{% endif %} ],{% endif %}
];</code></pre>`, ];</code></pre>`,
'symfony': `<div class="flex items-center mb-2 text-slate-800"> 'symfony': `<pre class="language-yaml bg-slate-800 text-slate-200 p-4 text-sm overflow-x-auto"><code># config/packages/flasher.yaml
<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: flasher:
default: {{ page.theme_name }}{% if page.has_assets %} default: {{ page.theme_name }}{% if page.has_assets %}
@@ -386,59 +377,66 @@ flasher:
styles: styles:
- '/vendor/flasher/themes/{{ page.theme_name }}.min.css'{% endif %}</code></pre>`, - '/vendor/flasher/themes/{{ page.theme_name }}.min.css'{% endif %}</code></pre>`,
'javascript': `<div class="flex items-center mb-2 text-slate-800"> 'javascript': `<pre class="language-javascript bg-slate-800 text-slate-200 p-4 text-sm overflow-x-auto"><code>// Set as default theme
<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 }}'; flasher.defaultPlugin = '{{ page.theme_name }}';
// Then use it // Then use it
flasher.success('Well done!');</code></pre>` flasher.success('Well done!');</code></pre>`
}; };
tabButtons.forEach(button => { // Change content
button.addEventListener('click', function() { tabContent.innerHTML = frameworkContents[framework];
// 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 // Re-run Prism highlighting
const framework = this.getAttribute('data-framework'); if (window.Prism) {
tabContent.innerHTML = frameworkContents[framework]; Prism.highlightAllUnder(tabContent);
}
// Re-run Prism highlighting
if (window.Prism) {
Prism.highlightAllUnder(tabContent);
}
});
}); });
// Usage tabs // Language usage tabs
const usageTabs = document.querySelectorAll('.usage-tab'); setupTabs('.usage-tab', function(lang) {
const usageContents = document.querySelectorAll('.usage-content'); document.querySelectorAll('.usage-content').forEach(content => {
content.classList.add('hidden');
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');
}); });
document.getElementById(lang + '-content').classList.remove('hidden');
});
// Customization tabs
setupTabs('.customization-tab', function(tabId) {
document.querySelectorAll('.customization-content').forEach(content => {
content.classList.add('hidden');
});
document.getElementById(tabId + '-content').classList.remove('hidden');
// Re-run Prism highlighting
if (window.Prism) {
Prism.highlightAllUnder(document.getElementById(tabId + '-content'));
}
}); });
}); });
// Simple tab functionality
function setupTabs(tabSelector, callback) {
const tabs = document.querySelectorAll(tabSelector);
tabs.forEach(tab => {
tab.addEventListener('click', function() {
// Update active state
tabs.forEach(t => {
t.classList.remove('text-indigo-600', 'border-b-2', 'border-indigo-600');
t.classList.add('text-slate-600');
});
this.classList.remove('text-slate-600');
this.classList.add('text-indigo-600', 'border-b-2', 'border-indigo-600');
// Get id and execute callback
const id = this.getAttribute('data-framework') ||
this.getAttribute('data-lang') ||
this.getAttribute('data-tab');
if (callback) callback(id);
});
});
}
</script> </script>
+1 -1
View File
@@ -2,7 +2,7 @@
"entrypoints": { "entrypoints": {
"main": { "main": {
"css": [ "css": [
"/dist/main.32ef094c.css" "/dist/main.a73f4b77.css"
], ],
"js": [ "js": [
"/dist/main.3be5bc06.js" "/dist/main.3be5bc06.js"
File diff suppressed because one or more lines are too long