<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Moja Mapa Podróży po Europie</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
min-height: 100vh;
padding: 20px;
}
.travel-map-container {
max-width: 1200px;
margin: 0 auto;
background: rgba(255, 255, 255, 0.95);
border-radius: 20px;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
overflow: hidden;
}
.header {
background: linear-gradient(135deg, #2c3e50, #34495e);
color: white;
padding: 30px;
text-align: center;
}
.header h1 {
font-size: 2.5rem;
font-weight: 300;
margin-bottom: 10px;
}
.header p {
font-size: 1.1rem;
opacity: 0.9;
}
.map-section {
padding: 40px;
position: relative;
}
.interactive-map {
width: 100%;
height: 600px;
background: linear-gradient(135deg, #74b9ff, #0984e3);
border-radius: 15px;
position: relative;
overflow: hidden;
box-shadow: inset 0 0 50px rgba(0, 0, 0, 0.1);
}
.country-pin {
position: absolute;
width: 40px;
height: 40px;
background: #ff6b6b;
border: 4px solid white;
border-radius: 50%;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 4px 15px rgba(255, 107, 107, 0.4);
display: flex;
align-items: center;
justify-content: center;
color: white;
font-weight: bold;
font-size: 16px;
}
.country-pin.visited {
background: #00b894;
box-shadow: 0 4px 15px rgba(0, 184, 148, 0.4);
animation: pulse 2s infinite;
}
.country-pin:hover {
transform: scale(1.2);
z-index: 10;
}
@keyframes pulse {
0% { box-shadow: 0 4px 15px rgba(0, 184, 148, 0.4); }
50% { box-shadow: 0 4px 25px rgba(0, 184, 148, 0.8); }
100% { box-shadow: 0 4px 15px rgba(0, 184, 148, 0.4); }
}
.country-tooltip {
position: absolute;
background: rgba(0, 0, 0, 0.9);
color: white;
padding: 12px 16px;
border-radius: 8px;
font-size: 14px;
font-weight: 500;
pointer-events: none;
opacity: 0;
transition: opacity 0.3s ease;
z-index: 1000;
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
}
.country-tooltip::after {
content: '';
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
border: 6px solid transparent;
border-top-color: rgba(0, 0, 0, 0.9);
}
.stats-section {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 20px;
margin-top: 30px;
}
.stat-card {
background: white;
padding: 25px;
border-radius: 15px;
text-align: center;
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
border: 1px solid #f0f0f0;
transition: transform 0.3s ease;
}
.stat-card:hover {
transform: translateY(-5px);
}
.stat-number {
font-size: 3rem;
font-weight: bold;
color: #00b894;
margin-bottom: 10px;
}
.stat-label {
font-size: 1.1rem;
color: #636e72;
}
.legend {
display: flex;
justify-content: center;
gap: 30px;
margin-top: 30px;
padding: 20px;
background: #f8f9fa;
border-radius: 15px;
}
.legend-item {
display: flex;
align-items: center;
gap: 10px;
font-weight: 500;
}
.legend-dot {
width: 20px;
height: 20px;
border-radius: 50%;
border: 3px solid white;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}
.visited-dot { background: #00b894; }
.not-visited-dot { background: #ff6b6b; }
/* Responsive */
@media (max-width: 768px) {
.header h1 { font-size: 2rem; }
.map-section { padding: 20px; }
.interactive-map { height: 400px; }
.country-pin { width: 30px; height: 30px; font-size: 12px; }
}
</style>
</head>
<body>
<div class="travel-map-container">
<div class="header">
<h1>🌍 Moja Mapa Podróży</h1>
<p>Kraje Europy które odwiedziłem w moich przygodach</p>
</div>
<div class="map-section">
<div class="interactive-map" id="mapContainer">
<div class="country-tooltip" id="tooltip"></div>
<!-- Pins dla krajów europejskich -->
<div class="country-pin visited" data-country="Polska 🇵🇱" data-year="2020" style="left: 65%; top: 35%;">PL</div>
<div class="country-pin" data-country="Niemcy 🇩🇪" data-year="" style="left: 55%; top: 40%;">DE</div>
<div class="country-pin visited" data-country="Francja 🇫🇷" data-year="2022" style="left: 45%; top: 50%;">FR</div>
<div class="country-pin" data-country="Hiszpania 🇪🇸" data-year="" style="left: 35%; top: 65%;">ES</div>
<div class="country-pin visited" data-country="Włochy 🇮🇹" data-year="2023" style="left: 60%; top: 60%;">IT</div>
<div class="country-pin" data-country="Wielka Brytania 🇬🇧" data-year="" style="left: 30%; top: 30%;">GB</div>
<div class="country-pin" data-country="Norwegia 🇳🇴" data-year="" style="left: 55%; top: 15%;">NO</div>
<div class="country-pin" data-country="Szwecja 🇸🇪" data-year="" style="left: 65%; top: 20%;">SE</div>
<div class="country-pin visited" data-country="Czechy 🇨🇿" data-year="2021" style="left: 62%; top: 45%;">CZ</div>
<div class="country-pin" data-country="Austria 🇦🇹" data-year="" style="left: 58%; top: 50%;">AT</div>
<div class="country-pin" data-country="Holandia 🇳🇱" data-year="" style="left: 50%; top: 35%;">NL</div>
<div class="country-pin" data-country="Belgia 🇧🇪" data-year="" style="left: 48%; top: 38%;">BE</div>
<div class="country-pin visited" data-country="Szwajcaria 🇨🇭" data-year="2023" style="left: 54%; top: 52%;">CH</div>
<div class="country-pin" data-country="Dania 🇩🇰" data-year="" style="left: 57%; top: 28%;">DK</div>
<div class="country-pin" data-country="Finlandia 🇫🇮" data-year="" style="left: 72%; top: 18%;">FI</div>
<div class="country-pin" data-country="Portugalia 🇵🇹" data-year="" style="left: 25%; top: 60%;">PT</div>
<div class="country-pin" data-country="Grecja 🇬🇷" data-year="" style="left: 75%; top: 70%;">GR</div>
<div class="country-pin" data-country="Chorwacja 🇭🇷" data-year="" style="left: 63%; top: 55%;">HR</div>
</div>
<div class="legend">
<div class="legend-item">
<div class="legend-dot visited-dot"></div>
<span>Odwiedzone kraje</span>
</div>
<div class="legend-item">
<div class="legend-dot not-visited-dot"></div>
<span>Na mojej liście marzeń</span>
</div>
</div>
<div class="stats-section">
<div class="stat-card">
<div class="stat-number" id="visitedCount">5</div>
<div class="stat-label">Odwiedzone kraje</div>
</div>
<div class="stat-card">
<div class="stat-number" id="totalCount">18</div>
<div class="stat-label">Kraje na mapie</div>
</div>
<div class="stat-card">
<div class="stat-number" id="percentage">28%</div>
<div class="stat-label">Europy odkryte</div>
</div>
</div>
</div>
</div>
<script>
// EDYTUJ TĘ LISTĘ - dodaj swoje odwiedzone kraje
const visitedCountries = [
{ country: 'Polska 🇵🇱', year: '2020' },
{ country: 'Francja 🇫🇷', year: '2022' },
{ country: 'Włochy 🇮🇹', year: '2023' },
{ country: 'Czechy 🇨🇿', year: '2021' },
{ country: 'Szwajcaria 🇨🇭', year: '2023' }
];
// Inicjalizacja mapy
function initializeMap() {
const pins = document.querySelectorAll('.country-pin');
const tooltip = document.getElementById('tooltip');
let visitedCount = 0;
pins.forEach(pin => {
const countryName = pin.getAttribute('data-country');
const isVisited = visitedCountries.some(visited =>
visited.country === countryName
);
if (isVisited) {
pin.classList.add('visited');
visitedCount++;
}
// Event listeners dla tooltip
pin.addEventListener('mouseenter', (e) => {
const country = e.target.getAttribute('data-country');
const year = e.target.getAttribute('data-year');
const visitedInfo = visitedCountries.find(v => v.country === country);
let tooltipText = country;
if (visitedInfo) {
tooltipText += `<br>📅 Odwiedzone: ${visitedInfo.year}`;
} else {
tooltipText += '<br>✈️ Następny cel?';
}
tooltip.innerHTML = tooltipText;
tooltip.style.opacity = '1';
});
pin.addEventListener('mousemove', (e) => {
const rect = document.getElementById('mapContainer').getBoundingClientRect();
tooltip.style.left = (e.clientX - rect.left + 15) + 'px';
tooltip.style.top = (e.clientY - rect.top - 60) + 'px';
});
pin.addEventListener('mouseleave', () => {
tooltip.style.opacity = '0';
});
});
// Aktualizuj statystyki
const totalCount = pins.length;
const percentage = Math.round((visitedCount / totalCount) * 100);
document.getElementById('visitedCount').textContent = visitedCount;
document.getElementById('totalCount').textContent = totalCount;
document.getElementById('percentage').textContent = percentage + '%';
}
// Efekt pojawiania się pinów
function animatePins() {
const pins = document.querySelectorAll('.country-pin');
pins.forEach((pin, index) => {
pin.style.opacity = '0';
pin.style.transform = 'scale(0)';
setTimeout(() => {
pin.style.opacity = '1';
pin.style.transform = 'scale(1)';
pin.style.transition = 'all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55)';
}, index * 100);
});
}
// Uruchom gdy strona się załaduje
document.addEventListener('DOMContentLoaded', () => {
initializeMap();
setTimeout(animatePins, 500);
});
</script>
</body>
</html>
