Untitled

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Illustration Pricing Calculator</title>
  <style>
    body { font-family: sans-serif; padding: 20px; max-width: 600px; margin: auto; }
    label { display: block; margin-top: 10px; }
    input, select { width: 100%; padding: 6px; margin-top: 4px; }
    .total { font-size: 24px; margin-top: 20px; font-weight: bold; }
  </style>
</head>
<body>
  <h1>Illustration Pricing Calculator</h1>

  <label>
    Illustration Type:
    <select id="type">
      <option value="portrait">Portrait - $50</option>
      <option value="half">Half Body - $70</option>
      <option value="full">Full Body - $100</option>
    </select>
  </label>

  <label>
    Extra Characters ($30 each):
    <input type="number" id="extras" min="0" value="0">
  </label>

  <label>
    Detailed Background (+$40):
    <input type="checkbox" id="background">
  </label>

  <label>
    Commercial License (+$60):
    <input type="checkbox" id="commercial">
  </label>

  <label>
    Rush Delivery (+$50):
    <input type="checkbox" id="rush">
  </label>

  <div class="total" id="total">Total: $0</div>

  <script>
    const type = document.getElementById('type');
    const extras = document.getElementById('extras');
    const background = document.getElementById('background');
    const commercial = document.getElementById('commercial');
    const rush = document.getElementById('rush');
    const total = document.getElementById('total');

    const basePrices = {
      portrait: 50,
      half: 70,
      full: 100
    };

    function calculateTotal() {
      let base = basePrices[type.value];
      let extraChar = parseInt(extras.value) * 30;
      let bg = background.checked ? 40 : 0;
      let com = commercial.checked ? 60 : 0;
      let rushFee = rush.checked ? 50 : 0;

      let final = base + extraChar + bg + com + rushFee;
      total.textContent = `Total: $${final}`;
    }

    // Add event listeners
    type.addEventListener('change', calculateTotal);
    extras.addEventListener('input', calculateTotal);
    background.addEventListener('change', calculateTotal);
    commercial.addEventListener('change', calculateTotal);
    rush.addEventListener('change', calculateTotal);

    // Initial calculation
    calculateTotal();
  </script>
</body>
</html>
Editor is loading...