-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
620 lines (557 loc) · 32.1 KB
/
index.html
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
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Workflow Editor</title>
<link href="assets/index.css" rel="stylesheet" type="text/css" />
<link href="assets/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<meta content="width=device-width, initial-scale=1" name="viewport" />
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;500&display=swap" rel="stylesheet">
<script src="lib/index.js" type="module"></script>
<script type="module">
import { allowComponentDrop } from "./lib/index.js";
import { allowPageDrop } from "./lib/index.js";
import { dragComponent } from "./lib/index.js";
import { dragPage } from "./lib/index.js";
import { dropComponent } from "./lib/index.js";
import { dropPage } from "./lib/index.js";
import { onDragEnd } from "./lib/index.js";
window.allowComponentDrop = allowComponentDrop;
window.allowPageDrop = allowPageDrop;
window.dragComponent = dragComponent;
window.dragPage = dragPage;
window.dropComponent = dropComponent;
window.dropPage = dropPage;
window.onDragEnd = onDragEnd;
</script>
</head>
<body class="darkMode">
<!-- PAGE CARD -->
<section class="page-card hidden" id="template-page-card" ondrop="dropPage(event)" ondragover="allowPageDrop(event)">
<div class="card page-card-header" draggable="true" ondragstart="dragPage(event)" ondragend="onDragEnd()">
<div class="page-card-label">
<h1 contenteditable="true" onclick="event.stopPropagation();"></h1>
<h2></h2>
</div>
<div class="card-buttons-container">
<svg class="card-button move-left-button" viewBox="0 0 25 26" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="12.5" cy="13" r="12.5" />
<path d="M21 13.5L8 12.5L11 9.5L4 13.5L11 17.5L8 14.5L21 13.5Z" fill="white" stroke="white" stroke-width="2"
stroke-linejoin="round" />
</svg>
<svg class="card-button move-right-button" viewBox="0 0 25 26" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="12.5" cy="13" r="12.5" />
<path d="M4 13.5L17 12.5L14 9.5L21 13.5L14 17.5L17 14.5L4 13.5Z" fill="white" stroke="white" stroke-width="2"
stroke-linejoin="round" />
</svg>
<svg class="card-button delete-button" viewBox="0 0 25 26" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="12.5" cy="13" r="12.5" />
<path d="M6 6.5L12.5 11.5L19 6.5L14 13L19 19.5L12.5 14.5L6 19.5L11 13L6 6.5Z" fill="white" stroke="white"
stroke-width="1.5" stroke-linejoin="round" />
</svg>
</div>
</div>
<div class="card settings-card" ondrop="dropComponent(event)" ondragover="allowComponentDrop(event)">
<div class="component-card-header">
<h2>Page Settings</h2>
</div>
<div class="settings-card-fields">
<span class="prop-input" style="--label: 'Default Link'">
<img class="card-button info-button" src="assets/info.png" />
<select class="prop-defaultLink drop-down link-selector">
</select>
<button class="goto-button">Goto</button>
</span>
<span class="prop-input" style="--label: 'Is Diagnosis Page?'">
<img class="card-button info-button" src="assets/info.png" />
<div class="prop-isDiagnosisPage slider-button">
<div class="slider-knob"></div>
</div>
</span>
</div>
<div class="page-error-container"></div>
</div>
<div class="add-component-button add-button">
<svg width="40" height="40" viewBox="5 5 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="25" cy="25" r="17.5" fill="#E2E2E2" />
<path
d="M24.5056 14.8081H26.1218L26.1218 24.5056H35.8193L35.8193 26.1218L26.1218 26.1218V35.8193H24.5056V26.1218L14.8081 26.1218L14.8081 24.5056L24.5056 24.5056L24.5056 14.8081Z"
fill="white" stroke="white" stroke-width="2" stroke-linejoin="round" />
</svg>
</div>
</section>
<!-- NEW PAGE COMPONENT -->
<div class="card component-card new-component-card hidden" id="template-new-component" ondrop="dropComponent(event)"
ondragover="allowComponentDrop(event)">
<select class="component-type drop-down">
<option value="TextInput">Text Input</option>
<option value="MultipleChoice">Multiple Choice</option>
<option value="MediaItem">Media Item</option>
<option value="Paragraph">Paragraph</option>
<option value="Comparison">Comparison Logic</option>
<option value="Selection">Selection Logic</option>
<option value="Validation">Validation Logic</option>
<option value="Button">Button</option>
<option value="Counter">Counter</option>
</select>
<button class="create-component">Create</button>
<h2>New Component</h2>
</div>
<!-- =============== -->
<!-- PAGE COMPONENTS -->
<!-- PARAGRAPH PAGE COMPONENT -->
<div class="card component-card hidden" id="template-paragraph-component" ondrop="dropComponent(event)"
ondragover="allowComponentDrop(event)">
<div class="component-card-header" draggable="true" ondragstart="dragComponent(event)" ondragend="onDragEnd()">
<div>
<h1>Paragraph</h1>
<h2>Page Component</h2>
</div>
<svg class="card-button delete-component-button" viewBox="0 0 25 26" fill="none"
xmlns="http://www.w3.org/2000/svg">
<circle cx="12.5" cy="13" r="12.5" />
<path d="M6 6.5L12.5 11.5L19 6.5L14 13L19 19.5L12.5 14.5L6 19.5L11 13L6 6.5Z" fill="white" stroke="white"
stroke-width="2" stroke-linejoin="round" />
</svg>
</div>
<div class="component-card-fields">
<span class="prop-input" style="--label: 'Paragraph'">
<img class="card-button info-button" src="assets/info.png" />
<textarea type="text" class="prop-text"
placeholder="e.g. Give the first dose of antibiotic injection, then..."></textarea>
</span>
</div>
</div>
<!-- MEDIA ITEM PAGE COMPONENT -->
<div class="card component-card hidden" id="template-media-item-component" ondrop="dropComponent(event)"
ondragover="allowComponentDrop(event)">
<div class="component-card-header" draggable="true" ondragstart="dragComponent(event)" ondragend="onDragEnd()">
<div>
<h1>Media Item</h1>
<h2>Page Component</h2>
</div>
<svg class="card-button delete-component-button" viewBox="0 0 25 26" fill="none"
xmlns="http://www.w3.org/2000/svg">
<circle cx="12.5" cy="13" r="12.5" />
<path d="M6 6.5L12.5 11.5L19 6.5L14 13L19 19.5L12.5 14.5L6 19.5L11 13L6 6.5Z" fill="white" stroke="white"
stroke-width="2" stroke-linejoin="round" />
</svg>
</div>
<div class="component-card-fields">
<span class="prop-input" style="--label: 'File Name'">
<img class="card-button info-button" src="assets/info.png" />
<input type="text" class="prop-fileName" placeholder="e.g. chest_indrawing.mp4">
</span>
<span class="prop-input optional" style="--label: 'Text Label'">
<img class="card-button info-button" src="assets/info.png" />
<input type="text" class="prop-label" placeholder="e.g. 'Example of chest indrawing.'">
</span>
</div>
</div>
<!-- MULTIPLE CHOICE PAGE COMPONENT -->
<div class="card component-card hidden" id="template-multiple-choice-component" ondrop="dropComponent(event)"
ondragover="allowComponentDrop(event)">
<div class="component-card-header" draggable="true" ondragstart="dragComponent(event)" ondragend="onDragEnd()">
<div>
<h1>Multiple Choice</h1>
<h2>Page Component</h2>
</div>
<svg class="card-button delete-component-button" viewBox="0 0 25 26" fill="none"
xmlns="http://www.w3.org/2000/svg">
<circle cx="12.5" cy="13" r="12.5" />
<path d="M6 6.5L12.5 11.5L19 6.5L14 13L19 19.5L12.5 14.5L6 19.5L11 13L6 6.5Z" fill="white" stroke="white"
stroke-width="2" stroke-linejoin="round" />
</svg>
</div>
<div class="component-card-fields">
<span class="prop-input" style="--label: 'Question Prompt'">
<img class="card-button info-button" src="assets/info.png" />
<input type="text" class="prop-label" placeholder="e.g. 'What symptoms is the child exhibiting?'">
</span>
<span class="prop-input" style="--label: 'valueID'">
<img class="card-button info-button" src="assets/info.png" />
<input type="text" class="prop-valueID" placeholder="This component's unique identifier">
</span>
<span class="prop-input" style="--label: 'Is Multiselect?'">
<img class="card-button info-button" src="assets/info.png" />
<div class="prop-multiselect slider-button">
<div class="slider-knob"></div>
</div>
</span>
</div>
<div class="card card-subcomponents">
<svg class="add-subcomponent-button card-button" viewBox="5 5 40 40" fill="none"
xmlns="http://www.w3.org/2000/svg">
<circle cx="25" cy="25" r="17.5" fill="#E2E2E2" />
<path
d="M24.5056 14.8081H26.1218L26.1218 24.5056H35.8193L35.8193 26.1218L26.1218 26.1218V35.8193H24.5056V26.1218L14.8081 26.1218L14.8081 24.5056L24.5056 24.5056L24.5056 14.8081Z"
fill="white" stroke="white" stroke-width="2" stroke-linejoin="round" />
</svg>
</div>
</div>
<!-- CHOICE COMPONENT -->
<div class="sub-card component-card hidden" id="template-choice-component">
<div class="component-card-header">
<div>
<h1>Choice</h1>
<h2>Subcomponent</h2>
</div>
<svg class="card-button delete-component-button" viewBox="0 0 25 26" fill="none"
xmlns="http://www.w3.org/2000/svg">
<circle cx="12.5" cy="13" r="12.5" />
<path d="M6 6.5L12.5 11.5L19 6.5L14 13L19 19.5L12.5 14.5L6 19.5L11 13L6 6.5Z" fill="white" stroke="white"
stroke-width="2" stroke-linejoin="round" />
</svg>
</div>
<div class="component-card-fields">
<span class="prop-input" style="--label: 'Display Text'">
<img class="card-button info-button" src="assets/info.png" />
<input type="text" class="prop-text" placeholder="Text this choice displays">
</span>
<span class="prop-input" style="--label: 'Option Value'">
<img class="card-button info-button" src="assets/info.png" />
<input type="text" class="prop-value" placeholder="Value this choice corresponds to">
</span>
<span class="prop-input optional" style="--label: 'Page Link'">
<img class="card-button info-button" src="assets/info.png" />
<select class="prop-link drop-down link-selector optional">
</select>
<button class="goto-button">Goto</button>
</span>
</div>
</div>
<!-- TEXT INPUT PAGE COMPONENT -->
<div class="card component-card hidden" id="template-text-input-component" ondrop="dropComponent(event)"
ondragover="allowComponentDrop(event)">
<div class="component-card-header" draggable="true" ondragstart="dragComponent(event)" ondragend="onDragEnd()">
<div>
<h1>Text Input</h1>
<h2>Page Component</h2>
</div>
<svg class="card-button delete-component-button" viewBox="0 0 25 26" fill="none"
xmlns="http://www.w3.org/2000/svg">
<circle cx="12.5" cy="13" r="12.5" />
<path d="M6 6.5L12.5 11.5L19 6.5L14 13L19 19.5L12.5 14.5L6 19.5L11 13L6 6.5Z" fill="white" stroke="white"
stroke-width="2" stroke-linejoin="round" />
</svg>
</div>
<div class="component-card-fields">
<span class="prop-input" style="--label: 'Text Prompt'">
<img class="card-button info-button" src="assets/info.png" />
<input type="text" class="prop-label" placeholder="e.g. 'Enter the child's weight:'">
</span>
<span class="prop-input" style="--label: 'Input Type'">
<img class="card-button info-button" src="assets/info.png" />
<input type="text" class="prop-type" placeholder="e.g. 'numeric' or 'text'">
</span>
<span class="prop-input" style="--label: 'valueID'">
<img class="card-button info-button" src="assets/info.png" />
<input type="text" class="prop-valueID" placeholder="This component's unique identifier">
</span>
<span class="prop-input optional" style="--label: 'Units Label'">
<img class="card-button info-button" src="assets/info.png" />
<input type="text" class="prop-units">
</span>
<span class="prop-input optional" style="--label: 'Default Value'">
<img class="card-button info-button" src="assets/info.png" />
<input type="text" class="prop-defaultValue">
</span>
</div>
</div>
<!-- BUTTON PAGE COMPONENT -->
<div class="card component-card hidden" id="template-button-component" ondrop="dropComponent(event)"
ondragover="allowComponentDrop(event)">
<div class="component-card-header" draggable="true" ondragstart="dragComponent(event)" ondragend="onDragEnd()">
<div>
<h1>Button</h1>
<h2>Page Component</h2>
</div>
<svg class="card-button delete-component-button" viewBox="0 0 25 26" fill="none"
xmlns="http://www.w3.org/2000/svg">
<circle cx="12.5" cy="13" r="12.5" />
<path d="M6 6.5L12.5 11.5L19 6.5L14 13L19 19.5L12.5 14.5L6 19.5L11 13L6 6.5Z" fill="white" stroke="white"
stroke-width="2" stroke-linejoin="round" />
</svg>
</div>
<div class="component-card-fields">
<span class="prop-input" style="--label: 'Button Text'">
<img class="card-button info-button" src="assets/info.png" />
<input type="text" class="prop-text" placeholder="e.g. 'Skip'">
</span>
<span class="prop-input optional" style="--label: 'Text Hint'">
<img class="card-button info-button" src="assets/info.png" />
<input type="text" class="prop-hint">
</span>
<span class="prop-input" style="--label: 'Destination Page'">
<img class="card-button info-button" src="assets/info.png" />
<select class="prop-link drop-down link-selector">
</select>
<button class="goto-button">Goto</button>
</span>
</div>
</div>
<!-- COUNTER COMPONENT -->
<div class="card component-card hidden" id="template-counter-component" ondrop="dropComponent(event)"
ondragover="allowComponentDrop(event)">
<div class="component-card-header" draggable="true" ondragstart="dragComponent(event)" ondragend="onDragEnd()">
<div>
<h1>Counter</h1>
<h2>Page Component</h2>
</div>
<svg class="card-button delete-component-button" viewBox="0 0 25 26" fill="none"
xmlns="http://www.w3.org/2000/svg">
<circle cx="12.5" cy="13" r="12.5" />
<path d="M6 6.5L12.5 11.5L19 6.5L14 13L19 19.5L12.5 14.5L6 19.5L11 13L6 6.5Z" fill="white" stroke="white"
stroke-width="2" stroke-linejoin="round" />
</svg>
</div>
<div class="component-card-fields">
<span class="prop-input" style="--label: 'Counter Title'">
<img class="card-button info-button" src="assets/info.png" />
<input type="text" class="prop-title" placeholder="e.g. Respiratory Rate">
</span>
<span class="prop-input optional" style="--label: 'Text Hint'">
<img class="card-button info-button" src="assets/info.png" />
<input type="text" class="prop-hint"
placeholder="e.g. To calculate the respiratory rate, tap each time the child inhales.">
</span>
<span class="prop-input" style="--label: 'Time Limit'">
<img class="card-button info-button" src="assets/info.png" />
<input type="number" min="0" pattern="[0-9]+" class="prop-timeLimit" placeholder="Max assessment length">
</span>
<span class="prop-input" style="--label: 'valueID'">
<img class="card-button info-button" src="assets/info.png" />
<input type="text" class="prop-valueID" placeholder="This component's unique identifier">
</span>
<span class="prop-input" style="--label: 'Offer Manual Input?'">
<img class="card-button info-button" src="assets/info.png" />
<div class="prop-offerManualInput slider-button">
<div class="slider-knob"></div>
</div>
</span>
</div>
</div>
<!-- ================ -->
<!-- LOGIC COMPONENTS -->
<!-- COMPARISON LOGIC COMPONENT -->
<div class="card component-card hidden" id="template-comparison-component" ondrop="dropComponent(event)"
ondragover="allowComponentDrop(event)">
<div class="component-card-header" draggable="true" ondragstart="dragComponent(event)" ondragend="onDragEnd()">
<div>
<h1>Comparison</h1>
<h2>Logic Component</h2>
</div>
<svg class="card-button delete-component-button" viewBox="0 0 25 26" fill="none"
xmlns="http://www.w3.org/2000/svg">
<circle cx="12.5" cy="13" r="12.5" />
<path d="M6 6.5L12.5 11.5L19 6.5L14 13L19 19.5L12.5 14.5L6 19.5L11 13L6 6.5Z" fill="white" stroke="white"
stroke-width="2" stroke-linejoin="round" />
</svg>
</div>
<h3 class="comparison-logic-preview"></h3>
<div class="component-card-fields">
<span class="prop-input" style="--label: 'Comparison Type'">
<img class="card-button info-button" src="assets/info.png" />
<input type="text" class="prop-type" placeholder=">, <, >=, <=, or =">
</span>
<span class="prop-input" style="--label: 'Threshold Value'">
<img class="card-button info-button" src="assets/info.png" />
<input type="text" class="prop-threshold" placeholder="e.g. 37.2">
</span>
<span class="prop-input" style="--label: 'Target Component'">
<img class="card-button info-button" src="assets/info.png" />
<input type="text" class="prop-targetValueID" placeholder="The valueID to compare">
</span>
<span class="prop-input" style="--label: 'Satisfied Link'">
<img class="card-button info-button" src="assets/info.png" />
<select class="prop-satisfiedLink drop-down link-selector">
</select>
<button class="goto-button">Goto</button>
</span>
</div>
</div>
<!-- SELECTION LOGIC COMPONENT -->
<div class="card component-card hidden" id="template-selection-component" ondrop="dropComponent(event)"
ondragover="allowComponentDrop(event)">
<div class="component-card-header" draggable="true" ondragstart="dragComponent(event)" ondragend="onDragEnd()">
<div>
<h1>Selection</h1>
<h2>Logic Component</h2>
</div>
<svg class="card-button delete-component-button" viewBox="0 0 25 26" fill="none"
xmlns="http://www.w3.org/2000/svg">
<circle cx="12.5" cy="13" r="12.5" />
<path d="M6 6.5L12.5 11.5L19 6.5L14 13L19 19.5L12.5 14.5L6 19.5L11 13L6 6.5Z" fill="white" stroke="white"
stroke-width="2" stroke-linejoin="round" />
</svg>
</div>
<div class="component-card-fields">
<span class="prop-input" style="--label: 'Selection Type'">
<img class="card-button info-button" src="assets/info.png" />
<input type="text" class="prop-type" placeholder="e.g. 'at_least_one', or 'none_selected'">
</span>
<span class="prop-input" style="--label: 'Target Multiple Choice'">
<img class="card-button info-button" src="assets/info.png" />
<input type="text" class="prop-targetValueID" placeholder="The valueID to compare">
</span>
<span class="prop-input" style="--label: 'Satisfied Link'">
<img class="card-button info-button" src="assets/info.png" />
<select class="prop-satisfiedLink drop-down link-selector">
</select>
<button class="goto-button">Goto</button>
</span>
</div>
</div>
<!-- VALIDATION LOGIC COMPONENT -->
<div class="card component-card hidden" id="template-validation-component" ondrop="dropComponent(event)"
ondragover="allowComponentDrop(event)">
<div class="component-card-header" draggable="true" ondragstart="dragComponent(event)" ondragend="onDragEnd()">
<div>
<h1>Validation</h1>
<h2>Logic Component</h2>
</div>
<svg class="card-button delete-component-button" viewBox="0 0 25 26" fill="none"
xmlns="http://www.w3.org/2000/svg">
<circle cx="12.5" cy="13" r="12.5" />
<path d="M6 6.5L12.5 11.5L19 6.5L14 13L19 19.5L12.5 14.5L6 19.5L11 13L6 6.5Z" fill="white" stroke="white"
stroke-width="2" stroke-linejoin="round" />
</svg>
</div>
<h3 class="comparison-logic-preview"></h3>
<div class="component-card-fields">
<span class="prop-input" style="--label: 'Comparison Type'">
<img class="card-button info-button" src="assets/info.png" />
<input type="text" class="prop-type" placeholder=">, <, >=, <=, or =">
</span>
<span class="prop-input" style="--label: 'Threshold Value'">
<img class="card-button info-button" src="assets/info.png" />
<input type="text" class="prop-threshold" placeholder="e.g. 37.2">
</span>
<span class="prop-input" style="--label: 'Target Component'">
<img class="card-button info-button" src="assets/info.png" />
<input type="text" class="prop-targetValueID" placeholder="The valueID to compare">
</span>
</div>
</div>
<!-- ================= -->
<!-- BUTTONS & TOOLTIP -->
<div id="add-page-button" class="add-button">
<svg width="55" height="55" viewBox="5 5 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="25" cy="25" r="17.5" fill="#E2E2E2" />
<path
d="M24.5056 14.8081H26.1218L26.1218 24.5056H35.8193L35.8193 26.1218L26.1218 26.1218V35.8193H24.5056V26.1218L14.8081 26.1218L14.8081 24.5056L24.5056 24.5056L24.5056 14.8081Z"
fill="white" stroke="white" stroke-width="2" stroke-linejoin="round" />
</svg>
</div>
<img class="util-button" id="go-back-button" style="--label: Go Back" src="assets/go_back.png" />
<section id="utility-section" class="minimized">
<svg class="util-button" id="toggle-menu-button" viewBox="0 0 100 100" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path d="M25 32H75M25 50H75M25 68H75" stroke="#6FC387" stroke-width="5" stroke-linecap="round" />
</svg>
<!-- DARK MODE BUTTON -->
<img class="util-button" id="dark-mode-button" style="--label: Change Theme" src="assets/dark_mode.png" />
<!-- LIGHT MODE BUTTON -->
<img class="util-button" id="light-mode-button" style="--label: Change Theme" src="assets/light_mode.png" />
<!-- EXPORT BUTTON -->
<img class="util-button" id="export-button" style="--label: Upload Workflow" src="assets/export.png" />
<!-- RENAME BUTTON -->
<svg class="util-button" id="rename-button" style="--label: Rename Workflow" viewBox="0 0 100 100" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M75.0583 79.6745L29.6488 87.0211C27.1954 87.4181 24.8847 85.751 24.4878 83.2976L14.5859 22.0934C14.189 19.64 15.856 17.3294 18.3094 16.9325L51.873 11.5024C52.4826 11.4038 53.1064 11.5513 53.6072 11.9127L69.8602 23.639C70.361 24.0003 70.6978 24.5458 70.7964 25.1554L78.7819 74.5136C79.1788 76.967 77.5117 79.2776 75.0583 79.6745Z"
fill="#ECF4EE" stroke="#6FC387" stroke-width="5" class="needs-dark-fill" />
<path d="M51.6863 9.98865L53.7625 22.8218C54.2035 25.5478 56.7709 27.4001 59.4969 26.9591L72.33 24.8828"
stroke="#6FC387" stroke-width="5" />
<path fill-rule="evenodd" clip-rule="evenodd"
d="M74.0186 29.4157L77.6599 51.9193L71.0308 57.2935L67 35.1978L74.0186 29.4157Z" fill="#ECF4EE"
class="needs-dark-fill" />
<path
d="M46.7594 68.193L39.4975 68.9959L42.0237 62.1404C42.6019 60.5713 43.6057 59.1944 44.9226 58.164L64.7858 42.6227L67.7777 40.2818L84.5275 27.1764C86.2674 25.8151 88.7814 26.122 90.1427 27.8619L91.6067 29.733C92.968 31.4729 92.6611 33.9869 90.9212 35.3482L74.1714 48.4536L71.1795 50.7945L51.3164 66.3357C49.9994 67.3662 48.4214 68.0093 46.7594 68.193Z"
fill="#ECF4EE" stroke="#6FC387" stroke-width="2" class="needs-dark-fill" />
<path d="M44.4691 69.349L38.141 70.0486L40.3423 64.0746C42.9829 65.1521 43.8324 66.3584 44.4691 69.349Z"
fill="#6FC387" />
<path
d="M79.0416 31.4602L80.3858 33.1827L45.8425 60.21L45.0793 59.7059C44.5092 59.3295 44.4761 58.5049 45.0142 58.0839L79.0416 31.4602ZM48.1957 62.1843C48.0053 61.941 47.7754 61.72 47.4823 61.4664L81.6172 34.7586L82.8497 36.3337L48.7158 63.0407C48.5428 62.6999 48.385 62.4262 48.1957 62.1843ZM49.54 64.9352L84.0831 37.9081L85.4353 39.632L51.4069 66.2564C50.869 66.6773 50.0768 66.4471 49.8483 65.8034L49.54 64.9352Z"
stroke="#6FC387" stroke-width="1" />
<path
d="M77.0062 31.7832L79.9981 29.4423C83.7638 32.6324 85.4336 34.7665 87.6242 39.1892L84.6323 41.53C82.4417 37.1074 80.7719 34.9733 77.0062 31.7832Z"
fill="#6FC387" />
</svg>
<!-- VALIDATE BUTTON -->
<svg class="util-button" id="validate-button" style="--label: Error Check" viewBox="-2.5 0 100 100" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M16.5 23C16.5 20.5147 18.5147 18.5 21 18.5H54.1005C55.294 18.5 56.4386 18.9741 57.2825 19.818L59.0503 18.0503L57.2825 19.818L70.182 32.7175C71.0259 33.5614 71.5 34.706 71.5 35.8995V85C71.5 87.4853 69.4853 89.5 67 89.5H21C18.5147 89.5 16.5 87.4853 16.5 85V23Z"
fill="#ECF4EE" stroke="#6FC387" stroke-width="5" class="needs-dark-fill" />
<path
d="M25.5 14C25.5 11.5147 27.5147 9.5 30 9.5H64C64.6175 9.5 65.2098 9.74532 65.6465 10.182L79.818 24.3536C80.2547 24.7902 80.5 25.3825 80.5 26V76C80.5 78.4853 78.4853 80.5 76 80.5H30C27.5147 80.5 25.5 78.4853 25.5 76V14Z"
fill="#ECF4EE" stroke="#6FC387" stroke-width="5" class="needs-dark-fill" />
<path d="M64 8V21C64 23.7614 66.2386 26 69 26H82" stroke="#6FC387" stroke-width="5" />
<path
d="M54 39C47.1948 45.9721 45.7247 48.5235 42 55.5479C40.1626 52.8598 38.951 51.4893 36 49.6379C39.2157 53.4398 40.4184 55.78 42.4313 60C45.9031 51.1947 47.9231 46.3003 54 39Z"
fill="#6FC387" stroke="#6FC387" stroke-width="3" stroke-linejoin="round" />
<path
d="M58.124 44.2371C58.0413 43.6997 58 43.1521 58 42.5941C58.0207 42.0361 58.124 41.4884 58.31 40.9511C58.5373 40.2484 58.9093 39.6284 59.426 39.0911C59.9427 38.5538 60.5317 38.1301 61.193 37.8201C61.8957 37.4894 62.6087 37.2621 63.332 37.1381C64.076 36.9934 64.7993 36.9624 65.502 37.0451C66.2253 37.1278 66.9176 37.3138 67.579 37.6031C68.261 37.8718 68.9016 38.2644 69.501 38.7811C70.1416 39.3391 70.617 39.9901 70.927 40.7341C71.2576 41.4574 71.4333 42.2117 71.454 42.9971C71.4953 43.7824 71.4023 44.5677 71.175 45.3531C70.9683 46.1177 70.648 46.8307 70.214 47.4921C70.214 47.4921 70.2036 47.5127 70.183 47.5541C69.8316 48.0294 69.4286 48.4634 68.974 48.856C68.5193 49.228 68.0956 49.631 67.703 50.065C67.2483 50.5404 66.9796 51.026 66.897 51.522C66.8143 51.9974 66.7316 52.5347 66.649 53.134C66.587 53.7127 66.432 54.219 66.184 54.653C65.9566 55.0664 65.5226 55.2627 64.882 55.242C64.448 55.2214 64.1173 55.087 63.89 54.839C63.6833 54.5704 63.5283 54.2604 63.425 53.909C63.3423 53.537 63.3113 53.1547 63.332 52.762C63.3526 52.3487 63.3836 51.987 63.425 51.677C63.549 50.9537 63.7763 50.2717 64.107 49.631C64.4376 48.9697 64.8406 48.3497 65.316 47.7711C65.5846 47.4611 65.8533 47.1821 66.122 46.9341C66.3906 46.6654 66.6386 46.3864 66.866 46.0971C67.0933 45.8077 67.2896 45.4977 67.455 45.1671C67.6203 44.8364 67.734 44.4541 67.796 44.0201C67.858 43.6274 67.827 43.2347 67.703 42.8421C67.579 42.4287 67.393 42.0671 67.145 41.7571C66.897 41.4264 66.5973 41.1577 66.246 40.9511C65.8946 40.7237 65.5123 40.5997 65.099 40.5791C64.727 40.5584 64.3343 40.6101 63.921 40.7341C63.5076 40.8374 63.1253 41.0131 62.774 41.2611C62.4227 41.4884 62.1333 41.7674 61.906 42.0981C61.6993 42.4287 61.6063 42.8007 61.627 43.2141C61.6477 43.4621 61.689 43.7204 61.751 43.9891C61.8337 44.2371 61.8853 44.4851 61.906 44.7331C61.9473 44.9604 61.937 45.1877 61.875 45.4151C61.8337 45.6424 61.6993 45.8594 61.472 46.0661C61.1 46.4174 60.728 46.5931 60.356 46.5931C59.984 46.5724 59.643 46.4484 59.333 46.2211C59.023 45.9937 58.7543 45.7044 58.527 45.3531C58.3203 44.9811 58.186 44.6091 58.124 44.2371ZM67.052 59.706C67.052 60.3053 66.8246 60.8427 66.37 61.318C65.936 61.7727 65.4296 62 64.851 62C64.293 62 63.797 61.7727 63.363 61.318C62.929 60.822 62.712 60.2847 62.712 59.706C62.712 59.0653 62.929 58.528 63.363 58.094C63.797 57.6187 64.293 57.381 64.851 57.381C65.4296 57.381 65.936 57.6187 66.37 58.094C66.8246 58.5487 67.052 59.086 67.052 59.706Z"
fill="#6FC387" />
</svg>
<!-- IMPORT BUTTON -->
<img class="util-button" id="import-button" style="--label: Sever Import" src="assets/import.png" />
<!-- IMPORT FROM FILE BUTTON -->
<!-- <img class="util-button" id="file-import-button" style="--label: File Import" src="assets/file_import.png"/> -->
<input type="file" id="importer" style="display:none" />
<svg class="util-button" id="file-import-button" style="--label: File Import" viewBox="0 0 100 100" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M21 18.5H54.1005C55.294 18.5 56.4386 18.9741 57.2825 19.818L70.182 32.7175C71.0259 33.5614 71.5 34.706 71.5 35.8995V85C71.5 87.4853 69.4853 89.5 67 89.5H21C18.5147 89.5 16.5 87.4853 16.5 85V23C16.5 20.5147 18.5147 18.5 21 18.5Z"
fill="#ECF4EE" stroke="#6FC387" stroke-width="5" class="needs-dark-fill" />
<path
d="M76 80.5H30C27.5147 80.5 25.5 78.4853 25.5 76V14C25.5 11.5147 27.5147 9.5 30 9.5H64C64.6175 9.5 65.2098 9.74532 65.6464 10.182L79.818 24.3536C80.2547 24.7902 80.5 25.3825 80.5 26V76C80.5 78.4853 78.4853 80.5 76 80.5Z"
fill="#ECF4EE" stroke="#6FC387" stroke-width="5" class="needs-dark-fill" />
<path d="M64 8V21C64 23.7614 66.2386 26 69 26H82" stroke="#6FC387" stroke-width="5" />
<path d="M62 40V56L83 54.6V41.4L62 40Z" fill="#ECF4EE" class="needs-dark-fill" />
<path d="M92.15 47.575L66.8 45.5562L72.65 39.5L59 47.575L72.65 55.65L66.8 49.5937L92.15 47.575Z" fill="#6FC387"
stroke="#6FC387" stroke-width="4" stroke-linejoin="round" />
</svg>
<!-- DOWNLOAD TO FILE BUTTON -->
<a id="downloader" style="display:none"></a>
<svg class="util-button" id="file-download-button" style="--label: Download Workflow" viewBox="0 0 100 100"
fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M66.0829 91H20C17.2386 91 15 88.7614 15 86V46C15 43.2386 17.2386 41 20 41H28.5C30.1569 41 31.5 42.3431 31.5 44C31.5 45.6569 32.8431 47 34.5 47H67.4267C70.2085 47 72.4554 49.2704 72.4264 52.0521L72.0826 85.0625C72.0483 88.3516 69.3722 91 66.0829 91Z"
fill="#ECF4EE" class="needs-dark-fill" />
<path
d="M66.0829 91H20C17.2386 91 15 88.7614 15 86V46C15 43.2386 17.2386 41 20 41H28.5C30.1569 41 31.5 42.3431 31.5 44C31.5 45.6569 32.8431 47 34.5 47H67.4267C70.2085 47 72.4554 49.2704 72.4264 52.0521L72.0826 85.0625C72.0483 88.3516 69.3722 91 66.0829 91Z"
fill="black" fill-opacity="0.05" />
<path
d="M66.0829 91H20C17.2386 91 15 88.7614 15 86V46C15 43.2386 17.2386 41 20 41H28.5C30.1569 41 31.5 42.3431 31.5 44C31.5 45.6569 32.8431 47 34.5 47H67.4267C70.2085 47 72.4554 49.2704 72.4264 52.0521L72.0826 85.0625C72.0483 88.3516 69.3722 91 66.0829 91Z"
stroke="#6FC387" stroke-width="4" />
<path
d="M68.5056 91H18.8241C17.4206 91 16.4536 89.5921 16.9574 88.282L27.8943 59.8461C28.7855 57.529 31.0118 56 33.4944 56L83.1759 56C84.5794 56 85.5464 57.408 85.0426 58.718L74.1057 87.1539C73.2145 89.471 70.9882 91 68.5056 91Z"
fill="#ECF4EE" stroke="#6FC387" stroke-width="4" class="needs-dark-fill" />
<path d="M55.075 7L53.0562 32.35L47 26.5L55.075 40.15L63.15 26.5L57.0937 32.35L55.075 7Z" fill="#6FC387"
stroke="#6FC387" stroke-width="4" stroke-linejoin="round" />
</svg>
</section>
<dialog id="modal" class="selected">
<div>
<h1>Server Import</h1>
<h2>Select Workflow</h2>
</div>
<div>
<input type="text" placeholder="Enter new name">
<select></select>
<button id="modal-confirm-button">Confirm</button>
<button id="modal-cancel-button">Cancel</button>
</div>
</dialog>
<p id="tooltip">
Loading...
</p>
<section id="info-container">
<p id="info-message"></p>
</section>
</body>
</html>