A
Anonymous

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.

Prompt
Component Preview

About

Game Interface Landing - Minimal layout for category selection, team names, and game flow. Built with HTML and Tailwind. Download code free!

Share

Last updated 1 month ago