Add 'Heute Mittag' Quick-Pick-Sektion (Sa 26.7.)
Drei verifizierte Optionen, sortiert nach 'wie schnell': 1. Pizza Coloseum Strašnice (8 Min, €) — wenn alle verpeilt 2. Restaurace U Kohouta (10 Min, €€) — Empfehlung, tschechisch 3. Restaurace U Přístavu (~20 Min, €€) — falls KartPlanet-Tag In index.html (prominent nach Hero) und beide Tourenplan-Varianten (kompakte Leiste über der Karte). Live verifiziert via curl.
This commit is contained in:
Hermes Agent
+177
@@ -556,6 +556,183 @@
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ===== 🍽️ HEUTE MITTAG — Quick-Picks (Samstag, 26.7.) ===== -->
|
||||
<section class="section heute-mittag">
|
||||
<style>
|
||||
.heute-mittag {
|
||||
background: linear-gradient(135deg, rgba(246,197,68,0.10), rgba(139,21,56,0.08));
|
||||
border: 1px solid rgba(246,197,68,0.35);
|
||||
border-radius: 18px;
|
||||
padding: 22px 22px 18px;
|
||||
margin: 24px 0;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
.heute-mittag::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: -40px; right: -40px;
|
||||
width: 140px; height: 140px;
|
||||
background: radial-gradient(circle, rgba(246,197,68,0.20), transparent 70%);
|
||||
pointer-events: none;
|
||||
}
|
||||
.heute-mittag h2 {
|
||||
font-size: 22px;
|
||||
margin: 0 0 6px;
|
||||
color: var(--accent-bright);
|
||||
display: flex; align-items: center; gap: 10px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.heute-mittag h2 .tag {
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
background: var(--bordeaux);
|
||||
color: #fff;
|
||||
padding: 3px 9px;
|
||||
border-radius: 999px;
|
||||
letter-spacing: 0.5px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.heute-mittag .sub {
|
||||
font-size: 13px;
|
||||
color: var(--text-dim, #999);
|
||||
margin: 0 0 16px;
|
||||
}
|
||||
.hm-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 14px;
|
||||
}
|
||||
@media (max-width: 760px) {
|
||||
.hm-grid { grid-template-columns: 1fr; }
|
||||
}
|
||||
.hm-card {
|
||||
background: var(--card-bg, rgba(0,0,0,0.25));
|
||||
border: 1px solid var(--card-border, rgba(255,255,255,0.08));
|
||||
border-radius: 14px;
|
||||
padding: 14px 14px 12px;
|
||||
display: flex; flex-direction: column;
|
||||
transition: transform 0.18s, border-color 0.18s;
|
||||
position: relative;
|
||||
}
|
||||
.hm-card:hover { transform: translateY(-2px); border-color: var(--accent); }
|
||||
.hm-card .rank {
|
||||
position: absolute; top: 10px; right: 12px;
|
||||
font-size: 11px; font-weight: 700;
|
||||
color: var(--accent-dim);
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
.hm-card.featured {
|
||||
border-color: var(--accent-bright);
|
||||
box-shadow: 0 0 0 1px var(--accent-bright), 0 6px 20px rgba(246,197,68,0.15);
|
||||
}
|
||||
.hm-card.featured .rank { color: var(--accent-bright); }
|
||||
.hm-card h3 {
|
||||
margin: 0 0 4px;
|
||||
font-size: 17px;
|
||||
color: var(--text, #fff);
|
||||
}
|
||||
.hm-card .meta {
|
||||
font-size: 12px;
|
||||
color: var(--text-dim, #aaa);
|
||||
margin-bottom: 8px;
|
||||
display: flex; flex-wrap: wrap; gap: 6px;
|
||||
}
|
||||
.hm-card .meta span {
|
||||
background: rgba(255,255,255,0.06);
|
||||
padding: 2px 8px;
|
||||
border-radius: 999px;
|
||||
}
|
||||
.hm-card .desc {
|
||||
font-size: 13px;
|
||||
line-height: 1.5;
|
||||
color: var(--text, #ddd);
|
||||
margin: 0 0 10px;
|
||||
}
|
||||
.hm-card a.go {
|
||||
margin-top: auto;
|
||||
align-self: flex-start;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
color: var(--accent-bright);
|
||||
text-decoration: none;
|
||||
padding: 6px 12px;
|
||||
border: 1px solid var(--accent-bright);
|
||||
border-radius: 8px;
|
||||
transition: background 0.15s, color 0.15s;
|
||||
}
|
||||
.hm-card a.go:hover { background: var(--accent-bright); color: #1a1a1a; }
|
||||
.heute-mittag .footer-tip {
|
||||
margin-top: 14px;
|
||||
font-size: 12px;
|
||||
color: var(--text-dim, #999);
|
||||
text-align: center;
|
||||
}
|
||||
.heute-mittag .footer-tip strong { color: var(--accent-bright); }
|
||||
</style>
|
||||
|
||||
<h2>
|
||||
<span class="emoji">🍽️</span>
|
||||
Heute Mittag — Essen in der Nähe vom Hotel
|
||||
<span class="tag">Sa · 26.7.</span>
|
||||
</h2>
|
||||
<p class="sub">3 Optionen, sortiert nach "wie schnell können wir los":</p>
|
||||
|
||||
<div class="hm-grid">
|
||||
|
||||
<!-- Option 1: Schnellste -->
|
||||
<div class="hm-card">
|
||||
<span class="rank">OPTION 1 · SCHNELL</span>
|
||||
<h3>🍕 Pizza Coloseum Strašnice</h3>
|
||||
<div class="meta">
|
||||
<span>🇮🇹 Pizza</span>
|
||||
<span>💶 €</span>
|
||||
<span>🚶 8 Min vom Hotel</span>
|
||||
</div>
|
||||
<p class="desc">
|
||||
Solide Pizza, große Pies, auch Lieferung. Wenn alle verpeilt sind und keiner mehr diskutieren will — hier gibt's keine falsche Bestellung.
|
||||
</p>
|
||||
<a class="go" href="https://www.google.com/maps/search/?api=1&query=Pizza+Coloseum+Strasnice+Prague" target="_blank" rel="noopener">📍 Google Maps</a>
|
||||
</div>
|
||||
|
||||
<!-- Option 2: Solide tschechisch (FEATURED) -->
|
||||
<div class="hm-card featured">
|
||||
<span class="rank">OPTION 2 · EMPFEHLUNG</span>
|
||||
<h3>🍖 Restaurace U Kohouta</h3>
|
||||
<div class="meta">
|
||||
<span>🇨🇿 Tschechisch</span>
|
||||
<span>💶€€</span>
|
||||
<span>🚶 10 Min vom Hotel</span>
|
||||
</div>
|
||||
<p class="desc">
|
||||
Klassische böhmische Küche: Svíčková, Gulasch, Knödel. Gemütliche Atmosphäre, nimmt Gruppen problemlos. Für 8 Pers. kurz anrufen oder einfach hin.
|
||||
</p>
|
||||
<a class="go" href="https://www.google.com/maps/search/?api=1&query=Restaurace+U+Kohouta+Strasnice+Prague" target="_blank" rel="noopener">📍 Google Maps</a>
|
||||
</div>
|
||||
|
||||
<!-- Option 3: Wasser-Edition (für KartPlanet-Tag) -->
|
||||
<div class="hm-card">
|
||||
<span class="rank">OPTION 3 · WASSER</span>
|
||||
<h3>🛶 Restaurace U Přístavu</h3>
|
||||
<div class="meta">
|
||||
<span>🇨🇿 Tschechisch</span>
|
||||
<span>💶€€</span>
|
||||
<span>🚗 ~20 Min (KartPlanet)</span>
|
||||
</div>
|
||||
<p class="desc">
|
||||
Falls KartPlanet heute läuft: direkt am Wasser, gute Knödel. Sitzt man mit Sonnenbrille auf der Terrasse, fühlt sich das an wie Sommer-Urlaub statt JGA.
|
||||
</p>
|
||||
<a class="go" href="https://www.google.com/maps/search/?api=1&query=Restaurace+U+P%C5%99%C3%ADstavu+Hrdo%C5%99ezy+Prague" target="_blank" rel="noopener">📍 Google Maps</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<p class="footer-tip">
|
||||
💡 <strong>Tipp:</strong> Option 1 für "ich will jetzt essen, fertig" ·
|
||||
Option 2 für "lass uns das Prag-Feeling haben" ·
|
||||
Option 3 falls ihr am Wasser seid.
|
||||
</p>
|
||||
</section>
|
||||
<!-- ===== TRIP-ÜBERSICHT (Quick-Info kompakt) ===== -->
|
||||
<section class="trip-info">
|
||||
<div class="trip-pill">
|
||||
|
||||
@@ -389,6 +389,97 @@
|
||||
</div>
|
||||
<a href="index.html" class="home-btn" title="Zurück zur Startseite">🏠 Startseite</a>
|
||||
<button class="theme-toggle" id="theme-toggle" aria-label="Theme wechseln" title="Light/Dark Mode">🌙</button>
|
||||
<!-- ===== 🍽️ HEUTE MITTAG — Quick-Picks ===== -->
|
||||
<div class="heute-mittag-bar">
|
||||
<style>
|
||||
.heute-mittag-bar {
|
||||
background: linear-gradient(135deg, rgba(246,197,68,0.12), rgba(139,21,56,0.10));
|
||||
border: 1px solid rgba(246,197,68,0.35);
|
||||
border-radius: 12px;
|
||||
padding: 12px 16px;
|
||||
margin: 14px 16px 0;
|
||||
font-family: inherit;
|
||||
}
|
||||
.heute-mittag-bar .title {
|
||||
display: flex; align-items: center; gap: 8px;
|
||||
font-size: 14px; font-weight: 700;
|
||||
color: var(--accent-bright, #f6c544);
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.heute-mittag-bar .title .tag {
|
||||
font-size: 10px;
|
||||
background: var(--bordeaux, #8b1538);
|
||||
color: #fff;
|
||||
padding: 2px 7px;
|
||||
border-radius: 999px;
|
||||
letter-spacing: 0.4px;
|
||||
text-transform: uppercase;
|
||||
font-weight: 700;
|
||||
}
|
||||
.heute-mittag-bar .opts {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 10px;
|
||||
}
|
||||
@media (max-width: 760px) {
|
||||
.heute-mittag-bar .opts { grid-template-columns: 1fr; }
|
||||
}
|
||||
.heute-mittag-bar .opt {
|
||||
background: rgba(0,0,0,0.20);
|
||||
border: 1px solid rgba(255,255,255,0.08);
|
||||
border-radius: 10px;
|
||||
padding: 9px 11px;
|
||||
font-size: 12px;
|
||||
line-height: 1.45;
|
||||
color: #ddd;
|
||||
}
|
||||
.heute-mittag-bar .opt strong { color: var(--accent-bright, #f6c544); }
|
||||
.heute-mittag-bar .opt .rank {
|
||||
display: block;
|
||||
font-size: 10px;
|
||||
font-weight: 700;
|
||||
color: var(--accent-dim, #8a6914);
|
||||
letter-spacing: 0.5px;
|
||||
margin-bottom: 3px;
|
||||
}
|
||||
.heute-mittag-bar .opt.featured {
|
||||
border-color: var(--accent-bright, #f6c544);
|
||||
box-shadow: 0 0 0 1px var(--accent-bright, #f6c544);
|
||||
}
|
||||
.heute-mittag-bar .opt.featured .rank { color: var(--accent-bright, #f6c544); }
|
||||
.heute-mittag-bar .opt a {
|
||||
display: inline-block;
|
||||
margin-top: 4px;
|
||||
font-size: 11px;
|
||||
color: var(--accent-bright, #f6c544);
|
||||
text-decoration: none;
|
||||
}
|
||||
.heute-mittag-bar .opt a:hover { text-decoration: underline; }
|
||||
</style>
|
||||
|
||||
<div class="title">
|
||||
<span>🍽️</span>
|
||||
<span>Heute Mittag — Essen in Hotelnähe</span>
|
||||
<span class="tag">Sa · 26.7.</span>
|
||||
</div>
|
||||
<div class="opts">
|
||||
<div class="opt">
|
||||
<span class="rank">OPTION 1 · SCHNELL</span>
|
||||
<strong>🍕 Pizza Coloseum</strong> · Italienisch, € · 8 Min Fußweg
|
||||
<br><a href="https://www.google.com/maps/search/?api=1&query=Pizza+Coloseum+Strasnice+Prague" target="_blank" rel="noopener">📍 Google Maps</a>
|
||||
</div>
|
||||
<div class="opt featured">
|
||||
<span class="rank">OPTION 2 · EMPFEHLUNG</span>
|
||||
<strong>🍖 Restaurace U Kohouta</strong> · Tschechisch, €€ · 10 Min Fußweg
|
||||
<br><a href="https://www.google.com/maps/search/?api=1&query=Restaurace+U+Kohouta+Strasnice+Prague" target="_blank" rel="noopener">📍 Google Maps</a>
|
||||
</div>
|
||||
<div class="opt">
|
||||
<span class="rank">OPTION 3 · WASSER</span>
|
||||
<strong>🛶 Restaurace U Přístavu</strong> · Tschechisch, €€ · ~20 Min (KartPlanet-Gegend)
|
||||
<br><a href="https://www.google.com/maps/search/?api=1&query=Restaurace+U+P%C5%99%C3%ADstavu+Hrdo%C5%99ezy+Prague" target="_blank" rel="noopener">📍 Google Maps</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="map"></div>
|
||||
|
||||
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"
|
||||
|
||||
@@ -202,6 +202,97 @@
|
||||
</div>
|
||||
<a href="index.html" class="home-btn" title="Zurück zur Startseite">🏠 Startseite</a>
|
||||
<button class="theme-toggle" id="theme-toggle" aria-label="Theme wechseln" title="Light/Dark Mode">🌙</button>
|
||||
<!-- ===== 🍽️ HEUTE MITTAG — Quick-Picks ===== -->
|
||||
<div class="heute-mittag-bar">
|
||||
<style>
|
||||
.heute-mittag-bar {
|
||||
background: linear-gradient(135deg, rgba(246,197,68,0.12), rgba(139,21,56,0.10));
|
||||
border: 1px solid rgba(246,197,68,0.35);
|
||||
border-radius: 12px;
|
||||
padding: 12px 16px;
|
||||
margin: 14px 16px 0;
|
||||
font-family: inherit;
|
||||
}
|
||||
.heute-mittag-bar .title {
|
||||
display: flex; align-items: center; gap: 8px;
|
||||
font-size: 14px; font-weight: 700;
|
||||
color: var(--accent-bright, #f6c544);
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.heute-mittag-bar .title .tag {
|
||||
font-size: 10px;
|
||||
background: var(--bordeaux, #8b1538);
|
||||
color: #fff;
|
||||
padding: 2px 7px;
|
||||
border-radius: 999px;
|
||||
letter-spacing: 0.4px;
|
||||
text-transform: uppercase;
|
||||
font-weight: 700;
|
||||
}
|
||||
.heute-mittag-bar .opts {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 10px;
|
||||
}
|
||||
@media (max-width: 760px) {
|
||||
.heute-mittag-bar .opts { grid-template-columns: 1fr; }
|
||||
}
|
||||
.heute-mittag-bar .opt {
|
||||
background: rgba(0,0,0,0.20);
|
||||
border: 1px solid rgba(255,255,255,0.08);
|
||||
border-radius: 10px;
|
||||
padding: 9px 11px;
|
||||
font-size: 12px;
|
||||
line-height: 1.45;
|
||||
color: #ddd;
|
||||
}
|
||||
.heute-mittag-bar .opt strong { color: var(--accent-bright, #f6c544); }
|
||||
.heute-mittag-bar .opt .rank {
|
||||
display: block;
|
||||
font-size: 10px;
|
||||
font-weight: 700;
|
||||
color: var(--accent-dim, #8a6914);
|
||||
letter-spacing: 0.5px;
|
||||
margin-bottom: 3px;
|
||||
}
|
||||
.heute-mittag-bar .opt.featured {
|
||||
border-color: var(--accent-bright, #f6c544);
|
||||
box-shadow: 0 0 0 1px var(--accent-bright, #f6c544);
|
||||
}
|
||||
.heute-mittag-bar .opt.featured .rank { color: var(--accent-bright, #f6c544); }
|
||||
.heute-mittag-bar .opt a {
|
||||
display: inline-block;
|
||||
margin-top: 4px;
|
||||
font-size: 11px;
|
||||
color: var(--accent-bright, #f6c544);
|
||||
text-decoration: none;
|
||||
}
|
||||
.heute-mittag-bar .opt a:hover { text-decoration: underline; }
|
||||
</style>
|
||||
|
||||
<div class="title">
|
||||
<span>🍽️</span>
|
||||
<span>Heute Mittag — Essen in Hotelnähe</span>
|
||||
<span class="tag">Sa · 26.7.</span>
|
||||
</div>
|
||||
<div class="opts">
|
||||
<div class="opt">
|
||||
<span class="rank">OPTION 1 · SCHNELL</span>
|
||||
<strong>🍕 Pizza Coloseum</strong> · Italienisch, € · 8 Min Fußweg
|
||||
<br><a href="https://www.google.com/maps/search/?api=1&query=Pizza+Coloseum+Strasnice+Prague" target="_blank" rel="noopener">📍 Google Maps</a>
|
||||
</div>
|
||||
<div class="opt featured">
|
||||
<span class="rank">OPTION 2 · EMPFEHLUNG</span>
|
||||
<strong>🍖 Restaurace U Kohouta</strong> · Tschechisch, €€ · 10 Min Fußweg
|
||||
<br><a href="https://www.google.com/maps/search/?api=1&query=Restaurace+U+Kohouta+Strasnice+Prague" target="_blank" rel="noopener">📍 Google Maps</a>
|
||||
</div>
|
||||
<div class="opt">
|
||||
<span class="rank">OPTION 3 · WASSER</span>
|
||||
<strong>🛶 Restaurace U Přístavu</strong> · Tschechisch, €€ · ~20 Min (KartPlanet-Gegend)
|
||||
<br><a href="https://www.google.com/maps/search/?api=1&query=Restaurace+U+P%C5%99%C3%ADstavu+Hrdo%C5%99ezy+Prague" target="_blank" rel="noopener">📍 Google Maps</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="map"></div>
|
||||
|
||||
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"
|
||||
|
||||
Reference in New Issue
Block a user