MORSELAB is a pixel-perfect, mobile-first Morse code learning app designed for the web. With a stunning, app-like splash screen and a responsive, interactive home page, users can study Morse code, track their progress, and enjoy a seamless experience that mirrors native mobile UI. Built as a single HTML file with HTML, CSS, and JavaScript, MORSELAB ensures every element—spacing, color, typography, and interaction—is true to modern mobile app standards.
- Splash Screen: Three animated onboarding slides with swipeable dots and a drag-to-unlock "Start" button.
- Home Page: Progress indicators, feature cards, and a fixed bottom navigation, all styled to match a native app.
- App-like experience in the browser
- Responsive and adaptive to various mobile screen sizes
- Pixel-perfect recreation of mobile designs
- Animated onboarding slides with timed transitions
- Drag-to-slide "Start" button for immersive interaction
- Home dashboard with progress, levels, and features
- Accessible UI, Bootstrap Icons, and modern CSS
- HTML5 – Semantic, mobile-optimized markup
- CSS3 – Responsive design, flexbox, gradients, shadows, media queries
- JavaScript (Vanilla) – Slide transitions, drag-to-unlock, UI logic
- Bootstrap Icons – Crisp, scalable in-app icons
Shozon Roy
- Background and UI inspiration: Shozon Roy
- Bootstrap Icons: https://icons.getbootstrap.com/
© 2025 Shozon Roy.
This project is for educational and demonstration purposes only.