-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathitsm-showcase.html
More file actions
1077 lines (1043 loc) · 66 KB
/
Copy pathitsm-showcase.html
File metadata and controls
1077 lines (1043 loc) · 66 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
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
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ITSM Workflow Intelligence — Interactive Showcase v25</title>
<style>
/* ── BASE VARS AND RESET ── */
:root{
--bg:#0f1117;--surface:#161b27;--surface2:#1e2535;--border:#2a3347;--border2:#374057;
--text:#e2e8f0;--text2:#9aa5bb;--text3:#7a8fad;
--accent:#3b82f6;--green:#10b981;--amber:#f59e0b;--red:#ef4444;--purple:#8b5cf6;
--sans:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
--mono:'Courier New',monospace;
}
*{margin:0;padding:0;box-sizing:border-box;}
body{background:var(--bg);color:var(--text);font-family:var(--sans);font-size:14px;line-height:1.6;height:100vh;display:flex;flex-direction:column;overflow:hidden;}
/* ── HEADER ── */
.sc-header{position:fixed;top:0;left:0;right:0;z-index:100;height:52px;background:var(--surface);border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;padding:0 20px;}
.sc-header-brand{display:flex;align-items:center;gap:10px;}
.sc-logo{width:28px;height:28px;background:var(--accent);border-radius:6px;display:flex;align-items:center;justify-content:center;}
.sc-logo svg{width:14px;height:14px;stroke:white;fill:none;stroke-width:2.5;}
.sc-header-title{font-size:14px;font-weight:600;color:var(--text);}
.sc-header-sub{font-size:10px;color:var(--text3);}
.sc-header-right{display:flex;align-items:center;gap:12px;}
.sc-nav-hint{font-size:11px;color:var(--text3);}
.sc-btn{padding:8px 16px;border-radius:7px;font-size:13px;font-weight:500;cursor:pointer;border:none;font-family:var(--sans);text-decoration:none;display:inline-flex;align-items:center;gap:6px;}
.sc-btn.primary{background:var(--accent);color:white;}
.sc-btn.primary:hover{background:#2563eb;}
.sc-btn.secondary{background:var(--surface2);color:var(--text);border:1px solid var(--border2);}
/* ── MAIN LAYOUT ── */
.sc-main{display:flex;flex:1;margin-top:52px;overflow:hidden;height:calc(100vh - 52px - 48px);}
/* ── SIDEBAR ── */
.sc-sidebar{width:280px;flex-shrink:0;background:var(--surface);border-right:1px solid var(--border);overflow-y:auto;}
.sc-sidebar-header{padding:16px;border-bottom:1px solid var(--border);}
.sc-brand{display:flex;align-items:center;gap:10px;}
.sc-brand-icon{font-size:20px;}
.sc-brand-name{font-size:13px;font-weight:600;color:var(--text);}
.sc-brand-version{font-size:10px;color:var(--text3);}
.sc-nav{padding:8px 0;}
.sc-section-title{font-size:9px;font-weight:600;text-transform:uppercase;letter-spacing:0.1em;color:var(--text3);padding:12px 16px 4px;}
.sc-nav-item{display:flex;align-items:center;gap:10px;padding:10px 16px;cursor:pointer;transition:all 0.15s;border-left:2px solid transparent;text-decoration:none;color:var(--text2);}
.sc-nav-item:hover{background:rgba(255,255,255,0.03);color:var(--text);}
.sc-nav-icon{font-size:16px;width:22px;text-align:center;flex-shrink:0;}
.sc-nav-text{flex:1;min-width:0;}
.sc-nav-name{font-size:12px;font-weight:500;color:var(--text);line-height:1.3;}
.sc-nav-desc{font-size:10px;color:var(--text3);}
.sc-nav-badge{font-size:9px;padding:1px 6px;border-radius:3px;font-weight:600;background:rgba(16,185,129,0.15);color:var(--green);border:1px solid rgba(16,185,129,0.3);flex-shrink:0;}
/* ── SLIDE CONTENT AREA ── */
.sc-content{flex:1;overflow-y:auto;padding:28px 32px;}
/* ── FEATURE CARDS ── */
.feature-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px;}
.feature-card{background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:16px;}
.feature-icon{font-size:24px;margin-bottom:8px;}
.feature-title{font-size:13px;font-weight:600;color:var(--text);margin-bottom:6px;}
.feature-body{font-size:12px;color:var(--text2);line-height:1.6;}
/* ── SLIDE HERO ── */
.slide-hero{margin-bottom:20px;}
.slide-hero-badge{display:inline-flex;align-items:center;padding:3px 10px;background:rgba(59,130,246,0.12);border:1px solid rgba(59,130,246,0.25);border-radius:4px;font-size:11px;color:var(--accent);font-weight:500;margin-bottom:10px;}
.slide-hero-title{font-size:22px;font-weight:600;color:var(--text);margin-bottom:8px;line-height:1.3;}
.slide-hero-sub{font-size:13px;color:var(--text2);max-width:760px;line-height:1.65;}
/* ── FOOTER ── */
.sc-footer{height:48px;background:var(--surface);border-top:1px solid var(--border);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.sc-footer-nav-item{align-items:center;gap:16px;}
/* ═══════════════════════════════════════
CSS-ONLY TAB SWITCHING — NO JS REQUIRED
Works by double-clicking locally (file://)
═══════════════════════════════════════ */
.tab-radio { position:absolute; opacity:0; pointer-events:none; }
.sc-slide { display:none; }
#tab0:checked ~ .sc-main .sc-content #slide-0 { display:block; }
#tab1:checked ~ .sc-main .sc-content #slide-1 { display:block; }
#tab2:checked ~ .sc-main .sc-content #slide-2 { display:block; }
#tab3:checked ~ .sc-main .sc-content #slide-3 { display:block; }
#tab4:checked ~ .sc-main .sc-content #slide-4 { display:block; }
#tab5:checked ~ .sc-main .sc-content #slide-5 { display:block; }
#tab6:checked ~ .sc-main .sc-content #slide-6 { display:block; }
#tab7:checked ~ .sc-main .sc-content #slide-7 { display:block; }
#tab8:checked ~ .sc-main .sc-content #slide-8 { display:block; }
#tab9:checked ~ .sc-main .sc-content #slide-9 { display:block; }
#tab10:checked ~ .sc-main .sc-content #slide-10 { display:block; }
#tab11:checked ~ .sc-main .sc-content #slide-11 { display:block; }
#tab12:checked ~ .sc-main .sc-content #slide-12 { display:block; }
#tab13:checked ~ .sc-main .sc-content #slide-13 { display:block; }
#tab14:checked ~ .sc-main .sc-content #slide-14 { display:block; }
#tab15:checked ~ .sc-main .sc-content #slide-15 { display:block; }
#tab0:checked ~ .sc-main .sc-sidebar #nav-0 { background:rgba(59,130,246,0.12);color:var(--accent);border-left:2px solid var(--accent); }
#tab1:checked ~ .sc-main .sc-sidebar #nav-1 { background:rgba(59,130,246,0.12);color:var(--accent);border-left:2px solid var(--accent); }
#tab2:checked ~ .sc-main .sc-sidebar #nav-2 { background:rgba(59,130,246,0.12);color:var(--accent);border-left:2px solid var(--accent); }
#tab3:checked ~ .sc-main .sc-sidebar #nav-3 { background:rgba(59,130,246,0.12);color:var(--accent);border-left:2px solid var(--accent); }
#tab4:checked ~ .sc-main .sc-sidebar #nav-4 { background:rgba(59,130,246,0.12);color:var(--accent);border-left:2px solid var(--accent); }
#tab5:checked ~ .sc-main .sc-sidebar #nav-5 { background:rgba(59,130,246,0.12);color:var(--accent);border-left:2px solid var(--accent); }
#tab6:checked ~ .sc-main .sc-sidebar #nav-6 { background:rgba(59,130,246,0.12);color:var(--accent);border-left:2px solid var(--accent); }
#tab7:checked ~ .sc-main .sc-sidebar #nav-7 { background:rgba(59,130,246,0.12);color:var(--accent);border-left:2px solid var(--accent); }
#tab8:checked ~ .sc-main .sc-sidebar #nav-8 { background:rgba(59,130,246,0.12);color:var(--accent);border-left:2px solid var(--accent); }
#tab9:checked ~ .sc-main .sc-sidebar #nav-9 { background:rgba(59,130,246,0.12);color:var(--accent);border-left:2px solid var(--accent); }
#tab10:checked ~ .sc-main .sc-sidebar #nav-10 { background:rgba(59,130,246,0.12);color:var(--accent);border-left:2px solid var(--accent); }
#tab11:checked ~ .sc-main .sc-sidebar #nav-11 { background:rgba(59,130,246,0.12);color:var(--accent);border-left:2px solid var(--accent); }
#tab12:checked ~ .sc-main .sc-sidebar #nav-12 { background:rgba(59,130,246,0.12);color:var(--accent);border-left:2px solid var(--accent); }
#tab13:checked ~ .sc-main .sc-sidebar #nav-13 { background:rgba(59,130,246,0.12);color:var(--accent);border-left:2px solid var(--accent); }
#tab14:checked ~ .sc-main .sc-sidebar #nav-14 { background:rgba(59,130,246,0.12);color:var(--accent);border-left:2px solid var(--accent); }
#tab15:checked ~ .sc-main .sc-sidebar #nav-15 { background:rgba(59,130,246,0.12);color:var(--accent);border-left:2px solid var(--accent); }
.sc-footer-nav-item { display:none; }
#tab0:checked ~ .sc-footer #footer-0 { display:flex; }
#tab1:checked ~ .sc-footer #footer-1 { display:flex; }
#tab2:checked ~ .sc-footer #footer-2 { display:flex; }
#tab3:checked ~ .sc-footer #footer-3 { display:flex; }
#tab4:checked ~ .sc-footer #footer-4 { display:flex; }
#tab5:checked ~ .sc-footer #footer-5 { display:flex; }
#tab6:checked ~ .sc-footer #footer-6 { display:flex; }
#tab7:checked ~ .sc-footer #footer-7 { display:flex; }
#tab8:checked ~ .sc-footer #footer-8 { display:flex; }
#tab9:checked ~ .sc-footer #footer-9 { display:flex; }
#tab10:checked ~ .sc-footer #footer-10 { display:flex; }
#tab11:checked ~ .sc-footer #footer-11 { display:flex; }
#tab12:checked ~ .sc-footer #footer-12 { display:flex; }
#tab13:checked ~ .sc-footer #footer-13 { display:flex; }
#tab14:checked ~ .sc-footer #footer-14 { display:flex; }
#tab15:checked ~ .sc-footer #footer-15 { display:flex; }
/* ── RESPONSIVE ── */
@media(max-width:768px){
.sc-sidebar{width:220px;}
.sc-content{padding:16px;}
.feature-grid{grid-template-columns:1fr;}
.sc-nav-hint{display:none;}
}
@media(max-width:520px){
.sc-sidebar{display:none;}
}
</style>
</head>
<body>
<!-- RADIO INPUTS must be BEFORE sc-main so CSS ~ sibling selector works -->
<input type="radio" class="tab-radio" name="sc-tab" id="tab0"checked>
<input type="radio" class="tab-radio" name="sc-tab" id="tab1">
<input type="radio" class="tab-radio" name="sc-tab" id="tab2">
<input type="radio" class="tab-radio" name="sc-tab" id="tab3">
<input type="radio" class="tab-radio" name="sc-tab" id="tab4">
<input type="radio" class="tab-radio" name="sc-tab" id="tab5">
<input type="radio" class="tab-radio" name="sc-tab" id="tab6">
<input type="radio" class="tab-radio" name="sc-tab" id="tab7">
<input type="radio" class="tab-radio" name="sc-tab" id="tab8">
<input type="radio" class="tab-radio" name="sc-tab" id="tab9">
<input type="radio" class="tab-radio" name="sc-tab" id="tab10">
<input type="radio" class="tab-radio" name="sc-tab" id="tab11">
<input type="radio" class="tab-radio" name="sc-tab" id="tab12">
<input type="radio" class="tab-radio" name="sc-tab" id="tab13">
<input type="radio" class="tab-radio" name="sc-tab" id="tab14">
<input type="radio" class="tab-radio" name="sc-tab" id="tab15">
<!-- HEADER -->
<div class="sc-header">
<div class="sc-header-brand">
<div class="sc-logo">
<svg viewBox="0 0 24 24"><path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/></svg>
</div>
<div>
<div class="sc-header-title">ITSM Workflow Intelligence Tool</div>
<div class="sc-header-sub">Interactive Product Showcase & Training Guide — v25</div>
</div>
</div>
<div class="sc-header-right">
<span class="sc-nav-hint">Click any section in the sidebar to navigate</span>
<a href="https://zeus-17.github.io/itsm-workflow-intelligence/" target="_blank" class="sc-btn primary">Open Tool →</a>
</div>
</div>
<!-- MAIN -->
<div class="sc-main">
<!-- SIDEBAR -->
<div class="sc-sidebar">
<div class="sc-sidebar-header">
<div class="sc-brand">
<div class="sc-brand-icon">⚡</div>
<div>
<div class="sc-brand-name">ITSM Workflow Intelligence</div>
<div class="sc-brand-version">v25 · Interactive Showcase</div>
</div>
</div>
</div>
<div class="sc-nav">
<div class="sc-section-title">THE TOOL</div>
<label class="sc-nav-item" id="nav-0" for="tab0">
<div class="sc-nav-icon">🏠</div>
<div class="sc-nav-text">
<div class="sc-nav-name">Overview</div>
<div class="sc-nav-desc">What it does and who it is for</div>
</div>
</label>
<label class="sc-nav-item" id="nav-1" for="tab1">
<div class="sc-nav-icon">🧭</div>
<div class="sc-nav-text">
<div class="sc-nav-name">Navigation</div>
<div class="sc-nav-desc">Always visible, always obvious</div>
</div>
</label>
<label class="sc-nav-item" id="nav-2" for="tab2">
<div class="sc-nav-icon">🚨</div>
<div class="sc-nav-text">
<div class="sc-nav-name">Starting an Incident</div>
<div class="sc-nav-desc">Three entry paths</div>
</div>
</label>
<label class="sc-nav-item" id="nav-3" for="tab3">
<div class="sc-nav-icon">⚡</div>
<div class="sc-nav-text">
<div class="sc-nav-name">P1 Fast Track</div>
<div class="sc-nav-desc">Bridge pack in 90 seconds</div>
</div>
</label>
<label class="sc-nav-item" id="nav-4" for="tab4">
<div class="sc-nav-icon">📊</div>
<div class="sc-nav-text">
<div class="sc-nav-name">7-Stage Workflow</div>
<div class="sc-nav-desc">Triage to outputs — all connected</div>
</div>
</label>
<label class="sc-nav-item" id="nav-5" for="tab5">
<div class="sc-nav-icon">📥</div>
<div class="sc-nav-text">
<div class="sc-nav-name">Pick Up Incident</div>
<div class="sc-nav-desc">Handoff and context capture</div>
</div>
</label>
<label class="sc-nav-item" id="nav-6" for="tab6">
<div class="sc-nav-icon">🔍</div>
<div class="sc-nav-text">
<div class="sc-nav-name">Observability & SRE</div>
<div class="sc-nav-desc">12 platforms, CVE, runbook</div>
</div>
</label>
<label class="sc-nav-item" id="nav-7" for="tab7">
<div class="sc-nav-icon">📋</div>
<div class="sc-nav-text">
<div class="sc-nav-name">Problem & Change</div>
<div class="sc-nav-desc">Problem record, standalone CHG</div>
</div>
</label>
<label class="sc-nav-item" id="nav-8" for="tab8">
<div class="sc-nav-icon">📈</div>
<div class="sc-nav-text">
<div class="sc-nav-name">Service Reporting</div>
<div class="sc-nav-desc">RAG dashboard, executive narrative</div>
</div>
</label>
<label class="sc-nav-item" id="nav-9" for="tab9">
<div class="sc-nav-icon">🔌</div>
<div class="sc-nav-text">
<div class="sc-nav-name">Integration Hub</div>
<div class="sc-nav-desc">JS API, 9-platform webhooks</div>
</div>
</label>
<div class="sc-section-title">REFERENCE & TRAINING</div>
<label class="sc-nav-item" id="nav-10" for="tab10">
<div class="sc-nav-icon">🔒</div>
<div class="sc-nav-text">
<div class="sc-nav-name">GDPR & Data</div>
<div class="sc-nav-desc">What to enter and what not to</div>
</div>
</label>
<label class="sc-nav-item" id="nav-11" for="tab11">
<div class="sc-nav-icon">🎓</div>
<div class="sc-nav-text">
<div class="sc-nav-name">Training & Scenarios</div>
<div class="sc-nav-desc">7 practice scenarios, start here</div>
</div>
</label>
<div class="sc-section-title">NEW IN V25</div>
<label class="sc-nav-item" id="nav-12" for="tab12">
<div class="sc-nav-icon">🔄</div>
<div class="sc-nav-text">
<div class="sc-nav-name">Standalone Change Request</div>
<div class="sc-nav-desc">ITIL types, risk scoring, rollback</div>
</div><span class="sc-nav-badge badge-new">New</span>
</label>
<label class="sc-nav-item" id="nav-13" for="tab13">
<div class="sc-nav-icon">📖</div>
<div class="sc-nav-text">
<div class="sc-nav-name">Glossary</div>
<div class="sc-nav-desc">130+ terms, org-customisable</div>
</div><span class="sc-nav-badge badge-new">New</span>
</label>
<label class="sc-nav-item" id="nav-14" for="tab14">
<div class="sc-nav-icon">🧠</div>
<div class="sc-nav-text">
<div class="sc-nav-name">Intelligence & Audit Trail</div>
<div class="sc-nav-desc">Decision log, sanitise, progress tracking</div>
</div>
<div class="sc-nav-badge">NEW</div>
</label>
<label class="sc-nav-item" id="nav-15" for="tab15">
<div class="sc-nav-icon">🤖</div>
<div class="sc-nav-text">
<div class="sc-nav-name">Agentic Intelligence</div>
<div class="sc-nav-desc">Pre-flight agent, pulse, pattern detection</div>
</div>
<div class="sc-nav-badge">NEW</div>
</label>
</div>
</div>
<!-- SLIDES -->
<div class="sc-content">
<div class="sc-slide" id="slide-0">
<div class="slide-hero" style="padding:16px 0 22px;">
<div class="slide-hero-badge">⚡ v25 · Production Ready · Single HTML file</div>
<div class="slide-hero-title" style="font-size:22px;">ITSM Workflow Intelligence Tool</div>
<div class="slide-hero-sub">Your operational co-pilot for every stage of an incident. Structured guidance from first alert to service review — incident, problem, change, RCA, retrospective and service review reporting in a single HTML file. Zero dependencies. Works offline. New in v25: a rules-based Pre-flight Review Agent reviews your incident data before outputs are generated, and the War Room Pulse panel keeps every live metric visible at a glance.</div>
</div>
<div class="feature-grid">
<div class="feature-card">
<div class="feature-icon">📋</div>
<div class="feature-title">8 structured outputs</div>
<div class="feature-body">ServiceNow incident, Jira Bug, Jira Story, Confluence PIR, Problem Record, Change Request, RCA Report and Status Page update. All paste-ready. Generated from data you enter once.</div>
</div>
<div class="feature-card">
<div class="feature-icon">⚡</div>
<div class="feature-title">P1 bridge pack in 90 seconds</div>
<div class="feature-body">Five fields. One click. Bridge pack ready, SLA clock running, comms templates generated. Full incident record pre-populated in the background.</div>
</div>
<div class="feature-card">
<div class="feature-icon">🔍</div>
<div class="feature-title">35-check pattern analysis engine</div>
<div class="feature-body">Enter team data for the service review. 35 checks run automatically. Probable cause, interpretation and recommended action for each finding.</div>
</div>
<div class="feature-card">
<div class="feature-icon">📖</div>
<div class="feature-title">130+ term glossary</div>
<div class="feature-body">ITSM/ITIL 4, incident management, SRE, regulatory (FCA, PRA, DORA, ICO, PCI DSS), ServiceNow field API names, Jira, Grafana, Dynatrace. Add your own terms.</div>
</div>
<div class="feature-card">
<div class="feature-icon">🏛</div>
<div class="feature-title">Regulatory alignment built in</div>
<div class="feature-body">ITIL 4, FCA operational resilience, FCA SUP 15, DORA Articles 9 and 17, ICO 72-hour, GDPR Article 5(1)(c), PCI DSS. Guidance surfaces at the right moment.</div>
</div>
<div class="feature-card">
<div class="feature-icon">🧠</div>
<div class="feature-title">Decision log & audit trail</div>
<div class="feature-body">Timestamped decision log captures every key call during the incident and feeds directly into the PIR and timeline. Auto-checklist progress bar tracks post-incident actions. Sanitise export removes sensitive values before sharing.</div>
</div>
</div>
</div>
<div class="sc-slide" id="slide-1">
<div class="slide-hero" style="padding:16px 0 22px;">
<div class="slide-hero-badge">🧭 Navigation</div>
<div class="slide-hero-title" style="font-size:22px;">Always Visible. Always One Click Away.</div>
<div class="slide-hero-sub">A persistent two-tier header means you are never more than one click from anywhere — at Stage 1, Stage 7, or anywhere in between.</div>
</div>
<div class="feature-grid">
<div class="feature-card">
<div class="feature-icon">📌</div>
<div class="feature-title">Fixed header — always visible</div>
<div class="feature-body">The top strip never scrolls away. Full/Lite mode toggle, autosave status, accessibility settings and the settings panel are always reachable.</div>
</div>
<div class="feature-card">
<div class="feature-icon">🔀</div>
<div class="feature-title">Scrollable nav rail — 12 destinations</div>
<div class="feature-body">Incident, Customer Report, P1 Fast Track, Pick Up Incident, Practice Run, Problem Record, Change Request, Glossary, Retrospective, Reporting, Integration Hub — all one click.</div>
</div>
<div class="feature-card">
<div class="feature-icon">⊟</div>
<div class="feature-title">Lite Mode — two fields, one output</div>
<div class="feature-body">Strips the workflow to: observation + severity → ServiceNow output. For P3/P4 tickets. Switch any time — your data is preserved.</div>
</div>
<div class="feature-card">
<div class="feature-icon">💾</div>
<div class="feature-title">Autosave — always on</div>
<div class="feature-body">Every field saves as you type. Click the save indicator to restore your most recent session. Up to 10 named sessions for parallel incidents.</div>
</div>
<div class="feature-card">
<div class="feature-icon">📋</div>
<div class="feature-title">Regulatory status — always in view</div>
<div class="feature-body">The 📋 Reg button in the nav shows regulatory guidance status at a glance. A blue dot appears when the automated monitor detects a new FCA, DORA or ICO publication — passive when guidance is current, visible only when action is needed. Click to see what changed and verify at authoritative source. Monitored weekly via GitHub Actions with zero manual maintenance.</div>
</div>
<div class="feature-card">
<div class="feature-icon">☰</div>
<div class="feature-title">Table of Contents panel</div>
<div class="feature-body">☰ TOC tab fixed below the nav rail lists all 12 workspaces. One click navigates and closes the panel. Keyboard: Alt+A for accessibility, ? for all shortcuts.</div>
</div>
</div>
</div>
<div class="sc-slide" id="slide-2">
<div class="slide-hero" style="padding:16px 0 22px;">
<div class="slide-hero-badge">🚨 Starting an Incident</div>
<div class="slide-hero-title" style="font-size:22px;">The Tool Meets You Where the Incident Starts</div>
<div class="slide-hero-sub">Not every incident starts the same way. Five different entry points route you to the right starting position without re-entering information.</div>
</div>
<div class="feature-grid">
<div class="feature-card">
<div class="feature-icon">🖊</div>
<div class="feature-title">Start new incident — monitoring alert</div>
<div class="feature-body">You spotted it, monitoring alerted you or a colleague flagged it. Begin at Stage 1 Triage. The tool guides you through all 7 stages to structured outputs.</div>
</div>
<div class="feature-card">
<div class="feature-icon">📞</div>
<div class="feature-title">Customer reported — GDPR-safe capture</div>
<div class="feature-body">A customer called, emailed or raised a portal ticket. Pattern detection fires as you type. Case reference replaces customer name throughout every output.</div>
</div>
<div class="feature-card">
<div class="feature-icon">📥</div>
<div class="feature-title">Pick up existing — queue handoff</div>
<div class="feature-body">Paste the INC reference and description — the tool pre-populates Stages 1 and 2 and creates the first reassignment entry with the previous team's investigation notes.</div>
</div>
<div class="feature-card">
<div class="feature-icon">⚡</div>
<div class="feature-title">P1 Fast Track — bridge pack in 90 seconds</div>
<div class="feature-body">Critical incident, no time for process. Five fields, one click. Bridge pack generated, SLA clock running, full record pre-populated.</div>
</div>
<div class="feature-card">
<div class="feature-icon">💡</div>
<div class="feature-title">Pattern detection — as you type</div>
<div class="feature-body">Payment keywords trigger FCA SUP 15 guidance. Authentication terms suggest IAM routing. Security language flags regulatory obligations. All automatic from the observation field.</div>
</div>
<div class="feature-card">
<div class="feature-icon">🎯</div>
<div class="feature-title">Welcome screen routes first-time users</div>
<div class="feature-body">First-time visitors see five choices: new incident, customer report, P1 major incident, explore and train, or Lite Mode. Never shows again after first use.</div>
</div>
</div>
</div>
<div class="sc-slide" id="slide-3">
<div class="slide-hero" style="padding:16px 0 22px;">
<div class="slide-hero-badge">⚡ P1 Fast Track</div>
<div class="slide-hero-title" style="font-size:22px;">Bridge Pack in 90 Seconds</div>
<div class="slide-hero-sub">When a critical incident hits, you do not have time for a 7-stage workflow. Five fields, one click — bridge pack ready, SLA clock running.</div>
</div>
<div class="feature-grid">
<div class="feature-card">
<div class="feature-icon">📝</div>
<div class="feature-title">Five fields only</div>
<div class="feature-body">What is down, who is MIM, bridge/call details, initial diagnosis, users affected. The tool pre-populates the full incident record from these five entries.</div>
</div>
<div class="feature-card">
<div class="feature-icon">⏱</div>
<div class="feature-title">SLA clock with health bar</div>
<div class="feature-body">The P1 countdown shows mm:ss in the final hour. A visual Green → Amber → Red health bar shows SLA consumption at a glance. Browser notification fires at ≤10 minutes remaining.</div>
</div>
<div class="feature-card">
<div class="feature-icon">📋</div>
<div class="feature-title">Complete bridge pack output</div>
<div class="feature-body">MIM, bridge details, impact summary, initial diagnosis, SLA countdown, next update time. Paste-ready for Slack, Teams or email. Formatted for the people on the bridge.</div>
</div>
<div class="feature-card">
<div class="feature-icon">📢</div>
<div class="feature-title">Comms templates ready instantly</div>
<div class="feature-body">Status page message, stakeholder update and customer-facing communication generated alongside the bridge pack. Each formatted for its audience.</div>
</div>
<div class="feature-card">
<div class="feature-icon">🔄</div>
<div class="feature-title">Transfer to full record — one click</div>
<div class="feature-body">When pressure eases, click Transfer. Everything from Fast Track is already in Stages 1 and 2. Continue without re-entering anything.</div>
</div>
<div class="feature-card">
<div class="feature-icon">🔗</div>
<div class="feature-title">Direct URL — Alt+P keyboard shortcut</div>
<div class="feature-body">Bookmark the Fast Track URL or use Alt+P. Add it to your on-call runbook. One keystroke away regardless of where you are in the tool.</div>
</div>
</div>
</div>
<div class="sc-slide" id="slide-4">
<div class="slide-hero" style="padding:16px 0 22px;">
<div class="slide-hero-badge">📊 7-Stage Incident Workflow</div>
<div class="slide-hero-title" style="font-size:22px;">Full 7-Stage Incident Workflow</div>
<div class="slide-hero-sub">Every stage generates structured outputs. Validation ensures nothing is missed. Jump back to any stage — your data persists.</div>
</div>
<div class="feature-grid">
<div class="feature-card">
<div class="feature-icon">1️⃣</div>
<div class="feature-title">Stage 1 — Triage and Classification</div>
<div class="feature-body">Weighted impact scoring across 6 factors. Severity recommendation with override. Smart routing suggestion from observation keywords. 7 smart suggestion rules fire as you type.</div>
</div>
<div class="feature-card">
<div class="feature-icon">2️⃣</div>
<div class="feature-title">Stage 2 — Incident Record</div>
<div class="feature-body">SLA clock with business hours indicator. Pause/hold with reason logging. Full incident description, CI, assignment group. Reassignment tracker with investigation notes at each handoff. Decision log captures timestamped decisions as they happen.</div>
</div>
<div class="feature-card">
<div class="feature-icon">3️⃣</div>
<div class="feature-title">Stage 3 — Major Incident</div>
<div class="feature-body">Bridge pack, MIM checklist, stakeholder communications, regulatory notification prompts. Cadence timer for update intervals. Escalation matrix. Post-incident checklist.</div>
</div>
<div class="feature-card">
<div class="feature-icon">4️⃣</div>
<div class="feature-title">Stage 4 — Problem Record</div>
<div class="feature-body">Reactive, Proactive or Known Error. ServiceNow problem_state field values correct. KEDB entry structured for immediate use. Accessible as a standalone workspace.</div>
</div>
<div class="feature-card">
<div class="feature-icon">5️⃣</div>
<div class="feature-title">Stage 5 — RCA</div>
<div class="feature-body">Guided 5 Whys with prompts that resist stopping at Why 2 or 3. Or switch to Fishbone (Ishikawa) with 6 categories. Both generate a complete structured RCA report.</div>
</div>
<div class="feature-card">
<div class="feature-icon">6️⃣</div>
<div class="feature-title">Stages 6 and 7 — Change and Outputs</div>
<div class="feature-body">Change request with 6-factor risk scoring and rollback decision framework. Stage 7 generates all 8 outputs simultaneously. Export all as one document. Shift handover pack and sanitise export available.</div>
</div>
</div>
</div>
<div class="sc-slide" id="slide-5">
<div class="slide-hero" style="padding:16px 0 22px;">
<div class="slide-hero-badge">📥 Pick Up Existing Incident</div>
<div class="slide-hero-title" style="font-size:22px;">Built for How Teams Actually Work</div>
<div class="slide-hero-sub">Most engineers are not raising incidents from scratch — they are picking up tickets routed to their queue. This mode is built for that handoff.</div>
</div>
<div class="feature-grid">
<div class="feature-card">
<div class="feature-icon">📎</div>
<div class="feature-title">Paste from ServiceNow — auto-populates</div>
<div class="feature-body">Enter the INC reference and paste the description. The tool pre-populates Stage 1 observation and Stage 2 short description. The reference flows into every output.</div>
</div>
<div class="feature-card">
<div class="feature-icon">🔗</div>
<div class="feature-title">Reassignment chain created automatically</div>
<div class="feature-body">The first tracker entry is created from the Pick Up form — previous team, how it arrived, and their investigation notes as the formal handoff record.</div>
</div>
<div class="feature-card">
<div class="feature-icon">🔍</div>
<div class="feature-title">Pattern detection on pasted description</div>
<div class="feature-body">Smart keyword detection fires on the pasted text. Routing suggestions, classification hints and regulatory flags surface immediately from the existing incident text.</div>
</div>
<div class="feature-card">
<div class="feature-icon">📖</div>
<div class="feature-title">Known issues register checked</div>
<div class="feature-body">The tool checks the pasted description against your known issues register. If a match is found, the known error details and workaround appear as a banner.</div>
</div>
<div class="feature-card">
<div class="feature-icon">📊</div>
<div class="feature-title">SLA position preserved</div>
<div class="feature-body">Enter the time the incident was originally raised. The SLA clock reflects actual elapsed time from first detection — not when it reached your team.</div>
</div>
<div class="feature-card">
<div class="feature-icon">✏️</div>
<div class="feature-title">Previous investigation notes carried forward</div>
<div class="feature-body">What the previous team ruled out flows into the outputs. The ServiceNow record shows a complete investigation chain — not just your team's work.</div>
</div>
</div>
</div>
<div class="sc-slide" id="slide-6">
<div class="slide-hero" style="padding:16px 0 22px;">
<div class="slide-hero-badge">🔍 Observability and SRE</div>
<div class="slide-hero-title" style="font-size:22px;">Observability Context & SRE Features</div>
<div class="slide-hero-sub">For engineers, SRE teams and anyone investigating a technical incident. Capture what your monitoring platform shows and keep it with the incident record.</div>
</div>
<div class="feature-grid">
<div class="feature-card">
<div class="feature-icon">📡</div>
<div class="feature-title">12 monitoring platform buttons</div>
<div class="feature-body">Dynatrace, Datadog, Grafana, New Relic, Prometheus, PagerDuty, Opsgenie, Splunk, CloudWatch, Azure Monitor, GCP Operations and generic monitoring.</div>
</div>
<div class="feature-card">
<div class="feature-icon">📏</div>
<div class="feature-title">Metric capture with threshold tracking</div>
<div class="feature-body">Record the metric name, observed value, baseline and threshold. Trend direction shown. Each entry flows into the observability context of the ServiceNow incident record.</div>
</div>
<div class="feature-card">
<div class="feature-icon">📋</div>
<div class="feature-title">Runbook URL field</div>
<div class="feature-body">Capture the runbook URL in observability context. Flows into all outputs and handoffs — ServiceNow incident, Confluence PIR and the reassignment log.</div>
</div>
<div class="feature-card">
<div class="feature-icon">🛡</div>
<div class="feature-title">CVE tracking — DORA Article 9</div>
<div class="feature-body">CVE ID format validation, CVSS score and automatic severity assignment. Satisfies DORA Article 9 ICT risk management requirements for critical vulnerability tracking.</div>
</div>
<div class="feature-card">
<div class="feature-icon">🔧</div>
<div class="feature-title">Self-healing checklist</div>
<div class="feature-body">Common automated recovery actions — cache flush, service restart, circuit breaker reset — with outcome tracking (Triggered / Success / Failed / N/A).</div>
</div>
<div class="feature-card">
<div class="feature-icon">🤖</div>
<div class="feature-title">DORA Article 17 — human review gate</div>
<div class="feature-body">No automated triage fires without human confirmation. The tool satisfies DORA Article 17 requirements for human oversight of automated operational tooling.</div>
</div>
</div>
</div>
<div class="sc-slide" id="slide-7">
<div class="slide-hero" style="padding:16px 0 22px;">
<div class="slide-hero-badge">📋 Problem Record · RCA · Change Request</div>
<div class="slide-hero-title" style="font-size:22px;">The Most Documentation-Heavy Stages — Fully Guided</div>
<div class="slide-hero-sub">Stages 4, 5 and 6 in the incident lifecycle. Each generates a complete paste-ready output. All three are also accessible as standalone workspaces.</div>
</div>
<div class="feature-grid">
<div class="feature-card">
<div class="feature-icon">🔎</div>
<div class="feature-title">Problem Record — ITIL-accurate field values</div>
<div class="feature-body">Reactive, Proactive or Known Error. ServiceNow problem_state set correctly — the actual API value (1 Open, 2 Known Error, 3 Pending Change). KEDB entry structured for immediate use.</div>
</div>
<div class="feature-card">
<div class="feature-icon">🐟</div>
<div class="feature-title">RCA — 5 Whys and Fishbone</div>
<div class="feature-body">Guided 5 Whys with prompts that resist stopping at Why 2 or 3. Or switch to Fishbone (Ishikawa) with 6 categories. Both generate a complete structured RCA report.</div>
</div>
<div class="feature-card">
<div class="feature-icon">⚖️</div>
<div class="feature-title">Change Request — 6-factor risk scoring</div>
<div class="feature-body">Blast radius, complexity, rollback confidence, test coverage, change history and timing — each scored out of 20. Total determines Low / Medium / High / Critical risk band.</div>
</div>
<div class="feature-card">
<div class="feature-icon">🧱</div>
<div class="feature-title">Step builder — implementation and rollback</div>
<div class="feature-body">Build implementation and rollback plans step by step. Each step numbered, removable. A structured list in the ServiceNow CHG record — not a free-text blob.</div>
</div>
<div class="feature-card">
<div class="feature-icon">🛑</div>
<div class="feature-title">Rollback decision framework</div>
<div class="feature-body">Go/No-Go criteria, named decision authority, DBA sign-off and monitoring window — captured and included in the CHG output. The conversation most CABs have verbally but never record.</div>
</div>
<div class="feature-card">
<div class="feature-icon">❄️</div>
<div class="feature-title">Change freeze window detection</div>
<div class="feature-body">Configure freeze dates in Settings. If the planned date falls inside a freeze window, the workspace flags it and prompts for Emergency CHG approval with ECAB reference.</div>
</div>
</div>
</div>
<div class="sc-slide" id="slide-8">
<div class="slide-hero" style="padding:16px 0 22px;">
<div class="slide-hero-badge">📊 Service Review Reporting</div>
<div class="slide-hero-title" style="font-size:22px;">From Data Entry to Board Narrative</div>
<div class="slide-hero-sub">Enter data per team. 35 checks run automatically. Probable causes, interpretations and recommended actions surface instantly. Four narrative styles. Decisions required always leads.</div>
</div>
<div class="feature-grid">
<div class="feature-card">
<div class="feature-icon">⚡</div>
<div class="feature-title">Quick entry mode per team</div>
<div class="feature-body">Six core fields — P1 count, changes total, rollbacks, overdue problems, P1 SLA% and MTTR. Expand to full entry for the complete data set.</div>
</div>
<div class="feature-card">
<div class="feature-icon">🔍</div>
<div class="feature-title">35-check pattern engine</div>
<div class="feature-body">Incident trends, change quality, problem management, SLA trajectory, systemic patterns and YoY comparison — all checked automatically. Probable cause and recommended action per finding.</div>
</div>
<div class="feature-card">
<div class="feature-icon">⚡</div>
<div class="feature-title">Decisions required — always leads</div>
<div class="feature-body">Every narrative style leads with the decisions required section — naming teams, stating what the board needs to decide and by when.</div>
</div>
<div class="feature-card">
<div class="feature-icon">✂️</div>
<div class="feature-title">Sectioned narrative export</div>
<div class="feature-body">Copy individual sections — Decisions Required, RED analysis, pattern findings, trends, forward look. Or copy as Markdown for slides or a Word document.</div>
</div>
<div class="feature-card">
<div class="feature-icon">🎨</div>
<div class="feature-title">Four narrative styles</div>
<div class="feature-body">Governance Committee, Board/Exec, Ops Team and Quick Briefing. Switch without re-entering data.</div>
</div>
<div class="feature-card">
<div class="feature-icon">📊</div>
<div class="feature-title">Incidents by service / component</div>
<div class="feature-body">The period history tab clusters all saved incidents by service name. Click a service to expand its incident history. Bar charts show relative incident volume — identify repeat offenders immediately.</div>
</div>
</div>
</div>
<div class="sc-slide" id="slide-9">
<div class="slide-hero" style="padding:16px 0 22px;">
<div class="slide-hero-badge">🔌 Integration Hub</div>
<div class="slide-hero-title" style="font-size:22px;">Live Data — No Manual Entry Required</div>
<div class="slide-hero-sub">Receive webhook payloads from 9 monitoring platforms. A full JS API lets you pre-populate every field from your own tooling. Engineers review and confirm.</div>
</div>
<div class="feature-grid">
<div class="feature-card">
<div class="feature-icon">📡</div>
<div class="feature-title">9 webhook platforms</div>
<div class="feature-body">Dynatrace, Datadog, PagerDuty, Grafana, New Relic, Prometheus, Opsgenie, VictorOps and generic JSON. Paste a payload and the tool maps severity, service, description and detection time automatically.</div>
</div>
<div class="feature-card">
<div class="feature-icon">⚙️</div>
<div class="feature-title">JS API — window.ITSMTool</div>
<div class="feature-body">A full public API lets your tooling call directly into the tool. window.ITSMTool.loadWebhookPayload() pre-populates any field. Integrate with your ChatOps bot or automation layer.</div>
</div>
<div class="feature-card">
<div class="feature-icon">🗺</div>
<div class="feature-title">Severity mapping — configurable</div>
<div class="feature-body">Configure how Dynatrace AVAILABILITY or Datadog P1 maps to your P1-P4 scale in Settings. Persists across sessions and applies to every payload received.</div>
</div>
<div class="feature-card">
<div class="feature-icon">🔍</div>
<div class="feature-title">Human review gate — DORA Article 17</div>
<div class="feature-body">Automation populates the fields. The engineer reviews and confirms. No automated triage fires without human oversight. Satisfies DORA Article 17 requirements.</div>
</div>
<div class="feature-card">
<div class="feature-icon">🔗</div>
<div class="feature-title">Runbook URL field</div>
<div class="feature-body">Capture the runbook URL in observability context. Flows into all outputs and handoffs. The on-call engineer always has the runbook immediately.</div>
</div>
<div class="feature-card">
<div class="feature-icon">🛡</div>
<div class="feature-title">CVE tracking — DORA Article 9</div>
<div class="feature-body">CVE ID format validation, CVSS score and automatic severity assignment. Satisfies DORA Article 9 ICT risk management requirements for critical vulnerability tracking.</div>
</div>
</div>
</div>
<div class="sc-slide" id="slide-10">
<div class="slide-hero" style="padding:16px 0 22px;">
<div class="slide-hero-badge">🔒 Data and Regulatory Guidance</div>
<div class="slide-hero-title" style="font-size:22px;">What to Enter. What Not To.</div>
<div class="slide-hero-sub">Incident records are operational records, not customer records. GDPR Article 5(1)(c) data minimisation applies at every stage. Regulatory guidance updates automatically from GitHub — guidance text only, no user data ever transmitted.</div>
</div>
<div class="feature-grid">
<div class="feature-card">
<div class="feature-icon">✅</div>
<div class="feature-title">Use — operational identifiers</div>
<div class="feature-body">Case reference (CRM CAS-99887), customer segment, channel, number affected (~340 customers), service/feature name, internal system identifier. All legally safe for incident records.</div>
</div>
<div class="feature-card">
<div class="feature-icon">❌</div>
<div class="feature-title">Do not enter — personal data</div>
<div class="feature-body">Customer names, email addresses, account numbers, payment card data, dates of birth, NI numbers, home addresses. None of these belong in an incident record.</div>
</div>
<div class="feature-card">
<div class="feature-icon">🔔</div>
<div class="feature-title">ICO 72-hour notification window</div>
<div class="feature-body">Data breach scenarios surface an ICO notification prompt with a countdown. Prompts for DPO and Legal engagement. FCA SUP 15 assessment checklist included.</div>
</div>
<div class="feature-card">
<div class="feature-icon">💳</div>
<div class="feature-title">PCI DSS card data warnings</div>
<div class="feature-body">If the incident involves payment card systems, PCI DSS field warnings appear. The tool prompts truncation and masking at point of entry.</div>
</div>
<div class="feature-card">
<div class="feature-icon">📋</div>
<div class="feature-title">FCA SUP 15 operational resilience</div>
<div class="feature-body">Regulatory notification prompts for significant operational incidents. Impact assessment guidance and escalation chain prompts aligned to FCA requirements.</div>
</div>
<div class="feature-card">
<div class="feature-icon">🏦</div>
<div class="feature-title">DORA and BCBS 239</div>
<div class="feature-body">DORA Articles 9 and 17 referenced throughout. BCBS 239 data governance principles referenced in problem record and root cause sections.</div>
</div>
<div class="feature-card">
<div class="feature-icon">🔄</div>
<div class="feature-title">Self-updating regulatory guidance</div>
<div class="feature-body">Regulatory and ITIL content updates automatically in the background. FCA/DORA/GDPR guidance text, platform field notes and ITIL definitions are maintained in a separate JSON file on GitHub — updated when regulations change without touching the tool. Manual 'Check for updates' button available. Organisations host their own content source for jurisdiction-specific guidance. Full offline fallback always active.</div>
</div>
</div>
</div>
<div class="sc-slide" id="slide-11">
<div class="slide-hero" style="padding:16px 0 22px;">
<div class="slide-hero-badge">🎓 Training and Practice</div>
<div class="slide-hero-title" style="font-size:22px;">7 Scenarios. Every Workflow.</div>
<div class="slide-hero-sub">Fictional scenarios pre-fill the form. Work through all stages as normal. Nothing is sent anywhere. Ideal for new practitioners, team training and exploring features.</div>
</div>
<div class="feature-grid">
<div class="feature-card">
<div class="feature-icon">💳</div>
<div class="feature-title">Payment Gateway P1</div>
<div class="feature-body">45,000 users, card payments down, bridge pack needed in 90 seconds. The classic P1 Fast Track scenario. Full 7-stage workflow including major incident, RCA and change request.</div>
</div>
<div class="feature-card">
<div class="feature-icon">🔐</div>
<div class="feature-title">Authentication P2</div>
<div class="feature-body">Intermittent login failures via Okta SSO. Pattern detection fires. Third-party supplier dependency and workaround documentation. Pick Up Incident handoff scenario.</div>
</div>
<div class="feature-card">
<div class="feature-icon">🔄</div>
<div class="feature-title">Failed Deployment — Irreversible Migration</div>
<div class="feature-body">Rollback blocked by a NOT NULL database migration already applied to production. The scenario most engineers mishandle — rollback is not always available.</div>
</div>
<div class="feature-card">
<div class="feature-icon">🗄</div>
<div class="feature-title">Database Replication Lag</div>
<div class="feature-body">Replication lag making reporting data 4 hours stale. No direct customer impact yet — but regulatory reporting deadline at risk.</div>
</div>
<div class="feature-card">
<div class="feature-icon">🛡</div>
<div class="feature-title">Emergency Security Patch — CVE-2024-44000</div>
<div class="feature-body">CVSS 9.8 remote code execution vulnerability. Emergency Change Request workflow: ECAB approval, rollback decision tree, CVE field and risk scoring.</div>
</div>
<div class="feature-card">
<div class="feature-icon">🔴</div>
<div class="feature-title">Customer PII Exposure</div>
<div class="feature-body">Database backup in a public S3 bucket for 72 hours. 12,000 customer records. ICO 72-hour notification window active. FCA SUP 15 assessment.</div>
</div>
<div class="feature-card">
<div class="feature-icon">📊</div>
<div class="feature-title">Service Review — Pattern Analysis</div>
<div class="feature-body">Navigate to the Reporting workspace. Pre-populated with fictional team data. Explore the 35-check pattern engine and executive narrative.</div>
</div>
<div class="feature-card">
<div class="feature-icon">🧭</div>
<div class="feature-title">10-Step Onboarding Tour</div>
<div class="feature-body">Covers every v25 feature: Change Request, Glossary, dark mode, keyboard shortcuts, pattern analysis, SLA pause, field label overrides, routing suggestions, and new features including decision log, TOC panel, SLA health bar, sanitise export and service cluster view. Step 4 introduces the 📋 Reg button and the weekly regulatory monitor.</div>
</div>
</div>
</div>
<div class="sc-slide" id="slide-12">
<div class="slide-hero" style="padding:16px 0 22px;">
<div class="slide-hero-badge">🔄 Standalone Change Request</div>
<div class="slide-hero-title" style="font-size:22px;">Change Request — Without an Incident</div>
<div class="slide-hero-sub">Raise a Change Request independently of the incident workflow. ITIL definitions shown by default. Every field can be overridden to reflect how your organisation actually works.</div>
</div>
<div class="feature-grid">
<div class="feature-card">
<div class="feature-icon">⚡</div>
<div class="feature-title">Emergency CHG — ECAB workflow</div>
<div class="feature-body">Selecting Emergency surfaces the ECAB panel — approval reference number, justification, named approver and approval timestamp. All flow into the CHG output.</div>
</div>
<div class="feature-card">
<div class="feature-icon">🛑</div>
<div class="feature-title">Rollback decision framework</div>
<div class="feature-body">Go/No-Go criteria, named decision authority, DBA sign-off and monitoring window — captured and included in the ServiceNow CHG output. Formally recorded.</div>
</div>
<div class="feature-card">
<div class="feature-icon">⚖️</div>
<div class="feature-title">Six-factor risk scoring</div>
<div class="feature-body">Blast radius, complexity, rollback confidence, test coverage, change history and timing each scored out of 20. Determines Low / Medium / High / Critical risk band.</div>
</div>
<div class="feature-card">
<div class="feature-icon">🧱</div>
<div class="feature-title">Step builder — implementation and rollback</div>
<div class="feature-body">Add implementation and rollback steps one at a time. Numbered, removable. A structured list in the CHG output — not a free-text field.</div>
</div>
<div class="feature-card">
<div class="feature-icon">📋</div>
<div class="feature-title">PIR — mandatory for Emergency</div>
<div class="feature-body">Post-Implementation Review defaults to mandatory for Emergency changes. PIR scheduled date, owner and status flow into the CHG output.</div>
</div>
<div class="feature-card">
<div class="feature-icon">❄️</div>
<div class="feature-title">Change freeze window detection</div>
<div class="feature-body">If the planned implementation date falls within a freeze window, the workspace flags it immediately and switches to Emergency type.</div>
</div>
</div>
</div>
<div class="sc-slide" id="slide-13">
<div class="slide-hero" style="padding:16px 0 22px;">
<div class="slide-hero-badge">📖 Glossary and Reference</div>
<div class="slide-hero-title" style="font-size:22px;">Glossary and Acronym Reference</div>
<div class="slide-hero-sub">130+ terms across multiple tabs. The duplicate acronym problem handled explicitly. Your organisation's own terms added, stored and exportable.</div>
</div>
<div class="feature-grid">
<div class="feature-card">
<div class="feature-icon">📚</div>
<div class="feature-title">ITSM and ITIL 4 terms</div>
<div class="feature-body">CI, CMDB, SLA, OLA, UC, CAB, ECAB, KE, KEDB, P1-P4, MIM, PIR, RCA, RTO, RPO, MTTR, MTBF, MTTA and more. Definitions written for practitioners, not textbooks.</div>
</div>
<div class="feature-card">
<div class="feature-icon">🏦</div>
<div class="feature-title">Regulatory terms</div>
<div class="feature-body">FCA, PRA, DORA Articles 9 and 17, ICO, GDPR, PCI DSS, BCBS 239, SUP 15, operational resilience — defined with context for financial services technology teams.</div>
</div>
<div class="feature-card">
<div class="feature-icon">🔧</div>
<div class="feature-title">Platform field names</div>
<div class="feature-body">ServiceNow incident and problem field API names. Jira issue types. Grafana, Dynatrace and Datadog terminology aligned to ITIL concepts.</div>
</div>
<div class="feature-card">
<div class="feature-icon">🔄</div>
<div class="feature-title">Duplicate handling</div>
<div class="feature-body">DORA, CI, MTTR, SRE and others have different meanings across disciplines. All definitions shown with context labels — no ambiguity in high-pressure situations.</div>
</div>
<div class="feature-card">
<div class="feature-icon">🏢</div>
<div class="feature-title">Add your organisation's terms</div>
<div class="feature-body">Add bespoke acronyms, internal system names and team-specific terminology. Stored in browser localStorage. Export as JSON or CSV.</div>
</div>
<div class="feature-card">
<div class="feature-icon">🔍</div>
<div class="feature-title">SRE and DevOps terms</div>
<div class="feature-body">SLO, SLI, error budget, toil, blameless postmortem, chaos engineering, canary deployment, blue/green deployment, circuit breaker — defined in the context of incident management.</div>
</div>
</div>
</div>
<div class="sc-slide" id="slide-14">
<div class="slide-hero" style="padding:16px 0 22px;">
<div class="slide-hero-badge">🧠 Intelligence & Audit Trail</div>
<div class="slide-hero-title" style="font-size:22px;">Built for Real Incidents Under Pressure</div>
<div class="slide-hero-sub">Every decision logged, every action tracked. Features that reduce cognitive load, improve traceability and make the incident record accurate — without slowing you down.</div>
</div>
<div class="feature-grid">
<div class="feature-card">
<div class="feature-icon">📝</div>
<div class="feature-title">Decision Log</div>
<div class="feature-body">Stage 2 card captures timestamped decisions as they happen during the incident — who decided, what was decided and why. Feeds directly into the PIR and incident timeline. The conversation that usually only exists in chat history is now formally recorded.</div>
</div>
<div class="feature-card">
<div class="feature-icon">✅</div>
<div class="feature-title">Auto-Checklist Progress</div>
<div class="feature-body">A live progress bar and percentage counter tracks completion of the Post-Incident Action Checklist in real time. At a glance you know what is done, what is outstanding and how far through the close-out process you are.</div>
</div>
<div class="feature-card">
<div class="feature-icon">🟢</div>
<div class="feature-title">SLA Health Bar</div>
<div class="feature-body">A visual Green → Amber → Red bar sits inside the SLA clock widget and updates continuously. Green above 50% remaining, Amber between 20–50%, Red below 20%. Paired with the mm:ss countdown for immediate situational awareness.</div>
</div>
<div class="feature-card">
<div class="feature-icon">🔒</div>
<div class="feature-title">Sanitise Export</div>
<div class="feature-body">Stage 7 toggle that replaces sensitive field values with [REDACTED] before export. Share incident outputs with external parties, auditors or vendors without manually scrubbing each field. Original data remains intact in the session.</div>
</div>
<div class="feature-card">
<div class="feature-icon">⚠️</div>
<div class="feature-title">Backup Nudge</div>
<div class="feature-body">An amber warning banner appears if session data exceeds 200 KB, prompting you to export before the browser session is lost. Prevents data loss on long-running major incidents where localStorage approaches its limit.</div>
</div>
<div class="feature-card">
<div class="feature-icon">📊</div>
<div class="feature-title">Service Cluster View</div>
<div class="feature-body">The Reporting period history tab groups all saved incidents by service name and component. Bar charts show relative incident volume per service. Click any service to expand its full incident history — identify repeat offenders and systemic patterns immediately.</div>
</div>
<div class="feature-card">
<div class="feature-icon">🤖</div>
<div class="feature-title">Pre-flight Review Agent</div>
<div class="feature-body">Before generating outputs, a rules-based AI agent reviews your incident data — blocking issues, regulatory flags, severity mismatches, incomplete fields. Each finding is dismissable. Human in the loop — you confirm before outputs are generated.</div>
</div>
</div>
</div>
<div class="sc-slide" id="slide-15">
<div class="slide-hero" style="padding:16px 0 22px;">
<div class="slide-hero-badge">🤖 Agentic Intelligence</div>
<div class="slide-hero-title" style="font-size:22px;">Human in the Loop — AI That Earns Trust</div>
<div class="slide-hero-sub">The tool's intelligence is rules-based and deterministic — not a black box. Every finding can be explained, dismissed or overridden. In FCA/DORA regulated environments, this is more appropriate than generative AI.</div>
</div>
<div class="feature-grid">
<div class="feature-card">
<div class="feature-icon">🤖</div>
<div class="feature-title">Pre-flight Review Agent</div>
<div class="feature-body">Before output generation, a rules-based agent analyses your incident data and surfaces findings — blocking issues, warnings, information flags and confirmations. A data completeness score (0–100%) shows how much is present. Every finding is dismissable. You confirm before outputs are generated.</div>
</div>
<div class="feature-card">
<div class="feature-icon">📊</div>
<div class="feature-title">Output Confidence Scoring</div>
<div class="feature-body">After generating, each output gets a hover-able readiness chip — for example "82% ServiceNow". Hover to see the specific gaps that reduced the score: missing fields, short descriptions, unresolved flags. Helps prioritise what to complete before pasting.</div>
</div>
<div class="feature-card">
<div class="feature-icon">⬛</div>
<div class="feature-title">War Room Pulse</div>
<div class="feature-body">A fixed live cockpit panel accessible from the ⬛ Pulse button in the nav. Shows in real time: severity, elapsed time, SLA remaining, last comms sent, next update due, open decisions, MIM name and bridge link. Everything visible at once during a major incident.</div>
</div>
<div class="feature-card">
<div class="feature-icon">⚡</div>
<div class="feature-title">After-Action Capture</div>
<div class="feature-body">A 5-question guided modal fires when the resolution timestamp is set. Research shows retention drops 70% after 2 hours — this captures what matters while the incident is still fresh. Answers feed directly into the PIR and handover pack.</div>
</div>
<div class="feature-card">
<div class="feature-icon">🔍</div>
<div class="feature-title">Pattern Detection</div>
<div class="feature-body">As the service name is typed in Stage 1, the tool scans localStorage sessions for matching service names. If previous incidents are found, an inline hint surfaces: "⚠ Pattern detected: 2 previous incidents for this service". Recurring issues are visible before the investigation begins.</div>
</div>
<div class="feature-card">
<div class="feature-icon">🚨</div>
<div class="feature-title">Escalation Sequencer</div>
<div class="feature-body">For P1/P2 incidents with an org profile populated, Stage 2 shows a numbered action card: "Right now — in this order: 1. Engage MIM, 2. Primary escalation, 3. Open bridge call..." Eliminates the cognitive overhead of knowing what to do first under pressure.</div>
</div>
<div class="feature-card">
<div class="feature-icon">📋</div>
<div class="feature-title">Content layer — always current</div>
<div class="feature-body">The 📋 Reg nav button provides instant access to guidance status. A notification dot activates when the weekly monitor detects a regulatory change. Regulatory guidance, ITIL definitions and platform notes live in a separate JSON. Updated on GitHub when FCA, EBA, ICO or AXELOS publish changes. Tool fetches silently on load. No user data transmitted. Manual trigger and org-hosted source both supported.</div>
</div>
</div>
</div>
</div>
</div><!-- /sc-main -->
<!-- FOOTER -->
<div class="sc-footer">
<div style="font-size:10px;color:var(--text3);text-align:center;padding:4px 0 2px;">
Designed and built by <a href="https://www.linkedin.com/in/james-holford-z17/" target="_blank" rel="noopener" style="color:var(--text3);text-decoration:underline;text-underline-offset:2px;">James Holford</a>
· Built with <a href="https://claude.ai" target="_blank" rel="noopener" style="color:var(--text3);text-decoration:underline;text-underline-offset:2px;">Claude (Anthropic)</a>
· © 2026 James Holford
</div>
<div style="display:contents;">
<div class="sc-footer-nav-item" id="footer-0">
<label for="tab15" class="sc-btn secondary">‹ Previous</label>
<span style="font-size:11px;color:var(--text3);">1 / 16</span>
<label for="tab1" class="sc-btn primary">Next ›</label>
</div>
<div class="sc-footer-nav-item" id="footer-1">
<label for="tab0" class="sc-btn secondary">‹ Previous</label>
<span style="font-size:11px;color:var(--text3);">2 / 16</span>