# Buku Pintar — Layout Template Creation Skill (v2.0)

## Overview
Create custom visual layout templates for the Buku Pintar interactive learning platform. Each template is a pure CSS override file that changes appearance without modifying the engine.

## File Structure
```
./layout/<template-name>/
  └── index.html        ← CSS overrides wrapped in <style> tags
```

## How It Works
1. `bukupintar.html` checks `design.json → layouts → items` for the active layout
2. If the active layout has a `path` (e.g., `"./layout/floating"`), the engine fetches `<path>/index.html`
3. All `<style>` content is extracted and injected into the page HEAD as `<style id="bp-layout-css">`
4. CSS loads AFTER base styles, so it overrides them
5. The preloader covers everything until layout CSS is fully loaded — no flash of default styles

## Creating a New Template

### Step 1 — Copy the Default Template
Start from `./layout/default/index.html` which documents every overridable selector.

### Step 2 — Uncomment & Modify Only What You Need
The default template has all selectors commented out. Only include styles you want to change.

### Step 3 — Register in design.json
```json
{
  "layouts": {
    "items": [
      { "id": "default", "name": "Klasik", "path": "", "active": false },
      { "id": "my-theme", "name": "My Theme", "path": "./layout/my-theme", "description": "Custom look", "active": true }
    ]
  }
}
```

### Step 4 — Test
Reload `bukupintar.html`. The engine loads your layout CSS automatically.

## CSS Variables (Theme-Aware)
Always use CSS variables so your template works in both light and dark mode:

| Variable | Purpose | Light Default | Dark Default |
|----------|---------|---------------|--------------|
| `--bp-primary` | Brand color | `#0d9488` | `#2dd4bf` |
| `--bp-primary-light` | Light brand | `#5eead4` | `#5eead4` |
| `--bp-primary-dark` | Dark brand | `#0f766e` | `#0d9488` |
| `--bp-secondary` | Secondary | `#f59e0b` | `#fbbf24` |
| `--bp-accent` | Accent | `#6366f1` | `#818cf8` |
| `--bp-success` | Success | `#10b981` | `#34d399` |
| `--bp-danger` | Danger | `#ef4444` | `#f87171` |
| `--bp-surface` | Card/panel bg | `#ffffff` | `#1e293b` |
| `--bp-text` | Primary text | `#0f172a` | `#f1f5f9` |
| `--bp-text2` | Secondary text | `#475569` | `#94a3b8` |
| `--bp-text3` | Muted text | `#94a3b8` | `#64748b` |
| `--bp-border` | Borders | `#e2e8f0` | `#334155` |
| `--bp-radius` | Border radius | `1rem` | `1rem` |
| `--bp-sidebar-w` | Sidebar width | `14.5rem` | `14.5rem` |
| `--bp-shadow` | Box shadow | `0 .25rem 1.5rem rgba(0,0,0,.08)` | — |
| `--bp-shadow-lg` | Large shadow | `0 .75rem 3rem rgba(0,0,0,.12)` | — |

## Complete Selector Reference

### Preloader
```css
#bp-preloader              /* Full-screen loading overlay (z-index: 10000) */
.bp-preloader-spinner      /* Spinner circle */
```

### Structure
```css
#app                       /* Main app wrapper (z-index: 3) */
.bp-sidebar                /* Left sidebar (fixed, z-index: 50) */
.bp-sidebar.collapsed      /* Sidebar collapsed state */
.bp-sidebar-header         /* Sidebar header (gradient bg) */
.bp-nav-chapter            /* Chapter headers (clickable, fa-folder icon) */
.bp-nav-chapter.active     /* Active chapter */
.bp-nav-item               /* Topic nav items */
.bp-nav-item.active        /* Currently selected topic */
.bp-nav-item.completed     /* Completed topic */
.bp-nav-dot                /* Status dot on nav item */
.bp-main                   /* Main content wrapper (margin-left: sidebar) */
.bp-topbar                 /* Top bar (sticky/fixed, z-index: 40) */
.bp-topbar-actions         /* Action buttons container in topbar */
.bp-breadcrumb             /* Breadcrumb trail */
.bp-breadcrumb a           /* Breadcrumb links */
.bp-breadcrumb .sep        /* Breadcrumb separator */
.bp-sidebar-btn            /* Hamburger toggle button */
.bp-sidebar-toggle         /* Mobile floating toggle button */
.btn-icon                  /* Icon buttons in topbar */
.bp-content                /* Content area inside .bp-main */
```

### Home Page
```css
.subject-intro             /* Subject introduction card */
.subject-intro-icon        /* Gradient icon circle */
.subject-intro-text        /* Text area in intro card */
.subject-intro-meta        /* Stats row (chapters, topics, pages, questions) */
.tut-play-btn              /* Tutorial replay button */
```

### Topic Separators
```css
.topic-separator           /* Chapter separator wrapper */
.topic-separator-line      /* Horizontal line */
.topic-separator-label     /* "BAB 1: ..." label */
```

