Upload 18 files

cologne-christmas-markets-map-2025_5/.env.local

@@ -0,0 +1 @@
+GEMINI_API_KEY=PLACEHOLDER_API_KEY

cologne-christmas-markets-map-2025_5/.gitignore

@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

cologne-christmas-markets-map-2025_5/App.tsx

@@ -0,0 +1,58 @@
+import React, { useState, useCallback } from 'react';
+import MapComponent from './components/MapComponent';
+import MarketList from './components/MarketList';
+import { MARKETS } from './constants';
+import type { Market } from './types';
+
+const Snowfall: React.FC = () => (
+  <div className="absolute top-0 left-0 w-full h-full pointer-events-none" aria-hidden="true">
+    {[...Array(12)].map((_, i) => (
+      <div key={i} className="snowflake">❅</div>
+    ))}
+  </div>
+);
+
+const App: React.FC = () => {
+  const [selectedMarket, setSelectedMarket] = useState<Market | null>(null);
+  const [hoveredMarketId, setHoveredMarketId] = useState<number | null>(null);
+  const [mapCenter, setMapCenter] = useState<[number, number]>([50.9375, 6.9603]);
+  const [mapZoom, setMapZoom] = useState<number>(13);
+
+  const handleSelectMarket = useCallback((market: Market | null) => {
+    setSelectedMarket(market);
+    if (market) {
+      setMapCenter([market.lat, market.lon]);
+      setMapZoom(15);
+    }
+  }, []);
+  
+  const handleMarketHover = useCallback((marketId: number | null) => {
+    setHoveredMarketId(marketId);
+  }, []);
+
+  return (
+    <div className="flex flex-col md:flex-row h-screen bg-stone-900 text-stone-200 relative">
+      <Snowfall />
+      <MarketList
+        markets={MARKETS}
+        selectedMarket={selectedMarket}
+        hoveredMarketId={hoveredMarketId}
+        onSelectMarket={handleSelectMarket}
+        onMarketHover={handleMarketHover}
+      />
+      <div className="flex-grow h-full w-full relative">
+        <MapComponent
+          markets={MARKETS}
+          selectedMarket={selectedMarket}
+          hoveredMarketId={hoveredMarketId}
+          onSelectMarket={handleSelectMarket}
+          onMarketHover={handleMarketHover}
+          mapCenter={mapCenter}
+          mapZoom={mapZoom}
+        />
+      </div>
+    </div>
+  );
+};
+
+export default App;

cologne-christmas-markets-map-2025_5/README.md

@@ -0,0 +1,20 @@
+<div align="center">
+<img width="1200" height="475" alt="GHBanner" src="https://github.com/user-attachments/assets/0aa67016-6eaf-458a-adb2-6e31a0763ed6" />
+</div>
+
+# Run and deploy your AI Studio app
+
+This contains everything you need to run your app locally.
+
+View your app in AI Studio: https://ai.studio/apps/drive/1oqoCQFp46GFqSBo-A5v8rRnvagnv70Wc
+
+## Run Locally
+
+**Prerequisites:**  Node.js
+
+
+1. Install dependencies:
+   `npm install`
+2. Set the `GEMINI_API_KEY` in [.env.local](.env.local) to your Gemini API key
+3. Run the app:
+   `npm run dev`

cologne-christmas-markets-map-2025_5/components/ImageCarousel.tsx

@@ -0,0 +1,79 @@
+import React, { useState, useEffect, useCallback } from 'react';
+
+interface ImageCarouselProps {
+  images: string[];
+  marketName: string;
+}
+
+const ImageCarousel: React.FC<ImageCarouselProps> = ({ images, marketName }) => {
+  const [currentIndex, setCurrentIndex] = useState(0);
+
+  const goToNext = useCallback(() => {
+    setCurrentIndex((prevIndex) => (prevIndex === images.length - 1 ? 0 : prevIndex + 1));
+  }, [images.length]);
+
+  const goToPrevious = () => {
+    setCurrentIndex((prevIndex) => (prevIndex === 0 ? images.length - 1 : prevIndex - 1));
+  };
+  
+  const goToSlide = (slideIndex: number) => {
+    setCurrentIndex(slideIndex);
+  };
+
+  useEffect(() => {
+    if (images.length > 1) {
+      const timer = setTimeout(goToNext, 4000); // Autoplay every 4 seconds
+      return () => clearTimeout(timer);
+    }
+  }, [currentIndex, images.length, goToNext]);
+
+  if (!images || images.length === 0) {
+    return null;
+  }
+
+  return (
+    <div className="relative w-full h-32 group">
+      <div className="w-full h-full overflow-hidden rounded-t-lg">
+        {images.map((image, index) => (
+           <img
+             key={index}
+             src={image}
+             alt={`${marketName} - image ${index + 1}`}
+             className={`absolute top-0 left-0 w-full h-full object-cover transition-opacity duration-700 ease-in-out ${index === currentIndex ? 'opacity-100' : 'opacity-0'}`}
+           />
+        ))}
+      </div>
+      
+      {images.length > 1 && (
+        <>
+            <button
+                onClick={goToPrevious}
+                className="absolute top-1/2 left-1 transform -translate-y-1/2 bg-black/40 text-white p-1 rounded-full opacity-0 group-hover:opacity-100 transition-opacity"
+                aria-label="Previous image"
+            >
+                <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" /></svg>
+            </button>
+            <button
+                onClick={goToNext}
+                className="absolute top-1/2 right-1 transform -translate-y-1/2 bg-black/40 text-white p-1 rounded-full opacity-0 group-hover:opacity-100 transition-opacity"
+                aria-label="Next image"
+            >
+                <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" /></svg>
+            </button>
+            <div className="absolute bottom-2 left-1/2 -translate-x-1/2 flex space-x-2">
+                {images.map((_, slideIndex) => (
+                    <button
+                        key={slideIndex}
+                        onClick={() => goToSlide(slideIndex)}
+                        className={`w-2 h-2 rounded-full transition-colors ${currentIndex === slideIndex ? 'bg-white' : 'bg-white/50'}`}
+                        aria-label={`Go to slide ${slideIndex + 1}`}
+                    ></button>
+                ))}
+            </div>
+        </>
+      )}
+    </div>
+  );
+};
+
+export default ImageCarousel;

cologne-christmas-markets-map-2025_5/components/MapComponent.tsx

