Hugging Face's logo

Spaces:
chaim
/
anycoder-badad448
Running

App Files Community
chaim commited on
Commit
8103e67
·
verified ·
1 Parent(s): 8cc4ba2

Upload folder using huggingface_hub

Browse files
Files changed (1) hide show
  1. index.html +377 -19
index.html CHANGED
@@ -1,19 +1,377 @@
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>Monday.com Clone</title>
7
+ <script src="https://cdn.jsdelivr.net/npm/react@18.0.0/umd/react.development.js"></script>
8
+ <script src="https://cdn.jsdelivr.net/npm/react-dom@18.0.0/umd/react-dom.development.js"></script>
9
+ <script src="https://cdn.jsdelivr.net/npm/@babel/standalone/babel.js"></script>
10
+ <script src="https://cdn.tailwindcss.com"></script>
11
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
12
+ <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
13
+ <style>
14
+ body {
15
+ font-family: 'Inter', sans-serif;
16
+ }
17
+ .board-column {
18
+ min-width: 280px;
19
+ }
20
+ .task-card {
21
+ transition: all 0.2s ease;
22
+ }
23
+ .task-card:hover {
24
+ transform: translateY(-2px);
25
+ box-shadow: 0 4px 12px rgba(0,0,0,0.1);
26
+ }
27
+ .dragging {
28
+ opacity: 0.5;
29
+ }
30
+ .drag-over {
31
+ background-color: rgba(99, 102, 241, 0.1);
32
+ }
33
+ .status-pending { background-color: #fef3c7; }
34
+ .status-in-progress { background-color: #dbeafe; }
35
+ .status-completed { background-color: #d1fae5; }
36
+ .status-blocked { background-color: #fecaca; }
37
+ </style>
38
+ </head>
39
+ <body>
40
+ <div id="root"></div>
41
+
42
+ <script type="text/babel">
43
+ const { useState, useEffect } = React;
44
+
45
+ const App = () => {
46
+ const [boards, setBoards] = useState([
47
+ { id: 1, name: 'Marketing Campaign', active: true },
48
+ { id: 2, name: 'Product Development', active: false },
49
+ { id: 3, name: 'Customer Support', active: false },
50
+ { id: 4, name: 'Sales Pipeline', active: false }
51
+ ]);
52
+
53
+ const [columns, setColumns] = useState([
54
+ { id: 1, title: 'To Do', tasks: [
55
+ { id: 1, title: 'Create social media content', assignee: 'Sarah', status: 'pending', priority: 'high' },
56
+ { id: 2, title: 'Design new landing page', assignee: 'Mike', status: 'pending', priority: 'medium' }
57
+ ]},
58
+ { id: 2, title: 'In Progress', tasks: [
59
+ { id: 3, title: 'Review analytics dashboard', assignee: 'John', status: 'in-progress', priority: 'high' },
60
+ { id: 4, title: 'Update SEO keywords', assignee: 'Emma', status: 'in-progress', priority: 'medium' }
61
+ ]},
62
+ { id: 3, title: 'Review', tasks: [
63
+ { id: 5, title: 'QA testing for v2.0', assignee: 'David', status: 'pending', priority: 'high' }
64
+ ]},
65
+ { id: 4, title: 'Done', tasks: [
66
+ { id: 6, title: 'Fix login bug', assignee: 'Lisa', status: 'completed', priority: 'low' }
67
+ ]}
68
+ ]);
69
+
70
+ const [showAddTaskModal, setShowAddTaskModal] = useState(false);
71
+ const [newTask, setNewTask] = useState({ title: '', assignee: '', status: 'pending', priority: 'medium' });
72
+ const [draggedTask, setDraggedTask] = useState(null);
73
+ const [draggedFromColumn, setDraggedFromColumn] = useState(null);
74
+
75
+ const handleAddTask = () => {
76
+ if (newTask.title.trim()) {
77
+ const task = {
78
+ id: Date.now(),
79
+ title: newTask.title,
80
+ assignee: newTask.assignee,
81
+ status: newTask.status,
82
+ priority: newTask.priority
83
+ };
84
+
85
+ setColumns(prev => prev.map(col => {
86
+ if (col.id === parseInt(newTask.status)) {
87
+ return { ...col, tasks: [...col.tasks, task] };
88
+ }
89
+ return col;
90
+ }));
91
+
92
+ setNewTask({ title: '', assignee: '', status: 'pending', priority: 'medium' });
93
+ setShowAddTaskModal(false);
94
+ }
95
+ };
96
+
97
+ const handleDragStart = (taskId, columnId) => {
98
+ setDraggedTask(taskId);
99
+ setDraggedFromColumn(columnId);
100
+ };
101
+
102
+ const handleDragOver = (e) => {
103
+ e.preventDefault();
104
+ };
105
+
106
+ const handleDrop = (columnId) => {
107
+ if (draggedTask && draggedFromColumn !== columnId) {
108
+ const task = columns.find(col => col.id === draggedFromColumn)
109
+ .tasks.find(t => t.id === draggedTask);
110
+
111
+ setColumns(prev => prev.map(col => {
112
+ if (col.id === draggedFromColumn) {
113
+ return { ...col, tasks: col.tasks.filter(t => t.id !== draggedTask) };
114
+ }
115
+ if (col.id === columnId) {
116
+ return { ...col, tasks: [...col.tasks, { ...task, status: col.id.toString() }] };
117
+ }
118
+ return col;
119
+ }));
120
+ }
121
+ setDraggedTask(null);
122
+ setDraggedFromColumn(null);
123
+ };
124
+
125
+ const getStatusColor = (status) => {
126
+ switch(status) {
127
+ case 'pending': return 'status-pending';
128
+ case 'in-progress': return 'status-in-progress';
129
+ case 'completed': return 'status-completed';
130
+ case 'blocked': return 'status-blocked';
131
+ default: return 'status-pending';
132
+ }
133
+ };
134
+
135
+ const getPriorityColor = (priority) => {
136
+ switch(priority) {
137
+ case 'high': return 'text-red-600';
138
+ case 'medium': return 'text-yellow-600';
139
+ case 'low': return 'text-green-600';
140
+ default: return 'text-gray-600';
141
+ }
142
+ };
143
+
144
+ return (
145
+ <div className="h-screen flex flex-col bg-gray-50">
146
+ {/* Header */}
147
+ <header className="bg-white border-b border-gray-200 px-6 py-3 flex items-center justify-between">
148
+ <div className="flex items-center space-x-4">
149
+ <div className="flex items-center space-x-2">
150
+ <div className="w-8 h-8 bg-indigo-600 rounded flex items-center justify-center">
151
+ <i className="fas fa-th text-white text-sm"></i>
152
+ </div>
153
+ <span className="text-xl font-bold text-gray-900">Monday</span>
154
+ </div>
155
+ <a href="https://huggingface.co/spaces/akhaliq/anycoder" className="text-sm text-indigo-600 hover:text-indigo-800">Built with anycoder</a>
156
+ </div>
157
+ <div className="flex items-center space-x-4">
158
+ <button className="p-2 text-gray-500 hover:text-gray-700">
159
+ <i className="fas fa-search"></i>
160
+ </button>
161
+ <button className="p-2 text-gray-500 hover:text-gray-700">
162
+ <i className="fas fa-bell"></i>
163
+ </button>
164
+ <div className="w-8 h-8 bg-indigo-600 rounded-full flex items-center justify-center">
165
+ <span className="text-white text-sm font-medium">JD</span>
166
+ </div>
167
+ </div>
168
+ </header>
169
+
170
+ <div className="flex flex-1 overflow-hidden">
171
+ {/* Sidebar */}
172
+ <aside className="w-64 bg-white border-r border-gray-200 p-4">
173
+ <div className="mb-6">
174
+ <h2 className="text-xs font-semibold text-gray-500 uppercase tracking-wider mb-3">WORKSPACES</h2>
175
+ <div className="space-y-1">
176
+ <div className="flex items-center space-x-3 p-2 rounded-lg bg-indigo-50 text-indigo-700">
177
+ <i className="fas fa-building text-sm"></i>
178
+ <span className="text-sm font-medium">Marketing Team</span>
179
+ </div>
180
+ <div className="flex items-center space-x-3 p-2 rounded-lg text-gray-600 hover:bg-gray-50">
181
+ <i className="fas fa-building text-sm"></i>
182
+ <span className="text-sm">Development</span>
183
+ </div>
184
+ </div>
185
+ </div>
186
+
187
+ <div>
188
+ <div className="flex items-center justify-between mb-3">
189
+ <h2 className="text-xs font-semibold text-gray-500 uppercase tracking-wider">BOARDS</h2>
190
+ <button className="text-gray-400 hover:text-gray-600">
191
+ <i className="fas fa-plus text-xs"></i>
192
+ </button>
193
+ </div>
194
+ <div className="space-y-1">
195
+ {boards.map(board => (
196
+ <div
197
+ key={board.id}
198
+ className={`flex items-center space-x-3 p-2 rounded-lg cursor-pointer ${
199
+ board.active ? 'bg-indigo-50 text-indigo-700' : 'text-gray-600 hover:bg-gray-50'
200
+ }`}
201
+ onClick={() => setBoards(boards.map(b => ({...b, active: b.id === board.id})))}
202
+ >
203
+ <i className="fas fa-th-large text-sm"></i>
204
+ <span className="text-sm">{board.name}</span>
205
+ </div>
206
+ ))}
207
+ </div>
208
+ </div>
209
+ </aside>
210
+
211
+ {/* Main Content */}
212
+ <main className="flex-1 overflow-auto p-6">
213
+ <div className="mb-6">
214
+ <div className="flex items-center justify-between mb-4">
215
+ <h1 className="text-2xl font-bold text-gray-900">Marketing Campaign</h1>
216
+ <div className="flex items-center space-x-2">
217
+ <button className="px-3 py-1.5 text-sm text-gray-600 hover:text-gray-800 flex items-center space-x-1">
218
+ <i className="fas fa-plus text-xs"></i>
219
+ <span>Add Column</span>
220
+ </button>
221
+ <button
222
+ onClick={() => setShowAddTaskModal(true)}
223
+ className="px-4 py-2 bg-indigo-600 text-white text-sm rounded-lg hover:bg-indigo-700 flex items-center space-x-2"
224
+ >
225
+ <i className="fas fa-plus text-xs"></i>
226
+ <span>Add Task</span>
227
+ </button>
228
+ </div>
229
+ </div>
230
+
231
+ <div className="flex items-center space-x-4 text-sm text-gray-500">
232
+ <span>Today</span>
233
+ <span>•</span>
234
+ <span>4 tasks</span>
235
+ <span>•</span>
236
+ <span>2 team members</span>
237
+ </div>
238
+ </div>
239
+
240
+ {/* Board */}
241
+ <div className="flex space-x-4 overflow-x-auto pb-4">
242
+ {columns.map(column => (
243
+ <div
244
+ key={column.id}
245
+ className="board-column flex-shrink-0"
246
+ onDragOver={handleDragOver}
247
+ onDrop={() => handleDrop(column.id)}
248
+ >
249
+ <div className="mb-3">
250
+ <div className="flex items-center justify-between mb-2">
251
+ <h3 className="font-semibold text-gray-900">{column.title}</h3>
252
+ <span className="text-xs text-gray-500 bg-gray-100 px-2 py-1 rounded-full">
253
+ {column.tasks.length}
254
+ </span>
255
+ </div>
256
+ <div className="space-y-2">
257
+ {column.tasks.map(task => (
258
+ <div
259
+ key={task.id}
260
+ draggable
261
+ onDragStart={() => handleDragStart(task.id, column.id)}
262
+ className={`task-card p-3 bg-white rounded-lg border border-gray-200 cursor-move ${getStatusColor(task.status)}`}
263
+ >
264
+ <div className="flex items-start justify-between mb-2">
265
+ <h4 className="font-medium text-sm text-gray-900 flex-1">{task.title}</h4>
266
+ <button className="text-gray-400 hover:text-gray-600 ml-2">
267
+ <i className="fas fa-ellipsis-h text-xs"></i>
268
+ </button>
269
+ </div>
270
+ <div className="flex items-center justify-between">
271
+ <div className="flex items-center space-x-2">
272
+ <div className="w-6 h-6 bg-gray-300 rounded-full flex items-center justify-center">
273
+ <span className="text-xs text-gray-600">{task.assignee[0]}</span>
274
+ </div>
275
+ <span className="text-xs text-gray-600">{task.assignee}</span>
276
+ </div>
277
+ <span className={`text-xs font-medium ${getPriorityColor(task.priority)}`}>
278
+ {task.priority}
279
+ </span>
280
+ </div>
281
+ </div>
282
+ ))}
283
+ </div>
284
+ <button
285
+ onClick={() => {
286
+ setNewTask({...newTask, status: column.id.toString()});
287
+ setShowAddTaskModal(true);
288
+ }}
289
+ className="w-full mt-2 p-2 border-2 border-dashed border-gray-300 rounded-lg text-gray-500 hover:border-gray-400 hover:text-gray-600 text-sm flex items-center justify-center space-x-1"
290
+ >
291
+ <i className="fas fa-plus text-xs"></i>
292
+ <span>Add Task</span>
293
+ </button>
294
+ </div>
295
+ </div>
296
+ ))}
297
+ </div>
298
+ </main>
299
+ </div>
300
+
301
+ {/* Add Task Modal */}
302
+ {showAddTaskModal && (
303
+ <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 z-50">
304
+ <div className="bg-white rounded-lg p-6 w-full max-w-md">
305
+ <h2 className="text-lg font-semibold mb-4">Add New Task</h2>
306
+ <div className="space-y-4">
307
+ <div>
308
+ <label className="block text-sm font-medium text-gray-700 mb-1">Task Name</label>
309
+ <input
310
+ type="text"
311
+ value={newTask.title}
312
+ onChange={(e) => setNewTask({...newTask, title: e.target.value})}
313
+ className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500"
314
+ placeholder="Enter task name"
315
+ />
316
+ </div>
317
+ <div>
318
+ <label className="block text-sm font-medium text-gray-700 mb-1">Assignee</label>
319
+ <input
320
+ type="text"
321
+ value={newTask.assignee}
322
+ onChange={(e) => setNewTask({...newTask, assignee: e.target.value})}
323
+ className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500"
324
+ placeholder="Enter assignee name"
325
+ />
326
+ </div>
327
+ <div>
328
+ <label className="block text-sm font-medium text-gray-700 mb-1">Status</label>
329
+ <select
330
+ value={newTask.status}
331
+ onChange={(e) => setNewTask({...newTask, status: e.target.value})}
332
+ className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500"
333
+ >
334
+ <option value="1">To Do</option>
335
+ <option value="2">In Progress</option>
336
+ <option value="3">Review</option>
337
+ <option value="4">Done</option>
338
+ </select>
339
+ </div>
340
+ <div>
341
+ <label className="block text-sm font-medium text-gray-700 mb-1">Priority</label>
342
+ <select
343
+ value={newTask.priority}
344
+ onChange={(e) => setNewTask({...newTask, priority: e.target.value})}
345
+ className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500"
346
+ >
347
+ <option value="low">Low</option>
348
+ <option value="medium">Medium</option>
349
+ <option value="high">High</option>
350
+ </select>
351
+ </div>
352
+ </div>
353
+ <div className="flex justify-end space-x-3 mt-6">
354
+ <button
355
+ onClick={() => setShowAddTaskModal(false)}
356
+ className="px-4 py-2 text-gray-600 hover:text-gray-800"
357
+ >
358
+ Cancel
359
+ </button>
360
+ <button
361
+ onClick={handleAddTask}
362
+ className="px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700"
363
+ >
364
+ Add Task
365
+ </button>
366
+ </div>
367
+ </div>
368
+ </div>
369
+ )}
370
+ </div>
371
+ );
372
+ };
373
+
374
+ ReactDOM.render(<App />, document.getElementById('root'));
375
+ </script>
376
+ </body>
377
+ </html>