Skip to content

Instantly share code, notes, and snippets.

@devjaime

devjaime/worldcupuxprompt.md

Created June 13, 2026 17:54
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save devjaime/447e62bef0ed02ae94504f6c06b5ce4e to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save devjaime/447e62bef0ed02ae94504f6c06b5ce4e to your computer and use it in GitHub Desktop.
Download ZIP
World Cup 2026 Crypto Prediction UI
Raw
worldcupuxprompt.md

World Cup 2026 Crypto Prediction UI

Project Type

Visual UI / Frontend Prototype / Product Concept

Objective

Create a high-end visual UI for a World Cup 2026 sports prediction and betting-style application using cryptocurrencies and digital rewards.

Important: this project must be treated as a visual prototype and entertainment concept only. It must not process real bets, real money, real crypto transactions, deposits, withdrawals, or gambling operations.

The goal is to design a premium, futuristic, secure, and attractive UI inspired by:

  • Global football
  • World Cup 2026
  • Web3 products
  • Fintech dashboards
  • Crypto wallets
  • Live sports apps
  • Gamified prediction platforms

The interface must be designed for adults only, with visible responsible gaming elements, risk warnings, spending limits, age restriction, and compliance indicators.

Core Product Concept

A mobile-first application where users can:

  • Predict World Cup 2026 match results
  • View simulated odds
  • Track fictional crypto-style rewards
  • Unlock NFT-style achievement badges
  • Join leaderboard challenges
  • See wallet-style balances
  • Review prediction history
  • Configure responsible gaming limits

The design should focus on:

  • Entertainment
  • Transparency
  • Trust
  • Security
  • Gamification
  • Responsible participation

This should feel like a premium mix of:

  • Sportsbook UI
  • Crypto exchange dashboard
  • Live football app
  • Web3 rewards platform

Safety and Legal Constraints

The agent must follow these constraints:

  1. Do not implement real betting.
  2. Do not connect to payment providers.
  3. Do not connect to real crypto wallets.
  4. Do not allow real deposits or withdrawals.
  5. Do not simulate guaranteed earnings.
  6. Do not use aggressive gambling language.
  7. Do not target minors.
  8. Include visible 18+ labels.
  9. Include responsible gaming messages.
  10. Add compliance-gated UI states for sensitive actions.
  11. Use fictional/simulated data only.
  12. Present this as a concept, prototype, or prediction game.

Suggested wording in the UI:

  • “Prediction Game”
  • “Simulated Odds”
  • “Demo Rewards”
  • “Entertainment Only”
  • “No Real Money”
  • “Play Responsibly”
  • “18+”
  • “KYC Required”
  • “Withdrawals Disabled in Demo Mode”

Avoid wording like:

  • “Win guaranteed money”
  • “Earn real crypto now”
  • “Risk-free betting”
  • “Instant cashout”
  • “Bet now with real funds”

Recommended Tech Stack

Use any modern frontend stack. Preferred option:

  • Next.js
  • React
  • TypeScript
  • Tailwind CSS
  • shadcn/ui
  • Lucide Icons
  • Framer Motion

Alternative:

  • Vite
  • React
  • TypeScript
  • Tailwind CSS

The result must be frontend-only unless explicitly requested otherwise.

No backend is required for the first prototype.

Visual Style

The application should use a premium dark-mode interface.

Design Direction

  • Futuristic Web3 aesthetic
  • Global football energy
  • Stadium lighting
  • Fintech-style data cards
  • Crypto exchange-inspired wallet module
  • Clean sports dashboard structure
  • High contrast
  • Strong visual hierarchy
  • Glassmorphism cards
  • Smooth gradients
  • Rounded modern components
  • Premium sportsbook + crypto wallet hybrid look

Color Palette

Use a dark base with neon accents:

  • Background: deep navy / black / dark purple
  • Primary accent: electric blue
  • Secondary accent: neon green
  • Reward accent: gold
  • Web3 accent: purple
  • Risk/warning accent: amber or red
  • Success accent: green

