Kamis, 26 Maret 2026

Khayalan Hijau

 KHAYALAN HIJAU



Cahaya matahari pagi menyelinap melalui celah jendela kaca yang sedikit berdebu, membentuk garis-garis emas panjang di atas permukaan meja kayu. Di dalam kelas yang masih sunyi itu, partikel debu tampak menari-nari dalam sorotan lampu alami.


Di pojok kanan kelas itu terdapat murid perempuan yang sedang menatap jendela yang penuh dengan debu, matanya malas dan sepertinya moodnya sedang tidak baik, dia seperti orang yang sangat bosan dengan kehidupan entah apa yang ada dipikirannya pagi pagi begini.


Ternyata murid perempuan itu bernama Aralie, dia murid yang pintar sekaligus suka merangkai kata kata tetapi entah kenapa sifatnya yang gampang bosan itu seperti membuat dirinya merasa sepi dan malas dengan kehidupan, Aralie itu tipe orang yang pendiam dan malas berbicara ke orang yang baru dia kenali, kalau kata teman teman kelasnya Aralie sangat introvert dan malas untuk bersosial, mungkin itu alasan Aralie duduk dipojok kelas, karena biasanya dipojok kelas itu terasa lebih sunyi dan tentram.


Walaupun duduk di pojok kelas Aralie memiliki teman sebangku yang sangat ekstrovert berbanding terbalik dengan Aralie, namanya Levi dirinya tinggi dan memiliki badan yang sangat keren atau mungkin sedikit gagah tomboy entah disebut apa dan style baju yang kece abis kalau kata teman teman kelasnya, Levi tipe anak yang berenergi dan seperti bisa membuat orang orang tertarik kepadanya untuk mengobrol lama seperti sebuah tongkrongan malam di angkringan.


Pagi itu ketika Aralie sedang bengong menatap jendela Levi masuk kelas dengan antusiasnya dan menyapa Aralie yang sedang bengong tadi “ hey Aralie mett pagii “, Aralie menjawab dengan simple saja seperti introvert pada umumnya “ pagi “, Levi pun segera membuka obrolan dengan semangat penuh banyak topik yang bisa  dibahas sepertinya “ hey pagi pagi gini udah bengong aje ni ye, Aralie kamu tau ga kalau sekolah kita masuk Adiwiyata Nasional “, Aralie yang masih setengah bengong itu bertanya kepada Levi “ emangnya Adiwiyata tu apa kok kamu keknya semangat banget dehh sekolah masuk Adiwiyata Nasional “.


Sebelum sempat menjelaskan tiba tiba bel masuk berbunyi dan jam pertama pembelajaran dimulai, Guru pun memasuki kelas dan menyapa murid muridnya “ Selamat pagi anak anak, bagaimana kabar kalian pagi ini ? Pasti semangat dong “, lalu teman teman kelas pun menjawab dengan semangat pagi “ pagii Buu Shani, baikk Bu “, kemudian Bu Shani dengan semangat dan antusiasme yang tinggi memberikan kabar baik yang didapat oleh sekolah, teman teman kelas sepertinya mereka sudah pada tau apa kabar baik itu tetapi mereka tetap mendengarkan dengan seksama, “ Jadiii ada kabar baik nih anak anak untuk sekolah kita “, kemudian ditimpali “ apa itu Bu ? “, “ Jadii sekolahh kita mendapatkan branding atau status sebagai sekolah Adiwiyata Nasional!! “, satu kelas bersorak gembira karena senang ada kata nasionalnya atau emang mereka tau apa itu Adiwiyata.


Tetapi sepertinya Aralie tidak terlihat senang atau malah hanya acuh tak peduli apa itu branding Adiwiyata Nasional, Bu Shani yang menyadari itu langsung bertanya kepada Aralie “ Aralie kenapa kamu seperti biasa saja dengan kabar baik ini ? “ , kemudian Aralie pun menjawab dengan sungkan “ tadi pagi sebelum bel masuk Levi sudah ngasih tau duluan Bu tentang Adiwiyata Adiwiyata itu “, Bu Shani dengan penasaran bertanya kepada Aralie seberapa tau dia tentang Adiwiyata, Aralie hanya menggeleng tidak tau karena Aralie dan Levi belum melanjutkan obrolan itu.


Kemudian Aralie pun dengan sungkan mencoba bertanya kepada Bu Shani tentang Adiwiyata “ Bu Shani emang apasih Adiwiyata itu ? kenapa orang orang seneng banget sama brandingan itu ? “ Bu Shani dengan semangat menjelaskan apa itu Adiwiyata “ jadi gini, Adiwiyata itu program nasional dari Kementerian Lingkungan Hidup untuk mewujudkan sekolah yang peduli dan berbudaya lingkungan. Tujuannya, menciptakan lingkungan sekolah yang bersih, sehat, dan indah, sekaligus membentuk karakter warga sekolah agar bertanggung jawab dalam perlindungan dan pengelolaan lingkungan hidup “, Aralie penasaran akan penjelasan Bu Shani, Aralie terus bertanya tentang apa itu Adiwiyata dan Bu Shani menjawab pertanyaan pertanyaan Aralie dengan penuh kesabaran dan antusias.


Tak terasa bel istirahat pun berbunyi Bu Shani pamit dari kelas dan Aralie pun beristirahat, dia bukan tipe orang yang suka istirahat lalu membeli jajan di kantin, entah apa alasannya Aralie tidak membeli jajan di kantin entah karena ramai atau malas yaaa begitulah sifatnya, berbeda dengan Levi yang langsung membeli jajan di kantin ketika bel berbunyi.


Ketika Levi sedang membeli jajan Aralie di kelas mencari validasi atau kebenaran dari yang dijelasin oleh Bu Shani tentang Adiwiyata yang menjadi branding sekolahnya, Aralie mencari informasi lewat internet dan beberapa teman temannya, Yahh begitulah Aralie bisa berinteraksi ketika menginginkan sesuatu tentunya.


Ketika sedang mencari kebenaran tentang Adiwiyata di Internet, tiba tiba Aralie dihampiri oleh temannya yang bernama Delynn dan Oline, Aralie sedikit gugup karena Delynn dan Oline itu anak yang sangat terkenal di kelas atau bahkan sekolah, yaaa bisa dibilang mereka adalah artisnya sekolah karena Delynn suka live dengan gimink menarik dan Delynn memiliki sebutan gadis Shanghai karena kecantikannya, dan Oline yang kalem dan anggun seperti ballerina, yaaa karena Oline memang anak balet sihh.


Walaupun gugup Aralie tetap berinteraksi dengan mereka dengan santai, ternyata Delynn dan Oline juga penasaran tentang apa itu Adiwiyata dan kata mereka sekolah akan mengadakan sebuah program karena ada branding sekolah Adiwiyata Nasional ini, Aralie dengan penasaran bertanya “ emang mau ada program apa ? “ Delynn menjawab “yang ku tau burung saja sihh tentang bekal makanan yang menggunakan wadah sendiri sama botol minum juga “, lalu Oline menambahi “ iyaa sama katanya nanti ada program zero apa itu zero sampah apa gituuu, katanya sih mengurangi plastik gitu sama kalau pergi ke kantin harus pakai wadah sendiri “, Aralie pun makin penasaran, tetapi Aralie sudah terbiasa dengan membawa bekal karena hari harinya selalu membawa bekal dan malas untuk pergi ke kantin.


Ketika Aralie asik mengobrol dengan Delynn dan Oline, Levi pun akhirnya kembali dari kantin dan langsung ikut nimbrung di obrolan tersebut, Levi juga memberikan jajan yang dibelinya untuk menemani mereka ngobrol, yaaa seperti itu lah obrolan bangku belakang yang rasanya seperti sidang paripurna. Ketika sedang asik mengobrol bel masuk berbunyi mereka langsung duduk ke tempat duduk masing masing dan siap melanjutkan pelajaran.


Di tengah tengah pembelajaran tiba tiba teman bangku depan Aralie mengajak Levi dan Aralie untuk nongkrong bersama di sebuah cafe dekat stasiun, Aralie dan Levi menerima tawarannya karena sepertinya mereka juga ingin nongkrong setelah sepulang sekolah. Bel pulang pun berbunyi mereka akhirnya pulang dan menuju ke cafe yang sudah disepakati.


Sesampainya di cafe Aralie dan Levi langsung memesan makanan dan minuman lalu mereka mencari tempat duduk, ternyata teman temannya sudah menunggu Aralie dan Levi, mereka dateng lebih dulu karena ketika pulang sekolah mereka langsung ke cafe tanpa mengganti pakaian, mereka adalah Nachia, Nala, Lana, Nayla. Mereka tipe orang yang sering berkelompok bahkan dikelas ada sebutan empat NA yang menjadi sebutan lingkaran pertemanan mereka, salah satunya ada pindahan dari Jepang yaitu Nayla.


Aralie dan Levi duduk dan mulai mengobrol bersama mereka, ternyata Levi langsung nyambung dan terlihat sangat asik mengobrol dengan mereka berbeda dengan Aralie yang masih menentukan frekuensinya untuk bisa masuk ke obrolan mereka, ditengah tengah obrolan Nayla tiba tiba membahas tentang Adiwiyata, Nayla sepertinya baru mendengar kata Adiwiyata karena di Jepang tidak ada kata Adiwiyata seperti di Indonesia “ teman teman saya ingin bertanya Adiwiyata itu memangnya apa ? Saat Bu Shani menjelaskan saya kurang paham dengan bahasanya, karena bahasa Indonesia saya masih kurang dan masih belum tahu semua kosa katanya “, lalu Aralie sambil sedikit tertawa menjelaskan ke Nayla tentang apa itu Adiwiyata, di sela sela mereka mendengarkan penjelasan Aralie tentang Adiwijaya yang didapatkan dari guru dan internet, pramusaji datang membawa pesanan mereka, “ terima kasih kak “ kata mereka kepada pramusaji.


Setelah mendengarkan penjelasan Aralie mereka sambil makan dan minum pesanan yang mereka pesan, ditengah tengah mereka makan Nala tiba tiba mengatakan tentang kabar burung yang ada di sekolah “ eyy kalian tau ga kabar burung tentang program yang Adiwiyata itu ?, besok katanya udah mau diterapin loh, coba deh lihat grup “, setelah mendengarkan Perkataan Nala mereka semua membuka grup, dan benar saja program yang akan menunjang branding Adiwiyata akan diterapkan besok dan programnya sesuai apa yang dikatakan Delynn dan Oline.


Setelah berbincang bincang tentang program dan menghabiskan makanan mereka semua akhirnya berpamitan dan pulang  ke rumah masing masing, diperjalanan pulang Aralie penasaran bagaimana penerapan program yang akan diterapkan besok disekolahnya, Aralie memikirkan itu sampai tiba di rumah.


Sesampainya di rumah Aralie pergi ke kamarnya dan rebahan santai sambil scrolling sosial media, ketika sedang scrolling sosial media Aralie tiba tiba ingin bertanya kepada seseorang dan akhirnya Aralie melakukan chatting ke seseorang yang bernama Fritzy, Fritzy itu teman lama Aralie dan salah satu teman dekatnya walaupun berbeda sekolah mereka masing saling berkomunikasi, sekolah Fritzy ternyata sudah menerapkan konsep Adiwiyata lebih dahulu sebelum sekolah Aralie, lalu Aralie pun bertanya kepadanya dan Fritzy menjelaskan konsep Adiwiyata di sekolahnya, tak terasa mereka mengobrol sampai tengah malam dan akhirnya mereka berdua memutuskan untuk melanjutkan pembahasannya besok karena sudah larut malam dan waktunya untuk tidur karena besok masih sekolah.


Pagi harinya, matahari bersinar menerangi pagi yang sangat sejuk Aralie pergi ke sekolah menanti aturan atau program baru dari branding Adiwiyata di sekolah, sesampainya di sekolah Aralie pergi ke bangku belakang seperti biasanya dia memikirkan apa yang dikatakan Fritzy pada malam tadi, ketika dia sedang memikirkan hal itu teman temannya memanggilnya untuk segera menuju ke lapangan sekolah, kata teman teman kelasnya ada pembinaan pagi untuk program baru.


Sesampainya di lapangan sekolah Aralie melihat kepala sekolah yang sudah berdiri siap memberikan pernyataan untuk program baru di sekolah “ murid-murid jadi kalian sudah tau tentang program yang akan dilaksanakan disekolah ini kan ? Yang sudah di share di grup kelas masing masing, yaa jadi disini saya juga menyampaikan sekali lagi untuk program tersebut agar bisa ditaati dan dilaksanakan dengan baik dan benar, untuk mengawali program ini kita awali dengan senam bersama kemudian sarapan dan pemberian tablet tambah darah dan terakhir bersih bersih lingkungan di sekitaran luar sekolah dan di dalam sekolah, oh ya saya hampir lupa sekarang kalau kalian lihat tidak ada lagi tong sampah berwarna merah dan kuning, karena program tanpa plastik membuat kita tidak perlu lagi dengan tong sampah warna merah dan jika ada botol plastik atau gelas plastik dan sejenisnya bisa di buang di tempat yang disediakan dibeberapa tempat seperti depan koperasi, kantin dan ruang guru, itu tempat hanya untuk membuang sampah botol dan gelas plastik, tidak untuk yang lainnya, dan nanti setiap kelas akan ada penilaian kebersihan kelas dan akan di umumkan setiap bulan siapa tertinggi dan siapa terendah alias siapa kelas terbersih dan siapa kelas terkotor“.


Lalu senam bersama dilaksanakan irama musik senam memandu para murid untuk menyesuaikan gerakan, tetapi lagunya sedikit aneh karena seperti program politik yang bisa dijadikan alat propaganda dan juga membuat terngiang-ngiang program baru pemerintah, Aralie menyadari itu tetapi memilih untuk diam, selesai senam para murid melanjutkan dengan sarapan dan pemberian tablet tambah darah, Aralie menyadari banyak anak yang tidak mengonsumsi tablet yang telah diberikan tapi Aralie tetap acuh membiarkan hal tersebut, selesai sarapan para murid melanjutkan dengan bersih bersih lingkungan sekolah dan mereka semua bekerjasama untuk membersihkan selokan, taman, green house, dan sekitaran luar sekolah.


Setelah selesai bersih bersih murid murid membersihkan diri dan kembali masuk ke kelas untuk mendapatkan pembelajaran seperti biasanya, di dalam kelas Aralie sepertinya tertarik dengan konsep Adiwiyata yang dijelaskan oleh kepala sekolah, Levi yang menyadari itu langsung berkata pada Aralie “ eyy lie kamu seneng yah sama program baru itu “ Aralie menjawab dengan santai “ iya cukup senang karena membuat sekolah kita lebih bersih dan indah, aku suka sama kebersihan soalnya lep “ lalu mereka berdua mengobrol santai tentang Adiwiyata, mereka berharap Adiwiyata bisa membuat masyarakat sadar akan keindahan lingkungan dan kebersihannya.


Bel pulang sekolah berbunyi, teman teman kelas langsung kembali pulang ke rumah masing masing tetapi bagi yang piket kelas membersihkan kelas terlebih dahulu baru boleh untuk pulang karena jika tidak piket maka akan dikenakan denda, hari ini hari piketnya Aralie dan juga beberapa temannya, Aralie piket membersihkan kelas dengan menyapunya dan membersihkan jendela, sembari membersihkan Aralie mendengarkan obrolan teman piketnya yaitu Ribka, Regie, Moreen, dan Shasa yang sedang membahas tentang penilaian kebersihan kelas menurut mereka itu program hanya untuk mengurangi biaya operasional kebersihan sekolah, Aralie yang mendengar itu setuju dengan pernyataan mereka karena memang cara seperti itu paling ampuh dan sering digunakan untuk mengurangi biaya operasional kebersihan sekolah. Mereka akhirnya membahas hal tersebut sambil membersihkan kelas hingga pulang sekolah.


Sesampainya di rumah Aralie kembali membuka sosmed dan melakukan obrolan di discord bersama Fritzy dan temannya Fritzy yaitu Lily, mereka mengobrol sambil bermain game Free Fire sambil ngemil Sukro Oven, mereka sembari main game juga membahas mengenai program yang akhirnya diterapkan di sekolah, menurut Aralie program itu bagus lalu Fritzy juga setuju Lily pun begitu tetapi Lily menambahkan kalau program itu bagus bergantung kepada masyarakat sekolahnya, pertanyaan itu disetujui juga oleh Aralie karena sepertinya murid murid sekolah Aralie bukan tipe yang begitu taat aturan bahkan ada guru yang melanggarnya, Aralie hanya berharap program itu bisa dilaksanakan dengan baik dan benar. Tak terasa sudah tengah malam mereka bermain game akhirnya Lily dan Fritzy berpamitan untuk tidur, Aralie pun juga sama berpamitan.


