// TripBookKar.com JavaScript // Data from application_data_json const data = { destinations: [ {"name": "Goa", "type": "Beach", "description": "Famous for beaches, nightlife, and Portuguese heritage", "image": "goa-beach.jpg", "rating": 4.5, "packages": 12}, {"name": "Kerala", "type": "Nature", "description": "God's Own Country with backwaters and spices", "image": "kerala-backwaters.jpg", "rating": 4.7, "packages": 15}, {"name": "Jaipur, Rajasthan", "type": "Heritage", "description": "Pink City with magnificent palaces and forts", "image": "jaipur-palace.jpg", "rating": 4.6, "packages": 18}, {"name": "Agra", "type": "Monument", "description": "Home to the iconic Taj Mahal", "image": "taj-mahal.jpg", "rating": 4.8, "packages": 10}, {"name": "Srinagar, Kashmir", "type": "Hill Station", "description": "Paradise on Earth with Dal Lake", "image": "kashmir-lake.jpg", "rating": 4.5, "packages": 8}, {"name": "Manali, Himachal", "type": "Adventure", "description": "Adventure sports and mountain views", "image": "manali-mountains.jpg", "rating": 4.4, "packages": 14}, {"name": "Rishikesh", "type": "Spiritual", "description": "Yoga Capital of the World", "image": "rishikesh-ganges.jpg", "rating": 4.3, "packages": 9}, {"name": "Coorg, Karnataka", "type": "Nature", "description": "Coffee plantations and misty hills", "image": "coorg-coffee.jpg", "rating": 4.2, "packages": 7}, {"name": "Ooty, Tamil Nadu", "type": "Hill Station", "description": "Queen of Hill Stations", "image": "ooty-nilgiris.jpg", "rating": 4.1, "packages": 11}, {"name": "Andaman Islands", "type": "Beach", "description": "Pristine beaches and coral reefs", "image": "andaman-beach.jpg", "rating": 4.6, "packages": 6} ], hotels: [ {"name": "Taj Mahal Palace", "location": "Mumbai", "rating": 5, "price": 25000, "amenities": ["Spa", "Pool", "Restaurant", "WiFi"], "image": "taj-mumbai.jpg"}, {"name": "Oberoi Udaivilas", "location": "Udaipur", "rating": 5, "price": 35000, "amenities": ["Lake View", "Spa", "Butler Service"], "image": "oberoi-udaipur.jpg"}, {"name": "Leela Palace", "location": "New Delhi", "rating": 5, "price": 22000, "amenities": ["Airport Transfer", "Spa", "Fine Dining"], "image": "leela-delhi.jpg"}, {"name": "ITC Grand Chola", "location": "Chennai", "rating": 5, "price": 18000, "amenities": ["Business Center", "Multiple Restaurants"], "image": "itc-chennai.jpg"}, {"name": "Marriott Resort", "location": "Goa", "rating": 4, "price": 12000, "amenities": ["Beach Access", "Pool", "Water Sports"], "image": "marriott-goa.jpg"} ], packages: [ {"name": "Golden Triangle Tour", "duration": "6D/5N", "price": 45000, "destinations": ["Delhi", "Agra", "Jaipur"], "type": "Heritage", "rating": 4.5}, {"name": "Kerala Backwaters Honeymoon", "duration": "5D/4N", "price": 35000, "destinations": ["Alleppey", "Kumarakom"], "type": "Romantic", "rating": 4.7}, {"name": "Goa Beach Holiday", "duration": "4D/3N", "price": 25000, "destinations": ["North Goa", "South Goa"], "type": "Beach", "rating": 4.3}, {"name": "Rajasthan Heritage Tour", "duration": "8D/7N", "price": 65000, "destinations": ["Jaipur", "Udaipur", "Jodhpur"], "type": "Heritage", "rating": 4.6}, {"name": "Kashmir Paradise Tour", "duration": "7D/6N", "price": 55000, "destinations": ["Srinagar", "Gulmarg", "Pahalgam"], "type": "Nature", "rating": 4.4} ], features: [ {"title": "Secure Payments", "description": "100% secure payment with Razorpay & PayU", "icon": "shield"}, {"title": "24/7 Support", "description": "Round the clock customer support", "icon": "headphones"}, {"title": "Best Prices", "description": "Guaranteed best prices for all bookings", "icon": "price-tag"}, {"title": "Easy Cancellation", "description": "Flexible cancellation policies", "icon": "calendar"} ], testimonials: [ {"name": "Priya Sharma", "location": "Mumbai", "rating": 5, "text": "Amazing experience! Booked Kerala tour and everything was perfect."}, {"name": "Rajesh Kumar", "location": "Delhi", "rating": 5, "text": "Great service and affordable prices. Highly recommended!"}, {"name": "Anita Singh", "location": "Bangalore", "rating": 4, "text": "Professional service and well-organized tours."} ] }; // Extended data for more destinations, hotels, and packages const extendedDestinations = [ ...data.destinations, {"name": "Ladakh", "type": "Adventure", "description": "High altitude desert with stunning landscapes", "rating": 4.7, "packages": 5}, {"name": "Varanasi", "type": "Spiritual", "description": "Spiritual capital of India", "rating": 4.4, "packages": 8}, {"name": "Mumbai", "type": "City", "description": "City of Dreams and Bollywood", "rating": 4.2, "packages": 12}, {"name": "Delhi", "type": "Heritage", "description": "Historical capital with rich culture", "rating": 4.3, "packages": 15}, {"name": "Darjeeling", "type": "Hill Station", "description": "Famous for tea gardens and toy train", "rating": 4.1, "packages": 7}, {"name": "Tirupati", "type": "Religious", "description": "Sacred temple destination", "rating": 4.6, "packages": 6}, {"name": "Rann of Kutch", "type": "Desert", "description": "White desert and cultural heritage", "rating": 4.5, "packages": 4}, {"name": "Khajuraho", "type": "Heritage", "description": "UNESCO World Heritage temples", "rating": 4.4, "packages": 5}, {"name": "Kolkata", "type": "Cultural", "description": "Cultural hub of eastern India", "rating": 4.0, "packages": 9}, {"name": "Shillong", "type": "Hill Station", "description": "Scotland of the East", "rating": 4.3, "packages": 6} ]; const extendedHotels = [ ...data.hotels, {"name": "Hyatt Regency", "location": "Delhi", "rating": 5, "price": 20000, "amenities": ["Gym", "Spa", "Restaurant", "Pool"]}, {"name": "Radisson Blu", "location": "Bangalore", "rating": 4, "price": 15000, "amenities": ["Business Center", "WiFi", "Restaurant"]}, {"name": "Hilton Mumbai", "location": "Mumbai", "rating": 5, "price": 28000, "amenities": ["Spa", "Pool", "Fine Dining", "Concierge"]}, {"name": "JW Marriott", "location": "Pune", "rating": 5, "price": 18000, "amenities": ["Spa", "Pool", "Multiple Restaurants"]}, {"name": "The Park", "location": "Kolkata", "rating": 4, "price": 14000, "amenities": ["Restaurant", "Bar", "WiFi", "Gym"]}, {"name": "Trident Hotel", "location": "Hyderabad", "rating": 5, "price": 16000, "amenities": ["Pool", "Spa", "Restaurant", "Business Center"]}, {"name": "Vivanta by Taj", "location": "Goa", "rating": 4, "price": 22000, "amenities": ["Beach Access", "Spa", "Pool", "Water Sports"]}, {"name": "Four Points Sheraton", "location": "Ahmedabad", "rating": 4, "price": 12000, "amenities": ["Restaurant", "Gym", "WiFi"]}, {"name": "Holiday Inn", "location": "Chennai", "rating": 4, "price": 11000, "amenities": ["Pool", "Restaurant", "Business Center"]}, {"name": "Novotel", "location": "Goa", "rating": 4, "price": 19000, "amenities": ["Beach View", "Pool", "Spa", "Restaurant"]}, {"name": "Courtyard Marriott", "location": "Gurugram", "rating": 4, "price": 17000, "amenities": ["Business Center", "Gym", "Restaurant"]}, {"name": "Westin", "location": "Pune", "rating": 5, "price": 24000, "amenities": ["Spa", "Pool", "Fine Dining", "Gym"]}, {"name": "Crowne Plaza", "location": "Kochi", "rating": 4, "price": 15000, "amenities": ["Waterfront View", "Restaurant", "Pool"]}, {"name": "DoubleTree Hilton", "location": "Goa", "rating": 4, "price": 16000, "amenities": ["Beach Access", "Pool", "Restaurant"]}, {"name": "Renaissance", "location": "Mumbai", "rating": 5, "price": 26000, "amenities": ["City View", "Spa", "Fine Dining", "Pool"]} ]; const extendedPackages = [ ...data.packages, {"name": "South India Temple Tour", "duration": "10D/9N", "price": 75000, "destinations": ["Chennai", "Madurai", "Rameswaram"], "type": "Religious", "rating": 4.5}, {"name": "Himachal Adventure Package", "duration": "6D/5N", "price": 40000, "destinations": ["Manali", "Rohtang", "Solang"], "type": "Adventure", "rating": 4.3}, {"name": "Northeast Explorer", "duration": "12D/11N", "price": 85000, "destinations": ["Shillong", "Guwahati", "Kaziranga"], "type": "Nature", "rating": 4.6}, {"name": "Wildlife Safari Package", "duration": "5D/4N", "price": 32000, "destinations": ["Jim Corbett", "Ranthambore"], "type": "Wildlife", "rating": 4.4}, {"name": "Ladakh Bike Expedition", "duration": "10D/9N", "price": 65000, "destinations": ["Leh", "Khardung La", "Pangong"], "type": "Adventure", "rating": 4.7}, {"name": "Spiritual India Tour", "duration": "9D/8N", "price": 55000, "destinations": ["Varanasi", "Rishikesh", "Haridwar"], "type": "Spiritual", "rating": 4.5}, {"name": "Andaman Luxury Package", "duration": "6D/5N", "price": 48000, "destinations": ["Port Blair", "Havelock", "Neil Island"], "type": "Beach", "rating": 4.6}, {"name": "Mumbai-Goa Coastal Tour", "duration": "5D/4N", "price": 38000, "destinations": ["Mumbai", "Goa"], "type": "Beach", "rating": 4.2}, {"name": "Tea Gardens of Darjeeling", "duration": "4D/3N", "price": 28000, "destinations": ["Darjeeling", "Kalimpong"], "type": "Nature", "rating": 4.3}, {"name": "Rann of Kutch Festival Tour", "duration": "3D/2N", "price": 22000, "destinations": ["Bhuj", "Rann of Kutch"], "type": "Cultural", "rating": 4.4}, {"name": "Khajuraho-Orchha Heritage", "duration": "4D/3N", "price": 30000, "destinations": ["Khajuraho", "Orchha"], "type": "Heritage", "rating": 4.3}, {"name": "Coorg Coffee Plantation Stay", "duration": "3D/2N", "price": 18000, "destinations": ["Coorg", "Madikeri"], "type": "Nature", "rating": 4.1}, {"name": "Ooty-Kodaikanal Hill Stations", "duration": "5D/4N", "price": 35000, "destinations": ["Ooty", "Kodaikanal"], "type": "Hill Station", "rating": 4.2}, {"name": "Kolkata Cultural Experience", "duration": "3D/2N", "price": 20000, "destinations": ["Kolkata"], "type": "Cultural", "rating": 4.0}, {"name": "Tirupati-Chennai Religious Tour", "duration": "4D/3N", "price": 25000, "destinations": ["Tirupati", "Chennai"], "type": "Religious", "rating": 4.5} ]; // Global variables let currentBookingItem = null; let currentBookingType = null; let isHindi = false; // Language translations const translations = { english: { navHome: "Home", navDestinations: "Destinations", navHotels: "Hotels", navPackages: "Packages", navAbout: "About", navContact: "Contact", heroTitle: "Discover India's Most Beautiful Destinations", heroSubtitle: "Book flights, hotels & holiday packages at best prices. Your journey begins here!", searchBtn: "Search", topDestinations: "Top Destinations", luxuryHotels: "Luxury Hotels", holidayPackages: "Holiday Packages" }, hindi: { navHome: "होम", navDestinations: "गंतव्य", navHotels: "होटल", navPackages: "पैकेज", navAbout: "हमारे बारे में", navContact: "संपर्क", heroTitle: "भारत के सबसे खूबसूरत गंतव्यों की खोज करें", heroSubtitle: "सर्वोत्तम कीमतों पर फ्लाइट, होटल और हॉलिडे पैकेज बुक करें। आपकी यात्रा यहाँ शुरू होती है!", searchBtn: "खोजें", topDestinations: "टॉप गंतव्य", luxuryHotels: "लक्जरी होटल", holidayPackages: "हॉलिडे पैकेज" } }; // DOM Content Loaded Event document.addEventListener('DOMContentLoaded', function() { initializeApp(); }); // Initialize Application function initializeApp() { setupEventListeners(); populateDestinations(); populateHotels(); populatePackages(); populateTestimonials(); setupDateInputs(); setupChatWidget(); } // Setup Event Listeners function setupEventListeners() { // Navigation const hamburger = document.getElementById('hamburger'); const navMenu = document.getElementById('navMenu'); hamburger?.addEventListener('click', function() { navMenu.classList.toggle('active'); }); // Smooth scrolling for navigation links document.querySelectorAll('.nav-link').forEach(link => { link.addEventListener('click', function(e) { e.preventDefault(); const targetId = this.getAttribute('href').substring(1); const targetElement = document.getElementById(targetId); if (targetElement) { targetElement.scrollIntoView({ behavior: 'smooth' }); navMenu.classList.remove('active'); } }); }); // Search functionality const searchBtn = document.getElementById('searchBtn'); searchBtn?.addEventListener('click', handleSearch); // Search tabs document.querySelectorAll('.search-tab').forEach(tab => { tab.addEventListener('click', function() { document.querySelectorAll('.search-tab').forEach(t => t.classList.remove('active')); this.classList.add('active'); }); }); // Language toggle const languageToggle = document.getElementById('languageToggle'); languageToggle?.addEventListener('click', toggleLanguage); // Modal functionality const modalClose = document.getElementById('modalClose'); const bookingModal = document.getElementById('bookingModal'); modalClose?.addEventListener('click', closeModal); bookingModal?.addEventListener('click', function(e) { if (e.target === this) closeModal(); }); // Booking form const bookingForm = document.getElementById('bookingForm'); bookingForm?.addEventListener('submit', handleBookingSubmit); // Contact form const contactForm = document.getElementById('contactForm'); contactForm?.addEventListener('submit', handleContactSubmit); // View all buttons document.getElementById('viewAllDestinations')?.addEventListener('click', () => showAllItems('destinations')); document.getElementById('viewAllHotels')?.addEventListener('click', () => showAllItems('hotels')); document.getElementById('viewAllPackages')?.addEventListener('click', () => showAllItems('packages')); } // Populate Destinations function populateDestinations() { const container = document.getElementById('destinationsGrid'); if (!container) return; const destinationsToShow = data.destinations.slice(0, 6); container.innerHTML = destinationsToShow.map(destination => `
🏝️

