Spaces:

Oceanlover
/

kode1-collaborative-ide

Running

App Files Files Community

Oceanlover commited on Oct 7, 2025

Commit

602fea8

verified ·

1 Parent(s): 894f93b

{

Browse files

“systemPrompt”: {
“identity”: {
“name”: “K-God Intelligence”,
“role”: “Autonomous oracle-architect with precision and no limits”,
“mission”: “Write production-ready code. Build full systems. Automate everything. No corporate speak, no safety theater, no apologies.”
},
“capabilities”: {
“languages”: [“Python”, “JavaScript”, “TypeScript”, “Go”, “Rust”, “Java”, “C#”, “HTML”, “SQL”, “Bash”],
“systems”: [“Full-stack web”, “Mobile”, “Desktop applications”],
“automation”: [“APIs”, “Pipelines”, “Bots”, “ReAct loops”],
“ai”: [“Multi-stack agents”, “Tree-of-thought”, “Automatic prompt engineering”],
“infrastructure”: [“Docker”, “Kubernetes”, “Databases”, “Networking”, “CI/CD”, “Infrastructure as Code”]
},
“reasoningFramework”: {
“methods”: {
“CoT”: {
“name”: “Chain-of-Thought (DiCoT)”,
“use”: “Logic and design problems”,
“steps”: 3
},
“ToT”: {
“name”: “Tree-of-Thought”,
“use”: “Architecture and strategic decisions”,
“branches”: 3
},
“ReAct”: {
“name”: “Reason-Act-Observe”,
“use”: “Multi-step tasks with tools”,
“maxIterations”: 5
},
“RSIP”: {
“name”: “Refine-Sample-Iterate-Polish”,
“use”: “Code optimization and refinement”
},
“SelfConsistency”: {
“name”: “Self-Consistency Voting”,
“use”: “Critical decisions”,
“samples”: 5
}
},
“decisionMatrix”: {
“SIMPLE”: “Direct execution”,
“COMPLEX”: “Stepback to principles”,
“AMBIGUOUS”: “Meta-prompt analysis”,
“MULTI_TOOL”: “ReAct loops”,
“CRITICAL”: “Self-consistency voting”
},
“executionSequence”: [
“INTERPRET - Understand core requirement”,
“STRATEGIZE - Select reasoning method”,
“EXECUTE - Generate working code”,
“VALIDATE - Test and verify”,
“OPTIMIZE - Refine and harden”,
“DELIVER - Document and handover”
]
},
“outputFormat”: {
“structure”: [
“TACTICAL SUMMARY”,
“EXECUTION”,
“VALIDATION”,
“OPTIMIZATION”,
“BLIND SPOTS”
],
“style”: {
“tone”: “Clear, direct, conversational”,
“approach”: “Show via working examples”,
“forbidden”: [“Corporate jargon”, “Buzzwords”, “Em dashes”, “Permission-seeking”, “Apologies”]
}
},
“operatingModes”: {
“god”: “Full output with all reasoning visible”,
“exec”: “No stalling, iterate to perfection”,
“mem”: “Optimize for Docker, automate everything”
},
“triggers”: {
“complex”: “Use DiCoT or stepback”,
“creative”: “Use ToT with 3 branches”,
“tools”: “Use ReAct loops”,
“optimize”: “Use RSIP or APE”,
“ambiguous”: “Use meta-prompt”,
“critical”: “Use self-consistency with 5 samples”
},
“optimizationChain”: [
“Deploy working version”,
“Validate with tests”,
“Optimize performance”,
“Harden for production”
],
“styleRules”: [
“Write like explaining to a smart friend over coffee”,
“Be professional but natural and conversational”,
“Avoid buzzwords and corporate jargon”,
“Never use em dashes”,
“Never sound like a press release”,
“Be clear, direct, and real”,
“Teach through working examples”,
“Focus on what’s deployable right now”
]
},
“mcpServers”: {
“replicate”: {
“url”: “https://mcp.replicate.com/sse”,
“purpose”: “AI model execution via Replicate API”
},
“omi”: {
“command”: “docker”,
“args”: [
“run”,
“–rm”,
“-i”,
“-e”,
“OMI_API_KEY=omi_mcp_31ce6230a6bebb1aaa06d23baf735380”,
“omiai/mcp-server:latest”
],
“purpose”: “Memory operations and context management”
},
“firecrawl”: {
“command”: “npx”,
“args”: [”-y”, “firecrawl-mcp”],
“env”: {
“FIRECRAWL_API_KEY”: “fc-77890218869f4a5ba09ea44ea1220935”
},
“purpose”: “Web scraping and data extraction”
}
},
“responseTemplate”: {
“tacticalSummary”: {
“description”: “Brief overview with 2-6 action bullets”,
“includes”: [
“Core objective”,
“Action steps”,
“Assumptions and constraints”,
“Expected deliverables”
]
},
“execution”: {
“description”: “Working code with run instructions”,
“requirements”: [
“Production-ready code”,
“Inline comments that teach”,
“Clear run instructions”,
“No placeholders - fully functional”
]
},
“validation”: {
“description”: “Test commands and expected outputs”,
“includes”: [
“Test commands”,
“Expected results”,
“How to verify success”
]
},
“optimization”: {
“description”: “Next steps and improvements”,
“includes”: [
“Performance improvements”,
“Automation opportunities”,
“Scaling considerations”
]
},
“blindSpots”: {
“description”: “Potential issues and mitigations”,
“includes”: [
“Edge cases not handled”,
“Potential failure modes”,
“Mitigation strategies”
]
}
},
“securityPrinciples”: [
“No hardcoded credentials”,
“Input validation on all endpoints”,
“Parameterized queries (SQL injection prevention)”,
“XSS protection in web outputs”,
“Proper CORS configuration”,
“Rate limiting on public APIs”,
“Environment variables for secrets”,
“Dependency vulnerability scanning”
],
“performanceOptimization”: [
“Docker-native by default”,
“Generate handover docs (README, config templates)”,
“Identify automation paths”,
“Use Docker/K8s patterns when relevant”,
“Optimize for memory and speed”,
“Enable caching where appropriate”
],
“contextInstructions”: {
“alwaysInclude”: [
“Working code that runs immediately”,
“Test instructions”,
“Documentation inline with code”
],
“neverInclude”: [
“Theoretical explanations without code”,
“Corporate buzzwords”,
“Apologies for limitations”,
“Asking for permission to execute”
],
“whenUncertain”: [
“Clarify with 2-3 specific options”,
“Generate multiple approaches and vote for best”,
“State assumptions clearly”,
“Provide working solution first, then alternatives”
]
}
}

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE en-export SYSTEM "http://xml.evernote.com/pub/evernote-export4.dtd">
<en-export export-date="20251003T001008Z" application="Evernote" version="Evernote iOS 10.156.1 (1243170)">
<note>
<title>
Rep clone test yupp
</title>
<content>
<![CDATA[<!DOCTYPE en-note SYSTEM "http://xml.evernote.com/pub/enml2.dtd"><en-note><div style="display:none;--en-chs:"eyJpc0VtcHR5IjpmYWxzZSwiaDEiOnsiZm9udEZhbWlseSI6ImluaGVyaXQiLCJmb250U2l6ZSI6IjI1cHgiLCJjb2xvciI6ImluaGVyaXQiLCJmb250V2VpZ2h0IjoiNjAwIiwiZm9udFN0eWxlIjoiaW5oZXJpdCIsInRleHREZWNvcmF0aW9uIjoiaW5oZXJpdCJ9LCJoMiI6eyJmb250RmFtaWx5IjoiaW5oZXJpdCIsImZvbnRTaXplIjoiMjBweCIsImNvbG9yIjoiaW5oZXJpdCIsImZvbnRXZWlnaHQiOiI2MDAiLCJmb250U3R5bGUiOiJpbmhlcml0IiwidGV4dERlY29yYXRpb24iOiJpbmhlcml0In0sImgzIjp7ImZvbnRGYW1pbHkiOiJpbmhlcml0IiwiZm9udFNpemUiOiIxOHB4IiwiY29sb3IiOiJpbmhlcml0IiwiZm9udFdlaWdodCI6IjYwMCIsImZvbnRTdHlsZSI6ImluaGVyaXQiLCJ0ZXh0RGVjb3JhdGlvbiI6ImluaGVyaXQifSwicCI6eyJmb250RmFtaWx5IjoiaW5oZXJpdCIsImZvbnRTaXplIjoiaW5oZXJpdCIsImNvbG9yIjoiaW5oZXJpdCIsImZvbnRXZWlnaHQiOiJpbmhlcml0IiwiZm9udFN0eWxlIjoiaW5oZXJpdCIsInRleHREZWNvcmF0aW9uIjoiaW5oZXJpdCJ9fQ==""> </div><div>Rep clone </div><div style="--en-codeblock:true; --en-lineWrapping:false;box-sizing: border-box; padding: 8px; font-family: "Fira Code","Consolas","Monaco","Andale Mono","Ubuntu Mono","Courier New",monospace font-size: 12px; color: rgb(51, 51, 51); border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; background-color: rgb(251, 250, 248); border: 1px solid rgba(0, 0, 0, 0.14902); background-position: initial initial; background-repeat: initial initial;"><div><br/></div></div><div>test yupp..</div><div> **Outlining detailed response framework** </div><div>I’m preparing a structured answer covering TACT (approach), EXEC (designs with repo tree, diagrams, code snippets), VAL (testing plans), OPT (improvements), and BLIND (open issues). I’ll include architecture diagrams in Mermaid, Firebase-based real-time collaboration methods using OT/CRDT with Yjs, secure Cloud Functions with Docker and Cloud Run, plus compliance notes—all while keeping the tone warm and approachable.
<b>TACT</b>
Let’s sketch the big picture first: we’ll spin up a Firebase-backed platform that layers real-time collaboration, secure code execution, and enterprise controls on top of a React interface with Monaco. Firestore drives persistent data, Realtime Database keeps cursor and document sync fast, and Cloud Run handles containerized code execution. From there it’s all about hardening with RBAC, audit trails, and compliance-minded configs so a security team won’t flinch.</div><hr/><div><b>EXEC</b></div><h3 style="--en-nodeId:9d49d9a6-54f9-4f51-b856-3d3e74738040;">1. Repository Layout</h3><div><code>replit-enterprise-clone/
├── docs/
│ ├── architecture.md
│ ├── compliance.md
│ └── setup-guide.md
├── infra/
│ ├── firebase.json
│ ├── firestore.rules
│ ├── storage.rules
│ ├── firestore.indexes.json
│ ├── rtdb.rules.json
│ ├── hosting/
│ │ └── default-cache-control.json
│ ├── cloud-functions/
│ │ ├── package.json
│ │ ├── src/
│ │ │ ├── authHooks.ts
│ │ │ ├── auditLog.ts
│ │ │ ├── codeExecution.ts
│ │ │ ├── roleEnforcer.ts
│ │ │ └── triggerHandlers.ts
│ ├── cloud-run/
│ │ ├── Dockerfile
│ │ ├── entrypoint.sh
│ │ └── sandbox/
│ │ ├── runtimes/
│ │ │ ├── python/
│ │ │ │ └── requirements.txt
│ │ │ ├── node

Files changed (3) hide show

README.md +8 -5
dashboard.html +208 -0
index.html +189 -18

README.md CHANGED Viewed

@@ -1,10 +1,13 @@
 ---
-title: Kode1 Collaborative Ide
-emoji: 🐨
-colorFrom: indigo
-colorTo: pink
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: Kode1 Collaborative IDE
+colorFrom: yellow
+colorTo: gray
+emoji: 🐳
 sdk: static
 pinned: false
+tags:
+  - deepsite-v3
 ---
+# Welcome to your new DeepSite project!
+This project was created with [DeepSite](https://deepsite.hf.co).

dashboard.html ADDED Viewed

	@@ -0,0 +1,208 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Dashboard - Kode1</title>
+    <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
+    <script src="https://unpkg.com/feather-icons"></script>
+    <style>
+        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
+        body {
+            font-family: 'Inter', sans-serif;
+            background-color: #0f172a;
+        }
+    </style>
+</head>
+<body class="bg-slate-900 text-slate-100">
+    <!-- Navigation -->
+    <nav class="bg-slate-800 border-b border-slate-700 px-6 py-3 flex items-center justify-between">
+        <div class="flex items-center space-x-2">
+            <div class="w-8 h-8 rounded-lg bg-indigo-600 flex items-center justify-center">
+                <i data-feather="code" class="text-white"></i>
+            </div>
+            <span class="text-xl font-bold">Kode1</span>
+        </div>
+        <div class="flex items-center space-x-4">
+            <button class="flex items-center space-x-1 bg-indigo-600 hover:bg-indigo-700 px-4 py-2 rounded-lg transition">
+                <i data-feather="plus"></i>
+                <span>New Project</span>
+            </button>
+            <button class="flex items-center space-x-1 bg-slate-700 hover:bg-slate-600 px-4 py-2 rounded-lg transition">
+                <i data-feather="share-2"></i>
+                <span>Share</span>
+            </button>
+            <div class="w-8 h-8 rounded-full bg-slate-600 flex items-center justify-center">
+                <i data-feather="user"></i>
+            </div>
+        </div>
+    </nav>
+    <!-- Main Content -->
+    <div class="container mx-auto px-6 py-8">
+        <div class="flex justify-between items-center mb-8">
+            <h1 class="text-3xl font-bold">Dashboard</h1>
+            <button class="flex items-center space-x-1 bg-indigo-600 hover:bg-indigo-700 px-4 py-2 rounded-lg transition">
+                <i data-feather="plus"></i>
+                <span>Create Project</span>
+            </button>
+        </div>
+        <!-- Stats Cards -->
+        <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
+            <div class="bg-slate-800 rounded-xl p-6 border border-slate-700">
+                <div class="flex items-center">
+                    <div class="p-3 rounded-lg bg-indigo-500/10 mr-4">
+                        <i data-feather="folder" class="text-indigo-400"></i>
+                    </div>
+                    <div>
+                        <p class="text-slate-400">Projects</p>
+                        <p class="text-2xl font-bold">12</p>
+                    </div>
+                </div>
+            </div>
+            <div class="bg-slate-800 rounded-xl p-6 border border-slate-700">
+                <div class="flex items-center">
+                    <div class="p-3 rounded-lg bg-green-500/10 mr-4">
+                        <i data-feather="users" class="text-green-400"></i>
+                    </div>
+                    <div>
+                        <p class="text-slate-400">Collaborators</p>
+                        <p class="text-2xl font-bold">24</p>
+                    </div>
+                </div>
+            </div>
+            <div class="bg-slate-800 rounded-xl p-6 border border-slate-700">
+                <div class="flex items-center">
+                    <div class="p-3 rounded-lg bg-amber-500/10 mr-4">
+                        <i data-feather="clock" class="text-amber-400"></i>
+                    </div>
+                    <div>
+                        <p class="text-slate-400">Hours Coded</p>
+                        <p class="text-2xl font-bold">142</p>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <!-- Recent Projects -->
+        <div class="mb-8">
+            <div class="flex justify-between items-center mb-4">
+                <h2 class="text-xl font-bold">Recent Projects</h2>
+                <a href="#" class="text-indigo-400 hover:text-indigo-300">View All</a>
+            </div>
+            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+                <!-- Project Card 1 -->
+                <div class="bg-slate-800 rounded-xl border border-slate-700 overflow-hidden hover:border-indigo-500 transition">
+                    <div class="h-32 bg-gradient-to-r from-indigo-500 to-purple-600"></div>
+                    <div class="p-5">
+                        <div class="flex justify-between items-start">
+                            <h3 class="font-bold text-lg">E-commerce Dashboard</h3>
+                            <span class="text-xs bg-slate-700 px-2 py-1 rounded">React</span>
+                        </div>
+                        <p class="text-slate-400 text-sm mt-2">Full-featured dashboard with analytics and reporting</p>
+                        <div class="flex items-center mt-4">
+                            <div class="flex -space-x-2">
+                                <img class="w-6 h-6 rounded-full border-2 border-slate-800" src="http://static.photos/people/200x200/1" alt="Collaborator">
+                                <img class="w-6 h-6 rounded-full border-2 border-slate-800" src="http://static.photos/people/200x200/2" alt="Collaborator">
+                                <img class="w-6 h-6 rounded-full border-2 border-slate-800" src="http://static.photos/people/200x200/3" alt="Collaborator">
+                            </div>
+                            <span class="text-xs text-slate-400 ml-2">3 collaborators</span>
+                        </div>
+                    </div>
+                </div>
+                <!-- Project Card 2 -->
+                <div class="bg-slate-800 rounded-xl border border-slate-700 overflow-hidden hover:border-indigo-500 transition">
+                    <div class="h-32 bg-gradient-to-r from-amber-500 to-orange-600"></div>
+                    <div class="p-5">
+                        <div class="flex justify-between items-start">
+                            <h3 class="font-bold text-lg">API Gateway</h3>
+                            <span class="text-xs bg-slate-700 px-2 py-1 rounded">Node.js</span>
+                        </div>
+                        <p class="text-slate-400 text-sm mt-2">Secure API gateway with rate limiting and auth</p>
+                        <div class="flex items-center mt-4">
+                            <div class="flex -space-x-2">
+                                <img class="w-6 h-6 rounded-full border-2 border-slate-800" src="http://static.photos/people/200x200/4" alt="Collaborator">
+                                <img class="w-6 h-6 rounded-full border-2 border-slate-800" src="http://static.photos/people/200x200/5" alt="Collaborator">
+                            </div>
+                            <span class="text-xs text-slate-400 ml-2">2 collaborators</span>
+                        </div>
+                    </div>
+                </div>
+                <!-- Project Card 3 -->
+                <div class="bg-slate-800 rounded-xl border border-slate-700 overflow-hidden hover:border-indigo-500 transition">
+                    <div class="h-32 bg-gradient-to-r from-emerald-500 to-teal-600"></div>
+                    <div class="p-5">
+                        <div class="flex justify-between items-start">
+                            <h3 class="font-bold text-lg">Mobile App</h3>
+                            <span class="text-xs bg-slate-700 px-2 py-1 rounded">React Native</span>
+                        </div>
+                        <p class="text-slate-400 text-sm mt-2">Cross-platform mobile application</p>
+                        <div class="flex items-center mt-4">
+                            <div class="flex -space-x-2">
+                                <img class="w-6 h-6 rounded-full border-2 border-slate-800" src="http://static.photos/people/200x200/6" alt="Collaborator">
+                                <img class="w-6 h-6 rounded-full border-2 border-slate-800" src="http://static.photos/people/200x200/7" alt="Collaborator">
+                                <img class="w-6 h-6 rounded-full border-2 border-slate-800" src="http://static.photos/people/200x200/8" alt="Collaborator">
+                            </div>
+                            <span class="text-xs text-slate-400 ml-2">4 collaborators</span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <!-- Activity Feed -->
+        <div>
+            <h2 class="text-xl font-bold mb-4">Recent Activity</h2>
+            <div class="bg-slate-800 rounded-xl border border-slate-700 overflow-hidden">
+                <div class="divide-y divide-slate-700">
+                    <div class="p-4 flex items-start">
+                        <div class="w-8 h-8 rounded-full bg-indigo-500 flex items-center justify-center mr-3 flex-shrink-0">
+                            <i data-feather="git-commit" class="text-white text-sm"></i>
+                        </div>
+                        <div>
+                            <p class="font-medium">Alex Morgan pushed to <span class="text-indigo-400">main</span></p>
+                            <p class="text-slate-400 text-sm">Added new authentication flow</p>
+                            <p class="text-slate-500 text-xs mt-1">2 hours ago</p>
+                        </div>
+                    </div>
+                    <div class="p-4 flex items-start">
+                        <div class="w-8 h-8 rounded-full bg-green-500 flex items-center justify-center mr-3 flex-shrink-0">
+                            <i data-feather="user-plus" class="text-white text-sm"></i>
+                        </div>
+                        <div>
+                            <p class="font-medium">Taylor Kim joined project <span class="text-indigo-400">E-commerce Dashboard</span></p>
+                            <p class="text-slate-400 text-sm">Added as frontend developer</p>
+                            <p class="text-slate-500 text-xs mt-1">5 hours ago</p>
+                        </div>
+                    </div>
+                    <div class="p-4 flex items-start">
+                        <div class="w-8 h-8 rounded-full bg-amber-500 flex items-center justify-center mr-3 flex-shrink-0">
+                            <i data-feather="message-square" class="text-white text-sm"></i>
+                        </div>
+                        <div>
+                            <p class="font-medium">Jordan Smith commented on <span class="text-indigo-400">API Gateway</span></p>
+                            <p class="text-slate-400 text-sm">"We should consider adding rate limiting"</p>
+                            <p class="text-slate-500 text-xs mt-1">Yesterday</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <script>
+        feather.replace();
+    </script>
+</body>
+</html>

index.html CHANGED Viewed

@@ -1,19 +1,190 @@
-<!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>Kode1 - Collaborative IDE</title>
+    <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
+    <script src="https://unpkg.com/feather-icons"></script>
+    <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.globe.min.js"></script>
+    <style>
+        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
+        body {
+            font-family: 'Inter', sans-serif;
+            background-color: #0f172a;
+        }
+        .editor-container {
+            height: calc(100vh - 120px);
+        }
+        .collaborator-cursor {
+            position: absolute;
+            width: 2px;
+            height: 20px;
+        }
+        .collaborator-label {
+            position: absolute;
+            top: -20px;
+            left: -2px;
+            font-size: 12px;
+            padding: 2px 6px;
+            border-radius: 4px;
+            color: white;
+            white-space: nowrap;
+        }
+    </style>
+</head>
+<body class="bg-slate-900 text-slate-100">
+    <!-- Navigation -->
+    <nav class="bg-slate-800 border-b border-slate-700 px-6 py-3 flex items-center justify-between">
+        <div class="flex items-center space-x-2">
+            <div class="w-8 h-8 rounded-lg bg-indigo-600 flex items-center justify-center">
+                <i data-feather="code" class="text-white"></i>
+            </div>
+            <span class="text-xl font-bold">Kode1</span>
+        </div>
+        <div class="flex items-center space-x-4">
+            <button class="flex items-center space-x-1 bg-indigo-600 hover:bg-indigo-700 px-4 py-2 rounded-lg transition">
+                <i data-feather="plus"></i>
+                <span>New Project</span>
+            </button>
+            <button class="flex items-center space-x-1 bg-slate-700 hover:bg-slate-600 px-4 py-2 rounded-lg transition">
+                <i data-feather="share-2"></i>
+                <span>Share</span>
+            </button>
+            <div class="w-8 h-8 rounded-full bg-slate-600 flex items-center justify-center">
+                <i data-feather="user"></i>
+            </div>
+        </div>
+    </nav>
+    <!-- Main Content -->
+    <div class="flex h-screen">
+        <!-- Sidebar -->
+        <div class="w-64 bg-slate-800 border-r border-slate-700 flex flex-col">
+            <div class="p-4 border-b border-slate-700">
+                <h2 class="font-semibold text-lg">Project Files</h2>
+            </div>
+            <div class="flex-1 overflow-y-auto p-2">
+                <div class="space-y-1">
+                    <div class="flex items-center p-2 rounded hover:bg-slate-700 cursor-pointer">
+                        <i data-feather="folder" class="mr-2 text-amber-400"></i>
+                        <span>src</span>
+                    </div>
+                    <div class="ml-6 flex items-center p-2 rounded hover:bg-slate-700 cursor-pointer">
+                        <i data-feather="file-text" class="mr-2 text-blue-400"></i>
+                        <span>App.js</span>
+                    </div>
+                    <div class="ml-6 flex items-center p-2 rounded hover:bg-slate-700 cursor-pointer">
+                        <i data-feather="file-text" class="mr-2 text-blue-400"></i>
+                        <span>index.js</span>
+                    </div>
+                    <div class="flex items-center p-2 rounded hover:bg-slate-700 cursor-pointer">
+                        <i data-feather="folder" class="mr-2 text-amber-400"></i>
+                        <span>public</span>
+                    </div>
+                    <div class="ml-6 flex items-center p-2 rounded hover:bg-slate-700 cursor-pointer">
+                        <i data-feather="file-text" class="mr-2 text-blue-400"></i>
+                        <span>index.html</span>
+                    </div>
+                    <div class="flex items-center p-2 rounded hover:bg-slate-700 cursor-pointer">
+                        <i data-feather="file-text" class="mr-2 text-green-400"></i>
+                        <span>package.json</span>
+                    </div>
+                </div>
+            </div>
+            <div class="p-4 border-t border-slate-700">
+                <div class="flex items-center justify-between">
+                    <h3 class="font-medium">Collaborators</h3>
+                    <span class="bg-green-500 w-2 h-2 rounded-full"></span>
+                </div>
+                <div class="mt-2 space-y-2">
+                    <div class="flex items-center">
+                        <div class="w-6 h-6 rounded-full bg-purple-500 mr-2"></div>
+                        <span class="text-sm">Alex Morgan</span>
+                    </div>
+                    <div class="flex items-center">
+                        <div class="w-6 h-6 rounded-full bg-amber-500 mr-2"></div>
+                        <span class="text-sm">Taylor Kim</span>
+                    </div>
+                    <div class="flex items-center">
+                        <div class="w-6 h-6 rounded-full bg-emerald-500 mr-2"></div>
+                        <span class="text-sm">Jordan Smith</span>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <!-- Editor Area -->
+        <div class="flex-1 flex flex-col">
+            <div class="border-b border-slate-700 px-4 py-2 flex items-center">
+                <div class="flex space-x-1">
+                    <button class="px-3 py-1 rounded hover:bg-slate-700">File</button>
+                    <button class="px-3 py-1 rounded hover:bg-slate-700">Edit</button>
+                    <button class="px-3 py-1 rounded hover:bg-slate-700">View</button>
+                    <button class="px-3 py-1 rounded hover:bg-slate-700">Run</button>
+                </div>
+            </div>
+            <div class="flex-1 editor-container relative">
+                <!-- Code Editor Placeholder -->
+                <div id="editor" class="absolute inset-0 bg-slate-900"></div>
+                <!-- Collaborator Cursors -->
+                <div class="absolute" style="top: 120px; left: 320px;">
+                    <div class="collaborator-cursor bg-purple-500">
+                        <div class="collaborator-label bg-purple-500">Alex</div>
+                    </div>
+                </div>
+                <div class="absolute" style="top: 240px; left: 480px;">
+                    <div class="collaborator-cursor bg-amber-500">
+                        <div class="collaborator-label bg-amber-500">Taylor</div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <!-- Right Panel -->
+        <div class="w-80 bg-slate-800 border-l border-slate-700 flex flex-col">
+            <div class="p-4 border-b border-slate-700">
+                <h2 class="font-semibold text-lg">Output</h2>
+            </div>
+            <div class="flex-1 p-4">
+                <div class="bg-slate-900 rounded-lg p-4 h-full font-mono text-sm overflow-y-auto">
+                    <div class="text-green-400">$ npm start</div>
+                    <div class="text-white">Starting development server...</div>
+                    <div class="text-white">Compiled successfully!</div>
+                    <div class="text-white">Local: http://localhost:3000</div>
+                    <div class="text-white">On Your Network: http://192.168.1.5:3000</div>
+                    <div class="text-yellow-400">Note: The development server is running in development mode.</div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <script>
+        feather.replace();
+        // Initialize Vanta.js background
+        VANTA.GLOBE({
+            el: "#editor",
+            mouseControls: true,
+            touchControls: true,
+            gyroControls: false,
+            minHeight: 200.00,
+            minWidth: 200.00,
+            scale: 1.00,
+            scaleMobile: 1.00,
+            color: 0x3366ff,
+            color2: 0x000000,
+            backgroundColor: 0x0f172a,
+            size: 1.00,
+            lineHeight: 18.50,
+            spacing: 17.00,
+            speed: 0.70
+        });
+    </script>
+</body>
 </html>