plecca commited on
Commit
8cce585
·
verified ·
1 Parent(s): d1ac8ac

create a website for making professional sites

Browse files
Files changed (3) hide show
  1. builder.html +428 -0
  2. index.html +4 -0
  3. python.html +10 -4
builder.html ADDED
@@ -0,0 +1,428 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>SiteBuilder Pro - Create Professional Websites</title>
7
+ <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <script src="https://unpkg.com/feather-icons"></script>
10
+ <link href="https://cdn.jsdelivr.net/npm/dragula@3.7.3/dist/dragula.min.css" rel="stylesheet">
11
+ <style>
12
+ .builder-container {
13
+ display: grid;
14
+ grid-template-columns: 250px 1fr 250px;
15
+ height: 100vh;
16
+ }
17
+ .component {
18
+ cursor: move;
19
+ padding: 10px;
20
+ margin: 5px 0;
21
+ background: white;
22
+ border: 1px dashed #ccc;
23
+ border-radius: 4px;
24
+ }
25
+ .component:hover {
26
+ background: #f0f7ff;
27
+ border-color: #3b82f6;
28
+ }
29
+ .canvas {
30
+ background: #f8fafc;
31
+ min-height: 100%;
32
+ padding: 20px;
33
+ }
34
+ .preview-item {
35
+ margin-bottom: 15px;
36
+ position: relative;
37
+ }
38
+ .preview-item:hover {
39
+ outline: 2px dashed #3b82f6;
40
+ }
41
+ .remove-btn {
42
+ position: absolute;
43
+ right: 5px;
44
+ top: 5px;
45
+ background: white;
46
+ border-radius: 50%;
47
+ width: 20px;
48
+ height: 20px;
49
+ display: flex;
50
+ align-items: center;
51
+ justify-content: center;
52
+ cursor: pointer;
53
+ box-shadow: 0 1px 3px rgba(0,0,0,0.1);
54
+ z-index: 10;
55
+ }
56
+ </style>
57
+ </head>
58
+ <body class="bg-gray-100">
59
+ <header class="bg-white shadow-sm">
60
+ <div class="container mx-auto px-4 py-4 flex justify-between items-center">
61
+ <div class="flex items-center space-x-3">
62
+ <div class="w-10 h-10 rounded-lg bg-blue-500 flex items-center justify-center text-white">
63
+ <i data-feather="globe" class="w-5 h-5"></i>
64
+ </div>
65
+ <h1 class="text-xl font-bold text-gray-800">SiteBuilder Pro</h1>
66
+ </div>
67
+ <div class="flex items-center space-x-4">
68
+ <button id="preview-btn" class="px-4 py-2 bg-gray-200 text-gray-700 rounded-md hover:bg-gray-300">
69
+ <i data-feather="eye" class="w-4 h-4 mr-2"></i> Preview
70
+ </button>
71
+ <button id="export-btn" class="px-4 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600">
72
+ <i data-feather="download" class="w-4 h-4 mr-2"></i> Export
73
+ </button>
74
+ <button id="save-btn" class="px-4 py-2 bg-green-500 text-white rounded-md hover:bg-green-600">
75
+ <i data-feather="save" class="w-4 h-4 mr-2"></i> Save
76
+ </button>
77
+ </div>
78
+ </div>
79
+ </header>
80
+
81
+ <div class="builder-container">
82
+ <!-- Components Panel -->
83
+ <div class="bg-white p-4 border-r overflow-y-auto">
84
+ <h3 class="font-medium text-gray-700 mb-3">Components</h3>
85
+ <div class="space-y-2">
86
+ <div class="component" draggable="true" data-type="header">
87
+ <div class="flex items-center">
88
+ <i data-feather="header" class="w-4 h-4 mr-2 text-blue-500"></i>
89
+ Header
90
+ </div>
91
+ </div>
92
+ <div class="component" draggable="true" data-type="hero">
93
+ <div class="flex items-center">
94
+ <i data-feather="image" class="w-4 h-4 mr-2 text-purple-500"></i>
95
+ Hero Section
96
+ </div>
97
+ </div>
98
+ <div class="component" draggable="true" data-type="features">
99
+ <div class="flex items-center">
100
+ <i data-feather="grid" class="w-4 h-4 mr-2 text-green-500"></i>
101
+ Features Grid
102
+ </div>
103
+ </div>
104
+ <div class="component" draggable="true" data-type="testimonials">
105
+ <div class="flex items-center">
106
+ <i data-feather="users" class="w-4 h-4 mr-2 text-yellow-500"></i>
107
+ Testimonials
108
+ </div>
109
+ </div>
110
+ <div class="component" draggable="true" data-type="contact">
111
+ <div class="flex items-center">
112
+ <i data-feather="mail" class="w-4 h-4 mr-2 text-red-500"></i>
113
+ Contact Form
114
+ </div>
115
+ </div>
116
+ <div class="component" draggable="true" data-type="footer">
117
+ <div class="flex items-center">
118
+ <i data-feather="footer" class="w-4 h-4 mr-2 text-gray-500"></i>
119
+ Footer
120
+ </div>
121
+ </div>
122
+ </div>
123
+ </div>
124
+
125
+ <!-- Canvas -->
126
+ <div id="canvas" class="canvas">
127
+ <div id="preview-area"></div>
128
+ </div>
129
+
130
+ <!-- Properties Panel -->
131
+ <div class="bg-white p-4 border-l overflow-y-auto">
132
+ <h3 class="font-medium text-gray-700 mb-3">Properties</h3>
133
+ <div id="properties-panel">
134
+ <p class="text-gray-500 text-sm">Select a component to edit its properties</p>
135
+ </div>
136
+ </div>
137
+ </div>
138
+
139
+ <!-- Preview Modal -->
140
+ <div id="preview-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
141
+ <div class="bg-white rounded-lg w-full max-w-6xl h-5/6 overflow-hidden">
142
+ <div class="flex justify-between items-center p-4 border-b">
143
+ <h3 class="text-lg font-medium">Preview</h3>
144
+ <button id="close-preview" class="text-gray-500 hover:text-gray-700">
145
+ <i data-feather="x" class="w-5 h-5"></i>
146
+ </button>
147
+ </div>
148
+ <div class="h-full overflow-auto p-4">
149
+ <iframe id="preview-iframe" class="w-full h-full border-none"></iframe>
150
+ </div>
151
+ </div>
152
+ </div>
153
+
154
+ <script src="https://cdn.jsdelivr.net/npm/dragula@3.7.3/dist/dragula.min.js"></script>
155
+ <script>
156
+ feather.replace();
157
+
158
+ // Initialize drag and drop
159
+ dragula([document.getElementById('canvas')], {
160
+ accepts: function(el, target) {
161
+ return target.id === 'canvas';
162
+ }
163
+ });
164
+
165
+ // Component templates
166
+ const componentTemplates = {
167
+ header: `
168
+ <header class="bg-white shadow-sm py-4 px-6">
169
+ <div class="container mx-auto flex justify-between items-center">
170
+ <div class="flex items-center space-x-3">
171
+ <div class="w-10 h-10 rounded-lg bg-blue-500 flex items-center justify-center text-white">
172
+ <i data-feather="globe" class="w-5 h-5"></i>
173
+ </div>
174
+ <h2 class="text-xl font-bold">Your Logo</h2>
175
+ </div>
176
+ <nav class="hidden md:flex space-x-6">
177
+ <a href="#" class="text-gray-600 hover:text-blue-500">Home</a>
178
+ <a href="#" class="text-gray-600 hover:text-blue-500">About</a>
179
+ <a href="#" class="text-gray-600 hover:text-blue-500">Services</a>
180
+ <a href="#" class="text-gray-600 hover:text-blue-500">Contact</a>
181
+ </nav>
182
+ <button class="md:hidden">
183
+ <i data-feather="menu" class="w-6 h-6"></i>
184
+ </button>
185
+ </div>
186
+ </header>
187
+ `,
188
+ hero: `
189
+ <section class="bg-blue-50 py-16 px-4">
190
+ <div class="container mx-auto text-center max-w-3xl">
191
+ <h1 class="text-4xl font-bold text-gray-800 mb-4">Build Beautiful Websites</h1>
192
+ <p class="text-xl text-gray-600 mb-8">Create professional sites with our drag and drop builder</p>
193
+ <div class="flex justify-center space-x-4">
194
+ <button class="px-6 py-3 bg-blue-500 text-white rounded-lg hover:bg-blue-600">Get Started</button>
195
+ <button class="px-6 py-3 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50">Learn More</button>
196
+ </div>
197
+ </div>
198
+ </section>
199
+ `,
200
+ features: `
201
+ <section class="py-16 px-4 bg-white">
202
+ <div class="container mx-auto">
203
+ <h2 class="text-3xl font-bold text-center text-gray-800 mb-12">Features</h2>
204
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
205
+ <div class="bg-gray-50 p-6 rounded-lg">
206
+ <div class="w-12 h-12 rounded-lg bg-blue-500 flex items-center justify-center text-white mb-4">
207
+ <i data-feather="code" class="w-6 h-6"></i>
208
+ </div>
209
+ <h3 class="text-xl font-semibold mb-2">Drag & Drop</h3>
210
+ <p class="text-gray-600">Easily build your site with our intuitive interface</p>
211
+ </div>
212
+ <div class="bg-gray-50 p-6 rounded-lg">
213
+ <div class="w-12 h-12 rounded-lg bg-purple-500 flex items-center justify-center text-white mb-4">
214
+ <i data-feather="smartphone" class="w-6 h-6"></i>
215
+ </div>
216
+ <h3 class="text-xl font-semibold mb-2">Responsive</h3>
217
+ <p class="text-gray-600">Your site will look great on all devices</p>
218
+ </div>
219
+ <div class="bg-gray-50 p-6 rounded-lg">
220
+ <div class="w-12 h-12 rounded-lg bg-green-500 flex items-center justify-center text-white mb-4">
221
+ <i data-feather="zap" class="w-6 h-6"></i>
222
+ </div>
223
+ <h3 class="text-xl font-semibold mb-2">Fast Loading</h3>
224
+ <p class="text-gray-600">Optimized for performance and speed</p>
225
+ </div>
226
+ </div>
227
+ </div>
228
+ </section>
229
+ `,
230
+ testimonials: `
231
+ <section class="py-16 px-4 bg-gray-50">
232
+ <div class="container mx-auto max-w-4xl">
233
+ <h2 class="text-3xl font-bold text-center text-gray-800 mb-12">What Our Customers Say</h2>
234
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
235
+ <div class="bg-white p-6 rounded-lg shadow-sm">
236
+ <div class="flex items-center mb-4">
237
+ <div class="w-12 h-12 rounded-full bg-blue-100 flex items-center justify-center text-blue-500 mr-4">
238
+ <i data-feather="user" class="w-5 h-5"></i>
239
+ </div>
240
+ <div>
241
+ <h4 class="font-medium">John Smith</h4>
242
+ <p class="text-sm text-gray-500">CEO, Company Inc.</p>
243
+ </div>
244
+ </div>
245
+ <p class="text-gray-600">"This builder saved me so much time and money. Highly recommended!"</p>
246
+ </div>
247
+ <div class="bg-white p-6 rounded-lg shadow-sm">
248
+ <div class="flex items-center mb-4">
249
+ <div class="w-12 h-12 rounded-full bg-purple-100 flex items-center justify-center text-purple-500 mr-4">
250
+ <i data-feather="user" class="w-5 h-5"></i>
251
+ </div>
252
+ <div>
253
+ <h4 class="font-medium">Sarah Johnson</h4>
254
+ <p class="text-sm text-gray-500">Marketing Director</p>
255
+ </div>
256
+ </div>
257
+ <p class="text-gray-600">"Incredibly easy to use and the results are professional-grade."</p>
258
+ </div>
259
+ </div>
260
+ </div>
261
+ </section>
262
+ `,
263
+ contact: `
264
+ <section class="py-16 px-4 bg-white">
265
+ <div class="container mx-auto max-w-2xl">
266
+ <h2 class="text-3xl font-bold text-center text-gray-800 mb-8">Contact Us</h2>
267
+ <form class="space-y-6">
268
+ <div>
269
+ <label class="block text-sm font-medium text-gray-700 mb-1">Name</label>
270
+ <input type="text" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-blue-500 focus:border-blue-500">
271
+ </div>
272
+ <div>
273
+ <label class="block text-sm font-medium text-gray-700 mb-1">Email</label>
274
+ <input type="email" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-blue-500 focus:border-blue-500">
275
+ </div>
276
+ <div>
277
+ <label class="block text-sm font-medium text-gray-700 mb-1">Message</label>
278
+ <textarea rows="4" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-blue-500 focus:border-blue-500"></textarea>
279
+ </div>
280
+ <button type="submit" class="w-full py-3 bg-blue-500 text-white rounded-md hover:bg-blue-600">Send Message</button>
281
+ </form>
282
+ </div>
283
+ </section>
284
+ `,
285
+ footer: `
286
+ <footer class="bg-gray-800 text-white py-12 px-4">
287
+ <div class="container mx-auto">
288
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
289
+ <div>
290
+ <h3 class="text-xl font-bold mb-4">SiteBuilder Pro</h3>
291
+ <p class="text-gray-400">Creating beautiful websites for everyone.</p>
292
+ </div>
293
+ <div>
294
+ <h4 class="font-medium mb-4">Quick Links</h4>
295
+ <ul class="space-y-2">
296
+ <li><a href="#" class="text-gray-400 hover:text-white">Home</a></li>
297
+ <li><a href="#" class="text-gray-400 hover:text-white">About</a></li>
298
+ <li><a href="#" class="text-gray-400 hover:text-white">Features</a></li>
299
+ <li><a href="#" class="text-gray-400 hover:text-white">Pricing</a></li>
300
+ </ul>
301
+ </div>
302
+ <div>
303
+ <h4 class="font-medium mb-4">Resources</h4>
304
+ <ul class="space-y-2">
305
+ <li><a href="#" class="text-gray-400 hover:text-white">Blog</a></li>
306
+ <li><a href="#" class="text-gray-400 hover:text-white">Documentation</a></li>
307
+ <li><a href="#" class="text-gray-400 hover:text-white">Support</a></li>
308
+ </ul>
309
+ </div>
310
+ <div>
311
+ <h4 class="font-medium mb-4">Connect</h4>
312
+ <div class="flex space-x-4">
313
+ <a href="#" class="text-gray-400 hover:text-white"><i data-feather="facebook" class="w-5 h-5"></i></a>
314
+ <a href="#" class="text-gray-400 hover:text-white"><i data-feather="twitter" class="w-5 h-5"></i></a>
315
+ <a href="#" class="text-gray-400 hover:text-white"><i data-feather="instagram" class="w-5 h-5"></i></a>
316
+ <a href="#" class="text-gray-400 hover:text-white"><i data-feather="linkedin" class="w-5 h-5"></i></a>
317
+ </div>
318
+ </div>
319
+ </div>
320
+ <div class="border-t border-gray-700 mt-8 pt-8 text-center text-gray-400">
321
+ <p>&copy; 2023 SiteBuilder Pro. All rights reserved.</p>
322
+ </div>
323
+ </div>
324
+ </footer>
325
+ `
326
+ };
327
+
328
+ // Add components to canvas
329
+ document.querySelectorAll('.component').forEach(component => {
330
+ component.addEventListener('dragstart', function(e) {
331
+ e.dataTransfer.setData('text/plain', this.getAttribute('data-type'));
332
+ });
333
+ });
334
+
335
+ const canvas = document.getElementById('canvas');
336
+ const previewArea = document.getElementById('preview-area');
337
+
338
+ canvas.addEventListener('dragover', function(e) {
339
+ e.preventDefault();
340
+ });
341
+
342
+ canvas.addEventListener('drop', function(e) {
343
+ e.preventDefault();
344
+ const componentType = e.dataTransfer.getData('text/plain');
345
+ if (componentType) {
346
+ const newComponent = document.createElement('div');
347
+ newComponent.className = 'preview-item';
348
+ newComponent.innerHTML = `
349
+ <div class="remove-btn">
350
+ <i data-feather="x" class="w-3 h-3"></i>
351
+ </div>
352
+ ${componentTemplates[componentType]}
353
+ `;
354
+ previewArea.appendChild(newComponent);
355
+ feather.replace();
356
+
357
+ // Add click event to remove button
358
+ newComponent.querySelector('.remove-btn').addEventListener('click', function() {
359
+ newComponent.remove();
360
+ });
361
+ }
362
+ });
363
+
364
+ // Preview functionality
365
+ const previewBtn = document.getElementById('preview-btn');
366
+ const previewModal = document.getElementById('preview-modal');
367
+ const closePreview = document.getElementById('close-preview');
368
+ const previewIframe = document.getElementById('preview-iframe');
369
+
370
+ previewBtn.addEventListener('click', function() {
371
+ previewIframe.srcdoc = `
372
+ <!DOCTYPE html>
373
+ <html>
374
+ <head>
375
+ <script src="https://cdn.tailwindcss.com"></script>
376
+ <script src="https://unpkg.com/feather-icons"></script>
377
+ <title>Preview</title>
378
+ </head>
379
+ <body>
380
+ ${previewArea.innerHTML}
381
+ <script>feather.replace();</script>
382
+ </body>
383
+ </html>
384
+ `;
385
+ previewModal.classList.remove('hidden');
386
+ });
387
+
388
+ closePreview.addEventListener('click', function() {
389
+ previewModal.classList.add('hidden');
390
+ });
391
+
392
+ // Export functionality
393
+ document.getElementById('export-btn').addEventListener('click', function() {
394
+ const htmlContent = `
395
+ <!DOCTYPE html>
396
+ <html>
397
+ <head>
398
+ <meta charset="UTF-8">
399
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
400
+ <title>Your Website</title>
401
+ <script src="https://cdn.tailwindcss.com"></script>
402
+ <script src="https://unpkg.com/feather-icons"></script>
403
+ </head>
404
+ <body>
405
+ ${previewArea.innerHTML}
406
+ <script>feather.replace();</script>
407
+ </body>
408
+ </html>
409
+ `;
410
+
411
+ const blob = new Blob([htmlContent], {type: 'text/html'});
412
+ const url = URL.createObjectURL(blob);
413
+ const a = document.createElement('a');
414
+ a.href = url;
415
+ a.download = 'website.html';
416
+ document.body.appendChild(a);
417
+ a.click();
418
+ document.body.removeChild(a);
419
+ URL.revokeObjectURL(url);
420
+ });
421
+
422
+ // Save functionality
423
+ document.getElementById('save-btn').addEventListener('click', function() {
424
+ alert('Website saved successfully! (In a real app, this would save to your account)');
425
+ });
426
+ </script>
427
+ </body>
428
+ </html>
index.html CHANGED
@@ -55,6 +55,10 @@
55
  <h1 class="text-2xl font-bold text-gray-800">BotBuddy</h1>
