mirror of
https://github.com/Freika/dawarich.git
synced 2026-01-11 09:41:40 -05:00
283 lines
No EOL
14 KiB
HTML
283 lines
No EOL
14 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>European Grand Tour - Trip Details</title>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
</head>
|
|
<body class="bg-gray-50 text-black min-h-screen">
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
|
|
<!-- Trip Header -->
|
|
<header class="mb-8">
|
|
<h1 class="text-3xl sm:text-4xl lg:text-5xl font-light tracking-tight text-black mb-4">
|
|
European Grand Tour
|
|
</h1>
|
|
<p class="text-lg text-gray-600 max-w-2xl">
|
|
A 21-day journey through the heart of Europe, discovering historic cities, stunning landscapes, and rich cultural heritage.
|
|
</p>
|
|
</header>
|
|
|
|
<!-- Main Content Grid -->
|
|
<div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
|
|
<!-- Map Area - Hero Element -->
|
|
<div class="lg:col-span-2">
|
|
<div class="bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden">
|
|
<div class="h-96 lg:h-[500px] bg-gray-100 relative flex items-center justify-center">
|
|
<!-- Map Placeholder -->
|
|
<div class="text-center">
|
|
<div class="w-16 h-16 bg-gray-300 rounded-full mx-auto mb-4"></div>
|
|
<p class="text-gray-500 text-sm">Interactive Map</p>
|
|
<p class="text-gray-400 text-xs mt-1">Route visualization would appear here</p>
|
|
</div>
|
|
|
|
<!-- Route indicators -->
|
|
<div class="absolute top-4 left-4">
|
|
<div class="bg-black text-white px-3 py-1 rounded-full text-xs font-medium">
|
|
Start: Amsterdam
|
|
</div>
|
|
</div>
|
|
<div class="absolute bottom-4 right-4">
|
|
<div class="bg-gray-800 text-white px-3 py-1 rounded-full text-xs font-medium">
|
|
End: Rome
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Stats Section -->
|
|
<div class="space-y-8">
|
|
<!-- Trip Statistics -->
|
|
<div class="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
|
|
<h2 class="text-xl font-medium text-black mb-6">Trip Statistics</h2>
|
|
|
|
<div class="space-y-6">
|
|
<div class="border-b border-gray-100 pb-4">
|
|
<div class="text-2xl font-light text-black">3,247 km</div>
|
|
<div class="text-sm text-gray-600 mt-1">Total Distance</div>
|
|
</div>
|
|
|
|
<div class="border-b border-gray-100 pb-4">
|
|
<div class="text-2xl font-light text-black">21 days</div>
|
|
<div class="text-sm text-gray-600 mt-1">Duration</div>
|
|
</div>
|
|
|
|
<div>
|
|
<div class="text-2xl font-light text-black">7 countries</div>
|
|
<div class="text-sm text-gray-600 mt-1">Countries Visited</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Countries List -->
|
|
<div class="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
|
|
<h3 class="text-lg font-medium text-black mb-4">Countries Visited</h3>
|
|
<div class="space-y-3">
|
|
<div class="flex justify-between items-center">
|
|
<span class="text-gray-900">Netherlands</span>
|
|
<span class="text-xs text-gray-500">3 days</span>
|
|
</div>
|
|
<div class="flex justify-between items-center">
|
|
<span class="text-gray-900">Germany</span>
|
|
<span class="text-xs text-gray-500">4 days</span>
|
|
</div>
|
|
<div class="flex justify-between items-center">
|
|
<span class="text-gray-900">Austria</span>
|
|
<span class="text-xs text-gray-500">2 days</span>
|
|
</div>
|
|
<div class="flex justify-between items-center">
|
|
<span class="text-gray-900">Switzerland</span>
|
|
<span class="text-xs text-gray-500">3 days</span>
|
|
</div>
|
|
<div class="flex justify-between items-center">
|
|
<span class="text-gray-900">France</span>
|
|
<span class="text-xs text-gray-500">4 days</span>
|
|
</div>
|
|
<div class="flex justify-between items-center">
|
|
<span class="text-gray-900">Monaco</span>
|
|
<span class="text-xs text-gray-500">1 day</span>
|
|
</div>
|
|
<div class="flex justify-between items-center">
|
|
<span class="text-gray-900">Italy</span>
|
|
<span class="text-xs text-gray-500">4 days</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Photos Section -->
|
|
<section class="mt-16">
|
|
<div class="flex items-center justify-between mb-8">
|
|
<h2 class="text-2xl sm:text-3xl font-light text-black">Trip Photos</h2>
|
|
<div class="text-sm text-gray-600">147 photos</div>
|
|
</div>
|
|
|
|
<!-- Photo Grid -->
|
|
<div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6 gap-4">
|
|
<!-- Photo placeholders -->
|
|
<div class="bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden">
|
|
<div class="aspect-square bg-gray-100 relative">
|
|
<div class="absolute inset-0 flex items-center justify-center">
|
|
<div class="w-8 h-8 bg-gray-300 rounded"></div>
|
|
</div>
|
|
</div>
|
|
<div class="p-3">
|
|
<p class="text-xs text-gray-600">Amsterdam Canal</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden">
|
|
<div class="aspect-square bg-gray-100 relative">
|
|
<div class="absolute inset-0 flex items-center justify-center">
|
|
<div class="w-8 h-8 bg-gray-300 rounded"></div>
|
|
</div>
|
|
</div>
|
|
<div class="p-3">
|
|
<p class="text-xs text-gray-600">Berlin Wall</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden">
|
|
<div class="aspect-square bg-gray-100 relative">
|
|
<div class="absolute inset-0 flex items-center justify-center">
|
|
<div class="w-8 h-8 bg-gray-300 rounded"></div>
|
|
</div>
|
|
</div>
|
|
<div class="p-3">
|
|
<p class="text-xs text-gray-600">Alpine Vista</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden">
|
|
<div class="aspect-square bg-gray-100 relative">
|
|
<div class="absolute inset-0 flex items-center justify-center">
|
|
<div class="w-8 h-8 bg-gray-300 rounded"></div>
|
|
</div>
|
|
</div>
|
|
<div class="p-3">
|
|
<p class="text-xs text-gray-600">Swiss Mountains</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden">
|
|
<div class="aspect-square bg-gray-100 relative">
|
|
<div class="absolute inset-0 flex items-center justify-center">
|
|
<div class="w-8 h-8 bg-gray-300 rounded"></div>
|
|
</div>
|
|
</div>
|
|
<div class="p-3">
|
|
<p class="text-xs text-gray-600">Eiffel Tower</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden">
|
|
<div class="aspect-square bg-gray-100 relative">
|
|
<div class="absolute inset-0 flex items-center justify-center">
|
|
<div class="w-8 h-8 bg-gray-300 rounded"></div>
|
|
</div>
|
|
</div>
|
|
<div class="p-3">
|
|
<p class="text-xs text-gray-600">Monaco Harbor</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden">
|
|
<div class="aspect-square bg-gray-100 relative">
|
|
<div class="absolute inset-0 flex items-center justify-center">
|
|
<div class="w-8 h-8 bg-gray-300 rounded"></div>
|
|
</div>
|
|
</div>
|
|
<div class="p-3">
|
|
<p class="text-xs text-gray-600">Colosseum</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden">
|
|
<div class="aspect-square bg-gray-100 relative">
|
|
<div class="absolute inset-0 flex items-center justify-center">
|
|
<div class="w-8 h-8 bg-gray-300 rounded"></div>
|
|
</div>
|
|
</div>
|
|
<div class="p-3">
|
|
<p class="text-xs text-gray-600">Roman Forum</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Load more indicator -->
|
|
<div class="col-span-2 sm:col-span-3 lg:col-span-4 xl:col-span-6 mt-8">
|
|
<button class="w-full py-3 px-4 bg-white border border-gray-200 rounded-lg text-gray-600 hover:bg-gray-50 transition-colors text-sm font-medium">
|
|
Load More Photos
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Trip Timeline (Additional Context) -->
|
|
<section class="mt-16">
|
|
<h2 class="text-2xl sm:text-3xl font-light text-black mb-8">Trip Timeline</h2>
|
|
|
|
<div class="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
|
|
<div class="space-y-6">
|
|
<div class="flex items-start space-x-4">
|
|
<div class="w-2 h-2 bg-black rounded-full mt-2 flex-shrink-0"></div>
|
|
<div>
|
|
<div class="text-sm font-medium text-black">Day 1-3: Amsterdam, Netherlands</div>
|
|
<div class="text-sm text-gray-600 mt-1">Explored canals, visited museums, experienced local culture</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex items-start space-x-4">
|
|
<div class="w-2 h-2 bg-gray-400 rounded-full mt-2 flex-shrink-0"></div>
|
|
<div>
|
|
<div class="text-sm font-medium text-black">Day 4-7: Berlin & Munich, Germany</div>
|
|
<div class="text-sm text-gray-600 mt-1">Historical sites, traditional cuisine, alpine preparation</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex items-start space-x-4">
|
|
<div class="w-2 h-2 bg-gray-400 rounded-full mt-2 flex-shrink-0"></div>
|
|
<div>
|
|
<div class="text-sm font-medium text-black">Day 8-9: Salzburg, Austria</div>
|
|
<div class="text-sm text-gray-600 mt-1">Mozart's birthplace, stunning architecture</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex items-start space-x-4">
|
|
<div class="w-2 h-2 bg-gray-400 rounded-full mt-2 flex-shrink-0"></div>
|
|
<div>
|
|
<div class="text-sm font-medium text-black">Day 10-12: Zurich & Alps, Switzerland</div>
|
|
<div class="text-sm text-gray-600 mt-1">Mountain adventures, pristine lakes, scenic drives</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex items-start space-x-4">
|
|
<div class="w-2 h-2 bg-gray-400 rounded-full mt-2 flex-shrink-0"></div>
|
|
<div>
|
|
<div class="text-sm font-medium text-black">Day 13-16: Paris & Lyon, France</div>
|
|
<div class="text-sm text-gray-600 mt-1">Art, cuisine, romance, and French countryside</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex items-start space-x-4">
|
|
<div class="w-2 h-2 bg-gray-400 rounded-full mt-2 flex-shrink-0"></div>
|
|
<div>
|
|
<div class="text-sm font-medium text-black">Day 17: Monaco</div>
|
|
<div class="text-sm text-gray-600 mt-1">Luxury, casinos, and Mediterranean coastline</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex items-start space-x-4">
|
|
<div class="w-2 h-2 bg-gray-400 rounded-full mt-2 flex-shrink-0"></div>
|
|
<div>
|
|
<div class="text-sm font-medium text-black">Day 18-21: Rome, Italy</div>
|
|
<div class="text-sm text-gray-600 mt-1">Ancient history, incredible food, perfect ending</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</body>
|
|
</html> |