Japan Trip 2026

📅 Trip Overview

Dates: Thursday, Jan 22, 2026 – Saturday, Jan 31, 2026 (10 Days / 9 Nights)
Destinations: Tokyo (Yotsuya, Asakusa, Ueno) & Karuizawa
Airline: Cathay Pacific (TPE ↔ NRT)

🗓️ Detailed Itinerary

Day 1: Thursday, Jan 22 - Arrival

Flight: CX450 (Cathay Pacific)

Depart: TPE @ 12:50 PM
Arrive: Narita (NRT) @ 3:50 PM

Transfer: Narita Airport → Tokyo

Accommodation: Hotel Keihan Tokyo Yotsuya

Day 2: Friday, Jan 23 - Tokyo Exploration (Split Groups)

Group A (Harry Potter):

Warner Bros. Studio Tour Tokyo - The Making of Harry Potter

Group B (City Sightseeing):

Tokyo Tower → Meiji Shrine

Evening Meeting Point:

Location: Shibuya
Activities: Dinner and shopping at Alpen TOKYO

Accommodation: Hotel Keihan Tokyo Yotsuya

Day 3: Saturday, Jan 24 - Mt. Fuji Day Trip

Transportation: Rental Car (All day self-drive)

Car Rental:

Pick up: 8:00 AM - Nippon Rent-A-Car ニッポンレンタカー四谷営業所 (協立四谷ビル 1F)
Return: By 8:00 PM (Same location)
⚠️ Important: Confirm snow tires (スタッドレスタイヤ) or chains are equipped!

Detailed Schedule:

Time	Activity	Notes
08:00	Pick up car & Depart	Nippon Rent-A-Car (協立四谷ビル 1F)
08:30 - 10:30	Drive: Tokyo (Yotsuya) → Lake Kawaguchi	~1.5-2 hours via Chuo Expressway (toll required)
10:30 - 11:30	Arakurayama Sengen Park	📍 Best Mt. Fuji viewing spot! ~400 steps climb. Photo op with pagoda
11:30 - 12:00	Drive to Lake Kawaguchi	-
12:00 - 13:00	Lunch	Lakeside restaurants. Try local houtou noodles (ほうとう)
13:00 - 14:30	Kachi Kachi Ropeway	Cable car to summit for panoramic lake & Mt. Fuji views
14:30 - 15:30	Oishi Park (Natural Living Center)	📍 Close-up Mt. Fuji views! Lakeside walk & reflection photos
15:30 - 16:30	Saiko Iyashi no Sato Nenba (Thatched Village)	Traditional village with Mt. Fuji backdrop
16:30 - 17:00	Return to Lake Kawaguchi area	-
17:00 - 18:00	Begin return to Tokyo	⚠️ Leave early! Winter sunset & icy roads - drive safely
18:00 - 20:00	Drive: Lake Kawaguchi → Tokyo (Yotsuya)	~1.5-2 hours (consider traffic)
By 20:00	Return car	Nippon Rent-A-Car (協立四谷ビル 1F)

Accommodation: Hotel Keihan Tokyo Yotsuya

Day 4: Sunday, Jan 25 - Hotel Move & Split Activities

Logistics:

Check out of Yotsuya → Move luggage to Asakusa

Daytime Activities:

Group A (Event):

TOKYO DOME (Evening)

Group B (Culture):

Asakusa (Senso-ji Temple) + Ueno Park

Accommodation: Seirai Asakusa Vacation Rental

Address: 4-6-7 Kotobuki, Taito Ward, Tokyo 111-0042
Access: Keyless entry (code)
Phone: +81 70-4749-4704

Day 5: Monday, Jan 26 - Art & Shopping

Activity: teamLab (Planets or Borderless) + Ginza District

Accommodation: Seirai Asakusa Vacation Rental

Day 6: Tuesday, Jan 27 - Travel to Karuizawa

Transfer: Tokyo (likely Ueno or Tokyo Station) → Karuizawa via Shinkansen (approx. 1 hour)

Activity: Arrive in Karuizawa, check-in, explore outlet mall or rest

Accommodation: Karuizawa Prince Hotel West

Day 7: Wednesday, Jan 28 - Skiing