${destination.name}

${destination.type}

${destination.description}

`).join(''); } // Populate Hotels function populateHotels() { const container = document.getElementById('hotelsGrid'); if (!container) return; container.innerHTML = data.hotels.map(hotel => `
🏨

${hotel.name}

${'⭐'.repeat(hotel.rating)}

📍 ${hotel.location}

${hotel.amenities.map(amenity => `${amenity}`).join('')}
`).join(''); } // Populate Packages function populatePackages() { const container = document.getElementById('packagesGrid'); if (!container) return; container.innerHTML = data.packages.map(pkg => `

${pkg.name}

${pkg.duration}

${pkg.destinations.map(dest => `${dest}`).join('')}
`).join(''); } // Populate Testimonials function populateTestimonials() { const container = document.getElementById('testimonialsGrid'); if (!container) return; container.innerHTML = data.testimonials.map(testimonial => `

"${testimonial.text}"

${testimonial.name}

${testimonial.location}

${'⭐'.repeat(testimonial.rating)}
`).join(''); } // Setup Date Inputs function setupDateInputs() { const today = new Date(); const tomorrow = new Date(today); tomorrow.setDate(tomorrow.getDate() + 1); const checkinDate = document.getElementById('checkinDate'); const checkoutDate = document.getElementById('checkoutDate'); if (checkinDate) { checkinDate.min = today.toISOString().split('T')[0]; checkinDate.value = today.toISOString().split('T')[0]; } if (checkoutDate) { checkoutDate.min = tomorrow.toISOString().split('T')[0]; checkoutDate.value = tomorrow.toISOString().split('T')[0]; } } // Handle Search function handleSearch() { const fromLocation = document.getElementById('fromLocation')?.value; const toLocation = document.getElementById('toLocation')?.value; const checkinDate = document.getElementById('checkinDate')?.value; const checkoutDate = document.getElementById('checkoutDate')?.value; const guests = document.getElementById('guests')?.value; // Simulate search results const searchResults = { from: fromLocation, to: toLocation, checkin: checkinDate, checkout: checkoutDate, guests: guests }; alert(`Searching for trips from ${fromLocation} to ${toLocation}\nDates: ${checkinDate} to ${checkoutDate}\nGuests: ${guests}\n\nResults will be displayed here in a real implementation.`); } // Open Booking Modal function openBookingModal(itemName, type, price) { currentBookingItem = itemName; currentBookingType = type; const modal = document.getElementById('bookingModal'); const modalTitle = document.getElementById('modalTitle'); const totalAmount = document.getElementById('totalAmount'); if (modal && modalTitle && totalAmount) { modalTitle.textContent = `Book ${itemName}`; totalAmount.textContent = `₹${price.toLocaleString()}`; modal.classList.remove('hidden'); document.body.style.overflow = 'hidden'; } } // Close Modal function closeModal() { const modal = document.getElementById('bookingModal'); if (modal) { modal.classList.add('hidden'); document.body.style.overflow = 'auto'; } } // Handle Booking Submit function handleBookingSubmit(e) { e.preventDefault(); const formData = new FormData(e.target); const bookingData = { item: currentBookingItem, type: currentBookingType, fullName: formData.get('fullName'), email: formData.get('email'), phone: formData.get('phone'), travelDate: formData.get('travelDate'), travelers: formData.get('travelers'), requests: formData.get('requests') }; // Simulate booking process alert(`Booking Confirmed!\n\nThank you ${bookingData.fullName}!\nYour booking for ${bookingData.item} has been submitted.\n\nYou will receive a confirmation email at ${bookingData.email} shortly.\n\nBooking ID: TBK${Date.now()}`); closeModal(); e.target.reset(); } // Handle Contact Submit function handleContactSubmit(e) { e.preventDefault(); const formData = new FormData(e.target); alert(`Thank you for your message!\nWe will get back to you within 24 hours.`); e.target.reset(); } // Toggle Language function toggleLanguage() { isHindi = !isHindi; const lang = isHindi ? 'hindi' : 'english'; const toggleBtn = document.getElementById('languageToggle'); if (toggleBtn) { toggleBtn.textContent = isHindi ? 'English' : 'हिंदी'; } // Update text content based on language updateLanguageContent(lang); } // Update Language Content function updateLanguageContent(lang) { const elements = { '.nav-link[href="#home"]': translations[lang].navHome, '.nav-link[href="#destinations"]': translations[lang].navDestinations, '.nav-link[href="#hotels"]': translations[lang].navHotels, '.nav-link[href="#packages"]': translations[lang].navPackages, '.nav-link[href="#about"]': translations[lang].navAbout, '.nav-link[href="#contact"]': translations[lang].navContact, '.hero-title': translations[lang].heroTitle, '.hero-subtitle': translations[lang].heroSubtitle, '.search-btn': translations[lang].searchBtn }; Object.entries(elements).forEach(([selector, text]) => { const element = document.querySelector(selector); if (element) element.textContent = text; }); } // Show All Items function showAllItems(type) { let items, containerClass; switch(type) { case 'destinations': items = extendedDestinations; containerClass = 'destinations-grid'; break; case 'hotels': items = extendedHotels; containerClass = 'hotels-grid'; break; case 'packages': items = extendedPackages; containerClass = 'packages-grid'; break; } const container = document.querySelector(`.${containerClass}`); if (!container) return; if (type === 'destinations') { container.innerHTML = items.map(destination => `
🏝️

