explore.html 34 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465
  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{scrollbar-width:none;-ms-overflow-style:none}.hide-scroll::-webkit-scrollbar{display:none}.paper{background-color:#faf3e5;background-image:radial-gradient(circle at 15% 10%,rgba(159,55,40,.06) 0 1px,transparent 1px),radial-gradient(circle at 70% 30%,rgba(181,135,48,.05) 0 1px,transparent 1px);background-size:20px 20px,27px 27px}.floaty{animation:float 4s ease-in-out infinite}.marquee{animation:marquee 22s linear infinite}.marquee:hover{animation-play-state:paused}.card-rise{transition:transform .25s,box-shadow .25s}.card-rise:active{transform:translateY(-5px) scale(1.02);box-shadow:0 12px 24px rgba(91,43,30,.2)}@keyframes float{50%{transform:translateY(-5px)}}@keyframes marquee{to{transform:translateX(-50%)}}@keyframes pulseCut{50%{transform:scale(.9);opacity:.55}}.cut-pulse{animation:pulseCut 1.2s ease-in-out infinite}.modal{background:rgba(55,37,30,.45)}
  10. </style>
  11. </head>
  12. <body class="min-h-screen flex items-start justify-center p-3 sm:p-8">
  13. <main class="relative w-[375px] h-[812px] overflow-hidden bg-[#faf3e5] flex flex-col paper">
  14. <header class="relative flex-none overflow-hidden bg-[#9d3829] px-4 pt-3 pb-5 text-white">
  15. <div class="absolute inset-0 opacity-20" style="background-image:linear-gradient(35deg,transparent 45%,#f6d69a 46%,transparent 47%),linear-gradient(145deg,transparent 45%,#f6d69a 46%,transparent 47%);background-size:32px 32px"></div>
  16. <div class="relative flex items-center justify-between"><div><h1 class="text-[21px] font-bold tracking-[.24em]">资讯</h1></div><button aria-label="小程序工具" class="h-8 rounded-full border border-white/35 bg-white/15 px-2 flex items-center gap-2" onclick="toast('小程序快捷工具已打开')"><span class="w-4 h-1 rounded-full bg-white"></span><span class="w-4 h-4 rounded-full border border-white text-[9px] flex items-center justify-center">···</span></button></div>
  17. <div class="relative mt-4 flex gap-2"><label class="relative flex-1 h-10 bg-[#fffaf1] text-[#8a7566] flex items-center px-3 gap-2 shadow-sm"><iconify-icon icon="ph:magnifying-glass" width="18"></iconify-icon><input class="min-w-0 flex-1 bg-transparent outline-none text-[12px] text-[#51433e] placeholder:text-[#aa9787]" id="search" oninput="searchAll()" placeholder="试试“古厝日落”或“亲子研学”"/><iconify-icon class="text-[#d29b3d]" icon="ph:lantern-duotone" width="18"></iconify-icon></label><button aria-label="消息通知" class="relative w-10 h-10 rounded-full bg-[#f5d390] text-[#983726] flex items-center justify-center" onclick="openModal('festivalModal')"><iconify-icon icon="ph:bell-ringing-duotone" width="19"></iconify-icon><span class="absolute right-0 top-0 w-2.5 h-2.5 rounded-full bg-[#e33e32] border-2 border-[#9d3829]"></span></button></div>
  18. <div class="absolute left-1 bottom-0 text-[#f7d795]/30"></div><div class="absolute right-6 bottom-0 text-[#f7d795]/25"></div>
  19. </header>
  20. <div class="relative flex-1 min-h-0 overflow-y-auto hide-scroll" id="scroller" onscroll="maybeLoadMore()">
  21. <div class="hidden px-5 py-14 text-center" id="empty"><div class="mx-auto w-28 h-24 bg-[#f2dfc1] flex items-center justify-center text-[#a83f2d]"><iconify-icon icon="ph:map-pin-line-duotone" width="48"></iconify-icon></div><h2 class="mt-4 text-[15px] font-bold text-[#78473b]">这条巷子暂时没有线索</h2><p class="mt-1 text-[11px] text-[#9a8273]">换个关键词吧,好料总在下一转角。</p><button class="mt-4 bg-[#a83f2d] px-4 py-2 text-xs text-white" onclick="clearSearch()">看看全部</button></div>
  22. <div id="content">
  23. <section class="px-4 pt-4">
  24. <div class="hide-scroll flex gap-2 overflow-x-auto whitespace-nowrap" id="newsTabs"><button class="news-tab bg-[#a83f2d] text-white border-[#a83f2d] flex items-center gap-1.5 border px-3 py-2 text-[11px]" onclick="switchNews(this,'宣传传播')"><iconify-icon icon="ph:megaphone-duotone"></iconify-icon>宣传传播</button><button class="news-tab bg-white text-[#765f52] border-[#e4d0b2] flex items-center gap-1.5 border px-3 py-2 text-[11px]" onclick="switchNews(this,'非遗教育')"><iconify-icon icon="ph:student-duotone"></iconify-icon>非遗教育</button><button class="news-tab bg-white text-[#765f52] border-[#e4d0b2] flex items-center gap-1.5 border px-3 py-2 text-[11px]" onclick="switchNews(this,'建设动态')"><iconify-icon icon="ph:house-line-duotone"></iconify-icon>建设动态</button><button class="news-tab bg-white text-[#765f52] border-[#e4d0b2] flex items-center gap-1.5 border px-3 py-2 text-[11px]" onclick="switchNews(this,'政策法规')" style="opacity: 1;"><iconify-icon icon="ph:scroll-duotone"></iconify-icon>政策法规</button></div>
  25. <div class="mt-3 border border-[#e6c98f] bg-[#9d3829] px-3 py-2 text-white flex items-center justify-between"><span class="flex items-center gap-2 text-[11px]"><iconify-icon class="text-[#f5d390]" icon="ph:lantern-duotone" width="19"></iconify-icon>古城七夕灯游会</span><b class="text-[12px] text-[#f8dda2]">还剩 11 天</b></div>
  26. <div class="mt-2 bg-white border border-[#eadcc5] divide-y divide-[#f0e6d6]" id="newsList" ontouchend="dialectEgg()"><button class="w-full p-3 text-left flex gap-3" onclick="toast('正在阅读:专题展示:漳州非遗名录')"><span class="w-7 h-7 flex-none bg-[#f7e6df] text-[#a83f2d] flex items-center justify-center"><iconify-icon icon="ph:buildings-duotone"></iconify-icon></span><span class="min-w-0"><b class="block text-[12px] text-[#533e37] truncate">专题展示:漳州非遗名录</b><small class="mt-1 block text-[9px] text-[#99877b]">一览闽南文化生态保护区代表性项目</small></span></button><button class="w-full p-3 text-left flex gap-3" onclick="toast('正在阅读:品牌活动持续上新')"><span class="w-7 h-7 flex-none bg-[#f7e6df] text-[#a83f2d] flex items-center justify-center"><iconify-icon icon="ph:newspaper-clipping-duotone"></iconify-icon></span><span class="min-w-0"><b class="block text-[12px] text-[#533e37] truncate">品牌活动持续上新</b><small class="mt-1 block text-[9px] text-[#99877b]">古城灯会、南音雅集等品牌活动预告</small></span></button><button class="w-full p-3 text-left flex gap-3" onclick="toast('正在阅读:闽南文化交流开启新篇')"><span class="w-7 h-7 flex-none bg-[#f7e6df] text-[#a83f2d] flex items-center justify-center"><iconify-icon icon="ph:newspaper-clipping-duotone"></iconify-icon></span><span class="min-w-0"><b class="block text-[12px] text-[#533e37] truncate">闽南文化交流开启新篇</b><small class="mt-1 block text-[9px] text-[#99877b]">跨区域文化交流与合作成果</small></span></button><button class="w-full p-3 text-left flex gap-3" onclick="toast('正在阅读:宣传报道:守护漳州非遗')"><span class="w-7 h-7 flex-none bg-[#f7e6df] text-[#a83f2d] flex items-center justify-center"><iconify-icon icon="ph:newspaper-clipping-duotone"></iconify-icon></span><span class="min-w-0"><b class="block text-[12px] text-[#533e37] truncate">宣传报道:守护漳州非遗</b><small class="mt-1 block text-[9px] text-[#99877b]">记录传承人和保护工作一线</small></span></button><button class="w-full p-3 text-left flex gap-3" onclick="toast('正在阅读:非遗宣传物料上线')"><span class="w-7 h-7 flex-none bg-[#f7e6df] text-[#a83f2d] flex items-center justify-center"><iconify-icon icon="ph:newspaper-clipping-duotone"></iconify-icon></span><span class="min-w-0"><b class="block text-[12px] text-[#533e37] truncate">非遗宣传物料上线</b><small class="mt-1 block text-[9px] text-[#99877b]">主题海报与公共文化宣传手册</small></span></button><button class="w-full p-3 text-left flex gap-3" onclick="toast('正在阅读:视觉形象焕新发布')"><span class="w-7 h-7 flex-none bg-[#f7e6df] text-[#a83f2d] flex items-center justify-center"><iconify-icon icon="ph:newspaper-clipping-duotone"></iconify-icon></span><span class="min-w-0"><b class="block text-[12px] text-[#533e37] truncate">视觉形象焕新发布</b><small class="mt-1 block text-[9px] text-[#99877b]">统一保护区文化视觉识别</small></span></button><button class="w-full p-3 text-left flex gap-3" onclick="toast('正在阅读:保护区标识牌更新')"><span class="w-7 h-7 flex-none bg-[#f7e6df] text-[#a83f2d] flex items-center justify-center"><iconify-icon icon="ph:newspaper-clipping-duotone"></iconify-icon></span><span class="min-w-0"><b class="block text-[12px] text-[#533e37] truncate">保护区标识牌更新</b><small class="mt-1 block text-[9px] text-[#99877b]">古厝街巷新增文化保护指引</small></span></button></div>
  27. </section>
  28. <div class="mx-4 my-5 flex items-center gap-2 text-[#b68635]"><span class="h-px flex-1 bg-[#dbbd83]"></span><iconify-icon class="floaty" icon="ph:boat-duotone" width="25"></iconify-icon><iconify-icon icon="ph:lantern-duotone" width="20"></iconify-icon><span class="h-px flex-1 bg-[#dbbd83]"></span></div>
  29. <section>
  30. <div class="px-4 flex items-end justify-between"><div><h2 class="text-[16px] font-bold text-[#8f3426]">特色推荐</h2></div><button class="text-[11px] text-[#a83f2d]" onclick="toast('已为你展开更多特色成果')">查看更多</button></div>
  31. <div class="mt-3 overflow-hidden"><div class="marquee flex w-max gap-3 pl-4" id="achievementTrack"><article class="card-rise shrink-0 w-[220px] overflow-hidden bg-white border border-[#ddc18c] shadow-sm" onclick="collectPiece(0)"><div class="relative h-[104px] bg-gradient-to-br from-[#8f3528] to-[#d1a052] overflow-hidden"><img alt="Minnan travel landmark visitor photo" class="w-full h-full object-cover opacity-20" src="/agent-py/static/source/images/placeholder.svg"/><div class="absolute inset-0 flex items-center justify-center text-[#ffe5a3]"><iconify-icon icon="ph:buildings-duotone" width="47"></iconify-icon></div><span class="absolute left-2 top-2 bg-[#fff4d8] px-2 py-1 text-[9px] text-[#9b3929]">拍照出片</span></div><div class="p-3"><div class="flex justify-between"><h3 class="text-[13px] font-bold text-[#563d35]">漳州古城香港路</h3><iconify-icon class="text-[#c28b32]" icon="ph:puzzle-piece-duotone" width="19"></iconify-icon></div><p class="mt-1 text-[10px] text-[#917c6d]">骑楼红砖与百年商铺,一步一景。</p><div class="mt-3 flex items-center justify-between"><span class="text-[9px] text-[#a83f2d]">任务:找到一扇燕尾脊门楼</span><button class="bg-[#a83f2d] px-2 py-1 text-[9px] text-white" onclick="event.stopPropagation();toast('导航路线规划完成')">导航</button></div></div></article><article class="card-rise shrink-0 w-[220px] overflow-hidden bg-white border border-[#ddc18c] shadow-sm" onclick="collectPiece(1)"><div class="relative h-[104px] bg-gradient-to-br from-[#8f3528] to-[#d1a052] overflow-hidden"><img alt="Minnan travel landmark visitor photo" class="w-full h-full object-cover opacity-20" src="/agent-py/static/source/images/placeholder.svg"/><div class="absolute inset-0 flex items-center justify-center text-[#ffe5a3]"><iconify-icon icon="ph:buildings-duotone" width="47"></iconify-icon></div><span class="absolute left-2 top-2 bg-[#fff4d8] px-2 py-1 text-[9px] text-[#9b3929]">亲子遛娃</span></div><div class="p-3"><div class="flex justify-between"><h3 class="text-[13px] font-bold text-[#563d35]">东山南门湾</h3><iconify-icon class="text-[#c28b32]" icon="ph:puzzle-piece-duotone" width="19"></iconify-icon></div><p class="mt-1 text-[10px] text-[#917c6d]">沿海堤慢走,等一场橘色日落。</p><div class="mt-3 flex items-center justify-between"><span class="text-[9px] text-[#a83f2d]">任务:收集三种海浪声音</span><button class="bg-[#a83f2d] px-2 py-1 text-[9px] text-white" onclick="event.stopPropagation();toast('导航路线规划完成')">导航</button></div></div></article><article class="card-rise shrink-0 w-[220px] overflow-hidden bg-white border border-[#ddc18c] shadow-sm" onclick="collectPiece(2)"><div class="relative h-[104px] bg-gradient-to-br from-[#8f3528] to-[#d1a052] overflow-hidden"><img alt="Minnan travel landmark visitor photo" class="w-full h-full object-cover opacity-20" src="/agent-py/static/source/images/placeholder.svg"/><div class="absolute inset-0 flex items-center justify-center text-[#ffe5a3]"><iconify-icon icon="ph:buildings-duotone" width="47"></iconify-icon></div><span class="absolute left-2 top-2 bg-[#fff4d8] px-2 py-1 text-[9px] text-[#9b3929]">小众秘境</span></div><div class="p-3"><div class="flex justify-between"><h3 class="text-[13px] font-bold text-[#563d35]">埭美古村</h3><iconify-icon class="text-[#c28b32]" icon="ph:puzzle-piece-duotone" width="19"></iconify-icon></div><p class="mt-1 text-[10px] text-[#917c6d]">水上红砖古厝群,安静又从容。</p><div class="mt-3 flex items-center justify-between"><span class="text-[9px] text-[#a83f2d]">任务:辨认五种红砖纹样</span><button class="bg-[#a83f2d] px-2 py-1 text-[9px] text-white" onclick="event.stopPropagation();toast('导航路线规划完成')">导航</button></div></div></article><article class="card-rise shrink-0 w-[220px] overflow-hidden bg-white border border-[#ddc18c] shadow-sm" onclick="collectPiece(0)"><div class="relative h-[104px] bg-gradient-to-br from-[#8f3528] to-[#d1a052] overflow-hidden"><img alt="Minnan travel landmark visitor photo" class="w-full h-full object-cover opacity-20" src="/agent-py/static/source/images/placeholder.svg"/><div class="absolute inset-0 flex items-center justify-center text-[#ffe5a3]"><iconify-icon icon="ph:buildings-duotone" width="47"></iconify-icon></div><span class="absolute left-2 top-2 bg-[#fff4d8] px-2 py-1 text-[9px] text-[#9b3929]">拍照出片</span></div><div class="p-3"><div class="flex justify-between"><h3 class="text-[13px] font-bold text-[#563d35]">漳州古城香港路</h3><iconify-icon class="text-[#c28b32]" icon="ph:puzzle-piece-duotone" width="19"></iconify-icon></div><p class="mt-1 text-[10px] text-[#917c6d]">骑楼红砖与百年商铺,一步一景。</p><div class="mt-3 flex items-center justify-between"><span class="text-[9px] text-[#a83f2d]">任务:找到一扇燕尾脊门楼</span><button class="bg-[#a83f2d] px-2 py-1 text-[9px] text-white" onclick="event.stopPropagation();toast('导航路线规划完成')">导航</button></div></div></article><article class="card-rise shrink-0 w-[220px] overflow-hidden bg-white border border-[#ddc18c] shadow-sm" onclick="collectPiece(1)"><div class="relative h-[104px] bg-gradient-to-br from-[#8f3528] to-[#d1a052] overflow-hidden"><img alt="Minnan travel landmark visitor photo" class="w-full h-full object-cover opacity-20" src="/agent-py/static/source/images/placeholder.svg"/><div class="absolute inset-0 flex items-center justify-center text-[#ffe5a3]"><iconify-icon icon="ph:buildings-duotone" width="47"></iconify-icon></div><span class="absolute left-2 top-2 bg-[#fff4d8] px-2 py-1 text-[9px] text-[#9b3929]">亲子遛娃</span></div><div class="p-3"><div class="flex justify-between"><h3 class="text-[13px] font-bold text-[#563d35]">东山南门湾</h3><iconify-icon class="text-[#c28b32]" icon="ph:puzzle-piece-duotone" width="19"></iconify-icon></div><p class="mt-1 text-[10px] text-[#917c6d]">沿海堤慢走,等一场橘色日落。</p><div class="mt-3 flex items-center justify-between"><span class="text-[9px] text-[#a83f2d]">任务:收集三种海浪声音</span><button class="bg-[#a83f2d] px-2 py-1 text-[9px] text-white" onclick="event.stopPropagation();toast('导航路线规划完成')">导航</button></div></div></article><article class="card-rise shrink-0 w-[220px] overflow-hidden bg-white border border-[#ddc18c] shadow-sm" onclick="collectPiece(2)"><div class="relative h-[104px] bg-gradient-to-br from-[#8f3528] to-[#d1a052] overflow-hidden"><img alt="Minnan travel landmark visitor photo" class="w-full h-full object-cover opacity-20" src="/agent-py/static/source/images/placeholder.svg"/><div class="absolute inset-0 flex items-center justify-center text-[#ffe5a3]"><iconify-icon icon="ph:buildings-duotone" width="47"></iconify-icon></div><span class="absolute left-2 top-2 bg-[#fff4d8] px-2 py-1 text-[9px] text-[#9b3929]">小众秘境</span></div><div class="p-3"><div class="flex justify-between"><h3 class="text-[13px] font-bold text-[#563d35]">埭美古村</h3><iconify-icon class="text-[#c28b32]" icon="ph:puzzle-piece-duotone" width="19"></iconify-icon></div><p class="mt-1 text-[10px] text-[#917c6d]">水上红砖古厝群,安静又从容。</p><div class="mt-3 flex items-center justify-between"><span class="text-[9px] text-[#a83f2d]">任务:辨认五种红砖纹样</span><button class="bg-[#a83f2d] px-2 py-1 text-[9px] text-white" onclick="event.stopPropagation();toast('导航路线规划完成')">导航</button></div></div></article></div></div>
  32. </section>
  33. <div class="mx-4 my-5 flex items-center gap-2 text-[#a83f2d]"><span class="h-px flex-1 bg-[#dec496]"></span><iconify-icon class="floaty" icon="ph:buildings-duotone" width="25"></iconify-icon><span class="h-px flex-1 bg-[#dec496]"></span></div>
  34. <section class="mt-5 pb-5"></section>
  35. <section class="mx-4 mt-2 border border-[#d8ba7d] bg-[#fffaf0] p-4 relative overflow-hidden"><div class="absolute right-2 top-2 text-[#a83f2d]/10"></div><div class="relative"><h2 class="mt-0.5 text-[16px] font-bold text-[#803426]">工作机制</h2><p class="mt-1 text-[10px] text-[#8f7564]">把文化保护落到机构、管理与人才的每一步。</p><div class="mt-3 grid grid-cols-3 gap-2"><button class="border border-[#e0c58e] bg-[#fdf1d9] px-1 py-3 text-[#8d3829]" onclick="showMechanism('机构建设','完善保护区工作架构,明确职责边界,推动保护、传承与利用协同开展。')"><iconify-icon icon="ph:buildings-duotone" width="22"></iconify-icon><span class="mt-1 block text-[10px] font-bold">机构建设</span><small class="mt-1 block text-[8px] text-[#9b806e]">查看详情</small></button><button class="border border-[#e0c58e] bg-[#fdf1d9] px-1 py-3 text-[#8d3829]" onclick="showMechanism('统筹管理','建立项目清单与年度计划,统筹资源调度,持续跟进重点保护任务进度。')"><iconify-icon icon="ph:clipboard-text-duotone" width="22"></iconify-icon><span class="mt-1 block text-[10px] font-bold">统筹管理</span><small class="mt-1 block text-[8px] text-[#9b806e]">查看详情</small></button><button class="border border-[#e0c58e] bg-[#fdf1d9] px-1 py-3 text-[#8d3829]" onclick="showMechanism('专职人员','配备熟悉地方文化的专职队伍,做好日常巡查、资料整理与公众服务。')"><iconify-icon icon="ph:users-three-duotone" width="22"></iconify-icon><span class="mt-1 block text-[10px] font-bold">专职人员</span><small class="mt-1 block text-[8px] text-[#9b806e]">查看详情</small></button></div></div></section>
  36. <section class="mx-4 mt-2 border border-[#d8ba7d] bg-[#f5e4c6] p-4 relative overflow-hidden"><div class="absolute right-2 top-2 text-[#a83f2d]/10"></div><div class="relative"><h2 class="mt-0.5 text-[16px] font-bold text-[#803426]">意见反馈</h2><p class="mt-1 text-[10px] text-[#8f7564]">一盏茶的时间,一起把保护区变得更好。</p><div class="mt-4 grid grid-cols-2 gap-3"><button class="border border-[#caa459] bg-[#fff9ed] py-3 text-[#8d3829]" onclick="awardBadge('满意度问卷')"><iconify-icon icon="ph:star-duotone" width="22"></iconify-icon><span class="mt-1 block text-[11px] font-bold">我要打分</span></button><button class="border border-[#caa459] bg-[#fff9ed] py-3 text-[#8d3829]" onclick="awardBadge('建议反馈')"><iconify-icon icon="ph:chat-circle-dots-duotone" width="22"></iconify-icon><span class="mt-1 block text-[11px] font-bold">提个小建议</span><small class="block mt-0.5 text-[9px] text-[#9b806e]">含进度查询</small></button></div></div></section>
  37. </div></div>
  38. <div class="hidden absolute z-30 top-28 right-5 max-w-[190px] bg-[#fff6dc] border border-[#d7ad5b] px-3 py-2 text-[10px] text-[#78382c] shadow-lg" id="dialectBubble">食饱未?来去𨑨迌!</div>
  39. <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-[#a83f2d] flex flex-col items-center gap-0.5 w-12" href="explore.html"><iconify-icon icon="ph:compass-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="travel.html"><iconify-icon icon="ph:map-trifold-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="profile.html"><iconify-icon icon="ph:user-circle-duotone" width="21"></iconify-icon><span class="text-[10px]">我的</span></a></div></nav>
  40. </main>
  41. <div class="hidden fixed inset-0 z-50 modal items-center justify-center p-6" id="festivalModal"><div class="w-[320px] bg-[#fff7e7] border-2 border-[#c8933c] p-5 text-center"><iconify-icon class="text-[#a83f2d]" icon="ph:lantern-duotone" width="48"></iconify-icon><h2 class="mt-2 text-[17px] font-bold text-[#843426]">元宵限定推送</h2><p class="mt-2 text-[11px] leading-5 text-[#856e5e]">古城千盏花灯今晚亮起,猜灯谜集章可兑换限定剪纸书签。</p><button class="mt-4 bg-[#a83f2d] px-5 py-2 text-xs text-white" onclick="closeModal('festivalModal')">收下灯会消息</button></div></div>
  42. <div class="hidden fixed inset-0 z-50 modal items-center justify-center p-6" id="gameModal"><div class="w-[320px] bg-[#fff7e7] border-2 border-[#c8933c] p-5"><div class="flex justify-between"><div><p class="text-[9px] text-[#b37a2a]">闽南方言短句闯关</p><h2 class="text-[16px] font-bold text-[#843426]">“足趣味”是什么意思?</h2></div><iconify-icon class="text-[#a83f2d]" icon="ph:mask-happy-duotone" width="35"></iconify-icon></div><div class="mt-4 grid gap-2"><button class="border border-[#dcc69f] bg-white p-2 text-xs text-[#765e50]" onclick="gameAnswer(false)">走路很快</button><button class="border border-[#dcc69f] bg-white p-2 text-xs text-[#765e50]" onclick="gameAnswer(true)">非常有意思</button><button class="border border-[#dcc69f] bg-white p-2 text-xs text-[#765e50]" onclick="gameAnswer(false)">食物很好吃</button></div><p class="mt-3 text-center text-[10px] text-[#9b806c]" id="scoreText">当前打卡积分:120</p><button class="mt-3 w-full text-[11px] text-[#a83f2d]" onclick="closeModal('gameModal')">稍后再玩</button></div></div>
  43. <div class="hidden fixed inset-0 z-50 modal items-center justify-center p-6" id="badgeModal"><div class="w-[300px] bg-[#fff7e7] border-2 border-[#c8933c] p-5 text-center"><div class="mx-auto w-20 h-20 rounded-full bg-[#a83f2d] border-4 border-[#e9c576] flex items-center justify-center text-[#ffe7a8]"><iconify-icon icon="ph:seal-check-duotone" width="42"></iconify-icon></div><h2 class="mt-3 text-[16px] font-bold text-[#843426]">古厝守护者徽章</h2><p class="mt-2 text-[11px] text-[#856e5e]">多谢你!有心就会有好代志。</p><button class="mt-4 bg-[#a83f2d] px-5 py-2 text-xs text-white" onclick="closeModal('badgeModal')">收入徽章册</button></div></div>
  44. <div class="hidden fixed inset-0 z-50 modal items-center justify-center p-6" id="mechanismModal"><div class="w-[320px] bg-[#fff7e7] border-2 border-[#c8933c] p-5"><div class="flex items-start justify-between gap-3"><div><p class="text-[9px] tracking-[.16em] text-[#b37a2a]">工作机制</p><h2 class="mt-1 text-[17px] font-bold text-[#843426]" id="mechanismTitle">机构建设</h2></div><iconify-icon class="text-[#a83f2d]" icon="ph:compass-tool-duotone" width="34"></iconify-icon></div><p class="mt-4 text-[11px] leading-5 text-[#856e5e]" id="mechanismText"></p><button class="mt-4 w-full bg-[#a83f2d] px-5 py-2 text-xs text-white" onclick="closeModal('mechanismModal')">知道了</button></div></div>
  45. <div class="fixed left-1/2 top-8 -translate-x-1/2 z-[60] max-w-[300px] bg-[#49332d]/95 px-4 py-2 text-center text-xs text-white shadow-lg hidden" id="toast">又发现两处闽南好去处</div>
  46. <script>
  47. const placeholder='/agent-py/static/source/images/placeholder.svg';
  48. const news={宣传传播:[['专题展示:漳州非遗名录','一览闽南文化生态保护区代表性项目'],['品牌活动持续上新','古城灯会、南音雅集等品牌活动预告'],['闽南文化交流开启新篇','跨区域文化交流与合作成果'],['宣传报道:守护漳州非遗','记录传承人和保护工作一线'],['非遗宣传物料上线','主题海报与公共文化宣传手册'],['视觉形象焕新发布','统一保护区文化视觉识别'],['保护区标识牌更新','古厝街巷新增文化保护指引']],非遗教育:[['“非遗在校园”工作活动开展','传统技艺走进课堂与校园社团'],['非遗校本教材/通识读本发布','让闽南文化成为可读的乡土教材'],['专业教育合作项目启动','推动非遗传承与专业人才培养'],['师资队伍培训完成','提升非遗教学与实践指导能力']],建设动态:[['古城骑楼修缮进入收尾阶段','燕尾脊与红砖立面焕新'],['九龙江文化廊道新增三处驿站','水岸慢行线路持续完善'],['传统村落数字档案完成更新','新增二百余处古厝记录']],政策法规:[['文化生态保护区专项规划公示','公众意见征集至本月底'],['非遗工坊扶持申报正式启动','支持活态传承与创新转化'],['传统建筑保护导则发布','明确修缮材料与工艺标准']],活动预告:[['古城七夕灯游会即将开启','夜游、灯谜与南音雅集'],['周末布袋木偶公益展演','每日三场,现场免费领票']],学术资讯:[['闽南红砖建筑研讨会发布成果','聚焦在地营造与社区活化'],['方言数字化保护取得新进展','收录日常语料一万余条']]};
  49. const achievements=[{name:'漳州古城香港路',tag:'拍照出片',desc:'骑楼红砖与百年商铺,一步一景。',task:'找到一扇燕尾脊门楼'},{name:'东山南门湾',tag:'亲子遛娃',desc:'沿海堤慢走,等一场橘色日落。',task:'收集三种海浪声音'},{name:'埭美古村',tag:'小众秘境',desc:'水上红砖古厝群,安静又从容。',task:'辨认五种红砖纹样'}];
  50. const spots=[{name:'漳州古城',area:'芗城区',type:'古风古建',distance:'步行可达',icon:'ph:person-simple-walk-duotone',fact:'这里保留了“九街十三巷”的肌理。',quiz:'燕尾脊最常见于?',answer:'闽南古厝'},{name:'东山南门湾',area:'东山县',type:'海边日落',distance:'10 分钟车程',icon:'ph:car-profile-duotone',fact:'电影取景后,这里仍保留渔港日常。',quiz:'最佳追光时段?',answer:'日落前一小时'},{name:'云洞岩',area:'龙文区',type:'徒步登山',distance:'18 分钟车程',icon:'ph:car-profile-duotone',fact:'山中留有历代摩崖石刻二百余处。',quiz:'山石因何得名?',answer:'石洞风起如云'},{name:'埭美古村',area:'龙海区',type:'古风古建',distance:'25 分钟车程',icon:'ph:car-profile-duotone',fact:'古厝沿水而建,排布如整齐棋盘。',quiz:'村中主色是什么?',answer:'红砖红'},{name:'火山岛',area:'漳浦县',type:'亲子游玩',distance:'35 分钟车程',icon:'ph:car-profile-duotone',fact:'海岸可观察独特的玄武岩地貌。',quiz:'岩石来自什么活动?',answer:'火山喷发'},{name:'镇海角',area:'龙海区',type:'海边日落',distance:'40 分钟车程',icon:'ph:car-profile-duotone',fact:'灯塔、草坡与海岸构成开阔天际线。',quiz:'适合观察什么?',answer:'海上日落'}];
  51. let activeFilters=[],visible=3,pieces=0,score=120,loading=false;
  52. function renderNews(type='宣传传播'){document.getElementById('newsList').innerHTML=news[type].map((n,i)=>`<button class="w-full p-3 text-left flex gap-3" onclick="toast('正在阅读:${n[0]}')"><span class="w-7 h-7 flex-none bg-[#f7e6df] text-[#a83f2d] flex items-center justify-center"><iconify-icon icon="${i===0?'ph:buildings-duotone':'ph:newspaper-clipping-duotone'}"></iconify-icon></span><span class="min-w-0"><b class="block text-[12px] text-[#533e37] truncate">${n[0]}</b><small class="mt-1 block text-[9px] text-[#99877b]">${n[1]}</small></span></button>`).join('')}
  53. function switchNews(btn,type){document.querySelectorAll('.news-tab').forEach(x=>x.className='news-tab bg-white text-[#765f52] border-[#e4d0b2] flex items-center gap-1.5 border px-3 py-2 text-[11px]');btn.className='news-tab bg-[#a83f2d] text-white border-[#a83f2d] flex items-center gap-1.5 border px-3 py-2 text-[11px]';renderNews(type)}
  54. function renderAchievements(){const cards=achievements.concat(achievements).map((a,i)=>`<article class="card-rise shrink-0 w-[220px] overflow-hidden bg-white border border-[#ddc18c] shadow-sm" onclick="collectPiece(${i%3})"><div class="relative h-[104px] bg-gradient-to-br from-[#8f3528] to-[#d1a052] overflow-hidden"><img src="${placeholder}" alt="Minnan travel landmark visitor photo" class="w-full h-full object-cover opacity-20"/><div class="absolute inset-0 flex items-center justify-center text-[#ffe5a3]"><iconify-icon icon="ph:buildings-duotone" width="47"></iconify-icon></div><span class="absolute left-2 top-2 bg-[#fff4d8] px-2 py-1 text-[9px] text-[#9b3929]">${a.tag}</span></div><div class="p-3"><div class="flex justify-between"><h3 class="text-[13px] font-bold text-[#563d35]">${a.name}</h3><iconify-icon class="text-[#c28b32]" icon="ph:puzzle-piece-duotone" width="19"></iconify-icon></div><p class="mt-1 text-[10px] text-[#917c6d]">${a.desc}</p><div class="mt-3 flex items-center justify-between"><span class="text-[9px] text-[#a83f2d]">任务:${a.task}</span><button class="bg-[#a83f2d] px-2 py-1 text-[9px] text-white" onclick="event.stopPropagation();toast('导航路线规划完成')">导航</button></div></div></article>`).join('');document.getElementById('achievementTrack').innerHTML=cards}
  55. function collectPiece(index){if(pieces<=index){pieces=index+1;document.getElementById('pieceCount').textContent=pieces;Array.from(document.querySelectorAll('#pieces iconify-icon')).forEach((x,i)=>x.className=i<pieces?'text-[#a83f2d]':'text-[#c6b6a1]');toast('拼图碎片已点亮!');if(pieces===3)setTimeout(()=>{toast('拼图集齐!可前往个人中心收藏页查看')},700)}}
  56. function toggleFilter(btn,type){btn.classList.toggle('bg-[#a83f2d]');btn.classList.toggle('text-white');btn.classList.toggle('border-[#a83f2d]');activeFilters.includes(type)?activeFilters=activeFilters.filter(x=>x!==type):activeFilters.push(type);visible=3;renderSpots()}
  57. function renderSpots(){let list=activeFilters.length?spots.filter(s=>activeFilters.includes(s.type)):spots;const sort=document.getElementById('sort').value;if(sort==='距离最近')list=[...list].sort((a,b)=>parseInt(a.distance)||0-(parseInt(b.distance)||0));if(sort==='热门打卡')list=[...list].reverse();document.getElementById('spotList').innerHTML=list.slice(0,visible).map(s=>`<article class="bg-white border border-[#e4d3b8] p-3"><div class="flex gap-3"><div class="relative w-[94px] h-[94px] flex-none bg-gradient-to-br from-[#8a382c] to-[#c48b47] overflow-hidden"><img src="${placeholder}" alt="Scenic view of ${s.name}" class="w-full h-full object-cover opacity-20"/><div class="absolute inset-0 flex items-center justify-center text-[#ffe0a0]"><iconify-icon icon="ph:map-pin-area-duotone" width="38"></iconify-icon></div></div><div class="min-w-0 flex-1"><div class="flex justify-between"><h3 class="text-[13px] font-bold text-[#553d35]">${s.name}</h3><span class="text-[9px] text-[#9a7b62]">${s.area}</span></div><span class="mt-1 inline-block bg-[#f4e7cf] px-2 py-0.5 text-[9px] text-[#9c572e]">${s.type}</span><p class="mt-2 text-[9px] leading-4 text-[#89766a]">冷知识:${s.fact}</p><span class="mt-1 flex items-center gap-1 text-[9px] text-[#a83f2d]"><iconify-icon icon="${s.icon}"></iconify-icon>${s.distance}</span></div></div><button class="mt-2 w-full border-t border-dashed border-[#dfcaa8] pt-2 text-left text-[10px] text-[#785d4e]" onclick="toast('答案:${s.answer}')">趣味问答:${s.quiz} <b class="float-right text-[#a83f2d]">点我揭晓</b></button></article>`).join('')||'<p class="py-8 text-center text-xs text-[#9b8474]">没有同时匹配这些标签的景点</p>'}
  58. function maybeLoadMore(){const box=document.getElementById('scroller');if(!loading&&box.scrollTop+box.clientHeight>box.scrollHeight-90&&visible<spots.length){loading=true;setTimeout(()=>{visible+=2;renderSpots();loading=false;toast('又发现两处闽南好去处')},600)}}
  59. function searchAll(){const q=document.getElementById('search').value.trim();const hit=!q||['古厝','日落','亲子','古城','海边','闽南','研学','景点','活动'].some(x=>x.includes(q)||q.includes(x));document.getElementById('empty').classList.toggle('hidden',hit);document.getElementById('content').classList.toggle('hidden',!hit)}function clearSearch(){document.getElementById('search').value='';searchAll()}
  60. function dialectEgg(){if(Math.random()>.45){const b=document.getElementById('dialectBubble');b.textContent=['食饱未?来去𨑨迌!','有闲来坐,食茶配话仙。','足趣味,阁再来!'][Math.floor(Math.random()*3)];b.classList.remove('hidden');setTimeout(()=>b.classList.add('hidden'),2000)}}
  61. function openModal(id){const m=document.getElementById(id);m.classList.remove('hidden');m.classList.add('flex')}function closeModal(id){const m=document.getElementById(id);m.classList.add('hidden');m.classList.remove('flex')}function showMechanism(title,text){document.getElementById('mechanismTitle').textContent=title;document.getElementById('mechanismText').textContent=text;openModal('mechanismModal');toast('已打开工作机制详情')}function awardBadge(){openModal('badgeModal')}function gameAnswer(ok){if(ok){score+=20;document.getElementById('scoreText').textContent='答对啦!+20 积分,当前:'+score;toast('积分已同步至个人中心')}else{document.getElementById('scoreText').textContent='差一点,再听听闽南乡音吧'}}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'),1800)}
  62. renderNews();renderAchievements();renderSpots();
  63. </script>
  64. </body></html>