Hugging Face's logo

Spaces:
nahidsalimov
/
codefast-clone-express
Running

App Files Community
nahidsalimov commited on
Commit
3ae0691
·
verified ·
1 Parent(s): 0262881

https://docs.codefast.app/ kopyala bu saytı

Browse files
Files changed (2) hide show
  1. README.md +7 -4
  2. index.html +246 -17
README.md CHANGED
@@ -1,10 +1,13 @@
1
  ---
2
- title: Codefast Clone Express
3
- emoji: 🏆
4
  colorFrom: blue
5
- colorTo: indigo
 
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: CodeFast Clone Express 🚀
 
3
  colorFrom: blue
4
+ colorTo: pink
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,248 @@
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>CodeFast - Instant Code Editor</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>
11
+ tailwind.config = {
12
+ theme: {
13
+ extend: {
14
+ colors: {
15
+ primary: '#6366f1',
16
+ secondary: '#8b5cf6',
17
+ }
18
+ }
19
+ }
20
+ }
21
+ </script>
22
+ <style>
23
+ .code-editor {
24
+ min-height: 300px;
25
+ font-family: 'Courier New', monospace;
26
+ }
27
+ .preview-frame {
28
+ border: 1px solid #e2e8f0;
29
+ min-height: 300px;
30
+ }
31
+ .draggable {
32
+ cursor: col-resize;
33
+ }
34
+ </style>
35
+ </head>
36
+ <body class="bg-gray-50">
37
+ <header class="bg-white shadow-sm">
38
+ <div class="max-w-7xl mx-auto px-4 py-3 flex items-center justify-between">
39
+ <div class="flex items-center space-x-2">
40
+ <div class="w-8 h-8 rounded-full bg-primary-500"></div>
41
+ <h1 class="text-xl font-bold text-gray-800">CodeFast</h1>
42
+ </div>
43
+ <nav class="hidden md:flex space-x-6">
44
+ <a href="#" class="text-gray-600 hover:text-primary-500">Features</a>
45
+ <a href="#" class="text-gray-600 hover:text-primary-500">Pricing</a>
46
+ <a href="#" class="text-gray-600 hover:text-primary-500">Docs</a>
47
+ <a href="#" class="text-gray-600 hover:text-primary-500">Blog</a>
48
+ </nav>
49
+ <div class="flex items-center space-x-4">
50
+ <button class="hidden md:block text-gray-600 hover:text-primary-500">Sign In</button>
51
+ <button class="px-4 py-2 bg-primary-500 text-white rounded-md hover:bg-primary-600 transition">Get Started</button>
52
+ <button class="md:hidden">
53
+ <i data-feather="menu"></i>
54
+ </button>
55
+ </div>
56
+ </div>
57
+ </header>
58
+
59
+ <main>
60
+ <section class="max-w-7xl mx-auto px-4 py-16">
61
+ <div class="text-center mb-12">
62
+ <h1 class="text-4xl md:text-5xl font-bold text-gray-900 mb-4">Instant Code Editor</h1>
63
+ <p class="text-xl text-gray-600 max-w-2xl mx-auto">Write, test and share code in real-time with our lightning-fast editor.</p>
64
+ </div>
65
+
66
+ <div class="bg-white rounded-xl shadow-lg overflow-hidden">
67
+ <div class="flex flex-col md:flex-row">
68
+ <!-- Editor Panel -->
69
+ <div class="flex-1 border-r border-gray-200">
70
+ <div class="flex items-center justify-between bg-gray-50 px-4 py-2 border-b border-gray-200">
71
+ <div class="flex items-center space-x-2">
72
+ <span class="w-3 h-3 rounded-full bg-red-500"></span>
73
+ <span class="w-3 h-3 rounded-full bg-yellow-500"></span>
74
+ <span class="w-3 h-3 rounded-full bg-green-500"></span>
75
+ <span class="text-sm text-gray-500 ml-2">index.html</span>
76
+ </div>
77
+ <div class="flex items-center space-x-2">
78
+ <button class="text-gray-500 hover:text-primary-500">
79
+ <i data-feather="copy" class="w-4 h-4"></i>
80
+ </button>
81
+ <button class="text-gray-500 hover:text-primary-500">
82
+ <i data-feather="share-2" class="w-4 h-4"></i>
83
+ </button>
84
+ </div>
85
+ </div>
86
+ <div class="p-4">
87
+ <textarea class="w-full h-64 code-editor bg-gray-50 p-4 rounded-lg font-mono text-sm focus:outline-none focus:ring-2 focus:ring-primary-500" spellcheck="false">
88
+ <!DOCTYPE html>
89
  <html>
