can you edit the response when the answer to all is zet to not be email but just a message telling me that the documents are complete and proceed with registering. Also think of possible improvements you can do with this and send me the entire new updated html code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document Submission Checklist</title>
  <!-- Include Google Fonts -->
  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet">
  <!-- Include Font Awesome for Icons -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
  <!-- Include CSS for styling -->
  <style>
    body {
      font-family: 'Roboto', sans-serif;
      background: linear-gradient(to right, #667eea, #764ba2);
      margin: 0;
      padding: 0;
      color: #333;
    }

    .container {
      max-width: 800px;
      margin: 50px auto;
      background: #fff;
      border-radius: 10px;
      padding: 30px;
      box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    }

    h1 {
      text-align: center;
      color: #444;
    }

    .question {
      margin-bottom: 20px;
      position: relative;
    }

    .question label {
      display: block;
      font-size: 18px;
      margin-bottom: 10px;
      font-weight: 500;
    }

    .question select {
      width: 100%;
      padding: 10px;
      border-radius: 5px;
      border: 1px solid #ccc;
      font-size: 16px;
    }

    .hidden {
      display: none;
    }

    .btn {
      display: block;
      width: 100%;
      padding: 15px;
      text-align: center;
      background: #667eea;
      color: #fff;
      border: none;
      border-radius: 5px;
      font-size: 18px;
      cursor: pointer;
      margin-top: 30px;
      transition: background 0.3s ease;
    }

    .btn:hover {
      background: #5a67d8;
    }

    .result {
      margin-top: 30px;
      background: #f7fafc;
      padding: 20px;
      border-radius: 5px;
    }

    .result textarea {
      width: 100%;
      height: 300px;
      padding: 15px;
      font-size: 16px;
      border: 1px solid #e2e8f0;
      border-radius: 5px;
      resize: none;
    }

    /* Animations */
    .fade-in {
      animation: fadeIn 0.5s ease forwards;
    }

    @keyframes fadeIn {
      from { opacity: 0; transform: translateY(-10px); }
      to { opacity: 1; transform: translateY(0); }
    }
  </style>
</head>
<body>

  <div class="container">
    <h1>Document Submission Checklist</h1>
    
    <div class="question">
      <label for="with-w9">With W9?</label>
      <select id="with-w9">
        <option value="" disabled selected>Select Yes or No</option>
        <option value="yes">Yes</option>
        <option value="no">No</option>
      </select>
    </div>

    <div class="question hidden" id="w9-version-section">
      <label for="w9-version">Is it the 2024 version of the W9 form?</label>
      <select id="w9-version">
        <option value="" disabled selected>Select Yes or No</option>
        <option value="2024">Yes, 2024 version</option>
        <option value="not-2024">No, not 2024 version</option>
      </select>
    </div>

    <div class="question">
      <label for="with-coi">With Certificate of Insurance (COI)?</label>
      <select id="with-coi">
        <option value="" disabled selected>Select Yes or No</option>
        <option value="yes">Yes</option>
        <option value="no">No</option>
      </select>
    </div>

    <div class="question hidden" id="coi-holder-section">
      <label for="coi-correct">Is the Certificate Holder correct?</label>
      <select id="coi-correct">
        <option value="" disabled selected>Select Yes or No</option>
        <option value="correct">Yes, correct</option>
        <option value="incorrect">No, incorrect</option>
      </select>
    </div>

    <div class="question">
      <label for="with-vendor-form">With Vendor Request Form?</label>
      <select id="with-vendor-form">
        <option value="" disabled selected>Select Yes or No</option>
        <option value="yes">Yes</option>
        <option value="no">No</option>
      </select>
    </div>

    <div class="question">
      <label for="with-dot">With DOT#?</label>
      <select id="with-dot">
        <option value="" disabled selected>Select Yes or No</option>
        <option value="yes">Yes</option>
        <option value="no">No</option>
      </select>
    </div>

    <div class="question">
      <label for="with-ach">With ACH?</label>
      <select id="with-ach">
        <option value="" disabled selected>Select Yes or No</option>
        <option value="yes">Yes</option>
        <option value="no">No</option>
      </select>
    </div>

    <button class="btn" onclick="generateEmail()">Generate Email Response</button>

    <div class="result hidden fade-in" id="result">
      <h2>Email Response:</h2>
      <textarea id="emailContent" readonly></textarea>
    </div>

  </div>

  <!-- Include JavaScript for interactivity -->
  <script>
    // Get DOM elements
    const w9Select = document.getElementById('with-w9');
    const w9VersionSection = document.getElementById('w9-version-section');
    const coiSelect = document.getElementById('with-coi');
    const coiHolderSection = document.getElementById('coi-holder-section');
    const resultSection = document.getElementById('result');

    // Event listeners for showing/hiding follow-up questions
    w9Select.addEventListener('change', function() {
      if (this.value === 'yes') {
        w9VersionSection.classList.remove('hidden');
        w9VersionSection.classList.add('fade-in');
      } else {
        w9VersionSection.classList.add('hidden');
        document.getElementById('w9-version').value = '';
      }
    });

    coiSelect.addEventListener('change', function() {
      if (this.value === 'yes') {
        coiHolderSection.classList.remove('hidden');
        coiHolderSection.classList.add('fade-in');
      } else {
        coiHolderSection.classList.add('hidden');
        document.getElementById('coi-correct').value = '';
      }
    });

    // Function to generate the email response
    function generateEmail() {
      let emailContent = '';
      let recipientName = '[Recipient\'s Name]';
      emailContent += `Hi ${recipientName},\n\n`;

      // Get values from the form
      let withW9 = document.getElementById('with-w9').value;
      let w9Version = document.getElementById('w9-version').value;
      let withCOI = document.getElementById('with-coi').value;
      let coiCorrect = document.getElementById('coi-correct').value;
      let withVendorForm = document.getElementById('with-vendor-form').value;
      let withDOT = document.getElementById('with-dot').value;
      let withACH = document.getElementById('with-ach').value;

      // Flags to track missing documents
      let needW9 = false;
      let wrongW9Version = false;
      let needCOI = false;
      let incorrectCOIHolder = false;
      let needVendorForm = false;
      let needDOT = false;
      let needACH = false;

      // Logic for W9
      if (withW9 === 'no') {
        needW9 = true;
      } else if (withW9 === 'yes') {
        if (w9Version === '2024') {
          // All good
        } else if (w9Version === 'not-2024') {
          wrongW9Version = true;
        }
      }

      // Logic for COI
      if (withCOI === 'no') {
        needCOI = true;
      } else if (withCOI === 'yes') {
        if (coiCorrect === 'correct') {
          // All good
        } else if (coiCorrect === 'incorrect') {
          incorrectCOIHolder = true;
        }
      }

      // Logic for Vendor Request Form
      if (withVendorForm === 'no') {
        needVendorForm = true;
      }

      // Logic for DOT#
      if (withDOT === 'no') {
        needDOT = true;
      }

      // Logic for ACH
      if (withACH === 'no') {
        needACH = true;
      }

      // Build the email content based on the flags
      if (!needW9 && !wrongW9Version && !needCOI && !incorrectCOIHolder && withVendorForm === 'yes' && withDOT === 'yes') {
        emailContent += 'All the required documents are in order. You may proceed with the registration.\n\n';
      } else {
        if (needW9) {
          emailContent += 'Please provide the 2024 version of the W-9 form. A blank copy is attached for your convenience.\n\n';
        }
        if (wrongW9Version) {
          emailContent += 'It appears that the W-9 form provided is not the 2024 version. Kindly complete and return the 2024 version. A blank copy is attached for your convenience.\n\n';
        }
        if (needCOI) {
          emailContent += 'Please provide the Certificate of Insurance (COI).\n\n';
        }
        if (incorrectCOIHolder) {
          emailContent += 'We noticed that the certificate holder information on the Certificate of Insurance (COI) is incorrect. Please refer to the attached image for the correct details and provide an updated COI.\n\n';
        }
        if (needVendorForm) {
          emailContent += 'Kindly complete and return the Vendor Request Form. A blank copy is attached for your convenience.\n\n';
        }
        if (needDOT) {
          emailContent += 'Please provide the DOT (Department of Transportation) number.\n\n';
        }
        if (needACH) {
          emailContent += 'Additionally, if they are for payables, please complete and return the attached ACH form.\n\n';
        }
      }

      emailContent += 'Thank you.\n';

      // Display the result
      document.getElementById('emailContent').value = emailContent;
      resultSection.classList.remove('hidden');
      resultSection.scrollIntoView({ behavior: 'smooth' });
    }
  </script>

</body>
</html>

edit the part for dot to instead tell their dot. remove the best regard part . in incorrect certificate holder part make it to instead tell please refer to the image below for correct details. if the answer is all no reprhrase the part telling thankyou for submitting this documents because no duments submitted for this case right? improve the code overall and the webpage