narty-2027/pages/sfl/oferty/apart-ideal-serfaus.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

152 lines
10 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>Apart Ideal (Serfaus) — 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>Apart Ideal (Serfaus) — PLAN B</h1>
<p class="lead">Sześć apartamentów z oceną 4.8/5, 50 m od podziemnego metra w Serfaus — pełne doświadczenie regionu za dopłatą, PLAN B wariantu SFL.</p>
<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>Apart Ideal (Serfaus)</td></tr><tr><th>description</th><td>Sześć apartamentów z oceną 4.8/5, 50 m od podziemnego metra w Serfaus — pełne doświadczenie regionu za dopłatą, PLAN B wariantu SFL.</td></tr><tr><th>timestamp</th><td>2026-08-01T00:00:00Z</td></tr><tr><th>tags</th><td>nocleg, sfl, serfaus, plan-b</td></tr><tr><th>id</th><td>apart-ideal-serfaus</td></tr><tr><th>nazwa</th><td>Apart Ideal</td></tr><tr><th>operator</th><td>Daniel &amp; Nina (rodzina Purtscher)</td></tr><tr><th>miejscowosc</th><td>Serfaus (obrzeża)</td></tr><tr><th>odleglosc_od_wyciagu</th><td>50 m do stacji metra 'Tube' → &lt;10 min do kolejki</td></tr><tr><th>ocena</th><td>4.8/5 (13 opinii, portal regionu)</td></tr><tr><th>uklad_dla_grupy</th><td>6 apartamentów w domu → 4 dla nas</td></tr><tr><th>cena_za_apartament_tydzien</th><td>~1 3001 800 € (szacunek; Serfaus = najdroższa wieś)</td></tr><tr><th>koszt_rodzina_2p2</th><td>~1 3001 800 €</td></tr><tr><th>koszt_rodzina_2p1</th><td>~1 1001 500 €</td></tr><tr><th>status_ceny</th><td>SZACUNEK — wycena przez portal regionu</td></tr><tr><th>priorytet</th><td>PLAN B dla wariantu SFL</td></tr><tr><th>www</th><td><a href="https://serfaus-fiss-ladis.at/en/serfaus/apartment/apart-ideal_dr91356" target="_blank" rel="noopener" class="ext">https://serfaus-fiss-ladis.at/en/serfaus/apartment/apart-ideal_dr91356</a></td></tr><tr><th>ostatnia_aktualizacja</th><td>2026-08-01</td></tr></tbody></table></div></details>
<h2>W skrócie</h2>
<p>Dom z <strong>6 jasnymi apartamentami</strong> na spokojnych obrzeżach Serfaus, ocena 4.8/5. Przystanek słynnego podziemnego metra ("Tube") 50 m od domu — dojazd do kolejki w &lt;10 min bez auta i bez skibusa. Wariant "pełne doświadczenie Serfaus" za dopłatą względem Ladis/Fiss.</p>
<h2>Fakty</h2>
<ul><li>6 apartamentów, 1 400 m n.p.m.; własny trawnik, parking przed domem, darmowe WLAN i serwis pieczywa rano.</li><li>Serfaus = wioska bez ruchu samochodowego (metro!), pełna infrastruktura: restauracje, sklepy, szkółki, wieczorne atrakcje dla dzieci.</li></ul>
<h2>Plusy / minusy</h2>
<p><strong>+</strong> 4 z 6 apartamentów = prawie cały dom; metro zamiast skibusa (frajda sama w sobie); centrum rodzinnego życia regionu. <strong></strong> Serfaus to najdroższa z trzech wsi (nocleg ~+2030% vs Ladis); w wysokim sezonie tłoczno (w naszym niskim terminie — OK).</p>
<h2>Do zrobienia</h2>
<ul><li class="task"><input type="checkbox" disabled> Enquiry przez portal regionu: 4 apartamenty, 1623.01.2027.</li><li class="task"><input type="checkbox" disabled> Porównać z ofertą z Ladis (Haus Central) po otrzymaniu obu cen — decyzja grupy: dopłacać do Serfaus czy nie.</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>
</body>
</html>