-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathrm-showcase.html
More file actions
1134 lines (1077 loc) · 78.2 KB
/
Copy pathrm-showcase.html
File metadata and controls
1134 lines (1077 loc) · 78.2 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">
<meta name="author" content="James Holford">
<meta name="description" content="Release Management Intelligence — a professional release planning tool built by a Release Manager, for Release Managers.">
<title>Release Management Intelligence — Showcase</title>
<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&family=IBM+Plex+Sans:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<style>
:root{
--bg:#07100d;--surface:#0d1a14;--surface2:#132219;--border:#1f3328;--border2:#2d4a3a;
--text:#d4ede0;--text2:#7ea990;--text3:#4f7360;
--accent:#10b981;--accent2:#059669;--green:#34d399;
--amber:#f59e0b;--red:#ef4444;--purple:#a78bfa;--sky:#38bdf8;
--mono:'IBM Plex Mono',monospace;--sans:'IBM Plex Sans',sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{background:var(--bg);color:var(--text);font-family:var(--sans);font-size:15px;line-height:1.6;overflow-x:hidden;}
a{color:var(--accent);text-decoration:none;}
img{max-width:100%;}
/* ── SCROLL REVEAL ── */
.reveal{opacity:0;transform:translateY(28px);transition:opacity 0.65s ease,transform 0.65s ease;}
.reveal.visible{opacity:1;transform:none;}
.reveal-left{opacity:0;transform:translateX(-30px);transition:opacity 0.6s ease,transform 0.6s ease;}
.reveal-left.visible{opacity:1;transform:none;}
.reveal-right{opacity:0;transform:translateX(30px);transition:opacity 0.6s ease,transform 0.6s ease;}
.reveal-right.visible{opacity:1;transform:none;}
.delay-1{transition-delay:0.1s;}
.delay-2{transition-delay:0.2s;}
.delay-3{transition-delay:0.3s;}
.delay-4{transition-delay:0.4s;}
.delay-5{transition-delay:0.5s;}
/* ── NAV ── */
.sc-nav{position:fixed;top:0;left:0;right:0;z-index:100;background:rgba(7,16,13,0.9);backdrop-filter:blur(12px);border-bottom:1px solid var(--border);height:56px;display:flex;align-items:center;justify-content:space-between;padding:0 40px;}
.sc-nav-brand{display:flex;align-items:center;gap:10px;}
.sc-logo{width:30px;height:30px;background:linear-gradient(135deg,var(--accent),var(--accent2));border-radius:7px;display:flex;align-items:center;justify-content:center;}
.sc-logo svg{width:16px;height:16px;stroke:#fff;fill:none;stroke-width:2;}
.sc-nav-title{font-size:14px;font-weight:600;}
.sc-nav-right{display:flex;align-items:center;gap:14px;}
.sc-nav-link{font-size:13px;color:var(--text2);cursor:pointer;transition:color 0.2s;}
.sc-nav-link:hover{color:var(--accent);}
.sc-btn{display:inline-flex;align-items:center;gap:6px;padding:9px 20px;border-radius:7px;font-size:13px;font-weight:600;cursor:pointer;border:none;font-family:var(--sans);transition:all 0.2s;text-decoration:none;}
.sc-btn-primary{background:var(--accent);color:#fff;}
.sc-btn-primary:hover{background:var(--accent2);transform:translateY(-1px);box-shadow:0 4px 16px rgba(16,185,129,0.3);}
.sc-btn-outline{background:transparent;color:var(--text);border:1px solid var(--border2);}
.sc-btn-outline:hover{border-color:var(--accent);color:var(--accent);}
.sc-btn-lg{padding:14px 32px;font-size:15px;border-radius:10px;}
/* ── SECTIONS ── */
section{padding:96px 40px;}
.container{max-width:1100px;margin:0 auto;}
.section-badge{display:inline-flex;align-items:center;gap:6px;padding:4px 12px;background:rgba(16,185,129,0.1);border:1px solid rgba(16,185,129,0.25);border-radius:20px;font-size:11px;font-weight:600;color:var(--accent);font-family:var(--mono);text-transform:uppercase;letter-spacing:0.07em;margin-bottom:14px;}
.section-title{font-size:36px;font-weight:700;line-height:1.2;color:var(--text);margin-bottom:14px;}
.section-sub{font-size:16px;color:var(--text2);max-width:620px;line-height:1.7;}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;}
.three-col{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.four-col{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;}
/* ── HERO ── */
#hero{padding:140px 40px 80px;position:relative;overflow:hidden;min-height:100vh;display:flex;align-items:center;}
.hero-bg{position:absolute;inset:0;background:radial-gradient(ellipse 70% 60% at 60% 40%,rgba(16,185,129,0.08) 0%,transparent 70%),radial-gradient(ellipse 40% 40% at 80% 80%,rgba(6,95,70,0.06) 0%,transparent 60%);pointer-events:none;}
.hero-grid{position:absolute;inset:0;background-image:linear-gradient(var(--border) 1px,transparent 1px),linear-gradient(90deg,var(--border) 1px,transparent 1px);background-size:48px 48px;opacity:0.3;pointer-events:none;}
.hero-content{position:relative;z-index:1;flex:1;}
.hero-eyebrow{display:inline-flex;align-items:center;gap:8px;padding:5px 14px;background:rgba(16,185,129,0.1);border:1px solid rgba(16,185,129,0.3);border-radius:20px;font-size:12px;color:var(--accent);font-family:var(--mono);font-weight:600;letter-spacing:0.05em;margin-bottom:24px;}
.hero-title{font-size:58px;font-weight:700;line-height:1.1;margin-bottom:20px;color:var(--text);}
.hero-title .hl{color:var(--accent);}
.hero-sub{font-size:18px;color:var(--text2);max-width:560px;line-height:1.7;margin-bottom:36px;}
.hero-ctas{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:48px;}
.hero-proof{display:flex;gap:24px;flex-wrap:wrap;}
.hero-proof-item{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--text3);}
.hero-proof-dot{width:6px;height:6px;border-radius:50%;background:var(--accent);}
/* ── HERO VISUAL ── */
.hero-visual{position:relative;width:480px;flex-shrink:0;}
.hero-card{background:var(--surface);border:1px solid var(--border2);border-radius:14px;padding:20px;box-shadow:0 20px 60px rgba(0,0,0,0.5),0 0 0 1px rgba(16,185,129,0.08);}
.hero-card-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;padding-bottom:12px;border-bottom:1px solid var(--border);}
.hero-card-title{font-size:13px;font-weight:600;color:var(--text);}
.mini-rag{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:4px;font-size:10px;font-weight:700;font-family:var(--mono);}
.mini-rag-g{background:#065f46;color:#fff;}
.mini-rag-a{background:#b45309;color:#fff;}
.mini-rag-r{background:#c53030;color:#fff;}
.hero-releases{display:flex;flex-direction:column;gap:8px;margin-bottom:14px;}
.hero-rel-row{display:grid;grid-template-columns:1fr auto auto;gap:10px;align-items:center;padding:8px 10px;background:var(--surface2);border-radius:7px;}
.hero-rel-name{font-size:12px;font-weight:500;color:var(--text);}
.hero-rel-meta{font-size:10px;color:var(--text3);margin-top:1px;}
.hero-readiness-ring{position:relative;width:44px;height:44px;flex-shrink:0;}
.hero-readiness-ring svg{transform:rotate(-90deg);}
.hero-readiness-val{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;font-family:var(--mono);}
.hero-stats-row{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;}
.hero-stat{background:var(--surface2);border-radius:7px;padding:9px;text-align:center;}
.hero-stat-val{font-size:18px;font-weight:700;font-family:var(--mono);color:var(--accent);}
.hero-stat-label{font-size:9px;color:var(--text3);text-transform:uppercase;letter-spacing:0.07em;margin-top:2px;}
.hero-hypercare{display:flex;align-items:center;gap:10px;padding:8px 12px;background:rgba(16,185,129,0.06);border:1px solid rgba(16,185,129,0.2);border-radius:7px;margin-top:10px;}
.hero-hc-clock{font-size:18px;font-weight:700;font-family:var(--mono);color:var(--green);}
.hero-hc-label{font-size:11px;color:var(--text2);}
/* ── PAIN POINTS ── */
#pain{background:var(--surface);}
.pain-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px;margin-top:40px;}
.pain-card{background:var(--bg);border:1px solid var(--border);border-radius:10px;padding:18px;position:relative;overflow:hidden;}
.pain-card::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--accent),transparent);}
.pain-icon{font-size:24px;margin-bottom:10px;}
.pain-title{font-size:14px;font-weight:600;color:var(--text);margin-bottom:6px;}
.pain-body{font-size:12px;color:var(--text3);line-height:1.65;}
.pain-solved{display:inline-flex;align-items:center;gap:4px;margin-top:10px;font-size:11px;color:var(--accent);font-family:var(--mono);}
/* ── FEATURES ── */
.feature-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));gap:16px;margin-top:40px;}
.feat-card{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:20px;cursor:pointer;transition:all 0.25s;position:relative;overflow:hidden;}
.feat-card:hover{border-color:var(--accent);transform:translateY(-3px);box-shadow:0 12px 32px rgba(0,0,0,0.3);}
.feat-card::after{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(16,185,129,0.04),transparent);opacity:0;transition:opacity 0.25s;}
.feat-card:hover::after{opacity:1;}
.feat-icon{font-size:28px;margin-bottom:12px;}
.feat-title{font-size:15px;font-weight:600;color:var(--text);margin-bottom:7px;}
.feat-body{font-size:12px;color:var(--text2);line-height:1.7;}
.feat-tags{display:flex;flex-wrap:wrap;gap:5px;margin-top:12px;}
.feat-tag{font-size:10px;padding:2px 7px;border-radius:3px;background:rgba(16,185,129,0.1);color:var(--accent);font-family:var(--mono);}
/* ── DEMO SECTION ── */
#demos{background:var(--surface);}
.demo-tabs{display:flex;gap:2px;border-bottom:1px solid var(--border);margin-bottom:28px;overflow-x:auto;}
.demo-tab{padding:11px 18px;font-size:13px;font-weight:500;color:var(--text3);cursor:pointer;border-bottom:2px solid transparent;transition:all 0.18s;white-space:nowrap;}
.demo-tab.active{color:var(--accent);border-bottom-color:var(--accent);}
.demo-pane{display:none;}
.demo-pane.active{display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:center;}
.demo-desc-badge{display:inline-flex;padding:2px 9px;background:rgba(16,185,129,0.1);border-radius:4px;font-size:11px;color:var(--accent);font-family:var(--mono);margin-bottom:10px;}
.demo-desc-title{font-size:20px;font-weight:600;color:var(--text);margin-bottom:10px;line-height:1.3;}
.demo-desc-body{font-size:13px;color:var(--text2);line-height:1.75;margin-bottom:16px;}
.demo-checklist{display:flex;flex-direction:column;gap:6px;}
.demo-check-item{display:flex;align-items:flex-start;gap:8px;font-size:12px;color:var(--text2);}
.demo-check-item::before{content:'✓';color:var(--accent);font-weight:700;flex-shrink:0;margin-top:1px;}
.demo-visual{background:var(--bg);border:1px solid var(--border2);border-radius:12px;padding:18px;box-shadow:0 8px 24px rgba(0,0,0,0.4);}
/* ── READINESS DEMO ── */
.demo-ring-wrap{display:flex;align-items:center;gap:20px;margin-bottom:14px;}
.big-ring{position:relative;width:90px;height:90px;flex-shrink:0;}
.big-ring svg{transform:rotate(-90deg);}
.big-ring-text{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;font-family:var(--mono);font-weight:700;font-size:22px;color:var(--accent);line-height:1;}
.big-ring-label{font-size:9px;color:var(--text3);}
.breakdown-row{display:flex;align-items:center;gap:10px;margin-bottom:7px;font-size:12px;}
.breakdown-label{width:80px;color:var(--text3);}
.breakdown-bar-wrap{flex:1;height:5px;background:var(--border);border-radius:3px;overflow:hidden;}
.breakdown-fill{height:5px;border-radius:3px;background:var(--accent);transition:width 1.2s ease;}
.breakdown-pct{width:36px;text-align:right;font-family:var(--mono);font-size:11px;color:var(--text2);}
/* ── WIZARD DEMO ── */
.wizard-steps{display:flex;gap:3px;margin-bottom:14px;}
.wiz-step{height:4px;flex:1;border-radius:2px;background:var(--border2);}
.wiz-step.done{background:var(--accent);}
.wiz-step.current{background:var(--amber);}
.wiz-criterion{display:flex;align-items:center;gap:8px;padding:7px 9px;background:var(--surface2);border-radius:5px;margin-bottom:5px;font-size:12px;}
.wiz-criterion.pass{color:var(--green);}
.wiz-criterion.warn{color:var(--amber);}
.wiz-criterion.fail{color:var(--red);}
/* ── AI DEMO ── */
.ai-typing{font-size:13px;color:var(--text);background:var(--surface2);border:1px solid var(--border2);border-radius:7px;padding:10px 12px;margin-bottom:10px;min-height:44px;}
.ai-hint-demo{background:rgba(16,185,129,0.06);border:1px solid rgba(16,185,129,0.2);border-radius:7px;padding:10px 12px;font-size:12px;color:var(--text2);line-height:1.6;}
.ai-hint-label{font-size:10px;font-weight:600;color:var(--accent);font-family:var(--mono);margin-bottom:4px;}
.cursor{display:inline-block;width:2px;height:14px;background:var(--accent);animation:blink 1s infinite;vertical-align:middle;}
@keyframes blink{0%,100%{opacity:1;}50%{opacity:0;}}
/* ── STATS ── */
#stats{background:linear-gradient(135deg,rgba(16,185,129,0.06),transparent);}
.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:20px;margin-top:40px;}
.stat-card{text-align:center;padding:24px;}
.stat-num{font-size:46px;font-weight:700;font-family:var(--mono);color:var(--accent);line-height:1;}
.stat-suffix{font-size:28px;}
.stat-label{font-size:13px;color:var(--text2);margin-top:6px;}
.stat-sub{font-size:11px;color:var(--text3);margin-top:3px;}
/* ── FRAMEWORKS ── */
.framework-pills{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px;}
.fw-pill{display:flex;align-items:center;gap:8px;padding:10px 16px;background:var(--surface);border:1px solid var(--border);border-radius:8px;font-size:13px;color:var(--text2);transition:all 0.2s;}
.fw-pill:hover{border-color:var(--accent);color:var(--text);}
.fw-icon{font-size:18px;}
/* ── INTEGRATION ── */
.int-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:10px;margin-top:24px;}
.int-chip{display:flex;flex-direction:column;align-items:center;gap:6px;padding:14px 10px;background:var(--surface);border:1px solid var(--border);border-radius:9px;font-size:11px;color:var(--text2);text-align:center;}
.int-chip-icon{font-size:20px;}
/* ── QUALITY ── */
.quality-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:14px;margin-top:24px;}
.qual-card{background:var(--surface);border:1px solid var(--border);border-radius:9px;padding:14px 16px;display:flex;align-items:flex-start;gap:10px;}
.qual-icon{font-size:20px;flex-shrink:0;margin-top:2px;}
.qual-title{font-size:13px;font-weight:600;color:var(--text);margin-bottom:3px;}
.qual-body{font-size:11px;color:var(--text3);line-height:1.5;}
/* ── QUOTE ── */
#quote{background:var(--surface);padding:72px 40px;}
.quote-card{max-width:780px;margin:0 auto;text-align:center;}
.quote-mark{font-size:60px;color:var(--accent);line-height:0.8;font-family:Georgia,serif;margin-bottom:16px;}
.quote-text{font-size:22px;font-weight:500;line-height:1.55;color:var(--text);margin-bottom:20px;}
.quote-author{font-size:13px;color:var(--text3);}
.quote-author strong{color:var(--text2);}
/* ── CTA ── */
#cta{padding:96px 40px;text-align:center;background:radial-gradient(ellipse 60% 60% at 50% 50%,rgba(16,185,129,0.08),transparent);}
.cta-title{font-size:44px;font-weight:700;color:var(--text);margin-bottom:16px;}
.cta-sub{font-size:16px;color:var(--text2);margin-bottom:36px;}
.cta-note{font-size:12px;color:var(--text3);margin-top:16px;font-family:var(--mono);}
.cta-badges{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin-top:24px;}
.cta-badge{display:inline-flex;align-items:center;gap:5px;padding:4px 12px;background:var(--surface);border:1px solid var(--border);border-radius:20px;font-size:11px;color:var(--text3);}
/* ── FOOTER ── */
footer{background:var(--surface);border-top:1px solid var(--border);padding:28px 40px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;}
.footer-left{font-size:12px;color:var(--text3);}
.footer-right{display:flex;gap:16px;}
.footer-link{font-size:12px;color:var(--text3);cursor:pointer;}
.footer-link:hover{color:var(--accent);}
/* ── RESPONSIVE ── */
@media(max-width:900px){
.two-col,.demo-pane.active{grid-template-columns:1fr;}
.hero-visual{display:none;}
.hero-title{font-size:38px;}
section{padding:64px 20px;}
#hero{padding:100px 20px 60px;}
.sc-nav{padding:0 20px;}
.three-col,.four-col{grid-template-columns:1fr 1fr;}
.stats-grid{grid-template-columns:repeat(2,1fr);}
}
@media(max-width:520px){
.hero-title{font-size:30px;}
.hero-ctas{flex-direction:column;}
.sc-btn-lg{width:100%;justify-content:center;}
.three-col,.four-col{grid-template-columns:1fr;}
.sc-nav-link{display:none;}
.section-title{font-size:26px;}
}
</style>
</head>
<body>
<!-- NAV -->
<nav class="sc-nav">
<div class="sc-nav-brand">
<div class="sc-logo"><svg viewBox="0 0 24 24"><polyline points="22 7 13.5 15.5 8.5 10.5 2 17"/><polyline points="16 7 22 7 22 13"/></svg></div>
<span class="sc-nav-title">Release Management Intelligence</span>
</div>
<div class="sc-nav-right">
<a class="sc-nav-link" href="#pain" onclick="document.getElementById('pain').scrollIntoView({behavior:'smooth'})">The Problem</a>
<a class="sc-nav-link" href="#features" onclick="document.getElementById('features').scrollIntoView({behavior:'smooth'})">Features</a>
<a class="sc-nav-link" href="#ai-section" onclick="document.getElementById('ai-section').scrollIntoView({behavior:'smooth'})">⬡ AI Intelligence</a>
<a class="sc-nav-link" href="#demos" onclick="document.getElementById('demos').scrollIntoView({behavior:'smooth'})">Live Demos</a>
<a class="sc-btn sc-btn-outline" href="https://Zeus-17.github.io/release-management-intelligence/rm-demo-v1.html" target="_blank">▶ Watch Demo</a>
<a class="sc-btn sc-btn-outline" href="https://github.com/Zeus-17/release-management-intelligence" target="_blank">⭐ Star on GitHub</a>
<a class="sc-btn sc-btn-primary" href="https://Zeus-17.github.io/release-management-intelligence/rm-tool-v1.html">Launch Tool →</a>
</div>
</nav>
<!-- HERO -->
<section id="hero">
<div class="hero-bg"></div>
<div class="hero-grid"></div>
<div class="container" style="display:flex;align-items:center;gap:60px;width:100%;">
<div class="hero-content">
<div class="hero-eyebrow reveal">✦ Open Source · Local-First · Zero Config</div>
<h1 class="hero-title reveal delay-1">Release Management.<br><span class="hl">Reimagined.</span></h1>
<p class="hero-sub reveal delay-2">Operational intelligence for Release Managers, Service Managers, Technical POs and Delivery Leads. From Go/No-Go decisions to PIR sign-off — everything your team needs to coordinate software delivery, without the enterprise overhead.</p>
<div class="hero-ctas reveal delay-3">
<a href="https://Zeus-17.github.io/release-management-intelligence/rm-tool-v1.html" class="sc-btn sc-btn-primary sc-btn-lg">Open the Tool →</a>
<a href="#demos" class="sc-btn sc-btn-outline sc-btn-lg" onclick="document.getElementById('demos').scrollIntoView({behavior:'smooth'});return false;">Watch it in Action</a>
</div>
<div class="hero-proof reveal delay-4">
<div class="hero-proof-item"><div class="hero-proof-dot"></div>WCAG AA accessible</div>
<div class="hero-proof-item"><div class="hero-proof-dot"></div>No signup required</div>
<div class="hero-proof-item"><div class="hero-proof-dot"></div>12 tool integrations</div>
<div class="hero-proof-item"><div class="hero-proof-dot"></div>ITIL 4 · DORA Metrics · EU DORA aligned</div>
</div>
</div>
<div class="hero-visual reveal-right">
<div class="hero-card">
<div class="hero-card-header">
<span class="hero-card-title">Release Dashboard</span>
<span style="font-size:11px;color:var(--text3);font-family:var(--mono);">v1.6</span>
</div>
<div class="hero-releases">
<div class="hero-rel-row">
<div><div class="hero-rel-name">Platform Release Q3</div><div class="hero-rel-meta">MAJOR · Cloud, API, Mobile</div></div>
<span class="mini-rag mini-rag-g"><span style="width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,0.8);display:inline-block;"></span>GREEN</span>
<div class="hero-readiness-ring" id="heroRing1">
<svg width="44" height="44" viewBox="0 0 44 44">
<circle cx="22" cy="22" r="17" fill="none" stroke="var(--border2)" stroke-width="4"/>
<circle cx="22" cy="22" r="17" fill="none" stroke="#10b981" stroke-width="4" stroke-dasharray="0 107" stroke-linecap="round" id="ring1Arc"/>
</svg>
<div class="hero-readiness-val" id="ring1Val" style="font-size:11px;color:#10b981;">0</div>
</div>
</div>
<div class="hero-rel-row">
<div><div class="hero-rel-name">Mobile App v2.9</div><div class="hero-rel-meta">MINOR · Mobile</div></div>
<span class="mini-rag mini-rag-a"><span style="width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,0.8);display:inline-block;"></span>AMBER</span>
<div class="hero-readiness-ring">
<svg width="44" height="44" viewBox="0 0 44 44">
<circle cx="22" cy="22" r="17" fill="none" stroke="var(--border2)" stroke-width="4"/>
<circle cx="22" cy="22" r="17" fill="none" stroke="#b45309" stroke-width="4" stroke-dasharray="60 107" stroke-linecap="round"/>
</svg>
<div class="hero-readiness-val" style="font-size:11px;color:#b45309;">56</div>
</div>
</div>
<div class="hero-rel-row">
<div><div class="hero-rel-name">CWA Patch 24.x</div><div class="hero-rel-meta">PATCH · CWA, DI2</div></div>
<span class="mini-rag mini-rag-r"><span style="width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,0.8);display:inline-block;"></span>RED</span>
<div class="hero-readiness-ring">
<svg width="44" height="44" viewBox="0 0 44 44">
<circle cx="22" cy="22" r="17" fill="none" stroke="var(--border2)" stroke-width="4"/>
<circle cx="22" cy="22" r="17" fill="none" stroke="#c53030" stroke-width="4" stroke-dasharray="29 107" stroke-linecap="round"/>
</svg>
<div class="hero-readiness-val" style="font-size:11px;color:#c53030;">27</div>
</div>
</div>
</div>
<div class="hero-stats-row">
<div class="hero-stat"><div class="hero-stat-val" id="heroGates">0</div><div class="hero-stat-label">Gates Passed</div></div>
<div class="hero-stat"><div class="hero-stat-val" style="color:var(--red);">0</div><div class="hero-stat-label">Blockers</div></div>
<div class="hero-stat"><div class="hero-stat-val" style="color:var(--purple);" id="heroDORA">—</div><div class="hero-stat-label">Deploy Freq</div></div>
</div>
<div class="hero-hypercare">
<div class="hero-hc-clock" id="heroHCClock">71:24:38</div>
<div><div class="hero-hc-label" style="font-weight:600;color:var(--green);">🟢 Hypercare Active</div><div class="hero-hc-label">Platform Release Q3 · Monitoring</div></div>
</div>
</div>
</div>
</div>
</section>
<!-- PAIN POINTS -->
<section id="pain">
<div class="container">
<div class="reveal"><div class="section-badge">The Problem</div></div>
<div class="section-title reveal delay-1">Release day shouldn't feel<br>like controlled chaos.</div>
<div class="section-sub reveal delay-2">But for most Release Managers, it does. Here's why — and what this tool does about it.</div>
<div class="pain-grid">
<div class="pain-card reveal delay-1">
<div class="pain-icon">🗂</div>
<div class="pain-title">No single source of truth</div>
<div class="pain-body">Status lives in Jira, gate sign-offs are in email, the defect list is a spreadsheet, and the runbook is a Word doc nobody's updated.</div>
<div class="pain-solved">✦ Solved: unified release record</div>
</div>
<div class="pain-card reveal delay-2">
<div class="pain-icon">🚦</div>
<div class="pain-title">Go/No-Go is informal and undocumented</div>
<div class="pain-body">The decision happens in a Teams call, someone says "yeah looks good" and then you're live. No formal record, no evidence trail for audit.</div>
<div class="pain-solved">✦ Solved: Go/No-Go wizard with sign-off</div>
</div>
<div class="pain-card reveal delay-3">
<div class="pain-icon">📉</div>
<div class="pain-title">Stakeholders get the wrong information</div>
<div class="pain-body">Directors need RAG status. AEs need customer impact. Teams need blockers. Everyone gets the same wall-of-text status update.</div>
<div class="pain-solved">✦ Solved: 5 audience-tailored reports</div>
</div>
<div class="pain-card reveal delay-1">
<div class="pain-icon">🌍</div>
<div class="pain-title">Deployment windows ignore the real world</div>
<div class="pain-body">Quarter-end financial freeze, offshore team unavailability, bank holidays in 3 countries — none of it visible until someone asks why we deployed today.</div>
<div class="pain-solved">✦ Solved: blackout calendar</div>
</div>
<div class="pain-card reveal delay-2">
<div class="pain-icon">🔗</div>
<div class="pain-title">No traceability from requirement to production</div>
<div class="pain-body">The Jira story, the ServiceNow CHG, the Jira Align portfolio epic — they exist in three different systems with no visible connection.</div>
<div class="pain-solved">✦ Solved: golden thread tracking</div>
</div>
<div class="pain-card reveal delay-3">
<div class="pain-icon">🔄</div>
<div class="pain-title">Every release starts from scratch</div>
<div class="pain-body">Monthly patches, quarterly majors — the same structure, the same gates, the same runbook. Built from scratch every single time.</div>
<div class="pain-solved">✦ Solved: release templates</div>
</div>
</div>
</div>
</section>
<!-- FEATURES -->
<section id="features">
<div class="container">
<div class="reveal"><div class="section-badge">Features</div></div>
<div class="section-title reveal delay-1">Everything a Release Manager<br>actually needs.</div>
<div class="section-sub reveal delay-2">Built around real ITIL 4, DORA Metrics, SAFe and EU DORA (Digital Operational Resilience Act) practices. Not a checkbox app — a professional workflow tool.</div>
<div class="feature-grid">
<div class="feat-card reveal delay-1">
<div class="feat-icon">🎯</div>
<div class="feat-title">Release Readiness Score</div>
<div class="feat-body">A single 0–100 score per release, calculated from gate completion, open blockers, environment health and sign-off progress. Tells the story at a glance.</div>
<div class="feat-tags"><span class="feat-tag">Live calculation</span><span class="feat-tag">Dashboard</span></div>
</div>
<div class="feat-card reveal delay-2">
<div class="feat-icon">🚦</div>
<div class="feat-title">Go / No-Go Decision Wizard</div>
<div class="feat-body">5-step structured wizard: release overview, gate status, defect assessment, risk review, formal GO/NO-GO decision with timestamp and rationale. Creates an audit trail automatically.</div>
<div class="feat-tags"><span class="feat-tag">Formal record</span><span class="feat-tag">Audit trail</span></div>
</div>
<div class="feat-card reveal delay-3">
<div class="feat-icon">🟢</div>
<div class="feat-title">Hypercare Mode</div>
<div class="feat-body">Post go-live: a live countdown timer, monitoring checklist, and rollback trigger criteria — persistent across all tabs. All Clear sign-off closes the release.</div>
<div class="feat-tags"><span class="feat-tag">Live countdown</span><span class="feat-tag">Checklist</span></div>
</div>
<div class="feat-card reveal delay-1">
<div class="feat-icon">📅</div>
<div class="feat-title">Blackout Calendar</div>
<div class="feat-body">Change freezes, financial reporting periods, bank holidays, offshore unavailability, system maintenance — all in one visual monthly calendar. UK 2026–27 holidays pre-loaded.</div>
<div class="feat-tags"><span class="feat-tag">6 blackout types</span><span class="feat-tag">Offshore-aware</span></div>
</div>
<div class="feat-card reveal delay-2">
<div class="feat-icon">🧵</div>
<div class="feat-title">Golden Thread & Tracking Refs</div>
<div class="feat-body">Link every scope item to Jira stories, Jira Align portfolio epics, ADO work items, ServiceNow CHG records and 8 other tools. Full chain from strategy to production.</div>
<div class="feat-tags"><span class="feat-tag">12 tools</span><span class="feat-tag">Jira Align</span></div>
</div>
<div class="feat-card reveal delay-3">
<div class="feat-icon">⚠️</div>
<div class="feat-title">Risk Register</div>
<div class="feat-body">Per-release risk log with Likelihood × Impact scoring (1–25), colour-coded severity, mitigation actions, and owner tracking. Feeds directly into the Go/No-Go Wizard and PIR.</div>
<div class="feat-tags"><span class="feat-tag">L×I scoring</span><span class="feat-tag">PIR integration</span></div>
</div>
<div class="feat-card reveal delay-1">
<div class="feat-icon">⬡</div>
<div class="feat-title">Deterministic AI Intelligence</div>
<div class="feat-body">17 pattern rules fire as you type — payment keywords trigger regulatory flags, authentication changes surface rollback guidance, database migrations prompt DBA sign-off reminders. No external API.</div>
<div class="feat-tags"><span class="feat-tag">Local-first</span><span class="feat-tag">No API key</span></div>
</div>
<div class="feat-card reveal delay-2">
<div class="feat-icon">✍️</div>
<div class="feat-title">PIR & Formal Sign-off</div>
<div class="feat-body">Post Implementation Review — or AAR, Post Mortem, Release Review, Lessons Learned (your choice, fully renameable). Formal sign-off document that closes the release lifecycle.</div>
<div class="feat-tags"><span class="feat-tag">Configurable name</span><span class="feat-tag">Full audit</span></div>
</div>
<div class="feat-card reveal delay-3">
<div class="feat-icon">📋</div>
<div class="feat-title">Release Templates</div>
<div class="feat-body">Save any release as a reusable template. Monthly patches and quarterly majors load in seconds, with the right gate structure, delivery models and runbook already in place.</div>
<div class="feat-tags"><span class="feat-tag">One-click load</span><span class="feat-tag">Time saver</span></div>
</div>
</div>
</div>
</section>
<!-- AI INTELLIGENCE FEATURE SECTION -->
<section id="ai-section" style="background:var(--surface);padding:80px 40px;">
<div class="container">
<div class="two-col" style="gap:60px;">
<div>
<div class="reveal"><div class="section-badge">⬡ Deterministic AI Intelligence</div></div>
<div class="section-title reveal delay-1" style="font-size:30px;">Intelligence that fires as you work.<br>No API. No data sent anywhere.</div>
<div class="section-sub reveal delay-2" style="margin-bottom:20px;font-size:14px;">17 pattern rules analyse your input the moment you type — regulatory keywords, security vulnerabilities, authentication changes, database migrations, offshore dependencies. Each triggers tailored, actionable guidance specific to release management.</div>
<div class="demo-checklist reveal delay-3" style="margin-bottom:20px;">
<div class="demo-check-item"><strong>Release planner:</strong> payment keywords → EU DORA Article 9 regulatory flag. Auth changes → rollback guidance. Mobile → App Store lead time warning.</div>
<div class="demo-check-item"><strong>Defect triage:</strong> "crash" or "null pointer" → auto-classifies as Critical Blocker. "cosmetic" → suggests Known Issue/Deferred.</div>
<div class="demo-check-item"><strong>Quality gates:</strong> warns when entry criteria incomplete before sign-off. Flags open blockers at Go/No-Go.</div>
<div class="demo-check-item"><strong>Dashboard:</strong> CFR above 15% → DORA Metrics performance band warning. Active freeze window → alert. Multiple RED releases → escalation prompt.</div>
</div>
<div class="reveal delay-4" style="padding:12px 16px;background:rgba(16,185,129,0.06);border:1px solid rgba(16,185,129,0.2);border-radius:8px;font-size:12px;color:var(--text2);">
<strong style="color:var(--accent);">Why deterministic, not generative?</strong><br>
Release management decisions affect production systems and regulated environments. Deterministic rules produce <em>consistent, auditable, predictable</em> outcomes — not probabilistic suggestions. Rules are updateable from the content JSON without touching the app.
</div>
</div>
<div class="reveal-right" style="display:flex;flex-direction:column;gap:12px;">
<!-- Auto-cycling AI demo -->
<div style="background:var(--bg);border:1px solid var(--border2);border-radius:12px;padding:18px;">
<div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;">
<div style="font-size:11px;font-weight:600;color:var(--accent);font-family:var(--mono);letter-spacing:0.08em;">⬡ INTELLIGENCE — LIVE</div>
<div style="display:flex;gap:4px;" id="ai-scenario-dots"></div>
</div>
<div style="font-size:11px;color:var(--text3);margin-bottom:6px;">You typed into the release name field:</div>
<div style="font-size:13px;color:var(--text);background:var(--surface2);border:1px solid var(--border2);border-radius:6px;padding:9px 12px;margin-bottom:10px;min-height:40px;font-family:var(--mono);" id="ai2-input"></div>
<div id="ai2-hint" style="display:none;border-radius:7px;padding:10px 13px;font-size:12px;color:var(--text2);line-height:1.65;">
<div style="font-size:10px;font-weight:600;font-family:var(--mono);text-transform:uppercase;letter-spacing:0.08em;margin-bottom:5px;" id="ai2-label">⬡ INTELLIGENCE</div>
<div id="ai2-text"></div>
</div>
</div>
<!-- Defect AI example -->
<div style="background:var(--bg);border:1px solid var(--border2);border-radius:12px;padding:18px;">
<div style="font-size:11px;font-weight:600;color:var(--accent);font-family:var(--mono);letter-spacing:0.08em;margin-bottom:10px;">⬡ INTELLIGENCE — DEFECT TRIAGE</div>
<div style="font-size:11px;color:var(--text3);margin-bottom:6px;">Defect title analysed:</div>
<div style="font-size:12px;color:var(--text);background:var(--surface2);border-radius:5px;padding:7px 10px;margin-bottom:8px;font-family:var(--mono);" id="ai2-defect-input">NullPointerException in PaymentProcessorService</div>
<div style="display:flex;gap:6px;margin-bottom:6px;">
<span style="padding:2px 8px;background:#c53030;color:#fff;border-radius:4px;font-size:10px;font-weight:700;font-family:var(--mono);">CRITICAL</span>
<span style="padding:2px 8px;background:#c53030;color:#fff;border-radius:4px;font-size:10px;font-weight:700;font-family:var(--mono);">BLOCKER</span>
<span style="font-size:11px;color:var(--text3);display:flex;align-items:center;">← auto-classified</span>
</div>
<div style="font-size:11px;color:var(--text2);padding:7px 9px;background:rgba(248,113,113,0.06);border:1px solid rgba(248,113,113,0.2);border-radius:5px;"><strong style="color:var(--red);">Payment / financial impact detected.</strong> Any defect affecting payment flows is classified as a Release Blocker. EU DORA Article 17 (Digital Operational Resilience Act) and FCA SUP 15 may require regulatory notification if this has reached production.</div>
</div>
</div>
</div>
</div>
</section>
<!-- DEMOS -->
<section id="demos">
<div class="container">
<div class="reveal"><div class="section-badge">Live Demos</div></div>
<div class="section-title reveal delay-1">See it think.</div>
<div class="section-sub reveal delay-2 " style="margin-bottom:32px;">These aren't mockups. The same logic runs inside the tool.</div>
<div class="demo-tabs reveal">
<div class="demo-tab active" onclick="switchDemo(0,this)">Readiness Score</div>
<div class="demo-tab" onclick="switchDemo(1,this)">Go/No-Go Wizard</div>
<div class="demo-tab" onclick="switchDemo(2,this)">AI Intelligence</div>
<div class="demo-tab" onclick="switchDemo(3,this)">Integration Simulation</div>
</div>
<!-- Demo 0: Readiness Score -->
<div class="demo-pane active" id="demo-0">
<div>
<div class="demo-desc-badge">DORA Metrics-informed scoring</div>
<div class="demo-desc-title">Release Readiness at a glance</div>
<div class="demo-desc-body">A 0–100 score calculated from four weighted factors: gate completion (40%), defect status (30%), environment health (20%), and sign-off progress (10%). No more "how are we looking?" — the number tells you.</div>
<div class="demo-checklist">
<div class="demo-check-item">Below 50 — RED. Don't go near a go/no-go conversation.</div>
<div class="demo-check-item">50–74 — AMBER. Decisions ahead. Blockers need addressing.</div>
<div class="demo-check-item">75+ — GREEN. Gate criteria met. Ready for Go/No-Go.</div>
<div class="demo-check-item">Score updates live as gates are signed, defects resolved, environments promoted.</div>
</div>
</div>
<div class="demo-visual">
<div style="font-size:12px;font-weight:600;color:var(--text2);margin-bottom:14px;">Platform Release Q3 — Readiness</div>
<div class="demo-ring-wrap">
<div class="big-ring">
<svg width="90" height="90" viewBox="0 0 90 90">
<circle cx="45" cy="45" r="36" fill="none" stroke="var(--border2)" stroke-width="7"/>
<circle cx="45" cy="45" r="36" fill="none" stroke="var(--accent)" stroke-width="7" stroke-dasharray="0 226" stroke-linecap="round" id="demoRingArc"/>
</svg>
<div class="big-ring-text" style="color:var(--accent);" id="demoRingVal">0<div class="big-ring-label">/ 100</div></div>
</div>
<div style="flex:1;">
<div class="breakdown-row"><span class="breakdown-label">Gates</span><div class="breakdown-bar-wrap"><div class="breakdown-fill" id="bd-gates" style="width:0%;background:var(--accent);"></div></div><span class="breakdown-pct" id="bd-gates-pct">0%</span></div>
<div class="breakdown-row"><span class="breakdown-label">Defects</span><div class="breakdown-bar-wrap"><div class="breakdown-fill" id="bd-defects" style="width:0%;background:var(--green);"></div></div><span class="breakdown-pct" id="bd-defects-pct">0%</span></div>
<div class="breakdown-row"><span class="breakdown-label">Environments</span><div class="breakdown-bar-wrap"><div class="breakdown-fill" id="bd-envs" style="width:0%;background:var(--amber);" ></div></div><span class="breakdown-pct" id="bd-envs-pct">0%</span></div>
<div class="breakdown-row"><span class="breakdown-label">Sign-offs</span><div class="breakdown-bar-wrap"><div class="breakdown-fill" id="bd-sigs" style="width:0%;background:var(--purple);"></div></div><span class="breakdown-pct" id="bd-sigs-pct">0%</span></div>
</div>
</div>
<button class="sc-btn sc-btn-outline" style="font-size:12px;padding:7px 16px;" onclick="animateReadiness()">▶ Animate score</button>
</div>
</div>
<!-- Demo 1: Go/No-Go Wizard -->
<div class="demo-pane" id="demo-1">
<div>
<div class="demo-desc-badge">5-step structured decision</div>
<div class="demo-desc-title">Go / No-Go — formally documented</div>
<div class="demo-desc-body">The most important moment in any release, given the structure it deserves. Walk through scope, gate status, defect assessment, risk review and the formal decision — all recorded with timestamp and rationale.</div>
<div style="margin-top:16px;display:flex;flex-direction:column;gap:6px;">
<div style="display:flex;align-items:center;gap:10px;padding:7px 10px;background:var(--surface);border-radius:6px;font-size:12px;" id="wiz-nav-1"><div style="width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;background:var(--accent);color:#fff;flex-shrink:0;">1</div><span style="color:var(--text2);">Release Overview — confirm scope and delivery models</span></div>
<div style="display:flex;align-items:center;gap:10px;padding:7px 10px;background:var(--surface);border-radius:6px;font-size:12px;" id="wiz-nav-2"><div style="width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;background:var(--border2);color:var(--text3);flex-shrink:0;">2</div><span style="color:var(--text3);">Gate Status — every gate, every sign-off visible</span></div>
<div style="display:flex;align-items:center;gap:10px;padding:7px 10px;background:var(--surface);border-radius:6px;font-size:12px;" id="wiz-nav-3"><div style="width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;background:var(--border2);color:var(--text3);flex-shrink:0;">3</div><span style="color:var(--text3);">Defect Assessment — blockers, deferred, waivers</span></div>
<div style="display:flex;align-items:center;gap:10px;padding:7px 10px;background:var(--surface);border-radius:6px;font-size:12px;" id="wiz-nav-4"><div style="width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;background:var(--border2);color:var(--text3);flex-shrink:0;">4</div><span style="color:var(--text3);">Risk Review — open risks with L×I scores</span></div>
<div style="display:flex;align-items:center;gap:10px;padding:7px 10px;background:var(--surface);border-radius:6px;font-size:12px;" id="wiz-nav-5"><div style="width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;background:var(--border2);color:var(--text3);flex-shrink:0;">5</div><span style="color:var(--text3);">Formal GO / NO-GO — timestamped, named, auditable</span></div>
</div>
</div>
<div class="demo-visual">
<!-- Step counter and progress bar — always in sync with content -->
<div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;">
<div style="font-size:11px;font-family:var(--mono);color:var(--text3);">Step <span id="wiz-step-num">1</span> of 5</div>
<div style="font-size:10px;color:var(--text3);font-family:var(--mono);" id="wiz-step-name">Release Overview</div>
</div>
<div class="wizard-steps" id="wiz-dots">
<div class="wiz-step current"></div>
<div class="wiz-step"></div>
<div class="wiz-step"></div>
<div class="wiz-step"></div>
<div class="wiz-step"></div>
</div>
<!-- Step content — rendered by JS, always matches step number -->
<div id="wiz-content" style="margin-bottom:12px;"></div>
<div style="display:flex;gap:8px;">
<button class="sc-btn sc-btn-outline" style="font-size:12px;padding:7px 16px;" onclick="wizPrev()">← Back</button>
<button class="sc-btn sc-btn-primary" style="font-size:12px;padding:7px 16px;" onclick="wizNext()" id="wiz-next-btn">Next Step →</button>
</div>
</div>
</div>
<!-- Demo 2: AI Intelligence -->
<div class="demo-pane" id="demo-2">
<div>
<div class="demo-desc-badge">Pattern-based · No API key</div>
<div class="demo-desc-title">Intelligence that fires as you type</div>
<div class="demo-desc-body">17 pattern rules analyse your release name, notes and defect descriptions as you type. Regulatory keywords, security vulnerabilities, authentication changes, database migrations — each triggers tailored, actionable guidance.</div>
<div class="demo-checklist">
<div class="demo-check-item">Entirely local — no data leaves the browser, no external calls.</div>
<div class="demo-check-item">Rules are updateable from the content JSON — no HTML edits needed.</div>
<div class="demo-check-item">Defect triage: auto-suggests severity and classification as you type.</div>
<div class="demo-check-item">Gate readiness: flags incomplete criteria before you attempt sign-off.</div>
</div>
</div>
<div class="demo-visual">
<div style="font-size:11px;color:var(--text3);margin-bottom:6px;">Release name / notes field</div>
<div class="ai-typing" id="aiTypingDemo">|</div>
<div class="ai-hint-demo" id="aiHintDemo" style="display:none;">
<div class="ai-hint-label">⬡ INTELLIGENCE</div>
<div id="aiHintText"></div>
</div>
<button class="sc-btn sc-btn-outline" style="font-size:12px;padding:7px 16px;margin-top:12px;" onclick="runAIDemo()">▶ Run demo</button>
</div>
</div>
<!-- Demo 3: Integration Simulation -->
<div class="demo-pane" id="demo-3">
<div>
<div class="demo-desc-badge">Real payloads · Live simulation</div>
<div class="demo-desc-title">Watch external systems trigger the tool</div>
<div class="demo-desc-body">The Integration Hub includes a live simulation engine. Click a scenario to watch a real-format JSON payload arrive, get processed, and update the tool state — exactly as it would in a real CI/CD or ServiceNow integration.</div>
<div class="demo-checklist">
<div class="demo-check-item">Jira Release Created → auto-imports as a new release.</div>
<div class="demo-check-item">ServiceNow CHG Approved → updates Go/No-Go gate status.</div>
<div class="demo-check-item">CI/CD Pipeline Complete → marks Dev Complete gate, updates environment version.</div>
<div class="demo-check-item">URL parameters and JS API (window.RMTool) also available — open the Integration Hub in the tool for full documentation.</div>
</div>
</div>
<div class="demo-visual">
<div style="font-size:12px;font-weight:600;color:var(--text2);margin-bottom:12px;">Integration Hub — Live Simulation</div>
<div style="display:flex;gap:8px;margin-bottom:12px;flex-wrap:wrap;">
<button class="sc-btn sc-btn-outline" style="font-size:11px;padding:6px 12px;" onclick="runShowcaseSim('jira')">🟦 Jira Trigger</button>
<button class="sc-btn sc-btn-outline" style="font-size:11px;padding:6px 12px;" onclick="runShowcaseSim('snow')">🟩 ServiceNow CHG</button>
<button class="sc-btn sc-btn-outline" style="font-size:11px;padding:6px 12px;" onclick="runShowcaseSim('pipeline')">⚡ CI/CD Pipeline</button>
</div>
<div id="sim-showcase-display">
<div style="font-size:12px;color:var(--text3);text-align:center;padding:20px;">Click a scenario above to simulate an inbound payload.</div>
</div>
</div>
</div>
</div>
</section>
<!-- STATS -->
<section id="stats">
<div class="container" style="text-align:center;">
<div class="reveal"><div class="section-badge">By the Numbers</div></div>
<div class="section-title reveal delay-1">Built to last. Built to scale.</div>
<div class="stats-grid">
<div class="stat-card reveal delay-1"><div class="stat-num" data-target="186">0</div><div class="stat-label">Functions</div><div class="stat-sub">across 11 feature tabs</div></div>
<div class="stat-card reveal delay-2"><div class="stat-num" data-target="60">0</div><div class="stat-label">Glossary Terms</div><div class="stat-sub">ITIL 4, DORA Metrics, EU DORA, SAFe</div></div>
<div class="stat-card reveal delay-3"><div class="stat-num" data-target="12">0</div><div class="stat-label">Integration Tools</div><div class="stat-sub">Jira to ServiceNow to GitHub</div></div>
<div class="stat-card reveal delay-4"><div class="stat-num" data-target="8">0</div><div class="stat-label">Quality Gates</div><div class="stat-sub">auto-generated per release type</div></div>
<div class="stat-card reveal delay-1"><div class="stat-num" data-target="17">0</div><div class="stat-label">AI Rules</div><div class="stat-sub">fire on input, no API key</div></div>
<div class="stat-card reveal delay-2"><div class="stat-num" data-target="6">0</div><div class="stat-label">Practice Scenarios</div><div class="stat-sub">realistic, fully pre-loaded</div></div>
</div>
</div>
</section>
<!-- FRAMEWORKS -->
<section id="frameworks" style="background:var(--surface);">
<div class="container">
<div class="two-col">
<div>
<div class="reveal"><div class="section-badge">Framework Coverage</div></div>
<div class="section-title reveal delay-1">Standards you already work to.</div>
<div class="section-sub reveal delay-2">Every decision, gate criterion and piece of guidance is grounded in recognised industry frameworks — not invented terminology.</div>
<div class="framework-pills reveal delay-3">
<div class="fw-pill"><span class="fw-icon">📘</span>ITIL 4 Release Practice</div>
<div class="fw-pill"><span class="fw-icon">📊</span>DORA Metrics — Four Keys (dora.dev)</div>
<div class="fw-pill"><span class="fw-icon">🔄</span>SAFe 6.0</div>
<div class="fw-pill"><span class="fw-icon">⚖️</span>EU DORA — Digital Operational Resilience Act (Reg. 2022/2554)</div>
<div class="fw-pill"><span class="fw-icon">🏛️</span>FCA PS21/3</div>
<div class="fw-pill"><span class="fw-icon">🔒</span>UK GDPR / ICO</div>
<div class="fw-pill"><span class="fw-icon">⚙️</span>DevOps patterns</div>
<div class="fw-pill"><span class="fw-icon">🔑</span>Semantic Versioning</div>
</div>
</div>
<div class="reveal-right">
<div style="background:var(--bg);border:1px solid var(--border2);border-radius:14px;padding:22px;">
<div style="font-size:11px;font-weight:600;color:var(--text3);font-family:var(--mono);text-transform:uppercase;letter-spacing:0.08em;margin-bottom:14px;">Delivery Model Coverage</div>
<div class="int-grid" style="grid-template-columns:repeat(4,1fr);">
<div class="int-chip"><span class="int-chip-icon">☁️</span>Cloud</div>
<div class="int-chip"><span class="int-chip-icon">⚡</span>API</div>
<div class="int-chip"><span class="int-chip-icon">📱</span>Mobile</div>
<div class="int-chip"><span class="int-chip-icon">🖥️</span>Desktop</div>
<div class="int-chip"><span class="int-chip-icon">🏛️</span>Legacy/JSP</div>
<div class="int-chip"><span class="int-chip-icon">🔗</span>DI2</div>
<div class="int-chip"><span class="int-chip-icon">🌐</span>CWA</div>
<div class="int-chip"><span class="int-chip-icon">🧪</span>Pilot</div>
</div>
<div style="font-size:11px;color:var(--text3);margin-top:12px;padding:8px 10px;background:var(--surface2);border-radius:6px;">All names, icons and categories are fully customisable in Settings. Add SAP, Salesforce, Oracle, or any model your org uses.</div>
</div>
</div>
</div>
</div>
</section>
<!-- QUALITY -->
<section id="quality">
<div class="container">
<div class="reveal"><div class="section-badge">Built Right</div></div>
<div class="section-title reveal delay-1">Professional grade.<br>No compromises.</div>
<div class="quality-grid">
<div class="qual-card reveal delay-1"><span class="qual-icon">♿</span><div><div class="qual-title">WCAG AA Accessibility</div><div class="qual-body">All badges WCAG AA compliant. Text scale 85–145%, high contrast mode, keyboard navigation, focus-visible outlines, reduced-motion support.</div></div></div>
<div class="qual-card reveal delay-2"><span class="qual-icon">🌙</span><div><div class="qual-title">Dark / Light / High Contrast</div><div class="qual-body">Three colour modes. Emerald-tinted light palette — not generic grey. Fully persistent per user preference.</div></div></div>
<div class="qual-card reveal delay-3"><span class="qual-icon">📱</span><div><div class="qual-title">Mobile Responsive</div><div class="qual-body">44px touch targets, 16px minimum inputs (iOS Safari zoom fix), collapsing grids, print stylesheet for CAB meetings.</div></div></div>
<div class="qual-card reveal delay-4"><span class="qual-icon">🔒</span><div><div class="qual-title">Local-First, Zero Data Risk</div><div class="qual-body">All data in browser localStorage only. No server. No accounts. No telemetry. Nothing leaves the browser.</div></div></div>
<div class="qual-card reveal delay-1"><span class="qual-icon">📦</span><div><div class="qual-title">Single File, No Build Step</div><div class="qual-body">One HTML file. Open it. Works. No npm install, no webpack, no Docker. Version history stays stable — the file name never changes.</div></div></div>
<div class="qual-card reveal delay-2"><span class="qual-icon">🔄</span><div><div class="qual-title">Auto-Updating Guidance</div><div class="qual-body">Framework and regulatory content is a separate JSON layer. Updates silently on load — DORA Metrics, EU DORA (Digital Operational Resilience Act), ITIL 4 and FCA guidance stays current without touching the app.</div></div></div>
</div>
</div>
</section>
<!-- OFFLINE / DOWNLOAD -->
<section style="background:var(--surface);padding:64px 40px;">
<div class="container">
<div class="two-col" style="gap:48px;align-items:center;">
<div>
<div class="reveal"><div class="section-badge">No Lock-in</div></div>
<div class="section-title reveal delay-1" style="font-size:28px;">Three ways to use it.<br>All of them free.</div>
<div class="section-sub reveal delay-2" style="font-size:14px;margin-bottom:20px;">Open source. Local-first. Your data never leaves your browser. Use online, install as a desktop app, or download for offline use.</div>
<a href="HOW-TO-RUN-LOCALLY.md" class="sc-btn sc-btn-outline reveal delay-3" style="font-size:12px;padding:8px 16px;display:inline-flex;">📖 Full setup guide</a>
</div>
<div class="reveal-right" style="display:grid;grid-template-columns:1fr;gap:12px;">
<div style="background:var(--bg);border:1px solid var(--border2);border-radius:10px;padding:16px 18px;">
<div style="font-size:13px;font-weight:600;color:var(--text);margin-bottom:4px;">① Use online</div>
<div style="font-size:12px;color:var(--text3);margin-bottom:10px;">Always the latest version. Auto-updates silently via service worker. Nothing to install.</div>
<a href="https://Zeus-17.github.io/release-management-intelligence/rm-tool-v1.html" class="sc-btn sc-btn-primary" style="font-size:12px;padding:7px 16px;">Launch Tool →</a>
</div>
<div style="background:var(--bg);border:1px solid var(--border2);border-radius:10px;padding:16px 18px;">
<div style="font-size:13px;font-weight:600;color:var(--text);margin-bottom:4px;">② Install as desktop app (PWA)</div>
<div style="font-size:12px;color:var(--text3);margin-bottom:6px;">Visit the tool in Chrome or Edge → click ⊞ in the address bar → Install. Works fully offline. Appears in your Start Menu.</div>
<div style="font-size:11px;color:var(--text3);">Also: iOS Safari → Share → Add to Home Screen</div>
</div>
<div style="background:var(--bg);border:1px solid var(--border2);border-radius:10px;padding:16px 18px;">
<div style="font-size:13px;font-weight:600;color:var(--text);margin-bottom:4px;">③ Download for offline / local use</div>
<div style="font-size:12px;color:var(--text3);margin-bottom:10px;">Download the HTML file and run with a local server (Python or Node). Full instructions in the setup guide.</div>
<div style="display:flex;gap:8px;flex-wrap:wrap;">
<a href="https://Zeus-17.github.io/release-management-intelligence/rm-tool-v1.html" download="rm-tool-v1.html" class="sc-btn sc-btn-outline" style="font-size:12px;padding:7px 14px;">⬇ Download HTML</a>
<a href="HOW-TO-RUN-LOCALLY.md" class="sc-btn sc-btn-outline" style="font-size:12px;padding:7px 14px;">Setup guide</a>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- COMPANION TOOL -->
<section style="background:var(--surface);padding:48px 40px;">
<div class="container">
<div style="background:var(--bg);border:1px solid var(--border2);border-radius:12px;padding:24px 28px;display:flex;align-items:center;gap:24px;flex-wrap:wrap;">
<div style="width:44px;height:44px;background:linear-gradient(135deg,#3b82f6,#1d4ed8);border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0;">
<svg width="22" height="22" fill="none" stroke="#fff" stroke-width="2" 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 style="flex:1;min-width:260px;">
<div style="font-size:11px;font-weight:600;color:var(--text3);font-family:var(--mono);text-transform:uppercase;letter-spacing:0.07em;margin-bottom:4px;">Also from James Holford</div>
<div style="font-size:15px;font-weight:600;color:var(--text);margin-bottom:4px;">ITSM Workflow Intelligence Tool</div>
<div style="font-size:12px;color:var(--text2);line-height:1.6;">Structured incident, change and problem management with regulatory guidance. P1 Fast Track, Go/No-Go for changes, PIR, retrospective and full ServiceNow and Jira output. Works alongside this tool — use ITSM for incidents, RM for releases.</div>
</div>
<a href="https://zeus-17.github.io/itsm-workflow-intelligence/" target="_blank" class="sc-btn sc-btn-outline" style="font-size:12px;padding:9px 18px;border-color:#3b82f680;color:#93c5fd;flex-shrink:0;">View ITSM Tool ↗</a>
</div>
</div>
</section>
<!-- QUOTE -->
<section id="quote">
<div class="quote-card reveal">
<div class="quote-mark">"</div>
<div class="quote-text">Not a replacement for ServiceNow or Jira — a force multiplier. The operational intelligence layer that helps you think clearly, move faster, and leave the audit trail your stakeholders need.</div>
<div class="quote-author" style="line-height:1.8;">For <strong>Release Managers, Service Managers, Technical POs, Delivery Leads</strong> and anyone responsible for coordinating software delivery across complex environments.<br><span style="font-size:11px;color:var(--text3);margin-top:8px;display:block;">Designed and built by <strong style="color:var(--text2);">James Holford</strong> — Senior Service Delivery & Technology Operations Leader, actively upskilling in AI-assisted product development.</span></div>
</div>
</section>
<!-- CTA -->
<section id="cta">
<div class="container">
<div class="reveal"><div class="section-badge">Get Started</div></div>
<div class="cta-title reveal delay-1">Ready to run a better release?</div>
<div class="cta-sub reveal delay-2">Open the tool. Load a practice scenario. Be productive in under 2 minutes.</div>
<div class="reveal delay-3">
<a href="https://Zeus-17.github.io/release-management-intelligence/rm-tool-v1.html" class="sc-btn sc-btn-primary sc-btn-lg">Open Release Management Intelligence →</a>
</div>
<div class="cta-note reveal delay-4">Local-first · No signup · No data leaves your browser · Works offline · Built with AI-assisted development</div>
<div class="cta-badges reveal delay-5">
<span class="cta-badge">✦ v1.6</span>
<span class="cta-badge">© 2026 James Holford</span>
<span class="cta-badge">♿ WCAG AA</span>
<span class="cta-badge">📘 ITIL 4 aligned</span>
<span class="cta-badge">📊 DORA Metrics (Four Keys)</span>
<span class="cta-badge">⚖️ EU DORA aligned</span>
</div>
</div>
</section>
<footer>
<div class="footer-left">Release Management Intelligence · © 2026 James Holford · Personal and organisational use permitted.</div>
<div class="footer-right">
<a class="footer-link" href="https://www.linkedin.com/in/james-holford-z17/" target="_blank">LinkedIn ↗</a>
<a class="footer-link" href="https://github.com/Zeus-17/release-management-intelligence" target="_blank">GitHub ↗</a>
<a class="footer-link" href="https://Zeus-17.github.io/release-management-intelligence/rm-tool-v1.html" target="_blank">Launch Tool ↗</a>
</div>
</footer>
<script>
// ── SCROLL REVEAL ──
const observer = new IntersectionObserver((entries)=>{
entries.forEach(e=>{ if(e.isIntersecting){ e.target.classList.add('visible'); observer.unobserve(e.target); } });
},{ threshold:0.12 });
document.querySelectorAll('.reveal,.reveal-left,.reveal-right').forEach(el=>observer.observe(el));
// ── ANIMATED COUNTERS ──
const counterObserver = new IntersectionObserver((entries)=>{
entries.forEach(e=>{
if(!e.isIntersecting) return;
const el = e.target;
const target = parseInt(el.dataset.target);
let cur = 0;
const step = Math.ceil(target / 40);
const t = setInterval(()=>{
cur = Math.min(cur+step, target);
el.textContent = cur + (el.dataset.suffix||'');
if(cur>=target) clearInterval(t);
}, 35);
counterObserver.unobserve(el);
});
},{ threshold:0.5 });
document.querySelectorAll('[data-target]').forEach(el=>counterObserver.observe(el));
// ── HERO ANIMATIONS ──
setTimeout(()=>{
// Animate ring 1 to 87
animateRing('ring1Arc','ring1Val',87,'#10b981',107);
// Gate counter
let g=0; const gi=setInterval(()=>{ document.getElementById('heroGates').textContent=++g; if(g>=5) clearInterval(gi); },200);
// DORA
setTimeout(()=>{ document.getElementById('heroDORA').textContent='Daily'; },1800);
// Hypercare clock
let h=71,m=24,s=38;
setInterval(()=>{ s--; if(s<0){s=59;m--;} if(m<0){m=59;h--;} document.getElementById('heroHCClock').textContent=`${String(h).padStart(2,'0')}:${String(m).padStart(2,'0')}:${String(s).padStart(2,'0')}`; },1000);
},600);
function animateRing(arcId, valId, target, colour, circ){
let cur=0;
const el=document.getElementById(arcId);
const vEl=document.getElementById(valId);
const t=setInterval(()=>{
cur=Math.min(cur+2,target);
const dash=(cur/100)*circ;
el.setAttribute('stroke-dasharray',`${dash} ${circ}`);
el.setAttribute('stroke',colour);
if(vEl) vEl.textContent=cur;
if(cur>=target) clearInterval(t);
},20);
}
// ── DEMO TABS ──
function switchDemo(idx, btn){
document.querySelectorAll('.demo-tab').forEach(t=>t.classList.remove('active'));
document.querySelectorAll('.demo-pane').forEach(p=>p.classList.remove('active'));
btn.classList.add('active');
document.getElementById('demo-'+idx).classList.add('active');
if(idx===0) setTimeout(animateReadiness,300);
}
// ── READINESS DEMO ──
function animateReadiness(){
const targets={gates:88,defects:100,envs:60,sigs:75};
const weights={gates:0.4,defects:0.3,envs:0.2,sigs:0.1};
let progress=0;
const interval=setInterval(()=>{
progress=Math.min(progress+2,100);
let score=0;
Object.entries(targets).forEach(([k,t])=>{
const val=Math.min(progress*t/100,t);
const bar=document.getElementById('bd-'+k);
const pct=document.getElementById('bd-'+k+'-pct');
if(bar) bar.style.width=val+'%';
if(pct) pct.textContent=Math.round(val)+'%';
score+=val*weights[k];
});
const s=Math.round(score);
const arc=document.getElementById('demoRingArc');
const val=document.getElementById('demoRingVal');
const circ=226;
if(arc) arc.setAttribute('stroke-dasharray',`${(s/100)*circ} ${circ}`);
if(val) val.firstChild.textContent=s;
if(progress>=100) clearInterval(interval);
},18);
}
setTimeout(animateReadiness, 400);
// ── WIZARD DEMO — step counter and content always in sync ──
const WIZ_STEPS = [
{
num:1, name:'Release Overview',
content:`<div style="font-size:12px;color:var(--text2);padding:10px 12px;background:rgba(16,185,129,0.06);border:1px solid rgba(16,185,129,0.2);border-radius:7px;margin-bottom:10px;">
<div style="font-weight:600;color:var(--text);margin-bottom:6px;">Platform Release Q3 2026</div>
<div>Type: MAJOR · Target: 15 Sep 2026 · RM: Jane Smith</div>
<div>Delivery: Cloud, API, Mobile</div>
<div style="margin-top:5px;font-size:11px;color:var(--accent);">Scope: 3 items included, 1 deferred</div>
</div>
<div style="font-size:11px;color:var(--text3);">Confirm you are reviewing the correct release and scope before proceeding to gate review.</div>`
},
{
num:2, name:'Gate Status',
content:`<div class="wiz-criterion pass">✓ Dev Complete — CI/CD Pipeline (automated)</div>
<div class="wiz-criterion pass">✓ Code Review — Tech Lead sign-off 12 Sep</div>
<div class="wiz-criterion pass">✓ SIT — QA Lead sign-off 13 Sep</div>
<div class="wiz-criterion warn">⚠ UAT — In progress, 2 scenarios outstanding</div>
<div class="wiz-criterion" style="color:var(--text3);">○ Pre-Prod — Not started</div>
<div style="font-size:11px;color:var(--text3);margin-top:10px;padding:7px 9px;background:var(--surface2);border-radius:5px;">3 of 8 gates complete · UAT in progress · 2 outstanding scenarios</div>`
},
{
num:3, name:'Defect Assessment',
content:`<div class="wiz-criterion pass">✓ No P1 / P2 release-blocking defects open</div>
<div class="wiz-criterion pass">✓ 2 defects deferred — Director waiver documented (13 Sep)</div>
<div class="wiz-criterion warn">⚠ 1 known issue — cosmetic UI, support team briefed</div>
<div style="font-size:11px;color:var(--text3);margin-top:10px;padding:7px 9px;background:var(--surface2);border-radius:5px;">3 defects total · 0 blockers · 2 deferred · 1 known issue · GO-ready on defects</div>`
},
{
num:4, name:'Risk Review',
content:`<div class="wiz-criterion warn">⚠ Third-party API not confirmed for UAT — Risk score 15 (High)</div>
<div class="wiz-criterion pass">✓ DB migration rollback script tested — score 6 (Low)</div>
<div class="wiz-criterion pass">✓ Mobile App Store submission — score 4 (Low)</div>
<div style="font-size:11px;color:var(--text3);margin-top:10px;padding:7px 9px;background:var(--surface2);border-radius:5px;">3 risks · 1 high open · API risk accepted by Product Director (13 Sep)</div>`
},
{
num:5, name:'Formal Decision',
content:`<div style="display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:10px;">
<div style="padding:12px;background:rgba(16,185,129,0.1);border:2px solid var(--green);border-radius:8px;text-align:center;cursor:pointer;" onclick="this.style.borderColor='var(--accent)'">
<div style="font-size:20px;margin-bottom:4px;">✅</div><div style="font-size:13px;font-weight:700;color:var(--green);">GO</div>
<div style="font-size:10px;color:var(--text3);">Proceed to production</div>
</div>
<div style="padding:12px;background:rgba(248,113,113,0.05);border:1px solid var(--border);border-radius:8px;text-align:center;cursor:pointer;">
<div style="font-size:20px;margin-bottom:4px;">🛑</div><div style="font-size:13px;font-weight:700;color:var(--text3);">NO-GO</div>
<div style="font-size:10px;color:var(--text3);">Hold — resolve issues</div>
</div>
</div>
<div style="font-size:11px;color:var(--text2);padding:8px 10px;background:var(--surface2);border-radius:6px;">Decision recorded: GO · Jane Smith (Release Manager) · ${new Date().toLocaleDateString('en-GB')} · Rationale saved · Release auto-set to GO status</div>`
}
];
let _wizCurrent = 0;
function renderWizStep(){
const s = WIZ_STEPS[_wizCurrent];
// Step number and name — always in sync
document.getElementById('wiz-step-num').textContent = s.num;
document.getElementById('wiz-step-name').textContent = s.name;
// Progress dots — always in sync
document.querySelectorAll('#wiz-dots .wiz-step').forEach((d,i)=>{
d.className = 'wiz-step'+(i<_wizCurrent?' done':i===_wizCurrent?' current':'');
});
// Step content
document.getElementById('wiz-content').innerHTML = s.content;
// Button labels
const nextBtn = document.getElementById('wiz-next-btn');
if(nextBtn) nextBtn.textContent = _wizCurrent===WIZ_STEPS.length-1 ? 'Restart' : 'Next Step →';
// Left nav highlight
for(let i=1;i<=5;i++){
const nav = document.getElementById('wiz-nav-'+i);
if(!nav) continue;
const numEl = nav.querySelector('div');
const textEl = nav.querySelector('span');
if(i-1 === _wizCurrent){
if(numEl){ numEl.style.background='var(--accent)'; numEl.style.color='#fff'; }
if(textEl) textEl.style.color='var(--text)';
} else if(i-1 < _wizCurrent){
if(numEl){ numEl.style.background='var(--accent2)'; numEl.style.color='#fff'; }
if(textEl) textEl.style.color='var(--text2)';
} else {
if(numEl){ numEl.style.background='var(--border2)'; numEl.style.color='var(--text3)'; }
if(textEl) textEl.style.color='var(--text3)';
}
}
}
function wizNext(){
_wizCurrent = (_wizCurrent+1) % WIZ_STEPS.length;
renderWizStep();
}
function wizPrev(){
if(_wizCurrent>0){ _wizCurrent--; renderWizStep(); }
}
// Render step 1 on load
renderWizStep();
// ── AI DEMO ──
const aiScenarios=[
{ text:'Payment Gateway Service Upgrade Q3', delay:60,
hint:'<strong>Payment / Financial system detected.</strong> Regulatory obligations likely. Ensure: EU DORA Article 9 (Digital Operational Resilience Act) change authorisation documented; PCI-DSS scope assessed; CAB approval obtained before go-live.', level:'danger' },
{ text:'User authentication SSO migration', delay:60,
hint:'<strong>Authentication / Identity change detected.</strong> Auth changes carry elevated risk — a failed deployment can lock out all users. Recommend parallel auth path and smoke testing login flows as first post-deploy check.', level:'warn' },
{ text:'Monthly infrastructure patch release', delay:60,
hint:'', level:'' },
];
let _aiScenario=0;
function runAIDemo(){
const s=aiScenarios[_aiScenario%aiScenarios.length];
_aiScenario++;
const el=document.getElementById('aiTypingDemo');
const hint=document.getElementById('aiHintDemo');
const hintText=document.getElementById('aiHintText');
el.innerHTML='<span class="cursor"></span>';
hint.style.display='none';
let i=0;
const t=setInterval(()=>{
el.innerHTML=s.text.slice(0,i)+'<span class="cursor"></span>';
i+=2;
if(i>s.text.length){
clearInterval(t);
el.innerHTML=s.text;
if(s.hint){