Untitled

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Succession & Asset Protection Dashboard</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      background: #f7f9fc;
      padding: 2rem;
      max-width: 800px;
      margin: auto;
    }
    .dashboard {
      background: white;
      padding: 2rem;
      border-radius: 16px;
      box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    }
    .gauge-container {
      text-align: center;
      margin-bottom: 2rem;
    }
    .gauge {
      width: 200px;
      height: 100px;
      background: conic-gradient(
        red 0% 33%, 
        yellow 33% 66%, 
        green 66% 100%
      );
      border-radius: 100px 100px 0 0;
      position: relative;
      margin: auto;
    }
    .needle {
      width: 4px;
      height: 100px;
      background: black;
      position: absolute;
      bottom: 0;
      left: 50%;
      transform-origin: bottom;
      transform: rotate(0deg);
    }
    .score {
      font-size: 1.2rem;
      margin-top: 1rem;
    }
    .checklist {
      display: grid;
      gap: 1rem;
    }
    .checklist label {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      font-size: 1rem;
    }
    .summary {
      margin-top: 2rem;
      font-weight: bold;
    }
  </style>
</head>
<body>
  <div class="dashboard">
    <h2>Succession & Asset Protection Dashboard</h2>
    <div class="gauge-container">
      <div class="gauge">
        <div class="needle" id="needle"></div>
      </div>
      <div class="score" id="score">Succession Score: 0/6 – High Risk</div>
    </div>

    <form class="checklist" id="successionForm">
      <label><input type="checkbox" name="item" /> Do you have a business?</label>
      <label><input type="checkbox" name="item" /> Do you have a trust?</label>
      <label><input type="checkbox" name="item" /> Do you have a will?</label>
      <label><input type="checkbox" name="item" /> Do you have an enduring power of attorney?</label>
      <label><input type="checkbox" name="item" /> Do you have an advanced health care directive?</label>
      <label><input type="checkbox" name="item" /> Do you have a statement of wishes?</label>
    </form>

    <div class="summary" id="summary"></div>
  </div>

  <script>
    const form = document.getElementById('successionForm');
    const scoreDisplay = document.getElementById('score');
    const needle = document.getElementById('needle');
    const summary = document.getElementById('summary');

    form.addEventListener('change', () => {
      const checked = form.querySelectorAll('input[type="checkbox"]:checked').length;
      const total = 6;
      const angle = -90 + (checked / total) * 180;
      needle.style.transform = `rotate(${angle}deg)`;
      
      let status = 'High Risk';
      if (checked >= 5) status = 'Well Prepared';
      else if (checked >= 3) status = 'Moderate Risk';

      scoreDisplay.textContent = `Succession Score: ${checked}/6 – ${status}`;
      summary.textContent = checked === total ? 'All key documents are in place. Great job!' : 'Consider updating or completing missing documents.';
    });
  </script>
</body>
</html>