japan2026

Japan 2026 - Itinerary

53-day trip to Japan (Sep 18 - Nov 9, 2026)

Live Version

https://tonderm-miharu.github.io/japan2026/itinerar.html

Project Contents

File	Description
itinerar.html	Interactive HTML dashboard
japan-travel-guide.html	Magazine-style travel guide (opens via PDF button, then Print → Save as PDF)
KONSOLIDOVANY_ITINERAR.md	Detailed itinerary in Markdown format
ADJUSTED_MASTER_PLAN.md	Enhanced “second brain” document with logistics, prep steps, laundry schedule, risks
HACHIJOJIMA_AOGASHIMA_PLAN.md	Abandoned Oct 26-29 alternative (Hachijojima + Aogashima) – Izu plan chosen instead; kept for reference
ROZVRH.xlsx	Schedule and hotels spreadsheet

Dashboard Features

Header

• Logo - “JAPAN’26” in Oxanium digital font with red accent
• Progress Strip - 53 day blocks with phase labels (OSAKA, KYOTO, KYUSHU, etc.)
• Timezone - Tokyo/Prague dual clock display (DSEG7 + Electrolize fonts)
• Countdown - 7-segment digital display showing days until/since departure

Navigation - Desktop

• Sidebar - Timezone display + Calendar (sticky)
• Filters - HO / Car / Bike / Onsen / Meet (icons with tooltips, blue glow when active)
• Views - Tasks, Hotels, Contacts, Transport, Weather, PDF, Links, Summary (SVG icons)
• Search - real-time filtering, works with filters

Navigation - Mobile

• Header - Japan’26

  Timezone

  Countdown

  Search field

• Quick Actions - Tasks, Hotels, Links buttons (styled like filters)
• Calendar - red glowing icon
• Hamburger - News, Contacts, Transport, Weather, PDF, Summary (red highlight)

PDF Export

• Click PDF button (desktop view-row or mobile hamburger menu)
• Opens japan-travel-guide.html in new tab
• Professional magazine-style travel guide (complete offline backup):
  • Toner-friendly cover (white background, outline frames)
  • Feature articles: Onsen, Shimanami Kaido, Sakamoto Ryoma, Aogashima
  • All 7 regional chapters: Osaka, Kyoto, Lake Biwa, Shimanami, Kyushu, Tokyo, Okinawa
  • Day cards with dates, hotels, timelines, notes
  • Culture boxes, hotel spotlights
  • Transport reference: flights, car rentals, ferries
  • Contacts table with confirmation status
  • Useful links table (Toho Air, Kyushu Coupons, Shinkansen QR, Smart-EX, JMA Weather)
• Print → Save as PDF from the travel guide page

Countdown

• Vintage 7-segment digital display (DSEG7 font)
• Before trip: yellow glow, negative number (-025)
• During trip: green glow, positive number (+012)
• Departure day (Sep 18): white, value 0
• Mobile: no glow effect for cleaner look

Progress Strip

• Day blocks showing trip progress by phase
• Color-coded phases (Osaka=orange, Kyoto=purple, Kyushu=red, etc.)
• Click on day block scrolls to that day’s card
• Current day highlighted with blue glow

Calendar

• Interactive calendar Sep-Nov 2026
• Color coding: green (weekday), gray (weekend), red (HO)
• HO display: 8h = 50% bar, 5-7h = 40% bar, ≤4h = corner triangle
• Current day highlighted with white border and glow
• Click on day scrolls and expands card (with sticky header offset)
• Filters applied to calendar (dimming non-matching days)
• Auto-scroll to current day on page load (during trip)

Day Cards

