Calvados : Februari 2026

<!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&family=Montserrat:wght@400;500;600;700&family=Space+Grotesk:wght@400;600;700&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"> <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"> <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> <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> <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> <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> <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"> <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> <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> <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> <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> <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> <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> <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> <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> <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> <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> <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> <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> <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> <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> <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> <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> <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> <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> <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 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>

Minggu, 22 Februari 2026

Website