UI Effects

  • Glassmorphism
  • Soft glow
  • Gradient borders
  • Stadium-light background effect
  • Subtle motion transitions
  • Floating cards
  • Premium mobile dashboard look

Main Screens to Build

1. Home Dashboard

Main landing screen after login.

Must include:

  • App logo
  • World Cup 2026 badge
  • User avatar
  • Wallet balance
  • Responsible gaming icon
  • Featured match card
  • Countdown timer
  • Simulated odds panel
  • Primary CTA: Make Prediction
  • Today’s matches
  • Rewards pool
  • Leaderboard preview
  • Responsible gaming reminder

2. Match Detail Screen

Detailed view for one match.

Must include:

  • Team flags
  • Team names
  • Match date and time
  • Stadium/location placeholder
  • Simulated odds: Home / Draw / Away
  • Prediction buttons
  • Crypto reward multiplier
  • Risk level indicator
  • Match statistics mock data
  • Responsible gaming warning
  • Confirmation CTA

Example match:

Argentina vs Brazil World Cup 2026 — Final Stage Preview

3. Prediction Confirmation Modal

A modal shown before confirming a prediction.

Must include:

  • Selected match
  • Selected prediction
  • Simulated odds
  • Estimated demo reward
  • Risk warning
  • “This is entertainment only” message
  • Confirm button
  • Cancel button

Important: make the risk and demo nature clear.

4. Crypto Wallet Screen

Wallet-style UI using fictional/demo balances.

Must include:

  • Available demo balance

  • Pending demo rewards

  • Token balances:

    • USDT
    • BTC
    • ETH
    • WCP Token

  • Transaction history

  • Deposit button disabled or compliance-gated

  • Withdraw button disabled or compliance-gated

  • Security badges:

    • KYC Verified
    • 2FA Active
    • Encrypted Wallet
    • Demo Mode

5. Rewards and Leaderboard Screen

Gamification screen.

Must include:

  • Today’s Rewards Pool
  • User rank
  • Country ranking
  • Top predictors
  • NFT-style badge progress
  • Weekly challenges
  • Claim rewards button
  • Demo reward disclaimer

Example badges:

  • First Prediction
  • Group Stage Master
  • Perfect Score
  • Crypto Strategist
  • Final Match Prophet

6. Responsible Gaming Settings Screen

Compliance and safety screen.

Must include:

  • Spending limit
  • Time limit
  • Cooldown period
  • Self-exclusion option
  • Age restriction: 18+
  • Legal compliance notice
  • Risk awareness message
  • Demo mode indicator

Suggested text:

“Predictions are for entertainment only. This prototype does not support real betting, real deposits, real withdrawals, or real crypto transactions.”

Main Components

Build reusable UI components:

  • AppHeader
  • WorldCupBadge
  • WalletBalance
  • FeaturedMatchCard
  • MatchCard
  • OddsButton
  • RewardPoolCard
  • CryptoWalletCard
  • LeaderboardCard
  • BadgeProgressCard
  • ResponsibleGamingPanel
  • PredictionConfirmationModal
  • ComplianceBadge
  • RiskIndicator
  • TransactionHistory

Mock Data Requirements

Use local mock data.

Example structure:

const matches = [
  {
    id: "match-001",
    homeTeam: "Argentina",
    awayTeam: "Brazil",
    homeFlag: "🇦🇷",
    awayFlag: "🇧🇷",
    stage: "Final Stage Preview",
    date: "2026-07-12",
    time: "20:00",
    stadium: "MetLife Stadium",
    odds: {
      home: 2.15,
      draw: 3.20,
      away: 2.80
    },
    rewardMultiplier: "2.4x",
    riskLevel: "Medium"
  }
];
const wallet = {
  demoMode: true,
  balances: {
    USDT: 1250.45,
    BTC: 0.018,
    ETH: 0.42,
    WCP: 8500
  },
  pendingRewards: 320.75,
  kycVerified: true,
  twoFactorEnabled: true
};
const leaderboard = [
  {
    rank: 1,
    name: "CryptoStriker",
    country: "Argentina",
    points: 9820,
    rewards: "1,250 WCP"
  },
  {
    rank: 2,
    name: "GoalOracle",
    country: "Brazil",
    points: 9410,
    rewards: "1,100 WCP"
  }
];