### Topic Cards
```css
.topic-grid                /* CSS grid container */
.topic-card                /* Card with image + body */
.topic-card-img            /* Image area (8.5rem default) */
.topic-icon                /* SVG/icon inside topic-card-img */
.topic-card-body           /* Text + progress area */
.topic-num                 /* "Topik 1.1" badge */
.topic-progress            /* Progress bar track */
.topic-progress-bar        /* Progress bar fill */
```

### Section Cards (Topic Page)
```css
.section-grid              /* Grid for section cards */
.section-card              /* Individual section card (padding: 0) */
.section-card.pembelajaran /* Green-themed */
.section-card.aktiviti     /* Blue-themed */
.section-card.penilaian    /* Amber-themed */
.section-card.rumusan      /* Purple-themed */
.section-card-img          /* Image at top of card (when set via admin) */
.section-card-body         /* Card body (title, desc, tags) */
.section-icon              /* Icon circle (shown when no image set) */
.section-tags              /* Tags container */
.section-tag               /* Individual tag pill */
```

### Learning Page
```css
.lesson-container          /* Flex: main + sidebar */
.lesson-container.full-width /* No sidebar mode (no notes, no downloads) */
.lesson-main               /* Content column (flex: 1) */
.lesson-sidebar-r          /* Right sidebar (18.75rem) */
.lesson-card               /* Content card */
.lesson-nav-bottom         /* Prev/Next navigation */
```

### Video Player
```css
.lesson-video              /* Video wrapper */
.lesson-video-thumb        /* MP4 thumbnail with play overlay */
.lesson-video-thumb::after /* Dark overlay on thumbnail */
.lesson-video-play         /* Play button circle on thumbnail */
.lesson-video-bar          /* Bottom bar with expand button */
.lesson-video-bar button   /* Expand/popup button */
.lesson-video iframe       /* YouTube embed */
.lesson-video video        /* MP4 player */
```

### Notes Sidebar
```css
.notes-box                 /* Info/notes panel (border-left accent) */
.notes-box h6              /* Notes heading */
.notes-box p               /* Notes text */
```

### Downloads Sidebar
```css
.dl-area                   /* Downloads section wrapper */
.dl-area h6                /* "Muat Turun" heading */
.dl-item                   /* Individual download row */
.dl-item i                 /* File type icon */
.dl-name                   /* File name */
.dl-badge                  /* Type badge (IMG/PDF/FILE) */
```

### Page Navigation
```css
.page-indicator            /* Dots container */
.page-dot                  /* Individual dot */
.page-dot.active           /* Current page dot (wider pill) */
.page-dot.visited          /* Visited page dot */
```

### Activities
```css
.activity-area             /* Activity wrapper */
.matching-grid             /* 2-column grid */
.match-item                /* Matching item */
.match-item.selected       /* Selected state */
.match-item.correct        /* Correct state */
.match-item.wrong          /* Wrong state */
.match-item.matched        /* Matched/disabled state */
.order-list                /* Ordering list */
.order-item                /* Ordering item */
.order-num                 /* Number badge */
.order-item.correct        /* Correct order */
.order-item.wrong          /* Wrong order */
```

### Quiz
```css
.quiz-card                 /* Question card */
.quiz-progress-bar         /* Progress track */
.quiz-progress-fill        /* Progress fill */
.quiz-q-num                /* Question number label */
.quiz-question             /* Question text */
.quiz-options              /* Options container */
.quiz-option               /* Answer option */
.quiz-option.correct       /* Correct answer */
.quiz-option.wrong         /* Wrong answer */
.quiz-option-letter        /* A/B/C/D letter badge */
.quiz-explanation          /* Explanation box */
.quiz-tf                   /* True/False container */
.quiz-tf-btn               /* True/False button */
.score-card                /* Results card */
.score-ring                /* SVG score circle */
.score-val                 /* Score number */
```

### Rumusan (Summary)
```css
.summary-card              /* Summary section card */
.glossary-item             /* Glossary entry */
.glossary-term             /* Term text */
.glossary-def              /* Definition text */
.key-point                 /* Key point row */
.key-point-dot             /* Bullet dot */
```

### Buttons
```css
.btn-bp                    /* Base button */
.btn-bp-primary            /* Primary (brand color) */
.btn-bp-success            /* Success (green) */
.btn-bp-accent             /* Accent (purple) */
.btn-bp-outline            /* Outline variant */
.back-link                 /* Back navigation link */
.badge-section             /* Section label badge */
```

### Lightbox
```css
#bp-lightbox               /* Overlay background */
#bp-lightbox img           /* Image in lightbox */
#bp-lightbox video         /* Video in lightbox */
#bp-lightbox iframe        /* Iframe in lightbox */
.lb-close                  /* Close button */
```

