This commit is contained in:
Younes ENNAJI
2025-03-17 03:29:19 +00:00
parent 1e87cf5380
commit 3c79064e8d
5 changed files with 70 additions and 60 deletions
+1 -1
View File
@@ -1,5 +1,5 @@
{ {
"dist/main.css": "/dist/main.56555baa.css", "dist/main.css": "/dist/main.0fcfdb49.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",
+1 -1
View File
@@ -1,5 +1,5 @@
<!-- PHPFlasher Interactive Studio - Enhanced Edition --> <!-- PHPFlasher Interactive Studio - Enhanced Edition -->
<section data-controller="flasher-studio" class="min-h-screen relative overflow-hidden bg-gradient-to-br from-gray-50 to-gray-100 py-8"> <section data-controller="flasher-studio" class="relative overflow-hidden bg-gradient-to-br from-gray-50 to-gray-100 py-8">
<!-- Dynamic background elements --> <!-- Dynamic background elements -->
<div class="absolute inset-0 z-0"> <div class="absolute inset-0 z-0">
<div class="absolute top-0 right-0 w-1/3 h-1/3 bg-gradient-to-br from-blue-500/10 to-indigo-500/10 rounded-full blur-3xl animate-float-slow"></div> <div class="absolute top-0 right-0 w-1/3 h-1/3 bg-gradient-to-br from-blue-500/10 to-indigo-500/10 rounded-full blur-3xl animate-float-slow"></div>
+66 -56
View File
@@ -376,78 +376,88 @@
</section> </section>
<!-- Library Showcase Section --> <!-- Library Showcase Section -->
<section class="container mx-auto px-4 mb-16"> <section class="container mx-auto px-4 mb-20">
<div class="text-center mb-12"> <div class="text-center mb-12">
<div class="inline-block px-3 py-1 bg-indigo-50 text-indigo-700 rounded-full text-sm font-medium mb-2">Libraries</div> <div class="inline-block px-3 py-1 bg-indigo-50 text-indigo-700 rounded-full text-sm font-medium mb-2">Libraries</div>
<h2 class="text-2xl md:text-3xl font-bold text-slate-800 mb-2">Choose Your Preferred Library</h2> <h2 class="text-3xl sm:text-4xl font-bold text-slate-800 mb-3">Choose Your Preferred Library</h2>
<p class="text-slate-600 max-w-2xl mx-auto">PHPFlasher integrates with popular JavaScript notification libraries</p> <p class="text-slate-600 max-w-2xl mx-auto">PHPFlasher integrates with popular JavaScript notification libraries</p>
</div> </div>
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 max-w-5xl mx-auto"> <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 max-w-5xl mx-auto">
<!-- Toastr --> <!-- Toastr -->
<a href="/library/toastr/" class="group bg-white rounded-xl shadow-sm hover:shadow-md transition-all duration-300 border border-slate-100 overflow-hidden flex flex-col h-full"> <a href="/library/toastr/" class="group bg-white rounded-xl shadow-lg hover:shadow-xl transition-all duration-300 border border-slate-100 overflow-hidden flex flex-col h-full transform hover:-translate-y-1">
<div class="h-32 bg-gradient-to-r from-blue-400 to-blue-600 flex items-center justify-center"> <div class="h-36 bg-gradient-to-br from-blue-400 to-blue-600 flex items-center justify-center relative overflow-hidden">
<div class="w-16 h-16 bg-white rounded-full flex items-center justify-center shadow-lg"> <div class="absolute inset-0 bg-blue-600 opacity-0 group-hover:opacity-10 transition-opacity"></div>
<i class="fa-solid fa-toast text-blue-500 text-2xl"></i> <div class="w-20 h-20 bg-white rounded-full flex items-center justify-center shadow-lg group-hover:scale-110 transition-transform duration-300">
<i class="fa-solid fa-message text-blue-500 text-3xl"></i>
</div> </div>
</div> </div>
<div class="p-5 flex-grow"> <div class="p-6 flex-grow">
<h3 class="font-semibold text-slate-800 mb-2">Toastr.js</h3> <h3 class="font-semibold text-lg text-slate-800 mb-2">Toastr.js</h3>
<p class="text-slate-600 text-sm mb-3">Simple toast notifications for web applications. Clean, elegant and customizable.</p> <p class="text-slate-600 text-sm mb-4">Simple toast notifications for web applications. Clean, elegant and customizable.</p>
<div class="flex items-center text-blue-600 font-medium text-sm group-hover:underline"> <div class="flex items-center text-blue-600 font-medium text-sm mt-auto group-hover:underline">
Learn more <i class="fa-solid fa-arrow-right ml-1 transform group-hover:translate-x-1 transition-transform"></i> Learn more <i class="fa-solid fa-arrow-right ml-1 transform group-hover:translate-x-1 transition-transform"></i>
</div> </div>
</div> </div>
</a> </a>
<!-- SweetAlert2 --> <!-- SweetAlert2 -->
<a href="/library/sweetalert/" class="group bg-white rounded-xl shadow-sm hover:shadow-md transition-all duration-300 border border-slate-100 overflow-hidden flex flex-col h-full"> <a href="/library/sweetalert/" class="group bg-white rounded-xl shadow-lg hover:shadow-xl transition-all duration-300 border border-slate-100 overflow-hidden flex flex-col h-full transform hover:-translate-y-1">
<div class="h-32 bg-gradient-to-r from-pink-400 to-red-500 flex items-center justify-center"> <div class="h-36 bg-gradient-to-br from-pink-400 to-red-500 flex items-center justify-center relative overflow-hidden">
<div class="w-16 h-16 bg-white rounded-full flex items-center justify-center shadow-lg"> <div class="absolute inset-0 bg-red-500 opacity-0 group-hover:opacity-10 transition-opacity"></div>
<i class="fa-solid fa-message-exclamation text-pink-500 text-2xl"></i> <div class="w-20 h-20 bg-white rounded-full flex items-center justify-center shadow-lg group-hover:scale-110 transition-transform duration-300">
<i class="fa-solid fa-circle-exclamation text-pink-500 text-3xl"></i>
</div> </div>
</div> </div>
<div class="p-5 flex-grow"> <div class="p-6 flex-grow">
<h3 class="font-semibold text-slate-800 mb-2">SweetAlert2</h3> <h3 class="font-semibold text-lg text-slate-800 mb-2">SweetAlert2</h3>
<p class="text-slate-600 text-sm mb-3">Beautiful, responsive, customizable alert dialogs with interactive elements.</p> <p class="text-slate-600 text-sm mb-4">Beautiful, responsive, customizable alert dialogs with interactive elements.</p>
<div class="flex items-center text-pink-600 font-medium text-sm group-hover:underline"> <div class="flex items-center text-pink-600 font-medium text-sm mt-auto group-hover:underline">
Learn more <i class="fa-solid fa-arrow-right ml-1 transform group-hover:translate-x-1 transition-transform"></i> Learn more <i class="fa-solid fa-arrow-right ml-1 transform group-hover:translate-x-1 transition-transform"></i>
</div> </div>
</div> </div>
</a> </a>
<!-- Noty --> <!-- Noty -->
<a href="/library/noty/" class="group bg-white rounded-xl shadow-sm hover:shadow-md transition-all duration-300 border border-slate-100 overflow-hidden flex flex-col h-full"> <a href="/library/noty/" class="group bg-white rounded-xl shadow-lg hover:shadow-xl transition-all duration-300 border border-slate-100 overflow-hidden flex flex-col h-full transform hover:-translate-y-1">
<div class="h-32 bg-gradient-to-r from-purple-400 to-indigo-500 flex items-center justify-center"> <div class="h-36 bg-gradient-to-br from-purple-400 to-indigo-600 flex items-center justify-center relative overflow-hidden">
<div class="w-16 h-16 bg-white rounded-full flex items-center justify-center shadow-lg"> <div class="absolute inset-0 bg-indigo-600 opacity-0 group-hover:opacity-10 transition-opacity"></div>
<i class="fa-solid fa-bell text-purple-500 text-2xl"></i> <div class="w-20 h-20 bg-white rounded-full flex items-center justify-center shadow-lg group-hover:scale-110 transition-transform duration-300">
<i class="fa-solid fa-bell text-purple-500 text-3xl"></i>
</div> </div>
</div> </div>
<div class="p-5 flex-grow"> <div class="p-6 flex-grow">
<h3 class="font-semibold text-slate-800 mb-2">Noty</h3> <h3 class="font-semibold text-lg text-slate-800 mb-2">Noty</h3>
<p class="text-slate-600 text-sm mb-3">Highly customizable notification library with multiple positions and animations.</p> <p class="text-slate-600 text-sm mb-4">Highly customizable notification library with multiple positions and animations.</p>
<div class="flex items-center text-purple-600 font-medium text-sm group-hover:underline"> <div class="flex items-center text-purple-600 font-medium text-sm mt-auto group-hover:underline">
Learn more <i class="fa-solid fa-arrow-right ml-1 transform group-hover:translate-x-1 transition-transform"></i> Learn more <i class="fa-solid fa-arrow-right ml-1 transform group-hover:translate-x-1 transition-transform"></i>
</div> </div>
</div> </div>
</a> </a>
<!-- Notyf --> <!-- Notyf -->
<a href="/library/notyf/" class="group bg-white rounded-xl shadow-sm hover:shadow-md transition-all duration-300 border border-slate-100 overflow-hidden flex flex-col h-full"> <a href="/library/notyf/" class="group bg-white rounded-xl shadow-lg hover:shadow-xl transition-all duration-300 border border-slate-100 overflow-hidden flex flex-col h-full transform hover:-translate-y-1">
<div class="h-32 bg-gradient-to-r from-green-400 to-teal-500 flex items-center justify-center"> <div class="h-36 bg-gradient-to-br from-green-400 to-teal-500 flex items-center justify-center relative overflow-hidden">
<div class="w-16 h-16 bg-white rounded-full flex items-center justify-center shadow-lg"> <div class="absolute inset-0 bg-teal-500 opacity-0 group-hover:opacity-10 transition-opacity"></div>
<i class="fa-solid fa-message-dots text-green-500 text-2xl"></i> <div class="w-20 h-20 bg-white rounded-full flex items-center justify-center shadow-lg group-hover:scale-110 transition-transform duration-300">
<i class="fa-solid fa-comment-dots text-green-500 text-3xl"></i>
</div> </div>
</div> </div>
<div class="p-5 flex-grow"> <div class="p-6 flex-grow">
<h3 class="font-semibold text-slate-800 mb-2">Notyf</h3> <h3 class="font-semibold text-lg text-slate-800 mb-2">Notyf</h3>
<p class="text-slate-600 text-sm mb-3">Minimalist toast notifications with a clean design and smooth animations.</p> <p class="text-slate-600 text-sm mb-4">Minimalist toast notifications with a clean design and smooth animations.</p>
<div class="flex items-center text-green-600 font-medium text-sm group-hover:underline"> <div class="flex items-center text-green-600 font-medium text-sm mt-auto group-hover:underline">
Learn more <i class="fa-solid fa-arrow-right ml-1 transform group-hover:translate-x-1 transition-transform"></i> Learn more <i class="fa-solid fa-arrow-right ml-1 transform group-hover:translate-x-1 transition-transform"></i>
</div> </div>
</div> </div>
</a> </a>
</div> </div>
<div class="text-center mt-10">
<a href="/libraries/" class="inline-flex items-center px-6 py-3 bg-white border border-slate-200 hover:bg-slate-50 text-slate-700 rounded-lg font-medium transition-colors duration-200 shadow-sm">
<i class="fa-solid fa-th-large mr-2"></i> Compare all libraries
</a>
</div>
</section> </section>
<!-- Code Example Section --> <!-- Code Example Section -->
@@ -533,48 +543,48 @@ document.getElementById('contact-form').addEventListener('submit', async functio
</section> </section>
<!-- Community Section --> <!-- Community Section -->
<section class="bg-gradient-to-b from-slate-50 to-white py-16 mb-16"> <section class="bg-gradient-to-b from-slate-50 to-white py-16 mb-20">
<div class="container mx-auto px-4"> <div class="container mx-auto px-4">
<div class="text-center mb-12"> <div class="text-center mb-12">
<div class="inline-block px-3 py-1 bg-indigo-50 text-indigo-700 rounded-full text-sm font-medium mb-2">Community</div> <div class="inline-block px-3 py-1 bg-indigo-50 text-indigo-700 rounded-full text-sm font-medium mb-2">Community</div>
<h2 class="text-2xl md:text-3xl font-bold text-slate-800 mb-2">Join Our Growing Community</h2> <h2 class="text-3xl sm:text-4xl font-bold text-slate-800 mb-3">Join Our Growing Community</h2>
<p class="text-slate-600 max-w-2xl mx-auto">Help us make PHPFlasher even better</p> <p class="text-slate-600 max-w-2xl mx-auto">Help us make PHPFlasher even better</p>
</div> </div>
<div class="max-w-4xl mx-auto grid grid-cols-1 md:grid-cols-3 gap-6"> <div class="max-w-5xl mx-auto grid grid-cols-1 md:grid-cols-3 gap-8">
<!-- GitHub --> <!-- GitHub -->
<a href="https://github.com/php-flasher/php-flasher" class="group bg-white rounded-xl shadow-sm hover:shadow-md transition-all duration-300 border border-slate-100 p-6 flex flex-col items-center text-center"> <a href="https://github.com/php-flasher/php-flasher" class="group bg-white rounded-xl shadow-md hover:shadow-lg transition-all duration-300 border border-slate-100 p-8 flex flex-col items-center text-center transform hover:-translate-y-1">
<div class="w-16 h-16 bg-slate-50 rounded-full flex items-center justify-center mb-4 group-hover:bg-slate-100 transition-colors"> <div class="w-16 h-16 bg-slate-50 rounded-full flex items-center justify-center mb-5 group-hover:bg-slate-100 transition-colors">
<i class="fa-brands fa-github text-slate-800 text-3xl"></i> <i class="fa-brands fa-github text-slate-800 text-3xl"></i>
</div> </div>
<h3 class="font-semibold text-slate-800 mb-2">Star on GitHub</h3> <h3 class="font-semibold text-xl text-slate-800 mb-3">Star on GitHub</h3>
<p class="text-slate-600 text-sm">Contribute to the project, report issues, or suggest new features.</p> <p class="text-slate-600 mb-6">Contribute to the project, report issues, or suggest new features.</p>
<div class="mt-4 px-4 py-2 bg-slate-100 rounded-full text-slate-700 text-sm font-medium group-hover:bg-slate-200 transition-colors"> <div class="mt-auto px-6 py-2.5 bg-slate-100 rounded-full text-slate-700 text-sm font-medium group-hover:bg-slate-200 transition-colors">
<i class="fa-regular fa-star mr-1"></i> Star <i class="fa-regular fa-star mr-1.5"></i> Star Project
</div> </div>
</a> </a>
<!-- Discussions --> <!-- Discussions -->
<a href="https://github.com/php-flasher/php-flasher/discussions" class="group bg-white rounded-xl shadow-sm hover:shadow-md transition-all duration-300 border border-slate-100 p-6 flex flex-col items-center text-center"> <a href="https://github.com/php-flasher/php-flasher/discussions" class="group bg-white rounded-xl shadow-md hover:shadow-lg transition-all duration-300 border border-slate-100 p-8 flex flex-col items-center text-center transform hover:-translate-y-1">
<div class="w-16 h-16 bg-indigo-50 rounded-full flex items-center justify-center mb-4 group-hover:bg-indigo-100 transition-colors"> <div class="w-16 h-16 bg-indigo-50 rounded-full flex items-center justify-center mb-5 group-hover:bg-indigo-100 transition-colors">
<i class="fa-solid fa-comments text-indigo-600 text-3xl"></i> <i class="fa-solid fa-comments text-indigo-600 text-3xl"></i>
</div> </div>
<h3 class="font-semibold text-slate-800 mb-2">Join Discussions</h3> <h3 class="font-semibold text-xl text-slate-800 mb-3">Join Discussions</h3>
<p class="text-slate-600 text-sm">Ask questions, share ideas, and connect with other users.</p> <p class="text-slate-600 mb-6">Ask questions, share ideas, and connect with other developers.</p>
<div class="mt-4 px-4 py-2 bg-indigo-100 rounded-full text-indigo-700 text-sm font-medium group-hover:bg-indigo-200 transition-colors"> <div class="mt-auto px-6 py-2.5 bg-indigo-100 rounded-full text-indigo-700 text-sm font-medium group-hover:bg-indigo-200 transition-colors">
<i class="fa-regular fa-message mr-1"></i> Participate <i class="fa-regular fa-message mr-1.5"></i> Participate
</div> </div>
</a> </a>
<!-- Documentation --> <!-- Documentation -->
<a href="/docs/" class="group bg-white rounded-xl shadow-sm hover:shadow-md transition-all duration-300 border border-slate-100 p-6 flex flex-col items-center text-center"> <a href="/docs/" class="group bg-white rounded-xl shadow-md hover:shadow-lg transition-all duration-300 border border-slate-100 p-8 flex flex-col items-center text-center transform hover:-translate-y-1">
<div class="w-16 h-16 bg-amber-50 rounded-full flex items-center justify-center mb-4 group-hover:bg-amber-100 transition-colors"> <div class="w-16 h-16 bg-amber-50 rounded-full flex items-center justify-center mb-5 group-hover:bg-amber-100 transition-colors">
<i class="fa-solid fa-book-open text-amber-600 text-3xl"></i> <i class="fa-solid fa-book-open text-amber-600 text-3xl"></i>
</div> </div>
<h3 class="font-semibold text-slate-800 mb-2">Read Documentation</h3> <h3 class="font-semibold text-xl text-slate-800 mb-3">Read Documentation</h3>
<p class="text-slate-600 text-sm">Explore comprehensive guides, examples, and API reference.</p> <p class="text-slate-600 mb-6">Explore comprehensive guides, examples, and API reference.</p>
<div class="mt-4 px-4 py-2 bg-amber-100 rounded-full text-amber-700 text-sm font-medium group-hover:bg-amber-200 transition-colors"> <div class="mt-auto px-6 py-2.5 bg-amber-100 rounded-full text-amber-700 text-sm font-medium group-hover:bg-amber-200 transition-colors">
<i class="fa-solid fa-arrow-right mr-1"></i> Get Started <i class="fa-solid fa-arrow-right mr-1.5"></i> Get Started
</div> </div>
</a> </a>
</div> </div>
+1 -1
View File
@@ -2,7 +2,7 @@
"entrypoints": { "entrypoints": {
"main": { "main": {
"css": [ "css": [
"/dist/main.56555baa.css" "/dist/main.0fcfdb49.css"
], ],
"js": [ "js": [
"/dist/main.3be5bc06.js" "/dist/main.3be5bc06.js"
File diff suppressed because one or more lines are too long