56
  </div>
57
  <div class="flex items-center space-x-4">
 
 
 
 
58
  <button class="p-2 rounded-full hover:bg-gray-100">
59
  <i data-feather="settings" class="text-gray-600"></i>
60
  </button>
 
55
  <h1 class="text-2xl font-bold text-gray-800">BotBuddy</h1>
56
  </div>
57
  <div class="flex items-center space-x-4">
58
+ <a href="builder.html" class="px-4 py-2 bg-primary-500 text-white rounded-md hover:bg-primary-600 flex items-center">
59
+ <i data-feather="layout" class="w-4 h-4 mr-2"></i>
60
+ Site Builder
61
+ </a>
62
  <button class="p-2 rounded-full hover:bg-gray-100">
63
  <i data-feather="settings" class="text-gray-600"></i>
64
  </button>
python.html CHANGED
@@ -24,11 +24,17 @@
24
  <body class="bg-gray-50 min-h-screen">
25
  <div class="container mx-auto px-4 py-8">
26
  <header class="mb-12">
27
- <div class="flex items-center space-x-4">
28
- <div class="w-12 h-12 rounded-full bg-yellow-400 flex items-center justify-center text-white">
29
- <i data-feather="code" class="w-6 h-6"></i>
 
 
 
30
  </div>
31
- <h1 class="text-3xl font-bold text-gray-800">Python Playground</h1>
 
 
 
32
  </div>
33
  <p class="mt-2 text-gray-600">Explore and run Python code directly in your browser</p>
34
  </header>
 
24
  <body class="bg-gray-50 min-h-screen">
25
  <div class="container mx-auto px-4 py-8">
26
  <header class="mb-12">
27
+ <div class="flex items-center justify-between">
28
+ <div class="flex items-center space-x-4">
29
+ <div class="w-12 h-12 rounded-full bg-yellow-400 flex items-center justify-center text-white">
30
+ <i data-feather="code" class="w-6 h-6"></i>
31
+ </div>
32
+ <h1 class="text-3xl font-bold text-gray-800">Python Playground</h1>
33
  </div>
34
+ <a href="builder.html" class="px-4 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600 flex items-center">
35
+ <i data-feather="layout" class="w-4 h-4 mr-2"></i>
36
+ Site Builder
37
+ </a>
38
  </div>
39
  <p class="mt-2 text-gray-600">Explore and run Python code directly in your browser</p>
40
  </header>