| @import url('https://fonts.googleapis.com/css2?family=Major+Mono+Display&family=Space+Mono:wght@400;700&display=swap'); | |
| :root { | |
| --space-purple: #140A1F; | |
| --neon-purple: #7900FF; | |
| --hot-pink: #FF2A6D; | |
| --electric-blue: #05D9E8; | |
| --synth-yellow: #F6FF00; | |
| } | |
| body { | |
| font-family: 'Space Mono', monospace; | |
| background: #0a0c10; | |
| color: #c9d1d9; | |
| min-height: 100vh; | |
| margin: 0; | |
| line-height: 1.5; | |
| } | |
| .section { | |
| padding: 2rem; | |
| max-width: 800px; | |
| margin: 0 auto; | |
| } | |
| .parallax::after { | |
| content: ""; | |
| position: absolute; | |
| top: 0; | |
| right: 0; | |
| bottom: 0; | |
| left: 0; | |
| transform: translateZ(-1px) scale(1.5); | |
| background-size: 100%; | |
| z-index: -1; | |
| } | |
| header { | |
| padding: 3rem 2rem 2rem; | |
| text-align: center; | |
| } | |
| h1, h2, h3 { | |
| font-family: 'Space Mono', monospace; | |
| font-weight: normal; | |
| } | |
| h1 { | |
| font-size: 2.5rem; | |
| margin: 1rem 0; | |
| color: #58a6ff; | |
| } | |
| @keyframes float { | |
| 0% { transform: translateY(0px); } | |
| 50% { transform: translateY(-20px); } | |
| 100% { transform: translateY(0px); } | |
| } | |
| .floating { | |
| animation: float 6s ease-in-out infinite; | |
| } | |
| .neon-text { | |
| text-shadow: 0 0 8px currentColor; | |
| } | |
| .particle { | |
| position: absolute; | |
| border-radius: 50%; | |
| background: var(--electric-blue); | |
| opacity: 0.8; | |
| filter: blur(1px); | |
| will-change: transform; | |
| } | |
| .terminal { | |
| background: rgba(5, 217, 232, 0.03); | |
| border: 1px solid rgba(5, 217, 232, 0.3); | |
| border-radius: 8px; | |
| padding: 2rem; | |
| font-family: 'Space Mono', monospace; | |
| font-size: 0.9rem; | |
| max-width: 600px; | |
| margin: 0 auto; | |
| position: relative; | |
| } | |
| .terminal::before { | |
| content: ">"; | |
| position: absolute; | |
| left: 0.9rem; | |
| color: var(--synth-yellow); | |
| } | |
| code { | |
| color: var(--hot-pink); | |
| font-family: 'Space Mono', monospace; | |
| } | |
| .btn { | |
| background: transparent; | |
| color: var(--electric-blue); | |
| border: 1px solid var(--electric-blue); | |
| padding: 0.75rem 1.5rem; | |
| font-family: 'Space Mono', monospace; | |
| text-transform: lowercase; | |
| letter-spacing: 1px; | |
| transition: all 0.3s ease; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .btn:hover { | |
| background: var(--electric-blue); | |
| color: var(--space-purple); | |
| box-shadow: 0 0 10px var(--electric-blue); | |
| } | |
| .btn::before { | |
| content: ""; | |
| position: absolute; | |
| top: 0; | |
| left: -100%; | |
| width: 100%; | |
| height: 100%; | |
| background: linear-gradient( | |
| 90deg, | |
| transparent, | |
| rgba(5, 217, 232, 0.4), | |
| transparent | |
| ); | |
| transition: 0.5s; | |
| } | |
| .btn:hover::before { | |
| left: 100%; | |
| } | |
| <!DOCTYPE html> | |
| <html lang="en" class="dark"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Crow IDE</title> | |
| <link rel="stylesheet" href="style.css"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <script> | |
| tailwind.config = { | |
| darkMode: 'class', | |
| theme: { | |
| extend: { | |
| colors: { | |
| purple: { | |
| 850: '#261138', | |
| 950: '#140A1F' | |
| } | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| </head> | |
| <body class="bg-purple-950 min-h-screen text-purple-100 font-mono antialiased"> | |
| <main class="max-w-4xl mx-auto px-6 py-20"> | |
| <header class="mb-16 flex flex-col items-center"> | |
| <div class="w-24 h-24 mb-6 rounded-full bg-purple-850 flex items-center justify-center"> | |
| <i data-feather="cpu" class="w-12 h-12 text-purple-400"></i> | |
| </div> | |
| <h1 class="text-5xl font-light tracking-tight mb-2">crow</h1> | |
| <p class="text-purple-400">dual-agent programming environment</p> | |
| </header> | |
| <section class="mb-20 text-center"> | |
| <h2 class="text-xl mb-6 text-purple-300">Dual-Agent Architecture</h2> | |
| <div class="flex justify-center"> | |
| <div class="relative w-full max-w-md h-64 bg-purple-850 rounded-lg p-6"> | |
| <div class="absolute top-4 left-4 w-8 h-8 rounded-full bg-purple-600"></div> | |
| <div class="absolute bottom-4 right-4 w-8 h-8 rounded-full bg-purple-400"></div> | |
| <div class="h-full flex items-center justify-center"> | |
| <div class="text-center"> | |
| <p class="text-sm mb-4">"What should we build next?"</p> | |
| <div class="w-3/4 mx-auto h-px bg-purple-700 my-4"></div> | |
| <p class="text-sm text-purple-300">[auto mode engaged]</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <section class="mb-20 grid md:grid-cols-3 gap-8"> | |
| <div class="bg-purple-850 p-6 rounded-lg border border-purple-800"> | |
| <h3 class="text-lg mb-3 text-purple-300">Pair Programming</h3> | |
| <p class="text-sm">Two agents collaborate in real-time, with one executing plans on your behalf.</p> | |
| </div> | |
| <div class="bg-purple-850 p-6 rounded-lg border border-purple-800"> | |
| <h3 class="text-lg mb-3 text-purple-300">Minimal Theme</h3> | |
| <p class="text-sm">Dark purple interface designed for focused coding sessions.</p> | |
| </div> | |
| <div class="bg-purple-850 p-6 rounded-lg border border-purple-800"> | |
| <h3 class="text-lg mb-3 text-purple-300">Built on Zed</h3> | |
| <p class="text-sm">Native Rust performance with custom agent integration.</p> | |
| </div> | |
| </section> | |
| <footer class="text-center text-sm text-purple-500"> | |
| <p>© Crow IDE — Designed for the post-monaco era</p> | |
| </footer> | |
| </main> | |
| <script> | |
| feather.replace(); | |
| </script> | |
| </body> | |
| </html> |