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 Catering Request</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;
    }

    /* 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;
      }
    }

    /* 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;
      }
      
      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;
      }
      
      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;
      }
    }

    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;
      background-color: white;
    }

    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: 100px;
    }

    select[multiple] {
      height: auto;
      min-height: 120px;
      cursor: pointer;
    }
    
    select[multiple] option {
      cursor: pointer;
      padding: 8px 12px;
    }
    
    select[multiple] option:hover {
      background-color: #f7b317;
      color: white;
    }
    
    #cuisine {
      border-color: #e1e5e9;
      background-color: white;
      cursor: pointer;
    }
    
    #cuisine:focus {
      border-color: #f7b317;
      box-shadow: 0 0 0 3px rgba(247, 179, 23, 0.1);
    }
    
    #cuisine option:checked {
      background-color: #bf1e2d;
      color: white;
    }

    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;
    }

    @media (max-width: 768px) {
      .form-grid {
        grid-template-columns: 1fr;
      }
      
      .container {
        padding: 20px;
        margin: 20px;
      }
      
      body {
        padding: 20px;
      }
    }
  </style>
</head>
<body>
  <div class="container">
    <h1>🍽️ GoodBites Catering</h1>
    <p class="subtitle">Making your events delicious and memorable</p>
    
    <p class="description">
      Let us help make your event special with our premium catering services. 
      Fill out the form below to request a personalized quote tailored to your event.
    </p>



    <form id="cateringForm">
      <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="eventDate">Event Date *</label>
          <input type="date" id="eventDate" name="eventDate" required />
        </div>

        <div class="form-group">
          <label for="eventTime">Event Time *</label>
          <input type="time" id="eventTime" name="eventTime" required />
        </div>

        <div class="form-group">
          <label for="eventType">Event Type *</label>
          <select id="eventType" name="eventType" required>
            <option value="">-- Select Event Type --</option>
            <option value="Wedding">Wedding</option>
            <option value="Birthday">Birthday</option>
            <option value="Corporate Event">Corporate Event</option>
            <option value="Baby Shower">Baby Shower</option>
            <option value="Other">Other</option>
          </select>
        </div>

        <div class="form-group">
          <label for="guests">Expected Number of Guests *</label>
          <input type="number" id="guests" name="guests" min="1" max="1000" required />
        </div>

        <div class="form-group">
          <label for="venue">Indoor or Outdoor Event? *</label>
          <select id="venue" name="venue" required>
            <option value="">-- Select Venue Type --</option>
            <option value="Indoor">Indoor</option>
            <option value="Outdoor">Outdoor</option>
            <option value="Both">Both</option>
          </select>
        </div>
      </div>

      <div class="form-group full-width">
        <label for="location">Event Location/Address *</label>
        <input type="text" id="location" name="location" required />
      </div>

      <div class="form-group full-width">
        <label for="cuisine">Cuisine Preferences *</label>
        <select id="cuisine" name="cuisine[]" multiple size="6" required>
          <option value="American">American</option>
          <option value="Italian">Italian</option>
          <option value="BBQ">BBQ</option>
          <option value="Vegetarian">Vegetarian</option>
          <option value="Vegan">Vegan</option>
          <option value="Gluten-Free">Gluten-Free</option>
        </select>
        <small style="color: #666; margin-top: 5px; display: block;">
          Hold Ctrl (or Cmd on Mac) to select multiple options
        </small>
      </div>

      <div class="form-group full-width">
        <label for="notes">Additional Notes & Special Requirements</label>
        <textarea id="notes" name="notes" rows="4" placeholder="Tell us about any special dietary requirements, themes, or other details..."></textarea>
      </div>

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

    <div class="success-message" id="successMessage">
      🎉 Thank you! Your catering request has been submitted successfully.
      <br><br>
      <strong>Request ID:</strong> <span id="requestId"></span>
      <br><br>
      We'll be in touch within 24 hours to discuss your event details.
    </div>

    <div class="error-message" id="errorMessage">
      ❌ There was an error submitting your request. 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('cateringForm');
    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');

    // 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 === 'cuisine[]') {
          // Handle cuisine (multiple select)
          const cuisineSelections = formData.getAll('cuisine[]');
          dataToSave['cuisine'] = cuisineSelections;
        } else {
          dataToSave[key] = value;
        }
      }
      
      // Save to localStorage
      localStorage.setItem('goodbites-catering-form', JSON.stringify(dataToSave));
    }

    function loadFormData() {
      const savedData = localStorage.getItem('goodbites-catering-form');
      if (savedData) {
        try {
          const data = JSON.parse(savedData);
          
          // Restore form fields
          Object.keys(data).forEach(key => {
            if (key === 'cuisine') {
              // Restore cuisine selections
              const cuisineSelections = data[key];
              form.querySelectorAll('select[name="cuisine[]"] option').forEach(option => {
                option.selected = cuisineSelections.includes(option.value);
              });
            } else {
              const field = form.querySelector(`[name="${key}"]`);
              if (field) {
                field.value = data[key];
              }
            }
          });
          
          console.log('Form data restored from memory');
        } catch (error) {
          console.error('Error restoring form data:', error);
        }
      }
    }

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

    // Handle form submission
    form.addEventListener('submit', async function(event) {
      event.preventDefault();
      
      console.log('Form submission started');
      
      // Check if form is valid
      if (!form.checkValidity()) {
        console.log('Form validation failed');
        form.reportValidity();
        return;
      }
      
      console.log('Form validation passed');
      
      // 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 multiple cuisine selections
        const cuisineSelections = formData.getAll('cuisine[]');
        formObject.cuisine = cuisineSelections;
        
        // Add other form fields
        for (let [key, value] of formData.entries()) {
          if (key !== 'cuisine[]') {
            formObject[key] = value;
          }
        }
        
        console.log('Form data collected:', formObject);
        console.log('API URL:', `${API_URL}/api/catering`);

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

        console.log('API response status:', response.status);
        const result = await response.json();
        console.log('API response:', result);

        if (response.ok) {
          // Success
          document.getElementById('requestId').textContent = result.requestId;
          successMessage.style.display = 'block';
          form.reset();
          
          // 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 request');
        }

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

    // Set minimum date to today
    const today = new Date().toISOString().split('T')[0];
    document.getElementById('eventDate').min = today;

    // 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