Trip journal

把每一段海风，
收进游记里。

登录后查看你的游记列表。照片、打卡点和票据会跟着每一本游记走，在不同电脑上继续编辑。

订单截图识别地图照片足迹行程体检提醒多人云端同步

欢迎回来

使用旅行账号登录，继续记录下一段风景。

第一次使用？先看《旅行游记使用指南》PDF · 9 页

旅行记录

上海万宁三亚

9月23日周三 — 9月27日周日 · 两人

5天4晚旅行时长

2家已订酒店

2程待购环岛高铁

D1

9月23日上海 → 三亚 → 万宁

落地后转环岛高铁，前往神州半岛。

06:50

浦东 T2 起飞海南航空 HU7322已订

10:10

抵达三亚凤凰 T3预留提取行李及步行换乘时间

11:30后

凤凰机场站 → 神州站具体车次与票价以开售为准待购

抵达后

入住 · 万宁神州半岛君悦酒店高级大床房 · 第1晚已订

D2

9月24日万宁 · 神州半岛

完整留给神州半岛的一天。

全天

神州半岛自由安排以酒店和周边海岸为活动中心

住宿

万宁神州半岛君悦酒店高级大床房 · 第2晚

D3

9月25日万宁 → 三亚湾

退房后沿东环铁路前往三亚湾。

午后

神州站 → 凤凰机场站按酒店退房时间选择车次待购

抵达后

入住 · 三亚康年酒店精选全海景大床房 · 第1晚已订

D4

9月26日三亚湾

三亚湾完整日，住宿不移动。

全天

三亚湾自由安排以椰梦长廊一带为活动中心

住宿

三亚康年酒店精选全海景大床房 · 第2晚

D5

9月27日三亚 → 上海虹桥

上午离店，凤凰机场返沪。

建议09:00

从康年酒店前往机场为值机及安检留出余量

11:15

三亚凤凰 T1 起飞上海航空 FM9538已订

14:35

抵达上海虹桥 T2回到虹桥生活圈

点击地图选择位置

航班环岛高铁酒店接驳

卫星影像 © Esri, Maxar, Earthstar Geographics 等

