create a web form root cause document as a web page. Include Event summary, Resolution summary Duration Event timeline, root cause, Remediation actions taken. make it able to be able to produce a .pdf as the finished product. Leave a space at the top for a title and company logo. 	include this script:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Root Cause Analysis Document</title>
<style>
  body {
    font-family: Arial, sans-serif;
    margin: 2rem;
    background: #f9f9f9;
    color: #333;
  }
  h1, h2 {
    color: #004080;
  }
  .container {
    max-width: 900px;
    margin: auto;
    background: white;
    padding: 2rem 3rem;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
  }
  section {
    margin-bottom: 2rem;
  }
  .timeline {
    border-left: 3px solid #004080;
    padding-left: 1rem;
  }
  .timeline-item {
    margin-bottom: 1rem;
    position: relative;
  }
  .timeline-item::before {
    content: '';
    position: absolute;
    left: -10px;
    top: 5px;
    width: 10px;
    height: 10px;
    background: #004080;
    border-radius: 50%;
  }
  button {
    background-color: #004080;
    color: white;
    border: none;
    padding: 0.75rem 1.5rem;
    font-size: 1rem;
    cursor: pointer;
    border-radius: 4px;
  }
  button:hover {
    background-color: #003060;
  }
</style>
</head>
<body>

<div class="container" id="rca-document">
  <h1>Root Cause Analysis Document</h1>

  <section>
    <h2>Event Summary</h2>
    <p>The system experienced a critical outage affecting all users, resulting in service unavailability for approximately 3 hours. The outage was caused by a failure in the database cluster, which led to cascading failures in dependent services.</p>
  </section>

  <section>
    <h2>Resolution Summary</h2>
    <p>The database cluster was restored by restarting the primary node and applying a patch to fix the underlying bug. Dependent services were gradually brought back online and monitored to ensure stability.</p>
  </section>

  <section>
    <h2>Duration</h2>
    <p><strong>Start:</strong> 2025-05-15 10:00 AM UTC<br />
       <strong>End:</strong> 2025-05-15 1:00 PM UTC<br />
       <strong>Total Downtime:</strong> 3 hours</p>
  </section>

  <section>
    <h2>Event Timeline</h2>
    <div class="timeline">
      <div class="timeline-item">
        <strong>10:00 AM:</strong> Initial alerts received for database cluster failure.
      </div>
      <div class="timeline-item">
        <strong>10:15 AM:</strong> Incident response team assembled and began investigation.
      </div>
      <div class="timeline-item">
        <strong>11:00 AM:</strong> Identified primary node failure in the database cluster.
      </div>
      <div class="timeline-item">
        <strong>12:00 PM:</strong> Restarted primary node and applied patch.
      </div>
      <div class="timeline-item">
        <strong>12:30 PM:</strong> Dependent services gradually restored.
      </div>
      <div class="timeline-item">
        <strong>1:00 PM:</strong> Full service restored and monitoring continued.
      </div>
    </div>
  </section>

  <section>
    <h2>Root Cause</h2>
    <p>The root cause was a software bug in the database cluster's failover mechanism, which caused the primary node to become unresponsive under high load conditions.</p>
  </section>

  <section>
    <h2>Remediation Actions Taken</h2>
    <ul>
      <li>Applied a patch to fix the failover mechanism bug.</li>
      <li>Improved monitoring and alerting for database cluster health.</li>
      <li>Updated runbooks and incident response procedures.</li>
      <li>Scheduled a review of database cluster capacity and failover testing.</li>
    </ul>
  </section>
</div>

<div style="text-align:center; margin-top: 2rem;">
  <button id="download-pdf">Download as PDF</button>
</div>

<!-- Include html2pdf.js from CDN -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js"></script>
<script>
  document.getElementById('download-pdf').addEventListener('click', () => {
    const element = document.getElementById('rca-document');
    const opt = {
      margin:       0.5,
      filename:     'Root_Cause_Analysis_Document.pdf',
      image:        { type: 'jpeg', quality: 0.98 },
      html2canvas:  { scale: 2 },
      jsPDF:        { unit: 'in', format: 'letter', orientation: 'portrait' }
    };
    html2pdf().set(opt).from(element).save();
  });
</script>

</body>
</html>