Hugging Face's logo

Spaces:
vignesh5002
/
codenebula-cloud-compiler-constellation
Running

App Files Community
vignesh5002 commited on
Commit
3a28595
·
verified ·
1 Parent(s): ee78d84

create a beautiful website that runs code like a online compiler which should contains all laguage

Browse files
Files changed (2) hide show
  1. README.md +8 -5
  2. index.html +297 -19
README.md CHANGED
@@ -1,10 +1,13 @@
1
  ---
2
- title: Codenebula Cloud Compiler Constellation
3
- emoji: 🌖
4
- colorFrom: green
5
- colorTo: blue
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
 
1
  ---
2
+ title: CodeNebula - Cloud Compiler Constellation
3
+ colorFrom: red
4
+ colorTo: yellow
5
+ emoji: 🐳
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite-v3
10
  ---
11
 
12
+ # Welcome to your new DeepSite project!
13
+ This project was created with [DeepSite](https://deepsite.hf.co).
index.html CHANGED
@@ -1,19 +1,297 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en" class="h-full">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>CodeNebula - Cloud Compiler Constellation</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <script src="https://unpkg.com/feather-icons"></script>
9
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
10
+ <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.globe.min.js"></script>
11
+ <script>
12
+ tailwind.config = {
13
+ theme: {
14
+ extend: {
15
+ colors: {
16
+ nebula: {
17
+ 50: '#f0f9ff',
18
+ 100: '#e0f2fe',
19
+ 200: '#bae6fd',
20
+ 300: '#7dd3fc',
21
+ 400: '#38bdf8',
22
+ 500: '#0ea5e9',
23
+ 600: '#0284c7',
24
+ 700: '#0369a1',
25
+ 800: '#075985',
26
+ 900: '#0c4a6e',
27
+ }
28
+ }
29
+ }
30
+ }
31
+ }
32
+ </script>
33
+ <style>
34
+ @import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@300;400;500;600;700&family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap');
35
+
36
+ body {
37
+ font-family: 'Inter', sans-serif;
38
+ -webkit-font-smoothing: antialiased;
39
+ -moz-osx-font-smoothing: grayscale;
40
+ }
41
+
42
+ .code-font {
43
+ font-family: 'Fira Code', monospace;
44
+ }
45
+
46
+ #vanta-bg {
47
+ position: absolute;
48
+ top: 0;
49
+ left: 0;
50
+ width: 100%;
51
+ height: 100%;
52
+ z-index: -1;
53
+ }
54
+
55
+ .editor-container {
56
+ height: calc(100vh - 200px);
57
+ }
58
+
59
+ @media (max-width: 768px) {
60
+ .editor-container {
61
+ height: calc(100vh - 160px);
62
+ }
63
+ }
64
+
65
+ .language-selector:hover .language-dropdown {
66
+ display: block;
67
+ }
68
+
69
+ .syntax-highlight {
70
+ background: rgba(14, 165, 233, 0.2);
71
+ border-left: 3px solid rgba(14, 165, 233, 1);
72
+ }
73
+ </style>
74
+ </head>
75
+ <body class="bg-gray-50 dark:bg-gray-900 text-gray-900 dark:text-gray-100 transition-colors duration-300 h-full">
76
+ <div id="vanta-bg"></div>
77
+
78
+ <!-- Navigation -->
79
+ <nav class="bg-white/80 dark:bg-gray-800/80 backdrop-blur-md border-b border-gray-200 dark:border-gray-700 shadow-sm">
80
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
81
+ <div class="flex items-center justify-between h-16">
82
+ <div class="flex items-center">
83
+ <div class="flex-shrink-0 flex items-center">
84
+ <i data-feather="code" class="text-nebula-600 dark:text-nebula-400 h-6 w-6"></i>
85
+ <span class="ml-2 text-xl font-bold text-nebula-600 dark:text-nebula-400">CodeNebula</span>
86
+ </div>
87
+ <div class="hidden md:block">
88
+ <div class="ml-10 flex items-baseline space-x-4">
89
+ <a href="#" class="px-3 py-2 rounded-md text-sm font-medium bg-nebula-100 dark:bg-nebula-900 text-nebula-700 dark:text-nebula-300">Editor</a>
90
+ <a href="#" class="px-3 py-2 rounded-md text-sm font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700">Projects</a>
91
+ <a href="#" class="px-3 py-2 rounded-md text-sm font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700">Templates</a>
92
+ <a href="#" class="px-3 py-2 rounded-md text-sm font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700">Docs</a>
93
+ </div>
94
+ </div>
95
+ </div>
96
+ <div class="hidden md:block">
97
+ <div class="ml-4 flex items-center md:ml-6">
98
+ <button type="button" class="p-1 rounded-full text-gray-700 dark:text-gray-300 hover:text-nebula-600 dark:hover:text-nebula-400 focus:outline-none">
99
+ <i data-feather="sun" class="h-5 w-5 dark:hidden"></i>
100
+ <i data-feather="moon" class="h-5 w-5 hidden dark:block"></i>
101
+ </button>
102
+ <button type="button" class="ml-3 p-1 rounded-full text-gray-700 dark:text-gray-300 hover:text-nebula-600 dark:hover:text-nebula-400 focus:outline-none">
103
+ <i data-feather="share-2" class="h-5 w-5"></i>
104
+ </button>
105
+ <button type="button" class="ml-3 p-1 rounded-full text-gray-700 dark:text-gray-300 hover:text-nebula-600 dark:hover:text-nebula-400 focus:outline-none">
106
+ <i data-feather="settings" class="h-5 w-5"></i>
107
+ </button>
108
+ <button class="ml-3 bg-nebula-600 hover:bg-nebula-700 text-white px-4 py-1.5 rounded-md text-sm font-medium flex items-center">
109
+ <i data-feather="user" class="h-4 w-4 mr-1"></i>
110
+ Sign In
111
+ </button>
112
+ </div>
113
+ </div>
114
+ <div class="-mr-2 flex md:hidden">
115
+ <button type="button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-700 dark:text-gray-300 hover:text-nebula-600 dark:hover:text-nebula-400 focus:outline-none">
116
+ <i data-feather="menu" class="h-6 w-6"></i>
117
+ </button>
118
+ </div>
119
+ </div>
120
+ </div>
121
+ </nav>
122
+
123
+ <!-- Main Content -->
124
+ <main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
125
+ <div class="flex flex-col md:flex-row gap-6">
126
+ <!-- Sidebar -->
127
+ <div class="w-full md:w-64 flex-shrink-0 bg-white/80 dark:bg-gray-800/80 backdrop-blur-md rounded-lg border border-gray-200 dark:border-gray-700 shadow-sm overflow-hidden">
128
+ <div class="p-4 border-b border-gray-200 dark:border-gray-700 flex justify-between items-center">
129
+ <h2 class="font-semibold text-lg">Project Files</h2>
130
+ <button class="text-nebula-600 dark:text-nebula-400 hover:text-nebula-700 dark:hover:text-nebula-300">
131
+ <i data-feather="plus" class="h-5 w-5"></i>
132
+ </button>
133
+ </div>
134
+ <div class="p-2">
135
+ <div class="space-y-1">
136
+ <div class="flex items-center px-3 py-2 text-sm rounded-md bg-nebula-100 dark:bg-nebula-900 text-nebula-700 dark:text-nebula-300">
137
+ <i data-feather="file-text" class="h-4 w-4 mr-2"></i>
138
+ main.py
139
+ </div>
140
+ <div class="flex items-center px-3 py-2 text-sm rounded-md text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700">
141
+ <i data-feather="file-text" class="h-4 w-4 mr-2"></i>
142
+ utils.py
143
+ </div>
144
+ <div class="flex items-center px-3 py-2 text-sm rounded-md text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700">
145
+ <i data-feather="file-text" class="h-4 w-4 mr-2"></i>
146
+ config.json
147
+ </div>
148
+ <div class="flex items-center px-3 py-2 text-sm rounded-md text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700">
149
+ <i data-feather="folder" class="h-4 w-4 mr-2"></i>
150
+ assets
151
+ </div>
152
+ </div>
153
+ </div>
154
+ <div class="p-4 border-t border-gray-200 dark:border-gray-700">
155
+ <div class="flex items-center justify-between text-sm">
156
+ <span class="text-gray-500 dark:text-gray-400">Storage</span>
157
+ <span class="font-medium">15% used</span>
158
+ </div>
159
+ <div class="mt-1 w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2">
160
+ <div class="bg-nebula-600 h-2 rounded-full" style="width: 15%"></div>
161
+ </div>
162
+ </div>
163
+ </div>
164
+
165
+ <!-- Editor Area -->
166
+ <div class="flex-1 flex flex-col">
167
+ <!-- Toolbar -->
168
+ <div class="bg-white/80 dark:bg-gray-800/80 backdrop-blur-md rounded-lg border border-gray-200 dark:border-gray-700 shadow-sm mb-4">
169
+ <div class="px-4 py-3 flex items-center justify-between">
170
+ <div class="flex items-center space-x-4">
171
+ <div class="language-selector relative">
172
+ <button class="flex items-center text-sm font-medium text-gray-700 dark:text-gray-300 hover:text-nebula-600 dark:hover:text-nebula-400">
173
+ <i data-feather="file-text" class="h-4 w-4 mr-1"></i>
174
+ Python
175
+ <i data-feather="chevron-down" class="h-4 w-4 ml-1"></i>
176
+ </button>
177
+ <div class="language-dropdown hidden absolute left-0 mt-2 w-48 bg-white dark:bg-gray-800 rounded-md shadow-lg z-10 border border-gray-200 dark:border-gray-700">
178
+ <div class="py-1">
179
+ <a href="#" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700">Python</a>
180
+ <a href="#" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700">JavaScript</a>
181
+ <a href="#" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700">Java</a>
182
+ <a href="#" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700">C++</a>
183
+ <a href="#" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700">Ruby</a>
184
+ <a href="#" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700">PHP</a>
185
+ </div>
186
+ </div>
187
+ </div>
188
+ <button class="text-gray-700 dark:text-gray-300 hover:text-nebula-600 dark:hover:text-nebula-400">
189
+ <i data-feather="refresh-cw" class="h-4 w-4"></i>
190
+ </button>
191
+ <button class="text-gray-700 dark:text-gray-300 hover:text-nebula-600 dark:hover:text-nebula-400">
192
+ <i data-feather="save" class="h-4 w-4"></i>
193
+ </button>
194
+ </div>
195
+ <div class="flex items-center space-x-4">
196
+ <button class="flex items-center text-sm font-medium text-gray-700 dark:text-gray-300 hover:text-nebula-600 dark:hover:text-nebula-400">
197
+ <i data-feather="terminal" class="h-4 w-4 mr-1"></i>
198
+ Console
199
+ </button>
200
+ <button class="bg-nebula-600 hover:bg-nebula-700 text-white px-4 py-1 rounded-md text-sm font-medium flex items-center">
201
+ <i data-feather="play" class="h-4 w-4 mr-1"></i>
202
+ Run
203
+ </button>
204
+ </div>
205
+ </div>
206
+ </div>
207
+
208
+ <!-- Editor and Output -->
209
+ <div class="flex-1 flex flex-col md:flex-row gap-4">
210
+ <!-- Code Editor -->
211
+ <div class="flex-1 bg-white/80 dark:bg-gray-800/80 backdrop-blur-md rounded-lg border border-gray-200 dark:border-gray-700 shadow-sm overflow-hidden editor-container">
212
+ <div class="h-full">
213
+ <div class="px-4 py-2 border-b border-gray-200 dark:border-gray-700 flex items-center justify-between bg-gray-50 dark:bg-gray-700">
214
+ <div class="flex items-center">
215
+ <i data-feather="file-text" class="h-4 w-4 text-nebula-600 dark:text-nebula-400 mr-2"></i>
216
+ <span class="text-sm font-medium">main.py</span>
217
+ </div>
218
+ <div class="flex items-center space-x-2">
219
+ <button class="text-gray-500 dark:text-gray-400 hover:text-nebula-600 dark:hover:text-nebula-400">
220
+ <i data-feather="minimize-2" class="h-4 w-4"></i>
221
+ </button>
222
+ <button class="text-gray-500 dark:text-gray-400 hover:text-nebula-600 dark:hover:text-nebula-400">
223
+ <i data-feather="maximize-2" class="h-4 w-4"></i>
224
+ </button>
225
+ </div>
226
+ </div>
227
+ <div class="p-4 h-full overflow-auto">
228
+ <pre class="code-font text-sm"><code class="language-python"># Welcome to CodeNebula!
229
+ # This is a Python code editor with real-time execution
230
+
231
+ def fibonacci(n):
232
+ """Generate Fibonacci sequence up to n terms"""
233
+ a, b = 0, 1
234
+ for _ in range(n):
235
+ yield a
236
+ a, b = b, a + b
237
+
238
+ # Print first 10 Fibonacci numbers
239
+ for num in fibonacci(10):
240
+ print(num)
241
+
242
+ # Try running this code!
243
+ # Click the Run button above or press Ctrl+Enter</code></pre>
244
+ </div>
245
+ </div>
246
+ </div>
247
+
248
+ <!-- Output Panel -->
249
+ <div class="md:w-1/3 bg-white/80 dark:bg-gray-800/80 backdrop-blur-md rounded-lg border border-gray-200 dark:border-gray-700 shadow-sm overflow-hidden editor-container">
250
+ <div class="h-full flex flex-col">
251
+ <div class="px-4 py-2 border-b border-gray-200 dark:border-gray-700 flex items-center justify-between bg-gray-50 dark:bg-gray-700">
252
+ <div class="flex items-center">
253
+ <i data-feather="terminal" class="h-4 w-4 text-nebula-600 dark:text-nebula-400 mr-2"></i>
254
+ <span class="text-sm font-medium">Output</span>
255
+ </div>
256
+ <div class="flex items-center space-x-2">
257
+ <button class="text-gray-500 dark:text-gray-400 hover:text-nebula-600 dark:hover:text-nebula-400">
258
+ <i data-feather="trash-2" class="h-4 w-4"></i>
259
+ </button>
260
+ </div>
261
+ </div>
262
+ <div class="p-4 flex-1 overflow-auto bg-gray-50 dark:bg-gray-900">
263
+ <div class="text-sm code-font">
264
+ <div class="text-green-600 dark:text-green-400">>> Running main.py</div>
265
+ <div class="mt-2 whitespace-pre">0
266
+ 1
267
+ 1
268
+ 2
269
+ 3
270
+ 5
271
+ 8
272
+ 13
273
+ 21
274
+ 34</div>
275
+ <div class="mt-2 text-green-600 dark:text-green-400">>> Program finished with exit code 0</div>
276
+ </div>
277
+ </div>
278
+ </div>
279
+ </div>
280
+ </div>
281
+ </div>
282
+ </div>
283
+ </main>
284
+
285
+ <!-- Footer -->
286
+ <footer class="bg-white/80 dark:bg-gray-800/80 backdrop-blur-md border-t border-gray-200 dark:border-gray-700 mt-6">
287
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4">
288
+ <div class="flex flex-col md:flex-row justify-between items-center">
289
+ <div class="flex items-center">
290
+ <i data-feather="code" class="text-nebula-600 dark:text-nebula-400 h-5 w-5"></i>
291
+ <span class="ml-2 text-sm text-gray-700 dark:text-gray-300">CodeNebula © 2023</span>
292
+ </div>
293
+ <div class="mt-4 md:mt-0 flex space-x-6">
294
+ <a href="#" class="text-gray-500 dark:text-gray-400 hover:text-nebula-600 dark:hover:text-nebula-400">
295
+ <i data-feather="github" class="h-5 w-5"></
296
+ </body>
297
+ </html>