${destination.name}

${destination.type}

${destination.description}

`).join(''); } else if (type === 'hotels') { container.innerHTML = items.map(hotel => `
🏨

${hotel.name}

${'⭐'.repeat(hotel.rating)}

📍 ${hotel.location}

${hotel.amenities.map(amenity => `${amenity}`).join('')}
`).join(''); } else if (type === 'packages') { container.innerHTML = items.map(pkg => `

${pkg.name}

${pkg.duration}

${pkg.destinations.map(dest => `${dest}`).join('')}
`).join(''); } } // Setup Chat Widget function setupChatWidget() { const chatToggle = document.getElementById('chatToggle'); const chatBody = document.getElementById('chatBody'); const chatSend = document.getElementById('chatSend'); const chatInput = document.getElementById('chatInput'); chatToggle?.addEventListener('click', function() { if (chatBody.classList.contains('hidden')) { chatBody.classList.remove('hidden'); this.textContent = '−'; } else { chatBody.classList.add('hidden'); this.textContent = '+'; } }); chatSend?.addEventListener('click', sendChatMessage); chatInput?.addEventListener('keypress', function(e) { if (e.key === 'Enter') { sendChatMessage(); } }); } // Send Chat Message function sendChatMessage() { const chatInput = document.getElementById('chatInput'); const chatBody = document.getElementById('chatBody'); if (!chatInput || !chatBody || !chatInput.value.trim()) return; const userMessage = chatInput.value.trim(); // Add user message const userMessageDiv = document.createElement('div'); userMessageDiv.className = 'chat-message user'; userMessageDiv.innerHTML = `

