Provider Earnings Calculator

<main class="wrap">
  <header class="head">
    <span class="eyebrow">Animica &middot; Useful-work compute</span>
    <h1>Provider Earnings Calculator</h1>
    <p class="sub">Estimate what your GPUs could earn doing Animica useful work. Tune every input &mdash; the numbers update live.</p>
  </header>

  <section class="grid" aria-label="Inputs">
    <div class="field">
      <label for="gpus">GPUs</label>
      <input id="gpus" type="number" inputmode="numeric" min="0" step="1" value="4" />
      <span class="hint">How many GPUs you run.</span>
    </div>

    <div class="field">
      <label for="hours">Hours online / day</label>
      <input id="hours" type="number" inputmode="decimal" min="0" max="24" step="0.5" value="20" />
      <span class="hint">Uptime per GPU each day.</span>
    </div>

    <div class="field">
      <label for="jobs">Jobs / day per GPU</label>
      <input id="jobs" type="number" inputmode="decimal" min="0" step="1" value="120" />
      <span class="hint">Useful-work jobs a single GPU completes daily.</span>
    </div>

    <div class="field">
      <label for="anmPerJob">ANM / job</label>
      <input id="anmPerJob" type="number" inputmode="decimal" min="0" step="0.0001" value="0.05" />
      <span class="hint">Reward paid per completed job.</span>
    </div>

    <div class="field field--price">
      <label for="price">ANM price (USD)</label>
      <div class="price-row">
        <span class="prefix">$</span>
        <input id="price" type="number" inputmode="decimal" min="0" step="0.0001" value="0.25" />
      </div>
      <span class="hint">Editable estimate &mdash; not a live or guaranteed price.</span>
    </div>
  </section>

  <section class="results" aria-label="Estimated earnings">
    <div class="card">
      <span class="card-label">Daily</span>
      <span class="card-anm" id="dailyAnm">0 ANM</span>
      <span class="card-usd" id="dailyUsd">$0.00</span>
    </div>
    <div class="card card--accent">
      <span class="card-label">Monthly</span>
      <span class="card-anm" id="monthlyAnm">0 ANM</span>
      <span class="card-usd" id="monthlyUsd">$0.00</span>
    </div>
  </section>

  <section class="breakdown" aria-label="Breakdown">
    <div class="row"><span>Jobs / day (all GPUs)</span><span id="jobsTotal">0</span></div>
    <div class="row"><span>Effective uptime</span><span id="uptime">0%</span></div>
    <div class="row"><span>ANM / hour (all GPUs)</span><span id="anmHour">0</span></div>
  </section>

  <p class="disclaimer">
    These figures are <strong>estimates only</strong>. Actual results depend on job supply,
    hardware, network conditions, and the ANM price &mdash; none of which are guaranteed.
    Provider settlement and payouts are <strong>prepared for the next phase (coming soon)</strong>
    and are not live. Nothing here is a promise of earnings, price, or income.
  </p>

  <footer class="powered">Powered by Animica</footer>
</main>