💻 Frontend Features
The frontend of LogBook displays all essential data and interactive components for drivers, admins, and visitors. It is written in PHP and uses HTML, CSS, and JavaScript (mostly jQuery) for interactivity.
Main user views
- Dashboard: Quick overview of the user's stats (XP, jobs, distance, rank)
- Profile Page: Public and private views with delivery history and rank progress
- Job Log: Table of all submitted jobs (sortable and filterable)
- Leaderboard: Lists top drivers by XP, distance, or job count (includes medals 🥇🥈🥉)
- Monthly Stats: Separate leaderboard and stats per month
Progress bar
- Displays how far a driver is toward their next rank
- Uses current XP and the next rank's XP requirement
- Styled using the same color palette as the rest of the UI
- Renders dynamically in JavaScript from the user's XP and rank list
Visual elements
- 🏆 Emoji-based medals for top 3 drivers (gold, silver, bronze)
- 🎖️ Rank names and XP thresholds shown under progress bar
- 📊 Responsive tables with dark mode design
Customization tips
- Each VTC can apply its own CSS via the main stylesheet
- Progress bars and widgets can be embedded into third-party dashboards
- JavaScript logic is cleanly separated and extendable (see
scripts.js
)
← Back to Wiki Index