Embed

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Join SeriousHeart.com - Premium Dating Services</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      color: #333;
      padding: 20px;
    }
    .container {
      max-width: 800px;
      margin: 0 auto;
      background: white;
      padding: 30px;
      border-radius: 10px;
      box-shadow: 0 0 10px rgba(0,0,0,0.2);
    }
    h1, h2 {
      color: #4a5568;
    }
    .membership-plans {
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
    }
    .plan-card {
      border: 2px solid #e2e8f0;
      padding: 15px;
      border-radius: 8px;
      flex: 1;
      cursor: pointer;
      text-align: center;
    }
    .plan-card.selected {
      border-color: #667eea;
      background-color: #f7fafc;
    }
    .plan-card input[type="radio"] {
      margin-bottom: 10px;
    }
    .checkbox-group {
      margin: 15px 0;
    }
    .submit-btn {
      background: #667eea;
      color: white;
      padding: 12px 25px;
      border: none;
      border-radius: 5px;
      cursor: pointer;
      font-size: 16px;
      width: 100%;
      margin-bottom: 20px;
    }
    .submit-btn:hover {
      background: #5a67d8;
    }
    .submit-btn:disabled {
      background: #a0aec0;
      cursor: not-allowed;
    }
    div {
      margin-bottom: 15px;
    }
    input, select {
      width: 100%;
      padding: 8px;
      border: 1px solid #ddd;
      border-radius: 4px;
      box-sizing: border-box;
    }
    label {
      display: block;
      margin-bottom: 5px;
      font-weight: bold;
    }
    #paypal-button-container {
      margin-top: 20px;
      min-height: 50px;
    }
    .payment-section {
      border-top: 2px solid #e2e8f0;
      padding-top: 20px;
      margin-top: 20px;
    }
    .error-message {
      color: #e53e3e;
      background: #fed7d7;
      padding: 10px;
      border-radius: 4px;
      margin: 10px 0;
      display: none;
    }
    .success-message {
      color: #38a169;
      background: #c6f6d5;
      padding: 10px;
      border-radius: 4px;
      margin: 10px 0;
      display: none;
    }
  </style>