90
+ <head>
91
+ <title>My Awesome Page</title>
92
+ <style>
93
+ body {
94
+ font-family: Arial, sans-serif;
95
+ background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
96
+ display: flex;
97
+ justify-content: center;
98
+ align-items: center;
99
+ height: 100vh;
100
+ margin: 0;
101
+ }
102
+ .card {
103
+ background: white;
104
+ border-radius: 10px;
105
+ box-shadow: 0 4px 6px rgba(0,0,0,0.1);
106
+ padding: 2rem;
107
+ text-align: center;
108
+ max-width: 400px;
109
+ }
110
+ h1 {
111
+ color: #6366f1;
112
+ }
113
+ </style>
114
+ </head>
115
+ <body>
116
+ <div class="card">
117
+ <h1>Hello World!</h1>
118
+ <p>Welcome to my awesome webpage</p>
119
+ <button style="background: #6366f1; color: white; border: none; padding: 0.5rem 1rem; border-radius: 5px; margin-top: 1rem;">Click Me</button>
120
+ </div>
121
+ </body>
122
+ </html>
123
+ </textarea>
124
+ </div>
125
+ </div>
126
+
127
+ <!-- Preview Panel -->
128
+ <div class="flex-1">
129
+ <div class="bg-gray-50 px-4 py-2 border-b border-gray-200 flex justify-between items-center">
130
+ <div class="text-sm text-gray-500">Preview</div>
131
+ <div class="flex items-center space-x-2">
132
+ <button class="text-gray-500 hover:text-primary-500">
133
+ <i data-feather="refresh-cw" class="w-4 h-4"></i>
134
+ </button>
135
+ <button class="text-gray-500 hover:text-primary-500">
136
+ <i data-feather="maximize-2" class="w-4 h-4"></i>
137
+ </button>
138
+ </div>
139
+ </div>
140
+ <div class="p-4">
141
+ <iframe class="w-full h-64 preview-frame bg-white rounded-lg" srcdoc="<!DOCTYPE html><html><head><title>My Awesome Page</title><style>body{font-family: Arial,sans-serif;background: linear-gradient(135deg,#f5f7fa 0%,#c3cfe2 100%);display: flex;justify-content: center;align-items: center;height: 100vh;margin: 0}.card{background: white;border-radius: 10px;box-shadow: 0 4px 6px rgba(0,0,0,0.1);padding: 2rem;text-align: center;max-width: 400px}h1{color: #6366f1}</style></head><body><div class='card'><h1>Hello World!</h1><p>Welcome to my awesome webpage</p><button style='background: #6366f1; color: white; border: none; padding: 0.5rem 1rem; border-radius: 5px; margin-top: 1rem;'>Click Me</button></div></body></html>"></iframe>
142
+ </div>
143
+ </div>
144
+ </div>
145
+ </div>
146
+
147
+ <div class="mt-8 text-center">
148
+ <button class="px-6 py-3 bg-primary-500 text-white rounded-md hover:bg-primary-600 transition font-medium">Run Code</button>
149
+ </div>
150
+ </section>
151
+
152
+ <section class="bg-gray-100 py-16">
153
+ <div class="max-w-7xl mx-auto px-4">
154
+ <div class="text-center mb-12">
155
+ <h2 class="text-3xl font-bold text-gray-900 mb-4">Powerful Features</h2>
156
+ <p class="text-lg text-gray-600 max-w-2xl mx-auto">Everything you need to code, collaborate and share your projects</p>
157
+ </div>
158
+
159
+ <div class="grid md:grid-cols-3 gap-8">
160
+ <div class="bg-white p-6 rounded-lg shadow-sm hover:shadow-md transition">
161
+ <div class="w-12 h-12 rounded-full bg-primary-100 flex items-center justify-center mb-4">
162
+ <i data-feather="zap" class="text-primary-500"></i>
163
+ </div>
164
+ <h3 class="text-xl font-semibold mb-2">Instant Results</h3>
165
+ <p class="text-gray-600">See your changes in real-time without refreshing the page.</p>
166
+ </div>
167
+ <div class="bg-white p-6 rounded-lg shadow-sm hover:shadow-md transition">
168
+ <div class="w-12 h-12 rounded-full bg-primary-100 flex items-center justify-center mb-4">
169
+ <i data-feather="share-2" class="text-primary-500"></i>
170
+ </div>
171
+ <h3 class="text-xl font-semibold mb-2">Easy Sharing</h3>
172
+ <p class="text-gray-600">Share your projects with a single click. No setup required.</p>
173
+ </div>
174
+ <div class="bg-white p-6 rounded-lg shadow-sm hover:shadow-md transition">
175
+ <div class="w-12 h-12 rounded-full bg-primary-100 flex items-center justify-center mb-4">
176
+ <i data-feather="code" class="text-primary-500"></i>
177
+ </div>
178
+ <h3 class="text-xl font-semibold mb-2">Multi-language</h3>
179
+ <p class="text-gray-600">Supports HTML, CSS, JavaScript and more coming soon.</p>
180
+ </div>
181
+ </div>
182
+ </div>
183
+ </section>
184
+ </main>
185
+
186
+ <footer class="bg-gray-900 text-white py-12">
187
+ <div class="max-w-7xl mx-auto px-4">
188
+ <div class="grid md:grid-cols-4 gap-8">
189
+ <div>
190
+ <h3 class="text-lg font-semibold mb-4">CodeFast</h3>
191
+ <p class="text-gray-400">The fastest way to write and share code online.</p>
192
+ </div>
193
+ <div>
194
+ <h3 class="text-lg font-semibold mb-4">Product</h3>
195
+ <ul class="space-y-2">
196
+ <li><a href="#" class="text-gray-400 hover:text-white">Features</a></li>
197
+ <li><a href="#" class="text-gray-400 hover:text-white">Pricing</a></li>
198
+ <li><a href="#" class="text-gray-400 hover:text-white">Examples</a></li>
199
+ </ul>
200
+ </div>
201
+ <div>
202
+ <h3 class="text-lg font-semibold mb-4">Resources</h3>
203
+ <ul class="space-y-2">
204
+ <li><a href="#" class="text-gray-400 hover:text-white">Documentation</a></li>
205
+ <li><a href="#" class="text-gray-400 hover:text-white">Tutorials</a></li>
206
+ <li><a href="#" class="text-gray-400 hover:text-white">Blog</a></li>
207
+ </ul>
208
+ </div>
209
+ <div>
210
+ <h3 class="text-lg font-semibold mb-4">Company</h3>
211
+ <ul class="space-y-2">
212
+ <li><a href="#" class="text-gray-400 hover:text-white">About</a></li>
213
+ <li><a href="#" class="text-gray-400 hover:text-white">Careers</a></li>
214
+ <li><a href="#" class="text-gray-400 hover:text-white">Contact</a></li>
215
+ </ul>
216
+ </div>
217
+ </div>
218
+ <div class="border-t border-gray-800 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center">
219
+ <p class="text-gray-400">© 2023 CodeFast. All rights reserved.</p>
220
+ <div class="flex space-x-4 mt-4 md:mt-0">
221
+ <a href="#" class="text-gray-400 hover:text-white">
222
+ <i data-feather="twitter"></i>
223
+ </a>
224
+ <a href="#" class="text-gray-400 hover:text-white">
225
+ <i data-feather="github"></i>
226
+ </a>
227
+ <a href="#" class="text-gray-400 hover:text-white">
228
+ <i data-feather="linkedin"></i>
229
+ </a>
230
+ </div>
231
+ </div>
232
+ </div>
233
+ </footer>
234
+
235
+ <script>
236
+ feather.replace();
237
+
238
+ // Simple demo of updating preview when typing
239
+ const editor = document.querySelector('.code-editor');
240
+ const preview = document.querySelector('.preview-frame');
241
+
242
+ editor.addEventListener('input', function() {
243
+ // In a real app, you would sanitize this content
244
+ preview.srcdoc = editor.value;
245
+ });
246
+ </script>
247
+ </body>
248
  </html>