Game Interface Landing - Copy this Html, Tailwind Component to your project
1. Home / Select Page Purpose: Landing screen. Actions: Pick categories (up to 6), enter Team A/B names, press “Start Game.” Design: Minimal layout, small category cards, prominent “ابدأ اللعبة.” 2. Board Page Purpose: Shows each chosen category as a row with 6 question buttons (3 left, 3 right), image/label in center. Actions: Clicking a question → Question Page. Answered questions become ghosted. Scoreboard is pinned at the bottom. Design: Card like rows, pill shaped question buttons, pinned scoreboard. 3. Question Page Purpose: Display one question in detail. Actions: Show question text/image, optional timer, button to reveal the answer. Design: Clean card layout, large question text, matching color scheme. 4. Answer Page (Optional) Purpose: Show the correct answer, decide which team got points. Actions: Award points to Team A/B or no one, ghost the question, toggle turn, return to Board. Design: Quick awarding flow, minimal interface. 5. Scoreboard (Pinned) Purpose: Show Team A/B scores at all times. Actions: Possibly allow ± for manual score adjusts, or reset. Design: Simple, fixed, highlights active team turn. 6. (Optional) Admin Page Purpose: Add/edit categories/questions. Actions: Create category, upload image, set question text/points. Design: Straightforward form like layout, restricted access. 7. User Flow Landing → pick categories + team names → Board → select question → Question Page → reveal answer + awarding → back to Board, ghost question → repeat → end/reset game. 8. Design Soft pastels or neutrals, pill shaped question buttons, card like rows for categories, pinned scoreboard, turn based logic shown in top bar.
