Building Dynamic Concert Event Pages with Themed Branding and Modal-Based Booking

```html

This session focused on expanding the Rady Shell summer concert series presence on queenofsandiego.com by creating six new artist event pages with cohesive visual branding and unified booking workflows. The challenge was to build these pages quickly while maintaining design consistency with existing event pages and ensuring all call-to-action buttons (both "Book Now" and "Reserve Now") invoked the same modal-based payment collection system.

Initial Assessment: The Gap

The queenofsandiego.com/events.html page listed ten Rady Shell concerts for summer 2024, but only four had dedicated artist pages:

/bobdylan/index.html
/paulsimonradyshell.com/index.html
/koolandthegang/index.html
/gypsykings/index.html
/brandicalile/index.html (Brandi Carlile)

Six artists needed pages: Wynonna + Melissa, Sarah McLachlan, Buddy Guy, Weird Al, Mariachi USA, and Bonnie Raitt. Each required:

Artist-appropriate CSS theming
Booking modal wiring on all CTAs
Integration with the Google Apps Script pricing engine
CloudFront distribution and Route53 DNS configuration
S3 deployment and invalidation

Technical Architecture: Page Generation and Deployment Pipeline

Rather than manually creating each page, I established a pattern by examining the existing artist pages and the render script at /queenofsandiego.com/rady-shell-events/render.js, which showed how event metadata could be transformed into HTML. However, since these pages required custom theming and explicit modal wiring, I built them individually while reusing structural patterns from bob dylan and paul simon pages.

Pattern Analysis

I inspected the Bob Dylan page header structure and its booking modal invocation:

<button class="cta-button book-now" onclick="showBookingModal('bobdylan')">Book Now</button>

The modal system expected an artist key parameter passed to a JavaScript function. The "Reserve Now" buttons on several pages were incorrectly using anchor links (href="#book") that scrolled the page rather than triggering the modal.

CSS Theming Strategy

Each artist page needed distinct visual branding. Rather than creating new CSS files per artist, I applied inline theme classes to the page header and used CSS variables for color schemes:

<div class="artist-header wynonna-theme">
  --primary-color: #8B4789;
  --accent-color: #D4AF37;
</div>

This approach minimized CSS duplication while allowing full visual customization per artist.

Infrastructure Provisioning: Subdomains and SSL

Each new artist page required DNS and SSL infrastructure:

Route53 Configuration

Created A records for six new subdomains in the queenofsandiego.com hosted zone:

wynonnamelissa.queenofsandiego.com → CloudFront distribution
sarahmclachlan.queenofsandiego.com → CloudFront distribution
buddyguy.queenofsandiego.com → CloudFront distribution
weirdal.queenofsandiego.com → CloudFront distribution
mariachiusa.queenofsandiego.com → CloudFront distribution
bonnieraitt.queenofsandiego.com → CloudFront distribution

ACM Certificate Management

Requested wildcard certificates for *.queenofsandiego.com to support all subdomains. During the process, an accidental pending certificate was deleted to avoid confusion with multiple certificate versions. The wildcard approach eliminated the need for individual certificates per artist.

CloudFront and S3 Bucket Architecture

Each artist subdomain was mapped to a CloudFront distribution pointing to a dedicated S3 bucket path:

S3 Bucket: queenofsandiego.com-static
Path structure: s3://queenofsandiego.com-static/artist-pages/wynonnamelissa/
CloudFront origin: S3 bucket regional endpoint
Behavior: Forward all headers, cache HTML with short TTL (300s), cache assets longer (86400s)

CloudFront distributions were created with custom domain names and the wildcard certificate attached, allowing subdomain traffic to route correctly.

Booking Modal Integration: The Critical Fix

The primary technical challenge was ensuring consistent CTA behavior. The existing pages had a pattern inconsistency:

Book Now buttons: Correctly invoked showBookingModal('artistkey')
Reserve Now buttons: Incorrectly used href="#book", which only scrolled the page

I created a patch script (/tmp/patch_artist_pages.py) that:

#!/usr/bin/env python3
# Iterate through all 10 artist pages
# Find all href="#book" anchor links
# Replace with onclick="showBookingModal('artistkey')"
# Update button CSS class from nav-cta to book-now for consistency
# Verify modal markup exists in page footer

This script was applied to all ten artist pages (six new + four existing), ensuring uniform behavior. After running the patch, I verified that Bob Dylan's and other pages correctly triggered the modal on both button types.

Google Apps Script Integration: Dynamic Pricing

The booking modal retrieves event pricing and availability from a Google Apps Script (GAS) backend. The file /queenofsandiego.com/rady-shell-events/apps-script-replacement/RadyShellEvents.gs was updated with pricing configuration for all ten events:

const EVENTS = {
  'bobdylan': {
    title: 'Bob Dylan',
    date: '2024-07-15',
    price: 225,
    status: 'available'
  },
  'wynonnamelissa': {
    title: 'Wynonna & Melissa Etheridge',
    date: '2024-08-02',
    price: 185,
    status: 'available'
  },
  // ... remaining 8 events
};

A new GAS deployment was created and published, then the live deployment ID was updated to point to the new pricing code. This approach avoided redeploying the entire project—only the script version changed.

Validation and Testing

After deploying all pages and infrastructure changes, I verified:

All six new subdomains resolved correctly via DNS
CloudFront cache behavior and HTTPS handshakes succeeded
Both "Book Now" and "Reserve Now" buttons on all ten pages invoked the modal
GAS pricing API returned correct prices for all events (spot-checked Bob Dylan, Wynonna+Melissa, Mariachi USA, and others)
← All posts