-
Notifications
You must be signed in to change notification settings - Fork 3
/
Copy pathindex.html
942 lines (869 loc) · 77 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
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
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="GDSC Kitahack 2023 a National Hackathon organized by GDSC Malaysia Powered by Google">
<link rel="shortcut icon" href="./img/icons/dsc_logo.ico" type="image/x-icon">
<title>GDSC KitaHack 2023</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css" integrity="sha512-MV7K8+y+gLIBoVD59lQIYicR65iaqukzvf/nwasF0nqhPay5w/9lJmVM2hMDcnK1OnMGCdVK+iQrJ7lzPJQd1w==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<script src="https://unpkg.com/[email protected]/dist/flowbite.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js" integrity="sha512-STof4xm1wgkfm7heWqFJVn58Hm3EtS31XFaagaa8VMReCXAkQnJZ+jEy8PCC/iT18dFy95WcExNHFTqLyp72eQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<!--OG-->
<meta property="og:title" content="GDSC KitaHack 2023" />
<meta property="og:type" content="website" />
<meta property="og:url" content="https://google-developer-student-club-malaysia.github.io/kitahack2023/" />
<meta property="og:image" content="/kitahack2023/img/kitahackOG.png" />
<meta property="og:description" content="KitaHack 2023, a National Hackathon organized by GDSC Malaysia Powered by Google" />
<!--Twitter OG-->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="GDSC KitaHack 2023" />
<meta name="twitter:description" content="KitaHack 2023, a National Hackathon organized by GDSC Malaysia Powered by Google" />
<meta name="twitter:image" content="/kitahack2023/img/kitahackOG.png" />
<!-- CSS -->
<link rel="stylesheet" src="css/style.css">
<link rel="stylesheet" href="css/tailwind.css">
<!-- JS -->
<script src="js/dark-light-switcher.js" defer></script>
<script src="js/sponsor-tab-switcher.js" defer></script>
<script src="js/countdown.js" defer></script>
</head>
<body class="bg-white dark:bg-[#2A303C]" onload="darkLightSwitch()">
<!-- Pre-Loader -->
<div id="preloader"></div>
<!-- Navbar -->
<nav class="border-gray-200 px-4 py-2.5 rounded navbar md:px-2">
<div class="container flex flex-row flex-wrap justify-between mx-auto">
<!-- Logo -->
<a href="/kitahack2023/" class="flex items-center">
<img src="./img/dsc_logo.svg" class="h-6 mr-3 sm:h-9" alt="DSC Logo" />
<span class="text-black self-center text-xl font-semibold whitespace-nowrap dark:text-white">GDSC Kitahack</span>
</a>
<!-- Nav Menu -->
<div class="flex flex-row items-center">
<div class="flex flex-row">
<!-- Theme Toggle Button -->
<button id="theme-toggle" type="button" class="text-sm text-gray-500 rounded-lg p-2.5 mr-2 hover:bg-gray-100 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-700">
<svg id="theme-toggle-dark-icon" class="w-5 h-5 hidden" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z"></path>
</svg>
<svg id="theme-toggle-light-icon" class="w-5 h-5 hidden" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z" fill-rule="evenodd" clip-rule="evenodd"></path>
</svg>
</button>
<!-- Mobile Hamburger Toggle Button -->
<button data-collapse-toggle="navbar-default" type="button" class="inline-flex items-center p-2 text-sm text-gray-500 rounded-lg md:hidden hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600" aria-controls="navbar-default" aria-expanded="false">
<span class="sr-only">Open main menu</span>
<svg class="w-6 h-6" aria-hidden="true" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" clip-rule="evenodd"></path>
</svg>
</button>
</div>
<!-- Desktop Menu -->
<div class="hidden w-full md:block md:w-auto">
<ul class="flex flex-row space-x-8 p-4 font-medium text-sm bg-gray-50 rounded-lg dark:bg-gray-800 md:dark:bg-gray-900">
<li>
<a href="/kitahack2023/" class="block text-blue-700 rounded dark:text-white" aria-current="page">Home</a>
</li>
<!-- Event Menu Dropdown -->
<li class="dropdown dropdown-bottom dropdown-end block hover:cursor-pointer hover:bg-gray-100 hover:bg-inherit dark:text-gray-400 dark:hover:bg-gray-900" tabindex="0">
<label class="hover:cursor-pointer dark:hover:text-white" tabindex="0">
Event
<svg class="inline-block w-5 h-5 ml-1" aria-hidden="true" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"></path>
</svg>
</label>
<ul tabindex="0" class="dropdown-content menu bg-white rounded shadow w-44 mt-5 dark:bg-gray-700">
<li class="dark:hover:text-white"><a href="/kitahack2023/html/demo-day.html">Demo Day</a></li>
<li class="dark:hover:text-white"><a href="/kitahack2023/html/gsc-info-session.html">Google Solution Challenge 2023 Info Session</a></li>
<li class="dark:hover:text-white"><a href="/kitahack2023/html/sc-kickoff.html">2023 Solution Challenge Kickoff Event</a></li>
<!-- Workshop Menu Dropdown -->
<li>
<div class="group dropdown dropdown-left hover:cursor-pointer" tabindex="0">
<label class="hover:cursor-pointer dark:hover:text-white" tabindex="0">
Workshops
<svg class="inline-block w-5 h-5 ml-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"></path>
</svg>
</label>
<ul id="workshop_toggle" tabindex="0" class="flex-row flex-wrap dropdown-content menu bg-white rounded shadow w-[300px] mt-[-45px] mr-1 duration-100 ease-in hidden dark:bg-gray-700 group-hover:block">
<li class="dark:hover:text-white"><a href="/kitahack2023/html/sunway-web-dev.html">Sunway React & Firebase Workshop Series</a></li>
<li class="dark:hover:text-white"><a href="/kitahack2023/html/monash-flutter-firebase.html">Monash Flutter & Flask Workshop Series</a></li>
<li class="dark:hover:text-white"><a href="/kitahack2023/html/kdu-android.html">KDU Android Workshop</a></li>
<li class="dark:hover:text-white"><a href="/kitahack2023/html/um-machine-learning.html">UM Machine Learning Workshop</a></li>
<li class="dark:hover:text-white"><a href="/kitahack2023/html/tarumt-workshop-1.html">TARUMT Build a responsive website using Angular</a></li>
<li class="dark:hover:text-white"><a href="/kitahack2023/html/tarumt-workshop-2.html">TARUMT Build a microservices backend using ASP.NET Core</a></li>
</ul>
</div>
</li>
</ul>
</li>
<li>
<a href="mailto:[email protected]" class="block text-gray-700 rounded hover:bg-transparent hover:text-blue-700 dark:text-gray-400 dark:hover:text-white dark:hover:bg-transparent">Contact</a>
</li>
</ul>
</div>
</div>
<!-- Mobile Menu -->
<div class="hidden md:hidden w-full" id="navbar-default">
<ul class="flex flex-col gap-1 p-4 mt-4 border border-gray-100 rounded-lg bg-gray-50 dark:bg-gray-800 dark:border-gray-700">
<li>
<a href="/kitahack2023/" class="block py-2 pl-3 pr-4 text-white bg-blue-700 rounded md:p-0 dark:text-white dark:bg-gray-700" aria-current="page">Home</a>
</li>
<!-- Event Menu Dropdown -->
<li>
<div class="group dropdown dropdown-bottom dropdown-end block py-2 pl-3 pr-4 text-gray-700 rounded hover:cursor-pointer hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-700" tabindex="0">
<label class="hover:cursor-pointer dark:hover:text-white dark:group-hover:text-white" tabindex="0">
Event
<svg class="inline-block w-5 h-5 ml-1" aria-hidden="true" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"></path>
</svg>
</label>
<div class="mt-1 pl-4 hidden group-hover:block">
<ul>
<li class="p-3 rounded-lg dark:hover:text-white"><a href="/kitahack2023/html/demo-day.html">Demo Day</a></li>
<li class="p-3 rounded-lg dark:hover:text-white"><a href="/kitahack2023/html/gsc-info-session.html">Google Solution Challenge 2023 Info Session</a></li>
<li class="p-3 rounded-lg dark:hover:text-white"><a href="/kitahack2023/html/sc-kickoff.html">2023 Solution Challenge Kickoff Event</a></li>
<!-- Workshop Menu Dropdown -->
<li>
<label class="hover:cursor-pointer dark:hover:text-white" tabindex="0">
Workshops
<svg class="inline-block w-5 h-5 ml-1" aria-hidden="true" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"></path>
</svg>
</label>
<div class="mt-1 pl-4 hidden group-hover:block">
<ul>
<li class="p-3 rounded-lg dark:hover:text-white"><a href="/kitahack2023/html/sunway-web-dev.html">Sunway React & Firebase Workshop Series</a></li>
<li class="p-3 rounded-lg dark:hover:text-white"><a href="/kitahack2023/html/monash-flutter-firebase.html">Monash Flutter & Flask Workshop Series</a></li>
<li class="p-3 rounded-lg dark:hover:text-white"><a href="/kitahack2023/html/kdu-android.html">KDU Android Workshop</a></li>
<li class="p-3 rounded-lg dark:hover:text-white"><a href="/kitahack2023/html/um-machine-learning.html">UM Machine Learning Workshop</a></li>
<li class="p-3 rounded-lg dark:hover:text-white"><a href="/kitahack2023/html/tarumt-workshop-1.html">TARUMT Build a responsive website using Angular</a></li>
<li class="p-3 rounded-lg dark:hover:text-white"><a href="/kitahack2023/html/tarumt-workshop-2.html">TARUMT Build a microservices backend using ASP.NET Core</a></li>
</ul>
</div>
</li>
</ul>
</div>
</div>
</li>
<li>
<a href="mailto:[email protected]" class="block py-2 pl-3 pr-4 text-gray-700 rounded hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- END of Navbar -->
<!-- Hero -->
<!-- Note: add this for smaller hero section-->
<div class="container px-6 py-16 mx-auto">
<div class="px-6 py-12 lg:my-12 md:px-12 text-gray-800 text-center lg:text-left">
<div class="container mx-auto xl:px-32">
<div class="grid lg:grid-cols-2 gap-12 items-center">
<!-- Content -->
<div class="mt-12 lg:mt-0">
<h1 id="hero_title" class="text-transparent text-5xl md:text-6xl xl:text-6xl font-bold tracking-tight mb-6 dark:text-white dark:bg-none">GDSC KitaHack 2023</h1>
<!-- <p class="max-w-2xl mb-6 font-light text-gray-500 lg:mb-8 md:text-lg lg:text-xl dark:text-gray-400">KitaHack is a 2-day hackathon that is organised by Google Developer Student Clubs Malaysia (GDSC Malaysia).</p> -->
<p class="text-gray-700 font-normal dark:text-gray-400 max-w-2xl mb-6 lg:mb-8">KitaHack is a 2-month event featuring <strong>talks, events, and a hackathon</strong> organised by Google Developer Student Clubs Malaysia (GDSC Malaysia)</p>
<!-- <p class="max-w-2xl mb-6 font-light text-gray-500 lg:mb-8 md:text-lg lg:text-xl dark:text-gray-400">The event date is 11th - 12th March 2023.</p> -->
<p class="text-gray-700 font-normal dark:text-gray-400 max-w-2xl mb-6 lg:mb-8">The event duration is <strong>4th Jan - 10th Mar 2023</strong></p>
<!-- Button -->
<a id="hero_button" href="https://forms.gle/dtCF5RVjxru3BAhu5" target="_blank" class="h-14 btn border-white relative inline-flex items-center justify-center p-0.5 mb-2 mr-2 overflow-hidden text-sm font-medium text-gray-900 rounded-lg bg-gradient-to-br from-red-200 via-red-300 to-yellow-200 group-hover:from-red-200 group-hover:via-red-300 group-hover:to-yellow-200 dark:text-white dark:hover:text-gray-900 focus:ring-4 focus:outline-none focus:ring-red-100 dark:focus:ring-red-400">
<span class="relative flex px-5 py-3.5 transition-all ease-in duration-75 bg-white dark:text-gray-400 dark:bg-[#2A303C] rounded-md group-hover:bg-opacity-0 dark:hover:text-white">
Register Now!
<svg aria-hidden="true" class="ml-2 -mr-1 w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd">
</path>
</svg>
</span>
</a>
</div>
<!-- Image -->
<div class="mb-12 lg:mb-0">
<img src="./img/gsc_home_hero_logo.png" class="w-full rounded-lg shadow-2xl shadow-gray-900 dark:shadow-gray-400" alt="" />
</div>
</div>
</div>
</div>
</div>
<!-- End Hero -->
<!-- Countdown Section -->
<section class="container mx-auto h-72 p-7 bg-center bg-no-repeat bg-cover" style="background-image: url(img/countdown_background.svg)">
<h2 class="text-center pb-4 text-3xl md:text-4xl font-medium text-gray-700 dark:text-white">Days until
Demo-day
</h2>
<div class="flex flex-row gap-5 text-center auto-cols-max justify-center">
<div class="flex flex-col w-full sm:w-1/4 md:w-1/6 lg:w-1/8 bg-google-red dark:bg-neutral rounded-box text-white dark:text-neutral-content justify-center items-center aspect-video p-1 sm:p-4">
<span class="countdown font-bold text-6xl lg:text-7xl dark:text-white">
<span id="days" style="--value:15;"></span>
</span>
<span class="text-md sm:text-xl font-medium">days</span>
</div>
<div class="flex flex-col w-full sm:w-1/4 md:w-1/6 lg:w-1/8 bg-google-blue dark:bg-neutral rounded-box text-white dark:text-neutral-content justify-center items-center p-1 sm:p-4">
<span class="countdown font-bold text-6xl lg:text-7xl dark:text-white">
<span id="hours" style="--value:10;"></span>
</span>
<span class="text-md sm:text-xl font-medium">hours</span>
</div>
<div class="flex flex-col w-full sm:w-1/4 md:w-1/6 lg:w-1/8 bg-google-green dark:bg-neutral rounded-box text-white dark:text-neutral-content justify-center items-center p-1 sm:p-4">
<span class="countdown font-bold text-6xl lg:text-7xl dark:text-white">
<span id="minutes" style="--value:24;"></span>
</span>
<span class="text-md sm:text-xl font-medium">minutes</span>
</div>
<div class="flex flex-col w-full sm:w-1/4 md:w-1/6 lg:w-1/8 bg-google-orange dark:bg-neutral rounded-box text-white dark:text-neutral-content justify-center items-center p-1 sm:p-4">
<span class="countdown font-bold text-6xl lg:text-7xl dark:text-white">
<span id="seconds" style="--value:29;"></span>
</span>
<span class="text-md sm:text-xl font-medium">seconds</span>
</div>
</div>
</section>
<!-- End Countdown Section -->
<!-- PPT Guide Section -->
<h1 id="ppt-section" class="font-bold text-3xl md:text-5xl mt-20 mx-auto mb-8 relative justify-center text-center dark:text-white">Full Guide</h1>
<section class="w-full flex flex-wrap justify-center items-center py-10 px-4">
<iframe src="https://docs.google.com/presentation/d/e/2PACX-1vQ7hSob2_EeckL_PN7jJhSaA4IoC1JbPNNppbdqRlh6K_92oBDRykOjs5FnXwORnRsv0a2eSYt-RRgO/embed?start=true&loop=true&delayms=5000" frameborder="0" class="h-72 sm:h-96 xl:h-[80vh] w-2/3" allowfullscreen="true" mozallowfullscreen="true" webkitallowfullscreen="true"></iframe>
</section>
<!-- End of PPT Guide Section -->
<!-- 'What is KitaHack' Section -->
<section class="container mb-24 mt-36 mx-auto px-10 md:px-20 lg:px-8 flex flex-col items-center xl:flex-row text-gray-700 dark:text-gray-400 text-center max-w-5xl">
<div>
<h2 class="font-bold dark:text-white text-3xl md:text-5xl text-gray-700 text-center xl:text-left mb-4">What's KitaHack?</h2>
<h3 class="pt-4 pb-2 font-bold text-lg md:text-xl dark:text-white text-gray-700 md:text-left text-center">Brief overview</h3>
<p class="max-w-prose text-left text-gray-700 dark:text-gray-400">KitaHack is a two-month event featuring talks, events, and a hackathon organized by Google Developer Student Clubs Malaysia. It's a great opportunity to get feedback and practice your skills, with the goal of helping you create and fine-tune innovative ideas using Google technologies.</p>
<h3 class="pt-4 pb-2 font-bold text-lg md:text-xl dark:text-white text-gray-700 md:text-left text-center">Purpose</h3>
<p class="max-w-prose text-left text-gray-700 dark:text-gray-400">The main purpose of KitaHack is to help participants improve their proposals for the <a href="https://developers.google.com/community/gdsc-solution-challenge" class="text-blue-600">2023 Solution Challenge</a>. We offer feedback and networking opportunities with industry professionals, speakers, and mentors to help you get the most out of your experience. Plus, there are prizes to be won from our sponsors!</p>
<h3 class="pt-4 pb-2 font-bold text-lg md:text-xl dark:text-white text-gray-700 md:text-left text-center">Theme</h3>
<p class="max-w-prose text-left text-gray-700 dark:text-gray-400">KitaHack centers around the United Nations' 17 Sustainable Development Goals (SDGs). During the event, you'll be challenged to create a project that helps solve one or more of these goals using Google technologies. It's a chance to make a real difference in the world and learn new skills at the same time.</p>
</div>
<div class="flex">
<img src="./img/kitahack-logo.png" alt="Kitahack 2023 logo" class="justify-self-center self-center hidden xl:block w-full">
</div>
</section>
<!-- End 'What is KitaHack' Section -->
<!-- SDG Details -->
<section class="container my-24 mx-auto px-10 md:px-20 lg:px-8 flex flex-col items-center lg:flex-row text-gray-700 dark:text-gray-400 text-center max-w-5xl">
<h1 class="font-bold text-3xl md:text-5xl lg:min-w-[450px] dark:text-white">What is <br> Sustainable Development Goals?</h1>
<ul class="flex flex-col gap-2 pt-5 lg:pl-10 lg:mr-12 lg:pt-0 lg:gap-4">
<li class="text-justify lg:text-left">
In 2015, the United Nations created 17 Sustainable Development Goals and aimed to achieve them by 2030. All 193 United Nations Member States agreed on these 17 goals to end poverty, ensure prosperity, and protect the planet.
</li>
<li class="text-justify lg:text-left">
For KitaHack and the 2023 Solution Challenge, we want to encourage participants to create projects that contribute to solving one or more of the 17 SDGs using Google technologies. We believe that by working towards these goals, we can make a positive impact on the world and create a more sustainable future for all.
</li>
<li class="text-justify lg:text-left">
You can learn more about the SDGs and the specific targets for each goal on the <a href="https://sdgs.un.org/goals" target="_blank" class="text-blue-600">United Nations website</a>. Additionally, you can visit <a href="https://developers.google.com/community/gdsc-solution-challenge/UN-goals" target="_blank" class="text-blue-600">Google's SDG website</a> to learn about the company's efforts to support and promote the SDGs.
</li>
</ul>
</section>
<!-- SDG Videos -->
<section class="container my-24 mx-auto px-10 flex flex-col lg:flex-row gap-8 justify-center items-center">
<iframe class="rounded-md w-[266.67px] h-[150px] md:w-[560px] md:h-[315px]" width="560" height="315" src="https://www.youtube-nocookie.com/embed/0XTBYMfZyrM" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<iframe class="rounded-md w-[266.67px] h-[150px] md:w-[560px] md:h-[315px]" src="https://www.youtube-nocookie.com/embed/xVWHuJOmaEk" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</section>
<!-- NGO Track -->
<section class="container my-24 mx-auto px-10 md:px-20 lg:px-8 text-gray-700 dark:text-gray-400 text-center max-w-5xl flex flex-col gap-24">
<div>
<h2 class="font-bold text-3xl md:text-5xl lg:min-w-[450px] dark:text-white">Normal Track</h2>
<p class="text-left">The Normal Track is an opportunity for you to work on a solution that addresses one or more of the United Nations' 17 Sustainable Development Goals (SDGs). These goals aim to end poverty, ensure prosperity, and protect the planet. <strong>You will have the freedom to choose a theme within the 17 SDGs and develop a solution that makes a positive impact on that theme.</strong></p>
</div>
<div>
<h2 class="font-bold text-3xl md:text-5xl lg:min-w-[450px] dark:text-white">NGO Track</h2>
<!-- <h3 class="text-left">General Description:</h3>
<p class="text-left">There is a problem statement from each NGO we are collaborating with. <strong>Your goal is to come up with a solution that solves any of these problem statements.</strong></p>
<h3 class="text-left">Sharing Session:</h3>
<p class="text-left">There will be a sharing session by the NGOs planned for end of January or early February. They will describe their stories, challenges and solutions they have tried. There will also be a Q&A session.</p>
<h3 class="text-left">Mentoring:</h3>
<p class="text-left">If your team would like to consult further with the NGOs, we will be organizing mentoring sessions soon!</p> -->
<p class="text-left">The NGO Track is an opportunity for you to work on a specific problem statement provided by our collaborating non-governmental organizations (NGOs). These problem statements address real-world challenges that the NGOs are currently facing, and <strong>your goal is to come up with a solution that addresses these challenges.</strong> You will have the opportunity to attend a sharing session with the NGOs, where they will describe their stories, challenges, and solutions they have tried. There will also be mentoring sessions available for teams who would like to consult further with the NGOs.</p>
</div>
<div class="flex text-left gap-14 flex-col lg:flex-row text-left">
<!-- Teach For Malaysia -->
<div class="flex flex-col">
<h2 class="font-bold text-3xl md:text-5xl lg:min-w-[450px] dark:text-white pb-5">NGO Track #1</h2>
<a href="https://teachformalaysia.org/" target="_blank" class="flex justify-start">
<img src="./img/ngos/ngo-teach-for-malaysia.png" alt="Logo for Teach For Malaysia" class="w-5/12 max-h-min lg:max-h-20">
</a>
<h3 class="font-bold text-xl md:text-3xl lg:min-w-[450px] dark:text-white pt-5">Teach For Malaysia</h3>
<a href="https://teachformalaysia.org/" target="_blank" class="text-blue-600">
https://teachformalaysia.org/
</a>
<!-- problem statement -->
<p class="text-lg pt-5"><strong>Problem Statement: How can we make it easier for teachers to track student attendance in rural areas?</strong></p>
<!-- description -->
<p class="pt-1.5">The very first step of learning is being there to learn. TFM has found difficulties in keeping track of student's attendance and subsequently, a lack of data to enhance their teaching. Many teachers use pencil and paper as it is the most convenient.</p>
<p class="pt-1.5">Teachers in TFM come from far and wide. Any solution created needs to be low-bandwidth proof or offline. Often, TFM loses touch with teachers for close to a month in rural areas.</p>
<p class="pt-1.5">Most of the students are primary schoolchildren from government schools. Your effort would not only help TFM, but many other organizations pushing for quality education in Malaysia.</p>
</div>
<!-- Women For Refugees -->
<div>
<h2 class="font-bold text-3xl md:text-5xl lg:min-w-[450px] dark:text-white pb-5">NGO Track #2</h2>
<a href="https://www.womenforrefugees.org/" target="_blank" class="flex justify-start">
<img src="./img/ngos/ngo-women-for-refugees.png" alt="Logo for Women For Refugees" class="dark:brightness-50 dark:invert w-5/12 max-h-min lg:max-h-20">
</a>
<h3 class="font-bold text-xl md:text-3xl lg:min-w-[450px] dark:text-white pt-5">Women For Refugees</h3>
<a href="https://www.womenforrefugees.org/" target="_blank" class="text-blue-600">
https://www.womenforrefugees.org/
</a>
<!-- problem statement -->
<p class="text-lg pt-5"><strong>Problem Statement: How do we upskill and empower refugee women to find sustainable forms of income?</strong></p>
<!-- description -->
<p class="pt-1.5">There are an estimated 182,990 refugees in Malaysia. Due to the lack of recognition for refugees, access to employment is extremely difficult and abuse is common. Women are on the brunt of this displacement.</p>
<p class="pt-1.5">WFR currently has the Refugee Women Development Programme (RWDP) for language & financial literacy and skill-based training such as sewing and crochet. However, it is difficult to convince women to commit cause they do not see the long term benefit of upskilling.</p>
<p class="pt-1.5">Furthermore, there is a lack of resources like materials and teachers to conduct upskilling programs. Lastly, WFT is always looking for ways to market and sell products made by refugee women to outside parties.</p>
</div>
</div>
</section>
<!-- Sponsor Logo -->
<section class="container mt-20 px-8 mx-auto flex flex-col items-center md:px-20 lg:flex-row max-w-5xl">
<div class="lg:w-[400px]">
<h1 class="font-bold text-3xl md:text-5xl dark:text-white">Sponsorships</h1>
<p class="mt-5">We are currently seeking sponsors for KitaHack 2023. If you are interested in supporting this event and gaining exposure to a talented group of students and professionals, please get in touch with us to learn more about sponsorship opportunities.</p>
</div>
<div class="flex flex-col flex-wrap pt-5 lg:pl-10 lg:pt-0 gap-8 mx-auto items-center text-gray-700 dark:text-gray-400">
<!-- Tabs -->
<div class="tabs tabs-boxed flex flex-row flex-wrap justify-center max-w-md">
<a class="tab tab-active duration-100 ease-in" onclick="activate(event, '#diamond_sponsor')">Diamond</a>
<a class="tab duration-100 ease-in" onclick="activate(event, '#silver_sponsor')">Silver</a>
<a class="tab duration-100 ease-in" onclick="activate(event, '#bronze_sponsor')">Bronze</a>
<a class="tab duration-100 ease-in" onclick="activate(event, '#gold_sponsor')">Prize</a>
<a class="tab duration-100 ease-in" onclick="activate(event, '#platinum_sponsor')">Community</a>
</div>
<!-- Content -->
<div id="diamond_sponsor" class="tab_content flex flex-wrap flex-row justify-center gap-5">
<div>
<div class="mb-2">
<p class="text-md">Blacksire</p>
<small>Judge and Fund Sponsorship</small>
</div>
<div class="min-h-[106.66px]">
<img src="./img/sponsors/blacksire-logo-_2_-_1_.jpg" alt="" class="max-w-xs rounded-md">
</div>
</div>
</div>
<div id="silver_sponsor" class="tab_content flex flex-wrap flex-row justify-center gap-5 hidden">
<div>
<div class="mb-2">
<p class="text-md">SafeTruck</p>
<small>Judge and Fund Sponsorship</small>
</div>
<div class="min-h-[106.66px]">
<img src="./img/sponsors/safetruck-logo-Square-Blue.webp" alt="" class="max-w-xs rounded-md">
</div>
</div>
<div>
<div class="mb-2">
<p class="text-md">Monash University Malaysia</p>
<small>Venue Sponsorship</small>
</div>
<div class="min-h-[106.66px]">
<img src="./img/sponsors/Monash-University-Malaysia-Logo.png" alt="" class="max-w-xs rounded-md">
</div>
</div>
</div>
<div id="bronze_sponsor" class="tab_content flex flex-wrap flex-row justify-center gap-5 hidden">
<div>
<div class="mb-2">
<p class="text-md">PwC</p>
<small>Fund sponsorship</small>
</div>
<div class="min-h-[106.66px]">
<img src="./img/sponsors/PricewaterhouseCoopers_Logo (1).png" alt="" class="max-w-xs rounded-md">
</div>
</div>
<div>
<div class="mb-2">
<p class="text-md">myNext by Talentcorop</p>
<small>Fund sponsorship</small>
</div>
<div class="min-h-[106.66px]">
<img src="./img/sponsors/talentcorp-removebg-preview.png" alt="" class="max-w-xs rounded-md">
</div>
</div>
</div>
<div id="platinum_sponsor" class="tab_content flex flex-wrap flex-row justify-center gap-5 hidden">
<div>
<div class="mb-2">
<p class="text-md">Monsta Asia</p>
<small>Community and Fund Sponsorship</small>
</div>
<div class="min-h-[106.66px]">
<img src="./img/sponsors/monsta-asia.webp" alt="" class="max-w-xs rounded-md">
</div>
</div>
</div>
<div id="gold_sponsor" class="tab_content flex flex-wrap flex-row justify-center gap-5 hidden">
<div>
<div class="mb-2">
<p class="text-md">GDG KL</p>
<small>Prize Pool Sponsorship</small>
</div>
<div class="min-h-[106.66px]">
<img src="./img/sponsors/GDG Kuala Lumpur Light Horizontal-Logo.png" alt="" class="max-w-xs rounded-md">
</div>
</div>
</div>
</div>
</section>
<!-- Chat Bubble about Team formation -->
<section class="container px-6 py-16 mx-auto max-w-lg lg:max-w-3xl mt-20">
<h1 class="heading text-center mb-6 font-bold text-3xl md:text-5xl dark:text-white">KitaHack Details</h1>
<div class="mt-16 chat chat-start items-center max-w-md mb-5 lg:max-w-lg">
<div class="chat-bubble chat-bubble-primary dark:chat-bubble">Eh, I heard that KitaHack is coming back for year 2023 leh.
Wanna
join mou?</div>
</div>
<div class="chat chat-end my-5" data-theme="kitahack">
<div class="chat-bubble chat-bubble-info dark:chat-bubble">KitaHack? I never heard about it before. What is it about?
</div>
</div>
<div class="chat chat-start items-center max-w-md my-5 lg:max-w-lg">
<div class="chat-bubble chat-bubble-primary dark:chat-bubble">Walao, you seriously don't know ah? It is <b>the biggest
annual
hackathon</b> organised by GDSC Malaysia for us to better prepare for <b>Solution Challenge</b>. The
participants need to come out with an innovative solution that solves one or many SDGs problems using
Google Technologies.</div>
</div>
<div class="chat chat-end my-5">
<div class="chat-bubble chat-bubble-info dark:chat-bubble">Wahh, it seems interesting la. I think I would like to give it
a try. First of all, I need to find my teammates? How can I get more information about KitaHack team
formation?
</div>
</div>
<div class="chat chat-start max-w-md my-5 lg:max-w-lg">
<div class="chat-bubble chat-bubble-primary dark:chat-bubble">Worries not. You may refer the <b>Team Formation</b> below
for more
information.</div>
</div>
<div class="chat chat-end my-5">
<div class="chat-bubble chat-bubble-info dark:chat-bubble">Ok. Thank you very much.
</div>
</div>
</section>
<!--Team Formation information-->
<h1 class="heading text-center mb-4 font-bold text-3xl md:text-5xl dark:text-white">Team Formation</h1>
<section class="container px-4 py-16 mx-auto max-w-4xl">
<div class="grid grid-cols-1 gap-14 mt-4 mx-8 lg\:mt-0 md:grid-cols-2">
<div>
<div class="inline-block p-2 text-white bg-blue-500 rounded dark:text-white mb-4">
<svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
</div>
<div>
<h1 class="text-xl font-semibold text-gray-700 mt-2 dark:text-white">Number of members
</h1>
<p class="mt-2 text-sm text-gray-500 dark:text-gray-400">
A team can have only up to <b>4 members</b> in a team. Please note that only one entry per
person which mean that you can only join one team.
</p>
</div>
</div>
<div>
<div class="inline-block p-2 text-white bg-blue-500 rounded dark:text-white mb-4">
<svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
</div>
<div>
<h1 class="text-xl font-semibold text-gray-700 mt-2 dark:text-white">Team members roles
</h1>
<p class="mt-2 text-sm text-gray-500 dark:text-gray-400">
Here is a simple guideline for you when forming a team. <br>
<ls>
<ul class="mt-2 text-sm text-gray-500 dark:text-gray-400">Project Manager(Team Leader)</ul>
<ul class="mt-2 text-sm text-gray-500 dark:text-gray-400">UI/UX Designer</ul>
<ul class="mt-2 text-sm text-gray-500 dark:text-gray-400">Frontend Developer</ul>
<ul class="mt-2 text-sm text-gray-500 dark:text-gray-400">Backend Developer</ul>
<ul class="mt-2 text-sm text-gray-500 dark:text-gray-400">Problem Domain Experts</ul>
</ls>
</p>
</div>
</div>
<div>
<div class="inline-block p-2 text-white bg-blue-500 rounded dark:text-white mb-4">
<svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
</div>
<div>
<h1 class="text-xl font-semibold text-gray-700 mt-2 dark:text-white">Team members background
</h1>
<p class="mt-2 text-sm text-gray-500 dark:text-gray-400">
You can have members from any academic background (undergraduate, graduate, art, science
backgrounds). However, we encourage you to have members from
different backgrounds to
ensure that your team can work together effectively.
</p>
</div>
</div>
<div>
<div class="inline-block p-2 text-white bg-blue-500 rounded dark:text-white mb-4">
<svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
</div>
<div>
<h1 class="text-xl font-semibold text-gray-700 dark:text-white">How to find team members?
</h1>
<p class="mt-2 text-sm text-gray-500 dark:text-gray-400">
You can invite your friend to join KitaHack with you. Alternatively, you can also join our Discord server
to find team members.
</p>
</div>
</div>
</div>
</section>
<!-- Chat Bubble about Submission Criteria -->
<section class="container px-6 py-16 mx-auto mt-1 max-w-lg lg:max-w-3xl">
<div class="mt-5 chat chat-start items-center max-w-md mb-5 lg:max-w-lg">
<div class="chat-bubble chat-bubble-primary dark:chat-bubble">Ok, cool. Now I have formed a team. What's next?</div>
</div>
<div class="chat chat-end">
<div class="chat-bubble chat-bubble-info dark:chat-bubble">For now, you can start brainstorming for your project idea.
Remember to
come up with a project idea that is related to one or more of the <b>17 Sustainable Development Goals
(SDGs)</b>. You can refer to the <a href="https://www.un.org/sustainabledevelopment/sustainable-development-goals/" target="_blank" class="text-white hover:underline dark:text-blue-500">UN Sustainable Development Goals</a> for more information.
</div>
</div>
<div class="chat chat-start items-center max-w-md my-5 lg:max-w-lg">
<div class="chat-bubble chat-bubble-primary dark:chat-bubble"> Ok, noted. I will start brainstorming for my project idea. How
can I know whether my project idea is good enough for submission?</div>
</div>
<div class="chat chat-end my-5">
<div class="chat-bubble chat-bubble-info dark:chat-bubble">Worries not. You may refer the <b>Submission Criteria</b>
below
for more
information.
</div>
</section>
<!-- Submisssion Criteria -->
<div class="timeline mt-28">
<div class="heading font-bold text-3xl md:text-5xl dark:text-white">Submission Criteria</div>
<div class="tcontainer">
<ul>
<li class="dark:bg-gray-700">
<h3 class="ctitle text-gray-700 dark:text-white">💡 Project setup</h3>
<p class="text-gray-700 font-normal dark:text-gray-400">1. Please clearly describe the challenge you are solving for using a problem statement.</p> <br />
<p class="text-gray-700 font-normal dark:text-gray-400">2. What United Nations' Sustainable Development goal(s) AND target(s) did you choose for your solution? What inspired
you to select these specific goal(s) AND target(s)?</p>
<span class="circle"></span>
<span class="points font-normal">10 points</span>
</li>
<li class="dark:bg-gray-700">
<h3 class="ctitle text-gray-700 dark:text-white">🧠 Implementation</h3>
<p class="text-gray-700 font-normal dark:text-gray-400">3. Describe the architecture that your team chose for your solution. What are the high-level components of your
architecture? What is the responsibility of each component?</p> <br />
<p class="text-gray-700 font-normal dark:text-gray-400">4. Which specific products and platforms did you choose to implement these components and why?</p>
<span class="circle"></span>
<span class="points font-normal">10 points</span>
</li>
<li class="dark:bg-gray-700">
<h3 class="ctitle text-gray-700 dark:text-white">💻 FEEDBACK / TESTING / ITERATION</h3>
<p class="text-gray-700 font-normal dark:text-gray-400">5. Feedback from users, testing, & iteration <br />
<span class="bullet">🚀 Walk us through the steps you took to test your solution with real users (outside of your team). Provide three specific
feedback points you received from real users.</span> <br />
<span class="bullet">🚀 What did you learn and how did it help improve your solution?
What are three specific things you implemented and improved for your solution based on the feedback from users?</span>
</p> <br />
<p class="text-gray-700 font-normal dark:text-gray-400">6. Code testing and iteration <br />
<span class="bullet">🚀 Highlight one challenge you faced while building your code, including detail on how you
addressed the issue and the technical decisions and implementations you had to make. </span>
</p>
<span class="circle"></span>
<span class="points font-normal">10 points</span>
</li>
<li class="dark:bg-gray-700">
<h3 class="ctitle text-gray-700 dark:text-white">✅ SUCCESS AND COMPLETION OF SOLUTION</h3>
<p class="text-gray-700 font-normal dark:text-gray-400">7. How does your solution address the challenge you are looking to solve for? Describe the success of your solution using
metrics, goals, and outcomes. What Google technologies are you using to track usage analytics? Using relevant (or
meaningful) statistics, concrete data or numerical examples where possible.</p> <br />
<p class="text-gray-700 font-normal dark:text-gray-400">8. Upload a copy of your demo video. Make sure the video demonstrates a working application and how a user will
interact with the solution. Make sure the video also makes effective use of the chosen Google products. Feel free to include
infographics or visual representation of the data in your demo video.</p>
<span class="circle"></span>
<span class="points font-normal">10 points</span>
</li>
<li class="dark:bg-gray-700">
<h3 class="ctitle text-gray-700 dark:text-white">🪜 SCALABILITY / NEXT STEPS</h3>
<p class="text-gray-700 font-normal dark:text-gray-400">9. What do you see as the future / next steps for your project? How would you expand your solution to reach a larger
audience?</p><br />
<p class="text-gray-700 font-normal dark:text-gray-400">10. Explain how the technical architecture of your solution could support (in its current state or with minor
changes) scaling to a larger audience.</p>
<span class="circle"></span>
<span class="points font-normal">10 points</span>
</li>
</ul>
</div>
</div>
<button id="theme-toggle" type="button" class="ml-2 text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg text-sm p-2.5">
<svg id="theme-toggle-dark-icon" class="w-5 h-5 hidden" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z"></path>
</svg>
<svg id="theme-toggle-light-icon" class="w-5 h-5 hidden" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z" fill-rule="evenodd" clip-rule="evenodd"></path>
</svg>
</button>
</nav>
<!-- Chat Bubble about Judging Criteria -->
<section class="container px-6 py-12 mx-auto max-w-lg lg:max-w-3xl">
<div class="mt-5 chat chat-start items-center max-w-md mb-5 lg:max-w-lg">
<div class="chat-bubble chat-bubble-primary dark:chat-bubble">Thanks for the explanation. Now I have my project ready to be
submitted. Can I know how will my project be judged?</div>
</div>
<div class="chat chat-end my-5">
<div class="chat-bubble chat-bubble-info dark:chat-bubble">Worries not. You may refer the <b>Judging Criteria</b>
below
for more
information.
</div>
</section>
<!--Judging Criteria-->
<h1 class=" heading text-center mb-8 mt-10 font-bold text-3xl md:text-5xl dark:text-white">Judging Criteria</h1>
<h3 class=" mt-10 text-center mb-2 font-bold text-2xl md:text-4xl dark:text-white">Number of rounds</h3>
<section class="container px-2 py-4 mx-auto my-auto max-w-lg lg:max-w-3xl">
<div class="stats bg-google-blue text-white stats-vertical lg:stats-horizontal shadow grid place-items-center dark:bg-gray-700">
<div class="stat place-items-center">
<div class="stat-title">First Round</div>
<div class="stat-value">Ideathon</div>
<div class="stat-desc">Impact - <b>50</b> points || Technology - <b>10</b> points</div>
</div>
<div class="stat place-items-center">
<div class="stat-title">Second Round</div>
<div class="stat-value">Prototype/MVP</div>
<div class="stat-desc mt-1">Impact - <b>10</b> points || Technology - <b>50</b> points
</div>
</div>
</div>
</section>
<!-- Impact -->
<h3 class="mt-10 text-center mb-4 font-bold text-xl md:text-4xl dark:text-white">Impact
</h3>
<section class="container mt-8 px-8 mx-auto text-justify max-w-4xl">
<ol class="ml-10 list-decimal">
<li class="text-gray-700 font-normal mt-4 px-2 text-justify dark:text-gray-400">Does the entry establish a <b>clear challenge</b> using their problem statement? 🚀</li>
<li class="text-gray-700 font-normal mt-4 px-2 text-justify dark:text-gray-400">Do they explain clearly
which <b>(Selected SDG)</b> they chose for their solution and why? 🚀</li>
<li class="text-gray-700 font-normal mt-4 px-2 text-justify dark:text-gray-400">Feedback from users,
testing & iteration 🚀
<ol class="ml-10 list-[upper-roman]">
<li>Does the team clearly describe three <b>feedback points they received from
real
users</b> and the steps they took to test them?</li>
<li>Is there evidence of what the team learned and
<b>how the
solution was iterated upon</b> based on user feedback?<b>
</li>
</ol>
</li>
<li class="text-gray-700 font-normal mt-4 px-2 text-justify dark:text-gray-400">Does the <b>solution address the challenge (and problem statement)</b> identified by the team? Does the team adequately
<b>describe the success of their solution</b> using metrics, goals, and outcomes, or through cause and effect?<b> 🚀
</li>
<li class="text-gray-700 font-normal mt-4 px-2 text-justify dark:text-gray-400">Is there evidence of next
steps? Does the team display a <b>clear plan for future extension to a larger audience</b> if they were to continue?<b>🚀</li>
</ol>
</section>
<!-- Prototype -->
<h3 class="mt-10 text-center mb-4 font-bold text-xl md:text-4xl dark:text-white">Prototype / MVP
</h3>
<section class="container mt-8 px-8 mx-auto text-justify max-w-4xl">
<ol class="ml-10 list-decimal">
<li class="text-gray-700 font-normal mt-4 px-2 text-justify dark:text-gray-400">Does the team clearly
describe the following: <b>architecture</b>, high-level <b>components</b>, <b>responsibility</b> of each component, <b>specific
products and platform</b> they implemented? Has the team clearly explained what <b>Google technology they used</b> and why?<b> 💻</li>
<li class="text-gray-700 font-normal mt-4 px-2 text-justify dark:text-gray-400">Does the solution
<b>implement all the technical components</b> needed to solve the challenge? 💻
</li>
<li class="text-gray-700 font-normal mt-4 px-2 text-justify dark:text-gray-400">Does the team clearly
describe the following: <b>architecture</b>, high-level <b>components</b>, <b>responsibility</b> of each component, <b>specific
products and platform</b> they implemented? Has the team clearly explained what <b>Google technology they used</b> and why? 💻</li>
<li class="text-gray-700 font-normal mt-4 px-2 text-justify dark:text-gray-400">Does the video demonstration show an <b>actual working application</b> (not a mockup) and <b>how a user will interact with the solution</b>? Does the demo show how the solution <b>makes effective and appropriate use of the features</b> of the chosen Google technology or platform? 💻</li>
<li class="text-gray-700 font-normal mt-4 px-2 text-justify dark:text-gray-400">Does the video demonstration show an <b>actual working application</b> (not a mockup) and <b>how a user will interact with the solution</b>? Does the demo show how the solution <b>makes effective and appropriate use of the features</b> of the chosen Google technology or platform? 💻</li>
<li class="text-gray-700 font-normal mt-4 px-2 text-justify dark:text-gray-400">Can the solution, in its
current form or minor structural changes, <b>support more users and increased scale</b>?<b> 💻</li>
</ol>
</section>
<!-- How we handle bias -->
<h3 class="mt-10 text-center mb-4 font-bold text-xl md:text-4xl dark:text-white">Ensuring Fair and Impartial Judging
</h3>
<section class="container mt-8 px-8 mx-auto text-justify max-w-4xl">
<ul class="ml-10">
<li class="text-gray-700 font-normal mt-4 px-2 text-justify dark:text-gray-400">Ensuring fair and unbiased judging is crucial for the integrity of any competition. We implement measures to eliminate bias when evaluating submissions.
</li>
<li class="text-gray-700 font-normal mt-4 px-2 text-justify dark:text-gray-400">We average the scores from multiple judges and <strong>drop the highest and lowest scores.</strong> This helps to reduce the impact of any individual judge's opinion and focuses on the <strong>collective judgment of the group.</strong></li>
<li class="text-gray-700 font-normal mt-4 px-2 text-justify dark:text-gray-400">We believe that this measure helps to ensure fair and unbiased judging and contribute to the overall integrity of the competition. If you have any questions or feedback, please feel free to contact us.
</li>
</ul>
</section>
<!-- Mentors -->
<h1 class="font-bold text-3xl md:text-5xl mt-20 mx-auto mb-6 justify-center text-center dark:text-white">Mentors</h1>
<section class="w-full flex flex-wrap justify-center items-center pt-10 px-4">
<div class="relative w-80 p-4 my-14 mx-6 bg-white rounded-lg flex flex-col justify-center items-center shadow-md dark:bg-gray-700">
<div class="top-0 left-2/4 overflow-hidden absolute rounded-full w-38 h-38 shadow-xl -translate-x-1/2 -translate-y-1/2">
<img class="w-full aspect-square object-cover brightness-50 dark:brightness-100" src="./img/dummy/alligator_lg.png" alt="">
</div>
<p class="text-gray-700 mt-20 mb-2 font-bold text-xl dark:text-white">To be announced</p>
<p class="text-gray-700 font-normal dark:text-gray-400">TBA</p>
<p class="text-gray-700 font-normal mt-4 px-2 text-justify dark:text-gray-400">We are currently in the process of selecting and inviting the top mentors to join us at KitaHack. Keep an eye out for announcements on their names and expertise in the coming weeks. We can't wait to share their valuable insights and experiences with you!</p>
<button class="mt-5 mb-2 bg-yellow-500 transition ease-in-out delay-50 hover:bg-white text-white hover:text-yellow-500 hover:border hover:border-yellow-700 font-bold py-2 px-4 rounded dark:hover:bg-gray-700 dark:hover:text-white dark:hover:border-white">
<a href="#">View Profile</a>
</button>
</div>
<div class="relative w-80 p-4 my-14 mx-6 bg-white rounded-lg flex flex-col justify-center items-center shadow-md dark:bg-gray-700">
<div class="top-0 left-2/4 overflow-hidden absolute rounded-full w-38 h-38 shadow-xl -translate-x-1/2 -translate-y-1/2">
<img class="w-full aspect-square object-cover brightness-50 dark:brightness-100" src="./img/dummy/anteater_lg.png" alt="">
</div>
<p class="text-gray-700 mt-20 mb-2 font-bold text-xl dark:text-white">To be announced</p>
<p class="text-gray-700 font-normal dark:text-gray-400">TBA</p>
<p class="text-gray-700 font-normal mt-4 px-2 text-justify dark:text-gray-400">We are currently in the process of selecting and inviting the top mentors to join us at KitaHack. Keep an eye out for announcements on their names and expertise in the coming weeks. We can't wait to share their valuable insights and experiences with you!</p>
<button class="mt-5 mb-2 bg-yellow-500 transition ease-in-out delay-50 hover:bg-white text-white hover:text-yellow-500 hover:border hover:border-yellow-700 font-bold py-2 px-4 rounded dark:hover:bg-gray-700 dark:hover:text-white dark:hover:border-white">
<a href="#">View Profile</a>
</button>
</div>
<div class="relative w-80 p-4 my-14 mx-6 bg-white rounded-lg flex flex-col justify-center items-center shadow-md dark:bg-gray-700">
<div class="top-0 left-2/4 overflow-hidden absolute rounded-full w-38 h-38 shadow-xl -translate-x-1/2 -translate-y-1/2">
<img class="w-full aspect-square object-cover brightness-50 dark:brightness-100" src="./img/dummy/frog_lg.png" alt="">
</div>
<p class="text-gray-700 mt-20 mb-2 font-bold text-xl dark:text-white">To be announced</p>
<p class="text-gray-700 font-normal dark:text-gray-400">TBA</p>
<p class="text-gray-700 font-normal mt-4 px-2 text-justify dark:text-gray-400">We are currently in the process of selecting and inviting the top mentors to join us at KitaHack. Keep an eye out for announcements on their names and expertise in the coming weeks. We can't wait to share their valuable insights and experiences with you!</p>
<button class="mt-5 mb-2 bg-yellow-500 transition ease-in-out delay-50 hover:bg-white text-white hover:text-yellow-500 hover:border hover:border-yellow-700 font-bold py-2 px-4 rounded dark:hover:bg-gray-700 dark:hover:text-white dark:hover:border-white">
<a href="#">View Profile</a>
</button>
</div>
</section>
<!-- Discord Server -->
<h1 id="discord-section" class="font-bold text-3xl md:text-5xl mt-20 mx-auto mb-8 relative justify-center text-center dark:text-white">Discord Server</h1>
<p class="text-gray-700 font-normal mt-4 px-2 text-center dark:text-gray-400">Join the server to ask any question</p>
<section class="w-full flex flex-wrap justify-center items-center py-10 px-4">
<iframe src="https://discord.com/widget?id=1060756502652125276&theme=dark" class="h-96 w-2/3" allowtransparency="true" frameborder="0" sandbox="allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-scripts"></iframe>
</section>
<!-- End of Discord Section -->
<!-- FAQ -->
<section class="relative py-24 bg-blueGray-50 overflow-hidden">
<!-- <img class="absolute bottom-0 left-1/2 transform -translate-x-1/2" src="flaro-assets/images/faqs/gradient.svg" alt=""> -->
<div class="relative z-10 container px-4 mx-auto">
<div class="md:max-w-4xl mx-auto">
<!-- <h1 class="text-5xl md:text-6xl xl:text-6xl text-center font-bold tracking-tight mb-6 dark:text-white">Frequently Asked Questions</h1> -->
<h1 class="heading text-center mb-6 font-bold text-3xl md:text-5xl dark:text-white">Frequently Asked Questions</h1>
<!-- <p class=" mb-6 font-light text-gray-500 text-center pb-3 lg:mb-8 md:text-lg lg:text-xl dark:text-gray-400">The most common questions about DSC Kita Hack 2023.</p> -->
<p class="pb-3 text-gray-700 font-normal text-center dark:text-gray-400 mb-6 lg:mb-8">The most common questions about GDSC Kita Hack 2023.</p>
<!-- <h2 class="mb-16 text-6xl md:text-8xl xl:text-10xl text-center font-bold font-heading tracking-px-n leading-none">Frequently Asked Questions</h2> -->
<div class="pb-3">
<div tabindex="0" class="collapse collapse-arrow border border-base-300 bg-base-100 rounded-box hover:border-[#EA4335] border-2 dark:bg-gray-700">
<div class="py-6 px-8 collapse-title text-xl text-gray-700 font-bold leading-normal dark:text-white">
Can I participate in KitaHack as a solo team?
</div>
<!-- <div class="px-8 collapse-content text-gray-600 font-medium">
<p>You can. However, if you want to find members to form a team, you can do so at our Discord server here *link*</p>
</div> -->
<div class="px-8 collapse-content text-gray-700 font-normal dark:text-gray-400">
<p>Yes, you are welcome to participate as a solo team. However, if you're looking for team members, you can join our Discord server link to connect with other participants.</p>
</div>
</div>
</div>
<div class="pb-3">
<div tabindex="1" class="collapse collapse-arrow border border-base-300 bg-base-100 rounded-box hover:border-[#4285F4] border-2 dark:bg-gray-700">
<div class="py-6 px-8 collapse-title text-xl text-gray-700 font-bold leading-normal dark:text-white">
I'm a beginner. Can I still participate in KitaHack?
</div>
<div class="px-8 collapse-content text-gray-700 font-normal dark:text-gray-400">
<p>Yes, absolutely! We offer beginner-friendly workshops to help you build your idea.</p>
</div>
</div>
</div>
<div class="pb-3">
<div tabindex="2" class="collapse collapse-arrow border border-base-300 bg-base-100 rounded-box hover:border-[#34A853] border-2 dark:bg-gray-700">
<div class="py-6 px-8 collapse-title text-xl text-gray-700 font-bold leading-normal dark:text-white">
Who owns the app/solution that my team creates during KitaHack?
</div>
<div class="px-8 collapse-content text-gray-700 font-normal dark:text-gray-400">
<p>Your team will retain ownership of the app/solution that you create during KitaHack.</p>
</div>
</div>
</div>
<div class="pb-3">
<div tabindex="3" class="collapse collapse-arrow border border-base-300 bg-base-100 rounded-box hover:border-[#FBBC04] border-2 dark:bg-gray-700">
<div class="py-6 px-8 collapse-title text-xl text-gray-700 font-bold leading-normal dark:text-white">
Can I pick a solution outside the scope of the 17 Sustainable Development Goals (SDGs)?
</div>
<div class="px-8 collapse-content text-gray-700 font-normal dark:text-gray-400">
<p>While you are welcome to explore any solution ideas, for the purpose of the Global Solution Challenge (GSC) and KitHack 2023 competition, you are required to select a theme within the 17 SDGs.</p>
</div>
</div>
</div>
<div class="pb-3">
<div tabindex="4" class="collapse collapse-arrow border border-base-300 bg-base-100 rounded-box hover:border-[#EA4335] border-2 dark:bg-gray-700">
<div class="py-6 px-8 collapse-title text-xl text-gray-700 font-bold leading-normal dark:text-white">
What happens after KitaHack?
</div>
<div class="px-8 collapse-content text-gray-700 font-normal dark:text-gray-400">
<p>After KitaHack, you'll have the opportunity to refine and improve your solution for the 2023 Global Solution Challenge.</p>
</div>
</div>
</div>
<div class="pb-3">
<div tabindex="5" class="collapse collapse-arrow border border-base-300 bg-base-100 rounded-box hover:border-[#4285F4] border-2 dark:bg-gray-700">
<div class="py-6 px-8 collapse-title text-xl text-gray-700 font-bold leading-normal dark:text-white">
Can I participate in multiple teams?
</div>
<div class="px-8 collapse-content text-gray-700 font-normal dark:text-gray-400">
<p>No, each student is only allowed to be a part of one submission for KitaHack.</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- End FAQ -->
<!-- Footer -->
<footer class="p-4 sm:p-6">
<hr class="my-6 border-gray-200 sm:mx-auto dark:border-gray-700 lg:my-8" />
<div class="sm:flex sm:items-center sm:justify-between px-10">
<span class="text-sm text-gray-500 sm:text-center dark:text-gray-400">© 2023 <a href="https://flowbite.com/" class="hover:underline">GDSC Malaysia™</a>. All Rights Reserved.
</span>
<div class="flex mt-4 space-x-6 sm:justify-center sm:mt-0">
<a href="https://www.facebook.com/dscmalaysiakita/" class="text-gray-500 hover:text-gray-900 dark:hover:text-white">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path fill-rule="evenodd" d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33v6.988C18.343 21.128 22 16.991 22 12z" clip-rule="evenodd" />
</svg>
<span class="sr-only">Facebook page</span>
</a>
<a href="https://www.instagram.com/gdsc.malaysia/" class="text-gray-500 hover:text-gray-900 dark:hover:text-white">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path fill-rule="evenodd" d="M12.315 2c2.43 0 2.784.013 3.808.06 1.064.049 1.791.218 2.427.465a4.902 4.902 0 011.772 1.153 4.902 4.902 0 011.153 1.772c.247.636.416 1.363.465 2.427.048 1.067.06 1.407.06 4.123v.08c0 2.643-.012 2.987-.06 4.043-.049 1.064-.218 1.791-.465 2.427a4.902 4.902 0 01-1.153 1.772 4.902 4.902 0 01-1.772 1.153c-.636.247-1.363.416-2.427.465-1.067.048-1.407.06-4.123.06h-.08c-2.643 0-2.987-.012-4.043-.06-1.064-.049-1.791-.218-2.427-.465a4.902 4.902 0 01-1.772-1.153 4.902 4.902 0 01-1.153-1.772c-.247-.636-.416-1.363-.465-2.427-.047-1.024-.06-1.379-.06-3.808v-.63c0-2.43.013-2.784.06-3.808.049-1.064.218-1.791.465-2.427a4.902 4.902 0 011.153-1.772A4.902 4.902 0 015.45 2.525c.636-.247 1.363-.416 2.427-.465C8.901 2.013 9.256 2 11.685 2h.63zm-.081 1.802h-.468c-2.456 0-2.784.011-3.807.058-.975.045-1.504.207-1.857.344-.467.182-.8.398-1.15.748-.35.35-.566.683-.748 1.15-.137.353-.3.882-.344 1.857-.047 1.023-.058 1.351-.058 3.807v.468c0 2.456.011 2.784.058 3.807.045.975.207 1.504.344 1.857.182.466.399.8.748 1.15.35.35.683.566 1.15.748.353.137.882.3 1.857.344 1.054.048 1.37.058 4.041.058h.08c2.597 0 2.917-.01 3.96-.058.976-.045 1.505-.207 1.858-.344.466-.182.8-.398 1.15-.748.35-.35.566-.683.748-1.15.137-.353.3-.882.344-1.857.048-1.055.058-1.37.058-4.041v-.08c0-2.597-.01-2.917-.058-3.96-.045-.976-.207-1.505-.344-1.858a3.097 3.097 0 00-.748-1.15 3.098 3.098 0 00-1.15-.748c-.353-.137-.882-.3-1.857-.344-1.023-.047-1.351-.058-3.807-.058zM12 6.865a5.135 5.135 0 110 10.27 5.135 5.135 0 010-10.27zm0 1.802a3.333 3.333 0 100 6.666 3.333 3.333 0 000-6.666zm5.338-3.205a1.2 1.2 0 110 2.4 1.2 1.2 0 010-2.4z" clip-rule="evenodd" />
</svg>
<span class="sr-only">Instagram page</span>
</a>
<a href="https://github.com/Google-Developer-Student-Club-Malaysia" class="text-gray-500 hover:text-gray-900 dark:hover:text-white">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path fill-rule="evenodd" d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z" clip-rule="evenodd" />
</svg>
<span class="sr-only">GitHub account</span>
</a>
</div>
</div>
</footer>
<div class="fixed inset-x-0 bottom-10 items-center mx-auto left-1/2 lg:left-auto lg:right-20 z-40 ">
<a href="https://forms.gle/dtCF5RVjxru3BAhu5" target="_blank">
<button class="text-md btn flex items-center justify-center p-0.5 mb-2 mr-2 overflow-hidden font-medium text-gray-900 rounded-lg group bg-gradient-to-br from-blue-900 to-blue-500 group-hover:from-blue-900 group-hover:to-blue-500 hover:text-white dark:text-white focus:ring-4 focus:outline-none focus:ring-blue-300 dark:focus:ring-blue-800 ">
<span class="px-10 py-4 rounded-md transition-all ease-in duration-75 bg-white dark:bg-gray-900 group-hover:bg-opacity-0">
Register Now!
</span>
</button>
</a>
</div>
<!-- JavaScript for Pre-Loader -->
<script>
var loader = document.getElementById("preloader");
window.addEventListener("load", function () {
setTimeout(function () {
loader.style.display = "none";
}, 500);
document.body.style.overflow = "unset";
})
</script>
</body>
</html>