Prompt Details
Model
(gemini-3.0-pro)
Token size
411
Example input
[AGENCY_NAME]: Atlas Voyage
[DESTINATION]: Paris, Rome, Barcelona City Tours
[BRAND_TONE]: Premium yet Friendly
Example output
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Atlas Voyage | Premium City Tours: Paris, Rome, Barcelona</title>
<meta name="description" content="Experience the magic of Europe with Atlas Voyage. Curated, premium city tours of Paris, Rome, and Barcelona. Small groups, expert guides, and unforgettable memories.">
<meta name="theme-color" content="#1e3c72">
<meta property="og:type" content="website">
<meta property="og:url" content="https://www.atlasvoyage.com/">
<meta property="og:title" content="Atlas Voyage | Premium European City Tours">
<meta property="og:description" content="Unlock the magic of Paris, Rome, and Barcelona with expert-led premium tours.">
<meta property="og:image" content=""> <script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "TravelAgency",
"name": "Atlas Voyage",
"image": "",
"description": "Premium travel agency specializing in city tours of Paris, Rome, and Barcelona.",
"priceRange": "$$$",
"address": {
"@type": "PostalAddress",
"streetAddress": "123 Wanderlust Ave",
"addressLocality": "Travel City",
"postalCode": "90210",
"addressCountry": "US"
},
"telephone": "+15550199",
"makesOffer": [
{
"@type": "Offer",
"name": "The Parisian Dream",
"price": "1299",
"priceCurrency": "USD",
"description": "5-Day Premium Tour of Paris including Louvre access and Seine Cruise."
},
{
"@type": "Offer",
"name": "Eternal City Escape",
"price": "1150",
"priceCurrency": "USD",
"description": "4-Day Rome exploration including Vatican VIP tour."
},
{
"@type": "Offer",
"name": "Catalan Soul",
"price": "1099",
"priceCurrency": "USD",
"description": "4-Day Barcelona architecture and culinary tour."
}
]
}
</script>
<style>
/* --- RESET & VARIABLES --- */
:root {
--primary: #1e3c72; /* Deep Royal Blue */
--primary-dark: #162d55;
--accent: #d4af37; /* Gold */
--accent-hover: #b5952f;
--bg-light: #fdfbf7; /* Cream/Off-white */
--bg-white: #ffffff;
--text-dark: #2c3e50;
--text-light: #546e7a;
--border-radius: 8px;
--shadow-sm: 0 4px 6px rgba(0,0,0,0.05);
--shadow-lg: 0 10px 25px rgba(0,0,0,0.1);
--font-main: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
--transition: all 0.3s ease;
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
scroll-behavior: smooth;
}
body {
font-family: var(--font-main);
color: var(--text-dark);
background-color: var(--bg-light);
line-height: 1.6;
-webkit-font-smoothing: antialiased;
}
a { text-decoration: none; color: inherit; transition: var(--transition); }
ul { list-style: none; }
img { max-width: 100%; display: block; }
/* --- UTILITIES --- */
.container {
width: 90%;
max-width: 1200px;
margin: 0 auto;
padding: 0 1rem;
}
.btn {
display: inline-block;
padding: 0.8rem 1.5rem;
border-radius: 50px;
font-weight: 600;
text-align: center;
cursor: pointer;
border: none;
font-size: 1rem;
transition: var(--transition);
}
.btn-primary {
background-color: var(--primary);
color: white;
box-shadow: 0 4px 15px rgba(30, 60, 114, 0.3);
}
.btn-primary:hover {
background-color: var(--primary-dark);
transform: translateY(-2px);
}
.btn-secondary {
background-color: transparent;
border: 2px solid var(--primary);
color: var(--primary);
}
.btn-secondary:hover {
background-color: var(--primary);
color: white;
}
.btn-accent {
background-color: var(--accent);
color: white;
}
.btn-accent:hover {
background-color: var(--accent-hover);
transform: translateY(-2px);
}
.section-padding { padding: 5rem 0; }
.text-center { text-align: center; }
.text-gold { color: var(--accent); }
h1, h2, h3 { line-height: 1.2; margin-bottom: 1rem; font-weight: 700; }
h2 { font-size: 2.25rem; color: var(--primary); margin-bottom: 0.5rem; }
.section-subtitle { display: block; margin-bottom: 3rem; color: var(--text-light); }
/* --- HEADER --- */
header {
position: sticky;
top: 0;
z-index: 1000;
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(10px);
border-bottom: 1px solid rgba(0,0,0,0.05);
padding: 1rem 0;
transition: var(--transition);
}
nav {
display: flex;
justify-content: space-between;
align-items: center;
}
.logo {
font-size: 1.5rem;
font-weight: 800;
color: var(--primary);
letter-spacing: -0.5px;
}
.nav-links {
display: none;
}
.nav-links a {
margin-left: 2rem;
font-weight: 500;
font-size: 0.95rem;
color: var(--text-dark);
}
.nav-links a:hover { color: var(--primary); }
@media(min-width: 768px) {
.nav-links { display: flex; align-items: center; }
}
/* --- HERO --- */
#hero {
position: relative;
padding: 8rem 0 6rem;
background: linear-gradient(135deg, #fdfbf7 0%, #e6e9f0 100%);
overflow: hidden;
}
.hero-content {
position: relative;
z-index: 2;
max-width: 700px;
}
.hero-title {
font-size: 3rem;
color: var(--primary);
margin-bottom: 1.5rem;
}
.hero-text {
font-size: 1.25rem;
color: var(--text-light);
margin-bottom: 2.5rem;
}
.hero-btns {
display: flex;
gap: 1rem;
flex-wrap: wrap;
}
/* Geometric Abstract Shapes for Visual Interest (No Images) */
.shape {
position: absolute;
border-radius: 50%;
opacity: 0.1;
z-index: 1;
}
.shape-1 { width: 400px; height: 400px; background: var(--primary); top: -100px; right: -100px; }
.shape-2 { width: 200px; height: 200px; background: var(--accent); bottom: 50px; left: -50px; }
@media(min-width: 768px) {
.hero-title { font-size: 4.5rem; }
}
/* --- PACKAGES --- */
.packages-grid {
display: grid;
grid-template-columns: 1fr;
gap: 2rem;
}
@media(min-width: 768px) {
.packages-grid { grid-template-columns: repeat(3, 1fr); }
}
.package-card {
background: var(--bg-white);
border-radius: var(--border-radius);
overflow: hidden;
box-shadow: var(--shadow-sm);
transition: var(--transition);
display: flex;
flex-direction: column;
border: 1px solid rgba(0,0,0,0.03);
}
.package-card:hover {
transform: translateY(-5px);
box-shadow: var(--shadow-lg);
}
.card-img-placeholder {
height: 200px;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-weight: bold;
font-size: 1.5rem;
text-transform: uppercase;
letter-spacing: 1px;
position: relative;
}
/* CSS Gradients instead of images */
.bg-paris { background: linear-gradient(45deg, #3a7bd5, #00d2ff); }
.bg-rome { background: linear-gradient(45deg, #FF512F, #DD2476); }
.bg-barcelona { background: linear-gradient(45deg, #F09819, #EDDE5D); }
.card-body {
padding: 2rem;
display: flex;
flex-direction: column;
flex-grow: 1;
}
.card-meta {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 1rem;
font-size: 0.9rem;
color: var(--text-light);
}
.card-title {
font-size: 1.5rem;
margin-bottom: 0.5rem;
color: var(--primary);
}
.card-desc {
color: var(--text-light);
margin-bottom: 1.5rem;
font-size: 0.95rem;
}
.card-price {
font-size: 1.75rem;
font-weight: 800;
color: var(--primary);
margin-top: auto;
margin-bottom: 1.5rem;
}
.card-price span { font-size: 1rem; font-weight: 400; color: var(--text-light); }
/* --- WHY US --- */
#why-us { background-color: var(--bg-white); }
.features-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 2rem;
margin-top: 3rem;
}
.feature-item {
text-align: center;
padding: 2rem;
background: var(--bg-light);
border-radius: var(--border-radius);
}
.feature-icon {
width: 60px;
height: 60px;
background: var(--primary);
color: white;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 1.5rem;
font-size: 1.5rem;
}
/* --- DESTINATIONS HIGHLIGHTS --- */
.dest-list {
list-style: none;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 1.5rem;
}
.dest-item {
background: white;
padding: 1.5rem;
border-radius: var(--border-radius);
box-shadow: var(--shadow-sm);
display: flex;
align-items: flex-start;
}
.check-icon {
color: var(--accent);
margin-right: 1rem;
flex-shrink: 0;
width: 24px;
}
/* --- TESTIMONIALS --- */
#testimonials { background-color: var(--primary); color: white; }
#testimonials h2 { color: white; }
#testimonials .section-subtitle { color: rgba(255,255,255,0.8); }
.testimonial-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
}
.quote-card {
background: rgba(255,255,255,0.1);
backdrop-filter: blur(5px);
padding: 2rem;
border-radius: var(--border-radius);
border: 1px solid rgba(255,255,255,0.1);
}
.quote-text {
font-style: italic;
margin-bottom: 1.5rem;
line-height: 1.8;
}
.quote-author {
font-weight: 700;
color: var(--accent);
}
/* --- FAQ --- */
.accordion {
max-width: 800px;
margin: 0 auto;
}
.accordion-item {
border-bottom: 1px solid #ddd;
}
.accordion-btn {
width: 100%;
text-align: left;
background: none;
border: none;
padding: 1.5rem 0;
font-size: 1.1rem;
font-weight: 600;
color: var(--primary);
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
}
.accordion-content {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease-out;
color: var(--text-light);
}
.accordion-content p {
padding-bottom: 1.5rem;
}
.icon-plus { transition: transform 0.3s; font-weight: 300; }
.active .icon-plus { transform: rotate(45deg); }
/* --- BOOKING FORM --- */
#contact { background-color: #f4f6f9; }
.form-container {
background: white;
padding: 3rem;
border-radius: var(--border-radius);
box-shadow: var(--shadow-lg);
max-width: 700px;
margin: 0 auto;
}
.form-group { margin-bottom: 1.5rem; }
label {
display: block;
margin-bottom: 0.5rem;
font-weight: 600;
font-size: 0.9rem;
color: var(--text-dark);
}
.form-control {
width: 100%;
padding: 0.8rem 1rem;
border: 1px solid #ddd;
border-radius: 4px;
font-size: 1rem;
font-family: inherit;
}
.form-control:focus {
outline: none;
border-color: var(--primary);
box-shadow: 0 0 0 3px rgba(30, 60, 114, 0.1);
}
.form-row {
display: grid;
grid-template-columns: 1fr;
gap: 1.5rem;
}
@media(min-width: 600px) {
.form-row { grid-template-columns: 1fr 1fr; }
}
.microcopy {
font-size: 0.8rem;
color: var(--text-light);
margin-top: 1rem;
text-align: center;
}
.success-message {
display: none;
text-align: center;
padding: 2rem;
}
.success-icon {
color: green;
font-size: 3rem;
margin-bottom: 1rem;
}
/* --- FOOTER --- */
footer {
background: var(--primary-dark);
color: white;
padding: 4rem 0 2rem;
text-align: center;
}
.footer-logo { font-size: 1.5rem; font-weight: bold; margin-bottom: 1rem; display: block; }
.footer-links { margin-bottom: 2rem; }
.footer-links a { color: rgba(255,255,255,0.7); margin: 0 1rem; }
.footer-links a:hover { color: white; }
.trust-note { font-size: 0.85rem; color: rgba(255,255,255,0.5); }
/* --- SVGs --- */
.svg-icon { width: 1.2em; height: 1.2em; vertical-align: middle; fill: currentColor; }
</style>
</head>
<body>
<header id="navbar">
<div class="container">
<nav>
<a href="#" class="logo">Atlas Voyage.</a>
<div class="nav-links">
<a href="#packages">Destinations</a>
<a href="#why-us">Why Us</a>
<a href="#testimonials">Reviews</a>
<a href="#faq">FAQ</a>
<a href="#contact" class="btn btn-primary" style="margin-left: 2rem; color: white;">Get a Quote</a>
</div>
<button aria-label="Menu" style="display:block; padding:0.5rem; background:none; border:none; color:var(--primary); font-size:1.5rem;" onclick="document.querySelector('.nav-links').style.display = document.querySelector('.nav-links').style.display === 'flex' ? 'none' : 'flex'">
☰
</button>
<style>@media(min-width:768px){ button[aria-label="Menu"] { display:none !important; } }</style>
</nav>
</div>
</header>
<main>
<section id="hero">
<div class="shape shape-1"></div>
<div class="shape shape-2"></div>
<div class="container hero-content">
<h1 class="hero-title">Europe’s Icons, <br>Unlocked.</h1>
<p class="hero-text">Experience Paris, Rome, and Barcelona with the perfect blend of premium comfort, expert local guides, and authentic cultural immersion.</p>
<div class="hero-btns">
<a href="#packages" class="btn btn-primary">View Packages</a>
<a href="#contact" class="btn btn-secondary">Request Quote</a>
</div>
</div>
</section>
<section id="packages" class="section-padding">
<div class="container">
<div class="text-center">
<h2>Curated City Escapes</h2>
<span class="section-subtitle">Hand-picked itineraries designed for the modern traveler.</span>
</div>
<div class="packages-grid">
<article class="package-card">
<div class="card-img-placeholder bg-paris">Paris</div>
<div class="card-body">
<div class="card-meta">
<span><svg class="svg-icon" viewBox="0 0 24 24"><path d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"/><path d="M12.5 7H11v6l5.25 3.15.75-1.23-4.5-2.67z"/></svg> 5 Days</span>
<span>Small Group</span>
</div>
<h3 class="card-title">The Parisian Dream</h3>
<p class="card-desc">Louvre skip-the-line, Seine sunset cruise, and a private culinary tour of Le Marais.</p>
<div class="card-price">$1,299 <span>/ person</span></div>
<a href="#contact" class="btn btn-secondary" style="width:100%" onclick="prefillForm('The Parisian Dream')">Book Paris</a>
</div>
</article>
<article class="package-card">
<div class="card-img-placeholder bg-rome">Rome</div>
<div class="card-body">
<div class="card-meta">
<span><svg class="svg-icon" viewBox="0 0 24 24"><path d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"/><path d="M12.5 7H11v6l5.25 3.15.75-1.23-4.5-2.67z"/></svg> 4 Days</span>
<span>Best Seller</span>
</div>
<h3 class="card-title">Eternal City Escape</h3>
<p class="card-desc">VIP Vatican entry, Colosseum underground access, and traditional pasta making class.</p>
<div class="card-price">$1,150 <span>/ person</span></div>
<a href="#contact" class="btn btn-secondary" style="width:100%" onclick="prefillForm('Eternal City Escape')">Book Rome</a>
</div>
</article>
<article class="package-card">
<div class="card-img-placeholder bg-barcelona">Barcelona</div>
<div class="card-body">
<div class="card-meta">
<span><svg class="svg-icon" viewBox="0 0 24 24"><path d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"/><path d="M12.5 7H11v6l5.25 3.15.75-1.23-4.5-2.67z"/></svg> 4 Days</span>
<span>Cultural</span>
</div>
<h3 class="card-title">Catalan Soul</h3>
<p class="card-desc">Sagrada Família guided tour, Park Güell at sunrise, and Tapas & Wine tasting evening.</p>
<div class="card-price">$1,099 <span>/ person</span></div>
<a href="#contact" class="btn btn-secondary" style="width:100%" onclick="prefillForm('Catalan Soul')">Book Barcelona</a>
</div>
</article>
</div>
</div>
</section>
<section id="why-us" class="section-padding">
<div class="container">
<div class="text-center">
<h2>The Atlas Difference</h2>
<span class="section-subtitle">Why seasoned travelers choose us for their European getaways.</span>
</div>
<div class="features-grid">
<div class="feature-item">
<div class="feature-icon">★</div>
<h3>Handpicked Guides</h3>
<p>We work exclusively with local historians and experts, not just tour leaders.</p>
</div>
<div class="feature-item">
<div class="feature-icon">✓</div>
<h3>Zero Stress</h3>
<p>We handle logistics, tickets, and transfers. You just show up and enjoy.</p>
</div>
<div class="feature-item">
<div class="feature-icon">👥</div>
<h3>Small Groups</h3>
<p>Maximum 12 travelers per group for an intimate, personalized experience.</p>
</div>
</div>
</div>
</section>
<section id="destinations" class="section-padding" style="background-color: #f4f6f9;">
<div class="container">
<h2 class="text-center">What's Included</h2>
<div style="max-width: 800px; margin: 3rem auto;">
<ul class="dest-list">
<li class="dest-item">
<span class="check-icon">✔</span>
<div><strong>Premium Accommodation:</strong> 4-star boutique hotels centrally located.</div>
</li>
<li class="dest-item">
<span class="check-icon">✔</span>
<div><strong>Skip-the-Line Access:</strong> No waiting at the Louvre, Vatican, or Sagrada Família.</div>
</li>
<li class="dest-item">
<span class="check-icon">✔</span>
<div><strong>Daily Breakfast:</strong> Start every day with authentic local cuisine.</div>
</li>
<li class="dest-item">
<span class="check-icon">✔</span>
<div><strong>24/7 Support:</strong> Real humans available via WhatsApp or phone, day or night.</div>
</li>
</ul>
</div>
</div>
</section>
<section id="testimonials" class="section-padding">
<div class="container">
<div class="text-center">
<h2>Traveler Stories</h2>
<span class="section-subtitle">Real memories from our community.</span>
</div>
<div class="testimonial-grid">
<div class="quote-card">
<p class="quote-text">"The 'Parisian Dream' package was flawless. The guide knew secret spots we never would have found on our own. Truly premium service."</p>
<p class="quote-author">— Sarah J., New York</p>
</div>
<div class="quote-card">
<p class="quote-text">"Rome can be chaotic, but Atlas made it effortless. The Vatican tour was the highlight of our year. Highly recommended!"</p>
<p class="quote-author">— Mark & Elena, Chicago</p>
</div>
<div class="quote-card">
<p class="quote-text">"Barcelona was magical. The itinerary struck the perfect balance between organized activities and free time to explore."</p>
<p class="quote-author">— David L., London</p>
</div>
</div>
</div>
</section>
<section id="faq" class="section-padding">
<div class="container">
<h2 class="text-center">Common Questions</h2>
<div class="accordion">
<div class="accordion-item">
<button class="accordion-btn" aria-expanded="false">
Are flights included?
<span class="icon-plus">+</span>
</button>
<div class="accordion-content">
<p>To give you maximum flexibility with your departure city and airline miles, international flights are not included. We handle everything once you land.</p>
</div>
</div>
<div class="accordion-item">
<button class="accordion-btn" aria-expanded="false">
What is the cancellation policy?
<span class="icon-plus">+</span>
</button>
<div class="accordion-content">
<p>We offer a flexible policy. Full refund up to 30 days before departure. 50% refund between 29-15 days.</p>
</div>
</div>
<div class="accordion-item">
<button class="accordion-btn" aria-expanded="false">
Is travel insurance required?
<span class="icon-plus">+</span>
</button>
<div class="accordion-content">
<p>Yes, for your safety and peace of mind, we require all travelers to have valid travel insurance covering medical emergencies.</p>
</div>
</div>
</div>
</div>
</section>
<section id="contact" class="section-padding">
<div class="container">
<div class="text-center">
<h2>Start Your Journey</h2>
<span class="section-subtitle">Tell us about your dream trip, and we'll handle the details.</span>
</div>
<div class="form-container">
<div id="success-msg" class="success-message">
<div class="success-icon">✔</div>
<h3>Request Received!</h3>
<p>Thank you for choosing Atlas Voyage. One of our travel specialists is reviewing your request and will email you within 24 hours.</p>
<p style="margin-top:1rem; font-size:0.9rem; color:#666;">(We also opened your email client to send a copy).</p>
<button onclick="location.reload()" class="btn btn-secondary" style="margin-top:1rem;">Back to Home</button>
</div>
<form id="bookingForm" onsubmit="handleForm(event)">
<div class="form-row">
<div class="form-group">
<label for="name">Full Name</label>
<input type="text" id="name" class="form-control" placeholder="Jane Doe" required>
</div>
<div class="form-group">
<label for="email">Email Address</label>
<input type="email" id="email" class="form-control" placeholder="jane@example.com" required>
</div>
</div>
<div class="form-row">
<div class="form-group">
<label for="phone">Phone Number</label>
<input type="tel" id="phone" class="form-control" placeholder="+1 (555) 000-0000" required>
</div>
<div class="form-group">
<label for="package">Interested Package</label>
<select id="package" class="form-control">
<option value="General Inquiry">General Inquiry</option>
<option value="The Parisian Dream">The Parisian Dream (Paris)</option>
<option value="Eternal City Escape">Eternal City Escape (Rome)</option>
<option value="Catalan Soul">Catalan Soul (Barcelona)</option>
<option value="Multi-City Custom">Multi-City Custom Tour</option>
</select>
</div>
</div>
<div class="form-row">
<div class="form-group">
<label for="travelers">Travelers</label>
<input type="number" id="travelers" class="form-control" min="1" placeholder="2" required>
</div>
<div class="form-group">
<label for="date">Preferred Date</label>
<input type="date" id="date" class="form-control" required>
</div>
</div>
<div class="form-group">
<label for="message">Additional Requests / Budget</label>
<textarea id="message" rows="4" class="form-control" placeholder="Celebrating an anniversary? Dietary restrictions? Let us know."></textarea>
</div>
<button type="submit" class="btn btn-primary" style="width: 100%;">Request Quote</button>
<p class="microcopy">We respect your privacy. No spam, just travel plans.</p>
</form>
</div>
</div>
</section>
</main>
<footer>
<div class="container">
<a href="#" class="footer-logo">Atlas Voyage.</a>
<div class="footer-links">
<a href="#packages">Destinations</a>
<a href="#why-us">About</a>
<a href="#contact">Contact</a>
<a href="#">Privacy Policy</a>
</div>
<div class="trust-note">
© 2024 Atlas Voyage. All rights reserved.<br>
Registered Travel Agency #12345
</div>
</div>
</footer>
<script>
// 1. Navbar Sticky Shadow Logic
const nav = document.getElementById('navbar');
window.addEventListener('scroll', () => {
if (window.scrollY > 50) {
nav.style.boxShadow = "0 2px 10px rgba(0,0,0,0.1)";
} else {
nav.style.boxShadow = "none";
}
});
// 2. Pre-fill Form selection from Package Buttons
function prefillForm(packageName) {
const select = document.getElementById('package');
select.value = packageName;
}
// 3. FAQ Accordion Logic
const accordions = document.querySelectorAll('.accordion-btn');
accordions.forEach(acc => {
acc.addEventListener('click', function() {
this.classList.toggle('active');
const content = this.nextElementSibling;
const isExpanded = this.getAttribute('aria-expanded') === 'true';
this.setAttribute('aria-expanded', !isExpanded);
if (content.style.maxHeight) {
content.style.maxHeight = null;
} else {
content.style.maxHeight = content.scrollHeight + "px";
}
});
});
// 4. Form Handling (Client-side validation + Mailto fallback)
function handleForm(e) {
e.preventDefault();
// Basic data gathering
const name = document.getElementById('name').value;
const email = document.getElementById('email').value;
const phone = document.getElementById('phone').value;
const pkg = document.getElementById('package').value;
const travelers = document.getElementById('travelers').value;
const date = document.getElementById('date').value;
const message = document.getElementById('message').value;
// Simple validation (HTML5 'required' handles most, checking date logic)
if(!name || !email || !phone || !date) {
alert("Please fill in all required fields.");
return;
}
// Construct Mailto Body
const subject = `Trip Inquiry: ${pkg} - ${name}`;
const body = `Name: ${name}%0D%0AEmail: ${email}%0D%0APhone: ${phone}%0D%0APackage: ${pkg}%0D%0ATravelers: ${travelers}%0D%0ADate: ${date}%0D%0AMessage: ${message}`;
// Show Success State UI
document.getElementById('bookingForm').style.display = 'none';
document.getElementById('success-msg').style.display = 'block';
// Trigger Mail Client
window.location.href = `mailto:bookings@atlasvoyage.com?subject=${subject}&body=${body}`;
}
// 5. Date Input Min Value (Today)
const dateInput = document.getElementById('date');
if(dateInput) {
dateInput.min = new Date().toISOString().split("T")[0];
}
</script>
</body>
</html>
Instant access
Commercial use
Money‑backBy purchasing this prompt, you agree to our terms of service
26
Views
GEMINI-3.0-PRO
This advanced prompt generates a production-ready, single-page travel agency website as a complete HTML file with inline CSS and JavaScript. It is designed for real-world use, optimized for mobile, SEO, accessibility, and conversions. Perfect for travel agencies, tour operators, and freelancers who need a fast, modern landing page without frameworks or external assets. Just change three variables and get a ready-to-publish website instantly.
...more
Added over 1 month ago