@@ -0,0 +1,141 @@
+import React, { useEffect, useState, useRef } from 'react';
+import { MapContainer, TileLayer, Marker, Popup, useMap } from 'react-leaflet';
+import L from 'leaflet';
+import type { Market } from '../types';
+import ImageCarousel from './ImageCarousel';
+
+interface MapComponentProps {
+  markets: Market[];
+  selectedMarket: Market | null;
+  hoveredMarketId: number | null;
+  onSelectMarket: (market: Market) => void;
+  onMarketHover: (marketId: number | null) => void;
+  mapCenter: [number, number];
+  mapZoom: number;
+}
+
+const categoryIcons: Record<Market['category'], string> = {
+    Traditional: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="{fill}" width="{width}" height="{height}" style="filter: drop-shadow(2px 2px 2px rgba(0,0,0,0.5));"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg>`,
+    Themed: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="{fill}" width="{width}" height="{height}" style="filter: drop-shadow(2px 2px 2px rgba(0,0,0,0.5));"><path d="M22 11h-2V8.34l2-1.73-1-1.73-2 1.73V4h-2v2.66l-1.45-1.25-1 1.73L14.34 8H12v3.66l-1.55-1.34-1 1.73L11.66 12H9.34l2.21-2.55-1-1.73L9 9.34V7H7v2.34l-1.45-1.25-1 1.73L6.34 11H4v2h2.34l-1.73 2 1 1.73 1.73-2V17h2v-2.34l1.45 1.25 1-1.73L9.66 13h2.68l-2.21 2.55 1 1.73L12 15.66V18h2v-2.34l1.45 1.25 1-1.73L14.34 14h2.32l-1.73 2 1 1.73 2-1.73V13h2z"/></svg>`,
+    Community: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="{fill}" width="{width}" height="{height}" style="filter: drop-shadow(2px 2px 2px rgba(0,0,0,0.5));"><path d="M12 5.69l5 4.5V18h-2v-6H9v6H7v-7.81l5-4.5M12 3L2 12h3v8h6v-6h2v6h6v-8h3L12 3z"/></svg>`,
+    'Short-Term': `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="{fill}" width="{width}" height="{height}" style="filter: drop-shadow(2px 2px 2px rgba(0,0,0,0.5));"><path d="M19 4h-1V2h-2v2H8V2H6v2H5c-1.11 0-1.99.9-1.99 2L3 20a2 2 0 0 0 2 2h14c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 16H5V10h14v10zm-5-7h-4v4h4v-4z"/></svg>`,
+};
+
+const createIcon = (category: Market['category'], color: string, size: number, className: string = '') => {
+    const svgIcon = categoryIcons[category]
+      .replace('{fill}', color)
+      .replace('{width}', `${size}px`)
+      .replace('{height}', `${size}px`);
+
+    return L.divIcon({
+        html: `<div class="${className}">${svgIcon}</div>`,
+        className: 'bg-transparent border-0',
+        iconSize: [size, size],
+        iconAnchor: [size / 2, size / 2],
+    });
+};
+
+const userLocationIcon = L.divIcon({
+  className: 'user-location-pulse',
+  iconSize: [20, 20],
+});
+
+const ChangeView: React.FC<{ center: [number, number]; zoom: number }> = ({ center, zoom }) => {
+  const map = useMap();
+  useEffect(() => {
+    map.flyTo(center, zoom);
+  }, [center, zoom, map]);
+  return null;
+};
+
+const LocateControl: React.FC = () => {
+    const map = useMap();
+    const [position, setPosition] = useState<L.LatLng | null>(null);
+
+    const handleLocate = () => {
+        map.locate().on('locationfound', (e) => {
+            setPosition(e.latlng);
+            map.flyTo(e.latlng, 14);
+        }).on('locationerror', () => {
+            alert('Could not access your location. Please enable location services in your browser.');
+        });
+    };
+
+    return (
+        <>
+            <div className="absolute top-4 left-4 z-[1000]">
+                 <button onClick={handleLocate} className="locate-me-btn" aria-label="Find my location">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M12 8V2"/><path d="M12 16v6"/><path d="M22 12h-6"/><path d="M8 12H2"/><path d="M12 12a2 2 0 1 0 0-4 2 2 0 0 0 0 4Z"/></svg>
+                </button>
+            </div>
+            {position && <Marker position={position} icon={userLocationIcon} />}
+        </>
+    );
+};
+
+const MapComponent: React.FC<MapComponentProps> = ({ markets, selectedMarket, hoveredMarketId, onSelectMarket, onMarketHover, mapCenter, mapZoom }) => {
+  const markerRefs = useRef<{ [key: number]: L.Marker | null }>({});
+
+  useEffect(() => {
+    if (selectedMarket && markerRefs.current[selectedMarket.id]) {
+      setTimeout(() => {
+          markerRefs.current[selectedMarket.id]?.openPopup();
+      }, 300);
+    }
+  }, [selectedMarket]);
+
+  return (
+    <MapContainer center={mapCenter} zoom={mapZoom} scrollWheelZoom={true} className="h-full w-full">
+      <ChangeView center={mapCenter} zoom={mapZoom} />
+       <LocateControl />
+      <TileLayer
+        attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors &copy; <a href="https://carto.com/attributions">CARTO</a>'
+        url="https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png"
+      />
+      {markets.map((market) => {
+        const isSelected = selectedMarket?.id === market.id;
+        const isHovered = hoveredMarketId === market.id;
+        let icon;
+        if (isSelected) {
+            icon = createIcon(market.category, '#facc15', 50, 'selected-marker-icon');
+        } else if (isHovered) {
+            icon = createIcon(market.category, '#f43f5e', 44, 'hovered-marker-icon');
+        } else {
+            icon = createIcon(market.category, '#e11d48', 38);
+        }
+
+        return (
+            <Marker
+                key={market.id}
+                position={[market.lat, market.lon]}
+                icon={icon}
+                eventHandlers={{
+                    click: () => onSelectMarket(market),
+                    mouseover: () => onMarketHover(market.id),
+                    mouseout: () => onMarketHover(null),
+                }}
+                ref={(el) => (markerRefs.current[market.id] = el)}
+                >
+                <Popup>
+                    <div className="w-full text-stone-200 font-sans">
+                        <ImageCarousel images={market.imageUrls} marketName={market.name} />
+                        <div className="p-4">
+                        <h3 className="text-xl font-bold mb-2 text-amber-400" style={{ fontFamily: "'Cinzel', serif" }}>
+                            {market.name}
+                        </h3>
+                        <p className="text-sm text-stone-300 mb-4 text-left">{market.description}</p>
+                        <div className="border-t border-stone-600 pt-3 text-left">
+                            <h4 className="font-semibold text-stone-100 text-base mb-1">Öffnungszeiten</h4>
+                            <p className="text-stone-300 text-sm">{market.openingHours}</p>
+                        </div>
+                        </div>
+                    </div>
+                    </Popup>
+            </Marker>
+        );
+      })}
+    </MapContainer>
+  );
+};
+
+export default MapComponent;

cologne-christmas-markets-map-2025_5/components/MarketDetailModal.tsx

@@ -0,0 +1,81 @@
+import React from 'react';
+import type { Market } from '../types';
+
+interface MarketDetailModalProps {
+  market: Market;
+  onClose: () => void;
+}
+
+const MarketDetailModal: React.FC<MarketDetailModalProps> = ({ market, onClose }) => {
+  if (!market) return null;
+
+  return (
+    <div 
+        className="modal-backdrop fixed inset-0 z-[2000] flex items-center justify-center bg-black/70"
+        onClick={onClose}
+    >
+      <div 
+        className="modal-content bg-stone-800 rounded-lg shadow-2xl w-11/12 md:w-2/3 lg:w-1/2 max-w-4xl max-h-[90vh] flex flex-col border-2 border-stone-700 overflow-hidden"
+        onClick={(e) => e.stopPropagation()} // Prevent clicks inside the modal from closing it
+      >
+        <div className="relative">
+          <img src={market.imageUrls[0]} alt={market.name} className="w-full h-48 md:h-64 object-cover" />
+          <div className="absolute inset-0 bg-gradient-to-t from-stone-800 to-transparent"></div>
+           <button 
+            onClick={onClose} 
+            className="absolute top-2 right-2 text-white bg-black/50 rounded-full p-2 hover:bg-black/80 transition-colors"
+            aria-label="Close"
+          >
+            <svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+            </svg>
+          </button>
+        </div>
+        
+        <div className="p-6 md:p-8 overflow-y-auto">
+          <h2 className="text-3xl font-bold text-amber-400 mb-4">{market.name}</h2>
+          <p className="text-stone-300 leading-relaxed mb-6">{market.description}</p>
+          
+          <div className="border-t border-stone-700 pt-4 space-y-3 text-stone-300">
+             <div className="flex items-start">
+                <svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6 mr-3 text-amber-400 flex-shrink-0" viewBox="0 0 24 24" fill="currentColor"><path d="M19 4h-1V2h-2v2H8V2H6v2H5c-1.11 0-1.99.9-1.99 2L3 20a2 2 0 0 0 2 2h14c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 16H5V10h14v10zM9 14H7v-2h2v2zm4 0h-2v-2h2v2zm4 0h-2v-2h2v2z"/></svg>
+                <div>
+                    <h4 className="font-semibold text-stone-100">Zeitraum</h4>
+                    <p>{market.start} - {market.end}</p>
+                </div>
+            </div>
+             <div className="flex items-start">
+                <svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6 mr-3 text-amber-400 flex-shrink-0" viewBox="0 0 24 24" fill="currentColor"><path d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"/><path d="M12.5 7H11v6l5.25 3.15.75-1.23-4.5-2.67z"/></svg>
+                <div>
+                    <h4 className="font-semibold text-stone-100">Öffnungszeiten</h4>
+                    <p>{market.openingHours}</p>
+                </div>
+            </div>
+             <div className="flex items-start">
+                <svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6 mr-3 text-amber-400 flex-shrink-0" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5a2.5 2.5 0 0 1 0-5 2.5 2.5 0 0 1 0 5z"/></svg>
+                <div>
+                    <h4 className="font-semibold text-stone-100">Ort</h4>
+                    <p>{market.ort}</p>
+                </div>
+            </div>
+          </div>
+          {market.website && (
+            <div className="mt-8 text-center">
+                <a 
+                    href={market.website} 
+                    target="_blank" 
+                    rel="noopener noreferrer" 
+                    className="inline-flex items-center justify-center px-6 py-3 border border-transparent text-base font-medium rounded-md text-stone-900 bg-amber-400 hover:bg-amber-500 transition-colors shadow-lg hover:shadow-amber-400/30"
+                >
+                    <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5 mr-3" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" /></svg>
+                    Zur Webseite
+                </a>
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default MarketDetailModal;

cologne-christmas-markets-map-2025_5/components/MarketList.tsx

@@ -0,0 +1,45 @@
+import React from 'react';
+import type { Market } from '../types';
+import MarketListItem from './MarketListItem';
+import WeatherWidget from './WeatherWidget';
+
+interface MarketListProps {
+  markets: Market[];
+  selectedMarket: Market | null;
+  hoveredMarketId: number | null;
+  onSelectMarket: (market: Market | null) => void;
+  onMarketHover: (marketId: number | null) => void;
+}
+
+const MarketList: React.FC<MarketListProps> = ({ markets, selectedMarket, hoveredMarketId, onSelectMarket, onMarketHover }) => {
+  return (
+    <aside className="w-full md:w-96 lg:w-1/3 xl:w-1/4 bg-stone-800 shadow-lg flex flex-col h-1/3 md:h-full border-r-2 border-black/30">
+       <header className="p-4 bg-black/20 border-b border-black/30 shadow-md">
+        <h1 className="text-2xl font-bold text-stone-100 flex items-center">
+        <svg xmlns="http://www.w3.org/2000/svg" className="h-8 w-8 mr-3 text-amber-400" viewBox="0 0 24 24" fill="currentColor">
+          <path d="M12 2.5l2.42 5.38 5.58.81-4.04 3.93.95 5.56L12 15.4l-5.91 3.78.95-5.56-4.04-3.93 5.58-.81L12 2.5z M12 5.8l-1.61 3.58-3.96.58 2.86 2.79-.68 3.94L12 14.5l3.35 2.19-.68-3.94 2.86-2.79-3.96-.58L12 5.8z" />
+        </svg>
+           Kölner Weihnachtsmärkte 2025
+        </h1>
+        <p className="text-base text-stone-400 mt-2">Wählen Sie einen Markt aus, um ihn auf der Karte zu sehen.</p>
+      </header>
+      <div className="overflow-y-auto flex-grow">
+        {markets.map((market) => (
+          <MarketListItem
+            key={market.id}
+            market={market}
+            isSelected={selectedMarket?.id === market.id}
+            isHovered={hoveredMarketId === market.id}
+            onSelect={() => onSelectMarket(market)}
+            onHover={onMarketHover}
+          />
+        ))}
+      </div>
+      <footer className="mt-auto bg-black/20 border-t border-black/30">
+        <WeatherWidget />
+      </footer>
+    </aside>
+  );
+};
+
+export default MarketList;

cologne-christmas-markets-map-2025_5/components/MarketListItem.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import type { Market } from '../types';
+
+interface MarketListItemProps {
+  market: Market;
+  isSelected: boolean;
+  isHovered: boolean;
+  onSelect: () => void;
+  onHover: (marketId: number | null) => void;
+}
+
+const MarketListItem: React.FC<MarketListItemProps> = ({ market, isSelected, isHovered, onSelect, onHover }) => {
+  const itemClasses = `
+    p-4 border-b border-black/20 cursor-pointer transition-all duration-200 ease-in-out
+    ${isSelected ? 'bg-amber-900/40 border-l-4 border-amber-400' : isHovered ? 'bg-stone-700/70 border-l-4 border-stone-600' : 'hover:bg-stone-700/50 border-l-4 border-transparent'}
+  `;
+
+  return (
+    <div 
+      className={itemClasses} 
+      onClick={onSelect}
+      onMouseEnter={() => onHover(market.id)}
+      onMouseLeave={() => onHover(null)}
+    >
+      <h3 className={`font-semibold text-lg ${isSelected ? 'text-amber-300' : 'text-stone-200'}`}>
+        {market.name}
+      </h3>
+      <div className="text-sm text-stone-400 mt-1">
+        <p>
+          <span className="font-medium text-stone-300">Zeitraum:</span> {market.start} - {market.end}
+        </p>
+      </div>
+    </div>
+  );
+};
+
+export default MarketListItem;

cologne-christmas-markets-map-2025_5/components/WeatherWidget.tsx

@@ -0,0 +1,121 @@
+import React, { useState, useEffect } from 'react';
+
+// Simplified weather icons as React components
+const SunIcon = () => <svg xmlns="http://www.w3.org/2000/svg" className="h-10 w-10" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="5"></circle><line x1="12" y1="1" x2="12" y2="3"></line><line x1="12" y1="21" x2="12" y2="23"></line><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line><line x1="1" y1="12" x2="3" y2="12"></line><line x1="21" y1="12" x2="23" y2="12"></line><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line></svg>;
+const MoonIcon = () => <svg xmlns="http://www.w3.org/2000/svg" className="h-10 w-10" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path></svg>;
+const CloudIcon = () => <svg xmlns="http://www.w3.org/2000/svg" className="h-10 w-10" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M18 10h-1.26A8 8 0 1 0 9 20h9a5 5 0 0 0 0-10z"></path></svg>;
+const CloudRainIcon = () => <svg xmlns="http://www.w3.org/2000/svg" className="h-10 w-10" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><line x1="16" y1="13" x2="16" y2="21"></line><line x1="8" y1="13" x2="8" y2="21"></line><line x1="12" y1="15" x2="12" y2="23"></line><path d="M20 16.58A5 5 0 0 0 18 7h-1.26A8 8 0 1 0 4 15.25"></path></svg>;
+const CloudSnowIcon = () => <svg xmlns="http://www.w3.org/2000/svg" className="h-10 w-10" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M20 17.58A5 5 0 0 0 18 8h-1.26A8 8 0 1 0 4 16.25"></path><line x1="8" y1="16" x2="8" y2="16"></line><line x1="8" y1="20" x2="8" y2="20"></line><line x1="12" y1="18" x2="12" y2="18"></line><line x1="12" y1="22" x2="12" y2="22"></line><line x1="16" y1="16" x2="16" y2="16"></line><line x1="16" y1="20" x2="16" y2="20"></line></svg>;
+const CloudFogIcon = () => <svg xmlns="http://www.w3.org/2000/svg" className="h-10 w-10" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M4 14.899A7 7 0 1 1 15.71 8h1.79a4.5 4.5 0 0 1 2.5 8.242"/><path d="M16 17H7"/><path d="M17 21H9"/></svg>;
+
+interface WeatherData {
+  temperature: number;
+  weatherCode: number;
+  isDay: number;
+}
+
+const getWeatherInfo = (code: number, isDay: number): { icon: React.ReactNode; description: string } => {
+  switch (code) {
+    case 0:
+      return { icon: isDay ? <SunIcon /> : <MoonIcon />, description: 'Clear sky' };
+    case 1:
+    case 2:
+    case 3:
+      return { icon: <CloudIcon />, description: 'Partly cloudy' };
+    case 45:
+    case 48:
+      return { icon: <CloudFogIcon />, description: 'Fog' };
+    case 51:
+    case 53:
+    case 55:
+      return { icon: <CloudRainIcon />, description: 'Drizzle' };
+    case 61:
+    case 63:
+    case 65:
+      return { icon: <CloudRainIcon />, description: 'Rain' };
+    case 71:
+    case 73:
+    case 75:
+    case 77:
+      return { icon: <CloudSnowIcon />, description: 'Snow fall' };
+    case 80:
+    case 81:
+    case 82:
+      return { icon: <CloudRainIcon />, description: 'Rain showers' };
+    case 85:
+    case 86:
+      return { icon: <CloudSnowIcon />, description: 'Snow showers' };
+    case 95:
+    case 96:
+    case 99:
+      return { icon: <CloudRainIcon />, description: 'Thunderstorm' };
+    default:
+      return { icon: <CloudIcon />, description: 'Cloudy' };
+  }
+};
+
+const WeatherWidget: React.FC = () => {
+  const [weather, setWeather] = useState<WeatherData | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    const fetchWeather = async () => {
+      try {
+        const response = await fetch('https://api.open-meteo.com/v1/forecast?latitude=50.94&longitude=6.96&current=temperature_2m,is_day,weather_code');
+        if (!response.ok) {
+          throw new Error('Failed to fetch weather data');
+        }
+        const data = await response.json();
+        setWeather({
+          temperature: Math.round(data.current.temperature_2m),
+          weatherCode: data.current.weather_code,
+          isDay: data.current.is_day,
+        });
+      } catch (err) {
+        setError(err instanceof Error ? err.message : 'An unknown error occurred');
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    fetchWeather();
+  }, []);
+
+  if (loading) {
+    return (
+      <div className="p-4 text-center text-stone-400">
+        Loading weather...
+      </div>
+    );
+  }
+
+  if (error || !weather) {
+    return (
+      <div className="p-4 text-center text-rose-400">
+        Could not load weather.
+      </div>
+    );
+  }
+
+  const { icon, description } = getWeatherInfo(weather.weatherCode, weather.isDay);
+
+  return (
+    <div className="p-4 flex items-center justify-between text-stone-300">
+      <div className="flex items-center">
+        <div className="text-amber-400 mr-4">
+          {icon}
+        </div>
+        <div>
+          <p className="font-bold text-lg text-stone-200">Cologne</p>
+          <p className="text-sm">{description}</p>
+        </div>
+      </div>
+      <div className="text-3xl font-bold font-['Cinzel'] text-white">
+        {weather.temperature}°C
+      </div>
+    </div>
+  );
+};
+
+export default WeatherWidget;

cologne-christmas-markets-map-2025_5/constants.ts

@@ -0,0 +1,578 @@
+import type { Market } from './types';
+
+export const MARKETS: Market[] = [
+  {
+    id: 1,
+    name: "Weihnachtsmarkt am Kölner Dom",
+    lat: 50.941278,
+    lon: 6.958281,
+    start: "17.11.2025",
+    end: "23.12.2025",
+    ort: "Roncalliplatz, 50667 Köln",
+    imageUrls: ["https://www.koeln.de/wp-content/uploads/2023/08/weihnachtsmarkt-am-koelner-dom-imago-futureimage-95332928-1.jpg"],
+    description: "Großer Markt mit Lichterzelt und hohem Weihnachtsbaum direkt am Dom.",
+    openingHours: "So-Mi 11:00-21:00, Do-Fr 11:00-22:00, Sa 10:00-22:00, Totensonntag geschlossen",
+    website: "https://www.koeln.de/weihnachten/weihnachtsmaerkte-koeln/weihnachtsmarkt-am-koelner-dom/",
+    category: 'Traditional'
+  },
+  {
+    id: 2,
+    name: "Markt der Engel auf dem Neumarkt",
+    lat: 50.936002,
+    lon: 6.947546,
+    start: "17.11.2025",
+    end: "23.12.2025",
+    ort: "Neumarkt, 50667 Köln",
+    imageUrls: ["https://koeln.mitvergnuegen.com/resizer/images/7b227769647468223a3934302c22686569676874223a3532397d/wp-content/uploads/sites/4/2020/12/markt-der-engel-weihnachtsmarkt-neumarkt-koln.jpg.webp"],
+    description: "Stimmungsvoller Markt mit vielen Sternenlichtern und Engel-Figuren.",
+    openingHours: "So-Do 11:00-21:00, Fr-Sa 11:00-22:00, Totensonntag geschlossen",
+    website: "https://www.koeln.de/weihnachten/weihnachtsmaerkte-koeln/weihnachtsmarkt-neumarkt/",
+    category: 'Traditional'
+  },
+  {
+    id: 3,
+    name: "Heinzels Wintermärchen Altstadt",
+    lat: 50.9394,
+    lon: 6.9599,
+    start: "24.11.2025",
+    end: "04.01.2026",
+    ort: "Alter Markt und Heumarkt, 50667 Köln",
+    imageUrls: ["https://www.koeln.de/wp-content/uploads/2023/08/weihnachtsmarkt-koelner-altstadt-jochen-tack-imago95344912-1-800x470.jpg"],
+    description: "Großer Altstadtmarkt mit Eislaufbahn und vielen Buden am Alter Markt und Heumarkt.",
+    openingHours: "Täglich 11:00-22:00, ab 26.12 11:00-21:00, 24. und 25.12 geschlossen",
+    website: "https://www.koeln.de/weihnachten/weihnachtsmaerkte-koeln/weihnachtsmarkt-altstadt/",
+    category: 'Traditional'
+  },
+  {
+    id: 4,
+    name: "Nikolausdorf Rudolfplatz",
+    lat: 50.9369,
+    lon: 6.9378,
+    start: "17.11.2025",
+    end: "23.12.2025",
+    ort: "Rudolfplatz, 50674 Köln",
+    imageUrls: ["https://nikolausdorf.com/templates/yootheme/cache/5d/footer_img_03b-5dbd2f20.webp"],
+    description: "Familienfreundlicher Markt als Nikolausdorf vor der Hahnentorburg.",
+    openingHours: "So-Do 11:00-21:00, Fr-Sa 11:00-22:00, Glühweinstände je 1 Stunde länger, Totensonntag geschlossen",
+    website: "https://www.koeln.de/weihnachten/weihnachtsmaerkte-koeln/weihnachtsmarkt-rudolfplatz/",
+    category: 'Themed'
+  },
+  {
+    id: 5,
+    name: "Hafen-Weihnachtsmarkt am Schokoladenmuseum",
+    lat: 50.9322,
+    lon: 6.9638,
+    start: "14.11.2025",
+    end: "23.12.2025",
+    ort: "Am Schokoladenmuseum, 50678 Köln",
+    imageUrls: ["https://www.koeln.de/wp-content/uploads/2023/08/hafenweihnachtsmarkt-imago-zoonar-0170166521.jpg"],
+    description: "Maritimer Markt im Rheinauhafen mit weißen Pagodenzelten und Riesenrad.",
+    openingHours: "Täglich 11:00-21:00, Fr-Sa 11:00-22:00, Volkstrauertag ab 13:00, Totensonntag ab 18:00",
+    website: "https://www.koeln.de/weihnachten/weihnachtsmaerkte-koeln/hafen-weihnachtsmarkt/",
+    category: 'Themed'
+  },
+  {
+    id: 6,
+    name: "Weihnachtsmarkt im Stadtgarten",
+    lat: 50.9435,
+    lon: 6.9380,
+    start: "14.11.2025",
+    end: "23.12.2025",
+    ort: "Venloer Str. 40, 50672 Köln",
+    imageUrls: ["https://www.koeln.de/wp-content/uploads/2024/11/Weihnachtsmarkt-Stadtgarten06-Vincent-Alex-2000-800x470.jpg"],
+    description: "Beliebter Veedels-Markt mit vielen Design- und Handwerksständen unter Bäumen.",
+    openingHours: "Mo-Fr 16:00-21:30, Sa-So 12:00-21:30, Totensonntag ab 18:00",
+    website: "https://www.koeln.de/weihnachten/weihnachtsmaerkte-koeln/weihnachtsmarkt-stadtgarten/",
+    category: 'Themed'
+  },
+  {
+    id: 7,
+    name: "Veedelsadvent auf dem Chlodwigplatz",
+    lat: 50.9232,
+    lon: 6.9560,
+    start: "20.11.2025",
+    end: "23.12.2025",
+    ort: "Chlodwigplatz, 50678 Köln",
+    imageUrls: ["https://www.koeln.de/wp-content/uploads/2023/10/clodwigplatz_weihnachtsmarkt_2016-27-von-37-800x470.jpg"],
+    description: "Kleiner, nachbarschaftlicher Veedels-Markt mit lokalen Anbietern.",
+    openingHours: "Täglich 12:00-22:00, Fr-Sa bis 23:00, Totensonntag geschlossen",
+    website: "https://www.koeln.de/weihnachten/weihnachtsmaerkte-koeln/weihnachtsmarkt-chlodwigplatz/",
+    category: 'Community'
+  },
+  {
+    id: 8,
+    name: "Heavenue Cologne",
+    lat: 50.9406,
+    lon: 6.9421,
+    start: "17.11.2025",
+    end: "23.12.2025",
+    ort: "Friesenplatz, 50672 Köln",
+    imageUrls: ["https://www.koeln.de/wp-content/uploads/2023/10/Weihnachtsmarkt-AdobeStock_128195075-800x470.jpg"],
+    description: "Bunter LGBTQ+ Weihnachtsmarkt mit Shows, Musik und Food am Friesenplatz.",
+    openingHours: "Mo-Do 12:00-22:00, Fr 12:00-23:00, Sa 11:00-23:00, So 11:00-22:00, Totensonntag geschlossen",
+    website: "https://www.koeln.de/weihnachten/weihnachtsmaerkte-koeln/heavenue-cologne/",
+    category: 'Themed'
+  },
+  {
+    id: 9,
+    name: "Winterzauber Eigelstein",
+    lat: 50.9479,
+    lon: 6.9563,
+    start: "03.12.2025",
+    end: "07.12.2025",
+    ort: "Eigelsteintorburg, 50668 Köln",
+    imageUrls: ["https://www.koeln.de/wp-content/uploads/2023/10/weihnachtsmakt-koeln-altstadt-2019-sw-0029.jpg"],
+    description: "Kleiner Markt an der Eigelsteintorburg mit Bühnenprogramm und Gastronomie.",
+    openingHours: "Mi-Fr 15:00-22:00, Sa 14:00-22:00, So 14:00-21:00",
+    website: "https://www.koeln.de/weihnachten/weihnachtsmaerkte-koeln/winterzauber-eigelstein/",
+    category: 'Short-Term'
+  },
+  {
+    id: 10,
+    name: "Der kleinste Weihnachtsmarkt der Stadt",
+    lat: 50.9238,
+    lon: 6.9455,
+    start: "19.11.2025",
+    end: "20.12.2025",
+    ort: "Biergarten im Volksgarten, Volksgartenstr. 27, 50677 Köln",
+    imageUrls: ["https://www.koeln.de/wp-content/uploads/2023/10/Weihnachtsmarkt-AdobeStock_128195075-800x470.jpg"],
+    description: "Gemütlicher Benefiz-Markt im Biergarten Volksgarten, Erlös für soziale Projekte.",
+    openingHours: "Mo-Fr 17:00-22:00, Sa 15:00-22:00, So 15:00-20:00",
+    website: "https://www.koeln.de/weihnachten/weihnachtsmaerkte-koeln/kleinster-weihnachtsmarkt-der-stadt/",
+    category: 'Community'
+  },
+  {
+    id: 11,
+    name: "Weihnachtsmarkt an St. Aposteln",
+    lat: 50.9372,
+    lon: 6.9443,
+    start: "17.11.2025",
+    end: "23.12.2025",
+    ort: "Apostelnkloster, 50672 Köln",
+    imageUrls: ["https://www.koeln.de/wp-content/uploads/2023/10/weihnachtsmakt-koeln-altstadt-2019-sw-0029.jpg"],
+    description: "Kirchnaher Markt mit Buden rund um St. Aposteln nahe Neumarkt.",
+    openingHours: "täglich ca. 11:00-22:00, freitags & samstags teils länger laut Aushang vor Ort",
+    website: "https://www.koeln.de/weihnachten/weihnachtsmaerkte-koeln/weihnachtsmarkt-st-aposteln/",
+    category: 'Traditional'
+  },
+  {
+    id: 12,
+    name: "Weihnachtsbasar Josef Esser Platz",
+    lat: 50.9634,
+    lon: 6.8943,
+    start: "29.11.2025",
+    end: "30.11.2025",
+    ort: "Josef Esser Platz, 50827 Köln",
+    imageUrls: ["https://www.koeln.de/wp-content/uploads/2023/10/weihnachtsmakt-koeln-altstadt-2019-sw-0029.jpg"],
+    description: "Nachbarschaftlicher Weihnachtsbasar mit Ständen auf dem Platz in Bickendorf.",
+    openingHours: "laut Veranstalter, meist nachmittags bis abends",
+    website: "https://www.koeln.de/weihnachten/weihnachtsmaerkte-koeln/weihnachtsmaerkte-koelner-stadtteile/",
+    category: 'Short-Term'
+  },
+  {
+    id: 13,
+    name: "Dellbrücker Weihnachtsmarkt",
+    lat: 50.9882,
+    lon: 7.0865,
+    start: "29.11.2025",
+    end: "29.11.2025",
+    ort: "Beim SV Adler Dellbrück, 51069 Köln",
+    imageUrls: ["https://www.koeln.de/wp-content/uploads/2023/10/weihnachtsmakt-koeln-altstadt-2019-sw-0029.jpg"],
+    description: "Klassischer Veedel Markt beim SV Adler Dellbrück.",
+    openingHours: "ab 15:00 Uhr bis Abend",
+    website: "https://www.koeln.de/weihnachten/weihnachtsmaerkte-koeln/weihnachtsmaerkte-koelner-stadtteile/",
+    category: 'Short-Term'
+  },
+  {
+    id: 14,
+    name: "Weihnachtsmarkt im Waldbad Dünnwald",
+    lat: 51.0028,
+    lon: 7.0425,
+    start: "13.12.2025",
+    end: "14.12.2025",
+    ort: "Waldbad Dünnwald, Peter Bergner Weg 2, 51069 Köln",
+    imageUrls: ["https://www.koeln.de/wp-content/uploads/2023/10/weihnachtsmakt-koeln-altstadt-2019-sw-0029.jpg"],
+    description: "Atmosphärischer Markt im Waldbad mit Waldkulisse.",
+    openingHours: "Sa 14:00-20:00, So 11:00-18:00",
+    website: "https://waldbad-camping.de",
+    category: 'Short-Term'
+  },
+  {
+    id: 15,
+    name: "Dünnwalder Adventsmarkt",
+    lat: 50.9995,
+    lon: 7.0336,
+    start: "30.11.2025",
+    end: "30.11.2025",
+    ort: "Kirchplatz vor St. Hermann Joseph, 51069 Köln",
+    imageUrls: ["https://www.koeln.de/wp-content/uploads/2023/10/weihnachtsmakt-koeln-altstadt-2019-sw-0029.jpg"],
+    description: "Kleiner Adventsmarkt vor der Kirche St. Hermann Joseph.",
+    openingHours: "12:00-18:00",
+    website: "https://www.koeln.de/weihnachten/weihnachtsmaerkte-koeln/weihnachtsmaerkte-koelner-stadtteile/",
+    category: 'Short-Term'
+  },
+  {
+    id: 16,
+    name: "Weihnachtsmarkt im Herbrands",
+    lat: 50.9497,
+    lon: 6.9211,
+    start: "21.11.2025",
+    end: "23.12.2025",
+    ort: "Herbrandstr. 21, 50825 Köln",
+    imageUrls: ["https://www.koeln.de/wp-content/uploads/2023/10/weihnachtsmakt-koeln-altstadt-2019-sw-0029.jpg"],
+    description: "Indoor und Hof Markt mit Gastro und Programm im Herbrands in Ehrenfeld.",
+    openingHours: "Öffnungszeiten nach Spielplan, meist nachmittags bis spät abends",
+    website: "https://www.herbrands.de",
+    category: 'Themed'
+  },
+  {
+    id: 17,
+    name: "Weihnachtsmarkt bei Bumann und Sohn",
+    lat: 50.9482,
+    lon: 6.9205,
+    start: "13.11.2025",
+    end: "23.12.2025",
+    ort: "Bartholomäus-Schink-Str. 2, 50825 Köln",
+    imageUrls: ["https://www.koeln.de/wp-content/uploads/2023/10/weihnachtsmakt-koeln-altstadt-2019-sw-0029.jpg"],
+    description: "Alternativer Markt im Club Bumann und Sohn in Ehrenfeld.",
+    openingHours: "überwiegend ab Nachmittags/Abend laut Programm",
+    website: "https://bumannundsohn.de",
+    category: 'Themed'
+  },
+  {
+    id: 18,
+    name: "Wintermarkt im CBE",
+    lat: 50.9494,
+    lon: 6.9200,
+    start: "16.11.2025",
+    end: "23.12.2025",
+    ort: "Venloer Str. 429, 50825 Köln",
+    imageUrls: ["https://www.koeln.de/wp-content/uploads/2023/10/weihnachtsmakt-koeln-altstadt-2019-sw-0029.jpg"],
+    description: "Sozialer Wintermarkt im Bürgerzentrum Ehrenfeld.",
+    openingHours: "laut Veranstalter, meist nachmittags",
+    website: "https://www.cbe.koeln",
+    category: 'Community'
+  },
+  {
+    id: 19,
+    name: "Garagen Glüh'n Hofweihnachtsmarkt Körnerstrasse",
+    lat: 50.9507,
+    lon: 6.9281,
+    start: "06.12.2025",
+    end: "07.12.2025",
+    ort: "Körnerstr., 50823 Köln",
+    imageUrls: ["https://www.koeln.de/wp-content/uploads/2023/10/weihnachtsmakt-koeln-altstadt-2019-sw-0029.jpg"],
+    description: "Kreativer Hofmarkt mit vielen Garagenständen in der Körnerstraße in Ehrenfeld.",
+    openingHours: "jeweils tagsüber bis abends",
+    website: "https://www.koeln.de/weihnachten/weihnachtsmaerkte-koeln/weihnachtsmaerkte-koelner-stadtteile/",
+    category: 'Short-Term'
+  },
+  {
+    id: 20,
+    name: "Advent am Geisselmarkt",
+    lat: 50.9491,
+    lon: 6.9299,
+    start: "23.11.2025",
+    end: "23.11.2025",
+    ort: "Geisselmarkt, 50823 Köln",
+    imageUrls: ["https://www.koeln.de/wp-content/uploads/2023/10/weihnachtsmakt-koeln-altstadt-2019-sw-0029.jpg"],
+    description: "Kleiner Adventstreff auf dem Geisselmarkt in Ehrenfeld.",
+    openingHours: "11:00-17:00",
+    website: "https://www.koeln.de/weihnachten/weihnachtsmaerkte-koeln/weihnachtsmaerkte-koelner-stadtteile/",
+    category: 'Short-Term'
+  },
+  {
+    id: 21,
+    name: "Traditioneller Weihnachtsmarkt Esch",
+    lat: 51.0185,
+    lon: 6.8340,
+    start: "29.11.2025",
+    end: "30.11.2025",
+    ort: "Alter Dorfkern, Kirchgasse, 50765 Köln",
+    imageUrls: ["https://www.koeln.de/wp-content/uploads/2023/10/weihnachtsmakt-koeln-altstadt-2019-sw-0029.jpg"],
+    description: "Dorfkern Markt mit Buden in der Kirchgasse.",
+    openingHours: "laut Veranstalter",
+    website: "https://www.koeln.de/weihnachten/weihnachtsmaerkte-koeln/weihnachtsmaerkte-koelner-stadtteile/",
+    category: 'Short-Term'
+  },
+  {
+    id: 22,
+    name: "Weihnachtsmarkt Reitstall Birkenhof",
+    lat: 50.9922,
+    lon: 7.0583,
+    start: "14.11.2025",
+    end: "21.12.2025",
+    ort: "Reitstall Birkenhof, 51069 Köln",
+    imageUrls: ["https://www.koeln.de/wp-content/uploads/2023/10/weihnachtsmakt-koeln-altstadt-2019-sw-0029.jpg"],
+    description: "Reiterhof Weihnachtsmarkt mit Buden und Aktionen in Höhenhaus.",
+    openingHours: "Fr-So 15:00-22:00",
+    website: "https://www.instagram.com/birkenhof",
+    category: 'Themed'
+  },
+  {
+    id: 23,
+    name: "Veganer Weihnachtsmarkt Kalk",
+    lat: 50.9404,
+    lon: 6.9999,
+    start: "05.12.2025",
+    end: "21.12.2025",
+    ort: "Evangelische Kirche, Steinmetzstr. 57, 51103 Köln",
+    imageUrls: ["https://www.koeln.de/wp-content/uploads/2023/10/weihnachtsmakt-koeln-altstadt-2019-sw-0029.jpg"],
+    description: "Veganer Markt an drei Adventswochenenden an der ev. Kirche.",
+    openingHours: "Fr-So an den Wochenenden, ca. 15:00-21:00",
+    website: "https://www.koeln.de/weihnachten/weihnachtsmaerkte-koeln/weihnachtsmaerkte-koelner-stadtteile/",
+    category: 'Themed'
+  },
+  {
+    id: 24,
+    name: "Lindenthaler Adventstreff Karl-Schwering-Platz",
+    lat: 50.9279,
+    lon: 6.9157,
+    start: "20.11.2025",
+    end: "23.12.2025",
+    ort: "Karl-Schwering-Platz, 50931 Köln",
+    imageUrls: ["https://www.koeln.de/wp-content/uploads/2023/10/weihnachtsmakt-koeln-altstadt-2019-sw-0029.jpg"],
+    description: "Kleiner Adventsmarkt im Lindenthaler Zentrum.",
+    openingHours: "täglich 12:00-22:00, Totensonntag ab 18:00",
+    website: "https://www.koeln.de/weihnachten/weihnachtsmaerkte-koeln/weihnachtsmaerkte-koelner-stadtteile/",
+    category: 'Community'
+  },
+  {
+    id: 25,
+    name: "Winterzauber am See Stadtwald",
+    lat: 50.9246,
+    lon: 6.9038,
+    start: "21.11.2025",
+    end: "28.12.2025",
+    ort: "Leonardo Royal Hotel, Dürener Str. 287, 50935 Köln",
+    imageUrls: ["https://www.koeln.de/wp-content/uploads/2023/10/weihnachtsmakt-koeln-altstadt-2019-sw-0029.jpg"],
+    description: "Winterzauber Terrasse am See beim Leonardo Royal Hotel.",
+    openingHours: "laut Hotel, meist nachmittags/abends",
+    website: "https://www.leonardo-hotels.de",
+    category: 'Themed'
+  },
+  {
+    id: 26,
+    name: "Lindweiler Weihnachtsmarkt",
+    lat: 51.0069,
+    lon: 6.9056,
+    start: "12.12.2025",
+    end: "14.12.2025",
+    ort: "Marienberger Weg 19, 50767 Köln",
+    imageUrls: ["https://www.koeln.de/wp-content/uploads/2023/10/weihnachtsmakt-koeln-altstadt-2019-sw-0029.jpg"],
+    description: "Veedel Weihnachtsmarkt am Marienberger Weg.",
+    openingHours: "laut Bürgerverein, meist nachmittags",
+    website: "https://www.bv-lindweiler.de",
+    category: 'Short-Term'
+  },
+  {
+    id: 27,
+    name: "Kleinster Weihnachtsmarkt Merheim",
+    lat: 50.9469,
+    lon: 7.0543,
+    start: "06.12.2025",
+    end: "06.12.2025",
+    ort: "Bauspielplatz, Walnussweg, 51109 Köln",
+    imageUrls: ["https://www.koeln.de/wp-content/uploads/2023/10/weihnachtsmakt-koeln-altstadt-2019-sw-0029.jpg"],
+    description: "Kleiner Markt auf dem Bauspielplatz Walnussweg.",
+    openingHours: "13:30-17:30",
+    website: "https://bauspielplatz-merheim.de",
+    category: 'Short-Term'
+  },
+  {
+    id: 28,
+    name: "Max und Moritz Markt Lenauplatz",
+    lat: 50.9559,
+    lon: 6.9231,
+    start: "28.11.2025",
+    end: "23.12.2025",
+    ort: "Lenauplatz, 50825 Köln",
+    imageUrls: ["https://www.koeln.de/wp-content/uploads/2023/10/weihnachtsmakt-koeln-altstadt-2019-sw-0029.jpg"],
+    description: "Veedel Weihnachtsmarkt mit Buden und Gastro in Neuehrenfeld.",
+    openingHours: "Mo-Do 16:30-21:30, Fr-So ab 14:00",
+    website: "https://www.koeln.de/weihnachten/weihnachtsmaerkte-koeln/weihnachtsmaerkte-koelner-stadtteile/",
+    category: 'Community'
+  },
+  {
+    id: 29,
+    name: "Weihnachtsmarkt Lutherkirche",
+    lat: 50.9620,
+    lon: 6.9467,
+    start: "13.12.2025",
+    end: "14.12.2025",
+    ort: "Lutherkirche Nippes, 50733 Köln",
+    imageUrls: ["https://www.koeln.de/wp-content/uploads/2023/10/weihnachtsmakt-koeln-altstadt-2019-sw-0029.jpg"],
+    description: "Kirchnaher Markt an der Lutherkirche in Nippes.",
+    openingHours: "12:00-18:00",
+    website: "https://www.lutherkirche-nippes.de",
+    category: 'Short-Term'
+  },
+  {
+    id: 30,
+    name: "Ostheimer Weihnachtsmarkt Sparkassen Vorplatz",
+    lat: 50.9385,
+    lon: 7.0438,
+    start: "07.12.2025",
+    end: "07.12.2025",
+    ort: "Vorplatz ehem. Sparkasse, 51109 Köln",
+    imageUrls: ["https://www.koeln.de/wp-content/uploads/2023/10/weihnachtsmakt-koeln-altstadt-2019-sw-0029.jpg"],
+    description: "Kleiner Markt auf dem Vorplatz der ehemaligen Sparkasse.",
+    openingHours: "12:00-18:00",
+    website: "https://www.koeln.de/weihnachten/weihnachtsmaerkte-koeln/weihnachtsmaerkte-koelner-stadtteile/",
+    category: 'Short-Term'
+  },
+  {
+    id: 31,
+    name: "Pescher Christkindlmarkt",
+    lat: 51.0076,
+    lon: 6.8550,
+    start: "07.12.2025",
+    end: "07.12.2025",
+    ort: "Pesch, 50767 Köln",
+    imageUrls: ["https://www.koeln.de/wp-content/uploads/2023/10/weihnachtsmakt-koeln-altstadt-2019-sw-0029.jpg"],
+    description: "Traditioneller Christkindlmarkt in Pesch.",
+    openingHours: "11:00-18:00",
+    website: "https://www.koeln.de/weihnachten/weihnachtsmaerkte-koeln/weihnachtsmaerkte-koelner-stadtteile/",
+    category: 'Short-Term'
+  },
+  {
+    id: 32,
+    name: "Waldweihnacht Gut Leidenhausen",
+    lat: 50.8879,
+    lon: 7.0825,
+    start: "29.11.2025",
+    end: "30.11.2025",
+    ort: "Gut Leidenhausen, 51147 Köln",
+    imageUrls: ["https://www.koeln.de/wp-content/uploads/2023/10/weihnachtsmakt-koeln-altstadt-2019-sw-0029.jpg"],
+    description: "Stimmungsvoller Markt im Wald rund um Gut Leidenhausen in Porz.",
+    openingHours: "11:00-20:00",
+    website: "https://www.gut-leidenhausen.de",
+    category: 'Short-Term'
+  },
+  {
+    id: 33,
+    name: "Mittelalterlicher Weihnachtsmarkt Alexianer",
+    lat: 50.8753,
+    lon: 7.0435,
+    start: "21.11.2025",
+    end: "22.11.2025",
+    ort: "Alexianer, Kölner Str. 64, 51149 Köln",
+    imageUrls: ["https://www.koeln.de/wp-content/uploads/2023/10/weihnachtsmakt-koeln-altstadt-2019-sw-0029.jpg"],
+    description: "Mittelalter-Markt der Alexianer mit Programm in Porz.",
+    openingHours: "Fr 07:00-20:00, Sa 10:00-19:00",
+    website: "https://www.alexianer.de",
+    category: 'Short-Term'
+  },
+  {
+    id: 34,
+    name: "Porzer Weihnachtsmarkt City Center",
+    lat: 50.8879,
+    lon: 7.0427,
+    start: "12.12.2025",
+    end: "14.12.2025",
+    ort: "City Center Porz, 51143 Köln",
+    imageUrls: ["https://www.koeln.de/wp-content/uploads/2023/10/weihnachtsmakt-koeln-altstadt-2019-sw-0029.jpg"],
+    description: "Stadtteil-Markt mit Wunschbaum-Aktion im City Center.",
+    openingHours: "13:00-18:00",
+    website: "https://www.koeln.de/weihnachten/weihnachtsmaerkte-koeln/weihnachtsmaerkte-koelner-stadtteile/",
+    category: 'Short-Term'
+  },
+  {
+    id: 35,
+    name: "Adventsmarkt Wahner Wibbelstetze",
+    lat: 50.8770,
+    lon: 7.0801,
+    start: "29.11.2025",
+    end: "30.11.2025",
+    ort: "Marktplatz Wahn, 51147 Köln",
+    imageUrls: ["https://www.koeln.de/wp-content/uploads/2023/10/weihnachtsmakt-koeln-altstadt-2019-sw-0029.jpg"],
+    description: "Adventsmarkt des Karnevalsvereins Wahner Wibbelstetze.",
+    openingHours: "laut Verein",
+    website: "https://wahner-wibbelstetze.de",
+    category: 'Short-Term'
+  },
+  {
+    id: 36,
+    name: "Weihnachtsmarkt Rath Heumar",
+    lat: 50.9332,
+    lon: 7.0722,
+    start: "05.12.2025",
+    end: "07.12.2025",
+    ort: "Kurt-Henn-Platz, 51107 Köln",
+    imageUrls: ["https://www.koeln.de/wp-content/uploads/2023/10/weihnachtsmakt-koeln-altstadt-2019-sw-0029.jpg"],
+    description: "Veedel Markt auf dem Kurt-Henn-Platz.",
+    openingHours: "laut Veranstalter",
+    website: "https://www.koeln.de/weihnachten/weihnachtsmaerkte-koeln/weihnachtsmaerkte-koelner-stadtteile/",
+    category: 'Short-Term'
+  },
+  {
+    id: 37,
+    name: "Winterzauber Maternusplatz",
+    lat: 50.8953,
+    lon: 6.9740,
+    start: "05.12.2025",
+    end: "07.12.2025",
+    ort: "Maternusplatz, 50996 Köln",
+    imageUrls: ["https://www.koeln.de/wp-content/uploads/2023/10/weihnachtsmakt-koeln-altstadt-2019-sw-0029.jpg"],
+    description: "Kleiner Wintermarkt auf dem Maternusplatz in Rodenkirchen.",
+    openingHours: "laut Veranstalter, meist nachmittags/abends",
+    website: "https://www.koeln.de/weihnachten/weihnachtsmaerkte-koeln/weihnachtsmaerkte-koelner-stadtteile/",
+    category: 'Short-Term'
+  },
+  {
+    id: 38,
+    name: "Sülzer Weihnachtsdorf",
+    lat: 50.9192,
+    lon: 6.9189,
+    start: "25.11.2025",
+    end: "23.12.2025",
+    ort: "Elisabeth-von-Mumm-Platz, 50937 Köln",
+    imageUrls: ["https://www.koeln.de/wp-content/uploads/2023/10/weihnachtsmakt-koeln-altstadt-2019-sw-0029.jpg"],
+    description: "Bekannter Veedel Markt auf dem Elisabeth-von-Mumm-Platz.",
+    openingHours: "Mo-Fr 16:00-22:00, Sa-So 12:00-22:00",
+    website: "https://www.suelzer-weihnachtsdorf.de",
+    category: 'Community'
+  },
+  {
+    id: 39,
+    name: "Christmas G'art'en Wachsfabrik",
+    lat: 50.8703,
+    lon: 6.9959,
+    start: "13.12.2025",
+    end: "14.12.2025",
+    ort: "Wachsfabrik, Industriestr. 170, 50999 Köln",
+    imageUrls: ["https://www.koeln.de/wp-content/uploads/2023/10/weihnachtsmakt-koeln-altstadt-2019-sw-0029.jpg"],
+    description: "Kreativ-Markt in der Wachsfabrik mit Kunst und Design in Sürth.",
+    openingHours: "laut Veranstalter",
+    website: "https://www.wachsfabrik.de",
+    category: 'Short-Term'
+  },
+  {
+    id: 40,
+    name: "Sürther Weihnachtsmarkt",
+    lat: 50.8745,
+    lon: 6.9995,
+    start: "05.12.2025",
+    end: "07.12.2025",
+    ort: "Marktplatz Sürth, 50999 Köln",
+    imageUrls: ["https://www.koeln.de/wp-content/uploads/2023/10/weihnachtsmakt-koeln-altstadt-2019-sw-0029.jpg"],
+    description: "Kleiner Markt auf dem Sürther Marktplatz.",
+    openingHours: "laut Veranstalter",
+    website: "https://www.koeln.de/weihnachten/weihnachtsmaerkte-koeln/weihnachtsmaerkte-koelner-stadtteile/",
+    category: 'Short-Term'
+  },
+  {
+    id: 41,
+    name: "Zollstocker Adventsmarkt",
+    lat: 50.9069,
+    lon: 6.9365,
+    start: "06.12.2025",
+    end: "07.12.2025",
+    ort: "Rund um St. Pius, 50969 Köln",
+    imageUrls: ["https://www.koeln.de/wp-content/uploads/2023/10/weihnachtsmakt-koeln-altstadt-2019-sw-0029.jpg"],
+    description: "Adventsmarkt rund um die Kirche St. Pius in Zollstock.",
+    openingHours: "Sa 14:00-20:00, So 12:00-18:00",
+    website: "https://www.koeln.de/weihnachten/weihnachtsmaerkte-koeln/weihnachtsmaerkte-koelner-stadtteile/",
+    category: 'Short-Term'
+  }
+];

cologne-christmas-markets-map-2025_5/index.html

@@ -0,0 +1,236 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Cologne Christmas Markets Map 2025</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Cinzel:wght@700&family=EB+Garamond&display=swap" rel="stylesheet">
+    <link
+      rel="stylesheet"
+      href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
+      integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY="
+      crossorigin=""
+    />
+    <style>
+      html, body, #root {
+        height: 100%;
+        width: 100%;
+        margin: 0;
+        padding: 0;
+        overflow: hidden;
+        font-family: 'EB Garamond', serif;
+      }
+      h1, h2, h3 {
+        font-family: 'Cinzel', serif;
+      }
+      .leaflet-container {
+        height: 100%;
+        width: 100%;
+        background-color: #f3f4f6; /* gray-100 */
+      }
+
+      /* Festive Popup Styling */
+      .leaflet-popup-content-wrapper {
+        background-color: #1c1917; /* stone-900 */
+        background-image: url('data:image/svg+xml,%3Csvg width="60" height="60" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M12 2L12 22M2 12L22 12M5.636 5.636L18.364 18.364M5.636 18.364L18.364 5.636M12 6L14.121 8.121M12 6L9.879 8.121M12 18L14.121 15.879M12 18L9.879 15.879M18.364 12L15.879 9.879M18.364 12L15.879 14.121M5.636 12L8.121 9.879M5.636 12L8.121 14.121" stroke="rgba(250, 204, 21, 0.08)" stroke-width="1" fill="none"/%3E%3C/svg%3E');
+        color: #d6d3d1; /* stone-300 */
+        border-radius: 8px;
+        border: 1px solid #f59e0b; /* amber-500 */
+        box-shadow: 0 0 15px rgba(245, 158, 11, 0.4), 0 4px 10px rgba(0,0,0,0.6);
+        padding: 0;
+        transform-origin: bottom center;
+        animation: popup-open 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
+      }
+      .leaflet-popup-content {
+        margin: 0;
+        width: 288px !important;
+        line-height: 1.6;
+      }
+      .leaflet-popup-content > div {
+        animation: content-fade-in 0.5s ease-out 0.2s forwards;
+        opacity: 0;
+      }
+      .leaflet-popup-tip {
+        background: #1c1917;
+      }
+      .leaflet-popup-close-button {
+        color: #facc15 !important; /* amber-400 */
+        padding: 4px 4px 0 0 !important;
+        transition: all 0.2s ease;
+      }
+      .leaflet-popup-close-button:hover {
+        color: #f59e0b !important; /* amber-500 */
+        transform: scale(1.2);
+      }
+      
+      @keyframes popup-open {
+        from {
+          opacity: 0;
+          transform: scale(0.8);
+        }
+        to {
+          opacity: 1;
+          transform: scale(1);
+        }
+      }
+      @keyframes content-fade-in {
+        from {
+            opacity: 0;
+            transform: translateY(10px);
+        }
+        to {
+            opacity: 1;
+            transform: translateY(0);
+        }
+      }
+
+      .locate-me-btn {
+        background-color: #292524; /* stone-800 */
+        border: 2px solid #facc15; /* amber-400 */
+        color: #facc15;
+        font-size: 1.5rem;
+        line-height: 1;
+        border-radius: 8px;
+        width: 40px;
+        height: 40px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        cursor: pointer;
+        box-shadow: 0 2px 8px rgba(0,0,0,0.7);
+        transition: background-color 0.2s ease-in-out;
+      }
+      .locate-me-btn:hover {
+        background-color: #44403c; /* stone-700 */
+      }
+      .user-location-pulse {
+        background-color: #38bdf8; /* sky-400 */
+        border: 2px solid white;
+        border-radius: 50%;
+        box-shadow: 0 0 0 0 rgba(56, 189, 248, 1);
+        transform: scale(1);
+        animation: pulse 2s infinite;
+      }
+      @keyframes pulse {
+        0% {
+            transform: scale(0.95);
+            box-shadow: 0 0 0 0 rgba(56, 189, 248, 0.7);
+        }
+        70% {
+            transform: scale(1);
+            box-shadow: 0 0 0 12px rgba(56, 189, 248, 0);
+        }
+        100% {
+            transform: scale(0.95);
+            box-shadow: 0 0 0 0 rgba(56, 189, 248, 0);
+        }
+      }
+      .modal-backdrop {
+        animation: fadeIn 0.3s ease-out forwards;
+      }
+      .modal-content {
+          animation: fadeIn 0.3s ease-out forwards, slideUp 0.4s ease-out forwards;
+      }
+      @keyframes fadeIn {
+        from { opacity: 0; }
+        to { opacity: 1; }
+      }
+      @keyframes slideUp {
+        from { transform: translateY(20px); }
+        to { transform: translateY(0); }
+      }
+      .selected-marker-icon {
+        animation: pulseGold 1.5s infinite ease-in-out;
+      }
+      @keyframes pulseGold {
+        0% {
+            filter: drop-shadow(0 0 2px #fde047);
+            transform: scale(1) rotate(0deg);
+        }
+        50% {
+            filter: drop-shadow(0 0 12px #fde047);
+            transform: scale(1.1) rotate(5deg);
+        }
+        100% {
+            filter: drop-shadow(0 0 2px #fde047);
+            transform: scale(1) rotate(0deg);
+        }
+      }
+      .hovered-marker-icon {
+        animation: festiveBob 2s infinite ease-in-out;
+      }
+      @keyframes festiveBob {
+        0%, 100% {
+            transform: translateY(0);
+            filter: drop-shadow(0 0 3px #f43f5e);
+        }
+        50% {
+            transform: translateY(-3px);
+            filter: drop-shadow(0 0 8px #f43f5e);
+        }
+      }
+      
+      /* Snowfall Animation */
+      .snowflake {
+        color: #fff;
+        font-size: 1em;
+        font-family: Arial, sans-serif;
+        text-shadow: 0 0 5px #000;
+        position: absolute;
+        top: -10%;
+        z-index: 9999;
+        -webkit-user-select: none;
+        -moz-user-select: none;
+        -ms-user-select: none;
+        user-select: none;
+        cursor: default;
+        animation-name: snowflakes-fall, snowflakes-shake;
+        animation-duration: 10s, 3s;
+        animation-timing-function: linear, ease-in-out;
+        animation-iteration-count: infinite, infinite;
+        animation-play-state: running, running;
+      }
+      .snowflake:nth-of-type(0) { left: 1%; animation-delay: 0s, 0s; }
+      .snowflake:nth-of-type(1) { left: 10%; animation-delay: 1s, 1s; }
+      .snowflake:nth-of-type(2) { left: 20%; animation-delay: 6s, 0.5s; }
+      .snowflake:nth-of-type(3) { left: 30%; animation-delay: 4s, 2s; }
+      .snowflake:nth-of-type(4) { left: 40%; animation-delay: 2s, 2s; }
+      .snowflake:nth-of-type(5) { left: 50%; animation-delay: 8s, 3s; }
+      .snowflake:nth-of-type(6) { left: 60%; animation-delay: 6s, 2s; }
+      .snowflake:nth-of-type(7) { left: 70%; animation-delay: 2.5s, 1s; }
+      .snowflake:nth-of-type(8) { left: 80%; animation-delay: 1s, 0s; }
+      .snowflake:nth-of-type(9) { left: 90%; animation-delay: 3s, 1.5s; }
+      .snowflake:nth-of-type(10) { left: 25%; animation-delay: 2s, 0s; }
+      .snowflake:nth-of-type(11) { left: 65%; animation-delay: 4s, 2.5s; }
+
+      @keyframes snowflakes-fall {
+        0% { top: -10%; }
+        100% { top: 100%; }
+      }
+      @keyframes snowflakes-shake {
+        0%, 100% { transform: translateX(0); }
+        50% { transform: translateX(80px); }
+      }
+    </style>
+  <script type="importmap">
+{
+  "imports": {
+    "react-dom/": "https://aistudiocdn.com/react-dom@^19.2.0/",
+    "@react-leaflet/core": "https://aistudiocdn.com/@react-leaflet/core@^5.0.0",
+    "react-leaflet": "https://aistudiocdn.com/react-leaflet@^5.0.0",
+    "leaflet": "https://aistudiocdn.com/leaflet@^1.9.4",
+    "react": "https://aistudiocdn.com/react@^19.2.0",
+    "react/": "https://aistudiocdn.com/react@^19.2.0/"
+  }
+}
+</script>
+<link rel="stylesheet" href="/index.css">
+</head>
+  <body>
+    <div id="root"></div>
+  <script type="module" src="/index.tsx"></script>
+</body>
+</html>

cologne-christmas-markets-map-2025_5/index.tsx

@@ -0,0 +1,16 @@
+
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import App from './App';
+
+const rootElement = document.getElementById('root');
+if (!rootElement) {
+  throw new Error("Could not find root element to mount to");
+}
+
+const root = ReactDOM.createRoot(rootElement);
+root.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);

cologne-christmas-markets-map-2025_5/metadata.json

@@ -0,0 +1,7 @@
+{
+  "name": "Cologne Christmas Markets Map 2025",
+  "description": "An interactive map showcasing the Christmas markets in Cologne for 2025. Explore market locations, opening times, and details with a modern and festive design.",
+  "requestFramePermissions": [
+    "geolocation"
+  ]
+}

cologne-christmas-markets-map-2025_5/package.json

@@ -0,0 +1,24 @@
+{
+  "name": "cologne-christmas-markets-map-2025",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "react-dom": "^19.2.0",
+    "@react-leaflet/core": "^5.0.0",
+    "react-leaflet": "^5.0.0",
+    "leaflet": "^1.9.4",
+    "react": "^19.2.0"
+  },
+  "devDependencies": {
+    "@types/node": "^22.14.0",
+    "@vitejs/plugin-react": "^5.0.0",
+    "typescript": "~5.8.2",
+    "vite": "^6.2.0"
+  }
+}

cologne-christmas-markets-map-2025_5/tsconfig.json

@@ -0,0 +1,29 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "experimentalDecorators": true,
+    "useDefineForClassFields": false,
+    "module": "ESNext",
+    "lib": [
+      "ES2022",
+      "DOM",
+      "DOM.Iterable"
+    ],
+    "skipLibCheck": true,
+    "types": [
+      "node"
+    ],
+    "moduleResolution": "bundler",
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "allowJs": true,
+    "jsx": "react-jsx",
+    "paths": {
+      "@/*": [
+        "./*"
+      ]
+    },
+    "allowImportingTsExtensions": true,
+    "noEmit": true
+  }
+}

cologne-christmas-markets-map-2025_5/types.ts

@@ -0,0 +1,15 @@
+
+export interface Market {
+  id: number;
+  name: string;
+  lat: number;
+  lon: number;
+  start: string;
+  end:string;
+  ort: string;
+  imageUrls: string[];
+  description: string;
+  openingHours: string;
+  website?: string;
+  category: 'Traditional' | 'Themed' | 'Community' | 'Short-Term';
+}

cologne-christmas-markets-map-2025_5/vite.config.ts

@@ -0,0 +1,23 @@
+import path from 'path';
+import { defineConfig, loadEnv } from 'vite';
+import react from '@vitejs/plugin-react';
+
+export default defineConfig(({ mode }) => {
+    const env = loadEnv(mode, '.', '');
+    return {
+      server: {
+        port: 3000,
+        host: '0.0.0.0',
+      },
+      plugins: [react()],
+      define: {
+        'process.env.API_KEY': JSON.stringify(env.GEMINI_API_KEY),
+        'process.env.GEMINI_API_KEY': JSON.stringify(env.GEMINI_API_KEY)
+      },
+      resolve: {
+        alias: {
+          '@': path.resolve(__dirname, '.'),
+        }
+      }
+    };
+});