diff --git a/index.html b/index.html index 1ccb290..7d724b0 100644 --- a/index.html +++ b/index.html @@ -229,8 +229,8 @@
🚋

Tourenplan + Tram & Metro

- Erweiterte Version mit 13 Tram-Linien und 10 wichtigen Haltestellen - eingezeichnet. Perfekt für die Routenplanung. + Erweiterte Version mit 7 Tram-Linien + 3 Metro-Linien (A/B/C) + 15 Haltestellen. + Mit 🎫 Ticket-Button für ÖPNV-Preise & Gruppenkauf.

Karte öffnen → diff --git a/tourenplan-mit-tram.html b/tourenplan-mit-tram.html index 9a2f01e..c112637 100644 --- a/tourenplan-mit-tram.html +++ b/tourenplan-mit-tram.html @@ -88,6 +88,139 @@ border: 1px solid #333; } +/* ============================================================ */ +/* TICKET-MODAL */ +/* ============================================================ */ +.ticket-btn { + background: rgba(30,30,30,0.95); + padding: 10px 14px; + border-radius: 8px; + color: #eee; + font-size: 14px; + font-weight: 600; + cursor: pointer; + border: 1px solid #444; + box-shadow: 0 2px 8px rgba(0,0,0,0.4); + display: inline-flex; + align-items: center; + gap: 6px; + transition: transform 0.15s, background 0.15s; + user-select: none; +} +.ticket-btn:hover { + background: rgba(50,50,50,0.95); + transform: translateY(-1px); +} +.ticket-btn:active { transform: translateY(0); } + +.modal-overlay { + position: fixed; + top: 0; left: 0; right: 0; bottom: 0; + background: rgba(0,0,0,0.7); + display: none; + align-items: center; + justify-content: center; + z-index: 9999; + padding: 20px; +} +.modal-overlay.active { display: flex; } +.modal { + background: #1c1c1f; + color: #eee; + border-radius: 12px; + padding: 24px 28px; + max-width: 720px; + width: 100%; + max-height: 90vh; + overflow-y: auto; + box-shadow: 0 10px 40px rgba(0,0,0,0.6); + border: 1px solid #444; +} +.modal h2 { margin: 0 0 6px 0; font-size: 22px; } +.modal .modal-sub { color: #aaa; font-size: 13px; margin-bottom: 20px; } +.modal-close { + float: right; + background: none; + border: 1px solid #555; + color: #ccc; + width: 32px; height: 32px; + border-radius: 6px; + font-size: 18px; + cursor: pointer; + margin: -8px -8px 0 0; +} +.modal-close:hover { background: #333; color: white; } + +.ticket-option { + background: #252528; + border-radius: 8px; + padding: 16px 18px; + margin-bottom: 14px; + border-left: 4px solid #3b82f6; +} +.ticket-option.recommended { border-left-color: #22c55e; } +.ticket-option.basic { border-left-color: #f59e0b; } +.ticket-option h3 { + margin: 0 0 6px 0; + font-size: 16px; + display: flex; + align-items: center; + gap: 8px; +} +.ticket-option .badge { + display: inline-block; + font-size: 10px; + font-weight: 700; + padding: 2px 8px; + border-radius: 4px; + text-transform: uppercase; + letter-spacing: 0.5px; +} +.ticket-option.recommended .badge { background: #22c55e; color: #052e10; } +.ticket-option.basic .badge { background: #f59e0b; color: #1c1c1f; } +.ticket-option.prepaid .badge { background: #3b82f6; color: white; } + +.ticket-option .price-row { + display: flex; + flex-wrap: wrap; + gap: 12px; + margin: 8px 0; + font-size: 13px; + color: #ccc; +} +.ticket-option .price-row strong { color: #fff; font-size: 15px; } +.ticket-option ul { + margin: 6px 0 6px 0; + padding-left: 20px; + font-size: 13px; + color: #ccc; +} +.ticket-option ul li { margin: 3px 0; } +.ticket-option .btn-link { + display: inline-block; + margin-top: 8px; + padding: 7px 14px; + background: #3b82f6; + color: white; + text-decoration: none; + border-radius: 6px; + font-size: 13px; + font-weight: 600; +} +.ticket-option .btn-link:hover { background: #2563eb; } +.ticket-option .btn-link.green { background: #22c55e; color: #052e10; } +.ticket-option .btn-link.green:hover { background: #16a34a; } + +.gruppe-tipp { + background: rgba(59,130,246,0.1); + border: 1px solid rgba(59,130,246,0.3); + border-radius: 8px; + padding: 12px 16px; + margin: 16px 0; + font-size: 13px; + color: #cbd5e1; +} +.gruppe-tipp strong { color: #93c5fd; } @@ -453,6 +586,127 @@ legend.onAdd = function() { return div; }; legend.addTo(map); + +// ============================================================ +// 🎫 ÖPNV-TICKETS MODAL +// ============================================================ + +const ticketControl = L.control({ position: 'topleft' }); +ticketControl.onAdd = function() { + const div = L.DomUtil.create('div', ''); + div.innerHTML = ''; + L.DomEvent.disableClickPropagation(div); + L.DomEvent.disableScrollPropagation(div); + return div; +}; +ticketControl.addTo(map); + +document.getElementById('ticketBtn').addEventListener('click', () => { + document.getElementById('ticketModal').classList.add('active'); +}); + +document.getElementById('modalClose').addEventListener('click', () => { + document.getElementById('ticketModal').classList.remove('active'); +}); + +document.getElementById('ticketModal').addEventListener('click', (e) => { + if (e.target.id === 'ticketModal') { + document.getElementById('ticketModal').classList.remove('active'); + } +}); + +document.addEventListener('keydown', (e) => { + if (e.key === 'Escape') { + document.getElementById('ticketModal').classList.remove('active'); + } +}); + + + +