travel.html 40 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152
  1. <!DOCTYPE html>
  2. <html lang="zh-CN"><head>
  3. <meta charset="utf-8"/>
  4. <meta content="width=device-width, initial-scale=1.0" name="viewport"/>
  5. <title>闽南文化|趣游漳州</title>
  6. <script src="https://modao.cc/agent-py/static/source/js/tailwindcss.js"></script>
  7. <script src="https://modao.cc/agent-py/static/source/js/iconify-icon.min.js"></script>
  8. <style>
  9. *{-webkit-tap-highlight-color:transparent}body{margin:0;background:#e9e4da;font-family:"PingFang SC","Microsoft YaHei",sans-serif}.hide-scroll::-webkit-scrollbar{display:none}.hide-scroll{-ms-overflow-style:none;scrollbar-width:none}.brick{background-color:#a73529;background-image:linear-gradient(90deg,rgba(255,240,213,.09) 1px,transparent 1px),linear-gradient(rgba(255,240,213,.09) 1px,transparent 1px);background-size:34px 15px}.map-paper{background-color:#f5e8c9;background-image:radial-gradient(circle at 20% 25%,#b9d2ad 0 25px,transparent 26px),radial-gradient(circle at 74% 66%,#b8d6df 0 39px,transparent 40px),linear-gradient(28deg,transparent 47%,rgba(175,107,60,.18) 48% 50%,transparent 51%)}.bounce{animation:bounce 1.8s ease-in-out infinite}@keyframes bounce{50%{transform:translateY(-5px)}}
  10. </style>
  11. </head>
  12. <body class="min-h-screen flex items-center justify-center p-3 sm:p-8 is-mb-ai-setting">
  13. <main class="w-[375px] h-[812px] overflow-hidden bg-[#f9f3e7] flex flex-col">
  14. <header class="flex-none brick text-white px-4 pt-3 pb-4 shadow-md">
  15. <div class="flex items-center justify-between text-[11px]"><span class="font-semibold">9:41</span><div class="flex gap-1.5"><iconify-icon icon="solar:cellular-linear"></iconify-icon><iconify-icon icon="solar:wifi-router-linear"></iconify-icon><iconify-icon icon="solar:battery-charge-linear"></iconify-icon></div></div>
  16. <div class="mt-2 flex items-end justify-between"><div><h1 class="text-[22px] font-bold tracking-[.18em]">趣游漳州</h1></div><button aria-label="小程序菜单" class="w-14 h-7 rounded-full border border-white/40 bg-white/15 flex items-center justify-center gap-1" onclick="toast('小程序菜单已展开')"><span class="w-1 h-1 rounded-full bg-white"></span><span class="w-1 h-1 rounded-full bg-white"></span><span class="w-3 h-3 rounded-full border border-white"></span></button></div>
  17. <div class="mt-3 flex gap-2"><div class="flex-1 h-10 rounded-xl bg-white flex items-center px-3 text-[#8a372d]"><iconify-icon icon="ph:magnifying-glass" width="18"></iconify-icon><input class="min-w-0 flex-1 bg-transparent px-2 text-[11px] outline-none placeholder:text-[#b69083]" id="search" onkeydown="if(event.key==='Enter')searchTravel()" placeholder="逛古城、拍土楼、吃卤面…"/><button onclick="searchTravel()"><iconify-icon icon="ph:arrow-right-bold"></iconify-icon></button></div></div>
  18. </header>
  19. <div class="flex-1 min-h-0 overflow-y-auto hide-scroll pb-5" id="scroller">
  20. <section class="mt-5 px-4"><div class="flex items-end justify-between"><div><h2 class="text-[16px] font-bold text-[#843428]">文化地图</h2></div><button class="flex items-center gap-1 text-[10px] text-[#a83f2d]" onclick="locateMe()"><iconify-icon icon="ph:navigation-arrow" width="14"></iconify-icon>自动定位</button></div><div aria-label="文化地图主题图层" class="mt-3 flex gap-2 overflow-x-auto hide-scroll"><button class="layer shrink-0 rounded-full bg-[#a83f2d] px-3 py-1.5 text-[9px] text-white" onclick="switchLayer(this,'古城人文')">古城人文</button><button class="layer shrink-0 rounded-full border border-[#dcc598] px-3 py-1.5 text-[9px] text-[#765c4c]" onclick="switchLayer(this,'世遗土楼')">世遗土楼</button><button class="layer shrink-0 rounded-full border border-[#dcc598] px-3 py-1.5 text-[9px] text-[#765c4c]" onclick="switchLayer(this,'东山滨海')">东山滨海</button><button class="layer shrink-0 rounded-full border border-[#dcc598] px-3 py-1.5 text-[9px] text-[#765c4c]" onclick="switchLayer(this,'闽南美食')">闽南美食</button></div><div class="map-paper relative mt-3 h-[250px] overflow-hidden rounded-2xl border border-[#d7a94e] p-3"><div class="flex items-center justify-between"><span class="rounded-md bg-white/90 px-2 py-1 text-[10px] text-[#765c4c]" id="layerName">古城人文图层</span><div class="flex overflow-hidden rounded-md border border-[#c08a43] bg-white/90 text-[9px]"><button class="mode bg-[#a83f2d] px-2 py-1.5 text-white" onclick="routeMode(this,'步行')">步行</button><button class="mode px-2 py-1.5 text-[#765c4c]" onclick="routeMode(this,'自驾')">自驾</button></div></div><button class="bounce absolute left-[15%] top-[26%] flex flex-col items-center text-[#a83f2d]" onclick="openSpot('土楼','09:00-17:30','免费','土楼手绘章')"><iconify-icon icon="ph:buildings-fill" width="29"></iconify-icon><span class="mt-1 rounded bg-white/90 px-1 text-[9px]">土楼</span></button><button class="absolute left-[51%] top-[27%] flex flex-col items-center text-[#a83f2d]" onclick="openSpot('漳州文庙','08:30-18:00','免费','文脉印记')"><iconify-icon icon="ph:bank-fill" width="29"></iconify-icon><span class="mt-1 rounded bg-white/90 px-1 text-[9px]">文庙</span></button><button class="absolute left-[68%] top-[57%] flex flex-col items-center text-[#287b8e]" onclick="navigateTo('漳州古城水岸')"><iconify-icon icon="ph:boat-fill" width="30"></iconify-icon><span class="mt-1 rounded bg-white/90 px-1 text-[9px]">漳船</span></button><button class="absolute left-[32%] bottom-[18%] flex flex-col items-center text-[#a65b2d]" onclick="navigateTo('古城美食街')"><iconify-icon icon="ph:bowl-food-fill" width="28"></iconify-icon><span class="mt-1 rounded bg-white/90 px-1 text-[9px]">卤面</span></button><button class="absolute left-[52%] bottom-[18%] flex flex-col items-center text-[#4c8c61]" onclick="navigateTo('木偶戏馆')"><iconify-icon icon="ph:leaf-fill" width="28"></iconify-icon><span class="mt-1 rounded bg-white/90 px-1 text-[9px]">木偶戏</span></button><button class="absolute bottom-3 right-3 rounded-full bg-[#a83f2d] px-3 py-1.5 text-[9px] text-white shadow" onclick="navigateTo('古城人文点位')"><iconify-icon icon="ph:map-pin-line" width="12"></iconify-icon>导航</button></div></section><section class="mt-6"><div class="px-4 flex justify-between"><h2 class="text-[16px] font-bold text-[#843428]">主题路线</h2><span class="text-[9px] text-[#a47c45]">向左滑动,查看更多路线</span></div><div class="mt-3 flex gap-3 overflow-x-auto hide-scroll px-4" id="routes"><article class="shrink-0 w-[238px] rounded-2xl border border-[#dec18b] bg-white p-4 shadow-sm"><div class="flex justify-between"><span class="w-10 h-10 rounded-xl bg-[#f2dfba] text-[#9a3b2d] flex items-center justify-center"><iconify-icon icon="ph:buildings-duotone" width="25"></iconify-icon></span><button class="save text-[#aa8a6f]" onclick="toggleSave(this,'古城逛吃一日线')"><iconify-icon icon="ph:heart-duotone" width="21"></iconify-icon></button></div><b class="mt-3 block text-[13px] text-[#673d33]">古城逛吃一日线</b><p class="mt-1 h-8 text-[9px] leading-4 text-[#8d7768]">文庙 + 牌坊 + 木偶戏 + 小吃老街</p><button class="mt-3 w-full rounded-lg bg-[#a83f2d] py-2 text-[10px] text-white" onclick="navigateTo('古城逛吃一日线')">一键导航</button></article><article class="shrink-0 w-[238px] rounded-2xl border border-[#dec18b] bg-white p-4 shadow-sm"><div class="flex justify-between"><span class="w-10 h-10 rounded-xl bg-[#f2dfba] text-[#9a3b2d] flex items-center justify-center"><iconify-icon icon="ph:camera-duotone" width="25"></iconify-icon></span><button class="save text-[#aa8a6f]" onclick="toggleSave(this,'土楼风光摄影线')"><iconify-icon icon="ph:heart-duotone" width="21"></iconify-icon></button></div><b class="mt-3 block text-[13px] text-[#673d33]">土楼风光摄影线</b><p class="mt-1 h-8 text-[9px] leading-4 text-[#8d7768]">田螺坑四菜一汤 + 云水谣古榕</p><button class="mt-3 w-full rounded-lg bg-[#a83f2d] py-2 text-[10px] text-white" onclick="navigateTo('土楼风光摄影线')">一键导航</button></article><article class="shrink-0 w-[238px] rounded-2xl border border-[#dec18b] bg-white p-4 shadow-sm"><div class="flex justify-between"><span class="w-10 h-10 rounded-xl bg-[#f2dfba] text-[#9a3b2d] flex items-center justify-center"><iconify-icon icon="ph:waves-duotone" width="25"></iconify-icon></span><button class="save text-[#aa8a6f]" onclick="toggleSave(this,'东山滨海治愈线')"><iconify-icon icon="ph:heart-duotone" width="21"></iconify-icon></button></div><b class="mt-3 block text-[13px] text-[#673d33]">东山滨海治愈线</b><p class="mt-1 h-8 text-[9px] leading-4 text-[#8d7768]">苏峰山环岛 + 南门湾 + 赶海沙滩</p><button class="mt-3 w-full rounded-lg bg-[#a83f2d] py-2 text-[10px] text-white" onclick="navigateTo('东山滨海治愈线')">一键导航</button></article><article class="shrink-0 w-[238px] rounded-2xl border border-[#dec18b] bg-white p-4 shadow-sm"><div class="flex justify-between"><span class="w-10 h-10 rounded-xl bg-[#f2dfba] text-[#9a3b2d] flex items-center justify-center"><iconify-icon icon="ph:student-duotone" width="25"></iconify-icon></span><button class="save text-[#aa8a6f]" onclick="toggleSave(this,'亲子民俗研学线')"><iconify-icon icon="ph:heart-duotone" width="21"></iconify-icon></button></div><b class="mt-3 block text-[13px] text-[#673d33]">亲子民俗研学线</b><p class="mt-1 h-8 text-[9px] leading-4 text-[#8d7768]">香蕉海 + 埭美古村 + 手工体验</p><button class="mt-3 w-full rounded-lg bg-[#a83f2d] py-2 text-[10px] text-white" onclick="navigateTo('亲子民俗研学线')">一键导航</button></article><article class="shrink-0 w-[238px] rounded-2xl border border-[#dec18b] bg-white p-4 shadow-sm"><div class="flex justify-between"><span class="w-10 h-10 rounded-xl bg-[#f2dfba] text-[#9a3b2d] flex items-center justify-center"><iconify-icon icon="ph:buildings-duotone" width="25"></iconify-icon></span><button class="save text-[#aa8a6f]" onclick="toggleSave(this,'古城逛吃一日线')"><iconify-icon icon="ph:heart-duotone" width="21"></iconify-icon></button></div><b class="mt-3 block text-[13px] text-[#673d33]">古城逛吃一日线</b><p class="mt-1 h-8 text-[9px] leading-4 text-[#8d7768]">文庙 + 牌坊 + 木偶戏 + 小吃老街</p><button class="mt-3 w-full rounded-lg bg-[#a83f2d] py-2 text-[10px] text-white" onclick="navigateTo('古城逛吃一日线')">一键导航</button></article><article class="shrink-0 w-[238px] rounded-2xl border border-[#dec18b] bg-white p-4 shadow-sm"><div class="flex justify-between"><span class="w-10 h-10 rounded-xl bg-[#f2dfba] text-[#9a3b2d] flex items-center justify-center"><iconify-icon icon="ph:camera-duotone" width="25"></iconify-icon></span><button class="save text-[#aa8a6f]" onclick="toggleSave(this,'土楼风光摄影线')"><iconify-icon icon="ph:heart-duotone" width="21"></iconify-icon></button></div><b class="mt-3 block text-[13px] text-[#673d33]">土楼风光摄影线</b><p class="mt-1 h-8 text-[9px] leading-4 text-[#8d7768]">田螺坑四菜一汤 + 云水谣古榕</p><button class="mt-3 w-full rounded-lg bg-[#a83f2d] py-2 text-[10px] text-white" onclick="navigateTo('土楼风光摄影线')">一键导航</button></article><article class="shrink-0 w-[238px] rounded-2xl border border-[#dec18b] bg-white p-4 shadow-sm"><div class="flex justify-between"><span class="w-10 h-10 rounded-xl bg-[#f2dfba] text-[#9a3b2d] flex items-center justify-center"><iconify-icon icon="ph:waves-duotone" width="25"></iconify-icon></span><button class="save text-[#aa8a6f]" onclick="toggleSave(this,'东山滨海治愈线')"><iconify-icon icon="ph:heart-duotone" width="21"></iconify-icon></button></div><b class="mt-3 block text-[13px] text-[#673d33]">东山滨海治愈线</b><p class="mt-1 h-8 text-[9px] leading-4 text-[#8d7768]">苏峰山环岛 + 南门湾 + 赶海沙滩</p><button class="mt-3 w-full rounded-lg bg-[#a83f2d] py-2 text-[10px] text-white" onclick="navigateTo('东山滨海治愈线')">一键导航</button></article><article class="shrink-0 w-[238px] rounded-2xl border border-[#dec18b] bg-white p-4 shadow-sm"><div class="flex justify-between"><span class="w-10 h-10 rounded-xl bg-[#f2dfba] text-[#9a3b2d] flex items-center justify-center"><iconify-icon icon="ph:student-duotone" width="25"></iconify-icon></span><button class="save text-[#aa8a6f]" onclick="toggleSave(this,'亲子民俗研学线')"><iconify-icon icon="ph:heart-duotone" width="21"></iconify-icon></button></div><b class="mt-3 block text-[13px] text-[#673d33]">亲子民俗研学线</b><p class="mt-1 h-8 text-[9px] leading-4 text-[#8d7768]">香蕉海 + 埭美古村 + 手工体验</p><button class="mt-3 w-full rounded-lg bg-[#a83f2d] py-2 text-[10px] text-white" onclick="navigateTo('亲子民俗研学线')">一键导航</button></article><article class="shrink-0 w-[238px] rounded-2xl border border-[#dec18b] bg-white p-4 shadow-sm"><div class="flex justify-between"><span class="w-10 h-10 rounded-xl bg-[#f2dfba] text-[#9a3b2d] flex items-center justify-center"><iconify-icon icon="ph:buildings-duotone" width="25"></iconify-icon></span><button class="save text-[#aa8a6f]" onclick="toggleSave(this,'古城逛吃一日线')"><iconify-icon icon="ph:heart-duotone" width="21"></iconify-icon></button></div><b class="mt-3 block text-[13px] text-[#673d33]">古城逛吃一日线</b><p class="mt-1 h-8 text-[9px] leading-4 text-[#8d7768]">文庙 + 牌坊 + 木偶戏 + 小吃老街</p><button class="mt-3 w-full rounded-lg bg-[#a83f2d] py-2 text-[10px] text-white" onclick="navigateTo('古城逛吃一日线')">一键导航</button></article><article class="shrink-0 w-[238px] rounded-2xl border border-[#dec18b] bg-white p-4 shadow-sm"><div class="flex justify-between"><span class="w-10 h-10 rounded-xl bg-[#f2dfba] text-[#9a3b2d] flex items-center justify-center"><iconify-icon icon="ph:camera-duotone" width="25"></iconify-icon></span><button class="save text-[#aa8a6f]" onclick="toggleSave(this,'土楼风光摄影线')"><iconify-icon icon="ph:heart-duotone" width="21"></iconify-icon></button></div><b class="mt-3 block text-[13px] text-[#673d33]">土楼风光摄影线</b><p class="mt-1 h-8 text-[9px] leading-4 text-[#8d7768]">田螺坑四菜一汤 + 云水谣古榕</p><button class="mt-3 w-full rounded-lg bg-[#a83f2d] py-2 text-[10px] text-white" onclick="navigateTo('土楼风光摄影线')">一键导航</button></article><article class="shrink-0 w-[238px] rounded-2xl border border-[#dec18b] bg-white p-4 shadow-sm"><div class="flex justify-between"><span class="w-10 h-10 rounded-xl bg-[#f2dfba] text-[#9a3b2d] flex items-center justify-center"><iconify-icon icon="ph:waves-duotone" width="25"></iconify-icon></span><button class="save text-[#aa8a6f]" onclick="toggleSave(this,'东山滨海治愈线')"><iconify-icon icon="ph:heart-duotone" width="21"></iconify-icon></button></div><b class="mt-3 block text-[13px] text-[#673d33]">东山滨海治愈线</b><p class="mt-1 h-8 text-[9px] leading-4 text-[#8d7768]">苏峰山环岛 + 南门湾 + 赶海沙滩</p><button class="mt-3 w-full rounded-lg bg-[#a83f2d] py-2 text-[10px] text-white" onclick="navigateTo('东山滨海治愈线')">一键导航</button></article><article class="shrink-0 w-[238px] rounded-2xl border border-[#dec18b] bg-white p-4 shadow-sm"><div class="flex justify-between"><span class="w-10 h-10 rounded-xl bg-[#f2dfba] text-[#9a3b2d] flex items-center justify-center"><iconify-icon icon="ph:student-duotone" width="25"></iconify-icon></span><button class="save text-[#aa8a6f]" onclick="toggleSave(this,'亲子民俗研学线')"><iconify-icon icon="ph:heart-duotone" width="21"></iconify-icon></button></div><b class="mt-3 block text-[13px] text-[#673d33]">亲子民俗研学线</b><p class="mt-1 h-8 text-[9px] leading-4 text-[#8d7768]">香蕉海 + 埭美古村 + 手工体验</p><button class="mt-3 w-full rounded-lg bg-[#a83f2d] py-2 text-[10px] text-white" onclick="navigateTo('亲子民俗研学线')">一键导航</button></article><article class="shrink-0 w-[238px] rounded-2xl border border-[#dec18b] bg-white p-4 shadow-sm"><div class="flex justify-between"><span class="w-10 h-10 rounded-xl bg-[#f2dfba] text-[#9a3b2d] flex items-center justify-center"><iconify-icon icon="ph:buildings-duotone" width="25"></iconify-icon></span><button class="save text-[#aa8a6f]" onclick="toggleSave(this,'古城逛吃一日线')"><iconify-icon icon="ph:heart-duotone" width="21"></iconify-icon></button></div><b class="mt-3 block text-[13px] text-[#673d33]">古城逛吃一日线</b><p class="mt-1 h-8 text-[9px] leading-4 text-[#8d7768]">文庙 + 牌坊 + 木偶戏 + 小吃老街</p><button class="mt-3 w-full rounded-lg bg-[#a83f2d] py-2 text-[10px] text-white" onclick="navigateTo('古城逛吃一日线')">一键导航</button></article><article class="shrink-0 w-[238px] rounded-2xl border border-[#dec18b] bg-white p-4 shadow-sm"><div class="flex justify-between"><span class="w-10 h-10 rounded-xl bg-[#f2dfba] text-[#9a3b2d] flex items-center justify-center"><iconify-icon icon="ph:camera-duotone" width="25"></iconify-icon></span><button class="save text-[#aa8a6f]" onclick="toggleSave(this,'土楼风光摄影线')"><iconify-icon icon="ph:heart-duotone" width="21"></iconify-icon></button></div><b class="mt-3 block text-[13px] text-[#673d33]">土楼风光摄影线</b><p class="mt-1 h-8 text-[9px] leading-4 text-[#8d7768]">田螺坑四菜一汤 + 云水谣古榕</p><button class="mt-3 w-full rounded-lg bg-[#a83f2d] py-2 text-[10px] text-white" onclick="navigateTo('土楼风光摄影线')">一键导航</button></article><article class="shrink-0 w-[238px] rounded-2xl border border-[#dec18b] bg-white p-4 shadow-sm"><div class="flex justify-between"><span class="w-10 h-10 rounded-xl bg-[#f2dfba] text-[#9a3b2d] flex items-center justify-center"><iconify-icon icon="ph:waves-duotone" width="25"></iconify-icon></span><button class="save text-[#aa8a6f]" onclick="toggleSave(this,'东山滨海治愈线')"><iconify-icon icon="ph:heart-duotone" width="21"></iconify-icon></button></div><b class="mt-3 block text-[13px] text-[#673d33]">东山滨海治愈线</b><p class="mt-1 h-8 text-[9px] leading-4 text-[#8d7768]">苏峰山环岛 + 南门湾 + 赶海沙滩</p><button class="mt-3 w-full rounded-lg bg-[#a83f2d] py-2 text-[10px] text-white" onclick="navigateTo('东山滨海治愈线')">一键导航</button></article><article class="shrink-0 w-[238px] rounded-2xl border border-[#dec18b] bg-white p-4 shadow-sm"><div class="flex justify-between"><span class="w-10 h-10 rounded-xl bg-[#f2dfba] text-[#9a3b2d] flex items-center justify-center"><iconify-icon icon="ph:student-duotone" width="25"></iconify-icon></span><button class="save text-[#aa8a6f]" onclick="toggleSave(this,'亲子民俗研学线')"><iconify-icon icon="ph:heart-duotone" width="21"></iconify-icon></button></div><b class="mt-3 block text-[13px] text-[#673d33]">亲子民俗研学线</b><p class="mt-1 h-8 text-[9px] leading-4 text-[#8d7768]">香蕉海 + 埭美古村 + 手工体验</p><button class="mt-3 w-full rounded-lg bg-[#a83f2d] py-2 text-[10px] text-white" onclick="navigateTo('亲子民俗研学线')">一键导航</button></article><article class="shrink-0 w-[238px] rounded-2xl border border-[#dec18b] bg-white p-4 shadow-sm"><div class="flex justify-between"><span class="w-10 h-10 rounded-xl bg-[#f2dfba] text-[#9a3b2d] flex items-center justify-center"><iconify-icon icon="ph:buildings-duotone" width="25"></iconify-icon></span><button class="save text-[#aa8a6f]" onclick="toggleSave(this,'古城逛吃一日线')"><iconify-icon icon="ph:heart-duotone" width="21"></iconify-icon></button></div><b class="mt-3 block text-[13px] text-[#673d33]">古城逛吃一日线</b><p class="mt-1 h-8 text-[9px] leading-4 text-[#8d7768]">文庙 + 牌坊 + 木偶戏 + 小吃老街</p><button class="mt-3 w-full rounded-lg bg-[#a83f2d] py-2 text-[10px] text-white" onclick="navigateTo('古城逛吃一日线')">一键导航</button></article><article class="shrink-0 w-[238px] rounded-2xl border border-[#dec18b] bg-white p-4 shadow-sm"><div class="flex justify-between"><span class="w-10 h-10 rounded-xl bg-[#f2dfba] text-[#9a3b2d] flex items-center justify-center"><iconify-icon icon="ph:camera-duotone" width="25"></iconify-icon></span><button class="save text-[#aa8a6f]" onclick="toggleSave(this,'土楼风光摄影线')"><iconify-icon icon="ph:heart-duotone" width="21"></iconify-icon></button></div><b class="mt-3 block text-[13px] text-[#673d33]">土楼风光摄影线</b><p class="mt-1 h-8 text-[9px] leading-4 text-[#8d7768]">田螺坑四菜一汤 + 云水谣古榕</p><button class="mt-3 w-full rounded-lg bg-[#a83f2d] py-2 text-[10px] text-white" onclick="navigateTo('土楼风光摄影线')">一键导航</button></article><article class="shrink-0 w-[238px] rounded-2xl border border-[#dec18b] bg-white p-4 shadow-sm"><div class="flex justify-between"><span class="w-10 h-10 rounded-xl bg-[#f2dfba] text-[#9a3b2d] flex items-center justify-center"><iconify-icon icon="ph:waves-duotone" width="25"></iconify-icon></span><button class="save text-[#aa8a6f]" onclick="toggleSave(this,'东山滨海治愈线')"><iconify-icon icon="ph:heart-duotone" width="21"></iconify-icon></button></div><b class="mt-3 block text-[13px] text-[#673d33]">东山滨海治愈线</b><p class="mt-1 h-8 text-[9px] leading-4 text-[#8d7768]">苏峰山环岛 + 南门湾 + 赶海沙滩</p><button class="mt-3 w-full rounded-lg bg-[#a83f2d] py-2 text-[10px] text-white" onclick="navigateTo('东山滨海治愈线')">一键导航</button></article><article class="shrink-0 w-[238px] rounded-2xl border border-[#dec18b] bg-white p-4 shadow-sm"><div class="flex justify-between"><span class="w-10 h-10 rounded-xl bg-[#f2dfba] text-[#9a3b2d] flex items-center justify-center"><iconify-icon icon="ph:student-duotone" width="25"></iconify-icon></span><button class="save text-[#aa8a6f]" onclick="toggleSave(this,'亲子民俗研学线')"><iconify-icon icon="ph:heart-duotone" width="21"></iconify-icon></button></div><b class="mt-3 block text-[13px] text-[#673d33]">亲子民俗研学线</b><p class="mt-1 h-8 text-[9px] leading-4 text-[#8d7768]">香蕉海 + 埭美古村 + 手工体验</p><button class="mt-3 w-full rounded-lg bg-[#a83f2d] py-2 text-[10px] text-white" onclick="navigateTo('亲子民俗研学线')">一键导航</button></article><article class="shrink-0 w-[238px] rounded-2xl border border-[#dec18b] bg-white p-4 shadow-sm"><div class="flex justify-between"><span class="w-10 h-10 rounded-xl bg-[#f2dfba] text-[#9a3b2d] flex items-center justify-center"><iconify-icon icon="ph:buildings-duotone" width="25"></iconify-icon></span><button class="save text-[#aa8a6f]" onclick="toggleSave(this,'古城逛吃一日线')"><iconify-icon icon="ph:heart-duotone" width="21"></iconify-icon></button></div><b class="mt-3 block text-[13px] text-[#673d33]">古城逛吃一日线</b><p class="mt-1 h-8 text-[9px] leading-4 text-[#8d7768]">文庙 + 牌坊 + 木偶戏 + 小吃老街</p><button class="mt-3 w-full rounded-lg bg-[#a83f2d] py-2 text-[10px] text-white" onclick="navigateTo('古城逛吃一日线')">一键导航</button></article><article class="shrink-0 w-[238px] rounded-2xl border border-[#dec18b] bg-white p-4 shadow-sm"><div class="flex justify-between"><span class="w-10 h-10 rounded-xl bg-[#f2dfba] text-[#9a3b2d] flex items-center justify-center"><iconify-icon icon="ph:camera-duotone" width="25"></iconify-icon></span><button class="save text-[#aa8a6f]" onclick="toggleSave(this,'土楼风光摄影线')"><iconify-icon icon="ph:heart-duotone" width="21"></iconify-icon></button></div><b class="mt-3 block text-[13px] text-[#673d33]">土楼风光摄影线</b><p class="mt-1 h-8 text-[9px] leading-4 text-[#8d7768]">田螺坑四菜一汤 + 云水谣古榕</p><button class="mt-3 w-full rounded-lg bg-[#a83f2d] py-2 text-[10px] text-white" onclick="navigateTo('土楼风光摄影线')">一键导航</button></article><article class="shrink-0 w-[238px] rounded-2xl border border-[#dec18b] bg-white p-4 shadow-sm"><div class="flex justify-between"><span class="w-10 h-10 rounded-xl bg-[#f2dfba] text-[#9a3b2d] flex items-center justify-center"><iconify-icon icon="ph:waves-duotone" width="25"></iconify-icon></span><button class="save text-[#aa8a6f]" onclick="toggleSave(this,'东山滨海治愈线')"><iconify-icon icon="ph:heart-duotone" width="21"></iconify-icon></button></div><b class="mt-3 block text-[13px] text-[#673d33]">东山滨海治愈线</b><p class="mt-1 h-8 text-[9px] leading-4 text-[#8d7768]">苏峰山环岛 + 南门湾 + 赶海沙滩</p><button class="mt-3 w-full rounded-lg bg-[#a83f2d] py-2 text-[10px] text-white" onclick="navigateTo('东山滨海治愈线')">一键导航</button></article><article class="shrink-0 w-[238px] rounded-2xl border border-[#dec18b] bg-white p-4 shadow-sm"><div class="flex justify-between"><span class="w-10 h-10 rounded-xl bg-[#f2dfba] text-[#9a3b2d] flex items-center justify-center"><iconify-icon icon="ph:student-duotone" width="25"></iconify-icon></span><button class="save text-[#aa8a6f]" onclick="toggleSave(this,'亲子民俗研学线')"><iconify-icon icon="ph:heart-duotone" width="21"></iconify-icon></button></div><b class="mt-3 block text-[13px] text-[#673d33]">亲子民俗研学线</b><p class="mt-1 h-8 text-[9px] leading-4 text-[#8d7768]">香蕉海 + 埭美古村 + 手工体验</p><button class="mt-3 w-full rounded-lg bg-[#a83f2d] py-2 text-[10px] text-white" onclick="navigateTo('亲子民俗研学线')">一键导航</button></article><article class="shrink-0 w-[238px] rounded-2xl border border-[#dec18b] bg-white p-4 shadow-sm"><div class="flex justify-between"><span class="w-10 h-10 rounded-xl bg-[#f2dfba] text-[#9a3b2d] flex items-center justify-center"><iconify-icon icon="ph:buildings-duotone" width="25"></iconify-icon></span><button class="save text-[#aa8a6f]" onclick="toggleSave(this,'古城逛吃一日线')"><iconify-icon icon="ph:heart-duotone" width="21"></iconify-icon></button></div><b class="mt-3 block text-[13px] text-[#673d33]">古城逛吃一日线</b><p class="mt-1 h-8 text-[9px] leading-4 text-[#8d7768]">文庙 + 牌坊 + 木偶戏 + 小吃老街</p><button class="mt-3 w-full rounded-lg bg-[#a83f2d] py-2 text-[10px] text-white" onclick="navigateTo('古城逛吃一日线')">一键导航</button></article><article class="shrink-0 w-[238px] rounded-2xl border border-[#dec18b] bg-white p-4 shadow-sm"><div class="flex justify-between"><span class="w-10 h-10 rounded-xl bg-[#f2dfba] text-[#9a3b2d] flex items-center justify-center"><iconify-icon icon="ph:camera-duotone" width="25"></iconify-icon></span><button class="save text-[#aa8a6f]" onclick="toggleSave(this,'土楼风光摄影线')"><iconify-icon icon="ph:heart-duotone" width="21"></iconify-icon></button></div><b class="mt-3 block text-[13px] text-[#673d33]">土楼风光摄影线</b><p class="mt-1 h-8 text-[9px] leading-4 text-[#8d7768]">田螺坑四菜一汤 + 云水谣古榕</p><button class="mt-3 w-full rounded-lg bg-[#a83f2d] py-2 text-[10px] text-white" onclick="navigateTo('土楼风光摄影线')">一键导航</button></article><article class="shrink-0 w-[238px] rounded-2xl border border-[#dec18b] bg-white p-4 shadow-sm"><div class="flex justify-between"><span class="w-10 h-10 rounded-xl bg-[#f2dfba] text-[#9a3b2d] flex items-center justify-center"><iconify-icon icon="ph:waves-duotone" width="25"></iconify-icon></span><button class="save text-[#aa8a6f]" onclick="toggleSave(this,'东山滨海治愈线')"><iconify-icon icon="ph:heart-duotone" width="21"></iconify-icon></button></div><b class="mt-3 block text-[13px] text-[#673d33]">东山滨海治愈线</b><p class="mt-1 h-8 text-[9px] leading-4 text-[#8d7768]">苏峰山环岛 + 南门湾 + 赶海沙滩</p><button class="mt-3 w-full rounded-lg bg-[#a83f2d] py-2 text-[10px] text-white" onclick="navigateTo('东山滨海治愈线')">一键导航</button></article><article class="shrink-0 w-[238px] rounded-2xl border border-[#dec18b] bg-white p-4 shadow-sm"><div class="flex justify-between"><span class="w-10 h-10 rounded-xl bg-[#f2dfba] text-[#9a3b2d] flex items-center justify-center"><iconify-icon icon="ph:student-duotone" width="25"></iconify-icon></span><button class="save text-[#aa8a6f]" onclick="toggleSave(this,'亲子民俗研学线')"><iconify-icon icon="ph:heart-duotone" width="21"></iconify-icon></button></div><b class="mt-3 block text-[13px] text-[#673d33]">亲子民俗研学线</b><p class="mt-1 h-8 text-[9px] leading-4 text-[#8d7768]">香蕉海 + 埭美古村 + 手工体验</p><button class="mt-3 w-full rounded-lg bg-[#a83f2d] py-2 text-[10px] text-white" onclick="navigateTo('亲子民俗研学线')">一键导航</button></article></div></section>
  21. <section class="mt-6 px-4"><div class="flex items-center justify-between"><h2 class="text-[16px] font-bold text-[#843428]">非遗特色</h2><button class="text-[10px] text-[#a47c45]" onclick="toast('非遗特色已为你展开')">查看更多 <iconify-icon icon="ph:arrow-right"></iconify-icon></button></div><div class="mt-3 space-y-3"><article class="rounded-2xl border border-[#dec18b] bg-white p-3 shadow-sm"><div class="flex items-center gap-3"><span class="flex h-11 w-11 shrink-0 items-center justify-center rounded-xl bg-[#f2dfba] text-[#9a3b2d]"><iconify-icon icon="ph:buildings-duotone" width="25"></iconify-icon></span><div class="min-w-0"><h3 class="text-[13px] font-bold text-[#673d33]">特色村镇/街区</h3><p class="mt-1 text-[9px] leading-4 text-[#8d7768]">古城骑楼、牌坊街与红砖古厝,边走边看闽南生活。</p></div></div><button class="mt-3 w-full rounded-lg bg-[#f4e4c7] py-2 text-[10px] text-[#9a3b2d]" onclick="toast('已打开特色村镇/街区详情')">查看街区亮点</button></article><article class="rounded-2xl border border-[#dec18b] bg-white p-3 shadow-sm"><div class="flex items-center gap-3"><span class="flex h-11 w-11 shrink-0 items-center justify-center rounded-xl bg-[#f2dfba] text-[#9a3b2d]"><iconify-icon icon="ph:house-line-duotone" width="25"></iconify-icon></span><div class="min-w-0"><h3 class="text-[13px] font-bold text-[#673d33]">非遗工坊</h3><p class="mt-1 text-[9px] leading-4 text-[#8d7768]">汇集各地非遗工坊资源,呈现传统技艺生产、展示与体验空间。</p></div></div><button class="mt-3 w-full rounded-lg bg-[#f4e4c7] py-2 text-[10px] text-[#9a3b2d]" onclick="toast('已打开特色村镇/街区详情')">探索非遗工坊</button></article></div></section><section class="mt-6 px-4"><div class="flex items-center justify-between"><h2 class="text-[16px] font-bold text-[#843428]">非遗特色住宿</h2><button class="text-[10px] text-[#a47c45]" onclick="toast('更多非遗特色住宿正在加载')">查看更多 <iconify-icon icon="ph:arrow-right"></iconify-icon></button></div><div class="mt-3 space-y-2" id="stays"><article class="rounded-2xl border border-[#dec18b] bg-[#f4e4c7] p-3 shadow-sm"><h3 class="text-[12px] font-bold text-[#673d33]">古城古厝民宿</h3><p class="mt-1 text-[9px] leading-4 text-[#8d7768]">红砖墙风格·看图选房</p><button class="mt-2 text-[10px] text-[#a83f2d]" onclick="book('古城古厝民宿')">在线预订</button></article><article class="rounded-2xl border border-[#dec18b] bg-[#f4e4c7] p-3 shadow-sm"><h3 class="text-[12px] font-bold text-[#673d33]">土楼山间小院</h3><p class="mt-1 text-[9px] leading-4 text-[#8d7768]">推窗见山·看图选房</p><button class="mt-2 text-[10px] text-[#a83f2d]" onclick="book('土楼山间小院')">在线预订</button></article><article class="rounded-2xl border border-[#dec18b] bg-[#f4e4c7] p-3 shadow-sm"><h3 class="text-[12px] font-bold text-[#673d33]">东山海景客栈</h3><p class="mt-1 text-[9px] leading-4 text-[#8d7768]">枕着海浪眠·看图选房</p><button class="mt-2 text-[10px] text-[#a83f2d]" onclick="book('东山海景客栈')">在线预订</button></article></div></section>
  22. </div>
  23. <nav class="flex-none bg-[#fffaf1] border-t border-[#e9dbc5] px-3 pt-2 pb-3"><div class="flex justify-between"><a class="text-[#a79d93] flex flex-col items-center gap-0.5 w-12" href="home.html"><iconify-icon icon="ph:house-duotone" width="21"></iconify-icon><span class="text-[10px]">首页</span></a><a class="text-[#a79d93] flex flex-col items-center gap-0.5 w-12" href="heritage.html"><iconify-icon icon="ph:hand-heart-duotone" width="21"></iconify-icon><span class="text-[10px]">传承</span></a><a class="text-[#a79d93] flex flex-col items-center gap-0.5 w-12" href="explore.html"><iconify-icon icon="ph:compass-duotone" width="21"></iconify-icon><span class="text-[10px]">资讯</span></a><a class="text-[#a83f2d] flex flex-col items-center gap-0.5 w-12" href="travel.html"><iconify-icon icon="ph:map-trifold-fill" width="21"></iconify-icon><span class="text-[10px] font-semibold">文旅</span></a><a class="text-[#a79d93] flex flex-col items-center gap-0.5 w-12" href="profile.html"><iconify-icon icon="ph:user-circle-duotone" width="21"></iconify-icon><span class="text-[10px]">我的</span></a></div></nav>
  24. </main>
  25. <div class="hidden fixed inset-0 z-50 items-center justify-center bg-[#33231f]/55 p-6" id="modal"><div class="w-[320px] rounded-2xl border-2 border-[#d0a354] bg-[#fff9ec] p-5 shadow-xl"><div class="flex justify-between"><div><p class="text-[9px] text-[#b27b30]" id="modalEyebrow">点位信息</p><h2 class="text-[17px] font-bold text-[#843428]" id="modalTitle">漳州文庙</h2></div><button class="text-[#8b6d5c]" onclick="closeModal()"><iconify-icon icon="ph:x-bold"></iconify-icon></button></div><div class="mt-3 text-[11px] leading-6 text-[#80695c]" id="modalBody"></div><div class="mt-4 grid grid-cols-2 gap-2" id="modalActions"></div></div></div>
  26. <div class="fixed left-1/2 top-8 z-[60] max-w-[310px] -translate-x-1/2 rounded-full bg-[#49332d]/95 px-4 py-2 text-center text-xs text-white shadow-lg hidden" id="toast">已切换:古城人文</div>
  27. <script>
  28. const routes=[['古城逛吃一日线','文庙 + 牌坊 + 木偶戏 + 小吃老街','ph:buildings-duotone'],['土楼风光摄影线','田螺坑四菜一汤 + 云水谣古榕','ph:camera-duotone'],['东山滨海治愈线','苏峰山环岛 + 南门湾 + 赶海沙滩','ph:waves-duotone'],['亲子民俗研学线','香蕉海 + 埭美古村 + 手工体验','ph:student-duotone']];
  29. const scenes=[['古城人文片区','文庙 · 文昌门 · 木偶艺术馆','夜景出片 · 免费木偶表演','ph:city-duotone'],['世遗土楼片区','云水谣 · 田螺坑 · 华安二宜楼','土楼体验 · 民宿预约','ph:building-duotone'],['滨海海岛片区','东山岛 · 火山岛','赶海点位 · 海鲜大排档','ph:island-duotone']];
  30. const foods=[['卤面','¥18','百年老字号'],['四果汤','¥12','古城人气'],['五香卷','¥16','非遗小吃店'],['蚵仔煎','¥22','海味现煎'],['姜母鸭','¥68','闽南古早味']];
  31. routes.forEach((r,i)=>document.getElementById('routes').insertAdjacentHTML('beforeend',`<article class="shrink-0 w-[238px] rounded-2xl border border-[#dec18b] bg-white p-4 shadow-sm"><div class="flex justify-between"><span class="w-10 h-10 rounded-xl bg-[#f2dfba] text-[#9a3b2d] flex items-center justify-center"><iconify-icon icon="${r[2]}" width="25"></iconify-icon></span><button class="save text-[#aa8a6f]" onclick="toggleSave(this,'${r[0]}')"><iconify-icon icon="ph:heart-duotone" width="21"></iconify-icon></button></div><b class="mt-3 block text-[13px] text-[#673d33]">${r[0]}</b><p class="mt-1 h-8 text-[9px] leading-4 text-[#8d7768]">${r[1]}</p><button class="mt-3 w-full rounded-lg bg-[#a83f2d] py-2 text-[10px] text-white" onclick="navigateTo('${r[0]}')">一键导航</button></article>`));
  32. scenes.forEach(s=>document.getElementById('scenes')?.insertAdjacentHTML('beforeend',`<article class="shrink-0 w-[250px] overflow-hidden rounded-2xl border border-[#d8bd8b] bg-[#fffaf0]"><div class="h-[105px] bg-gradient-to-br from-[#8f342a] to-[#c69249] flex items-center justify-center text-[#f8dda1]"><iconify-icon icon="${s[3]}" width="52"></iconify-icon></div><div class="p-3"><b class="text-[13px] text-[#663e34]">${s[0]}</b><p class="mt-1 text-[9px] text-[#8e7769]">${s[1]}</p><button class="mt-2 rounded-full bg-[#f1e1bf] px-2 py-1 text-[9px] text-[#9a3b2d]" onclick="toast('${s[2]}')">${s[2]}</button></div></article>`));
  33. foods.forEach(f=>document.getElementById('foods').insertAdjacentHTML('beforeend',`<button class="w-full rounded-xl bg-[#f4e4c7] p-2 text-left" onclick="navigateTo('${f[0]}老店')"><b class="block text-[11px] text-[#704438]">${f[0]} <span class="float-right text-[#a83f2d]">${f[1]}</span></b><span class="text-[8px] text-[#aa7740]">${f[2]} · 导航</span></button>`));
  34. function toast(msg){const t=document.getElementById('toast');t.textContent=msg;t.classList.remove('hidden');clearTimeout(window.tt);window.tt=setTimeout(()=>t.classList.add('hidden'),1900)}
  35. function locateMe(){toast('定位成功:漳州古城中山公园,已更新附近点位')}
  36. function searchTravel(){const q=document.getElementById('search').value.trim();if(!q)return toast('试试搜索:古城、土楼、卤面、木偶或海景房');const types=['景点','美食','民宿','活动'];toast(`为你找到 8 个与“${q}”相关的${types[Math.floor(Math.random()*types.length)]}结果`)}
  37. function switchLayer(btn,name){document.querySelectorAll('.layer').forEach(x=>x.className='layer shrink-0 rounded-full border border-[#dcc598] px-3 py-1.5 text-[9px] text-[#765c4c]');btn.className='layer shrink-0 rounded-full bg-[#a83f2d] px-3 py-1.5 text-[9px] text-white';document.getElementById('layerName').textContent=name+'图层';toast('已切换:'+name)}
  38. function routeMode(btn,name){document.querySelectorAll('.mode').forEach(x=>x.className='mode px-2 py-1.5 text-[#765c4c]');btn.className='mode bg-[#a83f2d] px-2 py-1.5 text-white';toast('路线模式已切换为'+name)}
  39. function openSpot(name,hours,ticket,stamp){openModal('点位信息',name,`<p>开放时间:${hours}</p><p>门票:${ticket}</p><p class="mt-2 rounded-lg bg-[#f2e4c8] p-2 text-[#9a3b2d]">抵达后自动领取:${stamp}</p>`,`<button class="rounded-lg border border-[#d5b67d] py-2 text-[10px] text-[#8b4935]" onclick="toast('已打开${name}预约入口');closeModal()">预约入口</button><button class="rounded-lg bg-[#a83f2d] py-2 text-[10px] text-white" onclick="navigateTo('${name}');closeModal()">一键导航</button>`)}
  40. function openModal(eyebrow,title,body,actions){document.getElementById('modalEyebrow').textContent=eyebrow;document.getElementById('modalTitle').textContent=title;document.getElementById('modalBody').innerHTML=body;document.getElementById('modalActions').innerHTML=actions;const m=document.getElementById('modal');m.classList.remove('hidden');m.classList.add('flex')}
  41. function closeModal(){const m=document.getElementById('modal');m.classList.add('hidden');m.classList.remove('flex')}
  42. function toggleSave(btn,name){const icon=btn.querySelector('iconify-icon');const saved=icon.getAttribute('icon').includes('fill');icon.setAttribute('icon',saved?'ph:heart-duotone':'ph:heart-fill');btn.classList.toggle('text-[#a83f2d]');toast(saved?'已取消收藏:'+name:'已收藏:'+name)}
  43. function navigateTo(name){toast('已规划前往“'+name+'”的最佳路线')}
  44. function book(name){openModal('特色住宿',name,'<p>可查看庭院、房型与窗景照片,当前周末尚有余房。</p><p class="mt-2 text-[#a83f2d]">到店前 24 小时可免费取消</p>',`<button class="col-span-2 rounded-lg bg-[#a83f2d] py-2 text-[10px] text-white" onclick="toast('预订信息已提交');closeModal()">选择房型并预订</button>`)}
  45. function registerEvent(name){openModal('活动报名',name,'<p>报名成功后将生成活动码,现场打卡可领取限定木偶徽章。</p>',`<button class="col-span-2 rounded-lg bg-[#a83f2d] py-2 text-[10px] text-white" onclick="toast('报名成功,活动码已存入我的行程');closeModal()">确认报名</button>`)}
  46. function assistant(name){openModal('便民助手',name,`<p>已为你整理最新的${name}信息,并结合当前位置给出省心建议。</p>`,`<button class="col-span-2 rounded-lg bg-[#a83f2d] py-2 text-[10px] text-white" onclick="toast('指南已加入行程');closeModal()">加入我的行程</button>`)}
  47. function openFeedback(){openModal('阿偶听你说','游玩建议','<textarea id="feedback" class="h-24 w-full resize-none rounded-xl border border-[#ddc99f] bg-white p-3 text-[11px] outline-none" placeholder="说说你的建议或遇到的问题…"></textarea>',`<button class="col-span-2 rounded-lg bg-[#a83f2d] py-2 text-[10px] text-white" onclick="toast(document.getElementById('feedback').value.trim()?'建议已提交,多谢你!':'请先写下建议');if(document.getElementById('feedback').value.trim())closeModal()">轻松提交</button>`)}
  48. function showSchedule(){openModal('近期排期','布袋木偶演出','<p>今日 14:30《大名府》</p><p>今日 19:30《雷万春打虎》</p><p>周末 10:30 亲子幕后探班</p>',`<button class="col-span-2 rounded-lg bg-[#a83f2d] py-2 text-[10px] text-white" onclick="registerEvent('布袋木偶演出')">预约演出</button>`)}
  49. let left=8316;setInterval(()=>{left--;const h=String(Math.floor(left/3600)).padStart(2,'0'),m=String(Math.floor(left%3600/60)).padStart(2,'0'),s=String(left%60).padStart(2,'0');document.getElementById('countdown').textContent=`${h}:${m}:${s}`},1000);
  50. </script>
  51. </body></html>