255 lines
10 KiB
HTML
255 lines
10 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="de">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>JGA Prag – Tourenplan</title>
|
||
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
|
||
integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY="
|
||
crossorigin=""/>
|
||
<style>
|
||
html, body { margin: 0; padding: 0; height: 100%; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; background: #1a1a1a; color: #eee; }
|
||
#header { padding: 16px 20px; background: linear-gradient(135deg, #2d2d2d 0%, #1a1a1a 100%); border-bottom: 2px solid #444; }
|
||
#header h1 { margin: 0 0 4px 0; font-size: 22px; }
|
||
#header .sub { color: #aaa; font-size: 13px; }
|
||
#map { height: calc(100vh - 80px); width: 100%; }
|
||
.legend { background: rgba(30,30,30,0.95); padding: 10px 12px; border-radius: 8px; color: #eee; font-size: 13px; box-shadow: 0 2px 8px rgba(0,0,0,0.4); border: 1px solid #444; max-width: 240px; }
|
||
.legend h4 { margin: 0 0 8px 0; font-size: 14px; }
|
||
.legend .item { display: flex; align-items: center; gap: 8px; margin: 4px 0; }
|
||
.legend .emoji { font-size: 18px; }
|
||
.legend .dot { width: 14px; height: 14px; border-radius: 50%; border: 2px solid white; }
|
||
.popup-content { font-family: -apple-system, BlinkMacSystemFont, sans-serif; min-width: 220px; }
|
||
.popup-content .emoji-big { font-size: 28px; margin-right: 8px; }
|
||
.popup-content h3 { margin: 0 0 6px 0; font-size: 16px; color: #1a1a1a; }
|
||
.popup-content .meta { font-size: 12px; color: #555; margin: 4px 0; }
|
||
.popup-content .desc { font-size: 13px; color: #333; margin: 6px 0; }
|
||
.popup-content .price { display: inline-block; background: #ffeb3b; color: #1a1a1a; padding: 2px 8px; border-radius: 4px; font-weight: 600; font-size: 12px; margin-top: 4px; }
|
||
.popup-content a { display: inline-block; margin-top: 8px; padding: 5px 10px; background: #1976d2; color: white; text-decoration: none; border-radius: 4px; font-size: 12px; }
|
||
.popup-content a:hover { background: #1565c0; }
|
||
.leaflet-popup-content-wrapper { border-radius: 8px; }
|
||
.marker-label { background: rgba(30,30,30,0.9); color: white; padding: 3px 8px; border-radius: 4px; font-size: 11px; font-weight: 600; white-space: nowrap; box-shadow: 0 1px 4px rgba(0,0,0,0.4); border: none; }
|
||
.marker-label::before { display: none; }
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div id="header">
|
||
<h1>🥳 JGA Prag – Tourenplan</h1>
|
||
<div class="sub">25.–26. Juli 2026 · 8 Personen · Hotel Uno Prague als Basis</div>
|
||
</div>
|
||
<div id="map"></div>
|
||
|
||
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"
|
||
integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo="
|
||
crossorigin=""></script>
|
||
<script>
|
||
const locations = [
|
||
// Hotel - immer als erstes
|
||
{
|
||
name: "Hotel Uno Prague",
|
||
emoji: "🏨",
|
||
color: "#4fc3f7",
|
||
lat: 50.0717636, lon: 14.4999461,
|
||
address: "Štěchovická 2296/2a, Praha 10 – Strašnice",
|
||
desc: "Unsere Unterkunft. Tram 'Na Hroudě' (Linien 4, 13, 26) in 3 Min Fußweg.",
|
||
price: null,
|
||
url: "https://www.unoprague.cz",
|
||
category: "hotel"
|
||
},
|
||
{
|
||
name: "Endorfin Escape Games",
|
||
emoji: "🔐",
|
||
color: "#e91e63",
|
||
lat: 50.0639594, lon: 14.4520475,
|
||
address: "Petrohradská 216/3, Praha 10 – Vršovice",
|
||
desc: "Escape Rooms (Titanic, Saw, Freddy Krueger). Eingang vom Petrohradská-Hof. Max. 5 Pers/Raum → 2 Teams parallel.",
|
||
price: "ca. 20 € p.P. / 1h",
|
||
url: "https://endorfin.cz/en/escape-games/",
|
||
category: "action"
|
||
},
|
||
{
|
||
name: "KartPlanet Praha",
|
||
emoji: "🏎️",
|
||
color: "#ff9800",
|
||
lat: 50.0998466, lon: 14.5133693,
|
||
address: "Mezitraťová, Praha 9 – Hrdlořezy",
|
||
desc: "Indoor Go-Kart. Schnellste Karts in Prag, ca. 10 Min Heizerlebnis.",
|
||
price: "ca. 15 € p.P. / 10 min",
|
||
url: "https://kartplanet.cz/en/",
|
||
category: "action"
|
||
},
|
||
{
|
||
name: "Level Prague Minigolf",
|
||
emoji: "⛳",
|
||
color: "#66bb6a",
|
||
lat: 50.080850, lon: 14.425050,
|
||
address: "Národní 63/26, Praha 1 – Nové Město (im Máj – House of Fun)",
|
||
desc: "Indoor Minigolf mit Neon-Beleuchtung. Themen-Bahnen mit Überraschungen. Auch Bowling & Escape Rooms im selben Komplex.",
|
||
price: "ca. 25 € p.P. / 1h",
|
||
url: "https://levelsprague.com/de/minigolf/",
|
||
category: "fun"
|
||
},
|
||
{
|
||
name: "Bowling Ovčín",
|
||
emoji: "🎳",
|
||
color: "#ab47bc",
|
||
lat: 50.0537395, lon: 14.4875385,
|
||
address: "Záběhlická 82/3, Praha 10 – Záběhlice",
|
||
desc: "Bowling + Billard + Restaurant. Gemütliche Atmosphäre, ideal für Gruppen.",
|
||
price: "ca. 6 € p.P. / 2h",
|
||
url: "https://www.ovcin.cz/",
|
||
category: "fun"
|
||
},
|
||
{
|
||
name: "Mysterium Tours – Geister-Tour",
|
||
emoji: "👻",
|
||
color: "#7e57c2",
|
||
lat: 50.087800, lon: 14.420500,
|
||
address: "Treffpunkt: Cartier-Geschäft, Ecke Pařížská / Altstädter Ring",
|
||
desc: "Abendliche Geister-Tour durch die Altstadt. Geschichten & Legenden. Startzeiten 19:45 / 20:00 / 20:15, Dauer ~1:45h.",
|
||
price: "ca. 20 € p.P. / 2h",
|
||
url: "https://www.mysteriumtours.com/de/prag/prager-geister-tour/",
|
||
category: "sight"
|
||
},
|
||
{
|
||
name: "Prague Ranger (Schießstand)",
|
||
emoji: "🎯",
|
||
color: "#5d4037",
|
||
lat: 50.0714571, lon: 14.4320070,
|
||
address: "Shuttle-Pickup: Lublaňská 1729/23, Praha 2 – Vyšehrad",
|
||
desc: "Outdoor-Schießstand, ca. 45 Min vom Stadtzentrum. Shuttle im Preis inklusive. Großer Komplex (70.000 m², 25–500 m Bahnen). Genaue Range-Adresse wird erst nach Buchung per Mail mitgeteilt.",
|
||
price: "ca. 100–200 € p.P. / 3–4h",
|
||
url: "https://www.pragueranger.cz/de/",
|
||
category: "action"
|
||
},
|
||
{
|
||
name: "Beer Boat Prague",
|
||
emoji: "⛵",
|
||
color: "#ffb300",
|
||
lat: 50.0941774, lon: 14.4269959,
|
||
address: "Startpunkt: Štefánikův most (Dvořákovo nábřeží), Praha 1",
|
||
desc: "Tretboot-Biertour auf der Moldau. Privater Kapitän, unbegrenzt Bier. Büro: Týnská 639/4, Praha 1.",
|
||
price: "ca. 45 € p.P. / 1h",
|
||
url: "https://beerboatsprague.com/de/Prague-Beer-Boat-Tour",
|
||
category: "fun"
|
||
},
|
||
{
|
||
name: "Paintball Game Praha",
|
||
emoji: "🎨",
|
||
color: "#ef5350",
|
||
lat: 50.0748169, lon: 14.3713262,
|
||
address: "Pod Císařkou, Praha 5 – Buďánka",
|
||
desc: "Paintball mit Reball (kein Schmerz, wiederverwendbare Bälle). Indoor + Outdoor Kombi.",
|
||
price: "ca. 24 € p.P. / 1h",
|
||
url: "https://www.paintballgame.cz/de/paintball-pakete/reball",
|
||
category: "action"
|
||
},
|
||
{
|
||
name: "Mercuria Laser Game Pankrác",
|
||
emoji: "🔫",
|
||
color: "#26c6da",
|
||
lat: 50.0501649, lon: 14.4432250,
|
||
address: "Budějovická 409/1a, Praha 4 – Pankrác (unter Bauhaus, neben Penny)",
|
||
desc: "Lasertag Arena. Mehrere Etagen mit Hindernissen.",
|
||
price: "ca. 7 € p.P. / 20 min",
|
||
url: "https://mercurialaser.cz/en/pankrac/",
|
||
category: "action"
|
||
},
|
||
{
|
||
name: "Enigma – Outdoor City Adventure",
|
||
emoji: "🔍",
|
||
color: "#ffa726",
|
||
lat: 50.0875, lon: 14.4213,
|
||
address: "Symbolischer Startpunkt: Altstädter Ring (Staroměstské náměstí)",
|
||
desc: "Stadtweites Mobile-App Mystery-Spiel. Per GPS durch ganz Prag, kein fester Treffpunkt. Anbieter: Swallnet.",
|
||
price: "ca. 5 € p.P. / 1–2h",
|
||
url: "https://enigma.swallnet.com/index.php/jak-hrat-en/",
|
||
category: "fun"
|
||
}
|
||
];
|
||
|
||
// Karte initialisieren - Start auf Hotel Uno, fitBounds überschreibt das gleich
|
||
const map = L.map('map').setView([50.0718, 14.4999], 11);
|
||
|
||
// Dark Mode Tile Layer (CartoDB Dark Matter)
|
||
L.tileLayer('https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png', {
|
||
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> © <a href="https://carto.com/attributions">CARTO</a>',
|
||
subdomains: 'abcd',
|
||
maxZoom: 19
|
||
}).addTo(map);
|
||
|
||
// Custom Marker mit Emoji + Label
|
||
function createIcon(emoji, color, isHotel=false) {
|
||
const size = isHotel ? 44 : 38;
|
||
const html = `
|
||
<div style="
|
||
background: ${color};
|
||
width: ${size}px;
|
||
height: ${size}px;
|
||
border-radius: 50% 50% 50% 0;
|
||
transform: rotate(-45deg);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
border: 3px solid white;
|
||
box-shadow: 0 3px 8px rgba(0,0,0,0.5);
|
||
">
|
||
<span style="transform: rotate(45deg); font-size: ${isHotel ? 22 : 19}px;">${emoji}</span>
|
||
</div>
|
||
`;
|
||
return L.divIcon({
|
||
html: html,
|
||
className: 'custom-marker',
|
||
iconSize: [size, size],
|
||
iconAnchor: [size/2, size],
|
||
popupAnchor: [0, -size]
|
||
});
|
||
}
|
||
|
||
// Marker setzen
|
||
const bounds = [];
|
||
locations.forEach(loc => {
|
||
const isHotel = loc.category === 'hotel';
|
||
const marker = L.marker([loc.lat, loc.lon], {
|
||
icon: createIcon(loc.emoji, loc.color, isHotel)
|
||
}).addTo(map);
|
||
|
||
const popupContent = `
|
||
<div class="popup-content">
|
||
<h3><span class="emoji-big">${loc.emoji}</span>${loc.name}</h3>
|
||
<div class="meta">📍 ${loc.address}</div>
|
||
<div class="desc">${loc.desc}</div>
|
||
${loc.price ? `<div class="price">${loc.price}</div>` : ''}
|
||
<a href="${loc.url}" target="_blank" rel="noopener">🔗 Website öffnen</a>
|
||
</div>
|
||
`;
|
||
marker.bindPopup(popupContent, { maxWidth: 320 });
|
||
bounds.push([loc.lat, loc.lon]);
|
||
});
|
||
|
||
// Bounds an alle Marker anpassen (mit Padding, damit nichts am Rand klebt)
|
||
map.fitBounds(bounds, { padding: [80, 80] });
|
||
|
||
// Legende
|
||
const legend = L.control({ position: 'bottomright' });
|
||
legend.onAdd = function() {
|
||
const div = L.DomUtil.create('div', 'legend');
|
||
div.innerHTML = `
|
||
<h4>🥳 JGA Prag Tourenplan</h4>
|
||
<div class="item"><span class="dot" style="background:#4fc3f7"></span>🏨 Hotel (Basis)</div>
|
||
<div class="item"><span class="dot" style="background:#e91e63"></span>🔐 Escape Room</div>
|
||
<div class="item"><span class="dot" style="background:#ff9800"></span>🏎️ KartPlanet</div>
|
||
<div class="item"><span class="dot" style="background:#66bb6a"></span>⛳ Minigolf</div>
|
||
<div class="item"><span class="dot" style="background:#ab47bc"></span>🎳 Bowling</div>
|
||
<div class="item"><span class="dot" style="background:#7e57c2"></span>👻 Geister-Tour</div>
|
||
<div class="item"><span class="dot" style="background:#5d4037"></span>🎯 Schießstand</div>
|
||
<div class="item"><span class="dot" style="background:#ffb300"></span>⛵ Beer Boat</div>
|
||
<div class="item"><span class="dot" style="background:#ef5350"></span>🎨 Paintball</div>
|
||
<div class="item"><span class="dot" style="background:#26c6da"></span>🔫 Lasertag</div>
|
||
<div class="item"><span class="dot" style="background:#ffa726"></span>🔍 Enigma</div>
|
||
`;
|
||
return div;
|
||
};
|
||
legend.addTo(map);
|
||
</script>
|
||
</body>
|
||
</html> |