index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sats to USD Converter</title>
<meta name="description" content="Convert satoshis and Bitcoin to USD, EUR, GBP and 38 world currencies with live prices.">
<!-- Social share preview (Open Graph + Twitter) -->
<meta property="og:type" content="website">
<meta property="og:site_name" content="Sats to USD Converter">
<meta property="og:title" content="Sats to USD Converter">
<meta property="og:description" content="Convert satoshis and Bitcoin to USD and 38 world currencies with live prices.">
<meta property="og:url" content="https://satstousd.com/">
<meta property="og:image" content="https://satstousd.com/og-image.png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="Sats to USD Converter — live satoshi & Bitcoin price converter">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Sats to USD Converter">
<meta name="twitter:description" content="Convert satoshis and Bitcoin to USD and 38 world currencies with live prices.">
<meta name="twitter:image" content="https://satstousd.com/og-image.png">
<meta name="theme-color" content="#f7931a">
<style>
  :root {
    --bg: #000000;
    --field-bg: #111111;
    --field-border: #262626;
    --text: #ffffff;
    --text-dim: #8a8a8a;
    --accent: #f7931a;
    --usd-green: #22c55e;
  }
  * { box-sizing: border-box; margin: 0; padding: 0; }
  html, body {
    background: var(--bg);
    color: var(--text);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    min-height: 100vh;
  }
  body {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 60px 20px;
  }
  .container {
    width: 100%;
    max-width: 580px;
    text-align: center;
  }
  .logo {
    width: 100px;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 24px;
  }
  .logo svg { width: 100px; height: 100px; }
  h1 { font-size: 40px; font-weight: 800; letter-spacing: -0.5px; }
  .subtitle { color: var(--text-dim); font-size: 18px; margin-top: 8px; margin-bottom: 40px; }

  .field {
    position: relative;
    display: flex;
    align-items: center;
    background: var(--field-bg);
    border: 1px solid var(--field-border);
    border-radius: 16px;
    padding: 22px 24px;
    margin-bottom: 18px;
  }
  .field input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    color: var(--text);
    font-size: 34px;
    font-weight: 700;
    width: 100%;
  }
  .field input::selection { background: #2b4a8b; }
  .badge {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 18px;
    font-weight: 600;
    color: var(--text);
    white-space: nowrap;
  }
  .badge .coin {
    width: 30px; height: 30px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 16px; font-weight: 700;
    color: #fff;
  }
  .coin.usd { background: var(--usd-green); }
  .coin.btc { background: var(--accent); }
  .coin-sats { background: transparent; }
  .coin-sats svg { width: 30px; height: 30px; display: block; }

  .info { color: var(--text-dim); font-size: 14px; line-height: 1.9; margin-top: 22px; }
  .info a { color: var(--text); text-decoration: underline; cursor: pointer; }

  .currency-inline {
    appearance: none;
    -webkit-appearance: none;
    background: transparent url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' stroke='%238a8a8a' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>") no-repeat right center;
    border: none;
    outline: none;
    color: var(--text);
    font-family: inherit;
    font-size: 18px;
    font-weight: 600;
    padding: 0 20px 0 0;
    cursor: pointer;
  }
  .currency-inline option { background: #1c1c1c; color: var(--text); font-weight: 500; }

  .footer {
    margin-top: 44px;
    padding-top: 26px;
    border-top: 1px solid var(--field-border);
    font-size: 14px;
    line-height: 1.8;
  }
  .footer a { text-decoration: none; transition: color .15s; }
  .footer .promo { color: var(--text-dim); }
  .footer .promo a { color: var(--text-dim); }
  .footer .promo a:hover { color: var(--text); }
  .footer .promo a strong { color: var(--accent); font-weight: 700; }
  .footer .promo a:hover strong { color: #ffb14d; }
  .footer .tip { margin-top: 10px; }
  .footer .tip a { color: var(--accent); font-weight: 600; }
  .footer .tip a:hover { color: #ffb14d; }

  /* Narrow screens: shrink amounts so large-value currencies don't crowd the badge */
  @media (max-width: 430px) {
    .field input { font-size: 26px; }
    .field { padding: 20px; }
  }
</style>
</head>
<body>
  <div class="container">
    <div class="logo">
      <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Satoshi (sat) symbol">
        <defs>
          <!-- Turbulence + displacement roughens the crisp edges into brush strokes -->
          <filter id="brush" x="-20%" y="-20%" width="140%" height="140%">
            <feTurbulence type="fractalNoise" baseFrequency="0.045" numOctaves="2" seed="6" result="noise"/>
            <feDisplacementMap in="SourceGraphic" in2="noise" scale="4" xChannelSelector="R" yChannelSelector="G"/>
          </filter>
        </defs>
        <g fill="var(--accent)" filter="url(#brush)">
          <!-- top tick -->
          <rect x="45.8" y="11" width="8.4" height="14.5" rx="4" transform="rotate(-7 50 18.25)"/>
          <!-- three horizontal strokes -->
          <rect x="23" y="32" width="54" height="8"   rx="4"/>
          <rect x="20" y="45.7" width="60" height="8.6" rx="4.3"/>
          <rect x="23" y="60" width="54" height="8"   rx="4"/>
          <!-- bottom tick -->
          <rect x="45.8" y="74.5" width="8.4" height="14.5" rx="4" transform="rotate(-7 50 81.75)"/>
        </g>
      </svg>
    </div>
    <h1>Sats to <span id="headingCur">USD</span> Converter</h1>
    <p class="subtitle">Live Satoshi &amp; Bitcoin Prices In 38 World Currencies</p>

    <div class="field">
      <input id="fiat" type="text" inputmode="decimal" value="63,049">
      <span class="badge">
        <span class="coin usd" id="fiatCoin">$</span>
        <select id="currency" class="currency-inline" aria-label="Display currency"></select>
      </span>
    </div>

    <div class="field">
      <input id="btc" type="text" inputmode="decimal" value="1">
      <span class="badge"><span class="coin btc">₿</span>BTC</span>
    </div>

    <div class="field">
      <input id="sats" type="text" inputmode="numeric" value="100,000,000">
      <span class="badge">
        <span class="coin coin-sats">
          <svg viewBox="0 0 80 80" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
            <path fill-rule="evenodd" clip-rule="evenodd" d="M80 40C80 45.2529 78.9654 50.4543 76.9552 55.3073C74.945 60.1604 71.9986 64.5699 68.2843 68.2843C64.5699 71.9986 60.1604 74.945 55.3073 76.9552C50.4543 78.9654 45.2529 80 40 80C34.7471 80 29.5457 78.9654 24.6927 76.9552C19.8396 74.945 15.4301 71.9986 11.7157 68.2843C8.00138 64.5699 5.05501 60.1604 3.04482 55.3073C1.03463 50.4543 -7.82739e-08 45.2529 0 40C1.58081e-07 29.3913 4.21427 19.2172 11.7157 11.7157C19.2172 4.21427 29.3913 0 40 0C50.6087 0 60.7828 4.21427 68.2843 11.7157C75.7857 19.2172 80 29.3913 80 40ZM25.3022 25.52L59.2444 34.6889L60.7422 28.1911L26.7956 19.0222L25.3022 25.52ZM49.8622 11.9644L48.0578 19.8489L41.6222 18.1067L43.4311 10.2222L49.8622 11.9644ZM36.5644 69.7778L38.3778 61.8933L31.9422 60.1556L30.1289 68.04L36.5644 69.7778ZM56.2133 47.8489L22.2711 38.6667L23.7644 32.1689L57.7067 41.3511L56.2133 47.8489ZM19.2533 51.8044L53.2 60.9778L54.6933 54.48L20.7467 45.3067L19.2533 51.8044Z" fill="#FF6106"/>
          </svg>
        </span>SATS
      </span>
    </div>

    <div class="info">
      <div id="athLine">All-time high: $126,080 on Oct 7, 2025 &nbsp;•&nbsp; Days since: 280</div>
      <div id="priceLine">Current price: $63,049, or $0.00063049 per 1 sat. Last checked --:--:-- <a id="refresh">Refresh</a></div>
      <div id="blockLine"></div>
    </div>

    <footer class="footer">
      <div class="promo">
        <a href="https://seqrets.app/?utm_source=satstousd.com&amp;utm_medium=footer&amp;utm_campaign=upsell" target="_blank" rel="noopener">
          Protect your Bitcoin for generations — <strong>seed storage &amp; inheritance by seQRets</strong> →
        </a>
      </div>
      <div class="tip">
        <a href="https://coinos.io/seQRets/receive" target="_blank" rel="noopener">⚡ Enjoying this? Send a tip — Lightning, Liquid, BTC or eCash</a>
      </div>
    </footer>
  </div>

<script>
const SATS_PER_BTC = 100_000_000;
const ATH_USD = 126080;          // all-time high, in USD
const ATH_DATE = '2025-10-07';   // date of the all-time high
const ATH_LABEL = 'Oct 7, 2025'; // display label for that date

// Common world currencies (code + name). All exist in Coinbase's USD rate table.
const CURRENCIES = [
  ['USD','US Dollar'], ['EUR','Euro'], ['GBP','British Pound'], ['JPY','Japanese Yen'],
  ['CNY','Chinese Yuan'], ['CHF','Swiss Franc'], ['CAD','Canadian Dollar'], ['AUD','Australian Dollar'],
  ['NZD','New Zealand Dollar'], ['HKD','Hong Kong Dollar'], ['SGD','Singapore Dollar'], ['INR','Indian Rupee'],
  ['KRW','South Korean Won'], ['BRL','Brazilian Real'], ['MXN','Mexican Peso'], ['ZAR','South African Rand'],
  ['SEK','Swedish Krona'], ['NOK','Norwegian Krone'], ['DKK','Danish Krone'], ['PLN','Polish Zloty'],
  ['TRY','Turkish Lira'], ['AED','UAE Dirham'], ['SAR','Saudi Riyal'], ['ILS','Israeli Shekel'],
  ['THB','Thai Baht'], ['IDR','Indonesian Rupiah'], ['MYR','Malaysian Ringgit'], ['PHP','Philippine Peso'],
  ['VND','Vietnamese Dong'], ['TWD','Taiwan Dollar'], ['CZK','Czech Koruna'], ['HUF','Hungarian Forint'],
  ['RON','Romanian Leu'], ['CLP','Chilean Peso'], ['COP','Colombian Peso'], ['ARS','Argentine Peso'],
  ['NGN','Nigerian Naira'], ['UAH','Ukrainian Hryvnia']
];

// state.price = BTC price in the selected currency; usdRate = USD -> selected currency
const state = { currency: 'USD', price: 63049, usdRate: 1 };
let btcUsd = 63049;      // live BTC price in USD
let rates = { USD: 1 };  // USD -> currency rate table (from Coinbase)

// Currency symbol via Intl (shortest form), falling back to the ISO code
function currencySymbol(code) {
  try {
    const parts = new Intl.NumberFormat('en', { style: 'currency', currency: code, currencyDisplay: 'narrowSymbol' }).formatToParts(1);
    const p = parts.find(x => x.type === 'currency');
    return p ? p.value : code;
  } catch (e) { return code; }
}

// Whole days between the ATH date and today, computed live
function daysSince(iso) {
  const then = new Date(iso + 'T00:00:00');
  return Math.floor((Date.now() - then.getTime()) / 86_400_000);
}

const el = id => document.getElementById(id);
const fiatEl = el('fiat'), btcEl = el('btc'), satsEl = el('sats');

function fmt(n, maxDec) {
  if (!isFinite(n)) return '0';
  return n.toLocaleString('en-US', { maximumFractionDigits: maxDec });
}
// Fiat amounts: 2 decimals for values >= 1, but up to 8 for sub-unit amounts
// so a handful of sats doesn't round away to 0.00.
function fmtFiat(n) {
  if (!isFinite(n)) return '0';
  const abs = Math.abs(n);
  const maxDec = (abs >= 1 || abs === 0) ? 2 : 8;
  return n.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: maxDec });
}
const parse = s => parseFloat(String(s).replace(/,/g, '')) || 0;

// Recalculate all fields from a satoshi amount, skipping the field being typed in
function render(fromSats, skip) {
  const btc = fromSats / SATS_PER_BTC;
  const fiat = btc * state.price;
  if (skip !== 'fiat') fiatEl.value = fmtFiat(fiat);
  if (skip !== 'btc')  btcEl.value  = fmt(btc, 8);
  if (skip !== 'sats') satsEl.value = fmt(fromSats, 0);
  updateInfo();
}

function updateInfo() {
  const sym = currencySymbol(state.currency);
  const perSat = state.price / SATS_PER_BTC;
  const t = new Date().toLocaleTimeString('en-US');
  const athVal = ATH_USD * state.usdRate;
  el('athLine').innerHTML = `All-time high: ${sym}${fmt(athVal, 0)} on ${ATH_LABEL} &nbsp;•&nbsp; Days since: ${daysSince(ATH_DATE)}`;
  el('priceLine').innerHTML = `Current price: ${sym}${fmt(state.price, 0)}, or ${sym}${perSat.toFixed(8)} per 1 sat. Last checked ${t} <a id="refresh">Refresh</a>`;
  el('refresh').addEventListener('click', fetchData);
  // Tab title always shows the live USD price, regardless of selected currency
  document.title = `$${fmt(btcUsd, 0)} · Sats to USD`;
}

fiatEl.addEventListener('input', () => render(parse(fiatEl.value) / state.price * SATS_PER_BTC, 'fiat'));
btcEl.addEventListener('input',  () => render(parse(btcEl.value) * SATS_PER_BTC, 'btc'));
satsEl.addEventListener('input', () => render(parse(satsEl.value), 'sats'));

// Apply the selected currency using the cached BTC price + rate table (no network)
function applyCurrency() {
  state.usdRate = parseFloat(rates[state.currency]) || 1;
  state.price = btcUsd * state.usdRate;
  const sym = currencySymbol(state.currency);
  el('headingCur').textContent = state.currency;
  const coin = el('fiatCoin');
  coin.textContent = sym;
  coin.style.fontSize = sym.length > 1 ? '11px' : '16px';
  render(parse(satsEl.value), null);
}

// Live data from Coinbase (no API key required): BTC price in USD plus the full
// USD exchange-rate table. Any currency is derived by cross-rate from these two.
//   https://api.coinbase.com/v2/prices/BTC-USD/spot
//   https://api.coinbase.com/v2/exchange-rates?currency=USD
async function fetchData() {
  try {
    const [spotR, ratesR] = await Promise.all([
      fetch('https://api.coinbase.com/v2/prices/BTC-USD/spot'),
      fetch('https://api.coinbase.com/v2/exchange-rates?currency=USD')
    ]);
    const spot = await spotR.json();
    const rj = await ratesR.json();
    const p = parseFloat(spot?.data?.amount);
    if (p) btcUsd = p;
    if (rj?.data?.rates) rates = rj.data.rates;
  } catch (err) {
    console.warn('Data fetch failed, using last known values', err);
  }
  applyCurrency();
}

// Painted sats logo as the tab favicon (same brush-filtered mark as the header)
function setFavicon() {
  const svg = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">`
    + `<defs><filter id="b" x="-20%" y="-20%" width="140%" height="140%">`
    + `<feTurbulence type="fractalNoise" baseFrequency="0.045" numOctaves="2" seed="6" result="n"/>`
    + `<feDisplacementMap in="SourceGraphic" in2="n" scale="4" xChannelSelector="R" yChannelSelector="G"/>`
    + `</filter></defs>`
    + `<circle cx="50" cy="50" r="50" fill="#000"/>`
    + `<g fill="#F7931A" filter="url(#b)">`
    + `<rect x="45.8" y="15" width="8.4" height="16" rx="4" transform="rotate(-7 50 23)"/>`
    + `<rect x="21" y="37" width="58" height="9" rx="4.5"/>`
    + `<rect x="18" y="47.5" width="64" height="9.5" rx="4.7"/>`
    + `<rect x="21" y="58" width="58" height="9" rx="4.5"/>`
    + `<rect x="45.8" y="69" width="8.4" height="16" rx="4" transform="rotate(-7 50 77)"/>`
    + `</g></svg>`;
  let link = document.querySelector("link[rel='icon']");
  if (!link) { link = document.createElement('link'); link.rel = 'icon'; document.head.appendChild(link); }
  link.type = 'image/svg+xml';
  link.href = 'data:image/svg+xml,' + encodeURIComponent(svg);
}

// Restore the visitor's last-chosen currency, if valid
try {
  const saved = localStorage.getItem('currency');
  if (saved && CURRENCIES.some(([code]) => code === saved)) state.currency = saved;
} catch (e) { /* localStorage unavailable (e.g. private mode) */ }

// Build the currency dropdown
const sel = el('currency');
CURRENCIES.forEach(([code, name]) => {
  const o = document.createElement('option');
  o.value = code;
  o.textContent = code;
  o.title = name;
  if (code === state.currency) o.selected = true;
  sel.appendChild(o);
});
sel.addEventListener('change', () => {
  state.currency = sel.value;
  try { localStorage.setItem('currency', state.currency); } catch (e) { /* ignore */ }
  applyCurrency(); // instant, from cached data; next refresh keeps it live
});

// Live Bitcoin block height — the "timechain" timestamp. Keyless, CORS-open.
const HEIGHT_TIMEOUT_MS = 4_000;
async function fetchHeight() {
  // Blockstream first: mempool.space is unreachable from some networks and,
  // without a timeout, a stalled request blocks the fallback for 30s+.
  const sources = [
    'https://blockstream.info/api/blocks/tip/height',
    'https://mempool.space/api/blocks/tip/height'
  ];
  for (const url of sources) {
    try {
      const ctrl = new AbortController();
      const timer = setTimeout(() => ctrl.abort(), HEIGHT_TIMEOUT_MS);
      let r;
      try { r = await fetch(url, { signal: ctrl.signal }); }
      finally { clearTimeout(timer); }
      const h = parseInt(await r.text(), 10);
      if (Number.isFinite(h)) {
        el('blockLine').innerHTML = `⛓ Block <a href="https://mempool.space/block/${h}" target="_blank" rel="noopener">${fmt(h, 0)}</a>`;
        return;
      }
    } catch (e) { /* try the next source */ }
  }
  // both failed: leave the last known height in place
}

// Initialize
setFavicon();
applyCurrency();
fetchData();
fetchHeight();

// Auto-refresh: price every 5s, block height every 60s
const REFRESH_MS = 5_000;
setInterval(fetchData, REFRESH_MS);
setInterval(fetchHeight, 60_000);
</script>
</body>
</html>