<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Welcome! Celebrating Eli's Bar Mitzvah</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700&family=Inter:wght@400;500;600&display=swap" rel="stylesheet">
<!-- Chosen Palette: Navy, Powder Blue, Yellow on a light neutral background -->
<!-- Application Structure Plan: A tabbed single-page application with three main sections: 'Welcome,' 'Schedule & Map,' and 'Chicago Treats.' This task-oriented structure allows guests to quickly find specific information (like event times or food links) without scrolling. Navigation is handled by JS-powered buttons that toggle the visibility of content sections, providing a clean and efficient user experience, especially on mobile devices. -->
<!-- Visualization & Content Choices: Report Info: Welcome message -> Goal: Inform -> Presentation: Styled text block -> Interaction: None. Report Info: Schedule/Map/Uber -> Goal: Organize/Inform -> Presentation: Chronological cards with icons and prominent buttons -> Interaction: Clickable nav tab to reveal section, external links for map/Uber. Report Info: Gift Cards -> Goal: Inform -> Presentation: Grid of cards with descriptions -> Interaction: Clickable nav tab to reveal section, external links for gift cards. This design uses structured HTML/CSS and JS for all dynamic elements. -->
<!-- CONFIRMATION: NO SVG graphics used. NO Mermaid JS used. -->
<style>
body {
font-family: 'Inter', sans-serif;
}
h1, h2, h3 {
font-family: 'Playfair Display', serif;
}
.nav-button.active {
border-bottom-color: #062c5c; /* A darker navy for the active state */
color: #062c5c;
}
</style>
</head>
<body class="bg-blue-50 text-gray-800">
<div class="container mx-auto max-w-4xl p-4 sm:p-6 md:p-8">
<!-- Header -->
<header class="text-center mb-8">
<h1 class="text-4xl md:text-5xl font-bold text-blue-900">Welcome to Chicago!</h1>
<p class="text-xl md:text-2xl text-blue-800 mt-2">Celebrating Eli's Bar Mitzvah</p>
</header>
<!-- Navigation -->
<nav class="flex justify-center border-b border-blue-200 mb-8">
<button data-target="welcome" class="nav-button active text-lg font-semibold text-blue-800 py-3 px-6 border-b-4 border-transparent hover:border-blue-800 transition-colors duration-300">
Welcome
</button>
<button data-target="schedule" class="nav-button text-lg font-semibold text-blue-800 py-3 px-6 border-b-4 border-transparent hover:border-blue-800 transition-colors duration-300">
Schedule & Map
</button>
<button data-target="treats" class="nav-button text-lg font-semibold text-blue-800 py-3 px-6 border-b-4 border-transparent hover:border-blue-800 transition-colors duration-300">
Chicago Treats
</button>
</nav>
<!-- Content Sections -->
<main>
<!-- Welcome Section -->
<section id="welcome" class="content-section text-center leading-relaxed">
<h2 class="text-3xl font-bold text-blue-900 mb-4">Mazel Tov, Eli!</h2>
<p class="mb-4">
We are so incredibly happy and honored that you've traveled to be with us for one of the most important milestones in our family's life: Eli's Bar Mitzvah! Your presence means the world to us, and we are so excited to celebrate with you this weekend.
</p>
<p>
To help make your stay as easy and enjoyable as possible, we've put together this digital welcome bag with a few essentials to get you around and give you a taste of the city we love.
</p>
<p class="mt-8 font-bold text-lg text-blue-900">
With love and excitement,
<br>
The Goltz Family
</p>
</section>
<!-- Schedule & Map Section -->
<section id="schedule" class="content-section hidden">
<h2 class="text-3xl font-bold text-blue-900 mb-6 text-center">Weekend Essentials</h2>
<div class="grid md:grid-cols-2 gap-6 mb-8">
<a href="#" class="block bg-white p-6 rounded-lg shadow-md hover:shadow-xl transition-shadow duration-300 text-center">
<h3 class="text-2xl font-bold text-blue-900 mb-2">🚗 Getting Around</h3>
<p class="mb-4">Uber credits to help you get to and from the weekend's events.</p>
<span class="inline-block bg-yellow-400 text-yellow-900 font-bold py-2 px-6 rounded-full hover:bg-yellow-500 transition-colors">
Access Uber Credits
</span>
</a>
<a href="#" class="block bg-white p-6 rounded-lg shadow-md hover:shadow-xl transition-shadow duration-300 text-center">
<h3 class="text-2xl font-bold text-blue-900 mb-2">📍 Key Locations</h3>
<p class="mb-4">All important addresses and times are pinned on this custom map.</p>
<span class="inline-block bg-yellow-400 text-yellow-900 font-bold py-2 px-6 rounded-full hover:bg-yellow-500 transition-colors">
View Weekend Map
</span>
</a>
</div>
<h3 class="text-2xl font-bold text-blue-900 mb-4 text-center">Schedule of Events</h3>
<div class="space-y-4">
<!-- Saturday Events -->
<div class="bg-white p-5 rounded-lg shadow-md">
<h4 class="font-bold text-xl text-blue-900">Saturday, August 30th</h4>
<div class="mt-3 border-t pt-3 space-y-3">
<p><span class="font-semibold">Eli Benjamin is Called to the Torah as a Bar Mitzvah:</span> 4:30 P.M. at North Shore Congregation Israel</p>
<p><span class="font-semibold">Celebratory Dinner:</span> 6:30 PM at Guildhall </p>
</div>
</div>
<!-- Saturday Events -->
<div class="bg-white p-5 rounded-lg shadow-md">
<h4 class="font-bold text-xl text-blue-900">Sunday, August 31st</h4>
<div class="mt-3 border-t pt-3 space-y-3">
<p><span class="font-semibold">Celebration Party:</span> 7:00 PM at Rockwell on the River</p>
<p class="text-sm text-gray-600 italic">*Cocktail Attire*</p>
</div>
</div>
</div>
</section>
<!-- Chicago Treats Section -->
<section id="treats" class="content-section hidden">
<h2 class="text-3xl font-bold text-blue-900 mb-6 text-center">A Taste of Chicago</h2>
<p class="text-center mb-8">Chicago is a foodie town, and we wanted to share a few of our favorites with you. Please enjoy a bite on us!</p>
<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
<!-- Lou Malnati's -->
<div class="bg-white rounded-lg shadow-md p-6 flex flex-col items-center text-center">
<h3 class="text-2xl font-bold text-blue-900 mb-2">Lou Malnati's</h3>
<p class="flex-grow mb-4">You can't come to Chicago and not have deep-dish pizza! This is our family's favorite.</p>
<a href="#" class="mt-auto inline-block bg-powder-blue-500 bg-blue-200 text-blue-900 font-bold py-2 px-6 rounded-full hover:bg-blue-300 transition-colors">View Gift Card</a>
</div>
<!-- Lettuce Entertain You -->
<div class="bg-white rounded-lg shadow-md p-6 flex flex-col items-center text-center">
<h3 class="text-2xl font-bold text-blue-900 mb-2">Lettuce Entertain You</h3>
<p class="flex-grow mb-4">This restaurant group has something for everyone, from casual to fancy.</p>
<a href="#" class="mt-auto inline-block bg-blue-200 text-blue-900 font-bold py-2 px-6 rounded-full hover:bg-blue-300 transition-colors">View Gift Card</a>
</div>
<!-- A Chicago Classic -->
<div class="bg-white rounded-lg shadow-md p-6 flex flex-col items-center text-center">
<h3 class="text-2xl font-bold text-blue-900 mb-2">A Chicago Classic</h3>
<p class="flex-grow mb-4">e.g., Portillo's for hot dogs, Garrett Popcorn, or another local favorite.</p>
<a href="#" class="mt-auto inline-block bg-blue-200 text-blue-900 font-bold py-2 px-6 rounded-full hover:bg-blue-300 transition-colors">View Gift Card</a>
</div>
</div>
</section>
</main>
</div>
<script>
const navButtons = document.querySelectorAll('.nav-button');
const contentSections = document.querySelectorAll('.content-section');
navButtons.forEach(button => {
button.addEventListener('click', () => {
const targetId = button.dataset.target;
// Handle active button state
navButtons.forEach(btn => {
btn.classList.remove('active');
});
button.classList.add('active');
// Show the target section and hide others
contentSections.forEach(section => {
if (section.id === targetId) {
section.classList.remove('hidden');
} else {
section.classList.add('hidden');
}
});
});
});
</script>
</body>
</html>