|
|
| @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> |
