An interactive web app that introduces children to 9 treasures of Bosnian cultural heritage through beautifully animated cards, each with a child-friendly description in Bosnian.
- Card swiper — Browse treasures with a stacked-deck cards effect (Swiper.js)
- Full-screen expansion — Tap a card to read its description with a smooth FLIP animation
- Swipe to dismiss — Drag the expanded card in any direction to close it
- QR scanner — Scan a Bosansko Blago QR code to jump directly to a treasure (card flips to reveal the camera)
- Deep linking — Share a link like
#sargijato open a specific card; the deck animates through each card to reach it - Pagination scrubber — Drag across the dots to quickly scrub through all cards
- Pulse animation — Cards gently pulse after inactivity to invite interaction
| # | Treasure | Description |
|---|---|---|
| 1 | Fildžan | Traditional coffee cup |
| 2 | Fes | Red cap with a tassel |
| 3 | Ibrik | Decorative water pitcher |
| 4 | Bosanska kuća | Traditional Bosnian house |
| 5 | Bosanski ćilim | Hand-woven wool rug |
| 6 | Šargija | Long-necked string instrument |
| 7 | Opanak | Traditional leather shoe |
| 8 | Baklava | Layered pastry dessert |
| 9 | Ljiljan | Bosnian lily, national symbol |
- Vanilla JavaScript (no framework, no build step)
- Swiper.js — cards effect carousel
- html5-qrcode — QR code scanning
- CSS animations (FLIP transitions, pulse, card flip)
- Hosted on GitHub Pages
.
├── index.html # Single-page app
├── css/
│ └── styles.css # All styles and animations
├── js/
│ └── main.js # Swiper, expansion, QR scanner, deep linking
├── images/
│ ├── fildzan.jpg
│ ├── fes.jpg
│ ├── ibrik.jpg
│ ├── bosanska-kuca.jpg
│ ├── cilim.jpg
│ ├── sargija.jpg
│ ├── opanak.jpg
│ ├── baklava.jpg
│ └── ljiljan.jpg
└── CNAME # Custom domain config
No build step required. Clone and open index.html in a browser:
git clone <repo-url>
open index.htmlFor the QR scanner to work, serve over HTTPS (camera access requires a secure context).