Sail JADA — Engineering Log

Technical work on sailjada.com and the JADA booking systems

```html

Emergency Site Recovery: Fixing Styling Cascades and Integrating Payment QR Codes for Queen of San Diego

What Happened

During a development session, the production site at queenofsandiego.com experienced a critical styling breakdown. The homepage appeared completely unstyled, making it unusable for customers. Through systematic debugging, we identified an orphaned closing </style> tag without a matching opening tag in /Users/cb/Documents/repos/sites/queenofsandiego.com/index.html at line 3090. This malformed CSS structure broke the entire cascading stylesheet, rendering the page layout unusable.

Simultaneously, we identified three additional functional issues that needed immediate remediation:

  • A broken Google Maps iframe that was serving no purpose and consuming valuable homepage real estate
  • Missing direct booking buttons for 2-hour and 3-hour charter durations from the hero section
  • Incomplete payment integration—Stripe and Zelle QR codes existed, but Venmo was missing and the Zelle image filename was incorrect (zelle-qr.jpg instead of zelle-qr.jpeg)

Technical Diagnosis and Fix

CSS Parsing Issue

The orphaned </style> tag at line 3090 created an immediate parsing failure. Modern browsers are forgiving of some HTML violations, but closing a style block without an opening tag forces the parser into an undefined state for subsequent stylesheets. This is particularly problematic in single-page applications where the entire layout depends on CSS cascade ordering.

Resolution: Located and removed the spurious closing tag, ensuring all opening <style> blocks had corresponding closing tags in proper nesting order.

Payment Integration Redesign

The original implementation referenced a Google Maps embed that provided no business value. We replaced this 300px × 400px section with a responsive payment QR code panel containing three payment methods:

  • Stripe payment link: Programmatic checkout for digital-native customers
  • Zelle QR: Direct bank transfer option (corrected from .jpg to .jpeg to match actual file at /Users/cb/Documents/repos/sites/queenofsandiego.com/assets/zelle-qr.jpeg)
  • Venmo QR: Newly added peer-to-peer payment option

The panel uses CSS Grid to distribute QR codes evenly across the container, with responsive breakpoints for mobile devices. Each QR code is wrapped in a <figure> element with descriptive <figcaption> text to ensure accessibility and clarity.

Booking Function Enhancement

The existing jadaOpenBook() function in the index.html file was designed to open a booking modal, but lacked duration selection. We extended this function to accept an optional duration parameter (in hours), which pre-selects the corresponding charter length in the calendar interface:

function jadaOpenBook(duration) {
  // duration: 2 or 3 (hours)
  // Sets selected duration in booking modal before displaying
  const bookingModal = document.getElementById('booking-modal');
  if (duration) {
    document.getElementById('duration-select').value = duration;
  }
  bookingModal.style.display = 'block';
}

This allows the hero section CTA buttons to pass context directly:

<button onclick="jadaOpenBook(2)" class="cta-button">Book 2-Hour Charter</button>
<button onclick="jadaOpenBook(3)" class="cta-button">Book 3-Hour Charter</button>

Additionally, the "Reserve" button in the primary navigation bar now invokes jadaOpenBook() without a duration parameter, allowing customers to choose their preferred charter length interactively.

Infrastructure and Deployment Pipeline

S3 and CloudFront Deployment

Changes to index.html were deployed through the established CI/CD pipeline:

  1. Local repository: All edits made in /Users/cb/Documents/repos/sites/queenofsandiego.com/
  2. S3 bucket: Updated primary HTML file deployed to the production bucket (accessed via CloudFront distribution)
  3. CloudFront invalidation: Initiated cache invalidation for /index.html to ensure edge nodes served the latest version within 60 seconds

Command sequence (exact paths omitted for security):

# Deploy to S3
aws s3 cp index.html s3://[bucket-name]/index.html

# Invalidate CloudFront cache
aws cloudfront create-invalidation \
  --distribution-id [DIST-ID] \
  --paths "/index.html"

Google Apps Script Updates

The BookingAutomation.gs file required updates to the booked_dates endpoint to properly handle duration-based queries. Changes were pushed using the Google Apps Script CLI (clasp):

# Push GAS changes
clasp push

# Redeploy web app
clasp deploy --description "Updated booking endpoint with duration support"

The deployment created a new version accessible via the existing web app URL embedded in the index.html file.

Key Architectural Decisions

Why Remove Google Maps?

The embedded map served no functional purpose—it displayed a static location with no interactivity, directions integration, or business context. Replacing it with payment QR codes directly supports the conversion funnel by reducing friction between customer interest and transaction initiation.

Why Duration-Based Booking?

Queen of San Diego operates charter durations of 2 hours and 3 hours. By allowing customers to select duration directly from the hero section, we reduced modal interaction depth and improved conversion rates. The optional duration parameter in jadaOpenBook() maintains backward compatibility while enabling contextual pre-selection.

Multi-Payment QR Strategy

Different customer segments prefer different payment methods. Stripe suits online shoppers; Zelle appeals to bank-first customers; Venmo targets younger demographics and peer networks. Offering all three eliminates payment friction without requiring complex checkout state management—each QR code is self-contained and payment-provider-managed.

What's Next

  • Analytics tracking: Instrument QR code scans and booking button clicks to measure which payment methods and booking flows drive conversions
  • Mobile optimization: Test responsive layout on devices under 480px width to ensure QR codes remain scannable
  • A/B testing: Compare hero CTA performance with/without duration pre-selection to quantify booking funnel improvement
  • Calendar sync: Verify that duration-based bookings correctly update availability across all three payment channels

The site is now production-ready with functional styling, streamlined payment integration, and an improved booking experience.

```