Bitcoin Satoshi to Fiat Conversion Tool: Technical Specification

Overview

This is a high-performance, single-file browser application designed to convert Bitcoin Satoshis (Sats) to various fiat currencies. The application focuses on speed, accessibility, and precision.

Core Features

• Real-Time API Integration: Fetches live BTC/Fiat exchange rates via asynchronous fetch requests to public crypto APIs.
• Precision Calculation: Handles up to 8 decimal places for BTC, ensuring no loss of accuracy for fractional inputs.
• Dynamic Currency Selector: Supports major global fiat currencies (USD, EUR, GBP, JPY, CAD, AUD).
• Copy-to-Clipboard: One-tap action for users to copy the conversion result.
• Responsive UI: Adaptive layout that works seamlessly from mobile devices to high-resolution desktop monitors.

UI/UX Design Specification

• Aesthetic: Clean, minimalist "SaaS" aesthetic. Use generous whitespace, rounded corners (8px radius), and soft drop shadows for input containers.
• Color Palette:
  • Primary Background: #FFFFFF (White)
  • Secondary Background (Cards): #F9FAFB (Very light gray)
  • Primary Text: #1F2937 (Dark Slate)
  • Accent Color (Primary Action): #3B82F6 (Modern Blue)
  • Border/Input Stroke: #E5E7EB (Subtle Gray)
• Animations: Subtle CSS transitions (200ms ease-in-out) on button hover states and input focus ring expansions. Fade-in animations when results are populated.

Technical Implementation Constraints

• Single File: All HTML, CSS (in <style> tags), and JS (in <script> tags) must be contained in a single .html file.
• State Management: Use Vanilla JS variables only. Explicitly forbidden: localStorage, sessionStorage, cookies, IndexedDB.
• Security: Do not use eval(), alert(), or prompt(). Replace native browser alerts with custom HTML modal overlays for user feedback or errors.
• Iframe Compatibility: The app must support execution inside a null origin iframe. All resources must be loaded via relative paths or secure CDNs.
• No Build Step: No React, Vue, or Webpack. Plain ES6+ JavaScript.

Interface Layout

1. Header: Title of the application and a subtle sub-header description.
2. Conversion Container: A centered, white-card interface containing:
   • An input field for "Sats Amount".
   • A clean dropdown menu for "Select Currency".
   • A large, prominent display area for the "Calculated Total".
3. Utility Section: A button group for copying the result or refreshing the price data.
4. Info Section: A non-intrusive section providing a disclaimer about real-time price volatility.