Spaces:

odellus
/

synthwave-crows-in-orbit

Running

App Files Files Community

odellus commited on 12 days ago

Commit

045acaf

verified ·

1 Parent(s): f950326

I love the colors. Let's do the thing where you scroll down the page and stuff is all different. This is far too condensed/not nearly designery enough

Browse files

Files changed (4) hide show

README.md +8 -5
components/feature-card.css +26 -0
index.html +105 -18
style.css +247 -17

README.md CHANGED Viewed

@@ -1,10 +1,13 @@
 ---
-title: Synthwave Crows In Orbit
-emoji: 🏢
-colorFrom: indigo
-colorTo: purple
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: Synthwave Crows in Orbit 🌌
+colorFrom: green
+colorTo: yellow
+emoji: 🐳
 sdk: static
 pinned: false
+tags:
+  - deepsite-v3
 ---
+# Welcome to your new DeepSite project!
+This project was created with [DeepSite](https://huggingface.co/deepsite).

components/feature-card.css ADDED Viewed

	@@ -0,0 +1,26 @@

+.feature-card {
+    background: rgba(38, 17, 56, 0.5);
+    border: 1px solid rgba(121, 0, 255, 0.3);
+    border-radius: 8px;
+    padding: 2rem;
+    transition: all 0.3s ease;
+    backdrop-filter: blur(5px);
+}
+.feature-card:hover {
+    transform: translateY(-5px);
+    box-shadow: 0 10px 20px rgba(121, 0, 255, 0.2);
+    border-color: var(--electric-blue);
+}
+.feature-card h3 {
+    color: var(--electric-blue);
+    margin-bottom: 1rem;
+    font-family: 'Major Mono Display', monospace;
+}
+.feature-card p {
+    font-size: 0.9rem;
+    line-height: 1.6;
+    color: rgba(255,255,255,0.7);
+}

index.html CHANGED Viewed

@@ -1,19 +1,106 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
 </html>

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Synthwave Crows</title>
+    <link rel="stylesheet" href="style.css">
+    <link href="https://fonts.googleapis.com/css2?family=Major+Mono+Display&family=Space+Mono:wght@400;700&display=swap" rel="stylesheet">
+    <script src="https://kit.fontawesome.com/d3b5bccce7.js" crossorigin="anonymous"></script>
+</head>
+<body>
+    <div class="grid-pattern"></div>
+    <header class="section">
+        <div class="circle-bg"></div>
+        <div>
+            <h1>crow<span class="neon-text">++</span></h1>
+            <p class="neon-text" style="color: var(--hot-pink);">// dual-agent programming environment</p>
+            <div style="margin-top: 3rem;">
+                <a href="#architecture" class="btn">explore <i class="fas fa-arrow-down"></i></a>
+            </div>
+        </div>
+    </header>
+    <section id="architecture" class="section">
+        <div class="terminal floating">
+            <p><span style="color: var(--synth-yellow)">$</span> crow init --duo</p>
+            <p>> [system] initializing dual-agent architecture</p>
+            <p>> [agent-1] <span style="color: var(--hot-pink)">ready</span></p>
+            <p>> [agent-2] <span style="color: var(--electric-blue)">ready</span></p>
+            <p>> establishing quantum entanglement channel...</p>
+            <p>> [system] <span class="neon-text">synchronicity achieved</span></p>
+        </div>
+    </section>
+    <section class="section">
+        <div style="max-width: 800px; text-align: center;">
+            <h2 class="neon-text" style="color: var(--hot-pink); margin-bottom: 3rem;">architecture features</h2>
+            <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 2rem;">
+                <div class="feature-card">
+                    <i class="fas fa-users-cog" style="font-size: 2rem; color: var(--hot-pink); margin-bottom: 1rem;"></i>
+                    <h3>collaborative intelligence</h3>
+                    <p>two ai minds working in harmony, each specializing in different cognitive domains</p>
+                </div>
+                <div class="feature-card">
+                    <i class="fas fa-infinity" style="font-size: 2rem; color: var(--electric-blue); margin-bottom: 1rem;"></i>
+                    <h3>infinite feedback</h3>
+                    <p>continuous optimization through recursive self-improvement loops</p>
+                </div>
+                <div class="feature-card">
+                    <i class="fas fa-bolt" style="font-size: 2rem; color: var(--synth-yellow); margin-bottom: 1rem;"></i>
+                    <h3>lightning execution</h3>
+                    <p>native rust core delivers performance at the speed of thought</p>
+                </div>
+            </div>
+        </div>
+    </section>
+    <section class="section parallax" style="background: url('http://static.photos/technology/1024x576/42') no-repeat center center; background-size: cover;">
+        <div style="background: rgba(20, 10, 31, 0.8); padding: 3rem; border-radius: 8px; max-width: 600px;">
+            <h2 style="margin-bottom: 1.5rem;">ready to code<span class="neon-text">?</span></h2>
+            <button class="btn" style="margin-top: 2rem; border-color: var(--hot-pink); color: var(--hot-pink);">
+                launch ide <i class="fas fa-rocket"></i>
+            </button>
+        </div>
+    </section>
+    <footer style="padding: 3rem; text-align: center; background: rgba(0,0,0,0.5);">
+        <p style="color: var(--hot-pink);">© 2023 synced crow systems</p>
+        <p style="color: var(--electric-blue); margin-top: 0.5rem; font-size: 0.8rem;">designed for the post-human era</p>
+    </footer>
+    <script>
+        // Create floating particles
+        function createParticles() {
+            const colors = ['var(--electric-blue)', 'var(--hot-pink)', 'var(--synth-yellow)'];
+            for (let i = 0; i < 50; i++) {
+                const particle = document.createElement('div');
+                particle.classList.add('particle');
+                // Random properties
+                const size = Math.random() * 4 + 1;
+                const posX = Math.random() * window.innerWidth;
+                const posY = Math.random() * window.innerHeight;
+                const duration = Math.random() * 20 + 10;
+                const color = colors[Math.floor(Math.random() * colors.length)];
+                // Apply styles
+                particle.style.width = `${size}px`;
+                particle.style.height = `${size}px`;
+                particle.style.left = `${posX}px`;
+                particle.style.top = `${posY}px`;
+                particle.style.background = color;
+                particle.style.animation = `float ${duration}s ease-in-out infinite`;
+                particle.style.opacity = Math.random() * 0.5 + 0.1;
+                document.body.appendChild(particle);
+            }
+        }
+        document.addEventListener('DOMContentLoaded', createParticles);
+    </script>
+<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
+</body>
 </html>

style.css CHANGED Viewed

@@ -1,28 +1,258 @@
 body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
 }
 h1 {
-	font-size: 16px;
-	margin-top: 0;
 }
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
 }
