mirror of
http://forgejo-oa09toasww4dgii9cj3gpzda.187.127.164.61.sslip.io/iamcoolvivek007/bharath.git
synced 2026-06-11 00:06:51 +00:00
Vivek
ed320e82c1
- Multi-language support (English, Hindi, Tamil, Telugu) with icon-based UI - Voice input (Web Speech API) for low-literacy users - Driver tools: Ledger, Trip Planner, Return Load, Safety, Maintenance, FASTag - Marketplace: WhatsApp share, Rate Intelligence, Classifieds, Fleet - Engagement: Gamification (XP/Levels), Challenges, Leaderboard, Referrals, Feed - Business: Invoice (GST+UPI), Reports+CSV, Notifications, Documents, Bank - Games: Rate Guesser, Route Quiz - SEO: Sitemap, public load share pages with OG tags - India utilities: vehicle validation, UPI links, toll/fuel calculator - 29 routes, 54 templates, 4 languages, 3 migration files
44 lines
2 KiB
Markdown
44 lines
2 KiB
Markdown
# Multi-Language Support with Icon-Based UI
|
|
|
|
## Overview
|
|
Add Hindi, English, Tamil, and Telugu language support to BharathTrucks with large icon-based buttons designed for low-literacy users.
|
|
|
|
## Requirements
|
|
1. Support 4 languages: Hindi (default), English, Tamil, Telugu
|
|
2. Language switcher in header — persisted in session
|
|
3. All navigation and action buttons use large icons with minimal text labels
|
|
4. Bottom nav and dashboard buttons are icon-first (large emoji/SVG + short label)
|
|
5. Low-literacy friendly: icons convey meaning without reading
|
|
|
|
## Technical Design
|
|
|
|
### i18n Approach
|
|
- Simple JSON translation files in `src/i18n/{lang}.json`
|
|
- Middleware reads `req.session.lang` (default: `hi`) and attaches `t()` helper to `res.locals`
|
|
- No external i18n library needed — lightweight custom implementation
|
|
|
|
### Language Switcher
|
|
- `GET /lang/:code` route sets `req.session.lang` and redirects back
|
|
- Header shows 4 flag/label buttons: हिंदी | EN | தமிழ் | తెలుగు
|
|
|
|
### Icon-Based UI for Low-Literacy Users
|
|
- Bottom nav: larger icons (40px), short label below
|
|
- Dashboard action buttons: icon-button class with 48px emoji + label
|
|
- All key actions identifiable by icon alone (🚛 truck, 📋 loads, 💰 money, etc.)
|
|
|
|
## Files Changed
|
|
- `src/i18n/hi.json` — Hindi translations
|
|
- `src/i18n/en.json` — English translations
|
|
- `src/i18n/ta.json` — Tamil translations
|
|
- `src/i18n/te.json` — Telugu translations
|
|
- `src/middleware/i18n.js` — language detection middleware
|
|
- `src/server.js` — add i18n middleware + `/lang/:code` route
|
|
- `src/views/partials/header.ejs` — language switcher
|
|
- `src/views/partials/bottom-nav.ejs` — icon-first nav
|
|
- `src/views/pages/driver-dashboard.ejs` — icon-based action buttons
|
|
- `src/public/css/govt-theme.css` — icon-button styles
|
|
|
|
## Testing
|
|
- Switch language via header buttons, verify all labels change
|
|
- Verify icons are large and clear on mobile
|
|
- Verify session persists language across page navigations
|