web-artifacts-builder

Web Artifacts Builder Skill

Two Approaches

Approach A: Self-Contained HTML (No Build Step)

Best for: calculators, visualizations, simple tools, games.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Budget Calculator</title>
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }

    body {
      font-family: 'Inter', system-ui, sans-serif;
      background: #0f172a;
      color: #e2e8f0;
      min-height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 2rem;
    }

    .card {
      background: #1e293b;
      border: 1px solid #334155;
      border-radius: 1rem;
      padding: 2rem;
      width: 100%;
      max-width: 480px;
    }

    h1 {
      font-size: 1.5rem;
      font-weight: 700;
      margin-bottom: 1.5rem;
      color: #f8fafc;
    }

    .field {
      margin-bottom: 1rem;
    }

    label {
      display: block;
      font-size: 0.875rem;
      color: #94a3b8;
      margin-bottom: 0.4rem;
    }

    input {
      width: 100%;
      padding: 0.6rem 0.8rem;
      background: #0f172a;
      border: 1px solid #475569;
      border-radius: 0.5rem;
      color: #f8fafc;
      font-size: 1rem;
      outline: none;
      transition: border-color 0.2s;
    }

    input:focus { border-color: #6366f1; }

    button {
      width: 100%;
      padding: 0.75rem;
      background: #6366f1;
      color: white;
      border: none;
      border-radius: 0.5rem;
      font-size: 1rem;
      font-weight: 600;
      cursor: pointer;
      margin-top: 1rem;
      transition: background 0.2s;
    }

    button:hover { background: #4f46e5; }

    .result {
      margin-top: 1.5rem;
      padding: 1rem;
      background: #0f172a;
      border-radius: 0.5rem;
      border-left: 4px solid #6366f1;
      display: none;
    }

    .result.show { display: block; }
    .result-label { color: #94a3b8; font-size: 0.875rem; }
    .result-value { color: #f8fafc; font-size: 1.5rem; font-weight: 700; }
  </style>
</head>
<body>
  <div class="card">
    <h1>💰 Budget Calculator</h1>

    <div class="field">
      <label>Monthly Income ($)</label>
      <input type="number" id="income" placeholder="5000">
    </div>

    <div class="field">
      <label>Monthly Expenses ($)</label>
      <input type="number" id="expenses" placeholder="3500">
    </div>

    <button onclick="calculate()">Calculate Savings</button>

    <div class="result" id="result">
      <div class="result-label">Monthly Savings</div>
      <div class="result-value" id="savings-value"></div>
      <div class="result-label" style="margin-top: 0.5rem" id="savings-pct"></div>
    </div>
  </div>

  <script>
    function calculate() {
      const income = parseFloat(document.getElementById('income').value) || 0
      const expenses = parseFloat(document.getElementById('expenses').value) || 0
      const savings = income - expenses
      const pct = income > 0 ? ((savings / income) * 100).toFixed(1) : 0

      const result = document.getElementById('result')
      document.getElementById('savings-value').textContent = `$${savings.toLocaleString()}`
      document.getElementById('savings-pct').textContent = `${pct}% of income`
      result.classList.add('show')
    }
  </script>
</body>
</html>