<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="color-scheme" content="light">
  <title>风迹 · 我的离线旅行纪念册</title>
  <style>
    :root{--ink:#173f40;--muted:#668384;--sea:#0b9298;--sea-dark:#08777d;--coral:#ee7468;--sun:#ffd15b;--mint:#e9f6f2;--line:#d4e9e4;--paper:#f4faf7;--white:#fffdf8;--rail:#df5246;--flight:#087e8b;--transfer:#f0b429;--hotel:#27865f}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;color:var(--ink);background:var(--paper);font-family:Inter,"PingFang SC","Microsoft YaHei",system-ui,sans-serif}.archive-shell{display:grid;grid-template-columns:280px minmax(0,1fr);min-height:100vh}.archive-nav{position:sticky;top:0;height:100vh;padding:28px 20px;overflow:auto;color:#fff;background:linear-gradient(160deg,var(--sea-dark),var(--sea));border-right:6px solid var(--sun)}.archive-brand{margin:0;color:#d8fff3;font-size:11px;font-weight:850;letter-spacing:.08em;text-transform:uppercase}.archive-nav h1{margin:12px 0 8px;color:#fffdf7;font-size:29px}.archive-nav>p{margin:0 0 24px;color:#d3efea;font-size:11px;line-height:1.7}.trip-nav{display:grid;gap:8px}.trip-nav button{width:100%;padding:12px;color:#eafff8;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);border-radius:10px;cursor:pointer;text-align:left}.trip-nav button.active,.trip-nav button:hover{color:#17484a;background:#fffdf7;border-color:#fff}.trip-nav strong,.trip-nav span{display:block}.trip-nav strong{font-size:12px}.trip-nav span{margin-top:4px;font-size:9px;opacity:.78}.archive-meta{margin-top:24px;padding-top:18px;border-top:1px solid rgba(255,255,255,.2);color:#c8e9e4;font-size:9px;line-height:1.6}.archive-main{min-width:0;padding:32px clamp(20px,4vw,58px) 70px}.hero{position:relative;min-height:210px;padding:34px;overflow:hidden;color:#fff;background:linear-gradient(130deg,var(--sea-dark),var(--sea) 72%,#3bb6aa);border-radius:22px;box-shadow:0 18px 42px rgba(26,94,91,.16)}.hero:before{position:absolute;top:-45px;right:60px;width:130px;height:130px;content:"";background:var(--sun);border-radius:50%;box-shadow:0 0 0 18px rgba(255,255,255,.09)}.hero>*{position:relative;z-index:1}.hero small{color:#ffe39b;font-size:10px;font-weight:850;letter-spacing:.08em}.hero h2{max-width:650px;margin:15px 0 7px;font-size:clamp(28px,5vw,48px);line-height:1.12}.hero p{max-width:680px;margin:0;color:#d9f5ef;line-height:1.7}.stats{display:flex;flex-wrap:wrap;gap:9px;margin-top:22px}.stats span{padding:7px 10px;background:rgba(255,255,255,.11);border:1px solid rgba(255,255,255,.18);border-radius:999px;font-size:10px;font-weight:750}.section{margin-top:28px}.section-head{display:flex;align-items:end;justify-content:space-between;gap:16px;margin-bottom:13px}.section-head h3{margin:0;font-size:19px}.section-head span{color:var(--muted);font-size:10px}.map-card{padding:15px;background:#fff;border:1px solid var(--line);border-radius:15px}.map-card svg{display:block;width:100%;height:340px;background:linear-gradient(#dceff0,#c7e5e5);border-radius:10px}.map-legend{display:flex;flex-wrap:wrap;gap:12px;margin-top:10px;color:var(--muted);font-size:9px}.map-legend i{display:inline-block;width:18px;height:3px;margin-right:5px;vertical-align:middle;background:var(--flight);border-radius:3px}.map-legend i.rail{background:var(--rail)}.map-legend i.transfer{background:var(--transfer)}.map-legend i.place{width:8px;height:8px;background:var(--hotel);border-radius:50%}.timeline{display:grid;gap:12px}.day{padding:18px;background:#fff;border:1px solid var(--line);border-radius:14px}.day h4{margin:0 0 13px;font-size:16px}.event{display:grid;grid-template-columns:70px minmax(0,1fr);gap:12px;padding:11px 0;border-top:1px dashed var(--line)}.event:first-of-type{border-top:0}.event time{color:var(--muted);font-size:10px}.event strong,.event span{display:block}.event strong{font-size:12px}.event span{margin-top:4px;color:var(--muted);font-size:10px;line-height:1.55}.media-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.media-card{overflow:hidden;background:#fff;border:1px solid var(--line);border-radius:13px}.media-card img{display:block;width:100%;aspect-ratio:1.2;object-fit:cover;background:#dcebe7}.media-card div{padding:12px}.media-card strong,.media-card span{display:block}.media-card strong{font-size:11px}.media-card span{margin-top:5px;color:var(--muted);font-size:9px;line-height:1.5}.place-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.place-card{padding:14px;background:#fff;border:1px solid var(--line);border-radius:12px}.place-card strong{display:block;font-size:11px}.place-card span{display:block;margin-top:5px;color:var(--muted);font-size:9px;line-height:1.5}.empty{padding:32px;color:var(--muted);background:#fff;border:1px dashed var(--line);border-radius:13px;text-align:center;font-size:11px}.footer{margin-top:34px;padding:18px;color:var(--muted);background:#e8f5f1;border-radius:12px;font-size:9px;line-height:1.6;text-align:center}@media(max-width:860px){.archive-shell{display:block}.archive-nav{position:relative;height:auto;border-right:0;border-bottom:6px solid var(--sun)}.trip-nav{grid-template-columns:repeat(2,minmax(0,1fr))}.archive-main{padding:20px 16px 50px}.media-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.place-list{grid-template-columns:1fr 1fr}.map-card svg{height:270px}}@media(max-width:480px){.trip-nav{grid-template-columns:1fr}.hero{min-height:0;padding:25px 21px}.hero:before{right:-10px}.media-grid,.place-list{grid-template-columns:1fr}.event{grid-template-columns:58px minmax(0,1fr)}}
  </style>
</head>
<body>
  <div class="archive-shell">
    <aside class="archive-nav"><p class="archive-brand">TRIP JOURNAL ARCHIVE</p><h1>我的旅行纪念册</h1><p>这是一份永久离线、只读的旅行归档。无需登录，也无需连接网络。</p><nav class="trip-nav" id="archiveTripNav"></nav><div class="archive-meta" id="archiveMeta"></div></aside>
    <main class="archive-main" id="archiveMain"></main>
  </div>
  <script id="archiveData" type="application/json">__TRAVEL_ARCHIVE_DATA__</script>
  <script>
    (function(){
      const data=JSON.parse(document.getElementById('archiveData').textContent);const nav=document.getElementById('archiveTripNav');const main=document.getElementById('archiveMain');const meta=document.getElementById('archiveMeta');let current='';
      const esc=value=>String(value??'').replace(/[\u0026<>"']/g,char=>({'\u0026':'\u0026amp;','<':'\u0026lt;','>':'\u0026gt;','"':'\u0026quot;',"'":'\u0026#39;'}[char]));
      const date=value=>{const match=String(value||'').match(/^(\d{4})-(\d{2})-(\d{2})/);return match?Number(match[2])+'月'+Number(match[3])+'日':'日期待定'};
      const time=value=>String(value||'').match(/T(\d{2}:\d{2})/)?.[1]||'待定';
      const tripEntries=id=>data.entries.filter(entry=>entry.tripId===id);
      const locationName=location=>location?.name||location?.city||'';
      function mapSvg(entries){const points=[];const routes=[];entries.forEach(entry=>{if(entry.type==='itinerary'){if(entry.from&&entry.to&&Number.isFinite(Number(entry.from.lat))&&Number.isFinite(Number(entry.to.lat))){const a={lat:Number(entry.from.lat),lon:Number(entry.from.lon),name:locationName(entry.from)};const b={lat:Number(entry.to.lat),lon:Number(entry.to.lon),name:locationName(entry.to)};points.push(a,b);routes.push({a,b,kind:entry.kind})}else if(entry.location&&Number.isFinite(Number(entry.location.lat))){points.push({lat:Number(entry.location.lat),lon:Number(entry.location.lon),name:locationName(entry.location),kind:'hotel'})}}if((entry.type==='photo'||entry.type==='place')&&Number.isFinite(Number(entry.lat)))points.push({lat:Number(entry.lat),lon:Number(entry.lon),name:entry.locationName||entry.title,kind:entry.type})});if(!points.length)return '<div class="empty">这本游记还没有可绘制的地点。</div>';const unique=[];const seen=new Set;points.forEach(point=>{const key=point.lat.toFixed(5)+'|'+point.lon.toFixed(5)+'|'+point.name;if(!seen.has(key)){seen.add(key);unique.push(point)}});const lats=unique.map(p=>p.lat),lons=unique.map(p=>p.lon);let minLat=Math.min(...lats),maxLat=Math.max(...lats),minLon=Math.min(...lons),maxLon=Math.max(...lons);if(maxLat-minLat<.05){maxLat+=.025;minLat-=.025}if(maxLon-minLon<.05){maxLon+=.025;minLon-=.025}const project=p=>({x:42+(p.lon-minLon)/(maxLon-minLon)*716,y:300-(p.lat-minLat)/(maxLat-minLat)*260});const routeHtml=routes.map(route=>{const a=project(route.a),b=project(route.b);const color=route.kind==='flight'?'#087e8b':route.kind==='train'?'#df5246':'#f0b429';const dash=route.kind==='train'?'8 7':route.kind==='flight'?'4 8':'3 7';return '<line x1="'+a.x+'" y1="'+a.y+'" x2="'+b.x+'" y2="'+b.y+'" stroke="'+color+'" stroke-width="4" stroke-dasharray="'+dash+'" stroke-linecap="round"/>'}).join('');const pointHtml=unique.map((point,index)=>{const p=project(point);const color=point.kind==='photo'?'#ee7468':point.kind==='hotel'?'#27865f':'#0b9298';const anchor=p.x>610?'end':'start';const tx=p.x>610?p.x-10:p.x+10;const ty=Math.max(16,Math.min(326,p.y-11-(index%3)*13));return '<g><circle cx="'+p.x+'" cy="'+p.y+'" r="6" fill="'+color+'" stroke="#fff" stroke-width="3"/><text x="'+tx+'" y="'+ty+'" text-anchor="'+anchor+'" font-size="9" font-family="Microsoft YaHei,sans-serif" fill="#173f40" paint-order="stroke" stroke="#fff" stroke-width="4">'+esc(point.name||('地点'+(index+1)))+'</text></g>'}).join('');return '<div class="map-card"><svg viewBox="0 0 800 340" role="img" aria-label="离线路线示意图"><path d="M0 275 C160 235 270 305 430 265 C580 225 680 280 800 240 L800 340 L0 340Z" fill="#b8ddd1" opacity=".78"/>'+routeHtml+pointHtml+'</svg><div class="map-legend"><span><i></i>飞机</span><span><i class="rail"></i>高铁</span><span><i class="transfer"></i>接驳</span><span><i class="place"></i>地点与照片</span></div></div>'}
      function itineraryHtml(entries){const items=entries.filter(e=>e.type==='itinerary').sort((a,b)=>String(a.startAt||'').localeCompare(String(b.startAt||'')));if(!items.length)return '<div class="empty">还没有行程记录。</div>';const groups=new Map;items.forEach(item=>{const key=String(item.startAt||'').slice(0,10)||'日期待定';if(!groups.has(key))groups.set(key,[]);groups.get(key).push(item)});return '<div class="timeline">'+Array.from(groups.entries()).map(([day,rows])=>'<section class="day"><h4>'+esc(date(day))+'</h4>'+rows.map(item=>{const route=item.kind==='hotel'?(locationName(item.location)||item.title):[locationName(item.from),locationName(item.to)].filter(Boolean).join(' → ');const detail=[route,item.traveler,item.status,item.note].filter(Boolean).join(' · ');return '<div class="event"><time>'+esc(time(item.startAt))+'</time><div><strong>'+esc(item.title||'未命名行程')+'</strong><span>'+esc(detail)+'</span></div></div>'}).join('')+'</section>').join('')+'</div>'}
      function mediaHtml(entries,type){const items=entries.filter(e=>e.type===type&&e.archiveImage);if(!items.length)return '<div class="empty">还没有'+(type==='photo'?'照片足迹':'票据图片')+'。</div>';return '<div class="media-grid">'+items.map(item=>'<article class="media-card"><a href="'+esc(item.archiveImage)+'" target="_blank"><img src="'+esc(item.archiveImage)+'" alt="'+esc(item.title)+'"></a><div><strong>'+esc(item.title||'未命名记录')+'</strong><span>'+esc([date(item.date||item.startAt),item.locationName||item.category,item.note].filter(Boolean).join(' · '))+'</span></div></article>').join('')+'</div>'}
      function placesHtml(entries){const items=entries.filter(e=>e.type==='place');if(!items.length)return '<div class="empty">还没有自定义打卡点。</div>';return '<div class="place-list">'+items.map(item=>'<article class="place-card"><strong>'+esc(item.title)+'</strong><span>'+esc([item.category,date(item.date),item.note].filter(Boolean).join(' · '))+'</span></article>').join('')+'</div>'}
      function section(title,sub,content){return '<section class="section"><header class="section-head"><h3>'+title+'</h3><span>'+sub+'</span></header>'+content+'</section>'}
      function openTrip(id){current=id;const trip=data.trips.find(item=>item.id===id)||data.trips[0];if(!trip)return;const entries=tripEntries(trip.id);const itineraryCount=entries.filter(e=>e.type==='itinerary').length;const photoCount=entries.filter(e=>e.type==='photo').length;const ticketCount=entries.filter(e=>e.type==='ticket').length;nav.querySelectorAll('button').forEach(button=>button.classList.toggle('active',button.dataset.trip===trip.id));main.innerHTML='<header class="hero"><small>'+esc(trip.destination||'TRAVEL STORY')+'</small><h2>'+esc(trip.title)+'</h2><p>'+esc(trip.subtitle||'把沿途的风景和故事留在这里。')+'</p><div class="stats"><span>'+esc(date(trip.startDate))+' - '+esc(date(trip.endDate))+'</span><span>'+itineraryCount+' 项行程</span><span>'+photoCount+' 张照片</span><span>'+ticketCount+' 张票据</span></div></header>'+section('离线路线图','不依赖网络的坐标示意',mapSvg(entries))+section('行程时间线','按开始时间排列',itineraryHtml(entries))+section('照片足迹',photoCount+' 张',mediaHtml(entries,'photo'))+section('自定义打卡点',entries.filter(e=>e.type==='place').length+' 个',placesHtml(entries))+section('票据与订单截图',ticketCount+' 张',mediaHtml(entries,'ticket'))+'<footer class="footer">此页面由“风迹 · 旅行游记”导出，仅供离线查看。原始资料请与整个文件夹一起保存，不要单独移动 index.html。</footer>';window.scrollTo({top:0,behavior:'smooth'})}
      nav.innerHTML=data.trips.map(trip=>'<button type="button" data-trip="'+esc(trip.id)+'"><strong>'+esc(trip.title)+'</strong><span>'+esc(date(trip.startDate)+' · '+(trip.destination||trip.subtitle||'旅行记录'))+'</span></button>').join('');nav.addEventListener('click',event=>{const button=event.target.closest('[data-trip]');if(button)openTrip(button.dataset.trip)});meta.innerHTML='导出时间：'+esc(new Date(data.exportedAt).toLocaleString('zh-CN'))+'<br>归档账号：'+esc(data.userEmail||'未记录')+'<br>共 '+data.trips.length+' 本游记 · '+data.entries.length+' 条记录';openTrip(data.trips[0]?.id);
    })();
  </script>
</body>
</html>