narty-2027/pages/ischgl/oferty/apartment-brandau-kappl.html
oskar 8f1557e736 Przeprojektowanie pod decyzję: start.html, porownanie.html, galerie
Wejściem jest teraz landing pages/start.html (trzy kafle: porównanie ofert,
analiza wariantów, graf + kafle czterech regionów ze zdjęciem najlepszej
oferty w tle), a graf schodzi do roli załącznika. start.html linkuje
root-absolutnie, bo ten sam plik jest serwowany jako /index.html i jako
/pages/start.html.

pages/porownanie.html: jedna tabela wszystkich 12 ofert prosto z
frontmatterów (miniatura, priorytet, region, ceny, status, odległość, www),
sortowanie klikiem w nagłówek (czysty JS, bez zależności), wiersze barwione
statusem ceny. Nad tabelą podsumowanie per region — budżet całkowity i jeden
wniosek parsowane z tabeli i „Wniosków przekrojowych” w wyjazd.md, bez
zaszywania nazw regionów w kodzie.

Karty ofert dostały galerię (duże zdjęcie + miniatury, lazy loading),
a nawigacja na każdej stronie prowadzi do startu i porównania.
Komenda deployu (kopiuje start.html jako /content/index.html) jest
wypisywana przez gen_pages.py. Pliki .md bez zmian, check_okf zielony.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
2026-08-03 17:24:25 +02:00

