<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>e‑Subscribe Updates</title> 
<style>
 /* Base styles */
    body {
      margin: 0;
      overflow: hidden;
      background-color: #ffffff;
      font-family: Arial, sans‑serif;
    }

    .gd-container {
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 13px 2px 1px 2px;
      gap: 10px;
      width: 98%;
      background-color: #ffffff;
    }

    .gd-icon img {
      width: 48px;
      height: 48px;
    }

    .gd-header-text {
      display: flex;
      flex-direction: column;
      justify-content: center;
      line-height: 1.2;
    }

    h2.es-title {
      font-size: 11vmin;
      font-weight: bold;
      margin: 3px !important;
      color: #4a4b6f;
    }

    .emails-from {
    font-size: 14px;
}

    p.memname {
    font-weight: 600;
    margin-bottom: 3px;
}

    .gd-content {
      text-align: center;
      padding: 3px;
      background-color: #ffffff;
    }

    form {
      display: inline-block;
      text-align: center;
      line-height: normal;
      font-size: 14px;
    }

    label {
      display: block;
      margin-bottom: 3px;
      font-weight: normal;
    }

    input[type="email"] {
      width: 70%;
      padding: 5px;
      margin: 10px 5px 5px 0px;
      border: 1px solid #666666; /* Darkened border for better contrast */
      border-radius: 4px;
    }

    input[type="email"]:focus {
      outline: 2px solid #0055a4;
      outline-offset: 2px;
    }

    input[type="submit"] {
      padding: 6px 9px;
      background-color: #0055a4;
      color: #ffffff;
      font-weight: 600;
      border: none;
      border-radius: 4px;
      cursor: pointer;
    }

    input[type="submit"]:hover,
    input[type="submit"]:focus {
      background-color: #003f7f;
    }

    /* Skip link */
    .skip-link {
      position: absolute;
      top: -40px;
      left: 0;
      background: #0055a4;
      color: #ffffff;
      padding: 8px 16px;
      z-index: 100;
      text-decoration: none;
      font-size: 16px;
    }

    .skip-link:focus {
      top: 0;
    }

    /* Error message styling */
    .error-message {
      color: #b00020;
      font-size: 0.9em;
      margin-top: 4px;
    }
</style>
<script type="text/javascript" src="https://www.oregonlegislature.gov/AssemSite_CSS/govdelivery-script.js"></script>
</head>

<body>

  <header class="gd-container">
    <div class="gd-icon">
      <img src="https://www.oregonlegislature.gov/PublishingImages/Mail.png"
           alt="Mail icon for e‑Subscribe" />
    </div>
    <div class="gd-header-text">
      <h2 class="es-title">e‑Subscribe</h2>
      <span class="emails-from">Email updates from</span>
    </div>
  </header>

  <main id="main-content" class="gd-content">
    <form action="https://public.govdelivery.com/accounts/ORLEG/subscribers/qualify"
          target="_blank"
          novalidate
          onsubmit="return validateEmailForm(this);">
      <input id="topic_id" name="topic_id" type="hidden" value="ORLEG_778" />
      <p class="memname">Senator Kathleen Taylor</p>
      <label for="email">Enter your email address:</label>
      <input id="email" name="email" type="email" aria-required="true" required
             aria-describedby="email-error" />      
      <input type="submit" value="Go" />
      <div id="email-error" class="error-message" aria-live="polite"></div> 
    
    </form>
  </main>

<script>
  function validateEmailForm(form) {
    var email = form.email.value.trim();
    var errorDiv = document.getElementById('email-error');
    errorDiv.textContent = '';
    
    if (!email) {
      errorDiv.textContent = 'Email address is required.';
      form.email.focus();
      return false;
    }

    // Corrected email pattern
    var pattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    if (!pattern.test(email)) {
      errorDiv.textContent = 'Please enter a valid email address.';
      form.email.focus();
      return false;
    }

    return true;
  }
</script>
</body>
</html>