Materi yang Dipelajari
- Pengenalan dunia AI dan aplikasi Python dalam AI
- Career paths: Python Developer, Data Analyst, AI Enthusiast
- Overview tools dan ecosystem Python untuk AI
- Setup development environment (VS Code, Jupyter)
- Konfigurasi GitHub Codespace dan GitHub Copilot
- Roadmap bootcamp dan project-based learning approach
Tools & Platform
Materi yang Dipelajari
- Syntax dasar Python dan struktur
- Deklarasi dan manajemen variable
- Teknik manipulasi string
- Pembuatan dan implementasi function
- Control flow dengan conditional statements
- Best practices untuk clean Python code
Tools & Platform
Materi yang Dipelajari
- Instalasi dan setup Streamlit
- Membuat komponen UI (buttons, inputs, images)
- Layout management dan design principles
- Interactive widgets dan handling user input
- Menjalankan dan deploy aplikasi Streamlit
- Best practices untuk user-friendly interfaces
Tools & Platform
📋 Deskripsi Project
Mini Quiz App yang dibangun dengan Streamlit untuk membantu users menemukan profesi yang sesuai berdasarkan pilihan mereka. Fitur: Multiple choice questions dengan radio buttons,
automated scoring system, attractive UI dengan images, dan result display button.
Objektif Pembelajaran
- Menerapkan fundamental Python dalam project nyata
- Implementasi komponen dan interactivity Streamlit
- Membuat user interfaces yang engaging
- Membangun automated scoring algorithms
- Presentasi dan showcase completed work
- Deadline: 18 Juli 2025 (23:59)
Materi yang Dipelajari
- Dictionaries dan Lists untuk manipulasi data
- Teknik iterasi dan optimasi loop
- Konsep Object-Oriented Programming
- Implementasi class dan methods
- Tuples dan nested data structures
- Eksplorasi dan integrasi AI library
Tools & Platform
Materi yang Dipelajari
- Pengenalan AI models dan architectures
- Eksplorasi Hugging Face ecosystem
- Pemahaman pre-trained models
- Pemilihan model untuk specific tasks
- Teknik implementasi dan integrasi
- Optimasi performance dan fine-tuning basics
Tools & Platform
🤖 Deskripsi Project
Pengembangan aplikasi AI-powered yang mengintegrasikan pre-trained models dari Hugging Face. Project ini fokus pada implementasi real AI functionality dan practical application
development.
Objektif Pembelajaran
- Implementasi core AI functionality dalam applications
- Integrasi Hugging Face models secara efektif
- Membangun user-friendly AI interfaces
- Optimasi AI model performance
- Presentasi completed AI projects secara profesional
- Showcase AI capabilities dan use cases
Materi yang Dipelajari
- Fundamental Natural Language Processing
- Pemahaman arsitektur Transformer
- Eksplorasi model BERT, GPT, dan T5
- Text processing dan tokenization
- Implementasi practical NLP tasks
- Model fine-tuning untuk domain spesifik
Tools & Platform
Materi yang Dipelajari
- Strategi production deployment
- Integrasi cloud platform
- Model serving dan pengembangan API
- Performance monitoring dan optimasi
- Scaling AI applications secara efektif
- Best practices untuk production readiness
Tools & Platform
🎯 Final Project Goals
Comprehensive AI project yang mengintegrasikan semua konsep yang dipelajari: Python fundamentals, UI development, AI models, NLP, dan deployment. Showcase kemampuan AI programming
yang lengkap.
Objektif Pembelajaran
- Integrasi semua konsep bootcamp dalam single project
- Demonstrasi advanced AI implementation skills
- Menerima expert guidance dan feedback
- Membangun portfolio-worthy AI application
- Persiapan untuk real-world AI development challenges
- Showcase completed project secara profesional
<!doctype html>
<html lang="id" class="no-js">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>AI Python Bootcamp - Interactive Syllabus</title>
<style>
body {
font-family: 'Inter', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
margin: 0;
padding: 0;
background: #f8fafc;
color: #1e293b;
line-height: 1.6;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 20px;
}
.main-content {
display: grid;
grid-template-columns: 280px 1fr;
gap: 30px;
}
.sidebar {
background: white;
border-radius: 12px;
padding: 20px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
border: 1px solid #e2e8f0;
height: fit-content;
position: sticky;
top: 20px;
}
.sidebar h3 {
margin: 0 0 20px 0;
font-size: 1.3em;
color: #1e293b;
}
.module-list {
list-style: none;
padding: 0;
margin: 0;
}
.module-item {
padding: 12px 15px;
margin-bottom: 8px;
border-radius: 8px;
cursor: pointer;
transition: all 0.2s ease;
border: 2px solid transparent;
font-size: 0.95em;
}
.module-item:hover {
background: #f1f5f9;
border-color: #e2e8f0;
}
.module-item.active {
background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
color: white;
border-color: #3b82f6;
}
.content-area {
background: white;
border-radius: 12px;
padding: 30px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
border: 1px solid #e2e8f0;
min-height: 500px;
}
.module-content {
display: none !important;
visibility: hidden !important;
opacity: 0 !important;
height: 0 !important;
overflow: hidden !important;
}
.module-content.active {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
height: auto !important;
overflow: visible !important;
animation: fadeIn 0.3s ease;
}
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.module-header {
margin-bottom: 25px;
padding-bottom: 20px;
border-bottom: 2px solid #f1f5f9;
}
.module-title {
font-size: 1.8em;
font-weight: 700;
color: #1e293b;
margin: 0 0 10px 0;
}
.module-description {
font-size: 1.05em;
color: #64748b;
line-height: 1.7;
}
.module-details {
display: grid;
gap: 25px;
}
.detail-section {
background: #f8fafc;
padding: 20px;
border-radius: 10px;
border-left: 4px solid #3b82f6;
}
.detail-title {
font-weight: 600;
color: #374151;
margin-bottom: 15px;
font-size: 1.1em;
}
.topic-list {
list-style: none;
padding: 0;
margin: 0;
}
.topic-item {
padding: 8px 0;
border-bottom: 1px solid #e5e7eb;
color: #4b5563;
}
.topic-item:last-child {
border-bottom: none;
}
.tools-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
gap: 15px;
margin-top: 15px;
}
.tool-item {
display: flex;
flex-direction: column;
align-items: center;
padding: 15px;
background: white;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
border: 1px solid #e5e7eb;
transition: transform 0.2s ease;
}
.tool-item:hover {
transform: translateY(-2px);
}
.tool-icon {
width: 40px;
height: 40px;
margin-bottom: 8px;
border-radius: 6px;
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
color: white;
font-size: 0.9em;
}
.tool-name {
font-size: 0.85em;
color: #374151;
text-align: center;
}
.project-section {
background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
padding: 20px;
border-radius: 10px;
border-left: 4px solid #0ea5e9;
margin-top: 20px;
}
.project-title {
font-weight: 600;
color: #0369a1;
margin-bottom: 10px;
}
.project-description {
color: #0369a1;
font-size: 0.95em;
}
.register-btn {
background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
color: white;
padding: 15px 30px;
border: none;
border-radius: 8px;
font-size: 1.1em;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
display: block;
margin: 30px auto 0;
text-decoration: none;
text-align: center;
}
.register-btn:hover {
transform: translateY(-2px);
box-shadow: 0 10px 25px rgba(59, 130, 246, 0.3);
}
@media (max-width: 768px) {
.main-content {
grid-template-columns: 1fr;
}
.sidebar {
position: static;
order: 2;
}
.content-area {
order: 1;
}
}
</style>
</head>
<body>
<div class="container">
<div class="main-content">
<div class="sidebar">
<h3>Modul Pembelajaran</h3>
<ul class="module-list">
<li class="module-item active" data-module="motivation">Onboarding & Setup</li>
<li class="module-item" data-module="python-basics">Fundamental Python</li>
<li class="module-item" data-module="streamlit">Membangun UI dengan Streamlit</li>
<li class="module-item" data-module="project1">Project Seru #1</li>
<li class="module-item" data-module="data-structures">Data Structures & OOP</li>
<li class="module-item" data-module="ai-models">Model AI & Hugging Face</li>
<li class="module-item" data-module="project2">Project Seru #2</li>
<li class="module-item" data-module="nlp">NLP & Transformers</li>
<li class="module-item" data-module="deployment">Deployment Production</li>
<li class="module-item" data-module="final-project">Project Final</li>
</ul>
<a href="#" class="register-btn">Daftar Sekarang</a>
</div>
<div class="content-area">
<div class="module-content active" id="motivation">
<div class="module-header">
<h2 class="module-title">Onboarding & Setup Teknis</h2>
<p class="module-description">
Pengenalan dunia AI dan Python programming. Memahami berbagai aplikasi AI, career opportunities, dan setup development environment untuk memulai journey programming dengan Python.
</p>
</div>
<div class="module-details">
<div class="detail-section">
<h3 class="detail-title">Materi yang Dipelajari</h3>
<ul class="topic-list">
<li class="topic-item">Pengenalan dunia AI dan aplikasi Python dalam AI</li>
<li class="topic-item">Career paths: Python Developer, Data Analyst, AI Enthusiast</li>
<li class="topic-item">Overview tools dan ecosystem Python untuk AI</li>
<li class="topic-item">Setup development environment (VS Code, Jupyter)</li>
<li class="topic-item">Konfigurasi GitHub Codespace dan GitHub Copilot</li>
<li class="topic-item">Roadmap bootcamp dan project-based learning approach</li>
</ul>
</div>
<div class="detail-section">
<h3 class="detail-title">Tools & Platform</h3>
<div class="tools-grid">
<div class="tool-item">
<div class="tool-icon" style="background: #007acc">VS</div>
<div class="tool-name">VS Code</div>
</div>
<div class="tool-item">
<div class="tool-icon" style="background: #f37626">JP</div>
<div class="tool-name">Jupyter</div>
</div>
<div class="tool-item">
<div class="tool-icon" style="background: #181717">GH</div>
<div class="tool-name">GitHub</div>
</div>
<div class="tool-item">
<div class="tool-icon" style="background: #181717">CP</div>
<div class="tool-name">Copilot</div>
</div>
</div>
</div>
</div>
</div>
<div class="module-content" id="python-basics">
<div class="module-header">
<h2 class="module-title">Fundamental Python</h2>
<p class="module-description">
Kuasai dasar-dasar pemrograman Python yang essential untuk pengembangan AI. Dari syntax basics hingga konsep advanced seperti functions dan decision making.
</p>
</div>
<div class="module-details">
<div class="detail-section">
<h3 class="detail-title">Materi yang Dipelajari</h3>
<ul class="topic-list">
<li class="topic-item">Syntax dasar Python dan struktur</li>
<li class="topic-item">Deklarasi dan manajemen variable</li>
<li class="topic-item">Teknik manipulasi string</li>
<li class="topic-item">Pembuatan dan implementasi function</li>
<li class="topic-item">Control flow dengan conditional statements</li>
<li class="topic-item">Best practices untuk clean Python code</li>
</ul>
</div>
<div class="detail-section">
<h3 class="detail-title">Tools & Platform</h3>
<div class="tools-grid">
<div class="tool-item">
<div class="tool-icon" style="background: #3776ab">PY</div>
<div class="tool-name">Python</div>
</div>
<div class="tool-item">
<div class="tool-icon" style="background: #f37626">JP</div>
<div class="tool-name">Jupyter</div>
</div>
<div class="tool-item">
<div class="tool-icon" style="background: #4285f4">CL</div>
<div class="tool-name">Colab</div>
</div>
<div class="tool-item">
<div class="tool-icon" style="background: #181717">CP</div>
<div class="tool-name">Copilot</div>
</div>
</div>
</div>
</div>
</div>
<div class="module-content" id="streamlit">
<div class="module-header">
<h2 class="module-title">Membangun UI dengan Streamlit</h2>
<p class="module-description">
Pelajari cara membuat aplikasi web interaktif untuk showcase project AI. Streamlit memungkinkan rapid prototyping dan deployment aplikasi Python dengan mudah.
</p>
</div>
<div class="module-details">
<div class="detail-section">
<h3 class="detail-title">Materi yang Dipelajari</h3>
<ul class="topic-list">
<li class="topic-item">Instalasi dan setup Streamlit</li>
<li class="topic-item">Membuat komponen UI (buttons, inputs, images)</li>
<li class="topic-item">Layout management dan design principles</li>
<li class="topic-item">Interactive widgets dan handling user input</li>
<li class="topic-item">Menjalankan dan deploy aplikasi Streamlit</li>
<li class="topic-item">Best practices untuk user-friendly interfaces</li>
</ul>
</div>
<div class="detail-section">
<h3 class="detail-title">Tools & Platform</h3>
<div class="tools-grid">
<div class="tool-item">
<div class="tool-icon" style="background: #ff4b4b">ST</div>
<div class="tool-name">Streamlit</div>
</div>
<div class="tool-item">
<div class="tool-icon" style="background: #3776ab">PY</div>
<div class="tool-name">Python</div>
</div>
<div class="tool-item">
<div class="tool-icon" style="background: #4285f4">CL</div>
<div class="tool-name">Colab</div>
</div>
<div class="tool-item">
<div class="tool-icon" style="background: #430098">HR</div>
<div class="tool-name">Heroku</div>
</div>
</div>
</div>
</div>
</div>
<div class="module-content" id="project1">
<div class="module-header">
<h2 class="module-title">Fun Project #1: Mini Quiz App</h2>
<p class="module-description">Hands-on project development untuk implement semua Python skills yang sudah dipelajari. Build quiz app dengan Streamlit yang interactive dan engaging.</p>
</div>
<div class="module-details">
<div class="project-section">
<div class="project-title">📋 Deskripsi Project</div>
<div class="project-description">
Mini Quiz App yang dibangun dengan Streamlit untuk membantu users menemukan profesi yang sesuai berdasarkan pilihan mereka. Fitur: Multiple choice questions dengan radio buttons,
automated scoring system, attractive UI dengan images, dan result display button.
</div>
</div>
<div class="detail-section">
<h3 class="detail-title">Objektif Pembelajaran</h3>
<ul class="topic-list">
<li class="topic-item">Menerapkan fundamental Python dalam project nyata</li>
<li class="topic-item">Implementasi komponen dan interactivity Streamlit</li>
<li class="topic-item">Membuat user interfaces yang engaging</li>
<li class="topic-item">Membangun automated scoring algorithms</li>
<li class="topic-item">Presentasi dan showcase completed work</li>
<li class="topic-item">Deadline: 18 Juli 2025 (23:59)</li>
</ul>
</div>
</div>
</div>
<div class="module-content" id="data-structures">
<div class="module-header">
<h2 class="module-title">Data Structures & OOP</h2>
<p class="module-description">Deep dive into advanced Python concepts yang essential untuk AI development. Master data structures, loops, dan Object-Oriented Programming.</p>
</div>
<div class="module-details">
<div class="detail-section">
<h3 class="detail-title">Materi yang Dipelajari</h3>
<ul class="topic-list">
<li class="topic-item">Dictionaries dan Lists untuk manipulasi data</li>
<li class="topic-item">Teknik iterasi dan optimasi loop</li>
<li class="topic-item">Konsep Object-Oriented Programming</li>
<li class="topic-item">Implementasi class dan methods</li>
<li class="topic-item">Tuples dan nested data structures</li>
<li class="topic-item">Eksplorasi dan integrasi AI library</li>
</ul>
</div>
<div class="detail-section">
<h3 class="detail-title">Tools & Platform</h3>
<div class="tools-grid">
<div class="tool-item">
<div class="tool-icon" style="background: #3776ab">PY</div>
<div class="tool-name">Python</div>
</div>
<div class="tool-item">
<div class="tool-icon" style="background: #013243">NP</div>
<div class="tool-name">NumPy</div>
</div>
<div class="tool-item">
<div class="tool-icon" style="background: #150458">PD</div>
<div class="tool-name">Pandas</div>
</div>
<div class="tool-item">
<div class="tool-icon" style="background: #4285f4">CL</div>
<div class="tool-name">Colab</div>
</div>
</div>
</div>
</div>
</div>
<div class="module-content" id="ai-models">
<div class="module-header">
<h2 class="module-title">AI Models & Hugging Face</h2>
<p class="module-description">Explore dunia AI models dan Hugging Face ecosystem. Learn to understand dan implement pre-trained models untuk various AI tasks.</p>
</div>
<div class="module-details">
<div class="detail-section">
<h3 class="detail-title">Materi yang Dipelajari</h3>
<ul class="topic-list">
<li class="topic-item">Pengenalan AI models dan architectures</li>
<li class="topic-item">Eksplorasi Hugging Face ecosystem</li>
<li class="topic-item">Pemahaman pre-trained models</li>
<li class="topic-item">Pemilihan model untuk specific tasks</li>
<li class="topic-item">Teknik implementasi dan integrasi</li>
<li class="topic-item">Optimasi performance dan fine-tuning basics</li>
</ul>
</div>
<div class="detail-section">
<h3 class="detail-title">Tools & Platform</h3>
<div class="tools-grid">
<div class="tool-item">
<div class="tool-icon" style="background: #ff9500">HF</div>
<div class="tool-name">Hugging Face</div>
</div>
<div class="tool-item">
<div class="tool-icon" style="background: #ff6f00">TF</div>
<div class="tool-name">TensorFlow</div>
</div>
<div class="tool-item">
<div class="tool-icon" style="background: #ee4c2c">PT</div>
<div class="tool-name">PyTorch</div>
</div>
<div class="tool-item">
<div class="tool-icon" style="background: #3776ab">PY</div>
<div class="tool-name">Python</div>
</div>
</div>
</div>
</div>
</div>
<div class="module-content" id="project2">
<div class="module-header">
<h2 class="module-title">Fun Project #2: AI-Powered Application</h2>
<p class="module-description">Advanced project development session focusing pada implementing core AI functionality menggunakan learned concepts dari AI models dan Hugging Face.</p>
</div>
<div class="module-details">
<div class="project-section">
<div class="project-title">🤖 Deskripsi Project</div>
<div class="project-description">
Pengembangan aplikasi AI-powered yang mengintegrasikan pre-trained models dari Hugging Face. Project ini fokus pada implementasi real AI functionality dan practical application
development.
</div>
</div>
<div class="detail-section">
<h3 class="detail-title">Objektif Pembelajaran</h3>
<ul class="topic-list">
<li class="topic-item">Implementasi core AI functionality dalam applications</li>
<li class="topic-item">Integrasi Hugging Face models secara efektif</li>
<li class="topic-item">Membangun user-friendly AI interfaces</li>
<li class="topic-item">Optimasi AI model performance</li>
<li class="topic-item">Presentasi completed AI projects secara profesional</li>
<li class="topic-item">Showcase AI capabilities dan use cases</li>
</ul>
</div>
</div>
</div>
<div class="module-content" id="nlp">
<div class="module-header">
<h2 class="module-title">NLP Models & Transformers</h2>
<p class="module-description">
Advanced exploration of Natural Language Processing models dan transformer architectures. Focus pada practical implementation untuk real-world NLP tasks.
</p>
</div>
<div class="module-details">
<div class="detail-section">
<h3 class="detail-title">Materi yang Dipelajari</h3>
<ul class="topic-list">
<li class="topic-item">Fundamental Natural Language Processing</li>
<li class="topic-item">Pemahaman arsitektur Transformer</li>
<li class="topic-item">Eksplorasi model BERT, GPT, dan T5</li>
<li class="topic-item">Text processing dan tokenization</li>
<li class="topic-item">Implementasi practical NLP tasks</li>
<li class="topic-item">Model fine-tuning untuk domain spesifik</li>
</ul>
</div>
<div class="detail-section">
<h3 class="detail-title">Tools & Platform</h3>
<div class="tools-grid">
<div class="tool-item">
<div class="tool-icon" style="background: #ff9500">HF</div>
<div class="tool-name">Transformers</div>
</div>
<div class="tool-item">
<div class="tool-icon" style="background: #10a37f">OA</div>
<div class="tool-name">OpenAI</div>
</div>
<div class="tool-item">
<div class="tool-icon" style="background: #ee4c2c">PT</div>
<div class="tool-name">PyTorch</div>
</div>
<div class="tool-item">
<div class="tool-icon" style="background: #f37626">TK</div>
<div class="tool-name">Tokenizers</div>
</div>
</div>
</div>
</div>
</div>
<div class="module-content" id="deployment">
<div class="module-header">
<h2 class="module-title">Production Deployment</h2>
<p class="module-description">Learn techniques dan best practices untuk deploying AI models dan applications dalam production environments. From development to live deployment.</p>
</div>
<div class="module-details">
<div class="detail-section">
<h3 class="detail-title">Materi yang Dipelajari</h3>
<ul class="topic-list">
<li class="topic-item">Strategi production deployment</li>
<li class="topic-item">Integrasi cloud platform</li>
<li class="topic-item">Model serving dan pengembangan API</li>
<li class="topic-item">Performance monitoring dan optimasi</li>
<li class="topic-item">Scaling AI applications secara efektif</li>
<li class="topic-item">Best practices untuk production readiness</li>
</ul>
</div>
<div class="detail-section">
<h3 class="detail-title">Tools & Platform</h3>
<div class="tools-grid">
<div class="tool-item">
<div class="tool-icon" style="background: #ff4b4b">ST</div>
<div class="tool-name">Streamlit</div>
</div>
<div class="tool-item">
<div class="tool-icon" style="background: #430098">HR</div>
<div class="tool-name">Heroku</div>
</div>
<div class="tool-item">
<div class="tool-icon" style="background: #ff9900">AWS</div>
<div class="tool-name">AWS</div>
</div>
<div class="tool-item">
<div class="tool-icon" style="background: #181717">GH</div>
<div class="tool-name">GitHub</div>
</div>
</div>
</div>
</div>
</div>
<div class="module-content" id="final-project">
<div class="module-header">
<h2 class="module-title">Final Project Consultation</h2>
<p class="module-description">
Guided session untuk final project development dengan support dan feedback untuk complex AI implementations. Capstone project yang showcase semua skills.
</p>
</div>
<div class="module-details">
<div class="project-section">
<div class="project-title">🎯 Final Project Goals</div>
<div class="project-description">
Comprehensive AI project yang mengintegrasikan semua konsep yang dipelajari: Python fundamentals, UI development, AI models, NLP, dan deployment. Showcase kemampuan AI programming
yang lengkap.
</div>
</div>
<div class="detail-section">
<h3 class="detail-title">Objektif Pembelajaran</h3>
<ul class="topic-list">
<li class="topic-item">Integrasi semua konsep bootcamp dalam single project</li>
<li class="topic-item">Demonstrasi advanced AI implementation skills</li>
<li class="topic-item">Menerima expert guidance dan feedback</li>
<li class="topic-item">Membangun portfolio-worthy AI application</li>
<li class="topic-item">Persiapan untuk real-world AI development challenges</li>
<li class="topic-item">Showcase completed project secara profesional</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function () {
setTimeout(function () {
const sidebar = document.querySelectorAll('.module-item');
const contents = document.querySelectorAll('.module-content');
function hideAllContent() {
contents.forEach(content => {
content.style.display = 'none';
content.style.visibility = 'hidden';
content.classList.remove('active');
content.hidden = true;
});
}
function showContent(moduleId) {
hideAllContent();
const target = document.getElementById(moduleId);
if (target) {
target.style.display = 'block';
target.style.visibility = 'visible';
target.classList.add('active');
target.hidden = false;
}
}
function updateSidebar(clickedItem) {
sidebar.forEach(item => item.classList.remove('active'));
clickedItem.classList.add('active');
}
// Initialize
showContent('motivation');
// Add click handlers
sidebar.forEach(item => {
item.addEventListener('click', function (e) {
e.preventDefault();
e.stopPropagation();
const moduleId = this.getAttribute('data-module');
showContent(moduleId);
updateSidebar(this);
});
});
}, 100);
});
</script>
</body>
</html>