<!DOCTYPE html>

<head>

<title>2025华东水乡之旅 | 行程单 (v7.0 - 终极版)</title>

<style>

body {

font-family: 'Noto Sans SC', sans-serif;

background-color: #f8f9fa;

color: #343a40;

}

.header-bg {

background-image: linear-gradient(to top, #f8f9fa 0%, rgba(234, 238, 223, 0.5) 100%);

}

.day-card {

background: linear-gradient(135deg, #ffffff 0%, #fcfcfc 100%);

border: 1px solid #e9ecef;

}

.icon-svg {

width: 1.25rem;

height: 1.25rem;

margin-right: 0.5rem;

color: #005f73;

flex-shrink: 0;

}

.summary-list dt {

font-weight: bold;

color: #005f73;

font-size: 1.05em;

position: relative;

padding-left: 28px;

}

.summary-list dt::before {

content: '📍';

position: absolute;

left: 0;

top: 0;

font-size: 1.2em;

}

.summary-list dd {

padding-left: 28px;

border-left: 2px solid #e0f2f1;

margin-left: 8px;

padding-bottom: 0.75rem;

margin-bottom: 0.75rem;

color: #495057;

}

.info-section {

background-color: #f8f9fa;

border-left: 3px solid;

padding: 0.75rem 1rem;

margin-top: 0.75rem;

border-radius: 0.25rem;

}

.info-section h5 {

font-weight: bold;

display: flex;

align-items: center;

}

.info-food { border-color: #fdc500; }

.info-kids { border-color: #45b6fe; }

.info-fun { border-color: #97c1a9; }

.info-tips { border-color: #e57373; }

.info-vip { border-color: #c084fc; background-color: #faf5ff; }

.info-benefits { border-color: #fbbf24; background-color: #fffbeb; }

.info-drive { border-color: #22c55e; background-color: #f0fdf4; }

.map-container svg {

width: 100%;

height: auto;

border-radius: 0.75rem;

border: 1px solid #e5e7eb;

background-color: #f9fafb;

}

.kpi-card {

background: #ffffff;

border: 1px solid #e9ecef;

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

}

.kpi-card:hover {

transform: translateY(-5px);

box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.05), 0 4px 6px -4px rgb(0 0 0 / 0.05);

}

.budget-table th, .budget-table td {

padding: 0.75rem;

text-align: left;

border-bottom: 1px solid #e5e7eb;

}

.budget-table .sub-item td {

padding-left: 2rem;

font-size: 0.9em;

color: #6b7280;

}

</style>

</head>

<p class="text-lg md:text-xl text-[#6c757d] mt-2">2025年7月30日 - 8月23日 | 一家人的夏日回忆</p>

</header>

<div><dt>7/30 - 8/5: 抵达与华南探亲</dt><dd>从纽约飞抵广州，居家休整，庆祝生日并探访亲友。| 宿：广州家中</dd></div>

<div><dt>8/5 - 8/7: 东莞湖畔假日</dt><dd>入住松山湖凯悦酒店，享受宁静的湖光山色与亲子时光。| 宿：松山湖凯悦</dd></div>

<div><dt>8/7 - 8/9: 上海</dt><dd>返回广州并飞往上海，开启华东之旅，与老友相聚。| 宿：广州家中 / 复旦皇冠假日</dd></div>

<div><dt>8/9 - 8/13: 海上邮轮</dt><dd>登临爱达魔都号，巡游东海，探访济州与长崎。| 宿：爱达魔都号</dd></div>

<div><dt>8/13 - 8/16: 南京</dt><dd>六朝古都，感受历史底蕴与现代活力的交织。| 宿：牛首山希尔顿 / 丽思卡尔顿</dd></div>

<div><dt>8/16 - 8/18: 苏州</dt><dd>漫步古典园林，泛舟太湖之上，品味苏式雅致。| 宿：高新希尔顿 / 太湖涵玉晓筑</dd></div>

<div><dt>8/18 - 8/20: 水乡双镇</dt><dd>探访南浔的静谧，沉浸乌镇的浪漫。| 宿：乌镇阿丽拉</dd></div>

<div><dt>8/20 - 8/23: 上海 & 返程</dt><dd>重返魔都，体验都市繁华，最后满载而归。| 宿：浦东香格里拉 / 外滩华尔道夫 / 机场假日</dd></div>

</dl>

</section>

<h2 class="text-2xl font-bold mb-6 text-center text-[#005f73]">旅程数据一览</h2>

<div class="kpi-card p-4 rounded-xl"><p class="text-4xl font-bold text-[#0a9396]">~975</p><p class="text-sm text-gray-500">自驾总里程 (公里)</p></div>

</div>

</section>

</main>

<h2 class="text-2xl font-bold mb-6 text-center text-[#005f73]">旅程花费估算</h2>

<thead>

</tr>

</thead>

<tbody>

<tr><td>国际往返机票 (6人)</td><td class="text-right">108,000</td><td class="text-right">15,000</td></tr>

<tr><td>爱达魔都号套房费用</td><td class="text-right">65,000</td><td class="text-right">9,000</td></tr>

<tr class="sub-item"><td>东莞松山湖凯悦 (2晚)</td><td class="text-right">4,000</td><td class="text-right">550</td></tr>

<tr class="sub-item"><td>上海复旦皇冠假日 (1晚)</td><td class="text-right">1,600</td><td class="text-right">220</td></tr>

<tr class="sub-item"><td>南京牛首山希尔顿 (2晚)</td><td class="text-right">4,800</td><td class="text-right">660</td></tr>

<tr class="sub-item"><td>南京丽思卡尔顿 (1晚)</td><td class="text-right">5,000</td><td class="text-right">700</td></tr>

<tr class="sub-item"><td>苏州高新希尔顿 (1晚)</td><td class="text-right">1,600</td><td class="text-right">220</td></tr>

<tr class="sub-item"><td>苏州太湖涵玉晓筑 (1晚)</td><td class="text-right">3,000</td><td class="text-right">420</td></tr>

<tr class="sub-item"><td>乌镇阿丽拉 (2晚)</td><td class="text-right">10,000</td><td class="text-right">1,400</td></tr>

<tr class="sub-item"><td>上海浦东香格里拉 (1晚, FHR)</td><td class="text-right">4,000</td><td class="text-right">550</td></tr>

<tr class="sub-item"><td>上海外滩华尔道夫 (1晚)</td><td class="text-right">6,000</td><td class="text-right">830</td></tr>

<tr class="sub-item"><td>上海浦东机场假日 (1晚)</td><td class="text-right">1,400</td><td class="text-right">200</td></tr>

</tr>

</tbody>

</table>

<p class="text-xs text-gray-500 mt-2">* 所有费用均为估算，仅供参考。美元汇率按 1:7.2 计算。</p>

</div>

</section>

</div>

document.addEventListener('DOMContentLoaded', function () {

const timelineData = [

{ day: '7/30', date: '7月30日 (周三)', id: 'day-1', city: '在途', highlight: '启程回国', hotel: '机上', transport: '国泰航空 CX831', driveTime: 0, activities: ['🚗 前往纽约JFK机场。', '🛫 14:50 搭乘国泰航空CX831，飞往香港。'], tips: '‼️ <b>行前确认</b>: 再次检查所有人护照有效期。<b>贵宾室</b>: 国泰在JFK T8, 可使用寰宇堂高级休息室(Greenwich/Soho Lounge)。' },

{ day: '7/31', date: '7月31日 (周四)', id: 'day-2', city: '香港', highlight: '抵达香港，过夜休整', hotel: '香港机场/附近酒店', transport: '国泰航空', driveTime: 0, activities: ['🛬 19:05 抵达香港国际机场。', '🏨 办理入境或在转机区休息，为第二天飞往广州养精蓄锐。'], tips: '转机时间充裕，可使用香港机场的Amex Centurion, Plaza Premium或Chase Sapphire贵宾室。' },

{ day: '8/1', date: '8月1日 (周五)', id: 'day-3', city: '广州', highlight: '抵达广州 & 庆祝妈妈生日', hotel: '景晖苑小区', transport: '航班 + 专车', driveTime: 0, activities: ['✈️ 上午：搭乘航班从香港飞往广州。', '🛬 抵达广州白云国际机场，乘专车回家。', '😴 下午：居家休息，调整时差。', '🎉 晚上：全家一起为妈妈庆祝生日！'], tips: '抵达后首要任务是休息。生日庆祝以温馨为主，不宜过于操劳。' },

{ day: '8/2', date: '8月2日 (周六)', id: 'day-4', city: '广州', highlight: '亲友相聚 & 办理银行业务', hotel: '景晖苑小区', transport: '市内交通', driveTime: 0, activities: ['🏦 上午：前往银行办理银行卡业务。', '👨‍👩‍👧‍👦 下午/晚上：探亲访友，享受家庭团聚时光。'], tips: '周六银行可能人较多，建议提前取号。' },

{ day: '8/3', date: '8月3日 (周日)', id: 'day-5', city: '广州', highlight: '居家休整 & 亲友相聚', hotel: '景晖苑小区', transport: '市内交通', driveTime: 0, activities: ['🌞 全天：继续探亲访友，或在家休息，享受家庭团聚时光。'], tips: '周日是放松的一天，可以根据家人的精力灵活安排。' },

{ day: '8/4', date: '8月4日 (周一)', id: 'day-6', city: '广州', highlight: '个人事务日', hotel: '景晖苑小区', transport: '市内交通', driveTime: 0, activities: ['🦷 上午：前往牙科诊所进行检查。', '🛂 下午：前往出入境大厅办理护照更新事宜。'], tips: '办理护照更新需要提前在网上预约并准备好相关材料，如照片、旧护照、身份证等。' },

{ day: '8/5', date: '8月5日 (周二)', id: 'day-7', city: '东莞松山湖', highlight: '入住湖畔酒店，享受宁静假期', hotel: '东莞松山湖凯悦酒店', transport: '自驾 (约60公里)', driveTime: 1.5, activities: ['🚗 上午从广州出发，驾车前往东莞松山湖。', '🏨 中午抵达凯悦酒店，办理入住。', '🚲 下午在酒店内休息，或在松山湖畔骑行、散步。', '🍽️ 晚上在酒店享用晚餐。'], benefits: '<b>凯悦探索者/环球客礼遇</b>: 嘉宾轩行政酒廊礼遇 (含早餐和晚间欢乐时光) | 视房况升等 | 免费尊享网络 | 延迟退房。', food: '酒店自助餐、松山湖农家菜（烧鹅、水库鱼）。', kids: '租一辆家庭自行车环湖骑行，或者在酒店的儿童乐园玩耍。', funFact: '松山湖的海拔只有50多米，但它的湖面面积比杭州西湖还要大！', tips: '松山湖绿道非常适合骑行，但夏季炎热，建议在傍晚时分进行。注意防蚊。' },

{ day: '8/6', date: '8月6日 (周三)', id: 'day-8', city: '东莞松山湖', highlight: '华为小镇 & 休闲一日', hotel: '东莞松山湖凯悦酒店', transport: '酒店周边', driveTime: 0, activities: ['🚂 上午：参观华为欧洲小镇溪流背坡村（需通过华为员工提前预约）。', '🏊 下午：享受酒店的泳池等设施，或带孩子在湖边玩耍。', '🍴 晚上：探索酒店附近的美食。'], benefits: '<b>凯悦探索者/环球客礼遇</b>: 充分利用嘉宾轩的欢乐时光，作为晚餐前的开胃小点。', food: '万科里商业区有各国美食选择，可以满足不同口味。', kids: '华为小镇的红色小火车是孩子们的最爱，仿佛进入了童话世界。', funFact: '华为的“欧洲小镇”实际上是其研发基地，仿照12个欧洲经典城镇建造，员工需要坐小火车在不同“国家”之间穿梭上班。', tips: '参观华为小镇需全程乘坐小火车，不能随意下车。园区很大，注意防晒和补水。' },

{ day: '8/7', date: '8月7日 (周四)', id: 'day-9', city: '广州', highlight: '返回广州，行前准备', hotel: '景晖苑小区', transport: '自驾 (约60公里)', driveTime: 1.5, activities: ['☕️ 上午在酒店享受最后的悠闲时光。', '🍽️ 中午办理退房，在松山湖周边午餐。', '🚗 下午驾车返回广州家中。', '🧳 晚上：整理华东之旅的行李，为明天出发做最后准备。'], tips: '返回广州后，再次核对所有旅行证件和华东行程的预订信息，确保万无一失。将大件行李寄存在家中。' },

{ day: '8/8', date: '8月8日 (周五)', id: 'day-10', city: '上海', highlight: '重返校园，品味烤串', hotel: '复旦皇冠假日酒店', transport: '航班 + 专车', driveTime: 0, activities: ['✈️ 飞往上海前, 可在广州白云机场使用PP贵宾室。', '🚗 08:45 前往广州白云机场T1。', '✈️ 11:45 搭乘海南航空HU7331，飞往上海浦东。', '🛬 14:30 抵达上海浦东国际机场T2。', '🚗 15:10 专车接机送往酒店。', '🏫 下午: 逛逛复旦校园。', '🍽️ 18:30 与束梦照一家在五角场万达吃东北烤串。'], benefits: '<b>IHG优悦会白金卡礼遇</b>: 视房况升等房型 | 迎宾礼遇 (积分或饮品券) | 延迟退房。', food: '丰茂烤串、小杨生煎、上海本帮菜。', kids: '带孩子在复旦大学的草坪上奔跑，感受百年学府的氛围。', funFact: '复旦大学的校名源自《尚书大传》中的“日月光华，旦复旦兮”，意为“自强不息”。', tips: '‼️ <b>今日预约</b>: 今晚21:00前，务必通过“南京本地宝”公众号预约8月15日的南京博物院门票！' },

{ day: '8/9', date: '8月9日 (周六)', id: 'day-11', city: '邮轮', highlight: '登船启航，开启海上假日', hotel: '爱达魔都号', transport: '专车 + 邮轮', driveTime: 0, activities: ['🚗 上午专车从酒店出发，前往上海吴淞口国际邮轮港。', '✨ 享受【母港优先登船】礼遇，在【母港码头贵宾休息室】等候。','🚢 12:00-15:15 期间，由专属管家协助办理登船手续。', '📢 登船后参加强制性的安全演习。', '🎉 16:30 邮轮准时启航！'], vip: '<b>初识套房礼遇</b>: 抵达套房后，您的专属私人管家会在此等候。房间内已备好【欢迎套餐饮料、水果篮、精美小食】。熟悉一下房内的【套房精选咖啡套餐】和【免费迷你吧】。', food: '晚餐可前往【专属贵宾用餐区域】，或请管家为您【优先预约特色餐厅】。', kids: '带孩子探索船上的儿童乐园和水上乐园，让他们尽情玩耍。', funFact: '爱达魔都号是中国首艘国产大型邮轮，总吨位超过13万吨，就像一座移动的海上城市。', tips: '务必携带所有人的护照原件和船票确认单。登船港口地址：上海市宝山区宝杨路1号。' },

{ day: '8/10', date: '8月10日 (周日)', id: 'day-12', city: '济州岛 (西归浦)', highlight: '探访济州岛，感受火山与大海的魅力', hotel: '爱达魔都号', transport: '岸上游览大巴', driveTime: 0, activities: ['🚢 14:00 邮轮抵达韩国济州西归浦港。', '✨ 享受【目的地港优先离船】礼遇，第一时间开启岸上游。','🚶‍♂️ 跟随“济州地理经典”岸上游团队，游览【山茶花之丘】、【柱状节理带】和【鸟岛】。', '🛍️ 行程包含一个购物点：【西归浦每日偶来市场】。', '🚢 22:30 邮轮启航，离开济州岛。'], vip: '<b>客房服务</b>: 上岸前，可将需要清洗的衣物交给管家（每日免费3件）。游玩归来，房间里有每日更新的【新鲜水果和小饼干】等着您。', food: '岸上游含餐。市场里可以品尝黑猪肉串、橘子汁等当地小吃。', kids: '在柱状节理带，给孩子讲解火山熔岩冷却后形成这些六边形石柱的科学原理，就像大自然的积木。', funFact: '济州岛的“海女”不使用任何呼吸设备，就能潜入深海捕捞海产品，是联合国非物质文化遗产。', tips: '岸上游时间紧凑，请务必遵守团队集合时间。市场购物时可以适当讲价。' },

{ day: '8/11', date: '8月11日 (周一)', id: 'day-13', city: '长崎', highlight: '漫步长崎，感受历史与文化的交融', hotel: '爱达魔都号', transport: '岸上游览大巴', driveTime: 0, activities: ['🚢 12:00 邮轮抵达日本长崎港。', '✨ 享受【目的地港优先离船】礼遇。','🚶‍♂️ 参加“长崎和平之旅”岸上游，参观【大浦天主堂】(外观)、【和平公园】和【新地中华街】。', '🚢 21:00 邮轮启航，离开长崎。'], vip: '<b>专属体验</b>: 晚餐后，可以去【剧院专属区域】欣赏演出，获得最佳观赏位置。也可以请管家【优先预约SPA】放松身心。', food: '岸上游不含餐。可以在中华街品尝长崎特色什锦面(ちゃんぽん)和角煮馒头(红烧肉夹馍)。', kids: '在和平公园，给孩子讲述和平鸽的故事，以及祈愿世界和平的意义。', funFact: '长崎是日本最早接触西方文化的地方之一，著名的“长崎蛋糕”(カステラ)其实源自葡萄牙。', tips: '岸上游览结束后，返回船上好好休息，为第二天的海上巡游养精蓄锐。' },

{ day: '8/12', date: '8月12日 (周二)', id: 'day-14', city: '海上巡游', highlight: '全天海上惬意时光，尽享套房礼遇', hotel: '爱达魔都号', transport: '邮轮', driveTime: 0, activities: ['✨ 上午：在【专属贵宾用餐区域】享用悠闲早餐，或选择【升级版客房送餐服务】。', '✨ 下午：受邀参加【私人下午茶】，或在【专属行政酒廊(巴伐利亚酒廊)】小酌。', '✨ 晚上：参加【VIP鸡尾酒会】，然后去剧院欣赏演出。'], vip: '<b>充分利用礼遇</b>: 今天是放松的好机会！可以预约一次SPA或私人拍照（有优先权）。利用免费洗衣服务。有任何需求，随时联系您的私人管家。', tips: '可以提前查看船上的《每日活动指南》，结合VIP礼遇规划好一天的活动。为老人备好晕船药，以防万一。' },

{ day: '8/13', date: '8月13日 (周三)', id: 'day-15', city: '南京', highlight: '告别邮轮，开启江南自驾之旅', hotel: '南京牛首山希尔顿酒店', transport: '租车自驾 (约300公里)', driveTime: 3.75, activities: ['🚢 07:00 邮轮抵达上海吴淞口港。', '✨ 在【返航靠港日尊享贵宾休息室】等候，并享受【母港优先离船】服务。','🚗 约10:30 前往指定租车点办理提车手续（2025岚图梦想家）。', '🛣️ 11:30 从上海出发，驾车前往南京。', '🏨 16:00 抵达南京牛首山希尔顿酒店。', '⛰️ 19:00 步行前往牛首山文化旅游区，观赏佛顶宫夜景。'], benefits: '<b>希尔顿荣誉客会钻石卡礼遇</b>: 行政酒廊礼遇 (含早餐和晚间欢乐时光) | 视房况升等至套房 | 免费尊享网络。', food: '酒店自助餐或周边农家乐。', kids: '给孩子讲解牛首山是牛头宗的发源地，以及佛顶骨舍利的故事。', funFact: '牛首山因山顶南北双峰对峙，形似牛角而得名。', tips: '今日车程较长，途中可在阳澄湖服务区休息。<b>提车提醒</b>: 准备好租车预订确认单和驾驶员证件。<b>充电计划</b>：牛首山希尔顿提供充电桩，抵达后可通宵充电。' },

{ day: '8/14', date: '8月14日 (周四)', id: 'day-16', city: '南京', highlight: '驾游紫金山，夜泊秦淮河', hotel: '南京牛首山希尔顿酒店', transport: '租车自驾 (约45公里)', driveTime: 1.5, activities: ['☕️ 上午: 在酒店享受悠闲时光。', '🚗 下午: 探望亲友。', '👨‍👩‍👧‍👦 18:00 与小霞姑姑一家在“南京大牌档”会餐。', '🏮 20:00 夜游【夫子庙秦淮风光带】，乘坐画舫。'], drive: '<b>金陵文脉风景道 (紫金山段)</b>: 下午探亲前后，可驾车环游【紫金山风景区】，在绿荫中感受民国历史氛围，顺便打卡【明孝陵】(世界文化遗产)。', benefits: '<b>希尔顿荣誉客会钻石卡礼遇</b>: 外出前可以在行政酒廊喝杯咖啡，晚上回来也可以在酒廊放松一下。', food: '夫子庙周边有蒋有记锅贴、鸡鸣汤包等众多小吃。晚餐推荐南京大牌档。', kids: '在紫金山可以给孩子讲述孙中山先生和朱元璋的故事。晚上在夫子庙买一盏漂亮的兔子灯。', funFact: '明孝陵的神道石像路，是现存最长的神道之一，石像种类和数量都非常丰富。', tips: '‼️ <b>今日预约</b>: 今天需通过官方渠道预约8月21日的上海博物馆门票。<b>充电计划</b>：今日市区短途，酒店充满的电量足够。', mapSVG: `<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"><path d="M100,20 a80,80 0 1,1 0,160 a80,80 0 1,1 0,-160" fill="#eef2ff" /><path d="M100,30 a70,70 0 1,1 0,140 a70,70 0 1,1 0,-140" fill="#f0fdf4" /><path d="M100,40 a60,60 0 1,1 0,120 a60,60 0 1,1 0,-120" fill="#dbeafe" /><text x="100" y="105" font-size="10" font-weight="bold" text-anchor="middle" fill="#3b82f6">玄武湖</text><path d="M100,40 a60,60 0 1,1 0,120" fill="none" stroke="#22c55e" stroke-width="3" stroke-dasharray="5,3" /><path d="M100,160 a60,60 0 0,1 0,-120" fill="none" stroke="#22c55e" stroke-width="3" /><text x="170" y="105" font-size="7" fill="#16a34a" transform="rotate(90 170,105)">环湖路</text><text x="30" y="105" font-size="7" fill="#16a34a" transform="rotate(-90 30,105)">环陵路</text><g transform="translate(40, 90)"><path d="M0,10 L5,0 L10,10 L0,10 Z" fill="#ef4444" /><rect x="2" y="10" width="6" height="8" fill="#ef4444" /><text x="5" y="28" font-size="7" text-anchor="middle" fill="#b91c1c">中山陵</text></g><g transform="translate(60, 40)"><path d="M0,20 L5,0 L10,20 L0,20 Z" fill="#ef4444" /><rect x="3" y="10" width="4" height="10" fill="#ef4444" /><text x="5" y="30" font-size="7" text-anchor="middle" fill="#b91c1c">灵谷寺</text></g><g transform="translate(25, 135)"><rect x="0" y="0" width="12" height="10" fill="#f97316" /><path d="M-2,0 L14,0 L12, -5 L2,-5 Z" fill="#f59e0b" /><text x="6" y="20" font-size="7" text-anchor="middle" fill="#c2410c">明孝陵</text></g><g transform="translate(140, 150)"><rect x="0" y="0" width="15" height="8" fill="#3b82f6" /><path d="M0,0 Q7.5,-5 15,0" fill="#3b82f6" /><text x="7.5" y="18" font-size="7" text-anchor="middle" fill="#1d4ed8">明城墙</text></g></svg>` },

{ day: '8/15', date: '8月15日 (周五)', id: 'day-17', city: '南京', highlight: '探秘南博，车览玄武湖', hotel: '南京丽思卡尔顿酒店', transport: '租车自驾 (约25公里)', driveTime: 1, activities: ['🚗 10:00 办理退房，驾车前往市中心。', '🏨 11:00 抵达南京丽思卡尔顿酒店。', '🏛️ 14:00 前往【南京博物院】（已预约）。'], drive: '<b>金陵文脉风景道 (玄武湖段)</b>: 晚上驾车环游【玄武湖】，欣赏湖光与明城墙构成的壮丽夜景。', benefits: '<b>万豪旅享家金卡礼遇</b>: 视房况升等房型 (不含套房) | 迎宾礼赠积分 | 下午2点延迟退房。', food: '酒店下午茶、玄武湖附近的餐厅。', kids: '在南博寻找镇馆之宝“金缕玉衣”，和孩子一起数数用了多少玉片。', funFact: '南京博物院是中国三大博物馆之一，其大殿建筑仿照辽代宫殿设计，雄伟壮观。', tips: '南博面积大，为老人规划精华路线，或咨询轮椅服务。<b>充电计划</b>：丽思卡尔顿配备充电车位，当晚可充满。' },

{ day: '8/16', date: '8月16日 (周六)', id: 'day-18', city: '苏州', highlight: '闲逛精致园林，夜游山塘街', hotel: '苏州高新希尔顿酒店', transport: '租车自驾 (约200公里)', driveTime: 2.5, activities: ['🚗 上午在酒店享受早餐和设施后，办理退房，驾车前往苏州。', '🏨 13:00 抵达苏州高新希尔顿酒店，办理入住。', '🌳 下午: 避开正午酷热，前往小而美的【网师园】(世界文化遗产)游览。', '🌙 晚上: 前往【山塘街】，打卡【京杭大运河】(世界文化遗产)精华段。'], benefits: '<b>希尔顿荣誉客会钻石卡礼遇</b>: 行政酒廊礼遇 | 视房况升等 | 免费尊享网络。', food: '山塘街有众多苏州小吃。晚餐可尝试松鹤楼（松鼠鳜鱼）。', kids: '网师园虽小但五脏俱全，可以和孩子一起寻找园中的每一处细节。', funFact: '山塘街被誉为“姑苏第一名街”，唐代大诗人白居易在苏州任刺史时主持修建，至今仍是苏州水乡风貌的典范。', tips: '‼️ <b>酒店确认</b>: 请于今日致电苏州太湖涵玉晓筑，确认是否提供充电桩。<b>充电计划</b>：苏州希ль顿提供充电桩，可过夜充电。' },

{ day: '8/17', date: '8月17日 (周日)', id: 'day-19', city: '苏州', highlight: '驾游东山，夜赏金鸡湖', hotel: '苏州太湖涵玉晓筑', transport: '租车自驾 (约60公里)', driveTime: 2, activities: ['😴 上午在酒店享受设施，悠闲度过。', '🏨 办理退房后，前往太湖。', '🌃 晚上: 驾车前往【金鸡湖】，欣赏现代化的城市夜景和著名的音乐喷泉。'], drive: '<b>湖光山色风景道</b>: 下午驾车沿著名的【环太湖公路】东山段行驶，欣赏烟波浩渺的湖光山色，之后入住酒店。', food: '东山有许多农家乐，可以品尝地道的太湖船菜。金鸡湖周边有众多高端餐厅可供选择。', kids: '在东山可以采摘时令水果，在金鸡湖的月光码头拍照，像一座欧式城堡。', funFact: '太湖东山是碧螺春茶叶的原产地，这里不仅有湖景，还有古村和茶园。', tips: '金鸡湖音乐喷泉有固定表演时间，建议提前查询以免错过。<b>充电计划</b>：根据昨日确认结果执行。若酒店无充电桩，在离开苏州市区前务必充满电。', mapSVG: `<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"><path d="M 30 150 C 10 50, 190 50, 170 150 C 150 250, 50 250, 30 150" fill="#dbeafe" stroke="#93c5fd" stroke-width="1"/><path id="road" d="M 35 140 C 20 60, 180 60, 165 140" fill="none" stroke="#22c55e" stroke-width="3"/><text font-size="8" fill="#16a34a"><textPath href="#road" startOffset="50%" text-anchor="middle">环太湖公路</textPath></text><g transform="translate(100, 55)"><path d="M-10,10 L0,-5 L10,10 L5,5 L-5,5 Z" fill="#16a34a" /><text x="0" y="22" font-size="7" text-anchor="middle" fill="#14532d">东山半岛</text></g><g transform="translate(50, 70)"><rect x="0" y="0" width="10" height="6" fill="#f97316" /><rect x="2" y="-4" width="6" height="4" fill="#f97316" /><text x="5" y="16" font-size="7" text-anchor="middle" fill="#c2410c">陆巷古村</text></g><g transform="translate(150, 80)"><path d="M-8,10 L0,-8 L8,10 L4,4 L-4,4 Z" fill="#16a34a" /><text x="0" y="22" font-size="7" text-anchor="middle" fill="#14532d">西山岛</text></g><text x="100" y="120" font-size="12" font-weight="bold" text-anchor="middle" fill="#3b82f6">太湖</text></svg>` },

{ day: '8/18', date: '8月18日 (周一)', id: 'day-20', city: '乌镇', highlight: '探访南浔古镇，入住乌镇', hotel: '乌镇阿丽拉酒店', transport: '租车自驾 (约80公里)', driveTime: 2, activities: ['🚗 上午从太湖出发，驾车前往南浔古镇。', '🏘️ 中午在南浔古镇游览，品尝当地特色。', '🚗 下午晚些时候，从南浔驾车前往乌镇。', '🏨 傍晚抵达乌镇阿丽拉酒店，办理入住。'], benefits: '<b>凯悦探索者/环球客礼遇</b>: 每日免费双人早餐 | 视房况升等至套房 | 下午4点延迟退房。', food: '南浔“双交面”、定胜糕。', kids: '在南浔的百间楼看原住民的生活，感受真实的水乡气息。', funFact: '南浔古镇在明清时期因辑里湖丝而成为江南最富庶的丝绸城镇，有“四象八牛七十二金狗”的说法来形容当时的富商。', tips: '南浔比乌镇更安静，可以悠闲地逛逛。<b>充电计划</b>：阿丽拉酒店提供充电设施，抵达后可充电。' },

{ day: '8/19', date: '8月19日 (周二)', id: 'day-21', city: '乌镇', highlight: '乌村农趣 & 西栅夜色', hotel: '乌镇阿丽拉酒店', transport: '景区内交通', driveTime: 0, activities: ['🌽 上午：前往【乌村】，体验一价全包的田园农耕乐趣。', '🚶 下午：返回酒店稍作休息，然后进入【西栅景区】，先参观室内景点【茅盾故居】。', '🏮 傍晚开始：在西栅自由漫步，华灯初上时景色最美，乘坐摇橹船，欣赏水乡夜景。'], benefits: '<b>凯悦探索者/环球客礼遇</b>: 游玩一天后，可以利用延迟退房的权益，第二天早上不那么匆忙。', food: '乌村内任食、西栅书生羊肉面、临河餐厅。', kids: '在乌村可以喂小动物、做手工，体验磨豆浆，是绝佳的亲子乐园。', funFact: '乌镇西栅的夜景灯光是经过专业团队精心设计的，既明亮又不刺眼，完美地勾勒出水乡的轮廓。', tips: '乌村和西栅可以购买联票。西栅全程步行，可多利用长椅和店铺休息，减轻老人负担。' },

{ day: '8/20', date: '8月20日 (周三)', id: 'day-22', city: '上海', highlight: '重返摩登都市，夜游黄浦江', hotel: '浦东香格里拉大酒店', transport: '租车自驾 (约145公里)', driveTime: 3.5, activities: ['🚗 10:00 退房后驾车返回上海。', '🏨 14:00 抵达浦东香格里拉，办理入住。', '🌃 晚上: 核心活动！【乘坐浦江游船】，欣赏两岸夜景。', '🚙 22:00前前往指定地点办理还车手续。'], drive: '<b>魔都之巅风景道</b>: 晚餐后，驾车从陆家嘴出发，穿梭于“三件套”摩天大楼之间，经延安东路隧道抵达外滩，沿江欣赏万国建筑群和对岸的璀璨灯火。', benefits: '<b>FHR 礼遇</b>: 每日双人早餐 | 保证下午4点退房 | 视房况升等一级 | $100美元餐饮消费抵扣额度 | 中午12点提前入住 (视房况)。', food: '可以利用FHR的$100消费额度在酒店内的餐厅享用晚餐。', kids: '在游船上，和孩子一起辨认东方明珠、金茂大厦、环球金融中心这些标志性建筑。', funFact: '外滩的建筑被称为“万国建筑博览群”，汇集了哥特式、罗马式、巴洛克式等多种风格的建筑。', tips: '游船票建议提前在线购买，选择靠近外滩十六铺码头登船，班次和选择更多。', mapSVG: `<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"><path d="M 130 0 V 200" fill="none" stroke="#9ca3af" stroke-width="2" stroke-dasharray="4"/><text x="125" y="100" font-size="8" writing-mode="vertical-rl" text-anchor="end" fill="#6b7280">黄浦江</text><path id="bundroad" d="M 100 20 V 180" fill="none" stroke="#22c55e" stroke-width="3"/><text font-size="7" fill="#16a34a"><textPath href="#bundroad" startOffset="50%" text-anchor="middle" writing-mode="vertical-rl">中山东一路 (外滩)</textPath></text><path d="M100,100 C115,100 115,100 130,100" fill="none" stroke="#3b82f6" stroke-width="2"/><text x="115" y="95" font-size="6" text-anchor="middle" fill="#1d4ed8">延安路隧道</text><g transform="translate(150, 50)"><rect x="0" y="10" width="10" height="40" fill="#ef4444" /><rect x="12" y="0" width="10" height="50" fill="#ef4444" /><rect x="24" y="20" width="10" height="30" fill="#ef4444" /><text x="17" y="65" font-size="7" text-anchor="middle" fill="#b91c1c">陆家嘴</text></g><g transform="translate(70, 40)"><rect x="0" y="10" width="8" height="15" fill="#f97316" /><rect x="10" y="0" width="8" height="25" fill="#f97316" /><rect x="20" y="5" width="8" height="20" fill="#f97316" /><text x="14" y="35" font-size="7" text-anchor="middle" fill="#c2410c">外滩建筑群</text></g><g transform="translate(40, 150)"><circle cx="5" cy="0" r="5" fill="#f59e0b" /><path d="M5,-5 L5,-15 L0,-15 L10,-15 Z" fill="#f59e0b" /><text x="5" y="12" font-size="7" text-anchor="middle" fill="#b45309">豫园</text></g></svg>` },

{ day: '8/21', date: '8月21日 (周四)', id: 'day-23', city: '上海', highlight: '上博寻珍，亲友欢聚', hotel: '上海外滩华尔道夫酒店', transport: '地铁/出租车', driveTime: 0, activities: ['🏛️ 上午：前往上海博物馆人民广场馆（已预约）。', '🍽️ 12:30 参加位于上海中心大厦的“宫宴”（已预约）。', '🏨 15:30 换至上海外滩华尔道夫酒店。', '🍽️ 晚上: 与Stella姐聚餐。'], benefits: '<b>希尔顿荣誉客会钻石卡礼遇</b>: 每日餐饮消费额度 (代替早餐) | 视房况升等 | 迎宾礼遇。', food: '宫宴、国际饭店蝴蝶酥、红宝石小方蛋糕。', kids: '在上海博物馆的少数民族工艺馆，看各种精美的服饰和手工艺品。', funFact: '上海外滩华尔道夫酒店所在的建筑前身是上海总会，拥有远东地区最长的吧台（34米）。', tips: '‼️ <b>预约确认</b>: 确认已于7月22日成功预订的“宫宴”。本日活动和换酒店较为奔波，建议在宫宴后回酒店充分休息，再赴晚宴。' },

{ day: '8/22', date: '8月22日 (周五)', id: 'day-24', city: '上海', highlight: '最后采购，整理行装', hotel: '浦东机场假日酒店', transport: '出租车/磁悬浮', driveTime: 0, activities: ['🛍️ 上午: 自由活动，可前往南京路或新天地选购伴手礼。', '🚗 15:00 从华尔道夫退房，打车前往龙阳路站，体验磁悬浮列车。', '🏨 16:00 抵达浦东机场假日酒店。', '🧳 晚上: 在酒店内轻松用餐，整理打包所有行李。'], benefits: '<b>IHG优悦会白金卡礼遇</b>: 视房况升等房型 | 迎宾礼遇。方便第二天一早赶飞机。', tips: '体验磁悬浮是给孩子们的一个有趣项目。将所有需要托运的液体和物品提前打包好。' },

{ day: '8/23', date: '8月23日 (周六)', id: 'day-25', city: '返程', highlight: '飞跃太平洋，满载而归', hotel: '无', transport: '美联航 UA858/UA277', driveTime: 0, activities: ['✈️ 09:00 在酒店早餐后，从容办理退房。', '🚶 09:30 步行至浦东机场航站楼。', '🛫 12:10 搭乘美联航UA858前往旧金山。', '🛬 10:35 (当地时间) 在旧金山转机。', '🏡 19:30 (当地时间) 抵达纽瓦克，旅途圆满结束！'], tips: '<b>贵宾室</b>: 美联航在PVG T2, 可使用PP卡进入No. 77贵宾室。在旧金山转机时也可使用对应航站楼的贵宾室。旅途圆满结束，带上江南的美好回忆，平安回家。' }

];

const icons = {

hotel: `<svg class="icon-svg" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M2 8.2c0-1.8 1.4-3.2 3.2-3.2h13.6c1.8 0 3.2 1.4 3.2 3.2V18c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2v-9.8zM12 2v2.8M7 2v2.8M17 2v2.8M2 14h20"/></svg>`,

transport: `<svg class="icon-svg" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M19 17h2c.6 0 1-.4 1-1v-3c0-.9-.7-1.7-1.5-1.9C18.7 10.6 16 10 16 10s-1.3-1.4-2.2-2.3c-.5-.4-1.1-.7-1.8-.7H5c-.6 0-1.1.4-1.4.9l-1.4 2.9A3.7 3.7 0 0 0 2 12v4c0 .6.4 1 1 1h2"/><path d="M7 17h10"/><circle cx="7" cy="17" r="2"/><circle cx="17" cy="17" r="2"/></svg>`,

activities: `<svg class="icon-svg" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M8.5 14.5A2.5 2.5 0 0 0 11 12c0-1.4-1.1-2.5-2.5-2.5S6 10.6 6 12c0 1.4 1.1 2.5 2.5 2.5z"/><path d="M12.5 14.5A2.5 2.5 0 0 0 15 12c0-1.4-1.1-2.5-2.5-2.5S10 10.6 10 12c0 1.4 1.1 2.5 2.5 2.5z"/><path d="M18 12c0 2.8-2.2 5-5 5s-5-2.2-5-5 2.2-5 5-5 5 2.2 5 5z"/><path d="M22 12c0 4.4-3.6 8-8 8s-8-3.6-8-8 3.6-8 8-8 8 3.6 8 8z"/></svg>`,

highlight: `<svg class="icon-svg" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m3.85 8.62 4-2.3 4.5 2.5 5-2.8 3.65 2.15a1.9 1.9 0 0 1 0 3.4l-3.65 2.15-5-2.8-4.5 2.5-4 2.3a1.9 1.9 0 0 1-2-1.7V10.3a1.9 1.9 0 0 1 .85-1.68z"/></svg>`,

food: `🍜`,

kids: `🧩`,

funFact: `💡`,

tips: `📌`,

vip: `✨`,

benefits: `👑`,

drive: `🚗`

};

const cityColors = { '在途': 'bg-gray-200 text-gray-700', '广州': 'bg-[#fde6e6] text-[#c82323]', '香港': 'bg-fuchsia-100 text-fuchsia-800', '东莞': 'bg-[#c5cae9] text-[#3f51b5]', '东莞松山湖': 'bg-green-100 text-green-800', '上海': 'bg-[#fff3e0] text-[#ff9800]', '邮轮': 'bg-purple-100 text-purple-800', '济州岛 (西归浦)': 'bg-[#e3f2fd] text-[#1e88e5]', '长崎': 'bg-[#e3f2fd] text-[#1e88e5]', '海上巡游': 'bg-purple-100 text-purple-800', '南京': 'bg-[#e0f2f1] text-[#00796b]', '苏州': 'bg-[#e8eaf6] text-[#3f51b5]', '乌镇': 'bg-[#fce4ec] text-[#d81b60]', '返程': 'bg-[#f5f5f5] text-[#616161]' };

function renderTimeline(data) {

const mainTimeline = document.getElementById('timeline');

mainTimeline.innerHTML = '';

data.forEach((item, index) => {

const dayIndex = index + 1;

const colorClass = cityColors[item.city] || 'bg-gray-200 text-gray-800';

const foodHTML = item.food ? `<div class="info-section info-food"><h5>${icons.food} 美食推荐</h5><p class="text-sm pl-7">${item.food}</p></div>` : '';

const kidsHTML = item.kids ? `<div class="info-section info-kids"><h5>${icons.kids} 亲子时光</h5><p class="text-sm pl-7">${item.kids}</p></div>` : '';

const funFactHTML = item.funFact ? `<div class="info-section info-fun"><h5>${icons.funFact} 趣闻分享</h5><p class="text-sm pl-7">${item.funFact}</p></div>` : '';

const tipsHTML = item.tips ? `<div class="info-section info-tips"><h5>${icons.tips} 旅途小贴士</h5><p class="text-sm pl-7">${item.tips.replace(/<b>/g, '<b class="text-rose-600">')}</p></div>` : '';

const vipHTML = item.vip ? `<div class="info-section info-vip"><h5>${icons.vip} 尊享礼遇</h5><p class="text-sm pl-7">${item.vip.replace(/<b>/g, '<b class="text-purple-700">')}</p></div>` : '';

const benefitsHTML = item.benefits ? `<div class="info-section info-benefits"><h5>${icons.benefits} 会籍礼遇</h5><p class="text-sm pl-7">${item.benefits.replace(/<b>/g, '<b class="text-amber-600">')}</p></div>` : '';

const driveHTML = item.drive ? `<div class="info-section info-drive"><h5>${icons.drive} 风景驾道</h5><p class="text-sm pl-7">${item.drive.replace(/<b>/g, '<b class="text-green-700">')}</p></div>` : '';

const mapHTML = item.mapSVG ? `<div class="mt-4 map-container">${item.mapSVG}</div>` : '';

let transportText = item.transport;

if (item.driveTime > 0) {

const hours = Math.floor(item.driveTime);

const minutes = Math.round((item.driveTime % 1) * 60);

transportText += ` / ${hours}小时${minutes > 0 ? `${minutes}分钟` : ''}`;

}

const cardHTML = `

<h3 class="text-xl font-bold text-[#005f73]">第${dayIndex}天 | ${item.date}</h3>

</div>

<h4 class="font-bold flex items-center">${icons.highlight} 当日亮点</h4>

<p class="pl-8">${item.highlight}</p>

</div>

<div>

<h4 class="font-bold flex items-center text-gray-700">${icons.hotel} 住宿信息</h4>

<p class="pl-8 text-sm">${item.hotel}</p>

</div>

<div>

<h4 class="font-bold flex items-center text-gray-700">${icons.transport} 交通方式</h4>

<p class="pl-8 text-sm">${transportText}</p>

</div>

<h4 class="font-bold flex items-center text-gray-700">${icons.activities} 行程安排</h4>

${item.activities.map(act => `<li>${act.replace(/✨/g, '<span class="text-purple-600 font-bold">✨</span>')}</li>`).join('')}

</ul>

</div>

${driveHTML}

${mapHTML}

${benefitsHTML}

${vipHTML}

${foodHTML}

${kidsHTML}

${funFactHTML}

${tipsHTML}

</div>

</div>`;

mainTimeline.insertAdjacentHTML('beforeend', cardHTML);

});

}

// Initial call

renderTimeline(timelineData);

});

</script>

</body>

</html>