Bookshelf/mockups/signup.php

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Sign Up - B.D. Murphy</title>
  <?php wp_head(); ?>
  <style>
    .form-group {
      margin-bottom: 1.5rem;
    }
    .form-group label {
      display: block;
      font-weight: bold;
      margin-bottom: 0.5rem;
      color: var(--bdm-navy);
    }
    .form-group input[type="text"],
    .form-group input[type="email"] {
      width: 100%;
      padding: 0.75rem;
      border: 1px solid #ccc;
      border-radius: 4px;
      font-family: var(--font-body);
      font-size: 1rem;
    }
    .form-group input:focus {
      outline: none;
      border-color: var(--bdm-navy);
      box-shadow: 0 0 0 2px rgba(27, 58, 107, 0.2);
    }
    .checkbox-group {
      margin-bottom: 0.5rem;
      display: flex;
      align-items: flex-start;
      gap: 0.5rem;
    }
    .checkbox-group input[type="checkbox"] {
      margin-top: 0.3rem;
    }
    .checkbox-group label {
      font-weight: normal;
      cursor: pointer;
    }
  </style>
</head>
<body>

  <header class="site-header">
    <img src="<?php echo get_template_directory_uri(); ?>/assets/images/Icon_Quill_BDMurphy_Black_WhtBG.jpg" alt="B.D. Murphy Logo" class="site-logo">
    <img src="<?php echo get_template_directory_uri(); ?>/assets/images/ReadingThroughTimeBanner923x150.jpg" alt="Reading Through Time Banner" class="site-banner">
  </header>

  <nav class="site-nav">
    <ul class="nav-menu">
      <li><a href="index.php">Home</a></li>
      <li><a href="blog.php">Blog</a></li>
      <li><a href="books.php">Books</a></li>
      <li><a href="reviews.php">Reviews</a></li>
      <li><a href="series.php">Series</a></li>
      <li><a href="about.php">About</a></li>
      <li><a href="signup.php" class="active">Register</a></li>
    </ul>
    
    <button class="hamburger" aria-label="Menu">&#9776;</button>
  </nav>

  <main class="container" style="max-width: 600px;">
    
    <div style="text-align: center; margin-bottom: 3rem;">
      <h1 style="font-size: 2.5rem; color: var(--bdm-navy); margin-bottom: 1rem;">Join the Reader Group</h1>
      <p style="font-size: 1.1rem; color: var(--bdm-mid-grey);">Get early access to new releases, behind-the-scenes writing updates, and exclusive content. No spam, ever.</p>
    </div>

    <div class="card" style="padding: 2.5rem;">
      <form action="#" method="POST" onsubmit="event.preventDefault(); alert('Registration Mockup Submitted!');">
        
        <div class="form-group">
          <label for="first_name">First Name (optional)</label>
          <input type="text" id="first_name" name="first_name" placeholder="Enter your first name">
        </div>

        <div class="form-group">
          <label for="email">Email Address *</label>
          <input type="email" id="email" name="email" required placeholder="Enter your email address">
        </div>

        <fieldset style="border: none; padding: 0; margin-bottom: 2rem;">
          <legend style="font-weight: bold; color: var(--bdm-navy); margin-bottom: 1rem;">What would you like to receive?</legend>
          
          <div class="checkbox-group">
            <input type="checkbox" id="cat_newsletter" name="categories[]" value="newsletter" checked>
            <label for="cat_newsletter">
              <strong>General Newsletter</strong><br>
              <span style="font-size: 0.9rem; color: var(--bdm-mid-grey);">Monthly updates, thoughts on writing, and tech news.</span>
            </label>
          </div>

          <div class="checkbox-group">
            <input type="checkbox" id="cat_announcements" name="categories[]" value="announcements" checked>
            <label for="cat_announcements">
              <strong>New Book Announcements</strong><br>
              <span style="font-size: 0.9rem; color: var(--bdm-mid-grey);">Cover reveals, release dates, and launch specials.</span>
            </label>
          </div>

          <div class="checkbox-group">
            <input type="checkbox" id="cat_events" name="categories[]" value="events">
            <label for="cat_events">
              <strong>Events & Appearances</strong><br>
              <span style="font-size: 0.9rem; color: var(--bdm-mid-grey);">Information about signings, panels, and virtual events.</span>
            </label>
          </div>
        </fieldset>

        <div class="form-group checkbox-group" style="margin-bottom: 2rem; border-top: 1px solid rgba(0,0,0,0.1); padding-top: 1.5rem;">
          <input type="checkbox" id="confirm_optin" name="confirm_optin" required>
          <label for="confirm_optin">I consent to receiving email communications from B.D. Murphy.</label>
        </div>

        <button type="submit" class="btn-primary" style="width: 100%; font-size: 1.1rem; padding: 1rem;">Subscribe Now</button>
      </form>
    </div>

  </main>

  <footer class="site-footer">
    <div class="footer-inner">
      <div class="footer-social">
        <h4>Follow Me</h4>
        <a href="#">X/Twitter</a> | <a href="#">Facebook</a> | <a href="#">LinkedIn</a>
      </div>
      <div class="footer-donate">
        <h4>Support the Author</h4>
        <a href="#" class="btn-primary" style="background: var(--bdm-gold); color: var(--bdm-navy);">Buy Me a Coffee</a>
      </div>
      <div class="footer-utility">
        <h4>Links</h4>
        <a href="#">Contact</a> | <a href="about.php">About</a> | <a href="#">Privacy Policy</a> | <a href="signup.php">Sign Up</a>
      </div>
    </div>
  </footer>

<?php wp_footer(); ?>
</body>
</html>