167 lines
12 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!doctype html>
<html lang="pl">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Apartment Brandau (Kappl) — Ski 2027 — Skicircus Saalbach</title>
<style>
:root { color-scheme: light dark; --fg:#0f172a; --muted:#64748b; --bg:#ffffff;
--line:#e2e8f0; --accent:#0d9488; --chip:#f1f5f9; --quote:#f8fafc; }
@media (prefers-color-scheme: dark) {
:root { --fg:#e2e8f0; --muted:#94a3b8; --bg:#0f172a; --line:#334155;
--accent:#2dd4bf; --chip:#1e293b; --quote:#1e293b; }
}
* { box-sizing: border-box; }
body { margin: 0 auto; padding: 1.25rem 1rem 4rem; max-width: 46rem;
font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
font-size: 17px; line-height: 1.55; color: var(--fg); background: var(--bg);
-webkit-text-size-adjust: 100%; }
nav { font-size: .85rem; margin-bottom: 1.25rem; }
nav a { color: var(--muted); }
h1 { font-size: 1.55rem; line-height: 1.25; margin: 0 0 .35rem; }
h2 { font-size: 1.2rem; margin: 2rem 0 .5rem; padding-top: .5rem;
border-top: 1px solid var(--line); }
h3 { font-size: 1.02rem; margin: 1.4rem 0 .4rem; }
p, ul, ol { margin: .6rem 0; }
ul, ol { padding-left: 1.3rem; }
li { margin: .25rem 0; }
li.task { list-style: none; margin-left: -1.3rem; }
li.task input { margin-right: .45rem; }
a { color: var(--accent); }
a.ext::after { content: " ↗"; font-size: .8em; color: var(--muted); }
code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .88em;
background: var(--chip); padding: .1em .35em; border-radius: 4px; }
pre { background: var(--chip); padding: .75rem; border-radius: 6px; overflow-x: auto; }
pre code { background: none; padding: 0; }
blockquote { margin: .9rem 0; padding: .6rem .9rem; background: var(--quote);
border-left: 3px solid var(--accent); border-radius: 0 6px 6px 0; }
blockquote p { margin: .2rem 0; }
hr { border: 0; border-top: 1px solid var(--line); margin: 1.5rem 0; }
.table-wrap { overflow-x: auto; margin: .8rem 0; -webkit-overflow-scrolling: touch; }
table { border-collapse: collapse; width: 100%; font-size: .92rem; }
th, td { border: 1px solid var(--line); padding: .4rem .55rem; vertical-align: top; }
th { background: var(--chip); font-weight: 600; }
.chip { display: inline-block; background: var(--chip); color: var(--muted);
font-size: .72rem; text-transform: uppercase; letter-spacing: .04em;
padding: .15rem .5rem; border-radius: 999px; }
.lead { color: var(--muted); margin: .35rem 0 1.25rem; }
.meta { margin: 0 0 1.5rem; }
.meta summary { cursor: pointer; font-size: .85rem; color: var(--muted);
padding: .3rem 0; }
.meta table { font-size: .85rem; }
.meta th { width: 38%; text-align: left; font-weight: 500; word-break: break-word; }
.cards { list-style: none; padding: 0; margin: 0; }
.cards li { border: 1px solid var(--line); border-radius: 8px; padding: .8rem .9rem;
margin: .6rem 0; }
.cards a { font-weight: 600; text-decoration: none; }
.cards p { margin: .3rem 0 0; font-size: .9rem; color: var(--muted); }
footer { margin-top: 3rem; padding-top: 1rem; border-top: 1px solid var(--line);
font-size: .78rem; color: var(--muted); }
/* landing: kafle i lista regionów */
body.wide { max-width: 72rem; }
.tiles, .regions { list-style: none; padding: 0; }
.tiles { margin: 1.25rem 0 2rem; display: grid; gap: .75rem; }
.regions { margin: .6rem 0 0; display: grid; gap: .5rem; }
@media (min-width: 34rem) {
.tiles { grid-template-columns: repeat(3, 1fr); }
.regions { grid-template-columns: repeat(2, 1fr); }
}
.tiles a, .regions a { display: block; border: 1px solid var(--line); border-radius: 10px;
padding: .9rem 1rem; text-decoration: none; color: var(--fg); }
.tiles a { font-size: 1.05rem; font-weight: 600; }
.tiles a:hover, .tiles a:focus, .regions a:hover, .regions a:focus {
border-color: var(--accent); }
.tiles small, .regions small { display: block; margin-top: .3rem; font-weight: 400;
font-size: .85rem; color: var(--muted); }
.regions a { font-weight: 600; }
/* podsumowanie per region na karcie porównania */
.summary { list-style: none; padding: 0; margin: .8rem 0 2rem; display: grid; gap: .6rem; }
@media (min-width: 48rem) { .summary { grid-template-columns: repeat(2, 1fr); } }
.summary li { border: 1px solid var(--line); border-left: 3px solid var(--accent);
border-radius: 8px; padding: .65rem .85rem; }
.summary .budget { font-size: .95rem; }
.summary p { margin: .35rem 0 0; font-size: .88rem; color: var(--muted); }
/* tabela porównawcza: sortowanie klikiem + kolor statusu ceny */
table.sortable th { cursor: pointer; user-select: none; white-space: nowrap; }
table.sortable th::after { content: " ↕"; font-size: .8em; opacity: .35; }
table.sortable th[data-dir="asc"]::after { content: " ↑"; opacity: 1; }
table.sortable th[data-dir="desc"]::after { content: " ↓"; opacity: 1; }
table.sortable td { font-size: .88rem; padding: .35rem .5rem; }
table.sortable td[data-num] { white-space: nowrap; }
table.sortable .name { font-weight: 600; }
tr.verified td { background: rgba(13, 148, 136, .14); }
tr.estimate td { background: rgba(100, 116, 139, .10); color: var(--muted); }
tr.estimate td.name a, tr.verified td.name a { color: var(--accent); }
.legend { font-size: .82rem; color: var(--muted); margin: .5rem 0 0; }
.legend .box { display: inline-block; width: .8em; height: .8em; border-radius: 3px;
border: 1px solid var(--line); vertical-align: -.05em; margin-right: .25em; }
.legend .box.v { background: rgba(13, 148, 136, .35); }
.legend .box.e { background: rgba(100, 116, 139, .25); }
/* miniatury w tabeli */
td.thumb { padding: .25rem; width: 128px; }
td.thumb img { width: 120px; height: 80px; object-fit: cover; border-radius: 6px;
display: block; }
td.thumb .placeholder { display: flex; width: 120px; height: 80px; border-radius: 6px;
align-items: center; justify-content: center; background: var(--chip);
color: var(--muted); font-weight: 700; letter-spacing: .05em;
text-decoration: none; }
/* galeria na karcie oferty */
.gallery { margin: 0 0 1.25rem; }
.gallery-main img { width: 100%; max-height: 24rem; object-fit: cover;
border-radius: 10px; display: block; background: var(--chip); }
.gallery-thumbs { display: flex; gap: .4rem; margin-top: .4rem; overflow-x: auto;
-webkit-overflow-scrolling: touch; padding-bottom: .2rem; }
.gallery-thumbs button { flex: 0 0 auto; padding: 0; border: 2px solid transparent;
border-radius: 6px; background: none; cursor: pointer; }
.gallery-thumbs button[aria-current] { border-color: var(--accent); }
.gallery-thumbs img { width: 5.5rem; height: 3.6rem; object-fit: cover;
border-radius: 4px; display: block; }
/* kafel regionu ze zdjęciem w tle */
.regions a.hero { background-size: cover; background-position: center;
border-color: transparent; color: #f8fafc; min-height: 6.5rem;
display: flex; flex-direction: column; justify-content: flex-end; }
.regions a.hero small { color: #e2e8f0; }
</style>
</head>
<body>
<nav><a href="../../start.html">← Start</a> · <a href="../../index.html">Wszystkie karty</a> · <a href="../../porownanie.html">Porównanie ofert</a> · <a href="../../../viz.html">Graf</a></nav>
<span class="chip">oferta</span>
<h1>Apartment Brandau (Kappl) — PLAN A</h1>
<p class="lead">Rodzinny dom z sześcioma apartamentami w Kappl — bierzemy cztery, ceny doliny zamiast cen Ischgl, PLAN A wariantu Ischgl.</p>
<figure class="gallery"><div class="gallery-main"><img src="../../img/apartment-brandau-kappl/01.jpg" alt="Apartment Brandau" loading="lazy"></div><div class="gallery-thumbs"><button type="button" aria-current="true"><img src="../../img/apartment-brandau-kappl/01.jpg" alt="Apartment Brandau — zdjęcie 1" loading="lazy"></button><button type="button"><img src="../../img/apartment-brandau-kappl/02.jpg" alt="Apartment Brandau — zdjęcie 2" loading="lazy"></button><button type="button"><img src="../../img/apartment-brandau-kappl/03.jpg" alt="Apartment Brandau — zdjęcie 3" loading="lazy"></button><button type="button"><img src="../../img/apartment-brandau-kappl/04.jpg" alt="Apartment Brandau — zdjęcie 4" loading="lazy"></button><button type="button"><img src="../../img/apartment-brandau-kappl/05.jpg" alt="Apartment Brandau — zdjęcie 5" loading="lazy"></button></div></figure>
<details class="meta" open><summary>Metadane (frontmatter)</summary><div class="table-wrap"><table><tbody><tr><th>type</th><td>oferta</td></tr><tr><th>title</th><td>Apartment Brandau (Kappl)</td></tr><tr><th>description</th><td>Rodzinny dom z sześcioma apartamentami w Kappl — bierzemy cztery, ceny doliny zamiast cen Ischgl, PLAN A wariantu Ischgl.</td></tr><tr><th>timestamp</th><td>2026-08-01T00:00:00Z</td></tr><tr><th>tags</th><td>nocleg, ischgl, kappl, plan-a</td></tr><tr><th>id</th><td>apartment-brandau-kappl</td></tr><tr><th>nazwa</th><td>Apartment Brandau</td></tr><tr><th>operator</th><td>prywatna rodzina</td></tr><tr><th>miejscowosc</th><td>Kappl (Paznaun)</td></tr><tr><th>odleglosc_od_wyciagu</th><td>skibus (przystanek blisko domu) → Kappl / Ischgl ~10 min</td></tr><tr><th>uklad_dla_grupy</th><td>6 apartamentów w jednym domu → 4 dla nas</td></tr><tr><th>cena_za_apartament_tydzien</th><td>~9001 300 € (szacunek, styczeń)</td></tr><tr><th>koszt_rodzina_2p2</th><td>~9001 300 €</td></tr><tr><th>koszt_rodzina_2p1</th><td>~7501 100 €</td></tr><tr><th>status_ceny</th><td>SZACUNEK — wycena mailowo</td></tr><tr><th>priorytet</th><td>PLAN A dla wariantu Ischgl</td></tr><tr><th>www</th><td><a href="http://www.kappl-apartment-brandau.at" target="_blank" rel="noopener" class="ext">http://www.kappl-apartment-brandau.at</a></td></tr><tr><th>ostatnia_aktualizacja</th><td>2026-08-01</td></tr></tbody></table></div></details>
<h2>W skrócie</h2>
<p>Rodzinnie prowadzony dom z <strong>6 komfortowymi apartamentami</strong> w Kappl — idealna konfiguracja pod 4 rodziny (bierzemy 4 jednostki, dom prawie na wyłączność). Silvretta Arena Ischgl/Samnaun ~10 min autem/skibusem, skibus po całej dolinie bezpłatny.</p>
<h2>Fakty</h2>
<ul><li>Apartamenty z pełnymi aneksami kuchennymi (piekarnik, zmywarka — poza typami 1 i 6), SAT-TV, WLAN, sejf.</li><li>W Kappl: 40 km rodzinnych tras + oświetlony 6-km tor saneczkowy.</li><li>Wyposażenie dla dzieci (krzesełka, łóżeczka).</li></ul>
<h2>Plusy / minusy</h2>
<p><strong>+</strong> układ 6 apartamentów = klimat "nasz dom"; ceny Kappl zamiast Ischgl; tor saneczkowy na wieczory; parking. <strong></strong> codzienna logistyka skibus/auto do Silvretta Areny; wieczorne życie tylko w Ischgl (10 min taksówką).</p>
<h2>Do zrobienia</h2>
<ul><li class="task"><input type="checkbox" disabled> Mail (szablon EN): 4 apartamenty, 1623.01.2027, konfiguracja 4+4+3+3, cena grupowa.</li><li class="task"><input type="checkbox" disabled> Alternatywy w Kappl, jeśli brak miejsc: Apartments Kappl (apartments.kappl.at — skibus 100 m, narciarnia z suszarką), Ferienwohnen Mattle (centrum, blisko trasy i skibusa), Apart Avenzio (3 min od gondoli Kappl).</li></ul>
<footer>Wygenerowane z bundle'a OKF przez <code>gen_pages.py</code> — nie edytuj
tych plików, edytuj <code>.md</code> i przegeneruj.</footer>
<script>
document.querySelectorAll('.gallery').forEach(function (gallery) {
var big = gallery.querySelector('.gallery-main img');
gallery.querySelectorAll('.gallery-thumbs button').forEach(function (button) {
button.addEventListener('click', function () {
var img = button.querySelector('img');
big.src = img.dataset.full || img.src;
gallery.querySelectorAll('.gallery-thumbs button').forEach(function (b) {
b.removeAttribute('aria-current');
});
button.setAttribute('aria-current', 'true');
});
});
});
</script>
</body>
</html>