Repository navigation
Expand file tree
/
Copy pathindex.html
More file actions
816 lines (721 loc) Β· 29 KB
/
Copy pathindex.html
File metadata and controls
816 lines (721 loc) Β· 29 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>GitHub Copilot Onboarding Portal β 30-Day Setup Checklist</title>
<style>
/* ββ Reset & base ββ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
--gh-bg: #ffffff;
--gh-surface: #ffffff;
--gh-border: #e1e4e8;
--gh-text: #1f2328;
--gh-muted: #57606a;
--gh-link: #0969da;
--gh-green: #08872B;
--gh-green-btn: #0FBF3E;
--gh-green-light: #dafbe1;
--gh-tip-bg: #F2F5F3;
--radius: 6px;
--font: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
}
body {
background: var(--gh-bg);
color: var(--gh-text);
font-family: var(--font);
font-size: 16px;
line-height: 1.6;
min-height: 100vh;
}
a { color: var(--gh-link); text-decoration: none; }
a:hover { text-decoration: underline; }
/* ββ Centered container ββ */
.container {
max-width: 800px;
margin: 0 auto;
padding: 0 24px;
}
/* ββ Header ββ */
header {
text-align: center;
padding: 24px 24px 16px;
}
header .logo {
width: 70px;
height: auto;
margin-bottom: 16px;
}
header h1 {
font-size: 22px;
font-weight: 600;
line-height: 1.3;
color: var(--gh-text);
}
/* ββ Divider ββ */
.divider {
border: none;
border-top: 1px solid var(--gh-border);
margin: 0 0 24px;
}
/* ββ Progress bar ββ */
.progress-section {
padding: 16px 0 24px;
}
.progress-header {
display: flex;
justify-content: space-between;
align-items: baseline;
margin-bottom: 10px;
}
.progress-header .label { font-weight: 600; font-size: 14px; }
.progress-header .count { font-size: 13px; color: var(--gh-muted); }
.progress-bar-track {
background: var(--gh-border);
border-radius: 99px;
height: 8px;
overflow: hidden;
}
.progress-bar-fill {
height: 100%;
border-radius: 99px;
background: var(--gh-green-btn);
transition: width 0.4s ease;
width: 0%;
}
.reset-btn {
display: block;
margin: 12px auto 0;
font-size: 12px;
font-family: var(--font);
color: var(--gh-muted);
background: transparent;
border: 1px solid var(--gh-border);
border-radius: var(--radius);
padding: 5px 14px;
cursor: pointer;
white-space: nowrap;
}
.reset-btn:hover { border-color: var(--gh-muted); color: var(--gh-text); }
/* ββ Week card ββ */
.week-card {
border: 8px solid var(--gh-green);
border-radius: var(--radius);
margin-bottom: 24px;
overflow: hidden;
background: var(--gh-surface);
}
.week-header {
display: flex;
align-items: center;
gap: 12px;
padding: 20px 30px 14px;
}
.week-badge {
font-size: 11px;
font-weight: 700;
letter-spacing: 0.05em;
text-transform: uppercase;
padding: 3px 9px;
border-radius: 99px;
white-space: nowrap;
background: var(--gh-green-light);
color: var(--gh-green);
}
.week-title-group { flex: 1; }
.week-title { font-size: 16px; font-weight: 600; }
.week-days { font-size: 12px; color: var(--gh-muted); margin-top: 1px; }
.week-progress-mini {
font-size: 12px;
color: var(--gh-muted);
text-align: right;
white-space: nowrap;
}
.week-progress-mini strong { color: var(--gh-text); }
/* ββ Task rows ββ */
.tasks-list { list-style: none; }
.task-item {
display: flex;
align-items: flex-start;
gap: 14px;
padding: 14px 30px;
border-bottom: 1px solid var(--gh-border);
transition: background 0.15s;
}
.task-item:last-child { border-bottom: none; }
.task-item:hover { background: rgba(0,0,0,0.015); }
.task-item.done .task-main { opacity: 0.5; }
.task-item.done .task-name { text-decoration: line-through; }
.task-checkbox {
appearance: none;
-webkit-appearance: none;
width: 17px; height: 17px;
border: 2px solid var(--gh-border);
border-radius: 4px;
background: var(--gh-bg);
cursor: pointer;
flex-shrink: 0;
margin-top: 2px;
position: relative;
transition: border-color 0.15s, background 0.15s;
}
.task-checkbox:checked {
background: var(--gh-green-btn);
border-color: var(--gh-green-btn);
}
.task-checkbox:checked::after {
content: '';
position: absolute;
left: 3px; top: 0px;
width: 6px; height: 10px;
border: 2px solid #fff;
border-top: none;
border-left: none;
transform: rotate(45deg);
}
.task-checkbox:focus-visible { outline: 2px solid var(--gh-link); outline-offset: 2px; }
.task-main { flex: 1; min-width: 0; }
.task-name { font-weight: 600; font-size: 14px; margin-bottom: 4px; }
.task-desc { font-size: 13px; color: var(--gh-muted); }
.task-desc .link-row { margin-top: 6px; }
.task-desc .link-row a {
font-size: inherit; /* matches .task-desc (13px) */
color: var(--gh-link);
display: inline-flex;
align-items: center;
gap: 4px;
padding-bottom: 5px;
}
.task-desc .link-row a::before { content: 'β'; }
.task-desc .link-row .tip-box {
display: block;
margin-top: 8px;
padding: 8px 10px;
font-size: 12px;
color: var(--gh-text);
line-height: 1.5;
background: var(--gh-tip-bg);
border: none;
outline: none;
border-radius: var(--radius);
}
.task-desc .link-row .tip-box strong {
font-weight: 600;
}
/* ββ Milestone banner ββ */
.milestone-banner {
margin: 14px 30px 20px;
background: none;
border-radius: var(--radius);
padding: 4px 14px 12px; /* was 6px 14px 12px */
font-size: 13px;
color: var(--gh-text);
display: block; /* was flex */
}
.milestone-banner::before {
content: '';
display: block;
width: 100%; /* was 40% */
height: 1px; /* match checklist divider thickness */
background: var(--gh-border);/* light gray */
margin: 0 0 14px; /* match checklist item spacing rhythm */
border-radius: 0; /* optional: cleaner for 1px line */
}
/* remove icon styling entirely */
.milestone-banner .mi-icon { display: none; }
.milestone-banner .mi-text strong {
display: block;
font-weight: 600;
margin-bottom: 2px;
color: #08872B;
}
.milestone-banner .mi-text span {
color: inherit; /* auto black via parent color */
font-size: 12px;
}
/* ββ All-done message ββ */
#all-done {
display: none;
text-align: center;
padding: 40px 20px;
border: 2px dashed var(--gh-green-btn);
border-radius: var(--radius);
background: var(--gh-green-light);
margin-top: 8px;
}
#all-done h2 { color: var(--gh-green); font-size: 22px; margin-bottom: 8px; }
#all-done p { color: var(--gh-muted); font-size: 14px; }
/* ββ Footer ββ */
footer {
text-align: center;
padding: 24px 0;
font-size: 12px;
color: var(--gh-muted);
line-height: 1.4;
}
footer .footer-links {
margin-bottom: 12px;
}
footer .footer-links a {
color: var(--gh-link);
text-decoration: none;
}
footer .footer-links a:hover { text-decoration: underline; }
</style>
</head>
<body>
<div class="container">
<!-- ββββββββββββββββ HEADER ββββββββββββββββ -->
<header>
<img class="logo"
src="https://d15k2d11r6t6rl.cloudfront.net/pub/hmd2/fnngtanu/0n7/gl8/f2j/mark-github-24.png"
alt="GitHub Logo" />
<h1>Onboarding Checklist: GitHub Copilot</h1>
</header>
<hr class="divider" />
<!-- ββββββββββββββββ MAIN ββββββββββββββββ -->
<main>
<!-- Overall progress bar -->
<div class="progress-section">
<div class="progress-header">
<span class="label">Overall Progress</span>
<span class="count" id="overall-count">0 / 12 tasks completed</span>
</div>
<div class="progress-bar-track">
<div class="progress-bar-fill" id="overall-bar"></div>
</div>
<button class="reset-btn" id="reset-btn" type="button">Reset progress</button>
</div>
<!-- ββ WEEK 1 ββ -->
<div class="week-card">
<div class="week-header">
<span class="week-badge">Week 1</span>
<div class="week-title-group">
<div class="week-title">Set Your Foundation</div>
<div class="week-days">Lay the groundwork so Copilot works smoothly from day one</div>
</div>
<div class="week-progress-mini" id="w1-count"><strong>0</strong> / 3</div>
</div>
<ul class="tasks-list" id="w1-tasks">
<li class="task-item" data-week="1">
<input class="task-checkbox" type="checkbox" aria-label="Define success" />
<div class="task-main">
<div class="task-name">Define success</div>
<div class="task-desc">
Agree on the outcomes and metrics that define a successful Copilot rollout, and capture your baseline before you start.
<div class="link-row" data-tip="Pick two to three measurable goals and record baseline numbers before rollout.">
<a href="https://learn.github.com/product-guides/github-copilot/get-started/define-success" target="_blank" rel="noopener">
<strong>Set intentions </strong>
</a>
</div>
</div>
</div>
</li>
<li class="task-item" data-week="1">
<input class="task-checkbox" type="checkbox" aria-label="Confirm entitlement and enterprise policies" />
<div class="task-main">
<div class="task-name">Confirm entitlement and enterprise policies</div>
<div class="task-desc">
Verify your subscription is provisioned and set enterprise-level policies before anything else, since they govern what every org beneath them can do.
<div class="link-row" data-tip="Enterprise policies override org settings, so you'll want to pay close attention to your choices here.">
<a href="https://docs.github.com/en/copilot/how-tos/administer-copilot/manage-for-enterprise/manage-enterprise-policies"
target="_blank" rel="noopener">
<strong>Manage policies</strong>
</a>
</div>
</div>
</div>
</li>
<li class="task-item" data-week="1">
<input class="task-checkbox" type="checkbox" aria-label="Understand Copilot billing and set budgets" />
<div class="task-main">
<div class="task-name">Understand Copilot billing and set budgets</div>
<div class="task-desc">
Learn how licensing and usage are billed so you can budget and control spend before you scope your rollout.
<div class="link-row" data-tip="Set budgets and alerts before rolling out widely.">
<a href="https://learn.github.com/product-guides/github-copilot/get-started/understanding-copilot-budgeting"
target="_blank" rel="noopener">
<strong>Avoid surprises</strong>
</a>
</div>
</div>
</div>
</li>
<li class="task-item" data-week="1">
<input class="task-checkbox" type="checkbox" aria-label="Create a rollout plan" />
<div class="task-main">
<div class="task-name">Create a rollout plan</div>
<div class="task-desc">
Decide who gets Copilot and in what order β start with a pilot group before going broad.
<div class="link-row" data-tip="Begin with an eager pilot team, learn, then expand.">
<a href="https://learn.github.com/product-guides/github-copilot/get-started/create-a-rollout-plan"
target="_blank" rel="noopener">
<strong>Start small</strong>
</a>
</div>
</div>
</div>
</li>
<li class="task-item" data-week="1">
<input class="task-checkbox" type="checkbox" aria-label="Enable Copilot policies" />
<div class="task-main">
<div class="task-name">Enable Copilot policies</div>
<div class="task-desc">
Choose which Copilot features and models are available to your licensed users at the org level.
<div class="link-row" data-tip="You may also enable third-party coding agents during this step.">
<a href="https://docs.github.com/en/copilot/how-tos/administer-copilot/manage-for-organization/manage-policies"
target="_blank" rel="noopener">
<strong>Take control</strong>
</a>
</div>
</div>
</div>
</li>
<li class="task-item" data-week="1">
<input class="task-checkbox" type="checkbox" aria-label="Configure networking (if required)" />
<div class="task-main">
<div class="task-name">Configure networking (if required)</div>
<div class="task-desc">
Set up proxy access and install custom certificates so Copilot works on your corporate network.
<div class="link-row" data-tip="Install your root CA certificate, but don't disable SSL verification.">
<a href="https://docs.github.com/en/copilot/how-tos/configure-personal-settings/configure-network-settings"
target="_blank" rel="noopener">
<strong>Connect your network</strong>
</a>
</div>
</div>
</div>
</li>
</ul>
<div class="milestone-banner">
<div class="mi-text">
<strong>Steps completed? Here's the exec recap:</strong>
<span>Copilot is configured and access is live. We've defined what success looks like, planned our rollout, and put the right policies and licenses in place so we're set up to deploy on a secure, governed foundation.</span>
</div>
</div>
</div><!-- /week 1 -->
<!-- ββ WEEK 2 ββ -->
<div class="week-card">
<div class="week-header">
<span class="week-badge">Week 2</span>
<div class="week-title-group">
<div class="week-title">Get Your Team Onboard</div>
<div class="week-days">Start small, learn quickly, and build early momentum</div>
</div>
<div class="week-progress-mini" id="w2-count"><strong>0</strong> / 3</div>
</div>
<ul class="tasks-list" id="w2-tasks">
<li class="task-item" data-week="2">
<input class="task-checkbox" type="checkbox" aria-label="Manage access to GitHub Copilot" />
<div class="task-main">
<div class="task-name">Manage access to GitHub Copilot</div>
<div class="task-desc">
Assign and manage Copilot licenses so the right people and teams have access.
<div class="link-row" data-tip="Give access by team to keep licensing organized and easy to track.">
<a href="https://docs.github.com/en/copilot/how-tos/administer-copilot/manage-for-organization/manage-access"
target="_blank" rel="noopener">
<strong>Grant access</strong>
</a>
</div>
</div>
</div>
</li>
<li class="task-item" data-week="2">
<input class="task-checkbox" type="checkbox" aria-label="Enable your team" />
<div class="task-main">
<div class="task-name">Enable your team</div>
<div class="task-desc">
Give developers the training and resources to use Copilot effectively.
<div class="link-row" data-tip="Share quick-start guides and a channel for questions to speed adoption.">
<a href="https://learn.github.com/product-guides/github-copilot/get-started/create-an-enablement-plan"
target="_blank" rel="noopener">
<strong>Empower people</strong>
</a>
</div>
</div>
</div>
</li>
<li class="task-item" data-week="2">
<input class="task-checkbox" type="checkbox" aria-label="Encourage usage in daily workflows" />
<div class="task-main">
<div class="task-name">Encourage usage in daily workflows</div>
<div class="task-desc">
Real value happens when Copilot becomes part of everyday tasks.
<div class="link-row" data-tip="Start with practical use cases, like writing code, refactoring, and generating tests.">
<a href="https://docs.github.com/en/copilot/get-started/best-practices"
target="_blank" rel="noopener">
<strong>Build adoption</strong>
</a>
</div>
</div>
</div>
</li>
<li class="task-item" data-week="2">
<input class="task-checkbox" type="checkbox" aria-label="Turn on Copilot code review" />
<div class="task-main">
<div class="task-name">Turn on Copilot code review</div>
<div class="task-desc">
Enable Copilot to automatically review pull requests so teams get instant feedback and catch issues before human appraisal.
<div class="link-row" data-tip="Set it to auto-request on PRs in a pilot repo first, then roll out once teams trust the feedback.">
<a href="https://learn.github.com/product-guides/github-copilot/accelerate-usage/turn-on-copilot-code-review"
target="_blank" rel="noopener">
<strong>Automate reviews</strong>
</a>
</div>
</div>
</div>
</li>
</ul>
<div class="milestone-banner">
<div class="mi-text">
<strong>Steps completed? Here's the exec recap:</strong>
<span>Teams are enabled and using Copilot in daily work. Developers have the training they need, and we understand the billing model β so adoption starts with cost visibility from day one.</span>
</div>
</div>
</div><!-- /week 2 -->
<!-- ββ WEEK 3 ββ -->
<div class="week-card">
<div class="week-header">
<span class="week-badge">Week 3</span>
<div class="week-title-group">
<div class="week-title">Build Adoption</div>
<div class="week-days">Turn early usage into consistent, meaningful habits</div>
</div>
<div class="week-progress-mini" id="w3-count"><strong>0</strong> / 3</div>
</div>
<ul class="tasks-list" id="w3-tasks">
<li class="task-item" data-week="3">
<input class="task-checkbox" type="checkbox" aria-label="Expand your use cases" />
<div class="task-main">
<div class="task-name">Expand your use cases</div>
<div class="task-desc">
Visit the Copilot Cookbook to get even more ideas about how to leverage Copilot in your daily workflows.
<div class="link-row" data-tip="Encourage teams to try one new use case each week. It's a simple way to build confidence and discover what works best.">
<a href="https://docs.github.com/en/copilot/tutorials/copilot-cookbook"
target="_blank" rel="noopener">
<strong>Get cooking</strong>
</a>
</div>
</div>
</div>
</li>
<li class="task-item" data-week="3">
<input class="task-checkbox" type="checkbox" aria-label="Understand agentic governance" />
<div class="task-main">
<div class="task-name">Understand agentic governance</div>
<div class="task-desc">
Create a foundation of strong governance, shared knowledge, and clear feedback loops to get the most out of agents.
<div class="link-row" data-tip="Define who can use agents, and on which repos, before scaling wider.">
<a href="https://github.com/resources/insights/agentic-engineering-system"
target="_blank" rel="noopener">
<strong>Bring in agents</strong>
</a>
</div>
</div>
</div>
</li>
<li class="task-item" data-week="3">
<input class="task-checkbox" type="checkbox" aria-label="Build a lasting Copilot community" />
<div class="task-main">
<div class="task-name">Build a lasting Copilot community </div>
<div class="task-desc">
Adoption sticks when developers have a place to share wins, tips, and questions. Name internal champions and give teams a channel to keep learning from each other.
<div class="link-row" data-tip="Recognize power users as champions. Peer momentum sustains adoption better than top-down mandates.">
<a href="https://learn.github.com/product-guides/github-copilot/accelerate-usage/build-the-internal-copilot-community"
target="_blank" rel="noopener">
<strong>Establish champions</strong>
</a>
</div>
</div>
</div>
</li>
</ul>
<div class="milestone-banner">
<div class="mi-text">
<strong>Steps completed? Here's the exec recap:</strong>
<span>Copilot adoption is building momentum, with developers using it in daily workflows and expanding into more advanced use cases, and we're implementing the right guardrails as usage grows.</span>
</div>
</div>
</div><!-- /week 3 -->
<!-- ββ WEEK 4 ββ -->
<div class="week-card">
<div class="week-header">
<span class="week-badge">Week 4</span>
<div class="week-title-group">
<div class="week-title">Measure & Scale</div>
<div class="week-days">Understand what's working and grow with confidence</div>
</div>
<div class="week-progress-mini" id="w4-count"><strong>0</strong> / 3</div>
</div>
<ul class="tasks-list" id="w4-tasks">
<li class="task-item" data-week="4">
<input class="task-checkbox" type="checkbox" aria-label="Collect user feedback" />
<div class="task-main">
<div class="task-name">Collect user feedback</div>
<div class="task-desc">
Pairing data with feedback gives you a clearer picture of impact.
<div class="link-row" data-tip="Keep the ask short. Quick surveys or team check-ins work well.">
<a href="https://learn.github.com/product-guides/github-copilot/accelerate-usage/set-up-a-feedback-mechanism"
target="_blank" rel="noopener">
<strong>Gather learnings</strong>
</a>
</div>
</div>
</div>
</li>
<li class="task-item" data-week="4">
<input class="task-checkbox" type="checkbox" aria-label="Review usage and adoption trends" />
<div class="task-main">
<div class="task-name">Review usage and adoption trends</div>
<div class="task-desc">
Usage patterns show you where Copilot is delivering value against your original goals.
<div class="link-row" data-tip="Look for trends across teams, not just individual users.">
<a href="https://docs.github.com/en/copilot/concepts/copilot-usage-metrics/copilot-metrics"
target="_blank" rel="noopener">
<strong>Analyze metrics</strong>
</a>
</div>
</div>
</div>
</li>
<li class="task-item" data-week="4">
<input class="task-checkbox" type="checkbox" aria-label="Optimize use" />
<div class="task-main">
<div class="task-name">Optimize use</div>
<div class="task-desc">
Improve agent quality and token optimization.
<div class="link-row" data-tip="Refine prompts and custom instructions to raise quality and cut wasted tokens.">
<a href="https://learn.github.com/product-guides/github-copilot/accelerate-usage/improve-agent-quality-and-token-optimization"
target="_blank" rel="noopener">
<strong>Budget smartly</strong>
</a>
</div>
</div>
</div>
</li>
</ul>
<div class="milestone-banner">
<div class="mi-text">
<strong>Steps completed? Here's the exec recap:</strong>
<span>With setup complete, we're now in a steady rhythm of monitoring value and improving. We're tracking adoption against our original goals, acting on user feedback, and sustaining momentum across additional teams.</span>
</div>
</div>
</div><!-- /week 4 -->
<!-- All done banner -->
<div id="all-done" role="status">
<h2>π Congratulations!</h2>
<p>You've completed the 30-Day GitHub Copilot Setup Checklist.<br>
Your organization is on its way to a better productivity!</p>
</div>
</main>
<hr class="divider" />
<!-- ββββββββββββββββ FOOTER ββββββββββββββββ -->
<footer>
<div class="footer-links">
<a href="https://docs.github.com/en/site-policy/privacy-policies/github-general-privacy-statement">Privacy Policy</a>
|
<a href="https://docs.github.com/en/site-policy/github-terms/github-terms-of-service">Terms of Service</a>
|
<a href="https://help.github.com/">GitHub Help</a>
</div>
© 2026 GitHub, Inc. All rights reserved.<br />
GitHub, Inc.<br />
88 Colin P Kelly Jr St.<br />
San Francisco, CA 94107
</footer>
</div><!-- /.container -->
<script>
(function() {
'use strict';
/* ββ Unique visitor ID ββ */
function getVisitorId() {
var params = new URLSearchParams(window.location.search);
var id = params.get('id');
if (!id) {
id = crypto.randomUUID ? crypto.randomUUID() :
'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
var r = Math.random() * 16 | 0;
return (c === 'x' ? r : (r & 0x3 | 0x8)).toString(16);
});
params.set('id', id);
history.replaceState(null, '', '?' + params.toString());
}
return id;
}
var visitorId = getVisitorId();
var STORAGE_KEY = 'ghas-checklist-' + visitorId;
var checkboxes = Array.from(document.querySelectorAll('.task-checkbox'));
var TOTAL = checkboxes.length;
/* ββ Persist & restore ββ */
function save() {
var state = checkboxes.map(function(cb) { return cb.checked; });
try {
localStorage.setItem(STORAGE_KEY, JSON.stringify(state));
} catch (e) { /* storage full or unavailable */ }
}
function load() {
try {
var raw = localStorage.getItem(STORAGE_KEY);
if (!raw) return;
var state = JSON.parse(raw);
checkboxes.forEach(function(cb, i) {
if (state[i]) { cb.checked = true; }
});
} catch (e) { /* ignore corrupt data */ }
}
/* ββ UI update ββ */
function update() {
var total = 0;
[1, 2, 3, 4].forEach(function(w) {
var items = document.querySelectorAll('.task-item[data-week="' + w + '"]');
var done = 0;
items.forEach(function(li) {
var cb = li.querySelector('.task-checkbox');
if (cb.checked) { done++; total++; li.classList.add('done'); }
else { li.classList.remove('done'); }
});
var countEl = document.getElementById('w' + w + '-count');
countEl.innerHTML = '<strong>' + done + '</strong> / ' + items.length;
});
var pct = Math.round((total / TOTAL) * 100);
document.getElementById('overall-bar').style.width = pct + '%';
document.getElementById('overall-count').textContent =
total + ' / ' + TOTAL + ' tasks completed';
document.getElementById('all-done').style.display =
total === TOTAL ? 'block' : 'none';
}
/* ββ Reset handler ββ */
document.getElementById('reset-btn').addEventListener('click', function() {
checkboxes.forEach(function(cb) { cb.checked = false; });
try { localStorage.removeItem(STORAGE_KEY); } catch (e) {}
save();
update();
});
/* ββ Wire up checkbox events ββ */
checkboxes.forEach(function(cb) {
cb.addEventListener('change', function() { save(); update(); });
});
function renderTips() {
var rows = Array.from(document.querySelectorAll('.task-desc .link-row[data-tip]'));
rows.forEach(function(row) {
if (row.querySelector('.tip-box')) return;
var text = row.getAttribute('data-tip');
if (!text) return;
var box = document.createElement('div');
box.className = 'tip-box';
var label = document.createElement('strong');
label.textContent = 'π‘ Tip:';
box.appendChild(label);
box.appendChild(document.createTextNode(' ' + text));
row.appendChild(box);
});
}
/* ββ Init ββ */
renderTips();
load();
update();
})();
</script>
</body>
</html>