Repository navigation
Expand file tree
/
Copy pathdata-request-user-guideline.html
More file actions
562 lines (526 loc) · 39.4 KB
/
Copy pathdata-request-user-guideline.html
File metadata and controls
562 lines (526 loc) · 39.4 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Data Request Management System - User Guideline</title>
<script src="https://cdn.tailwindcss.com"></script>
<style>
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
body {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}
.gradient-bg {
background: linear-gradient(to bottom right, #eff6ff, #f0f9ff, #faf5ff);
}
.blue-gradient-btn {
background: linear-gradient(to right, #2563eb, #1d4ed8);
}
.blue-gradient-btn:hover {
background: linear-gradient(to right, #1d4ed8, #1e40af);
}
.step-blue {
background-color: #dbeafe;
color: #1e40af;
}
.step-yellow {
background-color: #fef3c7;
color: #78350f;
}
.step-purple {
background-color: #e9d5ff;
color: #6b21a8;
}
.step-green {
background-color: #d1fae5;
color: #065f46;
}
/* Example dendrogram */
.example-dendrogram {
width: 100%;
height: auto;
display: block;
}
.example-dendrogram text {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
.req-pulse {
transform-box: fill-box;
transform-origin: center;
animation: reqPulse 1.6s ease-out infinite;
}
@keyframes reqPulse {
0% {
transform: scale(1);
opacity: 0.45;
}
100% {
transform: scale(2.1);
opacity: 0;
}
}
</style>
</head>
<body class="min-h-screen gradient-bg">
<!-- Hero Section -->
<div class="bg-white shadow-sm border-b">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
<a href="index.html" class="inline-flex items-center gap-2 text-sm font-medium text-blue-700 bg-blue-50 hover:bg-blue-100 rounded-lg px-3 py-2 mb-6 transition-colors">
<svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
</svg>
Back to Home
</a>
<div class="text-center">
<div class="inline-block mb-6">
<div class="text-4xl font-bold text-blue-600 mb-2" style="letter-spacing: 2px;">
DEMO LOGO
</div>
<div class="text-sm text-gray-500 font-medium" style="letter-spacing: 4px;">
DATA REQUEST SYSTEM
</div>
</div>
<h1 class="text-4xl font-bold text-gray-900 mb-3">
Data Request Management System
</h1>
<p class="text-xl text-gray-600 max-w-3xl mx-auto">
Visualize each project's file relationships as an interactive tree. For detailed dataset descriptions, explore the
<a href="finder-user-guideline.html" class="text-blue-600 font-medium hover:text-blue-700 hover:underline">Research Data Finder</a>
</p>
</div>
</div>
</div>
<!-- Main Content -->
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
<div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
<!-- Left Column - System Guide -->
<div class="lg:col-span-2 space-y-8">
<!-- Example -->
<section class="bg-white rounded-xl shadow-lg p-6">
<h2 class="text-2xl font-bold text-gray-900 mb-6 flex items-center">
<svg class="h-6 w-6 mr-2 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 17v-2m3 2v-4m3 4v-6m2 10H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
</svg>
Example: A Typical Data Request
</h2>
<p class="text-gray-600 mb-4">
Here is how a project looks when managed in the system — its data request files organized as a tree, with versions, milestones, and requirements visible at a glance:
</p>
<div class="rounded-lg border-2 border-gray-200 bg-gray-50 p-4 overflow-x-auto">
<svg class="example-dendrogram" viewBox="0 0 860 470" role="img" aria-label="Example dendrogram of a data request with document, security files, milestone, and proposal nodes">
<!-- Connecting lines (root bottom to each child top) -->
<path d="M 430 102 C 430 175, 120 155, 120 216" fill="none" stroke="#cbd5e1" stroke-width="3" />
<path d="M 430 102 C 430 175, 330 165, 330 216" fill="none" stroke="#cbd5e1" stroke-width="3" />
<path d="M 430 102 C 430 175, 545 165, 545 216" fill="none" stroke="#cbd5e1" stroke-width="3" />
<path d="M 430 102 C 430 175, 745 155, 745 216" fill="none" stroke="#cbd5e1" stroke-width="3" />
<!-- Root node: Data Request -->
<g transform="translate(430, 70)">
<rect x="-32" y="-32" width="64" height="64" rx="14" fill="#f3e8ff" stroke="#e9d5ff" stroke-width="2" />
<g transform="translate(-16, -16) scale(1.33)">
<path d="M8.684 13.342C8.886 12.938 9 12.482 9 12c0-.482-.114-.938-.316-1.342m0 2.684a3 3 0 110-2.684m0 2.684l6.632 3.316m-6.632-6l6.632-3.316m0 0a3 3 0 105.367-2.684 3 3 0 00-5.367 2.684zm0 9.316a3 3 0 105.368 2.684 3 3 0 00-5.368-2.684z" fill="none" stroke="#9333ea" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
</g>
<!-- Requirement badge with pulse -->
<g transform="translate(-30, -30)">
<circle class="req-pulse" r="12" fill="#ef4444" />
<circle r="12" fill="#ef4444" stroke="white" stroke-width="2" />
<text text-anchor="middle" y="5" fill="white" font-size="16" font-weight="bold">!</text>
</g>
<text text-anchor="middle" y="55" fill="#1e293b" font-weight="700" font-size="15">Project A</text>
<text text-anchor="start" x="45" y="-18" fill="#ef4444" font-size="12" font-weight="bold">⚠ 45 days before submission</text>
<text text-anchor="start" x="45" y="-2" fill="#94a3b8" font-size="11">notify: stakeholder emails</text>
</g>
<!-- Child 1: Request Documents (file node) -->
<g transform="translate(120, 240)">
<rect x="-24" y="-24" width="48" height="48" rx="11" fill="#dcfce7" stroke="#bbf7d0" stroke-width="2" />
<g transform="translate(-12, -12)">
<path d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" fill="none" stroke="#16a34a" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
</g>
<g transform="translate(24, -24)">
<circle r="12" fill="#3b82f6" stroke="white" stroke-width="2" />
<text text-anchor="middle" y="4" fill="white" font-size="11" font-weight="bold">3</text>
</g>
<text text-anchor="middle" y="45" fill="#1e293b" font-weight="700" font-size="14">Request Documents</text>
<rect x="-85" y="55" width="170" height="42" rx="4" fill="rgba(248, 250, 252, 0.9)" stroke="#e2e8f0" />
<text text-anchor="middle" y="72" fill="#2563eb" font-size="11" font-weight="600">Access Request.docx (v1,2)</text>
<text text-anchor="middle" y="88" fill="#475569" font-size="11">Request Checklist.xlsx (v1)</text>
</g>
<!-- Child 2: Security Files (folder node) -->
<g transform="translate(330, 240)">
<rect x="-24" y="-24" width="48" height="48" rx="11" fill="#fef3c7" stroke="#fde68a" stroke-width="2" />
<g transform="translate(-12, -12)">
<path d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z" fill="none" stroke="#d97706" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
</g>
<g transform="translate(24, -24)">
<circle r="12" fill="#3b82f6" stroke="white" stroke-width="2" />
<text text-anchor="middle" y="4" fill="white" font-size="11" font-weight="bold">8</text>
</g>
<text text-anchor="middle" y="45" fill="#1e293b" font-weight="700" font-size="14">Security Files</text>
<rect x="-85" y="55" width="170" height="58" rx="4" fill="rgba(248, 250, 252, 0.9)" stroke="#e2e8f0" />
<text text-anchor="middle" y="72" fill="#475569" font-size="11">Checklist_Researcher A (v1)</text>
<text text-anchor="middle" y="88" fill="#475569" font-size="11">Checklist_Researcher B (v1)</text>
<text text-anchor="middle" y="104" fill="#94a3b8" font-size="10" font-weight="bold">+6 more files...</text>
</g>
<!-- Child 3: Review Cycle (milestone node) -->
<g transform="translate(545, 240)">
<rect x="-24" y="-24" width="48" height="48" rx="11" fill="#fee2e2" stroke="#fecaca" stroke-width="2" />
<g transform="translate(-12, -12)">
<path d="M3 21v-4m0 0V5a2 2 0 012-2h6.5l1 1H21l-3 6 3 6h-8.5l-1-1H5a2 2 0 00-2 2zm9-13.5V9" fill="none" stroke="#dc2626" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
</g>
<text text-anchor="middle" y="45" fill="#1e293b" font-weight="700" font-size="14">1st Review Cycle</text>
<text text-anchor="middle" y="63" fill="#94a3b8" font-size="11" font-style="italic">milestone reached</text>
</g>
<!-- Child 4: Analysis Proposal (folder node) -->
<g transform="translate(745, 240)">
<rect x="-24" y="-24" width="48" height="48" rx="11" fill="#fef3c7" stroke="#fde68a" stroke-width="2" />
<g transform="translate(-12, -12)">
<path d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z" fill="none" stroke="#d97706" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
</g>
<g transform="translate(24, -24)">
<circle r="12" fill="#3b82f6" stroke="white" stroke-width="2" />
<text text-anchor="middle" y="4" fill="white" font-size="11" font-weight="bold">1</text>
</g>
<text text-anchor="middle" y="45" fill="#1e293b" font-weight="700" font-size="14">Analysis Proposal</text>
<rect x="-85" y="55" width="170" height="26" rx="4" fill="rgba(248, 250, 252, 0.9)" stroke="#e2e8f0" />
<text text-anchor="middle" y="72" fill="#475569" font-size="11">Analysis Proposal.docx (v1)</text>
</g>
<!-- Inline legend -->
<g transform="translate(430, 430)" font-size="12" fill="#64748b">
<g transform="translate(-310, 0)">
<rect x="-10" y="-10" width="20" height="20" rx="5" fill="#f3e8ff" stroke="#e9d5ff" stroke-width="1.5" />
<g transform="translate(-6.5, -6.5) scale(0.54)">
<path d="M8.684 13.342C8.886 12.938 9 12.482 9 12c0-.482-.114-.938-.316-1.342m0 2.684a3 3 0 110-2.684m0 2.684l6.632 3.316m-6.632-6l6.632-3.316m0 0a3 3 0 105.367-2.684 3 3 0 00-5.367 2.684zm0 9.316a3 3 0 105.368 2.684 3 3 0 00-5.368-2.684z" fill="none" stroke="#9333ea" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" />
</g>
<text x="16" y="4">Root (project)</text>
</g>
<g transform="translate(-140, 0)">
<rect x="-10" y="-10" width="20" height="20" rx="5" fill="#fef3c7" stroke="#fde68a" stroke-width="1.5" />
<g transform="translate(-6.5, -6.5) scale(0.54)">
<path d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z" fill="none" stroke="#d97706" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" />
</g>
<text x="16" y="4">Folder</text>
</g>
<g transform="translate(-30, 0)">
<rect x="-10" y="-10" width="20" height="20" rx="5" fill="#dcfce7" stroke="#bbf7d0" stroke-width="1.5" />
<g transform="translate(-6.5, -6.5) scale(0.54)">
<path d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" fill="none" stroke="#16a34a" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" />
</g>
<text x="16" y="4">File</text>
</g>
<g transform="translate(60, 0)">
<rect x="-10" y="-10" width="20" height="20" rx="5" fill="#fee2e2" stroke="#fecaca" stroke-width="1.5" />
<g transform="translate(-6.5, -6.5) scale(0.54)">
<path d="M3 21v-4m0 0V5a2 2 0 012-2h6.5l1 1H21l-3 6 3 6h-8.5l-1-1H5a2 2 0 00-2 2zm9-13.5V9" fill="none" stroke="#dc2626" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" />
</g>
<text x="16" y="4">Milestone</text>
</g>
<g transform="translate(180, 0)">
<circle r="8" fill="#3b82f6" stroke="white" stroke-width="1.5" />
<text text-anchor="middle" y="3.5" fill="white" font-size="9" font-weight="bold">n</text>
<text x="14" y="4">File count</text>
</g>
</g>
</svg>
</div>
<p class="text-sm text-gray-500 mt-3 text-center">
One request as a living tree: versioned documents, per-researcher security checklists, a milestone, and a deadline requirement with email notifications — all visible at a glance
</p>
</section>
<!-- Dendrogram Visualization -->
<section class="bg-white rounded-xl shadow-lg p-6">
<h2 class="text-2xl font-bold text-gray-900 mb-6 flex items-center">
<svg class="h-6 w-6 mr-2 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 20l-5.447-2.724A1 1 0 013 16.382V5.618a1 1 0 011.447-.894L9 7m0 13l6-3m-6 3V7m6 10l4.553 2.276A1 1 0 0021 18.382V7.618a1 1 0 00-.553-.894L15 4m0 13V4m0 0L9 7" />
</svg>
Dendrogram Visualization
</h2>
<p class="text-gray-600 mb-6">
Every project is rendered as an interactive tree. Each node type has a distinct shape and color so the structure is readable at a glance:
</p>
<div class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-6">
<div class="border border-gray-200 rounded-lg p-4 text-center hover:border-purple-400 hover:shadow-md transition-all">
<div class="w-12 h-12 bg-purple-100 rounded-lg flex items-center justify-center mx-auto mb-3">
<svg class="w-6 h-6 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.684 13.342C8.886 12.938 9 12.482 9 12c0-.482-.114-.938-.316-1.342m0 2.684a3 3 0 110-2.684m0 2.684l6.632 3.316m-6.632-6l6.632-3.316m0 0a3 3 0 105.367-2.684 3 3 0 00-5.367 2.684zm0 9.316a3 3 0 105.368 2.684 3 3 0 00-5.368-2.684z" />
</svg>
</div>
<div class="font-semibold text-gray-900 text-sm">Root</div>
<div class="text-xs text-gray-500">The project itself</div>
</div>
<div class="border border-gray-200 rounded-lg p-4 text-center hover:border-amber-400 hover:shadow-md transition-all">
<div class="w-12 h-12 bg-amber-100 rounded-lg flex items-center justify-center mx-auto mb-3">
<svg class="w-6 h-6 text-amber-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z" />
</svg>
</div>
<div class="font-semibold text-gray-900 text-sm">Folder</div>
<div class="text-xs text-gray-500">Container for related files</div>
</div>
<div class="border border-gray-200 rounded-lg p-4 text-center hover:border-green-400 hover:shadow-md transition-all">
<div class="w-12 h-12 bg-green-100 rounded-lg flex items-center justify-center mx-auto mb-3">
<svg class="w-6 h-6 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
</svg>
</div>
<div class="font-semibold text-gray-900 text-sm">File</div>
<div class="text-xs text-gray-500">Document node</div>
</div>
<div class="border border-gray-200 rounded-lg p-4 text-center hover:border-red-400 hover:shadow-md transition-all">
<div class="w-12 h-12 bg-red-100 rounded-lg flex items-center justify-center mx-auto mb-3">
<svg class="w-6 h-6 text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 21v-4m0 0V5a2 2 0 012-2h6.5l1 1H21l-3 6 3 6h-8.5l-1-1H5a2 2 0 00-2 2zm9-13.5V9" />
</svg>
</div>
<div class="font-semibold text-gray-900 text-sm">Milestone</div>
<div class="text-xs text-gray-500">Key project checkpoint</div>
</div>
</div>
<div class="bg-blue-50 border border-blue-200 rounded-lg p-4">
<p class="text-sm text-blue-800 m-0">
<strong>💡 Tip:</strong> Blue badges on nodes show file counts; pulsing red badges flag nodes with active requirements. Drag to pan, scroll to zoom, and click any node to open its details.
</p>
</div>
</section>
<!-- System Overview & Workflow -->
<section class="bg-white rounded-xl shadow-lg p-6">
<h2 class="text-2xl font-bold text-gray-900 mb-6 flex items-center">
<svg class="h-6 w-6 mr-2 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z" />
</svg>
Request Management Workflow
</h2>
<p class="text-gray-600 mb-6">
Manage each project's data request as an interactive tree (dendrogram) through a structured 4-step workflow:
</p>
<!-- Step Details -->
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div class="border-2 border-gray-200 rounded-lg p-4 hover:border-blue-500 transition-colors">
<div class="flex items-start">
<div class="step-blue rounded-full w-10 h-10 flex items-center justify-center font-bold text-lg mr-4 flex-shrink-0">
1
</div>
<div>
<h3 class="font-semibold text-gray-900 mb-1">
Step 1: Initialize Request
</h3>
<p class="text-sm text-gray-600">Create a request with name, description, initial date, and stakeholder emails</p>
</div>
</div>
</div>
<div class="border-2 border-gray-200 rounded-lg p-4 hover:border-blue-500 transition-colors">
<div class="flex items-start">
<div class="step-yellow rounded-full w-10 h-10 flex items-center justify-center font-bold text-lg mr-4 flex-shrink-0">
2
</div>
<div>
<h3 class="font-semibold text-gray-900 mb-1">
Step 2: Build Structure
</h3>
<p class="text-sm text-gray-600">Add folders, files, and milestones as tree nodes with custom icons</p>
</div>
</div>
</div>
<div class="border-2 border-gray-200 rounded-lg p-4 hover:border-blue-500 transition-colors">
<div class="flex items-start">
<div class="step-purple rounded-full w-10 h-10 flex items-center justify-center font-bold text-lg mr-4 flex-shrink-0">
3
</div>
<div>
<h3 class="font-semibold text-gray-900 mb-1">
Step 3: Upload & Version Files
</h3>
<p class="text-sm text-gray-600">Attach documents to nodes with automatic or manual version control</p>
</div>
</div>
</div>
<div class="border-2 border-gray-200 rounded-lg p-4 hover:border-blue-500 transition-colors">
<div class="flex items-start">
<div class="step-green rounded-full w-10 h-10 flex items-center justify-center font-bold text-lg mr-4 flex-shrink-0">
4
</div>
<div>
<h3 class="font-semibold text-gray-900 mb-1">
Step 4: Track Requirements
</h3>
<p class="text-sm text-gray-600">Set deadlines with email notification recipients and monitor progress</p>
</div>
</div>
</div>
</div>
</section>
<!-- Key Features -->
<section class="bg-white rounded-xl shadow-lg p-6">
<h2 class="text-2xl font-bold text-gray-900 mb-6 flex items-center">
<svg class="h-6 w-6 mr-2 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
Key Features
</h2>
<!-- File Version Control -->
<div class="flex items-start p-4 border border-gray-200 rounded-lg hover:border-blue-500 hover:shadow-md transition-all mb-4">
<div class="bg-blue-100 rounded-lg p-2 mr-4 flex-shrink-0">
<svg class="h-5 w-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16V4m0 0L3 8m4-4l4 4m6 0v12m0 0l4-4m-4 4l-4-4" />
</svg>
</div>
<div class="flex-1">
<h3 class="font-semibold text-gray-900 mb-1">File Version Control</h3>
<p class="text-sm text-gray-600">
Files with identical names are automatically versioned (v1, v2, ...). You can also manually mark a differently-named upload as a new version of an existing file, assign custom version numbers, and view grouped version history per file.
</p>
</div>
</div>
<!-- Requirements & Email Notifications -->
<div class="flex items-start p-4 border border-gray-200 rounded-lg hover:border-blue-500 hover:shadow-md transition-all mb-4">
<div class="bg-blue-100 rounded-lg p-2 mr-4 flex-shrink-0">
<svg class="h-5 w-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" />
</svg>
</div>
<div class="flex-1">
<h3 class="font-semibold text-gray-900 mb-1">Requirements & Email Notifications</h3>
<p class="text-sm text-gray-600">
Attach requirements with due dates to any node (e.g., "Data provider needs to send draft within 45 days"). Add multiple notification recipients per requirement and manage them from the sticky Requirements & Notifications panel.
</p>
</div>
</div>
<!-- Stakeholder Management -->
<div class="flex items-start p-4 border border-gray-200 rounded-lg hover:border-blue-500 hover:shadow-md transition-all mb-4">
<div class="bg-blue-100 rounded-lg p-2 mr-4 flex-shrink-0">
<svg class="h-5 w-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z" />
</svg>
</div>
<div class="flex-1">
<h3 class="font-semibold text-gray-900 mb-1">Stakeholder Management</h3>
<p class="text-sm text-gray-600">
Register all stakeholders by email when initializing a request so everyone involved in the data request is documented and visible on the root node.
</p>
</div>
</div>
<!-- Timeline & Activity Log -->
<div class="flex items-start p-4 border border-gray-200 rounded-lg hover:border-blue-500 hover:shadow-md transition-all mb-4">
<div class="bg-blue-100 rounded-lg p-2 mr-4 flex-shrink-0">
<svg class="h-5 w-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
</div>
<div class="flex-1">
<h3 class="font-semibold text-gray-900 mb-1">Timeline & Activity Log</h3>
<p class="text-sm text-gray-600">
Every action — request initialization, node creation, file uploads, requirements — is logged with its date in a chronological activity feed, giving you a complete audit trail of the request.
</p>
</div>
</div>
<!-- Summary Statistics -->
<div class="flex items-start p-4 border border-gray-200 rounded-lg hover:border-blue-500 hover:shadow-md transition-all mb-4">
<div class="bg-blue-100 rounded-lg p-2 mr-4 flex-shrink-0">
<svg class="h-5 w-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
</svg>
</div>
<div class="flex-1">
<h3 class="font-semibold text-gray-900 mb-1">Summary Statistics</h3>
<p class="text-sm text-gray-600">
Toggle the summary panel to see total nodes, files, and versions, node type breakdown, files per node, stakeholder count, and active requirements at a glance.
</p>
</div>
</div>
<!-- Import / Export & Auto-Save -->
<div class="flex items-start p-4 border border-gray-200 rounded-lg hover:border-blue-500 hover:shadow-md transition-all mb-4">
<div class="bg-blue-100 rounded-lg p-2 mr-4 flex-shrink-0">
<svg class="h-5 w-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7H5a2 2 0 00-2 2v9a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-3m-1 4l-3 3m0 0l-3-3m3 3V2" />
</svg>
</div>
<div class="flex-1">
<h3 class="font-semibold text-gray-900 mb-1">Import / Export & Auto-Save</h3>
<p class="text-sm text-gray-600">
Export the full request (tree, requirements, stakeholders) as JSON for sharing or archiving, re-import it anytime, and rely on automatic session saving every 30 seconds.
</p>
</div>
</div>
<!-- Keyboard Shortcuts -->
<div class="flex items-start p-4 border border-gray-200 rounded-lg hover:border-blue-500 hover:shadow-md transition-all">
<div class="bg-blue-100 rounded-lg p-2 mr-4 flex-shrink-0">
<svg class="h-5 w-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
</svg>
</div>
<div class="flex-1">
<h3 class="font-semibold text-gray-900 mb-1">Keyboard Shortcuts & Navigation</h3>
<p class="text-sm text-gray-600 mb-3">
Work faster with built-in shortcuts and smooth canvas navigation:
</p>
<div class="grid grid-cols-2 md:grid-cols-3 gap-2 text-xs text-gray-600">
<div class="bg-gray-50 rounded px-2 py-1.5"><span class="font-mono font-semibold text-gray-900">Ctrl+S</span> — Export</div>
<div class="bg-gray-50 rounded px-2 py-1.5"><span class="font-mono font-semibold text-gray-900">Ctrl+O</span> — Import</div>
<div class="bg-gray-50 rounded px-2 py-1.5"><span class="font-mono font-semibold text-gray-900">+ / −</span> — Zoom</div>
<div class="bg-gray-50 rounded px-2 py-1.5"><span class="font-mono font-semibold text-gray-900">R</span> — Reset view</div>
<div class="bg-gray-50 rounded px-2 py-1.5"><span class="font-mono font-semibold text-gray-900">S</span> — Summary</div>
<div class="bg-gray-50 rounded px-2 py-1.5"><span class="font-mono font-semibold text-gray-900">Wheel</span> — Zoom</div>
</div>
</div>
</div>
</section>
</div>
<!-- Right Column - Login Card -->
<div class="lg:col-span-1">
<div class="bg-white rounded-xl shadow-lg p-8 sticky top-8">
<div class="text-center mb-6">
<h2 class="text-2xl font-bold text-gray-900 mb-2">
Ready to Get Started?
</h2>
<p class="text-gray-600 text-sm">
Sign in to access the system
</p>
</div>
<!-- Login Button -->
<button
class="group relative w-full flex justify-center items-center py-4 px-6 border border-transparent text-base font-medium rounded-lg text-white blue-gradient-btn focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-all shadow-lg hover:shadow-xl"
>
<svg class="h-5 w-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
</svg>
Sign in Here
<svg class="h-5 w-5 ml-2 group-hover:translate-x-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6" />
</svg>
</button>
<!-- Account Info -->
<div class="mt-6 p-4 bg-gray-50 rounded-lg">
<h3 class="text-sm font-medium text-gray-900 mb-3">Need an Account?</h3>
<div class="text-xs text-gray-600 space-y-2">
<div class="flex items-start">
<svg class="h-4 w-4 text-blue-600 mr-2 mt-0.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
<p>Contact Griffith Gao to create an account</p>
</div>
<div class="flex items-start">
<svg class="h-4 w-4 text-blue-600 mr-2 mt-0.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
<p>Use the email and password provided</p>
</div>
<div class="flex items-start">
<svg class="h-4 w-4 text-blue-600 mr-2 mt-0.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
<p>Click "Forgot password" to change your password</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Footer -->
<div class="bg-white border-t mt-12">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
<p class="text-center text-sm text-gray-600">
Data Request Management System 2025
</p>
</div>
</div>
</body>
</html>