Activity: Full Day Skiing

Accommodation: Karuizawa Prince Hotel West

Day 8: Thursday, Jan 29 - Skiing

Activity: Full Day Skiing

Accommodation: Karuizawa Prince Hotel West

Day 9: Friday, Jan 30 - Back to City

Transfer: Karuizawa → Tokyo (Ueno Area)

Activity: Free time / Last minute shopping in Ueno/Okachimachi (Ameyokocho)

Accommodation: Hotel Villa Fontaine Tokyo-Ueno Okachimachi

Day 10: Saturday, Jan 31 - Departure

Morning: Check out. Take Keisei Skyliner from Ueno to Narita Airport

Flight: CX451 (Cathay Pacific)

Depart: Narita (NRT) @ 2:20 PM
Arrive: TPE @ 6:40 PM

🖥️ 旅遊規劃網頁 App 開發計畫

專案概述

開發一個「北歐極光風」旅遊規劃網頁應用程式，結合智能導遊功能，採用手機優先設計，支援雲端同步，方便與朋友共同使用。

一、視覺風格設計 - 北歐極光風 🌌

1.1 設計理念

Aurora Borealis： 深邃夜空搭配漸層極光色彩，優雅且現代
手機優先： 以行動裝置體驗為核心，如原生 App 般流暢
資訊層次分明： 深色背景讓重要資訊跳脫、一目了然
自駕友善： 大按鈕、高對比、開車時一眼可辨識

1.2 配色方案 - 極光之夜

元素	名稱	色碼	用途
背景	極夜	`#0F0F1A`	主背景，深邃星空
卡片	星塵	`#1A1A2E`	卡片底色
卡片邊框	月暈	`#2D2D44`	卡片邊框、分隔線
主文字	雪白	`#F8F8FF`	標題、重要文字
副文字	霜灰	`#A0A0B0`	說明、時間、次要資訊
景點色	極光綠	`#00D9A5`	景點卡片標示
餐廳色	落日橘	`#FF8C42`	餐廳卡片標示
交通色	極光藍	`#4DA8DA`	交通卡片標示
重點色	極光紫	`#A855F7`	按鈕、重點標示
警示色	極光粉	`#FF6B9D`	必吃/必買標籤

1.3 字體規範

/* 主要字體 */
font-family: 'Inter', 'Noto Sans TC', -apple-system, sans-serif;

/* 標題 - 較重 */
.title { font-weight: 700; letter-spacing: -0.02em; }

/* 內文 - 舒適閱讀 */
.body { font-weight: 400; line-height: 1.6; }

/* 標籤 - 清晰辨識 */
.tag { font-weight: 600; font-size: 12px; text-transform: uppercase; }

元素	大小 (Mobile)	大小 (Desktop)
大標題	28px	36px
頁面標題	22px	28px
卡片標題	18px	20px
內文	15px	16px
標籤/說明	12px	13px

1.4 卡片分類設計

🏯 景點卡片 (Aurora Green)

