Hugging Face's logo

Spaces:
onigetoc
/
vs-code-editor-clone
Running

App Files Community
onigetoc commited on
Commit
68db180
·
verified ·
1 Parent(s): ffc1199

add sample project with some folder and files of a test react project. - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +6 -4
  2. index.html +219 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Vs Code Editor Clone
3
- emoji: 🐠
4
  colorFrom: purple
5
- colorTo: green
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: vs-code-editor-clone
3
+ emoji: 🐳
4
  colorFrom: purple
5
+ colorTo: red
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,219 @@
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">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>VS Code Clone</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <script src="https://unpkg.com/monaco-editor@0.36.1/min/vs/loader.js"></script>
10
+ <style>
11
+ .monaco-editor {
12
+ width: 100%;
13
+ height: calc(100vh - 40px);
14
+ }
15
+ .file:hover {
16
+ background-color: rgba(255, 255, 255, 0.1);
17
+ }
18
+ .active-file {
19
+ background-color: rgba(30, 144, 255, 0.2);
20
+ }
21
+ .tab.active {
22
+ background-color: #1e1e1e;
23
+ border-top: 2px solid #007acc;
24
+ }
25
+ .tab:hover:not(.active) {
26
+ background-color: #2a2d2e;
27
+ }
28
+ .resize-handle {
29
+ width: 4px;
30
+ cursor: col-resize;
31
+ transition: background-color 0.2s;
32
+ }
33
+ .resize-handle:hover {
34
+ background-color: #007acc;
35
+ }
36
+ /* Custom scrollbar */
37
+ ::-webkit-scrollbar {
38
+ width: 8px;
39
+ height: 8px;
40
+ }
41
+ ::-webkit-scrollbar-track {
42
+ background: #1e1e1e;
43
+ }
44
+ ::-webkit-scrollbar-thumb {
45
+ background: #3c3c3c;
46
+ border-radius: 4px;
47
+ }
48
+ ::-webkit-scrollbar-thumb:hover {
49
+ background: #555;
50
+ }
51
+ </style>
52
+ </head>
53
+ <body class="bg-gray-900 text-gray-200 h-screen overflow-hidden">
54
+ <div class="flex flex-col h-full">
55
+ <!-- Title Bar -->
56
+ <div class="bg-gray-800 px-4 py-2 flex items-center justify-between border-b border-gray-700">
57
+ <div class="flex items-center space-x-4">
58
+ <div class="flex items-center">
59
+ <i class="fas fa-code text-blue-400 mr-2"></i>
60
+ <span class="font-semibold">VS Code Clone</span>
61
+ </div>
62
+ <div class="hidden md:flex space-x-4 text-sm">
63
+ <span class="hover:bg-gray-700 px-2 py-1 rounded cursor-pointer">File</span>
64
+ <span class="hover:bg-gray-700 px-2 py-1 rounded cursor-pointer">Edit</span>
65
+ <span class="hover:bg-gray-700 px-2 py-1 rounded cursor-pointer">View</span>
66
+ <span class="hover:bg-gray-700 px-2 py-1 rounded cursor-pointer">Help</span>
67
+ </div>
68
+ </div>
69
+ <div class="text-sm">
70
+ <span class="px-2">index.html</span>
71
+ </div>
72
+ <div class="flex space-x-4">
73
+ <i class="fas fa-window-minimize cursor-pointer hover:text-gray-400"></i>
74
+ <i class="fas fa-window-maximize cursor-pointer hover:text-gray-400"></i>
75
+ <i class="fas fa-times cursor-pointer hover:text-red-400"></i>
76
+ </div>
77
+ </div>
78
+
79
+ <!-- Main Content -->
80
+ <div class="flex flex-1 overflow-hidden">
81
+ <!-- Sidebar -->
82
+ <div class="flex">
83
+ <!-- Activity Bar -->
84
+ <div class="bg-gray-800 w-12 flex flex-col items-center py-4 space-y-6">
85
+ <div class="p-2 rounded hover:bg-gray-700 cursor-pointer text-blue-400">
86
+ <i class="fas fa-file-code"></i>
87
+ </div>
88
+ <div class="p-2 rounded hover:bg-gray-700 cursor-pointer">
89
+ <i class="fas fa-search"></i>
90
+ </div>
91
+ <div class="p-2 rounded hover:bg-gray-700 cursor-pointer">
92
+ <i class="fas fa-code-branch"></i>
93
+ </div>
94
+ <div class="p-2 rounded hover:bg-gray-700 cursor-pointer">
95
+ <i class="fas fa-bug"></i>
96
+ </div>
97
+ <div class="p-2 rounded hover:bg-gray-700 cursor-pointer">
98
+ <i class="fas fa-cog"></i>
99
+ </div>
100
+ </div>
101
+
102
+ <!-- Explorer -->
103
+ <div id="explorer" class="bg-gray-800 w-64 flex flex-col border-r border-gray-700 overflow-y-auto">
104
+ <div class="px-4 py-3 font-medium flex justify-between items-center">
105
+ <span>EXPLORER</span>
106
+ <i class="fas fa-ellipsis-h cursor-pointer hover:bg-gray-700 p-1 rounded"></i>
107
+ </div>
108
+ <div class="px-2 py-1">
109
+ <div class="flex items-center px-2 py-1 rounded hover:bg-gray-700 cursor-pointer">
110
+ <i class="fas fa-chevron-down text-xs mr-2 w-4"></i>
111
+ <i class="fas fa-folder-open text-yellow-400 mr-2"></i>
112
+ <span>project</span>
113
+ </div>
114
+ <div id="file-tree" class="pl-6">
115
+ <!-- Files will be added here -->
116
+ </div>
117
+ </div>
118
+ </div>
119
+ </div>
120
+
121
+ <!-- Resize Handle -->
122
+ <div class="resize-handle" id="resize-handle"></div>
123
+
124
+ <!-- Editor Area -->
125
+ <div class="flex-1 flex flex-col overflow-hidden">
126
+ <!-- Tabs -->
127
+ <div id="tabs" class="bg-gray-800 flex items-center overflow-x-auto border-b border-gray-700">
128
+ <!-- Tabs will be added here -->
129
+ </div>
130
+
131
+ <!-- Editor -->
132
+ <div id="editor-container" class="flex-1 overflow-hidden">
133
+ <div id="editor" class="monaco-editor"></div>
134
+ </div>
135
+
136
+ <!-- Status Bar -->
137
+ <div class="bg-blue-600 text-white px-4 py-1 flex justify-between text-xs">
138
+ <div class="flex space-x-4">
139
+ <span><i class="fas fa-code-branch mr-1"></i> main</span>
140
+ <span><i class="fas fa-check-circle mr-1"></i> Prettier</span>
141
+ </div>
142
+ <div class="flex space-x-4">
143
+ <span>UTF-8</span>
144
+ <span>LF</span>
145
+ <span>HTML</span>
146
+ <span><i class="fas fa-wifi"></i></span>
147
+ </div>
148
+ </div>
149
+ </div>
150
+ </div>
151
+ </div>
152
+
153
+ <script>
154
+ document.addEventListener('DOMContentLoaded', function() {
155
+ // Sample React project structure
156
+ const fileStructure = [
157
+ { name: 'package.json', type: 'file', icon: 'fas fa-file-code', language: 'json' },
158
+ { name: 'README.md', type: 'file', icon: 'fab fa-markdown', language: 'markdown' },
159
+ { name: 'public', type: 'folder', children: [
160
+ { name: 'index.html', type: 'file', icon: 'fab fa-html5', language: 'html' },
161
+ { name: 'favicon.ico', type: 'file', icon: 'far fa-image', language: 'plaintext' },
162
+ { name: 'manifest.json', type: 'file', icon: 'fas fa-file-code', language: 'json' }
163
+ ]},
164
+ {
165
+ name: 'src',
166
+ type: 'folder',
167
+ children: [
168
+ { name: 'index.js', type: 'file', icon: 'fab fa-js', language: 'javascript' },
169
+ { name: 'App.js', type: 'file', icon: 'fab fa-react', language: 'javascript' },
170
+ { name: 'App.css', type: 'file', icon: 'fab fa-css3-alt', language: 'css' },
171
+ {
172
+ name: 'components',
173
+ type: 'folder',
174
+ children: [
175
+ { name: 'Header.jsx', type: 'file', icon: 'fab fa-react', language: 'javascript' },
176
+ { name: 'Footer.jsx', type: 'file', icon: 'fab fa-react', language: 'javascript' },
177
+ { name: 'MainContent.jsx', type: 'file', icon: 'fab fa-react', language: 'javascript' }
178
+ ]
179
+ },
180
+ {
181
+ name: 'pages',
182
+ type: 'folder',
183
+ children: [
184
+ { name: 'Home.jsx', type: 'file', icon: 'fab fa-react', language: 'javascript' },
185
+ { name: 'About.jsx', type: 'file', icon: 'fab fa-react', language: 'javascript' }
186
+ ]
187
+ },
188
+ { name: 'assets', type: 'folder', children: [
189
+ { name: 'images', type: 'folder', children: [
190
+ { name: 'logo.svg', type: 'file', icon: 'far fa-image', language: 'plaintext' }
191
+ ]},
192
+ { name: 'styles', type: 'folder', children: [
193
+ { name: 'global.css', type: 'file', icon: 'fab fa-css3-alt', language: 'css' },
194
+ { name: 'theme.css', type: 'file', icon: 'fab fa-css3-alt', language: 'css' }
195
+ ]}
196
+ ]}
197
+ ]
198
+ },
199
+ { name: 'node_modules', type: 'folder', icon: 'fas fa-folder', children: [] }
200
+ ];
201
+
202
+ // Sample file content
203
+ const fileContents = {
204
+ 'index.html': `<!DOCTYPE html>
205
+ <html lang="en">
206
+ <head>
207
+ <meta charset="UTF-8">
208
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
209
+ <title>VS Code Clone</title>
210
+ <link rel="stylesheet" href="styles.css">
211
+ </head>
212
+ <body>
213
+ <div class="app">
214
+ <h1>VS Code Clone</h1>
215
+ <p>This is a VS Code clone built with Monaco editor</p>
216
+ </div>
217
+ <script src="app.js"></script>
218
+ <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=onigetoc/vs-code-editor-clone" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
219
+ </html>