php-flasher/docs/pages/playground.html

---
permalink: /playground/
title: Interactive Playground
description: Try PHPFlasher notifications live in your browser. Experiment with different types, themes, positions, and options - no installation required.
---

<div class="container max-w-7xl mx-auto px-4 lg:px-6 py-4">
    <!-- Quick Stats -->
    <section class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-8">
        <div class="bg-white rounded-2xl p-6 shadow-sm border border-slate-100 text-center hover:shadow-md transition-shadow">
            <div class="text-3xl font-bold text-indigo-600 mb-1">4</div>
            <div class="text-slate-600 text-sm">Notification Types</div>
        </div>
        <div class="bg-white rounded-2xl p-6 shadow-sm border border-slate-100 text-center hover:shadow-md transition-shadow">
            <div class="text-3xl font-bold text-indigo-600 mb-1">26</div>
            <div class="text-slate-600 text-sm">Beautiful Themes</div>
        </div>
        <div class="bg-white rounded-2xl p-6 shadow-sm border border-slate-100 text-center hover:shadow-md transition-shadow">
            <div class="text-3xl font-bold text-indigo-600 mb-1">6</div>
            <div class="text-slate-600 text-sm">Position Options</div>
        </div>
        <div class="bg-white rounded-2xl p-6 shadow-sm border border-slate-100 text-center hover:shadow-md transition-shadow">
            <div class="text-3xl font-bold text-indigo-600 mb-1">5</div>
            <div class="text-slate-600 text-sm">Adapters</div>
        </div>
    </section>

    <!-- Interactive Studio -->
    <section id="studio" class="scroll-mt-8">
        {% include flasher-studio.html %}
    </section>

    <!-- Theme Quick Select -->
    <section class="mt-16 mb-12">
        <div class="text-center mb-8">
            <div class="inline-block px-3 py-1 bg-indigo-50 text-indigo-700 rounded-full text-sm font-medium mb-3">
                Quick Theme Preview
            </div>
            <h2 class="text-2xl md:text-3xl font-bold text-slate-800 mb-2">Popular Themes</h2>
            <p class="text-slate-600">Click any theme to see it in action</p>
        </div>

        <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-3" id="theme-quick-select">
            <!-- Theme buttons will trigger notifications -->
            <button onclick="showThemeDemo('flasher')" class="group relative overflow-hidden bg-gradient-to-br from-indigo-500 to-indigo-600 text-white rounded-xl p-4 text-center hover:shadow-lg transition-all duration-300 hover:-translate-y-1">
                <div class="text-2xl mb-2"><i class="fas fa-bolt"></i></div>
                <div class="font-medium text-sm">Flasher</div>
                <div class="absolute inset-0 bg-white/20 opacity-0 group-hover:opacity-100 transition-opacity"></div>
            </button>

            <button onclick="showThemeDemo('material')" class="group relative overflow-hidden bg-gradient-to-br from-blue-500 to-blue-600 text-white rounded-xl p-4 text-center hover:shadow-lg transition-all duration-300 hover:-translate-y-1">
                <div class="text-2xl mb-2"><i class="fab fa-google"></i></div>
                <div class="font-medium text-sm">Material</div>
                <div class="absolute inset-0 bg-white/20 opacity-0 group-hover:opacity-100 transition-opacity"></div>
            </button>

            <button onclick="showThemeDemo('ios')" class="group relative overflow-hidden bg-gradient-to-br from-slate-600 to-slate-700 text-white rounded-xl p-4 text-center hover:shadow-lg transition-all duration-300 hover:-translate-y-1">
                <div class="text-2xl mb-2"><i class="fab fa-apple"></i></div>
                <div class="font-medium text-sm">iOS</div>
                <div class="absolute inset-0 bg-white/20 opacity-0 group-hover:opacity-100 transition-opacity"></div>
            </button>

            <button onclick="showThemeDemo('slack')" class="group relative overflow-hidden bg-gradient-to-br from-purple-500 to-purple-600 text-white rounded-xl p-4 text-center hover:shadow-lg transition-all duration-300 hover:-translate-y-1">
                <div class="text-2xl mb-2"><i class="fab fa-slack"></i></div>
                <div class="font-medium text-sm">Slack</div>
                <div class="absolute inset-0 bg-white/20 opacity-0 group-hover:opacity-100 transition-opacity"></div>
            </button>

            <button onclick="showThemeDemo('amazon')" class="group relative overflow-hidden bg-gradient-to-br from-orange-500 to-orange-600 text-white rounded-xl p-4 text-center hover:shadow-lg transition-all duration-300 hover:-translate-y-1">
                <div class="text-2xl mb-2"><i class="fab fa-amazon"></i></div>
                <div class="font-medium text-sm">Amazon</div>
                <div class="absolute inset-0 bg-white/20 opacity-0 group-hover:opacity-100 transition-opacity"></div>
            </button>

            <button onclick="showThemeDemo('minimal')" class="group relative overflow-hidden bg-gradient-to-br from-slate-400 to-slate-500 text-white rounded-xl p-4 text-center hover:shadow-lg transition-all duration-300 hover:-translate-y-1">
                <div class="text-2xl mb-2"><i class="fas fa-minus"></i></div>
                <div class="font-medium text-sm">Minimal</div>
                <div class="absolute inset-0 bg-white/20 opacity-0 group-hover:opacity-100 transition-opacity"></div>
            </button>

            <button onclick="showThemeDemo('neon')" class="group relative overflow-hidden bg-gradient-to-br from-pink-500 to-rose-500 text-white rounded-xl p-4 text-center hover:shadow-lg transition-all duration-300 hover:-translate-y-1">
                <div class="text-2xl mb-2"><i class="fas fa-lightbulb"></i></div>
                <div class="font-medium text-sm">Neon</div>
                <div class="absolute inset-0 bg-white/20 opacity-0 group-hover:opacity-100 transition-opacity"></div>
            </button>

            <button onclick="showThemeDemo('emerald')" class="group relative overflow-hidden bg-gradient-to-br from-emerald-500 to-emerald-600 text-white rounded-xl p-4 text-center hover:shadow-lg transition-all duration-300 hover:-translate-y-1">
                <div class="text-2xl mb-2"><i class="fas fa-gem"></i></div>
                <div class="font-medium text-sm">Emerald</div>
                <div class="absolute inset-0 bg-white/20 opacity-0 group-hover:opacity-100 transition-opacity"></div>
            </button>

            <button onclick="showThemeDemo('sapphire')" class="group relative overflow-hidden bg-gradient-to-br from-blue-600 to-indigo-600 text-white rounded-xl p-4 text-center hover:shadow-lg transition-all duration-300 hover:-translate-y-1">
                <div class="text-2xl mb-2"><i class="fas fa-gem"></i></div>
                <div class="font-medium text-sm">Sapphire</div>
                <div class="absolute inset-0 bg-white/20 opacity-0 group-hover:opacity-100 transition-opacity"></div>
            </button>

            <button onclick="showThemeDemo('ruby')" class="group relative overflow-hidden bg-gradient-to-br from-red-500 to-red-600 text-white rounded-xl p-4 text-center hover:shadow-lg transition-all duration-300 hover:-translate-y-1">
                <div class="text-2xl mb-2"><i class="fas fa-gem"></i></div>
                <div class="font-medium text-sm">Ruby</div>
                <div class="absolute inset-0 bg-white/20 opacity-0 group-hover:opacity-100 transition-opacity"></div>
            </button>

            <button onclick="showThemeDemo('onyx')" class="group relative overflow-hidden bg-gradient-to-br from-slate-800 to-slate-900 text-white rounded-xl p-4 text-center hover:shadow-lg transition-all duration-300 hover:-translate-y-1">
                <div class="text-2xl mb-2"><i class="fas fa-moon"></i></div>
                <div class="font-medium text-sm">Onyx</div>
                <div class="absolute inset-0 bg-white/20 opacity-0 group-hover:opacity-100 transition-opacity"></div>
            </button>

            <button onclick="showThemeDemo('aurora')" class="group relative overflow-hidden bg-gradient-to-br from-green-400 via-blue-500 to-purple-500 text-white rounded-xl p-4 text-center hover:shadow-lg transition-all duration-300 hover:-translate-y-1">
                <div class="text-2xl mb-2"><i class="fas fa-sun"></i></div>
                <div class="font-medium text-sm">Aurora</div>
                <div class="absolute inset-0 bg-white/20 opacity-0 group-hover:opacity-100 transition-opacity"></div>
            </button>
        </div>

        <div class="text-center mt-6">
            <a href="/themes/" class="inline-flex items-center text-indigo-600 hover:text-indigo-700 font-medium">
                View all 26 themes
                <i class="fas fa-arrow-right ml-2"></i>
            </a>
        </div>
    </section>

    <!-- Keyboard Shortcuts -->
    <section class="bg-slate-50 rounded-2xl p-8 mb-12">
        <div class="text-center mb-6">
            <h3 class="text-xl font-bold text-slate-800 mb-2">
                <i class="fas fa-keyboard text-indigo-500 mr-2"></i>
                Pro Tips
            </h3>
            <p class="text-slate-600">Make the most of the playground</p>
        </div>

        <div class="grid md:grid-cols-3 gap-6 max-w-4xl mx-auto">
            <div class="bg-white rounded-xl p-5 shadow-sm">
                <div class="flex items-center mb-3">
                    <div class="w-10 h-10 bg-emerald-100 text-emerald-600 rounded-lg flex items-center justify-center mr-3">
                        <i class="fas fa-bolt"></i>
                    </div>
                    <h4 class="font-semibold text-slate-800">Quick Presets</h4>
                </div>
                <p class="text-slate-600 text-sm">Use the preset buttons for common notification scenarios like "User Created" or "Payment Failed".</p>
            </div>

            <div class="bg-white rounded-xl p-5 shadow-sm">
                <div class="flex items-center mb-3">
                    <div class="w-10 h-10 bg-blue-100 text-blue-600 rounded-lg flex items-center justify-center mr-3">
                        <i class="fas fa-code"></i>
                    </div>
                    <h4 class="font-semibold text-slate-800">Copy Code</h4>
                </div>
                <p class="text-slate-600 text-sm">The code panel updates in real-time. Switch between Laravel, Symfony, and JavaScript tabs.</p>
            </div>

            <div class="bg-white rounded-xl p-5 shadow-sm">
                <div class="flex items-center mb-3">
                    <div class="w-10 h-10 bg-purple-100 text-purple-600 rounded-lg flex items-center justify-center mr-3">
                        <i class="fas fa-gamepad"></i>
                    </div>
                    <h4 class="font-semibold text-slate-800">Easter Egg</h4>
                </div>
                <p class="text-slate-600 text-sm">Try the Konami code for a surprise! <span class="text-xs text-slate-400">(Hint: it's a classic)</span></p>
            </div>
        </div>
    </section>

    <!-- CTA Section -->
    <section class="bg-gradient-to-r from-indigo-600 to-purple-600 rounded-2xl p-8 md:p-12 text-center text-white">
        <h2 class="text-2xl md:text-3xl font-bold mb-4">Ready to use PHPFlasher?</h2>
        <p class="text-indigo-100 mb-8 max-w-2xl mx-auto">
            Install PHPFlasher in your Laravel or Symfony project and start showing beautiful notifications in minutes.
        </p>
        <div class="flex flex-wrap justify-center gap-4">
            <a href="/laravel/" class="inline-flex items-center px-6 py-3 bg-white text-indigo-600 font-semibold rounded-xl hover:bg-indigo-50 transition-colors shadow-lg">
                <i class="fab fa-laravel mr-2 text-red-500"></i>
                Laravel Guide
            </a>
            <a href="/symfony/" class="inline-flex items-center px-6 py-3 bg-white/10 backdrop-blur-sm text-white font-semibold rounded-xl border border-white/30 hover:bg-white/20 transition-colors">
                <i class="fab fa-symfony mr-2"></i>
                Symfony Guide
            </a>
        </div>
    </section>
</div>

<script>
    // Theme demo function
    function showThemeDemo(themeName) {
        if (typeof flasher !== 'undefined') {
            const messages = {
                success: 'Operation completed successfully!',
                info: 'Here is some useful information.',
                warning: 'Please review before continuing.',
                error: 'Something went wrong!'
            };

            const types = ['success', 'info', 'warning', 'error'];
            const randomType = types[Math.floor(Math.random() * types.length)];

            flasher.use(`theme.${themeName}`).flash({
                type: randomType,
                message: messages[randomType],
                title: themeName.charAt(0).toUpperCase() + themeName.slice(1) + ' Theme'
            });
        }
    }

    // Smooth scroll for anchor links
    document.querySelectorAll('a[href^="#"]').forEach(anchor => {
        anchor.addEventListener('click', function (e) {
            e.preventDefault();
            const target = document.querySelector(this.getAttribute('href'));
            if (target) {
                target.scrollIntoView({
                    behavior: 'smooth',
                    block: 'start'
                });
            }
        });
    });
</script>