|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>TravelGenius - AI-Powered Trip Planner</title> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
|
|
<style> |
|
|
.gradient-bg { |
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); |
|
|
} |
|
|
.trip-card:hover { |
|
|
transform: translateY(-5px); |
|
|
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); |
|
|
} |
|
|
.smooth-transition { |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
.map-container { |
|
|
height: 400px; |
|
|
border-radius: 1rem; |
|
|
} |
|
|
.trip-timeline li:not(:last-child)::after { |
|
|
content: ""; |
|
|
position: absolute; |
|
|
left: 1rem; |
|
|
top: 2.5rem; |
|
|
height: 100%; |
|
|
width: 2px; |
|
|
background: #e2e8f0; |
|
|
} |
|
|
.animate-pulse { |
|
|
animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; |
|
|
} |
|
|
@keyframes pulse { |
|
|
0%, 100% { |
|
|
opacity: 1; |
|
|
} |
|
|
50% { |
|
|
opacity: 0.5; |
|
|
} |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="bg-gray-50 font-sans"> |
|
|
|
|
|
<nav class="bg-white shadow-md"> |
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
|
|
<div class="flex justify-between h-16"> |
|
|
<div class="flex"> |
|
|
<div class="flex-shrink-0 flex items-center"> |
|
|
<i class="fas fa-route text-indigo-600 text-2xl mr-2"></i> |
|
|
<span class="text-xl font-bold text-gray-900">TravelGenius</span> |
|
|
</div> |
|
|
<div class="hidden sm:ml-6 sm:flex sm:space-x-8"> |
|
|
<a href="#" class="border-indigo-500 text-gray-900 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Home</a> |
|
|
<a href="#" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Planner</a> |
|
|
<a href="#" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Destinations</a> |
|
|
<a href="#" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Groups</a> |
|
|
<a href="#" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Deals</a> |
|
|
</div> |
|
|
</div> |
|
|
<div class="hidden sm:ml-6 sm:flex sm:items-center"> |
|
|
<button class="bg-white p-1 rounded-full text-gray-400 hover:text-gray-500 focus:outline-none"> |
|
|
<span class="sr-only">Notifications</span> |
|
|
<i class="fas fa-bell h-6 w-6"></i> |
|
|
</button> |
|
|
<div class="ml-3 relative"> |
|
|
<div> |
|
|
<button id="user-menu" class="flex text-sm rounded-full focus:outline-none" aria-expanded="false" aria-haspopup="true"> |
|
|
<img class="h-8 w-8 rounded-full" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt=""> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
<button class="ml-4 inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"> |
|
|
Create Trip |
|
|
</button> |
|
|
</div> |
|
|
<div class="-mr-2 flex items-center sm:hidden"> |
|
|
<button type="button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500" aria-controls="mobile-menu" aria-expanded="false"> |
|
|
<span class="sr-only">Open main menu</span> |
|
|
<i class="fas fa-bars h-6 w-6"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</nav> |
|
|
|
|
|
|
|
|
<div class="gradient-bg text-white"> |
|
|
<div class="max-w-7xl mx-auto py-16 px-4 sm:py-24 sm:px-6 lg:px-8"> |
|
|
<div class="text-center"> |
|
|
<h1 class="text-4xl font-extrabold tracking-tight sm:text-5xl lg:text-6xl"> |
|
|
AI-Powered Travel Planning |
|
|
</h1> |
|
|
<p class="mt-6 max-w-lg mx-auto text-xl"> |
|
|
Let our smart algorithms create the perfect trip tailored to your preferences, budget, and interests. |
|
|
</p> |
|
|
<div class="mt-10 flex justify-center"> |
|
|
<div class="inline-flex rounded-md shadow"> |
|
|
<a href="#" class="inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-indigo-600 bg-white hover:bg-gray-50"> |
|
|
Start Planning |
|
|
</a> |
|
|
</div> |
|
|
<div class="ml-3 inline-flex"> |
|
|
<a href="#" class="inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-white bg-indigo-500 bg-opacity-60 hover:bg-opacity-70"> |
|
|
<i class="fas fa-play mr-2"></i> Watch Demo |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12"> |
|
|
<div class="bg-white shadow rounded-lg p-6"> |
|
|
<h2 class="text-2xl font-bold text-gray-900 mb-6">Create Your Perfect Trip</h2> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> |
|
|
|
|
|
<div> |
|
|
<label for="destination" class="block text-sm font-medium text-gray-700">Destination</label> |
|
|
<div class="mt-1 relative rounded-md shadow-sm"> |
|
|
<input type="text" id="destination" class="focus:ring-indigo-500 focus:border-indigo-500 block w-full pl-3 pr-10 py-2 sm:text-sm border-gray-300 rounded-md" placeholder="Where to?"> |
|
|
<div class="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none"> |
|
|
<i class="fas fa-map-marker-alt text-gray-400"></i> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div> |
|
|
<label for="dates" class="block text-sm font-medium text-gray-700">Travel Dates</label> |
|
|
<div class="mt-1 relative rounded-md shadow-sm"> |
|
|
<input type="text" id="dates" class="focus:ring-indigo-500 focus:border-indigo-500 block w-full pl-3 pr-10 py-2 sm:text-sm border-gray-300 rounded-md" placeholder="Select dates"> |
|
|
<div class="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none"> |
|
|
<i class="fas fa-calendar-alt text-gray-400"></i> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div> |
|
|
<label for="travelers" class="block text-sm font-medium text-gray-700">Travelers</label> |
|
|
<div class="mt-1 relative rounded-md shadow-sm"> |
|
|
<select id="travelers" class="focus:ring-indigo-500 focus:border-indigo-500 block w-full pl-3 pr-10 py-2 sm:text-sm border-gray-300 rounded-md"> |
|
|
<option>1 Traveler</option> |
|
|
<option>2 Travelers</option> |
|
|
<option>3-5 Travelers</option> |
|
|
<option>6-10 Travelers</option> |
|
|
<option>10+ Travelers</option> |
|
|
</select> |
|
|
<div class="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none"> |
|
|
<i class="fas fa-users text-gray-400"></i> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div> |
|
|
<label for="budget" class="block text-sm font-medium text-gray-700">Budget</label> |
|
|
<div class="mt-1 relative rounded-md shadow-sm"> |
|
|
<select id="budget" class="focus:ring-indigo-500 focus:border-indigo-500 block w-full pl-3 pr-10 py-2 sm:text-sm border-gray-300 rounded-md"> |
|
|
<option>Economy ($)</option> |
|
|
<option>Mid-range ($$)</option> |
|
|
<option>Luxury ($$$)</option> |
|
|
<option>No budget limit</option> |
|
|
</select> |
|
|
<div class="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none"> |
|
|
<i class="fas fa-wallet text-gray-400"></i> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div> |
|
|
<label for="travel-style" class="block text-sm font-medium text-gray-700">Travel Style</label> |
|
|
<div class="mt-1 relative rounded-md shadow-sm"> |
|
|
<select id="travel-style" class="focus:ring-indigo-500 focus:border-indigo-500 block w-full pl-3 pr-10 py-2 sm:text-sm border-gray-300 rounded-md"> |
|
|
<option>Adventure</option> |
|
|
<option>Relaxation</option> |
|
|
<option>Cultural</option> |
|
|
<option>Food & Wine</option> |
|
|
<option>Family</option> |
|
|
<option>Romantic</option> |
|
|
<option>Business</option> |
|
|
</select> |
|
|
<div class="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none"> |
|
|
<i class="fas fa-umbrella-beach text-gray-400"></i> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div> |
|
|
<label for="transportation" class="block text-sm font-medium text-gray-700">Transportation</label> |
|
|
<div class="mt-1 relative rounded-md shadow-sm"> |
|
|
<select id="transportation" class="focus:ring-indigo-500 focus:border-indigo-500 block w-full pl-3 pr-10 py-2 sm:text-sm border-gray-300 rounded-md"> |
|
|
<option>Flight</option> |
|
|
<option>Train</option> |
|
|
<option>Car</option> |
|
|
<option>Bus</option> |
|
|
<option>Ship/Cruise</option> |
|
|
<option>Bike</option> |
|
|
<option>Walking</option> |
|
|
<option>Mixed</option> |
|
|
</select> |
|
|
<div class="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none"> |
|
|
<i class="fas fa-car text-gray-400"></i> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="mt-6"> |
|
|
<button id="advanced-options-btn" class="text-sm font-medium text-indigo-600 hover:text-indigo-500 focus:outline-none"> |
|
|
<i class="fas fa-plus-circle mr-1"></i> Show Advanced Options |
|
|
</button> |
|
|
|
|
|
<div id="advanced-options" class="hidden mt-4 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> |
|
|
|
|
|
<div> |
|
|
<label for="accommodation" class="block text-sm font-medium text-gray-700">Accommodation</label> |
|
|
<select id="accommodation" class="mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm rounded-md"> |
|
|
<option>Any</option> |
|
|
<option>Hotel</option> |
|
|
<option>Hostel</option> |
|
|
<option>Apartment</option> |
|
|
<option>Resort</option> |
|
|
<option>Villa</option> |
|
|
<option>Camping</option> |
|
|
</select> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div> |
|
|
<label class="block text-sm font-medium text-gray-700">Interests</label> |
|
|
<div class="mt-2 space-y-2"> |
|
|
<div class="flex items-center"> |
|
|
<input id="history" name="interests" type="checkbox" class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded"> |
|
|
<label for="history" class="ml-2 block text-sm text-gray-700">History</label> |
|
|
</div> |
|
|
<div class="flex items-center"> |
|
|
<input id="nature" name="interests" type="checkbox" class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded"> |
|
|
<label for="nature" class="ml-2 block text-sm text-gray-700">Nature</label> |
|
|
</div> |
|
|
<div class="flex items-center"> |
|
|
<input id="shopping" name="interests" type="checkbox" class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded"> |
|
|
<label for="shopping" class="ml-2 block text-sm text-gray-700">Shopping</label> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div> |
|
|
<label for="dietary" class="block text-sm font-medium text-gray-700">Dietary Preferences</label> |
|
|
<select id="dietary" class="mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm rounded-md"> |
|
|
<option>No restrictions</option> |
|
|
<option>Vegetarian</option> |
|
|
<option>Vegan</option> |
|
|
<option>Gluten-free</option> |
|
|
<option>Halal</option> |
|
|
<option>Kosher</option> |
|
|
</select> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div> |
|
|
<label for="activity-level" class="block text-sm font-medium text-gray-700">Activity Level</label> |
|
|
<select id="activity-level" class="mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm rounded-md"> |
|
|
<option>Relaxed</option> |
|
|
<option>Moderate</option> |
|
|
<option>Active</option> |
|
|
<option>Very Active</option> |
|
|
</select> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div> |
|
|
<label for="group-type" class="block text-sm font-medium text-gray-700">Group Type</label> |
|
|
<select id="group-type" class="mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm rounded-md"> |
|
|
<option>Solo</option> |
|
|
<option>Couple</option> |
|
|
<option>Family</option> |
|
|
<option>Friends</option> |
|
|
<option>Business</option> |
|
|
</select> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div> |
|
|
<label for="special-req" class="block text-sm font-medium text-gray-700">Special Requirements</label> |
|
|
<textarea id="special-req" rows="2" class="shadow-sm focus:ring-indigo-500 focus:border-indigo-500 mt-1 block w-full sm:text-sm border border-gray-300 rounded-md" placeholder="Accessibility needs, pet-friendly, etc."></textarea> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="mt-8 flex justify-end"> |
|
|
<button type="button" class="bg-white py-2 px-4 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"> |
|
|
Reset |
|
|
</button> |
|
|
<button type="button" id="generate-plan" class="ml-3 inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"> |
|
|
<i class="fas fa-magic mr-2 mt-0.5"></i> Generate Plan |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="ai-processing-modal" class="hidden fixed inset-0 bg-gray-600 bg-opacity-75 flex items-center justify-center z-50"> |
|
|
<div class="bg-white rounded-lg p-8 max-w-md w-full text-center"> |
|
|
<div class="animate-pulse mb-4"> |
|
|
<i class="fas fa-brain text-indigo-600 text-5xl"></i> |
|
|
</div> |
|
|
<h3 class="text-lg font-medium text-gray-900 mb-2">AI is crafting your perfect trip</h3> |
|
|
<p class="text-sm text-gray-500 mb-6">Analyzing millions of options to find the best matches for your preferences...</p> |
|
|
<div class="w-full bg-gray-200 rounded-full h-2.5"> |
|
|
<div id="progress-bar" class="bg-indigo-600 h-2.5 rounded-full" style="width: 0%"></div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="trip-plan" class="hidden max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12"> |
|
|
<div class="bg-white shadow rounded-lg overflow-hidden"> |
|
|
<div class="p-6 border-b border-gray-200"> |
|
|
<div class="flex justify-between items-center"> |
|
|
<h2 class="text-2xl font-bold text-gray-900">Your AI-Generated Trip Plan</h2> |
|
|
<div class="flex space-x-3"> |
|
|
<button class="p-2 rounded-full hover:bg-gray-100"> |
|
|
<i class="fas fa-share-alt text-gray-500"></i> |
|
|
</button> |
|
|
<button class="p-2 rounded-full hover:bg-gray-100"> |
|
|
<i class="fas fa-download text-gray-500"></i> |
|
|
</button> |
|
|
<button class="p-2 rounded-full hover:bg-gray-100"> |
|
|
<i class="fas fa-print text-gray-500"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
<div class="mt-4 flex flex-wrap gap-2"> |
|
|
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-indigo-100 text-indigo-800"> |
|
|
<i class="fas fa-calendar-alt mr-1"></i> 7 days |
|
|
</span> |
|
|
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800"> |
|
|
<i class="fas fa-wallet mr-1"></i> $$ Mid-range |
|
|
</span> |
|
|
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-purple-100 text-purple-800"> |
|
|
<i class="fas fa-users mr-1"></i> Couple |
|
|
</span> |
|
|
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800"> |
|
|
<i class="fas fa-umbrella-beach mr-1"></i> Relaxation |
|
|
</span> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-1 lg:grid-cols-3"> |
|
|
|
|
|
<div class="lg:col-span-2 p-6 border-b lg:border-b-0 lg:border-r border-gray-200"> |
|
|
<h3 class="text-lg font-medium text-gray-900 mb-4">Trip Overview</h3> |
|
|
|
|
|
<div class="map-container bg-gray-200 mb-6 flex items-center justify-center"> |
|
|
<i class="fas fa-map-marked-alt text-4xl text-gray-400"></i> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6"> |
|
|
<div class="bg-gray-50 p-4 rounded-lg"> |
|
|
<div class="flex items-center"> |
|
|
<div class="flex-shrink-0 bg-indigo-100 rounded-md p-2"> |
|
|
<i class="fas fa-plane-departure text-indigo-600"></i> |
|
|
</div> |
|
|
<div class="ml-3"> |
|
|
<h4 class="text-sm font-medium text-gray-900">Flights</h4> |
|
|
<p class="text-sm text-gray-500">Round-trip from NYC to Rome</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="bg-gray-50 p-4 rounded-lg"> |
|
|
<div class="flex items-center"> |
|
|
<div class="flex-shrink-0 bg-green-100 rounded-md p-2"> |
|
|
<i class="fas fa-hotel text-green-600"></i> |
|
|
</div> |
|
|
<div class="ml-3"> |
|
|
<h4 class="text-sm font-medium text-gray-900">Accommodation</h4> |
|
|
<p class="text-sm text-gray-500">4-star hotel in city center</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="bg-gray-50 p-4 rounded-lg"> |
|
|
<div class="flex items-center"> |
|
|
<div class="flex-shrink-0 bg-blue-100 rounded-md p-2"> |
|
|
<i class="fas fa-car text-blue-600"></i> |
|
|
</div> |
|
|
<div class="ml-3"> |
|
|
<h4 class="text-sm font-medium text-gray-900">Transport</h4> |
|
|
<p class="text-sm text-gray-500">Private transfers included</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="bg-gray-50 p-4 rounded-lg"> |
|
|
<div class="flex items-center"> |
|
|
<div class="flex-shrink-0 bg-purple-100 rounded-md p-2"> |
|
|
<i class="fas fa-utensils text-purple-600"></i> |
|
|
</div> |
|
|
<div class="ml-3"> |
|
|
<h4 class="text-sm font-medium text-gray-900">Dining</h4> |
|
|
<p class="text-sm text-gray-500">5 restaurant reservations</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<h3 class="text-lg font-medium text-gray-900 mb-4">Daily Itinerary</h3> |
|
|
|
|
|
<ul class="trip-timeline space-y-8"> |
|
|
<li class="relative pl-6"> |
|
|
<div class="absolute left-0 top-0 flex items-center justify-center w-6 h-6 bg-indigo-100 rounded-full"> |
|
|
<span class="text-xs font-bold text-indigo-600">1</span> |
|
|
</div> |
|
|
<div class="bg-gray-50 p-4 rounded-lg"> |
|
|
<h4 class="text-sm font-medium text-gray-900">Day 1: Arrival in Rome</h4> |
|
|
<div class="mt-2 space-y-3"> |
|
|
<div class="flex items-start"> |
|
|
<div class="flex-shrink-0 mt-0.5"> |
|
|
<i class="fas fa-plane-arrival text-gray-400"></i> |
|
|
</div> |
|
|
<div class="ml-2"> |
|
|
<p class="text-sm text-gray-700">Arrive at Fiumicino Airport (FCO) at 9:30 AM</p> |
|
|
<p class="text-xs text-gray-500">Private transfer to hotel</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex items-start"> |
|
|
<div class="flex-shrink-0 mt-0.5"> |
|
|
<i class="fas fa-hotel text-gray-400"></i> |
|
|
</div> |
|
|
<div class="ml-2"> |
|
|
<p class="text-sm text-gray-700">Check-in at Hotel Artemide</p> |
|
|
<p class="text-xs text-gray-500">Free time to relax</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex items-start"> |
|
|
<div class="flex-shrink-0 mt-0.5"> |
|
|
<i class="fas fa-utensils text-gray-400"></i> |
|
|
</div> |
|
|
<div class="ml-2"> |
|
|
<p class="text-sm text-gray-700">Dinner at Roscioli</p> |
|
|
<p class="text-xs text-gray-500">8:00 PM reservation</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</li> |
|
|
<li class="relative pl-6"> |
|
|
<div class="absolute left-0 top-0 flex items-center justify-center w-6 h-6 bg-indigo-100 rounded-full"> |
|
|
<span class="text-xs font-bold text-indigo-600">2</span> |
|
|
</div> |
|
|
<div class="bg-gray-50 p-4 rounded-lg"> |
|
|
<h4 class="text-sm font-medium text-gray-900">Day 2: Ancient Rome</h4> |
|
|
<div class="mt-2 space-y-3"> |
|
|
<div class="flex items-start"> |
|
|
<div class="flex-shrink-0 mt-0.5"> |
|
|
<i class="fas fa-landmark text-gray-400"></i> |
|
|
</div> |
|
|
<div class="ml-2"> |
|
|
<p class="text-sm text-gray-700">Colosseum & Roman Forum Tour</p> |
|
|
<p class="text-xs text-gray-500">9:00 AM - 12:00 PM (Skip-the-line tickets)</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex items-start"> |
|
|
<div class="flex-shrink-0 mt-0.5"> |
|
|
<i class="fas fa-utensils text-gray-400"></i> |
|
|
</div> |
|
|
<div class="ml-2"> |
|
|
<p class="text-sm text-gray-700">Lunch at Trattoria Da Enzo</p> |
|
|
<p class="text-xs text-gray-500">1:00 PM reservation</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex items-start"> |
|
|
<div class="flex-shrink-0 mt-0.5"> |
|
|
<i class="fas fa-gopuram text-gray-400"></i> |
|
|
</div> |
|
|
<div class="ml-2"> |
|
|
<p class="text-sm text-gray-700">Pantheon & Piazza Navona</p> |
|
|
<p class="text-xs text-gray-500">Self-guided exploration</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</li> |
|
|
</ul> |
|
|
|
|
|
<div class="mt-6"> |
|
|
<button class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"> |
|
|
<i class="fas fa-plus mr-2"></i> Add More Days |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="p-6"> |
|
|
<h3 class="text-lg font-medium text-gray-900 mb-4">Trip Summary</h3> |
|
|
|
|
|
<div class="bg-gray-50 rounded-lg p-4 mb-6"> |
|
|
<div class="flex justify-between mb-2"> |
|
|
<span class="text-sm font-medium text-gray-500">Total Cost</span> |
|
|
<span class="text-sm font-bold text-gray-900">$3,245</span> |
|
|
</div> |
|
|
<div class="flex justify-between text-sm text-gray-500 mb-1"> |
|
|
<span>Flights</span> |
|
|
<span>$1,200</span> |
|
|
</div> |
|
|
<div class="flex justify-between text-sm text-gray-500 mb-1"> |
|
|
<span>Accommodation</span> |
|
|
<span>$1,400</span> |
|
|
</div> |
|
|
<div class="flex justify-between text-sm text-gray-500 mb-1"> |
|
|
<span>Activities</span> |
|
|
<span>$450</span> |
|
|
</div> |
|
|
<div class="flex justify-between text-sm text-gray-500"> |
|
|
<span>Transport</span> |
|
|
<span>$195</span> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="mb-6"> |
|
|
<h4 class="text-sm font-medium text-gray-900 mb-2">Recommended Activities</h4> |
|
|
<div class="space-y-3"> |
|
|
<div class="flex items-start"> |
|
|
<img src="https://images.unsplash.com/photo-1552832230-c0197dd311b5?ixlib=rb-1.2.1&auto=format&fit=crop&w=100&h=100&q=80" alt="Vatican Tour" class="flex-shrink-0 w-12 h-12 rounded-md object-cover"> |
|
|
<div class="ml-3"> |
|
|
<p class="text-sm font-medium text-gray-900">Vatican Museums & Sistine Chapel</p> |
|
|
<p class="text-xs text-gray-500">Skip-the-line guided tour</p> |
|
|
<div class="mt-1 flex items-center text-xs text-gray-500"> |
|
|
<i class="fas fa-star text-yellow-400 mr-1"></i> 4.9 (1,245 reviews) |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex items-start"> |
|
|
<img src="https://images.unsplash.com/photo-1528728329032-2972f65dfb3f?ixlib=rb-1.2.1&auto=format&fit=crop&w=100&h=100&q=80" alt="Cooking Class" class="flex-shrink-0 w-12 h-12 rounded-md object-cover"> |
|
|
<div class="ml-3"> |
|
|
<p class="text-sm font-medium text-gray-900">Roman Pasta Cooking Class</p> |
|
|
<p class="text-xs text-gray-500">Hands-on experience with local chef</p> |
|
|
<div class="mt-1 flex items-center text-xs text-gray-500"> |
|
|
<i class="fas fa-star text-yellow-400 mr-1"></i> 4.8 (876 reviews) |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="mb-6"> |
|
|
<h4 class="text-sm font-medium text-gray-900 mb-2">Dining Recommendations</h4> |
|
|
<div class="space-y-3"> |
|
|
<div class="flex items-start"> |
|
|
<img src="https://images.unsplash.com/photo-1517248135467-4c7edcad34c4?ixlib=rb-1.2.1&auto=format&fit=crop&w=100&h=100&q=80" alt="Restaurant" class="flex-shrink-0 w-12 h-12 rounded-md object-cover"> |
|
|
<div class="ml-3"> |
|
|
<p class="text-sm font-medium text-gray-900">La Pergola</p> |
|
|
<p class="text-xs text-gray-500">Michelin-starred rooftop dining</p> |
|
|
<div class="mt-1 flex items-center text-xs text-gray-500"> |
|
|
<i class="fas fa-utensils text-gray-400 mr-1"></i> Italian, Fine Dining |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex items-start"> |
|
|
<img src="https://images.unsplash.com/photo-1555396273-367ea4eb4db5?ixlib=rb-1.2.1&auto=format&fit=crop&w=100&h=100&q=80" alt="Gelateria" class="flex-shrink-0 w-12 h-12 rounded-md object-cover"> |
|
|
<div class="ml-3"> |
|
|
<p class="text-sm font-medium text-gray-900">Giolitti</p> |
|
|
<p class="text-xs text-gray-500">Historic gelateria since 1900</p> |
|
|
<div class="mt-1 flex items-center text-xs text-gray-500"> |
|
|
<i class="fas fa-ice-cream text-gray-400 mr-1"></i> Gelato, Desserts |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="space-y-3"> |
|
|
<button class="w-full inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"> |
|
|
<i class="fas fa-shopping-cart mr-2"></i> Book Entire Package |
|
|
</button> |
|
|
<button class="w-full inline-flex justify-center py-2 px-4 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"> |
|
|
<i class="fas fa-bookmark mr-2"></i> Save for Later |
|
|
</button> |
|
|
<button class="w-full inline-flex justify-center py-2 px-4 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-indigo-600 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"> |
|
|
<i class="fas fa-sync-alt mr-2"></i> Regenerate Plan |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12"> |
|
|
<div class="text-center mb-12"> |
|
|
<h2 class="text-3xl font-extrabold text-gray-900 sm:text-4xl"> |
|
|
Why Choose TravelGenius? |
|
|
</h2> |
|
|
<p class="mt-4 max-w-2xl text-xl text-gray-500 mx-auto"> |
|
|
Our AI-powered platform takes the stress out of travel planning |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> |
|
|
<div class="bg-white p-6 rounded-lg shadow-md"> |
|
|
<div class="flex-shrink-0 bg-indigo-100 rounded-md p-3 inline-flex"> |
|
|
<i class="fas fa-brain text-indigo-600 text-xl"></i> |
|
|
</div> |
|
|
<h3 class="text-lg font-medium text-gray-900 mt-4">Smart AI Planning</h3> |
|
|
<p class="mt-2 text-sm text-gray-500"> |
|
|
Our algorithms analyze millions of data points to create personalized itineraries based on your unique preferences and constraints. |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
<div class="bg-white p-6 rounded-lg shadow-md"> |
|
|
<div class="flex-shrink-0 bg-green-100 rounded-md p-3 inline-flex"> |
|
|
<i class="fas fa-users text-green-600 text-xl"></i> |
|
|
</div> |
|
|
<h3 class="text-lg font-medium text-gray-900 mt-4">Group Collaboration</h3> |
|
|
<p class="mt-2 text-sm text-gray-500"> |
|
|
Plan trips with friends, family, or colleagues. Share ideas, vote on activities, and create the perfect group itinerary. |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
<div class="bg-white p-6 rounded-lg shadow-md"> |
|
|
<div class="flex-shrink-0 bg-blue-100 rounded-md p-3 inline-flex"> |
|
|
<i class="fas fa-bolt text-blue-600 text-xl"></i> |
|
|
</div> |
|
|
<h3 class="text-lg font-medium text-gray-900 mt-4">Real-Time Updates</h3> |
|
|
<p class="mt-2 text-sm text-gray-500"> |
|
|
Get instant notifications about flight changes, weather alerts, and local events that might affect your trip. |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
<div class="bg-white p-6 rounded-lg shadow-md"> |
|
|
<div class="flex-shrink-0 bg-purple-100 rounded-md p-3 inline-flex"> |
|
|
<i class="fas fa-wallet text-purple-600 text-xl"></i> |
|
|
</div> |
|
|
<h3 class="text-lg font-medium text-gray-900 mt-4">Budget Optimization</h3> |
|
|
<p class="mt-2 text-sm text-gray-500"> |
|
|
We find the best deals and optimize your spending across flights, hotels, and activities to maximize your travel budget. |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
<div class="bg-white p-6 rounded-lg shadow-md"> |
|
|
<div class="flex-shrink-0 bg-yellow-100 rounded-md p-3 inline-flex"> |
|
|
<i class="fas fa-map-marked-alt text-yellow-600 text-xl"></i> |
|
|
</div> |
|
|
<h3 class="text-lg font-medium text-gray-900 mt-4">Local Insights</h3> |
|
|
<p class="mt-2 text-sm text-gray-500"> |
|
|
Discover hidden gems and authentic experiences recommended by locals and frequent travelers. |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
<div class="bg-white p-6 rounded-lg shadow-md"> |
|
|
<div class="flex-shrink-0 bg-red-100 rounded-md p-3 inline-flex"> |
|
|
<i class="fas fa-lock text-red-600 text-xl"></i> |
|
|
</div> |
|
|
<h3 class="text-lg font-medium text-gray-900 mt-4">Secure Booking</h3> |
|
|
<p class="mt-2 text-sm text-gray-500"> |
|
|
Book everything in one place with our secure payment system and 24/7 customer support. |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="gradient-bg text-white py-16"> |
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
|
|
<div class="text-center"> |
|
|
<h2 class="text-3xl font-extrabold sm:text-4xl"> |
|
|
What Travelers Are Saying |
|
|
</h2> |
|
|
</div> |
|
|
|
|
|
<div class="mt-12 grid grid-cols-1 md:grid-cols-3 gap-8"> |
|
|
<div class="bg-white bg-opacity-10 p-6 rounded-lg backdrop-filter backdrop-blur-sm"> |
|
|
<div class="flex items-center"> |
|
|
<div class="flex-shrink-0"> |
|
|
<img class="h-10 w-10 rounded-full" src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt=""> |
|
|
</div> |
|
|
<div class="ml-4"> |
|
|
<div class="text-sm font-medium">Sarah Johnson</div> |
|
|
<div class="text-sm text-indigo-200">Family Traveler</div> |
|
|
</div> |
|
|
</div> |
|
|
<p class="mt-4 text-sm"> |
|
|
"TravelGenius planned our perfect family vacation to Italy. It accounted for our kids' interests, our budget, and even found activities that both the kids and adults loved!" |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
<div class="bg-white bg-opacity-10 p-6 rounded-lg backdrop-filter backdrop-blur-sm"> |
|
|
<div class="flex items-center"> |
|
|
<div class="flex-shrink-0"> |
|
|
<img class="h-10 w-10 rounded-full" src="https://images.unsplash.com/photo-1519244703995-f4e0f30006d5?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt=""> |
|
|
</div> |
|
|
<div class="ml-4"> |
|
|
<div class="text-sm font-medium">Michael Chen</div> |
|
|
<div class="text-sm text-indigo-200">Adventure Seeker</div> |
|
|
</div> |
|
|
</div> |
|
|
<p class="mt-4 text-sm"> |
|
|
"As a solo traveler, I love how the AI suggests unique experiences I would never find on my own. The hiking routes in Patagonia were breathtaking!" |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
<div class="bg-white bg-opacity-10 p-6 rounded-lg backdrop-filter backdrop-blur-sm"> |
|
|
<div class="flex items-center"> |
|
|
<div class="flex-shrink-0"> |
|
|
<img class="h-10 w-10 rounded-full" src="https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt=""> |
|
|
</div> |
|
|
<div class="ml-4"> |
|
|
<div class="text-sm font-medium">David Wilson</div> |
|
|
<div class="text-sm text-indigo-200">Business Traveler</div> |
|
|
</div> |
|
|
</div> |
|
|
<p class="mt-4 text-sm"> |
|
|
"The corporate travel features saved me hours of planning. It optimized my schedule between meetings and found great networking events nearby." |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white"> |
|
|
<div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:py-16 lg:px-8 lg:flex lg:items-center lg:justify-between"> |
|
|
<h2 class="text-3xl font-extrabold tracking-tight text-gray-900 sm:text-4xl"> |
|
|
<span class="block">Ready to experience smarter travel?</span> |
|
|
<span class="block text-indigo-600">Start planning your perfect trip today.</span> |
|
|
</h2> |
|
|
<div class="mt-8 flex lg:mt-0 lg:flex-shrink-0"> |
|
|
<div class="inline-flex rounded-md shadow"> |
|
|
<a href="#" class="inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700"> |
|
|
Get Started |
|
|
</a> |
|
|
</div> |
|
|
<div class="ml-3 inline-flex"> |
|
|
<a href="#" class="inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-indigo-600 bg-indigo-50 hover:bg-indigo-100"> |
|
|
<i class="fas fa-play-circle mr-2"></i> Watch demo |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<footer class="bg-gray-800"> |
|
|
<div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:py-16 lg:px-8"> |
|
|
<div class="grid grid-cols-2 md:grid-cols-4 gap-8"> |
|
|
<div> |
|
|
<h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase">Company</h3> |
|
|
<ul class="mt-4 space-y-4"> |
|
|
<li><a href="#" class="text-base text-gray-300 hover:text-white">About</a></li> |
|
|
<li><a href="#" class="text-base text-gray-300 hover:text-white">Careers</a></li> |
|
|
<li><a href="#" class="text-base text-gray-300 hover:text-white">Blog</a></li> |
|
|
<li><a href="#" class="text-base text-gray-300 hover:text-white">Press</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase">Resources</h3> |
|
|
<ul class="mt-4 space-y-4"> |
|
|
<li><a href="#" class="text-base text-gray-300 hover:text-white">Help Center</a></li> |
|
|
<li><a href="#" class="text-base text-gray-300 hover:text-white">Travel Guides</a></li> |
|
|
<li><a href="#" class="text-base text-gray-300 hover:text-white">Safety</a></li> |
|
|
<li><a href="#" class="text-base text-gray-300 hover:text-white">Developer API</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase">Legal</h3> |
|
|
<ul class="mt-4 space-y-4"> |
|
|
<li><a href="#" class="text-base text-gray-300 hover:text-white">Privacy</a></li> |
|
|
<li><a href="#" class="text-base text-gray-300 hover:text-white">Terms</a></li> |
|
|
<li><a href="#" class="text-base text-gray-300 hover:text-white">Cookie Policy</a></li> |
|
|
<li><a href="#" class="text-base text-gray-300 hover:text-white">GDPR</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase">Connect</h3> |
|
|
<ul class="mt-4 space-y-4"> |
|
|
<li><a href="#" class="text-base text-gray-300 hover:text-white">Facebook</a></li> |
|
|
<li><a href="#" class="text-base text-gray-300 hover:text-white">Twitter</a></li> |
|
|
<li><a href="#" class="text-base text-gray-300 hover:text-white">Instagram</a></li> |
|
|
<li><a href="#" class="text-base text-gray-300 hover:text-white">LinkedIn</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
</div> |
|
|
<div class="mt-12 border-t border-gray-700 pt-8"> |
|
|
<p class="text-base text-gray-400 text-center"> |
|
|
© 2023 TravelGenius, Inc. All rights reserved. |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
</footer> |
|
|
|
|
|
<script> |
|
|
|
|
|
document.getElementById('advanced-options-btn').addEventListener('click', function() { |
|
|
const options = document.getElementById('advanced-options'); |
|
|
const icon = this.querySelector('i'); |
|
|
|
|
|
if (options.classList.contains('hidden')) { |
|
|
options.classList.remove('hidden'); |
|
|
icon.classList.remove('fa-plus-circle'); |
|
|
icon.classList.add('fa-minus-circle'); |
|
|
this.innerHTML = '<i class="fas fa-minus-circle mr-1"></i> Hide Advanced Options'; |
|
|
} else { |
|
|
options.classList.add('hidden'); |
|
|
icon.classList.remove('fa-minus-circle'); |
|
|
icon.classList.add('fa-plus-circle'); |
|
|
this.innerHTML = '<i class="fas fa-plus-circle mr-1"></i> Show Advanced Options'; |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
document.getElementById('generate-plan').addEventListener('click', function() { |
|
|
const modal = document.getElementById('ai-processing-modal'); |
|
|
const progressBar = document.getElementById('progress-bar'); |
|
|
|
|
|
|
|
|
modal.classList.remove('hidden'); |
|
|
|
|
|
|
|
|
let progress = 0; |
|
|
const interval = setInterval(() => { |
|
|
progress += Math.random() * 10; |
|
|
if (progress > 100) progress = 100; |
|
|
progressBar.style.width = `${progress}%`; |
|
|
|
|
|
if (progress === 100) { |
|
|
clearInterval(interval); |
|
|
setTimeout(() => { |
|
|
modal.classList.add('hidden'); |
|
|
document.getElementById('trip-plan').classList.remove('hidden'); |
|
|
|
|
|
|
|
|
document.getElementById('trip-plan').scrollIntoView({ |
|
|
behavior: 'smooth' |
|
|
}); |
|
|
}, 500); |
|
|
} |
|
|
}, 200); |
|
|
}); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</script> |
|
|
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=eurosam/planner" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
|
</html> |
