Add 🎫 ÖPNV-Ticket-Modal mit 4 Optionen für Gruppenkauf (Visitor Pass, PID App, SMS, Automat)
This commit is contained in:
Orfel-HermesAI-Bot
+2
-2
@@ -229,8 +229,8 @@
|
||||
<div class="card-icon">🚋</div>
|
||||
<h2>Tourenplan + Tram & Metro</h2>
|
||||
<p class="description">
|
||||
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.
|
||||
</p>
|
||||
<a href="tourenplan-mit-tram.html" class="open-btn">Karte öffnen →</a>
|
||||
</div>
|
||||
|
||||
@@ -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; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
@@ -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 = '<button class="ticket-btn" id="ticketBtn">🎫 ÖPNV-Tickets</button>';
|
||||
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');
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<!-- TICKET-MODAL HTML -->
|
||||
<div class="modal-overlay" id="ticketModal">
|
||||
<div class="modal">
|
||||
<button class="modal-close" id="modalClose" aria-label="Schließen">✕</button>
|
||||
<h2>🎫 ÖPNV-Tickets für Prag</h2>
|
||||
<div class="modal-sub">Tram + Metro + Bus + Fähre · 8 Personen · 25.–26.07.2026 (2 Tage) · Bezahlung in CZK oder €</div>
|
||||
|
||||
<div class="gruppe-tipp">
|
||||
<strong>💡 JGA-Gruppen-Tipp:</strong> Eine Person kauft für alle online (oder jeder selbst), Tickets kommen direkt aufs Handy. Vor Reise buchbar, keine Wartezeit am Automaten, kontaktlos. Bezahlung per Kreditkarte/Apple Pay.
|
||||
</div>
|
||||
|
||||
<div class="ticket-option recommended">
|
||||
<h3>🏆 Prag Visitor Pass <span class="badge">Empfehlung für JGA</span></h3>
|
||||
<div class="price-row">
|
||||
<span><strong>2 Tage</strong> · ca. 28 € p.P.</span>
|
||||
<span><strong>3 Tage</strong> · ca. 38 € p.P.</span>
|
||||
<span><strong>4 Tage</strong> · ca. 48 € p.P.</span>
|
||||
<span><strong>5 Tage</strong> · ca. 60 € p.P.</span>
|
||||
</div>
|
||||
<ul>
|
||||
<li>✅ <strong>Alle Tram/Metro/Bus/Fähre</strong> inklusive</li>
|
||||
<li>✅ ~70 Top-Sehenswürdigkeiten gratis (z.B. Burg, Zoo, Geister-Touren)</li>
|
||||
<li>✅ <strong>8 × 38 € (3 Tage) = 304 €</strong> · günstiger als Einzeltickets ab 4 Fahrten/Tag</li>
|
||||
<li>✅ Digital aufs Handy, kein Automat nötig</li>
|
||||
</ul>
|
||||
<a href="https://www.praguevisitorpass.eu/" target="_blank" rel="noopener" class="btn-link green">🌐 Auf visitor.prague.eu kaufen →</a>
|
||||
</div>
|
||||
|
||||
<div class="ticket-option prepaid">
|
||||
<h3>📱 PID Lítačka App (DPP offiziell)</h3>
|
||||
<div class="price-row">
|
||||
<span>Einzelticket 30 Min: <strong>40 CZK</strong> (~1,60 €)</span>
|
||||
<span>Einzelticket 90 Min: <strong>50 CZK</strong> (~2 €)</span>
|
||||
<span>24h-Ticket: <strong>120 CZK</strong> (~5 €)</span>
|
||||
<span>72h-Ticket: <strong>330 CZK</strong> (~13,50 €)</span>
|
||||
</div>
|
||||
<ul>
|
||||
<li>✅ Jeder kauft selbst in der App · Kreditkarte/Apple Pay</li>
|
||||
<li>✅ Aktiviert erst beim Einsteigen (kein Verlust)</li>
|
||||
<li>✅ Ideal wenn ihr <strong>nur wenige Fahrten</strong> plant</li>
|
||||
<li>ℹ️ <strong>Für 8 Pers × 3 Tage = 8 × 330 CZK = 108 €</strong> (günstiger als Visitor Pass!)</li>
|
||||
</ul>
|
||||
<a href="https://www.dpp.cz/en/fares/app-pid-litacka" target="_blank" rel="noopener" class="btn-link">📲 App-Infos auf dpp.cz →</a>
|
||||
</div>
|
||||
|
||||
<div class="ticket-option basic">
|
||||
<h3>📲 SMS-Ticket (schnellste Option)</h3>
|
||||
<div class="price-row">
|
||||
<span>Einzelticket 30 Min: <strong>40 CZK</strong> (~1,60 €)</span>
|
||||
<span>Einzelticket 90 Min: <strong>50 CZK</strong> (~2 €)</span>
|
||||
<span><strong>Für 8 Pers × 1 Fahrt: 320 CZK</strong> (~13 €)</span>
|
||||
</div>
|
||||
<ul>
|
||||
<li>✅ SMS an <strong>902 06</strong> mit Text <strong>DPT40</strong> (30 Min) oder <strong>DPT50</strong> (90 Min)</li>
|
||||
<li>✅ Ticket kommt sofort als SMS zurück · bei Einsteigen Kontrolleur zeigen</li>
|
||||
<li>⚠️ Benötigt tschechische SIM oder Roaming · <strong>nur für 1 Fahrt</strong> sinnvoll</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="ticket-option basic">
|
||||
<h3>🏧 Ticket-Automat (jede Metrostation)</h3>
|
||||
<div class="price-row">
|
||||
<span>24h-Ticket: <strong>120 CZK</strong> (~5 €)</span>
|
||||
<span>72h-Ticket: <strong>330 CZK</strong> (~13,50 €)</span>
|
||||
</div>
|
||||
<ul>
|
||||
<li>✅ In jeder Metrostation · Touchscreen, DE/EN/CZ</li>
|
||||
<li>✅ Bezahlung: Münzen (CZK) oder Kreditkarte</li>
|
||||
<li>⚠️ Kann bei großem Andrang Wartezeit geben</li>
|
||||
<li>⚠️ <strong>Papier-Ticket kann verloren gehen</strong> — Personalisierung nicht vergessen!</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="gruppe-tipp">
|
||||
<strong>📊 Unsere Empfehlung für eure 2 Tage:</strong><br>
|
||||
• <strong>Wenn ihr viele Aktivitäten plant</strong> → <strong>Prag Visitor Pass 3 Tage (38 € p.P.)</strong>, weil viele Sehenswürdigkeiten inklusive sind<br>
|
||||
• <strong>Wenn ihr nur Hotel↔Aktivität pendelt</strong> → <strong>72h-Ticket in der PID-App (13,50 € p.P.)</strong>, billigste Lösung<br>
|
||||
• <strong>Spartipp:</strong> Immer <strong>vor der Reise</strong> online kaufen, vor Ort keine Wartezeit am Automaten!
|
||||
</div>
|
||||
|
||||
<div style="text-align:center;color:#777;font-size:11px;margin-top:12px;">
|
||||
Preise Stand 2024/2025 · vor Reise nochmal checken (kann sich ändern) · Quelle: dpp.cz, visitor.prague.eu
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user