Embed

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover"/>
  <title>GoodBites Meal Prep Order</title>
  <style>
    body {
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      padding: 40px;
      background: linear-gradient(135deg, #f7b317 0%, #bf1e2d 100%);
      min-height: 100vh;
      margin: 0;
    }

    .container {
      max-width: 800px;
      margin: auto;
      background: white;
      padding: 40px;
      border-radius: 15px;
      box-shadow: 0 20px 40px rgba(0,0,0,0.1);
    }

    h1 {
      text-align: center;
      color: #333;
      margin-bottom: 10px;
      font-size: 2.5rem;
    }

    .subtitle {
      text-align: center;
      color: #666;
      font-size: 1.1rem;
      margin-bottom: 40px;
    }

    p.description {
      font-size: 1.1rem;
      color: #555;
      text-align: center;
      margin-bottom: 40px;
      line-height: 1.6;
    }

    .form-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 20px;
    }

    .form-group {
      margin-bottom: 20px;
    }

    .form-group.full-width {
      grid-column: 1 / -1;
    }

    label {
      display: block;
      margin-bottom: 8px;
      font-weight: 600;
      color: #333;
      font-size: 0.95rem;
    }

    input, select, textarea {
      width: 100%;
      padding: 12px 15px;
      border: 2px solid #e1e5e9;
      border-radius: 8px;
      font-size: 1rem;
      transition: border-color 0.3s ease;
      box-sizing: border-box;
    }

    input:focus, select:focus, textarea:focus {
      outline: none;
      border-color: #f7b317;
      box-shadow: 0 0 0 3px rgba(247, 179, 23, 0.1);
    }

    textarea {
      resize: vertical;
      min-height: 80px;
    }

    .checkbox-group {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 15px;
      margin-top: 10px;
    }

    .checkbox-group label {
      font-weight: normal;
      display: flex;
      align-items: center;
      cursor: pointer;
      padding: 10px;
      border: 2px solid #e1e5e9;
      border-radius: 8px;
      transition: all 0.3s ease;
    }

    .checkbox-group label:hover {
      border-color: #f7b317;
      background-color: #f8f9fa;
    }

    .checkbox-group input[type="checkbox"] {
      width: auto;
      margin-right: 10px;
      margin-top: 0;
    }

    .checkbox-group input[type="checkbox"]:checked + span {
      color: #f7b317;
      font-weight: 600;
    }

    button {
      width: 100%;
      padding: 15px;
      font-size: 1.1rem;
      font-weight: 600;
      background: linear-gradient(135deg, #f7b317 0%, #bf1e2d 100%);
      color: white;
      border: none;
      border-radius: 8px;
      cursor: pointer;
      transition: transform 0.2s ease, box-shadow 0.2s ease;
      margin-top: 20px;
    }

    button:hover {
      transform: translateY(-2px);
      box-shadow: 0 10px 20px rgba(247, 179, 23, 0.3);
    }

    button:disabled {
      opacity: 0.6;
      cursor: not-allowed;
      transform: none;
    }

    .success-message {
      margin-top: 20px;
      padding: 20px;
      background: linear-gradient(135deg, #d4edda 0%, #c3e6cb 100%);
      color: #155724;
      border: 1px solid #c3e6cb;
      border-radius: 8px;
      display: none;
      text-align: center;
      font-weight: 600;
    }

    .error-message {
      margin-top: 20px;
      padding: 20px;
      background: linear-gradient(135deg, #f8d7da 0%, #f5c6cb 100%);
      color: #721c24;
      border: 1px solid #f5c6cb;
      border-radius: 8px;
      display: none;
      text-align: center;
      font-weight: 600;
    }

    .loading {
      display: inline-block;
      width: 20px;
      height: 20px;
      border: 3px solid #ffffff;
      border-radius: 50%;
      border-top-color: transparent;
      animation: spin 1s ease-in-out infinite;
      margin-right: 10px;
    }

    @keyframes spin {
      to { transform: rotate(360deg); }
    }

    .api-status {
      text-align: center;
      margin-bottom: 20px;
      padding: 10px;
      border-radius: 5px;
      font-size: 0.9rem;
    }

    .api-status.connected {
      background-color: #d4edda;
      color: #155724;
      border: 1px solid #c3e6cb;
    }

    .api-status.disconnected {
      background-color: #f8d7da;
      color: #721c24;
      border: 1px solid #f5c6cb;
    }

    .delivery-toggle {
      background: #f8f9fa;
      border: 2px solid #e1e5e9;
      border-radius: 8px;
      padding: 15px;
      margin-bottom: 20px;
    }

    .delivery-toggle label {
      margin-bottom: 10px;
    }

    .delivery-options {
      display: flex;
      gap: 15px;
    }

    .delivery-option {
      flex: 1;
      padding: 15px;
      border: 2px solid #e1e5e9;
      border-radius: 8px;
      text-align: center;
      cursor: pointer;
      transition: all 0.3s ease;
    }

    .delivery-option:hover {
      border-color: #f7b317;
      background-color: #f8f9fa;
    }

    .delivery-option.selected {
      border-color: #f7b317;
      background-color: #fff3cd;
      color: #856404;
    }

    .delivery-option input {
      display: none;
    }

    /* Tablet Styles */
    @media (max-width: 1024px) {
      .container {
        max-width: 90%;
        padding: 30px;
      }
      
      h1 {
        font-size: 2.2rem;
      }
      
      .subtitle {
        font-size: 1rem;
      }
      
      .form-grid {
        gap: 15px;
      }
      
      .checkbox-group {
        gap: 12px;
      }
    }

    /* Mobile Styles */
    @media (max-width: 768px) {
      body {
        padding: 20px 10px;
      }
      
      .container {
        max-width: 100%;
        padding: 25px 20px;
        margin: 10px;
        border-radius: 12px;
      }
      
      h1 {
        font-size: 2rem;
        margin-bottom: 8px;
      }
      
      .subtitle {
        font-size: 0.95rem;
        margin-bottom: 30px;
      }
      
      .description {
        font-size: 1rem;
        margin-bottom: 30px;
      }
      
      .form-grid {
        grid-template-columns: 1fr;
        gap: 15px;
      }
      
      .checkbox-group {
        grid-template-columns: 1fr;
        gap: 10px;
      }
      
      .delivery-options {
        flex-direction: column;
        gap: 10px;
      }
      
      .delivery-option {
        padding: 12px;
      }
      
      input, select, textarea {
        padding: 14px 16px;
        font-size: 16px; /* Prevents zoom on iOS */
      }
      
      button {
        padding: 16px;
        font-size: 1.1rem;
      }
      
      .success-message, .error-message {
        padding: 18px;
        font-size: 0.95rem;
      }
    }

    /* Small Mobile Styles */
    @media (max-width: 480px) {
      body {
        padding: 15px 5px;
      }
      
      .container {
        padding: 20px 15px;
        margin: 5px;
      }
      
      h1 {
        font-size: 1.8rem;
      }
      
      .subtitle {
        font-size: 0.9rem;
      }
      
      .description {
        font-size: 0.95rem;
      }
      
      .checkbox-group {
        gap: 8px;
      }
      
      .delivery-option {
        padding: 10px;
      }
      
      input, select, textarea {
        padding: 12px 14px;
      }
      
      button {
        padding: 14px;
        font-size: 1rem;
      }
    }

    /* Landscape Mobile Styles */
    @media (max-width: 768px) and (orientation: landscape) {
      body {
        padding: 15px;
      }
      
      .container {
        padding: 20px;
        margin: 5px;
      }
      
      h1 {
        font-size: 1.6rem;
        margin-bottom: 10px;
      }
      
      .subtitle {
        margin-bottom: 20px;
      }
      
      .description {
        margin-bottom: 20px;
      }
    }

    /* High DPI Displays */
    @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
      input, select, textarea, button {
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
      }
    }

    /* Touch Device Optimizations */
    @media (hover: none) and (pointer: coarse) {
      input, select, textarea {
        min-height: 44px; /* Apple's recommended touch target size */
      }
      
      button {
        min-height: 44px;
      }
      
      .checkbox-group label {
        min-height: 44px;
        align-items: center;
      }
      
      .delivery-option {
        min-height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
  </style>
</head>
<body>
  <div class="container">
    <h1>🥗 GoodBites Meal Prep</h1>
    <p class="subtitle">Fresh, healthy meals delivered to your door</p>
    

    
    <p class="description">
      Eat fresh, stay healthy. Customize your weekly meal prep plan with our nutritious, 
      delicious options. Choose from breakfast, lunch, dinner, and snacks.
    </p>



    <form id="mealPrepForm">
      <div class="form-grid">
        <div class="form-group">
          <label for="name">Full Name *</label>
          <input type="text" id="name" name="name" required />
        </div>

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

        <div class="form-group">
          <label for="phone">Phone Number *</label>
          <input type="tel" id="phone" name="phone" required />
        </div>

        <div class="form-group">
          <label for="mealsPerWeek">Meals per Week *</label>
          <input type="number" id="mealsPerWeek" name="mealsPerWeek" min="1" max="50" required />
        </div>
      </div>

      <div class="form-group full-width">
        <div class="delivery-toggle">
          <label>Delivery or Pickup? *</label>
          <div class="delivery-options">
            <div class="delivery-option" onclick="selectDelivery('Pickup', event)">
              <input type="radio" name="delivery" value="Pickup" required />
              <span>🚚 Pickup</span>
            </div>
            <div class="delivery-option" onclick="selectDelivery('Delivery', event)">
              <input type="radio" name="delivery" value="Delivery" required />
              <span>🏠 Delivery</span>
            </div>
          </div>
        </div>
      </div>

      <div class="form-group full-width" id="addressField" style="display: none;">
        <label for="address">Delivery Address *</label>
        <input type="text" id="address" name="address" placeholder="Enter your full delivery address..." />
      </div>

      <div class="form-group full-width">
        <label>Meal Types *</label>
        <div class="checkbox-group">
          <label>
            <input type="checkbox" name="mealTypes" value="Breakfast" />
            <span>🌅 Breakfast</span>
          </label>
          <label>
            <input type="checkbox" name="mealTypes" value="Lunch" />
            <span>☀️ Lunch</span>
          </label>
          <label>
            <input type="checkbox" name="mealTypes" value="Dinner" />
            <span>🌙 Dinner</span>
          </label>
          <label>
            <input type="checkbox" name="mealTypes" value="Snacks" />
            <span>🍎 Snacks</span>
          </label>
        </div>
        <small style="color: #666; margin-top: 5px; display: block;">
          Select at least one meal type
        </small>
      </div>

      <div class="form-group full-width">
        <label for="restrictions">Dietary Restrictions or Allergies</label>
        <textarea id="restrictions" name="restrictions" rows="3" placeholder="e.g., Gluten-free, dairy-free, nut allergies, vegetarian, etc."></textarea>
      </div>

      <div class="form-group full-width">
        <label for="dislikes">Foods You Don't Like</label>
        <textarea id="dislikes" name="dislikes" rows="3" placeholder="e.g., Mushrooms, olives, spicy food, etc."></textarea>
      </div>

      <div class="form-group full-width">
        <label for="requests">Special Requests or Preferences</label>
        <textarea id="requests" name="requests" rows="4" placeholder="Any specific preferences, themes, or special instructions for your meals..."></textarea>
      </div>

      <button type="submit" id="submitBtn">
        <span id="submitText">Submit Meal Prep Order</span>
        <span id="submitLoading" class="loading" style="display: none;"></span>
      </button>
    </form>

    <div class="success-message" id="successMessage">
      🎉 Thank you! Your meal prep order has been submitted successfully.
      <br><br>
      <strong>Order ID:</strong> <span id="orderId"></span>
      <br><br>
      We'll be in touch within 24 hours to confirm your order and discuss delivery details.
    </div>

    <div class="error-message" id="errorMessage">
      ❌ There was an error submitting your order. Please try again or contact us directly.
    </div>
  </div>

  <script>
    // Configuration - Update this with your actual API endpoint
    const API_BASE_URL = 'https://tn8oo0oj7i.execute-api.us-east-1.amazonaws.com/dev'; // Update this
    const LOCAL_API_URL = 'http://localhost:3000/dev'; // For local development
    
    // Use local API if running locally, otherwise use deployed API
    const isLocalhost = window.location.hostname === 'localhost' || window.location.hostname === '127.0.0.1';
    const API_URL = isLocalhost ? LOCAL_API_URL : API_BASE_URL;

    const form = document.getElementById('mealPrepForm');
    const successMessage = document.getElementById('successMessage');
    const errorMessage = document.getElementById('errorMessage');
    const submitBtn = document.getElementById('submitBtn');
    const submitText = document.getElementById('submitText');
    const submitLoading = document.getElementById('submitLoading');

    const addressField = document.getElementById('addressField');

    // Form memory functionality
    function saveFormData() {
      const formData = new FormData(form);
      const dataToSave = {};
      
      // Save all form fields
      for (let [key, value] of formData.entries()) {
        if (key === 'mealTypes') {
          // Handle meal types (checkboxes)
          const mealTypes = [];
          form.querySelectorAll('input[name="mealTypes"]:checked').forEach(el => {
            mealTypes.push(el.value);
          });
          dataToSave[key] = mealTypes;
        } else {
          dataToSave[key] = value;
        }
      }
      
      // Save to localStorage
      localStorage.setItem('goodbites-meal-prep-form', JSON.stringify(dataToSave));
    }

    function loadFormData() {
      const savedData = localStorage.getItem('goodbites-meal-prep-form');
      if (savedData) {
        try {
          const data = JSON.parse(savedData);
          
          // Restore form fields
          Object.keys(data).forEach(key => {
            if (key === 'mealTypes') {
              // Restore meal types (checkboxes)
              const mealTypes = data[key];
              form.querySelectorAll('input[name="mealTypes"]').forEach(checkbox => {
                checkbox.checked = mealTypes.includes(checkbox.value);
              });
            } else {
              const field = form.querySelector(`[name="${key}"]`);
              if (field) {
                field.value = data[key];
                
                // Handle delivery selection
                if (key === 'delivery') {
                  selectDelivery(data[key], null);
                }
              }
            }
          });
          
          console.log('Form data restored from memory');
        } catch (error) {
          console.error('Error restoring form data:', error);
        }
      }
    }

    function clearFormMemory() {
      localStorage.removeItem('goodbites-meal-prep-form');
    }

    // Delivery selection handling
    function selectDelivery(type, event) {
      // Update radio button
      document.querySelector(`input[value="${type}"]`).checked = true;
      
      // Update visual selection
      document.querySelectorAll('.delivery-option').forEach(option => {
        option.classList.remove('selected');
      });
      if (event && event.currentTarget) {
        event.currentTarget.classList.add('selected');
      }
      
      // Show/hide address field
      if (type === 'Delivery') {
        addressField.style.display = 'block';
        document.getElementById('address').setAttribute('required', 'required');
      } else {
        addressField.style.display = 'none';
        document.getElementById('address').removeAttribute('required');
      }
    }



    // Handle form submission
    form.addEventListener('submit', async function(event) {
      event.preventDefault();
      
      // Show loading state
      submitBtn.disabled = true;
      submitText.style.display = 'none';
      submitLoading.style.display = 'inline-block';
      
      // Hide previous messages
      successMessage.style.display = 'none';
      errorMessage.style.display = 'none';

      try {
        // Collect form data
        const formData = new FormData(form);
        const formObject = {};
        
        // Handle meal types (checkboxes)
        const mealTypes = [];
        form.querySelectorAll('input[name="mealTypes"]:checked').forEach(el => {
          mealTypes.push(el.value);
        });
        formObject.mealTypes = mealTypes;
        
        // Add other form fields
        for (let [key, value] of formData.entries()) {
          if (key !== 'mealTypes') {
            formObject[key] = value;
          }
        }

        // Submit to API
        const response = await fetch(`${API_URL}/api/meal-prep`, {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json'
          },
          body: JSON.stringify(formObject)
        });

        const result = await response.json();

        if (response.ok) {
          // Success
          document.getElementById('orderId').textContent = result.orderId;
          successMessage.style.display = 'block';
          form.reset();
          
          // Reset delivery selection
          document.querySelectorAll('.delivery-option').forEach(option => {
            option.classList.remove('selected');
          });
          addressField.style.display = 'none';
          
          // Clear form memory after successful submission
          clearFormMemory();
          
          // Scroll to success message
          successMessage.scrollIntoView({ behavior: 'smooth' });
        } else {
          // API error
          throw new Error(result.error || 'Failed to submit order');
        }

      } catch (error) {
        console.error('Form submission error:', error);
        errorMessage.style.display = 'block';
        errorMessage.scrollIntoView({ behavior: 'smooth' });
      } finally {
        // Reset button state
        submitBtn.disabled = false;
        submitText.style.display = 'inline';
        submitLoading.style.display = 'none';
      }
    });

    // Load saved form data on page load
    loadFormData();

    // Save form data as user types/changes
    form.addEventListener('input', saveFormData);
    form.addEventListener('change', saveFormData);

    // Auto-hide messages after 10 seconds
    setTimeout(() => {
      successMessage.style.display = 'none';
      errorMessage.style.display = 'none';
    }, 10000);
  </script>
</body>
</html>


Good Bites LLC

Good Bites is a fast-casual food brand offering walk-up service, catering, and prepared meals. Rooted in community, it combines gourmet quality with convenience and is expanding its presence through a