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
5d7500a
verified
| <html lang="en"> | |
| <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> | |
| </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 ; | |
| } | |
| } | |
| </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> |