Interactive trip planning dashboard with dark mode and improved layout

<!DOCTYPE html>
<html>
<head>
    <title>Europe Trip Planner - Dark Mode</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" />
    <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
    <style>
        .map-dark {
            filter: invert(90%) hue-rotate(180deg) brightness(95%) contrast(85%);
        }
        .leaflet-tile-pane {
            filter: invert(100%) hue-rotate(180deg) brightness(95%) contrast(85%);
        }
        .leaflet-marker-icon,
        .leaflet-marker-shadow {
            filter: invert(100%) hue-rotate(180deg);
        }
        .gradient-border {
            position: relative;
            border-radius: 0.75rem;
            background: linear-gradient(45deg, #3B82F6, #8B5CF6, #EC4899);
            padding: 3px;
        }
        .gradient-border > div {
            background: #1F2937;
            border-radius: 0.5rem;
            height: 100%;
        }
    </style>
</head>
<body class="bg-gradient-to-br from-gray-900 via-gray-800 to-gray-900 p-8 text-gray-100 min-h-screen">
    <div class="max-w-7xl mx-auto">
        
        <div class="text-center mb-10">
            <h1 class="text-4xl font-bold mb-2 bg-clip-text text-transparent bg-gradient-to-r from-blue-400 via-purple-400 to-pink-400">
                🌍 European Adventure 2024
            </h1>
            <p class="text-gray-400">14 Days • 4 Cities • Endless Memories</p>
        </div>

        
        <div class="grid grid-cols-1 lg:grid-cols-3 gap-8 mb-8">
            
            <div class="lg:col-span-2">
                <div class="gradient-border">
                    <div>
                        <div id="map" class="map-dark h-[500px] w-full rounded-lg"></div>
                    </div>
                </div>
            </div>

            
            <div class="space-y-6">
                
                <div class="gradient-border">
                    <div class="p-6">
                        <h2 class="text-xl font-bold mb-4 text-blue-400">📅 Travel Details</h2>
                        <ul class="space-y-3 text-gray-300">
                            <li class="flex items-center"><span class="w-24">Duration:</span> 14 days</li>
                            <li class="flex items-center"><span class="w-24">When:</span> Sept 2024</li>
                            <li class="flex items-center"><span class="w-24">Season:</span> Early Fall</li>
                            <li class="flex items-center"><span class="w-24">Weather:</span> 15-20°C</li>
                        </ul>
                    </div>
                </div>

                
                <div class="gradient-border">
                    <div class="p-6">
                        <h2 class="text-xl font-bold mb-4 text-green-400">💰 Budget</h2>
                        <ul class="space-y-3 text-gray-300">
                            <li class="flex justify-between"><span>Flights:</span> <span>€800</span></li>
                            <li class="flex justify-between"><span>Hotels:</span> <span>€1,800</span></li>
                            <li class="flex justify-between"><span>Daily:</span> <span>€2,400</span></li>
                            <li class="flex justify-between font-bold text-green-400 pt-2 border-t border-gray-700">
                                <span>Total:</span> <span>€5,000</span>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>

        
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
            <div class="gradient-border">
                <div class="p-6">
                    <h3 class="font-bold text-xl text-blue-400 mb-2">Paris 🇫🇷</h3>
                    <p class="text-sm text-gray-400 mb-3">Days 1-4</p>
                    <ul class="text-gray-300 space-y-2">
                        <li>• Eiffel Tower</li>
                        <li>• Louvre Museum</li>
                        <li>• Notre-Dame</li>
                        <li>• Seine River Cruise</li>
                    </ul>
                </div>
            </div>
            <div class="gradient-border">
                <div class="p-6">
                    <h3 class="font-bold text-xl text-blue-400 mb-2">Amsterdam 🇳🇱</h3>
                    <p class="text-sm text-gray-400 mb-3">Days 5-7</p>
                    <ul class="text-gray-300 space-y-2">
                        <li>• Canal Tour</li>
                        <li>• Van Gogh Museum</li>
                        <li>• Royal Palace</li>
                        <li>• Anne Frank House</li>
                    </ul>
                </div>
            </div>
            <div class="gradient-border">
                <div class="p-6">
                    <h3 class="font-bold text-xl text-blue-400 mb-2">Berlin 🇩🇪</h3>
                    <p class="text-sm text-gray-400 mb-3">Days 8-10</p>
                    <ul class="text-gray-300 space-y-2">
                        <li>• Brandenburg Gate</li>
                        <li>• East Side Gallery</li>
                        <li>• Museum Island</li>
                        <li>• Checkpoint Charlie</li>
                    </ul>
                </div>
            </div>
            <div class="gradient-border">
                <div class="p-6">
                    <h3 class="font-bold text-xl text-blue-400 mb-2">Rome 🇮🇹</h3>
                    <p class="text-sm text-gray-400 mb-3">Days 11-14</p>
                    <ul class="text-gray-300 space-y-2">
                        <li>• Colosseum</li>
                        <li>• Vatican Museums</li>
                        <li>• Roman Forum</li>
                        <li>• Trevi Fountain</li>
                    </ul>
                </div>
            </div>
        </div>

        
        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
            <div class="gradient-border">
                <div class="p-6">
                    <h2 class="text-xl font-bold mb-4 text-yellow-400">📋 Next Steps</h2>
                    <ul class="space-y-2 text-gray-300">
                        <li class="flex items-center gap-2">
                            <span class="text-yellow-400">•</span> Book flights (3-4 months ahead)
                        </li>
                        <li class="flex items-center gap-2">
                            <span class="text-yellow-400">•</span> Reserve hotels in city centers
                        </li>
                        <li class="flex items-center gap-2">
                            <span class="text-yellow-400">•</span> Purchase Eurail Pass
                        </li>
                        <li class="flex items-center gap-2">
                            <span class="text-yellow-400">•</span> Get travel insurance
                        </li>
                    </ul>
                </div>
            </div>
            <div class="gradient-border">
                <div class="p-6">
                    <h2 class="text-xl font-bold mb-4 text-orange-400">ℹ️ Travel Tips</h2>
                    <ul class="space-y-2 text-gray-300">
                        <li class="flex items-center gap-2">
                            <span class="text-orange-400">•</span> Pack layers for variable weather
                        </li>
                        <li class="flex items-center gap-2">
                            <span class="text-orange-400">•</span> Get an international SIM card
                        </li>
                        <li class="flex items-center gap-2">
                            <span class="text-orange-400">•</span> Download offline maps
                        </li>
                        <li class="flex items-center gap-2">
                            <span class="text-orange-400">•</span> Learn basic local phrases
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

    <script>
        // Initialize map
        var map = L.map('map').setView([50.0, 10.0], 5);
        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            attribution: '© OpenStreetMap contributors'
        }).addTo(map);

        // Add markers for each city
        var cities = [
            {name: 'Paris', coords: [48.8566, 2.3522]},
            {name: 'Amsterdam', coords: [52.3676, 4.9041]},
            {name: 'Berlin', coords: [52.5200, 13.4050]},
            {name: 'Rome', coords: [41.9028, 12.4964]}
        ];

        // Create markers and connect them with lines
        var latlngs = [];
        cities.forEach(function(city) {
            L.marker(city.coords)
                .bindPopup(`<div style="color: black; font-weight: bold;">${city.name}</div>`)
                .addTo(map);
            latlngs.push(city.coords);
        });

        // Draw route line
        var routeLine = L.polyline(latlngs, {
            color: '#60A5FA',
            weight: 3,
            opacity: 0.8,
            dashArray: '10, 10'
        }).addTo(map);

        // Fit bounds to show all markers
        map.fitBounds(routeLine.getBounds());
    </script>
</body>
</html>

SPARKS

Europe Trip Planner Dark V2