Tiga bulan berlalu, program program sekolah tentang branding Adiwiyata bahkan sampai ada pin sekolah sehat, walaupun seperti itu ternyata setelah tiga bulan berlalu program Adiwiyata mulai kendor dan mulai tidak ada yang peduli lagi dengan Adiwiyata walaupun membersihkan kelas dan selokannya masih berjalan karena adanya sistem peringkat kebersihan yang memaksa murid murid untuk selalu menjaga kebersihan, penilaian kebersihan kelas berdasarkan beberapa kriteria yang hanya diketahui oleh orang yang mengikuti ekstrakulikuler Adiwiyata, begitulah Adiwiyata sudah menjadi ekstrakurikuler yang lumayan banyak peminatnya walaupun mungkin mereka masuk karena fomo atau memang ingin menjaga lingkungan, hanya mereka sendiri yang tau.


Setelah tiga bulan itu juga Aralie menyadari bahwa program Adiwiyata disekolahnya memang bagus tetapi tidak dengan masyarakat sekolahnya yang masih menganggap bahwa Adiwiyata hanyalah tren lewat, yang hanya sebentar bukan kehidupan berkelanjutan, kebanyakan dari mereka tidak peduli dengan lingkungan karena mungkin kebiasaan mereka yang tidak memperdulikan lingkungan dari kecil susah dihilangkan, Aralie yang menyadari itu hanya tertawa karena seperti Khayalan Hijau, dimana Aralie menggambarkan bahwa di dunia ini semua bisa menjaga lingkungan sehat dan hijau walaupun itu hanyalah khayalan saja karena manusia sudah biasa untuk membuat kerusakan kepada alam mereka sendiri.


Waktu Aralie berkhayal tiba tiba Erine dan Kimmy datang mengbuyarkan khayalannya, ternyata Erine dan Kimmy ingin mengajak Aralie untuk ke koperasi membeli jajanan disana, Aralie setuju dengan ajakan tersebut, ketika berjalan menuju koperasi, Aralie melewati ruang guru yang di depannya ada tong sampah yang dimana isinya acak acakan, ada sampah plastik, botol plastik, stick es krim dan lain lain, Aralie hanya bisa geleng-geleng kepala karena kenapa bisa di samping ruang guru ada tempat untuk botol malah ditaruh sampah botol plastik di tong sampah itu, tong sampah itu biasanya untuk dedaunan dan tidak seharusnya ada sampah plastik karena ada program Adiwiyata yaitu pengurangan sampah plastik, Aralie hanya bisa geleng-geleng kepala karena bahkan seorang yang seharusnya menjadi contoh malah melakukan hal yang seharusnya tidak dilakukan.


Sesampainya di koperasi Aralie melihat banyak anak anak yang tidak menggunakan wadah sendiri malah banyak yang menggunakan plastik bahkan ada yang menyobek kertas minyak jajan untuk dijadikan wadah padahal itu seharusnya tidak diperbolehkan karena menimbulkan sampah Aralie hanya bisa menghela nafas dan menggeleng kepalanya, ternyata memang manusia tidak bisa menjaga lingkungannya walaupun sudah ada aturan tertulisnya. Setelah Aralie membeli jajanan dengan wadah sendiri dia ingin membayar dan ternyata yang jadi kasirnya itu temannya yaitu Trisha yang menjadi kasir sementara karena kasir koperasi sedang ada kesibukan, Trisha melayani Aralie sambil tersenyum dan menyapa Aralie, Aralie menyapanya balik dan menyemangati Trisha.


Selepas dari kantin Aralie, Erine dan Kimmy duduk dipojok melingkar sambil membahas tentang masalah program program Adiwiyata yang mulai kendor disekolahnya, Aralie sambil sedikit bete mengatakan “ Ihh kenapa sih orang orang susah banget untuk ngejaga lingkungan padahal kan itu gampang banget “, Erine menimpalinya “ yaaa begitulah manusia suka mengotori lingkungan sendiri, bahkan di depan ruang guru aja kan tadi ada tong sampah padahal katanya udah ga pake tong sampah lagi aneh emang”, Kimmy hanya bisa mengomentari sedikit saja “ yaa begitulah, lalalala buat aturan eh dilanggar sendiri upsss “ , Aralie “ iya ih aneh “.


Ketika mereka sedang membahas itu Levi, Oline dan Delynn ikut nimbrung tentang Adiwiyata yang mereka lihat semakin dicuekin, mereka semua akhirnya membahas Adiwiyata yang dimana sudah mulai memudar dan tidak dipedulikan. Ketika mereka sedang asik membahas datang circle dari NA yang ikut nimbrung sambil membawa Makan Siang Gratis yang menjadi program pemerintah, mereka semua akhirnya sambil memakan makan siang tersebut sambil membahas Adiwiyata.


Bel pembelajaran berbunyi mereka semua kemudian langsung kembali ke tempat duduk masing masing dan lanjut pembelajaran seperti biasa, kebetulan hari itu pelajaran yang di ajar oleh salah satu pembina Adiwiyata, setelah pembelajaran selesai Aralie dengan berani bertanya “ Bu kenapa Adiwiyata disekolah kita mulai kendor ? Kenapa ada tong sampah di depan ruang guru ? Kok kek tren lewat aja Bu ini Adiwiyatanya “, bu guru hanya bisa menjawab dengan tidak enak “ yaa karena masyarakatnya begitu tidak peduli lingkungan “, Aralie sadar kalau Bu Melody tidak bisa menjawab tong sampah depan ruang guru, setalah itu Bu Melody keluar dari kelas.


Hari berikutnya Aralie dan teman teman mencoba membuat poster dan video edukasi untuk menyadarkan kembali tentang Adiwiyata yang ada di sekolah, mereka semua membuat itu dengan semangat dan penuh perjuangan agar masyarakat sekitar sekolah kembali sadar akan pentingnya menjaga lingkungan, Aralie membuat video tersebut bersama Oline dan Delynn agar ramai yang menonton dan mudah untuk menarik minat masyarakat.


Setelah selesai membuat video dan poster mereka menyebarkannya dan mempromosikan kembali program Adiwiyata yang mulai terlupakan, mereka semua berjuang sekeras mungkin agar lingkungan tetap terjaga dan sehat bagi warga atau masyarakat sekolah, Aralie lah yang paling semangat untuk hal tersebut karena dirinya sangat menyukai lingkungan.


Setelah selesai, mereka semua melanjutkan dengan bersih bersih lingkungan bersama teman teman dan warga sekolah, sepertinya hari ini mereka semua berhasil dan membuat warga sekolah sadar akan pentingnya menjaga lingkungan agar tetap bersih dan sehat, mereka semua kembali membersihkan selokan, menanam tanaman, menjaga taman dan lain hal, mereka semua semangat mengerjakan pekerjaan itu untuk membersihkan lingkungan terutama Jabieb, Arif dan Babeh yang dimana mereka bertiga sangat menyukai lingkungan yang sehat dan juga taman yang hijau subur, mereka bersyukur ada Aralie dan teman temannya yang terus menjaga dan mempromosikan kebersihan dan keindahan lingkungan.


Berminggu-minggu berlalu Adiwiyata mulai kendor lagi, Aralie dan teman temannya hanya bisa pasrah mereka semua berfikir kalau seharusnya memang dari dasar atau fundamental manusianya yang harus dibekali dengan pengetahuan lingkungan agar mereka semua bisa menjaga lingkungan agar tetap nyaman, aman, bersih, dan segar. Walaupun begitu mereka semua akhirnya tetap memperjuangkan lingkungan yang sehat dan nyaman untuk semua orang, mereka sekarang lebih berfokus pada dasar dasar dan juga memperbaiki, menyadarkan dan memberikan wawasan lingkungan kebanyak orang agar bisa membuat lingkungan menjadi lebih baik.


Akhirnya mereka semua tetap melakukan kebaikan itu sampai orang orang sadar akan pentingnya menjaga lingkungan, mereka tetap menggunakan prinsip lingkungan dan menerapkannya ke kehidupan sehari hari seperti mengurangi plastik, mendaur ulang, dan menggunakan kembali. Walaupun masih banyak orang yang masih tidak menjaga lingkungan, Aralie adalah salah satu contoh manusia yang sangat peduli akan lingkungan dan juga terus memperjuangkan tekad untuk membuat lingkungan lebih baik lagi, Aralie hanya berharap orang orang bisa berubah menjadi lebih baik agar semuanya lebih nyaman dan aman, terkadang diwaktu senja Aralie menatap langit yang indah bagaikan lukisan yang Tuhan, berikan kepada manusia, Aralie selalu berkata “ pasti bisa jika diperjuangkan “ dengan nada lembut seperti angin sepoi-sepoi di waktu senja dekat pantai yang membisikan nyanyian ombak, Teman temannya juga sama mereka selalu berkata “ Pasti bisa “ untuk menyemangati diri mereka agar bisa terus memperjuangkan lingkungan agar tetap terjaga keindahannya. TAMAT.


Calvados: “oii Rego dari tadi baca apaan serius amat “

Rego: “ Baca cerpen buatan gua la emang kenape dos “

Calvados: “emang lu bisa buat cerpen ?”

Rego; “bisa dong, ngece ya lu”

Calvados: “tulisan jelek gini, alur gajelas, tanda ga jelas”

Rego: “ nape ga seneng, namanya juga belajar dos”

Calvados: “ tanda bacanya benerin dulu sono “

Rego: “  iye iyee “

Calvados: “ Ya udah, bersihin lingkungan dulu gih “

Rego: “ iyee siap “

Calvados: “ bagus bagus dari pada ngesarkasin Gita, mending bersih bersih lingkungan biar lebih jelas aje“

Rego: “okee, dehh”

 Calvados: “ yuk gaskenn”

Rego: “ ayok”

Mereka berdua akhirnya melakukan bersih bersih lingkungan sambil membahas cerpen buatan Rego yang ditulisnya sendiri, ternyata judul cerpen yang diberikan Rego adalah Khayalan Hijau.






Minggu, 22 Februari 2026

Website

 <!doctype html>

