Spaces:

ProjectGenesis
/

live-notification-ui

Running

App Files Files Community

ProjectGenesis commited on Aug 5

Commit

5d7500a

verified ·

1 Parent(s): 7a0f050

Build a single showcase page displaying 10 different unique notification pop-up styles for a modern web application. Each pop-up should be visually distinct in layout, animation style, and position (e.g., top bar, bottom slide-up, floating card, corner toast, banner overlay, modal, etc.). Theme: Dark UI with neon orange and neon yellow accents on black backgrounds. Use modern, minimal, glassmorphism or neumorphism effects where appropriate. Design Requirements: Each pop-up contains a sample message, such as “New Offer Available! Claim Now” or “Breaking News: Double Rewards Weekend.” Include a call-to-action button (“View Offer” or “Learn More”). Maintain readability while emphasizing urgency and excitement. Use glowing neon orange/yellow accents, gradient borders, or animated highlights. Animation Requirements (Must Loop Continuously): Each style should use a different animation pattern, and all animations must loop infinitely rather than play only once. Example animation patterns: Slide down + glow pulse loop Slide up + bounce loop Fade in/out loop Scale up/down pulse loop Flip + shadow pulse loop Zoom in/out with neon glow loop Slide in/out horizontally loop Marquee scrolling text loop Floating hover loop Gradient color shift loop Use smooth easing for all animations (e.g., ease-in-out). Include animation timing examples such as 2.5s infinite alternate so it’s clear animations are persistent. Buttons should have hover effects that also loop continuously (e.g., glow pulsing). Showcase Layout: Arrange all 10 variations vertically on a single scrolling page. Each style clearly labeled “Style 1,” “Style 2,” etc. Consistent dark background so the neon effects pop. Ensure designs are responsive and mobile-friendly. - Follow Up Deployment

Browse files

Files changed (1) hide show

index.html +314 -338

index.html CHANGED Viewed