</head>
<body>
  <div class="container">
    <h1>Join SeriousHeart.com</h1>
    <form id="signupForm">
      <h2>Personal Information</h2>
      <div>
        <label>First Name *</label>
        <input type="text" name="firstName" required />
      </div>
      <div>
        <label>Last Name *</label>
        <input type="text" name="lastName" required />
      </div>
      <div>
        <label>Email *</label>
        <input type="email" name="email" required />
      </div>
      <div>
        <label>Phone *</label>
        <input type="tel" name="phone" required />
      </div>
      <div>
        <label>Date of Birth *</label>
        <input type="date" name="dateOfBirth" required />
      </div>
      <div>
        <label>Gender *</label>
        <select name="gender" required>
          <option value="">Select Gender</option>
          <option value="male">Male</option>
          <option value="female">Female</option>
          <option value="non-binary">Non-Binary</option>
          <option value="prefer-not-to-say">Prefer Not to Say</option>
        </select>
      </div>

      <h2>Membership Plans</h2>
      <div class="membership-plans">
        <label class="plan-card">
          <input type="radio" name="membership" value="bronze" required />
          Bronze - $49 (3-month commitment)
        </label>
        <label class="plan-card">
          <input type="radio" name="membership" value="silver" required />
          Silver - $79/month
        </label>
        <label class="plan-card">
          <input type="radio" name="membership" value="gold" required />
          Gold - $149/month
        </label>
      </div>

      <h2>Policies</h2>
      <div class="checkbox-group">
        <input type="checkbox" id="agreeAll" name="agreeAll" required />
        <label for="agreeAll">
          I have read, understood, and agree to the Terms of Service, Privacy Policy, and Refund Policy. *
        </label>
      </div>

      <div class="checkbox-group">
        <input type="checkbox" id="agreeMarketing" name="agreeMarketing" />
        <label for="agreeMarketing">
          I agree to receive marketing emails (optional)
        </label>
      </div>

      <div class="payment-section">
        <h2>Payment</h2>
        <div class="error-message" id="error-message"></div>
        <div class="success-message" id="success-message"></div>
        
        <p>Choose your payment method below. You can pay with PayPal or any major credit/debit card.</p>
        
        
        <div id="paypal-button-container"></div>
      </div>
    </form>
  </div>

  
  <script src="https://www.paypal.com/sdk/js?client-id=AYOLW5R56ubS-0XXerFPJRofDE5hrH7uW7bvQxtuUEevI4mwugAbQSRSf3RK5A_p4PMwjGaXf5H0-n3S&currency=USD&components=buttons"></script>
  
  <script>
    const membershipPrices = {
      bronze: "49.00",
      silver: "79.00", 
      gold: "149.00"
    };

    let selectedPlan = null;
    let formValid = false;

    // Handle plan selection
    document.querySelectorAll('input[name="membership"]').forEach(radio => {
      radio.addEventListener('change', function() {
        selectedPlan = this.value;
        document.querySelectorAll('.plan-card').forEach(card => {
          card.classList.remove('selected');
        });
        this.closest('.plan-card').classList.add('selected');
        renderPayPalButtons();
      });
    });

    // Handle form validation
    document.getElementById('signupForm').addEventListener('input', function() {
      const form = this;
      const requiredFields = form.querySelectorAll('[required]');
      let allValid = true;

      requiredFields.forEach(field => {
        if (!field.value.trim()) {
          allValid = false;
        }
      });

      formValid = allValid;
      renderPayPalButtons();
    });

    function showError(message) {
      const errorDiv = document.getElementById('error-message');
      errorDiv.textContent = message;
      errorDiv.style.display = 'block';
      document.getElementById('success-message').style.display = 'none';
    }

    function showSuccess(message) {
      const successDiv = document.getElementById('success-message');
      successDiv.textContent = message;
      successDiv.style.display = 'block';
      document.getElementById('error-message').style.display = 'none';
    }

    function renderPayPalButtons() {
      const container = document.getElementById('paypal-button-container');
      container.innerHTML = '';

      if (!selectedPlan || !formValid) {
        container.innerHTML = '<p style="color: #666; text-align: center; padding: 20px;">Please fill out all required fields and select a membership plan to continue with payment.</p>';
        return;
      }

      const price = membershipPrices[selectedPlan];
      const planName = selectedPlan.charAt(0).toUpperCase() + selectedPlan.slice(1);

      paypal.Buttons({
        style: {
          layout: 'vertical',
          color: 'blue',
          shape: 'rect',
          label: 'pay'
        },
        createOrder: function(data, actions) {
          return actions.order.create({
            purchase_units: [{
              amount: {
                value: price,
                currency_code: 'USD'
              },
              description: `SeriousHeart.com ${planName} Membership`
            }]
          });
        },
        onApprove: function(data, actions) {
          return actions.order.capture().then(function(details) {
            showSuccess(`Payment successful! Welcome to SeriousHeart.com ${planName} membership, ${details.payer.name.given_name}!`);
            
            // Here you would typically send the form data and payment details to your server
            // For now, we'll just log the information
            console.log('Payment Details:', details);
            console.log('Form Data:', new FormData(document.getElementById('signupForm')));
            
            // You can add code here to:
            // 1. Send user registration data to your server
            // 2. Create user account
            // 3. Send confirmation email
            // 4. Redirect to members area
          });
        },
        onError: function(err) {
          showError('Payment failed. Please try again.');
          console.error('PayPal Error:', err);
        },
        onCancel: function(data) {
          showError('Payment was cancelled.');
        }
      }).render('#paypal-button-container');
    }

    // Initial render
    renderPayPalButtons();
  </script>
</body>
</html>