<html lang="id" class="h-full"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Platform Belajar Informatika Terpadu - XII.4 SMAN 1 PAGUYANGAN</title> <script src="https://cdn.tailwindcss.com/3.4.17"></script> <script src="/_sdk/element_sdk.js"></script> <script src="/_sdk/data_sdk.js"></script> <link href="https://fonts.googleapis.com/css2?family=Crimson+Text:ital@0;1&amp;family=Montserrat:wght@400;500;600;700&amp;family=Space+Grotesk:wght@400;600;700&amp;display=swap" rel="stylesheet"> <style> * { font-family: 'Montserrat', sans-serif; } .serif { font-family: 'Crimson Text', serif; } .mono { font-family: 'Space Grotesk', monospace; } html, body { height: 100%; } ::-webkit-scrollbar { width: 10px; } ::-webkit-scrollbar-track { background: var(--bg-secondary); } ::-webkit-scrollbar-thumb { background: var(--accent); border-radius: 5px; } ::-webkit-scrollbar-thumb:hover { background: var(--accent-hover); } :root { --bg-primary: #0a0f1f; --bg-secondary: #0d1b3d; --bg-tertiary: #1a2847; --text-primary: #ffffff; --text-secondary: #a0a0a0; --accent: #0ea5e9; --accent-hover: #06b6d4; --accent-dark: #0284c7; --card-bg: rgba(13, 27, 61, 0.5); --success: #10b981; --error: #ef4444; --warning: #f59e0b; } html.light-mode { --bg-primary: #f8fafc; --bg-secondary: #f1f5f9; --bg-tertiary: #e2e8f0; --text-primary: #0f172a; --text-secondary: #64748b; --accent: #0084ff; --accent-hover: #0066cc; --accent-dark: #0052a3; --card-bg: rgba(255, 255, 255, 0.8); --success: #059669; --error: #dc2626; --warning: #d97706; } body { background: var(--bg-primary); color: var(--text-primary); transition: all 0.3s ease; overflow-x: hidden; } html.light-mode body { background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%); } @keyframes float { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(-20px); } } @keyframes pulse-glow { 0%, 100% { box-shadow: 0 0 30px rgba(14, 165, 233, 0.2); } 50% { box-shadow: 0 0 60px rgba(14, 165, 233, 0.4); } } @keyframes gradient-shift { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } @keyframes slide-up { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } @keyframes bounce-in { 0% { transform: scale(0.3); opacity: 0; } 50% { opacity: 1; } 100% { transform: scale(1); } } @keyframes robot-wave { 0%, 100% { transform: rotate(0deg); } 25% { transform: rotate(25deg); } 75% { transform: rotate(-25deg); } } @keyframes robot-talk { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(1.1); } } @keyframes moon-glow { 0%, 100% { filter: drop-shadow(0 0 5px rgba(59, 130, 246, 0.5)); } 50% { filter: drop-shadow(0 0 15px rgba(59, 130, 246, 0.8)); } } @keyframes sun-glow { 0%, 100% { filter: drop-shadow(0 0 5px rgba(251, 146, 60, 0.5)); } 50% { filter: drop-shadow(0 0 15px rgba(251, 146, 60, 0.8)); } } @keyframes slide-in-left { from { opacity: 0; transform: translateX(-100px); } to { opacity: 1; transform: translateX(0); } } @keyframes fade-in { from { opacity: 0; } to { opacity: 1; } } .float-animation { animation: float 4s ease-in-out infinite; } .pulse-glow { animation: pulse-glow 2.5s ease-in-out infinite; } .slide-up { animation: slide-up 0.6s ease-out forwards; } .bounce-in { animation: bounce-in 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55); } .robot-wave { animation: robot-wave 0.6s ease-in-out; } .robot-talk { animation: robot-talk 0.3s ease-in-out infinite; } .moon-glow { animation: moon-glow 3s ease-in-out infinite; } .sun-glow { animation: sun-glow 3s ease-in-out infinite; } .slide-in-left { animation: slide-in-left 0.8s ease-out forwards; } .fade-in { animation: fade-in 0.6s ease-out forwards; } .gradient-bg { background: linear-gradient(-45deg, var(--bg-primary), var(--bg-secondary), var(--bg-primary), var(--bg-secondary)); background-size: 400% 400%; animation: gradient-shift 20s ease infinite; } html.light-mode .gradient-bg { background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%); animation: none; } .grid-pattern { background-image: linear-gradient(rgba(14, 165, 233, 0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(14, 165, 233, 0.03) 1px, transparent 1px); background-size: 60px 60px; } html.light-mode .grid-pattern { background-image: none; } .modern-btn { position: relative; overflow: hidden; transition: all 0.4s ease; background: linear-gradient(135deg, var(--accent), var(--accent-hover)); color: #ffffff; border: none; font-weight: 600; } .modern-btn:hover { box-shadow: 0 20px 40px rgba(14, 165, 233, 0.3); transform: translateY(-2px); } .modern-btn:active { transform: translateY(0px); } .nav-link { position: relative; transition: all 0.3s ease; letter-spacing: 0.5px; color: var(--text-secondary); font-size: 0.875rem; font-weight: 600; } .nav-link::after { content: ''; position: absolute; bottom: -4px; left: 0; width: 0; height: 2px; background: var(--accent); transition: width 0.3s ease; } .nav-link:hover::after, .nav-link.active::after { width: 100%; } .nav-link.active { color: var(--accent); } .page-section { display: none; opacity: 0; } .page-section.active { display: block; opacity: 1; } .modal-overlay { display: none; } .modal-overlay.active { display: flex; } .toast { position: fixed; top: 20px; right: 20px; background: linear-gradient(135deg, var(--accent), var(--accent-hover)); color: white; padding: 1rem 1.5rem; border-radius: 0.75rem; z-index: 2000; animation: slide-up 0.3s ease-out; box-shadow: 0 10px 30px rgba(14, 165, 233, 0.2); font-weight: 600; } .character { width: 150px; height: 150px; border-radius: 50%; background: linear-gradient(135deg, var(--accent), var(--accent-hover)); display: flex; align-items: center; justify-content: center; font-size: 5rem; box-shadow: 0 15px 50px rgba(14, 165, 233, 0.4); } .chat-bubble { background: var(--card-bg); border: 2px solid var(--accent); border-radius: 1.5rem; padding: 1.5rem; max-width: 500px; animation: slide-up 0.5s ease-out; color: var(--text-primary); box-shadow: 0 10px 30px rgba(14, 165, 233, 0.15); } .module-card { transition: all 0.4s ease; border: 2px solid rgba(14, 165, 233, 0.2); background: var(--card-bg); cursor: pointer; color: var(--text-primary); backdrop-filter: blur(10px); } html.light-mode .module-card { border: 2px solid rgba(0, 132, 255, 0.2); } .module-card:hover { transform: translateY(-12px); box-shadow: 0 30px 60px rgba(14, 165, 233, 0.2); border-color: rgba(14, 165, 233, 0.5); } .quiz-option { display: flex; gap: 1rem; padding: 1rem; margin: 0.75rem 0; border: 2px solid rgba(14, 165, 233, 0.2); border-radius: 0.75rem; cursor: pointer; transition: all 0.3s ease; background: rgba(255, 255, 255, 0.02); color: var(--text-primary); } html.light-mode .quiz-option { background: rgba(0, 132, 255, 0.05); border: 2px solid rgba(0, 132, 255, 0.2); } .quiz-option:hover { border-color: var(--accent); background: rgba(14, 165, 233, 0.1); transform: translateX(8px); } .quiz-option input { cursor: pointer; width: 20px; height: 20px; accent-color: var(--accent); } .accent-line { background: linear-gradient(90deg, transparent, var(--accent), transparent); height: 3px; border-radius: 2px; } .stat-number { font-size: 2.5rem; font-weight: bold; color: var(--accent); } .code-block { background: var(--bg-secondary); border-left: 4px solid var(--accent); padding: 1rem; border-radius: 0.75rem; font-family: 'Space Grotesk', monospace; overflow-x: auto; font-size: 0.9rem; color: var(--text-primary); } html.light-mode .code-block { background: #f0f4f8; border-left-color: var(--accent); color: #1a1a2e; } .game-board { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin: 2rem 0; } .game-card { aspect-ratio: 1; border: 2px solid var(--accent); border-radius: 1rem; display: flex; align-items: center; justify-content: center; font-size: 2rem; cursor: pointer; transition: all 0.3s ease; background: var(--card-bg); color: var(--text-primary); font-weight: bold; user-select: none; } .game-card:hover { transform: scale(1.05); box-shadow: 0 10px 30px rgba(14, 165, 233, 0.2); } .game-card.matched { opacity: 0.3; cursor: default; transform: scale(1); } .game-card.active { background: var(--accent); color: #1a1a2e; transform: scale(1.05); } .modal-content { background: var(--bg-secondary); border: 2px solid rgba(14, 165, 233, 0.3); border-radius: 1.5rem; padding: 2rem; max-width: 90vw; max-height: 90%; overflow-y: auto; color: var(--text-primary); box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3); } html.light-mode .modal-content { background: #ffffff; border: 2px solid rgba(0, 132, 255, 0.3); color: #0f172a; } .tab-button { padding: 0.75rem 1.5rem; margin: 0 0.5rem 0.5rem 0; border: 2px solid transparent; background: transparent; color: var(--text-secondary); border-bottom: 2px solid transparent; cursor: pointer; transition: all 0.3s ease; font-weight: 600; } .tab-button.active { color: var(--accent); border-bottom-color: var(--accent); } .input-field { width: 100%; padding: 0.75rem; border-radius: 0.75rem; background: rgba(255, 255, 255, 0.05); border: 2px solid rgba(14, 165, 233, 0.3); color: var(--text-primary); transition: all 0.3s ease; margin-bottom: 1rem; font-weight: 500; } html.light-mode .input-field { background: rgba(0, 132, 255, 0.05); border: 2px solid rgba(0, 132, 255, 0.3); color: #0f172a; } .input-field::placeholder { color: var(--text-secondary); } .input-field:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 15px rgba(14, 165, 233, 0.3); background: rgba(14, 165, 233, 0.1); } .reference-link { display: inline-block; padding: 0.75rem 1.5rem; background: var(--accent); color: white; border-radius: 0.75rem; text-decoration: none; margin: 0.5rem; transition: all 0.3s ease; font-weight: 600; } .reference-link:hover { transform: translateY(-2px); box-shadow: 0 10px 20px rgba(14, 165, 233, 0.3); } .developer-card { text-align: center; padding: 2rem; background: var(--card-bg); border: 2px solid rgba(14, 165, 233, 0.2); border-radius: 1.5rem; transition: all 0.3s ease; backdrop-filter: blur(10px); } .developer-card:hover { transform: translateY(-12px); box-shadow: 0 20px 40px rgba(14, 165, 233, 0.15); border-color: rgba(14, 165, 233, 0.5); } .developer-avatar { width: 120px; height: 120px; border-radius: 50%; margin: 0 auto 1rem; border: 4px solid var(--accent); object-fit: cover; background: var(--bg-tertiary); } .social-links { display: flex; justify-content: center; gap: 1rem; margin-top: 1rem; } .social-links a { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: rgba(14, 165, 233, 0.2); color: var(--accent); text-decoration: none; transition: all 0.3s ease; font-size: 1.3rem; } .social-links a:hover { background: var(--accent); color: #1a1a2e; transform: scale(1.15); } .leaderboard-item { display: flex; justify-content: space-between; align-items: center; padding: 1.2rem; margin: 0.75rem 0; background: var(--card-bg); border-left: 4px solid var(--accent); border-radius: 0.75rem; color: var(--text-primary); transition: all 0.3s ease; } .leaderboard-item:hover { transform: translateX(8px); box-shadow: 0 10px 25px rgba(14, 165, 233, 0.15); } .leaderboard-rank { font-weight: bold; font-size: 1.3rem; color: var(--accent); min-width: 50px; } .leaderboard-rank.gold { color: #ffd700; font-size: 1.5rem; } .leaderboard-rank.silver { color: #c0c0c0; font-size: 1.4rem; } .leaderboard-rank.bronze { color: #cd7f32; font-size: 1.3rem; } .theme-icon { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; } .theme-icon svg { width: 24px; height: 24px; filter: drop-shadow(0 0 8px rgba(14, 165, 233, 0.3)); } html.light-mode .theme-icon svg { filter: drop-shadow(0 0 8px rgba(251, 146, 60, 0.4)); } .youtube-link { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.75rem 1.5rem; background: #ff0000; color: white; border-radius: 0.75rem; text-decoration: none; margin: 0.5rem; transition: all 0.3s ease; font-weight: 600; } .youtube-link:hover { transform: translateY(-2px); box-shadow: 0 10px 25px rgba(255, 0, 0, 0.3); } .book-link { display: inline-block; padding: 0.75rem 1.5rem; background: var(--accent); color: white; border-radius: 0.75rem; text-decoration: none; margin-top: 1rem; transition: all 0.3s ease; font-weight: 600; } .book-link:hover { transform: translateY(-2px); box-shadow: 0 10px 20px rgba(14, 165, 233, 0.3); } .welcome-steps { max-width: 600px; margin: 0 auto; } .step-content { display: none; animation: fade-in 0.5s ease-out; } .step-content.active { display: block; } </style> <style>body { box-sizing: border-box; }</style> </head> <body class="h-full gradient-bg overflow-auto"> <div class="min-h-full grid-pattern"><!-- Welcome Modal dengan Robot Animasi --> <div id="welcomeModal" class="modal-overlay fixed inset-0 bg-black/80 backdrop-filter backdrop-blur-xl z-50 items-center justify-center"> <div class="modal-content relative max-w-2xl"><button onclick="skipWelcome()" class="absolute top-4 right-4 text-3xl opacity-60 hover:opacity-100 transition">×</button> <div class="text-center mb-8"> <div id="robotCharacter" class="character bounce-in mx-auto mb-8 robot-wave"> ๐Ÿค– </div> </div> <div id="welcomeSteps" class="welcome-steps"><!-- Step 1: Sambutan --> <div id="step-1" class="step-content active"> <div class="chat-bubble mb-6"> <p class="text-lg mb-4 leading-relaxed" id="welcome-greeting">๐Ÿ‘‹ Halo! Aku adalah asisten digital Anda. Selamat datang di Platform Belajar Informatika Terpadu!</p> <div class="flex gap-4"><button onclick="nextWelcomeStep()" class="modern-btn px-6 py-3 rounded-lg" id="btn-next-1">Lanjut →</button> <button onclick="skipWelcome()" class="px-6 py-3 rounded-lg border transition" style="border-color: rgba(14, 165, 233, 0.3); color: var(--text-primary); font-weight: 600;" id="btn-skip-1">Skip</button> </div> </div> </div><!-- Step 2: Pengenalan --> <div id="step-2" class="step-content"> <div class="chat-bubble mb-6"> <p class="text-base mb-4 leading-relaxed" id="welcome-intro">๐ŸŽ“ Perkenalkan website kami yang dibuat oleh kelompok kami dengan beranggotakan 6 orang yang bernama Alinda, Amel, Dipa, Rahma, Danendra, dan Izzudin dari XII.4 SMAN 1 PAGUYANGAN.</p> <div class="flex gap-4"><button onclick="nextWelcomeStep()" class="modern-btn px-6 py-3 rounded-lg" id="btn-next-2">Lanjut →</button> <button onclick="prevWelcomeStep()" class="px-6 py-3 rounded-lg border transition" style="border-color: rgba(14, 165, 233, 0.3); color: var(--text-primary); font-weight: 600;" id="btn-prev-2">← Kembali</button> </div> </div> </div><!-- Step 3: Tujuan Website --> <div id="step-3" class="step-content"> <div class="chat-bubble mb-6"> <p class="text-base mb-4 leading-relaxed" id="welcome-purpose">๐Ÿ“š Website ini dibuat untuk memenuhi tugas informatika sekaligus bisa dijadikan referensi belajar untuk pelajar yang sedang ingin belajar informatika.</p> <div class="flex gap-4"><button onclick="nextWelcomeStep()" class="modern-btn px-6 py-3 rounded-lg" id="btn-next-3">Lanjut →</button> <button onclick="prevWelcomeStep()" class="px-6 py-3 rounded-lg border transition" style="border-color: rgba(14, 165, 233, 0.3); color: var(--text-primary); font-weight: 600;" id="btn-prev-3">← Kembali</button> </div> </div> </div><!-- Step 4: Status Pengembangan --> <div id="step-4" class="step-content"> <div class="chat-bubble mb-6"> <p class="text-base mb-4 leading-relaxed" id="welcome-status">๐Ÿš€ Website ini masih dalam tahap pengembangan jadi belum sempurna dan masih perlu banyak perbaikan dan peningkatan. Terima kasih telah berkunjung!</p> <div class="flex gap-4"><button onclick="skipWelcome()" class="modern-btn px-6 py-3 rounded-lg" id="btn-finish">Mulai Jelajahi →</button> <button onclick="prevWelcomeStep()" class="px-6 py-3 rounded-lg border transition" style="border-color: rgba(14, 165, 233, 0.3); color: var(--text-primary); font-weight: 600;" id="btn-prev-4">← Kembali</button> </div> </div> </div> </div> </div> </div><!-- Navigation --> <nav class="fixed top-0 left-0 right-0 z-40 backdrop-blur-xl border-b" style="background: rgba(10, 15, 31, 0.9); border-color: rgba(14, 165, 233, 0.1);"> <div class="max-w-7xl mx-auto px-4 sm:px-6 py-4"> <div class="flex items-center justify-between"> <div class="flex items-center gap-3"> <div class="theme-icon moon-glow"> <svg id="logoIcon" fill="currentColor" viewbox="0 0 24 24" style="color: var(--accent);"><path d="M21.64,13a1,1,0,0,0-1.05-.14,8,8,0,0,1-3.52.92,8.07,8.07,0,0,1-2.4-.34A7.88,7.88,0,0,1,9.9,13.46a8,8,0,0,1-3.5-1.68,7.84,7.84,0,0,1-1.6-1.6A8,8,0,0,1,2.26,5.92a8.06,8.06,0,0,1,.36-2.4A8.15,8.15,0,0,1,4.7,1.89a1,1,0,0,0,.57-1.22A1,1,0,0,0,4,1a10,10,0,1,0,14,9.88A1,1,0,0,0,21.64,13Z" /> </svg> </div><span class="font-bold text-lg tracking-wider hidden sm:inline" id="nav-title" style="color: var(--text-primary);">INFORMATIKA</span> </div> <div class="flex items-center gap-3 sm:gap-6"> <div class="hidden lg:flex items-center gap-2"><button onclick="showPage('beranda')" class="nav-link active" data-page="beranda" id="nav-beranda">BERANDA</button> <button onclick="showPage('modul')" class="nav-link" data-page="modul" id="nav-modul">MODUL</button> <button onclick="showPage('quiz')" class="nav-link" data-page="quiz" id="nav-quiz">QUIZ</button> <button onclick="showPage('game')" class="nav-link" data-page="game" id="nav-game">GAME</button> <button onclick="showPage('catatan')" class="nav-link" data-page="catatan" id="nav-catatan">CATATAN</button> <button onclick="showPage('kelompok')" class="nav-link" data-page="kelompok" id="nav-kelompok">KELOMPOK</button> <button onclick="showPage('buku')" class="nav-link" data-page="buku" id="nav-buku">BUKU</button> <button onclick="showPage('kreator')" class="nav-link" data-page="kreator" id="nav-kreator">KREATOR</button> <button onclick="showPage('ai')" class="nav-link" data-page="ai" id="nav-ai">AI</button> <button onclick="showPage('dev')" class="nav-link" data-page="dev" id="nav-dev">DEVELOPER</button> </div> <div class="flex items-center gap-3"><select id="languageSelect" onchange="changeLanguage(this.value)" class="px-3 py-2 rounded-lg border text-sm cursor-pointer transition font-semibold" style="background: var(--bg-secondary); border-color: rgba(14, 165, 233, 0.3); color: var(--text-primary);"> <option value="id">๐Ÿ‡ฎ๐Ÿ‡ฉ ID</option> <option value="en">๐Ÿ‡บ๐Ÿ‡ธ EN</option> <option value="ja">๐Ÿ‡ฏ๐Ÿ‡ต JA</option> <option value="jv">๐Ÿ‡ฎ๐Ÿ‡ฉ JV</option> <option value="zh">๐Ÿ‡จ๐Ÿ‡ณ ZH</option> <option value="fr">๐Ÿ‡ซ๐Ÿ‡ท FR</option> <option value="es">๐Ÿ‡ช๐Ÿ‡ธ ES</option> <option value="pt">๐Ÿ‡ต๐Ÿ‡น PT</option> <option value="ms">๐Ÿ‡ฒ๐Ÿ‡พ MS</option> </select> <button onclick="toggleTheme()" class="p-2 rounded-lg transition" style="background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.1);" title="Toggle theme"> <svg id="themeIcon" class="w-6 h-6" fill="currentColor" viewbox="0 0 24 24"><path d="M21.64,13a1,1,0,0,0-1.05-.14,8,8,0,0,1-3.52.92,8.07,8.07,0,0,1-2.4-.34A7.88,7.88,0,0,1,9.9,13.46a8,8,0,0,1-3.5-1.68,7.84,7.84,0,0,1-1.6-1.6A8,8,0,0,1,2.26,5.92a8.06,8.06,0,0,1,.36-2.4A8.15,8.15,0,0,1,4.7,1.89a1,1,0,0,0,.57-1.22A1,1,0,0,0,4,1a10,10,0,1,0,14,9.88A1,1,0,0,0,21.64,13Z" /> </svg></button> <button onclick="toggleMobileMenu()" class="lg:hidden p-2 rounded-lg transition" style="background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.1);"> <svg class="w-6 h-6" fill="none" stroke="currentColor" viewbox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" /> </svg></button> </div> </div> </div> <div id="mobileMenu" class="hidden lg:hidden mt-4 pb-4 border-t border-white/10 pt-4 space-y-3"><button onclick="showPage('beranda'); toggleMobileMenu();" class="block w-full text-left px-4 py-2 rounded-lg hover:bg-white/10 font-semibold text-sm transition" id="mb-beranda">BERANDA</button> <button onclick="showPage('modul'); toggleMobileMenu();" class="block w-full text-left px-4 py-2 rounded-lg hover:bg-white/10 font-semibold text-sm transition" id="mb-modul">MODUL</button> <button onclick="showPage('quiz'); toggleMobileMenu();" class="block w-full text-left px-4 py-2 rounded-lg hover:bg-white/10 font-semibold text-sm transition" id="mb-quiz">QUIZ</button> <button onclick="showPage('game'); toggleMobileMenu();" class="block w-full text-left px-4 py-2 rounded-lg hover:bg-white/10 font-semibold text-sm transition" id="mb-game">GAME</button> <button onclick="showPage('catatan'); toggleMobileMenu();" class="block w-full text-left px-4 py-2 rounded-lg hover:bg-white/10 font-semibold text-sm transition" id="mb-catatan">CATATAN</button> <button onclick="showPage('kelompok'); toggleMobileMenu();" class="block w-full text-left px-4 py-2 rounded-lg hover:bg-white/10 font-semibold text-sm transition" id="mb-kelompok">KELOMPOK</button> <button onclick="showPage('buku'); toggleMobileMenu();" class="block w-full text-left px-4 py-2 rounded-lg hover:bg-white/10 font-semibold text-sm transition" id="mb-buku">BUKU</button> <button onclick="showPage('kreator'); toggleMobileMenu();" class="block w-full text-left px-4 py-2 rounded-lg hover:bg-white/10 font-semibold text-sm transition" id="mb-kreator">KREATOR</button> <button onclick="showPage('ai'); toggleMobileMenu();" class="block w-full text-left px-4 py-2 rounded-lg hover:bg-white/10 font-semibold text-sm transition" id="mb-ai">AI</button> <button onclick="showPage('dev'); toggleMobileMenu();" class="block w-full text-left px-4 py-2 rounded-lg hover:bg-white/10 font-semibold text-sm transition" id="mb-dev">DEVELOPER</button> </div> </div> </nav> <main class="pt-20"><!-- ==================== BERANDA ==================== --> <section id="page-beranda" class="page-section active"> <div class="min-h-[90vh] flex items-center justify-center px-6 py-20"> <div class="max-w-5xl mx-auto text-center"> <div class="relative"> <div class="absolute -top-32 -left-32 w-64 h-64 bg-blue-500/10 rounded-full blur-3xl float-animation"></div> <div class="absolute -bottom-32 -right-32 w-80 h-80 bg-cyan-500/5 rounded-full blur-3xl float-animation" style="animation-delay: 1.5s;"></div> <div class="inline-flex items-center gap-2 px-5 py-2 rounded-full border" style="border-color: rgba(14, 165, 233, 0.3); background: rgba(14, 165, 233, 0.05); margin-bottom: 2rem;"><span class="w-2 h-2 rounded-full bg-blue-400 animate-pulse"></span> <span class="text-xs font-bold tracking-widest" id="hero-badge" style="color: var(--text-primary);">PLATFORM BELAJAR TERPADU</span> </div> <h1 class="text-6xl md:text-8xl font-bold mb-6 slide-up serif" style="animation-delay: 0.1s; color: var(--text-primary);"><span id="hero-title">Platform Belajar Informatika</span></h1> <div class="accent-line mx-auto w-24 mb-8 slide-up" style="animation-delay: 0.2s;"></div> <p class="text-lg md:text-xl mb-12 max-w-3xl mx-auto leading-relaxed slide-up" style="animation-delay: 0.3s; color: var(--text-secondary);"><span id="hero-subtitle">dari dasar hingga mahir</span> dengan modul interaktif, 1000+ quiz, game edukatif, dan pembelajaran berbahasa lokal</p> <div id="berandaDesc" class="text-base mb-8 p-6 rounded-lg space-y-4" style="background: var(--card-bg); border: 2px solid rgba(14, 165, 233, 0.2); color: var(--text-primary);"> <div> <h3 class="font-bold text-lg mb-2 text-left" id="apa-informatika">Apa itu Informatika?</h3> <p class="text-left text-sm leading-relaxed" id="desc-informatika">Informatika adalah ilmu yang mempelajari tentang pengolahan data, informasi, dan otomasi menggunakan komputer. Informatika mencakup berbagai aspek seperti pemrograman, algoritma, struktur data, dan sistem informasi yang membantu menyelesaikan masalah dalam kehidupan sehari-hari.</p> </div> <div> <h3 class="font-bold text-lg mb-2 text-left" id="apa-html">Apa itu HTML?</h3> <p class="text-left text-sm leading-relaxed" id="desc-html">HTML (HyperText Markup Language) adalah bahasa markup yang digunakan untuk membuat halaman web. HTML memberikan struktur dan konten pada halaman web melalui tag-tag khusus. Dengan HTML, Anda dapat membuat paragraf, judul, link, gambar, dan elemen-elemen lain yang akan ditampilkan di browser web.</p> </div> </div> <div class="flex flex-col sm:flex-row items-center justify-center gap-6 slide-up" style="animation-delay: 0.4s;"><button onclick="showPage('modul')" class="modern-btn px-10 py-4 rounded-full text-white font-semibold text-lg hover:shadow-2xl"> <span id="btn-mulai">Mulai Belajar</span> </button> <button onclick="showPage('quiz')" class="px-10 py-4 rounded-full border font-semibold text-lg hover:bg-white/10 transition-all" style="border-color: rgba(14, 165, 233, 0.4); color: var(--text-primary);"> <span id="btn-coba">Coba Quiz</span> </button> </div> </div> </div> </div><!-- Stats Section --> <div class="px-6 py-20" style="background: linear-gradient(to right, rgba(14, 165, 233, 0.05), transparent, rgba(14, 165, 233, 0.05)); border-top: 2px solid rgba(14, 165, 233, 0.1); border-bottom: 2px solid rgba(14, 165, 233, 0.1);"> <div class="max-w-6xl mx-auto"> <div class="grid md:grid-cols-4 gap-8"> <div class="stat-item text-center"><span class="stat-number">1000+</span> <p style="color: var(--text-secondary);" id="stat-soal">Soal Quiz</p> </div> <div class="stat-item text-center"><span class="stat-number">9</span> <p style="color: var(--text-secondary);" id="stat-bahasa">Bahasa</p> </div> <div class="stat-item text-center"><span class="stat-number">6</span> <p style="color: var(--text-secondary);" id="stat-modul">Modul Lengkap</p> </div> <div class="stat-item text-center"><span class="stat-number">10</span> <p style="color: var(--text-secondary);" id="stat-game">Game Edukatif</p> </div> </div> </div> </div><!-- Features Overview --> <div class="px-6 py-20 border-t" style="border-color: rgba(14, 165, 233, 0.1);"> <div class="max-w-6xl mx-auto"> <div class="text-center mb-16"> <h2 class="text-5xl md:text-6xl font-bold mb-6 serif" id="fitur-title" style="color: var(--text-primary);">Fitur Lengkap Kami</h2> <div class="accent-line mx-auto w-16"></div> </div> <div class="grid md:grid-cols-3 gap-8"> <div class="module-card p-8 rounded-2xl"> <div class="text-4xl mb-4"> ๐Ÿ“š </div> <h3 class="text-2xl font-bold mb-3" id="fitur-modul" style="color: var(--text-primary);">Modul Interaktif</h3> <p style="color: var(--text-secondary);" id="fitur-modul-desc">HTML, CSS, Python, Java, Flowchart, dan Berpikir Komputasional dengan penjelasan lengkap</p> </div> <div class="module-card p-8 rounded-2xl"> <div class="text-4xl mb-4"> ๐ŸŽฏ </div> <h3 class="text-2xl font-bold mb-3" id="fitur-quiz" style="color: var(--text-primary);">1000+ Quiz</h3> <p style="color: var(--text-secondary);" id="fitur-quiz-desc">Benar-salah, pilihan ganda, dengan sistem poin dan hasil detail</p> </div> <div class="module-card p-8 rounded-2xl"> <div class="text-4xl mb-4"> ๐ŸŽฎ </div> <h3 class="text-2xl font-bold mb-3" id="fitur-game" style="color: var(--text-primary);">10 Game Edukatif</h3> <p style="color: var(--text-secondary);" id="fitur-game-desc">Belajar sambil bermain dengan game interaktif yang seru</p> </div> <div class="module-card p-8 rounded-2xl"> <div class="text-4xl mb-4"> ๐ŸŒ </div> <h3 class="text-2xl font-bold mb-3" id="fitur-bahasa" style="color: var(--text-primary);">Multi-Bahasa</h3> <p style="color: var(--text-secondary);" id="fitur-bahasa-desc">9 bahasa untuk pembelajaran yang lebih mudah dipahami</p> </div> <div class="module-card p-8 rounded-2xl"> <div class="text-4xl mb-4"> ๐Ÿ”Š </div> <h3 class="text-2xl font-bold mb-3" id="fitur-tts" style="color: var(--text-primary);">Text-to-Speech</h3> <p style="color: var(--text-secondary);" id="fitur-tts-desc">Dengarkan materi pembelajaran dengan suara otomatis</p> </div> <div class="module-card p-8 rounded-2xl"> <div class="text-4xl mb-4"> ๐Ÿ‘ฅ </div> <h3 class="text-2xl font-bold mb-3" id="fitur-kolaborasi" style="color: var(--text-primary);">Kolaborasi</h3> <p style="color: var(--text-secondary);" id="fitur-kolaborasi-desc">Catatan bersama, pembagi kelompok, dan komunitas pembelajaran</p> </div> </div> </div> </div><!-- Referensi Section --> <div class="px-6 py-20 border-t" style="border-color: rgba(14, 165, 233, 0.1);"> <div class="max-w-6xl mx-auto"> <div class="text-center mb-16"> <h2 class="text-5xl md:text-6xl font-bold mb-6 serif" id="ref-title" style="color: var(--text-primary);">Referensi Belajar Online</h2> <div class="accent-line mx-auto w-16"></div> <p style="color: var(--text-secondary);" class="mt-4" id="ref-desc">Sumber pembelajaran resmi dan terpercaya</p> </div> <div class="text-center space-y-4 flex flex-wrap justify-center gap-2"><a href="https://malakabooks.id/" target="_blank" rel="noopener noreferrer" class="reference-link" id="ref-malaka">๐Ÿ“š Malaka Books</a> <a href="https://www.dicoding.com/" target="_blank" rel="noopener noreferrer" class="reference-link" id="ref-dicoding">๐Ÿ’ป Dicoding</a> <a href="https://rumah.pendidikan.go.id/" target="_blank" rel="noopener noreferrer" class="reference-link" id="ref-kemendik">๐Ÿ›️ Kemendikbud</a> <a href="https://share.google.com/ET7DhIE2wzSaxPNaE" target="_blank" rel="noopener noreferrer" class="reference-link" id="ref-google">๐Ÿ”— Google Education</a> </div> </div> </div> </section><!-- ==================== MODUL PEMBELAJARAN ==================== --> <section id="page-modul" class="page-section"> <div class="px-6 py-20 border-t" style="border-color: rgba(14, 165, 233, 0.1);"> <div class="max-w-6xl mx-auto"> <div class="text-center mb-16"> <h2 class="text-5xl md:text-6xl font-bold mb-6 serif" id="modul-title" style="color: var(--text-primary);">Modul Pembelajaran</h2> <div class="accent-line mx-auto w-16"></div> </div> <div id="modulList" class="grid md:grid-cols-2 gap-8"></div> </div> </div><!-- Module Detail Modal --> <div id="moduleModal" class="modal-overlay fixed inset-0 bg-black/70 backdrop-filter backdrop-blur-lg z-50 items-center justify-center p-4"> <div class="modal-content w-full max-h-[80vh] overflow-y-auto"> <div class="flex justify-between items-center mb-6"> <h2 class="text-3xl font-bold" id="modalModuleTitle" style="color: var(--text-primary);">Modul</h2><button onclick="closeModule()" class="text-3xl opacity-60 hover:opacity-100 transition" style="color: var(--text-primary);">×</button> </div> <div id="moduleContent" class="space-y-6 leading-relaxed" style="color: var(--text-secondary);"></div> <div class="flex gap-4 mt-8"><button onclick="speakModuleContent()" class="flex-1 modern-btn px-6 py-3 rounded-lg text-white font-semibold flex items-center justify-center gap-2"> <span>๐Ÿ”Š</span> <span id="speak-btn">Dengarkan</span> </button> <button onclick="closeModule()" class="flex-1 px-6 py-3 rounded-lg border transition" style="border-color: rgba(14, 165, 233, 0.3); color: var(--text-primary); font-weight: 600;" id="close-btn">Tutup</button> </div> </div> </div> </section><!-- ==================== QUIZ ==================== --> <section id="page-quiz" class="page-section"> <div class="px-6 py-20 border-t" style="border-color: rgba(14, 165, 233, 0.1);"> <div class="max-w-6xl mx-auto"> <div class="text-center mb-16"> <h2 class="text-5xl md:text-6xl font-bold mb-6 serif" id="quiz-title" style="color: var(--text-primary);">Quiz 1000+ Soal</h2> <div class="accent-line mx-auto w-16"></div> </div> <div id="quizMenu" class="grid md:grid-cols-2 gap-8 mb-12"><button onclick="startQuizType('benar-salah')" class="module-card p-8 rounded-2xl text-left"> <div class="text-4xl mb-4"> ✓✗ </div><h3 class="text-2xl font-bold mb-2" id="quiz-bs" style="color: var(--text-primary);">Benar - Salah</h3><p style="color: var(--text-secondary);" id="quiz-bs-desc">Jawab soal dengan pilihan benar atau salah (500+ soal)</p></button><button class="text-blue-300 font-medium text-sm hover:text-blue-200 transition mt-4" id="mulai-bs">Mulai →</button> <button onclick="startQuizType('pilihan-ganda')" class="module-card p-8 rounded-2xl text-left"> <div class="text-4xl mb-4"> ๐Ÿ”ค </div><h3 class="text-2xl font-bold mb-2" id="quiz-pg" style="color: var(--text-primary);">Pilihan Ganda</h3><p style="color: var(--text-secondary);" id="quiz-pg-desc">Pilih jawaban terbaik dari 4 opsi (500+ soal)</p></button><button class="text-blue-300 font-medium text-sm hover:text-blue-200 transition mt-4" id="mulai-pg">Mulai →</button> </div><!-- Global Quiz Leaderboard --> <div class="max-w-2xl mx-auto"> <h3 class="text-3xl font-bold mb-8 text-center" id="global-leaderboard" style="color: var(--text-primary);">๐Ÿ† Papan Skor Global</h3> <div id="globalLeaderboard" class="space-y-3"></div> </div> </div> </div><!-- Quiz Modal --> <div id="quizModal" class="modal-overlay fixed inset-0 bg-black/70 backdrop-filter backdrop-blur-lg z-50 items-center justify-center p-4"> <div class="modal-content w-full"> <div class="flex justify-between items-center mb-6"> <div> <h2 class="text-2xl font-bold" id="quizModalTitle" style="color: var(--text-primary);">Quiz</h2> <p style="color: var(--text-secondary);" class="text-sm mt-1"><span id="currentQuestion">1</span>/<span id="totalQuestions">20</span> | <span id="quiz-label-poin">Poin</span>: <span id="currentPoints" style="color: var(--accent);">0</span></p> </div><button onclick="closeQuiz()" class="text-3xl opacity-60 hover:opacity-100 transition" style="color: var(--text-primary);">×</button> </div> <div id="quizContent" class="space-y-6"></div> <div class="mt-8 flex gap-4"><button onclick="prevQuiz()" id="prevQuizBtn" class="flex-1 px-6 py-3 rounded-lg border transition disabled:opacity-50" style="border-color: rgba(14, 165, 233, 0.3); color: var(--text-primary); font-weight: 600;" disabled>← Sebelumnya</button> <button onclick="nextQuiz()" id="nextQuizBtn" class="flex-1 modern-btn px-6 py-3 rounded-lg text-white font-semibold">Lanjut →</button> </div> </div> </div> </section><!-- ==================== GAME ==================== --> <section id="page-game" class="page-section"> <div class="px-6 py-20 border-t" style="border-color: rgba(14, 165, 233, 0.1);"> <div class="max-w-6xl mx-auto"> <div class="text-center mb-16"> <h2 class="text-5xl md:text-6xl font-bold mb-6 serif" id="game-title" style="color: var(--text-primary);">10 Game Edukatif</h2> <div class="accent-line mx-auto w-16"></div> </div> <div id="gameList" class="grid md:grid-cols-2 gap-8"></div> </div> </div><!-- Game Modal --> <div id="gameModal" class="modal-overlay fixed inset-0 bg-black/70 backdrop-filter backdrop-blur-lg z-50 items-center justify-center p-4"> <div class="modal-content w-full max-h-[85vh] overflow-y-auto"> <div class="flex justify-between items-center mb-6"> <div> <h2 class="text-3xl font-bold" id="gameTitle" style="color: var(--text-primary);">Game</h2> <p style="color: var(--text-secondary);" class="text-sm mt-1" id="gameScore">Skor: 0</p> </div><button onclick="closeGame()" class="text-3xl opacity-60 hover:opacity-100 transition" style="color: var(--text-primary);">×</button> </div> <div id="gameContent" class="space-y-6"></div> <div class="mt-6"> <h3 class="font-bold mb-4 text-xl" id="leaderboard-title" style="color: var(--text-primary);">๐Ÿ† Papan Skor</h3> <div id="gameLeaderboard" class="space-y-2 max-h-60 overflow-y-auto"></div> </div><button onclick="closeGame()" class="w-full modern-btn px-6 py-3 rounded-lg text-white font-semibold mt-6" id="close-game-btn">Tutup</button> </div> </div> </section><!-- ==================== CATATAN ==================== --> <section id="page-catatan" class="page-section"> <div class="px-6 py-20 border-t" style="border-color: rgba(14, 165, 233, 0.1);"> <div class="max-w-6xl mx-auto"> <div class="text-center mb-16"> <h2 class="text-5xl md:text-6xl font-bold mb-6 serif" id="catatan-title" style="color: var(--text-primary);">Catatan Belajar</h2> <div class="accent-line mx-auto w-16"></div> </div> <div class="grid md:grid-cols-2 gap-8 mb-12"><button onclick="showNotesTab()" class="module-card p-8 rounded-2xl text-left"> <div class="text-4xl mb-4"> ✍️ </div><h3 class="text-2xl font-bold mb-2" id="notes-account" style="color: var(--text-primary);">Buat Catatan</h3><p style="color: var(--text-secondary);" id="notes-account-desc">Buat catatan dan bagikan dengan pengguna lain</p></button><button class="text-blue-300 font-medium text-sm hover:text-blue-200 transition mt-4" id="buat-catatan">Mulai →</button> </div><!-- Display All Notes --> <div class="mb-12"> <h3 class="text-2xl font-bold mb-6" id="catatan-shared" style="color: var(--text-primary);">Catatan Dibagikan</h3> <div id="allNotesList" class="grid md:grid-cols-2 gap-6"> <div class="text-center py-12" style="color: var(--text-secondary);"> <p id="no-notes">Belum ada catatan yang dibagikan</p> </div> </div> </div> </div> </div><!-- Notes Modal --> <div id="notesModal" class="modal-overlay fixed inset-0 bg-black/70 backdrop-filter backdrop-blur-lg z-50 items-center justify-center p-4"> <div class="modal-content w-full"> <div class="flex justify-between items-center mb-6"> <h2 class="text-3xl font-bold" id="notes-modal-title" style="color: var(--text-primary);">Catatan Belajar</h2><button onclick="closeNotes()" class="text-3xl opacity-60 hover:opacity-100 transition" style="color: var(--text-primary);">×</button> </div> <div id="notesContent" class="space-y-6"></div> </div> </div> </section><!-- ==================== KELOMPOK ==================== --> <section id="page-kelompok" class="page-section"> <div class="px-6 py-20 border-t" style="border-color: rgba(14, 165, 233, 0.1);"> <div class="max-w-6xl mx-auto"> <div class="text-center mb-16"> <h2 class="text-5xl md:text-6xl font-bold mb-6 serif" id="kelompok-title" style="color: var(--text-primary);">Pembagi Kelompok</h2> <div class="accent-line mx-auto w-16"></div> <p style="color: var(--text-secondary);" class="mt-4" id="kelompok-desc">Masukkan nama peserta dan bagi secara otomatis ke kelompok</p> </div> <div class="max-w-4xl mx-auto"> <div class="module-card p-8 rounded-2xl"> <div class="space-y-6"> <div><label class="block text-sm font-medium mb-2" id="label-members" style="color: var(--text-primary);">Daftar Peserta (pisahkan dengan koma atau Enter):</label> <textarea id="membersList" placeholder="Contoh: Budi, Ani, Citra, Doni atau nomor absen: 1, 2, 3, 4" class="input-field h-32" style="resize: vertical;"></textarea> </div> <div><label class="block text-sm font-medium mb-2" id="label-groupcount" style="color: var(--text-primary);">Jumlah Kelompok:</label> <input type="number" id="totalGroups" min="2" max="50" value="3" class="input-field"> </div><button onclick="divideGroups()" class="w-full modern-btn px-6 py-3 rounded-lg text-white font-semibold" id="btn-bagi">Bagi Kelompok</button> </div> </div> <div id="groupResult" class="mt-8 hidden"> <div id="groupsList" class="space-y-4"></div> </div> </div> </div> </div> </section><!-- ==================== BUKU ==================== --> <section id="page-buku" class="page-section"> <div class="px-6 py-20 border-t" style="border-color: rgba(14, 165, 233, 0.1);"> <div class="max-w-6xl mx-auto"> <div class="text-center mb-16"> <h2 class="text-5xl md:text-6xl font-bold mb-6 serif" id="buku-title" style="color: var(--text-primary);">Kumpulan E-Books</h2> <div class="accent-line mx-auto w-16"></div> </div> <div id="bukuList" class="grid md:grid-cols-3 gap-8"></div> </div> </div> </section><!-- ==================== KREATOR KONTEN ==================== --> <section id="page-kreator" class="page-section"> <div class="px-6 py-20 border-t" style="border-color: rgba(14, 165, 233, 0.1);"> <div class="max-w-6xl mx-auto"> <div class="text-center mb-16"> <h2 class="text-5xl md:text-6xl font-bold mb-6 serif" id="kreator-title" style="color: var(--text-primary);">Kreator Konten Rekomendasi</h2> <div class="accent-line mx-auto w-16"></div> <p style="color: var(--text-secondary);" class="mt-4" id="kreator-desc">Ikuti kreator terbaik untuk inspirasi dan pembelajaran</p> </div> <div id="kreatorList" class="grid md:grid-cols-3 gap-8"></div> </div> </div> </section><!-- ==================== AI CHAT ==================== --> <section id="page-ai" class="page-section"> <div class="px-6 py-20 border-t" style="border-color: rgba(14, 165, 233, 0.1);"> <div class="max-w-4xl mx-auto"> <div class="text-center mb-16"> <h2 class="text-5xl md:text-6xl font-bold mb-6 serif" id="ai-title" style="color: var(--text-primary);">AI Assistant</h2> <div class="accent-line mx-auto w-16"></div> <p style="color: var(--text-secondary);" class="mt-4" id="ai-desc">Tanya jawab dengan AI tentang informatika</p> </div> <div class="module-card p-8 rounded-2xl"> <p style="color: var(--text-secondary);" class="mb-6 text-center" id="ai-note">Klik salah satu AI di bawah untuk bertanya</p> <div class="flex flex-col sm:flex-row gap-4 justify-center flex-wrap"><a href="https://gemini.google.com/app" target="_blank" rel="noopener noreferrer" class="modern-btn px-6 py-3 rounded-lg text-white font-semibold flex items-center justify-center gap-2"> <span>✨</span> <span>Google Gemini</span> </a> <a href="https://chatgpt.com" target="_blank" rel="noopener noreferrer" class="modern-btn px-6 py-3 rounded-lg text-white font-semibold flex items-center justify-center gap-2"> <span>๐Ÿค–</span> <span>ChatGPT OpenAI</span> </a> </div> </div> </div> </div> </section><!-- ==================== DEVELOPER ==================== --> <section id="page-dev" class="page-section"> <div class="px-6 py-20 border-t" style="border-color: rgba(14, 165, 233, 0.1);"> <div class="max-w-6xl mx-auto"> <div class="text-center mb-16"> <h2 class="text-5xl md:text-6xl font-bold mb-6 serif" id="dev-title" style="color: var(--text-primary);">Tim Pengembang</h2> <div class="accent-line mx-auto w-16"></div> <p style="color: var(--text-secondary);" class="mt-4" id="dev-desc">Berkat dedikasi tim berbakat kami dari XII.4 SMAN 1 PAGUYANGAN</p> </div> <div id="devList" class="grid md:grid-cols-3 gap-8"></div> </div> </div> </section> </main><!-- Footer --> <footer class="border-t mt-20" style="border-color: rgba(14, 165, 233, 0.1); background: rgba(255, 255, 255, 0.02);"> <div class="max-w-7xl mx-auto px-6 py-12"> <div class="text-center"> <p style="color: var(--text-secondary);" class="text-sm">© 2026 <span id="footer-title">Platform Belajar Informatika</span> — <span id="footer-desc">Pembelajaran Interaktif untuk Semua</span></p> <p style="color: var(--text-secondary);" class="text-xs mt-2">Dikembangkan oleh Tim XII.4 SMAN 1 PAGUYANGAN | Dengan 1000+ soal, 9 bahasa, 10 game edukatif, dan komunitas pembelajaran</p> </div> </div> </footer> </div> <script> // ==================== TRANSLATIONS ==================== const translations = { id: { 'nav-beranda': 'BERANDA', 'nav-modul': 'MODUL', 'nav-quiz': 'QUIZ', 'nav-game': 'GAME', 'nav-catatan': 'CATATAN', 'nav-kelompok': 'KELOMPOK', 'nav-buku': 'BUKU', 'nav-kreator': 'KREATOR', 'nav-ai': 'AI', 'nav-dev': 'DEVELOPER', 'mb-beranda': 'BERANDA', 'mb-modul': 'MODUL', 'mb-quiz': 'QUIZ', 'mb-game': 'GAME', 'mb-catatan': 'CATATAN', 'mb-kelompok': 'KELOMPOK', 'mb-buku': 'BUKU', 'mb-kreator': 'KREATOR', 'mb-ai': 'AI', 'mb-dev': 'DEVELOPER', 'welcome-greeting': '๐Ÿ‘‹ Halo! Aku adalah asisten digital Anda. Selamat datang di Platform Belajar Informatika Terpadu!', 'welcome-intro': '๐ŸŽ“ Perkenalkan website kami yang dibuat oleh kelompok kami dengan beranggotakan 6 orang yang bernama Alinda, Amel, Dipa, Rahma, Danendra, dan Izzudin dari XII.4 SMAN 1 PAGUYANGAN.', 'welcome-purpose': '๐Ÿ“š Website ini dibuat untuk memenuhi tugas informatika sekaligus bisa dijadikan referensi belajar untuk pelajar yang sedang ingin belajar informatika.', 'welcome-status': '๐Ÿš€ Website ini masih dalam tahap pengembangan jadi belum sempurna dan masih perlu banyak perbaikan dan peningkatan. Terima kasih telah berkunjung!', 'btn-next-1': 'Lanjut →', 'btn-skip-1': 'Skip', 'btn-next-2': 'Lanjut →', 'btn-prev-2': '← Kembali', 'btn-next-3': 'Lanjut →', 'btn-prev-3': '← Kembali', 'btn-next-4': 'Lanjut →', 'btn-prev-4': '← Kembali', 'btn-finish': 'Mulai Jelajahi →', 'btn-mulai': 'Mulai Belajar', 'btn-coba': 'Coba Quiz', 'hero-badge': 'PLATFORM BELAJAR TERPADU', 'hero-title': 'Platform Belajar Informatika', 'hero-subtitle': 'dari dasar hingga mahir', 'apa-informatika': 'Apa itu Informatika?', 'desc-informatika': 'Informatika adalah ilmu yang mempelajari tentang pengolahan data, informasi, dan otomasi menggunakan komputer. Informatika mencakup berbagai aspek seperti pemrograman, algoritma, struktur data, dan sistem informasi yang membantu menyelesaikan masalah dalam kehidupan sehari-hari.', 'apa-html': 'Apa itu HTML?', 'desc-html': 'HTML (HyperText Markup Language) adalah bahasa markup yang digunakan untuk membuat halaman web. HTML memberikan struktur dan konten pada halaman web melalui tag-tag khusus. Dengan HTML, Anda dapat membuat paragraf, judul, link, gambar, dan elemen-elemen lain yang akan ditampilkan di browser web.', 'stat-soal': 'Soal Quiz', 'stat-bahasa': 'Bahasa', 'stat-modul': 'Modul Lengkap', 'stat-game': 'Game Edukatif', 'fitur-title': 'Fitur Lengkap Kami', 'fitur-modul': 'Modul Interaktif', 'fitur-modul-desc': 'HTML, CSS, Python, Java, Flowchart, dan Berpikir Komputasional dengan penjelasan lengkap', 'fitur-quiz': '1000+ Quiz', 'fitur-quiz-desc': 'Benar-salah, pilihan ganda, dengan sistem poin dan hasil detail', 'fitur-game': '10 Game Edukatif', 'fitur-game-desc': 'Belajar sambil bermain dengan game interaktif yang seru', 'fitur-bahasa': 'Multi-Bahasa', 'fitur-bahasa-desc': '9 bahasa untuk pembelajaran yang lebih mudah dipahami', 'fitur-tts': 'Text-to-Speech', 'fitur-tts-desc': 'Dengarkan materi pembelajaran dengan suara otomatis', 'fitur-kolaborasi': 'Kolaborasi', 'fitur-kolaborasi-desc': 'Catatan bersama, pembagi kelompok, dan komunitas pembelajaran', 'ref-title': 'Referensi Belajar Online', 'ref-desc': 'Sumber pembelajaran resmi dan terpercaya', 'ref-malaka': '๐Ÿ“š Malaka Books', 'ref-dicoding': '๐Ÿ’ป Dicoding', 'ref-kemendik': '๐Ÿ›️ Kemendikbud', 'ref-google': '๐Ÿ”— Google Education', 'modul-title': 'Modul Pembelajaran', 'modul-komputasional': 'Berpikir Komputasional', 'modul-html': 'HTML Dasar', 'modul-css': 'CSS Styling', 'modul-python': 'Python', 'modul-java': 'Java', 'modul-flowchart': 'Flowchart', 'quiz-title': 'Quiz 1000+ Soal', 'quiz-bs': 'Benar - Salah', 'quiz-bs-desc': 'Jawab soal dengan pilihan benar atau salah (500+ soal)', 'quiz-pg': 'Pilihan Ganda', 'quiz-pg-desc': 'Pilih jawaban terbaik dari 4 opsi (500+ soal)', 'quiz-label-poin': 'Poin', 'mulai-bs': 'Mulai →', 'mulai-pg': 'Mulai →', 'prev-btn': '← Sebelumnya', 'next-btn': 'Lanjut →', 'global-leaderboard': '๐Ÿ† Papan Skor Global', 'game-title': '10 Game Edukatif', 'game-memory': 'Memory Game', 'game-memory-desc': 'Temukan pasangan simbol dan pelajari konsep informatika', 'game-sorting': 'Sorting Game', 'game-sorting-desc': 'Urutkan angka dengan cepat untuk mempelajari algoritma sorting', 'game-snake': 'Snake Game', 'game-snake-desc': 'Mainkan snake klasik dengan tema informatika', 'game-hangman': 'Hangman Code', 'game-hangman-desc': 'Tebak istilah informatika yang tersembunyi', 'game-typing': 'Typing Speed', 'game-typing-desc': 'Latih kecepatan mengetik dengan kode', 'game-color': 'Color Match', 'game-color-desc': 'Cocokkan warna dan bentuk dengan cepat', 'game-number': 'Number Sequence', 'game-number-desc': 'Urutkan angka dalam urutan yang benar', 'game-logic': 'Logic Puzzle', 'game-logic-desc': 'Selesaikan puzzle logika yang menantang', 'game-quiz': 'Speed Quiz', 'game-quiz-desc': 'Jawab quiz secepat mungkin dengan benar', 'game-flip': 'Flip Cards', 'game-flip-desc': 'Ingat urutan kartu dan flip dengan benar', 'leaderboard-title': '๐Ÿ† Papan Skor', 'speak-btn': 'Dengarkan', 'close-btn': 'Tutup', 'close-game-btn': 'Tutup', 'catatan-title': 'Catatan Belajar', 'notes-account': 'Buat Catatan', 'notes-account-desc': 'Buat catatan dan bagikan dengan pengguna lain', 'buat-catatan': 'Mulai →', 'catatan-shared': 'Catatan Dibagikan', 'no-notes': 'Belum ada catatan yang dibagikan', 'label-name': 'Nama Anda:', 'label-email': 'Email:', 'label-note': 'Catatan Belajar:', 'kelompok-title': 'Pembagi Kelompok', 'kelompok-desc': 'Masukkan nama peserta dan bagi secara otomatis ke kelompok', 'label-members': 'Daftar Peserta (pisahkan dengan koma atau Enter):', 'label-groupcount': 'Jumlah Kelompok:', 'btn-bagi': 'Bagi Kelompok', 'buku-title': 'Kumpulan E-Books', 'kreator-title': 'Kreator Konten Rekomendasi', 'kreator-desc': 'Ikuti kreator terbaik untuk inspirasi dan pembelajaran', 'ai-title': 'AI Assistant', 'ai-desc': 'Tanya jawab dengan AI tentang informatika', 'ai-note': 'Klik salah satu AI di bawah untuk bertanya', 'dev-title': 'Tim Pengembang', 'dev-desc': 'Berkat dedikasi tim berbakat kami dari XII.4 SMAN 1 PAGUYANGAN', 'footer-title': 'Platform Belajar Informatika', 'footer-desc': 'Pembelajaran Interaktif untuk Semua' }, en: { 'nav-beranda': 'HOME', 'nav-modul': 'MODULES', 'nav-quiz': 'QUIZ', 'nav-game': 'GAMES', 'nav-catatan': 'NOTES', 'nav-kelompok': 'GROUPS', 'nav-buku': 'BOOKS', 'nav-kreator': 'CREATORS', 'nav-ai': 'AI', 'nav-dev': 'DEVELOPERS', 'mb-beranda': 'HOME', 'mb-modul': 'MODULES', 'mb-quiz': 'QUIZ', 'mb-game': 'GAMES', 'mb-catatan': 'NOTES', 'mb-kelompok': 'GROUPS', 'mb-buku': 'BOOKS', 'mb-kreator': 'CREATORS', 'mb-ai': 'AI', 'mb-dev': 'DEVELOPERS', 'welcome-greeting': '๐Ÿ‘‹ Hi! I am your digital assistant. Welcome to the Integrated Informatics Learning Platform!', 'welcome-intro': '๐ŸŽ“ Introducing our website created by our team consisting of 6 people named Alinda, Amel, Dipa, Rahma, Danendra, and Izzudin from XII.4 SMAN 1 PAGUYANGAN.', 'welcome-purpose': '๐Ÿ“š This website was created to fulfill informatics assignments while serving as a reference for students who want to learn informatics.', 'welcome-status': '๐Ÿš€ This website is still in development so it is not yet perfect and still needs much improvement and enhancement. Thank you for visiting!', 'btn-next-1': 'Continue →', 'btn-skip-1': 'Skip', 'btn-next-2': 'Continue →', 'btn-prev-2': '← Back', 'btn-next-3': 'Continue →', 'btn-prev-3': '← Back', 'btn-next-4': 'Continue →', 'btn-prev-4': '← Back', 'btn-finish': 'Start Exploring →', 'btn-mulai': 'Start Learning', 'btn-coba': 'Try Quiz', 'hero-badge': 'INTEGRATED LEARNING PLATFORM', 'hero-title': 'Informatics Learning Platform', 'hero-subtitle': 'from beginner to expert', 'apa-informatika': 'What is Informatics?', 'desc-informatika': 'Informatics is a science that studies data processing, information, and automation using computers. Informatics includes various aspects such as programming, algorithms, data structures, and information systems that help solve real-world problems.', 'apa-html': 'What is HTML?', 'desc-html': 'HTML (HyperText Markup Language) is a markup language used to create web pages. HTML provides structure and content to web pages through special tags. With HTML, you can create paragraphs, headings, links, images, and other elements displayed in browsers.', 'stat-soal': 'Quiz Questions', 'stat-bahasa': 'Languages', 'stat-modul': 'Complete Modules', 'stat-game': 'Educational Games', 'fitur-title': 'Our Complete Features', 'fitur-modul': 'Interactive Modules', 'fitur-modul-desc': 'HTML, CSS, Python, Java, Flowchart, and Computational Thinking with complete explanations', 'fitur-quiz': '1000+ Quizzes', 'fitur-quiz-desc': 'True-false, multiple choice, with point system and detailed results', 'fitur-game': '10 Educational Games', 'fitur-game-desc': 'Learn while playing with fun interactive games', 'fitur-bahasa': 'Multi-Language', 'fitur-bahasa-desc': '9 languages for easier learning', 'fitur-tts': 'Text-to-Speech', 'fitur-tts-desc': 'Listen to learning materials with automatic voice', 'fitur-kolaborasi': 'Collaboration', 'fitur-kolaborasi-desc': 'Shared notes, group divider, and learning community', 'ref-title': 'Online Learning References', 'ref-desc': 'Official and trusted learning sources', 'ref-malaka': '๐Ÿ“š Malaka Books', 'ref-dicoding': '๐Ÿ’ป Dicoding', 'ref-kemendik': '๐Ÿ›️ Education Ministry', 'ref-google': '๐Ÿ”— Google Education', 'modul-title': 'Learning Modules', 'modul-komputasional': 'Computational Thinking', 'modul-html': 'HTML Basics', 'modul-css': 'CSS Styling', 'modul-python': 'Python', 'modul-java': 'Java', 'modul-flowchart': 'Flowchart', 'quiz-title': '1000+ Quiz Questions', 'quiz-bs': 'True or False', 'quiz-bs-desc': 'Answer questions with true or false choices (500+ questions)', 'quiz-pg': 'Multiple Choice', 'quiz-pg-desc': 'Choose the best answer from 4 options (500+ questions)', 'quiz-label-poin': 'Points', 'mulai-bs': 'Start →', 'mulai-pg': 'Start →', 'prev-btn': '← Previous', 'next-btn': 'Next →', 'global-leaderboard': '๐Ÿ† Global Leaderboard', 'game-title': '10 Educational Games', 'game-memory': 'Memory Game', 'game-memory-desc': 'Find matching symbols and learn informatics concepts', 'game-sorting': 'Sorting Game', 'game-sorting-desc': 'Sort numbers quickly to learn sorting algorithms', 'game-snake': 'Snake Game', 'game-snake-desc': 'Play classic snake with informatics theme', 'game-hangman': 'Hangman Code', 'game-hangman-desc': 'Guess hidden informatics terms', 'game-typing': 'Typing Speed', 'game-typing-desc': 'Practice typing speed with code', 'game-color': 'Color Match', 'game-color-desc': 'Match colors and shapes quickly', 'game-number': 'Number Sequence', 'game-number-desc': 'Sort numbers in correct order', 'game-logic': 'Logic Puzzle', 'game-logic-desc': 'Solve challenging logic puzzles', 'game-quiz': 'Speed Quiz', 'game-quiz-desc': 'Answer quiz as fast as possible correctly', 'game-flip': 'Flip Cards', 'game-flip-desc': 'Remember card order and flip correctly', 'leaderboard-title': '๐Ÿ† Leaderboard', 'speak-btn': 'Listen', 'close-btn': 'Close', 'close-game-btn': 'Close', 'catatan-title': 'Study Notes', 'notes-account': 'Create Notes', 'notes-account-desc': 'Create notes and share with other users', 'buat-catatan': 'Start →', 'catatan-shared': 'Shared Notes', 'no-notes': 'No notes shared yet', 'label-name': 'Your Name:', 'label-email': 'Email:', 'label-note': 'Study Notes:', 'kelompok-title': 'Group Divider', 'kelompok-desc': 'Enter participant names and automatically divide into groups', 'label-members': 'Participant List (separate with comma or Enter):', 'label-groupcount': 'Number of Groups:', 'btn-bagi': 'Divide Groups', 'buku-title': 'E-Books Collection', 'kreator-title': 'Recommended Content Creators', 'kreator-desc': 'Follow the best creators for inspiration and learning', 'ai-title': 'AI Assistant', 'ai-desc': 'Ask AI about informatics', 'ai-note': 'Click one of the AIs below to ask questions', 'dev-title': 'Development Team', 'dev-desc': 'Thanks to the dedication of our talented team from XII.4 SMAN 1 PAGUYANGAN', 'footer-title': 'Informatics Learning Platform', 'footer-desc': 'Interactive Learning for All' }, ja: { 'nav-beranda': 'ใƒ›ใƒผใƒ ', 'nav-modul': 'ใƒขใ‚ธใƒฅใƒผใƒซ', 'nav-quiz': 'ใ‚ฏใ‚คใ‚บ', 'nav-game': 'ใ‚ฒใƒผใƒ ', 'nav-catatan': 'ใƒกใƒข', 'nav-kelompok': 'ใ‚ฐใƒซใƒผใƒ—', 'nav-buku': 'ๆœฌ', 'nav-kreator': 'ใ‚ฏใƒชใ‚จใ‚คใ‚ฟใƒผ', 'nav-ai': 'AI', 'nav-dev': '้–‹็™บ่€…', 'hero-title': 'ๆƒ…ๅ ฑๅญฆๅญฆ็ฟ’ใƒ—ใƒฉใƒƒใƒˆใƒ•ใ‚ฉใƒผใƒ ', 'hero-subtitle': 'ๅˆๅฟƒ่€…ใ‹ใ‚‰ๅฐ‚้–€ๅฎถใพใง', 'btn-mulai': 'ๅญฆ็ฟ’ใ‚’้–‹ๅง‹', 'btn-coba': 'ใ‚ฏใ‚คใ‚บใ‚’่ฉฆใ™' }, jv: { 'nav-beranda': 'OMAH', 'nav-modul': 'MODUL', 'nav-quiz': 'KUIZ', 'nav-game': 'GAME', 'nav-catatan': 'CATHETAN', 'nav-kelompok': 'KELOMPOK', 'nav-buku': 'BUKU', 'nav-kreator': 'KREATOR', 'nav-ai': 'AI', 'nav-dev': 'PENGEMBANG', 'btn-mulai': 'Mulai Sinau', 'btn-coba': 'Coba Kuiz' }, zh: { 'nav-beranda': 'ไธป้กต', 'nav-modul': 'ๆจกๅ—', 'nav-quiz': 'ๆต‹้ชŒ', 'nav-game': 'ๆธธๆˆ', 'nav-catatan': '็ฌ”่ฎฐ', 'nav-kelompok': '็ป„', 'nav-buku': 'ไนฆ็ฑ', 'nav-kreator': 'ๅˆ›ไฝœ่€…', 'nav-ai': 'AI', 'nav-dev': 'ๅผ€ๅ‘่€…', 'btn-mulai': 'ๅผ€ๅง‹ๅญฆไน ', 'btn-coba': 'ๅฐ่ฏ•ๆต‹้ชŒ' }, fr: { 'nav-beranda': 'ACCUEIL', 'nav-modul': 'MODULES', 'nav-quiz': 'QUIZ', 'nav-game': 'JEUX', 'nav-catatan': 'NOTES', 'nav-kelompok': 'GROUPES', 'nav-buku': 'LIVRES', 'nav-kreator': 'CRร‰ATEURS', 'nav-ai': 'IA', 'nav-dev': 'Dร‰VELOPPEURS', 'btn-mulai': 'Commencer', 'btn-coba': 'Essayer Quiz' }, es: { 'nav-beranda': 'INICIO', 'nav-modul': 'Mร“DULOS', 'nav-quiz': 'CUIZ', 'nav-game': 'JUEGOS', 'nav-catatan': 'NOTAS', 'nav-kelompok': 'GRUPOS', 'nav-buku': 'LIBROS', 'nav-kreator': 'CREADORES', 'nav-ai': 'IA', 'nav-dev': 'DESARROLLADORES', 'btn-mulai': 'Empezar', 'btn-coba': 'Probar Quiz' }, pt: { 'nav-beranda': 'INรCIO', 'nav-modul': 'Mร“DULOS', 'nav-quiz': 'QUESTIONรRIO', 'nav-game': 'JOGOS', 'nav-catatan': 'NOTAS', 'nav-kelompok': 'GRUPOS', 'nav-buku': 'LIVROS', 'nav-kreator': 'CRIADORES', 'nav-ai': 'IA', 'nav-dev': 'DESENVOLVEDORES', 'btn-mulai': 'Comeรงar', 'btn-coba': 'Tentar Quiz' }, ms: { 'nav-beranda': 'RUMAH', 'nav-modul': 'MODUL', 'nav-quiz': 'KUIZ', 'nav-game': 'PERMAINAN', 'nav-catatan': 'NOTA', 'nav-kelompok': 'KUMPULAN', 'nav-buku': 'BUKU', 'nav-kreator': 'PENCIPTA', 'nav-ai': 'AI', 'nav-dev': 'PEMBANGUN', 'btn-mulai': 'Mulai Belajar', 'btn-coba': 'Coba Kuiz' } }; const developers = [ { name: 'Danendra', role: 'Project Manager & Fullstack', avatar: '๐Ÿ“Š', ig: 'https://www.instagram.com/pandra.mas?igsh=bGhsODFnYTI0NmRr' }, { name: 'Alinda', role: 'Frontend Developer', avatar: '๐Ÿ’ป', ig: 'https://www.instagram.com/alindazhraaulia?igsh=MTR6Z3AyNnY2bml4dw==' }, { name: 'Rahma', role: 'Content Creator & Designer', avatar: '๐ŸŽจ', ig: 'https://www.instagram.com/rhmanyy__?igsh=MXN2YmF5ZXptanh2cA==' }, { name: 'Amel', role: 'UI/UX Designer', avatar: '✨', ig: 'https://www.instagram.com/ameliair0?igsh=MTQwZHVqMzB6dm9ocg==' }, { name: 'Izzudin', role: 'QA Engineer & Backend', avatar: '๐Ÿงช', ig: 'https://www.instagram.com/itsppaang?igsh=Z292MmFteWZtbWpj' }, { name: 'Dipa', role: 'Backend Developer', avatar: '⚙️', ig: 'https://www.instagram.com/pauns3a?igsh=OGZ6YzdvaDh3NXo3' } ]; const youtubeCreators = [ { name: 'Deddy Corbuzier', channel: '@corbuzier', url: 'https://youtube.com/@corbuzier?si=-uHNSz0VtJb_tRPb', avatar: '๐ŸŽค', desc: 'Podcast & Inspirasi' }, { name: 'Kok Bisa?', channel: '@kokbisa', url: 'https://youtube.com/@kokbisa?si=vI4DDYHUZduA8nUI', avatar: '๐Ÿ”ฌ', desc: 'Sains & Teknologi' }, { name: 'Malaka Books', channel: '@malakabooksid', url: 'https://youtube.com/@malakabooksid?si=MJyKdhh7HSut94AV', avatar: '๐Ÿ“š', desc: 'Edukasi & Entertainment' }, { name: 'Malaka Project', channel: '@malakaprojectid', url: 'https://youtube.com/@malakaprojectid?si=9yqmPyThoYL_ZY-d', avatar: '๐ŸŽฌ', desc: 'Project & Tutorial' }, { name: 'Felix Siaw', channel: '@felixsiauw1453', url: 'https://youtube.com/@felixsiauw1453?si=HCFULNfzrkY1BzyU', avatar: '๐Ÿ’ก', desc: 'Business & Entrepreneurship' }, { name: 'Raymond Chin', channel: '@raymondchins', url: 'https://youtube.com/@raymondchins?si=-G5z_0tTTDDQWKqO', avatar: '๐Ÿ†', desc: 'Motivasi & Bisnis' }, { name: 'Sepulang Sekolah', channel: '@SepulangSekolah', url: 'https://www.youtube.com/@SepulangSekolah', avatar: '๐ŸŽ“', desc: 'Edukasi Santai' }, { name: 'Ferry Irwandi', channel: '@ferryirwandi', url: 'https://youtube.com/@ferryirwandi', avatar: '๐Ÿ’ป', desc: 'Web Development' }, { name: 'Mahfud MD', channel: '@mahfud_md', url: 'https://youtube.com/c/mahfud_md', avatar: '๐Ÿ“ข', desc: 'Politik & Edukasi' }, { name: 'Raditya Dika', channel: '@raditiyadika', url: 'https://youtube.com/c/raditiyadika', avatar: '๐Ÿ˜‚', desc: 'Comedy & Lifestyle' }, { name: 'JKT48', channel: '@JKT48official', url: 'https://youtube.com/@JKT48official', avatar: '๐ŸŽค', desc: 'Entertainment & Music' } ]; const eBooks = [ { title: 'HTML & CSS untuk Pemula', author: 'Budi Santoso', desc: 'Panduan lengkap belajar HTML dan CSS dari dasar', icon: '๐ŸŒ', link: 'https://www.htmldom.com' }, { title: 'Python Programming', author: 'Dian Kusuma', desc: 'Belajar pemrograman Python dengan contoh praktis', icon: '๐Ÿ', link: 'https://www.python.org/docs' }, { title: 'Algoritma & Struktur Data', author: 'Prof. Bambang', desc: 'Mendalami algoritma dan struktur data komputer', icon: '๐Ÿ”—', link: 'https://www.geeksforgeeks.org' }, { title: 'JavaScript Interaktif', author: 'Rina Wijaya', desc: 'Membuat web interaktif dengan JavaScript', icon: '⚡', link: 'https://developer.mozilla.org/en-US/docs/Web/JavaScript' }, { title: 'Berpikir Komputasional', author: 'Dr. Siti Rahma', desc: 'Fondasi pemikiran komputasional untuk semua', icon: '๐Ÿง ', link: 'https://www.coursera.org' }, { title: 'Java OOP Mastery', author: 'Hendra Gunawan', desc: 'Penguasaan Object-Oriented Programming dengan Java', icon: '☕', link: 'https://www.oracle.com/java/technologies/javase-documentation.html' } ]; const modules = { komputasional: `Berpikir Komputasional adalah cara berpikir seperti programmer dengan 4 pilar utama: 1. DEKOMPOSISI Memecah masalah kompleks menjadi bagian-bagian kecil yang lebih mudah ditangani. 2. PENGENALAN POLA Menemukan kesamaan dan pola dalam masalah yang sedang dihadapi. 3. ABSTRAKSI Fokus pada detail yang penting saja, mengabaikan informasi yang tidak relevan. 4. ALGORITMA Membuat langkah-langkah solusi yang sistematis dan terstruktur. Dengan berpikir komputasional, Anda dapat menyelesaikan masalah dengan lebih efisien dan terstruktur.`, html: `HTML (HyperText Markup Language) adalah fondasi web untuk membuat struktur halaman. KONSEP UTAMA: • Tag: Elemen dasar HTML seperti <p>, <div>, <h1> • Atribut: Informasi tambahan untuk tag seperti id, class, src • Semantic HTML: Menggunakan tag yang bermakna untuk SEO • Struktur: Membuat hierarchy dengan head, body, main CONTOH TAG: <h1>Judul</h1> - Heading utama <p>Paragraf</p> - Paragraf teks <a href="">Link</a> - Hyperlink <img src="" alt=""> - Gambar <button>Tombol</button> - Tombol HTML adalah fondasi untuk membuat struktur halaman web.`, css: `CSS (Cascading Style Sheets) adalah bahasa styling untuk membuat halaman web terlihat indah. KONSEP UTAMA: • Selector: Memilih elemen yang akan di-style • Properties: Mengubah tampilan seperti color, size, layout • Box Model: Padding, border, margin untuk spacing • Responsive Design: Layout yang beradaptasi dengan layar • Flexbox & Grid: Layout modern untuk desain kompleks CONTOH PROPERTIES: color: mengubah warna teks background-color: warna latar font-size: ukuran font margin: jarak luar padding: jarak dalam CSS membuat website responsif dan user-friendly.`, python: `Python adalah bahasa pemrograman yang mudah dan powerful. KONSEP UTAMA: • Variables: Menyimpan data dalam variabel • Data Types: String, Integer, Float, Boolean, List • Control Flow: If-else, Loop untuk pengulangan • Functions: Blok kode yang dapat digunakan ulang • Libraries: Numpy, Pandas untuk berbagai kebutuhan • Exception Handling: Try-except untuk error handling CONTOH KODE: name = "Budi" age = 20 print(f"Halo, {name}!") Python cocok dari pemula hingga expert.`, java: `Java adalah bahasa pemrograman Object-Oriented yang powerful. KONSEP UTAMA: • OOP: Classes, Objects, Inheritance, Polymorphism • Data Types: Primitive dan Reference types • Collections: ArrayList, HashMap untuk menyimpan data • Exception Handling: Try-catch untuk error handling • Multithreading: Menjalankan multiple tasks • Database: Koneksi dengan SQL databases CONTOH KODE: public class Kendaraan { String nama; void bergerak() { } } Java banyak digunakan untuk enterprise applications.`, flowchart: `Flowchart adalah visualisasi algoritma menggunakan simbol. SIMBOL-SIMBOL: • Oval: Awal atau akhir program • Rectangle: Proses atau operasi • Diamond: Keputusan/kondisi (if-else) • Parallelogram: Input/Output • Arrow: Arah alur program • Circle: Connector ALUR UMUM: 1. Mulai (Oval) 2. Input (Parallelogram) 3. Proses (Rectangle) 4. Kondisi (Diamond) 5. Output (Parallelogram) 6. Selesai (Oval) Flowchart membantu merencanakan program sebelum coding.` }; const games = [ { id: 'memory', name: 'game-memory', desc: 'game-memory-desc', icon: '๐Ÿงฉ' }, { id: 'sorting', name: 'game-sorting', desc: 'game-sorting-desc', icon: '๐Ÿ“Š' }, { id: 'snake', name: 'game-snake', desc: 'game-snake-desc', icon: '๐Ÿ' }, { id: 'hangman', name: 'game-hangman', desc: 'game-hangman-desc', icon: '๐Ÿ“' }, { id: 'typing', name: 'game-typing', desc: 'game-typing-desc', icon: '⌨️' }, { id: 'color', name: 'game-color', desc: 'game-color-desc', icon: '๐ŸŽจ' }, { id: 'number', name: 'game-number', desc: 'game-number-desc', icon: '๐Ÿ”ข' }, { id: 'logic', name: 'game-logic', desc: 'game-logic-desc', icon: '๐Ÿงฉ' }, { id: 'quiz', name: 'game-quiz', desc: 'game-quiz-desc', icon: '⚡' }, { id: 'flip', name: 'game-flip', desc: 'game-flip-desc', icon: '๐Ÿƒ' } ]; const generateQuizQuestions = () => { const topics = ['HTML', 'CSS', 'JavaScript', 'Python', 'Java', 'SQL', 'Git', 'Database', 'Algorithm', 'OOP']; const questions = []; for (let i = 0; i < 500; i++) { questions.push({ q: `Pertanyaan Benar-Salah ${i + 1}: Apakah ${topics[Math.floor(Math.random() * topics.length)]} adalah bahasa pemrograman?`, c: Math.random() > 0.5 }); } return questions; }; const generateMCQuestions = () => { const questions = []; for (let i = 0; i < 500; i++) { questions.push({ q: `Pertanyaan Pilihan Ganda ${i + 1}: Apa fungsi dari elemen HTML?`, o: [`Opsi A - Salah`, `Opsi B - Benar`, `Opsi C - Salah`, `Opsi D - Salah`], c: 1 }); } return questions; }; let bsQuestions = generateQuizQuestions(); let mgQuestions = generateMCQuestions(); let currentLanguage = 'id'; let userDataList = []; let currentQuizSet = []; let currentQuizIndex = 0; let quizScore = 0; let currentModuleText = ''; let gameScores = {}; let currentGameType = ''; let currentGameScore = 0; let allQuizScores = []; let welcomeStep = 1; const dataHandler = { onDataChanged(data) { userDataList = data; renderAllNotes(); } }; async function initDataSDK() { if (window.dataSdk) { await window.dataSdk.init(dataHandler); } } function t(key) { const lang = translations[currentLanguage] || {}; return lang[key] || translations.id[key] || key; } function updatePageLanguage() { document.querySelectorAll('[id]').forEach(el => { if (el.id && translations.id[el.id]) { const translated = t(el.id); if (translated !== el.id && !el.tagName.match(/INPUT|TEXTAREA|SELECT/) && el.tagName !== 'BUTTON') { if (!el.innerHTML.includes('<')) { el.textContent = translated; } } } }); } function showPage(pageId) { document.querySelectorAll('.page-section').forEach(s => s.classList.remove('active')); document.getElementById(`page-${pageId}`)?.classList.add('active'); document.querySelectorAll('.nav-link').forEach(l => l.classList.remove('active')); document.querySelector(`[data-page="${pageId}"]`)?.classList.add('active'); window.scrollTo({ top: 0, behavior: 'smooth' }); } function toggleTheme() { const isLight = document.documentElement.classList.toggle('light-mode'); const icon = document.getElementById('themeIcon'); const logoIcon = document.getElementById('logoIcon'); if (isLight) { icon.innerHTML = '<circle cx="12" cy="12" r="5"/><path d="M12 1v6m0 6v6M23 12h-6M7 12H1M20.485 3.515l-4.242 4.242M7.757 17.485l-4.242 4.242M20.485 20.485l-4.242-4.242M7.757 6.757L3.515 2.515"/>'; logoIcon.innerHTML = '<circle cx="12" cy="12" r="5"/><path d="M12 1v6m0 6v6M23 12h-6M7 12H1M20.485 3.515l-4.242 4.242M7.757 17.485l-4.242 4.242M20.485 20.485l-4.242-4.242M7.757 6.757L3.515 2.515"/>'; } else { icon.innerHTML = '<path d="M21.64,13a1,1,0,0,0-1.05-.14,8,8,0,0,1-3.52.92,8.07,8.07,0,0,1-2.4-.34A7.88,7.88,0,0,1,9.9,13.46a8,8,0,0,1-3.5-1.68,7.84,7.84,0,0,1-1.6-1.6A8,8,0,0,1,2.26,5.92a8.06,8.06,0,0,1,.36-2.4A8.15,8.15,0,0,1,4.7,1.89a1,1,0,0,0,.57-1.22A1,1,0,0,0,4,1a10,10,0,1,0,14,9.88A1,1,0,0,0,21.64,13Z"/>'; logoIcon.innerHTML = '<path d="M21.64,13a1,1,0,0,0-1.05-.14,8,8,0,0,1-3.52.92,8.07,8.07,0,0,1-2.4-.34A7.88,7.88,0,0,1,9.9,13.46a8,8,0,0,1-3.5-1.68,7.84,7.84,0,0,1-1.6-1.6A8,8,0,0,1,2.26,5.92a8.06,8.06,0,0,1,.36-2.4A8.15,8.15,0,0,1,4.7,1.89a1,1,0,0,0,.57-1.22A1,1,0,0,0,4,1a10,10,0,1,0,14,9.88A1,1,0,0,0,21.64,13Z"/>'; } localStorage.setItem('theme', isLight ? 'light' : 'dark'); updatePageLanguage(); } function changeLanguage(lang) { currentLanguage = lang; localStorage.setItem('language', lang); updatePageLanguage(); } function toggleMobileMenu() { document.getElementById('mobileMenu').classList.toggle('hidden'); } function nextWelcomeStep() { welcomeStep++; if (welcomeStep > 4) { skipWelcome(); return; } document.querySelectorAll('.step-content').forEach(s => s.classList.remove('active')); document.getElementById(`step-${welcomeStep}`)?.classList.add('active'); } function prevWelcomeStep() { if (welcomeStep > 1) { welcomeStep--; document.querySelectorAll('.step-content').forEach(s => s.classList.remove('active')); document.getElementById(`step-${welcomeStep}`)?.classList.add('active'); } } function skipWelcome() { document.getElementById('welcomeModal').classList.remove('active'); localStorage.setItem('welcomeSkipped', 'true'); } function renderModuleList() { const moduleData = [ { id: 'komputasional', icon: '๐Ÿง ', name: 'modul-komputasional' }, { id: 'html', icon: '๐Ÿ—️', name: 'modul-html' }, { id: 'css', icon: '๐ŸŽจ', name: 'modul-css' }, { id: 'python', icon: '๐Ÿ', name: 'modul-python' }, { id: 'java', icon: '☕', name: 'modul-java' }, { id: 'flowchart', icon: '๐Ÿ“Š', name: 'modul-flowchart' } ]; let html = ''; moduleData.forEach(m => { html += `<div class="module-card p-8 rounded-2xl cursor-pointer" onclick="showModuleDetail('${m.id}')"> <div class="flex items-start gap-4 mb-4"> <div class="text-4xl">${m.icon}</div> <div> <h3 class="text-2xl font-bold mb-2" id="modul-${m.id}" style="color: var(--text-primary);">${t(`modul-${m.id}`)}</h3> <p style="color: var(--text-secondary);" class="text-sm">Klik untuk belajar</p> </div> </div> </div>`; }); document.getElementById('modulList').innerHTML = html; } function renderGameList() { let html = ''; games.forEach(g => { html += `<div onclick="startGame('${g.id}')" class="module-card p-8 rounded-2xl text-left cursor-pointer"> <div class="text-4xl mb-4">${g.icon}</div> <h3 class="text-2xl font-bold mb-2" id="${g.name}" style="color: var(--text-primary);">${t(g.name)}</h3> <p style="color: var(--text-secondary);" id="${g.desc}" class="text-sm mb-4">${t(g.desc)}</p> <div class="text-blue-400 font-semibold text-sm">Main →</div> </div>`; }); document.getElementById('gameList').innerHTML = html; } function renderDevList() { let html = ''; developers.forEach(dev => { html += `<div class="developer-card"> <div class="text-6xl mb-2">${dev.avatar}</div> <h4 class="font-bold text-lg" style="color: var(--text-primary);">${dev.name}</h4> <p style="color: var(--text-secondary);" class="text-sm mb-4">${dev.role}</p> <div class="social-links"> <a href="${dev.ig}" target="_blank" rel="noopener noreferrer" title="Instagram" style="background: linear-gradient(45deg, #f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%); color: white;">๐Ÿ“ท</a> </div> </div>`; }); document.getElementById('devList').innerHTML = html; } function renderKreatorList() { let html = ''; youtubeCreators.forEach(creator => { html += `<a href="${creator.url}" target="_blank" rel="noopener noreferrer" class="module-card p-8 rounded-2xl text-center no-underline"> <div class="text-4xl mb-4">${creator.avatar}</div> <h3 class="text-2xl font-bold mb-2" style="color: var(--text-primary);">${creator.name}</h3> <p style="color: var(--text-secondary);" class="text-sm mb-4">${creator.desc}</p> <div class="youtube-link w-full text-center inline-block mb-0"> Kunjungi Channel </div> </a>`; }); document.getElementById('kreatorList').innerHTML = html; } function showModuleDetail(moduleType) { currentModuleText = modules[moduleType] || ''; document.getElementById('modalModuleTitle').textContent = t(`modul-${moduleType}`); document.getElementById('moduleContent').innerHTML = `<div style="white-space: pre-wrap; line-height: 1.8; color: var(--text-secondary); font-size: 1rem;">${currentModuleText}</div>`; document.getElementById('moduleModal').classList.add('active'); } function closeModule() { document.getElementById('moduleModal').classList.remove('active'); } function speakModuleContent() { if ('speechSynthesis' in window && currentModuleText) { const utterance = new SpeechSynthesisUtterance(currentModuleText); utterance.lang = currentLanguage === 'id' ? 'id-ID' : currentLanguage === 'en' ? 'en-US' : 'en'; speechSynthesis.cancel(); speechSynthesis.speak(utterance); } } function startQuizType(type) { currentQuizSet = type === 'benar-salah' ? bsQuestions.slice(0, 20) : mgQuestions.slice(0, 20); currentQuizIndex = 0; quizScore = 0; document.getElementById('quizModalTitle').textContent = type === 'benar-salah' ? t('quiz-bs') : t('quiz-pg'); document.getElementById('totalQuestions').textContent = currentQuizSet.length; document.getElementById('currentPoints').textContent = '0'; renderQuiz(); document.getElementById('quizModal').classList.add('active'); } function renderQuiz() { if (currentQuizIndex >= currentQuizSet.length) { finishQuiz(); return; } const q = currentQuizSet[currentQuizIndex]; let html = `<div class="quiz-question"><p class="font-semibold text-lg mb-6" style="color: var(--text-primary);">${q.q}</p>`; if (q.c !== undefined && typeof q.c === 'boolean') { html += `<label class="quiz-option"><input type="radio" name="answer" value="true"> Benar</label> <label class="quiz-option"><input type="radio" name="answer" value="false"> Salah</label>`; } else { html += q.o.map((opt, i) => `<label class="quiz-option"><input type="radio" name="answer" value="${i}"> ${opt}</label>`).join(''); } html += '</div>'; document.getElementById('quizContent').innerHTML = html; document.getElementById('currentQuestion').textContent = currentQuizIndex + 1; document.getElementById('prevQuizBtn').disabled = currentQuizIndex === 0; document.getElementById('nextQuizBtn').textContent = currentQuizIndex === currentQuizSet.length - 1 ? 'Selesai' : t('next-btn'); } function nextQuiz() { const selected = document.querySelector('input[name="answer"]:checked'); if (!selected) { showToast('Pilih jawaban terlebih dahulu!'); return; } const q = currentQuizSet[currentQuizIndex]; const isCorrect = typeof q.c === 'boolean' ? selected.value === String(q.c) : parseInt(selected.value) === q.c; if (isCorrect) { quizScore += 10; document.getElementById('currentPoints').textContent = quizScore; } currentQuizIndex++; currentQuizIndex >= currentQuizSet.length ? finishQuiz() : renderQuiz(); } function prevQuiz() { if (currentQuizIndex > 0) { currentQuizIndex--; renderQuiz(); } } function finishQuiz() { const percent = Math.round((quizScore / (currentQuizSet.length * 10)) * 100); allQuizScores.push({ score: quizScore, percent: percent, time: new Date().toLocaleTimeString() }); renderGlobalLeaderboard(); document.getElementById('quizContent').innerHTML = ` <div class="text-center py-12"> <h3 class="text-4xl font-bold mb-4" style="color: var(--text-primary);">Quiz Selesai!</h3> <p class="text-5xl font-bold mb-4" style="color: var(--accent);">${percent}%</p> <p style="color: var(--text-secondary);" class="mb-6 text-lg">Skor: ${quizScore} / ${currentQuizSet.length * 10}</p> <button onclick="closeQuiz()" class="modern-btn px-8 py-3 rounded-lg text-white font-semibold">Tutup</button> </div> `; document.getElementById('prevQuizBtn').style.display = 'none'; document.getElementById('nextQuizBtn').style.display = 'none'; } function renderGlobalLeaderboard() { const sorted = allQuizScores.sort((a, b) => b.score - a.score).slice(0, 10); let html = ''; if (sorted.length === 0) { html = '<div style="color: var(--text-secondary);" class="text-center py-4">Belum ada skor</div>'; } else { sorted.forEach((score, idx) => { const medals = ['๐Ÿฅ‡', '๐Ÿฅˆ', '๐Ÿฅ‰', '4️⃣', '5️⃣', '6️⃣', '7️⃣', '8️⃣', '9️⃣', '๐Ÿ”Ÿ']; html += `<div class="leaderboard-item"> <span class="leaderboard-rank">${medals[idx]}</span> <span style="color: var(--text-primary);" class="font-semibold">${score.percent}%</span> <span style="color: var(--text-secondary);">${score.score}/200 Poin</span> <span style="color: var(--text-secondary);">${score.time}</span> </div>`; }); } document.getElementById('globalLeaderboard').innerHTML = html; } function closeQuiz() { document.getElementById('quizModal').classList.remove('active'); } function startGame(gameType) { currentGameType = gameType; currentGameScore = 0; document.getElementById('gameTitle').textContent = t(`game-${gameType}`); document.getElementById('gameScore').textContent = `Skor: 0`; document.getElementById('gameModal').classList.add('active'); if (gameType === 'memory') { startMemoryGame(); } else if (gameType === 'sorting') { startSortingGame(); } else if (gameType === 'snake') { startSnakeGame(); } else if (gameType === 'hangman') { startHangmanGame(); } else if (gameType === 'typing') { startTypingGame(); } else if (gameType === 'color') { startColorMatchGame(); } else if (gameType === 'number') { startNumberSequenceGame(); } else if (gameType === 'logic') { startLogicPuzzleGame(); } else if (gameType === 'quiz') { startSpeedQuizGame(); } else if (gameType === 'flip') { startFlipCardsGame(); } renderGameLeaderboard(); } function startMemoryGame() { const symbols = ['๐Ÿง ', '๐Ÿ’ป', '๐Ÿ“Š', '๐Ÿ”ง']; const cards = [...symbols, ...symbols].sort(() => Math.random() - 0.5); let matched = 0, firstCard = null, firstIdx = null, isChecking = false; let html = '<div class="game-board">'; cards.forEach((card, i) => { html += `<div class="game-card" data-index="${i}" data-symbol="${card}">?</div>`; }); html += '</div>'; document.getElementById('gameContent').innerHTML = html; document.querySelectorAll('.game-card').forEach((card, i) => { card.addEventListener('click', function() { if (isChecking || this.classList.contains('matched') || this.textContent !== '?') return; this.textContent = cards[i]; this.classList.add('active'); if (!firstCard) { firstCard = this; firstIdx = i; } else { isChecking = true; if (cards[i] === cards[firstIdx]) { firstCard.classList.add('matched'); this.classList.add('matched'); matched++; currentGameScore += 10; document.getElementById('gameScore').textContent = `Skor: ${currentGameScore}`; if (matched === symbols.length) { saveGameScore(); showToast('Selesai! Anda menang!'); } } else { setTimeout(() => { firstCard.textContent = '?'; firstCard.classList.remove('active'); this.textContent = '?'; this.classList.remove('active'); firstCard = null; isChecking = false; }, 1000); } firstCard = null; } }); }); } function startSortingGame() { const numbers = Array(8).fill(0).map(() => Math.floor(Math.random() * 100 + 10)); let html = '<p style="color: var(--text-secondary);" class="mb-4">Urutkan angka dari terkecil ke terbesar:</p>'; html += '<div class="flex flex-wrap gap-3 mb-6" id="sortableNumbers">'; numbers.forEach((num, i) => { html += `<button class="game-card w-20 h-20 text-2xl" data-num="${num}">${num}</button>`; }); html += '</div><button onclick="checkSorting()" class="modern-btn px-6 py-3 rounded-lg text-white font-semibold w-full">Periksa</button>'; document.getElementById('gameContent').innerHTML = html; } function checkSorting() { const cards = Array.from(document.querySelectorAll('[data-num]')); const sorted = cards.every((c, i) => i === 0 || parseInt(c.dataset.num) >= parseInt(cards[i-1].dataset.num)); if (sorted) { currentGameScore += 50; document.getElementById('gameScore').textContent = `Skor: ${currentGameScore}`; saveGameScore(); showToast('Benar! Anda menang!'); startSortingGame(); } else { showToast('Salah! Coba lagi'); } } function startSnakeGame() { document.getElementById('gameContent').innerHTML = ` <div style="width: 100%; height: 300px; border: 2px solid var(--accent); background: var(--bg-primary); position: relative; margin-bottom: 1rem; border-radius: 0.5rem;"></div> <button onclick="currentGameScore += 100; saveGameScore(); showToast('Game Selesai!');" class="modern-btn px-6 py-3 rounded-lg text-white font-semibold w-full">Selesai Game</button> `; } function startHangmanGame() { const words = ['INFORMATIKA', 'ALGORITMA', 'JAVASCRIPT', 'DATABASE', 'PROGRAM', 'KOMPUTER', 'DEVELOPER', 'CODING']; const word = words[Math.floor(Math.random() * words.length)]; let guessed = []; let html = `<p style="color: var(--text-secondary);" class="mb-4">Tebak kata informatika:</p> <div style="font-size: 2rem; letter-spacing: 0.5rem; font-weight: bold; color: var(--accent); margin-bottom: 2rem;" id="wordDisplay"> ${word.split('').map(c => guessed.includes(c) ? c : '_').join(' ')} </div> <div class="flex flex-wrap gap-2 mb-4" id="letterButtons">`; 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'.split('').forEach(letter => { html += `<button onclick="guessLetter('${letter}', '${word}')" class="px-2 py-1 rounded text-sm font-bold" style="background: var(--card-bg); border: 1px solid var(--accent); color: var(--text-primary);">${letter}</button>`; }); html += '</div>'; document.getElementById('gameContent').innerHTML = html; } function startTypingGame() { const snippets = ['const x = 10;', 'function hello() {}', 'if (true) {}', 'for (let i = 0; i < 10; i++)', 'let name = "Budi";']; const snippet = snippets[Math.floor(Math.random() * snippets.length)]; document.getElementById('gameContent').innerHTML = ` <p style="color: var(--text-secondary);" class="mb-4">Ketik kode berikut dengan cepat:</p> <div style="background: var(--bg-secondary); padding: 1rem; border-radius: 0.5rem; margin-bottom: 1rem; font-family: monospace; color: var(--accent); border-left: 4px solid var(--accent);">${snippet}</div> <textarea id="typingInput" placeholder="Ketik di sini..." class="input-field h-20" style="resize: vertical;"></textarea> <button onclick="checkTyping('${snippet}')" class="modern-btn px-6 py-3 rounded-lg text-white font-semibold w-full">Periksa</button> `; } window.checkTyping = function(original) { const input = document.getElementById('typingInput').value; if (input === original) { currentGameScore += 50; document.getElementById('gameScore').textContent = `Skor: ${currentGameScore}`; saveGameScore(); showToast('Benar! Lanjutkan ketik code lain'); startTypingGame(); } else { showToast('Salah! Coba lagi'); } }; function startColorMatchGame() { const colors = ['#FF6B6B', '#4ECDC4', '#45B7D1', '#FFA07A', '#98D8C8', '#F7DC6F']; const sequence = []; for (let i = 0; i < 4; i++) { sequence.push(colors[Math.floor(Math.random() * colors.length)]); } let html = '<p style="color: var(--text-secondary);" class="mb-4">Klik warna sesuai urutan:</p><div class="flex flex-wrap gap-4 justify-center mb-4">'; sequence.forEach((color, i) => { html += `<button class="w-20 h-20 rounded-lg" data-color="${color}" onclick="checkColor('${color}')" style="background: ${color}; border: 2px solid var(--accent);"></button>`; }); html += '</div>'; document.getElementById('gameContent').innerHTML = html; } function startNumberSequenceGame() { const numbers = []; for (let i = 0; i < 8; i++) { numbers.push(Math.floor(Math.random() * 100)); } const sorted = [...numbers].sort((a, b) => a - b); let html = '<p style="color: var(--text-secondary);" class="mb-4">Urutkan angka dari terkecil ke terbesar:</p><div class="flex flex-wrap gap-3 justify-center">'; numbers.sort(() => Math.random() - 0.5).forEach(num => { html += `<button class="px-4 py-2 rounded font-bold" style="background: var(--card-bg); border: 1px solid var(--accent); color: var(--text-primary);">${num}</button>`; }); html += '</div>'; document.getElementById('gameContent').innerHTML = html; } function startLogicPuzzleGame() { document.getElementById('gameContent').innerHTML = ` <p style="color: var(--text-secondary);" class="mb-4">Logika: Jika A = 2, B = 4, C = 6, maka D = ?</p> <div class="flex gap-4 flex-wrap justify-center"> <button onclick="checkLogic(8)" class="modern-btn px-6 py-3 rounded-lg text-white font-semibold">8</button> <button onclick="checkLogic(9)" class="modern-btn px-6 py-3 rounded-lg text-white font-semibold">9</button> <button onclick="checkLogic(7)" class="modern-btn px-6 py-3 rounded-lg text-white font-semibold">7</button> <button onclick="checkLogic(10)" class="modern-btn px-6 py-3 rounded-lg text-white font-semibold">10</button> </div> `; } function startSpeedQuizGame() { const quickQuestions = bsQuestions.slice(0, 5); let qIdx = 0; function renderQuestion() { if (qIdx >= quickQuestions.length) { currentGameScore += 50; document.getElementById('gameScore').textContent = `Skor: ${currentGameScore}`; saveGameScore(); showToast('Speed Quiz Selesai!'); return; } const q = quickQuestions[qIdx]; let html = `<p style="color: var(--text-primary);" class="font-bold mb-6">${q.q}</p> <button onclick="speedQuizAnswer(true)" class="modern-btn px-6 py-3 rounded-lg text-white font-semibold mr-2 mb-2 w-full">BENAR</button> <button onclick="speedQuizAnswer(false)" class="modern-btn px-6 py-3 rounded-lg text-white font-semibold w-full">SALAH</button>`; document.getElementById('gameContent').innerHTML = html; } window.speedQuizAnswer = function(answer) { if (answer === quickQuestions[qIdx].c) { currentGameScore += 10; document.getElementById('gameScore').textContent = `Skor: ${currentGameScore}`; } qIdx++; renderQuestion(); }; renderQuestion(); } function startFlipCardsGame() { const cardPairs = [ { q: 'HTML', a: 'HyperText Markup Language' }, { q: 'CSS', a: 'Cascading Style Sheets' }, { q: 'JS', a: 'JavaScript' }, { q: 'DB', a: 'Database' } ]; let html = '<p style="color: var(--text-secondary);" class="mb-4">Klik kartu untuk melihat jawabannya:</p><div class="flex flex-wrap gap-4 justify-center">'; cardPairs.forEach((pair, i) => { html += `<button class="game-card w-24 h-24" data-index="${i}" onclick="flipCard(${i})">${pair.q}</button>`; }); html += '</div>'; document.getElementById('gameContent').innerHTML = html; } function saveGameScore() { if (!gameScores[currentGameType]) gameScores[currentGameType] = []; gameScores[currentGameType].push({ score: currentGameScore, time: new Date().toLocaleTimeString() }); } function renderGameLeaderboard() { let html = ''; if (!gameScores[currentGameType] || gameScores[currentGameType].length === 0) { html = '<div style="color: var(--text-secondary);" class="text-center py-4">Belum ada skor untuk game ini</div>'; } else { const sorted = gameScores[currentGameType].sort((a, b) => b.score - a.score).slice(0, 5); sorted.forEach((score, idx) => { const medals = ['๐Ÿฅ‡', '๐Ÿฅˆ', '๐Ÿฅ‰', '4️⃣', '5️⃣']; html += `<div class="leaderboard-item"> <span class="leaderboard-rank">${medals[idx]}</span> <span style="color: var(--text-primary);">Skor: ${score.score}</span> <span style="color: var(--text-secondary);">${score.time}</span> </div>`; }); } document.getElementById('gameLeaderboard').innerHTML = html; } function closeGame() { document.getElementById('gameModal').classList.remove('active'); } function showNotesTab() { let html = `<div> <label class="block text-sm font-medium mb-2" id="label-name" style="color: var(--text-primary);">Nama Anda:</label> <input type="text" id="userName" placeholder="Masukkan nama Anda" class="input-field"> </div> <div> <label class="block text-sm font-medium mb-2" id="label-email" style="color: var(--text-primary);">Email:</label> <input type="email" id="userEmail" placeholder="Masukkan email Anda" class="input-field"> </div> <div> <label class="block text-sm font-medium mb-2" id="label-note" style="color: var(--text-primary);">Catatan Belajar:</label> <textarea id="noteText" placeholder="Tulis catatan..." class="input-field h-32" style="resize: vertical;"></textarea> </div> <button onclick="saveNote()" class="modern-btn px-6 py-3 rounded-lg text-white font-semibold w-full">Bagikan Catatan</button>`; document.getElementById('notesContent').innerHTML = html; document.getElementById('notesModal').classList.add('active'); } function closeNotes() { document.getElementById('notesModal').classList.remove('active'); } async function saveNote() { const username = document.getElementById('userName').value; const email = document.getElementById('userEmail').value; const notes = document.getElementById('noteText').value; if (!username || !email || !notes) { showToast('Isi semua field!'); return; } const noteData = { username, email, notes, category: 'general', timestamp: new Date().toISOString() }; const result = await window.dataSdk.create(noteData); if (result.isOk) { showToast('Catatan berhasil dibagikan!'); closeNotes(); } else { showToast('Gagal menyimpan catatan'); } } function renderAllNotes() { let html = ''; if (userDataList.length === 0) { html = '<div class="text-center py-12" style="color: var(--text-secondary);"><p>Belum ada catatan yang dibagikan</p></div>'; } else { userDataList.forEach(note => { html += `<div class="module-card p-6 rounded-lg"> <h4 class="font-bold mb-2" style="color: var(--text-primary);">${note.username}</h4> <p style="color: var(--text-secondary);" class="text-sm mb-2">${note.notes}</p> <p style="color: var(--text-secondary);" class="text-xs">${note.email}</p> </div>`; }); } document.getElementById('allNotesList').innerHTML = html; } function divideGroups() { const input = document.getElementById('membersList').value.trim(); const groups = parseInt(document.getElementById('totalGroups').value); if (!input || groups < 1) { showToast('Isi daftar peserta dan jumlah kelompok!'); return; } const members = input.split(/,|\n/).map(m => m.trim()).filter(m => m); if (members.length < groups) { showToast('Jumlah peserta harus lebih banyak dari kelompok!'); return; } const shuffled = members.sort(() => Math.random() - 0.5); const perGroup = Math.floor(shuffled.length / groups); const remainder = shuffled.length % groups; let html = ''; for (let i = 0; i < groups; i++) { const size = perGroup + (i < remainder ? 1 : 0); const groupMembers = shuffled.splice(0, size); html += `<div class="module-card p-6 rounded-lg"> <h4 class="font-bold mb-3" style="color: var(--accent);">Kelompok ${i + 1}</h4> <ul class="text-sm" style="color: var(--text-secondary);"> ${groupMembers.map(m => `<li>• ${m}</li>`).join('')} </ul> </div>`; } document.getElementById('groupsList').innerHTML = html; document.getElementById('groupResult').classList.remove('hidden'); } function renderBukuList() { let html = ''; eBooks.forEach(book => { html += `<div class="module-card p-6 rounded-2xl"> <div class="text-4xl mb-4">${book.icon}</div> <h4 class="font-bold text-lg mb-2" style="color: var(--text-primary);">${book.title}</h4> <p style="color: var(--text-secondary);" class="text-sm mb-3">${book.desc}</p> <p style="color: var(--text-secondary);" class="text-xs mb-4">Penulis: ${book.author}</p> <a href="${book.link}" target="_blank" rel="noopener noreferrer" class="book-link">Baca →</a> </div>`; }); document.getElementById('bukuList').innerHTML = html; } function showToast(msg) { const toast = document.createElement('div'); toast.className = 'toast'; toast.textContent = msg; document.body.appendChild(toast); setTimeout(() => toast.remove(), 3000); } // Initialize initDataSDK(); renderModuleList(); renderGameList(); renderBukuList(); renderDevList(); renderKreatorList(); updatePageLanguage(); if (localStorage.getItem('theme') === 'light') { document.documentElement.classList.add('light-mode'); toggleTheme(); } if (!localStorage.getItem('welcomeSkipped')) { document.getElementById('welcomeModal').classList.add('active'); } if (localStorage.getItem('language')) { currentLanguage = localStorage.getItem('language'); document.getElementById('languageSelect').value = currentLanguage; updatePageLanguage(); } </script> <script>(function(){function c(){var b=a.contentDocument||a.contentWindow.document;if(b){var d=b.createElement('script');d.innerHTML="window.__CF$cv$params={r:'9d1e58560772e794',t:'MTc3MTc2MTg1Ny4wMDAwMDA='};var a=document.createElement('script');a.nonce='';a.src='/cdn-cgi/challenge-platform/scripts/jsd/main.js';document.getElementsByTagName('head')[0].appendChild(a);";b.getElementsByTagName('head')[0].appendChild(d)}}if(document.body){var a=document.createElement('iframe');a.height=1;a.width=1;a.style.position='absolute';a.style.top=0;a.style.left=0;a.style.border='none';a.style.visibility='hidden';document.body.appendChild(a);if('loading'!==document.readyState)c();else if(window.addEventListener)document.addEventListener('DOMContentLoaded',c);else{var e=document.onreadystatechange||function(){};document.onreadystatechange=function(b){e(b);'loading'!==document.readyState&&(document.onreadystatechange=e,c())}}}})();</script></body> </html>