-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathgithub-team-guide.html
More file actions
736 lines (679 loc) · 37 KB
/
Copy pathgithub-team-guide.html
File metadata and controls
736 lines (679 loc) · 37 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
<!DOCTYPE html>
<html lang="en-AU">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>GitHub Team Guide — IM Racing Challenge</title>
<link rel="icon" type="image/svg+xml" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 166 142'><path d='M122.748 94.3069L106.15 139.418L35.686 3.69806L33.6758 0L74.2812 0.106144' fill='%2323B2EF'/><path d='M165.181 0H134.199V142H165.181V0Z' fill='%2323B2EF'/><path d='M26.7985 141.723H0.523438V81.779C0.523438 81.779 0.524017 55.1074 0.524017 53.4409H30.9802V141.723' fill='%2323B2EF'/><path d='M15.4909 32.2727C24.0462 32.2727 30.9817 25.0482 30.9817 16.1364C30.9817 7.2245 24.0462 0 15.4909 0C6.9355 0 0 7.2245 0 16.1364C0 25.0482 6.9355 32.2727 15.4909 32.2727Z' fill='%2323B2EF'/></svg>">
<link rel="preload" as="style" href="https://fonts.googleapis.com/css2?family=Julius+Sans+One&family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Julius+Sans+One&family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap">
<style>
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
:root {
--navy: #002F6C;
--navy-light: #0a3d7a;
--sky: #27C1F4;
--sky-light: #4fd1ff;
--sky-muted: #e6f7fe;
--charcoal: #333740;
--cool-grey: #DCDDEB;
--slate: #64748b;
--warm-gray: #94a3b8;
--light: #f1f5f9;
--lighter: #f8fafc;
--white: #ffffff;
--green: #22c55e;
--green-muted: #dcfce7;
--amber: #f59e0b;
--amber-muted: #fef3c7;
--red-muted: #fee2e2;
--red: #ef4444;
--display: 'Julius Sans One', 'Trebuchet MS', sans-serif;
--sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
--mono: 'JetBrains Mono', 'SF Mono', 'Fira Code', monospace;
}
html { scroll-behavior: smooth; }
body {
font-family: var(--sans);
font-size: 15px;
line-height: 1.7;
color: var(--charcoal);
background: var(--lighter);
-webkit-font-smoothing: antialiased;
}
.skip-link {
position: absolute;
top: -40px;
left: 16px;
background: var(--navy);
color: var(--white);
padding: 8px 16px;
border-radius: 0 0 6px 6px;
font-family: var(--mono);
font-size: 12px;
text-decoration: none;
z-index: 1000;
transition: top 0.2s;
}
.skip-link:focus { top: 0; }
/* HERO */
.hero {
background: var(--navy);
color: var(--white);
padding: 60px 0 56px;
position: relative;
overflow: hidden;
}
.hero::before {
content: '';
position: absolute;
top: -40%;
right: -15%;
width: 550px;
height: 550px;
background: radial-gradient(circle, rgba(39,193,244,0.15) 0%, transparent 70%);
pointer-events: none;
}
.hero::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 3px;
background: linear-gradient(90deg, var(--sky), var(--navy), var(--sky));
}
.hero-inner {
max-width: 960px;
margin: 0 auto;
padding: 0 40px;
position: relative;
}
.hero-logo { margin-bottom: 32px; opacity: 0.92; }
.hero-logo svg { height: 28px; width: auto; }
.hero-label {
font-family: var(--mono);
font-size: 11px;
font-weight: 500;
letter-spacing: 2.5px;
text-transform: uppercase;
color: var(--sky);
margin-bottom: 16px;
display: flex;
align-items: center;
gap: 10px;
}
.hero-label::before {
content: '';
width: 24px;
height: 1px;
background: var(--sky);
}
.hero h1 {
font-family: var(--display);
font-size: 42px;
font-weight: 400;
line-height: 1.2;
letter-spacing: -0.5px;
text-transform: uppercase;
margin-bottom: 18px;
}
.hero p {
font-size: 16px;
line-height: 1.7;
color: rgba(255,255,255,0.7);
max-width: 620px;
font-weight: 300;
}
/* NAV */
.nav-strip {
background: var(--white);
border-bottom: 1px solid var(--cool-grey);
position: sticky;
top: 0;
z-index: 100;
}
.nav-inner {
max-width: 960px;
margin: 0 auto;
padding: 0 40px;
display: flex;
gap: 0;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.nav-inner::-webkit-scrollbar { display: none; }
.nav-inner a {
font-family: var(--mono);
font-size: 11px;
font-weight: 500;
letter-spacing: 1.5px;
text-transform: uppercase;
text-decoration: none;
color: var(--slate);
padding: 16px 20px;
border-bottom: 2px solid transparent;
transition: all 0.2s;
white-space: nowrap;
}
.nav-inner a:hover {
color: var(--navy);
border-bottom-color: var(--sky);
}
.nav-inner a:focus-visible {
outline: 2px solid var(--sky);
outline-offset: 2px;
border-radius: 2px;
}
/* LAYOUT */
.container { max-width: 960px; margin: 0 auto; padding: 0 40px; }
section { padding: 70px 0 20px; }
/* SECTION HEADERS */
.section-header {
display: flex;
align-items: baseline;
gap: 16px;
margin-bottom: 40px;
padding-bottom: 20px;
border-bottom: 1px solid var(--cool-grey);
}
.section-number {
font-family: var(--display);
font-size: 56px;
line-height: 1;
color: var(--sky);
opacity: 0.35;
letter-spacing: 0px;
}
.section-title {
font-family: var(--display);
font-size: 28px;
font-weight: 400;
color: var(--navy);
letter-spacing: 0px;
text-transform: uppercase;
}
/* CARDS */
.card {
background: var(--white);
border: 1px solid var(--cool-grey);
border-radius: 10px;
padding: 32px;
margin-bottom: 24px;
transition: box-shadow 0.25s;
}
.card:hover { box-shadow: 0 4px 24px rgba(0,47,108,0.06); }
.card h3 {
font-family: var(--sans);
font-size: 16px;
font-weight: 600;
color: var(--navy);
margin-bottom: 12px;
display: flex;
align-items: center;
gap: 10px;
}
.card h3 .icon {
width: 28px;
height: 28px;
background: var(--navy);
border-radius: 6px;
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.card h3 .icon svg {
width: 16px;
height: 16px;
stroke: var(--white);
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
fill: none;
}
.card p, .card li {
color: #475569;
font-size: 14.5px;
line-height: 1.75;
}
.card ul { list-style: none; padding: 0; }
.card ul li { padding: 3px 0 3px 20px; position: relative; }
.card ul li::before {
content: '';
position: absolute;
left: 0;
top: 12px;
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--sky);
opacity: 0.7;
}
/* STEPS */
.step {
background: var(--white);
border: 1px solid var(--cool-grey);
border-radius: 10px;
padding: 32px;
padding-left: 88px;
margin-bottom: 20px;
position: relative;
transition: box-shadow 0.25s;
}
.step:hover { box-shadow: 0 4px 24px rgba(0,47,108,0.06); }
.step-num {
position: absolute;
left: 28px;
top: 28px;
width: 40px;
height: 40px;
background: var(--navy);
color: var(--white);
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
font-family: var(--display);
font-size: 20px;
line-height: 1;
letter-spacing: 0;
}
.step h3 {
font-family: var(--sans);
font-size: 16px;
font-weight: 600;
color: var(--navy);
margin-bottom: 10px;
}
.step p {
font-size: 14.5px;
color: #475569;
line-height: 1.75;
margin-bottom: 8px;
}
.step code {
font-family: var(--mono);
font-size: 12.5px;
background: var(--sky-muted);
padding: 2px 7px;
border-radius: 4px;
color: var(--navy);
font-weight: 500;
}
/* CALLOUT */
.callout {
background: var(--sky-muted);
border-left: 3px solid var(--sky);
border-radius: 0 8px 8px 0;
padding: 16px 20px;
margin: 24px 0;
font-size: 14px;
color: #475569;
line-height: 1.7;
}
.callout strong { color: var(--navy); }
/* LINK BOX */
.link-box {
background: var(--navy);
border-radius: 10px;
padding: 24px 32px;
margin: 24px 0;
text-align: center;
}
.link-box p {
font-family: var(--mono);
font-size: 11px;
letter-spacing: 2px;
text-transform: uppercase;
color: var(--sky);
margin-bottom: 10px;
}
.link-box a {
font-family: var(--mono);
font-size: 14px;
color: var(--white);
word-break: break-all;
text-decoration: none;
border-bottom: 1px solid rgba(255,255,255,0.3);
padding-bottom: 2px;
}
.link-box a:hover { border-bottom-color: var(--sky); }
/* FOOTER */
footer {
background: var(--navy);
padding: 32px 0;
margin-top: 60px;
text-align: center;
}
footer .footer-logo { margin-bottom: 12px; opacity: 0.7; }
footer .footer-logo svg { height: 22px; width: auto; }
footer p {
font-family: var(--mono);
font-size: 11px;
letter-spacing: 1px;
color: rgba(255,255,255,0.4);
text-transform: uppercase;
}
/* MOBILE */
@media (max-width: 768px) {
.hero-inner { padding: 0 20px; }
.hero h1 { font-size: 28px; }
.container { padding: 0 20px; }
section { padding-top: 48px; }
.section-number { font-size: 40px; }
.section-title { font-size: 22px; }
.nav-inner a { font-size: 10px; padding: 14px 12px; }
.card { padding: 20px; }
.step { padding: 20px; padding-top: 70px; }
.step-num { left: 20px; top: 20px; }
.link-box { padding: 20px; }
.link-box a { font-size: 12px; }
}
@media print {
.nav-strip { display: none; }
.hero { padding: 30px 0; }
section { break-inside: avoid; }
.card, .step { break-inside: avoid; box-shadow: none; border: 1px solid var(--cool-grey); }
}
</style>
</head>
<body>
<a href="#getting-started" class="skip-link">Skip to content</a>
<!-- HERO -->
<div class="hero">
<div class="hero-inner">
<div class="hero-logo">
<svg role="img" viewBox="0 0 1208 142" fill="none" xmlns="http://www.w3.org/2000/svg">
<title>Integral Media</title>
<path d="M122.748 94.3069L106.15 139.418L35.686 3.69806L33.6758 0L74.2812 0.106144" fill="#23B2EF"/>
<path d="M165.181 0H134.199V142H165.181V0Z" fill="#23B2EF"/>
<path d="M26.7985 141.723H0.523438V81.779C0.523438 81.779 0.524017 55.1074 0.524017 53.4409H30.9802V141.723" fill="#23B2EF"/>
<path d="M15.4909 32.2727C24.0462 32.2727 30.9817 25.0482 30.9817 16.1364C30.9817 7.2245 24.0462 0 15.4909 0C6.9355 0 0 7.2245 0 16.1364C0 25.0482 6.9355 32.2727 15.4909 32.2727Z" fill="#23B2EF"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M225.182 24.4333H238.011V116.934H225.182V24.4333Z" fill="rgba(255,255,255,0.85)"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M258.809 23.7166H266.604L323.941 89.8193L323.958 89.8391C324.694 90.7129 325.398 91.5541 326.071 92.3627C326.062 91.5421 326.057 90.7062 326.057 89.855V24.4333H338.887V117.651H331.093L272.709 50.3881C272.707 50.3857 272.705 50.3833 272.703 50.3809C272.315 49.9385 271.939 49.5093 271.576 49.0933L271.638 51.7096V116.934H258.809V23.7166Z" fill="rgba(255,255,255,0.85)"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M346.602 24.4333H417.243V36.546H388.337V116.934H375.508V36.546H346.602V24.4333Z" fill="rgba(255,255,255,0.85)"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M424.98 24.4333H471.733V36.546H437.81V60.8648H468.508V72.858H437.81V104.821H473.047V116.934H424.98V24.4333Z" fill="rgba(255,255,255,0.85)"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M492.945 36.9267C501.461 27.6323 512.423 23 525.538 23C535.494 23 545.539 24.6603 555.661 27.9518L559.034 29.0488L555.313 40.4986L551.991 39.502C542.721 36.721 533.908 35.3515 525.538 35.3515C516.072 35.3515 508.538 38.6953 502.636 45.38C496.653 52.155 493.61 60.4929 493.61 70.624C493.61 80.5379 496.997 88.8331 503.812 95.7209C510.623 102.605 518.83 106.016 528.643 106.016C536.455 106.016 542.926 105.071 548.149 103.29V67.0761H560.978V110.343L559.301 111.384C551.587 116.172 541.123 118.367 528.285 118.367C514.955 118.367 503.538 113.757 494.254 104.559L494.242 104.547C484.966 95.2708 480.303 83.8922 480.303 70.624C480.303 57.3902 484.488 46.0776 492.945 36.9267Z" fill="rgba(255,255,255,0.85)"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M579.242 24.8012C586.857 24.2402 593.281 23.9555 598.495 23.9555C607.248 23.9555 614.766 26.2403 620.771 31.0575C627.001 35.9721 629.994 42.9619 629.994 51.5124C629.994 57.4291 628.25 62.9361 624.843 67.9577C622.377 71.5906 619.65 74.7105 616.648 77.2808C619.161 80.6986 622.088 84.6044 625.431 88.9996C629.784 94.539 632.523 97.9301 633.725 99.288C638.091 103.927 644.5 106.73 647 106L642 117.5C636.867 117.416 637.813 117.049 634.194 115.43L634.159 115.415L634.124 115.398C630.649 113.752 627.406 111.328 624.38 108.215L624.362 108.196L624.344 108.178C621.538 105.207 614.932 96.5546 604.691 82.5289C599.016 82.5018 593.713 82.3458 588.784 82.0596V116.934H575.955V25.0435L579.242 24.8012ZM588.784 36.4574V70.2608C593.838 70.527 598.587 70.6594 603.034 70.6594C604.952 70.6594 607.794 69.349 611.575 64.9628C615.006 60.9829 616.687 56.468 616.687 51.2735C616.687 46.0259 614.971 42.5632 611.895 40.2559L611.864 40.2329L611.834 40.2093C608.568 37.6479 604.002 36.1876 597.778 36.1876C595.136 36.1876 592.139 36.2768 588.784 36.4574Z" fill="rgba(255,255,255,0.85)"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M689.276 23.8361H697.342L736.391 116.934H722.237L709.934 87.3112H676.447L664.144 116.934H650.355L689.276 23.8361ZM693.134 47.001C692.928 47.5096 692.722 48.0009 692.517 48.4747L681.416 75.3179H704.957L693.881 48.6343C693.621 48.0684 693.372 47.5239 693.134 47.001Z" fill="rgba(255,255,255,0.85)"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M741.609 24.4333H754.439V104.583H793.737V116.934H741.609V24.4333Z" fill="rgba(255,255,255,0.85)"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M847.451 23.7166H856.167L883.696 89.1437C883.775 89.3174 883.854 89.4907 883.932 89.6635C884.01 89.5017 884.089 89.3376 884.169 89.1711L914.863 23.7166H923.395L937.487 116.934H924.315L915.086 52.6829L887.125 112.515H879.268L854.89 53.494L845.275 116.934H832.195L847.451 23.7166Z" fill="rgba(255,255,255,0.85)"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M949.691 24.4333H996.444V36.546H962.521V60.8648H993.219V72.858H962.521V104.821H997.758V116.934H949.691V24.4333Z" fill="rgba(255,255,255,0.85)"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M1013.34 24.4417C1021.54 23.8786 1029.83 23.5972 1038.19 23.5972C1052.13 23.5972 1064.01 27.9788 1073.57 36.845C1083.25 45.7524 1087.96 57.8334 1087.96 72.6546C1087.96 80.1182 1086.75 86.8835 1084.23 92.8826C1081.81 98.7626 1078.38 103.606 1073.88 107.291L1073.87 107.3L1073.86 107.31C1064.93 114.508 1053.87 118.009 1040.93 118.009C1032.77 118.009 1023.55 117.565 1013.28 116.682L1010.03 116.403V24.6685L1013.34 24.4417ZM1022.86 36.3236V105.05C1027.52 105.451 1033.53 105.658 1040.93 105.658C1051.5 105.658 1059.59 102.825 1065.56 97.4842C1071.43 92.2305 1074.65 84.1439 1074.65 72.5352C1074.65 61.083 1071.08 52.3263 1064.19 45.8581L1064.18 45.8518L1064.17 45.8455C1057.24 39.2724 1048.66 35.9488 1038.19 35.9488C1032.45 35.9488 1027.35 36.0747 1022.86 36.3236Z" fill="rgba(255,255,255,0.85)"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M1103.85 24.4333H1116.68V116.934H1103.85V24.4333Z" fill="rgba(255,255,255,0.85)"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M1160.76 23.8361H1168.83L1207.88 116.934H1193.72L1181.42 87.3112H1147.93L1135.63 116.934H1121.84L1160.76 23.8361ZM1164.62 47.001C1164.41 47.511 1164.21 48.0035 1164 48.4785L1152.9 75.3179H1176.44L1165.37 48.6351C1165.11 48.0689 1164.86 47.5241 1164.62 47.001Z" fill="rgba(255,255,255,0.85)"/>
</svg>
</div>
<div class="hero-label">Melbourne Team Guide</div>
<h1>GitHub Setup for the Racing Challenge</h1>
<p>A simple step-by-step guide to get you set up on GitHub and contributing to our racing game. No experience needed — just follow along.</p>
</div>
</div>
<!-- NAV -->
<nav class="nav-strip">
<div class="nav-inner">
<a href="#getting-started">Getting Started</a>
<a href="#join-the-team">Join the Team</a>
<a href="#the-brief">The Brief</a>
<a href="#contribute">How to Contribute</a>
<a href="#ai-workflow">Using AI Tools</a>
<a href="#play">Play the Game</a>
</div>
</nav>
<!-- SECTION 1: GETTING STARTED -->
<section id="getting-started">
<div class="container">
<div class="section-header">
<span class="section-number" aria-hidden="true">01</span>
<h2 class="section-title">Getting Started with GitHub</h2>
</div>
<p style="font-size:15px;color:#475569;margin-bottom:28px;line-height:1.8;">GitHub is where our racing game project lives. Think of it like a shared Google Drive folder, but with one superpower: it remembers every version of every file, so nothing ever gets lost. Here is how to get yourself set up.</p>
<div class="step">
<div class="step-num" aria-hidden="true">1</div>
<h3>Create a GitHub Account</h3>
<p>If you do not already have one, head to <strong>github.com</strong> and click <strong>Sign Up</strong>. Use your work email, pick a username, and set a password. Verify your email when the confirmation comes through.</p>
</div>
<div class="step">
<div class="step-num" aria-hidden="true">2</div>
<h3>Send Louis Your GitHub Username</h3>
<p>Once you have your account, send your <strong>GitHub username</strong> to Louis (via Slack, Teams, email, whatever is easiest). He needs it to add you as a collaborator so you can upload files and make changes to the project.</p>
</div>
<div class="step">
<div class="step-num" aria-hidden="true">3</div>
<h3>Accept the Collaborator Invitation</h3>
<p>After Louis adds you, you will receive an email from GitHub with an invitation. Click the link to accept. If you cannot find the email, check your spam folder, or go directly to the repo link below and you should see a banner at the top asking you to accept.</p>
</div>
<div class="step">
<div class="step-num" aria-hidden="true">4</div>
<h3>Open the Project</h3>
<p>Click the link below to go straight to our project. Bookmark it — this is where everything lives.</p>
</div>
<div class="link-box">
<p>Our Project Repository</p>
<a href="https://github.com/IntegralMedia01/Im-Racing-Challenge--Melbourne-Team-">github.com/IntegralMedia01/Im-Racing-Challenge--Melbourne-Team-</a>
</div>
</div>
</section>
<!-- SECTION 2: JOIN THE TEAM -->
<section id="join-the-team">
<div class="container">
<div class="section-header">
<span class="section-number" aria-hidden="true">02</span>
<h2 class="section-title">Join the Team</h2>
</div>
<p style="font-size:15px;color:#475569;margin-bottom:28px;line-height:1.8;">Being added as a collaborator means you can upload files, edit code, and contribute to the game. Here is what to expect.</p>
<div class="card">
<h3><span class="icon" aria-hidden="true"><svg viewBox="0 0 24 24"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M22 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg></span> What You Can Do as a Collaborator</h3>
<ul>
<li>View all files in the project</li>
<li>Upload new files (like your game contributions)</li>
<li>Edit existing files directly in the browser</li>
<li>See every change anyone has made and when they made it</li>
</ul>
</div>
<div class="card">
<h3><span class="icon" aria-hidden="true"><svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/></svg></span> Cannot Find the Invitation Email?</h3>
<ul>
<li>Check your spam or junk folder</li>
<li>Make sure Louis has your correct GitHub username (not your email)</li>
<li>Try going directly to the repo link above — if you have been invited, you will see a yellow banner at the top asking you to accept</li>
<li>As a last resort, ask Louis to remove and re-add you</li>
</ul>
</div>
</div>
</section>
<!-- SECTION 3: THE BRIEF -->
<section id="the-brief">
<div class="container">
<div class="section-header">
<span class="section-number" aria-hidden="true">03</span>
<h2 class="section-title">The Brief</h2>
</div>
<div class="card">
<h3><span class="icon" aria-hidden="true"><svg viewBox="0 0 24 24"><path d="M13 2 3 14h9l-1 8 10-12h-9l1-8z"/></svg></span> Build a Racing Game</h3>
<p>Build a browser-based racing game. Cars, bikes, karts, spaceships — whatever you want, as long as it involves racing. The game must work by opening a single HTML file or URL in a browser. No server required.</p>
<ul>
<li>Must run in-browser — HTML, CSS, and JavaScript only</li>
<li>Must be playable — not just a demo or animation</li>
<li>AI tools are encouraged (Claude Code, Cursor, ChatGPT, whatever you like)</li>
<li>Creativity matters — surprise us</li>
</ul>
</div>
<div class="callout">
<strong>Presentation:</strong> 30 minutes per team member to present your game. Show it off, explain your thinking, and let the judges have a go.
</div>
<div class="card">
<h3><span class="icon" aria-hidden="true"><svg viewBox="0 0 24 24"><path d="M12 20h9"/><path d="M16.5 3.5a2.121 2.121 0 1 1 3 3L7 19l-4 1 1-4L16.5 3.5z"/></svg></span> Think Outside the Box</h3>
<p>The brief says "racing" — but it does not say how. Here are some questions to spark ideas:</p>
<ul>
<li>What if the track is not a road?</li>
<li>What if you are not racing against other players?</li>
<li>What if speed is not the only thing that matters?</li>
<li>What if the vehicle does not have wheels?</li>
</ul>
<p style="margin-top:12px;">The best entries will not just be technically solid — they will make people smile, laugh, or say "I did not expect that." Push boundaries. Take risks.</p>
</div>
</div>
</section>
<!-- SECTION 4: HOW TO CONTRIBUTE -->
<section id="contribute">
<div class="container">
<div class="section-header">
<span class="section-number" aria-hidden="true">04</span>
<h2 class="section-title">How to Contribute</h2>
</div>
<p style="font-size:15px;color:#475569;margin-bottom:28px;line-height:1.8;">You do not need to be a developer to contribute. Everything can be done from your browser — no special software required. Here is how to upload a file or make changes.</p>
<div class="step">
<div class="step-num" aria-hidden="true">1</div>
<h3>Go to the Project Page</h3>
<p>Open the repository link and make sure you are on the <strong>Code</strong> tab (the first tab at the top). You will see the list of files in the project.</p>
</div>
<div class="step">
<div class="step-num" aria-hidden="true">2</div>
<h3>Upload a File</h3>
<p>Click the <strong>"Add file"</strong> button near the top of the file list, then select <strong>"Upload files"</strong>. Drag your HTML file into the box, or click to browse your computer. Add a short note about what you are uploading (for example, "Added my kart racing game"), then click the green <strong>"Commit changes"</strong> button.</p>
</div>
<div class="step">
<div class="step-num" aria-hidden="true">3</div>
<h3>Edit an Existing File</h3>
<p>Want to tweak something? Click on any file in the list (like <code>racing-game.html</code>), then click the <strong>pencil icon</strong> in the top right of the file view. Make your changes, then click the green <strong>"Commit changes"</strong> button to save.</p>
</div>
<div class="step">
<div class="step-num" aria-hidden="true">4</div>
<h3>View Changes</h3>
<p>Every change is tracked. Click the <strong>"Commits"</strong> link (near the top of the Code tab, next to the branch name) to see a timeline of every change made by every team member. Click any commit to see exactly what was changed.</p>
</div>
<div class="callout">
<strong>Top tip:</strong> Name your files clearly so the team knows who made what. For example: <code>louis-neon-drift.html</code> or <code>sarah-space-racer.html</code>. This avoids overwriting each other's work.
</div>
</div>
</section>
<!-- SECTION 5: USING AI TOOLS -->
<section id="ai-workflow">
<div class="container">
<div class="section-header">
<span class="section-number" aria-hidden="true">05</span>
<h2 class="section-title">Making Changes with AI Tools</h2>
</div>
<p style="font-size:15px;color:#475569;margin-bottom:28px;line-height:1.8;">The brief encourages AI tools — and this is your secret weapon. You do not need to know how to code. You just need to know how to describe what you want. Here is the workflow for making changes to the game.</p>
<div class="card">
<h3><span class="icon" aria-hidden="true"><svg viewBox="0 0 24 24"><path d="M13 2 3 14h9l-1 8 10-12h-9l1-8z"/></svg></span> Recommended AI Tools</h3>
<p>Use whichever one you are comfortable with — they all work the same way for this:</p>
<ul>
<li><strong>Claude Code</strong> — what Louis uses. Works in the terminal on your Mac. Great for building and editing HTML files directly</li>
<li><strong>ChatGPT</strong> — paste code in, describe what you want changed, and it gives you updated code back</li>
<li><strong>Cursor</strong> — a code editor with AI built in. Opens files and lets you describe changes in plain English</li>
<li><strong>Claude.ai</strong> — the browser version. Paste code in, ask for changes, copy the result</li>
</ul>
</div>
<div class="step">
<div class="step-num" aria-hidden="true">1</div>
<h3>Download the Game File</h3>
<p>Go to the repo, click on <code>racing-game.html</code>, then click the <strong>download icon</strong> (or click <strong>"Raw"</strong> and save the page). This gives you the current version of the game on your computer.</p>
</div>
<div class="step">
<div class="step-num" aria-hidden="true">2</div>
<h3>Open Your AI Tool and Paste the Code</h3>
<p>Open the HTML file in a text editor (TextEdit on Mac — make sure it is in <strong>plain text mode</strong>, or use VS Code if you have it). Select all the code, copy it, and paste it into your AI tool of choice.</p>
</div>
<div class="step">
<div class="step-num" aria-hidden="true">3</div>
<h3>Describe What You Want to Change</h3>
<p>Tell the AI what you want in plain English. Be specific about what you want added, changed, or improved. Here are some example prompts to get you started:</p>
<ul style="list-style:none;padding:0;margin-top:12px;">
<li style="padding:6px 0 6px 20px;position:relative;color:#475569;font-size:14.5px;line-height:1.75;"><span style="position:absolute;left:0;top:14px;width:6px;height:6px;border-radius:50%;background:#27C1F4;opacity:0.7;"></span><em>"Make the player car faster and add a speed boost when you press the shift key"</em></li>
<li style="padding:6px 0 6px 20px;position:relative;color:#475569;font-size:14.5px;line-height:1.75;"><span style="position:absolute;left:0;top:14px;width:6px;height:6px;border-radius:50%;background:#27C1F4;opacity:0.7;"></span><em>"Change the track shape to a figure-8 with a crossover in the middle"</em></li>
<li style="padding:6px 0 6px 20px;position:relative;color:#475569;font-size:14.5px;line-height:1.75;"><span style="position:absolute;left:0;top:14px;width:6px;height:6px;border-radius:50%;background:#27C1F4;opacity:0.7;"></span><em>"Add power-ups that appear on the track — one for speed boost and one for slowing down opponents"</em></li>
<li style="padding:6px 0 6px 20px;position:relative;color:#475569;font-size:14.5px;line-height:1.75;"><span style="position:absolute;left:0;top:14px;width:6px;height:6px;border-radius:50%;background:#27C1F4;opacity:0.7;"></span><em>"Add sound effects for the engine, collisions, and a countdown beep"</em></li>
<li style="padding:6px 0 6px 20px;position:relative;color:#475569;font-size:14.5px;line-height:1.75;"><span style="position:absolute;left:0;top:14px;width:6px;height:6px;border-radius:50%;background:#27C1F4;opacity:0.7;"></span><em>"Make the AI cars smarter so they actually try to overtake me"</em></li>
<li style="padding:6px 0 6px 20px;position:relative;color:#475569;font-size:14.5px;line-height:1.75;"><span style="position:absolute;left:0;top:14px;width:6px;height:6px;border-radius:50%;background:#27C1F4;opacity:0.7;"></span><em>"Add a drifting mechanic — when I hold shift and turn, the car should drift and leave skid marks"</em></li>
</ul>
</div>
<div class="step">
<div class="step-num" aria-hidden="true">4</div>
<h3>Test It on Your Computer</h3>
<p>Copy the updated code from the AI tool, paste it into a new file, and save it as an HTML file (for example, <code>racing-game-v2.html</code>). Double-click the file to open it in your browser and test that it works.</p>
</div>
<div class="step">
<div class="step-num" aria-hidden="true">5</div>
<h3>Upload It to GitHub</h3>
<p>Once you are happy with the changes, go to the repo, click <strong>"Add file" > "Upload files"</strong>, drag your updated file in, write a short note about what you changed (for example, "Added drift mechanic and skid marks"), and click <strong>"Commit changes"</strong>.</p>
</div>
<div class="callout">
<strong>Important:</strong> Save your version with a unique file name (for example, <code>yourname-racing-game.html</code>) so you do not accidentally overwrite someone else's work. We can merge the best ideas into the final version together.
</div>
<div class="card">
<h3><span class="icon" aria-hidden="true"><svg viewBox="0 0 24 24"><path d="M12 20h9"/><path d="M16.5 3.5a2.121 2.121 0 1 1 3 3L7 19l-4 1 1-4L16.5 3.5z"/></svg></span> Ideas for What to Add</h3>
<p>Not sure where to start? Here are some features that would make the game stand out:</p>
<ul>
<li>Drifting mechanics with visual skid marks</li>
<li>Power-ups on the track (speed boost, shield, slow opponents)</li>
<li>Different track layouts or multiple levels</li>
<li>Sound effects and music</li>
<li>A lap timer leaderboard</li>
<li>Weather effects (rain, fog, night mode)</li>
<li>Car customisation (colours, styles)</li>
<li>Obstacles on the track</li>
<li>A completely different theme — underwater, space, jungle</li>
</ul>
</div>
</div>
</section>
<!-- SECTION 6: PLAY THE GAME -->
<section id="play">
<div class="container">
<div class="section-header">
<span class="section-number" aria-hidden="true">06</span>
<h2 class="section-title">Play the Game</h2>
</div>
<p style="font-size:15px;color:#475569;margin-bottom:28px;line-height:1.8;">The game is already playable online. Click the link below to play it straight in your browser — no downloads needed. Use the arrow keys to drive and SPACE to start.</p>
<div class="link-box">
<p>Play Neon Drift</p>
<a href="https://integralmedia01.github.io/Im-Racing-Challenge--Melbourne-Team-/racing-game.html">integralmedia01.github.io/Im-Racing-Challenge--Melbourne-Team-/racing-game.html</a>
</div>
<div class="card">
<h3><span class="icon" aria-hidden="true"><svg viewBox="0 0 24 24"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"/><line x1="3" y1="9" x2="21" y2="9"/><line x1="9" y1="21" x2="9" y2="9"/></svg></span> Controls</h3>
<ul>
<li><strong>Up Arrow</strong> — Accelerate</li>
<li><strong>Down Arrow</strong> — Brake</li>
<li><strong>Left Arrow</strong> — Steer left</li>
<li><strong>Right Arrow</strong> — Steer right</li>
<li><strong>SPACE</strong> — Start the race / Restart after finishing</li>
</ul>
</div>
<div class="callout">
<strong>Questions?</strong> Reach out to Louis — he is your team leader and can help with anything GitHub-related.
</div>
</div>
</section>
<!-- FOOTER -->
<footer>
<div class="container">
<div class="footer-logo">
<svg role="img" viewBox="0 0 1208 142" fill="none" xmlns="http://www.w3.org/2000/svg">
<title>Integral Media</title>
<path d="M122.748 94.3069L106.15 139.418L35.686 3.69806L33.6758 0L74.2812 0.106144" fill="#23B2EF"/>
<path d="M165.181 0H134.199V142H165.181V0Z" fill="#23B2EF"/>
<path d="M26.7985 141.723H0.523438V81.779C0.523438 81.779 0.524017 55.1074 0.524017 53.4409H30.9802V141.723" fill="#23B2EF"/>
<path d="M15.4909 32.2727C24.0462 32.2727 30.9817 25.0482 30.9817 16.1364C30.9817 7.2245 24.0462 0 15.4909 0C6.9355 0 0 7.2245 0 16.1364C0 25.0482 6.9355 32.2727 15.4909 32.2727Z" fill="#23B2EF"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M225.182 24.4333H238.011V116.934H225.182V24.4333Z" fill="rgba(255,255,255,0.7)"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M258.809 23.7166H266.604L323.941 89.8193L323.958 89.8391C324.694 90.7129 325.398 91.5541 326.071 92.3627C326.062 91.5421 326.057 90.7062 326.057 89.855V24.4333H338.887V117.651H331.093L272.709 50.3881C272.707 50.3857 272.705 50.3833 272.703 50.3809C272.315 49.9385 271.939 49.5093 271.576 49.0933L271.638 51.7096V116.934H258.809V23.7166Z" fill="rgba(255,255,255,0.7)"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M346.602 24.4333H417.243V36.546H388.337V116.934H375.508V36.546H346.602V24.4333Z" fill="rgba(255,255,255,0.7)"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M424.98 24.4333H471.733V36.546H437.81V60.8648H468.508V72.858H437.81V104.821H473.047V116.934H424.98V24.4333Z" fill="rgba(255,255,255,0.7)"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M492.945 36.9267C501.461 27.6323 512.423 23 525.538 23C535.494 23 545.539 24.6603 555.661 27.9518L559.034 29.0488L555.313 40.4986L551.991 39.502C542.721 36.721 533.908 35.3515 525.538 35.3515C516.072 35.3515 508.538 38.6953 502.636 45.38C496.653 52.155 493.61 60.4929 493.61 70.624C493.61 80.5379 496.997 88.8331 503.812 95.7209C510.623 102.605 518.83 106.016 528.643 106.016C536.455 106.016 542.926 105.071 548.149 103.29V67.0761H560.978V110.343L559.301 111.384C551.587 116.172 541.123 118.367 528.285 118.367C514.955 118.367 503.538 113.757 494.254 104.559L494.242 104.547C484.966 95.2708 480.303 83.8922 480.303 70.624C480.303 57.3902 484.488 46.0776 492.945 36.9267Z" fill="rgba(255,255,255,0.7)"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M579.242 24.8012C586.857 24.2402 593.281 23.9555 598.495 23.9555C607.248 23.9555 614.766 26.2403 620.771 31.0575C627.001 35.9721 629.994 42.9619 629.994 51.5124C629.994 57.4291 628.25 62.9361 624.843 67.9577C622.377 71.5906 619.65 74.7105 616.648 77.2808C619.161 80.6986 622.088 84.6044 625.431 88.9996C629.784 94.539 632.523 97.9301 633.725 99.288C638.091 103.927 644.5 106.73 647 106L642 117.5C636.867 117.416 637.813 117.049 634.194 115.43L634.159 115.415L634.124 115.398C630.649 113.752 627.406 111.328 624.38 108.215L624.362 108.196L624.344 108.178C621.538 105.207 614.932 96.5546 604.691 82.5289C599.016 82.5018 593.713 82.3458 588.784 82.0596V116.934H575.955V25.0435L579.242 24.8012Z" fill="rgba(255,255,255,0.7)"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M689.276 23.8361H697.342L736.391 116.934H722.237L709.934 87.3112H676.447L664.144 116.934H650.355L689.276 23.8361Z" fill="rgba(255,255,255,0.7)"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M741.609 24.4333H754.439V104.583H793.737V116.934H741.609V24.4333Z" fill="rgba(255,255,255,0.7)"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M847.451 23.7166H856.167L883.696 89.1437C883.775 89.3174 883.854 89.4907 883.932 89.6635C884.01 89.5017 884.089 89.3376 884.169 89.1711L914.863 23.7166H923.395L937.487 116.934H924.315L915.086 52.6829L887.125 112.515H879.268L854.89 53.494L845.275 116.934H832.195L847.451 23.7166Z" fill="rgba(255,255,255,0.7)"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M949.691 24.4333H996.444V36.546H962.521V60.8648H993.219V72.858H962.521V104.821H997.758V116.934H949.691V24.4333Z" fill="rgba(255,255,255,0.7)"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M1013.34 24.4417C1021.54 23.8786 1029.83 23.5972 1038.19 23.5972C1052.13 23.5972 1064.01 27.9788 1073.57 36.845C1083.25 45.7524 1087.96 57.8334 1087.96 72.6546C1087.96 80.1182 1086.75 86.8835 1084.23 92.8826C1081.81 98.7626 1078.38 103.606 1073.88 107.291C1064.93 114.508 1053.87 118.009 1040.93 118.009C1032.77 118.009 1023.55 117.565 1013.28 116.682L1010.03 116.403V24.6685L1013.34 24.4417Z" fill="rgba(255,255,255,0.7)"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M1103.85 24.4333H1116.68V116.934H1103.85V24.4333Z" fill="rgba(255,255,255,0.7)"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M1160.76 23.8361H1168.83L1207.88 116.934H1193.72L1181.42 87.3112H1147.93L1135.63 116.934H1121.84L1160.76 23.8361Z" fill="rgba(255,255,255,0.7)"/>
</svg>
</div>
<p>Last updated · April 2026</p>
</div>
</footer>
</body>
</html>