A mobile-first travel planning web app with Japanese Minimal Light theme design.
- 📅 行程 (Itinerary) - Day-by-day itinerary with timeline view and hero image cards
- 📆 橫向日曆 - Horizontal calendar date selector with weekday labels
- 🌤️ 天氣預報 - Real-time weather from OpenWeatherMap API with hourly forecast
- 📍 導航按鈕 - One-tap Google Maps navigation
- ℹ️ 資訊 (Info) - Flights, hotels, emergency contacts
- 💰 記帳 (Budget) - Expense tracker with JPY↔TWD conversion
- 📖 攻略 (Guide) - Attraction guides including Tokyo, Kawaguchiko & Karuizawa spots
Japanese Minimal Light Theme (日式極簡風)
- Warm white background (#FAF8F5)
- Soft pink accent color (#E8B4B8)
- Hero image cards with overlay text
- Horizontal scrolling hourly weather forecast
- Color-coded cards: Attractions (teal), Restaurants (coral), Transport (blue)
# Clone the repo
git clone https://github.com/peterhu/travelplan.git
cd travelplan
# Serve locally (requires Node.js)
npx serve
# Open http://localhost:3000travelplan/
├── index.html # Main HTML
├── css/
│ └── styles.css # Japanese Minimal Light theme
├── js/
│ ├── data.js # Trip data (itinerary, hotels, guides)
│ ├── weather.js # OpenWeatherMap API integration
│ └── app.js # Main application logic
└── README.md
- Push code to GitHub
- Go to Settings → Pages
- Select Branch: main, folder: / (root)
- Save and wait for deployment
- Access at
https://peterhu.github.io/travelplan/
| Itinerary | Info | Budget |
|---|---|---|
| Hero card + horizontal calendar | Flight & hotel info | Expense calculator |
- 🏯 新倉山淺間公園 (Arakurayama)
- 🍜 河口湖美食攻略
- 🎨 teamLab 參觀攻略
- 🛍️ 輕井澤王子購物廣場
- 🏘️ 舊輕井澤銀座通
- 🌲 榆樹街小鎮 (Harunire Terrace)
- ⛪ 輕井澤高原教會
- 🦢 雲場池 (Kumoba Pond)
- Weather: OpenWeatherMap (free tier, 1000 calls/day)
- Navigation: Uses Google Maps URL (no API key required)
MIT License