• Color-coded: green (weekday), gray (weekend), with HO indicator
• Weather icon with temperature
• Expandable details with timeline and POI
• Google Maps links for 231 POI (opens app directly on mobile)
• Tag icons (HO, car, bike, onsen, meet, flight, fest) - enlarged 22px, bright gray (#d1d5db)
• Automatic daily tasks (luggage, car, check-in)
• Mobile: compact header with date box aligned to title top edge

Modals (dark background, SVG icons in headers)

• Tasks - grouped by priority (High/Medium), chronologically sorted, checkbox aligned to top of text
• Hotels - wide layout (700px desktop), single-row per hotel with date, name, badges, price; mobile: 2-row compact layout; “On-site” badges show JPY amount to pay
• Contacts - list of people to meet with dates
• Transport - sections: Flights, Bus, Car Rentals, Ferry (each with SVG icon)
• Summary - red-themed modal with 53-day trip timeline showing 7 regions and key places (Osaka, Kyoto, Lake Biwa, Shimanami, Kyushu, Tokyo+Izu, Okinawa)
• Links - quick access to useful external sites (J-net Rentacar, Kyushu Coupons, Shinkansen QR, Smart-EX App, JMA Weather)

Weather

• Static averages by region and month
• Optionally live data from OpenWeatherMap API

Trip Phases

#	Region	Period	Days
1	Osaka I	Sep 19-26	8
2	Kyoto	Sep 27 - Oct 1	5
3	Biwa Cycling	Oct 2-3	2
4	Shimanami Kaido	Oct 6-7	2
5	Kyushu	Oct 8-22	15
6	Tokyo + Izu	Oct 23 - Nov 1	10
7	Okinawa	Nov 2-8	7

To Resolve Before Trip

High Priority

• Ferry Yawatahama-Beppu 13:00 (Oct 8) – buy at port
• Ferry Kumamoto-Shimabara Ocean Arrow 09:25 (Oct 16) – buy at port
• teamLab Biovortex ✅ BOOKED (Oct 1, 10:30-11:00 entry)
• Shimanami multi-day bike rental (Oct 6-7)
• Takachiho Yokagura reservation (Oct 14)
• Car rental Oct 26-29 ✅ BOOKED J-net Mishima 12:00↔12:00 (incl. ETC card)
• Accommodation Oct 26-28 ✅ BOOKED (Cetus Royal / Kuretake Inn Premium / Isawa View)
• Cancel Hachijojima booking (Noboryuso) ✅ DONE – Izu plan chosen
• J-net Mishima online pre check-in (password in mail, flight ticket folder)
• Buy shinkansen tickets Tokyo→Mishima (Oct 26) + Mishima 11:58→Shinagawa (Oct 29)
• Hotel Tokyo Oct 29 ✅ BOOKED Anshin Oyado Tokyo Man Shimbashi (46 EUR, Booking, paid, cancel by Oct 27)
• Express bus Yufuin-Kumamoto ✅ BOOKED (KOSOKUBUS #1020648778, 13:50→18:03)
• Send luggage Fukuyama→Matsuyama (Oct 6)
• Send luggage Kumamoto→Nagasaki (Oct 16)

Medium

• Keigo - ✅ CONFIRMED Sep 26
• Riho - ✅ CONFIRMED Oct 17 guide
• Takashi - ✅ CONFIRMED Sep 29
• Wahei - ✅ CONFIRMED Oct 25 lunch
• Kousuke - ✅ CONFIRMED Oct 29, 14:30 Shimbashi Station
• Ryuki - contact around Oct 10
• Ippei - min. 1 week before Oct 23

Adjusted Master Plan

Enhanced planning document (ADJUSTED_MASTER_PLAN.md) includes:

• Laundry schedule - optimal days every 4-6 days
• Luggage shipping prep - day-before checklists for Yamato TA-Q-BIN
• Light travel essentials - what to pack when luggage is shipped ahead
• Ticket buying strategy - when to buy to avoid rush hour queues
• Tight schedule analysis - risk assessment and mitigation for critical days
• Pre-departure tasks - roaming, shinkansen tickets, contacts
• Day-by-day notes - practical tips, alternatives, weather backups
• Carrier info - ANA/JAL for domestic flights, hotel check-in codes

Technical Notes

• Single-page HTML with inline CSS and JS
• Fonts: Inter, DSEG7, Electrolize, Oxanium, Orbitron
• Data stored directly in JS (DAYS, TASKS, HOTEL_INFO, POI_URLS, DAY_NOTES, etc.)
• POI_URLS: 231 verified Google Maps links
• DAY_NOTES: Complete notes for all 53 days
• Task state in localStorage
• Responsive design (mobile / desktop)
• Works offline (PWA with Service Worker, network-first strategy)
• Installable as app on mobile (Add to Home Screen)

PWA Icon

• Design: “JAPAN” bold white text with white underline
• Background: red (#ef4444) - Japanese flag inspired
• Files: icon.svg (vector), icon-180/192/512.png (raster)
• iOS: apple-touch-icon for home screen

Design System

Accessibility

• High contrast colors optimized for readability
• text-dim: #b8b8b8, text-muted: #8a8a8a
• Minimum font size 1rem on mobile
• POI links with pill-style background for visibility

Icons

• Monochrome SVG design: #d1d5db (base) → #e5e7eb (hover/active)
• Tag icons: 22px in 36×30px boxes, bright and readable
• Car icon: side profile (smooth sedan silhouette)
• Bike icon: classic bicycle with diamond frame
• HO icon: bold text “HO” matching filter button style
• Modal headers: unified SVG icons (no emojis) - Tasks, Hotels, Contacts, Transport, Summary
• Transport sections: Bus, Flights, Car Rentals, Ferry with matching SVG icons
• Consistent across filters, tags, modals, and inline text
• Functional colors:
  • Flight icon (orange) - travel indicator
  • Festival icon (pink) - special events
  • Calendar icon (red) - permanent, no glow
  • Summary button (red gradient) - highlighted call-to-action
  • Timeline dots - category indicators

Filter Buttons

• Desktop: icons with tooltips (HO = Home Office, Car = Rental Car, etc.)
• Inactive: gray border, gray icons
• Active: light blue glow effect (#60a5fa)
• Calendar: red icon permanent, gray border

Hotel Badges

• Enlarged for readability (0.85rem in cards, 0.7rem in modal)
• Color-coded: Paid (green), On-site (orange), Breakfast (blue), Half-board (purple)
• Provider badges: Trip, Agoda, Booking, JAPANiCAN, IKYU, Tripla.ai, Revolut, Hotel Web
• On-site badges include JPY amount: “On-site ¥10,700”
• Cancel deadline badges with warning icon

Day Notes

Each day card includes contextual notes:

• Summary banner (orange highlight) with key reminders
• Warning icons for deadlines, reservations, tight schedules
• Laundry reminders
• Luggage shipping steps
• Fuel reminders
• Contact reminders
• Local food tips
• Weather backup plans

All emoji in notes automatically converted to monochrome SVG icons.