Spaces:
Running
Running
“A high-resolution digital 2D illustration of a glowing neon 'Send' button on a dark cyberpunk UI. From the button center, multicolored confetti particles (triangles, hexagons, circles in neon pink, yellow, and green) radiate outward with blur and light trails. The button is outlined with aqua glow and the word 'SEND' shines in purple-pink neon. The background is dark with subtle haze. Ultra-detailed, cinematic lighting, futuristic aesthetic, 8K digital quality.” - Follow Up Deployment
21c7ae8 verified | <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Neon Send Button | Cyberpunk UI</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"> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;700;900&family=Rajdhani:wght@300;400;500;700&display=swap'); | |
| :root { | |
| --neon-aqua: #00f3ff; | |
| --neon-pink: #ff00f7; | |
| --neon-purple: #c724f5; | |
| --neon-yellow: #fff200; | |
| --neon-green: #39ff14; | |
| } | |
| body { | |
| background: radial-gradient(circle at center, #0a0e17 0%, #050811 70%); | |
| min-height: 100vh; | |
| overflow: hidden; | |
| font-family: 'Rajdhani', sans-serif; | |
| } | |
| .cyberpunk-ui { | |
| background: linear-gradient(135deg, #0d1117 0%, #090c13 100%); | |
| box-shadow: 0 0 60px rgba(0, 243, 255, 0.1); | |
| border: 1px solid rgba(0, 243, 255, 0.15); | |
| overflow: hidden; | |
| } | |
| .grid-pattern { | |
| background-image: | |
| linear-gradient(rgba(0, 243, 255, 0.05) 1px, transparent 1px), | |
| linear-gradient(90deg, rgba(0, 243, 255, 0.05) 1px, transparent 1px); | |
| background-size: 30px 30px; | |
| } | |
| .glowing-border { | |
| position: relative; | |
| box-shadow: 0 0 20px var(--neon-aqua), 0 0 40px rgba(0, 243, 255, 0.3); | |
| } | |
| .glowing-border::before { | |
| content: ""; | |
| position: absolute; | |
| top: -2px; | |
| left: -2px; | |
| right: -2px; | |
| bottom: -2px; | |
| background: linear-gradient(45deg, | |
| var(--neon-aqua), | |
| var(--neon-purple), | |
| var(--neon-green)); | |
| z-index: -1; | |
| border-radius: inherit; | |
| animation: glowing 3s linear infinite; | |
| } | |
| .terminal-text { | |
| font-family: 'Orbitron', monospace; | |
| color: var(--neon-aqua); | |
| text-shadow: 0 0 10px rgba(0, 243, 255, 0.7); | |
| } | |
| .neon-button { | |
| position: relative; | |
| background: rgba(10, 15, 25, 0.8); | |
| border: 2px solid var(--neon-aqua); | |
| color: var(--neon-purple); | |
| font-family: 'Orbitron', sans-serif; | |
| font-weight: 700; | |
| letter-spacing: 2px; | |
| text-transform: uppercase; | |
| box-shadow: 0 0 20px rgba(0, 243, 255, 0.3), | |
| inset 0 0 15px rgba(199, 36, 245, 0.3); | |
| transition: all 0.3s ease; | |
| z-index: 10; | |
| overflow: hidden; | |
| } | |
| .neon-button::before { | |
| content: ""; | |
| position: absolute; | |
| top: 0; | |
| left: -100%; | |
| width: 100%; | |
| height: 100%; | |
| background: linear-gradient(90deg, | |
| transparent, | |
| rgba(0, 243, 255, 0.3), | |
| transparent); | |
| transition: 0.5s; | |
| } | |
| .neon-button:hover { | |
| transform: scale(1.05); | |
| box-shadow: 0 0 30px rgba(0, 243, 255, 0.5), | |
| inset 0 0 20px rgba(199, 36, 245, 0.5); | |
| color: var(--neon-pink); | |
| } | |
| .neon-button:hover::before { | |
| left: 100%; | |
| } | |
| .neon-button:active { | |
| transform: scale(0.98); | |
| box-shadow: 0 0 10px rgba(0, 243, 255, 0.2), | |
| inset 0 0 10px rgba(199, 36, 245, 0.2); | |
| } | |
| .neon-text { | |
| text-shadow: 0 0 10px var(--neon-purple), | |
| 0 0 20px var(--neon-purple), | |
| 0 0 30px var(--neon-purple); | |
| } | |
| .particle { | |
| position: absolute; | |
| pointer-events: none; | |
| opacity: 0; | |
| z-index: 5; | |
| } | |
| .circle { | |
| border-radius: 50%; | |
| } | |
| .triangle { | |
| width: 0; | |
| height: 0; | |
| border-style: solid; | |
| } | |
| .hexagon { | |
| clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%); | |
| } | |
| @keyframes particle-animation { | |
| 0% { | |
| transform: translate(0, 0) scale(0); | |
| opacity: 1; | |
| } | |
| 100% { | |
| transform: translate(var(--tx), var(--ty)) scale(1); | |
| opacity: 0; | |
| } | |
| } | |
| @keyframes glowing { | |
| 0% { filter: hue-rotate(0deg); } | |
| 100% { filter: hue-rotate(360deg); } | |
| } | |
| @keyframes float { | |
| 0% { transform: translateY(0); } | |
| 50% { transform: translateY(-10px); } | |
| 100% { transform: translateY(0); } | |
| } | |
| .haze { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background: radial-gradient(circle at center, rgba(0, 243, 255, 0.05) 0%, transparent 70%); | |
| pointer-events: none; | |
| z-index: 1; | |
| } | |
| .cyber-line { | |
| position: absolute; | |
| height: 1px; | |
| background: linear-gradient(90deg, transparent, var(--neon-aqua), transparent); | |
| box-shadow: 0 0 5px var(--neon-aqua); | |
| z-index: 2; | |
| } | |
| .glitch-text { | |
| position: relative; | |
| display: inline-block; | |
| } | |
| .glitch-text::before, | |
| .glitch-text::after { | |
| content: attr(data-text); | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| } | |
| .glitch-text::before { | |
| color: var(--neon-pink); | |
| animation: glitch-anim 5s infinite linear alternate; | |
| clip-path: polygon(0 0, 100% 0, 100% 45%, 0 45%); | |
| } | |
| .glitch-text::after { | |
| color: var(--neon-green); | |
| animation: glitch-anim 4s infinite linear alternate-reverse; | |
| clip-path: polygon(0 55%, 100% 55%, 100% 100%, 0 100%); | |
| } | |
| @keyframes glitch-anim { | |
| 0% { transform: translateX(0); } | |
| 20% { transform: translateX(-3px); } | |
| 40% { transform: translateX(2px); } | |
| 60% { transform: translateX(4px); } | |
| 80% { transform: translateX(-2px); } | |
| 100% { transform: translateX(0); } | |
| } | |
| /* Responsive adjustments */ | |
| @media (max-width: 768px) { | |
| .cyberpunk-ui { | |
| width: 95%; | |
| padding: 1.5rem; | |
| } | |
| .terminal-text { | |
| font-size: 0.9rem; | |
| } | |
| .neon-button { | |
| padding: 1rem 1.5rem; | |
| font-size: 1.2rem; | |
| } | |
| } | |
| @media (max-width: 480px) { | |
| .cyberpunk-ui { | |
| padding: 1rem; | |
| } | |
| .terminal-text { | |
| font-size: 0.8rem; | |
| } | |
| .neon-button { | |
| padding: 0.8rem 1.2rem; | |
| font-size: 1rem; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body class="flex items-center justify-center p-4 md:p-8"> | |
| <div class="cyberpunk-ui rounded-xl w-full max-w-4xl grid-pattern relative overflow-hidden"> | |
| <div class="haze"></div> | |
| <!-- Cyberpunk decorative lines --> | |
| <div class="cyber-line top-10 w-1/3 left-10"></div> | |
| <div class="cyber-line top-20 w-1/4 right-10"></div> | |
| <div class="cyber-line bottom-10 w-1/3 left-10"></div> | |
| <div class="cyber-line bottom-20 w-1/4 right-10"></div> | |
| <div class="p-8 md:p-12 relative z-10"> | |
| <div class="flex justify-between items-start mb-10"> | |
| <div> | |
| <h1 class="text-2xl md:text-4xl font-bold text-white mb-2"> | |
| <span class="glitch-text" data-text="NEURAL NET TERMINAL">NEURAL NET TERMINAL</span> | |
| </h1> | |
| <p class="terminal-text text-sm md:text-base">ACCESS LEVEL: <span class="text-green-400">DELTA</span></p> | |
| </div> | |
| <div class="text-right"> | |
| <p class="terminal-text text-sm md:text-base">USER: <span class="text-purple-400">ADMIN</span></p> | |
| <p class="terminal-text text-sm md:text-base">STATUS: <span class="text-yellow-400">ACTIVE</span></p> | |
| </div> | |
| </div> | |
| <div class="glowing-border rounded-xl bg-black bg-opacity-50 p-6 mb-10"> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-3 h-3 rounded-full bg-red-500 mr-2"></div> | |
| <div class="w-3 h-3 rounded-full bg-yellow-500 mr-2"></div> | |
| <div class="w-3 h-3 rounded-full bg-green-500 mr-4"></div> | |
| <p class="terminal-text text-xs md:text-sm">SECURE MESSAGE CONSOLE [v2.4.7]</p> | |
| </div> | |
| <div class="bg-gray-900 bg-opacity-70 rounded-lg p-4 mb-4 h-40 overflow-y-auto"> | |
| <p class="terminal-text text-sm mb-2"><span class="text-green-400">> INITIATING TRANSMISSION SEQUENCE</span></p> | |
| <p class="terminal-text text-sm mb-2"><span class="text-yellow-400">> ENCRYPTION: AES-512 ACTIVE</span></p> | |
| <p class="terminal-text text-sm mb-2"><span class="text-purple-400">> RECIPIENT: CENTRAL DATABASE</span></p> | |
| <p class="terminal-text text-sm mb-2"><span class="text-blue-400">> MESSAGE READY FOR TRANSMISSION</span></p> | |
| <p class="terminal-text text-sm"><span class="text-gray-400">> AWAITING USER CONFIRMATION...</span></p> | |
| </div> | |
| <div class="flex flex-wrap gap-4"> | |
| <div class="flex-1 min-w-[200px]"> | |
| <p class="terminal-text text-sm mb-2">MESSAGE CONTENT:</p> | |
| <textarea class="w-full bg-gray-900 bg-opacity-70 border border-gray-700 rounded p-3 text-white text-sm focus:outline-none focus:border-purple-500 transition-colors" rows="3" placeholder="ENTER TRANSMISSION TEXT..."></textarea> | |
| </div> | |
| <div class="flex flex-col"> | |
| <p class="terminal-text text-sm mb-2">PRIORITY:</p> | |
| <div class="flex gap-2 mb-4"> | |
| <button class="px-3 py-1 rounded bg-gray-800 text-white text-xs hover:bg-purple-900 transition-colors">LOW</button> | |
| <button class="px-3 py-1 rounded bg-gray-800 text-white text-xs hover:bg-yellow-900 transition-colors">MED</button> | |
| <button class="px-3 py-1 rounded bg-gray-800 text-white text-xs hover:bg-red-900 transition-colors">HIGH</button> | |
| </div> | |
| <p class="terminal-text text-sm mb-2">ENCRYPTION:</p> | |
| <div class="flex gap-2"> | |
| <button class="px-3 py-1 rounded bg-gray-800 text-white text-xs hover:bg-blue-900 transition-colors">AES-256</button> | |
| <button class="px-3 py-1 rounded bg-blue-900 text-white text-xs">AES-512</button> | |
| <button class="px-3 py-1 rounded bg-gray-800 text-white text-xs hover:bg-purple-900 transition-colors">QUANTUM</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="flex justify-center"> | |
| <button id="sendButton" class="neon-button px-10 py-4 text-xl md:text-2xl rounded-lg neon-text relative"> | |
| <i class="fas fa-paper-plane mr-2"></i>SEND | |
| <div class="absolute inset-0 rounded-lg bg-purple-500 opacity-20 blur-md animate-pulse"></div> | |
| </button> | |
| </div> | |
| <div class="mt-10 grid grid-cols-1 md:grid-cols-3 gap-4"> | |
| <div class="flex items-center"> | |
| <div class="w-3 h-3 rounded-full bg-green-500 animate-pulse mr-3"></div> | |
| <p class="terminal-text text-sm">NETWORK SECURE</p> | |
| </div> | |
| <div class="flex items-center"> | |
| <div class="w-3 h-3 rounded-full bg-green-500 animate-pulse mr-3"></div> | |
| <p class="terminal-text text-sm">ENCRYPTION ACTIVE</p> | |
| </div> | |
| <div class="flex items-center"> | |
| <div class="w-3 h-3 rounded-full bg-yellow-500 animate-pulse mr-3"></div> | |
| <p class="terminal-text text-sm">BANDWIDTH: 78%</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| document.addEventListener('DOMContentLoaded', function() { | |
| const sendButton = document.getElementById('sendButton'); | |
| sendButton.addEventListener('click', function() { | |
| createParticles(); | |
| }); | |
| // Create random cyber lines | |
| createDecorativeLines(); | |
| // Create floating particles as background effect | |
| createBackgroundParticles(); | |
| }); | |
| function createParticles() { | |
| const button = document.getElementById('sendButton'); | |
| const buttonRect = button.getBoundingClientRect(); | |
| const centerX = buttonRect.left + buttonRect.width / 2; | |
| const centerY = buttonRect.top + buttonRect.height / 2; | |
| const particles = 60; | |
| const colors = ['#ff00f7', '#fff200', '#39ff14']; | |
| const shapes = ['circle', 'triangle', 'hexagon']; | |
| for (let i = 0; i < particles; i++) { | |
| const particle = document.createElement('div'); | |
| particle.classList.add('particle'); | |
| // Random properties | |
| const size = Math.random() * 12 + 5; | |
| const shape = shapes[Math.floor(Math.random() * shapes.length)]; | |
| const color = colors[Math.floor(Math.random() * colors.length)]; | |
| const angle = Math.random() * Math.PI * 2; | |
| const distance = Math.random() * 150 + 100; | |
| const duration = Math.random() * 1500 + 1000; | |
| const tx = Math.cos(angle) * distance; | |
| const ty = Math.sin(angle) * distance; | |
| // Apply shape-specific styles | |
| if (shape === 'circle') { | |
| particle.classList.add('circle'); | |
| particle.style.width = `${size}px`; | |
| particle.style.height = `${size}px`; | |
| particle.style.backgroundColor = color; | |
| } | |
| else if (shape === 'triangle') { | |
| particle.classList.add('triangle'); | |
| particle.style.borderWidth = `0 ${size/2}px ${size}px ${size/2}px`; | |
| particle.style.borderColor = `transparent transparent ${color} transparent`; | |
| } | |
| else if (shape === 'hexagon') { | |
| particle.classList.add('hexagon'); | |
| particle.style.width = `${size}px`; | |
| particle.style.height = `${size}px`; | |
| particle.style.backgroundColor = color; | |
| } | |
| // Position at button center | |
| particle.style.left = `${centerX}px`; | |
| particle.style.top = `${centerY}px`; | |
| // Add glow effect | |
| particle.style.boxShadow = `0 0 ${size}px ${color}`; | |
| // Set animation properties | |
| particle.style.setProperty('--tx', `${tx}px`); | |
| particle.style.setProperty('--ty', `${ty}px`); | |
| particle.style.animation = `particle-animation ${duration}ms forwards`; | |
| document.body.appendChild(particle); | |
| // Remove particle after animation completes | |
| setTimeout(() => { | |
| particle.remove(); | |
| }, duration); | |
| } | |
| // Add button pulse effect on click | |
| sendButton.classList.add('animate-pulse'); | |
| setTimeout(() => { | |
| sendButton.classList.remove('animate-pulse'); | |
| }, 300); | |
| } | |
| function createDecorativeLines() { | |
| const container = document.querySelector('.cyberpunk-ui'); | |
| for (let i = 0; i < 8; i++) { | |
| const line = document.createElement('div'); | |
| line.classList.add('cyber-line'); | |
| // Random position and size | |
| const top = Math.random() * 100; | |
| const left = Math.random() * 100; | |
| const width = Math.random() * 30 + 10; | |
| line.style.top = `${top}%`; | |
| line.style.left = `${left}%`; | |
| line.style.width = `${width}%`; | |
| line.style.opacity = Math.random() * 0.5 + 0.2; | |
| container.appendChild(line); | |
| } | |
| } | |
| function createBackgroundParticles() { | |
| const container = document.querySelector('.cyberpunk-ui'); | |
| const particleCount = 20; | |
| const colors = ['#ff00f7', '#00f3ff', '#39ff14', '#fff200']; | |
| for (let i = 0; i < particleCount; i++) { | |
| const particle = document.createElement('div'); | |
| particle.classList.add('particle', 'circle'); | |
| // Random properties | |
| const size = Math.random() * 8 + 2; | |
| const color = colors[Math.floor(Math.random() * colors.length)]; | |
| const top = Math.random() * 100; | |
| const left = Math.random() * 100; | |
| const duration = Math.random() * 10000 + 5000; | |
| const delay = Math.random() * 5000; | |
| particle.style.width = `${size}px`; | |
| particle.style.height = `${size}px`; | |
| particle.style.backgroundColor = color; | |
| particle.style.boxShadow = `0 0 ${size*2}px ${color}`; | |
| particle.style.top = `${top}%`; | |
| particle.style.left = `${left}%`; | |
| particle.style.animation = `float ${duration}ms ${delay}ms infinite`; | |
| particle.style.opacity = Math.random() * 0.4 + 0.1; | |
| container.appendChild(particle); | |
| } | |
| } | |
| </script> | |
| <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=halimskarr/ui" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |