hey this is my code for my website ,<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>CapTravel - Premium Travel Planner</title>
<!-- Tailwind CDN -->
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="styles.css" />
<!-- Google Fonts -->
<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@400;600;700&family=Inter:wght@300;400;500;600&display=swap" rel="stylesheet">
<!-- Font Awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<script>
tailwind.config = {
theme: {
extend: {
colors: {
'premium-gold': '#D4AF37',
'premium-navy': '#13274F',
'premium-cream': '#F8F4E9',
'premium-teal': '#2A9D8F',
'premium-burgundy': '#8B0000'
},
fontFamily: {
'display': ['Playfair Display', 'serif'],
'sans': ['Inter', 'sans-serif']
}
}
}
}
</script>
</head>
<body class="bg-gradient-to-br from-premium-cream via-white to-premium-cream min-h-screen">
<!-- Background Decorative Elements -->
<div class="fixed inset-0 z-0 opacity-10">
<div class="absolute top-20 left-20 w-32 h-32 rounded-full bg-premium-gold"></div>
<div class="absolute bottom-20 right-20 w-24 h-24 rounded-full bg-premium-teal"></div>
<div class="absolute top-1/2 left-1/4 w-16 h-16 bg-premium-navy rounded-lg"></div>
</div>
<main class="relative z-10 min-h-screen flex items-center justify-center p-6">
<form
id="plannerForm"
class="w-full max-w-3xl bg-white/95 backdrop-blur-sm border border-premium-gold/20 rounded-2xl shadow-xl p-8 md:p-10 space-y-8 transition-all duration-300 hover:shadow-2xl"
novalidate
>
<header class="flex items-center justify-between gap-4 border-b border-premium-gold/30 pb-6">
<div class="flex items-center gap-3">
<div class="w-12 h-12 bg-gradient-to-r from-premium-gold to-premium-navy rounded-lg flex items-center justify-center">
<svg class="w-6 h-6 text-white" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M2 21L23 12L2 3L9 12L2 21Z" fill="currentColor" />
</svg>
</div>
<div>
<h1 class="text-3xl font-bold font-display text-premium-navy">CapTravel</h1>
<p class="text-sm text-premium-navy/70 font-sans">
Luxury Travel Planning — Your Journey Begins Here
</p>
</div>
</div>
</header>
<!-- Error Messages -->
<div id="errorMessages" class="text-premium-burgundy text-sm space-y-1 font-sans"></div>
<!-- Travel Quote Display -->
<div id="travelQuote" class="text-center p-4 bg-premium-cream/50 rounded-lg border border-premium-gold/20">
<p class="text-premium-navy italic text-sm md:text-base font-sans transition-all duration-500">
<i class="fas fa-quote-left text-premium-gold mr-2"></i>
<span id="quoteText">The world is a book, and those who do not travel read only one page.</span>
<i class="fas fa-quote-right text-premium-gold ml-2"></i>
</p>
<p class="text-premium-navy/60 text-xs mt-2 font-sans" id="quoteAuthor">— Saint Augustine</p>
</div>
<!-- Destination + Return Date + Enter Button -->
<div class="flex gap-4 flex-wrap items-end">
<!-- Destination -->
<div class="flex-1 min-w-[250px]">
<label class="block text-premium-navy text-sm font-medium mb-2 font-sans">
Destination
<i class="fas fa-map-marker-alt text-premium-gold ml-1"></i>
</label>
<input
id="to"
name="to"
type="text"
placeholder="City, airport or address"
class="w-full rounded-xl border border-premium-navy/20 px-4 py-3 focus:outline-none focus:ring-2 focus:ring-premium-gold focus:border-transparent transition-all duration-200 font-sans"
autocomplete="off"
/>
</div>
<!-- Return Date -->
<div class="flex-1 min-w-[180px]">
<label class="block text-premium-navy text-sm font-medium mb-2 font-sans">
Return Date
<i class="fas fa-calendar-alt text-premium-gold ml-1"></i>
</label>
<input
id="returnDate"
name="returnDate"
type="text"
placeholder="DD/MM/YYYY"
class="w-full rounded-xl border border-premium-navy/20 px-4 py-3 focus:outline-none focus:ring-2 focus:ring-premium-gold focus:border-transparent transition-all duration-200 font-sans"
/>
</div>
<!-- Enter Button -->
<button
type="submit"
class="bg-gradient-to-r from-premium-gold to-premium-navy text-white px-8 py-3 rounded-xl shadow-lg hover:shadow-xl hover:from-premium-gold/90 hover:to-premium-navy/90 transition-all duration-300 transform hover:scale-105 focus:outline-none focus:ring-2 focus:ring-premium-gold focus:ring-offset-2 font-sans font-medium"
>
<i class="fas fa-plane-departure mr-2"></i>
Plan My Trip
</button>
</div>
<!-- Additional Quotes Section -->
<div class="text-center pt-6 border-t border-premium-gold/20">
<p class="text-xs text-premium-navy/60 font-sans">
<i class="fas fa-sync-alt text-premium-gold mr-1 cursor-pointer hover:rotate-180 transition-transform duration-300" onclick="changeQuote()"></i>
Click to discover more travel wisdom
</p>
</div>
</form>
</main>
<script>
// Travel quotes array
const travelQuotes = [
{
text: "The world is a book, and those who do not travel read only one page.",
author: "Saint Augustine"
},
{
text: "Traveling – it leaves you speechless, then turns you into a storyteller.",
author: "Ibn Battuta"
},
{
text: "Life is either a daring adventure or nothing at all.",
author: "Helen Keller"
},
{
text: "To travel is to discover that everyone is wrong about other countries.",
author: "Aldous Huxley"
},
{
text: "The journey not the arrival matters.",
author: "T.S. Eliot"
},
{
text: "We travel not to escape life, but for life not to escape us.",
author: "Anonymous"
},
{
text: "Adventure is worthwhile in itself.",
author: "Amelia Earhart"
}
];
// Function to change quote
function changeQuote() {
const randomIndex = Math.floor(Math.random() * travelQuotes.length);
const quote = travelQuotes[randomIndex];
const quoteElement = document.getElementById('quoteText');
const authorElement = document.getElementById('quoteAuthor');
// Fade out animation
quoteElement.style.opacity = '0';
authorElement.style.opacity = '0';
setTimeout(() => {
quoteElement.textContent = quote.text;
authorElement.textContent = '— ' + quote.author;
// Fade in animation
quoteElement.style.opacity = '1';
authorElement.style.opacity = '1';
}, 300);
}
// Auto-change quote every 10 seconds
setInterval(changeQuote, 10000);
function saveCity() {
const city = document.getElementById("to").value;
if (city) {
localStorage.setItem("city", city);
window.location.href = "options/stay-transport.html";
} else {
alert("Please enter a city!");
}
}
let selectedPlace = null;
function initAutocomplete() {
const toInput = document.getElementById("to");
const options = {
fields: ["place_id", "name", "formatted_address", "geometry"],
types: ["(cities)"],
};
const toAutocomplete = new google.maps.places.Autocomplete(
toInput,
options
);
toAutocomplete.addListener("place_changed", () => {
selectedPlace = toAutocomplete.getPlace();
});
}
function formatDateInput(input) {
let value = input.value.replace(/\D/g, '');
if (value.length > 8) value = value.slice(0, 8);
let formatted = '';
if (value.length > 0) {
formatted += value.substring(0, 2);
}
if (value.length > 2) {
formatted += '/' + value.substring(2, 4);
}
if (value.length > 4) {
formatted += '/' + value.substring(4, 8);
}
input.value = formatted;
}
document.addEventListener("DOMContentLoaded", () => {
const form = document.getElementById("plannerForm");
const errorDiv = document.getElementById("errorMessages");
const returnDateInput = document.getElementById("returnDate");
// Add input formatting for date
returnDateInput.addEventListener('input', () => {
formatDateInput(returnDateInput);
});
form.addEventListener("submit", function (e) {
e.preventDefault();
errorDiv.innerHTML = "";
const returnDateValue = returnDateInput.value.trim();
const errors = [];
if (!selectedPlace) {
errors.push("Please select a destination from suggestions.");
}
if (!returnDateValue) {
errors.push("Please enter a return date.");
}
if (returnDateValue) {
const dateParts = returnDateValue.split("/");
if (dateParts.length !== 3) {
errors.push("Return date must be in dd/mm/yyyy format.");
} else {
const day = parseInt(dateParts[0], 10);
const month = parseInt(dateParts[1], 10);
const year = parseInt(dateParts[2], 10);
const today = new Date();
const currentYear = today.getFullYear();
if (day < 1 || day > 31)
errors.push("Day must be between 1 and 31.");
if (month < 1 || month > 12)
errors.push("Month must be between 1 and 12.");
if (year < currentYear)
errors.push("Year cannot be less than current year.");
const daysInMonth = [
31,
year % 4 === 0 ? 29 : 28,
31,
30,
31,
30,
31,
31,
30,
31,
30,
31,
];
if (month >= 1 && month <= 12 && day > daysInMonth[month - 1]) {
errors.push(`Invalid date for month ${month}.`);
}
}
}
if (errors.length > 0) {
errorDiv.innerHTML = errors
.map((err) => `<div class="flex items-center gap-2"><i class="fas fa-exclamation-circle"></i> ${err}</div>`)
.join("");
return;
}
const destination = selectedPlace.formatted_address || selectedPlace.name;
localStorage.setItem("selectedCity", destination);
window.location.href = `options/index.html?destination=${encodeURIComponent(
destination
)}&returnDate=${encodeURIComponent(returnDateValue)}`;
});
});
</script>
<!-- Google Maps API -->
<script
async
defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAYzCuoNPOO9kL3pvp_TFCfTsX6smwQnKQ&libraries=places&callback=initAutocomplete"
></script>
</body>
</html> hey add some beauiful nature image at background then use these colors Green + White + Beige