UX Requirements

The UI must feel:

  • Premium
  • Trustworthy
  • Secure
  • Modern
  • Exciting
  • Clear
  • Professional

The UI must not feel:

  • Shady
  • Overly aggressive
  • Casino-like
  • Misleading
  • Unsafe
  • Targeted at minors

Important UX rules:

  • Every odds area must say Simulated Odds.
  • Every wallet area must say Demo Wallet.
  • Every rewards area must say Demo Rewards.
  • Deposit and withdraw actions must be disabled or compliance-gated.
  • Risk must be visually clear.
  • Responsible gaming must be visible from the main dashboard.
  • Use clear labels for odds, balances, rewards, limits, and rankings.

Suggested Pages / Routes

/
/match/[id]
/wallet
/rewards
/responsible-gaming

For a single-page prototype, use tabs or sections instead of routes.

Implementation Instructions for the Agent

Step 1: Create the project

Create a modern frontend application using Next.js, React, TypeScript, and Tailwind CSS.

Use a clean folder structure:

src/
  app/
  components/
  data/
  lib/
  styles/

Step 2: Configure the visual system

Set up:

  • Dark theme
  • Gradient background
  • Neon accent colors
  • Card components
  • Typography scale
  • Responsive layout
  • Mobile-first design

Step 3: Build reusable components

Create all major cards and UI modules as independent reusable components.

Prioritize clean composition over one large file.

Step 4: Add mock data

Use local static mock data for:

  • Matches
  • Wallet balances
  • Rewards
  • Leaderboard
  • Transactions
  • Badges
  • Responsible gaming settings

Step 5: Build the dashboard

The home dashboard must show the entire product concept clearly in one view.

The first screen should immediately communicate:

  • World Cup 2026
  • Prediction game
  • Crypto-style rewards
  • Demo wallet
  • Responsible gaming
  • Premium sports-tech brand

Step 6: Add interaction

Add lightweight UI interactions:

  • Open prediction modal
  • Select prediction option
  • Confirm demo prediction
  • Switch between screens/tabs
  • Show disabled state for deposit/withdraw
  • Display responsible gaming notices

No backend required.

Step 7: Polish the UI

Add:

  • Hover states
  • Focus states
  • Subtle animations
  • Glow effects
  • Gradient borders
  • Responsive spacing
  • Mobile-first layout
  • Accessibility labels

Acceptance Criteria

The prototype is complete when:

  • The UI looks like a premium mobile sports-tech product.
  • The app clearly references World Cup 2026.
  • The app includes match prediction cards.
  • The app includes simulated odds.
  • The app includes crypto-style demo rewards.
  • The app includes a demo wallet.
  • The app includes leaderboard and badges.
  • The app includes responsible gaming controls.
  • The app includes 18+ and Entertainment Only labels.
  • Deposit and withdraw actions are disabled or compliance-gated.
  • The UI is mobile-first and responsive.
  • The code is componentized and easy to extend.
  • There are no real betting, payment, or crypto integrations.

Main Design Prompt

Create a high-end visual UI design for a World Cup 2026 sports prediction and betting-style application using cryptocurrencies and digital rewards.

The app must feel premium, futuristic, secure, and exciting, inspired by global football, Web3, fintech dashboards, and live sports apps. The interface should be designed for adults only, with visible responsible gaming elements, risk warnings, spending limits, and compliance indicators.