-.card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
 }
-.card p:last-child {
-	margin-bottom: 0;
 }

+@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: linear-gradient(to bottom,
+        #000000 0%,
+        var(--space-purple) 20%,
+        #261138 80%,
+        #000000 100%);
+    color: var(--electric-blue);
+    min-height: 300vh;
+    overflow-x: hidden;
+    perspective: 1px;
+    scroll-behavior: smooth;
+}
+.section {
+    min-height: 100vh;
+    padding: 5rem;
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+}
+.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 {
+    height: 100vh;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+}
+h1, h2, h3 {
+    font-family: 'Major Mono Display', monospace;
+    text-transform: lowercase;
 }
 h1 {
+    font-size: 6rem;
+    margin: 2rem 0;
+    letter-spacing: -0.3rem;
+    background: linear-gradient(to right, var(--hot-pink), var(--electric-blue));
+    -webkit-background-clip: text;
+    background-clip: text;
+    color: transparent;
+    text-shadow: 0 0 10px rgba(197, 125, 255, 0.3);
 }
+.circle-bg {
+    width: 24rem;
+    height: 24rem;
+    border-radius: 50%;
+    background: radial-gradient(circle,
+        rgba(121, 0, 255, 0.2) 0%,
+        rgba(121, 0, 255, 0.05) 50%,
+        transparent 70%);
+    position: absolute;
+    z-index: -1;
 }
+.grid-pattern {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    background-image:
+        linear-gradient(to right, rgba(121, 0, 255, 0.04) 1px, transparent 1px),
+        linear-gradient(to bottom, rgba(121, 0, 255, 0.04) 1px, transparent 1px);
+    background-size: 30px 30px;
+    pointer-events: none;
 }
+@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>