ItzD0m55/build-a-html-for-the-ufl-boxing-ranking

Manual changes saved

Build a html for the UFL Boxing ranking system that uses a single unified Top 30 ranking across all platforms (PC, PS5, and Xbox) with three titles: North America (NA), Europe (EU), and World. Each fighter must have both a platform and a region assigned (NA, EU, or Other). The system supports cross-platform and cross-region fights, and all results affect one shared global rating. Use Next.js with React, TypeScript, Firebase (Firestore + Auth), Tailwind CSS, and Framer Motion, hosted on Vercel. The site should include four tabs: Rankings (unified Top 30 with filters for platform and region, showing which fighters hold the World, NA, and EU belts), Records (all fighters with record, platform, region, and rating), Fights (fight history with date, fighters, winner, method, and optional platform), and Admin (a Firebase-protected panel for fighter and fight management). The unified ranking logic must use an Elo-style rating starting at 1500, where defeating higher-rated opponents yields greater gains, wins within 20 days apply a recency multiplier (K × 1.15), and fighters cannot rank above someone who beat them within the last 20 days unless they have since avenged the loss. Fighters inactive for more than 45 days should be visually marked inactive. Tiebreakers should use recent head-to-head results, average opponent rating, most recent win date, and total wins. Champion status is automatically assigned: the World Champion is the top-ranked fighter overall, the NA Champion is the top-ranked fighter with region = NA, and the EU Champion is the top-ranked fighter with region = EU. Belts should automatically update after fights or ranking recalculations but can also be manually overridden by admins. Admins can optionally enable or disable multiple belt holdings. The Admin Panel must allow adding, editing, and deleting fighters (fields: name, platform, region, team, notes) and fights (fighter A vs fighter B, date, winner, method, platform), with automatic ranking and belt updates on save. Include Firebase email/password authentication for admin access, confirmation dialogs for deletions, toast notifications for feedback, and loading or empty states. The design must have a dark theme with subtle purple and blue gradients, rounded cards, hover glow effects, and smooth Framer Motion transitions. It should be fully responsive on desktop and mobile, with region and platform tags and visible belt indicators for World, NA, and EU champions. Deliver a single file app/page.tsx containing all app logic and UI, integrated with Firebase and Firestore, providing real-time synchronization for fighters, fights, and belts. The final build must be production-ready with clean UI, accurate ranking logic, belt system, and full admin functionality.

initial commit