Hugging Face's logo

Spaces:
Oceanlover
/
kode1-collaborative-ide
Running

App Files Community
kode1-collaborative-ide
File size: 8,477 Bytes 
602fea8
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
894f93b
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
 
<!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>