Mandarin Guide (Zhuyin & Pinyin)

A comprehensive, interactive web application designed to help beginners, especially foreigners in Taiwan, learn Mandarin Chinese using the Zhuyin (Bopomofo) system alongside Pinyin.

🌟 Features

• Interactive Lessons: 36+ structured lessons covering basics to daily conversation.
• Audio Pronunciation: Text-to-speech integration for characters and sentences.
• Dual System: Learn Zhuyin (traditional Taiwanese phonetic system) and Pinyin side-by-side.
• Level Tests: Interactive quizzes to test your knowledge at each milestone.
• PWA Support: Full Offline Mode. Installable as a native-like app on mobile/desktop.
• Search: fast, indexed search for any lesson or chapter.
• Privacy Focused: All progress is stored locally on your device.

🚀 Getting Started

Prerequisites

• A modern web browser (Chrome/Edge/Safari).
• No backend required (Static HTML/JS/CSS).

Usage

1. Open:
   • Visit the live application at Mandarin Guide.
   • Install App: Click the "Install App" button on the dashboard to install as a standalone application.

📂 Project Structure

• index.html: The main dashboard.
• chapterX / lessonX: Content pages.
• js/:
  • app.js: Core logic (state, navigation, PWA install).
  • layout.js: UI injection (header, footer, background).
  • translator.js: Translation tool logic.
• css/: Tailwind CSS (CDN) and style.css (custom neon theme).
• service-worker.js: Handles offline caching and updates.

🛠 Tech Stack

• HTML5 / CSS3
• JavaScript (Vanilla ES6+)
• Tailwind CSS (CDN)
• PWA (Service Workers, Manifest)

🤝 Contributing

Contributions are welcome! If you spot an error in the tones or translations, please open an issue.

� Authors

• Deepan | Brian Hexer - Initial work - brianhexer

�📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

---

Jiāyóu! (Add Oil!) 加油!