.card-attraction {
  background: linear-gradient(135deg, #1A1A2E 0%, #0D2818 100%);
  border-left: 4px solid #00D9A5;
  border-radius: 16px;
}

🍜 餐廳卡片 (Sunset Orange)

.card-restaurant {
  background: linear-gradient(135deg, #1A1A2E 0%, #2D1810 100%);
  border-left: 4px solid #FF8C42;
  border-radius: 16px;
}

🚗 交通卡片 (Aurora Blue)

.card-transport {
  background: linear-gradient(135deg, #1A1A2E 0%, #0D1B2A 100%);
  border-left: 4px solid #4DA8DA;
  border-radius: 16px;
}

導航按鈕樣式：

.nav-button {
  background: linear-gradient(135deg, #A855F7 0%, #6366F1 100%);
  color: white;
  border-radius: 25px;
  padding: 12px 20px;
  font-weight: 600;
  box-shadow: 0 4px 15px rgba(168, 85, 247, 0.4);
}

二、手機優先響應式設計

2.1 斷點設計

/* Mobile First */
/* 預設樣式 = 手機 (< 640px) */

/* 平板 */
@media (min-width: 640px) { ... }

/* 小筆電 */
@media (min-width: 1024px) { ... }

/* 桌面 */
@media (min-width: 1280px) { ... }

2.2 頁面導航結構

採用頂部分頁標籤 (Segmented Control) 設計，適合單手操作：

┌─────────────────────────────────────┐
│  🗾 JAPAN 2026                   ⚙️ │
│  1/22 - 1/31 · 東京 & 輕井澤        │
├─────────────────────────────────────┤
│ ┌─────┐ ┌─────┐ ┌─────┐ ┌─────┐    │
│ │ 行程 │ │ 資訊 │ │ 記帳 │ │ 攻略 │    │ ← 頂部分頁
│ └─────┘ └─────┘ └─────┘ └─────┘    │
├─────────────────────────────────────┤
│                                     │
│         [ 頁面內容區 ]              │
│                                     │
└─────────────────────────────────────┘

2.3 原生 App 質感功能

手勢操作：

下拉更新天氣與資料
左右滑動切換日期
點擊卡片展開詳情

過場動畫：

頁面切換：淡入淡出 + 輕微位移
卡片展開：彈性縮放 (spring animation)
點擊回饋：輕微發光效果

三、核心功能規格

3.1 每日行程頁面 (主頁)

日期選單 + 天氣預報：

┌─────────────────────────────────────┐
│  ← │ Day1 │ Day2 │[Day3]│ Day4 │ → │
│    │ 1/22 │ 1/23 │ 1/24 │ 1/25 │   │
└─────────────────────────────────────┘

╭─────────────────────────────────────╮
│  🌤️ 河口湖・富士山              5°C │
│  晴時多雲 │ 濕度 45% │ 風速 12km/h  │
│  ⚠️ 山區可能有積雪，請注意路況      │
╰─────────────────────────────────────╯

行程時間軸：

┌─────────────────────────────────────┐
│  Day 3 · 1月24日 (六)               │
│  🗻 富士山自駕一日遊                │
├─────────────────────────────────────┤
│                                     │
│  08:00 ━━━━━━━━━━━━━━━━━━━━━━━━━━━  │
│  ╭─────────────────────────────────╮│
│  │🚗 交通                          ││
│  │ ─────────────────────────────  ││
│  │ 取車出發                        ││
│  │ Nippon Rent-A-Car 四谷営業所    ││
│  │ 協立四谷ビル 1F                 ││
│  │                                 ││
│  │ ⚠️ 請確認已配備雪胎！           ││
│  │                                 ││
│  │  ╭──────────────────╮          ││
│  │  │  📍 導航至此處  → │          ││
│  │  ╰──────────────────╯          ││
│  ╰─────────────────────────────────╯│
│         │                           │
│  10:30 ━┿━━━━━━━━━━━━━━━━━━━━━━━━━  │
│  ╭─────────────────────────────────╮│
│  │🏯 景點                          ││
│  │ ─────────────────────────────  ││
│  │ 新倉山淺間公園                  ││
│  │ Arakurayama Sengen Park         ││
│  │                                 ││
│  │ 📖 景點故事                     ││
│  │ 這裡是拍攝富士山與五重塔經典    ││
│  │ 合照的絕佳地點，需爬約 400 階   ││
│  │ 石階才能抵達展望台...           ││
│  │                                 ││
│  │ 🏷️ 攻略標籤：                   ││
│  │ ┌──────────┐ ┌──────────┐      ││
│  │ │ 📸 必拍  │ │ 🥾 需體力 │      ││
│  │ └──────────┘ └──────────┘      ││
│  │                                 ││
│  │  ╭──────────────────╮          ││
│  │  │  📍 導航至此處  → │          ││
│  │  ╰──────────────────╯          ││
│  ╰─────────────────────────────────╯│
│         │                           │
│  12:00 ━┿━━━━━━━━━━━━━━━━━━━━━━━━━  │
│  ╭─────────────────────────────────╮│
│  │🍜 餐廳                          ││
│  │ ─────────────────────────────  ││
│  │ 河口湖畔午餐                    ││
│  │                                 ││
│  │ 🏷️ 美食標籤：                   ││
│  │ ┌────────────────────────────┐ ││
│  │ │ 🔥 必吃：餺飥麵 (ほうとう)  │ ││
│  │ └────────────────────────────┘ ││
│  │ ┌────────────────────────────┐ ││
│  │ │ 📋 必點：南瓜餺飥套餐       │ ││
│  │ └────────────────────────────┘ ││
│  │                                 ││
│  │  ╭──────────────────╮          ││
│  │  │  📍 導航至此處  → │          ││
│  │  ╰──────────────────╯          ││
│  ╰─────────────────────────────────╯│
│                                     │
└─────────────────────────────────────┘

卡片分類圖示系統：

類型	圖示	邊框顏色	用途
景點	🏯	`#00D9A5` 極光綠	觀光景點、公園、神社
餐廳	🍜	`#FF8C42` 落日橘	用餐、咖啡廳、美食
交通	🚗	`#4DA8DA` 極光藍	租車、新幹線、機場接送
住宿	🏨	`#A855F7` 極光紫	Check-in/out
購物	🛍️	`#FF6B9D` 極光粉	商場、outlet
活動	🎿	`#FBBF24` 星光黃	滑雪、演唱會

3.2 智能導遊功能

自動偵測地點並生成導航按鈕：

系統自動掃描行程文字中的地址、店名、景點名稱
為每個地點生成「📍 導航至此處」按鈕
點擊後開啟 Google Maps 導航 (支援開車模式)

自動分析並高亮重要資訊：

標籤類型	顏色	範例
🔥 必吃美食	`#FF6B9D` 極光粉	餺飥麵、燒肉
📋 必點菜單	`#FBBF24` 星光黃	南瓜餺飥套餐
🛒 必買伴手禮	`#00D9A5` 極光綠	東京芭娜娜
🎫 預約代碼	`#A855F7` 極光紫	預約編號、確認碼
⚠️ 重要提醒	`#EF4444` 警示紅	雪胎確認、時間提醒

標籤顯示樣式：

.tag-must-eat {
  background: linear-gradient(135deg, #FF6B9D 0%, #FF8A80 100%);
  color: white;
  padding: 6px 12px;
  border-radius: 20px;
  font-weight: 600;
}

.tag-must-order {
  background: linear-gradient(135deg, #FBBF24 0%, #F59E0B 100%);
  color: #1A1A2E;
  padding: 6px 12px;
  border-radius: 20px;
  font-weight: 600;
}

3.3 旅遊資訊頁面 (資訊分頁)

航班資訊區塊：

╭─────────────────────────────────────╮
│  ✈️ 航班資訊                        │
├─────────────────────────────────────┤
│                                     │
│  🛫 去程 CX450                      │
│  ───────────────────────────────   │
│  TPE 12:50 ──────────→ NRT 15:50   │
│  1月22日 (四) │ Cathay Pacific      │
│                                     │
│  🛬 回程 CX451                      │
│  ───────────────────────────────   │
│  NRT 14:20 ──────────→ TPE 18:40   │
│  1月31日 (六) │ Cathay Pacific      │
│                                     │
╰─────────────────────────────────────╯

住宿資訊區塊：

╭─────────────────────────────────────╮
│  🏨 住宿資訊                        │
├─────────────────────────────────────┤
│                                     │
│  Day 1-3 │ Hotel Keihan Tokyo Yotsuya│
│  ─────────────────────────────────  │
│  📍 東京都新宿區四谷               │
│  📞 +81-3-XXXX-XXXX                │
│  ╭────────────────╮                │
│  │  📍 導航至飯店 │                │
│  ╰────────────────╯                │
│                                     │
│  Day 4-5 │ Seirai Asakusa           │
│  ─────────────────────────────────  │
│  📍 4-6-7 Kotobuki, Taito Ward      │
│  🔑 密碼鎖 (入住時提供)             │
│  📞 +81 70-4749-4704               │
│  ╭────────────────╮                │
│  │  📍 導航至民宿 │                │
│  ╰────────────────╯                │
│                                     │
│  Day 6-8 │ Karuizawa Prince Hotel   │
│  ─────────────────────────────────  │
│  📍 輕井澤                         │
│  ⛷️ 含滑雪場設施                   │
│                                     │
│  Day 9 │ Villa Fontaine Ueno        │
│  ─────────────────────────────────  │
│  📍 上野御徒町                     │
│                                     │
╰─────────────────────────────────────╯

緊急聯絡電話區塊：

╭─────────────────────────────────────╮
│  🆘 緊急聯絡電話                    │
├─────────────────────────────────────┤
│                                     │
│  🚨 日本緊急電話                    │
│  ├─ 警察：110                      │
│  ├─ 消防/救護車：119               │
│  └─ 海上事故：118                  │
│                                     │
│  🏥 旅遊求助                        │
│  ├─ 日本旅遊熱線：050-3816-2787    │
│  └─ 台灣駐日代表處：+81-3-3280-7811│
│                                     │
│  📞 信用卡掛失                      │
│  ├─ Visa：00531-44-0022            │
│  └─ Mastercard：00531-11-3886      │
│                                     │
│  🚗 租車公司                        │
│  └─ Nippon Rent-A-Car：0800-500-0919│
│                                     │
╰─────────────────────────────────────╯

3.4 記帳/預算頁面

預算總覽：

╭─────────────────────────────────────╮
│  💰 旅遊預算                        │
├─────────────────────────────────────┤
│                                     │
│  預算總額         ¥ 200,000         │
│  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━  │
│  已花費           ¥ 45,800          │
│  [▓▓▓▓▓▓▓░░░░░░░░░░░░░] 23%        │
│  ───────────────────────────────   │
│  剩餘             ¥ 154,200         │
│                  ≈ NT$ 33,153       │
│                                     │
╰─────────────────────────────────────╯

快速記帳計算機：

╭─────────────────────────────────────╮
│                                     │
│              ¥ 1,500                │
│           ≈ NT$ 323                 │
│                                     │
├─────────────────────────────────────┤
│  ╭─────╮ ╭─────╮ ╭─────╮ ╭─────╮   │
│  │  7  │ │  8  │ │  9  │ │  C  │   │
│  ├─────┤ ├─────┤ ├─────┤ ├─────┤   │
│  │  4  │ │  5  │ │  6  │ │  ⌫  │   │
│  ├─────┤ ├─────┤ ├─────┤ ├─────┤   │
│  │  1  │ │  2  │ │  3  │ │     │   │
│  ├─────┤ ├─────┴─────┤ │ 記帳 │   │
│  │  0  │ │    00     │ │     │   │
│  ╰─────╯ ╰───────────╯ ╰─────╯   │
╰─────────────────────────────────────╯

消費分類圖表：

╭─────────────────────────────────────╮
│  📊 消費分析                        │
├─────────────────────────────────────┤
│                                     │
│  🍜 餐飲     ████████░░  35%        │
│  🚃 交通     ██████░░░░  25%        │
│  🎫 門票     ████░░░░░░  18%        │
│  🛒 購物     ███░░░░░░░  12%        │
│  📦 其他     ██░░░░░░░░  10%        │
│                                     │
╰─────────────────────────────────────╯

3.5 景點攻略頁面 (攻略分頁)

自動生成的景點攻略卡片：

╭─────────────────────────────────────╮
│  📖 新倉山淺間公園攻略              │
├─────────────────────────────────────┤
│                                     │
│  🏯 景點簡介                        │
│  ─────────────────────────────────  │
│  位於山梨縣富士吉田市，是拍攝富士   │
│  山與五重塔（忠靈塔）經典合照的     │
│  最佳地點。春季櫻花盛開時尤其壯觀。 │
│                                     │
│  ⏰ 建議停留時間：1-1.5 小時         │
│  🎫 門票：免費                      │
│  🚶 步行：需爬約 400 階石階          │
│                                     │
│  💡 攻略提示                        │
│  ─────────────────────────────────  │
│  • 清晨或傍晚光線最佳               │
│  • 冬季需注意階梯可能結冰            │
│  • 展望台有免費望遠鏡               │
│                                     │
│  ╭────────────────╮                │
│  │  📍 導航至此處 │                │
│  ╰────────────────╯                │
╰─────────────────────────────────────╯

╭─────────────────────────────────────╮
│  🍜 河口湖美食攻略                  │
├─────────────────────────────────────┤
│                                     │
│  🔥 必吃美食                        │
│  ─────────────────────────────────  │
│  ┌────────────────────────────────┐│
│  │ 餺飥麵 (ほうとう)               ││
│  │ 山梨縣鄉土料理，寬扁烏龍麵配    ││
│  │ 味噌湯底，加入南瓜、蔬菜燉煮    ││
│  └────────────────────────────────┘│
│                                     │
│  📋 推薦餐廳                        │
│  ─────────────────────────────────  │
│  • 小作 河口湖店 ⭐ 4.2            │
│  • ほうとう不動 ⭐ 4.0             │
│                                     │
╰─────────────────────────────────────╯

四、天氣預報整合

4.1 天氣 API 整合

// 使用 OpenWeatherMap API
const weatherAPI = {
  endpoint: 'https://api.openweathermap.org/data/2.5/weather',
  key: 'YOUR_API_KEY'
};

// 根據行程地點自動查詢天氣
const locations = {
  day1: { city: 'Tokyo', lat: 35.6762, lon: 139.6503 },
  day3: { city: 'Kawaguchiko', lat: 35.5162, lon: 138.7523 },
  day6: { city: 'Karuizawa', lat: 36.3489, lon: 138.6361 }
};

4.2 天氣顯示設計

╭─────────────────────────────────────╮
│  ☀️ 河口湖 · 富士山                 │
│  ─────────────────────────────────  │
│   🌡️ 5°C   │  💧 45%  │  💨 12km/h  │
│  ─────────────────────────────────  │
│  ⚠️ 自駕注意：山區道路可能有積雪     │
╰─────────────────────────────────────╯

五、導航功能設計

5.1 自動偵測地點

系統自動識別以下類型的地點：

完整地址 (如：4-6-7 Kotobuki, Taito Ward)
店名/景點名 (如：Nippon Rent-A-Car 四谷営業所)
知名地標 (如：淺草寺、東京塔)

5.2 導航按鈕行為

// 點擊導航按鈕
function navigateTo(location) {
  const googleMapsUrl = `https://www.google.com/maps/dir/?api=1&destination=${encodeURIComponent(location)}&travelmode=driving`;
  window.open(googleMapsUrl, '_blank');
}

5.3 導航按鈕樣式

╭────────────────────────╮
│  📍 導航至此處       → │
╰────────────────────────╯

明顯的按鈕大小 (方便開車時點擊)
高對比色彩
圖示 + 文字雙重提示

六、Firebase 雲端同步

6.1 資料結構設計

// Firestore Collection 結構
trip2026/
├── itinerary/          // 行程資料
│   ├── day1: { 
│   │   date: '2026-01-22',
│   │   weather: { temp, humidity, condition },
│   │   events: [{ time, type, title, location, tags }]
│   │ }
│   └── ...
├── expenses/           // 記帳資料
│   ├── expense_001: { amount, category, date, note, jpyToTwd }
│   └── ...
├── info/               // 旅遊資訊
│   ├── flights: { outbound, inbound }
│   ├── hotels: [{ name, address, phone, checkIn, checkOut }]
│   └── emergency: { police, hospital, embassy }
├── guides/             // 景點攻略
│   ├── arakurayama: { story, tips, mustDo }
│   └── ...
└── settings/           // 設定
    └── config: { exchangeRate, budget }

6.2 同步功能

即時同步：任一人修改，其他人即時看到更新
離線支援：無網路時可操作，恢復網路後自動同步
分享連結：產生邀請連結讓朋友加入

七、技術架構

7.1 前端技術

項目	技術選擇
框架	Vue 3 + Vite
樣式	Tailwind CSS + CSS Variables
圖示	Lucide Icons + Emoji
動畫	Framer Motion / Vue Transition
地圖	Google Maps API
天氣	OpenWeatherMap API

7.2 後端服務

項目	技術選擇
資料庫	Firebase Firestore
驗證	Firebase Anonymous Auth
部署	GitHub Pages (免費)

💡 為何選擇 GitHub Pages？

完全免費，無需信用卡

專案已在 GitHub，一鍵啟用

自動 HTTPS，支援自訂網域

前端靜態檔案 + Firebase Firestore = 完美組合

八、檔案結構

travelplan/
├── index.html          # 入口頁面
├── src/
│   ├── App.vue         # 主應用元件
│   ├── views/
│   │   ├── Itinerary.vue    # 行程頁面
│   │   ├── Info.vue         # 資訊頁面
│   │   ├── Budget.vue       # 記帳頁面
│   │   └── Guide.vue        # 攻略頁面
│   ├── components/
│   │   ├── WeatherCard.vue  # 天氣卡片
│   │   ├── EventCard.vue    # 行程卡片
│   │   ├── NavButton.vue    # 導航按鈕
│   │   ├── Calculator.vue   # 計算機
│   │   └── TagLabel.vue     # 標籤元件
│   ├── styles/
│   │   └── main.css    # 主要樣式 (北歐極光風)
│   ├── utils/
│   │   ├── weather.js  # 天氣 API
│   │   ├── maps.js     # 地圖導航
│   │   └── textParser.js # 智能文字分析
│   └── firebase/
│       └── config.js   # Firebase 設定
├── data/
│   └── itinerary.json  # 行程資料 (從 plan.md 匯入)
└── plan.md             # 本規劃文件

九、開發階段

階段	內容	預估時間
Phase 1	專案初始化 + 北歐極光風 CSS	2 小時
Phase 2	首頁 + 頂部分頁導航	1.5 小時
Phase 3	行程頁面 + 分類卡片設計	3 小時
Phase 4	天氣 API 整合	1.5 小時
Phase 5	導航按鈕 + Google Maps 整合	1 小時
Phase 6	智能導遊文字分析 + 標籤高亮	2 小時
Phase 7	旅遊資訊頁面 (航班/住宿/緊急電話)	1.5 小時
Phase 8	記帳頁面 + 預算追蹤	2 小時
Phase 9	攻略頁面 (景點故事/美食推薦)	1.5 小時
Phase 10	Firebase 雲端同步	2 小時
Phase 11	響應式優化 + 測試	1.5 小時

總預估時間：約 19.5 小時

十、待確認事項

OpenWeatherMap API Key（免費方案每月 1000 次呼叫）
Google Maps API Key（需綁定信用卡，但有免費額度）
Firebase 專案是否已建立？
行程資料匯入格式確認
是否需要多語言支援（繁中/日文/英文）？

FilesExpand file tree

plan.md

Latest commit

History

plan.md

File metadata and controls

Japan Trip 2026

📅 Trip Overview

🗓️ Detailed Itinerary

Day 1: Thursday, Jan 22 - Arrival

Day 2: Friday, Jan 23 - Tokyo Exploration (Split Groups)

Day 3: Saturday, Jan 24 - Mt. Fuji Day Trip

Day 4: Sunday, Jan 25 - Hotel Move & Split Activities

Day 5: Monday, Jan 26 - Art & Shopping

Day 6: Tuesday, Jan 27 - Travel to Karuizawa

Day 7: Wednesday, Jan 28 - Skiing

Day 8: Thursday, Jan 29 - Skiing

Day 9: Friday, Jan 30 - Back to City

Day 10: Saturday, Jan 31 - Departure

🖥️ 旅遊規劃網頁 App 開發計畫

專案概述

一、視覺風格設計 - 北歐極光風 🌌

1.1 設計理念

1.2 配色方案 - 極光之夜

1.3 字體規範

1.4 卡片分類設計

二、手機優先響應式設計

2.1 斷點設計

2.2 頁面導航結構

2.3 原生 App 質感功能

三、核心功能規格

3.1 每日行程頁面 (主頁)

3.2 智能導遊功能

3.3 旅遊資訊頁面 (資訊分頁)

3.4 記帳/預算頁面

3.5 景點攻略頁面 (攻略分頁)

四、天氣預報整合

4.1 天氣 API 整合

4.2 天氣顯示設計

五、導航功能設計

5.1 自動偵測地點

5.2 導航按鈕行為

5.3 導航按鈕樣式

六、Firebase 雲端同步

6.1 資料結構設計

6.2 同步功能

七、技術架構

7.1 前端技術

7.2 後端服務

八、檔案結構

九、開發階段

十、待確認事項