Free Online Coin Flip Simulator with Streak Tracker

Overview

A high-fidelity, browser-based utility that simulates a 3D coin flip. Designed for quick decision-making, it features a smooth CSS-based 3D animation, real-time statistics tracking, and a streak monitor. It is built to be lightweight, fast, and fully responsive.

Core Features

• 3D Coin Animation: Uses CSS 3D transforms (rotateY) to create a convincing, hardware-accelerated coin flip animation without the need for heavy 3D libraries.
• In-Memory Statistics Dashboard: Tracks total flips, heads count, tails count, and current winning streak (for the current session).
• Reset Controls: Ability to clear session data instantly.
• Keyboard Accessibility: Users can trigger the flip using the spacebar for quick, repeated usage.
• Sound Effect Toggle: (Optional) UI button to mute/unmute subtle sound effects (using base64 encoded audio assets or web audio API) to avoid external dependency issues.

UI/UX Specification

• Layout:
  • Header: Clean, minimalist app title.
  • Main Area: Centered "Coin" container displaying a stylized metallic disc (Gold/Silver gradient).
  • Controls: Large, distinct "Flip Coin" button with hover states.
  • Stats Bar: A professional card-style section below the coin showing: Heads, Tails, Total Flips, and Current Streak.
• Color Palette:
  • Background: Off-white (#F8FAFC).
  • Primary Accent: Indigo (#4F46E5) for buttons and active states.
  • Text: Slate (#1E293B) for readability.
  • Coin: Gold/Silver gradients with subtle box-shadows for 3D depth.
• Animations:
  • Smooth ease-in-out CSS transitions for the flip sequence.
  • Subtle fade-in animations for result updates in the stats dashboard.
  • Bounce effect on the flip button during user interaction.

Technical Constraints & Directives

• Architecture: Single-file HTML (embedded CSS in <style> and JS in <script> tags).
• State Management: Use a plain JavaScript object const appState = { heads: 0, tails: 0, streak: 0, lastFlip: null }.
• NO STORAGE: Strictly NO usage of localStorage, sessionStorage, or Cookies.
• Sandboxing: Ensure the app functions perfectly inside a sandboxed <iframe>. Avoid any APIs that trigger browser security violations.
• Responsiveness: Use flexible Flexbox and CSS Grid layouts. The coin size should scale relative to the viewport height to ensure it fits on mobile screens without scrolling.
• Performance: Minimize heavy asset usage. Use CSS shapes/gradients for the coin to ensure < 100ms load times.