Probability Display Website

A beautiful, responsive website that fetches probability data from an external API and displays it in an aesthetic manner.

Features

  • šŸŽÆ Fetches data from https://2275-65-95-228-32.ngrok-free.app/predict
  • šŸ“Š Extracts probability value and converts to percentage (multiplies by 100)
  • šŸŽØ Beautiful gradient design with animated elements
  • šŸ“± Fully responsive for mobile and desktop
  • šŸ”„ Auto-refresh every 30 seconds
  • ⚔ Real-time loading and error states
  • šŸŽ­ Smooth animations and transitions

Project Structure

ā”œā”€ā”€ backend/
│   └── index.ts          # Hono API server with probability endpoint
ā”œā”€ā”€ frontend/
│   └── index.html        # Main website with aesthetic display
└── README.md

API Endpoints

  • GET / - Main website
  • GET /api/probability - Fetches and processes probability data

Design Features

  • Animated Circle: Pulsing gradient circle displaying the percentage
  • Loading States: Elegant spinner while fetching data
  • Error Handling: User-friendly error messages with retry functionality
  • Auto-refresh: Updates data every 30 seconds automatically
  • Responsive: Works perfectly on all device sizes

Technical Stack

  • Backend: Hono framework for API handling
  • Frontend: Vanilla HTML/CSS/JS with TailwindCSS
  • Styling: Custom CSS animations + Tailwind utilities
  • Fonts: Google Fonts (Inter)