### Tutorial Spotlight
```css
#tutorial-overlay          /* Full overlay (pointer-events) */
#tutorial-backdrop         /* Dark backdrop */
#tutorial-highlight        /* Glowing highlight box around target */
.tutorial-tooltip          /* Tooltip card */
.tut-step-badge            /* "1 / 5" step counter */
.tutorial-dots             /* Step dots container */
.tutorial-dot-item         /* Individual dot */
.tutorial-dot-item.active  /* Active dot */
.tutorial-actions          /* Skip/Next buttons */
```

### Settings Panel
```css
#settings-panel            /* Slide-out panel */
#settings-overlay          /* Dark overlay behind panel */
.sp-header                 /* Panel header */
.sp-section                /* Section wrapper */
.sp-section-title          /* Section heading */
.sp-row                    /* Setting row */
.sp-label                  /* Setting label */
.sp-switch                 /* Toggle switch */
.sp-switch.on              /* Toggle on state */
.sp-font-btn               /* Font size button */
.sp-font-btn.active        /* Active font size */
.sp-color-row              /* Color swatches container */
.sp-color-swatch           /* Individual color circle */
.sp-color-swatch.active    /* Active color swatch */
.sp-select                 /* Dropdown select */
.sp-slider                 /* Range slider */
```

### Character Dialog
```css
#character-dialog          /* Dialog wrapper */
.char-bubble               /* Speech bubble */
.char-name                 /* Character name */
.char-text                 /* Dialog text */
.char-close                /* Close button */
.char-avatar               /* Character image (5rem circle) */
```

### Intro Screen
```css
#intro-screen              /* Full-screen overlay */
.intro-content             /* Center content */
.intro-badge               /* Ministry badge */
.intro-title               /* "Buku Pintar" title */
.intro-subtitle            /* Subject subtitle */
.intro-meta                /* Stats row */
.btn-start                 /* "Mula Belajar" button */
.intro-top-bar             /* Top-right buttons */
.intro-icon-btn            /* Icon buttons on intro */
```

### Iframe Container
```css
.iframe-container          /* Rounded iframe wrapper */
.iframe-container iframe   /* Embedded iframe */
```

### Audio
```css
.audio-indicator           /* Fixed bottom audio bar */
.audio-bar                 /* Animated audio bar */
```

### Animations
```css
.fade-in                   /* Fade in */
.fade-in-up                /* Fade in + slide up */
.stagger-1                 /* 50ms delay */
.stagger-2                 /* 100ms delay */
.stagger-3                 /* 150ms delay */
.stagger-4                 /* 200ms delay */
```

## Template Examples

### Glass Morphism (Floating)
See `./layout/floating/index.html` for the complete reference. Key techniques:
```css
:root { --glass-bg: rgba(255,255,255,.78); --glass-border: rgba(255,255,255,.65); }
[data-theme="dark"] { --glass-bg: rgba(15,23,42,.78); --glass-border: rgba(255,255,255,.07); }

/* Apply glass to all cards */
.topic-card, .section-card, .lesson-card, .quiz-card {
  background: var(--glass-bg) !important;
  border: 1px solid var(--glass-border) !important;
  backdrop-filter: blur(1.5rem);
}

/* Fixed content panel with internal scroll */
.bp-content {
  position: fixed;
  top: 4.5rem; left: 17.5rem; right: .875rem; bottom: .875rem;
  overflow-y: auto; border-radius: 1.25rem;
}
```

### Rounded Playful
```html
<style>
:root { --bp-radius: 1.5rem; }
.bp-sidebar { border-radius: 0 2rem 2rem 0; margin: 1rem 0; height: calc(100vh - 2rem); }
.topic-card { border-radius: 1.5rem; }
.section-card { border-radius: 2rem; }
.section-card-img { border-radius: 2rem 2rem 0 0; }
.btn-bp { border-radius: 2rem; }
.btn-icon { border-radius: 50%; }
</style>
```

### Minimal Clean
```html
<style>
:root { --bp-radius: .5rem; --bp-shadow: none; --bp-shadow-lg: none; }
.topic-card, .lesson-card, .quiz-card, .section-card {
  border: 1px solid var(--bp-border); box-shadow: none;
}
.topic-card:hover { transform: none; box-shadow: 0 0 0 2px var(--bp-primary); }
.section-icon { border-radius: .5rem; }
.bp-sidebar-header { background: var(--bp-surface); color: var(--bp-text); border-bottom: 2px solid var(--bp-primary); }
</style>
```

## Tips
- Use `[data-theme="dark"]` prefix for dark-mode-specific overrides
- Use `@media (max-width: 991px)` for tablet and `@media (max-width: 575px)` for mobile
- Keep CSS minimal — override only what you need
- Test both light and dark themes, all responsive widths
- The preloader hides everything until layout CSS loads — no flash of defaults
- Use the admin "Susun Atur" section to switch between layouts
- Section cards now support images at top — use `.section-card-img` for styling
- Downloads area in lesson sidebar — use `.dl-item` for glass/custom styling
- Video player supports MP4 (with thumbnail) + YouTube — style via `.lesson-video`
- Tutorial spotlight highlights UI elements — style via `#tutorial-highlight`