@@ -3,42 +3,50 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Neon Notification Showcase</title>
-    <script src="https://cdn.tailwindcss.com"></script>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
     <script>
         tailwind.config = {
             theme: {
                 extend: {
-                    colors: {
-                        'neon-orange': '#ff5e00',
-                        'neon-yellow': '#ffdd00',
-                        'dark-bg': '#0f0f0f',
-                        'glass': 'rgba(30,30,30,0.6)'
-                    },
                     animation: {
-                        'glow-pulse': 'glowPulse 2s infinite',
-                        'bounce-in': 'bounceIn 0.8s',
-                        'flip-in': 'flipIn 0.6s',
-                        'marquee': 'marquee 15s linear infinite'
                     },
                     keyframes: {
-                        glowPulse: {
-                            '0%, 100%': { 'box-shadow': '0 0 5px #ff5e00, 0 0 15px rgba(255, 94, 0, 0.5)' },
-                            '50%': { 'box-shadow': '0 0 15px #ffdd00, 0 0 25px rgba(255, 221, 0, 0.7)' }
                         },
-                        bounceIn: {
-                            '0%': { transform: 'scale(0.1)', opacity: '0' },
-                            '60%': { transform: 'scale(1.1)', opacity: '1' },
-                            '100%': { transform: 'scale(1)', opacity: '1' }
                         },
-                        flipIn: {
-                            '0%': { transform: 'rotateY(90deg)', opacity: '0' },
-                            '100%': { transform: 'rotateY(0)', opacity: '1' }
                         },
-                        marquee: {
-                            '0%': { transform: 'translateX(100%)' },
-                            '100%': { transform: 'translateX(-100%)' }
                         }
                     }
                 }
@@ -46,291 +54,257 @@
         }
     </script>
     <style>
-        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
         body {
-            font-family: 'Inter', sans-serif;
-            background: radial-gradient(ellipse at center, #1a1a1a 0%, #0a0a0a 100%);
             min-height: 100vh;
             overflow-x: hidden;
         }
-        .glass {
-            background: rgba(30, 30, 30, 0.6);
-            backdrop-filter: blur(12px);
-            -webkit-backdrop-filter: blur(12px);
-            border: 1px solid rgba(255, 94, 0, 0.15);
-        }
-        .neon-orange-glow {
-            box-shadow: 0 0 10px rgba(255, 94, 0, 0.7), 0 0 20px rgba(255, 94, 0, 0.4);
-        }
-        .neon-yellow-glow {
-            box-shadow: 0 0 10px rgba(255, 221, 0, 0.7), 0 0 20px rgba(255, 221, 0, 0.4);
-        }
-        .neon-gradient {
-            background: linear-gradient(45deg, #ff5e00, #ffdd00);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-        }
-        .btn-glow:hover {
-            box-shadow: 0 0 15px rgba(255, 94, 0, 0.8), 0 0 25px rgba(255, 221, 0, 0.6);
-            transform: translateY(-2px);
-        }
-        .slide-down {
-            animation: slideDown 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
-        }
-        .slide-up {
-            animation: slideUp 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
-        }
-        .zoom-blur {
-            animation: zoomBlur 0.7s cubic-bezier(0.175, 0.885, 0.32, 1.275);
-        }
-        .slide-left {
-            animation: slideLeft 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
-        }
-        .slide-right {
-            animation: slideRight 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
-        }
-        .expand {
-            animation: expand 0.9s cubic-bezier(0.175, 0.885, 0.32, 1.275);
-        }
-        @keyframes slideDown {
-            0% { transform: translateY(-100px); opacity: 0; }
-            100% { transform: translateY(0); opacity: 1; }
-        }
-        @keyframes slideUp {
-            0% { transform: translateY(100px); opacity: 0; }
-            100% { transform: translateY(0); opacity: 1; }
-        }
-        @keyframes zoomBlur {
-            0% { transform: scale(0.8); filter: blur(10px); opacity: 0; }
-            100% { transform: scale(1); filter: blur(0); opacity: 1; }
-        }
-        @keyframes slideLeft {
-            0% { transform: translateX(100%); opacity: 0; }
-            100% { transform: translateX(0); opacity: 1; }
         }
-        @keyframes slideRight {
-            0% { transform: translateX(-100%); opacity: 0; }
-            100% { transform: translateX(0); opacity: 1; }
         }
-        @keyframes expand {
-            0% { width: 50px; height: 50px; border-radius: 50%; opacity: 0; }
-            50% { width: 50px; height: 50px; border-radius: 50%; opacity: 0.8; }
-            100% { width: 100%; height: auto; border-radius: 12px; opacity: 1; }
         }
-        .pulse {
-            animation: pulse 2s infinite;
         }
-        @keyframes pulse {
-            0% { box-shadow: 0 0 0 0 rgba(255, 94, 0, 0.7); }
-            70% { box-shadow: 0 0 0 10px rgba(255, 94, 0, 0); }
-            100% { box-shadow: 0 0 0 0 rgba(255, 94, 0, 0); }
         }
-        .divider {
-            height: 1px;
-            background: linear-gradient(90deg, transparent, #ff5e00, #ffdd00, transparent);
         }
-        .notification-card {
             transition: all 0.3s ease;
         }
-        .notification-card:hover {
-            transform: translateY(-5px);
-            box-shadow: 0 10px 25px rgba(255, 94, 0, 0.3);
         }
     </style>
 </head>
-<body class="text-gray-200">
     <!-- Header -->
-    <header class="py-8 text-center">
         <div class="container mx-auto px-4">
-            <h1 class="text-4xl md:text-5xl font-bold mb-4 bg-clip-text text-transparent bg-gradient-to-r from-neon-orange to-neon-yellow">
-                Neon Notification Showcase
-            </h1>
-            <p class="max-w-2xl mx-auto text-gray-400">
-                10 unique notification styles with glowing neon accents and smooth animations
-            </p>
         </div>
     </header>
-    <!-- Main Showcase -->
-    <main class="container mx-auto px-4 pb-20">
-        <!-- Style 1: Top Bar -->
-        <section class="mb-24 notification-card">
-            <div class="flex items-center justify-between mb-6">
-                <h2 class="text-2xl font-bold flex items-center gap-2">
-                    <span class="w-8 h-8 rounded-full bg-neon-orange flex items-center justify-center text-dark-bg font-bold text-sm">1</span>
-                    Top Bar Slide Down
-                </h2>
-                <div class="h-1 flex-grow ml-4 bg-gradient-to-r from-neon-orange to-neon-yellow rounded-full"></div>
-            </div>
-            <div class="relative h-40 rounded-xl overflow-hidden">
-                <div class="absolute top-0 left-0 right-0 slide-down glass flex items-center justify-between px-6 py-4 border-b border-neon-orange">
-                    <div class="flex items-center gap-3">
-                        <div class="pulse w-3 h-3 rounded-full bg-neon-orange"></div>
-                        <p class="font-medium">Breaking News: Double Rewards Weekend!</p>
                     </div>
-                    <button class="btn-glow bg-gradient-to-r from-neon-orange to-neon-yellow text-dark-bg font-bold px-5 py-2 rounded-full transition-all duration-300">
-                        Learn More
                     </button>
                 </div>
             </div>
         </section>
-        <!-- Style 2: Bottom Slide-Up -->
-        <section class="mb-24 notification-card">
-            <div class="flex items-center justify-between mb-6">
-                <h2 class="text-2xl font-bold flex items-center gap-2">
-                    <span class="w-8 h-8 rounded-full bg-neon-orange flex items-center justify-center text-dark-bg font-bold text-sm">2</span>
-                    Bottom Slide-Up
-                </h2>
-                <div class="h-1 flex-grow ml-4 bg-gradient-to-r from-neon-orange to-neon-yellow rounded-full"></div>
-            </div>
-            <div class="relative h-40 rounded-xl overflow-hidden">
-                <div class="absolute bottom-0 left-0 right-0 slide-up glass flex items-center justify-between px-6 py-4 border-t border-neon-yellow">
-                    <div class="flex items-center gap-3">
-                        <i class="fas fa-gift text-neon-yellow text-xl"></i>
-                        <p class="font-medium">Special Offer: 50% off all premium features!</p>
                     </div>
-                    <button class="btn-glow border-2 border-neon-yellow text-neon-yellow font-bold px-5 py-2 rounded-full transition-all duration-300 hover:bg-neon-yellow/10">
-                        View Offer
                     </button>
                 </div>
             </div>
         </section>
-        <!-- Style 3: Fade In + Glow Pulse -->
-        <section class="mb-24 notification-card">
-            <div class="flex items-center justify-between mb-6">
-                <h2 class="text-2xl font-bold flex items-center gap-2">
-                    <span class="w-8 h-8 rounded-full bg-neon-orange flex items-center justify-center text-dark-bg font-bold text-sm">3</span>
-                    Fade In + Glow Pulse
-                </h2>
-                <div class="h-1 flex-grow ml-4 bg-gradient-to-r from-neon-orange to-neon-yellow rounded-full"></div>
             </div>
-            <div class="relative h-52 rounded-xl overflow-hidden flex items-center justify-center">
-                <div class="glass glow-pulse rounded-xl p-6 max-w-md border border-neon-orange/30">
-                    <div class="flex items-start gap-4">
-                        <div class="mt-1">
-                            <div class="w-10 h-10 rounded-full bg-gradient-to-br from-neon-orange to-neon-yellow flex items-center justify-center">
-                                <i class="fas fa-bolt text-dark-bg"></i>
-                            </div>
                         </div>
                         <div>
-                            <h3 class="font-bold text-lg mb-1">System Upgrade Complete</h3>
-                            <p class="text-gray-300 mb-4">New features available with enhanced performance</p>
-                            <button class="btn-glow bg-gradient-to-r from-neon-orange to-neon-yellow text-dark-bg font-bold px-4 py-2 rounded-lg transition-all duration-300 text-sm">
-                                Explore Features
-                            </button>
                         </div>
                     </div>
                 </div>
             </div>
         </section>
-        <!-- Style 4: Bounce In -->
-        <section class="mb-24 notification-card">
-            <div class="flex items-center justify-between mb-6">
-                <h2 class="text-2xl font-bold flex items-center gap-2">
-                    <span class="w-8 h-8 rounded-full bg-neon-orange flex items-center justify-center text-dark-bg font-bold text-sm">4</span>
-                    Bounce In From Center
-                </h2>
-                <div class="h-1 flex-grow ml-4 bg-gradient-to-r from-neon-orange to-neon-yellow rounded-full"></div>
-            </div>
-            <div class="relative h-52 rounded-xl overflow-hidden flex items-center justify-center">
-                <div class="glass animate-bounce-in rounded-xl p-5 max-w-sm border border-neon-yellow/30">
-                    <div class="text-center">
-                        <div class="w-12 h-12 mx-auto rounded-full bg-gradient-to-br from-neon-orange to-neon-yellow flex items-center justify-center mb-3">
-                            <i class="fas fa-star text-dark-bg"></i>
                         </div>
-                        <h3 class="font-bold text-lg mb-1">You've Earned a Badge!</h3>
-                        <p class="text-gray-300 mb-3">Master Explorer unlocked</p>
-                        <button class="btn-glow mx-auto bg-gradient-to-r from-neon-orange to-neon-yellow text-dark-bg font-bold px-4 py-2 rounded-lg transition-all duration-300 text-sm">
-                            View Profile
-                        </button>
                     </div>
                 </div>
             </div>
         </section>
-        <!-- Style 5: Flip Card -->
-        <section class="mb-24 notification-card">
-            <div class="flex items-center justify-between mb-6">
-                <h2 class="text-2xl font-bold flex items-center gap-2">
-                    <span class="w-8 h-8 rounded-full bg-neon-orange flex items-center justify-center text-dark-bg font-bold text-sm">5</span>
-                    Flip-In Card Animation
-                </h2>
-                <div class="h-1 flex-grow ml-4 bg-gradient-to-r from-neon-orange to-neon-yellow rounded-full"></div>
-            </div>
-            <div class="relative h-52 rounded-xl overflow-hidden flex items-center justify-center">
-                <div class="glass animate-flip-in rounded-xl p-5 w-80 transform perspective-1000">
-                    <div class="flex items-center gap-4">
-                        <div class="flex-shrink-0">
-                            <div class="w-12 h-12 rounded-lg bg-gradient-to-br from-neon-orange to-neon-yellow flex items-center justify-center">
-                                <i class="fas fa-user-plus text-dark-bg"></i>
-                            </div>
-                        </div>
-                        <div>
-                            <h3 class="font-bold text-lg mb-1">New Connection</h3>
-                            <p class="text-gray-300 mb-3">Alex Morgan followed you</p>
-                            <button class="btn-glow bg-gradient-to-r from-neon-orange to-neon-yellow text-dark-bg font-bold px-4 py-2 rounded-lg transition-all duration-300 text-sm">
-                                View Profile
-                            </button>
                         </div>
                     </div>
                 </div>
             </div>
         </section>
-        <!-- Style 6: Zoom In with Blur -->
-        <section class="mb-24 notification-card">
-            <div class="flex items-center justify-between mb-6">
-                <h2 class="text-2xl font-bold flex items-center gap-2">
-                    <span class="w-8 h-8 rounded-full bg-neon-orange flex items-center justify-center text-dark-bg font-bold text-sm">6</span>
-                    Zoom-In with Blur Reveal
-                </h2>
-                <div class="h-1 flex-grow ml-4 bg-gradient-to-r from-neon-orange to-neon-yellow rounded-full"></div>
-            </div>
-            <div class="relative h-52 rounded-xl overflow-hidden flex items-center justify-center">
-                <div class="glass zoom-blur rounded-xl p-5 max-w-sm border-2 border-neon-orange/50">
-                    <div class="flex items-center gap-4">
-                        <div class="flex-shrink-0">
-                            <div class="w-12 h-12 rounded-full bg-gradient-to-br from-neon-orange to-neon-yellow flex items-center justify-center">
-                                <i class="fas fa-bell text-dark-bg"></i>
                             </div>
                         </div>
-                        <div>
-                            <h3 class="font-bold text-lg mb-1">Reminder: Event Starting Soon</h3>
-                            <p class="text-gray-300 mb-3">Neon Tech Conference in 15 minutes</p>
-                            <button class="btn-glow bg-gradient-to-r from-neon-orange to-neon-yellow text-dark-bg font-bold px-4 py-2 rounded-lg transition-all duration-300 text-sm">
-                                Join Now
                             </button>
                         </div>
                     </div>
@@ -338,115 +312,117 @@
             </div>
         </section>
-        <!-- Style 7: Left Slide Toast -->
-        <section class="mb-24 notification-card">
-            <div class="flex items-center justify-between mb-6">
-                <h2 class="text-2xl font-bold flex items-center gap-2">
-                    <span class="w-8 h-8 rounded-full bg-neon-orange flex items-center justify-center text-dark-bg font-bold text-sm">7</span>
-                    Left-to-Right Slide-In Toast
-                </h2>
-                <div class="h-1 flex-grow ml-4 bg-gradient-to-r from-neon-orange to-neon-yellow rounded-full"></div>
-            </div>
-            <div class="relative h-40 rounded-xl overflow-hidden">
-                <div class="absolute top-6 right-6 slide-left glass rounded-lg p-4 w-80 border-l-4 border-neon-yellow">
-                    <div class="flex items-start gap-3">
-                        <i class="fas fa-check-circle text-neon-yellow mt-1"></i>
-                        <div>
-                            <h3 class="font-bold mb-1">Successfully Saved</h3>
-                            <p class="text-gray-300 text-sm">Your changes have been saved</p>
-                        </div>
                     </div>
                 </div>
             </div>
         </section>
-        <!-- Style 8: Right Slide Toast -->
-        <section class="mb-24 notification-card">
-            <div class="flex items-center justify-between mb-6">
-                <h2 class="text-2xl font-bold flex items-center gap-2">
-                    <span class="w-8 h-8 rounded-full bg-neon-orange flex items-center justify-center text-dark-bg font-bold text-sm">8</span>
-                    Right-to-Left Slide-In Toast
-                </h2>
-                <div class="h-1 flex-grow ml-4 bg-gradient-to-r from-neon-orange to-neon-yellow rounded-full"></div>
-            </div>
-            <div class="relative h-40 rounded-xl overflow-hidden">
-                <div class="absolute top-6 left-6 slide-right glass rounded-lg p-4 w-80 border-l-4 border-neon-orange">
-                    <div class="flex items-start gap-3">
-                        <i class="fas fa-exclamation-triangle text-neon-orange mt-1"></i>
-                        <div>
-                            <h3 class="font-bold mb-1">Warning: Storage Almost Full</h3>
-                            <p class="text-gray-300 text-sm">89% of your storage is used</p>
-                        </div>
                     </div>
-                </div>
-            </div>
-        </section>
-        <!-- Style 9: Expand Animation -->
-        <section class="mb-24 notification-card">
-            <div class="flex items-center justify-between mb-6">
-                <h2 class="text-2xl font-bold flex items-center gap-2">
-                    <span class="w-8 h-8 rounded-full bg-neon-orange flex items-center justify-center text-dark-bg font-bold text-sm">9</span>
-                    Expand from Button Click
-                </h2>
-                <div class="h-1 flex-grow ml-4 bg-gradient-to-r from-neon-orange to-neon-yellow rounded-full"></div>
-            </div>
-            <div class="relative h-52 rounded-xl overflow-hidden flex items-center justify-center">
-                <div class="expand glass rounded-xl p-5 w-full max-w-md">
-                    <div class="flex items-center gap-4">
-                        <div class="flex-shrink-0">
-                            <div class="w-12 h-12 rounded-full bg-gradient-to-br from-neon-orange to-neon-yellow flex items-center justify-center">
-                                <i class="fas fa-rocket text-dark-bg"></i>
-                            </div>
-                        </div>
-                        <div class="flex-grow">
-                            <h3 class="font-bold text-lg mb-1">Boost Your Experience</h3>
-                            <p class="text-gray-300 mb-3">Upgrade to premium for exclusive features</p>
                         </div>
-                        <button class="btn-glow bg-gradient-to-r from-neon-orange to-neon-yellow text-dark-bg font-bold px-4 py-2 rounded-lg transition-all duration-300 text-sm">
-                            Upgrade Now
-                        </button>
                     </div>
                 </div>
             </div>
         </section>
-        <!-- Style 10: Marquee Bar -->
-        <section class="notification-card">
-            <div class="flex items-center justify-between mb-6">
-                <h2 class="text-2xl font-bold flex items-center gap-2">
-                    <span class="w-8 h-8 rounded-full bg-neon-orange flex items-center justify-center text-dark-bg font-bold text-sm">10</span>
-                    Marquee Scrolling Text Bar
-                </h2>
-                <div class="h-1 flex-grow ml-4 bg-gradient-to-r from-neon-orange to-neon-yellow rounded-full"></div>
-            </div>
-            <div class="relative h-20 rounded-xl overflow-hidden">
-                <div class="absolute inset-x-0 top-0 glass py-4 border-y border-neon-orange/30">
-                    <div class="animate-marquee whitespace-nowrap">
-                        <span class="mx-8 text-lg font-bold neon-gradient">FLASH SALE: 24 HOURS ONLY!</span>
-                        <span class="mx-8">🔥 All premium plans 60% OFF - Limited time offer! 🔥</span>
-                        <span class="mx-8">🎉 Use code: NEON60 at checkout 🎉</span>
-                        <span class="mx-8">
-                            <button class="btn-glow bg-gradient-to-r from-neon-orange to-neon-yellow text-dark-bg font-bold px-4 py-1 rounded-full transition-all duration-300 text-sm">
-                                Claim Offer
-                            </button>
                         </span>
                     </div>
                 </div>
             </div>
         </section>
     </main>
-    <!-- Footer -->
-    <footer class="py-10 text-center text-gray-500 text-sm">
-        <div class="container mx-auto px-4">
-            <p>Modern Notification Showcase • Created with Tailwind CSS</p>
-            <p class="mt-2">Neon orange (#ff5e00) & Neon yellow (#ffdd00) on dark backgrounds</p>
         </div>
     </footer>
 <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=ProjectGenesis/live-notification-ui" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
 </html>

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Neon Notification Showcase | 10 Styles</title>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <script src="https://cdn.tailwindcss.com"></script>
     <script>
         tailwind.config = {
             theme: {
                 extend: {
                     animation: {
+                        'slide-down-glow': 'slideDown 1s ease-in-out infinite alternate',
+                        'bounce-glow': 'bounceGlow 2s ease-in-out infinite',
+                        'float-pulse': 'floatPulse 3s ease-in-out infinite',
+                        'flip-glow': 'flipGlow 3s ease-in-out infinite',
+                        'neon-shift': 'neonShift 4s linear infinite',
+                        'glow-pulse': 'glowPulse 2s ease-in-out infinite'
                     },
                     keyframes: {
+                        slideDown: {
+                            '0%': { transform: 'translateY(-100px)', opacity: 0 },
+                            '100%': { transform: 'translateY(0)', opacity: 1, boxShadow: '0 0 20px rgba(255, 94, 0, 0.8)' }
                         },
+                        bounceGlow: {
+                            '0%, 100%': { transform: 'translateY(0)', boxShadow: '0 0 12px rgba(255, 199, 0, 0.4)' },
+                            '30%': { transform: 'translateY(-20px)', boxShadow: '0 0 20px rgba(255, 199, 0, 0.8)' },
+                            '50%': { transform: 'translateY(0)', boxShadow: '0 0 8px rgba(255, 199, 0, 0.3)' },
+                            '75%': { transform: 'translateY(-10px)', boxShadow: '0 0 15px rgba(255, 199, 0, 0.6)' }
                         },
+                        floatPulse: {
+                            '0%, 100%': { transform: 'translateY(0) scale(1)', boxShadow: '0 0 15px rgba(255, 199, 0, 0.3)' },
+                            '50%': { transform: 'translateY(-15px) scale(1.02)', boxShadow: '0 0 25px rgba(255, 122, 0, 0.6)' }
                         },
+                        flipGlow: {
+                            '0%, 100%': { transform: 'perspective(500px) rotateY(0deg)', boxShadow: '-8px 0 12px rgba(255, 122, 0, 0.5)' },
+                            '50%': { transform: 'perspective(500px) rotateY(15deg)', boxShadow: '-20px 0 18px rgba(255, 199, 0, 0.7)' }
+                        },
+                        neonShift: {
+                            '0%': { borderColor: '#ff5e00' },
+                            '25%': { borderColor: '#ff9900' },
+                            '50%': { borderColor: '#ffc700' },
+                            '75%': { borderColor: '#ff9900' },
+                            '100%': { borderColor: '#ff5e00' }
+                        },
+                        glowPulse: {
+                            '0%, 100%': { textShadow: '0 0 5px rgba(255, 199, 0, 0.6)', boxShadow: '0 0 10px rgba(255, 199, 0, 0.4)' },
+                            '50%': { textShadow: '0 0 10px rgba(255, 199, 0, 1)', boxShadow: '0 0 15px rgba(255, 199, 0, 0.8)' }
                         }
                     }
                 }
         }
     </script>
     <style>
+        :root {
+            --neon-orange: #ff5e00;
+            --neon-yellow: #ffc700;
+            --dark-bg: #0f0f13;
+            --card-bg: rgba(23, 23, 33, 0.7);
+        }
         body {
+            background: radial-gradient(circle at top, #171721, var(--dark-bg) 60%) no-repeat;
+            background-attachment: fixed;
             min-height: 100vh;
+            margin: 0;
+            color: #f0f0f0;
+            font-family: 'Segoe UI', system-ui, sans-serif;
             overflow-x: hidden;
         }
+        /* Glow effects created with Tailwind animations */
+        .neon-border {
+            border: 1.5px solid transparent;
+            border-radius: 12px;
+            animation: neonShift 4s linear infinite;
         }
+        .glowing-orb {
+            width: 12px;
+            height: 12px;
+            border-radius: 50%;
+            background-color: var(--neon-yellow);
+            display: inline-block;
+            box-shadow: 0 0 10px var(--neon-yellow);
+            animation: pulse 1.5s ease-in-out infinite alternate;
         }
+        @keyframes pulse {
+            0% { opacity: 0.6; transform: scale(0.9); }
+            100% { opacity: 1; transform: scale(1.1); }
         }
+        .marquee {
+            animation: marquee 15s linear infinite;
+            white-space: nowrap;
+            overflow: hidden;
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
         }
+        @keyframes marquee {
+            0% { transform: translateX(100%); }
+            100% { transform: translateX(-100%); }
         }
+        /* Glass card effect */
+        .glass-card {
+            background: linear-gradient(145deg, rgba(35,36,46,0.8), rgba(25,26,36,0.5));
+            backdrop-filter: blur(20px);
+            -webkit-backdrop-filter: blur(20px);
+            border-radius: 20px;
+            box-shadow: 0 6px 30px rgba(0, 0, 0, 0.3);
         }
+        .btn-hover-glow {
             transition: all 0.3s ease;
         }
+        .btn-hover-glow:hover {
+            transform: translateY(-2px);
+            animation: glowPulse 1.5s ease-in-out infinite;
         }
     </style>
 </head>
+<body class="bg-slate-900">
     <!-- Header -->
+    <header class="pt-12 pb-8">
         <div class="container mx-auto px-4">
+            <div class="mb-4 text-center">
+                <span class="glowing-orb"></span>
+                <h1 class="text-4xl md:text-5xl font-bold inline-block bg-clip-text text-transparent bg-gradient-to-r from-orange-500 via-yellow-400 to-orange-500 ml-3">NEON NOTIFICATION SHOWCASE</h1>
+                <span class="glowing-orb"></span>
+            </div>
+            <p class="text-center text-slate-400 max-w-2xl mx-auto">10 distinct notification styles with infinitely looping animations, neon effects, and glassmorphism. Dark UI with orange-yellow accent theme.</p>
+            <div class="flex justify-center my-6">
+                <div class="flex space-x-2">
+                    <span class="h-3 w-3 rounded-full bg-orange-500"></span>
+                    <span class="h-3 w-3 rounded-full bg-yellow-400"></span>
+                    <span class="h-3 w-3 rounded-full bg-amber-500"></span>
+                </div>
+            </div>
         </div>
     </header>
+    <!-- Notification Showcase -->
+    <main class="container mx-auto px-4 py-8 max-w-5xl">
+        <!-- Style 1: Top Bar Slide Down -->
+        <section class="mb-20 relative">
+            <h2 class="text-2xl font-bold mb-6 text-orange-400 flex items-center">
+                <i class="fas fa-arrow-down mr-2 text-xl"></i> Style 1: Top Bar Slide Down
+            </h2>
+            <div class="relative h-40 rounded-xl overflow-hidden border border-gray-800 bg-slate-900/80">
+                <div class="absolute w-full h-16 animation-slide-down-glow flex items-center justify-between px-6 glass-card" style="animation: slideDown 1.2s ease-in-out infinite alternate;">
+                    <div class="flex items-center">
+                        <i class="fas fa-bolt text-xl text-yellow-400 mr-3"></i>
+                        <div>
+                            <p class="font-semibold text-white">Flash Alert!</p>
+                            <p class="text-sm text-slate-300">Double rewards active for your account</p>
+                        </div>
                     </div>
+                    <button class="btn-hover-glow rounded-full bg-gradient-to-r from-orange-500 to-amber-500 px-4 py-1.5 font-medium text-white text-sm">
+                        Claim Now
                     </button>
                 </div>
             </div>
         </section>
+        <!-- Style 2: Slide Up Bounce -->
+        <section class="mb-20">
+            <h2 class="text-2xl font-bold mb-6 text-yellow-400 flex items-center">
+                <i class="fas fa-sort-up mr-2 text-xl"></i> Style 2: Slide Up with Bounce
+            </h2>
+            <div class="relative h-40 rounded-xl overflow-hidden border border-gray-800 bg-slate-900/80 flex justify-center">
+                <div class="absolute bottom-0 w-11/12 md:w-3/4 h-14 animation-bounce-glow flex items-center justify-between px-6 py-3 glass-card rounded-t-xl">
+                    <div class="flex items-center">
+                        <i class="fas fa-star text-yellow-400 mr-3"></i>
+                        <span class="text-white font-medium">Limited Time - 20% off upgrades!</span>
                     </div>
+                    <button class="btn-hover-glow rounded-full border-2 border-transparent px-4 py-1 text-white text-sm" style="background: linear-gradient(var(--card-bg), var(--card-bg)) padding-box, linear-gradient(135deg, #ff5e00, #ffc700) border-box;">
+                        View Deal
                     </button>
                 </div>
             </div>
         </section>
+        <!-- Style 3: Floating Card -->
+        <section class="mb-20">
+            <h2 class="text-2xl font-bold mb-6 text-orange-300 flex items-center">
+                <i class="fas fa-arrows-alt mr-2 text-xl"></i> Style 3: Floating Card
+            </h2>
+            <div class="flex justify-center">
+                <div class="animation-float-pulse glass-card w-full max-w-sm p-6 border border-gray-700 rounded-2xl relative">
+                    <div class="absolute top-0 right-0 h-16 w-16 overflow-hidden">
+                        <div class="absolute -top-5 -right-5 w-20 h-20 bg-yellow-400 opacity-20 blur-xl"></div>
+                    </div>
+                    <h3 class="text-xl font-bold text-white flex items-center">
+                        <i class="fas fa-gift text-orange-500 mr-2"></i> Exclusive Reward Inside
+                    </h3>
+                    <p class="my-3 text-slate-300 text-sm">You've unlocked a special bonus for completing your profile!</p>
+                    <div class="flex justify-end mt-4">
+                        <button class="btn-hover-glow bg-gradient-to-r from-orange-600 to-orange-400 px-5 py-2 rounded-lg font-medium text-white">
+                            Claim Reward
+                        </button>
+                    </div>
+                </div>
             </div>
+        </section>
+        <!-- Style 4: Corner Toast -->
+        <section class="mb-20">
+            <h2 class="text-2xl font-bold mb-6 text-yellow-300 flex items-center">
+                <i class="fas fa-expand-arrows-alt mr-2 text-xl"></i> Style 4: Corner Toast
+            </h2>
+            <div class="relative h-40 rounded-xl overflow-hidden border border-gray-800 bg-slate-900/80">
+                <div class="absolute top-4 right-4 glass-card rounded-xl py-3 px-4" style="animation: fadeInOut 5s ease-in-out infinite;">
+                    <div class="flex items-start">
+                        <div class="mr-3 mt-0.5">
+                            <i class="fas fa-bell text-yellow-400 animate-pulse"></i>
                         </div>
                         <div>
+                            <p class="text-white font-medium text-sm">Breaking News</p>
+                            <p class="text-xs text-slate-300 max-w-[180px]">2x XP weekend is now live!</p>
                         </div>
+                        <button class="ml-4 text-slate-400 hover:text-white">
+                            <i class="fas fa-times"></i>
+                        </button>
                     </div>
+                    <div class="absolute bottom-0 left-0 w-full h-1 bg-gradient-to-r from-orange-500 to-yellow-400 rounded-b-xl" style="animation: progressBar 5s linear infinite;"></div>
                 </div>
             </div>
         </section>
+        <!-- Style 5: Banner Overlay -->
+        <section class="mb-20">
+            <h2 class="text-2xl font-bold mb-6 text-orange-400 flex items-center">
+                <i class="fas fa-rss mr-2 text-xl"></i> Style 5: Banner Overlay
+            </h2>
+            <div class="relative rounded-xl overflow-hidden border border-gray-800 bg-slate-900/80 min-h-[100px]">
+                <div class="relative">
+                    <div class="h-14 w-full bg-gradient-to-r from-orange-900 to-orange-800 flex items-center overflow-hidden">
+                        <div class="marquee py-1">
+                            <span class="text-white font-bold mr-6">✨ BREAKING: NEW FEATURES RELEASED! ✨</span>
+                            <span class="text-yellow-300 mr-6">Limited time 50% discount available to all members</span>
+                            <span class="text-white mr-6">✨ DOUBLE XP WEEKEND IS ACTIVE ✨</span>
+                            <span class="text-yellow-300">Server maintenance scheduled for Saturday 10AM UTC</span>
                         </div>
                     </div>
                 </div>
+                <div class="p-6">
+                    <p class="text-slate-400 italic">Application content goes here...</p>
+                </div>
             </div>
         </section>
+        <!-- Style 6: Modal Popup -->
+        <section class="mb-20">
+            <h2 class="text-2xl font-bold mb-6 text-yellow-400 flex items-center">
+                <i class="fas fa-window-maximize mr-2 text-xl"></i> Style 6: Modal Popup
+            </h2>
+            <div class="relative rounded-xl overflow-hidden border border-gray-800 bg-slate-900/80 min-h-[200px] flex justify-center items-center">
+                <div class="glass-card p-6 rounded-xl border border-gray-700" style="animation: scalePulse 4s ease-in-out infinite;">
+                    <div class="text-center mb-5">
+                        <div class="w-16 h-16 bg-yellow-500/10 rounded-full flex items-center justify-center mx-auto">
+                            <i class="fas fa-exclamation-triangle text-yellow-400 text-2xl"></i>
                         </div>
+                        <h3 class="text-xl font-bold text-white mt-4">Attention Required</h3>
+                        <p class="text-slate-300 mt-2 max-w-[300px]">Your subscription will auto-renew in 3 days. Make sure your payment method is up to date.</p>
+                    </div>
+                    <div class="flex justify-center gap-4">
+                        <button class="btn-hover-glow bg-slate-700 hover:bg-slate-600 px-5 py-2 rounded-lg font-medium text-white transition-all">
+                            Dismiss
+                        </button>
+                        <button class="btn-hover-glow bg-gradient-to-r from-orange-600 to-amber-500 px-5 py-2 rounded-lg font-medium text-white">
+                            Update Payment
+                        </button>
                     </div>
                 </div>
             </div>
         </section>
+        <!-- Style 7: Flip Card -->
+        <section class="mb-20">
+            <h2 class="text-2xl font-bold mb-6 text-orange-300 flex items-center">
+                <i class="fas fa-sync mr-2 text-xl"></i> Style 7: Flip Animation
+            </h2>
+            <div class="flex justify-center">
+                <div class="animation-flip-glow transform perspective-500 w-full md:w-96 glass-card border border-gray-700 rounded-xl overflow-hidden">
+                    <div class="p-5">
+                        <div class="flex justify-between items-start">
+                            <div>
+                                <p class="text-orange-400 font-semibold">New Update!</p>
+                                <h3 class="text-white text-xl font-bold">Security Patch v2.3</h3>
                             </div>
+                            <i class="fas fa-shield-alt text-amber-400 text-2xl"></i>
                         </div>
+                        <p class="text-slate-400 my-3 text-sm">Update now to get latest protection and new features</p>
+                        <div class="flex mt-4">
+                            <button class="btn-hover-glow bg-gradient-to-r from-orange-700 to-orange-500 px-4 py-2 rounded-lg font-medium text-white text-sm">
+                                View Details
+                            </button>
+                            <button class="ml-3 bg-slate-800 text-sm text-slate-300 hover:bg-slate-700 px-4 py-2 rounded-lg">
+                                Remind Later
                             </button>
                         </div>
                     </div>
             </div>
         </section>
+        <!-- Style 8: Horizontal Slide -->
+        <section class="mb-20">
+            <h2 class="text-2xl font-bold mb-6 text-yellow-300 flex items-center">
+                <i class="fas fa-arrows-alt-h mr-2 text-xl"></i> Style 8: Horizontal Slide
+            </h2>
+            <div class="relative rounded-xl overflow-hidden border border-gray-800 bg-slate-900/80 min-h-[100px]">
+                <div class="absolute bottom-4 glass-card w-60 py-3 px-4 rounded-lg animate-marquee-horizontal" style="animation: slideHorizontal 7s linear infinite;">
+                    <div class="flex items-center">
+                        <span class="w-3 h-3 bg-green-500 rounded-full mr-3 animate-pulse"></span>
+                        <span class="text-sm text-white">New message from Alex</span>
                     </div>
                 </div>
             </div>
         </section>
+        <!-- Style 9: Interactive Progress -->
+        <section class="mb-20">
+            <h2 class="text-2xl font-bold mb-6 text-orange-400 flex items-center">
+                <i class="fas fa-broadcast-tower mr-2 text-xl"></i> Style 9: Progress Notification
+            </h2>
+            <div class="flex justify-center">
+                <div class="glass-card w-full max-w-md p-6 border border-gray-700 rounded-2xl relative">
+                    <div class="flex justify-between items-center mb-4">
+                        <p class="text-white font-bold">Task Completion</p>
+                        <p class="text-yellow-400 font-bold">75%</p>
                     </div>
+                    <div class="h-2.5 rounded-full bg-slate-700 mb-6">
+                        <div class="h-full rounded-full bg-gradient-to-r from-orange-500 to-yellow-400 relative" style="width: 75%;">
+                            <div class="absolute top-0 right-0 h-full w-2 bg-white rounded-full animate-progress-ping"></div>
                         </div>
                     </div>
+                    <div class="mb-5">
+                        <p class="text-slate-300 text-sm">Complete your profile to receive 100 coin bonus</p>
+                    </div>
+                    <button class="btn-hover-glow w-full bg-gradient-to-r from-orange-600 to-orange-400 px-5 py-2.5 rounded-lg font-medium text-white">
+                        Continue Setup
+                    </button>
                 </div>
             </div>
         </section>
+        <!-- Style 10: Rotating Gradient -->
+        <section class="mb-20">
+            <h2 class="text-2xl font-bold mb-6 text-yellow-400 flex items-center">
+                <i class="fas fa-circle-notch mr-2 text-xl"></i> Style 10: Gradient Rotate
+            </h2>
+            <div class="flex justify-center">
+                <div class="glass-card px-6 py-4 rounded-xl w-full max-w-sm relative neon-border overflow-hidden">
+                    <div class="absolute top-2 right-2">
+                        <span class="relative flex h-2 w-2">
+                            <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-orange-400 opacity-75"></span>
+                            <span class="relative inline-flex rounded-full h-2 w-2 bg-amber-500"></span>
                         </span>
                     </div>
+                    <div class="flex items-center">
+                        <div class="mr-4">
+                            <i class="fas fa-medal text-2xl text-yellow-400"></i>
+                        </div>
+                        <div>
+                            <p class="text-white font-bold">Achievement Unlocked!</p>
+                            <p class="text-slate-300 text-sm mb-2">Advanced Explorer rank reached</p>
+                            <button class="btn-hover-glow bg-gradient-to-r from-orange-700 to-orange-500 px-3 py-1 rounded-lg text-xs font-medium text-white animate-bounce-slow">
+                                Collect 250 XP
+                            </button>
+                        </div>
+                    </div>
                 </div>
             </div>
         </section>
     </main>
+    <footer class="py-8 border-t border-gray-800">
+        <div class="container mx-auto px-4 text-center text-slate-500">
+            <p>Modern UI Notification Showcase - Created with TailwindCSS & Pure CSS</p>
+            <p class="mt-2">All animations loop infinitely • Responsive design</p>
         </div>
     </footer>
+    <!-- Additional Animation Keyframes -->
+    <style>
+        @keyframes fadeInOut {
+            0%, 55%, 100% { opacity: 0; transform: translateY(-20px); }
+            10%, 45% { opacity: 1; transform: translateY(0); }
+        }
+        @keyframes progressBar {
+            0% { width: 100%; }
+            100% { width: 0%; }
+        }
+        @keyframes slideHorizontal {
+            0%, 20% { transform: translateX(-150%); opacity: 0; }
+            25%, 70% { transform: translateX(0); opacity: 1; }
+            75%, 100% { transform: translateX(150%); opacity: 0; }
+        }
+        @keyframes scalePulse {
+            0%, 100% { transform: scale(0.97); box-shadow: 0 0 15px rgba(255, 122, 0, 0.3); }
+            50% { transform: scale(1); box-shadow: 0 0 30px rgba(255, 199, 0, 0.6); }
+        }
+        @keyframes animate-progress-ping {
+            0% { opacity: 1; transform: scale(1, 1); }
+            100% { opacity: 0; transform: scale(1.5, 1); }
+        }
+        @media (prefers-reduced-motion) {
+            .animation-slide-down-glow, .animation-bounce-glow, .animation-float-pulse, .animation-flip-glow {
+                animation: none !important;
+            }
+        }
+    </style>
 <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=ProjectGenesis/live-notification-ui" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
 </html>