One Digital Platform for Sri Lanka Tourism
LankaCompass is a beautifully designed, fully static web platform built to help tourists explore Sri Lanka safely and confidently. It provides verified travel information, popular routes, transport guides, connectivity tips, scam alerts, and a live Q&A section — all in one place.
Open
index.htmlin your browser or serve it locally with:npx serve .Then visit http://localhost:3000
| Section | Description |
|---|---|
| 🗺️ Destinations | 6 verified top destinations with filterable cards (Nature, Heritage, Beach, Wildlife) |
| 🛣️ Travel Routes | Step-by-step route timelines with costs, durations, and pro tips |
| 🚌 Transport Guide | All transport modes — trains, buses, tuk-tuks, taxis, ferries, rentals |
| 📲 FYK Info | Tabbed essential info: Mobile & Data, WiFi, Food & Water, Toilets, Dress Code, Emergency |
| ❓ Q&A Board | Community question-and-answer section with live form submission |
| Dedicated scam awareness section with verified warnings for common tourist traps |
- Sigiriya Lion Rock — UNESCO Heritage, ancient fortress
- Ella Odyssey Train — World's most scenic rail journey
- Temple of the Tooth, Kandy — Sacred Buddhist heritage site
- Mirissa Beach — Whale watching, turquoise waters
- Galle Fort — Dutch colonial fortress, UNESCO Heritage
- Yala National Park — World's highest leopard density
- Colombo → Ella (Scenic Train, ~7 hrs)
- Colombo → Kandy (Bus/Train, ~2.5–3 hrs)
- Kandy → Sigiriya (Bus + Tuk-tuk, ~3 hrs)
- Galle → Mirissa (Coastal Train, ~45 mins)
| Technology | Usage |
|---|---|
| HTML5 | Semantic structure, SEO meta tags |
| CSS3 | Custom design system, glassmorphism, animations |
| Vanilla JavaScript | Filtering, modals, tabs, scroll effects, parallax |
| Google Fonts | Outfit + Playfair Display |
No frameworks. No dependencies. Pure, fast, and offline-capable.
LankaCompass/
├── index.html # Main page (single-page app)
├── style.css # Full design system & component styles
├── app.js # All interactivity & logic
├── README.md # This file
├── sri_lanka_hero_*.png # Hero section image
├── sigiriya_rock_*.png # Sigiriya destination image
├── ella_train_*.png # Ella train destination image
├── kandy_temple_*.png # Kandy temple destination image
├── mirissa_beach_*.png # Mirissa beach destination image
└── galle_fort_*.png # Galle Fort destination image
- Dark mode aesthetic with a warm amber (
#E8A020) accent palette - Glassmorphism cards with frosted-glass effects
- Scroll-reveal animations using IntersectionObserver
- Parallax hero mouse-movement effect
- Responsive — mobile hamburger menu, fluid grid layouts
- Micro-animations on hover for all interactive elements
LankaCompass takes tourist safety seriously. The platform highlights common scams such as:
- Train seat scams — fake "best view" seat upsells
- Unofficial guide traps — at Sigiriya and other heritage sites
- Overpriced tuk-tuk fares — and how to use PickMe instead
- Wildlife tour scams — unethical operators promising guaranteed leopard sightings
- 💧 Water safety — Don't drink tap water; buy bottled or use filters
- 📶 SIM cards — Dialog, Mobitel, Airtel packages with pricing
- 👗 Dress codes — Temple, mosque, beach, and city guidelines
- 🆘 Emergency numbers — Police (119), Ambulance (110), Fire (111)
- 🚻 Public facilities — What to expect and what to bring
# Clone the repository
git clone https://github.com/ShaliniWanasinghe/LankaCompass.git
# Navigate into the project
cd LankaCompass
# Serve locally (requires Node.js)
npx serve .Then open your browser at http://localhost:3000
This project is open-source and available under the MIT License.
Built with ❤️ for travellers discovering the Pearl of the Indian Ocean 🇱🇰
