diff --git a/README.md b/README.md index 79f19266d..43f690330 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,4 @@ -# [Project Name] 🎯 +# DestINo 🎯 ## Basic Details diff --git a/index.html b/index.html new file mode 100644 index 000000000..12771891a --- /dev/null +++ b/index.html @@ -0,0 +1,47 @@ + + + + + + AI Travel Itinerary Planner + + + + +
+

AI Travel Itinerary Planner

+
+ +
+

Select Your Destination

+ + +

Enter Your Budget

+ + +

Select Your Trip Dates

+ + + + +
+ +
+

Your AI-Generated Itinerary

+
+
+ + + + + + diff --git a/script.js b/script.js new file mode 100644 index 000000000..eeeb8619e --- /dev/null +++ b/script.js @@ -0,0 +1,108 @@ +const destinationData = { + "Paris": { + activities: [ + { name: "Eiffel Tower Visit", cost: 30 }, + { name: "Louvre Museum", cost: 20 }, + { name: "Seine River Cruise", cost: 50 }, + { name: "Notre-Dame Cathedral", cost: 0 } + ], + accommodations: [ + { name: "Budget Hotel", costPerNight: 100 }, + { name: "Mid-range Hotel", costPerNight: 200 }, + { name: "Luxury Hotel", costPerNight: 400 } + ] + }, + "New York": { + activities: [ + { name: "Statue of Liberty", cost: 25 }, + { name: "Central Park", cost: 0 }, + { name: "Broadway Show", cost: 100 }, + { name: "Times Square", cost: 0 } + ], + accommodations: [ + { name: "Budget Hostel", costPerNight: 50 }, + { name: "Mid-range Hotel", costPerNight: 150 }, + { name: "Luxury Hotel", costPerNight: 350 } + ] + }, + "Tokyo": { + activities: [ + { name: "Shibuya Crossing", cost: 0 }, + { name: "Tokyo Tower", cost: 15 }, + { name: "Senso-ji Temple", cost: 0 }, + { name: "Odaiba Shopping Mall", cost: 30 } + ], + accommodations: [ + { name: "Capsule Hotel", costPerNight: 40 }, + { name: "Business Hotel", costPerNight: 100 }, + { name: "Luxury Hotel", costPerNight: 300 } + ] + }, + "London": { + activities: [ + { name: "London Eye", cost: 30 }, + { name: "British Museum", cost: 0 }, + { name: "Westminster Abbey", cost: 20 } + ], + accommodations: [ + { name: "Budget Hostel", costPerNight: 60 }, + { name: "Mid-range Hotel", costPerNight: 180 }, + { name: "Luxury Hotel", costPerNight: 400 } + ] + } +}; + +function generateItinerary() { + const destinationSelect = document.getElementById('destination'); + const selectedDestination = destinationSelect.value; + const budget = parseFloat(document.getElementById('budget').value); + const startDate = document.getElementById('start-date').value; + const endDate = document.getElementById('end-date').value; + + if (!selectedDestination || isNaN(budget) || budget <= 0 || !startDate || !endDate) { + alert("Please select a valid destination, enter a valid budget, and select trip dates."); + return; + } + + const data = destinationData[selectedDestination]; + if (!data) { + alert("Sorry, we don't have data for this destination."); + return; + } + + const start = new Date(startDate); + const end = new Date(endDate); + const days = Math.floor((end - start) / (1000 * 60 * 60 * 24)); + + let activities = data.activities.filter(activity => activity.cost <= budget); + let accommodations = data.accommodations.filter(acc => acc.costPerNight <= budget / 3); + + let itinerarySummary = ` +

Destination: ${selectedDestination}

+

Dates: ${startDate} to ${endDate} (Total Days: ${days})

+

Activities:

+ +

Accommodation Options:

+ +

Suggested Itinerary:

+ + `; + + document.getElementById('itinerary-summary').innerHTML = itinerarySummary; +} + +function exportItinerary() { + const { jsPDF } = window.jspdf; + const doc = new jsPDF(); + + const itineraryContent = document.getElementById('itinerary-summary').innerText; + doc.text(itineraryContent, 10, 10); + doc.save('itinerary.pdf'); +} diff --git a/styles.css b/styles.css new file mode 100644 index 000000000..9775d7354 --- /dev/null +++ b/styles.css @@ -0,0 +1,102 @@ +body { + font-family: Arial, sans-serif; + background-color: #f4f4f4; + color: #333; + margin: 0; + padding: 0; +} + +header { + background-color: #4CAF50; + color: white; + text-align: center; + padding: 20px 0; +} + +h1 { + margin: 0; +} + +h2 { + font-size: 1.5rem; + margin-top: 0; + color: #444; +} + +h3 { + font-size: 1.2rem; + margin-bottom: 10px; +} + +h4 { + font-size: 1rem; + color: #555; +} + +.form-container { + background-color: white; + padding: 20px; + margin: 20px; + border-radius: 8px; + box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); +} + +input[type="text"], +input[type="number"] { + width: 100%; + padding: 10px; + margin: 10px 0; + border-radius: 4px; + border: 1px solid #ddd; +} + +button { + background-color: #4CAF50; + color: white; + border: none; + padding: 10px 20px; + cursor: pointer; + border-radius: 4px; + font-size: 1rem; + margin-top: 10px; +} + +button:hover { + background-color: #45a049; +} + +#itinerary-view { + margin: 20px; + background-color: white; + padding: 20px; + border-radius: 8px; + box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); +} + +ul { + list-style-type: none; + padding: 0; +} + +ul li { + padding: 5px 0; + font-size: 1rem; +} + +ul li:nth-child(even) { + background-color: #f9f9f9; +} + +button:active { + transform: scale(0.98); +} + +footer { + text-align: center; + padding: 10px; + background-color: #4CAF50; + color: white; + position: fixed; + bottom: 0; + width: 100%; +}