Hugging Face's logo

Spaces:
LukasBe
/
mindmap
Running

App Files Community
LukasBe commited on
Commit
6c6808f
·
verified ·
1 Parent(s): e5833ea

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +6 -4
  2. index.html +578 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Mindmap
3
- emoji: 🌖
4
  colorFrom: red
5
- colorTo: gray
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: mindmap
3
+ emoji: 🐳
4
  colorFrom: red
5
+ colorTo: green
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,578 @@
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>Freelance Platform Mind Map</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
+ @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
11
+
12
+ body {
13
+ font-family: 'Poppins', sans-serif;
14
+ background-color: #f8fafc;
15
+ }
16
+
17
+ .mindmap-container {
18
+ position: relative;
19
+ min-height: 100vh;
20
+ overflow-x: hidden;
21
+ }
22
+
23
+ .node {
24
+ position: absolute;
25
+ border-radius: 12px;
26
+ padding: 1rem;
27
+ box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
28
+ transition: all 0.3s ease;
29
+ cursor: pointer;
30
+ max-width: 300px;
31
+ z-index: 10;
32
+ }
33
+
34
+ .node:hover {
35
+ transform: scale(1.05);
36
+ z-index: 20;
37
+ }
38
+
39
+ .connector {
40
+ position: absolute;
41
+ height: 2px;
42
+ background-color: #cbd5e1;
43
+ transform-origin: left center;
44
+ z-index: 1;
45
+ }
46
+
47
+ .node-icon {
48
+ font-size: 1.5rem;
49
+ margin-right: 0.5rem;
50
+ }
51
+
52
+ .node-content {
53
+ margin-top: 0.5rem;
54
+ }
55
+
56
+ .node-item {
57
+ margin-bottom: 0.25rem;
58
+ font-size: 0.9rem;
59
+ }
60
+
61
+ .controls {
62
+ position: fixed;
63
+ bottom: 2rem;
64
+ right: 2rem;
65
+ z-index: 100;
66
+ }
67
+
68
+ .zoom-buttons {
69
+ display: flex;
70
+ gap: 0.5rem;
71
+ }
72
+
73
+ .legend {
74
+ position: fixed;
75
+ top: 2rem;
76
+ right: 2rem;
77
+ background: white;
78
+ padding: 1rem;
79
+ border-radius: 8px;
80
+ box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
81
+ z-index: 100;
82
+ }
83
+
84
+ .legend-item {
85
+ display: flex;
86
+ align-items: center;
87
+ margin-bottom: 0.5rem;
88
+ }
89
+
90
+ .legend-color {
91
+ width: 20px;
92
+ height: 20px;
93
+ border-radius: 4px;
94
+ margin-right: 0.5rem;
95
+ }
96
+
97
+ .search-container {
98
+ position: fixed;
99
+ top: 2rem;
100
+ left: 2rem;
101
+ z-index: 100;
102
+ }
103
+
104
+ .highlight {
105
+ animation: pulse 1.5s infinite;
106
+ }
107
+
108
+ @keyframes pulse {
109
+ 0% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.4); }
110
+ 70% { box-shadow: 0 0 0 10px rgba(59, 130, 246, 0); }
111
+ 100% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0); }
112
+ }
113
+ </style>
114
+ </head>
115
+ <body class="bg-gray-50">
116
+ <div class="mindmap-container" id="mindmap">
117
+ <!-- Nodes will be added here by JavaScript -->
118
+ </div>
119
+
120
+ <div class="legend">
121
+ <h3 class="font-bold text-lg mb-2">Legend</h3>
122
+ <div class="legend-item">
123
+ <div class="legend-color bg-blue-500"></div>
124
+ <span>Platform Overview</span>
125
+ </div>
126
+ <div class="legend-item">
127
+ <div class="legend-color bg-green-500"></div>
128
+ <span>Actors</span>
129
+ </div>
130
+ <div class="legend-item">
131
+ <div class="legend-color bg-purple-500"></div>
132
+ <span>Functional Areas</span>
133
+ </div>
134
+ <div class="legend-item">
135
+ <div class="legend-color bg-yellow-500"></div>
136
+ <span>Data Model</span>
137
+ </div>
138
+ <div class="legend-item">
139
+ <div class="legend-color bg-red-500"></div>
140
+ <span>Technical Architecture</span>
141
+ </div>
142
+ <div class="legend-item">
143
+ <div class="legend-color bg-indigo-500"></div>
144
+ <span>UI/UX</span>
145
+ </div>
146
+ </div>
147
+
148
+ <div class="search-container">
149
+ <div class="relative">
150
+ <input type="text" id="searchInput" placeholder="Search nodes..."
151
+ class="pl-10 pr-4 py-2 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent">
152
+ <i class="fas fa-search absolute left-3 top-3 text-gray-400"></i>
153
+ </div>
154
+ </div>
155
+
156
+ <div class="controls">
157
+ <div class="zoom-buttons bg-white p-2 rounded-lg shadow-lg">
158
+ <button id="zoomIn" class="p-2 rounded-full hover:bg-gray-100">
159
+ <i class="fas fa-search-plus text-blue-500"></i>
160
+ </button>
161
+ <button id="zoomOut" class="p-2 rounded-full hover:bg-gray-100">
162
+ <i class="fas fa-search-minus text-blue-500"></i>
163
+ </button>
164
+ <button id="resetZoom" class="p-2 rounded-full hover:bg-gray-100">
165
+ <i class="fas fa-expand text-blue-500"></i>
166
+ </button>
167
+ </div>
168
+ </div>
169
+
170
+ <script>
171
+ document.addEventListener('DOMContentLoaded', function() {
172
+ const mindmap = document.getElementById('mindmap');
173
+ let scale = 1;
174
+ let offsetX = 0;
175
+ let offsetY = 0;
176
+ let isDragging = false;
177
+ let startX, startY;
178
+
179
+ // Mind map data structure
180
+ const nodes = [
181
+ {
182
+ id: 'platform-overview',
183
+ title: 'Platform Overview',
184
+ icon: 'fa-globe',
185
+ color: 'bg-blue-500',
186
+ content: [
187
+ 'Digitize freelance workflow end-to-end',
188
+ 'Mobile-first UI',
189
+ 'Scope grooming per order',
190
+ 'Iterative delivery with reviews',
191
+ 'Transparent pricing & time tracking',
192
+ 'Messaging with attachments',
193
+ 'Email proposal tracking',
194
+ 'Microfrontend architecture'
195
+ ],
196
+ x: 50,
197
+ y: 50
198
+ },
199
+ {
200
+ id: 'actors',
201
+ title: 'Actors',
202
+ icon: 'fa-users',
203
+ color: 'bg-green-500',
204
+ content: [
205
+ '<b>Freelancer</b>: Manages proposals, projects, time tracking',
206
+ '<b>Customer</b>: Requests work, manages scope, gives feedback',
207
+ '<b>System</b>: Notifications, email handling, auth'
208
+ ],
209
+ x: 50,
210
+ y: 250,
211
+ parent: 'platform-overview'
212
+ },
213
+ {
214
+ id: 'functional-areas',
215
+ title: 'Functional Areas',
216
+ icon: 'fa-sitemap',
217
+ color: 'bg-purple-500',
218
+ content: [
219
+ 'Request Intake',
220
+ 'Proposal Management',
221
+ 'Project & Iteration Management',
222
+ 'Messaging',
223
+ 'Time Tracking & Finance',
224
+ 'Reviews & Ratings',
225
+ 'Email & Proposal Tracking'
226
+ ],
227
+ x: 50,
228
+ y: 450,
229
+ parent: 'platform-overview'
230
+ },
231
+ {
232
+ id: 'request-intake',
233
+ title: 'Request Intake',
234
+ icon: 'fa-inbox',
235
+ color: 'bg-purple-300',
236
+ content: [
237
+ 'Customer submits request',
238
+ 'Optional scope grooming',
239
+ 'Budget preview',
240
+ 'Feature toggles'
241
+ ],
242
+ x: 300,
243
+ y: 350,
244
+ parent: 'functional-areas'
245
+ },
246
+ {
247
+ id: 'proposal-management',
248
+ title: 'Proposal Management',
249
+ icon: 'fa-file-contract',
250
+ color: 'bg-purple-300',
251
+ content: [
252
+ 'Generate proposal with price + scope',
253
+ 'Email-based response tracking',
254
+ 'Customer accepts/rejects',
255
+ 'Digital signature support',
256
+ 'Advance payment integration'
257
+ ],
258
+ x: 300,
259
+ y: 450,
260
+ parent: 'functional-areas'
261
+ },
262
+ {
263
+ id: 'project-iteration',
264
+ title: 'Project & Iteration',
265
+ icon: 'fa-tasks',
266
+ color: 'bg-purple-300',
267
+ content: [
268
+ 'Projects contain multiple iterations',
269
+ 'Markdown deliverable descriptions',
270
+ 'Downloadable attachments',
271
+ 'Linked customer feedback',
272
+ 'Review process with accept/changes'
273
+ ],
274
+ x: 300,
275
+ y: 550,
276
+ parent: 'functional-areas'
277
+ },
278
+ {
279
+ id: 'messaging',
280
+ title: 'Messaging',
281
+ icon: 'fa-comments',
282
+ color: 'bg-purple-300',
283
+ content: [
284
+ 'Tied to project and iteration',
285
+ 'File attachments support',
286
+ 'Threaded conversations',
287
+ 'Real-time notifications'
288
+ ],
289
+ x: 300,
290
+ y: 650,
291
+ parent: 'functional-areas'
292
+ },
293
+ {
294
+ id: 'time-finance',
295
+ title: 'Time & Finance',
296
+ icon: 'fa-clock',
297
+ color: 'bg-purple-300',
298
+ content: [
299
+ 'Hour logging per iteration',
300
+ 'Compare hours vs. budget',
301
+ 'Automatic rate application',
302
+ 'Payment tracking',
303
+ 'Invoicing'
304
+ ],
305
+ x: 300,
306
+ y: 750,
307
+ parent: 'functional-areas'
308
+ },
309
+ {
310
+ id: 'data-model',
311
+ title: 'Data Model',
312
+ icon: 'fa-database',
313
+ color: 'bg-yellow-500',
314
+ content: [
315
+ 'Users (freelancer, customer)',
316
+ 'Projects',
317
+ 'Proposals',
318
+ 'Iterations',
319
+ 'Deliverables',
320
+ 'Messages',
321
+ 'TimeLogs',
322
+ 'Payments',
323
+ 'Reviews',
324
+ 'EmailTrackers'
325
+ ],
326
+ x: 50,
327
+ y: 650,
328
+ parent: 'platform-overview'
329
+ },
330
+ {
331
+ id: 'api-layer',
332
+ title: 'API Layer',
333
+ icon: 'fa-plug',
334
+ color: 'bg-red-500',
335
+ content: [
336
+ 'RESTful API with domain services',
337
+ 'CRUD for all key entities',
338
+ 'JWT authentication',
339
+ 'Endpoint groups:',
340
+ '- /auth, /projects',
341
+ '- /proposals, /iterations',
342
+ '- /messages, /reviews',
343
+ '- /time-logs, /email-trackers',
344
+ 'File uploads for attachments'
345
+ ],
346
+ x: 50,
347
+ y: 850,
348
+ parent: 'platform-overview'
349
+ },
350
+ {
351
+ id: 'backend-arch',
352
+ title: 'Backend Architecture',
353
+ icon: 'fa-server',
354
+ color: 'bg-red-500',
355
+ content: [
356
+ 'Node.js + LowDB for prototyping',
357
+ 'Lightweight JSON DB',
358
+ 'Modular domain services',
359
+ 'Central config and error handling',
360
+ 'Scalable Microservices (Logical)',
361
+ 'Separated services per domain',
362
+ 'API gateway simulation'
363
+ ],
364
+ x: 300,
365
+ y: 850,
366
+ parent: 'api-layer'
367
+ },
368
+ {
369
+ id: 'microfrontend',
370
+ title: 'Microfrontend Design',
371
+ icon: 'fa-window-maximize',
372
+ color: 'bg-red-500',
373
+ content: [
374
+ 'Independent UI apps per domain:',
375
+ '- Project dashboard',
376
+ '- Proposal builder',
377
+ '- Iteration tracker',
378
+ '- Review system',
379
+ '- Messaging panel',
380
+ '- Time logging',
381
+ 'Deployed independently',
382
+ 'Talks to API gateway'
383
+ ],
384
+ x: 600,
385
+ y: 850,
386
+ parent: 'api-layer'
387
+ },
388
+ {
389
+ id: 'ui-ux',
390
+ title: 'UI/UX Notes',
391
+ icon: 'fa-paint-brush',
392
+ color: 'bg-indigo-500',
393
+ content: [
394
+ 'Mobile-first design',
395
+ 'Scope sliders or checkboxes',
396
+ 'Kanban board style dashboard',
397
+ 'Simple chat-style messaging',
398
+ 'Progress meters for time/budget',
399
+ 'Email timeline and interactions',
400
+ 'Deliverable previews'
401
+ ],
402
+ x: 50,
403
+ y: 1050,
404
+ parent: 'platform-overview'
405
+ }
406
+ ];
407
+
408
+ // Create nodes and connectors
409
+ function renderMindmap() {
410
+ mindmap.innerHTML = '';
411
+
412
+ // Create connectors first (so they appear behind nodes)
413
+ nodes.forEach(node => {
414
+ if (node.parent) {
415
+ const parentNode = nodes.find(n => n.id === node.parent);
416
+ if (parentNode) {
417
+ createConnector(parentNode, node);
418
+ }
419
+ }
420
+ });
421
+
422
+ // Create nodes
423
+ nodes.forEach(node => {
424
+ createNode(node);
425
+ });
426
+ }
427
+
428
+ function createNode(node) {
429
+ const nodeElement = document.createElement('div');
430
+ nodeElement.className = `node ${node.color} text-white`;
431
+ nodeElement.id = `node-${node.id}`;
432
+ nodeElement.style.left = `${node.x}px`;
433
+ nodeElement.style.top = `${node.y}px`;
434
+
435
+ nodeElement.innerHTML = `
436
+ <div class="flex items-center">
437
+ <i class="node-icon fas ${node.icon}"></i>
438
+ <h3 class="font-bold">${node.title}</h3>
439
+ </div>
440
+ <div class="node-content">
441
+ ${node.content.map(item => `<div class="node-item">${item}</div>`).join('')}
442
+ </div>
443
+ `;
444
+
445
+ // Make nodes draggable
446
+ nodeElement.addEventListener('mousedown', startDrag);
447
+
448
+ mindmap.appendChild(nodeElement);
449
+ }
450
+
451
+ function createConnector(parentNode, childNode) {
452
+ const connector = document.createElement('div');
453
+ connector.className = 'connector';
454
+
455
+ // Calculate connector position and dimensions
456
+ const startX = parentNode.x + 150; // Assuming node width ~300px
457
+ const startY = parentNode.y + 50; // Middle of parent node
458
+ const endX = childNode.x;
459
+ const endY = childNode.y + 50; // Middle of child node
460
+
461
+ const length = Math.sqrt(Math.pow(endX - startX, 2) + Math.pow(endY - startY, 2));
462
+ const angle = Math.atan2(endY - startY, endX - startX) * 180 / Math.PI;
463
+
464
+ connector.style.width = `${length}px`;
465
+ connector.style.left = `${startX}px`;
466
+ connector.style.top = `${startY}px`;
467
+ connector.style.transform = `rotate(${angle}deg)`;
468
+
469
+ mindmap.appendChild(connector);
470
+ }
471
+
472
+ // Zoom functionality
473
+ document.getElementById('zoomIn').addEventListener('click', () => {
474
+ scale += 0.1;
475
+ updateTransform();
476
+ });
477
+
478
+ document.getElementById('zoomOut').addEventListener('click', () => {
479
+ if (scale > 0.5) {
480
+ scale -= 0.1;
481
+ updateTransform();
482
+ }
483
+ });
484
+
485
+ document.getElementById('resetZoom').addEventListener('click', () => {
486
+ scale = 1;
487
+ offsetX = 0;
488
+ offsetY = 0;
489
+ updateTransform();
490
+ });
491
+
492
+ function updateTransform() {
493
+ mindmap.style.transform = `translate(${offsetX}px, ${offsetY}px) scale(${scale})`;
494
+ }
495
+
496
+ // Dragging functionality for the mindmap
497
+ function startDrag(e) {
498
+ if (e.button !== 0) return; // Only left mouse button
499
+
500
+ const node = e.currentTarget;
501
+ const rect = node.getBoundingClientRect();
502
+
503
+ isDragging = true;
504
+ startX = e.clientX - offsetX;
505
+ startY = e.clientY - offsetY;
506
+
507
+ document.addEventListener('mousemove', drag);
508
+ document.addEventListener('mouseup', stopDrag);
509
+
510
+ e.preventDefault();
511
+ }
512
+
513
+ function drag(e) {
514
+ if (!isDragging) return;
515
+
516
+ offsetX = e.clientX - startX;
517
+ offsetY = e.clientY - startY;
518
+
519
+ updateTransform();
520
+ }
521
+
522
+ function stopDrag() {
523
+ isDragging = false;
524
+ document.removeEventListener('mousemove', drag);
525
+ document.removeEventListener('mouseup', stopDrag);
526
+ }
527
+
528
+ // Search functionality
529
+ document.getElementById('searchInput').addEventListener('input', function(e) {
530
+ const searchTerm = e.target.value.toLowerCase();
531
+
532
+ // Remove highlights from all nodes
533
+ document.querySelectorAll('.node').forEach(node => {
534
+ node.classList.remove('highlight');
535
+ });
536
+
537
+ if (searchTerm.trim() === '') return;
538
+
539
+ // Highlight matching nodes
540
+ nodes.forEach(node => {
541
+ const nodeMatches = node.title.toLowerCase().includes(searchTerm) ||
542
+ node.content.some(item => item.toLowerCase().includes(searchTerm));
543
+
544
+ if (nodeMatches) {
545
+ const nodeElement = document.getElementById(`node-${node.id}`);
546
+ if (nodeElement) {
547
+ nodeElement.classList.add('highlight');
548
+
549
+ // Scroll to the node (approximate)
550
+ const x = node.x * scale + offsetX;
551
+ const y = node.y * scale + offsetY;
552
+
553
+ window.scrollTo({
554
+ left: x - window.innerWidth / 2,
555
+ top: y - window.innerHeight / 2,
556
+ behavior: 'smooth'
557
+ });
558
+ }
559
+ }
560
+ });
561
+ });
562
+
563
+ // Initial render
564
+ renderMindmap();
565
+
566
+ // Center the mindmap on load
567
+ setTimeout(() => {
568
+ const centerX = (mindmap.scrollWidth - window.innerWidth) / 2;
569
+ const centerY = (mindmap.scrollHeight - window.innerHeight) / 2;
570
+
571
+ offsetX = -centerX;
572
+ offsetY = -centerY;
573
+ updateTransform();
574
+ }, 100);
575
+ });
576
+ </script>
577
+ <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=LukasBe/mindmap" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
578
+ </html>