in src/maps_planner/index.ts [771:824]
function createLocationCards() {
if (!cardContainer || !carouselIndicators || popUps.length === 0) return;
cardContainer.innerHTML = '';
carouselIndicators.innerHTML = '';
cardCarousel.style.display = 'block';
popUps.forEach((location, index) => {
const card = document.createElement('div');
card.className = 'location-card';
if (isPlannerMode) card.classList.add('day-planner-card');
if (index === 0) card.classList.add('card-active');
const imageUrl = getPlaceholderImage(location.name);
let cardContent = `<div class="card-image" style="background-image: url('${imageUrl}')"></div>`;
if (isPlannerMode) {
if (location.sequence) {
cardContent += `<div class="card-sequence-badge">${location.sequence}</div>`;
}
if (location.time) {
cardContent += `<div class="card-time-badge">${location.time}</div>`;
}
}
cardContent += `
<div class="card-content">
<h3 class="card-title">${location.name}</h3>
<p class="card-description">${location.description}</p>
${isPlannerMode && location.duration ? `<div class="card-duration">${location.duration}</div>` : ''}
<div class="card-coordinates">
${location.position.lat().toFixed(5)}, ${location.position.lng().toFixed(5)}
</div>
</div>
`;
card.innerHTML = cardContent;
card.addEventListener('click', () => {
highlightCard(index);
map.panTo(location.position);
if (isPlannerMode && timeline) highlightTimelineItem(index);
});
cardContainer.appendChild(card);
const dot = document.createElement('div');
dot.className = 'carousel-dot';
if (index === 0) dot.classList.add('active');
carouselIndicators.appendChild(dot);
});
if (cardCarousel && popUps.length > 0) {
cardCarousel.style.display = 'block';
}
}