| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>PixelPulse UI</title> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <script src="https://unpkg.com/feather-icons"></script> |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> |
| <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.globe.min.js"></script> |
| <style> |
| :root { |
| |
| --color-primary: 159, 122, 234; |
| --color-secondary: 255, 107, 165; |
| --color-dark: 17, 17, 17; |
| --color-light: 245, 245, 247; |
| --color-surface-dark: 30, 30, 32; |
| |
| |
| --text-xs: 0.75rem; |
| --text-sm: 0.875rem; |
| --text-base: 1rem; |
| --text-lg: 1.125rem; |
| --text-xl: 1.25rem; |
| --text-2xl: 1.5rem; |
| --text-3xl: 1.875rem; |
| --text-4xl: 2.25rem; |
| --text-5xl: 3rem; |
| |
| |
| --space-xs: 0.25rem; |
| --space-sm: 0.5rem; |
| --space-md: 1rem; |
| --space-lg: 1.5rem; |
| --space-xl: 2rem; |
| |
| |
| --blur-sm: blur(8px); |
| --blur-md: blur(16px); |
| --blur-lg: blur(24px); |
| --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.12); |
| --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.15); |
| --shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.25); |
| } |
| |
| .vanta-bg { |
| position: fixed; |
| top: 0; |
| left: 0; |
| width: 100%; |
| height: 100%; |
| z-index: -1; |
| opacity: 0.7; |
| } |
| |
| .glass-card { |
| backdrop-filter: var(--blur-md); |
| background: rgba(var(--color-surface-dark), 0.6); |
| border-radius: 24px; |
| border: 1px solid rgba(var(--color-light), 0.08); |
| box-shadow: var(--shadow-lg); |
| transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); |
| } |
| |
| .glass-card:hover { |
| background: rgba(var(--color-surface-dark), 0.7); |
| border-color: rgba(var(--color-light), 0.12); |
| } |
| |
| .text-glow { |
| text-shadow: 0 0 12px rgba(var(--color-primary), 0.4); |
| } |
| |
| body { |
| background-color: rgb(var(--color-dark)); |
| color: rgba(var(--color-light), 0.9); |
| font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif; |
| line-height: 1.6; |
| letter-spacing: 0.01em; |
| } |
| |
| .btn-primary { |
| background: linear-gradient(135deg, |
| rgba(var(--color-primary), 1) 0%, |
| rgba(var(--color-secondary), 1) 100%); |
| border: none; |
| box-shadow: 0 4px 20px rgba(var(--color-primary), 0.3); |
| transition: transform 0.2s ease, box-shadow 0.2s ease; |
| } |
| |
| .btn-primary:hover { |
| transform: translateY(-2px); |
| box-shadow: 0 6px 24px rgba(var(--color-primary), 0.4); |
| } |
| |
| .input-field { |
| background: rgba(var(--color-surface-dark), 0.7); |
| border: 1px solid rgba(var(--color-light), 0.1); |
| backdrop-filter: var(--blur-sm); |
| transition: all 0.2s ease; |
| } |
| |
| .input-field:focus { |
| border-color: rgba(var(--color-primary), 0.5); |
| box-shadow: 0 0 0 3px rgba(var(--color-primary), 0.1); |
| } |
| </style> |
| </head> |
| <body class="bg-gray-900 text-white min-h-screen flex flex-col"> |
| <div id="vanta-bg" class="vanta-bg"></div> |
| <header class="py-8 px-6 md:px-12"> |
| <div class="container mx-auto flex justify-between items-center max-w-7xl"> |
| <h1 class="text-4xl font-bold text-glow tracking-tight"> |
| Pixel<span class="bg-clip-text text-transparent bg-gradient-to-r from-purple-400 to-pink-500">Pulse</span> |
| </h1> |
| <nav class="hidden md:flex space-x-10"> |
| <a href="#" class="text-lg font-medium hover:text-purple-300 transition-all duration-300 flex items-center"> |
| <span class="opacity-80 hover:opacity-100">Features</span> |
| <i data-feather="chevron-down" class="w-4 h-4 ml-1"></i> |
| </a> |
| <a href="design-system.html" class="text-lg font-medium hover:text-purple-300 transition-all duration-300">Design System</a> |
| <a href="design-tokens.json" class="text-lg font-medium hover:text-purple-300 transition-all duration-300">Design Tokens</a> |
| <a href="#" class="text-lg font-medium hover:text-purple-300 transition-all duration-300">Pricing</a> |
| <a href="#" class="text-lg font-medium hover:text-purple-300 transition-all duration-300">Contact</a> |
| </nav> |
| <button class="md:hidden p-3 rounded-full bg-white bg-opacity-10 backdrop-filter backdrop-blur-sm"> |
| <i data-feather="menu" class="w-6 h-6"></i> |
| </button> |
| </div> |
| </header> |
| <main class="flex-grow flex items-center justify-center px-6 py-16"> |
| <div class="glass-card p-12 max-w-5xl w-full"> |
| <div class="text-center mb-10"> |
| <h2 class="text-5xl md:text-6xl font-bold mb-6 text-glow tracking-tight"> |
| Where Design Meets <span class="bg-clip-text text-transparent bg-gradient-to-r from-purple-300 to-pink-400">Magic</span> |
| </h2> |
| <p class="text-xl md:text-2xl text-center mb-8 opacity-90 max-w-2xl mx-auto leading-relaxed"> |
| Create stunning interfaces with our AI-powered design system that adapts to your creative vision. |
| </p> |
| </div> |
| |
| <div class="max-w-2xl mx-auto"> |
| <div class="relative"> |
| <input type="text" |
| class="input-field w-full rounded-full py-5 px-8 text-lg placeholder-gray-400 focus:outline-none" |
| placeholder="Ask PixelPulse anything..."> |
| <button class="btn-primary absolute right-2 top-1/2 transform -translate-y-1/2 rounded-full p-4 transition-all"> |
| <i data-feather="send" class="w-5 h-5 text-white"></i> |
| </button> |
| </div> |
| |
| <div class="flex justify-center mt-8 space-x-6"> |
| <button class="flex items-center space-x-3 bg-white bg-opacity-10 hover:bg-opacity-20 px-6 py-3 rounded-full transition-all backdrop-filter backdrop-blur-sm"> |
| <i data-feather="mic" class="w-5 h-5"></i> |
| <span class="font-medium">Voice Input</span> |
| </button> |
| <button class="flex items-center space-x-3 bg-white bg-opacity-10 hover:bg-opacity-20 px-6 py-3 rounded-full transition-all backdrop-filter backdrop-blur-sm"> |
| <i data-feather="image" class="w-5 h-5"></i> |
| <span class="font-medium">Upload Image</span> |
| </button> |
| </div> |
| </div> |
| </div> |
| </main> |
| <footer class="py-8 px-6 text-center"> |
| <div class="container mx-auto max-w-7xl border-t border-white border-opacity-10 pt-8"> |
| <p class="text-sm text-gray-400"> |
| © 2023 PixelPulse UI. All rights reserved. |
| <span class="inline-flex items-center ml-1"> |
| Crafted with <i data-feather="heart" class="w-4 h-4 mx-1 text-pink-500"></i> by design wizards. |
| </span> |
| </p> |
| </div> |
| </footer> |
| <script> |
| feather.replace(); |
| VANTA.GLOBE({ |
| el: "#vanta-bg", |
| mouseControls: true, |
| touchControls: true, |
| gyroControls: false, |
| minHeight: 200.00, |
| minWidth: 200.00, |
| scale: 1.00, |
| scaleMobile: 1.00, |
| color: 0x9f7aea, |
| backgroundColor: 0x111111, |
| size: 0.8, |
| speed: 0.5 |
| }); |
| </script> |
| </body> |
| </html> |
|
|