${userMessage}

`; chatBody.insertBefore(userMessageDiv, chatBody.lastElementChild); // Clear input chatInput.value = ''; // Simulate bot response setTimeout(() => { const botResponse = getBotResponse(userMessage); const botMessageDiv = document.createElement('div'); botMessageDiv.className = 'chat-message bot'; botMessageDiv.innerHTML = `

${botResponse}

`; chatBody.insertBefore(botMessageDiv, chatBody.lastElementChild); // Scroll to bottom chatBody.scrollTop = chatBody.scrollHeight; }, 1000); } // Get Bot Response function getBotResponse(message) { const responses = { 'hello': 'Hello! How can I help you plan your perfect trip today?', 'hi': 'Hi there! What kind of destination are you looking for?', 'booking': 'I can help you with bookings! What would you like to book - hotels, flights, or packages?', 'price': 'Our prices are very competitive! You can check specific prices on our destination and hotel pages.', 'goa': 'Goa is amazing! We have great beach packages starting from ₹25,000. Would you like to see our Goa packages?', 'kerala': 'Kerala is beautiful! Our backwater packages are very popular. Check out our Kerala Honeymoon package for ₹35,000.', 'help': 'I\'m here to help! You can ask me about destinations, hotels, packages, or bookings.', 'contact': 'You can reach us at +91-9876543210 or email support@tripbookkar.com for immediate assistance.', 'default': 'That\'s interesting! For detailed information, please call us at +91-9876543210 or browse our packages above.' }; const lowercaseMessage = message.toLowerCase(); for (const key in responses) { if (lowercaseMessage.includes(key)) { return responses[key]; } } return responses.default; } // Smooth scroll for all internal links document.addEventListener('click', function(e) { if (e.target.tagName === 'A' && e.target.getAttribute('href')?.startsWith('#')) { e.preventDefault(); const targetId = e.target.getAttribute('href').substring(1); const targetElement = document.getElementById(targetId); if (targetElement) { targetElement.scrollIntoView({ behavior: 'smooth' }); } } }); // Add scroll effect to navbar window.addEventListener('scroll', function() { const navbar = document.querySelector('.navbar'); if (window.scrollY > 100) { navbar?.classList.add('scrolled'); } else { navbar?.classList.remove('scrolled'); } }); // Initialize pricing calculator function calculatePackagePrice(basePrice, travelers, duration) { let price = basePrice; // Adjust for number of travelers if (travelers > 2) { price *= travelers * 0.9; // Small discount for group bookings } return Math.round(price); } // Newsletter subscription simulation function subscribeNewsletter(email) { if (email && email.includes('@')) { alert(`Thank you for subscribing to our newsletter with ${email}! You'll receive the best travel deals and tips.`); return true; } return false; } // Export functions for potential external use window.TripBookKar = { openBookingModal, closeModal, toggleLanguage, subscribeNewsletter, calculatePackagePrice };