<!DOCTYPE html>

<head>

<title>Japonia: Podróż Matki z Córką (Planer 14-dniowy)</title>

<!--

<!-- Visualization & Content Choices:

- Termin: Zakładki (Tabs) -> Szybkie porównanie opcji bez przewijania długich bloków tekstu. JS obsługuje zmianę widoczności.

- Trasa: Siatka kart (Grid/Cards) -> Estetyczne oddzielenie miast, ułatwia skanowanie wzrokiem.

- Budżet: Wykres słupkowy skumulowany (Chart.js) -> Idealny do pokazania struktury kosztów (nocleg, jedzenie, transport, atrakcje) i łatwego porównania wariantów (skromny, średni, premium). JS aktualizuje dane na żądanie. Wykres w restrykcyjnym kontenerze.

- Kultura: Proste bloki z ikonami (Unicode) -> Szybkie "do's and don'ts".

-->

-->

tailwind.config = {

theme: {

extend: {

colors: {

'jp-bg': '#F9F8F6',

'jp-text': '#2C3539',

'jp-sakura': '#FFB7C5',

'jp-sakura-dark': '#E892A3',

'jp-matcha': '#8A9A5B',

'jp-indigo': '#1F2E4D',

'jp-wood': '#D2B48C'

fontFamily: {

sans: ['Segoe UI', 'Roboto', 'Helvetica Neue', 'Arial', 'sans-serif'],

}

</script>

<style>

body {

background-color: #F9F8F6;

color: #2C3539;

}

/* Restrykcyjny kontener dla wykresu - ZGODNIE Z WYMOGAMI */

.chart-container {

position: relative;

width: 100%;

max-width: 800px; /* Maksymalna szerokość dla czytelności */

margin-left: auto;

margin-right: auto;

height: 400px; /* Bazowa wysokość */

max-height: 50vh; /* Zapobieganie overflow w pionie */

}

@media (max-width: 640px) {

.chart-container {

height: 300px;

}

.tab-btn.active {

border-bottom: 3px solid #E892A3;

color: #1F2E4D;

font-weight: 700;

}

.tab-content {

display: none;

animation: fadeIn 0.3s ease-in-out;

}

.tab-content.active {

display: block;

}

@keyframes fadeIn {

from { opacity: 0; transform: translateY(10px); }

to { opacity: 1; transform: translateY(0); }

}

.card-hover {

transition: transform 0.2s, box-shadow 0.2s;

}

.card-hover:hover {

transform: translateY(-5px);

box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);

}

</style>

</head>

<span class="font-bold text-jp-indigo text-lg">Wyprawa do Japonii</span>

</div>

<a href="#kiedy" class="hover:text-jp-sakura-dark transition">Kiedy jechać?</a>

<a href="#trasa" class="hover:text-jp-sakura-dark transition">Trasa & Miejsca</a>

<a href="#transport" class="hover:text-jp-sakura-dark transition">Transport</a>

<a href="#budzet" class="hover:text-jp-sakura-dark transition">Koszty</a>

<a href="#kultura" class="hover:text-jp-sakura-dark transition">Zasady & Kultura</a>

</div>

☰

</button>

</div>

<a href="#kiedy" class="block px-3 py-2 rounded-md text-base font-medium hover:bg-gray-50">Kiedy jechać?</a>

<a href="#trasa" class="block px-3 py-2 rounded-md text-base font-medium hover:bg-gray-50">Trasa</a>

<a href="#budzet" class="block px-3 py-2 rounded-md text-base font-medium hover:bg-gray-50">Koszty</a>

<a href="#kultura" class="block px-3 py-2 rounded-md text-base font-medium hover:bg-gray-50">Kultura</a>

</div>

</nav>

<h1 class="text-4xl md:text-5xl font-bold text-jp-indigo mb-6 tracking-tight">Japonia: Niezapomniane 14 dni z nastolatką</h1>

Kompleksowy poradnik, plan i analiza kosztów dla matki z 15-letnią córką.

Japonia to kraj kontrastów – od neonowych ulic Tokio, idealnych dla młodzieży, po wyciszające świątynie Kioto. Zobacz jak to zaplanować logistycznie.

</p>

</div>

</header>

<h2 class="text-3xl font-bold text-jp-indigo mb-4 border-l-4 border-jp-sakura-dark pl-4">Kiedy jechać? (Dopasowanie do szkoły)</h2>

W tej sekcji analizujemy trzy główne okna czasowe wynikające z kalendarza szkolnego. Ze względu na obowiązki Twojej córki, wyjazd poza przerwami ustawowymi wymagałby zwolnień ze szkoły, co w liceum/starszych klasach może być uciążliwe. Poznaj plusy i minusy każdej opcji.

</p>

</div>

<button class="tab-btn active px-4 py-3 text-sm md:text-base font-medium text-gray-500 whitespace-nowrap" data-target="tab-lato">Wakacje (Lipiec / Sierpień) ☀️</button>

<button class="tab-btn px-4 py-3 text-sm md:text-base font-medium text-gray-500 whitespace-nowrap" data-target="tab-zima">Ferie Zimowe (Styczeń / Luty) ❄️</button>

<button class="tab-btn px-4 py-3 text-sm md:text-base font-medium text-gray-500 whitespace-nowrap" data-target="tab-wiosna">Okolice Wielkanocy (Marzec / Kwiecień) 🌸</button>

</div>

<h3 class="text-xl font-bold mb-4 text-jp-indigo">Długie Wakacje (Lipiec - Sierpień)</h3>

<h4 class="font-bold text-green-800 mb-2">➕ Plusy</h4>

<li>Brak konfliktu ze szkołą (pełne 2 miesiące do wyboru).</li>

<li>Sezon na letnie festiwale (Matsuri) i pokazy sztucznych ogni (Hanabi) - córka będzie zachwycona!</li>

<li>Długie dni i otwarte góry (np. możliwość wejścia na Fuji).</li>

<li>Mnóstwo letnich atrakcji w parkach rozrywki (np. Universal Studios).</li>

</ul>

</div>

<h4 class="font-bold text-red-800 mb-2">➖ Minusy</h4>

<li><strong>Upał i ogromna wilgotność</strong> (powyżej 30°C i 80% wilgotności). Może to być bardzo męczące przy intensywnym zwiedzaniu.</li>

<li>Sezon tajfunów (szczególnie pod koniec wakacji), co może zaburzyć plany lotów lub pociągów.</li>

<li>Bardzo wysokie ceny biletów lotniczych w sezonie urlopowym.</li>

</ul>

</div>

<h3 class="text-xl font-bold mb-4 text-jp-indigo">Ferie Zimowe (Styczeń - Luty)</h3>

<h4 class="font-bold text-green-800 mb-2">➕ Plusy</h4>

<li>Zazwyczaj najtańsze bilety lotnicze i hotele.</li>

<li>Mniejszy tłum turystów (poza okresem Chińskiego Nowego Roku).</li>

<li>Wspaniałe zimowe iluminacje w miastach i możliwość zobaczenia śnieżnych makaków kąpiących się w gorących źródłach (Jigokudani).</li>

<li>Zimowe powietrze zapewnia najlepszą widoczność góry Fuji.</li>

</ul>

</div>

<h4 class="font-bold text-red-800 mb-2">➖ Minusy</h4>

<li>Krótkie dni (szybko robi się ciemno, ok. 17:00).</li>

<li>Jest zimno, zwłaszcza w tradycyjnych domach/świątyniach (często brak centralnego ogrzewania).</li>

<li>Przyroda jest uśpiona (drzewa bez liści, brak słynnych ogrodów w pełnej krasie).</li>

</ul>

</div>

<h3 class="text-xl font-bold mb-4 text-jp-indigo">Wiosna / Wielkanoc (Przełom Marca i Kwietnia)</h3>

<h4 class="font-bold text-green-800 mb-2">➕ Plusy</h4>

<li><strong>Sakura (Kwitnące wiśnie)</strong> - najpiękniejszy wizualnie czas w Japonii. Magiczne widoki.</li>

<li>Idealna temperatura do zwiedzania (15-20°C).</li>

<li>Wspaniała wiosenna energia, świetne jedzenie sezonowe.</li>

</ul>

</div>

<h4 class="font-bold text-red-800 mb-2">➖ Minusy</h4>

<li><strong>Wymaga zwolnienia ze szkoły.</strong> Przerwa wielkanocna w Polsce to zazwyczaj tylko ok. 6 dni, więc na 2 tygodnie trzeba urwać co najmniej tydzień szkoły.</li>

<li>Najdroższy i najbardziej oblegany sezon w roku. Hotele trzeba rezerwować z półrocznym wyprzedzeniem.</li>

<li>Gigantyczne tłumy w popularnych miejscach (np. Kioto).</li>

</ul>

</div>

<strong>Rekomendacja:</strong> Jeśli córka dobrze się uczy i może nadrobić materiał, **wiosna (połączenie z Wielkanocą)** jest magiczna. Jeśli szkoła to priorytet – **początek lipca** jest najlepszym kompromisem przed nadejściem najgorszych upałów.

</div>

</section>

<h2 class="text-3xl font-bold text-jp-indigo mb-4 border-l-4 border-jp-sakura-dark pl-4">Złota Trasa (14 dni) - Atrakcje dla Ciebie i 15-latki</h2>

Poniżej znajduje się optymalny podział czasu. Zaprojektowany tak, by zbalansować zwiedzanie świątyń (kultura) z nowoczesnymi atrakcjami, popkulturą, mangą i zakupami, które z pewnością zachwycą nastolatkę.

</p>

</div>

</div>

<h3 class="text-xl font-bold mb-1">Tokio</h3>

<p class="text-sm text-gray-600 mb-4">Metropolia kontrastów. Od ultranowoczesnych wieżowców po ukryte świątynie i szalone dzielnice popkulturowe.</p>

<span class="font-bold text-indigo-800">Córka pokocha:</span><br>

🛍️ <strong>Harajuku</strong> (szalona moda uliczna, naleśniki),<br>

🕹️ <strong>Akihabara</strong> (anime, gry, maid cafe),<br>

✨ <strong>teamLab Planets</strong> (immersyjna wystawa cyfrowa, super zdjęcia na Instagram).

</div>

</div>

<h3 class="text-xl font-bold mb-1">Kioto</h3>

<p class="text-sm text-gray-600 mb-4">Tradycyjna stolica, dzielnice gejsz, tysiące świątyń, złoty pawilon i słynny las bambusowy.</p>

<span class="font-bold text-red-800">Córka pokocha:</span><br>

👘 <strong>Wypożyczenie Kimona</strong> i spacer po dzielnicy Gion,<br>

🦊 <strong>Fushimi Inari</strong> (tysiące pomarańczowych bram torii),<br>

🍵 Degustacja lodów i słodyczy matcha.

</div>

</div>

<h3 class="text-xl font-bold mb-1">Osaka</h3>

<p class="text-sm text-gray-600 mb-4">Stolica japońskiego street foodu (Takoyaki!). Bardziej wyluzowana, głośna i neonowa atmosfera niż w Tokio.</p>

<span class="font-bold text-yellow-800">Córka pokocha:</span><br>

🎢 <strong>Universal Studios Japan</strong> (szczególnie Super Nintendo World i strefa Harry'ego Pottera - hit!),<br>

🦀 <strong>Dotonbori</strong> w nocy z neonami i jedzeniem.

</div>

</div>

<h3 class="text-xl font-bold mb-1">Nara / Hiroszima</h3>

<p class="text-sm text-gray-600 mb-4">Nara to historyczne miasto znane ze swobodnie chodzących jeleni. Hiroszima oferuje lekcję historii.</p>

<span class="font-bold text-green-800">Córka pokocha:</span><br>

🦌 <strong>Karmienie jelonków w Narze</strong> (specjalnymi krakersami - uwaga, bywają natarczywe, co bywa zabawne),<br>

⛩️ Pływająca brama w Miyajima.

</div>

</section>

<h2 class="text-3xl font-bold text-jp-indigo mb-4 border-l-4 border-jp-sakura-dark pl-4">Transport i Logistyka</h2>

Japonia posiada najlepszy na świecie system transportu publicznego, ale może on na początku przytłaczać. Oto najważniejsze elementy, o których musicie wiedzieć.

</p>

</div>

<div>

<h4 class="font-bold text-lg">Pociągi Bullet Train (Shinkansen)</h4>

<p class="text-sm text-gray-600 mt-1">Połączą Was między Tokio, Kioto i Osaką. Jadą ok. 300 km/h. <br><strong>Wskazówka:</strong> JR Pass (bilet okresowy) w 2023 r. znacznie podrożał. Przy trasie Tokio->Kioto->Osaka->Tokio taniej wyjdzie kupić bilety na pojedyncze przejazdy w automatach lub aplikacji SmartEX, niż kupować pass na 14 dni.</p>

</div>

<div>

<h4 class="font-bold text-lg">Karty IC (Suica / Pasmo)</h4>

<p class="text-sm text-gray-600 mt-1">Niezbędne do płacenia za metro i autobusy lokalne, a także w sklepach (konbini). Najlepiej dodać wirtualną kartę Suica do <strong>Apple Wallet</strong> w iPhonie przed wyjazdem i doładowywać ją kartą Revolut. To super proste rozwiązanie dla nastolatki.</p>

</div>

<div>

<h4 class="font-bold text-lg">Wysyłka bagażu (Takkyubin)</h4>

<p class="text-sm text-gray-600 mt-1">Podróżowanie shinkansenem z wielkimi walizkami jest uciążliwe (często trzeba rezerwować specjalne miejsca). Japończycy wysyłają bagaże kurierem np. z hotelu w Tokio do hotelu w Kioto za ok. 60-80 PLN za sztukę. Podróżujecie tylko z plecaczkiem!</p>

</div>

<h4 class="font-bold text-blue-900 mb-2">Aplikacje MUST-HAVE</h4>

<li>✅ <strong>Google Maps</strong> (działa perfekcyjnie w miastach, podaje perony i ceny).</li>

<li>✅ <strong>Google Translate</strong> (wraz z opcją tłumaczenia z obrazu aparatem).</li>

<li>✅ <strong>Navitime / Japan Transit Planner</strong> (jeśli macie JR Pass i szukacie pociągów).</li>

</ul>

</div>

</section>

<h2 class="text-3xl font-bold text-jp-indigo mb-4 border-l-4 border-jp-sakura-dark pl-4">Analiza Kosztów (2 osoby / 14 dni)</h2>

W tej sekcji możesz przeanalizować koszty wyjazdu dla Ciebie i córki, w zależności od preferowanego standardu. Z uwagi na wahania, <strong>ceny nie zawierają biletów lotniczych</strong> (loty to zwykle od 3500 PLN do 6000 PLN za osobę w obie strony). Koszty podane na miejscu w Japonii na 2 osoby łącznie. Wybierz wariant z menu poniżej, aby zaktualizować wykres.

</p>

<label for="budget-tier" class="font-bold text-jp-indigo">Wybierz standard wyjazdu:</label>

<option value="skromny">Oszczędny / Skromny (Hostele, tanie jedzenie)</option>

<option value="sredni" selected>Średni (Hotele 3*, zbilansowane jedzenie, atrakcje) - Polecany</option>

<option value="premium">Premium (Hotele 4/5*, lepsze restauracje, wygoda)</option>

</select>

</div>

</div>

</div>

</section>

<h2 class="text-3xl font-bold text-jp-indigo mb-4 border-l-4 border-jp-sakura-dark pl-4">Zasady, Kultura i na co uważać</h2>

Japonia jest niezwykle bezpieczna (idealna dla matki z córką), jednak społeczeństwo opiera się na wielu niepisanych zasadach. Poniżej najważniejsze z nich.

</p>

</div>

<h4 class="font-bold mb-2">Cisza w pociągach</h4>

<p class="text-sm text-gray-600">W metrze i shinkansenach nie prowadzi się głośnych rozmów ani nie rozmawia przez telefon. Telefony powinny być wyciszone ("manner mode").</p>

</div>

<h4 class="font-bold mb-2">Brak napiwków</h4>

<p class="text-sm text-gray-600">W Japonii nie daje się napiwków w restauracjach, taksówkach ani hotelach. Próba zostawienia pieniędzy wywoła zamieszanie – kelner wybiegnie za Tobą by Ci je oddać.</p>

</div>

<h4 class="font-bold mb-2">Mało koszy na śmieci</h4>

<p class="text-sm text-gray-600">Na ulicach nie ma koszy na śmieci. Należy nosić małą torebkę/siatkę przy sobie i wyrzucać śmieci w hotelu lub przy sklepach konbini.</p>

</div>

<h4 class="font-bold mb-2">Zdejmowanie butów</h4>

<p class="text-sm text-gray-600">Przy wejściu do świątyń, tradycyjnych hoteli (Ryokan), a nawet przymierzalni w sklepach należy zdjąć buty. Warto nosić czyste skarpetki bez dziur!</p>

</div>

<h4 class="font-bold mb-2">Kolejki do wszystkiego</h4>

<p class="text-sm text-gray-600">Japończycy uwielbiają kolejki i ściśle ich przestrzegają. Czeka się w wyznaczonych liniach na peronach, do restauracji czy do kasy w sklepie. Nie wpychamy się.</p>

</div>

<h4 class="font-bold mb-2">Tatuaże w Onsenach</h4>

<p class="text-sm text-gray-600">Jeśli wy lub córka macie widoczne tatuaże, wejście do publicznych łaźni (Onsen) jest zazwyczaj zabronione (kojarzą się z mafią Yakuza). Trzeba szukać obiektów "tattoo-friendly" lub rezerwować prywatne kąpiele w hotelu.</p>

</div>

</section>

</main>

<p>Przewodnik utworzony dla Ciebie i Twojej córki. Bezpiecznej i niesamowitej podróży!</p>

</footer>

document.addEventListener('DOMContentLoaded', () => {

// 1. Obsługa nawigacji mobilnej

const mobileBtn = document.getElementById('mobile-menu-btn');

const mobileMenu = document.getElementById('mobile-menu');

const mobileLinks = mobileMenu.querySelectorAll('a');

mobileBtn.addEventListener('click', () => {

mobileMenu.classList.toggle('hidden');

});

mobileLinks.forEach(link => {

link.addEventListener('click', () => {

mobileMenu.classList.add('hidden');

});

// 2. Obsługa zakładek (Tabs) Kiedy jechać?

const tabBtns = document.querySelectorAll('.tab-btn');

const tabContents = document.querySelectorAll('.tab-content');

tabBtns.forEach(btn => {

btn.addEventListener('click', () => {

// Usuń aktywne klasy

tabBtns.forEach(b => b.classList.remove('active'));

tabContents.forEach(c => c.classList.remove('active'));

// Dodaj aktywną klasę do klikniętego

btn.classList.add('active');

const targetId = btn.getAttribute('data-target');

document.getElementById(targetId).classList.add('active');

});

// 3. Obsługa Wykresu Budżetowego (Chart.js)

const ctx = document.getElementById('budgetChart').getContext('2d');

// Dane w PLN dla 2 OSÓB łącznie (Matka + Córka) na 14 dni

const budgetData = {

skromny: {

label: 'Skromny / Oszczędny',

total: '~ 8 500 PLN (za 2 os.)',

breakdown: [3500, 2000, 2200, 800], // Nocleg, Jedzenie, Transport (w tym Shinkansen), Atrakcje

desc: 'Spacie w tańszych hotelach biznesowych (np. APA Hotel) lub prywatnych pokojach w hostelach. Śniadania jecie z marketów Konbini (Family Mart, 7-Eleven), lunche to tani i pyszny ramen/udon, a kolacje w sieciówkach. Korzystacie z transportu publicznego, omijacie najdroższe atrakcje.'

sredni: {

label: 'Średni (Komfortowy)',

total: '~ 14 500 PLN (za 2 os.)',

breakdown: [6000, 4000, 2500, 2000],

desc: 'Złoty środek. Spacie w wygodnych 3* hotelach blisko stacji. Raz śpicie w tradycyjnym ryokanie z gorącymi źródłami. Codziennie jecie w dobrych restauracjach, w tym sushi z taśmociągu czy yakiniku. Odwiedzacie płatne świątynie i większe atrakcje jak Universal Studios dla córki.'

premium: {

label: 'Premium / Luksusowy',

total: '~ 27 000+ PLN (za 2 os.)',

breakdown: [12000, 8000, 4000, 3000],

desc: 'Wysoki komfort. Hotele 4/5 gwiazdkowe z pięknymi widokami. Droższe posiłki, wołowina wagyu, wykwintne kolacje kaiseki. Często korzystacie z taksówek z bagażami, kupujecie bilety Shinkansen do wyższej klasy (Green Car). Bogaty program zwiedzania.'

}

};

// Konfiguracja wykresu Chart.js

let budgetChart = new Chart(ctx, {

type: 'bar',

data: {

labels: ['Noclegi', 'Wyżywienie', 'Transport (lokalny + międzymiastowy)', 'Atrakcje & Pamiątki'],

datasets: [{

label: 'Koszty w PLN (2 osoby, 14 dni)',

data: budgetData['sredni'].breakdown,

backgroundColor: [

'rgba(31, 46, 77, 0.7)', // Noclegi - Indigo

'rgba(232, 146, 163, 0.7)', // Jedzenie - Sakura

'rgba(138, 154, 91, 0.7)', // Transport - Matcha

'rgba(210, 180, 140, 0.7)' // Atrakcje - Wood

borderColor: [

'rgba(31, 46, 77, 1)',

'rgba(232, 146, 163, 1)',

'rgba(138, 154, 91, 1)',

'rgba(210, 180, 140, 1)'

borderWidth: 1,

borderRadius: 4

}]

options: {

responsive: true,

maintainAspectRatio: false, // KLUCZOWE dla działania customowego CSS kontenera

plugins: {

legend: { display: false },

tooltip: {

callbacks: {

label: function(context) {

let label = context.dataset.label || '';

if (label) {

label += ': ';

}

if (context.parsed.y !== null) {

label += new Intl.NumberFormat('pl-PL', { style: 'currency', currency: 'PLN', maximumSignificantDigits: 3 }).format(context.parsed.y);

}

return label;

}

scales: {

y: {

beginAtZero: true,

title: { display: true, text: 'Kwota (PLN)' },

ticks: {

callback: function(value) {

return value + ' zł';

}

x: {

ticks: {

// Zawijanie długich etykiet

callback: function(value, index, values) {

const label = this.getLabelForValue(value);

if (typeof label === 'string' && label.length > 16) {

let words = label.split(' ');

let lines = [];

let line = '';

words.forEach(word => {

if((line + word).length > 16) {

lines.push(line.trim());

line = word + ' ';

} else {

line += word + ' ';

}

});

lines.push(line.trim());

return lines;

} else {

return label;

}

});

// Funkcja aktualizująca tekst i wykres

const updateChartData = (tier) => {

const dataObj = budgetData[tier];

// Aktualizacja wykresu

budgetChart.data.datasets[0].data = dataObj.breakdown;

budgetChart.update();

// Aktualizacja tekstu

const descContainer = document.getElementById('budget-description');

descContainer.innerHTML = `

<h4 class="font-bold text-lg text-jp-indigo mb-1">Wybrany wariant: ${dataObj.label}</h4>

<p class="text-2xl font-bold text-jp-sakura-dark mb-2">Szacowany koszt na miejscu: <span class="text-gray-800">${dataObj.total}</span></p>

<p class="text-sm text-gray-600">${dataObj.desc}</p>

<p class="text-xs text-gray-400 mt-3">*Loty nie wchodzą w skład zestawienia. Średni koszt biletu to 3500-6000 PLN / osobę. Ceny w Japonii mogły ulec zmianie w zależności od kursu jena (JPY).</p>

};

// Inicjalne załadowanie tekstu dla wariantu "średni"

updateChartData('sredni');

// Nasłuchiwanie zmian w select

document.getElementById('budget-tier').addEventListener('change', (e) => {

updateChartData(e.target.value);

});

</script>

</body>

</html>