Hugging Face's logo

Spaces:
fenglui
/
mindflow
Running

App Files Community
fenglui commited on
Commit
ccc21fd
·
verified ·
1 Parent(s): ed0f475

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +7 -5
  2. index.html +397 -19
  3. prompts.txt +0 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Mindflow
3
- emoji: 🐨
4
- colorFrom: blue
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: mindflow
3
+ emoji: 🐳
4
+ colorFrom: pink
5
+ colorTo: yellow
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,397 @@
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>MindFlow - Ultimate Mind Mapping & Knowledge Management</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
+ <style>
10
+ .mindmap-node {
11
+ transition: all 0.3s ease;
12
+ }
13
+ .mindmap-node:hover {
14
+ transform: scale(1.05);
15
+ box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
16
+ }
17
+ .sidebar-item {
18
+ transition: all 0.2s ease;
19
+ }
20
+ .sidebar-item:hover {
21
+ background-color: rgba(59, 130, 246, 0.1);
22
+ border-left: 3px solid #3b82f6;
23
+ }
24
+ .mindmap-container {
25
+ background-image: radial-gradient(#e5e7eb 1px, transparent 1px);
26
+ background-size: 20px 20px;
27
+ }
28
+ .node-connection {
29
+ position: absolute;
30
+ background-color: #9ca3af;
31
+ transform-origin: left center;
32
+ z-index: -1;
33
+ }
34
+ @keyframes pulse {
35
+ 0%, 100% {
36
+ opacity: 1;
37
+ }
38
+ 50% {
39
+ opacity: 0.5;
40
+ }
41
+ }
42
+ .animate-pulse-slow {
43
+ animation: pulse 3s infinite;
44
+ }
45
+ </style>
46
+ </head>
47
+ <body class="bg-gray-50 font-sans text-gray-800">
48
+ <div class="flex h-screen overflow-hidden">
49
+ <!-- Sidebar -->
50
+ <div class="w-64 bg-white border-r border-gray-200 flex flex-col">
51
+ <div class="p-4 border-b border-gray-200">
52
+ <div class="flex items-center space-x-2">
53
+ <div class="w-8 h-8 bg-blue-500 rounded-full flex items-center justify-center text-white font-bold">MF</div>
54
+ <h1 class="text-xl font-bold text-gray-800">MindFlow</h1>
55
+ </div>
56
+ </div>
57
+
58
+ <div class="flex-1 overflow-y-auto">
59
+ <div class="p-4">
60
+ <button class="w-full bg-blue-500 hover:bg-blue-600 text-white py-2 px-4 rounded-md flex items-center justify-center space-x-2 transition">
61
+ <i class="fas fa-plus"></i>
62
+ <span>New Mind Map</span>
63
+ </button>
64
+ </div>
65
+
66
+ <div class="px-4 py-2">
67
+ <h3 class="text-xs font-semibold text-gray-500 uppercase tracking-wider">Recent Files</h3>
68
+ <ul class="mt-2 space-y-1">
69
+ <li>
70
+ <a href="#" class="sidebar-item flex items-center px-3 py-2 text-sm rounded-md bg-blue-50 text-blue-700">
71
+ <i class="fas fa-project-diagram mr-3 text-blue-500"></i>
72
+ <span>Product Roadmap</span>
73
+ </a>
74
+ </li>
75
+ <li>
76
+ <a href="#" class="sidebar-item flex items-center px-3 py-2 text-sm rounded-md">
77
+ <i class="fas fa-lightbulb mr-3 text-yellow-500"></i>
78
+ <span>Creative Ideas</span>
79
+ </a>
80
+ </li>
81
+ <li>
82
+ <a href="#" class="sidebar-item flex items-center px-3 py-2 text-sm rounded-md">
83
+ <i class="fas fa-book mr-3 text-green-500"></i>
84
+ <span>Knowledge Base</span>
85
+ </a>
86
+ </li>
87
+ <li>
88
+ <a href="#" class="sidebar-item flex items-center px-3 py-2 text-sm rounded-md">
89
+ <i class="fas fa-tasks mr-3 text-purple-500"></i>
90
+ <span>Project Tasks</span>
91
+ </a>
92
+ </li>
93
+ </ul>
94
+ </div>
95
+
96
+ <div class="px-4 py-2 mt-4">
97
+ <h3 class="text-xs font-semibold text-gray-500 uppercase tracking-wider">Templates</h3>
98
+ <ul class="mt-2 space-y-1">
99
+ <li>
100
+ <a href="#" class="sidebar-item flex items-center px-3 py-2 text-sm rounded-md">
101
+ <i class="fas fa-briefcase mr-3 text-gray-500"></i>
102
+ <span>Business Plan</span>
103
+ </a>
104
+ </li>
105
+ <li>
106
+ <a href="#" class="sidebar-item flex items-center px-3 py-2 text-sm rounded-md">
107
+ <i class="fas fa-graduation-cap mr-3 text-gray-500"></i>
108
+ <span>Study Notes</span>
109
+ </a>
110
+ </li>
111
+ <li>
112
+ <a href="#" class="sidebar-item flex items-center px-3 py-2 text-sm rounded-md">
113
+ <i class="fas fa-users mr-3 text-gray-500"></i>
114
+ <span>Meeting Notes</span>
115
+ </a>
116
+ </li>
117
+ </ul>
118
+ </div>
119
+ </div>
120
+
121
+ <div class="p-4 border-t border-gray-200">
122
+ <div class="flex items-center space-x-3">
123
+ <div class="w-8 h-8 bg-gray-200 rounded-full"></div>
124
+ <div>
125
+ <p class="text-sm font-medium">John Doe</p>
126
+ <p class="text-xs text-gray-500">Free Plan</p>
127
+ </div>
128
+ </div>
129
+ </div>
130
+ </div>
131
+
132
+ <!-- Main Content -->
133
+ <div class="flex-1 flex flex-col overflow-hidden">
134
+ <!-- Top Navigation -->
135
+ <div class="bg-white border-b border-gray-200 p-4 flex items-center justify-between">
136
+ <div class="flex items-center space-x-4">
137
+ <h2 class="text-lg font-semibold">Product Roadmap</h2>
138
+ <div class="flex items-center space-x-2 text-sm">
139
+ <span class="text-gray-500">Last saved 5 minutes ago</span>
140
+ <i class="fas fa-check-circle text-green-500"></i>
141
+ </div>
142
+ </div>
143
+
144
+ <div class="flex items-center space-x-3">
145
+ <button class="flex items-center space-x-1 text-gray-600 hover:text-gray-900">
146
+ <i class="fas fa-users"></i>
147
+ <span>Share</span>
148
+ </button>
149
+ <button class="flex items-center space-x-1 text-gray-600 hover:text-gray-900">
150
+ <i class="fas fa-history"></i>
151
+ <span>History</span>
152
+ </button>
153
+ <button class="flex items-center space-x-1 text-gray-600 hover:text-gray-900">
154
+ <i class="fas fa-cog"></i>
155
+ <span>Settings</span>
156
+ </button>
157
+ </div>
158
+ </div>
159
+
160
+ <!-- Toolbar -->
161
+ <div class="bg-gray-50 border-b border-gray-200 p-2 flex items-center space-x-2">
162
+ <div class="flex items-center space-x-1">
163
+ <button class="p-2 rounded hover:bg-gray-200">
164
+ <i class="fas fa-text-width"></i>
165
+ </button>
166
+ <button class="p-2 rounded hover:bg-gray-200">
167
+ <i class="fas fa-image"></i>
168
+ </button>
169
+ <button class="p-2 rounded hover:bg-gray-200">
170
+ <i class="fas fa-link"></i>
171
+ </button>
172
+ <button class="p-2 rounded hover:bg-gray-200">
173
+ <i class="fas fa-paperclip"></i>
174
+ </button>
175
+ </div>
176
+
177
+ <div class="border-l border-gray-300 h-6 mx-2"></div>
178
+
179
+ <div class="flex items-center space-x-1">
180
+ <button class="p-2 rounded hover:bg-gray-200">
181
+ <i class="fas fa-shapes"></i>
182
+ </button>
183
+ <button class="p-2 rounded hover:bg-gray-200">
184
+ <i class="fas fa-palette"></i>
185
+ </button>
186
+ <button class="p-2 rounded hover:bg-gray-200">
187
+ <i class="fas fa-font"></i>
188
+ </button>
189
+ </div>
190
+
191
+ <div class="border-l border-gray-300 h-6 mx-2"></div>
192
+
193
+ <div class="flex items-center space-x-1">
194
+ <button class="p-2 rounded hover:bg-gray-200">
195
+ <i class="fas fa-expand"></i>
196
+ </button>
197
+ <button class="p-2 rounded hover:bg-gray-200">
198
+ <i class="fas fa-search"></i>
199
+ </button>
200
+ <button class="p-2 rounded hover:bg-gray-200">
201
+ <i class="fas fa-layer-group"></i>
202
+ </button>
203
+ </div>
204
+ </div>
205
+
206
+ <!-- Mind Map Canvas -->
207
+ <div class="flex-1 overflow-auto mindmap-container relative p-8">
208
+ <!-- Central Node -->
209
+ <div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
210
+ <div class="mindmap-node bg-blue-500 text-white p-4 rounded-lg shadow-lg w-48 cursor-move" style="transform: translate(-50%, -50%);">
211
+ <div class="font-bold text-center">Product Roadmap</div>
212
+ </div>
213
+ </div>
214
+
215
+ <!-- Child Nodes -->
216
+ <div class="absolute top-1/4 left-1/4">
217
+ <div class="mindmap-node bg-green-500 text-white p-3 rounded-lg shadow-lg w-40 cursor-move">
218
+ <div class="font-semibold">Q1 Goals</div>
219
+ <div class="text-xs mt-1">Market Research</div>
220
+ </div>
221
+ </div>
222
+
223
+ <div class="absolute top-1/4 right-1/4">
224
+ <div class="mindmap-node bg-purple-500 text-white p-3 rounded-lg shadow-lg w-40 cursor-move">
225
+ <div class="font-semibold">Q2 Goals</div>
226
+ <div class="text-xs mt-1">Prototype Development</div>
227
+ </div>
228
+ </div>
229
+
230
+ <div class="absolute bottom-1/4 left-1/4">
231
+ <div class="mindmap-node bg-yellow-500 text-white p-3 rounded-lg shadow-lg w-40 cursor-move">
232
+ <div class="font-semibold">Q3 Goals</div>
233
+ <div class="text-xs mt-1">Beta Testing</div>
234
+ </div>
235
+ </div>
236
+
237
+ <div class="absolute bottom-1/4 right-1/4">
238
+ <div class="mindmap-node bg-red-500 text-white p-3 rounded-lg shadow-lg w-40 cursor-move">
239
+ <div class="font-semibold">Q4 Goals</div>
240
+ <div class="text-xs mt-1">Product Launch</div>
241
+ </div>
242
+ </div>
243
+
244
+ <!-- Floating Action Button -->
245
+ <div class="fixed bottom-8 right-8">
246
+ <button class="w-12 h-12 bg-blue-500 hover:bg-blue-600 text-white rounded-full shadow-lg flex items-center justify-center transition transform hover:scale-110">
247
+ <i class="fas fa-plus text-xl"></i>
248
+ </button>
249
+ </div>
250
+
251
+ <!-- Connection lines would be drawn here with JavaScript -->
252
+ </div>
253
+
254
+ <!-- Status Bar -->
255
+ <div class="bg-white border-t border-gray-200 p-2 flex items-center justify-between text-xs text-gray-500">
256
+ <div class="flex items-center space-x-4">
257
+ <span>Zoom: 100%</span>
258
+ <span>Nodes: 5</span>
259
+ </div>
260
+ <div>
261
+ <span>MindFlow v1.0.0</span>
262
+ </div>
263
+ </div>
264
+ </div>
265
+
266
+ <!-- Right Sidebar -->
267
+ <div class="w-80 bg-white border-l border-gray-200 flex flex-col">
268
+ <div class="p-4 border-b border-gray-200">
269
+ <h3 class="font-medium">Node Properties</h3>
270
+ </div>
271
+
272
+ <div class="flex-1 overflow-y-auto p-4">
273
+ <div class="space-y-6">
274
+ <div>
275
+ <h4 class="text-sm font-medium text-gray-700 mb-2">Content</h4>
276
+ <textarea class="w-full border border-gray-300 rounded-md p-2 text-sm focus:ring-blue-500 focus:border-blue-500" rows="3">Product Roadmap</textarea>
277
+ </div>
278
+
279
+ <div>
280
+ <h4 class="text-sm font-medium text-gray-700 mb-2">Node Style</h4>
281
+ <div class="grid grid-cols-5 gap-2">
282
+ <div class="w-8 h-8 bg-blue-500 rounded-md cursor-pointer border-2 border-blue-600"></div>
283
+ <div class="w-8 h-8 bg-green-500 rounded-md cursor-pointer"></div>
284
+ <div class="w-8 h-8 bg-purple-500 rounded-md cursor-pointer"></div>
285
+ <div class="w-8 h-8 bg-yellow-500 rounded-md cursor-pointer"></div>
286
+ <div class="w-8 h-8 bg-red-500 rounded-md cursor-pointer"></div>
287
+ </div>
288
+ </div>
289
+
290
+ <div>
291
+ <h4 class="text-sm font-medium text-gray-700 mb-2">Text Style</h4>
292
+ <div class="flex space-x-2">
293
+ <button class="p-1 border border-gray-300 rounded">
294
+ <i class="fas fa-bold"></i>
295
+ </button>
296
+ <button class="p-1 border border-gray-300 rounded">
297
+ <i class="fas fa-italic"></i>
298
+ </button>
299
+ <button class="p-1 border border-gray-300 rounded">
300
+ <i class="fas fa-underline"></i>
301
+ </button>
302
+ </div>
303
+ <div class="mt-2">
304
+ <select class="w-full border border-gray-300 rounded-md p-1 text-sm">
305
+ <option>Arial</option>
306
+ <option>Helvetica</option>
307
+ <option>Times New Roman</option>
308
+ </select>
309
+ </div>
310
+ </div>
311
+
312
+ <div>
313
+ <h4 class="text-sm font-medium text-gray-700 mb-2">Icons</h4>
314
+ <div class="grid grid-cols-5 gap-2">
315
+ <div class="w-8 h-8 flex items-center justify-center bg-gray-100 rounded-md cursor-pointer">
316
+ <i class="fas fa-check text-gray-600"></i>
317
+ </div>
318
+ <div class="w-8 h-8 flex items-center justify-center bg-gray-100 rounded-md cursor-pointer">
319
+ <i class="fas fa-star text-gray-600"></i>
320
+ </div>
321
+ <div class="w-8 h-8 flex items-center justify-center bg-gray-100 rounded-md cursor-pointer">
322
+ <i class="fas fa-flag text-gray-600"></i>
323
+ </div>
324
+ <div class="w-8 h-8 flex items-center justify-center bg-gray-100 rounded-md cursor-pointer">
325
+ <i class="fas fa-heart text-gray-600"></i>
326
+ </div>
327
+ <div class="w-8 h-8 flex items-center justify-center bg-gray-100 rounded-md cursor-pointer">
328
+ <i class="fas fa-bolt text-gray-600"></i>
329
+ </div>
330
+ </div>
331
+ </div>
332
+
333
+ <div>
334
+ <h4 class="text-sm font-medium text-gray-700 mb-2">Attachments</h4>
335
+ <div class="border border-dashed border-gray-300 rounded-md p-4 text-center">
336
+ <i class="fas fa-cloud-upload-alt text-gray-400 text-2xl mb-2"></i>
337
+ <p class="text-xs text-gray-500">Drag & drop files here</p>
338
+ </div>
339
+ </div>
340
+ </div>
341
+ </div>
342
+
343
+ <div class="p-4 border-t border-gray-200">
344
+ <button class="w-full bg-gray-100 hover:bg-gray-200 text-gray-800 py-2 px-4 rounded-md flex items-center justify-center space-x-2 transition">
345
+ <i class="fas fa-question-circle"></i>
346
+ <span>Help & Feedback</span>
347
+ </button>
348
+ </div>
349
+ </div>
350
+ </div>
351
+
352
+ <script>
353
+ // This would be replaced with actual mind mapping functionality
354
+ document.addEventListener('DOMContentLoaded', function() {
355
+ // Simple animation for nodes to demonstrate interactivity
356
+ const nodes = document.querySelectorAll('.mindmap-node');
357
+ nodes.forEach(node => {
358
+ node.addEventListener('mouseenter', () => {
359
+ node.classList.add('animate-pulse-slow');
360
+ });
361
+ node.addEventListener('mouseleave', () => {
362
+ node.classList.remove('animate-pulse-slow');
363
+ });
364
+ });
365
+
366
+ // Simulate connection lines (would be drawn dynamically in a real app)
367
+ setTimeout(() => {
368
+ const centralNode = document.querySelector('.mindmap-node.bg-blue-500');
369
+ const centralRect = centralNode.getBoundingClientRect();
370
+ const centralX = centralRect.left + centralRect.width / 2;
371
+ const centralY = centralRect.top + centralRect.height / 2;
372
+
373
+ nodes.forEach(node => {
374
+ if (!node.classList.contains('bg-blue-500')) {
375
+ const nodeRect = node.getBoundingClientRect();
376
+ const nodeX = nodeRect.left + nodeRect.width / 2;
377
+ const nodeY = nodeRect.top + nodeRect.height / 2;
378
+
379
+ const length = Math.sqrt(Math.pow(nodeX - centralX, 2) + Math.pow(nodeY - centralY, 2));
380
+ const angle = Math.atan2(nodeY - centralY, nodeX - centralX) * 180 / Math.PI;
381
+
382
+ const connection = document.createElement('div');
383
+ connection.className = 'node-connection';
384
+ connection.style.width = `${length}px`;
385
+ connection.style.height = '2px';
386
+ connection.style.left = `${centralX}px`;
387
+ connection.style.top = `${centralY}px`;
388
+ connection.style.transform = `rotate(${angle}deg)`;
389
+
390
+ document.querySelector('.mindmap-container').appendChild(connection);
391
+ }
392
+ });
393
+ }, 500);
394
+ });
395
+ </script>
396
+ <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=fenglui/mindflow" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
397
+ </html>
prompts.txt ADDED
File without changes