Main concept:

A mobile-first application where users can predict World Cup 2026 match results, track simulated live odds, earn crypto-style demo rewards, unlock NFT-style badges, and participate in leaderboard challenges. The design should focus on entertainment, transparency, security, and responsible participation.

Visual style:

  • Dark mode premium interface
  • Neon accents in blue, green, gold, and purple
  • Futuristic Web3 aesthetic
  • Stadium lights, football energy, digital finance feeling
  • Glassmorphism cards
  • Smooth gradients
  • Clean fintech-style typography
  • Modern rounded components
  • High contrast and strong hierarchy
  • Premium sportsbook + crypto exchange hybrid look

Main screen layout:

  1. Top navigation:

    • App logo
    • World Cup 2026 badge
    • Demo wallet balance in USDT / BTC / ETH / WCP
    • User avatar
    • Responsible gaming icon

  2. Hero section:

    • Featured match card: Argentina vs Brazil / Final Stage Preview
    • Countdown timer
    • Simulated odds panel
    • “Make Prediction” primary button
    • Stadium background with dynamic lighting

  3. Match prediction cards:

    • Team flags
    • Match time
    • Simulated odds for Home / Draw / Away
    • Crypto-style demo reward multiplier
    • Quick prediction buttons
    • Risk level indicator

  4. Crypto rewards section:

    • “Today’s Demo Rewards Pool”
    • Token balance
    • Demo cashback rewards
    • NFT-style badge progress
    • Leaderboard rank
    • Claim demo rewards button

  5. User wallet module:

    • Available demo balance
    • Pending demo rewards
    • Transaction history
    • Deposit / withdraw buttons shown as disabled or compliance-gated
    • Security badges: KYC verified, 2FA active, encrypted wallet, demo mode

  6. Leaderboard:

    • Top predictors
    • Country ranking
    • Demo reward pool distribution
    • Weekly challenges

  7. Responsible gaming area:

    • Spending limit
    • Time limit
    • Self-exclusion option
    • “Play responsibly” warning
    • Age restriction: 18+
    • Legal compliance notice
    • Entertainment-only disclaimer

UX requirements:

  • The UI should feel trustworthy, not shady.
  • Prediction actions should clearly show risk.
  • Crypto-style rewards must look exciting but not misleading.
  • Include clear labels for simulated odds, demo balance, demo rewards, and limits.
  • Avoid aggressive gambling language.
  • Prioritize security, transparency, and responsible gaming.
  • Make it clear that this is a visual prototype, not a real betting product.

Screens to design:

  • Home dashboard
  • Match detail screen
  • Prediction confirmation modal
  • Crypto wallet screen
  • Rewards and leaderboard screen
  • Responsible gaming settings screen

Design format:

Create a polished Figma-style UI mockup, ultra-detailed, modern, production-ready, mobile app interface, 9:16 aspect ratio, high resolution, professional UX/UI design, realistic components, clean layout, premium sports-tech branding.

Suggested First Agent Command

Use this command with any coding agent:

Build a frontend-only mobile-first prototype based on this README. Use Next.js, React, TypeScript, Tailwind CSS, shadcn/ui, Lucide Icons, and Framer Motion. Do not implement real betting, real payments, real crypto wallets, deposits, withdrawals, or gambling logic. Use only mock data and clearly label the product as Demo Mode, Entertainment Only, Simulated Odds, Demo Wallet, and 18+. Focus on premium UI quality, component structure, and responsive mobile UX.

Optional Repository Description

A premium frontend prototype for a World Cup 2026 crypto-style sports prediction app with simulated odds, demo rewards, leaderboard, wallet UI, and responsible gaming controls.

Optional Repository Tags

world-cup-2026
sports-tech
ui-design
ux-design
react
nextjs
tailwindcss
web3
crypto-ui
prediction-game
frontend-prototype
responsible-gaming
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment