mirror of
https://github.com/php-flasher/php-flasher.git
synced 2026-03-31 15:07:47 +01:00
Younes ENNAJI
@@ -1,5 +1,5 @@
|
||||
{
|
||||
"dist/main.css": "/dist/main.86a43fec.css",
|
||||
"dist/main.css": "/dist/main.32ef094c.css",
|
||||
"dist/main.js": "/dist/main.3be5bc06.js",
|
||||
"dist/455.3a7b4474.css": "/dist/455.3a7b4474.css",
|
||||
"dist/455.095e6545.js": "/dist/455.095e6545.js",
|
||||
|
||||
+165
-106
@@ -1,119 +1,129 @@
|
||||
<!-- PHPFlasher Interactive Studio - Enhanced Edition -->
|
||||
<section data-controller="flasher-studio" class="relative overflow-hidden bg-gradient-to-br from-gray-50 to-gray-100 py-8">
|
||||
<!-- PHPFlasher Interactive Studio - Enhanced 2.0 -->
|
||||
<section data-controller="flasher-studio" class="relative overflow-hidden bg-gradient-to-br from-indigo-50 to-slate-50 py-12 my-8 rounded-2xl">
|
||||
<!-- Dynamic background elements -->
|
||||
<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 bottom-0 left-0 w-1/3 h-1/3 bg-gradient-to-tr from-emerald-500/10 to-blue-500/10 rounded-full blur-3xl animate-float-medium"></div>
|
||||
<div class="absolute top-0 right-0 w-1/3 h-1/3 bg-gradient-to-br from-indigo-500/10 to-purple-500/10 rounded-full blur-3xl animate-[float_20s_ease-in-out_infinite]"></div>
|
||||
<div class="absolute bottom-0 left-0 w-1/3 h-1/3 bg-gradient-to-tr from-emerald-500/10 to-blue-500/10 rounded-full blur-3xl animate-[float_15s_ease-in-out_infinite_reverse]"></div>
|
||||
|
||||
<!-- Animated floating elements -->
|
||||
<div class="floating-element absolute top-[15%] left-[10%] w-16 h-16 rounded-full bg-gradient-to-br from-blue-500/10 to-indigo-500/10 animate-float-slow"></div>
|
||||
<div class="floating-element absolute top-[40%] left-[80%] w-20 h-20 rounded-full bg-gradient-to-br from-green-500/5 to-emerald-500/5 animate-float-medium"></div>
|
||||
<div class="floating-element absolute top-[80%] left-[20%] w-12 h-12 rounded-full bg-gradient-to-br from-amber-500/5 to-orange-500/5 animate-float-fast"></div>
|
||||
|
||||
<!-- Animated lines -->
|
||||
<svg class="absolute inset-0 w-full h-full z-0 opacity-10" viewBox="0 0 100 100" preserveAspectRatio="none">
|
||||
<line x1="0" y1="0" x2="100" y2="100" stroke="currentColor" stroke-width="0.2" class="text-blue-500 animate-[pulse_8s_cubic-bezier(0.4,0,0.6,1)_infinite]"></line>
|
||||
<line x1="100" y1="0" x2="0" y2="100" stroke="currentColor" stroke-width="0.2" class="text-indigo-500 animate-[pulse_6s_cubic-bezier(0.4,0,0.6,1)_infinite]"></line>
|
||||
</svg>
|
||||
<div class="absolute top-[15%] left-[10%] w-16 h-16 rounded-full bg-gradient-to-br from-blue-500/10 to-indigo-500/10 animate-[float_8s_ease-in-out_infinite]"></div>
|
||||
<div class="absolute top-[40%] left-[80%] w-20 h-20 rounded-full bg-gradient-to-br from-green-500/5 to-emerald-500/5 animate-[float_12s_ease-in-out_infinite]"></div>
|
||||
<div class="absolute top-[80%] left-[20%] w-12 h-12 rounded-full bg-gradient-to-br from-amber-500/5 to-orange-500/5 animate-[float_10s_ease-in-out_infinite]"></div>
|
||||
</div>
|
||||
|
||||
<!-- Main content -->
|
||||
<div class="container relative z-10 mx-auto px-4 max-w-7xl">
|
||||
<div class="container relative z-10 mx-auto px-4 max-w-6xl">
|
||||
<!-- Elegant header -->
|
||||
<header class="mb-6 text-center relative">
|
||||
<div class="absolute top-0 left-1/2 -translate-x-1/2 w-24 h-1 bg-gradient-to-r from-blue-500/0 via-blue-500 to-blue-500/0"></div>
|
||||
<h1 class="mt-6 text-3xl font-light tracking-tight">
|
||||
PHPFlasher <span class="font-semibold text-transparent bg-clip-text bg-gradient-to-r from-blue-600 to-indigo-600">Interactive</span> Studio
|
||||
</h1>
|
||||
<p class="mt-2 text-gray-500 max-w-2xl mx-auto text-lg">Design your perfect notification, customize options, and see it in action</p>
|
||||
<header class="mb-8 text-center relative">
|
||||
<div class="flex justify-center mb-3">
|
||||
<div class="h-1 w-24 bg-gradient-to-r from-indigo-500/0 via-indigo-500 to-indigo-500/0"></div>
|
||||
</div>
|
||||
|
||||
<h2 class="mt-2 text-3xl md:text-4xl font-bold text-slate-800 mb-2">
|
||||
<span class="text-transparent bg-clip-text bg-gradient-to-r from-indigo-600 to-purple-600">Notification Studio</span>
|
||||
</h2>
|
||||
<p class="mt-2 text-slate-500 max-w-2xl mx-auto">Design your perfect notification and see the code instantly</p>
|
||||
</header>
|
||||
|
||||
<!-- Main interactive area -->
|
||||
<div class="rounded-xl shadow-xl bg-white overflow-hidden backdrop-blur-sm border border-gray-100 transition-all hover:shadow-2xl">
|
||||
<!-- Toolbar -->
|
||||
<div class="bg-gradient-to-r from-gray-50 to-gray-100 border-b border-gray-200 px-6 py-2 flex items-center justify-between">
|
||||
<div class="rounded-xl shadow-xl bg-white overflow-hidden backdrop-blur-sm border border-slate-100 transition-all hover:shadow-2xl">
|
||||
<!-- Toolbar with improved styling -->
|
||||
<div class="bg-gradient-to-r from-slate-800 to-slate-900 border-b border-slate-700 px-6 py-3 flex items-center justify-between">
|
||||
<div class="flex items-center space-x-2">
|
||||
<div class="w-3 h-3 rounded-full bg-red-400"></div>
|
||||
<div class="w-3 h-3 rounded-full bg-yellow-400"></div>
|
||||
<div class="w-3 h-3 rounded-full bg-green-400"></div>
|
||||
</div>
|
||||
<div class="text-xs font-medium text-slate-300">PHPFlasher Studio</div>
|
||||
<div id="status-indicator" class="flex items-center space-x-2">
|
||||
<span id="status-text" class="text-xs text-emerald-600">Ready</span>
|
||||
<span id="status-text" class="text-xs text-emerald-400">Ready</span>
|
||||
<div class="w-2 h-2 bg-emerald-500 rounded-full animate-[ping_2.5s_cubic-bezier(0,0,0.2,1)_infinite]"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Main content area with tabs -->
|
||||
<div class="flex flex-col lg:flex-row">
|
||||
<!-- Left panel: Options -->
|
||||
<div class="w-full lg:w-2/5 border-r border-gray-100">
|
||||
<!-- Left panel: Options with improved UI -->
|
||||
<div class="w-full lg:w-2/5 border-r border-slate-100">
|
||||
<!-- Options panel -->
|
||||
<div class="p-4 overflow-y-auto max-h-[650px]">
|
||||
<!-- Notification Type Selection -->
|
||||
<div class="p-5 overflow-y-auto">
|
||||
<div class="mb-1">
|
||||
<div class="inline-block px-2 py-1 bg-indigo-50 text-indigo-700 rounded-full text-xs font-medium mb-2">Step 1: Choose Type</div>
|
||||
</div>
|
||||
|
||||
<!-- Notification Type Selection with improved visual appeal -->
|
||||
<div class="mb-6">
|
||||
<label class="block mb-2 text-sm font-medium text-gray-700">Notification Type</label>
|
||||
<div class="grid grid-cols-4 gap-2 w-full">
|
||||
<button data-type="success" class="type-button flex flex-col items-center justify-center p-3 rounded-lg bg-green-50 border border-green-200 hover:bg-green-100 transition-all duration-300 active:scale-95 transform border-2 border-green-500">
|
||||
<span class="flex items-center justify-center w-8 h-8 rounded-md bg-green-100 text-green-600 mb-2">
|
||||
<div class="grid grid-cols-4 gap-3 w-full">
|
||||
<button data-type="success" class="type-button flex flex-col items-center justify-center p-3 rounded-lg bg-emerald-50 border border-emerald-100 hover:bg-emerald-100 transition-all duration-300 active:scale-95 transform border-2 border-emerald-500 shadow-sm">
|
||||
<span class="flex items-center justify-center w-10 h-10 rounded-md bg-emerald-500/90 text-white mb-2">
|
||||
<i class="fas fa-check text-lg"></i>
|
||||
</span>
|
||||
<span class="text-xs font-medium text-gray-700">Success</span>
|
||||
<span class="text-xs font-medium text-slate-700">Success</span>
|
||||
</button>
|
||||
|
||||
<button data-type="error" class="type-button flex flex-col items-center justify-center p-3 rounded-lg bg-red-50 border border-red-200 hover:bg-red-100 transition-all duration-300 active:scale-95 transform">
|
||||
<span class="flex items-center justify-center w-8 h-8 rounded-md bg-red-100 text-red-600 mb-2">
|
||||
<button data-type="error" class="type-button flex flex-col items-center justify-center p-3 rounded-lg bg-red-50 border border-red-100 hover:bg-red-100 transition-all duration-300 active:scale-95 transform shadow-sm">
|
||||
<span class="flex items-center justify-center w-10 h-10 rounded-md bg-red-500/90 text-white mb-2">
|
||||
<i class="fas fa-times text-lg"></i>
|
||||
</span>
|
||||
<span class="text-xs font-medium text-gray-700">Error</span>
|
||||
<span class="text-xs font-medium text-slate-700">Error</span>
|
||||
</button>
|
||||
|
||||
<button data-type="info" class="type-button flex flex-col items-center justify-center p-3 rounded-lg bg-blue-50 border border-blue-200 hover:bg-blue-100 transition-all duration-300 active:scale-95 transform">
|
||||
<span class="flex items-center justify-center w-8 h-8 rounded-md bg-blue-100 text-blue-600 mb-2">
|
||||
<i class="fas fa-info-circle text-lg"></i>
|
||||
<button data-type="info" class="type-button flex flex-col items-center justify-center p-3 rounded-lg bg-blue-50 border border-blue-100 hover:bg-blue-100 transition-all duration-300 active:scale-95 transform shadow-sm">
|
||||
<span class="flex items-center justify-center w-10 h-10 rounded-md bg-blue-500/90 text-white mb-2">
|
||||
<i class="fas fa-info text-lg"></i>
|
||||
</span>
|
||||
<span class="text-xs font-medium text-gray-700">Info</span>
|
||||
<span class="text-xs font-medium text-slate-700">Info</span>
|
||||
</button>
|
||||
|
||||
<button data-type="warning" class="type-button flex flex-col items-center justify-center p-3 rounded-lg bg-amber-50 border border-amber-200 hover:bg-amber-100 transition-all duration-300 active:scale-95 transform">
|
||||
<span class="flex items-center justify-center w-8 h-8 rounded-md bg-amber-100 text-amber-600 mb-2">
|
||||
<button data-type="warning" class="type-button flex flex-col items-center justify-center p-3 rounded-lg bg-amber-50 border border-amber-100 hover:bg-amber-100 transition-all duration-300 active:scale-95 transform shadow-sm">
|
||||
<span class="flex items-center justify-center w-10 h-10 rounded-md bg-amber-500/90 text-white mb-2">
|
||||
<i class="fas fa-exclamation-triangle text-lg"></i>
|
||||
</span>
|
||||
<span class="text-xs font-medium text-gray-700">Warning</span>
|
||||
<span class="text-xs font-medium text-slate-700">Warning</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Content Section -->
|
||||
<div class="mb-1">
|
||||
<div class="inline-block px-2 py-1 bg-indigo-50 text-indigo-700 rounded-full text-xs font-medium mb-2">Step 2: Customize Message</div>
|
||||
</div>
|
||||
|
||||
<!-- Content Section with improved form styling -->
|
||||
<div class="mb-6 space-y-4">
|
||||
<div>
|
||||
<div class="flex items-center justify-between mb-2">
|
||||
<label for="title-input" class="block text-sm font-medium text-gray-700">Title</label>
|
||||
<span class="text-xs text-gray-400">Optional</span>
|
||||
<label for="title-input" class="block text-sm font-medium text-slate-700">Title</label>
|
||||
<span class="text-xs text-slate-400 bg-slate-50 px-2 py-0.5 rounded">Optional</span>
|
||||
</div>
|
||||
<input
|
||||
id="title-input"
|
||||
type="text"
|
||||
class="w-full px-3 py-2 bg-gray-50 border border-gray-200 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 transition-all duration-300"
|
||||
class="w-full px-3 py-2.5 bg-slate-50 border border-slate-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 transition-all duration-300"
|
||||
placeholder="Enter notification title"
|
||||
value="">
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label for="message-input" class="block mb-2 text-sm font-medium text-gray-700">Message</label>
|
||||
<label for="message-input" class="block mb-2 text-sm font-medium text-slate-700">Message</label>
|
||||
<input id="message-input"
|
||||
type="text"
|
||||
class="w-full px-3 py-2 bg-gray-50 border border-gray-200 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 transition-all duration-300"
|
||||
class="w-full px-3 py-2.5 bg-slate-50 border border-slate-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 transition-all duration-300"
|
||||
placeholder="Enter your notification message"
|
||||
value="Your product has been created successfully!">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mb-1">
|
||||
<div class="inline-block px-2 py-1 bg-indigo-50 text-indigo-700 rounded-full text-xs font-medium mb-2">Step 3: Advanced Options</div>
|
||||
</div>
|
||||
|
||||
<!-- Configuration Options -->
|
||||
<div class="px-3 py-3 mb-3">
|
||||
<div class="px-3 py-3 mb-3 bg-slate-50 rounded-lg border border-slate-100">
|
||||
<div class="grid grid-cols-2 gap-3 mb-4">
|
||||
<div>
|
||||
<label for="position-select" class="block mb-1 text-sm font-medium text-gray-700">Position</label>
|
||||
<select id="position-select" class="w-full px-3 py-2 bg-gray-50 border border-gray-200 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 transition-all duration-300">
|
||||
<label for="position-select" class="block mb-1.5 text-sm font-medium text-slate-700">Position</label>
|
||||
<div class="relative">
|
||||
<select id="position-select" class="w-full appearance-none px-3 py-2.5 bg-white border border-slate-200 rounded-lg pr-10 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 transition-all duration-300">
|
||||
<option value="">Default</option>
|
||||
<option value="top-right">Top Right</option>
|
||||
<option value="top-left">Top Left</option>
|
||||
@@ -121,138 +131,146 @@
|
||||
<option value="bottom-left">Bottom Left</option>
|
||||
<option value="center-top">Center Top</option>
|
||||
<option value="center-bottom">Center Bottom</option>
|
||||
<option value="center-left">Center Left</option>
|
||||
<option value="center-right">Center Right</option>
|
||||
</select>
|
||||
<div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-slate-400">
|
||||
<i class="fas fa-chevron-down text-xs"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<label for="timeout-select" class="block mb-1 text-sm font-medium text-gray-700">Timeout (ms)</label>
|
||||
<select id="timeout-select" class="w-full px-3 py-2 bg-gray-50 border border-gray-200 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 transition-all duration-300">
|
||||
<label for="timeout-select" class="block mb-1.5 text-sm font-medium text-slate-700">Duration</label>
|
||||
<div class="relative">
|
||||
<select id="timeout-select" class="w-full appearance-none px-3 py-2.5 bg-white border border-slate-200 rounded-lg pr-10 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 transition-all duration-300">
|
||||
<option value="">Default</option>
|
||||
<option value="30000">30 seconds</option>
|
||||
<option value="10000">10 seconds</option>
|
||||
<option value="5000">5 seconds</option>
|
||||
<option value="3000">3 seconds</option>
|
||||
</select>
|
||||
<div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-slate-400">
|
||||
<i class="fas fa-chevron-down text-xs"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-2 gap-3 mb-4">
|
||||
<div>
|
||||
<label for="theme-select" class="block mb-1 text-sm font-medium text-gray-700">Theme</label>
|
||||
<select id="theme-select" class="w-full px-3 py-2 bg-gray-50 border border-gray-200 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 transition-all duration-300">
|
||||
<label for="theme-select" class="block mb-1.5 text-sm font-medium text-slate-700">Theme</label>
|
||||
<div class="relative">
|
||||
<select id="theme-select" class="w-full appearance-none px-3 py-2.5 bg-white border border-slate-200 rounded-lg pr-10 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 transition-all duration-300">
|
||||
<option value="">Default</option>
|
||||
<option value="amazon">Amazon</option>
|
||||
<option value="amber">Amber</option>
|
||||
<option value="aurora">Aurora</option>
|
||||
<option value="crystal">Crystal</option>
|
||||
<option value="emerald">Emerald</option>
|
||||
<option value="facebook">Facebook</option>
|
||||
<option value="flasher">Flasher</option>
|
||||
<option value="google">Google</option>
|
||||
<option value="ios">iOS</option>
|
||||
<option value="jade">Jade</option>
|
||||
<option value="material">Material</option>
|
||||
<option value="minimal">Minimal</option>
|
||||
<option value="neon">Neon</option>
|
||||
<option value="onyx">Onyx</option>
|
||||
<option value="ruby">Ruby</option>
|
||||
<option value="sapphire">Sapphire</option>
|
||||
<option value="ios">iOS</option>
|
||||
<option value="slack">Slack</option>
|
||||
</select>
|
||||
<div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-slate-400">
|
||||
<i class="fas fa-chevron-down text-xs"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<label for="direction-select" class="block mb-1 text-sm font-medium text-gray-700">Direction</label>
|
||||
<select id="direction-select" class="w-full px-3 py-2 bg-gray-50 border border-gray-200 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 transition-all duration-300">
|
||||
<label for="direction-select" class="block mb-1.5 text-sm font-medium text-slate-700">Direction</label>
|
||||
<div class="relative">
|
||||
<select id="direction-select" class="w-full appearance-none px-3 py-2.5 bg-white border border-slate-200 rounded-lg pr-10 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 transition-all duration-300">
|
||||
<option value="">Default</option>
|
||||
<option value="top">Top</option>
|
||||
<option value="bottom">Bottom</option>
|
||||
</select>
|
||||
<div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-slate-400">
|
||||
<i class="fas fa-chevron-down text-xs"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-4 grid grid-cols-2 gap-3">
|
||||
<div class="flex items-center">
|
||||
<input type="checkbox" id="rtl-check" class="w-4 h-4 text-blue-600 rounded focus:ring-blue-500">
|
||||
<label for="rtl-check" class="ml-2 text-sm text-gray-700">RTL Layout</label>
|
||||
<input type="checkbox" id="rtl-check" class="h-4 w-4 rounded border-slate-300 text-indigo-600 focus:ring-indigo-500 transition">
|
||||
<label for="rtl-check" class="ml-2 text-sm text-slate-700">RTL Layout</label>
|
||||
</div>
|
||||
<div class="flex items-center">
|
||||
<input type="checkbox" id="escape-html-check" class="w-4 h-4 text-blue-600 rounded focus:ring-blue-500" checked>
|
||||
<label for="escape-html-check" class="ml-2 text-sm text-gray-700">Escape HTML</label>
|
||||
<input type="checkbox" id="escape-html-check" class="h-4 w-4 rounded border-slate-300 text-indigo-600 focus:ring-indigo-500 transition" checked>
|
||||
<label for="escape-html-check" class="ml-2 text-sm text-slate-700">Escape HTML</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Launch button -->
|
||||
<button id="show-notification-btn" class="w-full group relative overflow-hidden rounded-md shadow-lg">
|
||||
<span class="absolute inset-0 bg-gradient-to-r from-blue-600 to-indigo-600 group-hover:from-blue-700 group-hover:to-indigo-700 transition-all duration-300"></span>
|
||||
<span class="absolute inset-0 opacity-10 bg-[url('data:image/svg+xml,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20viewBox%3D%220%200%2020%2020%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20fill%3D%22%23ffffff%22%20fill-opacity%3D%221%22%20fill-rule%3D%22evenodd%22%3E%3Ccircle%20cx%3D%223%22%20cy%3D%223%22%20r%3D%221%22%2F%3E%3Ccircle%20cx%3D%2213%22%20cy%3D%2213%22%20r%3D%221%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E')]"></span>
|
||||
<!-- Preview & Launch buttons - enhanced with better visual hierarchy -->
|
||||
<div class="flex gap-2">
|
||||
<button id="show-notification-btn" class="w-full group relative overflow-hidden rounded-lg shadow-md">
|
||||
<span class="absolute inset-0 bg-gradient-to-r from-indigo-600 to-purple-600 group-hover:from-indigo-700 group-hover:to-purple-700 transition-all duration-300"></span>
|
||||
<span class="relative px-5 py-3.5 flex items-center justify-center text-white font-medium">
|
||||
<span class="flex items-center space-x-2">
|
||||
<span>Launch Notification</span>
|
||||
<i class="fas fa-arrow-right transform group-hover:translate-x-1 transition-transform ml-2"></i>
|
||||
</span>
|
||||
<i class="fas fa-bell mr-2"></i>
|
||||
<span>Show Notification</span>
|
||||
</span>
|
||||
<span class="absolute top-0 -inset-full h-full w-1/2 block transform -skew-x-12 bg-gradient-to-r from-transparent to-white opacity-20 group-hover:animate-[shine_1s_forwards]"></span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Right panel: Code Preview (wider) -->
|
||||
<div class="w-full lg:w-3/5">
|
||||
<div class="border-b border-gray-200 px-6 py-2 flex items-center justify-between bg-gray-50">
|
||||
<div class="text-sm font-medium text-gray-700">Generated Code</div>
|
||||
</div>
|
||||
|
||||
<!-- Code tabs with FontAwesome icons -->
|
||||
<div class="flex border-b border-gray-200 bg-gray-50 overflow-x-auto">
|
||||
<button id="laravel-tab" data-tab="laravel" class="code-tab-btn px-4 py-2 text-sm font-medium text-blue-600 border-b-2 border-blue-500 flex items-center space-x-1.5">
|
||||
<!-- Right panel: Code Preview -->
|
||||
<div class="w-full lg:w-3/5" style="background: #f5f2f0; border: none; box-sizing: unset;">
|
||||
<div class="border-b border-slate-200 px-6 py-3 flex items-center justify-between bg-slate-50">
|
||||
<div class="text-sm font-medium text-slate-700">Generated Code</div>
|
||||
<div class="text-xs text-slate-400">Copy-paste into your project</div>
|
||||
</div>
|
||||
|
||||
<!-- Code tabs with improved styling -->
|
||||
<div class="flex border-b border-slate-200 bg-slate-50">
|
||||
<button id="laravel-tab" data-tab="laravel" class="code-tab-btn px-5 py-3 text-sm font-medium text-indigo-600 border-b-2 border-indigo-600 flex items-center space-x-2">
|
||||
<i class="fab fa-laravel text-red-500"></i>
|
||||
<span>Laravel</span>
|
||||
</button>
|
||||
<button id="symfony-tab" data-tab="symfony" class="code-tab-btn px-4 py-2 text-sm font-medium text-gray-600 hover:text-gray-800 flex items-center space-x-1.5">
|
||||
<button id="symfony-tab" data-tab="symfony" class="code-tab-btn px-5 py-3 text-sm font-medium text-slate-600 hover:text-slate-800 flex items-center space-x-2">
|
||||
<i class="fab fa-symfony text-black"></i>
|
||||
<span>Symfony</span>
|
||||
</button>
|
||||
<button id="js-tab" data-tab="js" class="code-tab-btn px-4 py-2 text-sm font-medium text-gray-600 hover:text-gray-800 flex items-center space-x-1.5">
|
||||
<i class="fab fa-js text-yellow-400"></i>
|
||||
<button id="js-tab" data-tab="js" class="code-tab-btn px-5 py-3 text-sm font-medium text-slate-600 hover:text-slate-800 flex items-center space-x-2">
|
||||
<i class="fab fa-js text-yellow-500"></i>
|
||||
<span>JavaScript</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Code animation wrapper - Contains both the static code and the animation layer -->
|
||||
<!-- Code animation wrapper with improved styles -->
|
||||
<div id="code-display-wrapper" class="relative">
|
||||
<!-- Laravel Code Panel -->
|
||||
<div id="laravel-code-panel" class="p-4 bg-gray-50 overflow-y-auto code-panel active">
|
||||
<div id="laravel-code-panel" class="bg-gray-50 overflow-y-auto code-panel active">
|
||||
<!-- Code will be inserted here by JavaScript -->
|
||||
</div>
|
||||
|
||||
<!-- Symfony Code Panel -->
|
||||
<div id="symfony-code-panel" class="p-4 bg-gray-50 overflow-y-auto hidden code-panel">
|
||||
<div id="symfony-code-panel" class="bg-gray-50 overflow-y-auto hidden code-panel">
|
||||
<!-- Code will be inserted here by JavaScript -->
|
||||
</div>
|
||||
|
||||
<!-- JavaScript Code Panel -->
|
||||
<div id="js-code-panel" class="p-4 bg-gray-50 overflow-y-auto hidden code-panel">
|
||||
<div id="js-code-panel" class="bg-gray-50 overflow-y-auto hidden code-panel">
|
||||
<!-- Code will be inserted here by JavaScript -->
|
||||
</div>
|
||||
|
||||
<!-- Animation overlay - This stays invisible but receives animation commands -->
|
||||
<!-- Animation overlay -->
|
||||
<div id="animation-layer" class="absolute top-0 left-0 w-full h-full pointer-events-none"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Footer with links -->
|
||||
<div class="px-6 py-3 bg-gray-50 border-t border-gray-200 flex items-center justify-between">
|
||||
<div class="flex items-center space-x-2"></div>
|
||||
<!-- Footer with improved design -->
|
||||
<div class="px-6 py-3.5 bg-slate-50 border-t border-slate-200 flex flex-col sm:flex-row items-center justify-between gap-3">
|
||||
<div class="text-xs text-slate-500">Customize your perfect notification in seconds</div>
|
||||
<div class="flex space-x-4">
|
||||
<a href="https://phpflasher.com/docs" class="text-xs text-gray-600 hover:text-blue-600 transition-colors flex items-center">
|
||||
<a href="https://phpflasher.com/docs" class="text-xs text-slate-600 hover:text-indigo-600 transition-colors flex items-center hover:underline">
|
||||
<i class="fas fa-book mr-1.5 text-xs"></i> Documentation
|
||||
</a>
|
||||
<a href="https://github.com/php-flasher/php-flasher" class="text-xs text-gray-600 hover:text-blue-600 transition-colors flex items-center">
|
||||
<a href="https://github.com/php-flasher/php-flasher" class="text-xs text-slate-600 hover:text-indigo-600 transition-colors flex items-center hover:underline">
|
||||
<i class="fab fa-github mr-1.5 text-xs"></i> GitHub
|
||||
</a>
|
||||
<a href="https://phpflasher.com/showcase" class="text-xs text-slate-600 hover:text-indigo-600 transition-colors flex items-center hover:underline">
|
||||
<i class="fas fa-lightbulb mr-1.5 text-xs"></i> Examples
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -361,6 +379,36 @@
|
||||
}
|
||||
}
|
||||
|
||||
/* Base animations for floating elements */
|
||||
@keyframes float {
|
||||
0%, 100% { transform: translateY(0); }
|
||||
50% { transform: translateY(-15px); }
|
||||
}
|
||||
|
||||
@keyframes shine {
|
||||
to { left: 100%; }
|
||||
}
|
||||
|
||||
/* Code style improvements for better readability */
|
||||
pre code {
|
||||
font-family: 'JetBrains Mono', 'Fira Code', monospace !important;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
/* Code snippets with smooth highlighting */
|
||||
.animated-line {
|
||||
position: relative;
|
||||
padding-left: 4px;
|
||||
border-left: 2px solid rgb(79, 70, 229);
|
||||
animation: highlight-line 2s ease-in-out;
|
||||
}
|
||||
|
||||
@keyframes highlight-line {
|
||||
0% { background-color: rgba(79, 70, 229, 0.05); }
|
||||
50% { background-color: rgba(79, 70, 229, 0.15); }
|
||||
100% { background-color: rgba(79, 70, 229, 0.05); }
|
||||
}
|
||||
|
||||
/* Floating elements */
|
||||
.animate-float-slow {
|
||||
animation: float-slow 8s ease-in-out infinite;
|
||||
@@ -513,6 +561,10 @@
|
||||
font-family: 'JetBrains Mono', 'Fira Code', monospace;
|
||||
}
|
||||
|
||||
#code-display-wrapper {
|
||||
background-color: #f5f2f0;
|
||||
}
|
||||
|
||||
/* Make sure the cursor blinks properly */
|
||||
@keyframes blink {
|
||||
0%, 100% {
|
||||
@@ -575,6 +627,7 @@
|
||||
code: {
|
||||
before: `// ProductController.php
|
||||
namespace App\\Http\\Controllers;
|
||||
|
||||
use App\\Models\\Product;
|
||||
use App\\Http\\Requests\\ProductRequest;
|
||||
|
||||
@@ -599,6 +652,7 @@ class ProductController extends Controller
|
||||
code: {
|
||||
before: `// ProductController.php
|
||||
namespace App\\Controller;
|
||||
|
||||
use App\\Entity\\Product;
|
||||
use Symfony\\Bundle\\FrameworkBundle\\Controller\\AbstractController;
|
||||
|
||||
@@ -648,6 +702,7 @@ async function createProduct(data) {
|
||||
code: {
|
||||
before: `// PaymentController.php
|
||||
namespace App\\Http\\Controllers;
|
||||
|
||||
use App\\Services\\PaymentGateway;
|
||||
|
||||
class PaymentController extends Controller
|
||||
@@ -675,6 +730,7 @@ class PaymentController extends Controller
|
||||
code: {
|
||||
before: `// PaymentController.php
|
||||
namespace App\\Controller;
|
||||
|
||||
use Symfony\\Bundle\\FrameworkBundle\\Controller\\AbstractController;
|
||||
|
||||
class PaymentController extends AbstractController
|
||||
@@ -729,6 +785,7 @@ async function processPayment(paymentData) {
|
||||
code: {
|
||||
before: `// OrderController.php
|
||||
namespace App\\Http\\Controllers;
|
||||
|
||||
use App\\Models\\Order;
|
||||
|
||||
class OrderController extends Controller
|
||||
@@ -755,6 +812,7 @@ class OrderController extends Controller
|
||||
code: {
|
||||
before: `// OrderController.php
|
||||
namespace App\\Controller;
|
||||
|
||||
use App\\Entity\\Order;
|
||||
use Symfony\\Bundle\\FrameworkBundle\\Controller\\AbstractController;
|
||||
|
||||
@@ -839,6 +897,7 @@ class AccountController extends Controller
|
||||
code: {
|
||||
before: `// AccountController.php
|
||||
namespace App\\Controller;
|
||||
|
||||
use Symfony\\Bundle\\FrameworkBundle\\Controller\\AbstractController;
|
||||
|
||||
class AccountController extends AbstractController
|
||||
|
||||
Vendored
+1
-1
@@ -2,7 +2,7 @@
|
||||
"entrypoints": {
|
||||
"main": {
|
||||
"css": [
|
||||
"/dist/main.86a43fec.css"
|
||||
"/dist/main.32ef094c.css"
|
||||
],
|
||||
"js": [
|
||||
"/dist/main.3be5bc06.js"
|
||||
|
||||
File diff suppressed because one or more lines are too long
Reference in New Issue
Block a user